Hugging Face's logo

Spaces:
Really-amin
/
Datasourceforcryptocurrency
Paused

App Files Community
Really-amin commited on
Commit
e859121
·
verified ·
1 Parent(s): 9beff7c

Upload admin.html

Browse files
Files changed (1) hide show
  1. admin.html +458 -717
admin.html CHANGED
@@ -1,765 +1,506 @@
1
  <!DOCTYPE html>
2
- <html lang="en" dir="ltr">
3
  <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <meta name="description" content="Advanced Cryptocurrency Dashboard with AI-Powered Analytics">
7
- <title>HTS Crypto Dashboard - Professional Trading & Analysis Platform</title>
8
-
9
- <!-- Fonts - Enhanced for High Resolution -->
10
- <link rel="preconnect" href="https://fonts.googleapis.com">
11
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
12
- <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
13
-
14
- <!-- Icons -->
15
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
16
-
17
- <!-- Static CSS Files -->
18
- <link rel="stylesheet" href="/static/css/base.css">
19
- <link rel="stylesheet" href="/static/css/design-tokens.css">
20
- <link rel="stylesheet" href="/static/css/design-system.css">
21
- <link rel="stylesheet" href="/static/css/components.css">
22
- <link rel="stylesheet" href="/static/css/dashboard.css">
23
- <link rel="stylesheet" href="/static/css/navigation.css">
24
- <link rel="stylesheet" href="/static/css/connection-status.css">
25
- <link rel="stylesheet" href="/static/css/toast.css">
26
- <link rel="stylesheet" href="/static/css/mobile-responsive.css">
27
- <link rel="stylesheet" href="/static/css/accessibility.css">
28
- <link rel="stylesheet" href="/static/css/enterprise-components.css">
29
-
30
- <!-- Main Styles -->
31
- <link rel="stylesheet" href="styles.css">
32
  </head>
33
- <body>
34
-
35
- <!-- ============================================= -->
36
- <!-- CONNECTION STATUS BAR -->
37
- <!-- ============================================= -->
38
- <div class="connection-status-bar" id="connection-status-bar">
39
- <div class="status-left">
40
- <span class="status-dot" id="ws-status-dot"></span>
41
- <span class="status-text" id="ws-status-text">Connecting...</span>
42
- </div>
43
-
44
- <div class="status-center">
45
- <span class="system-title">HTS Crypto Monitor</span>
46
- </div>
47
-
48
- <div class="status-right">
49
- <div class="online-users-widget">
50
- <i class="fas fa-users"></i>
51
- <span id="active-users-count">0</span>
52
- <span class="label-small">Online Users</span>
53
  </div>
54
- </div>
55
- </div>
56
-
57
- <!-- ============================================= -->
58
- <!-- MAIN HEADER -->
59
- <!-- ============================================= -->
60
- <header class="main-header">
61
- <div class="header-container">
62
- <div class="header-left">
63
- <div class="logo-section">
64
- <i class="fas fa-chart-line logo-icon"></i>
65
- <h1 class="app-title">HTS Dashboard</h1>
66
- </div>
67
- </div>
68
-
69
- <div class="header-center">
70
- <div class="search-box">
71
- <i class="fas fa-search"></i>
72
- <input type="text" placeholder="Search coins, news, analysis..." id="global-search">
73
- </div>
74
- </div>
75
-
76
- <div class="header-right">
77
- <button class="icon-btn" id="theme-toggle" title="Toggle Theme">
78
- <i class="fas fa-moon"></i>
79
- </button>
80
-
81
- <button class="icon-btn" id="notifications-btn" title="Notifications">
82
- <i class="fas fa-bell"></i>
83
- <span class="notification-badge" id="notification-count">0</span>
84
- </button>
85
-
86
- <button class="icon-btn" id="settings-btn" title="Settings">
87
- <i class="fas fa-cog"></i>
88
- </button>
89
- </div>
90
- </div>
91
- </header>
92
-
93
- <!-- ============================================= -->
94
- <!-- DESKTOP NAVIGATION -->
95
- <!-- ============================================= -->
96
- <nav class="desktop-nav">
97
- <ul class="nav-tabs">
98
- <li class="nav-tab">
99
- <button class="nav-tab-btn active" data-view="overview">
100
- <span class="nav-tab-icon"><i class="fas fa-home"></i></span>
101
- <span class="nav-tab-label">Overview</span>
102
  </button>
103
- </li>
104
- <li class="nav-tab">
105
- <button class="nav-tab-btn" data-view="market">
106
- <span class="nav-tab-icon"><i class="fas fa-chart-bar"></i></span>
107
- <span class="nav-tab-label">Market</span>
108
  </button>
109
- </li>
110
- <li class="nav-tab">
111
- <button class="nav-tab-btn" data-view="charts">
112
- <span class="nav-tab-icon"><i class="fas fa-chart-area"></i></span>
113
- <span class="nav-tab-label">Charts</span>
114
  </button>
115
- </li>
116
- <li class="nav-tab">
117
- <button class="nav-tab-btn" data-view="news">
118
- <span class="nav-tab-icon"><i class="fas fa-newspaper"></i></span>
119
- <span class="nav-tab-label">News</span>
120
  </button>
121
- </li>
122
- <li class="nav-tab">
123
- <button class="nav-tab-btn" data-view="ai">
124
- <span class="nav-tab-icon"><i class="fas fa-robot"></i></span>
125
- <span class="nav-tab-label">AI Analysis</span>
126
  </button>
127
- </li>
128
- <li class="nav-tab">
129
- <button class="nav-tab-btn" data-view="providers">
130
- <span class="nav-tab-icon"><i class="fas fa-plug"></i></span>
131
- <span class="nav-tab-label">Providers</span>
132
  </button>
133
- </li>
134
- <li class="nav-tab">
135
- <button class="nav-tab-btn" data-view="api-explorer">
136
- <span class="nav-tab-icon"><i class="fas fa-code"></i></span>
137
- <span class="nav-tab-label">API Explorer</span>
138
  </button>
139
- </li>
140
- </ul>
141
- </nav>
142
-
143
- <!-- ============================================= -->
144
- <!-- MOBILE NAVIGATION -->
145
- <!-- ============================================= -->
146
- <nav class="mobile-nav">
147
- <ul class="mobile-nav-tabs">
148
- <li class="mobile-nav-tab">
149
- <button class="mobile-nav-tab-btn active" data-view="overview">
150
- <span class="mobile-nav-tab-icon"><i class="fas fa-home"></i></span>
151
- <span class="mobile-nav-tab-label">Home</span>
152
  </button>
