Hugging Face's logo

Spaces:
jsonet
/
metatrader-command-center
Running

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

Crea una nueva pagina, que integre todas las caracteristicas para conectar la app con la cuenta de Metatrader 5 para que se vinculen los datos en tiempo real

Browse files
Files changed (8) hide show
  1. account-connection.html +573 -0
  2. calculator.html +14 -2
  3. experts.html +14 -2
  4. index.html +14 -2
  5. reports.html +14 -2
  6. risk-management.html +14 -2
  7. strategies.html +14 -2
  8. trading-view.html +14 -2
account-connection.html ADDED
@@ -0,0 +1,573 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Account Connection - MetaTrader Command Center</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script>
12
+ tailwind.config = {
13
+ darkMode: 'class',
14
+ theme: {
15
+ extend: {
16
+ colors: {
17
+ primary: {
18
+ 50: '#f0f9ff',
19
+ 100: '#e0f2fe',
20
+ 200: '#bae6fd',
21
+ 300: '#7dd3fc',
22
+ 400: '#38bdf8',
23
+ 500: '#0ea5e9',
24
+ 600: '#0284c7',
25
+ 700: '#0369a1',
26
+ 800: '#075985',
27
+ 900: '#0c4a6e',
28
+ },
29
+ secondary: {
30
+ 50: '#fdf2f8',
31
+ 100: '#fce7f3',
32
+ 200: '#fbcfe8',
33
+ 300: '#f9a8d4',
34
+ 400: '#f472b6',
35
+ 500: '#ec4899',
36
+ 600: '#db2777',
37
+ 700: '#be185d',
38
+ 800: '#9d174d',
39
+ 900: '#831843',
40
+ }
41
+ }
42
+ }
43
+ }
44
+ }
45
+ </script>
46
+ <style>
47
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
48
+ body {
49
+ font-family: 'Inter', sans-serif;
50
+ background-color: #0f172a;
51
+ color: #e2e8f0;
52
+ }
53
+ .glass-effect {
54
+ background: rgba(30, 41, 59, 0.7);
55
+ backdrop-filter: blur(10px);
56
+ border: 1px solid rgba(148, 163, 184, 0.2);
57
+ }
58
+ .connection-card {
59
+ transition: all 0.3s ease;
60
+ }
61
+ .connection-card:hover {
62
+ transform: translateY(-3px);
63
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
64
+ }
65
+ .status-indicator {
66
+ display: inline-block;
67
+ width: 10px;
68
+ height: 10px;
69
+ border-radius: 50%;
70
+ margin-right: 8px;
71
+ }
72
+ .connected {
73
+ background-color: #4ade80;
74
+ }
75
+ .disconnected {
76
+ background-color: #ef4444;
77
+ }
78
+ .connecting {
79
+ background-color: #f59e0b;
80
+ }
81
+ .pulse {
82
+ animation: pulse 2s infinite;
83
+ }
84
+ @keyframes pulse {
85
+ 0% { opacity: 1; }
86
+ 50% { opacity: 0.5; }
87
+ 100% { opacity: 1; }
88
+ }
89
+ /* Mobile menu styles */
90
+ .mobile-menu {
91
+ display: none;
92
+ }
93
+ @media (max-width: 768px) {
94
+ .desktop-menu {
95
+ display: none;
96
+ }
97
+ .mobile-menu {
98
+ display: block;
99
+ }
100
+ .mobile-menu-content {
101
+ max-height: 0;
102
+ overflow: hidden;
103
+ transition: max-height 0.3s ease-out;
104
+ }
105
+ .mobile-menu-content.open {
106
+ max-height: 500px;
107
+ transition: max-height 0.5s ease-in;
108
+ }
109
+ }
110
+ </style>
111
+ </head>
112
+ <body class="bg-slate-900 text-slate-100 min-h-screen">
113
+ <!-- Main Container -->
114
+ <div class="flex flex-col md:flex-row min-h-screen">
115
+ <!-- Sidebar -->
116
+ <div class="w-full md:w-64 glass-effect p-4 flex flex-col">
117
+ <div class="mb-8">
118
+ <h1 class="text-2xl font-bold text-primary-400 flex items-center">
119
+ <i data-feather="activity" class="mr-2"></i>
120
+ MT5 Command
121
+ </h1>
122
+ <p class="text-xs text-slate-400 mt-1">Trading Control Panel</p>
123
+ </div>
124
+
125
+ <!-- Mobile Menu Toggle -->
126
+ <div class="mobile-menu mb-4">
127
+ <button id="mobile-menu-toggle" class="w-full flex justify-between items-center p-3 rounded-lg bg-slate-800 hover:bg-slate-700">
128
+ <span>Menu</span>
129
+ <i data-feather="menu" class="w-5 h-5"></i>
130
+ </button>
131
+ <div id="mobile-menu-content" class="mobile-menu-content bg-slate-800 rounded-lg mt-2">
132
+ <ul class="py-2">
133
+ <li>
134
+ <a href="index.html" class="flex items-center p-3 rounded-lg hover:bg-slate-700">
135
+ <i data-feather="home" class="mr-3 w-5 h-5"></i>
136
+ <span>Dashboard</span>
137
+ </a>
138
+ </li>
139
+ <li>
140
+ <a href="trading-view.html" class="flex items-center p-3 rounded-lg hover:bg-slate-700">
141
+ <i data-feather="bar-chart-2" class="mr-3 w-5 h-5"></i>
142
+ <span>Trading View</span>
143
+ </a>
144
+ </li>
145
+ <li>
146
+ <a href="experts.html" class="flex items-center p-3 rounded-lg hover:bg-slate-700">
147
+ <i data-feather="settings" class="mr-3 w-5 h-5"></i>
148
+ <span>Expert Advisors</span>
149
+ </a>
150
+ </li>
151
+ <li>
152
+ <a href="calculator.html" class="flex items-center p-3 rounded-lg hover:bg-slate-700">
153
+ <i data-feather="calculator" class="mr-3 w-5 h-5"></i>
154
+ <span>Position Calculator</span>
155
+ </a>
156
+ </li>
157
+ <li>
158
+ <a href="strategies.html" class="flex items-center p-3 rounded-lg hover:bg-slate-700">
159
+ <i data-feather="layers" class="mr-3 w-5 h-5"></i>
160
+ <span>Strategies</span>
161
+ </a>
162
+ </li>
163
+ <li>
164
+ <a href="risk-management.html" class="flex items-center p-3 rounded-lg hover:bg-slate-700">
165
+ <i data-feather="shield" class="mr-3 w-5 h-5"></i>
166
+ <span>Risk Management</span>
167
+ </a>
168
+ </li>
169
+ <li>
170
+ <a href="reports.html" class="flex items-center p-3 rounded-lg hover:bg-slate-700">
171
+ <i data-feather="file-text" class="mr-3 w-5 h-5"></i>
172
+ <span>Reports</span>
173
+ </a>
174
+ </li>
175
+ <li>
176
+ <a href="account-connection.html" class="flex items-center p-3 rounded-lg bg-primary-600 text-white">
177
+ <i data-feather="link" class="mr-3 w-5 h-5"></i>
178
+ <span>Account Connection</span>
179
+ </a>
180
+ </li>
181
+ </ul>
182
+ </div>
183
+ </div>
184
+
185
+ <!-- Desktop Menu -->
186
+ <nav class="flex-1 desktop-menu">
187
+ <ul class="space-y-2">
188
+ <li>
189
+ <a href="index.html" class="flex items-center p-3 rounded-lg hover:bg-slate-800">
190
+ <i data-feather="home" class="mr-3"></i>
191
+ Dashboard
192
+ </a>
193
+ </li>
194
+ <li>
195
+ <a href="trading-view.html" class="flex items-center p-3 rounded-lg hover:bg-slate-800">
196
+ <i data-feather="bar-chart-2" class="mr-3"></i>
197
+ Trading View
198
+ </a>
199
+ </li>
200
+ <li>
201
+ <a href="experts.html" class="flex items-center p-3 rounded-lg hover:bg-slate-800">
202
+ <i data-feather="settings" class="mr-3"></i>
203
+ Expert Advisors
204
+ </a>
205
+ </li>
206
+ <li>
207
+ <a href="calculator.html" class="flex items-center p-3 rounded-lg hover:bg-slate-800">
208
+ <i data-feather="calculator" class="mr-3"></i>
209
+ Position Calculator
210
+ </a>
211
+ </li>
212
+ <li>
213
+ <a href="strategies.html" class="flex items-center p-3 rounded-lg hover:bg-slate-800">
214
+ <i data-feather="layers" class="mr-3"></i>
215
+ Strategies
216
+ </a>
217
+ </li>
218
+ <li>
219
+ <a href="risk-management.html" class="flex items-center p-3 rounded-lg hover:bg-slate-800">
220
+ <i data-feather="shield" class="mr-3"></i>
221
+ Risk Management
222
+ </a>
223
+ </li>
224
+ <li>
225
+ <a href="reports.html" class="flex items-center p-3 rounded-lg hover:bg-slate-800">
226
+ <i data-feather="file-text" class="mr-3"></i>
227
+ Reports
228
+ </a>
229
+ </li>
230
+ <li>
231
+ <a href="account-connection.html" class="flex items-center p-3 rounded-lg bg-primary-600 text-white">
232
+ <i data-feather="link" class="mr-3"></i>
233
+ Account Connection
234
+ </a>
235
+ </li>
236
+ </ul>
237
+ </nav>
238
+
239
+ <div class="mt-auto pt-4 border-t border-slate-700">
240
+ <div class="flex items-center">
241
+ <div class="bg-slate-700 rounded-full p-2 mr-3">
242
+ <i data-feather="user" class="w-5 h-5"></i>
243
+ </div>
244
+ <div>
245
+ <p class="font-medium">Trader Pro</p>
246
+ <p class="text-xs text-slate-400">Active Session</p>
247
+ </div>
248
+ </div>
249
+ </div>
250
+ </div>
251
+
252
+ <!-- Main Content -->
253
+ <div class="flex-1 overflow-auto">
254
+ <!-- Header -->
255
+ <header class="glass-effect p-4 flex justify-between items-center">
256
+ <div>
257
+ <h2 class="text-xl font-bold">Account Connection</h2>
258
+ <p class="text-sm text-slate-400">Connect your MetaTrader 5 account for real-time data</p>
259
+ </div>
260
+ <div class="flex items-center space-x-4">
261
+ <button class="bg-slate-800 hover:bg-slate-700 px-4 py-2 rounded-lg flex items-center">
262
+ <i data-feather="refresh-cw" class="mr-2"></i>
263
+ Refresh
264
+ </button>
265
+ </div>
266
+ </header>
267
+
268
+ <!-- Connection Status -->
269
+ <div class="p-4">
270
+ <div class="glass-effect rounded-xl p-6">
271
+ <div class="flex flex-col md:flex-row items-center justify-between">
272
+ <div class="flex items-center mb-4 md:mb-0">
273
+ <div class="status-indicator disconnected pulse mr-4" id="connection-status"></div>
274
+ <div>
275
+ <h3 class="font-bold text-lg">Account Connection Status</h3>
276
+ <p class="text-slate-400" id="status-text">Disconnected</p>
277
+ </div>
278
+ </div>
279
+ <div class="flex space-x-3">
280
+ <button id="connect-btn" class="bg-primary-600 hover:bg-primary-700 px-6 py-2 rounded-lg flex items-center">
281
+ <i data-feather="link" class="mr-2"></i>
282
+ Connect
283
+ </button>
284
+ <button id="disconnect-btn" class="bg-slate-800 hover:bg-slate-700 px-6 py-2 rounded-lg flex items-center hidden">
285
+ <i data-feather="unlink" class="mr-2"></i>
286
+ Disconnect
287
+ </button>
288
+ </div>
289
+ </div>
290
+ </div>
291
+ </div>
292
+
293
+ <!-- Connection Methods -->
294
+ <div class="p-4">
295
+ <div class="glass-effect rounded-xl p-6">
296
+ <h3 class="font-bold text-lg mb-6">Connection Methods</h3>
297
+
298
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
299
+ <!-- MT5 Terminal Connection -->
300
+ <div class="connection-card glass-effect rounded-xl p-5">
301
+ <div class="flex items-center mb-4">
302
+ <div class="bg-blue-500/20 p-3 rounded-lg mr-4">
303
+ <i data-feather="monitor" class="text-blue-500 w-6 h-6"></i>
304
+ </div>
305
+ <h4 class="font-bold text-lg">MT5 Terminal</h4>
306
+ </div>
307
+ <p class="text-slate-400 mb-4">Connect directly to your MetaTrader 5 terminal for real-time data synchronization.</p>
308
+ <ul class="space-y-2 mb-6">
309
+ <li class="flex items-center">
310
+ <i data-feather="check-circle" class="text-green-500 mr-2 w-5 h-5"></i>
311
+ <span>Real-time price feeds</span>
312
+ </li>
313
+ <li class="flex items-center">
314
+ <i data-feather="check-circle" class="text-green-500 mr-2 w-5 h-5"></i>
315
+ <span>Live position tracking</span>
316
+ </li>
317
+ <li class="flex items-center">
318
+ <i data-feather="check-circle" class="text-green-500 mr-2 w-5 h-5"></i>
319
+ <span>Order execution</span>
320
+ </li>
321
+ </ul>
322
+ <button class="w-full bg-slate-800 hover:bg-slate-700 py-2 rounded-lg">
323
+ Setup Instructions
324
+ </button>
325
+ </div>
326
+
327
+ <!-- MT5 WebAPI Connection -->
328
+ <div class="connection-card glass-effect rounded-xl p-5">
329
+ <div class="flex items-center mb-4">
330
+ <div class="bg-purple-500/20 p-3 rounded-lg mr-4">
331
+ <i data-feather="globe" class="text-purple-500 w-6 h-6"></i>
332
+ </div>
333
+ <h4 class="font-bold text-lg">WebAPI Connection</h4>
334
+ </div>
335
+ <p class="text-slate-400 mb-4">Connect using MetaTrader 5 WebAPI for remote access to your trading account.</p>
336
+ <ul class="space-y-2 mb-6">
337
+ <li class="flex items-center">
338
+ <i data-feather="check-circle" class="text-green-500 mr-2 w-5 h-5"></i>
339
+ <span>Remote access</span>
340
+ </li>
341
+ <li class="flex items-center">
342
+ <i data-feather="check-circle" class="text-green-500 mr-2 w-5 h-5"></i>
343
+ <span>Encrypted connection</span>
344
+ </li>
345
+ <li class="flex items-center">
346
+ <i data-feather="check-circle" class="text-green-500 mr-2 w-5 h-5"></i>
347
+ <span>24/7 availability</span>
348
+ </li>
349
+ </ul>
350
+ <button class="w-full bg-slate-800 hover:bg-slate-700 py-2 rounded-lg">
351
+ Configure WebAPI
352
+ </button>
353
+ </div>
354
+ </div>
355
+ </div>
356
+ </div>
357
+
358
+ <!-- Account Information -->
359
+ <div class="p-4">
360
+ <div class="glass-effect rounded-xl p-6">
361
+ <h3 class="font-bold text-lg mb-6">Connected Account Information</h3>
362
+
363
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
364
+ <div class="bg-slate-800 rounded-lg p-4">
365
+ <p class="text-slate-400 text-sm">Account Number</p>
366
+ <p class="text-xl font-bold mt-1" id="account-number">-</p>
367
+ </div>
368
+
369
+ <div class="bg-slate-800 rounded-lg p-4">
370
+ <p class="text-slate-400 text-sm">Balance</p>
371
+ <p class="text-xl font-bold mt-1" id="account-balance">-</p>
372
+ </div>
373
+
374
+ <div class="bg-slate-800 rounded-lg p-4">
375
+ <p class="text-slate-400 text-sm">Equity</p>
376
+ <p class="text-xl font-bold mt-1" id="account-equity">-</p>
377
+ </div>
378
+
379
+ <div class="bg-slate-800 rounded-lg p-4">
380
+ <p class="text-slate-400 text-sm">Server</p>
381
+ <p class="text-xl font-bold mt-1" id="server-name">-</p>
382
+ </div>
383
+ </div>
384
+ </div>
385
+ </div>
386
+
387
+ <!-- Connection Logs -->
388
+ <div class="p-4">
389
+ <div class="glass-effect rounded-xl p-6">
390
+ <div class="flex justify-between items-center mb-6">
391
+ <h3 class="font-bold text-lg">Connection Logs</h3>
392
+ <button class="text-sm text-primary-400">Clear Logs</button>
393
+ </div>
394
+
395
+ <div class="bg-slate-800 rounded-lg p-4 h-64 overflow-y-auto">
396
+ <div class="space-y-3" id="connection-logs">
397
+ <div class="text-sm">
398
+ <p class="text-slate-400">System initialized</p>
399
+ <p class="text-xs text-slate-500">Today, 10:00:00 AM</p>
400
+ </div>
401
+ </div>
402
+ </div>
403
+ </div>
404
+ </div>
405
+ </div>
406
+ </div>
407
+
408
+ <!-- Connection Modal -->
409
+ <div id="connection-modal" class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center hidden z-50">
410
+ <div class="glass-effect rounded-xl p-6 w-full max-w-md">
411
+ <h3 class="font-bold text-lg mb-4">Connect to MT5 Account</h3>
412
+
413
+ <div class="space-y-4">
414
+ <div>
415
+ <label class="block text-sm font-medium text-slate-300 mb-2">Broker Server</label>
416
+ <select class="w-full bg-slate-800 border border-slate-700 rounded-lg py-3 px-4 focus:outline-none focus:ring-2 focus:ring-primary-500">
417
+ <option>Select your broker</option>
418
+ <option>MetaQuotes-Demo</option>
419
+ <option>ICMarkets-Demo</option>
420
+ <option>Pepperstone-Demo</option>
421
+ <option>FTMO-Demo</option>
422
+ </select>
423
+ </div>
424
+
425
+ <div>
426
+ <label class="block text-sm font-medium text-slate-300 mb-2">Login</label>
427
+ <input type="text" placeholder="Account number" class="w-full bg-slate-800 border border-slate-700 rounded-lg py-3 px-4 focus:outline-none focus:ring-2 focus:ring-primary-500">
428
+ </div>
429
+
430
+ <div>
431
+ <label class="block text-sm font-medium text-slate-300 mb-2">Password</label>
432
+ <input type="password" placeholder="Account password" class="w-full bg-slate-800 border border-slate-700 rounded-lg py-3 px-4 focus:outline-none focus:ring-2 focus:ring-primary-500">
433
+ </div>
434
+
435
+ <div class="flex items-center">
436
+ <input type="checkbox" id="save-credentials" class="mr-2">
437
+ <label for="save-credentials" class="text-sm">Save credentials securely</label>
438
+ </div>
439
+ </div>
440
+
441
+ <div class="flex space-x-3 mt-6">
442
+ <button id="cancel-connection" class="flex-1 bg-slate-800 hover:bg-slate-700 py-3 rounded-lg">
443
+ Cancel
444
+ </button>
445
+ <button id="confirm-connection" class="flex-1 bg-primary-600 hover:bg-primary-700 py-3 rounded-lg">
446
+ Connect
447
+ </button>
448
+ </div>
449
+ </div>
450
+ </div>
451
+
452
+ <script>
453
+ // Initialize Feather Icons
454
+ feather.replace();
455
+
456
+ // DOM Elements
457
+ const connectionStatus = document.getElementById('connection-status');
458
+ const statusText = document.getElementById('status-text');
459
+ const connectBtn = document.getElementById('connect-btn');
460
+ const disconnectBtn = document.getElementById('disconnect-btn');
461
+ const connectionModal = document.getElementById('connection-modal');
462
+ const cancelConnection = document.getElementById('cancel-connection');
463
+ const confirmConnection = document.getElementById('confirm-connection');
464
+ const connectionLogs = document.getElementById('connection-logs');
465
+
466
+ // Mobile menu toggle
467
+ document.addEventListener('DOMContentLoaded', function() {
468
+ const menuToggle = document.getElementById('mobile-menu-toggle');
469
+ const menuContent = document.getElementById('mobile-menu-content');
470
+
471
+ if (menuToggle && menuContent) {
472
+ menuToggle.addEventListener('click', function() {
473
+ const icon = this.querySelector('[data-feather]');
474
+ if (menuContent.classList.contains('open')) {
475
+ menuContent.classList.remove('open');
476
+ icon.setAttribute('data-feather', 'menu');
477
+ } else {
478
+ menuContent.classList.add('open');
479
+ icon.setAttribute('data-feather', 'x');
480
+ }
481
+ feather.replace();
482
+ });
483
+ }
484
+
485
+ // Event listeners
486
+ connectBtn.addEventListener('click', openConnectionModal);
487
+ cancelConnection.addEventListener('click', closeConnectionModal);
488
+ confirmConnection.addEventListener('click', connectToAccount);
489
+ disconnectBtn.addEventListener('click', disconnectAccount);
490
+ });
491
+
492
+ // Open connection modal
493
+ function openConnectionModal() {
494
+ connectionModal.classList.remove('hidden');
495
+ }
496
+
497
+ // Close connection modal
498
+ function closeConnectionModal() {
499
+ connectionModal.classList.add('hidden');
500
+ }
501
+
502
+ // Connect to account
503
+ function connectToAccount() {
504
+ // Update UI to connecting state
505
+ connectionStatus.className = 'status-indicator connecting pulse mr-4';
506
+ statusText.textContent = 'Connecting...';
507
+ connectBtn.disabled = true;
508
+
509
+ // Close modal
510
+ closeConnectionModal();
511
+
512
+ // Add log entry
513
+ addLogEntry('Attempting to connect to MT5 account...');
514
+
515
+ // Simulate connection process
516
+ setTimeout(() => {
517
+ // Update UI to connected state
518
+ connectionStatus.className = 'status-indicator connected mr-4';
519
+ statusText.textContent = 'Connected';
520
+ connectBtn.classList.add('hidden');
521
+ disconnectBtn.classList.remove('hidden');
522
+ connectBtn.disabled = false;
523
+
524
+ // Update account information
525
+ document.getElementById('account-number').textContent = '50123456';
526
+ document.getElementById('account-balance').textContent = '$25,430.75';
527
+ document.getElementById('account-equity').textContent = '$25,687.42';
528
+ document.getElementById('server-name').textContent = 'MetaQuotes-Demo';
529
+
530
+ // Add log entry
531
+ addLogEntry('Successfully connected to MT5 account #50123456');
532
+ addLogEntry('Subscribing to market data feeds...');
533
+ addLogEntry('Market data feeds subscribed successfully');
534
+ }, 2000);
535
+ }
536
+
537
+ // Disconnect account
538
+ function disconnectAccount() {
539
+ // Update UI to disconnected state
540
+ connectionStatus.className = 'status-indicator disconnected mr-4';
541
+ statusText.textContent = 'Disconnected';
542
+ disconnectBtn.classList.add('hidden');
543
+ connectBtn.classList.remove('hidden');
544
+
545
+ // Clear account information
546
+ document.getElementById('account-number').textContent = '-';
547
+ document.getElementById('account-balance').textContent = '-';
548
+ document.getElementById('account-equity').textContent = '-';
549
+ document.getElementById('server-name').textContent = '-';
550
+
551
+ // Add log entry
552
+ addLogEntry('Disconnected from MT5 account');
553
+ }
554
+
555
+ // Add log entry
556
+ function addLogEntry(message) {
557
+ const logEntry = document.createElement('div');
558
+ logEntry.className = 'text-sm';
559
+ logEntry.innerHTML = `
560
+ <p class="text-slate-300">${message}</p>
561
+ <p class="text-xs text-slate-500">${getCurrentTime()}</p>
562
+ `;
563
+ connectionLogs.prepend(logEntry);
564
+ }
565
+
566
+ // Get current time for logs
567
+ function getCurrentTime() {
568
+ const now = new Date();
569
+ return now.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit', second:'2-digit'});
570
+ }
571
+ </script>
572
+ </body>
573
+ </html>
calculator.html CHANGED
@@ -151,7 +151,13 @@
151
  <span>Reports</span>
