|
|
<!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"> |
|
|
|
|
|
|
|
|
<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"> |
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="/static/pages/market/market.css"> |
|
|
<link rel="stylesheet" href="/static/pages/market/market-improvements.css"> |
|
|
|
|
|
|
|
|
<script src="/static/shared/js/utils/error-suppressor.js"></script> |
|
|
|
|
|
<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-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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<script type="module"> |
|
|
import { LayoutManager } from '/static/shared/js/core/layout-manager.js'; |
|
|
|
|
|
|
|
|
await LayoutManager.init('market'); |
|
|
|
|
|
|
|
|
const { default: MarketPage } = await import('./market-improved.js'); |
|
|
window.marketPage = new MarketPage(); |
|
|
await window.marketPage.init(); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
|
|
|
