Hugging Face's logo

Spaces:
Really-amin
/
Datasourceforcryptocurrency
Paused

App Files Community
Really-amin commited on
Commit
273454d
·
verified ·
1 Parent(s): 96af7c9

Update admin.html

Browse files
Files changed (1) hide show
  1. admin.html +690 -1023
admin.html CHANGED
@@ -1,1098 +1,765 @@
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 - Advanced Dashboard</title>
 
7
 
8
- <!-- Google Fonts - Modern & Professional -->
9
  <link rel="preconnect" href="https://fonts.googleapis.com">
10
- <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Manrope:wght@400;500;600;700;800&family=DM+Sans:wght@400;500;700&display=swap" rel="stylesheet">
11
- <link rel="stylesheet" href="static/css/design-tokens.css" />
12
- <link rel="stylesheet" href="static/css/glassmorphism.css" />
13
- <link rel="stylesheet" href="static/css/design-system.css" />
14
- <link rel="stylesheet" href="static/css/dashboard.css" />
15
- <link rel="stylesheet" href="static/css/pro-dashboard.css" />
16
- <link rel="stylesheet" href="static/css/sentiment-modern.css" />
17
- <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js" defer></script>
18
-
19
- <!-- SVG status icon tweaks -->
20
- <style>
21
- .status-pill .status-icon {
22
- margin-inline: 0.35rem;
23
- flex-shrink: 0;
24
- }
25
- .status-pill .status-label {
26
- white-space: nowrap;
27
- }
28
- </style>
 
 
29
  </head>
30
- <body data-theme="dark">
31
- <!-- ===== تنظیم بک‌اند (اسکریپت) ===== -->
32
- <script>
33
- // تنظیم خودکار: اگر روی localhost هستیم از localhost استفاده کن، وگرنه از HF Space
34
- if (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1') {
35
- window.BACKEND_URL = `http://${window.location.hostname}:7860`;
36
- } else {
37
- // برای HuggingFace Spaces
38
- window.BACKEND_URL = 'https://really-amin-datasourceforcryptocurrency.hf.space';
39
- }
40
- </script>
 
 
 
 
 
 
 
 
 
 
 
 
41
 
42
- <div class="app-shell">
43
- <!-- Sidebar Navigation -->
44
- <aside class="sidebar">
45
- <div class="brand">
46
- <div class="brand-icon">
47
- <svg width="28" height="28" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
48
- <path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
49
- <path d="M2 17L12 22L22 17" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
50
- <path d="M2 12L12 17L22 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
51
- </svg>
52
  </div>
53
- <div class="brand-text">
54
- <strong>Crypto Intelligence Hub</strong>
55
- <span class="env-pill">
56
- <svg width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
57
- <path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" stroke-width="1.5" />
58
- <path d="M2 17L12 22L22 17" stroke="currentColor" stroke-width="1.5" />
59
- <path d="M2 12L12 17L22 12" stroke="currentColor" stroke-width="1.5" />
60
- </svg>
61
- HF Space
62
- </span>
63
  </div>
64
  </div>
65
- <nav class="nav">
66
- <button class="nav-button active" data-nav="page-overview">
67
- <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>
68
- Overview
69
  </button>
70
- <button class="nav-button" data-nav="page-market">
71
- <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>
72
- Market
 
73
  </button>
74
- <button class="nav-button" data-nav="page-chart">
75
- <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>
76
- Chart Lab
77
  </button>
78
- <button class="nav-button" data-nav="page-ai">
79
- <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>
80
- AI Advisor
 
 
 
 
 
 
 
 
 
 
81
  </button>
82
- <button class="nav-button" data-nav="page-news">
83
- <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>
84
- News
 
 
85
  </button>
86
- <button class="nav-button" data-nav="page-providers">
87
- <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>
88
- Providers
 
 
89
  </button>
90
- <button class="nav-button" data-nav="page-datasets">
91
- <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>
92
- Datasets & Models
 
 
93
  </button>
94
- <button class="nav-button" data-nav="page-api">
95
- <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>
96
- API Explorer
 
 
97
  </button>
98
- <button class="nav-button" data-nav="page-debug">
99
- <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>
100
- Diagnostics
 
 
101
  </button>
102
- <button class="nav-button" data-nav="page-settings">
103
- <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>
104
- Settings
 
 
105
  </button>
