Hugging Face's logo

Spaces:
jsonet
/
metatrader-master-hub
Running

App Files Community
jsonet commited on
Commit
8ae810a
·
verified ·
1 Parent(s): 32dc9cd

Aplica la nueva paleta de colores a la interfaz grafic a

Browse files
Files changed (1) hide show
  1. index.html +127 -110
index.html CHANGED
@@ -16,36 +16,49 @@
16
  extend: {
17
  colors: {
18
  primary: {
19
- 50: '#eff6ff',
20
- 100: '#dbeafe',
21
- 200: '#bfdbfe',
22
- 300: '#93c5fd',
23
- 400: '#60a5fa',
24
- 500: '#3b82f6',
25
- 600: '#2563eb',
26
- 700: '#1d4ed8',
27
- 800: '#1e40af',
28
- 900: '#1e3a8a',
29
- 950: '#172554'
30
  },
31
  secondary: {
32
- 50: '#fafafa',
33
- 100: '#f4f4f5',
34
- 200: '#e4e4e7',
35
- 300: '#d4d4d8',
36
- 400: '#a1a1aa',
37
- 500: '#71717a',
38
- 600: '#52525b',
39
- 700: '#3f3f46',
40
- 800: '#27272a',
41
- 900: '#18181b',
42
- 950: '#09090b'
 
 
 
 
 
 
 
 
 
 
 
 
 
43
  }
44
  }
45
  }
46
  }
47
  }
48
- </script>
49
  <style>
50
  .glass {
51
  backdrop-filter: blur(16px);
@@ -73,10 +86,10 @@
73
  animation: pulse-glow 2s ease-in-out infinite alternate;
74
  }
75
  @keyframes pulse-glow {
76
- from { box-shadow: 0 0 10px rgba(59, 130, 246, 0.3); }
77
- to { box-shadow: 0 0 20px rgba(59, 130, 246, 0.6); }
78
  }
79
- .slide-in {
80
  animation: slideIn 0.3s ease-out;
81
  }
82
  @keyframes slideIn {
@@ -92,66 +105,66 @@
92
  }
93
  </style>
94
  </head>
95
- <body class="bg-secondary-950 text-secondary-100 min-h-screen overflow-x-hidden">
96
- <!-- Navigation -->
97
- <nav class="fixed top-0 w-full bg-secondary-900/90 glass border-b border-secondary-800 z-50">
98
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
99
  <div class="flex items-center justify-between h-16">
100
  <div class="flex items-center space-x-4">
101
  <div class="flex-shrink-0">
102
  <h1 class="text-xl font-bold text-primary-400">MT5 Master Hub</h1>
103
  </div>
104
- <div class="hidden md:block">
105
- <div class="ml-10 flex items-baseline space-x-4">
106
- <a href="#" onclick="showPage('dashboard')" class="nav-link px-3 py-2 rounded-md text-sm font-medium bg-primary-600 text-white" data-page="dashboard">
107
  <i data-feather="home" class="inline w-4 h-4 mr-2"></i>Dashboard
108
  </a>
109
- <a href="#" onclick="showPage('position-calculator')" class="nav-link px-3 py-2 rounded-md text-sm font-medium text-secondary-300 hover:bg-secondary-800" data-page="position-calculator">
110
  <i data-feather="calculator" class="inline w-4 h-4 mr-2"></i>Position Calculator
111
  </a>
112
- <a href="#" onclick="showPage('trade-planner')" class="nav-link px-3 py-2 rounded-md text-sm font-medium text-secondary-300 hover:bg-secondary-800" data-page="trade-planner">
113
  <i data-feather="map" class="inline w-4 h-4 mr-2"></i>Trade Planner
114
  </a>
115
- <a href="#" onclick="showPage('protection-tools')" class="nav-link px-3 py-2 rounded-md text-sm font-medium text-secondary-300 hover:bg-secondary-800" data-page="protection-tools">
116
  <i data-feather="shield" class="inline w-4 h-4 mr-2"></i>Protection Tools
117
  </a>
118
- <a href="#" onclick="showPage('ea-monitor')" class="nav-link px-3 py-2 rounded-md text-sm font-medium text-secondary-300 hover:bg-secondary-800" data-page="ea-monitor">
119
  <i data-feather="cpu" class="inline w-4 h-4 mr-2"></i>EA Monitor
120
  </a>
121
- </div>
122
  </div>
123
  </div>
124
  <div class="flex items-center space-x-4">
