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