106
- </nav>
107
- <div class="sidebar-footer">
108
- <div class="footer-badge">
109
- <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
110
- <path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
111
- <path d="M2 17L12 22L22 17" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
112
- </svg>
113
- <span>AI Powered</span>
114
- </div>
115
- </div>
116
- </aside>
117
-
118
- <!-- Main Content Area -->
119
- <main class="main-area">
120
- <!-- Top Bar with Status -->
121
- <header class="topbar">
122
- <div class="topbar-content">
123
- <div class="topbar-icon">
124
- <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
125
- <path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
126
- <path d="M2 17L12 22L22 17" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
127
- <path d="M2 12L12 17L22 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
128
- </svg>
129
- </div>
130
- <div class="topbar-text">
131
- <h1>
132
- <span class="title-gradient">Crypto Intelligence</span>
133
- <span class="title-accent">Dashboard</span>
134
- </h1>
135
- <p class="text-muted">
136
- <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="display: inline-block; vertical-align: middle; margin-right: 6px;">
137
- <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
138
- <path d="M12 8v4l3 3" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
139
- </svg>
140
- Live market data, AI-powered sentiment analysis, and comprehensive crypto intelligence
141
- </p>
142
- </div>
143
- </div>
144
- <div class="status-group">
145
- <!-- API Health with SVG icon -->
146
- <div class="status-pill" data-api-health data-state="warn">
147
- <span class="status-dot"></span>
148
- <svg class="status-icon" width="14" height="14" viewBox="0 0 24 24" aria-hidden="true">
149
- <path d="M4 7h16M4 12h10M4 17h7"
150
- stroke="currentColor"
151
- stroke-width="2"
152
- stroke-linecap="round"
153
- stroke-linejoin="round" />
154
- </svg>
155
- <span class="status-label">checking</span>
156
- </div>
157
- <!-- WebSocket Status with SVG icon -->
158
- <div class="status-pill" data-ws-status data-state="warn">
159
- <span class="status-dot"></span>
160
- <svg class="status-icon" width="14" height="14" viewBox="0 0 24 24" aria-hidden="true">
161
- <path d="M4 5h16v6H4z"
162
- stroke="currentColor"
163
- stroke-width="2"
164
- fill="none"
165
- stroke-linejoin="round" />
166
- <path d="M8 15h8M10 19h4"
167
- stroke="currentColor"
168
- stroke-width="2"
169
- stroke-linecap="round" />
170
- </svg>
171
- <span class="status-label">connecting</span>
172
- </div>
173
- </div>
174
- </header>
175
-
176
- <div class="page-container">
177
- <!-- ========== OVERVIEW PAGE ========== -->
178
- <section id="page-overview" class="page active">
179
- <div class="section-header">
180
- <h2 class="section-title">Overview</h2>
181
- <span class="chip">Live</span>
182
- </div>
183
-
184
- <div class="grid-four" data-overview-stats></div>
185
-
186
- <div class="glass-card" style="margin-top:1.5rem;">
187
- <div class="card-header">
188
- <h4>Market Overview - 24H</h4>
189
- <button class="btn-secondary btn-sm" onclick="window.location.reload()">
190
- <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
191
- <path d="M1 4v6h6M23 20v-6h-6" stroke="currentColor" stroke-width="2"/>
192
- <path d="M20.49 9A9 9 0 005.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 013.51 15" stroke="currentColor" stroke-width="2"/>
193
  </svg>
194
- Refresh
195
- </button>
196
- </div>
197
- <div style="height: 400px; padding: 20px;">
198
- <canvas id="market-overview-chart"></canvas>
199
- </div>
200
- </div>
201
-
202
- <div class="glass-card" style="margin-top:1.5rem;">
203
- <div class="card-header">
204
- <h4>Top Cryptocurrencies</h4>
205
- </div>
206
- <div class="table-container">
207
- <table class="table">
208
- <thead>
209
- <tr>
210
- <th>#</th>
211
- <th>Coin</th>
212
- <th>Price</th>
213
- <th>24h %</th>
214
- <th>7d %</th>
215
- <th>Market Cap</th>
216
- <th>Volume</th>
217
- <th>Chart</th>
218
- </tr>
219
- </thead>
220
- <tbody data-top-coins-body></tbody>
221
- </table>
222
- </div>
223
- </div>
224
-
225
- <div class="glass-card" style="margin-top:1.5rem;">
226
- <h4>Global Sentiment</h4>
227
- <canvas id="sentiment-chart" height="200"></canvas>
228
- </div>
229
- </section>
230
-
231
- <!-- ========== MARKET PAGE ========== -->
232
- <section id="page-market" class="page">
233
- <div class="section-header">
234
- <h2 class="section-title">Market Explorer</h2>
235
- <span class="chip">50+ coins</span>
236
- </div>
237
-
238
- <div class="search-bar">
239
- <input type="text" placeholder="Search coins..." data-market-search />
240
- <div class="button-group">
241
- <button class="secondary active" data-timeframe="24h">24h</button>
242
- <button class="secondary" data-timeframe="7d">7d</button>
243
- <button class="secondary" data-timeframe="30d">30d</button>
244
- </div>
245
- <label class="input-chip">Live Updates
246
- <div class="toggle">
247
- <input type="checkbox" data-live-toggle />
248
- <span></span>
249
- </div>
250
- </label>
251
- </div>
252
-
253
- <div class="table-container">
254
- <table>
255
- <thead>
256
- <tr>
257
- <th>#</th>
258
- <th>Symbol</th>
259
- <th>Name</th>
260
- <th>Price</th>
261
- <th>24h %</th>
262
- <th>Volume</th>
263
- <th>Market Cap</th>
264
- </tr>
265
- </thead>
266
- <tbody data-market-body></tbody>
267
- </table>
268
- </div>
269
-
270
- <aside class="drawer" data-market-drawer>
271
- <header>
272
- <h3 data-drawer-symbol></h3>
273
- <button data-close-drawer>&times;</button>
274
- </header>
275
- <div class="drawer-body">
276
- <div data-drawer-stats></div>
277
- <div data-chart-wrapper style="margin:1rem 0;">
278
- <canvas id="market-detail-chart" height="180"></canvas>
279
- </div>
280
- <h4>Related Headlines</h4>
281
- <div data-drawer-news></div>
282
- </div>
283
- </aside>
284
- </section>
285
-
286
- <!-- ========== CHART LAB PAGE ========== -->
287
- <section id="page-chart" class="page">
288
- <div class="section-header">
289
- <h2 class="section-title">Chart Lab</h2>
290
- <span class="chip">Interactive</span>
291
- </div>
292
-
293
- <div class="glass-card">
294
- <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-bottom: 20px;">
295
- <div>
296
- <label style="display: block; margin-bottom: 8px; font-weight: 600; color: var(--text-normal);">Select Cryptocurrency</label>
297
- <div style="position: relative;">
298
- <input
299
- type="text"
300
- id="chartCoinSearch"
301
- placeholder="Search Bitcoin, Ethereum..."
302
- style="width: 100%; padding: 12px 40px 12px 16px; background: rgba(15, 23, 42, 0.6); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 10px; color: white; font-size: 14px;"
303
- autocomplete="off"
304
- />
305
- <svg style="position: absolute; right: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; color: #94A3B8;" width="16" height="16" viewBox="0 0 24 24" fill="none">
306
- <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke="currentColor" stroke-width="2"/>
307
- </svg>
308
- <div id="chartCoinDropdown" style="display: none; position: absolute; top: calc(100% + 8px); left: 0; right: 0; max-height: 300px; overflow-y: auto; background: rgba(17, 24, 39, 0.95); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 12px; backdrop-filter: blur(20px); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); z-index: 1000;"></div>
309
- </div>
310
- </div>
311
-
312
- <div>
313
- <label style="display: block; margin-bottom: 8px; font-weight: 600; color: var(--text-normal);">Timeframe</label>
314
- <div style="display: flex; gap: 8px;">
315
- <button class="secondary" data-chart-timeframe="1">1D</button>
316
- <button class="secondary active" data-chart-timeframe="7">7D</button>
317
- <button class="secondary" data-chart-timeframe="30">30D</button>
318
- <button class="secondary" data-chart-timeframe="90">90D</button>
319
- <button class="secondary" data-chart-timeframe="365">1Y</button>
320
- </div>
321
- </div>
322
-
323
- <div>
324
- <label style="display: block; margin-bottom: 8px; font-weight: 600; color: var(--text-normal);">Chart Type</label>
325
- <select id="chartType" style="width: 100%; padding: 12px 16px; background: rgba(15, 23, 42, 0.6); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 10px; color: white; font-size: 14px;">
326
- <option value="line">Line Chart</option>
327
- <option value="area">Area Chart</option>
328
- <option value="bar">Bar Chart</option>
329
- </select>
330
  </div>
 