153
- </li>
154
- <li class="mobile-nav-tab">
155
- <button class="mobile-nav-tab-btn" data-view="market">
156
- <span class="mobile-nav-tab-icon"><i class="fas fa-chart-bar"></i></span>
157
- <span class="mobile-nav-tab-label">Market</span>
158
  </button>
159
- </li>
160
- <li class="mobile-nav-tab">
161
- <button class="mobile-nav-tab-btn" data-view="charts">
162
- <span class="mobile-nav-tab-icon"><i class="fas fa-chart-area"></i></span>
163
- <span class="mobile-nav-tab-label">Charts</span>
164
  </button>
165
- </li>
166
- <li class="mobile-nav-tab">
167
- <button class="mobile-nav-tab-btn" data-view="news">
168
- <span class="mobile-nav-tab-icon"><i class="fas fa-newspaper"></i></span>
169
- <span class="mobile-nav-tab-label">News</span>
170
- </button>
171
- </li>
172
- <li class="mobile-nav-tab">
173
- <button class="mobile-nav-tab-btn" data-view="ai">
174
- <span class="mobile-nav-tab-icon"><i class="fas fa-robot"></i></span>
175
- <span class="mobile-nav-tab-label">AI</span>
176
- </button>
177
- </li>
178
- </ul>
179
- </nav>
180
-
181
- <!-- ============================================= -->
182
- <!-- MAIN CONTENT -->
183
- <!-- ============================================= -->
184
- <main class="dashboard-main">
185
-
186
- <!-- OVERVIEW SECTION -->
187
- <section class="view-section active" id="view-overview">
188
- <!-- Market Overview - New Layout: 3 Main Metrics + 12 Coin Cards -->
189
- <div class="market-overview-layout">
190
- <!-- Left Column: 3 Main Market Metrics -->
191
- <div class="main-metrics-column">
192
- <div class="main-metric-card">
193
- <div class="main-metric-header">
194
- <div class="main-metric-icon">
195
- <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
196
- <line x1="12" y1="1" x2="12" y2="23" stroke="white" stroke-width="2.5"></line>
197
- <path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" stroke="white" stroke-width="2.5" fill="rgba(255,255,255,0.1)"></path>
198
- </svg>
199
- </div>
200
- <span class="main-metric-label">Total Market Cap</span>
 
 
 
 
 
 
 
 
 
 
 
201
  </div>
202
- <div class="main-metric-value" id="total-market-cap">$2.5T</div>
203
- <div class="main-metric-change positive" id="market-cap-change">
204
- <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
205
- <polyline points="18 15 12 9 6 15"></polyline>
206
- </svg>
207
- <span>+2.4%</span>
 
208
  </div>
209
  </div>
210
-
211
- <div class="main-metric-card">
212
- <div class="main-metric-header">
213
- <div class="main-metric-icon">
214
- <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
215
- <circle cx="12" cy="12" r="10" stroke="white" stroke-width="2.5" fill="rgba(255,255,255,0.1)"></circle>
216
- <path d="M12 6v6l4 2" stroke="white" stroke-width="2.5" stroke-linecap="round"></path>
217
- </svg>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
218
  </div>
219
- <span class="main-metric-label">24h Volume</span>
220
  </div>
221
- <div class="main-metric-value" id="volume-24h">$125B</div>
222
- <div class="main-metric-change negative" id="volume-change">
223
- <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
224
- <polyline points="6 9 12 15 18 9"></polyline>
225
- </svg>
226
- <span>-1.2%</span>
 
 
 
 
 
 
227
  </div>
228
  </div>
229
-
230
- <div class="main-metric-card">
231
- <div class="main-metric-header">
232
- <div class="main-metric-icon">
233
- <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
234
- <line x1="12" y1="2" x2="12" y2="22" stroke="white" stroke-width="2.5"></line>
235
- <path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" stroke="white" stroke-width="2.5" fill="rgba(255,255,255,0.1)"></path>
236
- <polyline points="9 12 12 9 15 12" stroke="white" stroke-width="2.5" fill="none"></polyline>
237
- </svg>
 
238
  </div>
239
- <span class="main-metric-label">Market Trend</span>
240
  </div>
241
- <div class="main-metric-value" id="market-trend">Bullish</div>
242
- <div class="main-metric-change positive" id="trend-change">
243
- <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
244
- <polyline points="18 15 12 9 6 15"></polyline>
245
- </svg>
246
- <span>+5.6%</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
247
  </div>
248
  </div>
