Hugging Face's logo

Spaces:
dmease
/
anycoder-d7820f10
Running

App Files Community
dmease commited on
Commit
1b000ee
·
verified ·
1 Parent(s): 82e7bce

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +1054 -19
index.html CHANGED
@@ -1,19 +1,1054 @@
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>TradePro - Personal Trading Terminal</title>
7
+
8
+ <!-- Fonts -->
9
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
10
+
11
+ <!-- Icons -->
12
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
13
+
14
+ <!-- Chart.js -->
15
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
16
+
17
+ <style>
18
+ :root {
19
+ --bg-dark: #0f1115;
20
+ --bg-panel: #181b21;
21
+ --bg-hover: #22262e;
22
+ --text-primary: #ffffff;
23
+ --text-secondary: #8b949e;
24
+ --accent-primary: #2962ff;
25
+ --accent-hover: #1e4bd8;
26
+ --success: #00c853;
27
+ --danger: #ff1744;
28
+ --border: #2f3336;
29
+ --sidebar-width: 260px;
30
+ --header-height: 70px;
31
+ }
32
+
33
+ * {
34
+ margin: 0;
35
+ padding: 0;
36
+ box-sizing: border-box;
37
+ font-family: 'Inter', sans-serif;
38
+ }
39
+
40
+ body {
41
+ background-color: var(--bg-dark);
42
+ color: var(--text-primary);
43
+ overflow-x: hidden;
44
+ }
45
+
46
+ /* Scrollbar */
47
+ ::-webkit-scrollbar {
48
+ width: 8px;
49
+ }
50
+ ::-webkit-scrollbar-track {
51
+ background: var(--bg-dark);
52
+ }
53
+ ::-webkit-scrollbar-thumb {
54
+ background: #333;
55
+ border-radius: 4px;
56
+ }
57
+ ::-webkit-scrollbar-thumb:hover {
58
+ background: #555;
59
+ }
60
+
61
+ /* Layout */
62
+ .app-container {
63
+ display: flex;
64
+ min-height: 100vh;
65
+ }
66
+
67
+ /* Sidebar */
68
+ .sidebar {
69
+ width: var(--sidebar-width);
70
+ background-color: var(--bg-panel);
71
+ border-right: 1px solid var(--border);
72
+ display: flex;
73
+ flex-direction: column;
74
+ position: fixed;
75
+ height: 100%;
76
+ z-index: 100;
77
+ transition: transform 0.3s ease;
78
+ }
79
+
80
+ .logo-area {
81
+ height: var(--header-height);
82
+ display: flex;
83
+ align-items: center;
84
+ padding: 0 24px;
85
+ border-bottom: 1px solid var(--border);
86
+ }
87
+
88
+ .logo {
89
+ font-size: 24px;
90
+ font-weight: 700;
91
+ color: var(--accent-primary);
92
+ display: flex;
93
+ align-items: center;
94
+ gap: 10px;
95
+ }
96
+
97
+ .nav-links {
98
+ padding: 20px 12px;
99
+ flex: 1;
100
+ }
101
+
102
+ .nav-group {
103
+ margin-bottom: 30px;
104
+ }
105
+
106
+ .nav-group-title {
107
+ font-size: 12px;
108
+ color: var(--text-secondary);
109
+ text-transform: uppercase;
110
+ letter-spacing: 1px;
111
+ margin-bottom: 12px;
112
+ padding-left: 12px;
113
+ }
114
+
115
+ .nav-item {
116
+ display: flex;
117
+ align-items: center;
118
+ padding: 12px 16px;
119
+ color: var(--text-secondary);
120
+ text-decoration: none;
121
+ border-radius: 8px;
122
+ margin-bottom: 4px;
123
+ transition: all 0.2s;
124
+ cursor: pointer;
125
+ }
126
+
127
+ .nav-item i {
128
+ width: 24px;
129
+ font-size: 18px;
130
+ }
131
+
132
+ .nav-item span {
133
+ margin-left: 12px;
134
+ font-weight: 500;
135
+ }
136
+
137
+ .nav-item:hover, .nav-item.active {
138
+ background-color: var(--bg-hover);
139
+ color: var(--text-primary);
140
+ }
141
+
142
+ .nav-item.active {
143
+ border-left: 3px solid var(--accent-primary);
144
+ }
145
+
146
+ .user-profile {
147
+ padding: 20px;
148
+ border-top: 1px solid var(--border);
149
+ display: flex;
150
+ align-items: center;
151
+ gap: 12px;
152
+ }
153
+
154
+ .avatar {
155
+ width: 40px;
156
+ height: 40px;
157
+ border-radius: 50%;
158
+ background: linear-gradient(45deg, var(--accent-primary), #6a11cb);
159
+ display: flex;
160
+ justify-content: center;
161
+ align-items: center;
162
+ font-weight: bold;
163
+ }
164
+
165
+ .user-info h4 {
166
+ font-size: 14px;
167
+ font-weight: 600;
168
+ }
169
+
170
+ .user-info p {
171
+ font-size: 12px;
172
+ color: var(--text-secondary);
173
+ }
174
+
175
+ /* Main Content */
176
+ .main-content {
177
+ margin-left: var(--sidebar-width);
178
+ flex: 1;
179
+ padding: 30px;
180
+ min-height: 100vh;
181
+ }
182
+
183
+ /* Header */
184
+ .top-bar {
185
+ display: flex;
186
+ justify-content: space-between;
187
+ align-items: center;
188
+ margin-bottom: 30px;
189
+ }
190
+
191
+ .page-title {
192
+ font-size: 24px;
193
+ font-weight: 600;
194
+ }
195
+
196
+ .header-actions {
197
+ display: flex;
198
+ gap: 15px;
199
+ }
200
+
201
+ .icon-btn {
202
+ background: var(--bg-panel);
203
+ border: 1px solid var(--border);
204
+ color: var(--text-secondary);
205
+ width: 40px;
206
+ height: 40px;
207
+ border-radius: 8px;
208
+ display: flex;
209
+ align-items: center;
210
+ justify-content: center;
211
+ cursor: pointer;
212
+ transition: all 0.2s;
213
+ }
214
+
215
+ .icon-btn:hover {
216
+ color: var(--text-primary);
217
+ border-color: var(--text-secondary);
218
+ }
219
+
220
+ /* Dashboard Grid */
221
+ .dashboard-grid {
222
+ display: grid;
223
+ grid-template-columns: repeat(4, 1fr);
224
+ gap: 20px;
225
+ margin-bottom: 30px;
226
+ }
227
+
228
+ .stat-card {
229
+ background-color: var(--bg-panel);
230
+ padding: 20px;
231
+ border-radius: 12px;
232
+ border: 1px solid var(--border);
233
+ }
234
+
235
+ .stat-header {
236
+ display: flex;
237
+ justify-content: space-between;
238
+ align-items: center;
239
+ margin-bottom: 15px;
240
+ }
241
+
242
+ .stat-title {
243
+ color: var(--text-secondary);
244
+ font-size: 14px;
245
+ font-weight: 500;
246
+ }
247
+
248
+ .stat-icon {
249
+ width: 32px;
250
+ height: 32px;
251
+ border-radius: 8px;
252
+ display: flex;
253
+ align-items: center;
254
+ justify-content: center;
255
+ font-size: 16px;
256
+ }
257
+
258
+ .stat-value {
259
+ font-size: 24px;
260
+ font-weight: 700;
261
+ margin-bottom: 5px;
262
+ }
263
+
264
+ .stat-change {
265
+ font-size: 13px;
266
+ display: flex;
267
+ align-items: center;
268
+ gap: 4px;
269
+ }
270
+
271
+ .text-green { color: var(--success); }
272
+ .text-red { color: var(--danger); }
273
+
274
+ .bg-green-light { background: rgba(0, 200, 83, 0.15); color: var(--success); }
275
+ .bg-red-light { background: rgba(255, 23, 68, 0.15); color: var(--danger); }
276
+ .bg-blue-light { background: rgba(41, 98, 255, 0.15); color: var(--accent-primary); }
277
+
278
+ /* Main Middle Section */
279
+ .middle-section {
280
+ display: grid;
281
+ grid-template-columns: 3fr 1fr;
282
+ gap: 20px;
283
+ margin-bottom: 30px;
284
+ }
285
+
286
+ /* Chart Section */
287
+ .panel {
288
+ background-color: var(--bg-panel);
289
+ border-radius: 12px;
290
+ border: 1px solid var(--border);
291
+ padding: 20px;
292
+ overflow: hidden;
293
+ }
294
+
295
+ .panel-header {
296
+ display: flex;
297
+ justify-content: space-between;
298
+ align-items: center;
299
+ margin-bottom: 20px;
300
+ }
301
+
302
+ .panel-title {
303
+ font-size: 18px;
304
+ font-weight: 600;
305
+ }
306
+
307
+ .chart-container {
308
+ height: 300px;
309
+ position: relative;
310
+ }
311
+
312
+ /* Trading Form */
313
+ .trade-tabs {
314
+ display: flex;
315
+ margin-bottom: 20px;
316
+ background: var(--bg-dark);
317
+ border-radius: 8px;
318
+ padding: 4px;
319
+ }
320
+
321
+ .trade-tab {
322
+ flex: 1;
323
+ text-align: center;
324
+ padding: 10px;
325
+ border-radius: 6px;
326
+ cursor: pointer;
327
+ font-weight: 500;
328
+ color: var(--text-secondary);
329
+ transition: all 0.2s;
330
+ }
331
+
332
+ .trade-tab.active {
333
+ background-color: var(--accent-primary);
334
+ color: white;
335
+ }
336
+
337
+ .trade-tab.sell.active {
338
+ background-color: var(--danger);
339
+ }
340
+
341
+ .form-group {
342
+ margin-bottom: 15px;
343
+ }
344
+
345
+ .form-label {
346
+ display: block;
347
+ margin-bottom: 8px;
348
+ font-size: 13px;
349
+ color: var(--text-secondary);
350
+ }
351
+
352
+ .form-input {
353
+ width: 100%;
354
+ background: var(--bg-dark);
355
+ border: 1px solid var(--border);
356
+ padding: 12px;
357
+ border-radius: 8px;
358
+ color: white;
359
+ font-size: 15px;
360
+ }
361
+
362
+ .form-input:focus {
363
+ outline: none;
364
+ border-color: var(--accent-primary);
365
+ }
366
+
367
+ .asset-selector {
368
+ display: flex;
369
+ align-items: center;
370
+ gap: 10px;
371
+ margin-bottom: 15px;
372
+ }
373
+
374
+ .asset-icon {
375
+ width: 36px;
376
+ height: 36px;
377
+ background: var(--bg-hover);
378
+ border-radius: 50%;
379
+ display: flex;
380
+ align-items: center;
381
+ justify-content: center;
382
+ font-size: 18px;
383
+ }
384
+
385
+ .asset-details h3 {
386
+ font-size: 16px;
387
+ }
388
+ .asset-details span {
389
+ font-size: 12px;
390
+ color: var(--text-secondary);
391
+ }
392
+
393
+ .action-btn {
394
+ width: 100%;
395
+ padding: 14px;
396
+ border-radius: 8px;
397
+ border: none;
398
+ font-weight: 600;
399
+ font-size: 16px;
400
+ cursor: pointer;
401
+ transition: transform 0.1s;
402
+ margin-top: 10px;
403
+ }
404
+
405
+ .action-btn:active {
406
+ transform: scale(0.98);
407
+ }
408
+
409
+ /* Tables */
410
+ .bottom-section {
411
+ display: grid;
412
+ grid-template-columns: 1fr 1fr;
413
+ gap: 20px;
414
+ }
415
+
416
+ table {
417
+ width: 100%;
418
+ border-collapse: collapse;
419
+ }
420
+
421
+ th {
422
+ text-align: left;
423
+ padding: 12px 0;
424
+ color: var(--text-secondary);
425
+ font-weight: 500;
426
+ font-size: 13px;
427
+ border-bottom: 1px solid var(--border);
428
+ }
429
+
430
+ td {
431
+ padding: 16px 0;
432
+ border-bottom: 1px solid var(--border);
433
+ font-size: 14px;
434
+ }
435
+
436
+ tr:last-child td {
437
+ border-bottom: none;
438
+ }
439
+
440
+ .coin-cell {
441
+ display: flex;
442
+ align-items: center;
443
+ gap: 10px;
444
+ }
445
+
446
+ .coin-icon-sm {
447
+ width: 28px;
448
+ height: 28px;
449
+ border-radius: 50%;
450
+ background: #333;
451
+ display: flex;
452
+ align-items: center;
453
+ justify-content: center;
454
+ font-size: 14px;
455
+ }
456
+
457
+ .positive { color: var(--success); }
458
+ .negative { color: var(--danger); }
459
+
460
+ /* Footer */
461
+ .footer {
462
+ margin-top: 40px;
463
+ text-align: center;
464
+ color: var(--text-secondary);
465
+ font-size: 13px;
466
+ padding-top: 20px;
467
+ border-top: 1px solid var(--border);
468
+ }
469
+
470
+ .footer a {
471
+ color: var(--accent-primary);
472
+ text-decoration: none;
473
+ font-weight: 600;
474
+ }
475
+
476
+ /* Responsive */
477
+ @media (max-width: 1200px) {
478
+ .dashboard-grid {
479
+ grid-template-columns: repeat(2, 1fr);
480
+ }
481
+ .middle-section {
482
+ grid-template-columns: 2fr 1fr;
483
+ }
484
+ }
485
+
486
+ @media (max-width: 992px) {
487
+ .sidebar {
488
+ transform: translateX(-100%);
489
+ position: fixed;
490
+ }
491
+ .sidebar.active {
492
+ transform: translateX(0);
493
+ }
494
+ .main-content {
495
+ margin-left: 0;
496
+ }
497
+ .bottom-section {
498
+ grid-template-columns: 1fr;
499
+ }
500
+ .menu-toggle {
501
+ display: flex !important;
502
+ }
503
+ }
504
+
505
+ @media (max-width: 768px) {
506
+ .dashboard-grid {
507
+ grid-template-columns: 1fr;
508
+ }
509
+ .middle-section {
510
+ grid-template-columns: 1fr;
511
+ }
512
+ .top-bar {
513
+ flex-direction: column;
514
+ align-items: flex-start;
515
+ gap: 15px;
516
+ }
517
+ }
518
+
519
+ .menu-toggle {
520
+ display: none;
521
+ position: fixed;
522
+ top: 20px;
523
+ left: 20px;
524
+ z-index: 200;
525
+ background: var(--accent-primary);
526
+ color: white;
527
+ border: none;
528
+ width: 40px;
529
+ height: 40px;
530
+ border-radius: 8px;
531
+ cursor: pointer;
532
+ align-items: center;
533
+ justify-content: center;
534
+ font-size: 20px;
535
+ }
536
+
537
+ .overlay {
538
+ display: none;
539
+ position: fixed;
540
+ top: 0;
541
+ left: 0;
542
+ right: 0;
543
+ bottom: 0;
544
+ background: rgba(0,0,0,0.5);
545
+ z-index: 90;
546
+ }
547
+
548
+ .overlay.active {
549
+ display: block;
550
+ }
551
+
552
+ /* Animations */
553
+ @keyframes pulse {
554
+ 0% { opacity: 1; }
555
+ 50% { opacity: 0.5; }
556
+ 100% { opacity: 1; }
557
+ }
558
+
559
+ .live-indicator {
560
+ display: inline-block;
561
+ width: 8px;
562
+ height: 8px;
563
+ background-color: var(--success);
564
+ border-radius: 50%;
565
+ margin-right: 5px;
566
+ animation: pulse 2s infinite;
567
+ }
568
+
569
+ </style>
570
+ </head>
571
+ <body>
572
+
573
+ <button class="menu-toggle" onclick="toggleSidebar()">
574
+ <i class="fas fa-bars"></i>
575
+ </button>
576
+ <div class="overlay" onclick="toggleSidebar()"></div>
577
+
578
+ <div class="app-container">
579
+ <!-- Sidebar -->
580
+ <aside class="sidebar" id="sidebar">
581
+ <div class="logo-area">
582
+ <div class="logo">
583
+ <i class="fas fa-chart-line"></i>
584
+ <span>TradePro</span>
585
+ </div>
586
+ </div>
587
+
588
+ <nav class="nav-links">
589
+ <div class="nav-group">
590
+ <div class="nav-group-title">Menu</div>
591
+ <a class="nav-item active" onclick="switchTab('dashboard')">
592
+ <i class="fas fa-th-large"></i>
593
+ <span>Dashboard</span>
594
+ </a>
595
+ <a class="nav-item" onclick="switchTab('portfolio')">
596
+ <i class="fas fa-briefcase"></i>
597
+ <span>Portfolio</span>
598
+ </a>
599
+ <a class="nav-item" onclick="switchTab('market')">
600
+ <i class="fas fa-chart-bar"></i>
601
+ <span>Market</span>
602
+ </a>
603
+ </div>
604
+
605
+ <div class="nav-group">
606
+ <div class="nav-group-title">Account</div>
607
+ <a class="nav-item" onclick="switchTab('history')">
608
+ <i class="fas fa-history"></i>
609
+ <span>History</span>
610
+ </a>
611
+ <a class="nav-item" onclick="switchTab('settings')">
612
+ <i class="fas fa-cog"></i>
613
+ <span>Settings</span>
614
+ </a>
615
+ </div>
616
+ </nav>
617
+
618
+ <div class="user-profile">
619
+ <div class="avatar">JD</div>
620
+ <div class="user-info">
621
+ <h4>John Doe</h4>
622
+ <p>Pro Trader</p>
623
+ </div>
624
+ </div>
625
+ </aside>
626
+
627
+ <!-- Main Content -->
628
+ <main class="main-content">
629
+
630
+ <!-- Top Bar -->
631
+ <div class="top-bar">
632
+ <div>
633
+ <h1 class="page-title">Dashboard</h1>
634
+ <p style="color: var(--text-secondary); font-size: 14px; margin-top: 5px;">Welcome back, Market is <span class="text-green">Open</span> <span class="live-indicator"></span></p>
635
+ </div>
636
+ <div class="header-actions">
637
+ <div class="icon-btn"><i class="fas fa-search"></i></div>
638
+ <div class="icon-btn"><i class="fas fa-bell"></i></div>
639
+ <div class="icon-btn"><i class="fas fa-envelope"></i></div>
640
+ </div>
641
+ </div>
642
+
643
+ <!-- Stats Grid -->
644
+ <div class="dashboard-grid">
645
+ <div class="stat-card">
646
+ <div class="stat-header">
647
+ <span class="stat-title">Total Balance</span>
648
+ <div class="stat-icon bg-blue-light"><i class="fas fa-wallet"></i></div>
649
+ </div>
650
+ <div class="stat-value" id="total-balance">$124,500.00</div>
651
+ <div class="stat-change text-green">
652
+ <i class="fas fa-arrow-up"></i> 2.4% <span style="color: var(--text-secondary); margin-left: 5px;">vs last 7d</span>
653
+ </div>
654
+ </div>
655
+
656
+ <div class="stat-card">
657
+ <div class="stat-header">
658
+ <span class="stat-title">Day's P&L</span>
659
+ <div class="stat-icon bg-green-light"><i class="fas fa-caret-up"></i></div>
660
+ </div>
661
+ <div class="stat-value" id="daily-pnl">+$1,240.50</div>
662
+ <div class="stat-change text-green">
663
+ <i class="fas fa-arrow-up"></i> 1.2% <span style="color: var(--text-secondary); margin-left: 5px;">Today</span>
664
+ </div>
665
+ </div>
666
+
667
+ <div class="stat-card">
668
+ <div class="stat-header">
669
+ <span class="stat-title">Buying Power</span>
670
+ <div class="stat-icon bg-blue-light"><i class="fas fa-money-bill-wave"></i></div>
671
+ </div>
672
+ <div class="stat-value" id="buying-power">$45,000.00</div>
673
+ <div class="stat-change" style="color: var(--text-secondary)">
674
+ <span>Available cash</span>
675
+ </div>
676
+ </div>
677
+
678
+ <div class="stat-card">
679
+ <div class="stat-header">
680
+ <span class="stat-title">Open Positions</span>
681
+ <div class="stat-icon bg-red-light"><i class="fas fa-layer-group"></i></div>
682
+ </div>
683
+ <div class="stat-value">8</div>
684
+ <div class="stat-change" style="color: var(--text-secondary)">
685
+ <span>Across 4 Assets</span>
686
+ </div>
687
+ </div>
688
+ </div>
689
+
690
+ <!-- Middle Section: Chart & Trade -->
691
+ <div class="middle-section">
692
+ <div class="panel">
693
+ <div class="panel-header">
694
+ <h3 class="panel-title">Portfolio Performance</h3>
695
+ <div style="display: flex; gap: 10px;">
696
+ <span class="trade-tab active" style="padding: 6px 12px; font-size: 12px;">1D</span>
697
+ <span class="trade-tab" style="padding: 6px 12px; font-size: 12px;">1W</span>
698
+ <span class="trade-tab" style="padding: 6px 12px; font-size: 12px;">1M</span>
699
+ <span class="trade-tab" style="padding: 6px 12px; font-size: 12px;">1Y</span>
700
+ </div>
701
+ </div>
702
+ <div class="chart-container">
703
+ <canvas id="portfolioChart"></canvas>
704
+ </div>
705
+ </div>
706
+
707
+ <div class="panel">
708
+ <div class="panel-header">
709
+ <h3 class="panel-title">Quick Trade</h3>
710
+ </div>
711
+
712
+ <div class="asset-selector">
713
+ <div class="asset-icon">BTC</div>
714
+ <div class="asset-details">
715
+ <h3>Bitcoin</h3>
716
+ <span>BTC/USD</span>
717
+ </div>
718
+ </div>
719
+
720
+ <div class="trade-tabs">
721
+ <div class="trade-tab buy active" onclick="setTradeType('buy')">Buy</div>
722
+ <div class="trade-tab sell" onclick="setTradeType('sell')">Sell</div>
723
+ </div>
724
+
725
+ <form id="trade-form" onsubmit="executeTrade(event)">
726
+ <div class="form-group">
727
+ <label class="form-label">Price (USD)</label>
728
+ <input type="text" class="form-input" id="trade-price" value="64,230.50" readonly>
729
+ </div>
730
+ <div class="form-group">
731
+ <label class="form-label">Amount</label>
732
+ <input type="number" class="form-input" id="trade-amount" placeholder="0.00">
733
+ </div>
734
+ <div class="form-group">
735
+ <label class="form-label">Total</label>
736
+ <input type="text" class="form-input" id="trade-total" placeholder="$0.00" readonly>
737
+ </div>
738
+ <button type="submit" class="action-btn" id="submit-btn">Buy BTC</button>
739
+ </form>
740
+ </div>
741
+ </div>
742
+
743
+ <!-- Bottom Section: Tables -->
744
+ <div class="bottom-section">
745
+ <div class="panel">
746
+ <div class="panel-header">
747
+ <h3 class="panel-title">Holdings</h3>
748
+ <a href="#" style="color: var(--accent-primary); text-decoration: none; font-size: 13px;">View All</a>
749
+ </div>
750
+ <table>
751
+ <thead>
752
+ <tr>
753
+ <th>Asset</th>
754
+ <th>Price</th>
755
+ <th>Balance</th>
756
+ <th>P&L</th>
757
+ </tr>
758
+ </thead>
759
+ <tbody id="holdings-table">
760
+ <!-- Populated by JS -->
761
+ </tbody>
762
+ </table>
763
+ </div>
764
+
765
+ <div class="panel">
766
+ <div class="panel-header">
767
+ <h3 class="panel-title">Market Watch</h3>
768
+ <i class="fas fa-star" style="color: #f1c40f;"></i>
769
+ </div>
770
+ <table>
771
+ <thead>
772
+ <tr>
773
+ <th>Symbol</th>
774
+ <th>Price</th>
775
+ <th>24h Change</th>
776
+ </tr>
777
+ </thead>
778
+ <tbody id="watchlist-table">
779
+ <!-- Populated by JS -->
780
+ </tbody>
781
+ </table>
782
+ </div>
783
+ </div>
784
+
785
+ <div class="footer">
786
+ <p>Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">anycoder</a></p>
787
+ <p style="margin-top: 5px;">&copy; 2023 TradePro Terminal. All rights reserved.</p>
788
+ </div>
789
+
790
+ </main>
791
+ </div>
792
+
793
+ <script>
794
+ // --- Data Simulation ---
795
+ const portfolioData = {
796
+ balance: 124500.00,
797
+ dailyPnl: 1240.50,
798
+ buyingPower: 45000.00,
799
+ holdings: [
800
+ { symbol: 'BTC', name: 'Bitcoin', price: 64230.50, amount: 0.5, pnl: 5.2 },
801
+ { symbol: 'ETH', name: 'Ethereum', price: 3450.20, amount: 10.5, pnl: -1.2 },
802
+ { symbol: 'AAPL', name: 'Apple Inc.', price: 178.50, amount: 50, pnl: 12.5 },
803
+ { symbol: 'TSLA', name: 'Tesla', price: 245.00, amount: 20, pnl: -3.8 }
804
+ ],
805
+ watchlist: [
806
+ { symbol: 'NVDA', name: 'NVIDIA', price: 890.50, change: 3.4 },
807
+ { symbol: 'MSFT', name: 'Microsoft', price: 425.10, change: 0.8 },
808
+ { symbol: 'AMZN', name: 'Amazon', price: 178.30, change: -1.2 },
809
+ { symbol: 'GOOGL', name: 'Alphabet', price: 170.40, change: 1.5 }
810
+ ]
811
+ };
812
+
813
+ let currentTradeType = 'buy';
814
+ let chartInstance = null;
815
+
816
+ // --- Initialization ---
817
+ document.addEventListener('DOMContentLoaded', () => {
818
+ renderTables();
819
+ initChart();
820
+ updateLiveData();
821
+
822
+ // Listen for amount changes to update total
823
+ document.getElementById('trade-amount').addEventListener('input', calculateTotal);
824
+ });
825
+
826
+ // --- Functions ---
827
+
828
+ function toggleSidebar() {
829
+ const sidebar = document.getElementById('sidebar');
830
+ const overlay = document.querySelector('.overlay');
831
+ sidebar.classList.toggle('active');
832
+ overlay.classList.toggle('active');
833
+ }
834
+
835
+ function switchTab(tabName) {
836
+ // Remove active class from all nav items
837
+ document.querySelectorAll('.nav-item').forEach(item => item.classList.remove('active'));
838
+ // Add active class to clicked (this is a simulation)
839
+ event.currentTarget.classList.add('active');
840
+
841
+ // Visual feedback for switching tabs
842
+ document.querySelector('.page-title').innerText = tabName.charAt(0).toUpperCase() + tabName.slice(1);
843
+
844
+ if(window.innerWidth < 992) {
845
+ toggleSidebar();
846
+ }
847
+ }
848
+
849
+ function setTradeType(type) {
850
+ currentTradeType = type;
851
+ const tabs = document.querySelectorAll('.trade-tab');
852
+ const btn = document.getElementById('submit-btn');
853
+ const priceInput = document.getElementById('trade-price');
854
+
855
+ tabs.forEach(t => t.classList.remove('active'));
856
+
857
+ if(type === 'buy') {
858
+ tabs[0].classList.add('active');
859
+ btn.style.backgroundColor = 'var(--success)';
860
+ btn.innerText = `Buy BTC`;
861
+ priceInput.style.borderColor = 'var(--border)';
862
+ } else {
863
+ tabs[1].classList.add('active');
864
+ btn.style.backgroundColor = 'var(--danger)';
865
+ btn.innerText = `Sell BTC`;
866
+ }
867
+ }
868
+
869
+ function calculateTotal() {
870
+ const amount = parseFloat(document.getElementById('trade-amount').value) || 0;
871
+ const price = 64230.50; // Fixed for demo
872
+ const total = amount * price;
873
+ document.getElementById('trade-total').value = '$' + total.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2});
874
+ }
875
+
876
+ function executeTrade(e) {
877
+ e.preventDefault();
878
+ const amount = document.getElementById('trade-amount').value;
879
+ if(!amount || amount <= 0) {
880
+ alert("Please enter a valid amount");
881
+ return;
882
+ }
883
+
884
+ const type = currentTradeType === 'buy' ? 'Purchased' : 'Sold';
885
+ alert(`${type} ${amount} BTC successfully!`);
886
+
887
+ // Reset form
888
+ document.getElementById('trade-amount').value = '';
889
+ document.getElementById('trade-total').value = '';
890
+ }
891
+
892
+ function renderTables() {
893
+ // Render Holdings
894
+ const holdingsBody = document.getElementById('holdings-table');
895
+ holdingsBody.innerHTML = '';
896
+
897
+ portfolioData.holdings.forEach(coin => {
898
+ const row = document.createElement('tr');
899
+ const pnlClass = coin.pnl >= 0 ? 'positive' : 'negative';
900
+ const pnlIcon = coin.pnl >= 0 ? 'fa-caret-up' : 'fa-caret-down';
901
+
902
+ row.innerHTML = `
903
+ <td>
904
+ <div class="coin-cell">
905
+ <div class="coin-icon-sm" style="background: linear-gradient(45deg, #FF9966, #FF5E62)">${coin.symbol[0]}</div>
906
+ <div>
907
+ <div style="font-weight: 600">${coin.symbol}</div>
908
+ <div style="font-size: 11px; color: var(--text-secondary)">${coin.name}</div>
909
+ </div>
910
+ </div>
911
+ </td>
912
+ <td>$${coin.price.toLocaleString()}</td>
913
+ <td>$${(coin.price * coin.amount).toLocaleString()}</td>
914
+ <td class="${pnlClass}">
915
+ <i class="fas ${pnlIcon}"></i> ${Math.abs(coin.pnl)}%
916
+ </td>
917
+ `;
918
+ holdingsBody.appendChild(row);
919
+ });
920
+
921
+ // Render Watchlist
922
+ const watchlistBody = document.getElementById('watchlist-table');
923
+ watchlistBody.innerHTML = '';
924
+
925
+ portfolioData.watchlist.forEach(stock => {
926
+ const row = document.createElement('tr');
927
+ const changeClass = stock.change >= 0 ? 'positive' : 'negative';
928
+ const changeIcon = stock.change >= 0 ? 'fa-caret-up' : 'fa-caret-down';
929
+
930
+ row.innerHTML = `
931
+ <td>
932
+ <div class="coin-cell">
933
+ <div class="coin-icon-sm" style="background: #2d3436">${stock.symbol[0]}</div>
934
+ <div>
935
+ <div style="font-weight: 600">${stock.symbol}</div>
936
+ <div style="font-size: 11px; color: var(--text-secondary)">${stock.name}</div>
937
+ </div>
938
+ </div>
939
+ </td>
940
+ <td>$${stock.price.toLocaleString()}</td>
941
+ <td class="${changeClass}">
942
+ <i class="fas ${changeIcon}"></i> ${stock.change}%
943
+ </td>
944
+ `;
945
+ watchlistBody.appendChild(row);
946
+ });
947
+ }
948
+
949
+ function initChart() {
950
+ const ctx = document.getElementById('portfolioChart').getContext('2d');
951
+
952
+ // Gradient for chart
953
+ const gradient = ctx.createLinearGradient(0, 0, 0, 400);
954
+ gradient.addColorStop(0, 'rgba(41, 98, 255, 0.5)');
955
+ gradient.addColorStop(1, 'rgba(41, 98, 255, 0.0)');
956
+
957
+ const labels = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
958
+ // Simulated data points
959
+ const dataPoints = [60000, 62000, 59000, 65000, 70000, 68000, 75000, 80000, 78000, 85000, 90000, 124500];
960
+
961
+ chartInstance = new Chart(ctx, {
962
+ type: 'line',
963
+ data: {
964
+ labels: labels,
965
+ datasets: [{
966
+ label: 'Portfolio Value',
967
+ data: dataPoints,
968
+ borderColor: '#2962ff',
969
+ backgroundColor: gradient,
970
+ borderWidth: 2,
971
+ pointBackgroundColor: '#2962ff',
972
+ pointBorderColor: '#fff',
973
+ pointHoverBackgroundColor: '#fff',
974
+ pointHoverBorderColor: '#2962ff',
975
+ fill: true,
976
+ tension: 0.4
977
+ }]
978
+ },
979
+ options: {
980
+ responsive: true,
981
+ maintainAspectRatio: false,
982
+ plugins: {
983
+ legend: {
984
+ display: false
985
+ },
986
+ tooltip: {
987
+ mode: 'index',
988
+ intersect: false,
989
+ backgroundColor: '#181b21',
990
+ titleColor: '#fff',
991
+ bodyColor: '#8b949e',
992
+ borderColor: '#2f3336',
993
+ borderWidth: 1,
994
+ callbacks: {
995
+ label: function(context) {
996
+ return '$' + context.parsed.y.toLocaleString();
997
+ }
998
+ }
999
+ }
1000
+ },
1001
+ scales: {
1002
+ x: {
1003
+ grid: {
1004
+ color: '#2f3336',
1005
+ drawBorder: false
1006
+ },
1007
+ ticks: {
1008
+ color: '#8b949e'
1009
+ }
1010
+ },
1011
+ y: {
1012
+ grid: {
1013
+ color: '#2f3336',
1014
+ drawBorder: false
1015
+ },
1016
+ ticks: {
1017
+ color: '#8b949e',
1018
+ callback: function(value) {
1019
+ return '$' + value / 1000 + 'k';
1020
+ }
1021
+ }
1022
+ }
1023
+ },
1024
+ interaction: {
1025
+ mode: 'nearest',
1026
+ axis: 'x',
1027
+ intersect: false
1028
+ }
1029
+ }
1030
+ });
1031
+ }
1032
+
1033
+ function updateLiveData() {
1034
+ setInterval(() => {
1035
+ // Simulate slight fluctuation in balance
1036
+ const fluctuation = (Math.random() - 0.5) * 100;
1037
+ let currentBalance = parseFloat(document.getElementById('total-balance').innerText.replace(/[^0-9.-]+/g,""));
1038
+ currentBalance += fluctuation;
1039
+
1040
+ document.getElementById('total-balance').innerText = '$' + currentBalance.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2});
1041
+
1042
+ // Flash effect on update
1043
+ const balanceEl = document.getElementById('total-balance');
1044
+ balanceEl.style.transition = 'color 0.3s';
1045
+ balanceEl.style.color = fluctuation > 0 ? 'var(--success)' : 'var(--danger)';
1046
+ setTimeout(() => {
1047
+ balanceEl.style.color = 'var(--text-primary)';
1048
+ }, 500);
1049
+
1050
+ }, 3000);
1051
+ }
1052
+ </script>
1053
+ </body>
1054
+ </html>