331
  </div>
332
-
333
- <button class="primary" onclick="loadSelectedChart()" style="width: 100%;">
334
- <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
335
- <path d="M3 3v18h18" stroke="currentColor" stroke-width="2"/>
336
- <path d="M7 10l4-4 4 4 6-6" stroke="currentColor" stroke-width="2"/>
337
  </svg>
338
- Load Chart
339
- </button>
340
- </div>
341
-
342
- <div class="glass-card" style="margin-top: 20px;">
343
- <div class="card-header">
344
- <h4 id="selectedCoinTitle">Select a coin to view chart</h4>
345
- <div style="display: flex; gap: 8px;">
346
- <span class="badge badge-cyan" id="selectedCoinPrice">$0</span>
347
- <span class="badge badge-success" id="selectedCoinChange">0%</span>
348
- </div>
349
- </div>
350
- <div style="height: 500px; padding: 20px;">
351
- <canvas id="price-chart"></canvas>
352
  </div>
353
  </div>
354
-
355
- <div class="glass-card" style="margin-top: 20px;">
356
- <div class="card-header">
357
- <h4>Volume Analysis</h4>
 
 
 
 
 
 
358
  </div>
359
- <div style="height: 300px; padding: 20px;">
360
- <canvas id="volume-chart"></canvas>
 
 
 
 
361
  </div>
362
  </div>
363
-
364
- <div class="grid-two" style="margin-top: 20px;">
365
- <div class="glass-card">
366
- <div class="card-header">
367
- <h4>RSI Indicator</h4>
368
- </div>
369
- <div style="height: 250px; padding: 20px;">
370
- <canvas id="rsi-chart"></canvas>
 
371
  </div>
 
372
  </div>
373
- <div class="glass-card">
374
- <div class="card-header">
375
- <h4>Moving Averages</h4>
376
- </div>
377
- <div style="height: 250px; padding: 20px;">
378
- <canvas id="ma-chart"></canvas>
379
- </div>
380
  </div>
381
  </div>
382
- </section>
383
-
384
- <!-- ========== AI ADVISOR PAGE ========== -->
385
- <section id="page-ai" class="page">
386
- <div class="section-header">
387
- <h2 class="section-title">AI Advisor</h2>
388
- <span class="chip">Powered by HF</span>
389
- </div>
390
-
391
- <form data-query-form>
392
- <label>Query
393
- <input type="text" placeholder="Ask about crypto markets..." name="query" />
394
- </label>
395
- <button class="primary" type="submit">Ask AI</button>
396
- </form>
397
-
398
- <div data-query-output style="margin-top:1.5rem;"></div>
399
-
400
- <div class="glass-card" style="margin-top:1.5rem;">
401
- <h4>Sentiment Analyzer</h4>
402
- <form data-sentiment-form>
403
- <label>Text
404
- <textarea name="text" rows="3" placeholder="Enter text for sentiment analysis..."></textarea>
405
- </label>
406
- <button class="primary" type="submit">Analyze</button>
407
- </form>
408
- <div data-sentiment-output style="margin-top:1rem;"></div>
409
- </div>
410
- </section>
411
-
412
- <!-- ========== NEWS PAGE ========== -->
413
- <section id="page-news" class="page">
414
- <div class="section-header">
415
- <h2 class="section-title">News Feed</h2>
416
- <span class="chip">Latest 40</span>
417
  </div>
