96 lines
6.0 KiB
PHP
96 lines
6.0 KiB
PHP
<?php include 'header.php'; ?>
|
|
|
|
<main style="padding: 40px 20px; background: #0b0e11; min-height: calc(100vh - 60px);">
|
|
<div style="max-width: 1200px; margin: 0 auto;">
|
|
<h1 style="color: white; margin-bottom: 30px;"><?php echo __('crypto_markets'); ?></h1>
|
|
|
|
<div style="display: flex; gap: 20px; margin-bottom: 30px;">
|
|
<div style="flex: 1; background: #1e2329; padding: 20px; border-radius: 12px; border: 1px solid #2b3139;">
|
|
<div style="color: #848e9c; font-size: 0.9rem;"><?php echo __('24h_volume'); ?></div>
|
|
<div style="font-size: 1.5rem; color: white; margin-top: 10px; font-weight: bold;">$ 84.23B</div>
|
|
</div>
|
|
<div style="flex: 1; background: #1e2329; padding: 20px; border-radius: 12px; border: 1px solid #2b3139;">
|
|
<div style="color: #848e9c; font-size: 0.9rem;"><?php echo __('fear_greed'); ?></div>
|
|
<div style="font-size: 1.5rem; color: #00c087; margin-top: 10px; font-weight: bold;">74 (Greed)</div>
|
|
</div>
|
|
<div style="flex: 1; background: #1e2329; padding: 20px; border-radius: 12px; border: 1px solid #2b3139;">
|
|
<div style="color: #848e9c; font-size: 0.9rem;"><?php echo __('btc_dominance'); ?></div>
|
|
<div style="font-size: 1.5rem; color: white; margin-top: 10px; font-weight: bold;">52.1%</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="background: #1e2329; border-radius: 16px; border: 1px solid #2b3139; overflow: hidden;">
|
|
<div style="padding: 20px 30px; border-bottom: 1px solid #2b3139; display: flex; gap: 30px;">
|
|
<span style="color: white; border-bottom: 2px solid var(--primary-color); padding-bottom: 15px; cursor: pointer;"><?php echo __('favorites'); ?></span>
|
|
<span style="color: #848e9c; cursor: pointer;"><?php echo __('all_crypto'); ?></span>
|
|
<span style="color: #848e9c; cursor: pointer;"><?php echo __('nav_spot'); ?></span>
|
|
<span style="color: #848e9c; cursor: pointer;"><?php echo __('nav_futures'); ?></span>
|
|
</div>
|
|
<table style="width: 100%; border-collapse: collapse;">
|
|
<thead style="background: #161a1e;">
|
|
<tr>
|
|
<th style="padding: 15px 30px; text-align: left; color: #848e9c; font-weight: normal; font-size: 0.9rem;"><?php echo __('asset'); ?></th>
|
|
<th style="padding: 15px 30px; text-align: right; color: #848e9c; font-weight: normal; font-size: 0.9rem;"><?php echo __('price'); ?></th>
|
|
<th style="padding: 15px 30px; text-align: right; color: #848e9c; font-weight: normal; font-size: 0.9rem;">24h Change</th>
|
|
<th style="padding: 15px 30px; text-align: right; color: #848e9c; font-weight: normal; font-size: 0.9rem;"><?php echo __('24h_high_low'); ?></th>
|
|
<th style="padding: 15px 30px; text-align: right; color: #848e9c; font-weight: normal; font-size: 0.9rem;"><?php echo __('trade_panel'); ?></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="market-list-all">
|
|
<!-- Filled by WS -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<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');
|
|
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 ? '#00c087' : '#f6465d';
|
|
const name = p.replace('USDT', '');
|
|
|
|
html += `
|
|
<tr style="border-bottom: 1px solid #2b3139; transition: background 0.2s; cursor: pointer;" onmouseover="this.style.background='rgba(255,255,255,0.02)'" onmouseout="this.style.background='transparent'">
|
|
<td style="padding: 20px 30px; display: flex; align-items: center; gap: 15px;">
|
|
<img src="https://raw.githubusercontent.com/spothq/cryptocurrency-icons/master/128/color/${name.toLowerCase()}.png" width="32" onerror="this.src='https://cdn-icons-png.flaticon.com/512/2585/2585274.png'">
|
|
<div>
|
|
<div style="color: white; font-weight: bold;">${name}</div>
|
|
<div style="color: #666; font-size: 0.8rem;">${name}/USDT</div>
|
|
</div>
|
|
</td>
|
|
<td style="padding: 20px 30px; text-align: right; color: white; font-weight: bold; font-family: monospace;">$ ${price}</td>
|
|
<td style="padding: 20px 30px; text-align: right; color: ${color}; font-weight: bold;">${change >= 0 ? '+' : ''}${change}%</td>
|
|
<td style="padding: 20px 30px; text-align: right; color: #848e9c; font-size: 0.85rem;">
|
|
<div>H: ${parseFloat(d.h).toFixed(2)}</div>
|
|
<div>L: ${parseFloat(d.l).toFixed(2)}</div>
|
|
</td>
|
|
<td style="padding: 20px 30px; text-align: right;">
|
|
<a href="spot.php?symbol=${p}" class="btn-primary" style="padding: 8px 20px; font-size: 0.85rem; border-radius: 6px; text-decoration: none;"><?php echo __('buy'); ?></a>
|
|
</td>
|
|
</tr>
|
|
`;
|
|
});
|
|
tbody.innerHTML = html;
|
|
}
|
|
</script>
|
|
|
|
<?php include 'footer.php'; ?>
|