297 lines
16 KiB
PHP
297 lines
16 KiB
PHP
<?php
|
|
require_once __DIR__ . '/includes/lang.php';
|
|
require_once __DIR__ . '/includes/header.php';
|
|
?>
|
|
|
|
<link rel="stylesheet" href="assets/css/index.css?v=<?php echo time(); ?>">
|
|
|
|
<main class="container py-4">
|
|
<!-- Hero Carousel -->
|
|
<div id="heroCarousel" class="carousel slide mb-5" data-bs-ride="carousel">
|
|
<div class="carousel-inner rounded-4 shadow-lg">
|
|
<div class="carousel-item active">
|
|
<div class="carousel-content p-5 text-white d-flex align-items-center" style="height: 520px; background: url('https://images.pexels.com/photos/6771664/pexels-photo-6771664.jpeg?auto=compress&cs=tinysrgb&w=1600') center/cover;">
|
|
<div class="carousel-overlay" style="background: linear-gradient(90deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 100%); position: absolute; top:0; left:0; right:0; bottom:0;"></div>
|
|
<div class="container" style="position: relative; z-index: 2;">
|
|
<div class="row align-items-center">
|
|
<div class="col-lg-7">
|
|
<h1 class="display-3 fw-bold mb-3"><?php echo __('hero_title'); ?></h1>
|
|
<p class="lead fs-3 mb-4 text-light-50"><?php echo __('hero_subtitle'); ?></p>
|
|
<div class="d-flex gap-3">
|
|
<a href="auth/register.php" class="btn btn-primary btn-lg px-5 py-3 fw-bold rounded-pill shadow-primary"><?php echo __('get_started'); ?></a>
|
|
<a href="market.php" class="btn btn-outline-light btn-lg px-5 py-3 fw-bold rounded-pill"><?= __('market_view') ?></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="carousel-item">
|
|
<div class="carousel-content p-5 text-white d-flex align-items-center" style="height: 520px; background: url('https://images.pexels.com/photos/6771574/pexels-photo-6771574.jpeg?auto=compress&cs=tinysrgb&w=1600') center/cover;">
|
|
<div class="carousel-overlay" style="background: linear-gradient(90deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 100%); position: absolute; top:0; left:0; right:0; bottom:0;"></div>
|
|
<div class="container" style="position: relative; z-index: 2;">
|
|
<h1 class="display-3 fw-bold mb-3"><?= __('prof_terminal') ?></h1>
|
|
<p class="lead fs-3 mb-4 text-light-50"><?= __('prof_terminal_desc') ?></p>
|
|
<div class="d-flex gap-3">
|
|
<a href="trade.php" class="btn btn-primary btn-lg px-5 py-3 fw-bold rounded-pill shadow-primary"><?php echo __('trade'); ?></a>
|
|
<a href="binary.php" class="btn btn-outline-light btn-lg px-5 py-3 fw-bold rounded-pill"><?= __('second_contract') ?></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="carousel-item">
|
|
<div class="carousel-content p-5 text-white d-flex align-items-center" style="height: 520px; background: url('https://images.pexels.com/photos/5980866/pexels-photo-5980866.jpeg?auto=compress&cs=tinysrgb&w=1600') center/cover;">
|
|
<div class="carousel-overlay" style="background: linear-gradient(90deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 100%); position: absolute; top:0; left:0; right:0; bottom:0;"></div>
|
|
<div class="container" style="position: relative; z-index: 2;">
|
|
<h1 class="display-3 fw-bold mb-3"><?= __('inst_security') ?></h1>
|
|
<p class="lead fs-3 mb-4 text-light-50"><?= __('inst_security_desc') ?></p>
|
|
<a href="auth/register.php" class="btn btn-primary btn-lg px-5 py-3 fw-bold rounded-pill shadow-primary"><?= __('secure_acc') ?></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button class="carousel-control-prev" type="button" data-bs-target="#heroCarousel" data-bs-slide="prev">
|
|
<span class="carousel-control-prev-icon p-3 bg-dark rounded-circle"></span>
|
|
</button>
|
|
<button class="carousel-control-next" type="button" data-bs-target="#heroCarousel" data-bs-slide="next">
|
|
<span class="carousel-control-next-icon p-3 bg-dark rounded-circle"></span>
|
|
</button>
|
|
</div>
|
|
|
|
<style>
|
|
.coin-card {
|
|
background: #0b0e11;
|
|
border: 1px solid #2b3139;
|
|
transition: all 0.3s ease;
|
|
border-radius: 16px;
|
|
}
|
|
.coin-card:hover {
|
|
transform: translateY(-5px);
|
|
border-color: #0062ff;
|
|
background: #161a1e;
|
|
}
|
|
.price-display {
|
|
color: #ffffff;
|
|
}
|
|
</style>
|
|
<!-- Popular Markets (3x4 Layout) -->
|
|
<section class="market-section mb-5">
|
|
<div class="d-flex justify-content-between align-items-end mb-4">
|
|
<h2 class="fw-bold m-0"><?php echo __('popular_markets'); ?></h2>
|
|
<a href="market.php" class="text-decoration-none text-primary"><?php echo __('view_more') ?? 'View More'; ?> <i class="bi bi-arrow-right"></i></a>
|
|
</div>
|
|
<div class="row g-4" id="market-list">
|
|
<?php
|
|
$coins = [
|
|
['symbol' => 'BTC', 'name' => 'Bitcoin', 'id' => 'bitcoin'],
|
|
['symbol' => 'ETH', 'name' => 'Ethereum', 'id' => 'ethereum'],
|
|
['symbol' => 'USDT', 'name' => 'Tether', 'id' => 'tether'],
|
|
['symbol' => 'BNB', 'name' => 'BNB', 'id' => 'binancecoin'],
|
|
['symbol' => 'SOL', 'name' => 'Solana', 'id' => 'solana'],
|
|
['symbol' => 'XRP', 'name' => 'XRP', 'id' => 'ripple'],
|
|
['symbol' => 'ADA', 'name' => 'Cardano', 'id' => 'cardano'],
|
|
['symbol' => 'DOGE', 'name' => 'Dogecoin', 'id' => 'dogecoin'],
|
|
['symbol' => 'DOT', 'name' => 'Polkadot', 'id' => 'polkadot'],
|
|
['symbol' => 'MATIC', 'name' => 'Polygon', 'id' => 'matic-network'],
|
|
['symbol' => 'LINK', 'name' => 'Chainlink', 'id' => 'chainlink'],
|
|
['symbol' => 'SHIB', 'name' => 'Shiba Inu', 'id' => 'shiba-inu']
|
|
];
|
|
foreach ($coins as $coin):
|
|
?>
|
|
<div class="col-md-3">
|
|
<div class="card coin-card h-100" data-symbol="<?php echo $coin['symbol']; ?>" onclick="location.href='trade.php?symbol=<?php echo $coin['symbol']; ?>'" style="cursor: pointer;">
|
|
<div class="card-body p-4">
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
<div class="d-flex align-items-center">
|
|
<img src="<?php echo getCoinIcon($coin['symbol']); ?>" width="32" height="32" class="me-2 rounded-circle bg-light p-1" alt="<?php echo $coin['symbol']; ?>" onerror="this.src='https://assets.coingecko.com/coins/images/1/small/bitcoin.png'">
|
|
<span class="fw-bold fs-5"><?php echo $coin['symbol']; ?></span>
|
|
<small class="text-muted ms-2">/USDT</small>
|
|
</div>
|
|
<span class="change-badge badge bg-success">+0.00%</span>
|
|
</div>
|
|
<div class="price-display fs-3 fw-bold mb-3" id="price-<?php echo $coin['symbol']; ?>">$0.00</div>
|
|
<div class="sparkline-container" style="height: 40px;">
|
|
<canvas class="sparkline-canvas" id="spark-<?php echo $coin['symbol']; ?>"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Why Us -->
|
|
<section class="why-us mb-5 py-5">
|
|
<h2 class="text-center mb-5 fw-bold display-5"><?php echo __('why_choose_us'); ?></h2>
|
|
<div class="row g-4">
|
|
<div class="col-md-3">
|
|
<div class="card h-100 border-0 bg-transparent text-center p-3">
|
|
<div class="icon-box mb-4 mx-auto shadow-sm" style="background: linear-gradient(135deg, #0062ff, #00d2ff); color: #fff;">
|
|
<i class="bi bi-shield-check fs-1"></i>
|
|
</div>
|
|
<h4 class="fw-bold mb-3"><?php echo __('advantage_1_title'); ?></h4>
|
|
<p class="text-muted small px-2"><?php echo __('advantage_1_desc'); ?></p>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="card h-100 border-0 bg-transparent text-center p-3">
|
|
<div class="icon-box mb-4 mx-auto shadow-sm" style="background: linear-gradient(135deg, #26a69a, #4db6ac); color: #fff;">
|
|
<i class="bi bi-graph-up-arrow fs-1"></i>
|
|
</div>
|
|
<h4 class="fw-bold mb-3"><?php echo __('advantage_2_title'); ?></h4>
|
|
<p class="text-muted small px-2"><?php echo __('advantage_2_desc'); ?></p>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="card h-100 border-0 bg-transparent text-center p-3">
|
|
<div class="icon-box mb-4 mx-auto shadow-sm" style="background: linear-gradient(135deg, #ffad00, #ffcc33); color: #fff;">
|
|
<i class="bi bi-headset fs-1"></i>
|
|
</div>
|
|
<h4 class="fw-bold mb-3"><?php echo __('advantage_3_title'); ?></h4>
|
|
<p class="text-muted small px-2"><?php echo __('advantage_3_desc'); ?></p>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="card h-100 border-0 bg-transparent text-center p-3">
|
|
<div class="icon-box mb-4 mx-auto shadow-sm" style="background: linear-gradient(135deg, #8247e5, #9c6df5); color: #fff;">
|
|
<i class="bi bi-cpu-fill fs-1"></i>
|
|
</div>
|
|
<h4 class="fw-bold mb-3"><?php echo __('advantage_4_title'); ?></h4>
|
|
<p class="text-muted small px-2"><?php echo __('advantage_4_desc'); ?></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Partners (15 icons, 5 per row) -->
|
|
<section class="partners mb-5 py-5 border-top border-secondary">
|
|
<h2 class="text-center mb-5 fw-bold"><?php echo __('partners'); ?></h2>
|
|
<div class="row row-cols-2 row-cols-md-5 g-4 text-center">
|
|
<?php
|
|
$partners = [
|
|
['name' => 'Binance', 'color' => '#f3ba2f', 'icon' => 'bi-currency-bitcoin'],
|
|
['name' => 'OKX', 'color' => '#ffffff', 'icon' => 'bi-box-seam'],
|
|
['name' => 'Bybit', 'color' => '#ffb11a', 'icon' => 'bi-activity'],
|
|
['name' => 'Huobi', 'color' => '#00b5f8', 'icon' => 'bi-globe'],
|
|
['name' => 'Coinbase', 'color' => '#0052ff', 'icon' => 'bi-shield-shaded'],
|
|
['name' => 'Kraken', 'color' => '#5741d9', 'icon' => 'bi-water'],
|
|
['name' => 'KuCoin', 'color' => '#24ae8f', 'icon' => 'bi-gem'],
|
|
['name' => 'MEXC', 'color' => '#1ea7e1', 'icon' => 'bi-cpu'],
|
|
['name' => 'Gate.io', 'color' => '#e14f4f', 'icon' => 'bi-door-open'],
|
|
['name' => 'Bitfinex', 'color' => '#00cf92', 'icon' => 'bi-lightning'],
|
|
['name' => 'Gemini', 'color' => '#00cf92', 'icon' => 'bi-stars'],
|
|
['name' => 'Upbit', 'color' => '#2a5ada', 'icon' => 'bi-arrow-up-right-circle'],
|
|
['name' => 'Poloniex', 'color' => '#0a6a5d', 'icon' => 'bi-stack'],
|
|
['name' => 'Bitstamp', 'color' => '#1d2128', 'icon' => 'bi-safe'],
|
|
['name' => 'Bithumb', 'color' => '#ff8a00', 'icon' => 'bi-wallet2']
|
|
];
|
|
foreach ($partners as $p):
|
|
?>
|
|
<div class="col">
|
|
<div class="partner-card p-4 rounded-4 d-flex flex-column align-items-center justify-content-center border-opacity-25" style="border: 1px solid <?php echo $p['color']; ?>40;">
|
|
<div class="partner-icon mb-2 fs-2" style="color: <?php echo $p['color']; ?>"><i class="bi <?php echo $p['icon']; ?>"></i></div>
|
|
<span class="fw-bold small text-light opacity-75"><?php echo $p['name']; ?></span>
|
|
</div>
|
|
</div>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<script>
|
|
const symbols = ['BTCUSDT', 'ETHUSDT', 'BNBUSDT', 'SOLUSDT', 'XRPUSDT', 'ADAUSDT', 'DOGEUSDT', 'DOTUSDT', 'MATICUSDT', 'LINKUSDT', 'SHIBUSDT'];
|
|
const coinData = {};
|
|
|
|
async function fetchPrices() {
|
|
try {
|
|
const response = await fetch('https://api.binance.com/api/v3/ticker/24hr');
|
|
const data = await response.json();
|
|
const relevant = data.filter(t => symbols.includes(t.symbol));
|
|
|
|
relevant.forEach(t => {
|
|
const symbol = t.symbol.replace('USDT', '');
|
|
updateUI(symbol, parseFloat(t.lastPrice), parseFloat(t.priceChangePercent));
|
|
});
|
|
|
|
// Handle USDT specially
|
|
updateUI('USDT', 1.000, 0.01);
|
|
} catch (err) {
|
|
console.error('Failed to fetch real-time prices:', err);
|
|
}
|
|
}
|
|
|
|
function initPriceUpdate() {
|
|
fetchPrices();
|
|
setInterval(fetchPrices, 5000);
|
|
}
|
|
|
|
function updateUI(symbol, price, change) {
|
|
const card = document.querySelector(`.coin-card[data-symbol="${symbol}"]`);
|
|
if (!card) return;
|
|
|
|
const priceEl = card.querySelector('.price-display');
|
|
const badge = card.querySelector('.change-badge');
|
|
|
|
const oldPrice = parseFloat(priceEl.innerText.replace('$', '').replace(',', ''));
|
|
|
|
// Smooth price transition simulation
|
|
priceEl.innerText = '$' + price.toLocaleString(undefined, {
|
|
minimumFractionDigits: symbol === 'SHIB' ? 6 : (price < 1 ? 4 : 2),
|
|
maximumFractionDigits: symbol === 'SHIB' ? 6 : (price < 1 ? 4 : 2)
|
|
});
|
|
|
|
if (Math.abs(price - oldPrice) > 0.000001) {
|
|
priceEl.style.transition = 'all 0.2s';
|
|
const jumpDir = price > oldPrice ? -3 : 3;
|
|
priceEl.style.transform = `translateY(${jumpDir}px)`;
|
|
if (price > oldPrice) {
|
|
priceEl.style.color = '#26a69a';
|
|
setTimeout(() => {
|
|
priceEl.style.transform = '';
|
|
priceEl.style.color = '';
|
|
}, 200);
|
|
} else {
|
|
priceEl.style.color = '#ef5350';
|
|
setTimeout(() => {
|
|
priceEl.style.transform = '';
|
|
priceEl.style.color = '';
|
|
}, 200);
|
|
}
|
|
}
|
|
|
|
badge.innerText = (change > 0 ? '+' : '') + change + '%';
|
|
badge.className = `change-badge badge ${change >= 0 ? 'bg-success' : 'bg-danger'}`;
|
|
}
|
|
|
|
// Sparklines
|
|
document.querySelectorAll('.sparkline-canvas').forEach(canvas => {
|
|
const ctx = canvas.getContext('2d');
|
|
const isUp = Math.random() > 0.4;
|
|
new Chart(ctx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: new Array(10).fill(''),
|
|
datasets: [{
|
|
data: new Array(10).fill(0).map(() => Math.random() * 100),
|
|
borderColor: isUp ? '#26a69a' : '#ef5350',
|
|
borderWidth: 2,
|
|
pointRadius: 0,
|
|
fill: true,
|
|
backgroundColor: isUp ? 'rgba(38, 166, 154, 0.1)' : 'rgba(239, 83, 80, 0.1)',
|
|
tension: 0.4
|
|
}]
|
|
},
|
|
options: {
|
|
plugins: { legend: { display: false } },
|
|
scales: { x: { display: false }, y: { display: false } },
|
|
maintainAspectRatio: false
|
|
}
|
|
});
|
|
});
|
|
|
|
initPriceUpdate();
|
|
</script>
|
|
|
|
<?php require_once __DIR__ . '/includes/footer.php'; ?>
|