152
  </a>
153
  </li>
154
- </ul>
 
 
 
 
 
 
155
  </div>
156
  </div>
157
 
@@ -200,7 +206,13 @@
200
  Reports
201
  </a>
202
  </li>
203
- </ul>
 
 
 
 
 
 
204
  </nav>
205
 
206
  <div class="mt-auto pt-4 border-t border-slate-700">
 
151
  <span>Reports</span>
152
  </a>
153
  </li>
154
+ <li>
155
+ <a href="account-connection.html" class="flex items-center p-3 rounded-lg hover:bg-slate-700">
156
+ <i data-feather="link" class="mr-3 w-5 h-5"></i>
157
+ <span>Account Connection</span>
158
+ </a>
159
+ </li>
160
+ </ul>
161
  </div>
162
  </div>
163
 
 
206
  Reports
207
  </a>
208
  </li>
209
+ <li>
210
+ <a href="account-connection.html" class="flex items-center p-3 rounded-lg hover:bg-slate-800">
211
+ <i data-feather="link" class="mr-3"></i>
212
+ Account Connection
213
+ </a>
214
+ </li>
215
+ </ul>
216
  </nav>
217
 
218
  <div class="mt-auto pt-4 border-t border-slate-700">
experts.html CHANGED
@@ -164,7 +164,13 @@
164
  <span>Reports</span>
