303 lines
20 KiB
PHP
303 lines
20 KiB
PHP
<?php include 'header.php'; ?>
|
|
|
|
<main>
|
|
<section class="hero-section">
|
|
<div class="hero-content">
|
|
<h1 class="hero-title" style="font-size: 3.5rem; font-weight: 800; line-height: 1.1; margin-bottom: 1.5rem;"><?php echo __('hero_title', 'Buy, trade, and hold 350+ cryptocurrencies on Exchange'); ?></h1>
|
|
<p class="hero-subtitle" style="font-size: 1.25rem; color: var(--text-muted); max-width: 600px;"><?php echo __('hero_subtitle', 'Join the world\'s largest crypto exchange with the lowest fees and best security.'); ?></p>
|
|
|
|
<!-- Download Section -->
|
|
<div style="background: linear-gradient(135deg, #1e2329 0%, #0b0e11 100%); padding: 30px; border-radius: 20px; margin-top: 3rem; border: 1px solid rgba(255,255,255,0.05); display: flex; align-items: center; gap: 25px; box-shadow: 0 10px 30px rgba(0,0,0,0.3);">
|
|
<div style="flex: 1;">
|
|
<div style="font-size: 16px; font-weight: 600; color: white; margin-bottom: 15px;"><?php echo __('download_qr_tip'); ?></div>
|
|
<div style="display: flex; gap: 15px;">
|
|
<a href="#" class="btn-download-app" style="background: #4facfe; color: white; border-radius: 12px; padding: 12px 20px; text-decoration: none; display: flex; align-items: center; gap: 10px; transition: transform 0.2s;">
|
|
<i class="fab fa-apple" style="font-size: 24px;"></i>
|
|
<div style="text-align: left;">
|
|
<div style="font-size: 10px; opacity: 0.9;">App Store</div>
|
|
<div style="font-size: 14px; font-weight: bold;">Download</div>
|
|
</div>
|
|
</a>
|
|
<a href="#" class="btn-download-app" style="background: #00f2fe; color: white; border-radius: 12px; padding: 12px 20px; text-decoration: none; display: flex; align-items: center; gap: 10px; transition: transform 0.2s;">
|
|
<i class="fab fa-google-play" style="font-size: 20px;"></i>
|
|
<div style="text-align: left;">
|
|
<div style="font-size: 10px; opacity: 0.9;">Google Play</div>
|
|
<div style="font-size: 14px; font-weight: bold;">Download</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div style="width: 110px; height: 110px; background: white; padding: 8px; border-radius: 12px; box-shadow: 0 5px 15px rgba(0,0,0,0.2);">
|
|
<img src="https://api.qrserver.com/v1/create-qr-code/?size=110x110&data=https://exchange.com/download" style="width: 100%;">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hero-image">
|
|
<div class="hero-carousel" id="heroCarousel">
|
|
<div class="carousel-inner">
|
|
<div class="carousel-item active" style="background-image: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.8)), url('https://images.pexels.com/photos/844124/pexels-photo-844124.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1')">
|
|
<div class="carousel-caption">
|
|
<h3 style="margin: 0; color: #fff;">New User Bonus</h3>
|
|
<p style="margin: 5px 0 0; color: #ccc; font-size: 14px;">Sign up and get up to $100 in rewards.</p>
|
|
</div>
|
|
</div>
|
|
<div class="carousel-item" style="background-image: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.8)), url('https://images.pexels.com/photos/6770610/pexels-photo-6770610.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1')">
|
|
<div class="carousel-caption">
|
|
<h3 style="margin: 0; color: #fff;">Spot Trading</h3>
|
|
<p style="margin: 5px 0 0; color: #ccc; font-size: 14px;">Trade 350+ coins with industry-leading fees.</p>
|
|
</div>
|
|
</div>
|
|
<div class="carousel-item" style="background-image: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.8)), url('https://images.pexels.com/photos/7567443/pexels-photo-7567443.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1')">
|
|
<div class="carousel-caption">
|
|
<h3 style="margin: 0; color: #fff;">Secure & Stable</h3>
|
|
<p style="margin: 5px 0 0; color: #ccc; font-size: 14px;">Your assets are protected by our security fund.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="market-ticker-container" style="background: #161a1e; padding: 20px 0; border-y: 1px solid var(--border-color);">
|
|
<div style="max-width: 1400px; margin: 0 auto; display: flex; justify-content: space-between; overflow-x: auto; gap: 2rem; padding: 0 20px;">
|
|
<div class="ticker-item" style="min-width: 180px;">
|
|
<span class="ticker-pair" style="display: block; color: var(--text-muted); font-size: 12px;">BTC / USDT</span>
|
|
<span class="ticker-price" id="price-btcusdt" style="font-size: 18px; font-weight: bold; display: block; margin: 4px 0;">--,---.--</span>
|
|
<span class="ticker-change" id="change-btcusdt">--%</span>
|
|
</div>
|
|
<div class="ticker-item" style="min-width: 180px;">
|
|
<span class="ticker-pair" style="display: block; color: var(--text-muted); font-size: 12px;">ETH / USDT</span>
|
|
<span class="ticker-price" id="price-ethusdt" style="font-size: 18px; font-weight: bold; display: block; margin: 4px 0;">--,---.--</span>
|
|
<span class="ticker-change" id="change-ethusdt">--%</span>
|
|
</div>
|
|
<div class="ticker-item" style="min-width: 180px;">
|
|
<span class="ticker-pair" style="display: block; color: var(--text-muted); font-size: 12px;">SOL / USDT</span>
|
|
<span class="ticker-price" id="price-solusdt" style="font-size: 18px; font-weight: bold; display: block; margin: 4px 0;">--,---.--</span>
|
|
<span class="ticker-change" id="change-solusdt">--%</span>
|
|
</div>
|
|
<div class="ticker-item" style="min-width: 180px;">
|
|
<span class="ticker-pair" style="display: block; color: var(--text-muted); font-size: 12px;">BNB / USDT</span>
|
|
<span class="ticker-price" id="price-bnbusdt" style="font-size: 18px; font-weight: bold; display: block; margin: 4px 0;">--,---.--</span>
|
|
<span class="ticker-change" id="change-bnbusdt">--%</span>
|
|
</div>
|
|
<div class="ticker-item" style="min-width: 180px;">
|
|
<span class="ticker-pair" style="display: block; color: var(--text-muted); font-size: 12px;">XRP / USDT</span>
|
|
<span class="ticker-price" id="price-xrpusdt" style="font-size: 18px; font-weight: bold; display: block; margin: 4px 0;">--,---.--</span>
|
|
<span class="ticker-change" id="change-xrpusdt">--%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<section class="why-section" style="display: grid; grid-template-columns: 1fr 1fr; gap: 40px; max-width: 1400px; margin: 100px auto; padding: 0 20px; align-items: stretch;">
|
|
<div class="why-left" style="background: #1e2329; padding: 40px; border-radius: 24px; border: 1px solid rgba(255,255,255,0.05); display: flex; flex-direction: column;">
|
|
<h2 style="font-size: 2.2rem; margin-bottom: 30px;"><?php echo __('market_trends', 'Market Trends'); ?></h2>
|
|
<div class="market-table-card" style="flex: 1; display: flex; flex-direction: column;">
|
|
<table class="market-table" style="width: 100%; border-collapse: collapse;">
|
|
<thead>
|
|
<tr style="text-align: left; color: var(--text-muted); font-size: 14px;">
|
|
<th style="padding-bottom: 20px;"><?php echo __('amount', 'Asset'); ?></th>
|
|
<th style="padding-bottom: 20px;"><?php echo __('price', 'Price'); ?></th>
|
|
<th style="padding-bottom: 20px;">24h Change</th>
|
|
<th style="padding-bottom: 20px;"><?php echo __('trade_panel', 'Action'); ?></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="market-tbody">
|
|
<tr>
|
|
<td colspan="4" style="text-align: center; padding: 50px; color: #888;">Connecting...</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<div style="margin-top: auto; padding-top: 30px; text-align: center;">
|
|
<a href="markets.php" style="color: var(--primary-color); text-decoration: none; font-weight: bold; display: flex; align-items: center; justify-content: center; gap: 8px;">
|
|
<?php echo __('view_more_markets'); ?> <i class="fas fa-arrow-right" style="font-size: 14px;"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="why-right" style="background: #1e2329; padding: 40px; border-radius: 24px; border: 1px solid rgba(255,255,255,0.05); display: flex; flex-direction: column;">
|
|
<h2 style="font-size: 2.2rem; margin-bottom: 30px;"><?php echo __('why_choose_us'); ?></h2>
|
|
<div style="display: flex; flex-direction: column; gap: 25px; flex: 1;">
|
|
<div style="display: flex; gap: 20px; align-items: flex-start;">
|
|
<div style="width: 54px; height: 54px; background: rgba(0,82,255,0.1); border-radius: 16px; display: flex; align-items: center; justify-content: center; color: var(--primary-color); font-size: 24px; flex-shrink: 0;">
|
|
<i class="fas fa-shield-alt"></i>
|
|
</div>
|
|
<div>
|
|
<h4 style="margin: 0 0 8px; font-size: 18px;"><?php echo __('secure_storage'); ?></h4>
|
|
<p style="margin: 0; color: var(--text-muted); font-size: 14px; line-height: 1.5;"><?php echo __('secure_storage_desc'); ?></p>
|
|
</div>
|
|
</div>
|
|
<div style="display: flex; gap: 20px; align-items: flex-start;">
|
|
<div style="width: 54px; height: 54px; background: rgba(14,203,129,0.1); border-radius: 16px; display: flex; align-items: center; justify-content: center; color: var(--success-color); font-size: 24px; flex-shrink: 0;">
|
|
<i class="fas fa-lock"></i>
|
|
</div>
|
|
<div>
|
|
<h4 style="margin: 0 0 8px; font-size: 18px;"><?php echo __('protected_insurance'); ?></h4>
|
|
<p style="margin: 0; color: var(--text-muted); font-size: 14px; line-height: 1.5;"><?php echo __('protected_insurance_desc'); ?></p>
|
|
</div>
|
|
</div>
|
|
<div style="display: flex; gap: 20px; align-items: flex-start;">
|
|
<div style="width: 54px; height: 54px; background: rgba(240,185,11,0.1); border-radius: 16px; display: flex; align-items: center; justify-content: center; color: var(--gold-color); font-size: 24px; flex-shrink: 0;">
|
|
<i class="fas fa-gem"></i>
|
|
</div>
|
|
<div>
|
|
<h4 style="margin: 0 0 8px; font-size: 18px;"><?php echo __('industry_best_practices'); ?></h4>
|
|
<p style="margin: 0; color: var(--text-muted); font-size: 14px; line-height: 1.5;"><?php echo __('industry_best_practices_desc'); ?></p>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="margin-top: auto; padding: 25px; background: rgba(255,255,255,0.03); border-radius: 16px; border: 1px solid rgba(255,255,255,0.05);">
|
|
<p style="margin: 0 0 20px; font-size: 14px; line-height: 1.6; color: #ccc;"><?php echo __('platform_desc'); ?></p>
|
|
<a href="register.php" class="btn-primary" style="width: 100%; justify-content: center; padding: 15px; font-weight: bold; font-size: 16px;"><?php echo __('btn_start'); ?></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="partners-section" style="padding: 100px 20px; text-align: center; background: #0b0e11;">
|
|
<h2 style="font-size: 2.5rem; margin-bottom: 15px; font-weight: 800;"><?php echo __('partners'); ?></h2>
|
|
<p style="color: var(--text-muted); margin-bottom: 60px; font-size: 1.1rem;"><?php echo __('partners_subtitle'); ?></p>
|
|
<div class="partners-grid" style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; max-width: 1200px; margin: 0 auto; align-items: center;">
|
|
<div class="partner-card">
|
|
<img src="https://cryptologos.cc/logos/bitcoin-btc-logo.png?v=024" style="height: 45px;" alt="Bitcoin">
|
|
<span style="display: block; margin-top: 10px; font-weight: bold;">Bitcoin</span>
|
|
</div>
|
|
<div class="partner-card">
|
|
<img src="https://cryptologos.cc/logos/ethereum-eth-logo.png?v=024" style="height: 45px;" alt="Ethereum">
|
|
<span style="display: block; margin-top: 10px; font-weight: bold;">Ethereum</span>
|
|
</div>
|
|
<div class="partner-card">
|
|
<img src="https://cryptologos.cc/logos/binance-coin-bnb-logo.png?v=024" style="height: 45px;" alt="Binance">
|
|
<span style="display: block; margin-top: 10px; font-weight: bold;">BNB Chain</span>
|
|
</div>
|
|
<div class="partner-card">
|
|
<img src="https://cryptologos.cc/logos/tether-usdt-logo.png?v=024" style="height: 45px;" alt="Tether">
|
|
<span style="display: block; margin-top: 10px; font-weight: bold;">Tether</span>
|
|
</div>
|
|
<div class="partner-card">
|
|
<img src="https://cryptologos.cc/logos/solana-sol-logo.png?v=024" style="height: 45px;" alt="Solana">
|
|
<span style="display: block; margin-top: 10px; font-weight: bold;">Solana</span>
|
|
</div>
|
|
<div class="partner-card">
|
|
<img src="https://cryptologos.cc/logos/cardano-ada-logo.png?v=024" style="height: 45px;" alt="Cardano">
|
|
<span style="display: block; margin-top: 10px; font-weight: bold;">Cardano</span>
|
|
</div>
|
|
<div class="partner-card">
|
|
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5e/Visa_Inc._logo.svg/2560px-Visa_Inc._logo.svg.png" style="height: 20px;" alt="Visa">
|
|
<span style="display: block; margin-top: 10px; font-weight: bold;">Visa</span>
|
|
</div>
|
|
<div class="partner-card">
|
|
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2a/Mastercard-logo.svg/1280px-Mastercard-logo.svg.png" style="height: 30px;" alt="Mastercard">
|
|
<span style="display: block; margin-top: 10px; font-weight: bold;">Mastercard</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<style>
|
|
.partner-card {
|
|
background: #1e2329;
|
|
padding: 30px;
|
|
border-radius: 16px;
|
|
border: 1px solid rgba(255,255,255,0.05);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all 0.3s;
|
|
cursor: pointer;
|
|
}
|
|
.partner-card img { filter: grayscale(0.5); opacity: 0.7; transition: 0.3s; }
|
|
.partner-card:hover { transform: translateY(-5px); border-color: var(--primary-color); background: rgba(0,82,255,0.05); }
|
|
.partner-card:hover img { filter: grayscale(0); opacity: 1; }
|
|
.btn-download-app:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.3); }
|
|
</style>
|
|
|
|
<script>
|
|
// Carousel Logic
|
|
let currentSlide = 0;
|
|
const slides = document.querySelectorAll('.carousel-item');
|
|
function nextSlide() {
|
|
if(slides.length === 0) return;
|
|
slides[currentSlide].classList.remove('active');
|
|
currentSlide = (currentSlide + 1) % slides.length;
|
|
slides[currentSlide].classList.add('active');
|
|
}
|
|
setInterval(nextSlide, 5000);
|
|
|
|
const symbols = ['btcusdt', 'ethusdt', 'solusdt', 'bnbusdt', 'xrpusdt', 'adausdt', 'dogeusdt', 'dotusdt'];
|
|
const tickerElements = {};
|
|
|
|
symbols.forEach(s => {
|
|
tickerElements[s] = {
|
|
price: document.getElementById(`price-${s}`),
|
|
change: document.getElementById(`change-${s}`)
|
|
};
|
|
});
|
|
|
|
const ws = new WebSocket('wss://stream.binance.com:9443/ws/' + symbols.map(s => s + '@ticker').join('/'));
|
|
|
|
ws.onmessage = (event) => {
|
|
const data = JSON.parse(event.data);
|
|
const symbol = data.s.toLowerCase();
|
|
const price = parseFloat(data.c).toLocaleString(undefined, {minimumFractionDigits: 2});
|
|
const change = parseFloat(data.P).toFixed(2);
|
|
const color = change >= 0 ? 'var(--success-color)' : 'var(--danger-color)';
|
|
|
|
if (tickerElements[symbol]) {
|
|
if (tickerElements[symbol].price) tickerElements[symbol].price.innerText = price;
|
|
if (tickerElements[symbol].change) {
|
|
tickerElements[symbol].change.innerText = (change >= 0 ? '+' : '') + change + '%';
|
|
tickerElements[symbol].change.style.color = color;
|
|
}
|
|
}
|
|
updateTable(data);
|
|
};
|
|
|
|
const marketData = {};
|
|
function updateTable(data) {
|
|
const symbol = data.s;
|
|
marketData[symbol] = data;
|
|
renderTable();
|
|
}
|
|
|
|
function renderTable() {
|
|
const tbody = document.getElementById('market-tbody');
|
|
if (!tbody) return;
|
|
|
|
let html = '';
|
|
const sortedSymbols = Object.keys(marketData).sort((a, b) => {
|
|
const order = ['BTCUSDT', 'ETHUSDT', 'SOLUSDT', 'BNBUSDT', 'XRPUSDT', 'ADAUSDT', 'DOGEUSDT', 'DOTUSDT'];
|
|
return order.indexOf(a) - order.indexOf(b);
|
|
});
|
|
|
|
sortedSymbols.slice(0, 6).forEach(s => {
|
|
const d = marketData[s];
|
|
const price = parseFloat(d.c).toLocaleString(undefined, {minimumFractionDigits: 2});
|
|
const change = parseFloat(d.P).toFixed(2);
|
|
const color = change >= 0 ? 'var(--success-color)' : 'var(--danger-color)';
|
|
const name = s.replace('USDT', '');
|
|
const iconUrl = `https://raw.githubusercontent.com/spothq/cryptocurrency-icons/master/128/color/${name.toLowerCase()}.png`;
|
|
|
|
html += `
|
|
<tr style="border-bottom: 1px solid rgba(255,255,255,0.05);">
|
|
<td style="padding: 20px 0;">
|
|
<div style="display: flex; align-items: center; gap: 12px;">
|
|
<img src="${iconUrl}" width="32" height="32" onerror="this.src='https://cdn-icons-png.flaticon.com/512/2585/2585274.png'">
|
|
<span style="font-weight: bold; font-size: 16px;">${name}</span>
|
|
</div>
|
|
</td>
|
|
<td style="font-weight: bold; font-family: monospace; font-size: 16px;">$ ${price}</td>
|
|
<td style="color: ${color}; font-weight: bold; font-size: 16px;">${change >= 0 ? '+' : ''}${change}%</td>
|
|
<td><a href="spot.php?symbol=${s}" class="btn-primary" style="padding: 8px 20px; font-size: 13px; border-radius: 8px; background: rgba(255,255,255,0.05); color: white; border: 1px solid rgba(255,255,255,0.1);"><?php echo __('buy'); ?></a></td>
|
|
</tr>
|
|
`;
|
|
});
|
|
|
|
if (html) tbody.innerHTML = html;
|
|
}
|
|
</script>
|
|
|
|
<?php include 'footer.php'; ?>
|