|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8" /> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" /> |
|
|
<title>Crypto Intelligence Dashboard</title> |
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" /> |
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> |
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" /> |
|
|
<link rel="stylesheet" href="/static/css/unified-ui.css" /> |
|
|
<link rel="stylesheet" href="/static/css/components.css" /> |
|
|
<script defer src="/static/js/ui-feedback.js"></script> |
|
|
<script defer src="/static/js/dashboard-app.js"></script> |
|
|
</head> |
|
|
<body class="page page-dashboard"> |
|
|
<header class="top-nav"> |
|
|
<div class="branding"> |
|
|
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="10"/></svg> |
|
|
<div> |
|
|
<strong>Crypto Intelligence Hub</strong> |
|
|
<small style="color:var(--ui-text-muted);letter-spacing:0.2em;">Real-time data + HF models</small> |
|
|
</div> |
|
|
</div> |
|
|
<nav class="nav-links"> |
|
|
<a class="active" href="/dashboard">Dashboard</a> |
|
|
<a href="/admin">Admin</a> |
|
|
<a href="/hf_console">HF Console</a> |
|
|
<a href="/docs" target="_blank" rel="noreferrer">API Docs</a> |
|
|
</nav> |
|
|
</header> |
|
|
|
|
|
<main class="page-content"> |
|
|
<section class="card" id="intro-card"> |
|
|
<div class="section-heading"> |
|
|
<h2>Unified Market Pulse</h2> |
|
|
<span class="badge info" id="intro-source">Loading...</span> |
|
|
</div> |
|
|
<p style="color:var(--text-muted);max-width:780px;line-height:1.6;"> |
|
|
Live collectors + local fallback registry guarantee resilient insights. All numbers below already honor the FastAPI routes |
|
|
(<code>/api/crypto/prices/top</code>, <code>/api/crypto/market-overview</code>, <code>/health</code>) so you can monitor status even when providers degrade. |
|
|
</p> |
|
|
</section> |
|
|
|
|
|
<section class="card-grid" id="market-metrics"> |
|
|
<article class="card"><h3>Total Market Cap</h3><div class="metric-value" id="metric-market-cap">-</div><div class="metric-subtext" id="metric-cap-source"></div></article> |
|
|
<article class="card"><h3>24h Volume</h3><div class="metric-value" id="metric-volume">-</div><div class="metric-subtext" id="metric-volume-source"></div></article> |
|
|
<article class="card"><h3>BTC Dominance</h3><div class="metric-value" id="metric-btc-dom">-</div><div class="metric-subtext">Based on /api/crypto/market-overview</div></article> |
|
|
<article class="card"><h3>System Health</h3><div class="metric-value" id="metric-health">-</div><div class="metric-subtext" id="metric-health-details"></div></article> |
|
|
</section> |
|
|
|
|
|
<section class="card table-card"> |
|
|
<div class="section-heading"> |
|
|
<h2>Top Assets</h2> |
|
|
<span class="badge info" id="top-prices-source">Loading...</span> |
|
|
</div> |
|
|
<div class="table-wrapper"> |
|
|
<table> |
|
|
<thead> |
|
|
<tr><th>Symbol</th><th>Price</th><th>24h %</th><th>Volume</th></tr> |
|
|
</thead> |
|
|
<tbody id="top-prices-table"> |
|
|
<tr><td colspan="4">Loading...</td></tr> |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<section class="split-grid"> |
|
|
<article class="card" id="overview-card"> |
|
|
<div class="section-heading"> |
|
|
<h2>Market Overview</h2> |
|
|
<span class="badge info" id="market-overview-source">Loading...</span> |
|
|
</div> |
|
|
<ul class="list" id="market-overview-list"></ul> |
|
|
</article> |
|
|
<article class="card" id="system-card"> |
|
|
<div class="section-heading"> |
|
|
<h2>System & Rate Limits</h2> |
|
|
<span class="badge info" id="system-status-source">/health</span> |
|
|
</div> |
|
|
<div id="system-health-status" class="metric-subtext"></div> |
|
|
<ul class="list" id="system-status-list"></ul> |
|
|
<div class="section-heading" style="margin-top:24px;"> |
|
|
<h2>Configuration</h2> |
|
|
</div> |
|
|
<ul class="list" id="system-config-list"></ul> |
|
|
<div class="section-heading" style="margin-top:24px;"> |
|
|
<h2>Rate Limits</h2> |
|
|
</div> |
|
|
<ul class="list" id="rate-limits-list"></ul> |
|
|
</article> |
|
|
</section> |
|
|
|
|
|
<section class="split-grid"> |
|
|
<article class="card" id="hf-widget"> |
|
|
<div class="section-heading"> |
|
|
<h2>HuggingFace Snapshot</h2> |
|
|
<span class="badge info" id="hf-health-status">Loading...</span> |
|
|
</div> |
|
|
<div id="hf-widget-summary" class="metric-subtext"></div> |
|
|
<ul class="list" id="hf-registry-list"></ul> |
|
|
</article> |
|
|
<article class="card"> |
|
|
<div class="section-heading"> |
|
|
<h2>Live Stream (/ws)</h2> |
|
|
<span class="badge info" id="ws-status">Connecting...</span> |
|
|
</div> |
|
|
<div class="ws-stream" id="ws-stream"></div> |
|
|
</article> |
|
|
</section> |
|
|
</main> |
|
|
</body> |
|
|
</html>
|
|
|
|