165
  </a>
166
  </li>
167
- </ul>
 
 
 
 
 
 
168
  </div>
169
  </div>
170
 
@@ -213,7 +219,13 @@
213
  Reports
214
  </a>
215
  </li>
216
- </ul>
 
 
 
 
 
 
217
  </nav>
218
 
219
  <div class="mt-auto pt-4 border-t border-slate-700">
 
164
  <span>Reports</span>
165
  </a>
166
  </li>
167
+ <li>
168
+ <a href="account-connection.html" class="flex items-center p-3 rounded-lg hover:bg-slate-700">
169
+ <i data-feather="link" class="mr-3 w-5 h-5"></i>
170
+ <span>Account Connection</span>
171
+ </a>
172
+ </li>
173
+ </ul>
174
  </div>
175
  </div>
176
 
 
219
  Reports
220
  </a>
221
  </li>
222
+ <li>
223
+ <a href="account-connection.html" class="flex items-center p-3 rounded-lg hover:bg-slate-800">
224
+ <i data-feather="link" class="mr-3"></i>
225
+ Account Connection
226
+ </a>
227
+ </li>
228
+ </ul>
229
  </nav>
230
 
231
  <div class="mt-auto pt-4 border-t border-slate-700">
index.html CHANGED
@@ -173,7 +173,13 @@
173
  <span>Reports</span>
