184 lines
9.0 KiB
PHP
184 lines
9.0 KiB
PHP
<?php
|
||
include 'header.php';
|
||
?>
|
||
|
||
<!-- Hero Section -->
|
||
<section class="py-5" style="background: radial-gradient(circle at top right, #1e2329 0%, #0b0e11 100%); min-height: 70vh; display: flex; align-items: center;">
|
||
<div class="container">
|
||
<div class="row align-items-center">
|
||
<div class="col-lg-6">
|
||
<div class="badge bg-warning text-dark mb-3 px-3 py-2 fw-bold">#1 全球领先交易平台</div>
|
||
<h1 class="display-3 fw-bold text-white mb-4">简单、安全、<br>极速 <span class="text-warning">交易加密货币</span></h1>
|
||
<p class="lead text-secondary mb-5" style="max-width: 500px;">在 BitCrypto 开启您的交易之旅。支持 350+ 种加密货币，提供 100 倍杠杆合约及超低手续费现货交易。</p>
|
||
<div class="d-flex gap-3 flex-wrap">
|
||
<?php if(!isset($_SESSION['user_id'])): ?>
|
||
<a href="register.php" class="btn btn-warning btn-lg px-5 fw-bold py-3 shadow">立即开启</a>
|
||
<?php else: ?>
|
||
<a href="trade.php" class="btn btn-warning btn-lg px-5 fw-bold py-3 shadow">进入交易</a>
|
||
<?php endif; ?>
|
||
<a href="market.php" class="btn btn-outline-light btn-lg px-5 py-3">查看行情</a>
|
||
</div>
|
||
<div class="mt-5 d-flex gap-4 text-secondary small">
|
||
<div><i class="bi bi-shield-check text-success me-1"></i> 资产安全保障</div>
|
||
<div><i class="bi bi-lightning text-warning me-1"></i> 毫秒级撮合</div>
|
||
<div><i class="bi bi-headset text-info me-1"></i> 7/24 在线支持</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-6 d-none d-lg-block">
|
||
<div class="position-relative">
|
||
<img src="https://public.bnbstatic.com/image/cms/content/body_0b0e11.png" class="img-fluid floating-img" alt="Hero">
|
||
<div class="glass-card p-3 position-absolute top-0 start-0 translate-middle mt-5 ms-5 shadow-lg" style="width: 200px; background: rgba(14, 203, 129, 0.2); border: 1px solid rgba(14, 203, 129, 0.4);">
|
||
<div class="smaller text-success fw-bold mb-1">BTC/USDT</div>
|
||
<div class="fs-4 fw-bold text-white" id="hero-btc-price">--</div>
|
||
<div class="text-success smaller">+2.4% <i class="bi bi-graph-up"></i></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Stats Bar -->
|
||
<div class="container mt-n5 position-relative" style="z-index: 10;">
|
||
<div class="glass-card p-4 shadow-lg" style="background: rgba(30, 32, 38, 0.95); border: 1px solid #3b4149;">
|
||
<div class="row text-center g-4">
|
||
<div class="col-md-3 col-6">
|
||
<div class="text-secondary small mb-1">24h 交易量</div>
|
||
<div class="fs-4 fw-bold text-white">$76.2B</div>
|
||
</div>
|
||
<div class="col-md-3 col-6 border-start border-secondary border-md-0">
|
||
<div class="text-secondary small mb-1">主流币种</div>
|
||
<div class="fs-4 fw-bold text-white">350+</div>
|
||
</div>
|
||
<div class="col-md-3 col-6 border-start border-secondary">
|
||
<div class="text-secondary small mb-1">注册用户</div>
|
||
<div class="fs-4 fw-bold text-white">120M+</div>
|
||
</div>
|
||
<div class="col-md-3 col-6 border-start border-secondary">
|
||
<div class="text-secondary small mb-1">最低费率</div>
|
||
<div class="fs-4 fw-bold text-white">0.02%</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Market Table -->
|
||
<section id="markets" class="py-5 mt-5">
|
||
<div class="container">
|
||
<div class="d-flex justify-content-between align-items-end mb-4">
|
||
<div>
|
||
<h2 class="fw-bold text-white">热门币种</h2>
|
||
<p class="text-secondary mb-0">同步全球顶级交易所实时数据</p>
|
||
</div>
|
||
<a href="market.php" class="text-warning text-decoration-none fw-bold">更多市场 <i class="bi bi-arrow-right"></i></a>
|
||
</div>
|
||
|
||
<div class="glass-card overflow-hidden" style="border: 1px solid #2b2f36;">
|
||
<table class="table table-dark table-hover mb-0 align-middle">
|
||
<thead>
|
||
<tr class="text-secondary" style="background: #1e2329;">
|
||
<th class="ps-4 py-3">名称</th>
|
||
<th class="py-3">最新价</th>
|
||
<th class="py-3">24h 涨跌</th>
|
||
<th class="py-3 d-none d-md-table-cell">24h 最高 / 最低</th>
|
||
<th class="py-3 text-end pe-4">交易</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="market-tbody">
|
||
<tr><td colspan="5" class="text-center py-5"><div class="spinner-border text-warning"></div></td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Mobile Download Promo -->
|
||
<section class="py-5" style="background: #181a20;">
|
||
<div class="container">
|
||
<div class="row align-items-center">
|
||
<div class="col-md-6 text-center text-md-start mb-4 mb-md-0">
|
||
<h2 class="text-white fw-bold mb-3">随时随地 尽情交易</h2>
|
||
<p class="text-secondary mb-4">下载 BitCrypto 移动端 App，在手机上获取实时行情、管理资产、极速下单。</p>
|
||
<div class="d-flex gap-3 justify-content-center justify-content-md-start">
|
||
<button class="btn btn-outline-light px-4 py-2"><i class="bi bi-apple me-2"></i>App Store</button>
|
||
<button class="btn btn-outline-light px-4 py-2"><i class="bi bi-google-play me-2"></i>Google Play</button>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6 text-center">
|
||
<img src="https://public.bnbstatic.com/image/cms/content/body_mobile_app.png" class="img-fluid" style="max-height: 300px;">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<style>
|
||
.floating-img { animation: floating 3s ease-in-out infinite; }
|
||
@keyframes floating {
|
||
0% { transform: translateY(0px); }
|
||
50% { transform: translateY(-20px); }
|
||
100% { transform: translateY(0px); }
|
||
}
|
||
.mt-n5 { margin-top: -3rem !important; }
|
||
@media (max-width: 768px) {
|
||
.border-md-0 { border: 0 !important; }
|
||
}
|
||
</style>
|
||
|
||
<script>
|
||
function formatPrice(p) {
|
||
p = parseFloat(p);
|
||
if (p < 0.0001) return p.toFixed(8);
|
||
if (p < 0.01) return p.toFixed(6);
|
||
if (p < 1) return p.toFixed(4);
|
||
return p.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2});
|
||
}
|
||
|
||
async function loadMarket() {
|
||
try {
|
||
const res = await fetch('api.php?action=market_data');
|
||
const data = await res.json();
|
||
const tbody = document.getElementById('market-tbody');
|
||
let html = '';
|
||
|
||
data.slice(0, 10).forEach(coin => {
|
||
const changeClass = coin.change >= 0 ? 'text-success' : 'text-danger';
|
||
const pFormatted = formatPrice(coin.price);
|
||
|
||
if (coin.symbol === 'BTCUSDT') {
|
||
document.getElementById('hero-btc-price').textContent = '$' + pFormatted;
|
||
}
|
||
|
||
html += `
|
||
<tr style="cursor: pointer;" onclick="location.href='trade.php?symbol=${coin.symbol}'" class="border-bottom border-secondary">
|
||
<td class="ps-4 py-4">
|
||
<div class="d-flex align-items-center">
|
||
<img src="${coin.icon_url}" class="me-3 rounded-circle" style="width:32px; height:32px;" onerror="this.src='https://cryptologos.cc/logos/generic-coin-logo.png'">
|
||
<div>
|
||
<div class="fw-bold text-white fs-6">${coin.symbol.replace('USDT', '')}</div>
|
||
<div class="text-secondary smaller" style="font-size: 11px;">${coin.name}</div>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td><span class="fw-bold fs-5 text-white">$ ${pFormatted}</span></td>
|
||
<td><span class="${changeClass} fw-bold">${coin.change >= 0 ? '+' : ''}${coin.change}%</span></td>
|
||
<td class="d-none d-md-table-cell">
|
||
<div class="text-success small" style="font-size: 11px;">H: ${formatPrice(coin.high || coin.price*1.01)}</div>
|
||
<div class="text-danger small" style="font-size: 11px;">L: ${formatPrice(coin.low || coin.price*0.99)}</div>
|
||
</td>
|
||
<td class="text-end pe-4">
|
||
<a href="trade.php?symbol=${coin.symbol}" class="btn btn-sm btn-warning px-4 fw-bold">交易</a>
|
||
</td>
|
||
</tr>
|
||
`;
|
||
});
|
||
tbody.innerHTML = html;
|
||
} catch (e) {
|
||
console.error('Market load failed', e);
|
||
}
|
||
}
|
||
|
||
loadMarket();
|
||
setInterval(loadMarket, 3000);
|
||
</script>
|
||
|
||
<?php include 'footer.php'; ?>
|