Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>🚀 Crypto Intelligence Hub - Pro Dashboard</title> | |
| <!-- Fonts --> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Manrope:wght@400;500;600;700;800;900&display=swap" rel="stylesheet"> | |
| <!-- Chart.js --> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script> | |
| <!-- Design System CSS --> | |
| <link rel="stylesheet" href="static/css/design-tokens.css" /> | |
| <link rel="stylesheet" href="static/css/glassmorphism.css" /> | |
| <link rel="stylesheet" href="static/css/design-system.css" /> | |
| <link rel="stylesheet" href="static/css/components.css" /> | |
| <link rel="stylesheet" href="static/css/dashboard.css" /> | |
| <link rel="stylesheet" href="static/css/pro-dashboard.css" /> | |
| <style> | |
| /* Enhanced Combobox Styles */ | |
| .combobox-wrapper { | |
| position: relative; | |
| width: 100%; | |
| } | |
| .combobox-input { | |
| width: 100%; | |
| padding: var(--space-3) var(--space-10) var(--space-3) var(--space-4); | |
| background: var(--input-bg); | |
| border: 1px solid var(--border-light); | |
| border-radius: var(--radius-sm); | |
| color: var(--text-strong); | |
| font-family: var(--font-main); | |
| font-size: var(--fs-base); | |
| backdrop-filter: var(--blur-md); | |
| transition: all var(--transition-fast); | |
| } | |
| .combobox-input:focus { | |
| outline: none; | |
| border-color: var(--brand-cyan); | |
| box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.30), var(--glow-cyan); | |
| background: rgba(15, 23, 42, 0.80); | |
| } | |
| .combobox-icon { | |
| position: absolute; | |
| right: var(--space-4); | |
| top: 50%; | |
| transform: translateY(-50%); | |
| pointer-events: none; | |
| color: var(--text-muted); | |
| } | |
| .combobox-dropdown { | |
| position: absolute; | |
| top: calc(100% + var(--space-2)); | |
| left: 0; | |
| right: 0; | |
| max-height: 320px; | |
| overflow-y: auto; | |
| background: var(--surface-glass-strong); | |
| border: 1px solid var(--border-medium); | |
| border-radius: var(--radius-md); | |
| backdrop-filter: var(--blur-xl); | |
| box-shadow: var(--shadow-xl); | |
| z-index: var(--z-dropdown); | |
| display: none; | |
| } | |
| .combobox-dropdown.active { | |
| display: block; | |
| animation: dropdown-fade-in 0.2s ease-out; | |
| } | |
| @keyframes dropdown-fade-in { | |
| from { | |
| opacity: 0; | |
| transform: translateY(-8px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .combobox-option { | |
| padding: var(--space-3) var(--space-4); | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-3); | |
| cursor: pointer; | |
| transition: all var(--transition-fast); | |
| border-bottom: 1px solid var(--border-subtle); | |
| } | |
| .combobox-option:last-child { | |
| border-bottom: none; | |
| } | |
| .combobox-option:hover { | |
| background: rgba(6, 182, 212, 0.15); | |
| border-left: 3px solid var(--brand-cyan); | |
| } | |
| .combobox-option.selected { | |
| background: rgba(6, 182, 212, 0.20); | |
| border-left: 3px solid var(--brand-cyan); | |
| } | |
| .combobox-option-icon { | |
| width: 32px; | |
| height: 32px; | |
| border-radius: 50%; | |
| flex-shrink: 0; | |
| } | |
| .combobox-option-text { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| gap: var(--space-1); | |
| } | |
| .combobox-option-name { | |
| font-weight: var(--fw-semibold); | |
| color: var(--text-strong); | |
| } | |
| .combobox-option-symbol { | |
| font-size: var(--fs-xs); | |
| color: var(--text-muted); | |
| text-transform: uppercase; | |
| } | |
| .combobox-option-price { | |
| font-size: var(--fs-sm); | |
| font-weight: var(--fw-medium); | |
| color: var(--text-soft); | |
| } | |
| /* Dynamic Sidebar Stats */ | |
| .sidebar-stats { | |
| margin-top: auto; | |
| padding: var(--space-4); | |
| background: rgba(255, 255, 255, 0.03); | |
| border-radius: var(--radius-md); | |
| border: 1px solid var(--border-subtle); | |
| } | |
| .sidebar-stat-item { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: var(--space-2) 0; | |
| border-bottom: 1px solid var(--border-subtle); | |
| } | |
| .sidebar-stat-item:last-child { | |
| border-bottom: none; | |
| } | |
| .sidebar-stat-label { | |
| font-size: var(--fs-xs); | |
| color: var(--text-muted); | |
| font-weight: var(--fw-medium); | |
| } | |
| .sidebar-stat-value { | |
| font-size: var(--fs-sm); | |
| font-weight: var(--fw-semibold); | |
| color: var(--text-strong); | |
| } | |
| .sidebar-stat-value.positive { | |
| color: var(--success); | |
| } | |
| .sidebar-stat-value.negative { | |
| color: var(--danger); | |
| } | |
| /* Enhanced Chart Container */ | |
| .chart-controls { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); | |
| gap: var(--space-4); | |
| margin-bottom: var(--space-6); | |
| padding: var(--space-5); | |
| background: var(--surface-glass); | |
| border: 1px solid var(--border-light); | |
| border-radius: var(--radius-lg); | |
| backdrop-filter: var(--blur-lg); | |
| } | |
| .chart-control-group { | |
| display: flex; | |
| flex-direction: column; | |
| gap: var(--space-2); | |
| } | |
| .chart-control-label { | |
| font-size: var(--fs-sm); | |
| font-weight: var(--fw-semibold); | |
| color: var(--text-normal); | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-2); | |
| } | |
| .chart-button-group { | |
| display: flex; | |
| gap: var(--space-2); | |
| flex-wrap: wrap; | |
| } | |
| .chart-button { | |
| flex: 1; | |
| min-width: 80px; | |
| padding: var(--space-2) var(--space-3); | |
| background: var(--surface-glass); | |
| border: 1px solid var(--border-light); | |
| border-radius: var(--radius-sm); | |
| color: var(--text-soft); | |
| font-size: var(--fs-sm); | |
| font-weight: var(--fw-medium); | |
| cursor: pointer; | |
| transition: all var(--transition-fast); | |
| } | |
| .chart-button:hover { | |
| background: var(--surface-glass-strong); | |
| border-color: var(--brand-cyan); | |
| color: var(--text-strong); | |
| } | |
| .chart-button.active { | |
| background: var(--gradient-primary); | |
| border-color: transparent; | |
| color: white; | |
| box-shadow: var(--glow-cyan); | |
| } | |
| /* Color Scheme Selector */ | |
| .color-scheme-selector { | |
| display: flex; | |
| gap: var(--space-2); | |
| } | |
| .color-scheme-option { | |
| width: 40px; | |
| height: 40px; | |
| border-radius: var(--radius-sm); | |
| border: 2px solid var(--border-light); | |
| cursor: pointer; | |
| transition: all var(--transition-fast); | |
| position: relative; | |
| } | |
| .color-scheme-option:hover { | |
| transform: scale(1.1); | |
| border-color: var(--brand-cyan); | |
| } | |
| .color-scheme-option.active { | |
| border-color: var(--brand-cyan); | |
| box-shadow: var(--glow-cyan); | |
| } | |
| .color-scheme-option.active::after { | |
| content: '✓'; | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| color: white; | |
| font-weight: bold; | |
| font-size: 18px; | |
| } | |
| .color-scheme-blue { | |
| background: linear-gradient(135deg, #3B82F6, #06B6D4); | |
| } | |
| .color-scheme-purple { | |
| background: linear-gradient(135deg, #8B5CF6, #EC4899); | |
| } | |
| .color-scheme-green { | |
| background: linear-gradient(135deg, #10B981, #34D399); | |
| } | |
| .color-scheme-orange { | |
| background: linear-gradient(135deg, #F97316, #FBBF24); | |
| } | |
| .color-scheme-rainbow { | |
| background: linear-gradient(135deg, #3B82F6, #8B5CF6, #EC4899, #F97316); | |
| } | |
| </style> | |
| </head> | |
| <body data-theme="dark"> | |
| <script> | |
| // Backend Configuration | |
| if (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1') { | |
| window.BACKEND_URL = `http://${window.location.hostname}:7860`; | |
| } else { | |
| window.BACKEND_URL = 'https://really-amin-datasourceforcryptocurrency.hf.space'; | |
| } | |
| </script> | |
| <div class="app-shell"> | |
| <!-- Dynamic Sidebar --> | |
| <aside class="sidebar" id="dynamicSidebar"> | |
| <div class="brand"> | |
| <div class="brand-icon"> | |
| <svg width="28" height="28" viewBox="0 0 24 24" fill="none"> | |
| <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> | |
| </div> | |
| <div class="brand-text"> | |
| <strong>Crypto Intelligence</strong> | |
| <span class="env-pill"> | |
| <svg width="12" height="12" viewBox="0 0 24 24" fill="none"> | |
| <circle cx="12" cy="12" r="3" fill="currentColor"/> | |
| </svg> | |
| Pro Edition | |
| </span> | |
| </div> | |
| </div> | |
| <nav class="nav" id="mainNav"> | |
| <button class="nav-button active" data-nav="page-overview"> | |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="none"> | |
| <path d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z" fill="currentColor"/> | |
| </svg> | |
| Overview | |
| </button> | |
| <button class="nav-button" data-nav="page-chart"> | |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="none"> | |
| <path d="M3 3v18h18" stroke="currentColor" stroke-width="2"/> | |
| <path d="M7 10l4-4 4 4 6-6" stroke="currentColor" stroke-width="2"/> | |
| </svg> | |
| Advanced Charts | |
| </button> | |
| <button class="nav-button" data-nav="page-compare"> | |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="none"> | |
| <path d="M3 17l6-6 4 4 8-8" stroke="currentColor" stroke-width="2"/> | |
| </svg> | |
| Compare Coins | |
| </button> | |
| <button class="nav-button" data-nav="page-portfolio"> | |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="none"> | |
| <path d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10l6 6v8a2 2 0 01-2 2z" stroke="currentColor" stroke-width="2"/> | |
| </svg> | |
| Portfolio | |
| </button> | |
| </nav> | |
| <!-- Dynamic Stats --> | |
| <div class="sidebar-stats" id="sidebarStats"> | |
| <div class="sidebar-stat-item"> | |
| <span class="sidebar-stat-label">Market Cap</span> | |
| <span class="sidebar-stat-value" id="sidebarMarketCap">Loading...</span> | |
| </div> | |
| <div class="sidebar-stat-item"> | |
| <span class="sidebar-stat-label">24h Volume</span> | |
| <span class="sidebar-stat-value" id="sidebarVolume">Loading...</span> | |
| </div> | |
| <div class="sidebar-stat-item"> | |
| <span class="sidebar-stat-label">BTC Price</span> | |
| <span class="sidebar-stat-value positive" id="sidebarBTC">Loading...</span> | |
| </div> | |
| <div class="sidebar-stat-item"> | |
| <span class="sidebar-stat-label">ETH Price</span> | |
| <span class="sidebar-stat-value positive" id="sidebarETH">Loading...</span> | |
| </div> | |
| </div> | |
| <div class="sidebar-footer"> | |
| <div class="footer-badge"> | |
| <svg width="14" height="14" viewBox="0 0 24 24" fill="none"> | |
| <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/> | |
| <path d="M12 8v4l3 3" stroke="currentColor" stroke-width="2"/> | |
| </svg> | |
| <span id="lastUpdate">Just now</span> | |
| </div> | |
| </div> | |
| </aside> | |
| <!-- Main Content --> | |
| <main class="main-area"> | |
| <!-- Top Bar --> | |
| <header class="topbar"> | |
| <div class="topbar-content"> | |
| <div class="topbar-icon"> | |
| <svg width="32" height="32" viewBox="0 0 24 24" fill="none"> | |
| <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> | |
| </div> | |
| <div class="topbar-text"> | |
| <h1> | |
| <span class="title-gradient">Professional</span> | |
| <span class="title-accent">Dashboard</span> | |
| </h1> | |
| <p class="text-muted"> | |
| <svg width="14" height="14" viewBox="0 0 24 24" fill="none" style="display: inline-block; vertical-align: middle; margin-right: 6px;"> | |
| <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/> | |
| <path d="M12 8v4l3 3" stroke="currentColor" stroke-width="2"/> | |
| </svg> | |
| Real-time market data with advanced analytics | |
| </p> | |
| </div> | |
| </div> | |
| <div class="status-group"> | |
| <div class="status-pill" data-state="ok"> | |
| <span class="status-dot"></span> | |
| <span class="status-label">API Connected</span> | |
| </div> | |
| <div class="status-pill" data-state="ok"> | |
| <span class="status-dot"></span> | |
| <span class="status-label">Live Data</span> | |
| </div> | |
| </div> | |
| </header> | |
| <div class="page-container"> | |
| <!-- Overview Page --> | |
| <section id="page-overview" class="page active"> | |
| <div class="section-header"> | |
| <h2 class="section-title">Market Overview</h2> | |
| <span class="chip">Real-time</span> | |
| </div> | |
| <!-- Stats Grid --> | |
| <div class="stats-grid" id="statsGrid"> | |
| <!-- Stats will be dynamically loaded --> | |
| </div> | |
| <!-- Main Chart --> | |
| <div class="glass-card" style="margin-top: var(--space-6);"> | |
| <div class="card-header"> | |
| <h4 class="card-title"> | |
| <svg width="20" height="20" viewBox="0 0 24 24" fill="none"> | |
| <path d="M3 3v18h18" stroke="currentColor" stroke-width="2"/> | |
| <path d="M7 10l4-4 4 4 6-6" stroke="currentColor" stroke-width="2"/> | |
| </svg> | |
| Market Trends - Top 10 Cryptocurrencies | |
| </h4> | |
| <div style="display: flex; gap: var(--space-2);"> | |
| <span class="badge badge-cyan">24H</span> | |
| <button class="btn-secondary btn-sm" onclick="refreshData()"> | |
| <svg width="14" height="14" viewBox="0 0 24 24" fill="none"> | |
| <path d="M1 4v6h6M23 20v-6h-6" stroke="currentColor" stroke-width="2"/> | |
| <path d="M20.49 9A9 9 0 005.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 013.51 15" stroke="currentColor" stroke-width="2"/> | |
| </svg> | |
| Refresh | |
| </button> | |
| </div> | |
| </div> | |
| <div class="chart-container" style="height: 450px;"> | |
| <canvas id="mainChart"></canvas> | |
| </div> | |
| </div> | |
| <!-- Top Coins Table --> | |
| <div class="glass-card" style="margin-top: var(--space-6);"> | |
| <div class="card-header"> | |
| <h4 class="card-title"> | |
| <svg width="20" height="20" viewBox="0 0 24 24" fill="none"> | |
| <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" fill="currentColor"/> | |
| </svg> | |
| Top Cryptocurrencies | |
| </h4> | |
| </div> | |
| <div class="table-container"> | |
| <table class="table"> | |
| <thead> | |
| <tr> | |
| <th>#</th> | |
| <th>Coin</th> | |
| <th>Price</th> | |
| <th>24h Change</th> | |
| <th>7d Change</th> | |
| <th>Market Cap</th> | |
| <th>Volume (24h)</th> | |
| <th>Last 7 Days</th> | |
| </tr> | |
| </thead> | |
| <tbody id="topCoinsTable"> | |
| <!-- Data will be loaded dynamically --> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Advanced Charts Page --> | |
| <section id="page-chart" class="page"> | |
| <div class="section-header"> | |
| <h2 class="section-title">Advanced Chart Analysis</h2> | |
| <span class="chip">Interactive</span> | |
| </div> | |
| <!-- Chart Controls --> | |
| <div class="chart-controls"> | |
| <div class="chart-control-group"> | |
| <label class="chart-control-label"> | |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="none"> | |
| <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/> | |
| </svg> | |
| Select Cryptocurrency | |
| </label> | |
| <div class="combobox-wrapper"> | |
| <input | |
| type="text" | |
| class="combobox-input" | |
| id="coinSelector" | |
| placeholder="Search for a coin..." | |
| autocomplete="off" | |
| /> | |
| <svg class="combobox-icon" width="16" height="16" viewBox="0 0 24 24" fill="none"> | |
| <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke="currentColor" stroke-width="2"/> | |
| </svg> | |
| <div class="combobox-dropdown" id="coinDropdown"> | |
| <!-- Options will be loaded dynamically --> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="chart-control-group"> | |
| <label class="chart-control-label"> | |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="none"> | |
| <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/> | |
| <path d="M12 8v4l3 3" stroke="currentColor" stroke-width="2"/> | |
| </svg> | |
| Timeframe | |
| </label> | |
| <div class="chart-button-group"> | |
| <button class="chart-button" data-timeframe="1">1D</button> | |
| <button class="chart-button active" data-timeframe="7">7D</button> | |
| <button class="chart-button" data-timeframe="30">30D</button> | |
| <button class="chart-button" data-timeframe="90">90D</button> | |
| <button class="chart-button" data-timeframe="365">1Y</button> | |
| </div> | |
| </div> | |
| <div class="chart-control-group"> | |
| <label class="chart-control-label"> | |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="none"> | |
| <path d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" stroke="currentColor" stroke-width="2"/> | |
| </svg> | |
| Color Scheme | |
| </label> | |
| <div class="color-scheme-selector"> | |
| <div class="color-scheme-option color-scheme-blue active" data-scheme="blue"></div> | |
| <div class="color-scheme-option color-scheme-purple" data-scheme="purple"></div> | |
| <div class="color-scheme-option color-scheme-green" data-scheme="green"></div> | |
| <div class="color-scheme-option color-scheme-orange" data-scheme="orange"></div> | |
| <div class="color-scheme-option color-scheme-rainbow" data-scheme="rainbow"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Price Chart --> | |
| <div class="glass-card"> | |
| <div class="card-header"> | |
| <h4 class="card-title" id="chartTitle">Bitcoin (BTC) Price Chart</h4> | |
| <div style="display: flex; gap: var(--space-2); align-items: center;"> | |
| <span class="badge badge-success" id="chartPrice">$0</span> | |
| <span class="badge badge-cyan" id="chartChange">0%</span> | |
| </div> | |
| </div> | |
| <div class="chart-container" style="height: 500px;"> | |
| <canvas id="priceChart"></canvas> | |
| </div> | |
| </div> | |
| <!-- Volume Chart --> | |
| <div class="glass-card" style="margin-top: var(--space-6);"> | |
| <div class="card-header"> | |
| <h4 class="card-title">Trading Volume</h4> | |
| </div> | |
| <div class="chart-container" style="height: 300px;"> | |
| <canvas id="volumeChart"></canvas> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Compare Page --> | |
| <section id="page-compare" class="page"> | |
| <div class="section-header"> | |
| <h2 class="section-title">Compare Cryptocurrencies</h2> | |
| <span class="chip">Side by Side</span> | |
| </div> | |
| <div class="alert alert-info"> | |
| <svg class="alert-icon" width="20" height="20" viewBox="0 0 24 24" fill="none"> | |
| <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/> | |
| <path d="M12 16v-4M12 8h.01" stroke="currentColor" stroke-width="2"/> | |
| </svg> | |
| <div class="alert-content"> | |
| <div class="alert-title">Compare up to 5 cryptocurrencies</div> | |
| <div class="alert-description">Select coins to compare their performance side by side</div> | |
| </div> | |
| </div> | |
| <div class="glass-card" style="margin-top: var(--space-6);"> | |
| <div class="card-header"> | |
| <h4 class="card-title">Comparison Chart</h4> | |
| </div> | |
| <div class="chart-container" style="height: 450px;"> | |
| <canvas id="compareChart"></canvas> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Portfolio Page --> | |
| <section id="page-portfolio" class="page"> | |
| <div class="section-header"> | |
| <h2 class="section-title">Portfolio Tracker</h2> | |
| <button class="btn-primary"> | |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="none"> | |
| <path d="M12 5v14M5 12h14" stroke="currentColor" stroke-width="2"/> | |
| </svg> | |
| Add Asset | |
| </button> | |
| </div> | |
| <div class="empty-state"> | |
| <div class="empty-state-icon">📊</div> | |
| <div class="empty-state-title">No Portfolio Data</div> | |
| <div class="empty-state-description"> | |
| Start tracking your crypto portfolio by adding your first asset | |
| </div> | |
| <button class="btn-primary" style="margin-top: var(--space-4);"> | |
| Get Started | |
| </button> | |
| </div> | |
| </section> | |
| </div> | |
| </main> | |
| </div> | |
| <!-- Load App JS --> | |
| <script type="module" src="static/js/app-pro.js"></script> | |
| </body> | |
| </html> | |