| <!DOCTYPE html> |
| <html lang="en" data-theme="light"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <meta name="description" content="Crypto Intelligence Hub - Modern Dashboard with 40+ Data Sources"> |
| <title>Dashboard | Crypto Intelligence Hub</title> |
| |
| |
| <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%2322d3ee'/%3E%3Cstop offset='100%25' stop-color='%236366f1'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='50' cy='50' r='45' fill='url(%23g)'/%3E%3C/svg%3E"> |
| |
| |
| <link rel="stylesheet" href="/static/shared/css/theme-modern.css"> |
| <link rel="stylesheet" href="/static/shared/css/sidebar-modern.css"> |
| |
| <style> |
| |
| body { |
| margin: 0; |
| padding: 0; |
| background: var(--bg-secondary); |
| } |
| |
| .app-layout { |
| display: flex; |
| min-height: 100vh; |
| } |
| |
| .main-content { |
| flex: 1; |
| margin-left: var(--sidebar-width); |
| transition: margin-left var(--transition-base); |
| padding: var(--space-6); |
| } |
| |
| .sidebar-modern.collapsed ~ .main-content { |
| margin-left: var(--sidebar-collapsed-width); |
| } |
| |
| |
| .page-header { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| margin-bottom: var(--space-8); |
| padding-bottom: var(--space-6); |
| border-bottom: 1px solid var(--border-primary); |
| } |
| |
| .page-title h1 { |
| font-size: var(--text-4xl); |
| font-weight: var(--font-bold); |
| background: var(--accent-gradient); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| margin-bottom: var(--space-2); |
| } |
| |
| .page-subtitle { |
| color: var(--text-tertiary); |
| font-size: var(--text-lg); |
| } |
| |
| .page-actions { |
| display: flex; |
| gap: var(--space-3); |
| } |
| |
| .btn { |
| padding: var(--space-3) var(--space-6); |
| border-radius: var(--radius-lg); |
| font-weight: var(--font-semibold); |
| font-size: var(--text-sm); |
| cursor: pointer; |
| transition: all var(--transition-base); |
| border: none; |
| display: inline-flex; |
| align-items: center; |
| gap: var(--space-2); |
| } |
| |
| .btn-primary { |
| background: var(--accent-gradient); |
| color: white; |
| box-shadow: var(--shadow-md); |
| } |
| |
| .btn-primary:hover { |
| transform: translateY(-2px); |
| box-shadow: var(--shadow-lg); |
| } |
| |
| .btn-secondary { |
| background: var(--surface-secondary); |
| color: var(--text-primary); |
| border: 1px solid var(--border-primary); |
| } |
| |
| .btn-secondary:hover { |
| background: var(--surface-hover); |
| } |
| |
| |
| .stats-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); |
| gap: var(--space-6); |
| margin-bottom: var(--space-8); |
| } |
| |
| .stat-card { |
| background: var(--surface-primary); |
| border-radius: var(--radius-xl); |
| padding: var(--space-6); |
| border: 1px solid var(--border-primary); |
| box-shadow: var(--shadow-sm); |
| transition: all var(--transition-base); |
| position: relative; |
| overflow: hidden; |
| } |
| |
| .stat-card::before { |
| content: ''; |
| position: absolute; |
| top: 0; |
| left: 0; |
| right: 0; |
| height: 4px; |
| background: var(--accent-gradient); |
| opacity: 0; |
| transition: opacity var(--transition-fast); |
| } |
| |
| .stat-card:hover { |
| transform: translateY(-4px); |
| box-shadow: var(--shadow-md); |
| } |
| |
| .stat-card:hover::before { |
| opacity: 1; |
| } |
| |
| .stat-header { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| margin-bottom: var(--space-4); |
| } |
| |
| .stat-icon { |
| width: 48px; |
| height: 48px; |
| border-radius: var(--radius-lg); |
| background: var(--accent-gradient); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| box-shadow: 0 4px 12px rgba(34, 211, 238, 0.3); |
| } |
| |
| .stat-icon svg { |
| width: 24px; |
| height: 24px; |
| color: white; |
| } |
| |
| .stat-badge { |
| padding: var(--space-1) var(--space-3); |
| border-radius: var(--radius-full); |
| font-size: var(--text-xs); |
| font-weight: var(--font-bold); |
| text-transform: uppercase; |
| } |
| |
| .stat-badge.success { |
| background: rgba(16, 185, 129, 0.1); |
| color: var(--color-success); |
| } |
| |
| .stat-badge.warning { |
| background: rgba(245, 158, 11, 0.1); |
| color: var(--color-warning); |
| } |
| |
| .stat-value { |
| font-size: var(--text-4xl); |
| font-weight: var(--font-extrabold); |
| color: var(--text-primary); |
| margin-bottom: var(--space-2); |
| } |
| |
| .stat-label { |
| font-size: var(--text-sm); |
| color: var(--text-tertiary); |
| font-weight: var(--font-medium); |
| } |
| |
| .stat-change { |
| margin-top: var(--space-3); |
| display: flex; |
| align-items: center; |
| gap: var(--space-2); |
| font-size: var(--text-sm); |
| font-weight: var(--font-semibold); |
| } |
| |
| .stat-change.positive { |
| color: var(--color-success); |
| } |
| |
| .stat-change.negative { |
| color: var(--color-danger); |
| } |
| |
| |
| .card { |
| background: var(--surface-primary); |
| border-radius: var(--radius-xl); |
| border: 1px solid var(--border-primary); |
| box-shadow: var(--shadow-sm); |
| overflow: hidden; |
| margin-bottom: var(--space-6); |
| } |
| |
| .card-header { |
| padding: var(--space-6); |
| border-bottom: 1px solid var(--border-primary); |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| } |
| |
| .card-title { |
| font-size: var(--text-xl); |
| font-weight: var(--font-bold); |
| color: var(--text-primary); |
| display: flex; |
| align-items: center; |
| gap: var(--space-3); |
| } |
| |
| .card-body { |
| padding: var(--space-6); |
| } |
| |
| |
| .loading { |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| padding: var(--space-8); |
| color: var(--text-tertiary); |
| } |
| |
| .spinner { |
| width: 40px; |
| height: 40px; |
| border: 3px solid var(--border-primary); |
| border-top-color: var(--accent-primary); |
| border-radius: 50%; |
| animation: spin 1s linear infinite; |
| } |
| |
| @keyframes spin { |
| to { transform: rotate(360deg); } |
| } |
| |
| |
| .news-list { |
| display: flex; |
| flex-direction: column; |
| gap: var(--space-4); |
| } |
| |
| .news-item { |
| display: flex; |
| gap: var(--space-4); |
| padding: var(--space-4); |
| border-radius: var(--radius-lg); |
| transition: all var(--transition-fast); |
| cursor: pointer; |
| } |
| |
| .news-item:hover { |
| background: var(--surface-hover); |
| } |
| |
| .news-source { |
| font-size: var(--text-xs); |
| color: var(--text-tertiary); |
| font-weight: var(--font-semibold); |
| text-transform: uppercase; |
| } |
| |
| .news-title { |
| font-size: var(--text-base); |
| font-weight: var(--font-semibold); |
| color: var(--text-primary); |
| margin: var(--space-2) 0; |
| } |
| |
| .news-time { |
| font-size: var(--text-sm); |
| color: var(--text-tertiary); |
| } |
| |
| |
| .fng-gauge { |
| width: 200px; |
| height: 200px; |
| margin: 0 auto; |
| position: relative; |
| } |
| |
| .fng-circle { |
| width: 100%; |
| height: 100%; |
| border-radius: 50%; |
| background: conic-gradient( |
| from 180deg, |
| var(--color-danger) 0deg 45deg, |
| var(--color-warning) 45deg 90deg, |
| var(--color-info) 90deg 135deg, |
| var(--color-success) 135deg 180deg |
| ); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| } |
| |
| .fng-inner { |
| width: 80%; |
| height: 80%; |
| background: var(--bg-primary); |
| border-radius: 50%; |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| justify-content: center; |
| } |
| |
| .fng-value { |
| font-size: var(--text-5xl); |
| font-weight: var(--font-extrabold); |
| background: var(--accent-gradient); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| } |
| |
| .fng-label { |
| font-size: var(--text-sm); |
| color: var(--text-tertiary); |
| font-weight: var(--font-semibold); |
| margin-top: var(--space-2); |
| } |
| |
| |
| @media (max-width: 1024px) { |
| .main-content { |
| margin-left: 0; |
| } |
| |
| .sidebar-modern.collapsed ~ .main-content { |
| margin-left: 0; |
| } |
| } |
| |
| @media (max-width: 768px) { |
| .main-content { |
| padding: var(--space-4); |
| } |
| |
| .page-header { |
| flex-direction: column; |
| align-items: flex-start; |
| gap: var(--space-4); |
| } |
| |
| .stats-grid { |
| grid-template-columns: 1fr; |
| } |
| } |
| </style> |
| |
| <script src="/static/js/api-config.js"></script> |
| <script> |
| |
| window.apiReady = new Promise((resolve) => { |
| if (window.apiClient) { |
| console.log('✅ API Client ready'); |
| resolve(window.apiClient); |
| } else { |
| console.error('❌ API Client not loaded'); |
| } |
| }); |
| </script> |
|
|
| </head> |
| <body> |
| <div class="app-layout"> |
| |
| <div id="sidebar-container"></div> |
|
|
| |
| <main class="main-content"> |
| |
| <header class="page-header"> |
| <div class="page-title"> |
| <h1>Dashboard</h1> |
| <p class="page-subtitle">Real-time crypto market intelligence</p> |
| </div> |
| <div class="page-actions"> |
| <button class="btn btn-secondary" id="refresh-btn"> |
| <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| <path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"/> |
| <path d="M21 3v5h-5"/> |
| </svg> |
| Refresh |
| </button> |
| <button class="btn btn-primary" id="theme-toggle"> |
| <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| <circle cx="12" cy="12" r="4"/> |
| <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"/> |
| </svg> |
| Toggle Theme |
| </button> |
| </div> |
| </header> |
|
|
| |
| <div class="stats-grid"> |
| |
| <div class="stat-card" id="btc-card"> |
| <div class="stat-header"> |
| <div class="stat-icon"> |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| <path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/> |
| </svg> |
| </div> |
| <span class="stat-badge success">Live</span> |
| </div> |
| <div class="stat-value" id="btc-price">Loading...</div> |
| <div class="stat-label">Bitcoin (BTC)</div> |
| <div class="stat-change positive" id="btc-change"> |
| <span>↑</span> |
| <span>--</span> |
| </div> |
| </div> |
|
|
| |
| <div class="stat-card" id="eth-card"> |
| <div class="stat-header"> |
| <div class="stat-icon"> |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| <polygon points="12 2 3 12 12 16 21 12"/> |
| <polygon points="12 22 3 14 12 18 21 14"/> |
| </svg> |
| </div> |
| <span class="stat-badge success">Live</span> |
| </div> |
| <div class="stat-value" id="eth-price">Loading...</div> |
| <div class="stat-label">Ethereum (ETH)</div> |
| <div class="stat-change positive" id="eth-change"> |
| <span>↑</span> |
| <span>--</span> |
| </div> |
| </div> |
|
|
| |
| <div class="stat-card"> |
| <div class="stat-header"> |
| <div class="stat-icon"> |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| <path d="M3 3v18h18"/> |
| <path d="M18 7l-5 5-4-4-5 5"/> |
| </svg> |
| </div> |
| <span class="stat-badge warning">24h</span> |
| </div> |
| <div class="stat-value" id="total-cap">$2.1T</div> |
| <div class="stat-label">Total Market Cap</div> |
| <div class="stat-change positive"> |
| <span>↑</span> |
| <span>2.3%</span> |
| </div> |
| </div> |
|
|
| |
| <div class="stat-card"> |
| <div class="stat-header"> |
| <div class="stat-icon"> |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| <path d="M4 11a9 9 0 0 1 9 9"/> |
| <path d="M4 4a16 16 0 0 1 16 16"/> |
| <circle cx="5" cy="19" r="2"/> |
| </svg> |
| </div> |
| <span class="stat-badge success" id="api-status-badge">Online</span> |
| </div> |
| <div class="stat-value" id="api-success-rate">98%</div> |
| <div class="stat-label">API Success Rate</div> |
| <div class="stat-change positive" id="api-stats"> |
| <span>40+</span> |
| <span>sources active</span> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div style="display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-6);"> |
| |
| <div class="card"> |
| <div class="card-header"> |
| <div class="card-title"> |
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| <path d="M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-2 2Zm0 0a2 2 0 0 1-2-2v-9c0-1.1.9-2 2-2h2"/> |
| </svg> |
| Latest News |
| </div> |
| <span id="news-count" style="color: var(--text-tertiary); font-size: var(--text-sm);">Loading...</span> |
| </div> |
| <div class="card-body"> |
| <div class="news-list" id="news-list"> |
| <div class="loading"> |
| <div class="spinner"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="card"> |
| <div class="card-header"> |
| <div class="card-title"> |
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| <circle cx="12" cy="12" r="10"/> |
| <path d="M8 14s1.5 2 4 2 4-2 4-2"/> |
| </svg> |
| Fear & Greed |
| </div> |
| </div> |
| <div class="card-body"> |
| <div class="fng-gauge" id="fng-gauge"> |
| <div class="fng-circle"> |
| <div class="fng-inner"> |
| <div class="fng-value" id="fng-value">--</div> |
| <div class="fng-label" id="fng-label">Loading...</div> |
| </div> |
| </div> |
| </div> |
| <div style="text-align: center; margin-top: var(--space-6); color: var(--text-tertiary); font-size: var(--text-sm);" id="fng-source"> |
| Source: -- |
| </div> |
| </div> |
| </div> |
| </div> |
| </main> |
| </div> |
|
|
| |
| <script type="module"> |
| import apiClient from '/static/shared/js/api-client-comprehensive.js'; |
| import sidebarManager from '/static/shared/js/sidebar-manager.js'; |
| |
| |
| fetch('/static/shared/layouts/sidebar-modern.html') |
| .then(r => r.text()) |
| .then(html => { |
| document.getElementById('sidebar-container').innerHTML = html; |
| }); |
| |
| |
| document.getElementById('theme-toggle').addEventListener('click', () => { |
| const html = document.documentElement; |
| const current = html.getAttribute('data-theme') || 'light'; |
| const next = current === 'light' ? 'dark' : 'light'; |
| html.setAttribute('data-theme', next); |
| localStorage.setItem('theme', next); |
| }); |
| |
| |
| const savedTheme = localStorage.getItem('theme') || 'light'; |
| document.documentElement.setAttribute('data-theme', savedTheme); |
| |
| |
| async function loadDashboard() { |
| try { |
| |
| const btc = await apiClient.getMarketPrice('bitcoin'); |
| document.getElementById('btc-price').textContent = `$${btc.price.toLocaleString()}`; |
| if (btc.change24h) { |
| const changeEl = document.getElementById('btc-change'); |
| changeEl.innerHTML = `<span>${btc.change24h > 0 ? '↑' : '↓'}</span><span>${Math.abs(btc.change24h).toFixed(2)}%</span>`; |
| changeEl.className = `stat-change ${btc.change24h > 0 ? 'positive' : 'negative'}`; |
| } |
| |
| |
| const eth = await apiClient.getMarketPrice('ethereum'); |
| document.getElementById('eth-price').textContent = `$${eth.price.toLocaleString()}`; |
| if (eth.change24h) { |
| const changeEl = document.getElementById('eth-change'); |
| changeEl.innerHTML = `<span>${eth.change24h > 0 ? '↑' : '↓'}</span><span>${Math.abs(eth.change24h).toFixed(2)}%</span>`; |
| changeEl.className = `stat-change ${eth.change24h > 0 ? 'positive' : 'negative'}`; |
| } |
| |
| |
| const fng = await apiClient.getSentiment(); |
| document.getElementById('fng-value').textContent = fng.value; |
| document.getElementById('fng-label').textContent = fng.classification; |
| document.getElementById('fng-source').textContent = `Source: ${fng.source}`; |
| |
| |
| const news = await apiClient.getNews(10); |
| document.getElementById('news-count').textContent = `${news.length} articles`; |
| const newsList = document.getElementById('news-list'); |
| newsList.innerHTML = news.map(item => ` |
| <div class="news-item" onclick="window.open('${item.link}', '_blank')"> |
| <div style="flex: 1;"> |
| <div class="news-source">${item.source}</div> |
| <div class="news-title">${item.title}</div> |
| <div class="news-time">${new Date(item.publishedAt || Date.now()).toLocaleString()}</div> |
| </div> |
| </div> |
| `).join(''); |
| |
| |
| const stats = apiClient.getStats(); |
| document.getElementById('api-success-rate').textContent = stats.successRate; |
| document.getElementById('api-stats').innerHTML = `<span>${stats.successful}/${stats.total}</span><span>requests</span>`; |
| |
| console.log('✅ Dashboard loaded successfully'); |
| console.log('API Stats:', stats); |
| } catch (error) { |
| console.error('❌ Failed to load dashboard:', error); |
| } |
| } |
| |
| |
| document.getElementById('refresh-btn').addEventListener('click', () => { |
| apiClient.clearCache(); |
| loadDashboard(); |
| }); |
| |
| |
| loadDashboard(); |
| |
| |
| setInterval(() => { |
| loadDashboard(); |
| }, 120000); |
| </script> |
| </body> |
| </html> |
|
|
|
|
