94 lines
4.6 KiB
PHP
94 lines
4.6 KiB
PHP
<?php
|
|
require_once 'includes/header.php';
|
|
?>
|
|
|
|
<div class="container my-5">
|
|
<div class="d-flex justify-content-between align-items-end mb-5 flex-wrap gap-4">
|
|
<div>
|
|
<h1 class="display-4 fw-bold mb-2 text-white"><?php echo mt('Markets'); ?></h1>
|
|
<p class="text-muted fs-5 mb-0"><?php echo mt('Real-time updates from global exchanges'); ?></p>
|
|
</div>
|
|
<div class="input-group w-auto" style="min-width: 300px;">
|
|
<span class="input-group-text bg-dark border-secondary text-muted"><i class="fas fa-search"></i></span>
|
|
<input type="text" id="market-search" class="form-control bg-dark text-white border-secondary shadow-none" placeholder="<?php echo mt('Search assets...'); ?>">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card bg-dark border-secondary p-0 shadow-lg" style="border-radius: 20px; overflow: hidden;">
|
|
<div class="table-responsive">
|
|
<table class="table table-dark table-hover mb-0 align-middle">
|
|
<thead>
|
|
<tr class="text-muted" style="border-bottom: 2px solid #2b2f36;">
|
|
<th class="ps-4 py-3"><?php echo mt('Asset'); ?></th>
|
|
<th class="py-3"><?php echo mt('Price'); ?></th>
|
|
<th class="py-3"><?php echo mt('24h Change'); ?></th>
|
|
<th class="py-3">24h <?php echo mt('High'); ?>/<?php echo mt('Low'); ?></th>
|
|
<th class="py-3"><?php echo mt('Action'); ?></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="market-table-body">
|
|
<!-- Loaded via JS -->
|
|
<tr>
|
|
<td colspan="5" class="text-center py-5">
|
|
<div class="spinner-border text-primary"></div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
async function loadMarkets() {
|
|
try {
|
|
const response = await fetch('api/market_api.php');
|
|
const result = await response.json();
|
|
if (result.success) {
|
|
const data = result.data;
|
|
const tbody = document.getElementById('market-table-body');
|
|
const search = document.getElementById('market-search').value.toUpperCase();
|
|
let html = '';
|
|
|
|
for (const [symbol, coin] of Object.entries(data)) {
|
|
if (search && !symbol.includes(search) && !coin.name.toUpperCase().includes(search)) continue;
|
|
|
|
const changeClass = coin.change >= 0 ? 'text-success' : 'text-danger';
|
|
const changeSign = coin.change >= 0 ? '+' : '';
|
|
|
|
html += `
|
|
<tr class="border-secondary" style="cursor: pointer;" onclick="window.location.href='trade.php?symbol=${symbol}'">
|
|
<td class="ps-4 py-4">
|
|
<div class="d-flex align-items-center">
|
|
<img src="${coin.icon}" width="32" class="me-3" onerror="this.src='https://static.okx.com/cdn/oksupport/asset/currency/icon/generic.png'">
|
|
<div>
|
|
<div class="fw-bold fs-6 text-white">${symbol}</div>
|
|
<div class="small text-muted">${coin.name}</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="fw-bold text-white">$${coin.price.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 4})}</td>
|
|
<td class="${changeClass} fw-bold">${changeSign}${coin.change.toFixed(2)}%</td>
|
|
<td class="text-muted small">
|
|
<div>H: $${(coin.price * 1.05).toFixed(2)}</div>
|
|
<div>L: $${(coin.price * 0.95).toFixed(2)}</div>
|
|
</td>
|
|
<td class="pe-4">
|
|
<a href="trade.php?symbol=${symbol}" class="btn btn-primary btn-sm px-4 fw-bold border-0" style="background-color: var(--okx-blue); border-radius: 8px;">${t('Trade')}</a>
|
|
</td>
|
|
</tr>
|
|
`;
|
|
}
|
|
tbody.innerHTML = html || '<tr><td colspan="5" class="text-center py-5 text-muted">' + t('No assets found') + '</td></tr>';
|
|
}
|
|
} catch (e) {
|
|
console.error(e);
|
|
}
|
|
}
|
|
|
|
document.getElementById('market-search').addEventListener('input', loadMarkets);
|
|
loadMarkets();
|
|
setInterval(loadMarkets, 3000);
|
|
</script>
|
|
|
|
<?php require_once 'includes/footer.php'; ?>
|