249
- </div>
250
-
251
- <!-- Right Column: 12 Coin Cards Grid -->
252
- <div class="coins-grid-compact" id="coins-grid-compact">
253
- <!-- Coin cards will be inserted here dynamically -->
254
- </div>
255
- </div>
256
-
257
- <!-- Additional Stats (Hidden for now, can be shown if needed) -->
258
- <div class="stats-grid-compact" style="display: none;">
259
- <div class="stat-card-compact">
260
- <div class="stat-header-compact">
261
- <span class="stat-icon-compact"><i class="fas fa-dollar-sign"></i></span>
262
- <span class="stat-label-compact">Market Cap</span>
263
- </div>
264
- <div class="stat-value-compact" id="total-market-cap">$2.5T</div>
265
- <div class="stat-change-compact positive" id="market-cap-change">+2.4%</div>
266
- </div>
267
-
268
- <div class="stat-card-compact">
269
- <div class="stat-header-compact">
270
- <span class="stat-icon-compact"><i class="fab fa-bitcoin"></i></span>
271
- <span class="stat-label-compact">BTC Dominance</span>
272
- </div>
273
- <div class="stat-value-compact" id="btc-dominance">52.3%</div>
274
- <div class="stat-change-compact positive" id="btc-dominance-change">+0.8%</div>
275
- </div>
276
-
277
- <div class="stat-card-compact">
278
- <div class="stat-header-compact">
279
- <span class="stat-icon-compact"><i class="fab fa-ethereum"></i></span>
280
- <span class="stat-label-compact">ETH Dominance</span>
281
- </div>
282
- <div class="stat-value-compact" id="eth-dominance">18.5%</div>
283
- <div class="stat-change-compact negative" id="eth-dominance-change">-0.3%</div>
284
- </div>
285
-
286
- <div class="stat-card-compact">
287
- <div class="stat-header-compact">
288
- <span class="stat-icon-compact"><i class="fas fa-chart-line"></i></span>
289
- <span class="stat-label-compact">24h Volume</span>
290
- </div>
291
- <div class="stat-value-compact" id="volume-24h">$125B</div>
292
- <div class="stat-change-compact negative" id="volume-change">-1.2%</div>
293
- </div>
294
-
295
- <div class="stat-card-compact">
296
- <div class="stat-header-compact">
297
- <span class="stat-icon-compact"><i class="fas fa-fire"></i></span>
298
- <span class="stat-label-compact">Market Trend</span>
299
- </div>
300
- <div class="stat-value-compact" id="market-trend">Bullish</div>
301
- <div class="stat-change-compact positive" id="trend-change">+5.6%</div>
302
- </div>
303
-
304
- <div class="stat-card-compact">
305
- <div class="stat-header-compact">
306
- <span class="stat-icon-compact"><i class="fas fa-coins"></i></span>
307
- <span class="stat-label-compact">Active Coins</span>
308
- </div>
309
- <div class="stat-value-compact" id="active-cryptocurrencies">10,523</div>
310
- <div class="stat-change-compact neutral" id="active-change">+127</div>
311
- </div>
312
-
313
- <div class="stat-card-compact">
314
- <div class="stat-header-compact">
315
- <span class="stat-icon-compact"><i class="fas fa-exchange-alt"></i></span>
316
- <span class="stat-label-compact">Markets</span>
317
- </div>
318
- <div class="stat-value-compact" id="markets-count">847</div>
319
- <div class="stat-change-compact neutral" id="markets-change">+12</div>
320
- </div>
321
-
322
- <div class="stat-card-compact">
323
- <div class="stat-header-compact">
324
- <span class="stat-icon-compact"><i class="fas fa-brain"></i></span>
325
- <span class="stat-label-compact">Fear & Greed</span>
326
- </div>
327
- <div class="stat-value-compact" id="fear-greed-index">65</div>
328
- <div class="stat-change-compact positive" id="fear-greed-change">Greed</div>
329
- </div>
330
-
331
- <div class="stat-card-compact">
332
- <div class="stat-header-compact">
333
- <span class="stat-icon-compact"><i class="fas fa-arrow-up"></i></span>
334
- <span class="stat-label-compact">24h Change</span>
335
- </div>
336
- <div class="stat-value-compact" id="market-cap-change-24h">+2.4%</div>
337
- <div class="stat-change-compact positive" id="market-change-24h">$58.2B</div>
338
- </div>
339
-
340
- <div class="stat-card-compact">
341
- <div class="stat-header-compact">
342
- <span class="stat-icon-compact"><i class="fas fa-chart-pie"></i></span>
343
- <span class="stat-label-compact">Top 10 Share</span>
344
- </div>
345
- <div class="stat-value-compact" id="top10-share">78.5%</div>
346
- <div class="stat-change-compact neutral" id="top10-change">-0.2%</div>
347
- </div>
348
-
349
- <div class="stat-card-compact">
350
- <div class="stat-header-compact">
351
- <span class="stat-icon-compact"><i class="fas fa-trophy"></i></span>
352
- <span class="stat-label-compact">BTC Price</span>
353
- </div>
354
- <div class="stat-value-compact" id="btc-price">$43,250</div>
355
- <div class="stat-change-compact positive" id="btc-price-change">+1.8%</div>
356
- </div>
357
-
358
- <div class="stat-card-compact">
359
- <div class="stat-header-compact">
360
- <span class="stat-icon-compact"><i class="fas fa-gem"></i></span>
361
- <span class="stat-label-compact">ETH Price</span>
362
- </div>
363
- <div class="stat-value-compact" id="eth-price">$2,650</div>
364
- <div class="stat-change-compact positive" id="eth-price-change">+2.1%</div>
365
- </div>
366
- </div>
367
 
368
- <!-- Sentiment Analysis -->
369
- <div class="sentiment-section">
370
- <div class="section-header">
371
- <h2>Market Sentiment</h2>
372
- <span class="sentiment-badge">
373
- <i class="fas fa-brain"></i>
374
- AI Powered
375
- </span>
376
- </div>
377
-
378
- <div class="sentiment-cards">
379
- <div class="sentiment-item bullish">
380
- <div class="sentiment-item-header">
381
- <div class="sentiment-icon">
382
- <i class="fas fa-arrow-up"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
383
  </div>
384
- <span class="sentiment-label">Bullish</span>
385
- <span class="sentiment-percent" id="bullish-percent">45%</span>
386
  </div>
387
- <div class="sentiment-progress">
388
- <div class="sentiment-progress-bar bullish" style="width: 45%"></div>
 
 
 
 
 
 
 
 
 
 
 
389
  </div>
 
 
390
  </div>
391
-
392
- <div class="sentiment-item neutral">
393
- <div class="sentiment-item-header">
394
- <div class="sentiment-icon">
395
- <i class="fas fa-minus"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
396
  </div>
397
- <span class="sentiment-label">Neutral</span>
398
- <span class="sentiment-percent" id="neutral-percent">30%</span>
399
  </div>
400
- <div class="sentiment-progress">
401
- <div class="sentiment-progress-bar neutral" style="width: 30%"></div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
402
  </div>
403
  </div>
404
-
405
- <div class="sentiment-item bearish">
406
- <div class="sentiment-item-header">
407
- <div class="sentiment-icon">
408
- <i class="fas fa-arrow-down"></i>
 
 
 
 
 
 
 
 
 
409
  </div>
410
- <span class="sentiment-label">Bearish</span>
411
- <span class="sentiment-percent" id="bearish-percent">25%</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
412
  </div>
413
- <div class="sentiment-progress">
414
- <div class="sentiment-progress-bar bearish" style="width: 25%"></div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
415
  </div>
416
  </div>
417
- </div>
418
- </div>
419
 
