365 lines
14 KiB
PHP
365 lines
14 KiB
PHP
<?php
|
|
require_once 'includes/header.php';
|
|
|
|
// Carousel items - 5 crypto related images
|
|
$carousel_items = [
|
|
[
|
|
'image_url' => 'https://images.pexels.com/photos/843700/pexels-photo-843700.jpeg?auto=compress&cs=tinysrgb&w=1600',
|
|
'title' => 'The Future of Digital Finance',
|
|
'description' => 'Trade over 500+ cryptocurrencies with the world\'s most trusted exchange.'
|
|
],
|
|
[
|
|
'image_url' => 'https://images.pexels.com/photos/6771574/pexels-photo-6771574.jpeg?auto=compress&cs=tinysrgb&w=1600',
|
|
'title' => 'Institutional-Grade Security',
|
|
'description' => 'Your assets are protected by industry-leading cold storage and multi-layer encryption.'
|
|
],
|
|
[
|
|
'image_url' => 'https://images.pexels.com/photos/6770610/pexels-photo-6770610.jpeg?auto=compress&cs=tinysrgb&w=1600',
|
|
'title' => 'Advanced Trading Tools',
|
|
'description' => 'Experience seamless trading with up to 125x leverage on Perpetual Contracts.'
|
|
],
|
|
[
|
|
'image_url' => 'https://images.pexels.com/photos/7567443/pexels-photo-7567443.jpeg?auto=compress&cs=tinysrgb&w=1600',
|
|
'title' => 'Global Compliance',
|
|
'description' => 'BITCrypto works closely with regulators to ensure a safe and transparent trading environment.'
|
|
],
|
|
[
|
|
'image_url' => 'https://images.pexels.com/photos/6771611/pexels-photo-6771611.jpeg?auto=compress&cs=tinysrgb&w=1600',
|
|
'title' => '24/7 Professional Support',
|
|
'description' => 'Our dedicated support team is available around the clock to assist you with any questions.'
|
|
],
|
|
];
|
|
?>
|
|
|
|
<style>
|
|
.hero-section {
|
|
position: relative;
|
|
background-color: #000;
|
|
overflow: hidden;
|
|
}
|
|
.carousel-item {
|
|
height: 650px;
|
|
}
|
|
.hero-overlay {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(to right, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.9) 100%);
|
|
z-index: 1;
|
|
}
|
|
.hero-content {
|
|
position: relative;
|
|
z-index: 2;
|
|
padding-top: 180px;
|
|
}
|
|
.hero-img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
opacity: 0.6;
|
|
}
|
|
.btn-large {
|
|
padding: 15px 45px;
|
|
font-size: 1.2rem;
|
|
font-weight: 600;
|
|
border-radius: 12px;
|
|
}
|
|
.stat-card {
|
|
background-color: var(--card-bg);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 16px;
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
cursor: pointer;
|
|
}
|
|
.stat-card:hover {
|
|
border-color: var(--okx-blue);
|
|
transform: translateY(-8px);
|
|
box-shadow: 0 10px 30px rgba(0, 70, 255, 0.1);
|
|
}
|
|
.crypto-icon-sm {
|
|
width: 28px;
|
|
height: 28px;
|
|
margin-right: 12px;
|
|
}
|
|
.change-up { color: #0ecb81; }
|
|
.change-down { color: #f6465d; }
|
|
|
|
.market-table-section {
|
|
background-color: var(--bg-color);
|
|
padding: 100px 0;
|
|
}
|
|
.market-table {
|
|
border-collapse: separate;
|
|
border-spacing: 0 8px;
|
|
}
|
|
.market-table th { color: #848e9c; border-bottom: none; padding: 20px 15px; font-weight: 500; }
|
|
.market-table tr { background-color: transparent; transition: all 0.2s; }
|
|
.market-table tr:hover { background-color: rgba(255,255,255,0.02); }
|
|
.market-table td { border-bottom: 1px solid var(--border-color); padding: 25px 15px; vertical-align: middle; }
|
|
|
|
.download-section {
|
|
padding: 120px 0;
|
|
background-color: #0b0e11;
|
|
}
|
|
.download-card {
|
|
background: linear-gradient(135deg, #1e2329 0%, #0046ff 100%);
|
|
border-radius: 40px;
|
|
padding: 80px;
|
|
border: 1px solid rgba(255,255,255,0.1);
|
|
position: relative;
|
|
overflow: hidden;
|
|
color: white;
|
|
}
|
|
.qr-code-box {
|
|
background: white;
|
|
padding: 15px;
|
|
border-radius: 20px;
|
|
display: inline-block;
|
|
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
|
|
}
|
|
.mobile-app-img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
position: relative;
|
|
z-index: 1;
|
|
animation: floatMobile 6s ease-in-out infinite;
|
|
filter: drop-shadow(0 30px 50px rgba(0,0,0,0.5));
|
|
}
|
|
@keyframes floatMobile {
|
|
0%, 100% { transform: translateY(0) rotateY(-5deg); }
|
|
50% { transform: translateY(-25px) rotateY(5deg); }
|
|
}
|
|
|
|
.platform-btn {
|
|
background: rgba(255,255,255,0.1);
|
|
backdrop-filter: blur(10px);
|
|
border: 1px solid rgba(255,255,255,0.2);
|
|
color: white;
|
|
padding: 12px 25px;
|
|
border-radius: 12px;
|
|
font-weight: 600;
|
|
transition: all 0.3s;
|
|
text-decoration: none;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
.platform-btn:hover {
|
|
background: rgba(255,255,255,0.2);
|
|
color: white;
|
|
transform: translateY(-3px);
|
|
}
|
|
.customer-service {
|
|
position: fixed;
|
|
bottom: 30px;
|
|
right: 30px;
|
|
z-index: 1000;
|
|
width: 60px;
|
|
height: 60px;
|
|
background-color: var(--okx-blue);
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
font-size: 24px;
|
|
box-shadow: 0 10px 25px rgba(0, 70, 255, 0.4);
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
}
|
|
.customer-service:hover {
|
|
transform: scale(1.1);
|
|
background-color: #0037cc;
|
|
}
|
|
</style>
|
|
|
|
<!-- Hero Section -->
|
|
<section class="hero-section">
|
|
<div id="heroCarousel" class="carousel slide carousel-fade" data-bs-ride="carousel" data-bs-interval="5000">
|
|
<div class="carousel-inner">
|
|
<?php foreach ($carousel_items as $index => $item): ?>
|
|
<div class="carousel-item <?php echo $index === 0 ? 'active' : ''; ?>">
|
|
<img src="<?php echo $item['image_url']; ?>" class="hero-img" alt="Banner">
|
|
<div class="hero-overlay"></div>
|
|
<div class="container hero-content text-center">
|
|
<div class="row justify-content-center">
|
|
<div class="col-lg-10">
|
|
<h1 class="display-1 fw-bold mb-4 text-white"><?php echo t($item['title']); ?></h1>
|
|
<p class="lead mb-5 text-light opacity-75 fs-3"><?php echo t($item['description']); ?></p>
|
|
<div class="d-flex gap-4 justify-content-center">
|
|
<a href="register.php" class="btn btn-primary btn-large" style="background-color: var(--okx-blue); border: none;"><?php echo mt('Register'); ?></a>
|
|
<a href="trade.php" class="btn btn-outline-light btn-large" style="border-radius: 12px;"><?php echo mt('Trade Now'); ?></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
<button class="carousel-control-prev" type="button" data-bs-target="#heroCarousel" data-bs-slide="prev">
|
|
<span class="carousel-control-prev-icon"></span>
|
|
</button>
|
|
<button class="carousel-control-next" type="button" data-bs-target="#heroCarousel" data-bs-slide="next">
|
|
<span class="carousel-control-next-icon"></span>
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Quick Stats -->
|
|
<section class="py-5" style="margin-top: -80px; position: relative; z-index: 5;">
|
|
<div class="container">
|
|
<div class="row g-4" id="stat-cards">
|
|
<!-- Populated by JS -->
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Market Trends -->
|
|
<section class="market-table-section">
|
|
<div class="container">
|
|
<div class="d-flex justify-content-between align-items-end mb-5">
|
|
<div>
|
|
<h2 class="display-4 fw-bold mb-3"><?php echo mt('Real-time Markets'); ?></h2>
|
|
<p class="text-muted mb-0 fs-5">Join millions of traders and start your crypto journey today.</p>
|
|
</div>
|
|
<a href="market.php" class="text-primary text-decoration-none fw-bold fs-5">View all markets <i class="fas fa-arrow-right ms-2"></i></a>
|
|
</div>
|
|
|
|
<div class="table-responsive">
|
|
<table class="table table-dark market-table">
|
|
<thead>
|
|
<tr>
|
|
<th><?php echo mt('Asset Name'); ?></th>
|
|
<th><?php echo mt('Last Price'); ?></th>
|
|
<th><?php echo mt('24h Change'); ?></th>
|
|
<th><?php echo mt('Market Cap'); ?></th>
|
|
<th class="text-end"><?php echo mt('Trade Now'); ?></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="market-body">
|
|
<!-- Populated by JS -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Download Section -->
|
|
<section class="download-section">
|
|
<div class="container">
|
|
<div class="download-card">
|
|
<div class="row align-items-center">
|
|
<div class="col-lg-6 relative z-1">
|
|
<h2 class="display-3 fw-bold mb-4"><?php echo mt('Trade Anywhere'); ?></h2>
|
|
<p class="lead mb-5 fs-4 opacity-75"><?php echo mt('Download app'); ?></p>
|
|
|
|
<div class="d-flex align-items-center gap-5 mb-5">
|
|
<div class="qr-code-box">
|
|
<img src="https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=https://bitcrypto.com" alt="QR Code" style="width: 140px;">
|
|
</div>
|
|
<div class="d-flex flex-column gap-3">
|
|
<div class="d-flex gap-3">
|
|
<a href="#" class="platform-btn"><i class="fab fa-apple fs-4"></i> App Store</a>
|
|
<a href="#" class="platform-btn"><i class="fab fa-google-play fs-4"></i> Play Store</a>
|
|
</div>
|
|
<div class="d-flex gap-3">
|
|
<a href="#" class="platform-btn"><i class="fab fa-windows fs-4"></i> Windows</a>
|
|
<a href="#" class="platform-btn"><i class="fab fa-linux fs-4"></i> Linux</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6 text-center">
|
|
<img src="https://static.okx.com/cdn/assets/imgs/2311/65314C93F16A34F5.png?x-oss-process=image/format,webp" class="mobile-app-img" alt="Mobile App" style="width: 85%;">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Online Customer Service -->
|
|
<div class="customer-service" onclick="window.location.href='page.php?slug=help-center'">
|
|
<i class="fas fa-comment-dots"></i>
|
|
</div>
|
|
|
|
<script>
|
|
async function updateMarketData() {
|
|
try {
|
|
const response = await fetch('api/market_api.php');
|
|
const result = await response.json();
|
|
if (result.success) {
|
|
const coins = result.data;
|
|
const symbols = ['BTC', 'ETH', 'SOL', 'OKB'];
|
|
|
|
// Update Stat Cards
|
|
let statHtml = '';
|
|
symbols.forEach(symbol => {
|
|
const coin = coins[symbol];
|
|
const changeClass = coin.change >= 0 ? 'change-up' : 'change-down';
|
|
const changeSign = coin.change >= 0 ? '+' : '';
|
|
statHtml += `
|
|
<div class="col-md-3">
|
|
<div class="stat-card p-4">
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
<div class="d-flex align-items-center">
|
|
<img src="${coin.icon}" class="crypto-icon-sm">
|
|
<span class="fw-bold fs-5">${symbol}</span>
|
|
</div>
|
|
<span class="${changeClass} fw-bold">
|
|
${changeSign}${coin.change.toFixed(2)}%
|
|
</span>
|
|
</div>
|
|
<h3 class="mb-0 fw-bold">$${coin.price.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2})}</h3>
|
|
</div>
|
|
</div>
|
|
`;
|
|
});
|
|
document.getElementById('stat-cards').innerHTML = statHtml;
|
|
|
|
// Update Market Table
|
|
let tableHtml = '';
|
|
Object.keys(coins).slice(0, 10).forEach(symbol => {
|
|
const coin = coins[symbol];
|
|
const changeClass = coin.change >= 0 ? 'change-up' : 'change-down';
|
|
const changeSign = coin.change >= 0 ? '+' : '';
|
|
tableHtml += `
|
|
<tr>
|
|
<td>
|
|
<div class="d-flex align-items-center">
|
|
<img src="${coin.icon}" class="crypto-icon-sm me-3" style="width: 40px; height: 40px;">
|
|
<div>
|
|
<div class="fw-bold fs-5">${coin.name}</div>
|
|
<div class="small text-muted">${symbol}</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="fw-bold fs-5 text-white">$${coin.price.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2})}</td>
|
|
<td class="${changeClass} fw-bold fs-5">
|
|
${changeSign}${coin.change.toFixed(2)}%
|
|
</td>
|
|
<td class="text-muted">$${(Math.random() * 500 + 10).toFixed(1)}B</td>
|
|
<td class="text-end">
|
|
<a href="trade.php?symbol=${symbol}USDT" class="btn btn-primary px-4 fw-bold" style="background-color: var(--okx-blue); border: none; border-radius: 8px;">${t('Trade')}</a>
|
|
</td>
|
|
</tr>
|
|
`;
|
|
});
|
|
document.getElementById('market-body').innerHTML = tableHtml;
|
|
}
|
|
} catch (e) {
|
|
console.error('Failed to update market data', e);
|
|
}
|
|
}
|
|
|
|
function t(key) {
|
|
const translations = <?php echo json_encode($translations[$lang]); ?>;
|
|
return translations[key] || key;
|
|
}
|
|
|
|
updateMarketData();
|
|
setInterval(updateMarketData, 5000);
|
|
</script>
|
|
|
|
<?php require_once 'includes/footer.php'; ?>
|