294 lines
16 KiB
PHP
294 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: 480px; background: url('https://images.pexels.com/photos/6771574/pexels-photo-6771574.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2');">
|
|
<div class="carousel-overlay"></div>
|
|
<div class="container">
|
|
<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"><?php echo __('hero_subtitle'); ?></p>
|
|
<a href="auth/register.php" class="btn btn-primary btn-lg px-5 py-3 fw-bold rounded-pill"><?php echo __('get_started'); ?></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="carousel-item">
|
|
<div class="carousel-content p-5 text-white d-flex align-items-center" style="height: 480px; background: url('https://images.pexels.com/photos/6770610/pexels-photo-6770610.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2');">
|
|
<div class="carousel-overlay"></div>
|
|
<div class="container">
|
|
<h1 class="display-3 fw-bold mb-3">Professional K-Line Chart</h1>
|
|
<p class="lead fs-3 mb-4 text-light">Advanced analytical tools for precise market entries and exits.</p>
|
|
<div class="d-flex gap-3">
|
|
<a href="trade.php" class="btn btn-outline-light btn-lg px-5 py-3 fw-bold rounded-pill"><?php echo __('trade'); ?></a>
|
|
<a href="market.php" class="btn btn-primary btn-lg px-5 py-3 fw-bold rounded-pill">View Markets</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="carousel-item">
|
|
<div class="carousel-content p-5 text-white d-flex align-items-center" style="height: 480px; background: url('https://images.pexels.com/photos/6771178/pexels-photo-6771178.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2');">
|
|
<div class="carousel-overlay"></div>
|
|
<div class="container">
|
|
<h1 class="display-3 fw-bold mb-3">Byro Mining Pool</h1>
|
|
<p class="lead fs-3 mb-4 text-light">The most efficient mining experience with daily payouts.</p>
|
|
<a href="mining.php" class="btn btn-success btn-lg px-5 py-3 fw-bold rounded-pill">Start Mining</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>
|
|
|
|
<!-- 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', 'color' => '#f7931a', 'id' => 'bitcoin'],
|
|
['symbol' => 'ETH', 'name' => 'Ethereum', 'color' => '#627eea', 'id' => 'ethereum'],
|
|
['symbol' => 'USDT', 'name' => 'Tether', 'color' => '#26a17b', 'id' => 'tether'],
|
|
['symbol' => 'BNB', 'name' => 'BNB', 'color' => '#f3ba2f', 'id' => 'binancecoin'],
|
|
['symbol' => 'SOL', 'name' => 'Solana', 'color' => '#14f195', 'id' => 'solana'],
|
|
['symbol' => 'XRP', 'name' => 'XRP', 'color' => '#23292f', 'id' => 'ripple'],
|
|
['symbol' => 'ADA', 'name' => 'Cardano', 'color' => '#0033ad', 'id' => 'cardano'],
|
|
['symbol' => 'DOGE', 'name' => 'Dogecoin', 'color' => '#c2a633', 'id' => 'dogecoin'],
|
|
['symbol' => 'DOT', 'name' => 'Polkadot', 'color' => '#e6007a', 'id' => 'polkadot'],
|
|
['symbol' => 'MATIC', 'name' => 'Polygon', 'color' => '#8247e5', 'id' => 'matic-network'],
|
|
['symbol' => 'LINK', 'name' => 'Chainlink', 'color' => '#2a5ada', 'id' => 'chainlink'],
|
|
['symbol' => 'SHIB', 'name' => 'Shiba Inu', 'color' => '#ffad00', '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']; ?>">
|
|
<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="https://assets.coingecko.com/coins/images/<?php
|
|
$icon_ids = [
|
|
'BTC' => '1/small/bitcoin.png',
|
|
'ETH' => '279/small/ethereum.png',
|
|
'USDT' => '325/small/tether.png',
|
|
'BNB' => '825/small/binance-coin-logo.png',
|
|
'SOL' => '4128/small/solana.png',
|
|
'XRP' => '44/small/xrp-symbol-white-128.png',
|
|
'ADA' => '975/small/cardano.png',
|
|
'DOGE' => '5/small/dogecoin.png',
|
|
'DOT' => '12171/small/polkadot.png',
|
|
'MATIC' => '4713/small/matic-network.png',
|
|
'LINK' => '877/small/chainlink.png',
|
|
'SHIB' => '11939/small/shiba-inu.png'
|
|
];
|
|
echo $icon_ids[$coin['symbol']];
|
|
?>" width="32" height="32" class="me-2" alt="<?php echo $coin['symbol']; ?>">
|
|
<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'];
|
|
const coinData = {};
|
|
|
|
function initPriceUpdate() {
|
|
setInterval(() => {
|
|
document.querySelectorAll('.coin-card').forEach(card => {
|
|
const symbol = card.dataset.symbol;
|
|
if (symbol === 'USDT') {
|
|
updateUI('USDT', 1.000, 0.01);
|
|
return;
|
|
}
|
|
|
|
// Simulating real-time drift for demo
|
|
if (!coinData[symbol]) {
|
|
const basePrices = {
|
|
'BTC': 64000, 'ETH': 3450, 'BNB': 590, 'SOL': 145,
|
|
'XRP': 0.62, 'ADA': 0.58, 'DOGE': 0.16, 'DOT': 8.4,
|
|
'MATIC': 0.92, 'LINK': 18.4, 'SHIB': 0.000025
|
|
};
|
|
coinData[symbol] = {
|
|
price: basePrices[symbol] || 100,
|
|
change: (Math.random() * 10 - 5).toFixed(2)
|
|
};
|
|
}
|
|
|
|
const drift = (Math.random() - 0.5) * (coinData[symbol].price * 0.0005);
|
|
coinData[symbol].price += drift;
|
|
const change = (parseFloat(coinData[symbol].change) + (Math.random() - 0.5) * 0.05).toFixed(2);
|
|
|
|
updateUI(symbol, coinData[symbol].price, change);
|
|
});
|
|
}, 1500);
|
|
}
|
|
|
|
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 = 'color 0.3s';
|
|
if (price > oldPrice) {
|
|
priceEl.style.color = '#26a69a';
|
|
setTimeout(() => priceEl.style.color = '', 400);
|
|
} else {
|
|
priceEl.style.color = '#ef5350';
|
|
setTimeout(() => priceEl.style.color = '', 400);
|
|
}
|
|
}
|
|
|
|
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'; ?>
|