File size: 7,971 Bytes
b190b45 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 |
<!DOCTYPE html>
<html lang="en" dir="ltr" data-theme="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Permissions-Policy" content="accelerometer=(), camera=(), geolocation=(), gyroscope=(), magnetometer=(), microphone=(), payment=(), usb=()">
<meta name="description" content="Crypto Monitor - Real-time Market Data">
<meta name="theme-color" content="#8B5CF6">
<title>Market | Crypto Monitor</title>
<link rel="icon" type="image/svg+xml" 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='%238B5CF6'/%3E%3Cstop offset='100%25' stop-color='%236D28D9'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='50' cy='50' r='45' fill='url(%23g)'/%3E%3Ctext x='50' y='65' font-size='50' text-anchor='middle' fill='white' font-weight='bold'%3EC%3C/text%3E%3C/svg%3E">
<!-- Cursor-Inspired Design System -->
<link rel="stylesheet" href="/static/shared/css/design-system-cursor.css">
<link rel="stylesheet" href="/static/shared/css/layout-cursor.css">
<link rel="stylesheet" href="/static/shared/css/components-cursor.css">
<link rel="stylesheet" href="/static/shared/css/animations-cursor.css">
<!-- Page-specific CSS -->
<link rel="stylesheet" href="/static/pages/market/market.css">
<link rel="stylesheet" href="/static/pages/market/market-improvements.css">
<!-- Error Suppressor - Suppress external service errors (load first) -->
<script src="/static/shared/js/utils/error-suppressor.js"></script>
<!-- API Configuration - Smart Fallback System -->
<script src="/static/js/api-config.js"></script>
<script>
// Initialize API client
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-container">
<aside id="sidebar-container"></aside>
<main class="main-content">
<header id="header-container"></header>
<div class="page-content">
<div class="page-header">
<div class="page-title">
<h1>
<span class="page-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"></polyline><polyline points="16 7 22 7 22 13"></polyline></svg>
</span>
Market
</h1>
<p class="page-subtitle">Real-time Cryptocurrency Market Data</p>
</div>
<div class="page-actions">
<div class="timeframe-btns" id="timeframe-btns">
<button class="btn btn-sm filter-btn" data-timeframe="1D" title="Top 10 Coins">Top 10</button>
<button class="btn btn-sm filter-btn" data-timeframe="7D" title="Top 25 Coins">Top 25</button>
<button class="btn btn-sm filter-btn active" data-timeframe="30D" title="Top 50 Coins">Top 50</button>
<button class="btn btn-sm filter-btn" data-timeframe="1Y" title="Top 100 Coins">Top 100</button>
</div>
<button id="refresh-btn" class="btn-icon" title="Refresh data" aria-label="Refresh data">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"></polyline><polyline points="1 20 1 14 7 14"></polyline><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path></svg>
</button>
<span id="last-update" class="last-update">Loading...</span>
</div>
</div>
<!-- Market Stats -->
<div class="market-stats" id="market-stats">
<div class="stat-item">
<span class="stat-label">Total Market Cap</span>
<span class="stat-value" id="total-mcap">--</span>
</div>
<div class="stat-item">
<span class="stat-label">24h Volume</span>
<span class="stat-value" id="total-volume">--</span>
</div>
<div class="stat-item">
<span class="stat-label">BTC Dominance</span>
<span class="stat-value" id="btc-dominance">--</span>
</div>
<div class="stat-item">
<span class="stat-label">Active Coins</span>
<span class="stat-value" id="active-coins">--</span>
</div>
</div>
<!-- Filters -->
<div class="filters-bar">
<div class="search-box">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
<input type="text" id="search-input" class="form-input" placeholder="Search coins..." />
</div>
<select id="sort-select" class="form-select">
<option value="rank">Rank</option>
<option value="price_desc">Price (High to Low)</option>
<option value="price_asc">Price (Low to High)</option>
<option value="change_desc">Change (Best)</option>
<option value="change_asc">Change (Worst)</option>
<option value="volume">Volume</option>
</select>
</div>
<!-- Market Table -->
<div class="table-container">
<table class="data-table" id="market-table">
<thead>
<tr>
<th>#</th>
<th>Coin</th>
<th class="text-right">Price</th>
<th class="text-right">24h %</th>
<th class="text-right">7d %</th>
<th class="text-right">Market Cap</th>
<th class="text-right">Volume (24h)</th>
<th class="text-center">Actions</th>
</tr>
</thead>
<tbody id="market-tbody">
<tr><td colspan="8" class="text-center"><div class="spinner"></div> Loading...</td></tr>
</tbody>
</table>
</div>
</div>
</main>
</div>
<!-- Coin Detail Modal -->
<div id="coin-modal" class="modal" aria-hidden="true">
<div class="modal-backdrop"></div>
<div class="modal-content modal-lg">
<div class="modal-header">
<h3 class="modal-title" id="modal-title">Coin Details</h3>
<button class="btn-icon modal-close" aria-label="Close">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
</button>
</div>
<div class="modal-body" id="modal-body">
<div class="loading-container"><div class="spinner"></div></div>
</div>
</div>
</div>
<div id="toast-container" aria-live="polite" aria-atomic="true"></div>
<!-- Initialize layout and page -->
<script type="module">
import { LayoutManager } from '/static/shared/js/core/layout-manager.js';
// Initialize layouts first
await LayoutManager.init('market');
// Then load improved page module
const { default: MarketPage } = await import('./market-improved.js');
window.marketPage = new MarketPage();
await window.marketPage.init();
</script>
</body>
</html>
|