418
-
419
- <div class="search-bar">
420
- <input type="text" placeholder="Filter headlines..." data-news-search />
421
- <select data-news-range>
422
- <option value="24h">Last 24h</option>
423
- <option value="7d">Last 7d</option>
424
- <option value="30d">Last 30d</option>
425
- </select>
426
- <input type="text" placeholder="Symbol (e.g., BTC)" data-news-symbol />
427
  </div>
428
-
429
- <div class="table-container">
430
- <table>
431
- <thead>
432
- <tr>
433
- <th>Date</th>
434
- <th>Source</th>
435
- <th>Title</th>
436
- <th>Symbols</th>
437
- <th>Sentiment</th>
438
- <th>Actions</th>
439
- </tr>
440
- </thead>
441
- <tbody data-news-body></tbody>
442
- </table>
443
  </div>
444
-
445
- <div class="modal-backdrop" data-news-modal>
446
- <div class="modal" data-news-modal-content></div>
447
- <button data-close-news-modal>&times;</button>
 
 
 
 
448
  </div>
449
- </section>
450
-
451
- <!-- ========== PROVIDERS PAGE ========== -->
452
- <section id="page-providers" class="page">
453
- <div class="section-header">
454
- <h2 class="section-title">API Providers</h2>
455
- <span class="chip">Multi-source</span>
 
456
  </div>
457
-
458
- <div data-providers-grid class="grid-three"></div>
459
- </section>
460
-
461
- <!-- ========== DATASETS & MODELS PAGE ========== -->
462
- <section id="page-datasets" class="page">
463
- <div class="section-header">
464
- <h2 class="section-title">Datasets & Models</h2>
465
- <span class="chip">14+ datasets</span>
466
  </div>
467
-
468
- <div class="glass-card">
469
- <h4>Datasets</h4>
470
- <div class="table-container">
471
- <table>
472
- <thead>
473
- <tr>
474
- <th>Name</th>
475
- <th>Type</th>
476
- <th>Updated</th>
477
- <th>Actions</th>
478
- </tr>
479
- </thead>
480
- <tbody data-datasets-body></tbody>
481
- </table>
482
- </div>
483
  </div>
484
-
485
- <div class="glass-card" style="margin-top:1.5rem;">
486
- <h4>HF Models</h4>
487
- <div class="table-container">
488
- <table>
489
- <thead>
490
- <tr>
491
- <th>Name</th>
492
- <th>Task</th>
493
- <th>Status</th>
494
- <th>Description</th>
495
- </tr>
496
- </thead>
497
- <tbody data-models-body></tbody>
498
- </table>
499
- </div>
500
  </div>
501
-
502
- <div class="glass-card" style="margin-top:1.5rem;">
503
- <h4>Test Model</h4>
504
- <form data-model-test-form>
505
- <div class="grid-two">
506
- <label>Model
507
- <select name="model" data-model-select></select>
508
- </label>
509
- <label>Input Text
510
- <textarea name="input" rows="3" placeholder="Enter text to test the model..."></textarea>
511
- </label>
512
- </div>
513
- <button class="primary" type="submit">Run Test</button>
514
- </form>
515
- <div data-model-test-output style="margin-top:1rem;"></div>
516
  </div>
517
-
518
- <div class="modal-backdrop" data-dataset-modal>
519
- <div class="modal" data-dataset-modal-content></div>
520
- <button data-close-dataset-modal>&times;</button>
 
 
 
 
521
  </div>
522
- </section>
523
-
524
- <!-- ========== API EXPLORER PAGE ========== -->
525
- <section id="page-api" class="page">
526
- <div class="section-header">
527
- <h2 class="section-title">API Explorer</h2>
528
- <span class="chip">15+ endpoints</span>
 
529
  </div>
 
 
 
 
530
 
531
- <div class="glass-card">
532
- <h4>Test Endpoint</h4>
533
- <form data-api-form>
534
- <div class="grid-two">
535
- <label>Endpoint
536
- <select data-endpoint-select>
537
- <option value="0">/api/health</option>
538
- </select>
539
- </label>
540
- <label>Method
541
- <select data-method-select>
542
- <option value="GET">GET</option>
543
- <option value="POST">POST</option>
544
- </select>
545
- </label>
546
  </div>
547
- <div data-api-description style="margin:0.5rem 0;font-size:0.875rem;color:var(--text-secondary);"></div>
548
- <div data-api-path style="margin:0.5rem 0;font-family:monospace;font-size:0.875rem;"></div>
549
- <label>Body (JSON)
550
- <textarea data-body-input rows="4"></textarea>
551
- </label>
552
- <button class="primary" type="submit">Send Request</button>
553
- </form>
554
- <div data-api-response style="margin-top:1rem;"></div>
555
- </div>
556
- </section>
557
-
558
- <!-- ========== DIAGNOSTICS PAGE ========== -->
559
- <section id="page-debug" class="page">
560
- <div class="section-header">
561
- <h2 class="section-title">System Diagnostics</h2>
562
- </div>
563
-
564
- <div class="grid-two">
565
- <div class="glass-card">
566
- <h4>Health Status</h4>
567
- <div data-health-info>Checking...</div>
568
  </div>