420
- <!-- Top Coins Table -->
421
- <div class="table-section">
422
- <div class="section-header">
423
- <h2>Top Cryptocurrencies</h2>
424
- <button class="btn-secondary" id="refresh-coins">
425
- <i class="fas fa-sync"></i>
426
- Refresh
427
- </button>
428
- </div>
429
-
430
- <div class="table-container">
431
- <table class="data-table">
432
- <thead>
433
- <tr>
434
- <th>Rank</th>
435
- <th>Name</th>
436
- <th>Price</th>
437
- <th>24h Change</th>
438
- <th>Volume</th>
439
- <th>Market Cap</th>
440
- <th>Actions</th>
441
- </tr>
442
- </thead>
443
- <tbody id="coins-table-body">
444
- <tr>
445
- <td colspan="7" class="loading-cell">
446
- <div class="loader"></div>
447
- Loading...
448
- </td>
449
- </tr>
450
- </tbody>
451
- </table>
452
- </div>
453
- </div>
454
- </section>
455
-
456
- <!-- MARKET SECTION -->
457
- <section class="view-section" id="view-market">
458
- <div class="section-header">
459
- <h2>Cryptocurrency Market</h2>
460
- <div class="filter-group">
461
- <select class="filter-select" id="market-filter">
462
- <option value="all">All</option>
463
- <option value="gainers">Top Gainers</option>
464
- <option value="losers">Top Losers</option>
465
- <option value="trending">Trending</option>
466
- </select>
467
- <select class="filter-select" id="market-sort">
468
- <option value="market_cap">Market Cap</option>
469
- <option value="volume">Volume</option>
470
- <option value="price">Price</option>
471
- <option value="change">24h Change</option>
472
- </select>
473
- </div>
474
- </div>
475
-
476
- <div class="market-grid" id="market-grid">
477
- <!-- Market cards will be inserted here -->
478
- </div>
479
- </section>
480
-
481
- <!-- CHARTS SECTION -->
482
- <section class="view-section" id="view-charts">
483
- <div class="section-header">
484
- <h2>Advanced Charts</h2>
485
- <div class="chart-controls">
486
- <select class="filter-select" id="chart-symbol">
487
- <option value="BTCUSDT">BTC/USDT</option>
488
- <option value="ETHUSDT">ETH/USDT</option>
489
- <option value="BNBUSDT">BNB/USDT</option>
490
- <option value="ADAUSDT">ADA/USDT</option>
491
- <option value="SOLUSDT">SOL/USDT</option>
492
- </select>
493
- <select class="filter-select" id="chart-interval">
494
- <option value="1m">1 Minute</option>
495
- <option value="5m">5 Minutes</option>
496
- <option value="15m">15 Minutes</option>
497
- <option value="1h" selected>1 Hour</option>
498
- <option value="4h">4 Hours</option>
499
- <option value="1d">1 Day</option>
500
- </select>
501
- </div>
502
- </div>
503
-
504
- <div class="chart-container">
505
- <div id="tradingview-chart" class="tradingview-widget"></div>
506
- </div>
507
-
508
- <div class="indicators-panel">
509
- <h3>Active Indicators</h3>
510
- <div class="indicators-grid" id="indicators-grid">
511
- <!-- Indicators will be inserted here -->
512
- </div>
513
- </div>
514
- </section>
515
-
516
- <!-- NEWS SECTION -->
517
- <section class="view-section" id="view-news">
518
- <div class="section-header">
519
- <h2>Latest News & Analysis</h2>
520
- <div class="filter-group">
521
- <input type="text" class="filter-input" id="news-search" placeholder="Search news...">
522
- <select class="filter-select" id="news-filter">
523
- <option value="all">All News</option>
524
- <option value="bitcoin">Bitcoin</option>
525
- <option value="ethereum">Ethereum</option>
526
- <option value="defi">DeFi</option>
527
- <option value="nft">NFT</option>
528
- <option value="regulation">Regulation</option>
529
- </select>
530
- </div>
531
- </div>
532
-
533
- <div class="news-grid" id="news-grid">
534
- <!-- News cards will be inserted here -->
535
- </div>
536
- </section>
537
 
538
- <!-- AI SECTION -->
539
- <section class="view-section" id="view-ai">
540
- <div class="ai-header">
541
- <h2>AI-Powered Analysis</h2>
542
- <p>Advanced analytics powered by Hugging Face models</p>
543
- </div>
544
-
545
- <div class="ai-tools-grid">
546
- <div class="ai-tool-card">
547
- <div class="ai-tool-icon">
548
- <i class="fas fa-comment-dots"></i>
549
- </div>
550
- <h3>Sentiment Analysis</h3>
551
- <p>Analyze market sentiment from news and social media</p>
552
- <button class="btn-primary" id="sentiment-analysis-btn">
553
- <i class="fas fa-play"></i>
554
- Run Analysis
555
- </button>
556
- </div>
557
-
558
- <div class="ai-tool-card">
559
- <div class="ai-tool-icon">
560
- <i class="fas fa-file-alt"></i>
561
- </div>
562
- <h3>News Summarization</h3>
563
- <p>Automatically summarize long news articles with AI</p>
564
- <button class="btn-primary" id="news-summary-btn">
565
- <i class="fas fa-play"></i>
566
- Summarize
567
- </button>
568
- </div>
569
-
570
- <div class="ai-tool-card">
571
- <div class="ai-tool-icon">
572
- <i class="fas fa-chart-line"></i>
573
- </div>
574
- <h3>Price Prediction</h3>
575
- <p>Predict price trends using ML models</p>
576
- <button class="btn-primary" id="price-prediction-btn">
577
- <i class="fas fa-play"></i>
578
- Predict
579
- </button>
580
- </div>
581
-
582
- <div class="ai-tool-card">
583
- <div class="ai-tool-icon">
584
- <i class="fas fa-brain"></i>
585
- </div>
586
- <h3>Pattern Detection</h3>
587
- <p>Detect candlestick patterns and technical analysis</p>
588
- <button class="btn-primary" id="pattern-detection-btn">
589
- <i class="fas fa-play"></i>
590
- Detect Patterns
591
- </button>
592
- </div>
593
- </div>
594
-
595
- <div class="ai-results" id="ai-results" style="display: none;">
596
- <div class="section-header">
597
- <h3>Analysis Results</h3>
598
- <button class="btn-ghost" id="clear-results">
599
- <i class="fas fa-times"></i>
600
- </button>
601
- </div>
602
- <div class="ai-results-content" id="ai-results-content">
603
- <!-- AI results will be shown here -->
604
- </div>
605
- </div>
606
- </section>
607
-
608
- <!-- PROVIDERS SECTION -->
609
- <section class="view-section" id="view-providers">
610
- <div class="section-header">
611
- <h2>Data Providers</h2>
612
- <button class="btn-secondary" id="refresh-providers">
613
- <i class="fas fa-sync"></i>
614
- Refresh
615
- </button>
616
- </div>
617
-
618
- <div class="providers-grid" id="providers-grid">
619
- <!-- Provider cards will be inserted here -->
620
- </div>
621
- </section>
622
-
623
- <!-- API EXPLORER SECTION -->
624
- <section class="view-section" id="view-api-explorer">
625
- <div class="section-header">
626
- <h2>API Explorer</h2>
627
- <button class="btn-secondary" id="api-docs-link">
628
- <i class="fas fa-book"></i>
629
- View Docs
630
- </button>
631
- </div>
632
-
633
- <div class="api-explorer-container">
634
- <div class="api-endpoints-list" id="api-endpoints-list">
635
- <!-- API endpoints will be listed here -->
636
- </div>
637
- <div class="api-response-panel" id="api-response-panel">
638
- <h3>Response</h3>
639
- <pre id="api-response-content">Select an endpoint to test...</pre>
640
- </div>
641
- </div>
642
- </section>
643
-
644
- </main>
645
-
646
- <!-- ============================================= -->
647
- <!-- FLOATING STATS CARD -->
648
- <!-- ============================================= -->
649
- <div class="floating-stats-card" id="floating-stats">
650
- <div class="stats-card-header">
651
- <h3>System Stats</h3>
652
- <button class="minimize-btn" id="minimize-stats">
653
- <i class="fas fa-minus"></i>
654
- </button>
655
- </div>
656
- <div class="stats-card-body">
657
- <div class="stats-mini-grid">
658
- <div class="stat-mini">
659
- <div class="stat-mini-label">API Status</div>
660
- <div class="stat-mini-value" id="api-status">
661
- <span class="status-dot active"></span>
662
- Online
663
  </div>
