Hugging Face's logo

Spaces:
Yllvar
/
quanttrader-pro
Running

App Files Community
Yllvar commited on
Commit
53f87e9
·
verified ·
1 Parent(s): 4878598

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +1451 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Quanttrader Pro
3
- emoji: 🐨
4
- colorFrom: green
5
- colorTo: pink
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: quanttrader-pro
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: blue
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,1451 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>QuantTrader Pro | Institutional-Grade Crypto Trading</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
9
+ <style>
10
+ :root {
11
+ --primary-bg: #000000;
12
+ --primary-text: #FCD535;
13
+ --secondary-text: #EAECEF;
14
+ --accent-yellow: #F0B90B;
15
+ --positive: #0ECB81;
16
+ --negative: #F6465D;
17
+ --panel-bg: #1E2026;
18
+ --border-color: #2B3139;
19
+ --dark-accent: #181A20;
20
+ --light-accent: #474D57;
21
+ }
22
+
23
+ * {
24
+ margin: 0;
25
+ padding: 0;
26
+ box-sizing: border-box;
27
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
28
+ }
29
+
30
+ body {
31
+ background-color: var(--primary-bg);
32
+ color: var(--secondary-text);
33
+ min-height: 100vh;
34
+ overflow-x: hidden;
35
+ }
36
+
37
+ .container {
38
+ max-width: 1800px;
39
+ margin: 0 auto;
40
+ padding: 20px;
41
+ }
42
+
43
+ header {
44
+ display: flex;
45
+ justify-content: space-between;
46
+ align-items: center;
47
+ padding: 15px 0;
48
+ border-bottom: 1px solid var(--border-color);
49
+ margin-bottom: 20px;
50
+ }
51
+
52
+ .logo {
53
+ display: flex;
54
+ align-items: center;
55
+ gap: 10px;
56
+ }
57
+
58
+ .logo h1 {
59
+ color: var(--primary-text);
60
+ font-size: 24px;
61
+ font-weight: 700;
62
+ }
63
+
64
+ .logo-icon {
65
+ color: var(--primary-text);
66
+ font-size: 28px;
67
+ }
68
+
69
+ .header-controls {
70
+ display: flex;
71
+ align-items: center;
72
+ gap: 20px;
73
+ }
74
+
75
+ .user-menu {
76
+ display: flex;
77
+ align-items: center;
78
+ gap: 10px;
79
+ cursor: pointer;
80
+ }
81
+
82
+ .user-avatar {
83
+ width: 36px;
84
+ height: 36px;
85
+ border-radius: 50%;
86
+ background-color: var(--primary-text);
87
+ display: flex;
88
+ align-items: center;
89
+ justify-content: center;
90
+ color: var(--primary-bg);
91
+ font-weight: bold;
92
+ }
93
+
94
+ .status-indicator {
95
+ display: flex;
96
+ align-items: center;
97
+ gap: 8px;
98
+ background-color: rgba(240, 185, 11, 0.1);
99
+ padding: 8px 15px;
100
+ border-radius: 20px;
101
+ font-size: 14px;
102
+ color: var(--primary-text);
103
+ }
104
+
105
+ .status-dot {
106
+ width: 10px;
107
+ height: 10px;
108
+ border-radius: 50%;
109
+ background-color: var(--positive);
110
+ animation: pulse 2s infinite;
111
+ }
112
+
113
+ @keyframes pulse {
114
+ 0% { opacity: 1; }
115
+ 50% { opacity: 0.5; }
116
+ 100% { opacity: 1; }
117
+ }
118
+
119
+ .dashboard-grid {
120
+ display: grid;
121
+ grid-template-columns: repeat(12, 1fr);
122
+ gap: 20px;
123
+ }
124
+
125
+ .panel {
126
+ background-color: var(--panel-bg);
127
+ border-radius: 8px;
128
+ padding: 20px;
129
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
130
+ border: 1px solid var(--border-color);
131
+ position: relative;
132
+ }
133
+
134
+ .panel-header {
135
+ display: flex;
136
+ justify-content: space-between;
137
+ align-items: center;
138
+ margin-bottom: 15px;
139
+ padding-bottom: 10px;
140
+ border-bottom: 1px solid var(--border-color);
141
+ }
142
+
143
+ .panel-title {
144
+ color: var(--primary-text);
145
+ font-size: 18px;
146
+ font-weight: 600;
147
+ }
148
+
149
+ .panel-actions {
150
+ display: flex;
151
+ gap: 10px;
152
+ }
153
+
154
+ .panel-action {
155
+ background: none;
156
+ border: none;
157
+ color: var(--secondary-text);
158
+ cursor: pointer;
159
+ font-size: 14px;
160
+ transition: color 0.2s;
161
+ }
162
+
163
+ .panel-action:hover {
164
+ color: var(--primary-text);
165
+ }
166
+
167
+ .market-overview {
168
+ grid-column: span 4;
169
+ }
170
+
171
+ .portfolio-status {
172
+ grid-column: span 4;
173
+ }
174
+
175
+ .trading-signals {
176
+ grid-column: span 4;
177
+ }
178
+
179
+ .recent-trades {
180
+ grid-column: span 6;
181
+ }
182
+
183
+ .performance-metrics {
184
+ grid-column: span 6;
185
+ }
186
+
187
+ .strategy-config {
188
+ grid-column: span 6;
189
+ }
190
+
191
+ .market-pairs {
192
+ display: grid;
193
+ gap: 15px;
194
+ }
195
+
196
+ .pair-card {
197
+ display: flex;
198
+ justify-content: space-between;
199
+ align-items: center;
200
+ padding: 12px 15px;
201
+ background-color: rgba(30, 32, 38, 0.8);
202
+ border-radius: 6px;
203
+ border-left: 3px solid var(--border-color);
204
+ transition: all 0.3s ease;
205
+ cursor: pointer;
206
+ }
207
+
208
+ .pair-card:hover {
209
+ transform: translateY(-2px);
210
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
211
+ border-left-color: var(--primary-text);
212
+ }
213
+
214
+ .pair-info {
215
+ display: flex;
216
+ flex-direction: column;
217
+ gap: 5px;
218
+ }
219
+
220
+ .pair-name {
221
+ font-weight: 600;
222
+ color: var(--secondary-text);
223
+ }
224
+
225
+ .pair-price {
226
+ font-weight: 700;
227
+ font-size: 18px;
228
+ }
229
+
230
+ .price-up {
231
+ color: var(--positive);
232
+ }
233
+
234
+ .price-down {
235
+ color: var(--negative);
236
+ }
237
+
238
+ .pair-stats {
239
+ display: flex;
240
+ flex-direction: column;
241
+ align-items: flex-end;
242
+ gap: 5px;
243
+ }
244
+
245
+ .pair-change {
246
+ font-weight: 600;
247
+ }
248
+
249
+ .pair-volume {
250
+ font-size: 12px;
251
+ color: #848E9C;
252
+ }
253
+
254
+ .portfolio-summary {
255
+ display: flex;
256
+ flex-direction: column;
257
+ gap: 15px;
258
+ }
259
+
260
+ .portfolio-value {
261
+ font-size: 28px;
262
+ font-weight: 700;
263
+ color: var(--primary-text);
264
+ }
265
+
266
+ .portfolio-pl {
267
+ display: flex;
268
+ align-items: center;
269
+ gap: 10px;
270
+ }
271
+
272
+ .pl-value {
273
+ font-weight: 600;
274
+ font-size: 18px;
275
+ }
276
+
277
+ .portfolio-allocation {
278
+ display: flex;
279
+ flex-direction: column;
280
+ gap: 10px;
281
+ }
282
+
283
+ .allocation-item {
284
+ display: flex;
285
+ justify-content: space-between;
286
+ align-items: center;
287
+ }
288
+
289
+ .allocation-bar {
290
+ height: 8px;
291
+ background-color: #2B3139;
292
+ border-radius: 4px;
293
+ margin-top: 5px;
294
+ overflow: hidden;
295
+ }
296
+
297
+ .bar-fill {
298
+ height: 100%;
299
+ border-radius: 4px;
300
+ }
301
+
302
+ .btc-fill {
303
+ background-color: #F7931A;
304
+ }
305
+
306
+ .eth-fill {
307
+ background-color: #627EEA;
308
+ }
309
+
310
+ .usdt-fill {
311
+ background-color: #26A17B;
312
+ }
313
+
314
+ .sol-fill {
315
+ background-color: #00FFA3;
316
+ }
317
+
318
+ .bnb-fill {
319
+ background-color: #F0B90B;
320
+ }
321
+
322
+ .signal-card {
323
+ display: grid;
324
+ gap: 15px;
325
+ }
326
+
327
+ .signal-item {
328
+ display: flex;
329
+ justify-content: space-between;
330
+ align-items: center;
331
+ padding: 12px 15px;
332
+ background-color: rgba(30, 32, 38, 0.8);
333
+ border-radius: 6px;
334
+ border-left: 3px solid var(--border-color);
335
+ }
336
+
337
+ .signal-pair {
338
+ font-weight: 600;
339
+ }
340
+
341
+ .signal-action {
342
+ padding: 5px 10px;
343
+ border-radius: 4px;
344
+ font-weight: 600;
345
+ font-size: 14px;
346
+ }
347
+
348
+ .signal-buy {
349
+ background-color: rgba(14, 203, 129, 0.1);
350
+ color: var(--positive);
351
+ border: 1px solid var(--positive);
352
+ }
353
+
354
+ .signal-sell {
355
+ background-color: rgba(246, 70, 93, 0.1);
356
+ color: var(--negative);
357
+ border: 1px solid var(--negative);
358
+ }
359
+
360
+ .signal-hold {
361
+ background-color: rgba(240, 185, 11, 0.1);
362
+ color: var(--primary-text);
363
+ border: 1px solid var(--primary-text);
364
+ }
365
+
366
+ .signal-reason {
367
+ font-size: 12px;
368
+ color: #848E9C;
369
+ margin-top: 5px;
370
+ }
371
+
372
+ .trades-table {
373
+ width: 100%;
374
+ border-collapse: collapse;
375
+ }
376
+
377
+ .trades-table th {
378
+ text-align: left;
379
+ padding: 10px 0;
380
+ color: #848E9C;
381
+ font-weight: 500;
382
+ font-size: 14px;
383
+ border-bottom: 1px solid var(--border-color);
384
+ }
385
+
386
+ .trades-table td {
387
+ padding: 12px 0;
388
+ font-size: 14px;
389
+ border-bottom: 1px solid var(--border-color);
390
+ }
391
+
392
+ .trade-type {
393
+ display: inline-block;
394
+ padding: 3px 8px;
395
+ border-radius: 4px;
396
+ font-weight: 600;
397
+ font-size: 12px;
398
+ }
399
+
400
+ .type-buy {
401
+ background-color: rgba(14, 203, 129, 0.1);
402
+ color: var(--positive);
403
+ }
404
+
405
+ .type-sell {
406
+ background-color: rgba(246, 70, 93, 0.1);
407
+ color: var(--negative);
408
+ }
409
+
410
+ .metrics-grid {
411
+ display: grid;
412
+ grid-template-columns: repeat(2, 1fr);
413
+ gap: 15px;
414
+ }
415
+
416
+ .metric-card {
417
+ display: flex;
418
+ flex-direction: column;
419
+ gap: 10px;
420
+ padding: 15px;
421
+ background-color: rgba(30, 32, 38, 0.8);
422
+ border-radius: 6px;
423
+ }
424
+
425
+ .metric-value {
426
+ font-size: 24px;
427
+ font-weight: 700;
428
+ color: var(--primary-text);
429
+ }
430
+
431
+ .metric-label {
432
+ font-size: 14px;
433
+ color: #848E9C;
434
+ }
435
+
436
+ .controls {
437
+ grid-column: span 12;
438
+ display: flex;
439
+ justify-content: space-between;
440
+ gap: 15px;
441
+ margin-top: 20px;
442
+ }
443
+
444
+ .control-btn {
445
+ flex: 1;
446
+ padding: 15px;
447
+ border-radius: 6px;
448
+ border: none;
449
+ font-weight: 600;
450
+ cursor: pointer;
451
+ transition: all 0.3s ease;
452
+ display: flex;
453
+ justify-content: center;
454
+ align-items: center;
455
+ gap: 10px;
456
+ }
457
+
458
+ .btn-primary {
459
+ background-color: var(--primary-text);
460
+ color: var(--primary-bg);
461
+ }
462
+
463
+ .btn-primary:hover {
464
+ background-color: #e6b008;
465
+ }
466
+
467
+ .btn-secondary {
468
+ background-color: var(--panel-bg);
469
+ color: var(--secondary-text);
470
+ border: 1px solid var(--border-color);
471
+ }
472
+
473
+ .btn-secondary:hover {
474
+ background-color: #2a2e36;
475
+ }
476
+
477
+ .btn-danger {
478
+ background-color: rgba(246, 70, 93, 0.1);
479
+ color: var(--negative);
480
+ border: 1px solid var(--negative);
481
+ }
482
+
483
+ .btn-danger:hover {
484
+ background-color: rgba(246, 70, 93, 0.2);
485
+ }
486
+
487
+ .btn-success {
488
+ background-color: rgba(14, 203, 129, 0.1);
489
+ color: var(--positive);
490
+ border: 1px solid var(--positive);
491
+ }
492
+
493
+ .btn-success:hover {
494
+ background-color: rgba(14, 203, 129, 0.2);
495
+ }
496
+
497
+ .agent-message {
498
+ grid-column: span 12;
499
+ padding: 15px;
500
+ background-color: rgba(240, 185, 11, 0.1);
501
+ border-radius: 6px;
502
+ border-left: 4px solid var(--primary-text);
503
+ margin-top: 20px;
504
+ display: flex;
505
+ align-items: center;
506
+ gap: 15px;
507
+ }
508
+
509
+ .message-icon {
510
+ font-size: 24px;
511
+ color: var(--primary-text);
512
+ }
513
+
514
+ .message-content {
515
+ flex: 1;
516
+ }
517
+
518
+ .message-time {
519
+ font-size: 12px;
520
+ color: #848E9C;
521
+ }
522
+
523
+ /* Strategy Configuration */
524
+ .strategy-form {
525
+ display: grid;
526
+ gap: 15px;
527
+ }
528
+
529
+ .form-group {
530
+ display: flex;
531
+ flex-direction: column;
532
+ gap: 8px;
533
+ }
534
+
535
+ .form-label {
536
+ font-size: 14px;
537
+ color: var(--secondary-text);
538
+ }
539
+
540
+ .form-control {
541
+ background-color: var(--dark-accent);
542
+ border: 1px solid var(--border-color);
543
+ border-radius: 4px;
544
+ padding: 10px;
545
+ color: var(--secondary-text);
546
+ font-size: 14px;
547
+ }
548
+
549
+ .form-control:focus {
550
+ outline: none;
551
+ border-color: var(--primary-text);
552
+ }
553
+
554
+ .form-row {
555
+ display: grid;
556
+ grid-template-columns: repeat(2, 1fr);
557
+ gap: 15px;
558
+ }
559
+
560
+ .form-actions {
561
+ display: flex;
562
+ justify-content: flex-end;
563
+ gap: 10px;
564
+ margin-top: 10px;
565
+ }
566
+
567
+ /* Modal */
568
+ .modal {
569
+ position: fixed;
570
+ top: 0;
571
+ left: 0;
572
+ width: 100%;
573
+ height: 100%;
574
+ background-color: rgba(0, 0, 0, 0.7);
575
+ display: flex;
576
+ align-items: center;
577
+ justify-content: center;
578
+ z-index: 1000;
579
+ opacity: 0;
580
+ visibility: hidden;
581
+ transition: all 0.3s ease;
582
+ }
583
+
584
+ .modal.active {
585
+ opacity: 1;
586
+ visibility: visible;
587
+ }
588
+
589
+ .modal-content {
590
+ background-color: var(--panel-bg);
591
+ border-radius: 8px;
592
+ width: 90%;
593
+ max-width: 600px;
594
+ max-height: 90vh;
595
+ overflow-y: auto;
596
+ padding: 20px;
597
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
598
+ transform: translateY(-20px);
599
+ transition: transform 0.3s ease;
600
+ }
601
+
602
+ .modal.active .modal-content {
603
+ transform: translateY(0);
604
+ }
605
+
606
+ .modal-header {
607
+ display: flex;
608
+ justify-content: space-between;
609
+ align-items: center;
610
+ margin-bottom: 20px;
611
+ padding-bottom: 10px;
612
+ border-bottom: 1px solid var(--border-color);
613
+ }
614
+
615
+ .modal-title {
616
+ color: var(--primary-text);
617
+ font-size: 20px;
618
+ font-weight: 600;
619
+ }
620
+
621
+ .modal-close {
622
+ background: none;
623
+ border: none;
624
+ color: var(--secondary-text);
625
+ font-size: 24px;
626
+ cursor: pointer;
627
+ transition: color 0.2s;
628
+ }
629
+
630
+ .modal-close:hover {
631
+ color: var(--primary-text);
632
+ }
633
+
634
+ /* Chart */
635
+ .chart-container {
636
+ width: 100%;
637
+ height: 300px;
638
+ margin-top: 20px;
639
+ position: relative;
640
+ }
641
+
642
+ .chart-placeholder {
643
+ width: 100%;
644
+ height: 100%;
645
+ background-color: var(--dark-accent);
646
+ border-radius: 4px;
647
+ display: flex;
648
+ align-items: center;
649
+ justify-content: center;
650
+ color: var(--light-accent);
651
+ }
652
+
653
+ /* Loading spinner */
654
+ .spinner {
655
+ width: 40px;
656
+ height: 40px;
657
+ border: 4px solid rgba(240, 185, 11, 0.3);
658
+ border-radius: 50%;
659
+ border-top-color: var(--primary-text);
660
+ animation: spin 1s ease-in-out infinite;
661
+ }
662
+
663
+ @keyframes spin {
664
+ to { transform: rotate(360deg); }
665
+ }
666
+
667
+ /* Responsive */
668
+ @media (max-width: 1400px) {
669
+ .market-overview, .portfolio-status, .trading-signals {
670
+ grid-column: span 6;
671
+ }
672
+
673
+ .recent-trades, .performance-metrics, .strategy-config {
674
+ grid-column: span 12;
675
+ }
676
+ }
677
+
678
+ @media (max-width: 992px) {
679
+ .dashboard-grid {
680
+ grid-template-columns: 1fr;
681
+ }
682
+
683
+ .market-overview, .portfolio-status, .trading-signals,
684
+ .recent-trades, .performance-metrics, .strategy-config {
685
+ grid-column: span 1;
686
+ }
687
+
688
+ .metrics-grid, .form-row {
689
+ grid-template-columns: 1fr;
690
+ }
691
+
692
+ .controls {
693
+ flex-direction: column;
694
+ }
695
+ }
696
+
697
+ /* Toastr customization */
698
+ #toast-container > .toast {
699
+ background-color: var(--panel-bg);
700
+ border-left: 4px solid var(--primary-text);
701
+ color: var(--secondary-text);
702
+ }
703
+
704
+ #toast-container > .toast-success {
705
+ border-left-color: var(--positive);
706
+ }
707
+
708
+ #toast-container > .toast-error {
709
+ border-left-color: var(--negative);
710
+ }
711
+
712
+ #toast-container > .toast-info {
713
+ border-left-color: var(--primary-text);
714
+ }
715
+ </style>
716
+ </head>
717
+ <body>
718
+ <div class="container">
719
+ <header>
720
+ <div class="logo">
721
+ <i class="fas fa-robot logo-icon"></i>
722
+ <h1>QuantTrader Pro</h1>
723
+ </div>
724
+ <div class="header-controls">
725
+ <div class="status-indicator">
726
+ <div class="status-dot"></div>
727
+ <span>LIVE TRADING ACTIVE</span>
728
+ </div>
729
+ <div class="user-menu">
730
+ <div class="user-avatar">JD</div>
731
+ <i class="fas fa-chevron-down"></i>
732
+ </div>
733
+ </div>
734
+ </header>
735
+
736
+ <div class="dashboard-grid">
737
+ <!-- Market Overview Panel -->
738
+ <div class="panel market-overview">
739
+ <div class="panel-header">
740
+ <h2 class="panel-title">Market Overview</h2>
741
+ <div class="panel-actions">
742
+ <button class="panel-action" title="Refresh">
743
+ <i class="fas fa-sync-alt"></i>
744
+ </button>
745
+ <button class="panel-action" title="Configure">
746
+ <i class="fas fa-cog"></i>
747
+ </button>
748
+ </div>
749
+ </div>
750
+ <div class="market-pairs">
751
+ <div class="pair-card" data-pair="BTC/USDT">
752
+ <div class="pair-info">
753
+ <span class="pair-name">BTC/USDT</span>
754
+ <span class="pair-price price-up">$60,342.75</span>
755
+ </div>
756
+ <div class="pair-stats">
757
+ <span class="pair-change price-up">+2.45%</span>
758
+ <span class="pair-volume">Vol: 1,200 BTC</span>
759
+ </div>
760
+ </div>
761
+ <div class="pair-card" data-pair="ETH/USDT">
762
+ <div class="pair-info">
763
+ <span class="pair-name">ETH/USDT</span>
764
+ <span class="pair-price price-down">$2,498.32</span>
765
+ </div>
766
+ <div class="pair-stats">
767
+ <span class="pair-change price-down">-1.23%</span>
768
+ <span class="pair-volume">Vol: 15,000 ETH</span>
769
+ </div>
770
+ </div>
771
+ <div class="pair-card" data-pair="SOL/USDT">
772
+ <div class="pair-info">
773
+ <span class="pair-name">SOL/USDT</span>
774
+ <span class="pair-price price-up">$142.56</span>
775
+ </div>
776
+ <div class="pair-stats">
777
+ <span class="pair-change price-up">+3.78%</span>
778
+ <span class="pair-volume">Vol: 45,000 SOL</span>
779
+ </div>
780
+ </div>
781
+ <div class="pair-card" data-pair="BNB/USDT">
782
+ <div class="pair-info">
783
+ <span class="pair-name">BNB/USDT</span>
784
+ <span class="pair-price price-up">$405.21</span>
785
+ </div>
786
+ <div class="pair-stats">
787
+ <span class="pair-change price-up">+0.89%</span>
788
+ <span class="pair-volume">Vol: 8,200 BNB</span>
789
+ </div>
790
+ </div>
791
+ </div>
792
+ </div>
793
+
794
+ <!-- Portfolio Status Panel -->
795
+ <div class="panel portfolio-status">
796
+ <div class="panel-header">
797
+ <h2 class="panel-title">Portfolio Status</h2>
798
+ <div class="panel-actions">
799
+ <button class="panel-action" title="Refresh">
800
+ <i class="fas fa-sync-alt"></i>
801
+ </button>
802
+ </div>
803
+ </div>
804
+ <div class="portfolio-summary">
805
+ <div>
806
+ <span style="color: #848E9C; font-size: 14px;">Total Value</span>
807
+ <div class="portfolio-value">$10,245.67</div>
808
+ </div>
809
+ <div class="portfolio-pl">
810
+ <span style="color: #848E9C; font-size: 14px;">P/L:</span>
811
+ <span class="pl-value price-up">+$245.67 (2.46%)</span>
812
+ </div>
813
+ <div class="portfolio-allocation">
814
+ <div class="allocation-item">
815
+ <span>BTC</span>
816
+ <span>40% ($4,098.27)</span>
817
+ </div>
818
+ <div class="allocation-bar">
819
+ <div class="bar-fill btc-fill" style="width: 40%"></div>
820
+ </div>
821
+ <div class="allocation-item">
822
+ <span>ETH</span>
823
+ <span>30% ($3,073.70)</span>
824
+ </div>
825
+ <div class="allocation-bar">
826
+ <div class="bar-fill eth-fill" style="width: 30%"></div>
827
+ </div>
828
+ <div class="allocation-item">
829
+ <span>SOL</span>
830
+ <span>15% ($1,536.85)</span>
831
+ </div>
832
+ <div class="allocation-bar">
833
+ <div class="bar-fill sol-fill" style="width: 15%"></div>
834
+ </div>
835
+ <div class="allocation-item">
836
+ <span>BNB</span>
837
+ <span>5% ($512.28)</span>
838
+ </div>
839
+ <div class="allocation-bar">
840
+ <div class="bar-fill bnb-fill" style="width: 5%"></div>
841
+ </div>
842
+ <div class="allocation-item">
843
+ <span>USDT</span>
844
+ <span>10% ($1,024.57)</span>
845
+ </div>
846
+ <div class="allocation-bar">
847
+ <div class="bar-fill usdt-fill" style="width: 10%"></div>
848
+ </div>
849
+ </div>
850
+ </div>
851
+ </div>
852
+
853
+ <!-- Trading Signals Panel -->
854
+ <div class="panel trading-signals">
855
+ <div class="panel-header">
856
+ <h2 class="panel-title">Trading Signals</h2>
857
+ <div class="panel-actions">
858
+ <button class="panel-action" title="Refresh">
859
+ <i class="fas fa-sync-alt"></i>
860
+ </button>
861
+ </div>
862
+ </div>
863
+ <div class="signal-card">
864
+ <div class="signal-item">
865
+ <div>
866
+ <div class="signal-pair">BTC/USDT</div>
867
+ <div class="signal-reason">RSI(14) < 30 & MACD bullish crossover</div>
868
+ </div>
869
+ <div class="signal-action signal-buy">BUY</div>
870
+ </div>
871
+ <div class="signal-item">
872
+ <div>
873
+ <div class="signal-pair">ETH/USDT</div>
874
+ <div class="signal-reason">50MA crossed above 200MA</div>
875
+ </div>
876
+ <div class="signal-action signal-hold">HOLD</div>
877
+ </div>
878
+ <div class="signal-item">
879
+ <div>
880
+ <div class="signal-pair">SOL/USDT</div>
881
+ <div class="signal-reason">Bollinger Band squeeze breakout</div>
882
+ </div>
883
+ <div class="signal-action signal-buy">BUY</div>
884
+ </div>
885
+ <div class="signal-item">
886
+ <div>
887
+ <div class="signal-pair">BNB/USDT</div>
888
+ <div class="signal-reason">Approaching resistance level</div>
889
+ </div>
890
+ <div class="signal-action signal-sell">SELL</div>
891
+ </div>
892
+ </div>
893
+ </div>
894
+
895
+ <!-- Recent Trades Panel -->
896
+ <div class="panel recent-trades">
897
+ <div class="panel-header">
898
+ <h2 class="panel-title">Recent Trades</h2>
899
+ <div class="panel-actions">
900
+ <button class="panel-action" title="Refresh">
901
+ <i class="fas fa-sync-alt"></i>
902
+ </button>
903
+ <button class="panel-action" title="Export">
904
+ <i class="fas fa-download"></i>
905
+ </button>
906
+ </div>
907
+ </div>
908
+ <table class="trades-table">
909
+ <thead>
910
+ <tr>
911
+ <th>Pair</th>
912
+ <th>Type</th>
913
+ <th>Price</th>
914
+ <th>Amount</th>
915
+ <th>Value</th>
916
+ <th>Time</th>
917
+ <th>Status</th>
918
+ </tr>
919
+ </thead>
920
+ <tbody>
921
+ <tr>
922
+ <td>BTC/USDT</td>
923
+ <td><span class="trade-type type-buy">BUY</span></td>
924
+ <td>$59,800.00</td>
925
+ <td>0.1 BTC</td>
926
+ <td>$5,980.00</td>
927
+ <td>10:00:23</td>
928
+ <td><i class="fas fa-check-circle" style="color: var(--positive);"></i></td>
929
+ </tr>
930
+ <tr>
931
+ <td>ETH/USDT</td>
932
+ <td><span class="trade-type type-sell">SELL</span></td>
933
+ <td>$2,510.00</td>
934
+ <td>1 ETH</td>
935
+ <td>$2,510.00</td>
936
+ <td>10:05:47</td>
937
+ <td><i class="fas fa-check-circle" style="color: var(--positive);"></i></td>
938
+ </tr>
939
+ <tr>
940
+ <td>SOL/USDT</td>
941
+ <td><span class="trade-type type-buy">BUY</span></td>
942
+ <td>$138.50</td>
943
+ <td>20 SOL</td>
944
+ <td>$2,770.00</td>
945
+ <td>09:30:12</td>
946
+ <td><i class="fas fa-check-circle" style="color: var(--positive);"></i></td>
947
+ </tr>
948
+ <tr>
949
+ <td>BNB/USDT</td>
950
+ <td><span class="trade-type type-sell">SELL</span></td>
951
+ <td>$410.00</td>
952
+ <td>5 BNB</td>
953
+ <td>$2,050.00</td>
954
+ <td>08:45:33</td>
955
+ <td><i class="fas fa-check-circle" style="color: var(--positive);"></i></td>
956
+ </tr>
957
+ <tr>
958
+ <td>BTC/USDT</td>
959
+ <td><span class="trade-type type-buy">BUY</span></td>
960
+ <td>$60,100.00</td>
961
+ <td>0.05 BTC</td>
962
+ <td>$3,005.00</td>
963
+ <td>11:20:15</td>
964
+ <td><i class="fas fa-spinner fa-spin" style="color: var(--primary-text);"></i></td>
965
+ </tr>
966
+ </tbody>
967
+ </table>
968
+ </div>
969
+
970
+ <!-- Performance Metrics Panel -->
971
+ <div class="panel performance-metrics">
972
+ <div class="panel-header">
973
+ <h2 class="panel-title">Performance Metrics</h2>
974
+ <div class="panel-actions">
975
+ <button class="panel-action" title="Time Period">
976
+ <i class="fas fa-calendar-alt"></i> 24h
977
+ </button>
978
+ </div>
979
+ </div>
980
+ <div class="metrics-grid">
981
+ <div class="metric-card">
982
+ <div class="metric-value">1.85</div>
983
+ <div class="metric-label">Sharpe Ratio</div>
984
+ </div>
985
+ <div class="metric-card">
986
+ <div class="metric-value">62%</div>
987
+ <div class="metric-label">Win Rate</div>
988
+ </div>
989
+ <div class="metric-card">
990
+ <div class="metric-value">1.8:1</div>
991
+ <div class="metric-label">Win/Loss Ratio</div>
992
+ </div>
993
+ <div class="metric-card">
994
+ <div class="metric-value">-3.2%</div>
995
+ <div class="metric-label">Max Drawdown</div>
996
+ </div>
997
+ <div class="metric-card">
998
+ <div class="metric-value">24</div>
999
+ <div class="metric-label">Total Trades</div>
1000
+ </div>
1001
+ <div class="metric-card">
1002
+ <div class="metric-value">5.2%</div>
1003
+ <div class="metric-label">Avg Profit per Trade</div>
1004
+ </div>
1005
+ </div>
1006
+ <div class="chart-container">
1007
+ <div class="chart-placeholder">
1008
+ <i class="fas fa-chart-line" style="font-size: 48px;"></i>
1009
+ <span>Performance Chart</span>
1010
+ </div>
1011
+ </div>
1012
+ </div>
1013
+
1014
+ <!-- Strategy Configuration Panel -->
1015
+ <div class="panel strategy-config">
1016
+ <div class="panel-header">
1017
+ <h2 class="panel-title">Strategy Configuration</h2>
1018
+ <div class="panel-actions">
1019
+ <button class="panel-action" title="Save">
1020
+ <i class="fas fa-save"></i>
1021
+ </button>
1022
+ </div>
1023
+ </div>
1024
+ <div class="strategy-form">
1025
+ <div class="form-row">
1026
+ <div class="form-group">
1027
+ <label class="form-label">Strategy Type</label>
1028
+ <select class="form-control">
1029
+ <option>Trend Following</option>
1030
+ <option>Mean Reversion</option>
1031
+ <option>Breakout</option>
1032
+ <option>Arbitrage</option>
1033
+ <option>Market Making</option>
1034
+ </select>
1035
+ </div>
1036
+ <div class="form-group">
1037
+ <label class="form-label">Risk Level</label>
1038
+ <select class="form-control">
1039
+ <option>Low</option>
1040
+ <option selected>Medium</option>
1041
+ <option>High</option>
1042
+ <option>Aggressive</option>
1043
+ </select>
1044
+ </div>
1045
+ </div>
1046
+ <div class="form-row">
1047
+ <div class="form-group">
1048
+ <label class="form-label">Max Position Size (%)</label>
1049
+ <input type="number" class="form-control" value="10">
1050
+ </div>
1051
+ <div class="form-group">
1052
+ <label class="form-label">Max Daily Loss (%)</label>
1053
+ <input type="number" class="form-control" value="5">
1054
+ </div>
1055
+ </div>
1056
+ <div class="form-row">
1057
+ <div class="form-group">
1058
+ <label class="form-label">Stop Loss (%)</label>
1059
+ <input type="number" class="form-control" value="2">
1060
+ </div>
1061
+ <div class="form-group">
1062
+ <label class="form-label">Take Profit (%)</label>
1063
+ <input type="number" class="form-control" value="5">
1064
+ </div>
1065
+ </div>
1066
+ <div class="form-group">
1067
+ <label class="form-label">Trading Pairs</label>
1068
+ <select class="form-control" multiple style="height: 100px;">
1069
+ <option selected>BTC/USDT</option>
1070
+ <option selected>ETH/USDT</option>
1071
+ <option selected>SOL/USDT</option>
1072
+ <option selected>BNB/USDT</option>
1073
+ <option>ADA/USDT</option>
1074
+ <option>XRP/USDT</option>
1075
+ <option>DOT/USDT</option>
1076
+ <option>AVAX/USDT</option>
1077
+ </select>
1078
+ </div>
1079
+ <div class="form-actions">
1080
+ <button class="control-btn btn-secondary">
1081
+ <i class="fas fa-times"></i> Cancel
1082
+ </button>
1083
+ <button class="control-btn btn-primary">
1084
+ <i class="fas fa-save"></i> Save Changes
1085
+ </button>
1086
+ </div>
1087
+ </div>
1088
+ </div>
1089
+
1090
+ <!-- Control Buttons -->
1091
+ <div class="controls">
1092
+ <button class="control-btn btn-primary" id="start-trading">
1093
+ <i class="fas fa-play"></i> Start Trading
1094
+ </button>
1095
+ <button class="control-btn btn-danger" id="stop-trading">
1096
+ <i class="fas fa-stop"></i> Stop Trading
1097
+ </button>
1098
+ <button class="control-btn btn-secondary" id="adjust-strategy">
1099
+ <i class="fas fa-cog"></i> Adjust Strategy
1100
+ </button>
1101
+ <button class="control-btn btn-success" id="rebalance-portfolio">
1102
+ <i class="fas fa-sync-alt"></i> Rebalance Portfolio
1103
+ </button>
1104
+ </div>
1105
+
1106
+ <!-- Agent Message -->
1107
+ <div class="agent-message">
1108
+ <i class="fas fa-comment-dots message-icon"></i>
1109
+ <div class="message-content">
1110
+ <strong>QuantBot:</strong> I've placed a limit buy order for 0.1 BTC at $59,800 based on RSI(14) < 30 and MACD bullish crossover. Stop-loss set at $58,604 (2% below entry) and take-profit at $62,790 (5% above).
1111
+ </div>
1112
+ <div class="message-time">11:23 AM</div>
1113
+ </div>
1114
+ </div>
1115
+ </div>
1116
+
1117
+ <!-- Pair Detail Modal -->
1118
+ <div class="modal" id="pair-modal">
1119
+ <div class="modal-content">
1120
+ <div class="modal-header">
1121
+ <h2 class="modal-title">BTC/USDT Details</h2>
1122
+ <button class="modal-close">&times;</button>
1123
+ </div>
1124
+ <div class="modal-body">
1125
+ <div class="pair-details">
1126
+ <div style="display: flex; justify-content: space-between; margin-bottom: 20px;">
1127
+ <div>
1128
+ <div style="font-size: 12px; color: #848E9C;">Current Price</div>
1129
+ <div style="font-size: 28px; font-weight: bold; color: var(--primary-text);">$60,342.75</div>
1130
+ <div style="font-size: 16px; color: var(--positive);">+2.45% (24h)</div>
1131
+ </div>
1132
+ <div style="text-align: right;">
1133
+ <div style="font-size: 12px; color: #848E9C;">24h Volume</div>
1134
+ <div style="font-size: 16px; font-weight: bold;">1,200 BTC</div>
1135
+ <div style="font-size: 12px; color: #848E9C;">$72.4M</div>
1136
+ </div>
1137
+ </div>
1138
+
1139
+ <div class="chart-container">
1140
+ <div class="chart-placeholder">
1141
+ <div class="spinner"></div>
1142
+ <span>Loading chart data...</span>
1143
+ </div>
1144
+ </div>
1145
+
1146
+ <div style="margin-top: 20px;">
1147
+ <h3 style="color: var(--primary-text); margin-bottom: 10px;">Technical Indicators</h3>
1148
+ <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;">
1149
+ <div style="background-color: var(--dark-accent); padding: 10px; border-radius: 4px;">
1150
+ <div style="font-size: 12px; color: #848E9C;">RSI (14)</div>
1151
+ <div style="font-size: 16px; font-weight: bold; color: var(--negative);">28.5</div>
1152
+ </div>
1153
+ <div style="background-color: var(--dark-accent); padding: 10px; border-radius: 4px;">
1154
+ <div style="font-size: 12px; color: #848E9C;">MACD</div>
1155
+ <div style="font-size: 16px; font-weight: bold; color: var(--positive);">Bullish</div>
1156
+ </div>
1157
+ <div style="background-color: var(--dark-accent); padding: 10px; border-radius: 4px;">
1158
+ <div style="font-size: 12px; color: #848E9C;">50/200 MA</div>
1159
+ <div style="font-size: 16px; font-weight: bold; color: var(--positive);">Bullish</div>
1160
+ </div>
1161
+ <div style="background-color: var(--dark-accent); padding: 10px; border-radius: 4px;">
1162
+ <div style="font-size: 12px; color: #848E9C;">Support</div>
1163
+ <div style="font-size: 16px; font-weight: bold;">$58,200</div>
1164
+ </div>
1165
+ <div style="background-color: var(--dark-accent); padding: 10px; border-radius: 4px;">
1166
+ <div style="font-size: 12px; color: #848E9C;">Resistance</div>
1167
+ <div style="font-size: 16px; font-weight: bold;">$62,500</div>
1168
+ </div>
1169
+ <div style="background-color: var(--dark-accent); padding: 10px; border-radius: 4px;">
1170
+ <div style="font-size: 12px; color: #848E9C;">Volatility</div>
1171
+ <div style="font-size: 16px; font-weight: bold;">High</div>
1172
+ </div>
1173
+ </div>
1174
+ </div>
1175
+
1176
+ <div style="margin-top: 20px;">
1177
+ <h3 style="color: var(--primary-text); margin-bottom: 10px;">Quick Trade</h3>
1178
+ <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px;">
1179
+ <div>
1180
+ <label style="display: block; font-size: 12px; color: #848E9C; margin-bottom: 5px;">Amount (BTC)</label>
1181
+ <input type="text" style="width: 100%; padding: 10px; background-color: var(--dark-accent); border: 1px solid var(--border-color); border-radius: 4px; color: var(--secondary-text);" placeholder="0.00">
1182
+ </div>
1183
+ <div>
1184
+ <label style="display: block; font-size: 12px; color: #848E9C; margin-bottom: 5px;">Price (USDT)</label>
1185
+ <input type="text" style="width: 100%; padding: 10px; background-color: var(--dark-accent); border: 1px solid var(--border-color); border-radius: 4px; color: var(--secondary-text);" placeholder="Market Price">
1186
+ </div>
1187
+ </div>
1188
+ <div style="display: flex; gap: 10px; margin-top: 15px;">
1189
+ <button style="flex: 1; padding: 12px; background-color: rgba(14, 203, 129, 0.1); color: var(--positive); border: 1px solid var(--positive); border-radius: 4px; font-weight: bold; cursor: pointer;">
1190
+ Buy BTC
1191
+ </button>
1192
+ <button style="flex: 1; padding: 12px; background-color: rgba(246, 70, 93, 0.1); color: var(--negative); border: 1px solid var(--negative); border-radius: 4px; font-weight: bold; cursor: pointer;">
1193
+ Sell BTC
1194
+ </button>
1195
+ </div>
1196
+ </div>
1197
+ </div>
1198
+ </div>
1199
+ </div>
1200
+ </div>
1201
+
1202
+ <!-- Scripts -->
1203
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
1204
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
1205
+ <script>
1206
+ // Initialize Toastr
1207
+ toastr.options = {
1208
+ positionClass: "toast-bottom-right",
1209
+ progressBar: true,
1210
+ timeOut: 5000,
1211
+ extendedTimeOut: 2000
1212
+ };
1213
+
1214
+ // Trading state
1215
+ const tradingState = {
1216
+ active: true,
1217
+ strategies: {
1218
+ current: 'Trend Following',
1219
+ riskLevel: 'Medium',
1220
+ maxPositionSize: 10,
1221
+ maxDailyLoss: 5,
1222
+ stopLoss: 2,
1223
+ takeProfit: 5,
1224
+ pairs: ['BTC/USDT', 'ETH/USDT', 'SOL/USDT', 'BNB/USDT']
1225
+ },
1226
+ portfolio: {
1227
+ totalValue: 10245.67,
1228
+ initialValue: 10000,
1229
+ allocations: {
1230
+ btc: { percent: 40, value: 4098.27 },
1231
+ eth: { percent: 30, value: 3073.70 },
1232
+ sol: { percent: 15, value: 1536.85 },
1233
+ bnb: { percent: 5, value: 512.28 },
1234
+ usdt: { percent: 10, value: 1024.57 }
1235
+ }
1236
+ },
1237
+ prices: {
1238
+ btc: 60342.75,
1239
+ eth: 2498.32,
1240
+ sol: 142.56,
1241
+ bnb: 405.21
1242
+ }
1243
+ };
1244
+
1245
+ // Simulate WebSocket connection
1246
+ function connectWebSocket() {
1247
+ console.log('Connecting to WebSocket server...');
1248
+ // In a real app, this would connect to your WebSocket endpoint
1249
+ setTimeout(() => {
1250
+ console.log('WebSocket connection established');
1251
+ toastr.success('Real-time data connection established');
1252
+ }, 1500);
1253
+ }
1254
+
1255
+ // Initialize the application
1256
+ function initApp() {
1257
+ connectWebSocket();
1258
+ updateAllData();
1259
+ setupEventListeners();
1260
+ }
1261
+
1262
+ // Update all dashboard data
1263
+ function updateAllData() {
1264
+ updatePrices();
1265
+ updatePortfolioValue();
1266
+ updatePerformanceMetrics();
1267
+ }
1268
+
1269
+ // Simulate live price updates
1270
+ function updatePrices() {
1271
+ const pairs = [
1272
+ { selector: '.pair-card:nth-child(1)', symbol: 'btc', current: tradingState.prices.btc },
1273
+ { selector: '.pair-card:nth-child(2)', symbol: 'eth', current: tradingState.prices.eth },
1274
+ { selector: '.pair-card:nth-child(3)', symbol: 'sol', current: tradingState.prices.sol },
1275
+ { selector: '.pair-card:nth-child(4)', symbol: 'bnb', current: tradingState.prices.bnb }
1276
+ ];
1277
+
1278
+ pairs.forEach(pair => {
1279
+ const priceElement = document.querySelector(`${pair.selector} .pair-price`);
1280
+ const changeElement = document.querySelector(`${pair.selector} .pair-change`);
1281
+
1282
+ // Generate realistic price changes based on volatility
1283
+ let changePercent;
1284
+ if (pair.symbol === 'btc') {
1285
+ changePercent = (Math.random() * 0.5 - 0.25); // BTC is less volatile
1286
+ } else if (pair.symbol === 'eth') {
1287
+ changePercent = (Math.random() * 1 - 0.5);
1288
+ } else {
1289
+ changePercent = (Math.random() * 2 - 1); // Altcoins are more volatile
1290
+ }
1291
+
1292
+ const changeValue = pair.current * (changePercent / 100);
1293
+ const newPrice = pair.current + changeValue;
1294
+
1295
+ // Update trading state
1296
+ tradingState.prices[pair.symbol] = newPrice;
1297
+
1298
+ // Update UI
1299
+ priceElement.textContent = `$${newPrice.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2})}`;
1300
+
1301
+ if (changePercent > 0) {
1302
+ priceElement.classList.add('price-up');
1303
+ priceElement.classList.remove('price-down');
1304
+ changeElement.textContent = `+${changePercent.toFixed(2)}%`;
1305
+ changeElement.classList.add('price-up');
1306
+ changeElement.classList.remove('price-down');
1307
+ } else if (changePercent < 0) {
1308
+ priceElement.classList.add('price-down');
1309
+ priceElement.classList.remove('price-up');
1310
+ changeElement.textContent = `${changePercent.toFixed(2)}%`;
1311
+ changeElement.classList.add('price-down');
1312
+ changeElement.classList.remove('price-up');
1313
+ }
1314
+ });
1315
+ }
1316
+
1317
+ // Update portfolio value based on current prices
1318
+ function updatePortfolioValue() {
1319
+ const btcValue = 0.0679 * tradingState.prices.btc; // 0.0679 BTC
1320
+ const ethValue = 1.23 * tradingState.prices.eth; // 1.23 ETH
1321
+ const solValue = 20 * tradingState.prices.sol; // 20 SOL
1322
+ const bnbValue = 5 * tradingState.prices.bnb; // 5 BNB
1323
+ const usdtValue = tradingState.portfolio.allocations.usdt.value;
1324
+
1325
+ const totalValue = btcValue + ethValue + solValue + bnbValue + usdtValue;
1326
+ tradingState.portfolio.totalValue = totalValue;
1327
+
1328
+ const plValue = totalValue - tradingState.portfolio.initialValue;
1329
+ const plPercent = (plValue / tradingState.portfolio.initialValue * 100);
1330
+
1331
+ // Update allocations
1332
+ tradingState.portfolio.allocations.btc.value = btcValue;
1333
+ tradingState.portfolio.allocations.eth.value = ethValue;
1334
+ tradingState.portfolio.allocations.sol.value = solValue;
1335
+ tradingState.portfolio.allocations.bnb.value = bnbValue;
1336
+
1337
+ tradingState.portfolio.allocations.btc.percent = (btcValue / totalValue * 100);
1338
+ tradingState.portfolio.allocations.eth.percent = (ethValue / totalValue * 100);
1339
+ tradingState.portfolio.allocations.sol.percent = (solValue / totalValue * 100);
1340
+ tradingState.portfolio.allocations.bnb.percent = (bnbValue / totalValue * 100);
1341
+ tradingState.portfolio.allocations.usdt.percent = (usdtValue / totalValue * 100);
1342
+
1343
+ // Update UI
1344
+ document.querySelector('.portfolio-value').textContent = `$${totalValue.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2})}`;
1345
+
1346
+ const plElement = document.querySelector('.pl-value');
1347
+ if (plValue >= 0) {
1348
+ plElement.textContent = `+$${Math.abs(plValue).toFixed(2)} (+${plPercent.toFixed(2)}%)`;
1349
+ plElement.classList.add('price-up');
1350
+ plElement.classList.remove('price-down');
1351
+ } else {
1352
+ plElement.textContent = `-$${Math.abs(plValue).toFixed(2)} (-${plPercent.toFixed(2)}%)`;
1353
+ plElement.classList.add('price-down');
1354
+ plElement.classList.remove('price-up');
1355
+ }
1356
+
1357
+ // Update allocation bars and percentages
1358
+ const allocations = [
1359
+ { selector: '.allocation-item:nth-child(1)', bar: '.btc-fill', asset: 'btc' },
1360
+ { selector: '.allocation-item:nth-child(2)', bar: '.eth-fill', asset: 'eth' },
1361
+ { selector: '.allocation-item:nth-child(3)', bar: '.sol-fill', asset: 'sol' },
1362
+ { selector: '.allocation-item:nth-child(4)', bar: '.bnb-fill', asset: 'bnb' },
1363
+ { selector: '.allocation-item:nth-child(5)', bar: '.usdt-fill', asset: 'usdt' }
1364
+ ];
1365
+
1366
+ allocations.forEach(allocation => {
1367
+ const asset = tradingState.portfolio.allocations[allocation.asset];
1368
+ document.querySelector(`${allocation.selector} span:nth-child(2)`).textContent =
1369
+ `${asset.percent.toFixed(1)}% ($${asset.value.toFixed(2)})`;
1370
+ document.querySelector(allocation.bar).style.width = `${asset.percent}%`;
1371
+ });
1372
+ }
1373
+
1374
+ // Update performance metrics with realistic changes
1375
+ function updatePerformanceMetrics() {
1376
+ const metrics = [
1377
+ { selector: '.metric-card:nth-child(1) .metric-value', value: 1.85, volatility: 0.1 },
1378
+ { selector: '.metric-card:nth-child(2) .metric-value', value: 62, volatility: 1, suffix: '%' },
1379
+ { selector: '.metric-card:nth-child(3) .metric-value', value: 1.8, volatility: 0.05, suffix: ':1' },
1380
+ { selector: '.metric-card:nth-child(4) .metric-value', value: -3.2, volatility: 0.2, suffix: '%' },
1381
+ { selector: '.metric-card:nth-child(5) .metric-value', value: 24, volatility: 0.5 },
1382
+ { selector: '.metric-card:nth-child(6) .metric-value', value: 5.2, volatility: 0.2, suffix: '%' }
1383
+ ];
1384
+
1385
+ metrics.forEach(metric => {
1386
+ // Add small random change to simulate realistic metric fluctuations
1387
+ const change = (Math.random() * 2 - 1) * metric.volatility;
1388
+ const newValue = metric.value + change;
1389
+ const element = document.querySelector(metric.selector);
1390
+
1391
+ if (metric.suffix) {
1392
+ element.textContent = `${newValue.toFixed(metric.suffix === ':1' ? 1 : 2)}${metric.suffix}`;
1393
+ } else {
1394
+ element.textContent = newValue.toFixed(2);
1395
+ }
1396
+ });
1397
+ }
1398
+
1399
+ // Show agent message with timestamp
1400
+ function showAgentMessage(message) {
1401
+ const messageElement = document.querySelector('.agent-message .message-content');
1402
+ const timeElement = document.querySelector('.message-time');
1403
+
1404
+ messageElement.innerHTML = `<strong>QuantBot:</strong> ${message}`;
1405
+
1406
+ const now = new Date();
1407
+ const hours = now.getHours() % 12 || 12;
1408
+ const minutes = now.getMinutes().toString().padStart(2, '0');
1409
+ const ampm = now.getHours() >= 12 ? 'PM' : 'AM';
1410
+
1411
+ timeElement.textContent = `${hours}:${minutes} ${ampm}`;
1412
+
1413
+ // Flash animation
1414
+ document.querySelector('.agent-message').style.animation = 'none';
1415
+ setTimeout(() => {
1416
+ document.querySelector('.agent-message').style.animation = 'flash 1s';
1417
+ }, 10);
1418
+
1419
+ // Also show as toast notification
1420
+ toastr.info(message, 'QuantBot Notification');
1421
+ }
1422
+
1423
+ // Toggle trading state
1424
+ function toggleTradingState(active) {
1425
+ tradingState.active = active;
1426
+ const statusIndicator = document.querySelector('.status-indicator span');
1427
+ const statusDot = document.querySelector('.status-dot');
1428
+
1429
+ if (active) {
1430
+ statusIndicator.textContent = 'LIVE TRADING ACTIVE';
1431
+ statusDot.style.backgroundColor = 'var(--positive)';
1432
+ toastr.success('Trading session started');
1433
+ } else {
1434
+ statusIndicator.textContent = 'TRADING PAUSED';
1435
+ statusDot.style.backgroundColor = 'var(--negative)';
1436
+ toastr.warning('Trading session paused');
1437
+ }
1438
+ }
1439
+
1440
+ // Setup event listeners
1441
+ function setupEventListeners() {
1442
+ // Control buttons
1443
+ document.getElementById('start-trading').addEventListener('click', function() {
1444
+ toggleTradingState(true);
1445
+ showAgentMessage("Starting trading session... All strategies are now active and monitoring the market.");
1446
+ });
1447
+
1448
+ document.getElementById('stop-trading').addEventListener('click', function() {
1449
+ toggleTradingState(false);
1450
+ showAgentMessage("Trading session stopped. No new positions will
1451
+ </html>