125
- <button class="p-2 rounded-md text-secondary-400 hover:text-white hover:bg-secondary-800">
126
- <i data-feather="bell" class="w-5 h-5"></i>
127
- </button>
128
- <button class="p-2 rounded-md text-secondary-400 hover:text-white hover:bg-secondary-800">
129
- <i data-feather="settings" class="w-5 h-5"></i>
130
- </button>
131
- </div>
132
  </div>
133
  </div>
134
  <!-- Mobile menu -->
135
  <div class="md:hidden">
136
  <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
137
- <a href="#" onclick="showPage('dashboard')" class="nav-link block px-3 py-2 rounded-md text-base font-medium text-secondary-300 hover:bg-secondary-800" data-page="dashboard">
138
  <i data-feather="home" class="inline w-4 h-4 mr-2"></i>Dashboard
139
  </a>
140
- <a href="#" onclick="showPage('position-calculator')" class="nav-link block px-3 py-2 rounded-md text-base font-medium text-secondary-300 hover:bg-secondary-800" data-page="position-calculator">
141
  <i data-feather="calculator" class="inline w-4 h-4 mr-2"></i>Position Calculator
142
  </a>
143
- <a href="#" onclick="showPage('trade-planner')" class="nav-link block px-3 py-2 rounded-md text-base font-medium text-secondary-300 hover:bg-secondary-800" data-page="trade-planner">
144
  <i data-feather="map" class="inline w-4 h-4 mr-2"></i>Trade Planner
145
  </a>
146
- <a href="#" onclick="showPage('protection-tools')" class="nav-link block px-3 py-2 rounded-md text-base font-medium text-secondary-300 hover:bg-secondary-800" data-page="protection-tools">
147
  <i data-feather="shield" class="inline w-4 h-4 mr-2"></i>Protection Tools
148
  </a>
149
- <a href="#" onclick="showPage('ea-monitor')" class="nav-link block px-3 py-2 rounded-md text-base font-medium text-secondary-300 hover:bg-secondary-800" data-page="ea-monitor">
150
  <i data-feather="cpu" class="inline w-4 h-4 mr-2"></i>EA Monitor
151
  </a>
152
  </div>
153
  </div>
154
- </nav>
155
 
156
  <!-- Main Content -->
157
  <main class="pt-16 pb-8">
@@ -171,15 +184,15 @@
171
  <p class="text-secondary-400 text-sm">Balance</p>
172
  <p class="text-2xl font-bold text-white">$25,432.50</p>
173
  </div>
174
- <div class="bg-primary-600/20 p-3 rounded-lg">
175
- <i data-feather="dollar-sign" class="w-6 h-6 text-primary-400"></i>
176
- </div>
177
  </div>
178
- <div class="mt-4 flex items-center text-green-400">
179
  <i data-feather="trending-up" class="w-4 h-4 mr-1"></i>
180
  <span class="text-sm">+12.5%</span>
181
  </div>
182
- </div>
183
 
184
  <div class="gradient-border rounded-lg p-6 glass">
185
  <div class="flex items-center justify-between">
@@ -187,15 +200,15 @@
187
  <p class="text-secondary-400 text-sm">Equity</p>
188
  <p class="text-2xl font-bold text-white">$26,891.20</p>
189
  </div>
190
- <div class="bg-green-600/20 p-3 rounded-lg">
191
- <i data-feather="activity" class="w-6 h-6 text-green-400"></i>
192
- </div>
193
  </div>
194
- <div class="mt-4 flex items-center text-green-400">
195
  <i data-feather="trending-up" class="w-4 h-4 mr-1"></i>
196
  <span class="text-sm">+5.7%</span>
197
  </div>
198
- </div>
199
 
200
  <div class="gradient-border rounded-lg p-6 glass">
201
  <div class="flex items-center justify-between">
@@ -203,15 +216,15 @@
203
  <p class="text-secondary-400 text-sm">Open Trades</p>
204
  <p class="text-2xl font-bold text-white">7</p>
205
  </div>
206
- <div class="bg-blue-600/20 p-3 rounded-lg">
207
- <i data-feather="bar-chart-2" class="w-6 h-6 text-blue-400"></i>
208
- </div>
209
  </div>
210
- <div class="mt-4 flex items-center text-blue-400">
211
  <i data-feather="info" class="w-4 h-4 mr-1"></i>
212
  <span class="text-sm">3 Buy, 4 Sell</span>
213
  </div>
214
- </div>
215
 
216
  <div class="gradient-border rounded-lg p-6 glass">
217
  <div class="flex items-center justify-between">
@@ -219,25 +232,25 @@
219
  <p class="text-secondary-400 text-sm">Today's P&L</p>
220
  <p class="text-2xl font-bold text-green-400">+$1,458.70</p>
221
  </div>
