| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| <title>Crypto Intelligence Console</title> |
| <link rel="stylesheet" href="static/css/pro-dashboard.css" /> |
| <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script> |
| </head> |
| <body data-theme="dark"> |
| <div class="app-shell"> |
| <aside class="sidebar"> |
| <div class="brand"> |
| <strong>CRYPTO DT</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"> |
| <svg viewBox="0 0 24 24"><path d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z"/></svg> |
| Overview |
| </button> |
| <button class="nav-button" data-nav="page-market"> |
| <svg viewBox="0 0 24 24"><path d="M3 17h2v-7H3v7zm4 0h2V7H7v10zm4 0h2V4h-2v13zm4 0h2V9h-2v8zm4 0h2V2h-2v15z"/></svg> |
| Market Intelligence |
| </button> |
| <button class="nav-button" data-nav="page-news"> |
| <svg viewBox="0 0 24 24"><path d="M21 6h-4V4a2 2 0 0 0-2-2H5C3.897 2 3 2.897 3 4v14a2 2 0 0 0 2 2h13a3 3 0 0 0 3-3V6zm-6-2v14H5V4h10zm4 16a1 1 0 0 1-1 1h-1V8h2v12z"/></svg> |
| News & Sentiment |
| </button> |
| <button class="nav-button" data-nav="page-chart"> |
| <svg viewBox="0 0 24 24"><path d="M5 3H3v18h18v-2H5z"/><path d="M7 15l3-3 4 4 6-6" stroke="currentColor" stroke-width="2" fill="none"/></svg> |
| Chart Lab |
| </button> |
| <button class="nav-button" data-nav="page-ai"> |
| <svg viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z"/></svg> |
| AI Advisor |
| </button> |
| <button class="nav-button" data-nav="page-datasets"> |
| <svg viewBox="0 0 24 24"><path d="M4 5v14l8 4 8-4V5l-8-4-8 4zm8-2.18L17.74 6 12 8.82 6.26 6 12 2.82zM6 8.97l6 2.82 6-2.82v3.06l-6 2.82-6-2.82V8.97zm0 5.03l6 2.82 6-2.82v3.2L12 20l-6-2.8v-3.2z"/></svg> |
| Datasets & Models |
| </button> |
| <button class="nav-button" data-nav="page-debug"> |
| <svg viewBox="0 0 24 24"><path d="M3 13h2v-2H3v2zm4 0h2v-2H7v2zm4 0h2v-2h-2v2zm4 0h2v-2h-2v2zm4-2v2h2v-2h-2z"/><path d="M5 5h14v4H5zm0 10h14v4H5z"/></svg> |
| System Health |
| </button> |
| <button class="nav-button" data-nav="page-settings"> |
| <svg viewBox="0 0 24 24"><path d="M19.14 12.94c.04-.31.06-.63.06-.94s-.02-.63-.06-.94l2.03-1.58a.5.5 0 0 0 .12-.64l-1.92-3.32a.5.5 0 0 0-.61-.22l-2.39.96a7.03 7.03 0 0 0-1.63-.94l-.36-2.54A.5.5 0 0 0 13.9 2h-3.8a.5.5 0 0 0-.5.42l-.36 2.54a7.03 7.03 0 0 0-1.63.94l-2.39-.96a.5.5 0 0 0-.61.22L2.69 8.53a.5.5 0 0 0 .12.64l2.03 1.58c-.04.31-.06.63-.06.94s.02.63.06.94l-2.03 1.58a.5.5 0 0 0-.12.64l1.92 3.32c.14.24.43.34.68.22l2.39-.96c.5.4 1.05.72 1.63.94l.36 2.54c.04.26.25.42.5.42h3.8c.25 0 .46-.16.5-.42l.36-2.54c.58-.22 1.13-.54 1.63-.94l2.39.96c.25.12.54.02.68-.22l1.92-3.32a.5.5 0 0 0-.12-.64l-2.03-1.58zM12 15.5a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7z"/></svg> |
| Settings |
| </button> |
| </nav> |
| <div class="sidebar-footer"> |
| Unified crypto intelligence console<br />Designed for HF Spaces |
| </div> |
| </aside> |
| <main class="main-area"> |
| <header class="topbar"> |
| <div> |
| <h1>Professional Intelligence Dashboard</h1> |
| <p class="text-muted">Real-time analytics, AI insights, and provider telemetry</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">Updated live from /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">Top performers by market cap</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">Powered by 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>Latest Headlines</h4> |
| <div data-drawer-news></div> |
| </div> |
| </div> |
| </section> |
|
|
| <section id="page-news" class="page"> |
| <div class="section-header"> |
| <h2 class="section-title">News & Sentiment</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>Impact</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-chart" class="page"> |
| <div class="section-header"> |
| <h2 class="section-title">Chart & Pattern Analysis</h2> |
| <div class="controls-bar"> |
| <select data-chart-symbol> |
| <option value="BTC">BTC</option> |
| <option value="ETH">ETH</option> |
| <option value="SOL">SOL</option> |
| </select> |
| <div> |
| <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="240"></canvas> |
| </div> |
| <div class="glass-card"> |
| <h4>Indicators</h4> |
| <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>Run AI Analysis</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">AI Trade 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">Swing</option> |
| <option value="long">Long Term</option> |
| </select> |
| </label> |
| <label>Risk Profile |
| <select name="risk"> |
| <option value="conservative">Conservative</option> |
| <option value="moderate">Moderate</option> |
| <option value="aggressive">Aggressive</option> |
| </select> |
| </label> |
| <label>Context |
| <textarea name="context" placeholder="Optional prompts for the advisor"></textarea> |
| </label> |
| </div> |
| <button class="primary" type="submit">Generate AI Advice</button> |
| </form> |
| <div data-ai-result class="ai-result"></div> |
| <div class="inline-message inline-info" data-ai-disclaimer> |
| This is experimental AI research, not financial advice. |
| </div> |
| </div> |
| </section> |
|
|
| <section id="page-datasets" class="page"> |
| <div class="section-header"> |
| <h2 class="section-title">Datasets & Models Lab</h2> |
| </div> |
| <div class="grid-two"> |
| <div class="glass-card"> |
| <h3>Datasets</h3> |
| <div class="table-wrapper"> |
| <table> |
| <thead> |
| <tr> |
| <th>Name</th> |
| <th>Type</th> |
| <th>Updated</th> |
| <th>Preview</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-debug" class="page"> |
| <div class="section-header"> |
| <h2 class="section-title">System Health & Debug Console</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-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> |
|
|