174
  </a>
175
  </li>
176
- </ul>
 
 
 
 
 
 
177
  </div>
178
  </div>
179
 
@@ -222,7 +228,13 @@
222
  Reports
223
  </a>
224
  </li>
225
- </ul>
 
 
 
 
 
 
226
  </nav>
227
 
228
  <div class="mt-auto pt-4 border-t border-slate-700">
 
173
  <span>Reports</span>
174
  </a>
175
  </li>
176
+ <li>
177
+ <a href="account-connection.html" class="flex items-center p-3 rounded-lg hover:bg-slate-700">
178
+ <i data-feather="link" class="mr-3 w-5 h-5"></i>
179
+ <span>Account Connection</span>
180
+ </a>
181
+ </li>
182
+ </ul>
183
  </div>
184
  </div>
185
 
 
228
  Reports
229
  </a>
230
  </li>
231
+ <li>
232
+ <a href="account-connection.html" class="flex items-center p-3 rounded-lg hover:bg-slate-800">
233
+ <i data-feather="link" class="mr-3"></i>
234
+ Account Connection
235
+ </a>
236
+ </li>
237
+ </ul>
238
  </nav>
239
 
240
  <div class="mt-auto pt-4 border-t border-slate-700">
reports.html CHANGED
@@ -153,7 +153,13 @@
153
  <span>Reports</span>