222
- <div class="bg-green-600/20 p-3 rounded-lg">
223
- <i data-feather="award" class="w-6 h-6 text-green-400"></i>
224
- </div>
225
  </div>
226
- <div class="mt-4 flex items-center text-green-400">
227
  <i data-feather="trending-up" class="w-4 h-4 mr-1"></i>
228
  <span class="text-sm">Win Rate: 68%</span>
229
  </div>
230
- </div>
231
  </div>
232
 
233
  <!-- Active Trades Table -->
234
  <div class="gradient-border rounded-lg p-6 glass mb-8">
235
  <div class="flex items-center justify-between mb-4">
236
  <h3 class="text-xl font-semibold text-white">Active Trades</h3>
237
- <button class="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors">
238
  <i data-feather="plus" class="inline w-4 h-4 mr-2"></i>New Trade
239
  </button>
240
- </div>
241
  <div class="overflow-x-auto">
242
  <table class="min-w-full divide-y divide-secondary-800">
243
  <thead>
@@ -405,13 +418,13 @@
405
  <div class="flex items-center justify-between mb-4">
406
  <h3 class="text-lg font-semibold text-white">EURUSD - H1</h3>
407
  <div class="flex space-x-2">
408
- <button class="px-3 py-1 bg-primary-600 text-white rounded text-sm hover:bg-primary-700">
409
  <i data-feather="trending-up" class="inline w-4 h-4 mr-1"></i>Buy
410
  </button>
411
- <button class="px-3 py-1 bg-red-600 text-white rounded text-sm hover:bg-red-700">
412
  <i data-feather="trending-down" class="inline w-4 h-4 mr-1"></i>Sell
413
  </button>
414
- </div>
415
  </div>
416
  <div class="bg-secondary-900/50 rounded-lg h-64 flex items-center justify-center">
417
  <p class="text-secondary-400">Chart visualization area</p>
@@ -496,8 +509,8 @@
496
  <span class="text-secondary-300">Enable Breakeven</span>
497
  <label class="relative inline-flex items-center cursor-pointer">
498
  <input type="checkbox" class="sr-only peer" checked>
499
- <div class="w-11 h-6 bg-secondary-700 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-primary-800 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-secondary-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary-600"></div>
500
- </label>
501
  </div>
502
  <div>
503
  <label class="block text-sm font-medium text-secondary-300 mb-2">Breakeven Trigger (pips)</label>
@@ -574,8 +587,10 @@
574
  <span class="text-secondary-300">Enable Partial Close</span>
575
  <label class="relative inline-flex items-center cursor-pointer">
576
  <input type="checkbox" class="sr-only peer" checked>
577
- <div class="w-11 h-6 bg-secondary-700 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-primary-800 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-secondary-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary-600"></div>
578
- </label>
 
 
579
  </div>
580
  <div class="space-y-3">
581
  <div class="bg-secondary-800/50 rounded-lg p-3">
@@ -620,8 +635,10 @@
620
  <span class="text-secondary-300">Hidden SL/TP Mode</span>
621
  <label class="relative inline-flex items-center cursor-pointer">
622
  <input type="checkbox" class="sr-only peer">
623
- <div class="w-11 h-6 bg-secondary-700 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-primary-800 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-secondary-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary-600"></div>
624
- </label>
 
 
625
  </div>
626
  <div class="flex items-center justify-between">
627
  <span class="text-secondary-300">Auto Protection for External Orders</span>
@@ -638,10 +655,10 @@
638
  </label>
639
  </div>
640
  <div class="pt-4 border-t border-secondary-800">
641
- <button class="w-full px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors">
642
  <i data-feather="save" class="inline w-4 h-4 mr-2"></i>Save Protection Settings
643
  </button>
644
- </div>
645
  </div>
646
  </div>
647
  </div>
@@ -664,9 +681,9 @@
664
  <p class="text-secondary-400 text-sm">Total EAs</p>
665
  <p class="text-2xl font-bold text-white">12</p>
666
  </div>
667
- <div class="bg-blue-600/20 p-3 rounded-lg">
668
- <i data-feather="cpu" class="w-6 h-6 text-blue-400"></i>
669
- </div>
670
  </div>
671
  </div>
672
  <div class="gradient-border rounded-lg p-6 glass">
@@ -675,9 +692,9 @@
675
  <p class="text-secondary-400 text-sm">Active EAs</p>
676
  <p class="text-2xl font-bold text-green-400">8</p>
677
  </div>
678
- <div class="bg-green-600/20 p-3 rounded-lg">
679
- <i data-feather="play" class="w-6 h-6 text-green-400"></i>
680
- </div>
681
  </div>
