Hugging Face's logo

Spaces:
jsonet
/
metatrader-command-center
Running

App Files Community
jsonet commited on
Commit
59757fb
·
verified ·
1 Parent(s): cef7f9e

Implementa la actualizacion del menu superior y hazlo desplegable completamente responsive en todas las paginas manteniendo todas las secciones que tiene actualmente el menu superior

Browse files
Files changed (7) hide show
  1. calculator.html +101 -7
  2. experts.html +100 -6
  3. index.html +104 -10
  4. reports.html +100 -6
  5. risk-management.html +100 -6
  6. strategies.html +100 -6
  7. trading-view.html +100 -6
calculator.html CHANGED
@@ -65,6 +65,27 @@
65
  .result-card:hover {
66
  transform: translateY(-3px);
67
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
68
  </style>
69
  </head>
70
  <body class="bg-slate-900 text-slate-100 min-h-screen">
@@ -80,7 +101,62 @@
80
  <p class="text-xs text-slate-400 mt-1">Trading Control Panel</p>
81
  </div>
82
 
83
- <nav class="flex-1">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
84
  <ul class="space-y-2">
85
  <li>
86
  <a href="index.html" class="flex items-center p-3 rounded-lg hover:bg-slate-800">
@@ -101,7 +177,7 @@
101
  </a>
102
  </li>
103
  <li>
104
- <a href="#" class="flex items-center p-3 rounded-lg bg-primary-600 text-white">
105
  <i data-feather="calculator" class="mr-3"></i>
106
  Position Calculator
107
  </a>
@@ -124,7 +200,7 @@
124
  Reports
125
  </a>
126
  </li>
127
- </ul>
128
  </nav>
129
 
130
  <div class="mt-auto pt-4 border-t border-slate-700">
@@ -155,8 +231,7 @@
155
  </button>
156
  </div>
157
  </header>
158
-
159
- <!-- Calculator -->
160
  <div class="p-4">
161
  <div class="glass-effect rounded-xl p-6 max-w-4xl mx-auto">
162
  <h3 class="font-bold text-lg mb-6">Position Size Calculator</h3>
@@ -383,15 +458,34 @@
383
  </div>
384
  </div>
385
  </div>
386
-
387
  <script>
388
  // Initialize Feather Icons
389
  feather.replace();
390
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
391
  // Position size calculation
392
  function calculatePositionSize() {
393
  // Get input values
394
- const accountBalance = parseFloat(document.getElementById('accountBalance').value) || 0;
395
  const riskPercentage = parseFloat(document.getElementById('riskPercentage').value) || 0;
396
  const stopLossPips = parseFloat(document.getElementById('stopLossPips').value) || 0;
397
 
 
65
  .result-card:hover {
66
  transform: translateY(-3px);
67
  }
68
+ /* Mobile menu styles */
69
+ .mobile-menu {
70
+ display: none;
71
+ }
72
+ @media (max-width: 768px) {
73
+ .desktop-menu {
74
+ display: none;
75
+ }
76
+ .mobile-menu {
77
+ display: block;
78
+ }
79
+ .mobile-menu-content {
80
+ max-height: 0;
81
+ overflow: hidden;
82
+ transition: max-height 0.3s ease-out;
83
+ }
84
+ .mobile-menu-content.open {
85
+ max-height: 500px;
86
+ transition: max-height 0.5s ease-in;
87
+ }
88
+ }
89
  </style>
90
  </head>
91
  <body class="bg-slate-900 text-slate-100 min-h-screen">
 
101
  <p class="text-xs text-slate-400 mt-1">Trading Control Panel</p>
102
  </div>
103
 
104
+ <!-- Mobile Menu Toggle -->
105
+ <div class="mobile-menu mb-4">
106
+ <button id="mobile-menu-toggle" class="w-full flex justify-between items-center p-3 rounded-lg bg-slate-800 hover:bg-slate-700">
107
+ <span>Menu</span>
108
+ <i data-feather="menu" class="w-5 h-5"></i>
109
+ </button>
110
+ <div id="mobile-menu-content" class="mobile-menu-content bg-slate-800 rounded-lg mt-2">
111
+ <ul class="py-2">
112
+ <li>
113
+ <a href="index.html" class="flex items-center p-3 rounded-lg hover:bg-slate-700">
114
+ <i data-feather="home" class="mr-3 w-5 h-5"></i>
115
+ <span>Dashboard</span>
116
+ </a>
117
+ </li>
118
+ <li>
119
+ <a href="trading-view.html" class="flex items-center p-3 rounded-lg hover:bg-slate-700">
120
+ <i data-feather="bar-chart-2" class="mr-3 w-5 h-5"></i>
121
+ <span>Trading View</span>
122
+ </a>
123
+ </li>
124
+ <li>
125
+ <a href="experts.html" class="flex items-center p-3 rounded-lg hover:bg-slate-700">
126
+ <i data-feather="settings" class="mr-3 w-5 h-5"></i>
127
+ <span>Expert Advisors</span>
128
+ </a>
129
+ </li>
130
+ <li>
131
+ <a href="calculator.html" class="flex items-center p-3 rounded-lg bg-primary-600 text-white">
132
+ <i data-feather="calculator" class="mr-3 w-5 h-5"></i>
133
+ <span>Position Calculator</span>
134
+ </a>
135
+ </li>
136
+ <li>
137
+ <a href="strategies.html" class="flex items-center p-3 rounded-lg hover:bg-slate-700">
138
+ <i data-feather="layers" class="mr-3 w-5 h-5"></i>
139
+ <span>Strategies</span>
140
+ </a>
141
+ </li>
142
+ <li>
143
+ <a href="risk-management.html" class="flex items-center p-3 rounded-lg hover:bg-slate-700">
144
+ <i data-feather="shield" class="mr-3 w-5 h-5"></i>
145
+ <span>Risk Management</span>
146
+ </a>
147
+ </li>
148
+ <li>
149
+ <a href="reports.html" class="flex items-center p-3 rounded-lg hover:bg-slate-700">
150
+ <i data-feather="file-text" class="mr-3 w-5 h-5"></i>
151
+ <span>Reports</span>
152
+ </a>
153
+ </li>
154
+ </ul>
155
+ </div>
156
+ </div>
157
+
158
+ <!-- Desktop Menu -->
159
+ <nav class="flex-1 desktop-menu">
160
  <ul class="space-y-2">
161
  <li>
162
  <a href="index.html" class="flex items-center p-3 rounded-lg hover:bg-slate-800">
 
177
  </a>
178
  </li>
179
  <li>
180
+ <a href="calculator.html" class="flex items-center p-3 rounded-lg bg-primary-600 text-white">
181
  <i data-feather="calculator" class="mr-3"></i>
182
  Position Calculator
183
  </a>
 
200
  Reports
201
  </a>
202
  </li>
203
+ </ul>
204
  </nav>
205
 
206
  <div class="mt-auto pt-4 border-t border-slate-700">
 
231
  </button>
232
  </div>
233
  </header>
234
+ <!-- Calculator -->
 
235
  <div class="p-4">
236
  <div class="glass-effect rounded-xl p-6 max-w-4xl mx-auto">
237
  <h3 class="font-bold text-lg mb-6">Position Size Calculator</h3>
 
458
  </div>
459
  </div>
460
  </div>
 
461
  <script>
462
  // Initialize Feather Icons
463
  feather.replace();
464
 
465
+ // Mobile menu toggle
466
+ document.addEventListener('DOMContentLoaded', function() {
467
+ const menuToggle = document.getElementById('mobile-menu-toggle');
468
+ const menuContent = document.getElementById('mobile-menu-content');
469
+
470
+ if (menuToggle && menuContent) {
471
+ menuToggle.addEventListener('click', function() {
472
+ const icon = this.querySelector('[data-feather]');
473
+ if (menuContent.classList.contains('open')) {
474
+ menuContent.classList.remove('open');
475
+ icon.setAttribute('data-feather', 'menu');
476
+ } else {
477
+ menuContent.classList.add('open');
478
+ icon.setAttribute('data-feather', 'x');
479
+ }
480
+ feather.replace();
481
+ });
482
+ }
483
+ });
484
+
485
  // Position size calculation
486
  function calculatePositionSize() {
487
  // Get input values
488
+ const accountBalance = parseFloat(document.getElementById('accountBalance').value) || 0;
489
  const riskPercentage = parseFloat(document.getElementById('riskPercentage').value) || 0;
490
  const stopLossPips = parseFloat(document.getElementById('stopLossPips').value) || 0;
491
 
experts.html CHANGED
@@ -78,6 +78,27 @@
78
  .paused {
79
  background-color: #f59e0b;
80
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
81
  </style>
82
  </head>
83
  <body class="bg-slate-900 text-slate-100 min-h-screen">
@@ -93,7 +114,62 @@
93
  <p class="text-xs text-slate-400 mt-1">Trading Control Panel</p>
94
  </div>
95
 
96
- <nav class="flex-1">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
97
  <ul class="space-y-2">
98
  <li>
99
  <a href="index.html" class="flex items-center p-3 rounded-lg hover:bg-slate-800">
@@ -108,7 +184,7 @@
108
  </a>
109
  </li>
110
  <li>
111
- <a href="#" class="flex items-center p-3 rounded-lg bg-primary-600 text-white">
112
  <i data-feather="settings" class="mr-3"></i>
113
  Expert Advisors
114
  </a>
@@ -137,7 +213,7 @@
137
  Reports
138
  </a>
139
  </li>
140
- </ul>
141
  </nav>
142
 
143
  <div class="mt-auto pt-4 border-t border-slate-700">
@@ -172,8 +248,7 @@
172
  </button>
173
  </div>
174
  </header>
175
-
176
- <!-- EA Status Summary -->
177
  <div class="p-4 grid grid-cols-1 md:grid-cols-4 gap-4">
178
  <div class="glass-effect rounded-xl p-4">
179
  <div class="flex justify-between items-start">
@@ -469,10 +544,29 @@
469
  </div>
470
  </div>
471
  </div>
472
-
473
  <script>
474
  // Initialize Feather Icons
475
  feather.replace();
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
476
  </script>
477
  </body>
478
  </html>
 
78
  .paused {
79
  background-color: #f59e0b;
80
  }
81
+ /* Mobile menu styles */
82
+ .mobile-menu {
83
+ display: none;
84
+ }
85
+ @media (max-width: 768px) {
86
+ .desktop-menu {
87
+ display: none;
88
+ }
89
+ .mobile-menu {
90
+ display: block;
91
+ }
92
+ .mobile-menu-content {
93
+ max-height: 0;
94
+ overflow: hidden;
95
+ transition: max-height 0.3s ease-out;
96
+ }
97
+ .mobile-menu-content.open {
98
+ max-height: 500px;
99
+ transition: max-height 0.5s ease-in;
100
+ }
101
+ }
102
  </style>
103
  </head>
104
  <body class="bg-slate-900 text-slate-100 min-h-screen">
 
114
  <p class="text-xs text-slate-400 mt-1">Trading Control Panel</p>
115
  </div>
116
 
117
+ <!-- Mobile Menu Toggle -->
118
+ <div class="mobile-menu mb-4">
119
+ <button id="mobile-menu-toggle" class="w-full flex justify-between items-center p-3 rounded-lg bg-slate-800 hover:bg-slate-700">
120
+ <span>Menu</span>
121
+ <i data-feather="menu" class="w-5 h-5"></i>
122
+ </button>
123
+ <div id="mobile-menu-content" class="mobile-menu-content bg-slate-800 rounded-lg mt-2">
124
+ <ul class="py-2">
125
+ <li>
126
+ <a href="index.html" class="flex items-center p-3 rounded-lg hover:bg-slate-700">
127
+ <i data-feather="home" class="mr-3 w-5 h-5"></i>
128
+ <span>Dashboard</span>
129
+ </a>
130
+ </li>
131
+ <li>
132
+ <a href="trading-view.html" class="flex items-center p-3 rounded-lg hover:bg-slate-700">
133
+ <i data-feather="bar-chart-2" class="mr-3 w-5 h-5"></i>
134
+ <span>Trading View</span>
135
+ </a>
136
+ </li>
137
+ <li>
138
+ <a href="experts.html" class="flex items-center p-3 rounded-lg bg-primary-600 text-white">
139
+ <i data-feather="settings" class="mr-3 w-5 h-5"></i>
140
+ <span>Expert Advisors</span>
141
+ </a>
142
+ </li>
143
+ <li>
144
+ <a href="calculator.html" class="flex items-center p-3 rounded-lg hover:bg-slate-700">
145
+ <i data-feather="calculator" class="mr-3 w-5 h-5"></i>
146
+ <span>Position Calculator</span>
147
+ </a>
148
+ </li>
149
+ <li>
150
+ <a href="strategies.html" class="flex items-center p-3 rounded-lg hover:bg-slate-700">
151
+ <i data-feather="layers" class="mr-3 w-5 h-5"></i>
152
+ <span>Strategies</span>
153
+ </a>
154
+ </li>
155
+ <li>
156
+ <a href="risk-management.html" class="flex items-center p-3 rounded-lg hover:bg-slate-700">
157
+ <i data-feather="shield" class="mr-3 w-5 h-5"></i>
158
+ <span>Risk Management</span>
159
+ </a>
160
+ </li>
161
+ <li>
162
+ <a href="reports.html" class="flex items-center p-3 rounded-lg hover:bg-slate-700">
163
+ <i data-feather="file-text" class="mr-3 w-5 h-5"></i>
164
+ <span>Reports</span>
165
+ </a>
166
+ </li>
167
+ </ul>
168
+ </div>
169
+ </div>
170
+
171
+ <!-- Desktop Menu -->
172
+ <nav class="flex-1 desktop-menu">
173
  <ul class="space-y-2">
174
  <li>
175
  <a href="index.html" class="flex items-center p-3 rounded-lg hover:bg-slate-800">
 
184
  </a>
185
  </li>
186
  <li>
187
+ <a href="experts.html" class="flex items-center p-3 rounded-lg bg-primary-600 text-white">
188
  <i data-feather="settings" class="mr-3"></i>
189
  Expert Advisors
190
  </a>
 
213
  Reports
214
  </a>
215
  </li>
216
+ </ul>
217
  </nav>
218
 
219
  <div class="mt-auto pt-4 border-t border-slate-700">
 
248
  </button>
249
  </div>
250
  </header>
251
+ <!-- EA Status Summary -->
 
252
  <div class="p-4 grid grid-cols-1 md:grid-cols-4 gap-4">
253
  <div class="glass-effect rounded-xl p-4">
254
  <div class="flex justify-between items-start">
 
544
  </div>
545
  </div>
546
  </div>
 
547
  <script>
548
  // Initialize Feather Icons
549
  feather.replace();
550
+
551
+ // Mobile menu toggle
552
+ document.addEventListener('DOMContentLoaded', function() {
553
+ const menuToggle = document.getElementById('mobile-menu-toggle');
554
+ const menuContent = document.getElementById('mobile-menu-content');
555
+
556
+ if (menuToggle && menuContent) {
557
+ menuToggle.addEventListener('click', function() {
558
+ const icon = this.querySelector('[data-feather]');
559
+ if (menuContent.classList.contains('open')) {
560
+ menuContent.classList.remove('open');
561
+ icon.setAttribute('data-feather', 'menu');
562
+ } else {
563
+ menuContent.classList.add('open');
564
+ icon.setAttribute('data-feather', 'x');
565
+ }
566
+ feather.replace();
567
+ });
568
+ }
569
+ });
570
  </script>
571
  </body>
572
  </html>
index.html CHANGED
@@ -87,6 +87,27 @@
87
  -ms-overflow-style: none;
88
  scrollbar-width: none;
89
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
90
  </style>
91
  </head>
92
  <body class="bg-slate-900 text-slate-100 min-h-screen">
@@ -102,28 +123,83 @@
102
  <p class="text-xs text-slate-400 mt-1">Trading Control Panel</p>
103
  </div>
104
 
105
- <nav class="flex-1">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
106
  <ul class="space-y-2">
107
  <li>
108
- <a href="#" class="flex items-center p-3 rounded-lg bg-primary-600 text-white">
109
  <i data-feather="home" class="mr-3"></i>
110
  Dashboard
111
  </a>
112
  </li>
113
  <li>
114
- <a href="#" class="flex items-center p-3 rounded-lg hover:bg-slate-800">
115
  <i data-feather="bar-chart-2" class="mr-3"></i>
116
  Trading View
117
  </a>
118
  </li>
119
  <li>
120
- <a href="#" class="flex items-center p-3 rounded-lg hover:bg-slate-800">
121
  <i data-feather="settings" class="mr-3"></i>
122
  Expert Advisors
123
  </a>
124
  </li>
125
  <li>
126
- <a href="#" class="flex items-center p-3 rounded-lg hover:bg-slate-800">
127
  <i data-feather="calculator" class="mr-3"></i>
128
  Position Calculator
129
  </a>
@@ -146,7 +222,7 @@
146
  Reports
147
  </a>
148
  </li>
149
- </ul>
150
  </nav>
151
 
152
  <div class="mt-auto pt-4 border-t border-slate-700">
@@ -181,8 +257,7 @@
181
  </button>
182
  </div>
183
  </header>
184
-
185
- <!-- Stats Overview -->
186
  <div class="p-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
187
  <div class="glass-effect rounded-xl p-4">
188
  <div class="flex justify-between items-start">
@@ -435,15 +510,34 @@
435
  </div>
436
  </div>
437
  </div>
438
-
439
  <script>
440
  // Initialize Feather Icons
441
  feather.replace();
442
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
443
  // Chart initialization
444
  const ctx = document.getElementById('priceChart').getContext('2d');
445
  const priceChart = new Chart(ctx, {
446
- type: 'line',
447
  data: {
448
  labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
449
  datasets: [{
 
87
  -ms-overflow-style: none;
88
  scrollbar-width: none;
89
  }
90
+ /* Mobile menu styles */
91
+ .mobile-menu {
92
+ display: none;
93
+ }
94
+ @media (max-width: 768px) {
95
+ .desktop-menu {
96
+ display: none;
97
+ }
98
+ .mobile-menu {
99
+ display: block;
100
+ }
101
+ .mobile-menu-content {
102
+ max-height: 0;
103
+ overflow: hidden;
104
+ transition: max-height 0.3s ease-out;
105
+ }
106
+ .mobile-menu-content.open {
107
+ max-height: 500px;
108
+ transition: max-height 0.5s ease-in;
109
+ }
110
+ }
111
  </style>
112
  </head>
113
  <body class="bg-slate-900 text-slate-100 min-h-screen">
 
123
  <p class="text-xs text-slate-400 mt-1">Trading Control Panel</p>
124
  </div>
125
 
126
+ <!-- Mobile Menu Toggle -->
127
+ <div class="mobile-menu mb-4">
128
+ <button id="mobile-menu-toggle" class="w-full flex justify-between items-center p-3 rounded-lg bg-slate-800 hover:bg-slate-700">
129
+ <span>Menu</span>
130
+ <i data-feather="menu" class="w-5 h-5"></i>
131
+ </button>
132
+ <div id="mobile-menu-content" class="mobile-menu-content bg-slate-800 rounded-lg mt-2">
133
+ <ul class="py-2">
134
+ <li>
135
+ <a href="index.html" class="flex items-center p-3 rounded-lg hover:bg-slate-700">
136
+ <i data-feather="home" class="mr-3 w-5 h-5"></i>
137
+ <span>Dashboard</span>
138
+ </a>
139
+ </li>
140
+ <li>
141
+ <a href="trading-view.html" class="flex items-center p-3 rounded-lg hover:bg-slate-700">
142
+ <i data-feather="bar-chart-2" class="mr-3 w-5 h-5"></i>
143
+ <span>Trading View</span>
144
+ </a>
145
+ </li>
146
+ <li>
147
+ <a href="experts.html" class="flex items-center p-3 rounded-lg hover:bg-slate-700">
148
+ <i data-feather="settings" class="mr-3 w-5 h-5"></i>
149
+ <span>Expert Advisors</span>
150
+ </a>
151
+ </li>
152
+ <li>
153
+ <a href="calculator.html" class="flex items-center p-3 rounded-lg hover:bg-slate-700">
154
+ <i data-feather="calculator" class="mr-3 w-5 h-5"></i>
155
+ <span>Position Calculator</span>
156
+ </a>
157
+ </li>
158
+ <li>
159
+ <a href="strategies.html" class="flex items-center p-3 rounded-lg hover:bg-slate-700">
160
+ <i data-feather="layers" class="mr-3 w-5 h-5"></i>
161
+ <span>Strategies</span>
162
+ </a>
163
+ </li>
164
+ <li>
165
+ <a href="risk-management.html" class="flex items-center p-3 rounded-lg hover:bg-slate-700">
166
+ <i data-feather="shield" class="mr-3 w-5 h-5"></i>
167
+ <span>Risk Management</span>
168
+ </a>
169
+ </li>
170
+ <li>
171
+ <a href="reports.html" class="flex items-center p-3 rounded-lg hover:bg-slate-700">
172
+ <i data-feather="file-text" class="mr-3 w-5 h-5"></i>
173
+ <span>Reports</span>
174
+ </a>
175
+ </li>
176
+ </ul>
177
+ </div>
178
+ </div>
179
+
180
+ <!-- Desktop Menu -->
181
+ <nav class="flex-1 desktop-menu">
182
  <ul class="space-y-2">
183
  <li>
184
+ <a href="index.html" class="flex items-center p-3 rounded-lg bg-primary-600 text-white">
185
  <i data-feather="home" class="mr-3"></i>
186
  Dashboard
187
  </a>
188
  </li>
189
  <li>
190
+ <a href="trading-view.html" class="flex items-center p-3 rounded-lg hover:bg-slate-800">
191
  <i data-feather="bar-chart-2" class="mr-3"></i>
192
  Trading View
193
  </a>
194
  </li>
195
  <li>
196
+ <a href="experts.html" class="flex items-center p-3 rounded-lg hover:bg-slate-800">
197
  <i data-feather="settings" class="mr-3"></i>
198
  Expert Advisors
199
  </a>
200
  </li>
201
  <li>
202
+ <a href="calculator.html" class="flex items-center p-3 rounded-lg hover:bg-slate-800">
203
  <i data-feather="calculator" class="mr-3"></i>
204
  Position Calculator
205
  </a>
 
222
  Reports
223
  </a>
224
  </li>
225
+ </ul>
226
  </nav>
227
 
228
  <div class="mt-auto pt-4 border-t border-slate-700">
 
257
  </button>
258
  </div>
259
  </header>
260
+ <!-- Stats Overview -->
 
261
  <div class="p-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
262
  <div class="glass-effect rounded-xl p-4">
263
  <div class="flex justify-between items-start">
 
510
  </div>
511
  </div>
512
  </div>
 
513
  <script>
514
  // Initialize Feather Icons
515
  feather.replace();
516
 
517
+ // Mobile menu toggle
518
+ document.addEventListener('DOMContentLoaded', function() {
519
+ const menuToggle = document.getElementById('mobile-menu-toggle');
520
+ const menuContent = document.getElementById('mobile-menu-content');
521
+
522
+ if (menuToggle && menuContent) {
523
+ menuToggle.addEventListener('click', function() {
524
+ const icon = this.querySelector('[data-feather]');
525
+ if (menuContent.classList.contains('open')) {
526
+ menuContent.classList.remove('open');
527
+ icon.setAttribute('data-feather', 'menu');
528
+ } else {
529
+ menuContent.classList.add('open');
530
+ icon.setAttribute('data-feather', 'x');
531
+ }
532
+ feather.replace();
533
+ });
534
+ }
535
+ });
536
+
537
  // Chart initialization
538
  const ctx = document.getElementById('priceChart').getContext('2d');
539
  const priceChart = new Chart(ctx, {
540
+ type: 'line',
541
  data: {
542
  labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
543
  datasets: [{
reports.html CHANGED
@@ -67,6 +67,27 @@
67
  position: relative;
68
  height: 300px;
69
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
70
  </style>
71
  </head>
72
  <body class="bg-slate-900 text-slate-100 min-h-screen">
@@ -82,7 +103,62 @@
82
  <p class="text-xs text-slate-400 mt-1">Trading Control Panel</p>
83
  </div>
84
 
85
- <nav class="flex-1">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
86
  <ul class="space-y-2">
87
  <li>
88
  <a href="index.html" class="flex items-center p-3 rounded-lg hover:bg-slate-800">
@@ -121,7 +197,7 @@
121
  </a>
122
  </li>
123
  <li>
124
- <a href="#" class="flex items-center p-3 rounded-lg bg-primary-600 text-white">
125
  <i data-feather="file-text" class="mr-3"></i>
126
  Reports
127
  </a>
@@ -166,8 +242,7 @@
166
  </button>
167
  </div>
168
  </header>
169
-
170
- <!-- Performance Summary -->
171
  <div class="p-4 grid grid-cols-1 md:grid-cols-4 gap-4">
172
  <div class="glass-effect rounded-xl p-4">
173
  <div class="flex justify-between items-start">
@@ -382,15 +457,34 @@
382
  </div>
383
  </div>
384
  </div>
385
-
386
  <script>
387
  // Initialize Feather Icons
388
  feather.replace();
389
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
390
  // Equity Chart
391
  const equityCtx = document.getElementById('equityChart').getContext('2d');
392
  const equityChart = new Chart(equityCtx, {
393
- type: 'line',
394
  data: {
395
  labels: ['Jun 1', 'Jun 3', 'Jun 5', 'Jun 7', 'Jun 9', 'Jun 11', 'Jun 13', 'Jun 15'],
396
  datasets: [{
 
67
  position: relative;
68
  height: 300px;
69
  }
70
+ /* Mobile menu styles */
71
+ .mobile-menu {
72
+ display: none;
73
+ }
74
+ @media (max-width: 768px) {
75
+ .desktop-menu {
76
+ display: none;
77
+ }
78
+ .mobile-menu {
79
+ display: block;
80
+ }
81
+ .mobile-menu-content {
82
+ max-height: 0;
83
+ overflow: hidden;
84
+ transition: max-height 0.3s ease-out;
85
+ }
86
+ .mobile-menu-content.open {
87
+ max-height: 500px;
88
+ transition: max-height 0.5s ease-in;
89
+ }
90
+ }
91
  </style>
92
  </head>
93
  <body class="bg-slate-900 text-slate-100 min-h-screen">
 
103
  <p class="text-xs text-slate-400 mt-1">Trading Control Panel</p>
104
  </div>
105
 
106
+ <!-- Mobile Menu Toggle -->
107
+ <div class="mobile-menu mb-4">
108
+ <button id="mobile-menu-toggle" class="w-full flex justify-between items-center p-3 rounded-lg bg-slate-800 hover:bg-slate-700">
109
+ <span>Menu</span>
110
+ <i data-feather="menu" class="w-5 h-5"></i>
111
+ </button>
112
+ <div id="mobile-menu-content" class="mobile-menu-content bg-slate-800 rounded-lg mt-2">
113
+ <ul class="py-2">
114
+ <li>
115
+ <a href="index.html" class="flex items-center p-3 rounded-lg hover:bg-slate-700">
116
+ <i data-feather="home" class="mr-3 w-5 h-5"></i>
117
+ <span>Dashboard</span>
118
+ </a>
119
+ </li>
120
+ <li>
121
+ <a href="trading-view.html" class="flex items-center p-3 rounded-lg hover:bg-slate-700">
122
+ <i data-feather="bar-chart-2" class="mr-3 w-5 h-5"></i>
123
+ <span>Trading View</span>
124
+ </a>
125
+ </li>
126
+ <li>
127
+ <a href="experts.html" class="flex items-center p-3 rounded-lg hover:bg-slate-700">
128
+ <i data-feather="settings" class="mr-3 w-5 h-5"></i>
129
+ <span>Expert Advisors</span>
130
+ </a>
131
+ </li>
132
+ <li>
133
+ <a href="calculator.html" class="flex items-center p-3 rounded-lg hover:bg-slate-700">
134
+ <i data-feather="calculator" class="mr-3 w-5 h-5"></i>
135
+ <span>Position Calculator</span>
136
+ </a>
137
+ </li>
138
+ <li>
139
+ <a href="strategies.html" class="flex items-center p-3 rounded-lg hover:bg-slate-700">
140
+ <i data-feather="layers" class="mr-3 w-5 h-5"></i>
141
+ <span>Strategies</span>
142
+ </a>
143
+ </li>
144
+ <li>
145
+ <a href="risk-management.html" class="flex items-center p-3 rounded-lg hover:bg-slate-700">
146
+ <i data-feather="shield" class="mr-3 w-5 h-5"></i>
147
+ <span>Risk Management</span>
148
+ </a>
149
+ </li>
150
+ <li>
151
+ <a href="reports.html" class="flex items-center p-3 rounded-lg bg-primary-600 text-white">
152
+ <i data-feather="file-text" class="mr-3 w-5 h-5"></i>
153
+ <span>Reports</span>
154
+ </a>
155
+ </li>
156
+ </ul>
157
+ </div>
158
+ </div>
159
+
160
+ <!-- Desktop Menu -->
161
+ <nav class="flex-1 desktop-menu">
162
  <ul class="space-y-2">
163
  <li>
164
  <a href="index.html" class="flex items-center p-3 rounded-lg hover:bg-slate-800">
 
197
  </a>
198
  </li>
199
  <li>
200
+ <a href="reports.html" class="flex items-center p-3 rounded-lg bg-primary-600 text-white">
201
  <i data-feather="file-text" class="mr-3"></i>
202
  Reports
203
  </a>
 
242
  </button>
243
  </div>
244
  </header>
245
+ <!-- Performance Summary -->
 
246
  <div class="p-4 grid grid-cols-1 md:grid-cols-4 gap-4">
247
  <div class="glass-effect rounded-xl p-4">
248
  <div class="flex justify-between items-start">
 
457
  </div>
458
  </div>
459
  </div>
 
460
  <script>
461
  // Initialize Feather Icons
462
  feather.replace();
463
 
464
+ // Mobile menu toggle
465
+ document.addEventListener('DOMContentLoaded', function() {
466
+ const menuToggle = document.getElementById('mobile-menu-toggle');
467
+ const menuContent = document.getElementById('mobile-menu-content');
468
+
469
+ if (menuToggle && menuContent) {
470
+ menuToggle.addEventListener('click', function() {
471
+ const icon = this.querySelector('[data-feather]');
472
+ if (menuContent.classList.contains('open')) {
473
+ menuContent.classList.remove('open');
474
+ icon.setAttribute('data-feather', 'menu');
475
+ } else {
476
+ menuContent.classList.add('open');
477
+ icon.setAttribute('data-feather', 'x');
478
+ }
479
+ feather.replace();
480
+ });
481
+ }
482
+ });
483
+
484
  // Equity Chart
485
  const equityCtx = document.getElementById('equityChart').getContext('2d');
486
  const equityChart = new Chart(equityCtx, {
487
+ type: 'line',
488
  data: {
489
  labels: ['Jun 1', 'Jun 3', 'Jun 5', 'Jun 7', 'Jun 9', 'Jun 11', 'Jun 13', 'Jun 15'],
490
  datasets: [{
risk-management.html CHANGED
@@ -76,6 +76,27 @@
76
  height: 100%;
77
  border-radius: 4px;
78
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
79
  </style>
80
  </head>
81
  <body class="bg-slate-900 text-slate-100 min-h-screen">
@@ -91,7 +112,62 @@
91
  <p class="text-xs text-slate-400 mt-1">Trading Control Panel</p>
92
  </div>
93
 
94
- <nav class="flex-1">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
95
  <ul class="space-y-2">
96
  <li>
97
  <a href="index.html" class="flex items-center p-3 rounded-lg hover:bg-slate-800">
@@ -124,7 +200,7 @@
124
  </a>
125
  </li>
126
  <li>
127
- <a href="#" class="flex items-center p-3 rounded-lg bg-primary-600 text-white">
128
  <i data-feather="shield" class="mr-3"></i>
129
  Risk Management
130
  </a>
@@ -166,8 +242,7 @@
166
  </button>
167
  </div>
168
  </header>
169
-
170
- <!-- Risk Overview -->
171
  <div class="p-4 grid grid-cols-1 md:grid-cols-4 gap-4">
172
  <div class="glass-effect rounded-xl p-4">
173
  <div class="flex justify-between items-start">
@@ -423,10 +498,29 @@
423
  </div>
424
  </div>
425
  </div>
426
-
427
  <script>
428
  // Initialize Feather Icons
429
  feather.replace();
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
430
  </script>
431
  </body>
432
- </html>
 
76
  height: 100%;
77
  border-radius: 4px;
78
  }
79
+ /* Mobile menu styles */
80
+ .mobile-menu {
81
+ display: none;
82
+ }
83
+ @media (max-width: 768px) {
84
+ .desktop-menu {
85
+ display: none;
86
+ }
87
+ .mobile-menu {
88
+ display: block;
89
+ }
90
+ .mobile-menu-content {
91
+ max-height: 0;
92
+ overflow: hidden;
93
+ transition: max-height 0.3s ease-out;
94
+ }
95
+ .mobile-menu-content.open {
96
+ max-height: 500px;
97
+ transition: max-height 0.5s ease-in;
98
+ }
99
+ }
100
  </style>
101
  </head>
102
  <body class="bg-slate-900 text-slate-100 min-h-screen">
 
112
  <p class="text-xs text-slate-400 mt-1">Trading Control Panel</p>
113
  </div>
114
 
115
+ <!-- Mobile Menu Toggle -->
116
+ <div class="mobile-menu mb-4">
117
+ <button id="mobile-menu-toggle" class="w-full flex justify-between items-center p-3 rounded-lg bg-slate-800 hover:bg-slate-700">
118
+ <span>Menu</span>
119
+ <i data-feather="menu" class="w-5 h-5"></i>
120
+ </button>
121
+ <div id="mobile-menu-content" class="mobile-menu-content bg-slate-800 rounded-lg mt-2">
122
+ <ul class="py-2">
123
+ <li>
124
+ <a href="index.html" class="flex items-center p-3 rounded-lg hover:bg-slate-700">
125
+ <i data-feather="home" class="mr-3 w-5 h-5"></i>
126
+ <span>Dashboard</span>
127
+ </a>
128
+ </li>
129
+ <li>
130
+ <a href="trading-view.html" class="flex items-center p-3 rounded-lg hover:bg-slate-700">
131
+ <i data-feather="bar-chart-2" class="mr-3 w-5 h-5"></i>
132
+ <span>Trading View</span>
133
+ </a>
134
+ </li>
135
+ <li>
136
+ <a href="experts.html" class="flex items-center p-3 rounded-lg hover:bg-slate-700">
137
+ <i data-feather="settings" class="mr-3 w-5 h-5"></i>
138
+ <span>Expert Advisors</span>
139
+ </a>
140
+ </li>
141
+ <li>
142
+ <a href="calculator.html" class="flex items-center p-3 rounded-lg hover:bg-slate-700">
143
+ <i data-feather="calculator" class="mr-3 w-5 h-5"></i>
144
+ <span>Position Calculator</span>
145
+ </a>
146
+ </li>
147
+ <li>
148
+ <a href="strategies.html" class="flex items-center p-3 rounded-lg hover:bg-slate-700">
149
+ <i data-feather="layers" class="mr-3 w-5 h-5"></i>
150
+ <span>Strategies</span>
151
+ </a>
152
+ </li>
153
+ <li>
154
+ <a href="risk-management.html" class="flex items-center p-3 rounded-lg bg-primary-600 text-white">
155
+ <i data-feather="shield" class="mr-3 w-5 h-5"></i>
156
+ <span>Risk Management</span>
157
+ </a>
158
+ </li>
159
+ <li>
160
+ <a href="reports.html" class="flex items-center p-3 rounded-lg hover:bg-slate-700">
161
+ <i data-feather="file-text" class="mr-3 w-5 h-5"></i>
162
+ <span>Reports</span>
163
+ </a>
164
+ </li>
165
+ </ul>
166
+ </div>
167
+ </div>
168
+
169
+ <!-- Desktop Menu -->
170
+ <nav class="flex-1 desktop-menu">
171
  <ul class="space-y-2">
172
  <li>
173
  <a href="index.html" class="flex items-center p-3 rounded-lg hover:bg-slate-800">
 
200
  </a>
201
  </li>
202
  <li>
203
+ <a href="risk-management.html" class="flex items-center p-3 rounded-lg bg-primary-600 text-white">
204
  <i data-feather="shield" class="mr-3"></i>
205
  Risk Management
206
  </a>
 
242
  </button>
243
  </div>
244
  </header>
245
+ <!-- Risk Overview -->
 
246
  <div class="p-4 grid grid-cols-1 md:grid-cols-4 gap-4">
247
  <div class="glass-effect rounded-xl p-4">
248
  <div class="flex justify-between items-start">
 
498
  </div>
499
  </div>
500
  </div>
 
501
  <script>
502
  // Initialize Feather Icons
503
  feather.replace();
504
+
505
+ // Mobile menu toggle
506
+ document.addEventListener('DOMContentLoaded', function() {
507
+ const menuToggle = document.getElementById('mobile-menu-toggle');
508
+ const menuContent = document.getElementById('mobile-menu-content');
509
+
510
+ if (menuToggle && menuContent) {
511
+ menuToggle.addEventListener('click', function() {
512
+ const icon = this.querySelector('[data-feather]');
513
+ if (menuContent.classList.contains('open')) {
514
+ menuContent.classList.remove('open');
515
+ icon.setAttribute('data-feather', 'menu');
516
+ } else {
517
+ menuContent.classList.add('open');
518
+ icon.setAttribute('data-feather', 'x');
519
+ }
520
+ feather.replace();
521
+ });
522
+ }
523
+ });
524
  </script>
525
  </body>
526
+ </html>
strategies.html CHANGED
@@ -66,6 +66,27 @@
66
  .performance-metric {
67
  border-left: 3px solid #0ea5e9;
68
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
69
  </style>
70
  </head>
71
  <body class="bg-slate-900 text-slate-100 min-h-screen">
@@ -81,7 +102,62 @@
81
  <p class="text-xs text-slate-400 mt-1">Trading Control Panel</p>
82
  </div>
83
 
84
- <nav class="flex-1">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
85
  <ul class="space-y-2">
86
  <li>
87
  <a href="index.html" class="flex items-center p-3 rounded-lg hover:bg-slate-800">
@@ -108,7 +184,7 @@
108
  </a>
109
  </li>
110
  <li>
111
- <a href="#" class="flex items-center p-3 rounded-lg bg-primary-600 text-white">
112
  <i data-feather="layers" class="mr-3"></i>
113
  Strategies
114
  </a>
@@ -156,8 +232,7 @@
156
  </button>
157
  </div>
158
  </header>
159
-
160
- <!-- Strategy Overview -->
161
  <div class="p-4 grid grid-cols-1 md:grid-cols-4 gap-4">
162
  <div class="glass-effect rounded-xl p-4">
163
  <div class="flex justify-between items-start">
@@ -376,10 +451,29 @@
376
  </div>
377
  </div>
378
  </div>
379
-
380
  <script>
381
  // Initialize Feather Icons
382
  feather.replace();
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
383
  </script>
384
  </body>
385
- </html>
 
66
  .performance-metric {
67
  border-left: 3px solid #0ea5e9;
68
  }
69
+ /* Mobile menu styles */
70
+ .mobile-menu {
71
+ display: none;
72
+ }
73
+ @media (max-width: 768px) {
74
+ .desktop-menu {
75
+ display: none;
76
+ }
77
+ .mobile-menu {
78
+ display: block;
79
+ }
80
+ .mobile-menu-content {
81
+ max-height: 0;
82
+ overflow: hidden;
83
+ transition: max-height 0.3s ease-out;
84
+ }
85
+ .mobile-menu-content.open {
86
+ max-height: 500px;
87
+ transition: max-height 0.5s ease-in;
88
+ }
89
+ }
90
  </style>
91
  </head>
92
  <body class="bg-slate-900 text-slate-100 min-h-screen">
 
102
  <p class="text-xs text-slate-400 mt-1">Trading Control Panel</p>
103
  </div>
104
 
105
+ <!-- Mobile Menu Toggle -->
106
+ <div class="mobile-menu mb-4">
107
+ <button id="mobile-menu-toggle" class="w-full flex justify-between items-center p-3 rounded-lg bg-slate-800 hover:bg-slate-700">
108
+ <span>Menu</span>
109
+ <i data-feather="menu" class="w-5 h-5"></i>
110
+ </button>
111
+ <div id="mobile-menu-content" class="mobile-menu-content bg-slate-800 rounded-lg mt-2">
112
+ <ul class="py-2">
113
+ <li>
114
+ <a href="index.html" class="flex items-center p-3 rounded-lg hover:bg-slate-700">
115
+ <i data-feather="home" class="mr-3 w-5 h-5"></i>
116
+ <span>Dashboard</span>
117
+ </a>
118
+ </li>
119
+ <li>
120
+ <a href="trading-view.html" class="flex items-center p-3 rounded-lg hover:bg-slate-700">
121
+ <i data-feather="bar-chart-2" class="mr-3 w-5 h-5"></i>
122
+ <span>Trading View</span>
123
+ </a>
124
+ </li>
125
+ <li>
126
+ <a href="experts.html" class="flex items-center p-3 rounded-lg hover:bg-slate-700">
127
+ <i data-feather="settings" class="mr-3 w-5 h-5"></i>
128
+ <span>Expert Advisors</span>
129
+ </a>
130
+ </li>
131
+ <li>
132
+ <a href="calculator.html" class="flex items-center p-3 rounded-lg hover:bg-slate-700">
133
+ <i data-feather="calculator" class="mr-3 w-5 h-5"></i>
134
+ <span>Position Calculator</span>
135
+ </a>
136
+ </li>
137
+ <li>
138
+ <a href="strategies.html" class="flex items-center p-3 rounded-lg bg-primary-600 text-white">
139
+ <i data-feather="layers" class="mr-3 w-5 h-5"></i>
140
+ <span>Strategies</span>
141
+ </a>
142
+ </li>
143
+ <li>
144
+ <a href="risk-management.html" class="flex items-center p-3 rounded-lg hover:bg-slate-700">
145
+ <i data-feather="shield" class="mr-3 w-5 h-5"></i>
146
+ <span>Risk Management</span>
147
+ </a>
148
+ </li>
149
+ <li>
150
+ <a href="reports.html" class="flex items-center p-3 rounded-lg hover:bg-slate-700">
151
+ <i data-feather="file-text" class="mr-3 w-5 h-5"></i>
152
+ <span>Reports</span>
153
+ </a>
154
+ </li>
155
+ </ul>
156
+ </div>
157
+ </div>
158
+
159
+ <!-- Desktop Menu -->
160
+ <nav class="flex-1 desktop-menu">
161
  <ul class="space-y-2">
162
  <li>
163
  <a href="index.html" class="flex items-center p-3 rounded-lg hover:bg-slate-800">
 
184
  </a>
185
  </li>
186
  <li>
187
+ <a href="strategies.html" class="flex items-center p-3 rounded-lg bg-primary-600 text-white">
188
  <i data-feather="layers" class="mr-3"></i>
189
  Strategies
190
  </a>
 
232
  </button>
233
  </div>
234
  </header>
235
+ <!-- Strategy Overview -->
 
236
  <div class="p-4 grid grid-cols-1 md:grid-cols-4 gap-4">
237
  <div class="glass-effect rounded-xl p-4">
238
  <div class="flex justify-between items-start">
 
451
  </div>
452
  </div>
453
  </div>
 
454
  <script>
455
  // Initialize Feather Icons
456
  feather.replace();
457
+
458
+ // Mobile menu toggle
459
+ document.addEventListener('DOMContentLoaded', function() {
460
+ const menuToggle = document.getElementById('mobile-menu-toggle');
461
+ const menuContent = document.getElementById('mobile-menu-content');
462
+
463
+ if (menuToggle && menuContent) {
464
+ menuToggle.addEventListener('click', function() {
465
+ const icon = this.querySelector('[data-feather]');
466
+ if (menuContent.classList.contains('open')) {
467
+ menuContent.classList.remove('open');
468
+ icon.setAttribute('data-feather', 'menu');
469
+ } else {
470
+ menuContent.classList.add('open');
471
+ icon.setAttribute('data-feather', 'x');
472
+ }
473
+ feather.replace();
474
+ });
475
+ }
476
+ });
477
  </script>
478
  </body>
479
+ </html>
trading-view.html CHANGED
@@ -71,6 +71,27 @@
71
  border-bottom: 2px solid #0ea5e9;
72
  color: #0ea5e9;
73
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
74
  </style>
75
  </head>
76
  <body class="bg-slate-900 text-slate-100 min-h-screen">
@@ -86,7 +107,62 @@
86
  <p class="text-xs text-slate-400 mt-1">Trading Control Panel</p>
87
  </div>
88
 
89
- <nav class="flex-1">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
90
  <ul class="space-y-2">
91
  <li>
92
  <a href="index.html" class="flex items-center p-3 rounded-lg hover:bg-slate-800">
@@ -95,7 +171,7 @@
95
  </a>
96
  </li>
97
  <li>
98
- <a href="#" class="flex items-center p-3 rounded-lg bg-primary-600 text-white">
99
  <i data-feather="bar-chart-2" class="mr-3"></i>
100
  Trading View
101
  </a>
@@ -130,7 +206,7 @@
130
  Reports
131
  </a>
132
  </li>
133
- </ul>
134
  </nav>
135
 
136
  <div class="mt-auto pt-4 border-t border-slate-700">
@@ -166,8 +242,7 @@
166
  </div>
167
  </div>
168
  </header>
169
-
170
- <!-- Chart and Order Panel -->
171
  <div class="p-4 grid grid-cols-1 lg:grid-cols-3 gap-4">
172
  <!-- Chart Area -->
173
  <div class="lg:col-span-2">
@@ -375,10 +450,29 @@
375
  </div>
376
  </div>
377
  </div>
378
-
379
  <script>
380
  // Initialize Feather Icons
381
  feather.replace();
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
382
  </script>
383
  </body>
384
  </html>
 
71
  border-bottom: 2px solid #0ea5e9;
72
  color: #0ea5e9;
73
  }
74
+ /* Mobile menu styles */
75
+ .mobile-menu {
76
+ display: none;
77
+ }
78
+ @media (max-width: 768px) {
79
+ .desktop-menu {
80
+ display: none;
81
+ }
82
+ .mobile-menu {
83
+ display: block;
84
+ }
85
+ .mobile-menu-content {
86
+ max-height: 0;
87
+ overflow: hidden;
88
+ transition: max-height 0.3s ease-out;
89
+ }
90
+ .mobile-menu-content.open {
91
+ max-height: 500px;
92
+ transition: max-height 0.5s ease-in;
93
+ }
94
+ }
95
  </style>
96
  </head>
97
  <body class="bg-slate-900 text-slate-100 min-h-screen">
 
107
  <p class="text-xs text-slate-400 mt-1">Trading Control Panel</p>
108
  </div>
109
 
110
+ <!-- Mobile Menu Toggle -->
111
+ <div class="mobile-menu mb-4">
112
+ <button id="mobile-menu-toggle" class="w-full flex justify-between items-center p-3 rounded-lg bg-slate-800 hover:bg-slate-700">
113
+ <span>Menu</span>
114
+ <i data-feather="menu" class="w-5 h-5"></i>
115
+ </button>
116
+ <div id="mobile-menu-content" class="mobile-menu-content bg-slate-800 rounded-lg mt-2">
117
+ <ul class="py-2">
118
+ <li>
119
+ <a href="index.html" class="flex items-center p-3 rounded-lg hover:bg-slate-700">
120
+ <i data-feather="home" class="mr-3 w-5 h-5"></i>
121
+ <span>Dashboard</span>
122
+ </a>
123
+ </li>
124
+ <li>
125
+ <a href="trading-view.html" class="flex items-center p-3 rounded-lg bg-primary-600 text-white">
126
+ <i data-feather="bar-chart-2" class="mr-3 w-5 h-5"></i>
127
+ <span>Trading View</span>
128
+ </a>
129
+ </li>
130
+ <li>
131
+ <a href="experts.html" class="flex items-center p-3 rounded-lg hover:bg-slate-700">
132
+ <i data-feather="settings" class="mr-3 w-5 h-5"></i>
133
+ <span>Expert Advisors</span>
134
+ </a>
135
+ </li>
136
+ <li>
137
+ <a href="calculator.html" class="flex items-center p-3 rounded-lg hover:bg-slate-700">
138
+ <i data-feather="calculator" class="mr-3 w-5 h-5"></i>
139
+ <span>Position Calculator</span>
140
+ </a>
141
+ </li>
142
+ <li>
143
+ <a href="strategies.html" class="flex items-center p-3 rounded-lg hover:bg-slate-700">
144
+ <i data-feather="layers" class="mr-3 w-5 h-5"></i>
145
+ <span>Strategies</span>
146
+ </a>
147
+ </li>
148
+ <li>
149
+ <a href="risk-management.html" class="flex items-center p-3 rounded-lg hover:bg-slate-700">
150
+ <i data-feather="shield" class="mr-3 w-5 h-5"></i>
151
+ <span>Risk Management</span>
152
+ </a>
153
+ </li>
154
+ <li>
155
+ <a href="reports.html" class="flex items-center p-3 rounded-lg hover:bg-slate-700">
156
+ <i data-feather="file-text" class="mr-3 w-5 h-5"></i>
157
+ <span>Reports</span>
158
+ </a>
159
+ </li>
160
+ </ul>
161
+ </div>
162
+ </div>
163
+
164
+ <!-- Desktop Menu -->
165
+ <nav class="flex-1 desktop-menu">
166
  <ul class="space-y-2">
167
  <li>
168
  <a href="index.html" class="flex items-center p-3 rounded-lg hover:bg-slate-800">
 
171
  </a>
172
  </li>
173
  <li>
174
+ <a href="trading-view.html" class="flex items-center p-3 rounded-lg bg-primary-600 text-white">
175
  <i data-feather="bar-chart-2" class="mr-3"></i>
176
  Trading View
177
  </a>
 
206
  Reports
207
  </a>
208
  </li>
209
+ </ul>
210
  </nav>
211
 
212
  <div class="mt-auto pt-4 border-t border-slate-700">
 
242
  </div>
243
  </div>
244
  </header>
245
+ <!-- Chart and Order Panel -->
 
246
  <div class="p-4 grid grid-cols-1 lg:grid-cols-3 gap-4">
247
  <!-- Chart Area -->
248
  <div class="lg:col-span-2">
 
450
  </div>
451
  </div>
452
  </div>
 
453
  <script>
454
  // Initialize Feather Icons
455
  feather.replace();
456
+
457
+ // Mobile menu toggle
458
+ document.addEventListener('DOMContentLoaded', function() {
459
+ const menuToggle = document.getElementById('mobile-menu-toggle');
460
+ const menuContent = document.getElementById('mobile-menu-content');
461
+
462
+ if (menuToggle && menuContent) {
463
+ menuToggle.addEventListener('click', function() {
464
+ const icon = this.querySelector('[data-feather]');
465
+ if (menuContent.classList.contains('open')) {
466
+ menuContent.classList.remove('open');
467
+ icon.setAttribute('data-feather', 'menu');
468
+ } else {
469
+ menuContent.classList.add('open');
470
+ icon.setAttribute('data-feather', 'x');
471
+ }
472
+ feather.replace();
473
+ });
474
+ }
475
+ });
476
  </script>
477
  </body>
478
  </html>