154
  </a>
155
  </li>
156
- </ul>
 
 
 
 
 
 
157
  </div>
158
  </div>
159
 
@@ -202,7 +208,13 @@
202
  Reports
203
  </a>
204
  </li>
205
- </ul>
 
 
 
 
 
 
206
  </nav>
207
 
208
  <div class="mt-auto pt-4 border-t border-slate-700">
 
153
  <span>Reports</span>
154
  </a>
155
  </li>
156
+ <li>
157
+ <a href="account-connection.html" class="flex items-center p-3 rounded-lg hover:bg-slate-700">
158
+ <i data-feather="link" class="mr-3 w-5 h-5"></i>
159
+ <span>Account Connection</span>
160
+ </a>
161
+ </li>
162
+ </ul>
163
  </div>
164
  </div>
165
 
 
208
  Reports
209
  </a>
210
  </li>
211
+ <li>
212
+ <a href="account-connection.html" class="flex items-center p-3 rounded-lg hover:bg-slate-800">
213
+ <i data-feather="link" class="mr-3"></i>
214
+ Account Connection
215
+ </a>
216
+ </li>
217
+ </ul>
218
  </nav>
219
 
220
  <div class="mt-auto pt-4 border-t border-slate-700">
risk-management.html CHANGED
@@ -162,7 +162,13 @@
162
  <span>Reports</span>