682
  </div>
683
  <div class="gradient-border rounded-lg p-6 glass">
@@ -686,9 +703,9 @@
686
  <p class="text-secondary-400 text-sm">Total Profit</p>
687
  <p class="text-2xl font-bold text-green-400">+$5,234</p>
688
  </div>
689
- <div class="bg-green-600/20 p-3 rounded-lg">
690
  <i data-feather="trending-up" class="w-6 h-6 text-green-400"></i>
691
- </div>
692
  </div>
693
  </div>
694
  <div class="gradient-border rounded-lg p-6 glass">
@@ -697,9 +714,9 @@
697
  <p class="text-secondary-400 text-sm">Win Rate</p>
698
  <p class="text-2xl font-bold text-white">68.5%</p>
699
  </div>
700
- <div class="bg-primary-600/20 p-3 rounded-lg">
701
- <i data-feather="target" class="w-6 h-6 text-primary-400"></i>
702
- </div>
703
  </div>
704
  </div>
705
  </div>
@@ -709,16 +726,16 @@
709
  <div class="flex items-center justify-between mb-4">
710
  <h3 class="text-lg font-semibold text-white">Expert Advisors</h3>
711
  <div class="flex space-x-2">
712
- <button class="px-3 py-1 bg-green-600 text-white rounded text-sm hover:bg-green-700">
713
  <i data-feather="play" class="inline w-4 h-4 mr-1"></i>Start All
714
  </button>
715
- <button class="px-3 py-1 bg-red-600 text-white rounded text-sm hover:bg-red-700">
716
  <i data-feather="pause" class="inline w-4 h-4 mr-1"></i>Stop All
717
  </button>
718
- <button class="px-3 py-1 bg-primary-600 text-white rounded text-sm hover:bg-primary-700">
719
  <i data-feather="refresh-cw" class="inline w-4 h-4 mr-1"></i>Refresh
720
  </button>
721
- </div>
722
  </div>
723
  <div class="overflow-x-auto">
724
  <table class="min-w-full divide-y divide-secondary-800">
@@ -737,12 +754,12 @@
737
  <tr class="hover:bg-secondary-800/50">
738
  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-white">TrendMaster Pro</td>
739
  <td class="px-6 py-4 whitespace-nowrap text-sm">
740
- <span class="px-2 py-1 text-xs bg-green-600/20 text-green-400 rounded">Active</span>
741
- </td>
742
  <td class="px-6 py-4 whitespace-nowrap text-sm text-secondary-300">EURUSD</td>
743
  <td class="px-6 py-4 whitespace-nowrap text-sm text-secondary-300">45</td>
744
- <td class="px-6 py-4 whitespace-nowrap text-sm text-green-400">+$1,234</td>
745
- <td class="px-6 py-4 whitespace-nowrap text-sm text-white">72%</td>
746
  <td class="px-6 py-4 whitespace-nowrap text-sm">
747
  <button class="text-primary-400 hover:text-primary-300 mr-2">
748
  <i data-feather="settings" class="w-4 h-4"></i>
@@ -762,8 +779,8 @@
762
  </td>
763
  <td class="px-6 py-4 whitespace-nowrap text-sm text-secondary-300">GBPUSD</td>
764
  <td class="px-6 py-4 whitespace-nowrap text-sm text-secondary-300">128</td>
765
- <td class="px-6 py-4 whitespace-nowrap text-sm text-green-400">+$892</td>
766
- <td class="px-6 py-4 whitespace-nowrap text-sm text-white">65%</td>
767
  <td class="px-6 py-4 whitespace-nowrap text-sm">
768
  <button class="text-primary-400 hover:text-primary-300 mr-2">
769
  <i data-feather="settings" class="w-4 h-4"></i>
@@ -783,8 +800,8 @@
783
  </td>
784
  <td class="px-6 py-4 whitespace-nowrap text-sm text-secondary-300">USDJPY</td>
785
  <td class="px-6 py-4 whitespace-nowrap text-sm text-secondary-300">23</td>
786
- <td class="px-6 py-4 whitespace-nowrap text-sm text-red-400">-$456</td>
787
- <td class="px-6 py-4 whitespace-nowrap text-sm text-white">48%</td>
788
  <td class="px-6 py-4 whitespace-nowrap text-sm">
789
  <button class="text-primary-400 hover:text-primary-300 mr-2">
790
  <i data-feather="settings" class="w-4 h-4"></i>
