MoShow commited on
Commit
122e18f
Β·
verified Β·
1 Parent(s): 90012e6

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +1286 -19
index.html CHANGED
@@ -1,19 +1,1286 @@
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>Sovereign Data Conduit β€” Spark Engine</title>
7
+ <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
8
+ <style>
9
+ /* ──────────────────────────────────────────────
10
+ DESIGN SYSTEM β€” Sovereign Crypto Terminal
11
+ Bold Typography Β· High Contrast Β· Flat Aesthetic
12
+ ────────────────────────────────────────────── */
13
+ :root {
14
+ --bg-primary: #050505;
15
+ --bg-surface: #111111;
16
+ --bg-elevated: #1a1a1a;
17
+ --bg-panel: #161616;
18
+ --border-primary: #333333;
19
+ --border-accent: #444444;
20
+ --border-focus: #666666;
21
+
22
+ --text-primary: #ffffff;
23
+ --text-secondary: #a0a0a0;
24
+ --text-muted: #666666;
25
+ --text-dim: #444444;
26
+
27
+ --accent-cyan: #00e5ff;
28
+ --accent-green: #00ff88;
29
+ --accent-amber: #ffb800;
30
+ --accent-red: #ff4444;
31
+ --accent-purple: #c084fc;
32
+ --accent-indigo: #818cf8;
33
+
34
+ --font-mono: 'JetBrains Mono', monospace;
35
+ --font-body: 'Inter', -apple-system, sans-serif;
36
+
37
+ --shadow-sm: 0 1px 2px rgba(0,0,0,0.5);
38
+ --shadow-md: 0 4px 12px rgba(0,0,0,0.6);
39
+ --shadow-lg: 0 8px 32px rgba(0,0,0,0.7);
40
+
41
+ --radius-sm: 4px;
42
+ --radius-md: 6px;
43
+ --radius-lg: 8px;
44
+
45
+ --space-xs: 4px;
46
+ --space-sm: 8px;
47
+ --space-md: 16px;
48
+ --space-lg: 24px;
49
+ --space-xl: 32px;
50
+ --space-2xl: 48px;
51
+ }
52
+
53
+ *, *::before, *::after {
54
+ margin: 0;
55
+ padding: 0;
56
+ box-sizing: border-box;
57
+ }
58
+
59
+ html {
60
+ scroll-behavior: smooth;
61
+ font-size: 14px;
62
+ }
63
+
64
+ body {
65
+ font-family: var(--font-body);
66
+ background: var(--bg-primary);
67
+ color: var(--text-primary);
68
+ min-height: 100vh;
69
+ overflow-x: hidden;
70
+ -webkit-font-smoothing: antialiased;
71
+ -moz-osx-font-smoothing: grayscale;
72
+ }
73
+
74
+ /* ─── Scrollbar ─── */
75
+ ::-webkit-scrollbar { width: 6px; height: 6px; }
76
+ ::-webkit-scrollbar-track { background: var(--bg-primary); }
77
+ ::-webkit-scrollbar-thumb { background: var(--border-primary); border-radius: 3px; }
78
+ ::-webkit-scrollbar-thumb:hover { background: var(--border-accent); }
79
+
80
+ /* ═══════════════════════════════════════════
81
+ LAYOUT β€” Terminal Grid
82
+ ═══════════════════════════════════════════ */
83
+ .terminal-root {
84
+ display: grid;
85
+ grid-template-rows: 56px 1fr;
86
+ grid-template-columns: 240px 1fr;
87
+ grid-template-areas:
88
+ "sidebar topbar"
89
+ "sidebar main";
90
+ height: 100vh;
91
+ width: 100vw;
92
+ overflow: hidden;
93
+ }
94
+
95
+ @media (max-width: 1024px) {
96
+ .terminal-root {
97
+ grid-template-columns: 64px 1fr;
98
+ }
99
+ .sidebar-label { display: none; }
100
+ }
101
+
102
+ @media (max-width: 768px) {
103
+ .terminal-root {
104
+ grid-template-columns: 1fr;
105
+ grid-template-rows: auto auto 1fr;
106
+ grid-template-areas:
107
+ "topbar"
108
+ "sidebar"
109
+ "main";
110
+ overflow-y: auto;
111
+ height: auto;
112
+ min-height: 100vh;
113
+ }
114
+ .sidebar-nav {
115
+ flex-direction: row !important;
116
+ overflow-x: auto;
117
+ padding: 8px 16px !important;
118
+ }
119
+ .sidebar-item {
120
+ flex-direction: row !important;
121
+ padding: 8px 16px !important;
122
+ }
123
+ }
124
+
125
+ /* ═══════════════════════════════════════════
126
+ TOPBAR β€” Market Ticker Strip
127
+ ═══════════════════════════════════════════ */
128
+ .topbar {
129
+ grid-area: topbar;
130
+ background: var(--bg-surface);
131
+ border-bottom: 1px solid var(--border-primary);
132
+ display: flex;
133
+ align-items: center;
134
+ justify-content: space-between;
135
+ padding: 0 var(--space-lg);
136
+ position: relative;
137
+ z-index: 50;
138
+ }
139
+
140
+ .brand-group {
141
+ display: flex;
142
+ align-items: center;
143
+ gap: var(--space-md);
144
+ }
145
+
146
+ .brand-mark {
147
+ display: flex;
148
+ align-items: center;
149
+ gap: var(--space-sm);
150
+ }
151
+
152
+ .brand-icon {
153
+ width: 32px;
154
+ height: 32px;
155
+ background: var(--accent-cyan);
156
+ border-radius: var(--radius-sm);
157
+ display: flex;
158
+ align-items: center;
159
+ justify-content: center;
160
+ font-weight: 900;
161
+ font-size: 14px;
162
+ color: var(--bg-primary);
163
+ letter-spacing: -0.5px;
164
+ }
165
+
166
+ .brand-text {
167
+ font-size: 18px;
168
+ font-weight: 900;
169
+ letter-spacing: -1.2px;
170
+ line-height: 1;
171
+ }
172
+
173
+ .brand-sub {
174
+ font-family: var(--font-mono);
175
+ font-size: 9px;
176
+ font-weight: 600;
177
+ color: var(--accent-cyan);
178
+ letter-spacing: 2px;
179
+ text-transform: uppercase;
180
+ margin-top: 2px;
181
+ }
182
+
183
+ .ticker-strip {
184
+ display: flex;
185
+ gap: var(--space-lg);
186
+ overflow-x: auto;
187
+ padding: 0 var(--space-md);
188
+ }
189
+
190
+ .ticker-item {
191
+ display: flex;
192
+ align-items: center;
193
+ gap: var(--space-sm);
194
+ white-space: nowrap;
195
+ }
196
+
197
+ .ticker-symbol {
198
+ font-family: var(--font-mono);
199
+ font-size: 11px;
200
+ font-weight: 700;
201
+ color: var(--text-secondary);
202
+ letter-spacing: 0.5px;
203
+ }
204
+
205
+ .ticker-price {
206
+ font-family: var(--font-mono);
207
+ font-size: 13px;
208
+ font-weight: 700;
209
+ }
210
+
211
+ .ticker-change {
212
+ font-family: var(--font-mono);
213
+ font-size: 10px;
214
+ font-weight: 600;
215
+ padding: 2px 6px;
216
+ border-radius: 2px;
217
+ }
218
+
219
+ .ticker-change.up {
220
+ background: rgba(0,255,136,0.12);
221
+ color: var(--accent-green);
222
+ }
223
+
224
+ .ticker-change.down {
225
+ background: rgba(255,68,68,0.12);
226
+ color: var(--accent-red);
227
+ }
228
+
229
+ .topbar-actions {
230
+ display: flex;
231
+ align-items: center;
232
+ gap: var(--space-md);
233
+ }
234
+
235
+ .anycoder-badge {
236
+ font-family: var(--font-mono);
237
+ font-size: 10px;
238
+ color: var(--text-dim);
239
+ border: 1px solid var(--border-primary);
240
+ padding: 4px 10px;
241
+ border-radius: var(--radius-sm);
242
+ text-decoration: none;
243
+ transition: all 0.2s;
244
+ letter-spacing: 0.5px;
245
+ }
246
+
247
+ .anycoder-badge:hover {
248
+ border-color: var(--accent-cyan);
249
+ color: var(--accent-cyan);
250
+ }
251
+
252
+ /* ═══════════════════════════════════════════
253
+ SIDEBAR β€” Node Navigator
254
+ ═══════════════════════════════════════════ */
255
+ .sidebar {
256
+ grid-area: sidebar;
257
+ background: var(--bg-surface);
258
+ border-right: 1px solid var(--border-primary);
259
+ display: flex;
260
+ flex-direction: column;
261
+ overflow-y: auto;
262
+ }
263
+
264
+ .sidebar-header {
265
+ padding: var(--space-lg);
266
+ border-bottom: 1px solid var(--border-primary);
267
+ }
268
+
269
+ .sidebar-header h2 {
270
+ font-size: 11px;
271
+ font-weight: 800;
272
+ text-transform: uppercase;
273
+ letter-spacing: 2.5px;
274
+ color: var(--text-muted);
275
+ }
276
+
277
+ .sidebar-nav {
278
+ display: flex;
279
+ flex-direction: column;
280
+ gap: 2px;
281
+ padding: var(--space-sm);
282
+ }
283
+
284
+ .sidebar-item {
285
+ display: flex;
286
+ align-items: center;
287
+ gap: var(--space-sm);
288
+ padding: 10px 14px;
289
+ border-radius: var(--radius-md);
290
+ cursor: pointer;
291
+ transition: all 0.15s;
292
+ text-decoration: none;
293
+ color: inherit;
294
+ font-size: 13px;
295
+ font-weight: 600;
296
+ }
297
+
298
+ .sidebar-item:hover {
299
+ background: var(--bg-elevated);
300
+ }
301
+
302
+ .sidebar-item.active {
303
+ background: rgba(0,229,255,0.08);
304
+ color: var(--accent-cyan);
305
+ }
306
+
307
+ .sidebar-item .emoji {
308
+ font-size: 16px;
309
+ min-width: 24px;
310
+ text-align: center;
311
+ }
312
+
313
+ .sidebar-label {
314
+ white-space: nowrap;
315
+ }
316
+
317
+ .sidebar-footer {
318
+ margin-top: auto;
319
+ padding: var(--space-lg);
320
+ border-top: 1px solid var(--border-primary);
321
+ }
322
+
323
+ .node-status {
324
+ display: flex;
325
+ align-items: center;
326
+ gap: var(--space-sm);
327
+ font-family: var(--font-mono);
328
+ font-size: 10px;
329
+ color: var(--text-muted);
330
+ }
331
+
332
+ .status-dot {
333
+ width: 8px;
334
+ height: 8px;
335
+ border-radius: 50%;
336
+ background: var(--accent-green);
337
+ box-shadow: 0 0 8px rgba(0,255,136,0.4);
338
+ animation: pulse-dot 2s ease-in-out infinite;
339
+ }
340
+
341
+ @keyframes pulse-dot {
342
+ 0%, 100% { opacity: 1; }
343
+ 50% { opacity: 0.4; }
344
+ }
345
+
346
+ /* ═══════════════════════════════════════════
347
+ MAIN CONTENT β€” Dashboard Grid
348
+ ═══════════════════════════════════════════ */
349
+ .main-content {
350
+ grid-area: main;
351
+ overflow-y: auto;
352
+ padding: var(--space-lg);
353
+ background: var(--bg-primary);
354
+ }
355
+
356
+ .dashboard-grid {
357
+ display: grid;
358
+ gap: var(--space-md);
359
+ max-width: 1600px;
360
+ margin: 0 auto;
361
+ }
362
+
363
+ /* Default layout: standard dashboard */
364
+ .dashboard-grid {
365
+ grid-template-columns: repeat(12, 1fr);
366
+ }
367
+
368
+ .panel {
369
+ background: var(--bg-surface);
370
+ border: 1px solid var(--border-primary);
371
+ border-radius: var(--radius-lg);
372
+ overflow: hidden;
373
+ transition: border-color 0.2s, box-shadow 0.2s;
374
+ }
375
+
376
+ .panel:hover {
377
+ border-color: var(--border-accent);
378
+ }
379
+
380
+ .panel:focus-within {
381
+ border-color: var(--accent-cyan);
382
+ box-shadow: 0 0 0 1px rgba(0,229,255,0.15);
383
+ }
384
+
385
+ .panel-header {
386
+ display: flex;
387
+ align-items: center;
388
+ justify-content: space-between;
389
+ padding: var(--space-md) var(--space-lg);
390
+ border-bottom: 1px solid var(--border-primary);
391
+ min-height: 48px;
392
+ }
393
+
394
+ .panel-title {
395
+ font-size: 11px;
396
+ font-weight: 800;
397
+ text-transform: uppercase;
398
+ letter-spacing: 2px;
399
+ color: var(--text-secondary);
400
+ }
401
+
402
+ .panel-badge {
403
+ font-family: var(--font-mono);
404
+ font-size: 10px;
405
+ font-weight: 600;
406
+ padding: 3px 8px;
407
+ border-radius: 2px;
408
+ letter-spacing: 0.5px;
409
+ }
410
+
411
+ .panel-badge.ok { background: rgba(0,255,136,0.1); color: var(--accent-green); }
412
+ .panel-badge.warn { background: rgba(255,184,0,0.1); color: var(--accent-amber); }
413
+ .panel-badge.live {
414
+ background: rgba(0,229,255,0.1);
415
+ color: var(--accent-cyan);
416
+ animation: live-pulse 1.5s ease-in-out infinite;
417
+ }
418
+
419
+ @keyframes live-pulse {
420
+ 0%, 100% { opacity: 1; }
421
+ 50% { opacity: 0.5; }
422
+ }
423
+
424
+ .panel-body {
425
+ padding: var(--space-lg);
426
+ }
427
+
428
+ /* ─── Panel sizing helpers ─── */
429
+ .col-3 { grid-column: span 3; }
430
+ .col-4 { grid-column: span 4; }
431
+ .col-6 { grid-column: span 6; }
432
+ .col-8 { grid-column: span 8; }
433
+ .col-12 { grid-column: span 12; }
434
+
435
+ @media (max-width: 1200px) {
436
+ .col-3, .col-4, .col-6, .col-8 { grid-column: span 6; }
437
+ }
438
+
439
+ @media (max-width: 768px) {
440
+ .col-3, .col-4, .col-6, .col-8, .col-12 { grid-column: span 12; }
441
+ }
442
+
443
+ /* ═══════════════════════════════════════════
444
+ COMPONENTS β€” Typography & Metrics
445
+ ═══════════════════════════════════════════ */
446
+ .metric-value {
447
+ font-family: var(--font-mono);
448
+ font-weight: 700;
449
+ line-height: 1.1;
450
+ }
451
+
452
+ .metric-value.xl { font-size: 42px; letter-spacing: -2px; }
453
+ .metric-value.lg { font-size: 32px; letter-spacing: -1.5px; }
454
+ .metric-value.md { font-size: 24px; letter-spacing: -1px; }
455
+ .metric-value.sm { font-size: 18px; letter-spacing: -0.5px; }
456
+
457
+ .metric-label {
458
+ font-size: 10px;
459
+ font-weight: 700;
460
+ text-transform: uppercase;
461
+ letter-spacing: 1.5px;
462
+ color: var(--text-muted);
463
+ margin-bottom: var(--space-sm);
464
+ }
465
+
466
+ .metric-sublabel {
467
+ font-family: var(--font-mono);
468
+ font-size: 10px;
469
+ color: var(--text-dim);
470
+ margin-top: 4px;
471
+ }
472
+
473
+ /* ─── Progress Bars ─── */
474
+ .progress-track {
475
+ width: 100%;
476
+ height: 6px;
477
+ background: var(--bg-elevated);
478
+ border-radius: 3px;
479
+ overflow: hidden;
480
+ margin-top: var(--space-sm);
481
+ }
482
+
483
+ .progress-fill {
484
+ height: 100%;
485
+ border-radius: 3px;
486
+ transition: width 0.5s ease;
487
+ }
488
+
489
+ .progress-fill.cyan { background: var(--accent-cyan); }
490
+ .progress-fill.green { background: var(--accent-green); }
491
+ .progress-fill.amber { background: var(--accent-amber); }
492
+ .progress-fill.red { background: var(--accent-red); }
493
+ .progress-fill.purple { background: var(--accent-purple); }
494
+
495
+ /* ─── Buttons ─── */
496
+ .btn {
497
+ display: inline-flex;
498
+ align-items: center;
499
+ justify-content: center;
500
+ gap: var(--space-sm);
501
+ padding: 10px 20px;
502
+ border: 1px solid var(--border-primary);
503
+ background: var(--bg-elevated);
504
+ color: var(--text-primary);
505
+ font-family: var(--font-body);
506
+ font-size: 12px;
507
+ font-weight: 700;
508
+ text-transform: uppercase;
509
+ letter-spacing: 1.5px;
510
+ border-radius: var(--radius-md);
511
+ cursor: pointer;
512
+ transition: all 0.15s;
513
+ white-space: nowrap;
514
+ }
515
+
516
+ .btn:hover {
517
+ border-color: var(--border-focus);
518
+ background: var(--bg-panel);
519
+ }
520
+
521
+ .btn:active {
522
+ transform: translateY(1px);
523
+ }
524
+
525
+ .btn-primary {
526
+ background: var(--accent-cyan);
527
+ color: var(--bg-primary);
528
+ border-color: var(--accent-cyan);
529
+ }
530
+
531
+ .btn-primary:hover {
532
+ background: #00d4e6;
533
+ border-color: #00d4e6;
534
+ }
535
+
536
+ .btn-success {
537
+ background: var(--accent-green);
538
+ color: var(--bg-primary);
539
+ border-color: var(--accent-green);
540
+ }
541
+
542
+ .btn-success:hover {
543
+ background: #00e67a;
544
+ }
545
+
546
+ .btn-danger {
547
+ background: var(--accent-red);
548
+ color: #fff;
549
+ border-color: var(--accent-red);
550
+ }
551
+
552
+ .btn-ghost {
553
+ background: transparent;
554
+ border-color: transparent;
555
+ }
556
+
557
+ .btn-ghost:hover {
558
+ background: var(--bg-elevated);
559
+ }
560
+
561
+ .btn-sm {
562
+ padding: 6px 12px;
563
+ font-size: 10px;
564
+ letter-spacing: 1px;
565
+ }
566
+
567
+ .btn-block {
568
+ width: 100%;
569
+ }
570
+
571
+ /* ─── Forms ─── */
572
+ .form-group {
573
+ margin-bottom: var(--space-md);
574
+ }
575
+
576
+ .form-label {
577
+ display: block;
578
+ font-size: 10px;
579
+ font-weight: 700;
580
+ text-transform: uppercase;
581
+ letter-spacing: 1.5px;
582
+ color: var(--text-muted);
583
+ margin-bottom: var(--space-xs);
584
+ }
585
+
586
+ .form-input, .form-select {
587
+ width: 100%;
588
+ padding: 10px 12px;
589
+ background: var(--bg-elevated);
590
+ border: 1px solid var(--border-primary);
591
+ border-radius: var(--radius-md);
592
+ color: var(--text-primary);
593
+ font-family: var(--font-mono);
594
+ font-size: 13px;
595
+ transition: border-color 0.2s;
596
+ outline: none;
597
+ }
598
+
599
+ .form-input:focus, .form-select:focus {
600
+ border-color: var(--accent-cyan);
601
+ }
602
+
603
+ .form-input::placeholder {
604
+ color: var(--text-dim);
605
+ }
606
+
607
+ .form-hint {
608
+ font-family: var(--font-mono);
609
+ font-size: 10px;
610
+ color: var(--text-dim);
611
+ margin-top: var(--space-xs);
612
+ }
613
+
614
+ .input-group {
615
+ display: flex;
616
+ gap: var(--space-sm);
617
+ }
618
+
619
+ .input-group .form-input {
620
+ flex: 1;
621
+ }
622
+
623
+ /* ─── Tables ─── */
624
+ .data-table {
625
+ width: 100%;
626
+ border-collapse: collapse;
627
+ font-size: 12px;
628
+ }
629
+
630
+ .data-table th {
631
+ text-align: left;
632
+ padding: 10px 14px;
633
+ font-size: 9px;
634
+ font-weight: 800;
635
+ text-transform: uppercase;
636
+ letter-spacing: 1.5px;
637
+ color: var(--text-muted);
638
+ border-bottom: 1px solid var(--border-primary);
639
+ }
640
+
641
+ .data-table td {
642
+ padding: 10px 14px;
643
+ border-bottom: 1px solid rgba(51,51,51,0.5);
644
+ font-family: var(--font-mono);
645
+ }
646
+
647
+ .data-table tr:hover td {
648
+ background: rgba(255,255,255,0.02);
649
+ }
650
+
651
+ .data-table tr:last-child td {
652
+ border-bottom: none;
653
+ }
654
+
655
+ /* ─── Terminal / Logs ─── */
656
+ .terminal-window {
657
+ background: var(--bg-primary);
658
+ border: 1px solid var(--border-primary);
659
+ border-radius: var(--radius-md);
660
+ font-family: var(--font-mono);
661
+ font-size: 11px;
662
+ line-height: 1.6;
663
+ overflow: hidden;
664
+ }
665
+
666
+ .terminal-header {
667
+ display: flex;
668
+ align-items: center;
669
+ gap: var(--space-sm);
670
+ padding: 8px 12px;
671
+ border-bottom: 1px solid var(--border-primary);
672
+ background: var(--bg-surface);
673
+ }
674
+
675
+ .terminal-dot {
676
+ width: 10px;
677
+ height: 10px;
678
+ border-radius: 50%;
679
+ }
680
+
681
+ .terminal-body {
682
+ padding: var(--space-md);
683
+ max-height: 280px;
684
+ overflow-y: auto;
685
+ }
686
+
687
+ .terminal-line {
688
+ display: flex;
689
+ gap: var(--space-sm);
690
+ padding: 2px 0;
691
+ animation: fadeInUp 0.3s ease;
692
+ }
693
+
694
+ .terminal-line .ts {
695
+ color: var(--text-dim);
696
+ min-width: 72px;
697
+ flex-shrink: 0;
698
+ }
699
+
700
+ .terminal-line .level {
701
+ min-width: 48px;
702
+ flex-shrink: 0;
703
+ font-weight: 700;
704
+ }
705
+
706
+ .terminal-line .level.info { color: var(--accent-cyan); }
707
+ .terminal-line .level.ok { color: var(--accent-green); }
708
+ .terminal-line .level.warn { color: var(--accent-amber); }
709
+ .terminal-line .level.err { color: var(--accent-red); }
710
+
711
+ .terminal-line .msg {
712
+ color: var(--text-secondary);
713
+ word-break: break-word;
714
+ }
715
+
716
+ .terminal-line .msg strong {
717
+ color: var(--text-primary);
718
+ font-weight: 700;
719
+ }
720
+
721
+ @keyframes fadeInUp {
722
+ from { opacity: 0; transform: translateY(4px); }
723
+ to { opacity: 1; transform: translateY(0); }
724
+ }
725
+
726
+ /* ─── Signal Cards ─── */
727
+ .signal-list {
728
+ display: flex;
729
+ flex-direction: column;
730
+ gap: var(--space-sm);
731
+ }
732
+
733
+ .signal-card {
734
+ display: flex;
735
+ align-items: center;
736
+ gap: var(--space-md);
737
+ padding: var(--space-md);
738
+ background: var(--bg-elevated);
739
+ border: 1px solid var(--border-primary);
740
+ border-radius: var(--radius-md);
741
+ transition: all 0.15s;
742
+ cursor: pointer;
743
+ }
744
+
745
+ .signal-card:hover {
746
+ border-color: var(--border-accent);
747
+ transform: translateX(2px);
748
+ }
749
+
750
+ .signal-card.long { border-left: 3px solid var(--accent-green); }
751
+ .signal-card.short { border-left: 3px solid var(--accent-red); }
752
+ .signal-card.hold { border-left: 3px solid var(--accent-amber); }
753
+
754
+ .signal-direction {
755
+ width: 40px;
756
+ height: 40px;
757
+ border-radius: var(--radius-sm);
758
+ display: flex;
759
+ align-items: center;
760
+ justify-content: center;
761
+ font-size: 18px;
762
+ font-weight: 900;
763
+ flex-shrink: 0;
764
+ }
765
+
766
+ .signal-direction.long { background: rgba(0,255,136,0.1); color: var(--accent-green); }
767
+ .signal-direction.short { background: rgba(255,68,68,0.1); color: var(--accent-red); }
768
+ .signal-direction.hold { background: rgba(255,184,0,0.1); color: var(--accent-amber); }
769
+
770
+ .signal-body {
771
+ flex: 1;
772
+ min-width: 0;
773
+ }
774
+
775
+ .signal-pair {
776
+ font-family: var(--font-mono);
777
+ font-size: 13px;
778
+ font-weight: 700;
779
+ }
780
+
781
+ .signal-meta {
782
+ font-family: var(--font-mono);
783
+ font-size: 10px;
784
+ color: var(--text-muted);
785
+ margin-top: 2px;
786
+ }
787
+
788
+ .signal-conf {
789
+ text-align: right;
790
+ flex-shrink: 0;
791
+ }
792
+
793
+ .signal-conf-val {
794
+ font-family: var(--font-mono);
795
+ font-size: 18px;
796
+ font-weight: 700;
797
+ }
798
+
799
+ .signal-conf-label {
800
+ font-size: 9px;
801
+ font-weight: 700;
802
+ text-transform: uppercase;
803
+ letter-spacing: 1px;
804
+ color: var(--text-muted);
805
+ }
806
+
807
+ /* ─── Position Cards ─── */
808
+ .position-grid {
809
+ display: grid;
810
+ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
811
+ gap: var(--space-md);
812
+ }
813
+
814
+ .position-card {
815
+ background: var(--bg-elevated);
816
+ border: 1px solid var(--border-primary);
817
+ border-radius: var(--radius-md);
818
+ padding: var(--space-md);
819
+ transition: all 0.15s;
820
+ }
821
+
822
+ .position-card:hover {
823
+ border-color: var(--border-accent);
824
+ }
825
+
826
+ .position-header {
827
+ display: flex;
828
+ justify-content: space-between;
829
+ align-items: center;
830
+ margin-bottom: var(--space-md);
831
+ }
832
+
833
+ .position-pair {
834
+ font-family: var(--font-mono);
835
+ font-size: 14px;
836
+ font-weight: 700;
837
+ }
838
+
839
+ .position-badge {
840
+ font-size: 9px;
841
+ font-weight: 800;
842
+ text-transform: uppercase;
843
+ letter-spacing: 1.5px;
844
+ padding: 3px 8px;
845
+ border-radius: 2px;
846
+ }
847
+
848
+ .position-badge.long { background: rgba(0,255,136,0.1); color: var(--accent-green); }
849
+ .position-badge.short { background: rgba(255,68,68,0.1); color: var(--accent-red); }
850
+
851
+ .position-metrics {
852
+ display: grid;
853
+ grid-template-columns: 1fr 1fr;
854
+ gap: var(--space-sm);
855
+ margin-bottom: var(--space-md);
856
+ }
857
+
858
+ .position-metric {
859
+ font-family: var(--font-mono);
860
+ }
861
+
862
+ .position-metric-label {
863
+ font-size: 9px;
864
+ text-transform: uppercase;
865
+ letter-spacing: 1px;
866
+ color: var(--text-muted);
867
+ }
868
+
869
+ .position-metric-value {
870
+ font-size: 14px;
871
+ font-weight: 700;
872
+ margin-top: 2px;
873
+ }
874
+
875
+ .position-metric-value.profit { color: var(--accent-green); }
876
+ .position-metric-value.loss { color: var(--accent-red); }
877
+
878
+ /* ─── Chart Canvas Container ─── */
879
+ .chart-container {
880
+ position: relative;
881
+ width: 100%;
882
+ height: 360px;
883
+ background: var(--bg-primary);
884
+ border-radius: var(--radius-md);
885
+ overflow: hidden;
886
+ }
887
+
888
+ .chart-overlay {
889
+ position: absolute;
890
+ top: var(--space-sm);
891
+ left: var(--space-sm);
892
+ display: flex;
893
+ gap: var(--space-md);
894
+ }
895
+
896
+ .chart-legend-item {
897
+ display: flex;
898
+ align-items: center;
899
+ gap: 4px;
900
+ font-family: var(--font-mono);
901
+ font-size: 10px;
902
+ color: var(--text-muted);
903
+ }
904
+
905
+ .chart-legend-dot {
906
+ width: 8px;
907
+ height: 8px;
908
+ border-radius: 2px;
909
+ }
910
+
911
+ /* ─── Alerts ─── */
912
+ .alert {
913
+ padding: var(--space-md) var(--space-lg);
914
+ border: 1px solid;
915
+ border-radius: var(--radius-md);
916
+ margin-bottom: var(--space-md);
917
+ display: flex;
918
+ align-items: flex-start;
919
+ gap: var(--space-md);
920
+ }
921
+
922
+ .alert.info { border-color: rgba(0,229,255,0.3); background: rgba(0,229,255,0.05); }
923
+ .alert.warn { border-color: rgba(255,184,0,0.3); background: rgba(255,184,0,0.05); }
924
+ .alert.err { border-color: rgba(255,68,68,0.3); background: rgba(255,68,68,0.05); }
925
+
926
+ .alert-icon {
927
+ font-size: 18px;
928
+ flex-shrink: 0;
929
+ }
930
+
931
+ .alert-content {
932
+ flex: 1;
933
+ }
934
+
935
+ .alert-title {
936
+ font-size: 12px;
937
+ font-weight: 700;
938
+ margin-bottom: 2px;
939
+ }
940
+
941
+ .alert-desc {
942
+ font-size: 11px;
943
+ color: var(--text-secondary);
944
+ line-height: 1.5;
945
+ }
946
+
947
+ /* ─── Spark Engine Stats ─── */
948
+ .spark-grid {
949
+ display: grid;
950
+ grid-template-columns: repeat(4, 1fr);
951
+ gap: var(--space-md);
952
+ }
953
+
954
+ @media (max-width: 1200px) {
955
+ .spark-grid { grid-template-columns: repeat(2, 1fr); }
956
+ }
957
+
958
+ @media (max-width: 768px) {
959
+ .spark-grid { grid-template-columns: 1fr; }
960
+ }
961
+
962
+ .spark-stat {
963
+ background: var(--bg-elevated);
964
+ border: 1px solid var(--border-primary);
965
+ border-radius: var(--radius-md);
966
+ padding: var(--space-lg);
967
+ text-align: center;
968
+ transition: all 0.2s;
969
+ }
970
+
971
+ .spark-stat:hover {
972
+ border-color: var(--accent-cyan);
973
+ }
974
+
975
+ .spark-stat .metric-value {
976
+ margin: var(--space-sm) 0;
977
+ }
978
+
979
+ /* ─── Responsive Table Scroll ─── */
980
+ .table-scroll {
981
+ overflow-x: auto;
982
+ -webkit-overflow-scrolling: touch;
983
+ }
984
+
985
+ /* ─── Section Divider ─── */
986
+ .section-divider {
987
+ display: flex;
988
+ align-items: center;
989
+ gap: var(--space-md);
990
+ margin: var(--space-xl) 0 var(--space-lg);
991
+ grid-column: 1 / -1;
992
+ }
993
+
994
+ .section-divider::before,
995
+ .section-divider::after {
996
+ content: '';
997
+ flex: 1;
998
+ height: 1px;
999
+ background: var(--border-primary);
1000
+ }
1001
+
1002
+ .section-divider h2 {
1003
+ font-size: 11px;
1004
+ font-weight: 800;
1005
+ text-transform: uppercase;
1006
+ letter-spacing: 3px;
1007
+ color: var(--text-muted);
1008
+ white-space: nowrap;
1009
+ }
1010
+
1011
+ /* ─── Animations ─── */
1012
+ @keyframes slideInRight {
1013
+ from { opacity: 0; transform: translateX(-12px); }
1014
+ to { opacity: 1; transform: translateX(0); }
1015
+ }
1016
+
1017
+ .animate-in {
1018
+ animation: slideInRight 0.3s ease forwards;
1019
+ }
1020
+
1021
+ /* ─── Page Sections (hidden by default) ─── */
1022
+ .page-section {
1023
+ display: none;
1024
+ }
1025
+
1026
+ .page-section.active {
1027
+ display: block;
1028
+ }
1029
+
1030
+ /* ═══════════════════════════════════════════
1031
+ MODERN CSS FEATURES
1032
+ ═══════════════════════════════════════════ */
1033
+ /* Container queries for components */
1034
+ .panel {
1035
+ container-type: inline-size;
1036
+ container-name: panel;
1037
+ }
1038
+
1039
+ @container panel (max-width: 300px) {
1040
+ .panel-header { flex-direction: column; align-items: flex-start; gap: var(--space-sm); }
1041
+ }
1042
+
1043
+ /* Custom properties for dynamic theming */
1044
+ .theme-green { --accent-primary: var(--accent-green); }
1045
+ .theme-cyan { --accent-primary: var(--accent-cyan); }
1046
+
1047
+ /* Scroll-driven animations (progressive enhancement) */
1048
+ @supports (animation-timeline: scroll()) {
1049
+ .dashboard-grid > .panel {
1050
+ animation: fade-in-up linear both;
1051
+ animation-timeline: view();
1052
+ animation-range: entry 0% entry 40%;
1053
+ }
1054
+ }
1055
+
1056
+ @keyframes fade-in-up {
1057
+ from { opacity: 0; transform: translateY(20px); }
1058
+ to { opacity: 1; transform: translateY(0); }
1059
+ }
1060
+
1061
+ /* ═══════════════════════════════════════════
1062
+ MOBILE OVERRIDES
1063
+ ═══════════════════════════════════════════ */
1064
+ @media (max-width: 768px) {
1065
+ .main-content { padding: var(--space-md); }
1066
+ .panel-body { padding: var(--space-md); }
1067
+ .ticker-strip { display: none; }
1068
+ .metric-value.xl { font-size: 28px; }
1069
+ .metric-value.lg { font-size: 22px; }
1070
+ .topbar { padding: 0 var(--space-md); }
1071
+ }
1072
+
1073
+ /* Print styles */
1074
+ @media print {
1075
+ .sidebar, .topbar { display: none; }
1076
+ .terminal-root { grid-template-columns: 1fr; }
1077
+ }
1078
+
1079
+ /* ═══════════════════════════════════════════
1080
+ IDIM IKANG OBSERVER COMPONENTS
1081
+ ═══════════════════════════════════════════ */
1082
+ .observer-grid {
1083
+ display: grid;
1084
+ grid-template-columns: repeat(3, 1fr);
1085
+ gap: var(--space-md);
1086
+ }
1087
+
1088
+ @media (max-width: 1200px) {
1089
+ .observer-grid { grid-template-columns: repeat(2, 1fr); }
1090
+ }
1091
+
1092
+ @media (max-width: 768px) {
1093
+ .observer-grid { grid-template-columns: 1fr; }
1094
+ }
1095
+
1096
+ .observer-card {
1097
+ background: var(--bg-surface);
1098
+ border: 1px solid var(--border-primary);
1099
+ border-radius: var(--radius-lg);
1100
+ overflow: hidden;
1101
+ }
1102
+
1103
+ .observer-card-header {
1104
+ display: flex;
1105
+ align-items: center;
1106
+ justify-content: space-between;
1107
+ padding: var(--space-md) var(--space-lg);
1108
+ border-bottom: 1px solid var(--border-primary);
1109
+ }
1110
+
1111
+ .observer-card-title {
1112
+ font-size: 11px;
1113
+ font-weight: 800;
1114
+ text-transform: uppercase;
1115
+ letter-spacing: 2px;
1116
+ color: var(--text-secondary);
1117
+ }
1118
+
1119
+ .observer-kv {
1120
+ display: flex;
1121
+ justify-content: space-between;
1122
+ padding: 10px 14px;
1123
+ border-bottom: 1px solid rgba(51,51,51,0.5);
1124
+ font-size: 12px;
1125
+ }
1126
+
1127
+ .observer-kv:last-child { border-bottom: none; }
1128
+
1129
+ .observer-kv-key {
1130
+ font-family: var(--font-mono);
1131
+ color: var(--text-muted);
1132
+ }
1133
+
1134
+ .observer-kv-val {
1135
+ font-family: var(--font-mono);
1136
+ font-weight: 600;
1137
+ }
1138
+
1139
+ /* ═══════════════════════════════════════════
1140
+ TRAINING ENGINE COMPONENTS
1141
+ ═══════════════════════════════════════════ */
1142
+ .epoch-tracker {
1143
+ display: flex;
1144
+ align-items: center;
1145
+ gap: var(--space-md);
1146
+ padding: var(--space-md) 0;
1147
+ }
1148
+
1149
+ .epoch-bar {
1150
+ flex: 1;
1151
+ height: 8px;
1152
+ background: var(--bg-elevated);
1153
+ border-radius: 4px;
1154
+ overflow: hidden;
1155
+ }
1156
+
1157
+ .epoch-bar-fill {
1158
+ height: 100%;
1159
+ border-radius: 4px;
1160
+ transition: width 0.5s ease;
1161
+ background: var(--accent-cyan);
1162
+ }
1163
+
1164
+ .epoch-label {
1165
+ font-family: var(--font-mono);
1166
+ font-size: 12px;
1167
+ font-weight: 700;
1168
+ min-width: 60px;
1169
+ text-align: right;
1170
+ }
1171
+
1172
+ /* ═══════════════════════════════════════════
1173
+ FLEX HELPERS
1174
+ ═══════════════════════════════════════════ */
1175
+ .flex { display: flex; }
1176
+ .flex-col { flex-direction: column; }
1177
+ .items-center { align-items: center; }
1178
+ .justify-between { justify-content: space-between; }
1179
+ .gap-sm { gap: var(--space-sm); }
1180
+ .gap-md { gap: var(--space-md); }
1181
+ .gap-lg { gap: var(--space-lg); }
1182
+ .w-full { width: 100%; }
1183
+ .mt-sm { margin-top: var(--space-sm); }
1184
+ .mt-md { margin-top: var(--space-md); }
1185
+ .mb-md { margin-bottom: var(--space-md); }
1186
+ .text-center { text-align: center; }
1187
+
1188
+ /* Color utilities */
1189
+ .text-cyan { color: var(--accent-cyan); }
1190
+ .text-green { color: var(--accent-green); }
1191
+ .text-amber { color: var(--accent-amber); }
1192
+ .text-red { color: var(--accent-red); }
1193
+ .text-purple { color: var(--accent-purple); }
1194
+ .text-muted { color: var(--text-muted); }
1195
+ .text-dim { color: var(--text-dim); }
1196
+
1197
+ /* Background utilities */
1198
+ .bg-surface { background: var(--bg-surface); }
1199
+ .bg-elevated { background: var(--bg-elevated); }
1200
+ </style>
1201
+ </head>
1202
+ <body>
1203
+
1204
+ <div class="terminal-root">
1205
+
1206
+ <!-- ═══════════════════════════════════════════
1207
+ SIDEBAR β€” Node Navigator
1208
+ ═══════════════════════════════════════════ -->
1209
+ <aside class="sidebar">
1210
+ <div class="sidebar-header">
1211
+ <h2>Active Nodes</h2>
1212
+ </div>
1213
+ <nav class="sidebar-nav" id="sidebarNav">
1214
+ <a class="sidebar-item active" href="#" data-page="dashboard" onclick="navigateTo('dashboard'); return false;">
1215
+ <span class="emoji">⚑</span>
1216
+ <span class="sidebar-label">Spark Engine</span>
1217
+ </a>
1218
+ <a class="sidebar-item" href="#" data-page="ingestion" onclick="navigateTo('ingestion'); return false;">
1219
+ <span class="emoji">πŸ“‘</span>
1220
+ <span class="sidebar-label">Ingestion Node</span>
1221
+ </a>
1222
+ <a class="sidebar-item" href="#" data-page="training" onclick="navigateTo('training'); return false;">
1223
+ <span class="emoji">🧠</span>
1224
+ <span class="sidebar-label">Training Engine</span>
1225
+ </a>
1226
+ <a class="sidebar-item" href="#" data-page="observer" onclick="navigateTo('observer'); return false;">
1227
+ <span class="emoji">πŸ‘</span>
1228
+ <span class="sidebar-label">Idim Ikang Observer</span>
1229
+ </a>
1230
+ <a class="sidebar-item" href="#" data-page="positions" onclick="navigateTo('positions'); return false;">
1231
+ <span class="emoji">πŸ“Š</span>
1232
+ <span class="sidebar-label">Positions</span>
1233
+ </a>
1234
+ <a class="sidebar-item" href="#" data-page="signals" onclick="navigateTo('signals'); return false;">
1235
+ <span class="emoji">πŸ””</span>
1236
+ <span class="sidebar-label">Signal Feed</span>
1237
+ </a>
1238
+ </nav>
1239
+ <div class="sidebar-footer">
1240
+ <div class="node-status">
1241
+ <div class="status-dot"></div>
1242
+ <span>AFR-1 NODE β€” CONNECTED</span>
1243
+ </div>
1244
+ <div class="node-status mt-sm" style="margin-top:8px;">
1245
+ <span style="font-size:9px; color: var(--text-dim);">LATENCY: <span id="nodeLatency">12ms</span></span>
1246
+ </div>
1247
+ </div>
1248
+ </aside>
1249
+
1250
+ <!-- ═══════════════════════════════════════════
1251
+ TOPBAR β€” Ticker & Brand
1252
+ ═══════════════════════════════════════════ -->
1253
+ <header class="topbar">
1254
+ <div class="brand-group">
1255
+ <div class="brand-mark">
1256
+ <div class="brand-icon">S</div>
1257
+ <div>
1258
+ <div class="brand-text">SPARK</div>
1259
+ <div class="brand-sub">Sovereign Engine</div>
1260
+ </div>
1261
+ </div>
1262
+ <div class="ticker-strip" id="tickerStrip">
1263
+ <!-- Populated by JS -->
1264
+ </div>
1265
+ </div>
1266
+ <div class="topbar-actions">
1267
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-badge" title="Built with anycoder">Built with anycoder</a>
1268
+ <span class="metric-value sm" id="headerTime" style="font-size:13px; color: var(--text-muted);">--:--:--</span>
1269
+ </div>
1270
+ </header>
1271
+
1272
+ <!-- ═══════════════════════════════════════════
1273
+ MAIN CONTENT β€” Pages
1274
+ ═══════════════════════════════════════════ -->
1275
+ <main class="main-content" id="mainContent">
1276
+
1277
+ <!-- ═══════════════════════════════════
1278
+ PAGE: SPARK DASHBOARD
1279
+ ═══════════════════════════════════ -->
1280
+ <div class="page-section active" id="page-dashboard">
1281
+ <div class="dashboard-grid">
1282
+
1283
+ <!-- Alert Banner -->
1284
+ <div class="col-12" style="grid-column: 1 / -1;">
1285
+ <div class="alert info">
1286
+ <span class="alert-icon">β„Ή