106 lines
6.7 KiB
PHP
106 lines
6.7 KiB
PHP
<?php include 'header.php'; ?>
|
|
|
|
<main style="padding: 20px 0; background: #0b0e11; min-height: calc(100vh - 65px);">
|
|
<div class="container">
|
|
<h1 style="color: white; margin-bottom: 20px; font-size: 1.8rem;"><?php echo __('crypto_markets'); ?></h1>
|
|
|
|
<div class="market-stats-grid" style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-bottom: 25px;">
|
|
<div style="background: #1e2329; padding: 15px; border-radius: 12px; border: 1px solid #2b3139;">
|
|
<div style="color: #848e9c; font-size: 0.8rem;"><?php echo __('24h_volume'); ?></div>
|
|
<div style="font-size: 1.1rem; color: white; margin-top: 5px; font-weight: bold;">$ 84.2B</div>
|
|
</div>
|
|
<div style="background: #1e2329; padding: 15px; border-radius: 12px; border: 1px solid #2b3139;">
|
|
<div style="color: #848e9c; font-size: 0.8rem;"><?php echo __('fear_greed'); ?></div>
|
|
<div style="font-size: 1.1rem; color: #00c087; margin-top: 5px; font-weight: bold;">74 Greed</div>
|
|
</div>
|
|
<div style="background: #1e2329; padding: 15px; border-radius: 12px; border: 1px solid #2b3139;">
|
|
<div style="color: #848e9c; font-size: 0.8rem;"><?php echo __('btc_dominance'); ?></div>
|
|
<div style="font-size: 1.1rem; color: white; margin-top: 5px; font-weight: bold;">52.1%</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="background: #1e2329; border-radius: 16px; border: 1px solid #2b3139; overflow: hidden;">
|
|
<div class="market-tabs" style="padding: 10px 20px; border-bottom: 1px solid #2b3139; display: flex; gap: 25px; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch;">
|
|
<span style="color: white; border-bottom: 2px solid var(--primary-color); padding: 10px 0; cursor: pointer; font-size: 0.95rem; font-weight: 500;"><?php echo __('favorites'); ?></span>
|
|
<span style="color: #848e9c; padding: 10px 0; cursor: pointer; font-size: 0.95rem;"><?php echo __('all_crypto'); ?></span>
|
|
<span style="color: #848e9c; padding: 10px 0; cursor: pointer; font-size: 0.95rem;"><?php echo __('nav_spot'); ?></span>
|
|
<span style="color: #848e9c; padding: 10px 0; cursor: pointer; font-size: 0.95rem;"><?php echo __('nav_futures'); ?></span>
|
|
</div>
|
|
<div class="market-table-container">
|
|
<table style="width: 100%; border-collapse: collapse; min-width: 500px;">
|
|
<thead style="background: #161a1e;">
|
|
<tr>
|
|
<th style="padding: 12px 20px; text-align: left; color: #848e9c; font-weight: normal; font-size: 0.85rem;"><?php echo __('asset'); ?></th>
|
|
<th style="padding: 12px 20px; text-align: right; color: #848e9c; font-weight: normal; font-size: 0.85rem;"><?php echo __('price'); ?></th>
|
|
<th style="padding: 12px 20px; text-align: right; color: #848e9c; font-weight: normal; font-size: 0.85rem;">24h %</th>
|
|
<th class="desktop-only-cell" style="padding: 12px 20px; text-align: right; color: #848e9c; font-weight: normal; font-size: 0.85rem;"><?php echo __('24h_high_low'); ?></th>
|
|
<th class="desktop-only-cell" style="padding: 12px 20px; text-align: right; color: #848e9c; font-weight: normal; font-size: 0.85rem;"><?php echo __('trade_panel'); ?></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="market-list-all">
|
|
<!-- Filled by WS -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<style>
|
|
@media (max-width: 768px) {
|
|
.market-stats-grid { grid-template-columns: 1fr !important; }
|
|
.market-tabs::-webkit-scrollbar { display: none; }
|
|
.desktop-only-cell { display: none; }
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
const pairs = ['BTCUSDT', 'ETHUSDT', 'SOLUSDT', 'BNBUSDT', 'XRPUSDT', 'ADAUSDT', 'DOGEUSDT', 'DOTUSDT', 'LINKUSDT', 'AVAXUSDT', 'MATICUSDT', 'SHIBUSDT'];
|
|
const ws = new WebSocket('wss://stream.binance.com:9443/ws/' + pairs.map(p => p.toLowerCase() + '@ticker').join('/'));
|
|
const marketData = {};
|
|
|
|
ws.onmessage = (event) => {
|
|
const data = JSON.parse(event.data);
|
|
marketData[data.s] = data;
|
|
renderMarketList();
|
|
};
|
|
|
|
function renderMarketList() {
|
|
const tbody = document.getElementById('market-list-all');
|
|
if (!tbody) return;
|
|
let html = '';
|
|
pairs.forEach(p => {
|
|
const d = marketData[p];
|
|
if(!d) return;
|
|
|
|
const price = parseFloat(d.c).toLocaleString(undefined, {minimumFractionDigits: 2});
|
|
const change = parseFloat(d.P).toFixed(2);
|
|
const color = change >= 0 ? 'var(--success-color)' : 'var(--danger-color)';
|
|
const name = p.replace('USDT', '');
|
|
|
|
html += `
|
|
<tr style="border-bottom: 1px solid #2b3139; cursor: pointer;" onclick="location.href='spot.php?symbol=${p}'">
|
|
<td style="padding: 15px 20px; display: flex; align-items: center; gap: 12px;">
|
|
<img src="https://raw.githubusercontent.com/spothq/cryptocurrency-icons/master/128/color/${name.toLowerCase()}.png" width="28" onerror="this.src='https://cdn-icons-png.flaticon.com/512/2585/2585274.png'">
|
|
<div>
|
|
<div style="color: white; font-weight: bold; font-size: 0.95rem;">${name}</div>
|
|
<div style="color: #666; font-size: 0.75rem;">${name}/USDT</div>
|
|
</div>
|
|
</td>
|
|
<td style="padding: 15px 20px; text-align: right; color: white; font-weight: bold; font-family: monospace; font-size: 0.95rem;">$ ${price}</td>
|
|
<td style="padding: 15px 20px; text-align: right; color: ${color}; font-weight: bold; font-size: 0.95rem;">${change >= 0 ? '+' : ''}${change}%</td>
|
|
<td class="desktop-only-cell" style="padding: 15px 20px; text-align: right; color: #848e9c; font-size: 0.8rem;">
|
|
<div>H: ${parseFloat(d.h).toFixed(2)}</div>
|
|
<div>L: ${parseFloat(d.l).toFixed(2)}</div>
|
|
</td>
|
|
<td class="desktop-only-cell" style="padding: 15px 20px; text-align: right;">
|
|
<a href="spot.php?symbol=${p}" class="btn-primary" style="padding: 6px 15px; font-size: 0.8rem; border-radius: 6px; text-decoration: none;"><?php echo __('buy'); ?></a>
|
|
</td>
|
|
</tr>
|
|
`;
|
|
});
|
|
tbody.innerHTML = html;
|
|
}
|
|
</script>
|
|
|
|
<?php include 'footer.php'; ?>
|