664
- </div>
665
- <div class="stat-mini">
666
- <div class="stat-mini-label">Ping</div>
667
- <div class="stat-mini-value" id="ping-value">--</div>
668
- </div>
669
- <div class="stat-mini">
670
- <div class="stat-mini-label">Last Update</div>
671
- <div class="stat-mini-value" id="last-update">--</div>
672
- </div>
673
- </div>
674
- </div>
675
- </div>
676
 
677
- <!-- ============================================= -->
678
- <!-- NOTIFICATIONS PANEL -->
679
- <!-- ============================================= -->
680
- <div class="notifications-panel" id="notifications-panel">
681
- <div class="notifications-header">
682
- <h3>Notifications</h3>
683
- <button class="btn-ghost" id="close-notifications">
684
- <i class="fas fa-times"></i>
685
- </button>
686
- </div>
687
- <div class="notifications-body" id="notifications-body">
688
- <!-- Notifications will be inserted here -->
689
- </div>
690
- </div>
 
 
 
691
 
692
- <!-- ============================================= -->
693
- <!-- SETTINGS MODAL -->
694
- <!-- ============================================= -->
695
- <div class="settings-modal" id="settings-modal">
696
- <div class="modal-content">
697
- <div class="modal-header">
698
- <h3>Settings</h3>
699
- <button class="btn-ghost" id="close-settings">
700
- <i class="fas fa-times"></i>
701
- </button>
702
- </div>
703
- <div class="modal-body">
704
- <div class="settings-section">
705
- <h4>Display</h4>
706
- <label>
707
- <input type="checkbox" id="enable-animations" checked>
708
- Enable Animations
709
- </label>
710
- <label>
711
- <input type="checkbox" id="enable-sounds">
712
- Enable Sounds
713
- </label>
714
- </div>
715
- <div class="settings-section">
716
- <h4>Updates</h4>
717
- <label>
718
- Update Interval (seconds)
719
- <input type="number" id="update-interval" value="30" min="10" max="300">
720
- </label>
721
- </div>
722
- </div>
723
- </div>
724
- </div>
725
 
726
- <!-- ============================================= -->
727
- <!-- LOADING OVERLAY -->
728
- <!-- ============================================= -->
729
- <div class="loading-overlay" id="loading-overlay">
730
- <div class="loading-spinner"></div>
731
- <div class="loading-text">Loading...</div>
732
  </div>
733
 
734
- <!-- ============================================= -->
735
- <!-- SCRIPTS -->
736
- <!-- ============================================= -->
737
- <!-- Configuration -->
738
- <script src="config.js"></script>
739
-
740
- <!-- Static JavaScript Files -->
741
- <script src="/static/js/api-client.js"></script>
742
- <script src="/static/js/websocket-client.js"></script>
743
- <script src="/static/js/theme-manager.js"></script>
744
- <script src="/static/js/tabs.js"></script>
745
- <script src="/static/js/toast.js"></script>
746
- <script src="/static/js/accessibility.js"></script>
747
- <script src="/static/js/uiUtils.js"></script>
748
- <script src="/static/js/errorHelper.js"></script>
749
-
750
- <!-- View Controllers -->
751
- <script src="/static/js/overviewView.js"></script>
752
- <script src="/static/js/marketView.js"></script>
753
- <script src="/static/js/newsView.js"></script>
754
- <script src="/static/js/aiAdvisorView.js"></script>
755
- <script src="/static/js/providersView.js"></script>
756
- <script src="/static/js/apiExplorerView.js"></script>
757
- <script src="/static/js/chartLabView.js"></script>
758
-
759
- <!-- Main Application -->
760
- <script src="/static/js/dashboard.js"></script>
761
-
762
- <!-- Main App Initialization -->
763
- <script src="app.js" type="module"></script>
764
  </body>
765
  </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>Crypto Intelligence Hub - HF Space</title>
7
+ <link rel="stylesheet" href="static/css/design-tokens.css" />
8
+ <link rel="stylesheet" href="static/css/design-system.css" />
9
+ <link rel="stylesheet" href="static/css/dashboard.css" />
10
+ <link rel="stylesheet" href="static/css/pro-dashboard.css" />
11
+ <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js" defer></script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
12
  </head>
13
+ <body data-theme="dark">
14
+ <div class="app-shell">
15
+ <!-- Sidebar Navigation -->
16
+ <aside class="sidebar">
17
+ <div class="brand">
18
+ <strong>Crypto Intelligence Hub</strong>
19
+ <span class="env-pill">
20
+ <svg width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
21
+ <path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" stroke-width="1.5" />
22
+ <path d="M2 17L12 22L22 17" stroke="currentColor" stroke-width="1.5" />
23
+ <path d="M2 12L12 17L22 12" stroke="currentColor" stroke-width="1.5" />
24
+ </svg>
25
+ HF Space
26
+ </span>
 
 
 
 
 
 
27
  </div>
28
+ <nav class="nav">
29
+ <button class="nav-button active" data-nav="page-overview">
30
+ <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z" fill="currentColor"/></svg>
31
+ Overview
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
32
  </button>