@@ -854,9 +871,9 @@
854
  datasets: [{
855
  label: 'Equity',
856
  data: [23000, 24500, 23800, 25200, 24800, 26891],
857
- borderColor: '#3b82f6',
858
- backgroundColor: 'rgba(59, 130, 246, 0.1)',
859
- tension: 0.4
860
  }]
861
  },
862
  options: {
 
16
  extend: {
17
  colors: {
18
  primary: {
19
+ 50: '#f0fdf4',
20
+ 100: '#dcfce7',
21
+ 200: '#bbf7d0',
22
+ 300: '#86efac',
23
+ 400: '#4ade80',
24
+ 500: '#22c55e',
25
+ 600: '#16a34a',
26
+ 700: '#15803d',
27
+ 800: '#166534',
28
+ 900: '#14532d',
29
+ 950: '#052e16'
30
  },
31
  secondary: {
32
+ 50: '#f8fafc',
33
+ 100: '#f1f5f9',
34
+ 200: '#e2e8f0',
35
+ 300: '#cbd5e1',
36
+ 400: '#94a3b8',
37
+ 500: '#64748b',
38
+ 600: '#475569',
39
+ 700: '#334155',
40
+ 800: '#1e293b',
41
+ 900: '#0f172a',
42
+ 950: '#020617'
43
+ },
44
+ accent: {
45
+ 50: '#fefce8',
46
+ 100: '#fef9c3',
47
+ 200: '#fef08a',
48
+ 300: '#fde047',
49
+ 400: '#facc15',
50
+ 500: '#eab308',
51
+ 600: '#ca8a04',
52
+ 700: '#a16207',
53
+ 800: '#854d0e',
54
+ 900: '#713f12',
55
+ 950: '#422006'
56
  }
57
  }
58
  }
59
  }
60
  }
61
+ </script>
62
  <style>
63
  .glass {
64
  backdrop-filter: blur(16px);
 
86
  animation: pulse-glow 2s ease-in-out infinite alternate;
87
  }
88
  @keyframes pulse-glow {
89
+ from { box-shadow: 0 0 10px rgba(34, 197, 94, 0.3); }
90
+ to { box-shadow: 0 0 20px rgba(34, 197, 94, 0.6); }
91
  }
92
+ .slide-in {
93
  animation: slideIn 0.3s ease-out;
94
  }
95
  @keyframes slideIn {
 
105
  }
106
  </style>
107
  </head>
108
+ <body class="bg-secondary-900 text-secondary-100 min-h-screen overflow-x-hidden">
109
+ <!-- Navigation -->
110
+ <nav class="fixed top-0 w-full bg-secondary-800/90 glass border-b border-secondary-700 z-50">
111
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
112
  <div class="flex items-center justify-between h-16">
113
  <div class="flex items-center space-x-4">
114
  <div class="flex-shrink-0">
115
  <h1 class="text-xl font-bold text-primary-400">MT5 Master Hub</h1>
116
  </div>
117
+ <div class="hidden md:block">
118
+ <div class="ml-10 flex items-baseline space-x-4">
119
+ <a href="#" onclick="showPage('dashboard')" class="nav-link px-3 py-2 rounded-md text-sm font-medium bg-primary-500 text-white" data-page="dashboard">
120
  <i data-feather="home" class="inline w-4 h-4 mr-2"></i>Dashboard
121
  </a>
122
+ <a href="#" onclick="showPage('position-calculator')" class="nav-link px-3 py-2 rounded-md text-sm font-medium text-secondary-200 hover:bg-secondary-700" data-page="position-calculator">
123
  <i data-feather="calculator" class="inline w-4 h-4 mr-2"></i>Position Calculator
124
  </a>
125
+ <a href="#" onclick="showPage('trade-planner')" class="nav-link px-3 py-2 rounded-md text-sm font-medium text-secondary-200 hover:bg-secondary-700" data-page="trade-planner">
126
  <i data-feather="map" class="inline w-4 h-4 mr-2"></i>Trade Planner
127
  </a>
128
+ <a href="#" onclick="showPage('protection-tools')" class="nav-link px-3 py-2 rounded-md text-sm font-medium text-secondary-200 hover:bg-secondary-700" data-page="protection-tools">
129
  <i data-feather="shield" class="inline w-4 h-4 mr-2"></i>Protection Tools
130
  </a>
131
+ <a href="#" onclick="showPage('ea-monitor')" class="nav-link px-3 py-2 rounded-md text-sm font-medium text-secondary-200 hover:bg-secondary-700" data-page="ea-monitor">
132
  <i data-feather="cpu" class="inline w-4 h-4 mr-2"></i>EA Monitor
133
  </a>
134
+ </div>
135
  </div>
136
  </div>
137
  <div class="flex items-center space-x-4">
