| <!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/chart.js@4.4.0/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>
|
|
|