33
+ <button class="nav-button" data-nav="page-market">
34
+ <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M3 17l6-6 4 4 8-8" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
35
+ Market
 
 
36
  </button>
37
+ <button class="nav-button" data-nav="page-chart">
38
+ <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M3 3v18h18" stroke="currentColor" stroke-width="2"/><path d="M7 10l4-4 4 4 6-6" stroke="currentColor" stroke-width="2"/></svg>
39
+ Chart Lab
 
 
40
  </button>
41
+ <button class="nav-button" data-nav="page-ai">
42
+ <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="3" fill="currentColor"/><path d="M12 2v4m0 12v4M4.93 4.93l2.83 2.83m8.48 8.48l2.83 2.83M2 12h4m12 0h4M4.93 19.07l2.83-2.83m8.48-8.48l2.83-2.83" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
43
+ AI Advisor
 
 
44
  </button>
45
+ <button class="nav-button" data-nav="page-news">
46
+ <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10l6 6v8a2 2 0 01-2 2z" stroke="currentColor" stroke-width="2"/><path d="M7 10h6m-6 4h8" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
47
+ News
 
 
48
  </button>
49
+ <button class="nav-button" data-nav="page-providers">
50
+ <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
51
+ Providers
 
 
52
  </button>
53
+ <button class="nav-button" data-nav="page-datasets">
54
+ <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M4 7h16M4 12h16M4 17h16" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
55
+ Datasets & Models
 
 
56
  </button>
57
+ <button class="nav-button" data-nav="page-api">
58
+ <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" fill="currentColor"/></svg>
59
+ API Explorer
 
 
 
 
 
 
 
 
 
 
60
  </button>
61
+ <button class="nav-button" data-nav="page-debug">
62
+ <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
63
+ Diagnostics
 
 
64
  </button>
65
+ <button class="nav-button" data-nav="page-settings">
66
+ <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="2"/><path d="M12 1v6m0 6v6M5 5l4 4m6 6l4 4M1 12h6m6 0h6M5 19l4-4m6-6l4-4" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
67
+ Settings
 
 
68
  </button>
69
+ </nav>
70
+ <div class="sidebar-footer">
71
+ <small>
72
+ Crypto Intelligence Hub<br />
73
+ <strong>10+ HF Models</strong> • <strong>14 Datasets</strong><br />
74
+ Real-time data • Ensemble sentiment
75
+ </small>
76
+ </div>
77
+ </aside>
78
+
79
+ <!-- Main Content Area -->
80
+ <main class="main-area">
81
+ <!-- Top Bar with Status -->
82
+ <header class="topbar">
83
+ <div>
84
+ <h1>Crypto Intelligence Dashboard</h1>
85
+ <p class="text-muted">Live market data, AI-powered sentiment analysis, and comprehensive crypto intelligence</p>
86
+ </div>
87
+ <div class="status-group">
88
+ <div class="status-pill" data-api-health data-state="warn">
89
+ <span class="status-dot"></span>
90
+ <span>checking</span>
91
+ </div>
92
+ <div class="status-pill" data-ws-status data-state="warn">
93
+ <span class="status-dot"></span>
94
+ <span>connecting</span>
95
+ </div>
96
+ </div>
97
+ </header>
98
+
99
+ <div class="page-container">
100
+ <!-- ========== OVERVIEW PAGE ========== -->
101
+ <section id="page-overview" class="page active">
102
+ <div class="section-header">
103
+ <h2 class="section-title">Global Overview</h2>
104
+ <span class="chip">Powered by /api/market/stats</span>
105
+ </div>
106
+
107
+ <!-- Market Stats Cards -->
108
+ <div class="stats-grid" data-overview-stats>
109
+ <div class="glass-card stat-card">
110
+ <div class="stat-label">Total Market Cap</div>
111
+ <div class="stat-value">Loading...</div>
112
+ </div>
113
+ <div class="glass-card stat-card">
114
+ <div class="stat-label">24h Volume</div>
115
+ <div class="stat-value">Loading...</div>
116
  </div>
117
+ <div class="glass-card stat-card">
118
+ <div class="stat-label">BTC Dominance</div>
119
+ <div class="stat-value">Loading...</div>
120
+ </div>
121
+ <div class="glass-card stat-card">
122
+ <div class="stat-label">Market Sentiment</div>
123
+ <div class="stat-value">Loading...</div>
124
  </div>
125
  </div>
126
+
127
+ <div class="grid-two">
128
+ <!-- Top Coins Table -->
129
+ <div class="glass-card">
130
+ <div class="section-header">
131
+ <h3>Top Coins</h3>
132
+ <span class="text-muted">By market cap</span>
133
+ </div>
134
+ <div class="table-wrapper">
135
+ <table>
136
+ <thead>
137
+ <tr>
138
+ <th>#</th>
139
+ <th>Symbol</th>
140
+ <th>Name</th>
141
+ <th>Price</th>
142
+ <th>24h %</th>
143
+ <th>Volume</th>
144
+ <th>Market Cap</th>
145
+ </tr>
146
+ </thead>
147
+ <tbody data-top-coins-body>
148
+ <tr><td colspan="7" style="text-align:center;padding:2rem;">Loading top coins...</td></tr>
149
+ </tbody>
150
+ </table>
151
  </div>
 
152
  </div>
153
+
154
+ <!-- Sentiment Chart -->
155
+ <div class="glass-card">
156
+ <div class="section-header">
157
+ <h3>Global Sentiment</h3>
158
+ <span class="text-muted">Ensemble HF models</span>
159
+ </div>
160
+ <canvas id="sentiment-chart" height="220"></canvas>
161
+ <div style="margin-top:1rem;font-size:0.875rem;color:var(--text-secondary);">
162
+ <strong>Models used:</strong> CryptoBERT, FinBERT, Twitter Sentiment<br>
163
+ <strong>Method:</strong> Majority voting with confidence scoring
164
+ </div>
165
  </div>
166
  </div>
167
+ </section>
168
+
169
+ <!-- ========== MARKET PAGE ========== -->
170
+ <section id="page-market" class="page">
171
+ <div class="section-header">
172
+ <h2 class="section-title">Market Intelligence</h2>
173
+ <div class="controls-bar">
174
+ <div class="input-chip">
175
+ <svg viewBox="0 0 24 24" width="16" height="16"><path d="M21 20l-5.6-5.6A6.5 6.5 0 1 0 15.4 16L21 21zM5 10.5a5.5 5.5 0 1 1 11 0a5.5 5.5 0 0 1-11 0z" fill="currentColor"/></svg>
176
+ <input type="text" placeholder="Search symbol" data-market-search />
177
  </div>