138
+ <button class="p-2 rounded-md text-secondary-200 hover:text-white hover:bg-secondary-700">
139
+ <i data-feather="bell" class="w-5 h-5"></i>
140
+ </button>
141
+ <button class="p-2 rounded-md text-secondary-200 hover:text-white hover:bg-secondary-700">
142
+ <i data-feather="settings" class="w-5 h-5"></i>
143
+ </button>
144
+ </div>
145
  </div>
146
  </div>
147
  <!-- Mobile menu -->
148
  <div class="md:hidden">
149
  <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
150
+ <a href="#" onclick="showPage('dashboard')" class="nav-link block px-3 py-2 rounded-md text-base font-medium text-secondary-200 hover:bg-secondary-700" data-page="dashboard">
151
  <i data-feather="home" class="inline w-4 h-4 mr-2"></i>Dashboard
152
  </a>
153
+ <a href="#" onclick="showPage('position-calculator')" class="nav-link block px-3 py-2 rounded-md text-base font-medium text-secondary-200 hover:bg-secondary-700" data-page="position-calculator">
154
  <i data-feather="calculator" class="inline w-4 h-4 mr-2"></i>Position Calculator
155
  </a>
156
+ <a href="#" onclick="showPage('trade-planner')" class="nav-link block px-3 py-2 rounded-md text-base font-medium text-secondary-200 hover:bg-secondary-700" data-page="trade-planner">
157
  <i data-feather="map" class="inline w-4 h-4 mr-2"></i>Trade Planner
158
  </a>
159
+ <a href="#" onclick="showPage('protection-tools')" class="nav-link block px-3 py-2 rounded-md text-base font-medium text-secondary-200 hover:bg-secondary-700" data-page="protection-tools">
160
  <i data-feather="shield" class="inline w-4 h-4 mr-2"></i>Protection Tools
161
  </a>
162
+ <a href="#" onclick="showPage('ea-monitor')" class="nav-link block px-3 py-2 rounded-md text-base font-medium text-secondary-200 hover:bg-secondary-700" data-page="ea-monitor">
163
  <i data-feather="cpu" class="inline w-4 h-4 mr-2"></i>EA Monitor
164
  </a>
165
  </div>
166
  </div>
167
+ </nav>
168
 
169
  <!-- Main Content -->
170
  <main class="pt-16 pb-8">
 
184
  <p class="text-secondary-400 text-sm">Balance</p>
185
  <p class="text-2xl font-bold text-white">$25,432.50</p>
186
  </div>
187
+ <div class="bg-primary-500/20 p-3 rounded-lg">
188
+ <i data-feather="dollar-sign" class="w-6 h-6 text-primary-300"></i>
189
+ </div>
190
  </div>
191
+ <div class="mt-4 flex items-center text-primary-400">
192
  <i data-feather="trending-up" class="w-4 h-4 mr-1"></i>
193
  <span class="text-sm">+12.5%</span>
194
  </div>
195
+ </div>
196
 
197
  <div class="gradient-border rounded-lg p-6 glass">
198
  <div class="flex items-center justify-between">
 
200
  <p class="text-secondary-400 text-sm">Equity</p>
201
  <p class="text-2xl font-bold text-white">$26,891.20</p>
202
  </div>
203
+ <div class="bg-primary-500/20 p-3 rounded-lg">
204
+ <i data-feather="activity" class="w-6 h-6 text-primary-300"></i>
205
+ </div>
206
  </div>
207
+ <div class="mt-4 flex items-center text-primary-400">
208
  <i data-feather="trending-up" class="w-4 h-4 mr-1"></i>
209
  <span class="text-sm">+5.7%</span>
210
  </div>
211
+ </div>
212
 
213
  <div class="gradient-border rounded-lg p-6 glass">
214
  <div class="flex items-center justify-between">
 
216
  <p class="text-secondary-400 text-sm">Open Trades</p>
217
  <p class="text-2xl font-bold text-white">7</p>
218
  </div>
219
+ <div class="bg-accent-500/20 p-3 rounded-lg">
220
+ <i data-feather="bar-chart-2" class="w-6 h-6 text-accent-400"></i>
221
+ </div>
222
  </div>
223
+ <div class="mt-4 flex items-center text-accent-400">
224
  <i data-feather="info" class="w-4 h-4 mr-1"></i>
225
  <span class="text-sm">3 Buy, 4 Sell</span>
226
  </div>
227
+ </div>
228
 
229
  <div class="gradient-border rounded-lg p-6 glass">
230
  <div class="flex items-center justify-between">
 
232
  <p class="text-secondary-400 text-sm">Today's P&L</p>
