804 lines
50 KiB
HTML
804 lines
50 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="fa" dir="rtl">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>FX Journal Pro • ژورنال تخصصی و تحلیلی فارکس</title>
|
||
|
||
<!-- Tailwind CSS (CDN) -->
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<!-- FontAwesome 6 Icons -->
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
||
<!-- Chart.js -->
|
||
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.2/dist/chart.umd.min.js"></script>
|
||
|
||
<link rel="stylesheet" href="/style.css">
|
||
</head>
|
||
<body class="dark-mode">
|
||
|
||
<!-- Top Navigation Header -->
|
||
<header class="bg-gray-900 border-b border-gray-800 sticky top-0 z-40 px-4 lg:px-8 py-3.5 shadow-md">
|
||
<div class="max-w-7xl mx-auto flex flex-wrap items-center justify-between gap-4">
|
||
|
||
<!-- Logo & Brand -->
|
||
<div class="flex items-center gap-3.5">
|
||
<div class="w-10 h-10 rounded-xl bg-gradient-to-tr from-blue-600 to-indigo-600 flex items-center justify-center text-white shadow-lg shadow-blue-500/20 text-lg">
|
||
<i class="fa-solid fa-chart-line"></i>
|
||
</div>
|
||
<div>
|
||
<h1 class="text-lg font-bold text-white tracking-wide flex items-center gap-2">
|
||
FX Journal Pro
|
||
<span class="text-xs bg-blue-500/20 text-blue-400 border border-blue-500/30 px-2 py-0.5 rounded-full font-normal">مایافایکسبوک</span>
|
||
</h1>
|
||
<p class="text-xs text-gray-400">سامانه جامع ژورنالنویسی و تحلیل پیشرفته معاملات</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Account Selector & Quick Stats -->
|
||
<div class="flex items-center gap-4 flex-wrap">
|
||
<div class="flex items-center gap-2 bg-gray-800/90 border border-gray-700/80 px-3 py-1.5 rounded-xl">
|
||
<i class="fa-solid fa-wallet text-blue-400 text-sm"></i>
|
||
<span class="text-xs text-gray-400 font-medium">حساب فعال:</span>
|
||
<select id="accountSelect" onchange="app.switchAccount(this.value)" class="bg-transparent text-sm text-white font-semibold focus:outline-none cursor-pointer">
|
||
<!-- Populated by JS -->
|
||
</select>
|
||
<button onclick="app.openModal('modalAccount')" title="مدیریت حسابها" class="text-gray-400 hover:text-white mr-1 text-xs">
|
||
<i class="fa-solid fa-gear"></i>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Action Buttons -->
|
||
<div class="flex items-center gap-2">
|
||
<button onclick="app.openNewTradeModal()" class="bg-gradient-to-r from-emerald-600 to-teal-600 hover:from-emerald-500 hover:to-teal-500 text-white text-sm font-semibold px-4 py-2 rounded-xl shadow-lg shadow-emerald-500/20 flex items-center gap-2 transition">
|
||
<i class="fa-solid fa-plus"></i>
|
||
<span>ثبت معامله</span>
|
||
</button>
|
||
|
||
<button onclick="app.openModal('modalImport')" class="bg-gray-800 hover:bg-gray-700 text-gray-200 border border-gray-700 text-sm font-medium px-3.5 py-2 rounded-xl flex items-center gap-2 transition" title="ایمپورت استیتمنت متاتریدر ۴ و ۵">
|
||
<i class="fa-solid fa-file-import text-blue-400"></i>
|
||
<span class="hidden sm:inline">ایمپورت MT4/5</span>
|
||
</button>
|
||
|
||
<button onclick="app.exportTradesCSV()" class="bg-gray-800 hover:bg-gray-700 text-gray-200 border border-gray-700 text-sm font-medium p-2.5 rounded-xl transition" title="خروجی CSV">
|
||
<i class="fa-solid fa-file-excel text-emerald-400"></i>
|
||
</button>
|
||
|
||
<button onclick="app.toggleTheme()" class="bg-gray-800 hover:bg-gray-700 text-gray-200 border border-gray-700 text-sm font-medium p-2.5 rounded-xl transition" title="تغییر تم">
|
||
<i id="themeIcon" class="fa-solid fa-moon text-amber-400"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</header>
|
||
|
||
<!-- Main Container -->
|
||
<main class="max-w-7xl mx-auto px-4 lg:px-8 py-6">
|
||
|
||
<!-- Top Account Summary Ticker -->
|
||
<div id="accountSummaryTicker" class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-3.5 mb-6">
|
||
<!-- Cards dynamically rendered by JS -->
|
||
</div>
|
||
|
||
<!-- Navigation Tabs -->
|
||
<div class="flex items-center gap-2 border-b border-gray-800 pb-3 mb-6 overflow-x-auto">
|
||
<button onclick="app.switchTab('overview')" id="tab-overview" class="nav-tab active">
|
||
<i class="fa-solid fa-gauge-high"></i>
|
||
<span>داشبورد تحلیلی</span>
|
||
</button>
|
||
<button onclick="app.switchTab('deep_analytics')" id="tab-deep_analytics" class="nav-tab">
|
||
<i class="fa-solid fa-chart-pie"></i>
|
||
<span>آنالیز پیشرفته</span>
|
||
</button>
|
||
<button onclick="app.switchTab('trades')" id="tab-trades" class="nav-tab">
|
||
<i class="fa-solid fa-list-check"></i>
|
||
<span>ژورنال و معاملات</span>
|
||
</button>
|
||
<button onclick="app.switchTab('calendar')" id="tab-calendar" class="nav-tab">
|
||
<i class="fa-solid fa-calendar-days"></i>
|
||
<span>تقویم معاملاتی</span>
|
||
</button>
|
||
<button onclick="app.switchTab('settings')" id="tab-settings" class="nav-tab">
|
||
<i class="fa-solid fa-sliders"></i>
|
||
<span>تنظیمات و حسابها</span>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- ============================================================ -->
|
||
<!-- TAB 1: OVERVIEW & CHARTS -->
|
||
<!-- ============================================================ -->
|
||
<div id="view-overview" class="space-y-6">
|
||
|
||
<!-- Chart Row: Growth Curve & Drawdown -->
|
||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||
<!-- Main Growth Curve (Myfxbook Style) -->
|
||
<div class="lg:col-span-2 glass-card p-5">
|
||
<div class="flex items-center justify-between mb-4 flex-wrap gap-2">
|
||
<div>
|
||
<h3 class="text-base font-bold text-white flex items-center gap-2">
|
||
<i class="fa-solid fa-chart-area text-blue-500"></i>
|
||
نمودار رشد سرمایه و بالانس (Growth Curve)
|
||
</h3>
|
||
<p class="text-xs text-gray-400">روند تجمعی بازدهی، سود دلاری و بالانس حساب</p>
|
||
</div>
|
||
<div class="flex items-center gap-2 text-xs">
|
||
<span class="flex items-center gap-1 text-emerald-400 font-semibold bg-emerald-500/10 px-2.5 py-1 rounded-md border border-emerald-500/20">
|
||
<span class="w-2 h-2 rounded-full bg-emerald-400"></span>
|
||
رشد کل: <span id="chartGainPct" class="num-font">+0.0%</span>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div class="relative h-72 sm:h-80 w-full">
|
||
<canvas id="chartGrowth"></canvas>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Secondary Chart: Win/Loss Ratio & Long/Short -->
|
||
<div class="glass-card p-5 flex flex-col justify-between">
|
||
<div>
|
||
<h3 class="text-base font-bold text-white flex items-center gap-2 mb-1">
|
||
<i class="fa-solid fa-pie-chart text-purple-400"></i>
|
||
نسبت برد به باخت (Win Rate)
|
||
</h3>
|
||
<p class="text-xs text-gray-400 mb-4">تفکیک سوددهی و جهت پوزیشنها</p>
|
||
<div class="relative h-48 w-full flex items-center justify-center">
|
||
<canvas id="chartWinRate"></canvas>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-2 gap-3 mt-4 pt-4 border-t border-gray-800 text-xs">
|
||
<div class="bg-gray-800/50 p-2.5 rounded-lg border border-gray-700/50">
|
||
<span class="text-gray-400 block mb-1">معاملات خرید (Long)</span>
|
||
<div class="flex items-center justify-between font-semibold">
|
||
<span id="longWinRate" class="text-emerald-400 num-font">0%</span>
|
||
<span id="longProfit" class="text-gray-200 num-font">$0</span>
|
||
</div>
|
||
</div>
|
||
<div class="bg-gray-800/50 p-2.5 rounded-lg border border-gray-700/50">
|
||
<span class="text-gray-400 block mb-1">معاملات فروش (Short)</span>
|
||
<div class="flex items-center justify-between font-semibold">
|
||
<span id="shortWinRate" class="text-emerald-400 num-font">0%</span>
|
||
<span id="shortProfit" class="text-gray-200 num-font">$0</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Key Statistical Ratios Grid (Myfxbook Style) -->
|
||
<div class="glass-card p-6">
|
||
<h3 class="text-base font-bold text-white flex items-center gap-2 mb-4">
|
||
<i class="fa-solid fa-calculator text-indigo-400"></i>
|
||
ماتریس شاخصهای آماری و مدیریت ریسک (Key Trading Metrics)
|
||
</h3>
|
||
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-4 text-center">
|
||
|
||
<div class="bg-gray-800/40 border border-gray-800 p-3.5 rounded-xl">
|
||
<span class="text-xs text-gray-400 block mb-1">فاکتور سود (Profit Factor)</span>
|
||
<span id="metricProfitFactor" class="text-lg font-bold text-blue-400 num-font">0.00</span>
|
||
</div>
|
||
|
||
<div class="bg-gray-800/40 border border-gray-800 p-3.5 rounded-xl">
|
||
<span class="text-xs text-gray-400 block mb-1">حداکثر افت (Max Drawdown)</span>
|
||
<span id="metricMaxDD" class="text-lg font-bold text-rose-400 num-font">0.0%</span>
|
||
</div>
|
||
|
||
<div class="bg-gray-800/40 border border-gray-800 p-3.5 rounded-xl">
|
||
<span class="text-xs text-gray-400 block mb-1">امید ریاضی (Expectancy)</span>
|
||
<span id="metricExpectancy" class="text-lg font-bold text-emerald-400 num-font">$0.00</span>
|
||
</div>
|
||
|
||
<div class="bg-gray-800/40 border border-gray-800 p-3.5 rounded-xl">
|
||
<span class="text-xs text-gray-400 block mb-1">نسبت برد/باخت (R:R واقعی)</span>
|
||
<span id="metricWinLossRatio" class="text-lg font-bold text-amber-400 num-font">0.00</span>
|
||
</div>
|
||
|
||
<div class="bg-gray-800/40 border border-gray-800 p-3.5 rounded-xl">
|
||
<span class="text-xs text-gray-400 block mb-1">شاخص شارپ (Sharpe Ratio)</span>
|
||
<span id="metricSharpe" class="text-lg font-bold text-indigo-400 num-font">0.00</span>
|
||
</div>
|
||
|
||
<div class="bg-gray-800/40 border border-gray-800 p-3.5 rounded-xl">
|
||
<span class="text-xs text-gray-400 block mb-1">کل پیپهای کسبشده</span>
|
||
<span id="metricTotalPips" class="text-lg font-bold text-teal-400 num-font">0.0</span>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="grid grid-cols-2 sm:grid-cols-4 gap-4 mt-4 pt-4 border-t border-gray-800/80 text-xs">
|
||
<div class="flex justify-between items-center px-2">
|
||
<span class="text-gray-400">میانگین سود هر برد:</span>
|
||
<span id="metricAvgWin" class="font-bold text-emerald-400 num-font">$0.00</span>
|
||
</div>
|
||
<div class="flex justify-between items-center px-2">
|
||
<span class="text-gray-400">میانگین زیان هر باخت:</span>
|
||
<span id="metricAvgLoss" class="font-bold text-rose-400 num-font">$0.00</span>
|
||
</div>
|
||
<div class="flex justify-between items-center px-2">
|
||
<span class="text-gray-400">بیشترین برد متوالی:</span>
|
||
<span id="metricMaxConsecWins" class="font-bold text-emerald-400 num-font">0</span>
|
||
</div>
|
||
<div class="flex justify-between items-center px-2">
|
||
<span class="text-gray-400">میانگین زمان پوزیشن:</span>
|
||
<span id="metricAvgDuration" class="font-bold text-gray-200">0 ساعت</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Drawdown Curve & Monthly Return Table -->
|
||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||
<!-- Drawdown Chart -->
|
||
<div class="glass-card p-5">
|
||
<h3 class="text-base font-bold text-white flex items-center gap-2 mb-4">
|
||
<i class="fa-solid fa-water-ladder text-rose-400"></i>
|
||
نمودار دراودان (Drawdown Curve)
|
||
</h3>
|
||
<div class="relative h-64 w-full">
|
||
<canvas id="chartDrawdown"></canvas>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Monthly Heatmap Returns (Year x Months) -->
|
||
<div class="glass-card p-5">
|
||
<h3 class="text-base font-bold text-white flex items-center gap-2 mb-4">
|
||
<i class="fa-solid fa-table-cells text-amber-400"></i>
|
||
ماتریس بازدهی ماهانه (Monthly Returns %)
|
||
</h3>
|
||
<div class="overflow-x-auto">
|
||
<table class="w-full text-center text-xs custom-table">
|
||
<thead>
|
||
<tr>
|
||
<th>سال</th>
|
||
<th>Jan</th><th>Feb</th><th>Mar</th><th>Apr</th><th>May</th><th>Jun</th>
|
||
<th>Jul</th><th>Aug</th><th>Sep</th><th>Oct</th><th>Nov</th><th>Dec</th>
|
||
<th>مجموع</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="monthlyReturnsTable">
|
||
<!-- Populated by JS -->
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- ============================================================ -->
|
||
<!-- TAB 2: DEEP ANALYTICS -->
|
||
<!-- ============================================================ -->
|
||
<div id="view-deep_analytics" class="hidden space-y-6">
|
||
|
||
<!-- Performance by Symbol & Performance by Strategy -->
|
||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||
<!-- By Symbol -->
|
||
<div class="glass-card p-5">
|
||
<h3 class="text-base font-bold text-white flex items-center gap-2 mb-4">
|
||
<i class="fa-solid fa-coins text-amber-400"></i>
|
||
عملکرد به تفکیک نمادها (Performance by Symbol)
|
||
</h3>
|
||
<div class="relative h-64 w-full mb-4">
|
||
<canvas id="chartSymbols"></canvas>
|
||
</div>
|
||
<div class="overflow-x-auto max-h-60">
|
||
<table class="w-full text-xs custom-table text-right">
|
||
<thead>
|
||
<tr>
|
||
<th>نماد</th>
|
||
<th>تعداد</th>
|
||
<th>وین ریت</th>
|
||
<th>پیپ</th>
|
||
<th>سود/زیان خالص</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="symbolsTable">
|
||
<!-- Populated by JS -->
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- By Strategy -->
|
||
<div class="glass-card p-5">
|
||
<h3 class="text-base font-bold text-white flex items-center gap-2 mb-4">
|
||
<i class="fa-solid fa-chess-knight text-purple-400"></i>
|
||
عملکرد به تفکیک استراتژیها (By Strategy)
|
||
</h3>
|
||
<div class="overflow-x-auto max-h-80">
|
||
<table class="w-full text-xs custom-table text-right">
|
||
<thead>
|
||
<tr>
|
||
<th>استراتژی</th>
|
||
<th>تعداد</th>
|
||
<th>وین ریت</th>
|
||
<th>فاکتور سود</th>
|
||
<th>سود/زیان</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="strategiesTable">
|
||
<!-- Populated by JS -->
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Sessions & Time Analysis (Hourly & Day of Week) -->
|
||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||
<!-- Hourly Distribution -->
|
||
<div class="glass-card p-5">
|
||
<h3 class="text-base font-bold text-white flex items-center gap-2 mb-4">
|
||
<i class="fa-solid fa-clock text-blue-400"></i>
|
||
توزیع سود و معاملات بر اساس ساعات شبانهروز (Hourly)
|
||
</h3>
|
||
<div class="relative h-64 w-full">
|
||
<canvas id="chartHourly"></canvas>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Days of Week & Psychology / Emotions -->
|
||
<div class="glass-card p-5">
|
||
<h3 class="text-base font-bold text-white flex items-center gap-2 mb-4">
|
||
<i class="fa-solid fa-brain text-pink-400"></i>
|
||
تحلیل روانشناسی و روزهای هفته (Emotions & Days)
|
||
</h3>
|
||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||
<div>
|
||
<h4 class="text-xs font-bold text-gray-300 mb-2">روزهای هفته:</h4>
|
||
<div id="dayOfWeekList" class="space-y-1.5 text-xs">
|
||
<!-- JS -->
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<h4 class="text-xs font-bold text-gray-300 mb-2">وضعیت ذهنی / احساسی:</h4>
|
||
<div id="emotionList" class="space-y-1.5 text-xs">
|
||
<!-- JS -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- ============================================================ -->
|
||
<!-- TAB 3: TRADES JOURNAL & LOG -->
|
||
<!-- ============================================================ -->
|
||
<div id="view-trades" class="hidden space-y-4">
|
||
|
||
<!-- Filters & Search Bar -->
|
||
<div class="glass-card p-4 flex flex-wrap items-center justify-between gap-3">
|
||
<div class="flex items-center gap-3 flex-wrap">
|
||
<!-- Status Filter -->
|
||
<select id="tradeFilterStatus" onchange="app.loadTrades()" class="bg-gray-800 border border-gray-700 text-xs text-gray-200 px-3 py-2 rounded-lg">
|
||
<option value="all">همه وضعیتها</option>
|
||
<option value="closed">بستهشده (Closed)</option>
|
||
<option value="open">پوزیشنهای باز (Open)</option>
|
||
</select>
|
||
|
||
<!-- Symbol Filter -->
|
||
<select id="tradeFilterSymbol" onchange="app.loadTrades()" class="bg-gray-800 border border-gray-700 text-xs text-gray-200 px-3 py-2 rounded-lg">
|
||
<option value="all">همه نمادها</option>
|
||
<option value="EURUSD">EURUSD</option>
|
||
<option value="GBPUSD">GBPUSD</option>
|
||
<option value="XAUUSD">XAUUSD (طلا)</option>
|
||
<option value="USDJPY">USDJPY</option>
|
||
<option value="BTCUSD">BTCUSD</option>
|
||
<option value="US30">US30</option>
|
||
</select>
|
||
|
||
<!-- Search Input -->
|
||
<div class="relative">
|
||
<input type="text" id="tradeSearch" onkeyup="app.handleSearch(event)" placeholder="جستجو در تیکت، نماد، یادداشت..." class="bg-gray-800 border border-gray-700 text-xs text-gray-200 pl-8 pr-3 py-2 rounded-lg w-48 sm:w-64 focus:outline-none focus:border-blue-500">
|
||
<i class="fa-solid fa-search absolute left-2.5 top-2.5 text-gray-400 text-xs"></i>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="text-xs text-gray-400">
|
||
نمایش <span id="tradesCountLabel" class="font-bold text-white num-font">0</span> معامله
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Trades Table -->
|
||
<div class="glass-card overflow-hidden">
|
||
<div class="overflow-x-auto">
|
||
<table class="w-full text-xs text-right custom-table">
|
||
<thead>
|
||
<tr>
|
||
<th>#</th>
|
||
<th>تیکت / نماد</th>
|
||
<th>نوع</th>
|
||
<th>حجم (Lot)</th>
|
||
<th>قیمت ورود</th>
|
||
<th>قیمت خروج</th>
|
||
<th>حد ضرر / سود</th>
|
||
<th>زمان باز شدن</th>
|
||
<th>پیپ</th>
|
||
<th>سود/زیان ($)</th>
|
||
<th>استراتژی / حس</th>
|
||
<th>چارت</th>
|
||
<th>عملیات</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="tradesTableBody">
|
||
<!-- Populated by JS -->
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<!-- Pagination -->
|
||
<div class="p-3.5 border-t border-gray-800 flex items-center justify-between text-xs text-gray-400">
|
||
<span id="paginationInfo">صفحه ۱ از ۱</span>
|
||
<div class="flex items-center gap-2">
|
||
<button onclick="app.prevPage()" id="btnPrevPage" class="px-3 py-1 bg-gray-800 hover:bg-gray-700 rounded-md disabled:opacity-40">قبلی</button>
|
||
<button onclick="app.nextPage()" id="btnNextPage" class="px-3 py-1 bg-gray-800 hover:bg-gray-700 rounded-md disabled:opacity-40">بعدی</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- ============================================================ -->
|
||
<!-- TAB 4: TRADING CALENDAR -->
|
||
<!-- ============================================================ -->
|
||
<div id="view-calendar" class="hidden space-y-6">
|
||
<div class="glass-card p-6">
|
||
<div class="flex items-center justify-between mb-6 flex-wrap gap-4">
|
||
<div>
|
||
<h3 class="text-lg font-bold text-white flex items-center gap-2">
|
||
<i class="fa-solid fa-calendar-alt text-blue-400"></i>
|
||
تقویم سود و زیان ماهانه (Trading Calendar)
|
||
</h3>
|
||
<p class="text-xs text-gray-400">مشاهده سود/زیان هر روز معاملاتی و بازدهی تجمعی هفتگی</p>
|
||
</div>
|
||
<div class="flex items-center gap-2">
|
||
<button onclick="app.prevMonth()" class="p-2 bg-gray-800 hover:bg-gray-700 text-gray-200 rounded-lg">
|
||
<i class="fa-solid fa-chevron-right"></i>
|
||
</button>
|
||
<span id="calendarMonthLabel" class="text-sm font-bold text-white px-3 num-font">August 2026</span>
|
||
<button onclick="app.nextMonth()" class="p-2 bg-gray-800 hover:bg-gray-700 text-gray-200 rounded-lg">
|
||
<i class="fa-solid fa-chevron-left"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Calendar Grid -->
|
||
<div class="grid grid-cols-7 gap-2 mb-2 text-center text-xs font-bold text-gray-400">
|
||
<div>Mon (دوشنبه)</div>
|
||
<div>Tue (سهشنبه)</div>
|
||
<div>Wed (چهارشنبه)</div>
|
||
<div>Thu (پنجشنبه)</div>
|
||
<div>Fri (جمعه)</div>
|
||
<div class="text-gray-600">Sat (شنبه)</div>
|
||
<div class="text-gray-600">Sun (یکشنبه)</div>
|
||
</div>
|
||
|
||
<div id="calendarGrid" class="grid grid-cols-7 gap-2.5 min-h-[360px]">
|
||
<!-- Populated by JS -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ============================================================ -->
|
||
<!-- TAB 5: SETTINGS & ACCOUNTS -->
|
||
<!-- ============================================================ -->
|
||
<div id="view-settings" class="hidden space-y-6">
|
||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||
<!-- Account Management -->
|
||
<div class="glass-card p-6">
|
||
<div class="flex items-center justify-between mb-4">
|
||
<h3 class="text-base font-bold text-white flex items-center gap-2">
|
||
<i class="fa-solid fa-users text-blue-400"></i>
|
||
حسابهای معاملاتی (Trading Accounts)
|
||
</h3>
|
||
<button onclick="app.openModal('modalAccount')" class="text-xs bg-blue-600 hover:bg-blue-500 text-white px-3 py-1.5 rounded-lg">
|
||
+ افزودن حساب جدید
|
||
</button>
|
||
</div>
|
||
<div id="accountsListSettings" class="space-y-3">
|
||
<!-- Populated by JS -->
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Tools & Maintenance -->
|
||
<div class="glass-card p-6">
|
||
<h3 class="text-base font-bold text-white flex items-center gap-2 mb-4">
|
||
<i class="fa-solid fa-wrench text-amber-400"></i>
|
||
ابزارها و پشتیبانگیری
|
||
</h3>
|
||
<div class="space-y-3">
|
||
<div class="p-4 bg-gray-800/40 rounded-xl border border-gray-700/40 flex items-center justify-between">
|
||
<div>
|
||
<h4 class="text-sm font-semibold text-white">بازیابی دادههای نمونه مایافایکسبوک</h4>
|
||
<p class="text-xs text-gray-400">تولید مجدد بیش از ۲۰ معامله واقعی و متنوع برای آزمایش سیستم</p>
|
||
</div>
|
||
<button onclick="app.resetSampleData()" class="bg-amber-600/20 text-amber-400 border border-amber-500/30 hover:bg-amber-600/30 text-xs px-3 py-2 rounded-lg font-medium">
|
||
بازتولید نمونهها
|
||
</button>
|
||
</div>
|
||
|
||
<div class="p-4 bg-gray-800/40 rounded-xl border border-gray-700/40 flex items-center justify-between">
|
||
<div>
|
||
<h4 class="text-sm font-semibold text-white">خروجی کامل اکسل / CSV</h4>
|
||
<p class="text-xs text-gray-400">دانلود تمام تاریخچه معاملات با جزئیات کامل</p>
|
||
</div>
|
||
<button onclick="app.exportTradesCSV()" class="bg-emerald-600/20 text-emerald-400 border border-emerald-500/30 hover:bg-emerald-600/30 text-xs px-3 py-2 rounded-lg font-medium">
|
||
دانلود CSV
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</main>
|
||
|
||
<!-- ============================================================ -->
|
||
<!-- MODAL 1: NEW / EDIT TRADE -->
|
||
<!-- ============================================================ -->
|
||
<div id="modalTrade" class="fixed inset-0 z-50 hidden modal-backdrop flex items-center justify-center p-4">
|
||
<div class="modal-content w-full max-w-2xl max-h-[90vh] overflow-y-auto p-6 text-right">
|
||
<div class="flex items-center justify-between pb-4 border-b border-gray-800 mb-5">
|
||
<h3 id="modalTradeTitle" class="text-lg font-bold text-white flex items-center gap-2">
|
||
<i class="fa-solid fa-plus-circle text-emerald-400"></i>
|
||
<span>ثبت معامله جدید</span>
|
||
</h3>
|
||
<button onclick="app.closeModal('modalTrade')" class="text-gray-400 hover:text-white text-lg">
|
||
<i class="fa-solid fa-xmark"></i>
|
||
</button>
|
||
</div>
|
||
|
||
<form id="formTrade" onsubmit="app.saveTrade(event)" class="space-y-4">
|
||
<input type="hidden" id="tradeId">
|
||
|
||
<!-- Symbol & Type & Lot -->
|
||
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
|
||
<div>
|
||
<label class="block text-xs font-semibold text-gray-300 mb-1.5">نماد معاملاتی (Symbol) *</label>
|
||
<input type="text" id="tradeSymbol" required placeholder="EURUSD, XAUUSD, ..." class="w-full bg-gray-800 border border-gray-700 text-sm text-white px-3 py-2 rounded-lg uppercase focus:border-blue-500 focus:outline-none">
|
||
</div>
|
||
<div>
|
||
<label class="block text-xs font-semibold text-gray-300 mb-1.5">نوع پوزیشن *</label>
|
||
<div class="grid grid-cols-2 gap-2">
|
||
<label class="cursor-pointer">
|
||
<input type="radio" name="tradeType" value="buy" checked class="peer sr-only">
|
||
<div class="text-center py-2 rounded-lg text-xs font-bold border border-gray-700 bg-gray-800 peer-checked:bg-emerald-600 peer-checked:text-white peer-checked:border-emerald-500 transition">خرید (BUY)</div>
|
||
</label>
|
||
<label class="cursor-pointer">
|
||
<input type="radio" name="tradeType" value="sell" class="peer sr-only">
|
||
<div class="text-center py-2 rounded-lg text-xs font-bold border border-gray-700 bg-gray-800 peer-checked:bg-rose-600 peer-checked:text-white peer-checked:border-rose-500 transition">فروش (SELL)</div>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<label class="block text-xs font-semibold text-gray-300 mb-1.5">حجم معامله (Lot) *</label>
|
||
<input type="number" step="0.01" id="tradeLotSize" required value="0.10" class="w-full bg-gray-800 border border-gray-700 text-sm text-white px-3 py-2 rounded-lg num-font focus:border-blue-500 focus:outline-none">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Open Price, Close Price, Stop Loss, Take Profit -->
|
||
<div class="grid grid-cols-2 sm:grid-cols-4 gap-3">
|
||
<div>
|
||
<label class="block text-xs font-semibold text-gray-300 mb-1">قیمت ورود *</label>
|
||
<input type="number" step="any" id="tradeOpenPrice" required oninput="app.calcTradeFields()" placeholder="1.0850" class="w-full bg-gray-800 border border-gray-700 text-sm text-white px-3 py-2 rounded-lg num-font focus:border-blue-500 focus:outline-none">
|
||
</div>
|
||
<div>
|
||
<label class="block text-xs font-semibold text-gray-300 mb-1">قیمت خروج</label>
|
||
<input type="number" step="any" id="tradeClosePrice" oninput="app.calcTradeFields()" placeholder="خالی = ترید باز" class="w-full bg-gray-800 border border-gray-700 text-sm text-white px-3 py-2 rounded-lg num-font focus:border-blue-500 focus:outline-none">
|
||
</div>
|
||
<div>
|
||
<label class="block text-xs font-semibold text-gray-300 mb-1">حد ضرر (SL)</label>
|
||
<input type="number" step="any" id="tradeStopLoss" placeholder="1.0820" class="w-full bg-gray-800 border border-gray-700 text-sm text-white px-3 py-2 rounded-lg num-font focus:border-blue-500 focus:outline-none">
|
||
</div>
|
||
<div>
|
||
<label class="block text-xs font-semibold text-gray-300 mb-1">حد سود (TP)</label>
|
||
<input type="number" step="any" id="tradeTakeProfit" placeholder="1.0900" class="w-full bg-gray-800 border border-gray-700 text-sm text-white px-3 py-2 rounded-lg num-font focus:border-blue-500 focus:outline-none">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Profit ($), Pips, Commission, Swap -->
|
||
<div class="grid grid-cols-2 sm:grid-cols-4 gap-3 bg-gray-800/50 p-3 rounded-xl border border-gray-700/50">
|
||
<div>
|
||
<label class="block text-xs font-semibold text-gray-400 mb-1">سود/زیان دلاری ($)</label>
|
||
<input type="number" step="0.01" id="tradeProfit" placeholder="خودکار" class="w-full bg-gray-800 border border-gray-700 text-sm font-bold text-emerald-400 px-3 py-1.5 rounded-lg num-font">
|
||
</div>
|
||
<div>
|
||
<label class="block text-xs font-semibold text-gray-400 mb-1">میزان پیپ (Pips)</label>
|
||
<input type="number" step="0.1" id="tradePips" placeholder="خودکار" class="w-full bg-gray-800 border border-gray-700 text-sm font-bold text-blue-400 px-3 py-1.5 rounded-lg num-font">
|
||
</div>
|
||
<div>
|
||
<label class="block text-xs font-semibold text-gray-400 mb-1">کمیسیون ($)</label>
|
||
<input type="number" step="0.01" id="tradeCommission" value="0.00" class="w-full bg-gray-800 border border-gray-700 text-sm text-gray-300 px-3 py-1.5 rounded-lg num-font">
|
||
</div>
|
||
<div>
|
||
<label class="block text-xs font-semibold text-gray-400 mb-1">سواپ ($)</label>
|
||
<input type="number" step="0.01" id="tradeSwap" value="0.00" class="w-full bg-gray-800 border border-gray-700 text-sm text-gray-300 px-3 py-1.5 rounded-lg num-font">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Strategy, Session, Timeframe, Emotion -->
|
||
<div class="grid grid-cols-2 sm:grid-cols-4 gap-3">
|
||
<div>
|
||
<label class="block text-xs font-semibold text-gray-300 mb-1">استراتژی / ستاپ</label>
|
||
<select id="tradeStrategy" class="w-full bg-gray-800 border border-gray-700 text-xs text-white px-2.5 py-2 rounded-lg">
|
||
<option value="Price Action">Price Action</option>
|
||
<option value="ICT / SMC">ICT / SMC</option>
|
||
<option value="Trend Following">Trend Following</option>
|
||
<option value="Scalping">Scalping</option>
|
||
<option value="Reversal / Divergence">Reversal / Divergence</option>
|
||
<option value="News Trading">News Trading</option>
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<label class="block text-xs font-semibold text-gray-300 mb-1">سشن معاملاتی</label>
|
||
<select id="tradeSession" class="w-full bg-gray-800 border border-gray-700 text-xs text-white px-2.5 py-2 rounded-lg">
|
||
<option value="London">لندن (London)</option>
|
||
<option value="New York">نیویورک (New York)</option>
|
||
<option value="Asian">آسیا (Asian)</option>
|
||
<option value="Overlap">همپوشانی (Overlap)</option>
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<label class="block text-xs font-semibold text-gray-300 mb-1">تایم فریم</label>
|
||
<select id="tradeTimeframe" class="w-full bg-gray-800 border border-gray-700 text-xs text-white px-2.5 py-2 rounded-lg">
|
||
<option value="M1">M1</option>
|
||
<option value="M5">M5</option>
|
||
<option value="M15" selected>M15</option>
|
||
<option value="H1">H1</option>
|
||
<option value="H4">H4</option>
|
||
<option value="D1">D1</option>
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<label class="block text-xs font-semibold text-gray-300 mb-1">حس و ذهنیت تریدر</label>
|
||
<select id="tradeEmotion" class="w-full bg-gray-800 border border-gray-700 text-xs text-white px-2.5 py-2 rounded-lg">
|
||
<option value="Disciplined">منضبط (Disciplined)</option>
|
||
<option value="Confident">با اعتماد به نفس (Confident)</option>
|
||
<option value="Neutral">خنثی / عادی (Neutral)</option>
|
||
<option value="Impatient">عجول (Impatient)</option>
|
||
<option value="Greedy">طمعکار (Greedy)</option>
|
||
<option value="Fearful">ترسیده (Fearful)</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Notes & Lessons -->
|
||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
||
<div>
|
||
<label class="block text-xs font-semibold text-gray-300 mb-1">یادداشت دلایل ورود به معامله</label>
|
||
<textarea id="tradeEntryNotes" rows="2" placeholder="چرا وارد این معامله شدید؟ شرایط تاییدیه چه بود؟" class="w-full bg-gray-800 border border-gray-700 text-xs text-white p-2.5 rounded-lg focus:border-blue-500 focus:outline-none"></textarea>
|
||
</div>
|
||
<div>
|
||
<label class="block text-xs font-semibold text-gray-300 mb-1">درسهای آموختهشده و خروج</label>
|
||
<textarea id="tradeLessons" rows="2" placeholder="نکات مهم و درسهای این پوزیشن..." class="w-full bg-gray-800 border border-gray-700 text-xs text-white p-2.5 rounded-lg focus:border-blue-500 focus:outline-none"></textarea>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Screenshots Upload -->
|
||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
||
<div>
|
||
<label class="block text-xs font-semibold text-gray-300 mb-1">اسکرینشات چارت هنگام ورود</label>
|
||
<input type="file" id="fileScreenshotEntry" onchange="app.uploadScreenshot(this, 'tradeScreenshotEntryUrl')" class="text-xs text-gray-400 file:bg-gray-800 file:text-blue-400 file:border-0 file:rounded-lg file:px-3 file:py-1.5 file:mr-2">
|
||
<input type="hidden" id="tradeScreenshotEntryUrl">
|
||
</div>
|
||
<div>
|
||
<label class="block text-xs font-semibold text-gray-300 mb-1">اسکرینشات چارت هنگام خروج</label>
|
||
<input type="file" id="fileScreenshotExit" onchange="app.uploadScreenshot(this, 'tradeScreenshotExitUrl')" class="text-xs text-gray-400 file:bg-gray-800 file:text-blue-400 file:border-0 file:rounded-lg file:px-3 file:py-1.5 file:mr-2">
|
||
<input type="hidden" id="tradeScreenshotExitUrl">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Submit Button -->
|
||
<div class="pt-4 border-t border-gray-800 flex items-center justify-end gap-3">
|
||
<button type="button" onclick="app.closeModal('modalTrade')" class="px-4 py-2 bg-gray-800 hover:bg-gray-700 text-gray-300 text-sm font-medium rounded-xl">انصراف</button>
|
||
<button type="submit" class="px-6 py-2 bg-blue-600 hover:bg-blue-500 text-white text-sm font-bold rounded-xl shadow-lg shadow-blue-500/20">ذخیره معامله</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ============================================================ -->
|
||
<!-- MODAL 2: MT4 / MT5 STATEMENT IMPORTER -->
|
||
<!-- ============================================================ -->
|
||
<div id="modalImport" class="fixed inset-0 z-50 hidden modal-backdrop flex items-center justify-center p-4">
|
||
<div class="modal-content w-full max-w-lg p-6 text-right">
|
||
<div class="flex items-center justify-between pb-3 border-b border-gray-800 mb-4">
|
||
<h3 class="text-base font-bold text-white flex items-center gap-2">
|
||
<i class="fa-solid fa-file-import text-blue-400"></i>
|
||
<span>ایمپورت گزارش متاتریدر ۴ و ۵ (MT4/MT5)</span>
|
||
</h3>
|
||
<button onclick="app.closeModal('modalImport')" class="text-gray-400 hover:text-white">
|
||
<i class="fa-solid fa-xmark"></i>
|
||
</button>
|
||
</div>
|
||
|
||
<p class="text-xs text-gray-300 mb-4 leading-relaxed">
|
||
میتوانید فایل گزارش یا استیتمنت اکسپورتشده از متاتریدر ۴ یا ۵ (با پسوند <code class="text-blue-400 font-mono">.htm</code>, <code class="text-blue-400 font-mono">.html</code> یا <code class="text-blue-400 font-mono">.csv</code>) را بارگذاری کنید تا تمامی معاملات به صورت خودکار به ژورنال اضافه شوند.
|
||
</p>
|
||
|
||
<form id="formImport" onsubmit="app.importStatement(event)" class="space-y-4">
|
||
<div class="border-2 border-dashed border-gray-700 hover:border-blue-500 p-6 rounded-xl text-center cursor-pointer transition" onclick="document.getElementById('statementFile').click()">
|
||
<i class="fa-solid fa-cloud-arrow-up text-3xl text-gray-500 mb-2"></i>
|
||
<p class="text-sm font-semibold text-gray-200">کلیک کنید یا فایل استیتمنت را بکشید و رها کنید</p>
|
||
<p class="text-xs text-gray-400 mt-1" id="importFileName">فرمتهای مجاز: CSV, HTML, HTM</p>
|
||
<input type="file" id="statementFile" name="statement" accept=".csv,.htm,.html" class="hidden" onchange="document.getElementById('importFileName').textContent = this.files[0].name">
|
||
</div>
|
||
|
||
<div class="flex justify-end gap-2 pt-3">
|
||
<button type="button" onclick="app.closeModal('modalImport')" class="px-4 py-2 bg-gray-800 text-gray-300 text-xs rounded-xl">انصراف</button>
|
||
<button type="submit" id="btnSubmitImport" class="px-5 py-2 bg-blue-600 hover:bg-blue-500 text-white text-xs font-bold rounded-xl shadow-lg shadow-blue-500/20">شروع پردازش و ایمپورت</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ============================================================ -->
|
||
<!-- MODAL 3: ACCOUNT CREATION / SWITCH -->
|
||
<!-- ============================================================ -->
|
||
<div id="modalAccount" class="fixed inset-0 z-50 hidden modal-backdrop flex items-center justify-center p-4">
|
||
<div class="modal-content w-full max-w-md p-6 text-right">
|
||
<div class="flex items-center justify-between pb-3 border-b border-gray-800 mb-4">
|
||
<h3 class="text-base font-bold text-white flex items-center gap-2">
|
||
<i class="fa-solid fa-wallet text-emerald-400"></i>
|
||
<span>ایجاد حساب معاملاتی جدید</span>
|
||
</h3>
|
||
<button onclick="app.closeModal('modalAccount')" class="text-gray-400 hover:text-white">
|
||
<i class="fa-solid fa-xmark"></i>
|
||
</button>
|
||
</div>
|
||
|
||
<form onsubmit="app.createAccount(event)" class="space-y-3.5">
|
||
<div>
|
||
<label class="block text-xs font-semibold text-gray-300 mb-1">نام حساب *</label>
|
||
<input type="text" id="newAccName" required placeholder="مثلاً: چالش پراپ فرم MFF" class="w-full bg-gray-800 border border-gray-700 text-sm text-white px-3 py-2 rounded-lg focus:border-blue-500 focus:outline-none">
|
||
</div>
|
||
<div class="grid grid-cols-2 gap-3">
|
||
<div>
|
||
<label class="block text-xs font-semibold text-gray-300 mb-1">بروکر</label>
|
||
<input type="text" id="newAccBroker" value="IC Markets" class="w-full bg-gray-800 border border-gray-700 text-sm text-white px-3 py-2 rounded-lg">
|
||
</div>
|
||
<div>
|
||
<label class="block text-xs font-semibold text-gray-300 mb-1">بالانس اولیه ($) *</label>
|
||
<input type="number" id="newAccBalance" required value="10000" class="w-full bg-gray-800 border border-gray-700 text-sm text-white px-3 py-2 rounded-lg num-font">
|
||
</div>
|
||
</div>
|
||
<div class="grid grid-cols-2 gap-3">
|
||
<div>
|
||
<label class="block text-xs font-semibold text-gray-300 mb-1">نوع حساب</label>
|
||
<select id="newAccType" class="w-full bg-gray-800 border border-gray-700 text-xs text-white px-3 py-2 rounded-lg">
|
||
<option value="Real">حساب واقعی (Real)</option>
|
||
<option value="PropFirm">چالش پراپ فرم (Prop)</option>
|
||
<option value="Demo">حساب دمو (Demo)</option>
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<label class="block text-xs font-semibold text-gray-300 mb-1">شماره حساب / لاگین</label>
|
||
<input type="text" id="newAccNumber" placeholder="884129" class="w-full bg-gray-800 border border-gray-700 text-sm text-white px-3 py-2 rounded-lg num-font">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="pt-3 border-t border-gray-800 flex justify-end gap-2">
|
||
<button type="button" onclick="app.closeModal('modalAccount')" class="px-4 py-2 bg-gray-800 text-gray-300 text-xs rounded-xl">انصراف</button>
|
||
<button type="submit" class="px-5 py-2 bg-emerald-600 hover:bg-emerald-500 text-white text-xs font-bold rounded-xl shadow-lg shadow-emerald-500/20">ایجاد حساب</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ============================================================ -->
|
||
<!-- MODAL 4: IMAGE LIGHTBOX ZOOM -->
|
||
<!-- ============================================================ -->
|
||
<div id="modalLightbox" class="fixed inset-0 z-50 hidden modal-backdrop flex items-center justify-center p-4" onclick="app.closeModal('modalLightbox')">
|
||
<div class="relative max-w-4xl max-h-[90vh]">
|
||
<img id="lightboxImg" src="" alt="Trade Chart" class="max-w-full max-h-[85vh] rounded-xl border border-gray-700 shadow-2xl object-contain">
|
||
<button class="absolute top-3 left-3 bg-black/70 text-white rounded-full w-8 h-8 flex items-center justify-center text-sm">
|
||
<i class="fa-solid fa-xmark"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- App JavaScript Engine -->
|
||
<script src="/js/app.js"></script>
|
||
</body>
|
||
</html>
|