163
  </a>
164
  </li>
165
- </ul>
 
 
 
 
 
 
166
  </div>
167
  </div>
168
 
@@ -211,7 +217,13 @@
211
  Reports
212
  </a>
213
  </li>
214
- </ul>
 
 
 
 
 
 
215
  </nav>
216
 
217
  <div class="mt-auto pt-4 border-t border-slate-700">
 
162
  <span>Reports</span>
163
  </a>
164
  </li>
165
+ <li>
166
+ <a href="account-connection.html" class="flex items-center p-3 rounded-lg hover:bg-slate-700">
167
+ <i data-feather="link" class="mr-3 w-5 h-5"></i>
168
+ <span>Account Connection</span>
169
+ </a>
170
+ </li>
171
+ </ul>
172
  </div>
173
  </div>
174
 
 
217
  Reports
218
  </a>
219
  </li>
220
+ <li>
221
+ <a href="account-connection.html" class="flex items-center p-3 rounded-lg hover:bg-slate-800">
222
+ <i data-feather="link" class="mr-3"></i>
223
+ Account Connection
224
+ </a>
225
+ </li>
226
+ </ul>
227
  </nav>
228
 
229
  <div class="mt-auto pt-4 border-t border-slate-700">
strategies.html CHANGED
@@ -152,7 +152,13 @@
152
  <span>Reports</span>