233
  <p class="text-2xl font-bold text-green-400">+$1,458.70</p>
234
  </div>
235
+ <div class="bg-primary-500/20 p-3 rounded-lg">
236
+ <i data-feather="award" class="w-6 h-6 text-primary-300"></i>
237
+ </div>
238
  </div>
239
+ <div class="mt-4 flex items-center text-primary-400">
240
  <i data-feather="trending-up" class="w-4 h-4 mr-1"></i>
241
  <span class="text-sm">Win Rate: 68%</span>
242
  </div>
243
+ </div>
244
  </div>
245
 
246
  <!-- Active Trades Table -->
247
  <div class="gradient-border rounded-lg p-6 glass mb-8">
248
  <div class="flex items-center justify-between mb-4">
249
  <h3 class="text-xl font-semibold text-white">Active Trades</h3>
250
+ <button class="px-4 py-2 bg-primary-500 text-white rounded-lg hover:bg-primary-600 transition-colors">
251
  <i data-feather="plus" class="inline w-4 h-4 mr-2"></i>New Trade
252
  </button>
253
+ </div>
254
  <div class="overflow-x-auto">
255
  <table class="min-w-full divide-y divide-secondary-800">
256
  <thead>
 
418
  <div class="flex items-center justify-between mb-4">
419
  <h3 class="text-lg font-semibold text-white">EURUSD - H1</h3>
420
  <div class="flex space-x-2">
421
+ <button class="px-3 py-1 bg-primary-500 text-white rounded text-sm hover:bg-primary-600">
422
  <i data-feather="trending-up" class="inline w-4 h-4 mr-1"></i>Buy
423
  </button>
424
+ <button class="px-3 py-1 bg-accent-500 text-white rounded text-sm hover:bg-accent-600">
425
  <i data-feather="trending-down" class="inline w-4 h-4 mr-1"></i>Sell
426
  </button>
427
+ </div>
428
  </div>
429
  <div class="bg-secondary-900/50 rounded-lg h-64 flex items-center justify-center">
430
  <p class="text-secondary-400">Chart visualization area</p>
 
509
  <span class="text-secondary-300">Enable Breakeven</span>
510
  <label class="relative inline-flex items-center cursor-pointer">
511
  <input type="checkbox" class="sr-only peer" checked>
512
+ <div class="w-11 h-6 bg-secondary-600 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-primary-800 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-secondary-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary-500"></div>
513
+ </label>
514
  </div>
515
  <div>
516
  <label class="block text-sm font-medium text-secondary-300 mb-2">Breakeven Trigger (pips)</label>
 
587
  <span class="text-secondary-300">Enable Partial Close</span>
588
  <label class="relative inline-flex items-center cursor-pointer">
589
  <input type="checkbox" class="sr-only peer" checked>
590
+ <label class="relative inline-flex items-center cursor-pointer">
591
+ <input type="checkbox" class="sr-only peer" checked>
592
+ <div class="w-11 h-6 bg-secondary-600 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-primary-800 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-secondary-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary-500"></div>
593
+ </label>
594
  </div>
595
  <div class="space-y-3">
596
  <div class="bg-secondary-800/50 rounded-lg p-3">
 
635
  <span class="text-secondary-300">Hidden SL/TP Mode</span>
636
  <label class="relative inline-flex items-center cursor-pointer">
637
  <input type="checkbox" class="sr-only peer">
638
+ <label class="relative inline-flex items-center cursor-pointer">
639
+ <input type="checkbox" class="sr-only peer">
640
+ <div class="w-11 h-6 bg-secondary-600 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-primary-800 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-secondary-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary-500"></div>
641
+ </label>
642
  </div>
643
  <div class="flex items-center justify-between">
644
  <span class="text-secondary-300">Auto Protection for External Orders</span>
 
655
  </label>
656
  </div>
657
  <div class="pt-4 border-t border-secondary-800">
658
+ <button class="w-full px-4 py-2 bg-primary-500 text-white rounded-lg hover:bg-primary-600 transition-colors">
659
  <i data-feather="save" class="inline w-4 h-4 mr-2"></i>Save Protection Settings
660
  </button>
661
+ </div>
662
  </div>
663
  </div>
664
  </div>
 
681
  <p class="text-secondary-400 text-sm">Total EAs</p>
682
  <p class="text-2xl font-bold text-white">12</p>
683
  </div>
684
+ <div class="bg-primary-500/20 p-3 rounded-lg">
685
+ <i data-feather="cpu" class="w-6 h-6 text-primary-300"></i>
686
+ </div>
687
  </div>
688
  </div>