569
-
570
- <div class="glass-card">
571
- <h4>WebSocket Status</h4>
572
- <div data-ws-info>Checking...</div>
573
  </div>
574
  </div>
575
-
576
- <div class="grid-two" style="margin-top:1.5rem;">
577
- <div class="glass-card">
578
- <h4>Request Logs</h4>
579
- <div class="table-container">
580
- <table>
581
- <thead>
582
- <tr>
583
- <th>Time</th>
584
- <th>Method</th>
585
- <th>Endpoint</th>
586
- <th>Status</th>
587
- <th>Duration</th>
588
- </tr>
589
- </thead>
590
- <tbody data-request-log></tbody>
591
- </table>
592
- </div>
593
- </div>
594
-
595
- <div class="glass-card">
596
- <h4>Error Logs</h4>
597
- <div class="table-container">
598
- <table>
599
- <thead>
600
- <tr>
601
- <th>Time</th>
602
- <th>Endpoint</th>
603
- <th>Message</th>
604
- </tr>
605
- </thead>
606
- <tbody data-error-log></tbody>
607
- </table>
608
  </div>
 
 
609
  </div>
610
- </div>
611
-
612
- <div class="glass-card" style="margin-top:1.5rem;">
613
- <h4>WebSocket Events</h4>
614
- <div class="table-container">
615
- <table>
616
- <thead>
617
- <tr>
618
- <th>Time</th>
619
- <th>Type</th>
620
- <th>Details</th>
621
- </tr>
622
- </thead>
623
- <tbody data-ws-log></tbody>
624
- </table>
625
  </div>
626
  </div>
627
-
628
- <button class="secondary" data-refresh-health style="margin-top:1.5rem;">Refresh</button>
629
- </section>
630
-
631
- <!-- ========== SETTINGS PAGE ========== -->
632
- <section id="page-settings" class="page">
633
- <div class="section-header">
634
- <h2 class="section-title">Settings</h2>
635
- </div>
636
-
637
- <div class="glass-card">
638
- <h4>Display Settings</h4>
639
- <div class="grid-two">
640
- <label class="input-chip">Dark Theme
641
- <div class="toggle">
642
- <input type="checkbox" data-theme-toggle checked />
643
- <span></span>
644
- </div>
645
- </label>
646
- <label class="input-chip">Compact Layout
647
- <div class="toggle">
648
- <input type="checkbox" data-layout-toggle />
649
- <span></span>
650
- </div>
651
- </label>
652
  </div>
653
- </div>
654
-
655
- <div class="glass-card" style="margin-top:1.5rem;">
656
- <h4>Refresh Intervals</h4>
657
- <div class="grid-two">
658
- <label>Market Data (seconds)
659
- <input type="number" min="10" step="5" value="30" data-market-interval />
660
- </label>
661
- <label>News Feed (seconds)
662
- <input type="number" min="30" step="10" value="60" data-news-interval />
663
- </label>
664
  </div>
665
  </div>
666
-
667
- <div class="inline-message inline-info" style="margin-top:1.5rem;">
668
- Settings are stored locally in your browser.
669
- </div>
670
- </section>
671
  </div>
672
- </main>
673
- </div>
674
-
675
- <!-- Enhanced Chart Functionality -->
676
- <script>
677
- let chartInstances = {};
678
- let allCoins = [];
679
- let selectedCoin = null;
680
- let selectedTimeframe = 7;
681
 
