175 lines
11 KiB
PHP
175 lines
11 KiB
PHP
<?php
|
|
require_once __DIR__ . '/includes/lang.php';
|
|
require_once __DIR__ . '/includes/header.php';
|
|
?>
|
|
<main class="container py-5">
|
|
<h1 class="mb-4 fw-bold"><?php echo __('market'); ?></h1>
|
|
<div class="card border-0 bg-transparent">
|
|
<div class="d-none d-md-block table-responsive rounded-4 shadow-lg" style="background: #0b0e11; border: 1px solid #2b3139;">
|
|
<table class="table table-dark table-hover mb-0 align-middle">
|
|
<thead style="background: #161a1e;">
|
|
<tr class="text-light-50 small border-0">
|
|
<th class="ps-4 py-4 border-0 fw-bold text-uppercase" style="letter-spacing: 1px; color: #ffffff !important;"><?= __('coin') ?></th>
|
|
<th class="py-4 border-0 fw-bold text-uppercase" style="letter-spacing: 1px; color: #ffffff !important;"><?= __('last_price') ?></th>
|
|
<th class="py-4 border-0 fw-bold text-uppercase" style="letter-spacing: 1px; color: #ffffff !important;"><?= __('change_24h') ?></th>
|
|
<th class="py-4 border-0 fw-bold text-uppercase" style="letter-spacing: 1px; color: #ffffff !important;"><?= __('market') ?></th>
|
|
<th class="text-end pe-4 py-4 border-0 fw-bold text-uppercase" style="letter-spacing: 1px; color: #ffffff !important;"><?= __('action') ?></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="border-0">
|
|
<?php
|
|
$vol_suffix = __('vol_unit');
|
|
$full_coins = [
|
|
['name' => __('bitcoin'), 'symbol' => 'BTC', 'price' => '65,432.10', 'change' => '+2.5%', 'vol' => '321' . $vol_suffix],
|
|
['name' => __('ethereum'), 'symbol' => 'ETH', 'price' => '3,456.78', 'change' => '+1.8%', 'vol' => '154' . $vol_suffix],
|
|
['name' => __('tether'), 'symbol' => 'USDT', 'price' => '1.00', 'change' => '+0.01%', 'vol' => '452' . $vol_suffix],
|
|
['name' => __('binance_coin'), 'symbol' => 'BNB', 'price' => '589.20', 'change' => '-0.5%', 'vol' => '12' . $vol_suffix],
|
|
['name' => __('solana'), 'symbol' => 'SOL', 'price' => '145.67', 'change' => '+5.2%', 'vol' => '38' . $vol_suffix],
|
|
['name' => __('ripple'), 'symbol' => 'XRP', 'price' => '0.62', 'change' => '-1.23%', 'vol' => '8' . $vol_suffix],
|
|
['name' => __('cardano'), 'symbol' => 'ADA', 'price' => '0.45', 'change' => '+0.8%', 'vol' => '4' . $vol_suffix],
|
|
['name' => __('dogecoin'), 'symbol' => 'DOGE', 'price' => '0.16', 'change' => '+3.4%', 'vol' => '11' . $vol_suffix],
|
|
['name' => __('polkadot'), 'symbol' => 'DOT', 'price' => '8.90', 'change' => '-2.1%', 'vol' => '2' . $vol_suffix],
|
|
['name' => __('polygon'), 'symbol' => 'MATIC', 'price' => '0.92', 'change' => '+1.5%', 'vol' => '3' . $vol_suffix],
|
|
['name' => __('avalanche'), 'symbol' => 'AVAX', 'price' => '45.20', 'change' => '+4.1%', 'vol' => '8' . $vol_suffix],
|
|
['name' => __('chainlink'), 'symbol' => 'LINK', 'price' => '18.40', 'change' => '+3.2%', 'vol' => '5' . $vol_suffix],
|
|
['name' => __('shiba_inu'), 'symbol' => 'SHIB', 'price' => '0.000027', 'change' => '-3.4%', 'vol' => '2' . $vol_suffix],
|
|
['name' => __('tron'), 'symbol' => 'TRX', 'price' => '0.12', 'change' => '+0.5%', 'vol' => '12' . $vol_suffix],
|
|
['name' => __('bitcoin_cash'), 'symbol' => 'BCH', 'price' => '456.20', 'change' => '+2.12%', 'vol' => '4.5' . $vol_suffix],
|
|
['name' => __('litecoin'), 'symbol' => 'LTC', 'price' => '84.50', 'change' => '+1.45%', 'vol' => '9' . $vol_suffix],
|
|
['name' => __('uniswap'), 'symbol' => 'UNI', 'price' => '7.20', 'change' => '-2.12%', 'vol' => '1.2' . $vol_suffix]
|
|
];
|
|
foreach ($full_coins as $coin):
|
|
?>
|
|
<tr style="border-bottom: 1px solid rgba(255,255,255,0.05); transition: all 0.2s;">
|
|
<td class="ps-4 py-3 border-0">
|
|
<div class="d-flex align-items-center">
|
|
<div class="bg-white p-1 rounded-circle me-3 shadow-sm" style="width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;">
|
|
<img src="<?php echo getCoinIcon($coin['symbol']); ?>" width="26" height="26" alt="<?= $coin['symbol'] ?>" onerror="handleIconError(this, '<?= $coin['symbol'] ?>')">
|
|
</div>
|
|
<div>
|
|
<div class="fw-bold text-white fs-5"><?php echo $lang === 'zh' ? __($coin['symbol']) : $coin['symbol']; ?></div>
|
|
<div class="text-muted small fw-medium"><?php echo $coin['name']; ?></div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="fw-bold text-white border-0 fs-5 price-val" data-symbol="<?php echo $coin['symbol']; ?>">$<?php echo $coin['price']; ?></td>
|
|
<td class="border-0 fw-bold fs-5 change-val <?php echo strpos($coin['change'], '+') !== false ? 'text-success' : 'text-danger'; ?>" data-symbol="<?php echo $coin['symbol']; ?>">
|
|
<?php echo $coin['change']; ?>
|
|
</td>
|
|
<td class="border-0" style="width: 150px; height: 60px;">
|
|
<canvas id="spark-<?= $coin['symbol'] ?>" style="max-width: 120px; height: 40px;"></canvas>
|
|
</td>
|
|
<td class="text-end pe-4 border-0">
|
|
<a href="trade.php?symbol=<?php echo $coin['symbol']; ?>" class="btn btn-primary btn-md px-4 rounded-pill fw-bold"><?= __('trade') ?></a>
|
|
</td>
|
|
</tr>
|
|
<?php endforeach; ?>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<!-- Mobile Market List -->
|
|
<div class="d-md-none">
|
|
<?php foreach ($full_coins as $coin): ?>
|
|
<div class="p-3 mb-2 rounded-4 bg-black bg-opacity-20 border border-secondary border-opacity-50 d-flex align-items-center justify-content-between" onclick="location.href='trade.php?symbol=<?= $coin['symbol'] ?>'">
|
|
<div class="d-flex align-items-center gap-2">
|
|
<img src="<?= getCoinIcon($coin['symbol']) ?>" width="32" height="32" class="rounded-circle bg-white p-1" alt="<?= $coin['symbol'] ?>" onerror="handleIconError(this, '<?= $coin['symbol'] ?>')">
|
|
<div>
|
|
<div class="fw-bold text-white"><?= $lang === 'zh' ? __($coin['symbol']) : $coin['symbol'] ?></div>
|
|
<div class="text-white-50 x-small"><?= $coin['vol'] ?></div>
|
|
</div>
|
|
</div>
|
|
<div class="text-center">
|
|
<div class="fw-bold text-white price-val" data-symbol="<?= $coin['symbol'] ?>">$<?= $coin['price'] ?></div>
|
|
</div>
|
|
<div class="text-end">
|
|
<div class="fw-bold change-val <?= strpos($coin['change'], '+') !== false ? 'text-success' : 'text-danger' ?>" data-symbol="<?= $coin['symbol'] ?>"><?= $coin['change'] ?></div>
|
|
</div>
|
|
</div>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<script>
|
|
async function updatePrices() {
|
|
const symbols = [<?php echo "'" . implode("','", array_map(function($c){return $c['symbol'];}, $full_coins)) . "'"; ?>];
|
|
for (const s of symbols) {
|
|
try {
|
|
const symbol = s === 'USDT' ? 'USDTDAI' : s + 'USDT';
|
|
const response = await fetch(`https://api.binance.com/api/v3/ticker/24hr?symbol=${symbol}`);
|
|
const data = await response.json();
|
|
|
|
const price = parseFloat(data.lastPrice);
|
|
const change = parseFloat(data.priceChangePercent);
|
|
|
|
const priceCells = document.querySelectorAll(`.price-val[data-symbol="${s}"]`);
|
|
const changeCells = document.querySelectorAll(`.change-val[data-symbol="${s}"]`);
|
|
|
|
const formattedPrice = price < 1 ? price.toFixed(4) : (price < 10 ? price.toFixed(3) : price.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2}));
|
|
const formattedChange = (change >= 0 ? '+' : '') + change.toFixed(2) + '%';
|
|
|
|
priceCells.forEach(cell => {
|
|
cell.textContent = '$' + formattedPrice;
|
|
});
|
|
|
|
changeCells.forEach(cell => {
|
|
cell.textContent = formattedChange;
|
|
cell.className = `border-0 fw-bold fs-5 change-val ${change >= 0 ? 'text-success' : 'text-danger'}`;
|
|
// Special handling for mobile view class
|
|
if (cell.parentElement.classList.contains('text-end')) {
|
|
cell.className = `fw-bold change-val ${change >= 0 ? 'text-success' : 'text-danger'}`;
|
|
}
|
|
});
|
|
} catch (err) {
|
|
console.error(`Failed to fetch price for ${s}:`, err);
|
|
}
|
|
}
|
|
}
|
|
|
|
async function initSparklines() {
|
|
updatePrices(); // Initial price update
|
|
setInterval(updatePrices, 10000); // Update every 10 seconds
|
|
|
|
const symbols = [<?php echo "'" . implode("','", array_map(function($c){return $c['symbol'];}, $full_coins)) . "'"; ?>];
|
|
for (const s of symbols) {
|
|
try {
|
|
const symbol = s === 'USDT' ? 'USDTDAI' : s + 'USDT';
|
|
const response = await fetch(`https://api.binance.com/api/v3/klines?symbol=${symbol}&interval=1h&limit=20`);
|
|
const data = await response.json();
|
|
const prices = data.map(d => parseFloat(d[4]));
|
|
const canvas = document.getElementById(`spark-${s}`);
|
|
if (!canvas) continue;
|
|
const ctx = canvas.getContext('2d');
|
|
const isUp = prices[prices.length - 1] >= prices[0];
|
|
new Chart(ctx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: new Array(prices.length).fill(''),
|
|
datasets: [{
|
|
data: prices,
|
|
borderColor: isUp ? '#0ecb81' : '#f6465d',
|
|
borderWidth: 2,
|
|
pointRadius: 0,
|
|
fill: true,
|
|
backgroundColor: isUp ? 'rgba(14, 203, 129, 0.1)' : 'rgba(246, 70, 93, 0.1)',
|
|
tension: 0.4
|
|
}]
|
|
},
|
|
options: {
|
|
plugins: { legend: { display: false }, tooltip: { enabled: false } },
|
|
scales: { x: { display: false }, y: { display: false } },
|
|
maintainAspectRatio: false,
|
|
responsive: true
|
|
}
|
|
});
|
|
} catch (err) {}
|
|
}
|
|
}
|
|
initSparklines();
|
|
</script>
|
|
<style>
|
|
.x-small { font-size: 11px; }
|
|
</style>
|
|
</main>
|
|
<?php require_once __DIR__ . '/includes/footer.php'; ?>
|