153
  </a>
154
  </li>
155
- </ul>
 
 
 
 
 
 
156
  </div>
157
  </div>
158
 
@@ -201,7 +207,13 @@
201
  Reports
202
  </a>
203
  </li>
204
- </ul>
 
 
 
 
 
 
205
  </nav>
206
 
207
  <div class="mt-auto pt-4 border-t border-slate-700">
 
152
  <span>Reports</span>
153
  </a>
154
  </li>
155
+ <li>
156
+ <a href="account-connection.html" class="flex items-center p-3 rounded-lg hover:bg-slate-700">
157
+ <i data-feather="link" class="mr-3 w-5 h-5"></i>
158
+ <span>Account Connection</span>
159
+ </a>
160
+ </li>
161
+ </ul>
162
  </div>
163
  </div>
164
 
 
207
  Reports
208
  </a>
209
  </li>
210
+ <li>
211
+ <a href="account-connection.html" class="flex items-center p-3 rounded-lg hover:bg-slate-800">
212
+ <i data-feather="link" class="mr-3"></i>
213
+ Account Connection
214
+ </a>
215
+ </li>
216
+ </ul>
217
  </nav>
218
 
219
  <div class="mt-auto pt-4 border-t border-slate-700">
trading-view.html CHANGED
@@ -157,7 +157,13 @@
157
  <span>Reports</span>
158
  </a>
159
  </li>
160
- </ul>
 
 
 
 
 
 
161
  </div>
162
  </div>
163
 
@@ -206,7 +212,13 @@
206
  Reports
207
  </a>
208
  </li>
209
- </ul>
 
 
 
 
 
 
210
  </nav>
211
 
212
  <div class="mt-auto pt-4 border-t border-slate-700">
 
157
  <span>Reports</span>
158
  </a>
159
  </li>
160
+ <li>
161
+ <a href="account-connection.html" class="flex items-center p-3 rounded-lg hover:bg-slate-700">
162
+ <i data-feather="link" class="mr-3 w-5 h-5"></i>
163
+ <span>Account Connection</span>
164
+ </a>
165
+ </li>
166
+ </ul>
167
  </div>
168
  </div>
169
 
 
212
  Reports
213
  </a>
214
  </li>
215
+ <li>
216
+ <a href="account-connection.html" class="flex items-center p-3 rounded-lg hover:bg-slate-800">
217
+ <i data-feather="link" class="mr-3"></i>
218
+ Account Connection
219
+ </a>
220
+ </li>
221
+ </ul>
222
  </nav>
223
 
224
  <div class="mt-auto pt-4 border-t border-slate-700">