|
|
<!DOCTYPE html>
|
|
|
<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>
|
|
|
|
|
|
|
|
|
<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">
|
|
|
|
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script>
|
|
|
|
|
|
|
|
|
<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>
|
|
|
|
|
|
.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);
|
|
|
}
|
|
|
|
|
|
|
|
|
.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);
|
|
|
}
|
|
|
|
|
|
|
|
|
.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 {
|
|
|
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>
|
|
|
|
|
|
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">
|
|
|
|
|
|
<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>
|
|
|
|
|
|
|
|
|
<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 class="main-area">
|
|
|
|
|
|
<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">
|
|
|
|
|
|
<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>
|
|
|
|
|
|
|
|
|
<div class="stats-grid" id="statsGrid">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<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>
|
|
|
|
|
|
|
|
|
<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">
|
|
|
|
|
|
</tbody>
|
|
|
</table>
|
|
|
</div>
|
|
|
</div>
|
|
|
</section>
|
|
|
|
|
|
|
|
|
<section id="page-chart" class="page">
|
|
|
<div class="section-header">
|
|
|
<h2 class="section-title">Advanced Chart Analysis</h2>
|
|
|
<span class="chip">Interactive</span>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<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">
|
|
|
|
|
|
</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>
|
|
|
|
|
|
|
|
|
<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>
|
|
|
|
|
|
|
|
|
<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>
|
|
|
|
|
|
|
|
|
<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>
|
|
|
|
|
|
|
|
|
<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>
|
|
|
|
|
|
|
|
|
<script type="module" src="static/js/app-pro.js"></script>
|
|
|
</body>
|
|
|
</html>
|
|
|
|