689
  <div class="gradient-border rounded-lg p-6 glass">
 
692
  <p class="text-secondary-400 text-sm">Active EAs</p>
693
  <p class="text-2xl font-bold text-green-400">8</p>
694
  </div>
695
+ <div class="bg-primary-500/20 p-3 rounded-lg">
696
+ <i data-feather="play" class="w-6 h-6 text-primary-300"></i>
697
+ </div>
698
  </div>
699
  </div>
700
  <div class="gradient-border rounded-lg p-6 glass">
 
703
  <p class="text-secondary-400 text-sm">Total Profit</p>
704
  <p class="text-2xl font-bold text-green-400">+$5,234</p>
705
  </div>
706
+ <div class="bg-primary-500/20 p-3 rounded-lg">
707
  <i data-feather="trending-up" class="w-6 h-6 text-green-400"></i>
708
+ </div>
709
  </div>
710
  </div>
711
  <div class="gradient-border rounded-lg p-6 glass">
 
714
  <p class="text-secondary-400 text-sm">Win Rate</p>
715
  <p class="text-2xl font-bold text-white">68.5%</p>
716
  </div>
717
+ <div class="bg-accent-500/20 p-3 rounded-lg">
718
+ <i data-feather="target" class="w-6 h-6 text-accent-400"></i>
719
+ </div>
720
  </div>
721
  </div>
722
  </div>
 
726
  <div class="flex items-center justify-between mb-4">
727
  <h3 class="text-lg font-semibold text-white">Expert Advisors</h3>
728
  <div class="flex space-x-2">
729
+ <button class="px-3 py-1 bg-primary-500 text-white rounded text-sm hover:bg-primary-600">
730
  <i data-feather="play" class="inline w-4 h-4 mr-1"></i>Start All
731
  </button>
732
+ <button class="px-3 py-1 bg-accent-500 text-white rounded text-sm hover:bg-accent-600">
733
  <i data-feather="pause" class="inline w-4 h-4 mr-1"></i>Stop All
734
  </button>
735
+ <button class="px-3 py-1 bg-primary-500 text-white rounded text-sm hover:bg-primary-600">
736
  <i data-feather="refresh-cw" class="inline w-4 h-4 mr-1"></i>Refresh
737
  </button>
738
+ </div>
739
  </div>
740
  <div class="overflow-x-auto">
741
  <table class="min-w-full divide-y divide-secondary-800">
 
754
  <tr class="hover:bg-secondary-800/50">
755
  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-white">TrendMaster Pro</td>
756
  <td class="px-6 py-4 whitespace-nowrap text-sm">
757
+ <span class="px-2 py-1 text-xs bg-primary-500/20 text-primary-400 rounded">Active</span>
758
+ </td>
759
  <td class="px-6 py-4 whitespace-nowrap text-sm text-secondary-300">EURUSD</td>
760
  <td class="px-6 py-4 whitespace-nowrap text-sm text-secondary-300">45</td>
761
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-primary-400">+$1,234</td>
762
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-white">72%</td>
763
  <td class="px-6 py-4 whitespace-nowrap text-sm">
764
  <button class="text-primary-400 hover:text-primary-300 mr-2">
765
  <i data-feather="settings" class="w-4 h-4"></i>
 
779
  </td>
780
  <td class="px-6 py-4 whitespace-nowrap text-sm text-secondary-300">GBPUSD</td>
781
  <td class="px-6 py-4 whitespace-nowrap text-sm text-secondary-300">128</td>
782
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-primary-400">+$892</td>
783
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-white">65%</td>
784
  <td class="px-6 py-4 whitespace-nowrap text-sm">
785
  <button class="text-primary-400 hover:text-primary-300 mr-2">
786
  <i data-feather="settings" class="w-4 h-4"></i>
 
800
  </td>
801
  <td class="px-6 py-4 whitespace-nowrap text-sm text-secondary-300">USDJPY</td>
802
  <td class="px-6 py-4 whitespace-nowrap text-sm text-secondary-300">23</td>
803
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-accent-400">-$456</td>
804
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-white">48%</td>
805
  <td class="px-6 py-4 whitespace-nowrap text-sm">
806
  <button class="text-primary-400 hover:text-primary-300 mr-2">
807
  <i data-feather="settings" class="w-4 h-4"></i>
 
871
  datasets: [{
872
  label: 'Equity',
873
  data: [23000, 24500, 23800, 25200, 24800, 26891],
874
+ borderColor: '#22c55e',
875
+ backgroundColor: 'rgba(34, 197, 94, 0.1)',
876
+ tension: 0.4
877
  }]
878
  },
879
  options: {