|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8" /> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
|
|
<title>Crypto Monitor HF - Unified Dashboard</title> |
|
|
<link rel="stylesheet" href="static/css/design-tokens.css" /> |
|
|
<link rel="stylesheet" href="static/css/design-system.css" /> |
|
|
<link rel="stylesheet" href="static/css/dashboard.css" /> |
|
|
<link rel="stylesheet" href="static/css/pro-dashboard.css" /> |
|
|
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js" defer></script> |
|
|
</head> |
|
|
<body data-theme="dark"> |
|
|
<div class="app-shell"> |
|
|
<aside class="sidebar"> |
|
|
<div class="brand"> |
|
|
<strong>Crypto Monitor HF</strong> |
|
|
<span class="env-pill"> |
|
|
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> |
|
|
<path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" stroke-width="1.5" /> |
|
|
<path d="M2 17L12 22L22 17" stroke="currentColor" stroke-width="1.5" /> |
|
|
<path d="M2 12L12 17L22 12" stroke="currentColor" stroke-width="1.5" /> |
|
|
</svg> |
|
|
HF Space |
|
|
</span> |
|
|
</div> |
|
|
<nav class="nav"> |
|
|
<button class="nav-button active" data-nav="page-overview">Overview</button> |
|
|
<button class="nav-button" data-nav="page-market">Market</button> |
|
|
<button class="nav-button" data-nav="page-chart">Chart Lab</button> |
|
|
<button class="nav-button" data-nav="page-ai">Sentiment & AI</button> |
|
|
<button class="nav-button" data-nav="page-news">News</button> |
|
|
<button class="nav-button" data-nav="page-providers">Providers</button> |
|
|
<button class="nav-button" data-nav="page-api">API Explorer</button> |
|
|
<button class="nav-button" data-nav="page-debug">Diagnostics</button> |
|
|
<button class="nav-button" data-nav="page-datasets">Datasets & Models</button> |
|
|
<button class="nav-button" data-nav="page-settings">Settings</button> |
|
|
</nav> |
|
|
<div class="sidebar-footer"> |
|
|
Unified crypto intelligence console<br />Realtime data • HF optimized |
|
|
</div> |
|
|
</aside> |
|
|
<main class="main-area"> |
|
|
<header class="topbar"> |
|
|
<div> |
|
|
<h1>Unified Intelligence Dashboard</h1> |
|
|
<p class="text-muted">Live market telemetry, AI signals, diagnostics, and provider health.</p> |
|
|
</div> |
|
|
<div class="status-group"> |
|
|
<div class="status-pill" data-api-health data-state="warn"> |
|
|
<span class="status-dot"></span> |
|
|
<span>checking</span> |
|
|
</div> |
|
|
<div class="status-pill" data-ws-status data-state="warn"> |
|
|
<span class="status-dot"></span> |
|
|
<span>connecting</span> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
<div class="page-container"> |
|
|
<section id="page-overview" class="page active"> |
|
|
<div class="section-header"> |
|
|
<h2 class="section-title">Global Overview</h2> |
|
|
<span class="chip">Powered by /api/market/stats</span> |
|
|
</div> |
|
|
<div class="stats-grid" data-overview-stats></div> |
|
|
<div class="grid-two"> |
|
|
<div class="glass-card"> |
|
|
<div class="section-header"> |
|
|
<h3>Top Coins</h3> |
|
|
<span class="text-muted">Market movers</span> |
|
|
</div> |
|
|
<div class="table-wrapper"> |
|
|
<table> |
|
|
<thead> |
|
|
<tr> |
|
|
<th>#</th> |
|
|
<th>Symbol</th> |
|
|
<th>Name</th> |
|
|
<th>Price</th> |
|
|
<th>24h %</th> |
|
|
<th>Volume</th> |
|
|
<th>Market Cap</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody data-top-coins-body></tbody> |
|
|
</table> |
|
|
</div> |
|
|
</div> |
|
|
<div class="glass-card"> |
|
|
<div class="section-header"> |
|
|
<h3>Global Sentiment</h3> |
|
|
<span class="text-muted">CryptoBERT stack</span> |
|
|
</div> |
|
|
<canvas id="sentiment-chart" height="220"></canvas> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<section id="page-market" class="page"> |
|
|
<div class="section-header"> |
|
|
<h2 class="section-title">Market Intelligence</h2> |
|
|
<div class="controls-bar"> |
|
|
<div class="input-chip"> |
|
|
<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> |
|
|
<input type="text" placeholder="Search symbol" data-market-search /> |
|
|
</div> |
|
|
<div class="input-chip"> |
|
|
Timeframe: |
|
|
<button class="ghost" data-timeframe="1d">1D</button> |
|
|
<button class="ghost active" data-timeframe="7d">7D</button> |
|
|
<button class="ghost" data-timeframe="30d">30D</button> |
|
|
</div> |
|
|
<label class="input-chip"> Live updates |
|
|
<div class="toggle"> |
|
|
<input type="checkbox" data-live-toggle /> |
|
|
<span></span> |
|
|
</div> |
|
|
</label> |
|
|
</div> |
|
|
</div> |
|
|
<div class="glass-card"> |
|
|
<div class="table-wrapper"> |
|
|
<table> |
|
|
<thead> |
|
|
<tr> |
|
|
<th>#</th> |
|
|
<th>Symbol</th> |
|
|
<th>Name</th> |
|
|
<th>Price</th> |
|
|
<th>24h %</th> |
|
|
<th>Volume</th> |
|
|
<th>Market Cap</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody data-market-body></tbody> |
|
|
</table> |
|
|
</div> |
|
|
</div> |
|
|
<div class="drawer" data-market-drawer> |
|
|
<button class="ghost" data-close-drawer>Close</button> |
|
|
<h3 data-drawer-symbol>—</h3> |
|
|
<div data-drawer-stats></div> |
|
|
<div class="glass-card" data-chart-wrapper> |
|
|
<canvas id="market-detail-chart" height="180"></canvas> |
|
|
</div> |
|
|
<div class="glass-card"> |
|
|
<h4>Related Headlines</h4> |
|
|
<div data-drawer-news></div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<section id="page-chart" class="page"> |
|
|
<div class="section-header"> |
|
|
<h2 class="section-title">Chart Lab</h2> |
|
|
<div class="controls-bar"> |
|
|
<select data-chart-symbol> |
|
|
<option value="BTC">BTC</option> |
|
|
<option value="ETH">ETH</option> |
|
|
<option value="SOL">SOL</option> |
|
|
<option value="BNB">BNB</option> |
|
|
</select> |
|
|
<div class="input-chip"> |
|
|
<button class="ghost active" data-chart-timeframe="7d">7D</button> |
|
|
<button class="ghost" data-chart-timeframe="30d">30D</button> |
|
|
<button class="ghost" data-chart-timeframe="90d">90D</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="glass-card"> |
|
|
<canvas id="chart-lab-canvas" height="260"></canvas> |
|
|
</div> |
|
|
<div class="glass-card"> |
|
|
<div class="controls-bar"> |
|
|
<label><input type="checkbox" data-indicator value="MA20" checked /> MA 20</label> |
|
|
<label><input type="checkbox" data-indicator value="MA50" /> MA 50</label> |
|
|
<label><input type="checkbox" data-indicator value="RSI" /> RSI</label> |
|
|
<label><input type="checkbox" data-indicator value="Volume" /> Volume</label> |
|
|
</div> |
|
|
<button class="primary" data-run-analysis>Analyze Chart with AI</button> |
|
|
<div data-ai-insights class="ai-insights"></div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<section id="page-ai" class="page"> |
|
|
<div class="section-header"> |
|
|
<h2 class="section-title">Sentiment & AI Advisor</h2> |
|
|
</div> |
|
|
<div class="glass-card"> |
|
|
<form data-ai-form class="ai-form"> |
|
|
<div class="grid-two"> |
|
|
<label>Symbol |
|
|
<select name="symbol"> |
|
|
<option value="BTC">BTC</option> |
|
|
<option value="ETH">ETH</option> |
|
|
<option value="SOL">SOL</option> |
|
|
</select> |
|
|
</label> |
|
|
<label>Time Horizon |
|
|
<select name="horizon"> |
|
|
<option value="intraday">Intraday</option> |
|
|
<option value="swing" selected>Swing</option> |
|
|
<option value="long">Long Term</option> |
|
|
</select> |
|
|
</label> |
|
|
<label>Risk Profile |
|
|
<select name="risk"> |
|
|
<option value="conservative">Conservative</option> |
|
|
<option value="moderate" selected>Moderate</option> |
|
|
<option value="aggressive">Aggressive</option> |
|
|
</select> |
|
|
</label> |
|
|
<label>Sentiment Model |
|
|
<select name="model"> |
|
|
<option value="auto">Auto</option> |
|
|
<option value="crypto">CryptoBERT</option> |
|
|
<option value="financial">FinBERT</option> |
|
|
<option value="social">Twitter Sentiment</option> |
|
|
</select> |
|
|
</label> |
|
|
</div> |
|
|
<label>Context or Headline |
|
|
<textarea name="context" placeholder="Paste a headline or trade thesis for AI analysis"></textarea> |
|
|
</label> |
|
|
<button class="primary" type="submit">Generate Guidance</button> |
|
|
</form> |
|
|
<div class="grid-two"> |
|
|
<div data-ai-result class="ai-result"></div> |
|
|
<div data-sentiment-result></div> |
|
|
</div> |
|
|
<div class="inline-message inline-info" data-ai-disclaimer> |
|
|
Experimental AI output. Not financial advice. |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<section id="page-news" class="page"> |
|
|
<div class="section-header"> |
|
|
<h2 class="section-title">News & Summaries</h2> |
|
|
</div> |
|
|
<div class="controls-bar"> |
|
|
<select data-news-range> |
|
|
<option value="24h">Last 24h</option> |
|
|
<option value="7d">7 Days</option> |
|
|
<option value="30d">30 Days</option> |
|
|
</select> |
|
|
<input type="text" placeholder="Search headline" data-news-search /> |
|
|
<input type="text" placeholder="Filter symbol (e.g. BTC)" data-news-symbol /> |
|
|
</div> |
|
|
<div class="glass-card"> |
|
|
<div class="table-wrapper"> |
|
|
<table> |
|
|
<thead> |
|
|
<tr> |
|
|
<th>Time</th> |
|
|
<th>Source</th> |
|
|
<th>Title</th> |
|
|
<th>Symbols</th> |
|
|
<th>Sentiment</th> |
|
|
<th>AI</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody data-news-body></tbody> |
|
|
</table> |
|
|
</div> |
|
|
</div> |
|
|
<div class="modal-backdrop" data-news-modal> |
|
|
<div class="modal"> |
|
|
<button class="ghost" data-close-news-modal>Close</button> |
|
|
<div data-news-modal-content></div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<section id="page-providers" class="page"> |
|
|
<div class="section-header"> |
|
|
<h2 class="section-title">Provider Health</h2> |
|
|
<button class="ghost" data-provider-refresh>Refresh</button> |
|
|
</div> |
|
|
<div class="stats-grid" data-provider-summary></div> |
|
|
<div class="controls-bar"> |
|
|
<input type="search" placeholder="Search provider" data-provider-search /> |
|
|
<select data-provider-category> |
|
|
<option value="all">All Categories</option> |
|
|
<option value="market">Market Data</option> |
|
|
<option value="news">News</option> |
|
|
<option value="ai">AI</option> |
|
|
</select> |
|
|
</div> |
|
|
<div class="glass-card"> |
|
|
<div class="table-wrapper"> |
|
|
<table> |
|
|
<thead> |
|
|
<tr> |
|
|
<th>Name</th> |
|
|
<th>Category</th> |
|
|
<th>Status</th> |
|
|
<th>Latency</th> |
|
|
<th>Details</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody data-providers-table></tbody> |
|
|
</table> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<section id="page-api" class="page"> |
|
|
<div class="section-header"> |
|
|
<h2 class="section-title">API Explorer</h2> |
|
|
<span class="chip">Test live endpoints</span> |
|
|
</div> |
|
|
<div class="glass-card"> |
|
|
<div class="grid-two"> |
|
|
<label>Endpoint |
|
|
<select data-api-endpoint></select> |
|
|
</label> |
|
|
<label>Method |
|
|
<select data-api-method> |
|
|
<option value="GET">GET</option> |
|
|
<option value="POST">POST</option> |
|
|
</select> |
|
|
</label> |
|
|
<label>Query Params |
|
|
<input type="text" placeholder="limit=10&symbol=BTC" data-api-params /> |
|
|
</label> |
|
|
<label>Body (JSON) |
|
|
<textarea data-api-body placeholder='{ "text": "Bitcoin" }'></textarea> |
|
|
</label> |
|
|
</div> |
|
|
<p class="text-muted">Path: <span data-api-path></span> — <span data-api-description></span></p> |
|
|
<button class="primary" data-api-send>Send Request</button> |
|
|
<div class="inline-message" data-api-meta>Ready</div> |
|
|
<pre data-api-response class="api-response"></pre> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<section id="page-debug" class="page"> |
|
|
<div class="section-header"> |
|
|
<h2 class="section-title">Diagnostics</h2> |
|
|
<button class="ghost" data-refresh-health>Refresh</button> |
|
|
</div> |
|
|
<div class="stats-grid"> |
|
|
<div class="glass-card"> |
|
|
<h3>API Health</h3> |
|
|
<div class="stat-value" data-health-status>—</div> |
|
|
</div> |
|
|
<div class="glass-card"> |
|
|
<h3>Providers</h3> |
|
|
<div data-providers class="grid-two"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="grid-two"> |
|
|
<div class="glass-card"> |
|
|
<h4>Request Log</h4> |
|
|
<div class="table-wrapper log-table"> |
|
|
<table> |
|
|
<thead> |
|
|
<tr> |
|
|
<th>Time</th> |
|
|
<th>Method</th> |
|
|
<th>Endpoint</th> |
|
|
<th>Status</th> |
|
|
<th>Latency</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody data-request-log></tbody> |
|
|
</table> |
|
|
</div> |
|
|
</div> |
|
|
<div class="glass-card"> |
|
|
<h4>Error Log</h4> |
|
|
<div class="table-wrapper log-table"> |
|
|
<table> |
|
|
<thead> |
|
|
<tr> |
|
|
<th>Time</th> |
|
|
<th>Endpoint</th> |
|
|
<th>Message</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody data-error-log></tbody> |
|
|
</table> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="glass-card"> |
|
|
<h4>WebSocket Events</h4> |
|
|
<div class="table-wrapper log-table"> |
|
|
<table> |
|
|
<thead> |
|
|
<tr> |
|
|
<th>Time</th> |
|
|
<th>Type</th> |
|
|
<th>Detail</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody data-ws-log></tbody> |
|
|
</table> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<section id="page-datasets" class="page"> |
|
|
<div class="section-header"> |
|
|
<h2 class="section-title">Datasets & Models</h2> |
|
|
</div> |
|
|
<div class="grid-two"> |
|
|
<div class="glass-card"> |
|
|
<h3>Datasets</h3> |
|
|
<div class="table-wrapper"> |
|
|
<table> |
|
|
<thead> |
|
|
<tr> |
|
|
<th>Name</th> |
|
|
<th>Records</th> |
|
|
<th>Updated</th> |
|
|
<th>Actions</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody data-datasets-body></tbody> |
|
|
</table> |
|
|
</div> |
|
|
</div> |
|
|
<div class="glass-card"> |
|
|
<h3>Models</h3> |
|
|
<div class="table-wrapper"> |
|
|
<table> |
|
|
<thead> |
|
|
<tr> |
|
|
<th>Name</th> |
|
|
<th>Task</th> |
|
|
<th>Status</th> |
|
|
<th>Notes</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody data-models-body></tbody> |
|
|
</table> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="glass-card"> |
|
|
<h4>Test a Model</h4> |
|
|
<form data-model-test-form class="grid-two"> |
|
|
<label>Model |
|
|
<select data-model-select name="model"></select> |
|
|
</label> |
|
|
<label>Input |
|
|
<textarea name="input" placeholder="Type a prompt"></textarea> |
|
|
</label> |
|
|
<button class="primary" type="submit">Run Test</button> |
|
|
</form> |
|
|
<div data-model-test-output></div> |
|
|
</div> |
|
|
<div class="modal-backdrop" data-dataset-modal> |
|
|
<div class="modal"> |
|
|
<button class="ghost" data-close-dataset-modal>Close</button> |
|
|
<div data-dataset-modal-content></div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<section id="page-settings" class="page"> |
|
|
<div class="section-header"> |
|
|
<h2 class="section-title">Settings</h2> |
|
|
</div> |
|
|
<div class="glass-card"> |
|
|
<div class="grid-two"> |
|
|
<label class="input-chip">Light Theme |
|
|
<div class="toggle"> |
|
|
<input type="checkbox" data-theme-toggle /> |
|
|
<span></span> |
|
|
</div> |
|
|
</label> |
|
|
<label>Market Refresh (sec) |
|
|
<input type="number" min="15" step="5" data-market-interval /> |
|
|
</label> |
|
|
<label>News Refresh (sec) |
|
|
<input type="number" min="30" step="10" data-news-interval /> |
|
|
</label> |
|
|
<label class="input-chip">Compact Layout |
|
|
<div class="toggle"> |
|
|
<input type="checkbox" data-layout-toggle /> |
|
|
<span></span> |
|
|
</div> |
|
|
</label> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
</div> |
|
|
</main> |
|
|
</div> |
|
|
<script type="module" src="static/js/app.js"></script> |
|
|
</body> |
|
|
</html> |
|
|
|
