| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>MetaTrader Command Center</title> |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
| <script> |
| tailwind.config = { |
| darkMode: 'class', |
| theme: { |
| extend: { |
| colors: { |
| primary: { |
| 50: '#f0f9ff', |
| 100: '#e0f2fe', |
| 200: '#bae6fd', |
| 300: '#7dd3fc', |
| 400: '#38bdf8', |
| 500: '#0ea5e9', |
| 600: '#0284c7', |
| 700: '#0369a1', |
| 800: '#075985', |
| 900: '#0c4a6e', |
| }, |
| secondary: { |
| 50: '#fdf2f8', |
| 100: '#fce7f3', |
| 200: '#fbcfe8', |
| 300: '#f9a8d4', |
| 400: '#f472b6', |
| 500: '#ec4899', |
| 600: '#db2777', |
| 700: '#be185d', |
| 800: '#9d174d', |
| 900: '#831843', |
| } |
| } |
| } |
| } |
| } |
| </script> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); |
| body { |
| font-family: 'Inter', sans-serif; |
| background-color: #0f172a; |
| color: #e2e8f0; |
| } |
| .glass-effect { |
| background: rgba(30, 41, 59, 0.7); |
| backdrop-filter: blur(10px); |
| border: 1px solid rgba(148, 163, 184, 0.2); |
| } |
| .chart-container { |
| position: relative; |
| height: 300px; |
| } |
| .trade-card { |
| transition: all 0.3s ease; |
| } |
| .trade-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2); |
| } |
| .indicator-dot { |
| display: inline-block; |
| width: 10px; |
| height: 10px; |
| border-radius: 50%; |
| margin-right: 8px; |
| } |
| .profit-positive { |
| color: #4ade80; |
| } |
| .profit-negative { |
| color: #f87171; |
| } |
| .scrollbar-hidden::-webkit-scrollbar { |
| display: none; |
| } |
| .scrollbar-hidden { |
| -ms-overflow-style: none; |
| scrollbar-width: none; |
| } |
| |
| .mobile-menu { |
| display: none; |
| } |
| @media (max-width: 768px) { |
| .desktop-menu { |
| display: none; |
| } |
| .mobile-menu { |
| display: block; |
| } |
| .mobile-menu-content { |
| max-height: 0; |
| overflow: hidden; |
| transition: max-height 0.3s ease-out; |
| } |
| .mobile-menu-content.open { |
| max-height: 500px; |
| transition: max-height 0.5s ease-in; |
| } |
| } |
| </style> |
| </head> |
| <body class="bg-slate-900 text-slate-100 min-h-screen"> |
| |
| <div class="flex flex-col md:flex-row min-h-screen"> |
| |
| <div class="w-full md:w-64 glass-effect p-4 flex flex-col"> |
| <div class="mb-8"> |
| <h1 class="text-2xl font-bold text-primary-400 flex items-center"> |
| <i data-feather="activity" class="mr-2"></i> |
| MT5 Command |
| </h1> |
| <p class="text-xs text-slate-400 mt-1">Trading Control Panel</p> |
| </div> |
|
|
| |
| <div class="mobile-menu mb-4"> |
| <button id="mobile-menu-toggle" class="w-full flex justify-between items-center p-3 rounded-lg bg-slate-800 hover:bg-slate-700"> |
| <span>Menu</span> |
| <i data-feather="menu" class="w-5 h-5"></i> |
| </button> |
| <div id="mobile-menu-content" class="mobile-menu-content bg-slate-800 rounded-lg mt-2"> |
| <ul class="py-2"> |
| <li> |
| <a href="index.html" class="flex items-center p-3 rounded-lg hover:bg-slate-700"> |
| <i data-feather="home" class="mr-3 w-5 h-5"></i> |
| <span>Dashboard</span> |
| </a> |
| </li> |
| <li> |
| <a href="trading-view.html" class="flex items-center p-3 rounded-lg hover:bg-slate-700"> |
| <i data-feather="bar-chart-2" class="mr-3 w-5 h-5"></i> |
| <span>Trading View</span> |
| </a> |
| </li> |
| <li> |
| <a href="experts.html" class="flex items-center p-3 rounded-lg hover:bg-slate-700"> |
| <i data-feather="settings" class="mr-3 w-5 h-5"></i> |
| <span>Expert Advisors</span> |
| </a> |
| </li> |
| <li> |
| <a href="calculator.html" class="flex items-center p-3 rounded-lg hover:bg-slate-700"> |
| <i data-feather="calculator" class="mr-3 w-5 h-5"></i> |
| <span>Position Calculator</span> |
| </a> |
| </li> |
| <li> |
| <a href="strategies.html" class="flex items-center p-3 rounded-lg hover:bg-slate-700"> |
| <i data-feather="layers" class="mr-3 w-5 h-5"></i> |
| <span>Strategies</span> |
| </a> |
| </li> |
| <li> |
| <a href="risk-management.html" class="flex items-center p-3 rounded-lg hover:bg-slate-700"> |
| <i data-feather="shield" class="mr-3 w-5 h-5"></i> |
| <span>Risk Management</span> |
| </a> |
| </li> |
| <li> |
| <a href="reports.html" class="flex items-center p-3 rounded-lg hover:bg-slate-700"> |
| <i data-feather="file-text" class="mr-3 w-5 h-5"></i> |
| <span>Reports</span> |
| </a> |
| </li> |
| <li> |
| <a href="account-connection.html" class="flex items-center p-3 rounded-lg hover:bg-slate-700"> |
| <i data-feather="link" class="mr-3 w-5 h-5"></i> |
| <span>Account Connection</span> |
| </a> |
| </li> |
| </ul> |
| </div> |
| </div> |
|
|
| |
| <nav class="flex-1 desktop-menu"> |
| <ul class="space-y-2"> |
| <li> |
| <a href="index.html" class="flex items-center p-3 rounded-lg bg-primary-600 text-white"> |
| <i data-feather="home" class="mr-3"></i> |
| Dashboard |
| </a> |
| </li> |
| <li> |
| <a href="trading-view.html" class="flex items-center p-3 rounded-lg hover:bg-slate-800"> |
| <i data-feather="bar-chart-2" class="mr-3"></i> |
| Trading View |
| </a> |
| </li> |
| <li> |
| <a href="experts.html" class="flex items-center p-3 rounded-lg hover:bg-slate-800"> |
| <i data-feather="settings" class="mr-3"></i> |
| Expert Advisors |
| </a> |
| </li> |
| <li> |
| <a href="calculator.html" class="flex items-center p-3 rounded-lg hover:bg-slate-800"> |
| <i data-feather="calculator" class="mr-3"></i> |
| Position Calculator |
| </a> |
| </li> |
| <li> |
| <a href="strategies.html" class="flex items-center p-3 rounded-lg hover:bg-slate-800"> |
| <i data-feather="layers" class="mr-3"></i> |
| Strategies |
| </a> |
| </li> |
| <li> |
| <a href="risk-management.html" class="flex items-center p-3 rounded-lg hover:bg-slate-800"> |
| <i data-feather="shield" class="mr-3"></i> |
| Risk Management |
| </a> |
| </li> |
| <li> |
| <a href="reports.html" class="flex items-center p-3 rounded-lg hover:bg-slate-800"> |
| <i data-feather="file-text" class="mr-3"></i> |
| Reports |
| </a> |
| </li> |
| <li> |
| <a href="account-connection.html" class="flex items-center p-3 rounded-lg hover:bg-slate-800"> |
| <i data-feather="link" class="mr-3"></i> |
| Account Connection |
| </a> |
| </li> |
| </ul> |
| </nav> |
|
|
| <div class="mt-auto pt-4 border-t border-slate-700"> |
| <div class="flex items-center"> |
| <div class="bg-slate-700 rounded-full p-2 mr-3"> |
| <i data-feather="user" class="w-5 h-5"></i> |
| </div> |
| <div> |
| <p class="font-medium">Trader Pro</p> |
| <p class="text-xs text-slate-400">Active Session</p> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="flex-1 overflow-auto"> |
| |
| <header class="glass-effect p-4 flex justify-between items-center"> |
| <div> |
| <h2 class="text-xl font-bold">Trading Dashboard</h2> |
| <p class="text-sm text-slate-400">Real-time market monitoring and control</p> |
| </div> |
| <div class="flex items-center space-x-4"> |
| <div class="relative"> |
| <input type="text" placeholder="Search symbols..." class="bg-slate-800 rounded-lg py-2 px-4 pl-10 focus:outline-none focus:ring-2 focus:ring-primary-500"> |
| <i data-feather="search" class="absolute left-3 top-2.5 w-4 h-4 text-slate-500"></i> |
| </div> |
| <button class="bg-primary-600 hover:bg-primary-700 px-4 py-2 rounded-lg flex items-center"> |
| <i data-feather="plus" class="mr-2"></i> |
| New Trade |
| </button> |
| </div> |
| </header> |
| |
| <div class="p-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4"> |
| <div class="glass-effect rounded-xl p-4"> |
| <div class="flex justify-between items-start"> |
| <div> |
| <p class="text-slate-400 text-sm">Equity</p> |
| <p class="text-2xl font-bold">$24,580.75</p> |
| </div> |
| <div class="bg-green-500/20 p-2 rounded-lg"> |
| <i data-feather="trending-up" class="text-green-500"></i> |
| </div> |
| </div> |
| <p class="text-green-500 text-sm mt-2">+2.3% today</p> |
| </div> |
|
|
| <div class="glass-effect rounded-xl p-4"> |
| <div class="flex justify-between items-start"> |
| <div> |
| <p class="text-slate-400 text-sm">Open Positions</p> |
| <p class="text-2xl font-bold">12</p> |
| </div> |
| <div class="bg-blue-500/20 p-2 rounded-lg"> |
| <i data-feather="bar-chart-2" class="text-blue-500"></i> |
| </div> |
| </div> |
| <p class="text-slate-400 text-sm mt-2">8 Buy / 4 Sell</p> |
| </div> |
|
|
| <div class="glass-effect rounded-xl p-4"> |
| <div class="flex justify-between items-start"> |
| <div> |
| <p class="text-slate-400 text-sm">Active EAs</p> |
| <p class="text-2xl font-bold">7</p> |
| </div> |
| <div class="bg-purple-500/20 p-2 rounded-lg"> |
| <i data-feather="cpu" class="text-purple-500"></i> |
| </div> |
| </div> |
| <p class="text-slate-400 text-sm mt-2">3 running strategies</p> |
| </div> |
|
|
| <div class="glass-effect rounded-xl p-4"> |
| <div class="flex justify-between items-start"> |
| <div> |
| <p class="text-slate-400 text-sm">Risk Exposure</p> |
| <p class="text-2xl font-bold">3.2%</p> |
| </div> |
| <div class="bg-yellow-500/20 p-2 rounded-lg"> |
| <i data-feather="shield" class="text-yellow-500"></i> |
| </div> |
| </div> |
| <p class="text-green-500 text-sm mt-2">Within limits</p> |
| </div> |
| </div> |
|
|
| |
| <div class="p-4 grid grid-cols-1 lg:grid-cols-3 gap-4"> |
| |
| <div class="lg:col-span-2 glass-effect rounded-xl p-4"> |
| <div class="flex justify-between items-center mb-4"> |
| <h3 class="font-bold">EURUSD H1 Chart</h3> |
| <div class="flex space-x-2"> |
| <button class="text-xs bg-slate-800 hover:bg-slate-700 px-3 py-1 rounded">1H</button> |
| <button class="text-xs bg-slate-800 hover:bg-slate-700 px-3 py-1 rounded">4H</button> |
| <button class="text-xs bg-primary-600 px-3 py-1 rounded">D1</button> |
| </div> |
| </div> |
| <div class="chart-container"> |
| <canvas id="priceChart"></canvas> |
| </div> |
| </div> |
|
|
| |
| <div class="glass-effect rounded-xl p-4"> |
| <h3 class="font-bold mb-4">Position Calculator</h3> |
| <div class="space-y-4"> |
| <div> |
| <label class="text-sm text-slate-400">Account Balance</label> |
| <input type="number" value="25000" class="w-full bg-slate-800 rounded-lg p-2 mt-1"> |
| </div> |
| <div> |
| <label class="text-sm text-slate-400">Risk Percentage</label> |
| <input type="number" value="2" class="w-full bg-slate-800 rounded-lg p-2 mt-1"> |
| </div> |
| <div> |
| <label class="text-sm text-slate-400">Stop Loss (pips)</label> |
| <input type="number" value="50" class="w-full bg-slate-800 rounded-lg p-2 mt-1"> |
| </div> |
| <div class="pt-2"> |
| <p class="text-sm text-slate-400">Position Size</p> |
| <p class="text-xl font-bold">0.25 lots</p> |
| </div> |
| <button class="w-full bg-primary-600 hover:bg-primary-700 py-2 rounded-lg mt-2"> |
| Apply to Chart |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="p-4 grid grid-cols-1 lg:grid-cols-2 gap-4"> |
| |
| <div class="glass-effect rounded-xl p-4"> |
| <div class="flex justify-between items-center mb-4"> |
| <h3 class="font-bold">Active Positions</h3> |
| <button class="text-sm text-primary-400">View All</button> |
| </div> |
| <div class="overflow-x-auto scrollbar-hidden"> |
| <table class="w-full"> |
| <thead> |
| <tr class="text-left text-slate-400 text-sm"> |
| <th class="pb-2">Symbol</th> |
| <th class="pb-2">Type</th> |
| <th class="pb-2">Lots</th> |
| <th class="pb-2">Profit</th> |
| <th class="pb-2">Actions</th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr class="border-b border-slate-800"> |
| <td class="py-3">EURUSD</td> |
| <td class="py-3"><span class="text-green-500">BUY</span></td> |
| <td class="py-3">0.25</td> |
| <td class="py-3 profit-positive">+$124.50</td> |
| <td class="py-3"> |
| <button class="text-slate-400 hover:text-white"> |
| <i data-feather="more-horizontal" class="w-4 h-4"></i> |
| </button> |
| </td> |
| </tr> |
| <tr class="border-b border-slate-800"> |
| <td class="py-3">GBPUSD</td> |
| <td class="py-3"><span class="text-red-500">SELL</span></td> |
| <td class="py-3">0.15</td> |
| <td class="py-3 profit-negative">-$42.30</td> |
| <td class="py-3"> |
| <button class="text-slate-400 hover:text-white"> |
| <i data-feather="more-horizontal" class="w-4 h-4"></i> |
| </button> |
| </td> |
| </tr> |
| <tr class="border-b border-slate-800"> |
| <td class="py-3">USDJPY</td> |
| <td class="py-3"><span class="text-green-500">BUY</span></td> |
| <td class="py-3">0.30</td> |
| <td class="py-3 profit-positive">+$87.20</td> |
| <td class="py-3"> |
| <button class="text-slate-400 hover:text-white"> |
| <i data-feather="more-horizontal" class="w-4 h-4"></i> |
| </button> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
|
|
| |
| <div class="glass-effect rounded-xl p-4"> |
| <div class="flex justify-between items-center mb-4"> |
| <h3 class="font-bold">Expert Advisors</h3> |
| <button class="text-sm text-primary-400">Manage</button> |
| </div> |
| <div class="space-y-3"> |
| <div class="flex items-center justify-between p-3 bg-slate-800 rounded-lg"> |
| <div class="flex items-center"> |
| <div class="indicator-dot bg-green-500"></div> |
| <div> |
| <p class="font-medium">Scalper Pro</p> |
| <p class="text-xs text-slate-400">Running on EURUSD</p> |
| </div> |
| </div> |
| <div class="text-right"> |
| <p class="profit-positive">+$245.70</p> |
| <p class="text-xs text-slate-400">Today</p> |
| </div> |
| </div> |
| <div class="flex items-center justify-between p-3 bg-slate-800 rounded-lg"> |
| <div class="flex items-center"> |
| <div class="indicator-dot bg-green-500"></div> |
| <div> |
| <p class="font-medium">Trend Follower</p> |
| <p class="text-xs text-slate-400">Running on GBPUSD</p> |
| </div> |
| </div> |
| <div class="text-right"> |
| <p class="profit-positive">+$187.30</p> |
| <p class="text-xs text-slate-400">Today</p> |
| </div> |
| </div> |
| <div class="flex items-center justify-between p-3 bg-slate-800 rounded-lg"> |
| <div class="flex items-center"> |
| <div class="indicator-dot bg-red-500"></div> |
| <div> |
| <p class="font-medium">Range Breaker</p> |
| <p class="text-xs text-slate-400">Stopped</p> |
| </div> |
| </div> |
| <div class="text-right"> |
| <p class="profit-negative">-$32.10</p> |
| <p class="text-xs text-slate-400">Yesterday</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="p-4"> |
| <div class="glass-effect rounded-xl p-4"> |
| <h3 class="font-bold mb-4">Protection Tools</h3> |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4"> |
| <div class="bg-slate-800 rounded-lg p-4 hover:bg-slate-700 transition cursor-pointer"> |
| <div class="flex items-center mb-2"> |
| <div class="bg-blue-500/20 p-2 rounded-lg mr-3"> |
| <i data-feather="target" class="text-blue-500 w-5 h-5"></i> |
| </div> |
| <h4 class="font-medium">Breakeven</h4> |
| </div> |
| <p class="text-sm text-slate-400">Move SL to entry price</p> |
| </div> |
| <div class="bg-slate-800 rounded-lg p-4 hover:bg-slate-700 transition cursor-pointer"> |
| <div class="flex items-center mb-2"> |
| <div class="bg-green-500/20 p-2 rounded-lg mr-3"> |
| <i data-feather="trending-up" class="text-green-500 w-5 h-5"></i> |
| </div> |
| <h4 class="font-medium">Trailing Stop</h4> |
| </div> |
| <p class="text-sm text-slate-400">Dynamic stop loss</p> |
| </div> |
| <div class="bg-slate-800 rounded-lg p-4 hover:bg-slate-700 transition cursor-pointer"> |
| <div class="flex items-center mb-2"> |
| <div class="bg-purple-500/20 p-2 rounded-lg mr-3"> |
| <i data-feather="percent" class="text-purple-500 w-5 h-5"></i> |
| </div> |
| <h4 class="font-medium">Partial Close</h4> |
| </div> |
| <p class="text-sm text-slate-400">Close portions of position</p> |
| </div> |
| <div class="bg-slate-800 rounded-lg p-4 hover:bg-slate-700 transition cursor-pointer"> |
| <div class="flex items-center mb-2"> |
| <div class="bg-yellow-500/20 p-2 rounded-lg mr-3"> |
| <i data-feather="eye-off" class="text-yellow-500 w-5 h-5"></i> |
| </div> |
| <h4 class="font-medium">Stealth Mode</h4> |
| </div> |
| <p class="text-sm text-slate-400">Hide orders from chart</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| <script> |
| |
| feather.replace(); |
| |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| const menuToggle = document.getElementById('mobile-menu-toggle'); |
| const menuContent = document.getElementById('mobile-menu-content'); |
| |
| if (menuToggle && menuContent) { |
| menuToggle.addEventListener('click', function() { |
| const icon = this.querySelector('[data-feather]'); |
| if (menuContent.classList.contains('open')) { |
| menuContent.classList.remove('open'); |
| icon.setAttribute('data-feather', 'menu'); |
| } else { |
| menuContent.classList.add('open'); |
| icon.setAttribute('data-feather', 'x'); |
| } |
| feather.replace(); |
| }); |
| } |
| }); |
| |
| |
| const ctx = document.getElementById('priceChart').getContext('2d'); |
| const priceChart = new Chart(ctx, { |
| type: 'line', |
| data: { |
| labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], |
| datasets: [{ |
| label: 'Price', |
| data: [65, 59, 80, 81, 56, 55, 70], |
| borderColor: '#0ea5e9', |
| backgroundColor: 'rgba(14, 165, 233, 0.1)', |
| borderWidth: 2, |
| pointRadius: 0, |
| fill: true, |
| tension: 0.4 |
| }] |
| }, |
| options: { |
| responsive: true, |
| maintainAspectRatio: false, |
| plugins: { |
| legend: { |
| display: false |
| } |
| }, |
| scales: { |
| x: { |
| grid: { |
| display: false, |
| drawBorder: false |
| }, |
| ticks: { |
| color: '#94a3b8' |
| } |
| }, |
| y: { |
| grid: { |
| color: 'rgba(148, 163, 184, 0.1)', |
| drawBorder: false |
| }, |
| ticks: { |
| color: '#94a3b8', |
| callback: function(value) { |
| return '$' + value; |
| } |
| } |
| } |
| } |
| } |
| }); |
| |
| |
| setInterval(() => { |
| |
| const equityElement = document.querySelector('.text-2xl.font-bold'); |
| if (equityElement) { |
| const current = parseFloat(equityElement.textContent.replace('$', '').replace(',', '')); |
| const change = (Math.random() - 0.5) * 100; |
| const newEquity = current + change; |
| equityElement.textContent = '$' + newEquity.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,'); |
| |
| |
| if (change >= 0) { |
| equityElement.classList.remove('text-red-400'); |
| equityElement.classList.add('text-green-400'); |
| } else { |
| equityElement.classList.remove('text-green-400'); |
| equityElement.classList.add('text-red-400'); |
| } |
| } |
| }, 5000); |
| </script> |
| </body> |
| </html> |
|
|