178
+ <button class="ghost" data-refresh-market>Refresh</button>
179
  </div>
180
+ </div>
181
+
182
+ <div class="glass-card">
183
+ <div class="table-wrapper">
184
+ <table>
185
+ <thead>
186
+ <tr>
187
+ <th>#</th>
188
+ <th>Symbol</th>
189
+ <th>Name</th>
190
+ <th>Price</th>
191
+ <th>24h %</th>
192
+ <th>Volume</th>
193
+ <th>Market Cap</th>
194
+ <th>Actions</th>
195
+ </tr>
196
+ </thead>
197
+ <tbody data-market-body>
198
+ <tr><td colspan="8" style="text-align:center;padding:2rem;">Loading market data...</td></tr>
199
+ </tbody>
200
+ </table>
201
  </div>
202
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
203
 
204
+ <!-- Coin Detail Drawer -->
205
+ <div class="drawer" data-market-drawer style="display:none;">
206
+ <button class="ghost" data-close-drawer>Close</button>
207
+ <h3 data-drawer-symbol>—</h3>
208
+ <div data-drawer-stats></div>
209
+ <div class="glass-card" data-chart-wrapper>
210
+ <canvas id="market-detail-chart" height="180"></canvas>
211
+ </div>
212
+ <div class="glass-card">
213
+ <h4>AI Sentiment Analysis</h4>
214
+ <div data-drawer-sentiment></div>
215
+ </div>
216
+ </div>
217
+ </section>
218
+
219
+ <!-- ========== CHART LAB PAGE ========== -->
220
+ <section id="page-chart" class="page">
221
+ <div class="section-header">
222
+ <h2 class="section-title">Chart Lab</h2>
223
+ <div class="controls-bar">
224
+ <select data-chart-symbol>
225
+ <option value="BTC">Bitcoin (BTC)</option>
226
+ <option value="ETH">Ethereum (ETH)</option>
227
+ <option value="SOL">Solana (SOL)</option>
228
+ <option value="BNB">BNB</option>
229
+ <option value="XRP">Ripple (XRP)</option>
230
+ <option value="ADA">Cardano (ADA)</option>
231
+ </select>
232
+ <div class="input-chip">
233
+ <button class="ghost active" data-chart-timeframe="7d">7D</button>
234
+ <button class="ghost" data-chart-timeframe="30d">30D</button>
235
+ <button class="ghost" data-chart-timeframe="90d">90D</button>
236
  </div>
 
 
237
  </div>
238
+ </div>
239
+
240
+ <div class="glass-card">
241
+ <canvas id="chart-lab-canvas" height="300"></canvas>
242
+ </div>
243
+
244
+ <div class="glass-card">
245
+ <h4>Technical Analysis</h4>
246
+ <div class="controls-bar">
247
+ <label><input type="checkbox" data-indicator value="MA20" checked /> MA 20</label>
248
+ <label><input type="checkbox" data-indicator value="MA50" /> MA 50</label>
249
+ <label><input type="checkbox" data-indicator value="RSI" /> RSI</label>
250
+ <label><input type="checkbox" data-indicator value="Volume" /> Volume</label>
251
  </div>
252
+ <button class="primary" data-run-analysis>🤖 Analyze with AI</button>
253
+ <div data-ai-insights class="ai-insights" style="margin-top:1rem;"></div>
254
  </div>
255
+ </section>
256
+
257
+ <!-- ========== AI ADVISOR PAGE ========== -->
258
+ <section id="page-ai" class="page">
259
+ <div class="section-header">
260
+ <h2 class="section-title">AI-Powered Sentiment & Advisory</h2>
261
+ <span class="chip">Ensemble: CryptoBERT + FinBERT + Social</span>
262
+ </div>
263
+
264
+ <div class="glass-card">
265
+ <h4>Sentiment Analysis</h4>
266
+ <form data-sentiment-form>
267
+ <label>Text to Analyze
268
+ <textarea name="text" rows="4" placeholder="Enter crypto-related text, news headline, or social media post for sentiment analysis..."></textarea>
269
+ </label>
270
+ <button class="primary" type="submit">🧠 Analyze Sentiment</button>
271
+ </form>
272
+ <div data-sentiment-result style="margin-top:1rem;"></div>
273
+ </div>
274
+
275
+ <div class="glass-card" style="margin-top:1.5rem;">
276
+ <h4>AI Query Interface</h4>
277
+ <form data-query-form>
278
+ <label>Ask a Question
279
+ <textarea name="query" rows="3" placeholder="e.g., What is the current Bitcoin price? or Analyze Ethereum trend"></textarea>
280
+ </label>
281
+ <button class="primary" type="submit">🔍 Submit Query</button>
282
+ </form>
283
+ <div data-query-result style="margin-top:1rem;"></div>
284
+ </div>
285
+
286
+ <div class="inline-message inline-info">
287
+ ⚠️ AI-generated outputs are experimental and should not be considered financial advice.
288
+ </div>
289
+ </section>
290
+
291
+ <!-- ========== NEWS PAGE ========== -->
292
+ <section id="page-news" class="page">
293
+ <div class="section-header">
294
+ <h2 class="section-title">News & Headlines</h2>
295
+ <span class="chip">With AI sentiment analysis</span>
296
+ </div>
297
+
298
+ <div class="controls-bar">
299
+ <input type="text" placeholder="Search headlines..." data-news-search />
300
+ <input type="text" placeholder="Filter by symbol (e.g., BTC)" data-news-symbol />
301
+ <button class="ghost" data-refresh-news>Refresh</button>
302
+ </div>
303
+
304
+ <div class="glass-card">
305
+ <div class="table-wrapper">
306
+ <table>
307
+ <thead>
308
+ <tr>
309
+ <th>Title</th>
310
+ <th>Source</th>
311
+ <th>Symbols</th>
312
+ <th>Sentiment</th>
313
+ <th>Time</th>
314
+ <th>Actions</th>
315
+ </tr>
316
+ </thead>
317
+ <tbody data-news-body>
318
+ <tr><td colspan="6" style="text-align:center;padding:2rem;">Loading news...</td></tr>
319
+ </tbody>
320
+ </table>
321
+ </div>
322
+ </div>
323
+ </section>
324
+
325
+ <!-- ========== PROVIDERS PAGE ========== -->
326
+ <section id="page-providers" class="page">
327
+ <div class="section-header">
328
+ <h2 class="section-title">API Providers</h2>
329
+ <span class="chip">95+ data sources</span>
330
+ </div>
331
+
332
+ <div class="glass-card">
333
+ <div class="table-wrapper">
334
+ <table>
335
+ <thead>
336
+ <tr>
337
+ <th>Provider</th>
338
+ <th>Category</th>
339
+ <th>Type</th>
340
+ <th>Status</th>
341
+ <th>Response Time</th>
342
+ </tr>
343
+ </thead>
344
+ <tbody data-providers-body>
345
+ <tr><td colspan="5" style="text-align:center;padding:2rem;">Loading providers...</td></tr>
346
+ </tbody>
347
+ </table>
348
+ </div>
349
+ </div>
350
+ </section>
351
+
352
+ <!-- ========== DATASETS & MODELS PAGE ========== -->
353
+ <section id="page-datasets" class="page">
354
+ <div class="section-header">
355
+ <h2 class="section-title">HuggingFace Datasets & Models</h2>
356
+ </div>
357
+
358
+ <div class="grid-two">
359
+ <!-- Datasets -->
360
+ <div class="glass-card">
361
+ <h4>📊 Crypto Datasets (14+)</h4>
362
+ <div class="table-wrapper">
363
+ <table>
364
+ <thead>
365
+ <tr>
366
+ <th>Dataset</th>
367
+ <th>Category</th>
368
+ <th>Actions</th>
369
+ </tr>
370
+ </thead>
371
+ <tbody data-datasets-body>
372
+ <tr><td colspan="3" style="text-align:center;padding:1rem;">Loading...</td></tr>
373
+ </tbody>
374
+ </table>
375
  </div>
 
 