682
- // Initialize
683
- document.addEventListener('DOMContentLoaded', () => {
684
- loadMarketOverviewChart();
685
- loadTopCoinsWithSparklines();
686
- initChartLabControls();
687
- });
688
-
689
- // Market Overview Chart
690
- async function loadMarketOverviewChart() {
691
- try {
692
- const res = await fetch('https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=10&sparkline=true');
693
- const coins = await res.json();
694
-
695
- const ctx = document.getElementById('market-overview-chart');
696
- if (!ctx) return;
697
-
698
- const colors = ['#3B82F6', '#06B6D4', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6', '#EC4899', '#F97316', '#14B8A6', '#6366F1'];
699
-
700
- const datasets = coins.slice(0, 10).map((coin, i) => ({
701
- label: coin.name,
702
- data: coin.sparkline_in_7d.price,
703
- borderColor: colors[i],
704
- backgroundColor: colors[i] + '20',
705
- borderWidth: 2,
706
- fill: false,
707
- tension: 0.4,
708
- pointRadius: 0
709
- }));
710
-
711
- if (chartInstances.overview) chartInstances.overview.destroy();
712
-
713
- chartInstances.overview = new Chart(ctx, {
714
- type: 'line',
715
- data: { labels: Array.from({length: 168}, (_, i) => i), datasets },
716
- options: {
717
- responsive: true,
718
- maintainAspectRatio: false,
719
- interaction: { mode: 'index', intersect: false },
720
- plugins: {
721
- legend: { display: true, position: 'top', labels: { usePointStyle: true, padding: 15, font: { size: 11 } } },
722
- tooltip: { backgroundColor: 'rgba(15, 23, 42, 0.95)', padding: 12 }
723
- },
724
- scales: {
725
- x: { grid: { display: false }, ticks: { display: false } },
726
- y: { grid: { color: 'rgba(255, 255, 255, 0.05)' }, ticks: { color: '#94A3B8' } }
727
- }
728
- }
729
- });
730
- } catch (e) {
731
- console.error('Chart error:', e);
732
- }
733
- }
734
-
735
- // Top Coins with Sparklines
736
- async function loadTopCoinsWithSparklines() {
737
- try {
738
- const res = await fetch('https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=20&sparkline=true&price_change_percentage=7d');
739
- const coins = await res.json();
740
-
741
- const tbody = document.querySelector('[data-top-coins-body]');
742
- if (!tbody) return;
743
-
744
- tbody.innerHTML = coins.map((coin, i) => {
745
- const change24h = coin.price_change_percentage_24h || 0;
746
- const change7d = coin.price_change_percentage_7d_in_currency || 0;
747
-
748
- return `
749
- <tr>
750
- <td>${i + 1}</td>
751
- <td>
752
- <div style="display: flex; align-items: center; gap: 12px;">
753
- <img src="${coin.image}" style="width: 32px; height: 32px; border-radius: 50%;">
754
- <div>
755
- <div style="font-weight: 600;">${coin.name}</div>
756
- <div style="font-size: 11px; color: #94A3B8;">${coin.symbol.toUpperCase()}</div>
757
- </div>
758
- </div>
759
- </td>
760
- <td style="font-weight: 600;">$${formatNum(coin.current_price)}</td>
761
- <td>
762
- <span style="color: ${change24h >= 0 ? '#22C55E' : '#EF4444'}; font-weight: 600;">
763
- ${change24h >= 0 ? '↑' : '↓'} ${Math.abs(change24h).toFixed(2)}%
764
- </span>
765
- </td>
766
- <td>
767
- <span style="color: ${change7d >= 0 ? '#22C55E' : '#EF4444'}; font-weight: 600;">
768
- ${change7d >= 0 ? '↑' : '↓'} ${Math.abs(change7d).toFixed(2)}%
769
- </span>
770
- </td>
771
- <td>$${formatNum(coin.market_cap)}</td>
772
- <td>$${formatNum(coin.total_volume)}</td>
773
- <td><canvas id="spark-${coin.id}" width="100" height="30"></canvas></td>
774
- </tr>
775
- `;
776
- }).join('');
777
-
778
- setTimeout(() => {
779
- coins.forEach(coin => {
780
- if (coin.sparkline_in_7d?.price) {
781
- createSparkline(`spark-${coin.id}`, coin.sparkline_in_7d.price, change24h >= 0);
782
- }
783
- });
784
- }, 100);
785
 
786
- } catch (e) {
787
- console.error('Table error:', e);
788
- }
789
- }
790
-
791
- // Sparkline
792
- function createSparkline(id, data, isPositive) {
793
- const canvas = document.getElementById(id);
794
- if (!canvas) return;
795
-
796
- const color = isPositive ? '#10B981' : '#EF4444';
797
-
798
- new Chart(canvas, {
799
- type: 'line',
800
- data: {
801
- labels: data.map((_, i) => i),
802
- datasets: [{
803
- data: data,
804
- borderColor: color,
805
- backgroundColor: color + '30',
806
- borderWidth: 2,
807
- fill: true,
808
- tension: 0.4,
809
- pointRadius: 0
810
- }]
811
- },
812
- options: {
813
- responsive: false,
814
- plugins: { legend: { display: false }, tooltip: { enabled: false } },
815
- scales: { x: { display: false }, y: { display: false } }
816
- }
817
- });
818
- }
819
-
820
- // Chart Lab Controls
821
- function initChartLabControls() {
822
- const input = document.getElementById('chartCoinSearch');
823
- const dropdown = document.getElementById('chartCoinDropdown');
824
-
825
- if (!input || !dropdown) return;
 
 
 
 
 
826
 
827
- input.addEventListener('focus', async () => {
828
- if (allCoins.length === 0) {
829
- const res = await fetch('https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=100');
830
- allCoins = await res.json();
831
- }
832
- renderCoinDropdown(allCoins);
833
- dropdown.style.display = 'block';
834
- });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
835
 
836
- input.addEventListener('input', (e) => {
837
- const term = e.target.value.toLowerCase();
838
- const filtered = allCoins.filter(c => c.name.toLowerCase().includes(term) || c.symbol.toLowerCase().includes(term));
839
- renderCoinDropdown(filtered);
840
- });
841
 
842
- document.addEventListener('click', (e) => {
843
- if (!input.contains(e.target) && !dropdown.contains(e.target)) {
844
- dropdown.style.display = 'none';
845
- }
846
- });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
847
 
848
- // Timeframe buttons
849
- document.querySelectorAll('[data-chart-timeframe]').forEach(btn => {
850
- btn.addEventListener('click', () => {
851
- document.querySelectorAll('[data-chart-timeframe]').forEach(b => b.classList.remove('active'));
852
- btn.classList.add('active');
853
- selectedTimeframe = parseInt(btn.dataset.chartTimeframe);
854
- if (selectedCoin) loadCoinDetailChart(selectedCoin.id);
855
- });
856
- });
857
- }
858
 
859
- function renderCoinDropdown(coins) {
860
- const dropdown = document.getElementById('chartCoinDropdown');
861
- if (!dropdown) return;
 
 
 
862
 
863
- dropdown.innerHTML = coins.slice(0, 50).map(coin => `
864
- <div onclick="selectChartCoin('${coin.id}')" style="padding: 12px 16px; display: flex; align-items: center; gap: 12px; cursor: pointer; border-bottom: 1px solid rgba(255, 255, 255, 0.05); transition: all 0.2s;">
865
- <img src="${coin.image}" style="width: 32px; height: 32px; border-radius: 50%;">
866
- <div style="flex: 1;">
867
- <div style="font-weight: 600;">${coin.name}</div>
868
- <div style="font-size: 11px; color: #94A3B8;">${coin.symbol.toUpperCase()}</div>
869
- </div>
870
- <div style="font-weight: 600;">$${formatNum(coin.current_price)}</div>
 
 
 
871
  </div>
872
- `).join('');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
873
 
874
- dropdown.querySelectorAll('div[onclick]').forEach(el => {
875
- el.addEventListener('mouseenter', () => {
876
- el.style.background = 'rgba(6, 182, 212, 0.15)';
877
- el.style.borderLeft = '3px solid #06B6D4';
878
- });
879
- el.addEventListener('mouseleave', () => {
880
- el.style.background = 'transparent';
881
- el.style.borderLeft = 'none';
882
- });
883
- });
884
- }
885
-
886
- window.selectChartCoin = function(coinId) {
887
- selectedCoin = allCoins.find(c => c.id === coinId);
888
- if (!selectedCoin) return;
 
 
 
 
 
 
 
889
 
890
- document.getElementById('chartCoinSearch').value = `${selectedCoin.name} (${selectedCoin.symbol.toUpperCase()})`;
891
- document.getElementById('chartCoinDropdown').style.display = 'none';
 
 
 
 
 
 
 
 
 
 
 
 
892
 
893
- loadCoinDetailChart(coinId);
894
- };
895
-
896
- window.loadSelectedChart = function() {
897
- if (selectedCoin) {
898
- loadCoinDetailChart(selectedCoin.id);
899
- }
900
- };
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
901
 
902
- async function loadCoinDetailChart(coinId) {
903
- try {
904
- const res = await fetch(`https://api.coingecko.com/api/v3/coins/${coinId}/market_chart?vs_currency=usd&days=${selectedTimeframe}`);
905
- const data = await res.json();
906
-
907
- const coin = allCoins.find(c => c.id === coinId) || selectedCoin;
908
-
909
- document.getElementById('selectedCoinTitle').textContent = `${coin.name} (${coin.symbol.toUpperCase()})`;
910
- document.getElementById('selectedCoinPrice').textContent = `$${formatNum(coin.current_price)}`;
911
-
912
- const change = coin.price_change_percentage_24h || 0;
913
- const changeEl = document.getElementById('selectedCoinChange');
914
- changeEl.textContent = `${change >= 0 ? '+' : ''}${change.toFixed(2)}%`;
915
- changeEl.className = `badge ${change >= 0 ? 'badge-success' : 'badge-danger'}`;
916
-
917
- // Price Chart
918
- const priceCtx = document.getElementById('price-chart');
919
- if (priceCtx) {
920
- if (chartInstances.price) chartInstances.price.destroy();
921
-
922
- const chartType = document.getElementById('chartType').value;
923
-
924
- chartInstances.price = new Chart(priceCtx, {
925
- type: chartType === 'bar' ? 'bar' : 'line',
926
- data: {
927
- labels: data.prices.map(p => new Date(p[0])),
928
- datasets: [{
929
- label: 'Price',
930
- data: data.prices.map(p => p[1]),
931
- borderColor: '#3B82F6',
932
- backgroundColor: chartType === 'area' ? 'rgba(59, 130, 246, 0.2)' : chartType === 'bar' ? 'rgba(59, 130, 246, 0.6)' : 'transparent',
933
- borderWidth: 3,
934
- fill: chartType === 'area',
935
- tension: 0.4,
936
- pointRadius: 0
937
- }]
938
- },
939
- options: {
940
- responsive: true,
941
- maintainAspectRatio: false,
942
- plugins: {
943
- legend: { display: false },
944
- tooltip: { backgroundColor: 'rgba(15, 23, 42, 0.95)', padding: 16 }
945
- },
946
- scales: {
947
- x: { type: 'time', grid: { display: false }, ticks: { color: '#94A3B8' } },
948
- y: { grid: { color: 'rgba(255, 255, 255, 0.05)' }, ticks: { color: '#94A3B8', callback: v => '$' + formatNum(v) } }
949
- }
950
- }
951
- });
952
- }
953
-
954
- // Volume Chart
955
- const volumeCtx = document.getElementById('volume-chart');
956
- if (volumeCtx) {
957
- if (chartInstances.volume) chartInstances.volume.destroy();
958
-
959
- chartInstances.volume = new Chart(volumeCtx, {
960
- type: 'bar',
961
- data: {
962
- labels: data.total_volumes.map(v => new Date(v[0])),
963
- datasets: [{
964
- label: 'Volume',
965
- data: data.total_volumes.map(v => v[1]),
966
- backgroundColor: 'rgba(16, 185, 129, 0.6)',
967
- borderColor: '#10B981',
968
- borderWidth: 1,
969
- borderRadius: 4
970
- }]
971
- },
972
- options: {
973
- responsive: true,
974
- maintainAspectRatio: false,
975
- plugins: { legend: { display: false } },
976
- scales: {
977
- x: { type: 'time', grid: { display: false }, ticks: { color: '#94A3B8' } },
978
- y: { grid: { color: 'rgba(255, 255, 255, 0.05)' }, ticks: { color: '#94A3B8', callback: v => '$' + formatNum(v) } }
979
- }
980
- }
981
- });
982
- }
983
-
984
- // RSI Chart (simulated)
985
- const rsiCtx = document.getElementById('rsi-chart');
986
- if (rsiCtx) {
987
- if (chartInstances.rsi) chartInstances.rsi.destroy();
988
-
989
- const rsiData = calculateRSI(data.prices.map(p => p[1]));
990
-
991
- chartInstances.rsi = new Chart(rsiCtx, {
992
- type: 'line',
993
- data: {
994
- labels: rsiData.map((_, i) => i),
995
- datasets: [{
996
- label: 'RSI',
997
- data: rsiData,
998
- borderColor: '#8B5CF6',
999
- backgroundColor: 'rgba(139, 92, 246, 0.1)',
1000
- borderWidth: 2,
1001
- fill: true,
1002
- tension: 0.4
1003
- }]
1004
- },
1005
- options: {
1006
- responsive: true,
1007
- maintainAspectRatio: false,
1008
- plugins: { legend: { display: false } },
1009
- scales: {
1010
- y: { min: 0, max: 100, grid: { color: 'rgba(255, 255, 255, 0.05)' }, ticks: { color: '#94A3B8' } },
1011
- x: { grid: { display: false }, ticks: { display: false } }
1012
- }
1013
- }
1014
- });
1015
- }
1016
-
1017
- // MA Chart
1018
- const maCtx = document.getElementById('ma-chart');
1019
- if (maCtx) {
1020
- if (chartInstances.ma) chartInstances.ma.destroy();
1021
-
1022
- const prices = data.prices.map(p => p[1]);
1023
- const ma7 = calculateMA(prices, 7);
1024
- const ma25 = calculateMA(prices, 25);
1025
- const ma99 = calculateMA(prices, 99);
1026
-
1027
- chartInstances.ma = new Chart(maCtx, {
1028
- type: 'line',
1029
- data: {
1030
- labels: prices.map((_, i) => i),
1031
- datasets: [
1032
- { label: 'MA 7', data: ma7, borderColor: '#3B82F6', borderWidth: 2, fill: false, tension: 0.4 },
1033
- { label: 'MA 25', data: ma25, borderColor: '#10B981', borderWidth: 2, fill: false, tension: 0.4 },
1034
- { label: 'MA 99', data: ma99, borderColor: '#F59E0B', borderWidth: 2, fill: false, tension: 0.4 }
1035
- ]
1036
- },
1037
- options: {
1038
- responsive: true,
1039
- maintainAspectRatio: false,
1040
- plugins: { legend: { display: true, position: 'top', labels: { usePointStyle: true, font: { size: 11 } } } },
1041
- scales: {
1042
- y: { grid: { color: 'rgba(255, 255, 255, 0.05)' }, ticks: { color: '#94A3B8', callback: v => '$' + formatNum(v) } },
1043
- x: { grid: { display: false }, ticks: { display: false } }
1044
- }
1045
- }
1046
- });
1047
- }
1048
-
1049
- } catch (e) {
1050
- console.error('Detail chart error:', e);
1051
- }
1052
- }
1053
 
1054
- // Calculate RSI
1055
- function calculateRSI(prices, period = 14) {
1056
- const rsi = [];
1057
- for (let i = period; i < prices.length; i++) {
1058
- let gains = 0, losses = 0;
1059
- for (let j = i - period; j < i; j++) {
1060
- const change = prices[j + 1] - prices[j];
1061
- if (change > 0) gains += change;
1062
- else losses -= change;
1063
- }
1064
- const avgGain = gains / period;
1065
- const avgLoss = losses / period;
1066
- const rs = avgGain / avgLoss;
1067
- rsi.push(100 - (100 / (1 + rs)));
1068
- }
1069
- return rsi;
1070
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1071
 
1072
- // Calculate Moving Average
1073
- function calculateMA(prices, period) {
1074
- const ma = [];
1075
- for (let i = 0; i < prices.length; i++) {
1076
- if (i < period - 1) {
1077
- ma.push(null);
1078
- } else {
1079
- const sum = prices.slice(i - period + 1, i + 1).reduce((a, b) => a + b, 0);
1080
- ma.push(sum / period);
1081
- }
1082
- }
1083
- return ma;
1084
- }
1085
 
1086
- function formatNum(num) {
1087
- if (num >= 1e12) return (num / 1e12).toFixed(2) + 'T';
1088
- if (num >= 1e9) return (num / 1e9).toFixed(2) + 'B';
1089
- if (num >= 1e6) return (num / 1e6).toFixed(2) + 'M';
1090
- if (num >= 1e3) return (num / 1e3).toFixed(2) + 'K';
1091
- return num.toFixed(2);
1092
- }
1093
- </script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1094
 
1095
- <!-- Load App JS as ES6 Module -->
1096
- <script type="module" src="static/js/app.js"></script>
1097
  </body>
1098
  </html>
 
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>