376
  </div>
377
+
378
+ <!-- Models -->
379
+ <div class="glass-card">
380
+ <h4>🤖 AI Models (10+)</h4>
381
+ <div class="table-wrapper">
382
+ <table>
383
+ <thead>
384
+ <tr>
385
+ <th>Model</th>
386
+ <th>Task</th>
387
+ <th>Status</th>
388
+ </tr>
389
+ </thead>
390
+ <tbody data-models-body>
391
+ <tr><td colspan="3" style="text-align:center;padding:1rem;">Loading...</td></tr>
392
+ </tbody>
393
+ </table>
394
+ </div>
395
  </div>
396
  </div>
397
+
398
+ <!-- Model Test Form -->
399
+ <div class="glass-card" style="margin-top:1.5rem;">
400
+ <h4>🧪 Test a Model</h4>
401
+ <form data-model-test-form>
402
+ <div class="grid-two">
403
+ <label>Model
404
+ <select name="model" data-model-select>
405
+ <option value="">Select a model...</option>
406
+ </select>
407
+ </label>
408
+ <label>Input Text
409
+ <textarea name="input" rows="3" placeholder="Enter text to test the model..."></textarea>
410
+ </label>
411
  </div>
412
+ <button class="primary" type="submit">Run Test</button>
413
+ </form>
414
+ <div data-model-test-output style="margin-top:1rem;"></div>
415
+ </div>
416
+ </section>
417
+
418
+ <!-- ========== API EXPLORER PAGE ========== -->
419
+ <section id="page-api" class="page">
420
+ <div class="section-header">
421
+ <h2 class="section-title">API Explorer</h2>
422
+ <span class="chip">15+ endpoints</span>
423
+ </div>
424
+
425
+ <div class="glass-card">
426
+ <h4>Available Endpoints</h4>
427
+ <div data-api-endpoints style="display:grid;gap:0.5rem;margin-top:1rem;">
428
+ <!-- Will be populated by JS -->
429
  </div>
430
+ </div>
431
+ </section>
432
+
433
+ <!-- ========== DIAGNOSTICS PAGE ========== -->
434
+ <section id="page-debug" class="page">
435
+ <div class="section-header">
436
+ <h2 class="section-title">System Diagnostics</h2>
437
+ </div>
438
+
439
+ <div class="grid-two">
440
+ <div class="glass-card">
441
+ <h4>Health Status</h4>
442
+ <div data-health-info>Checking...</div>
443
+ </div>
444
+
445
+ <div class="glass-card">
446
+ <h4>WebSocket Status</h4>
447
+ <div data-ws-info>Checking...</div>
448
  </div>
449
  </div>
 
 
450
 
451
+ <div class="glass-card" style="margin-top:1.5rem;">
452
+ <h4>Request Logs</h4>
453
+ <div data-request-logs style="max-height:400px;overflow-y:auto;font-family:monospace;font-size:0.875rem;">
454
+ <!-- Populated by JS -->
455
+ </div>
456
+ </div>
457
+ </section>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
458
 
459
+ <!-- ========== SETTINGS PAGE ========== -->
460
+ <section id="page-settings" class="page">
461
+ <div class="section-header">
462
+ <h2 class="section-title">Settings</h2>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
463
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
464
 
465
+ <div class="glass-card">
466
+ <h4>Display Settings</h4>
467
+ <div class="grid-two">
468
+ <label class="input-chip">Dark Theme
469
+ <div class="toggle">
470
+ <input type="checkbox" data-theme-toggle checked />
471
+ <span></span>
472
+ </div>
473
+ </label>
474
+ <label class="input-chip">Compact Layout
475
+ <div class="toggle">
476
+ <input type="checkbox" data-layout-toggle />
477
+ <span></span>
478
+ </div>
479
+ </label>
480
+ </div>
481
+ </div>
482
 
483
+ <div class="glass-card" style="margin-top:1.5rem;">
484
+ <h4>Refresh Intervals</h4>
485
+ <div class="grid-two">
486
+ <label>Market Data (seconds)
487
+ <input type="number" min="10" step="5" value="30" data-market-interval />
488
+ </label>
489
+ <label>News Feed (seconds)
490
+ <input type="number" min="30" step="10" value="60" data-news-interval />
491
+ </label>
492
+ </div>
493
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
494
 
495
+ <div class="inline-message inline-info" style="margin-top:1.5rem;">
496
+ Settings are stored locally in your browser.
497
+ </div>
498
+ </section>
499
+ </div>
500
+ </main>
501
  </div>
502
 
503
+ <!-- Load App JS as ES6 Module -->
504
+ <script type="module" src="static/js/app.js"></script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
505
  </body>
506
  </html>