279 lines
21 KiB
PHP
279 lines
21 KiB
PHP
<?php
|
||
session_start();
|
||
include 'header.php';
|
||
require_once 'db/config.php';
|
||
|
||
// Fetch market data for the home page table
|
||
$trending_pairs = ['BTCUSDT', 'ETHUSDT', 'SOLUSDT', 'BNBUSDT', 'XRPUSDT'];
|
||
?>
|
||
|
||
<main>
|
||
<!-- Carousel Section (Constrained Width) -->
|
||
<section class="hero-carousel-section" style="padding: 10px 0; background: #0b0e11;">
|
||
<div class="carousel-container" style="max-width: 1200px; margin: 0 auto; position: relative; height: 450px; overflow: hidden; border-radius: 24px; box-shadow: 0 20px 50px rgba(0,0,0,0.5);">
|
||
<div class="carousel-track" id="carouselTrack" style="display: flex; height: 100%; transition: transform 0.5s ease-in-out;">
|
||
<div class="carousel-slide" style="min-width: 100%; position: relative;">
|
||
<img src="https://images.pexels.com/photos/6771574/pexels-photo-6771574.jpeg?auto=compress&cs=tinysrgb&w=1920" style="width: 100%; height: 100%; object-fit: cover; opacity: 0.6;">
|
||
<div class="carousel-content" style="position: absolute; top: 50%; left: 8%; transform: translateY(-50%); color: white; max-width: 600px;">
|
||
<h2 class="carousel-title" style="font-size: 3rem; font-weight: 800; margin-bottom: 20px; text-shadow: 0 5px 15px rgba(0,0,0,0.5);">NovaEx Global Launch</h2>
|
||
<p class="carousel-desc" style="font-size: 1.1rem; opacity: 0.9; margin-bottom: 30px;">Experience the next generation of digital asset trading with ultra-low latency and bank-grade security.</p>
|
||
<a href="register.php" class="btn-primary" style="padding: 12px 35px; border-radius: 8px; font-weight: bold; text-decoration: none; display: inline-block; background: var(--primary-color); color: white;"><?php echo __('join_now', 'Join Now'); ?></a>
|
||
</div>
|
||
</div>
|
||
<div class="carousel-slide" style="min-width: 100%; position: relative;">
|
||
<img src="https://images.pexels.com/photos/844124/pexels-photo-844124.jpeg?auto=compress&cs=tinysrgb&w=1920" style="width: 100%; height: 100%; object-fit: cover; opacity: 0.6;">
|
||
<div class="carousel-content" style="position: absolute; top: 50%; left: 8%; transform: translateY(-50%); color: white; max-width: 600px;">
|
||
<h2 class="carousel-title" style="font-size: 3rem; font-weight: 800; margin-bottom: 20px; text-shadow: 0 5px 15px rgba(0,0,0,0.5);">Trade Futures with 100x Leverage</h2>
|
||
<p class="carousel-desc" style="font-size: 1.1rem; opacity: 0.9; margin-bottom: 30px;">Maximize your capital efficiency with our professional perpetual futures contracts.</p>
|
||
<a href="futures.php" class="btn-primary" style="padding: 12px 35px; border-radius: 8px; font-weight: bold; text-decoration: none; display: inline-block; background: var(--primary-color); color: white;"><?php echo __('start_trading', 'Start Trading'); ?></a>
|
||
</div>
|
||
</div>
|
||
<div class="carousel-slide" style="min-width: 100%; position: relative;">
|
||
<img src="https://images.pexels.com/photos/6771178/pexels-photo-6771178.jpeg?auto=compress&cs=tinysrgb&w=1920" style="width: 100%; height: 100%; object-fit: cover; opacity: 0.6;">
|
||
<div class="carousel-content" style="position: absolute; top: 50%; left: 8%; transform: translateY(-50%); color: white; max-width: 600px;">
|
||
<h2 class="carousel-title" style="font-size: 3rem; font-weight: 800; margin-bottom: 20px; text-shadow: 0 5px 15px rgba(0,0,0,0.5);">Secure Crypto Staking</h2>
|
||
<p class="carousel-desc" style="font-size: 1.1rem; opacity: 0.9; margin-bottom: 30px;">Earn passive income on your idle assets with our high-yield staking pools.</p>
|
||
<a href="mining.php" class="btn-primary" style="padding: 12px 35px; border-radius: 8px; font-weight: bold; text-decoration: none; display: inline-block; background: var(--primary-color); color: white;"><?php echo __('earn_now', 'Earn Now'); ?></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="carousel-dots" style="position: absolute; bottom: 30px; left: 8%; display: flex; gap: 12px;">
|
||
<div class="carousel-dot active" onclick="goToSlide(0)" style="width: 12px; height: 12px; border-radius: 50%; background: white; cursor: pointer; opacity: 0.5; transition: 0.3s;"></div>
|
||
<div class="carousel-dot" onclick="goToSlide(1)" style="width: 12px; height: 12px; border-radius: 50%; background: white; cursor: pointer; opacity: 0.5; transition: 0.3s;"></div>
|
||
<div class="carousel-dot" onclick="goToSlide(2)" style="width: 12px; height: 12px; border-radius: 50%; background: white; cursor: pointer; opacity: 0.5; transition: 0.3s;"></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Market Trends -->
|
||
<section class="container" style="padding: 40px 20px;">
|
||
<div style="display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 20px;">
|
||
<h2 class="section-title-home" style="font-size: 2rem; font-weight: 800; margin: 0;"><?php echo __('market_trends', '市场趋势'); ?></h2>
|
||
<a href="markets.php" style="color: var(--primary-color); text-decoration: none; font-weight: 600; font-size: 14px;"><?php echo __('view_more_markets', '查看更多'); ?> <i class="fas fa-chevron-right" style="font-size: 10px;"></i></a>
|
||
</div>
|
||
|
||
<div class="market-table-container" style="background: var(--card-bg); border-radius: 20px; border: 1px solid var(--border-color); overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.2);">
|
||
<table class="market-table" style="width: 100%; border-collapse: collapse; text-align: left; min-width: 600px;">
|
||
<thead>
|
||
<tr style="border-bottom: 1px solid var(--border-color); background: rgba(255,255,255,0.02);">
|
||
<th style="padding: 15px 20px; color: var(--text-muted); font-weight: 500; font-size: 13px;"><?php echo __('pair', '币对'); ?></th>
|
||
<th style="padding: 15px 20px; color: var(--text-muted); font-weight: 500; font-size: 13px;"><?php echo __('last_price', '最新价'); ?></th>
|
||
<th style="padding: 15px 20px; color: var(--text-muted); font-weight: 500; font-size: 13px;"><?php echo __('24h_change', '24h 涨跌'); ?></th>
|
||
<th class="desktop-only-cell" style="padding: 15px 20px; color: var(--text-muted); font-weight: 500; font-size: 13px;"><?php echo __('market_cap', '市值'); ?></th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="home-market-list">
|
||
<!-- JS Filled -->
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Download Section -->
|
||
<section style="padding: 60px 0; background: #0b0e11; border-top: 1px solid rgba(255,255,255,0.05);">
|
||
<div class="container">
|
||
<div class="download-grid" style="display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap;">
|
||
<div style="flex: 1.2; min-width: 300px;">
|
||
<h2 class="section-title-small" style="font-size: 2.2rem; font-weight: 800; margin-bottom: 20px; background: linear-gradient(135deg, #fff 0%, #848e9c 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">Trade Anywhere, Anytime</h2>
|
||
<p style="color: var(--text-muted); font-size: 1rem; line-height: 1.6; margin-bottom: 30px;">Stay connected to the markets with the NovaEx mobile app. Experience professional trading features in the palm of your hand.</p>
|
||
|
||
<div class="features-mini-grid" style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 30px;">
|
||
<div style="display: flex; gap: 12px; align-items: flex-start;">
|
||
<div style="width: 36px; height: 36px; border-radius: 10px; background: rgba(79, 172, 254, 0.1); display: flex; align-items: center; justify-content: center; color: var(--primary-color); flex-shrink: 0;">
|
||
<i class="fas fa-bolt" style="font-size: 14px;"></i>
|
||
</div>
|
||
<div>
|
||
<h4 style="margin: 0 0 3px; font-weight: 700; font-size: 0.95rem;">Fast & Secure</h4>
|
||
<p style="font-size: 0.85rem; color: #848e9c; margin: 0;">Military-grade encryption.</p>
|
||
</div>
|
||
</div>
|
||
<div style="display: flex; gap: 12px; align-items: flex-start;">
|
||
<div style="width: 36px; height: 36px; border-radius: 10px; background: rgba(0, 192, 135, 0.1); display: flex; align-items: center; justify-content: center; color: #00c087; flex-shrink: 0;">
|
||
<i class="fas fa-chart-line" style="font-size: 14px;"></i>
|
||
</div>
|
||
<div>
|
||
<h4 style="margin: 0 0 3px; font-weight: 700; font-size: 0.95rem;">Real-time</h4>
|
||
<p style="font-size: 0.85rem; color: #848e9c; margin: 0;">Low-latency updates.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="flex: 1; display: flex; flex-direction: column; gap: 15px; min-width: 280px;">
|
||
<a href="app.php" style="text-decoration: none;">
|
||
<div class="download-card-new" style="background: rgba(255,255,255,0.03); padding: 20px; border-radius: 16px; border: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; gap: 15px; transition: 0.3s;">
|
||
<div style="width: 50px; height: 50px; background: #000; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.6rem;">
|
||
<i class="fab fa-apple" style="color: white;"></i>
|
||
</div>
|
||
<div style="flex: 1;">
|
||
<div style="font-size: 0.75rem; color: #848e9c;">Download on the</div>
|
||
<div style="font-size: 1.1rem; font-weight: 800; color: white;">App Store</div>
|
||
</div>
|
||
<i class="fas fa-chevron-right" style="color: #848e9c;"></i>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="app.php" style="text-decoration: none;">
|
||
<div class="download-card-new" style="background: rgba(255,255,255,0.03); padding: 20px; border-radius: 16px; border: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; gap: 15px; transition: 0.3s;">
|
||
<div style="width: 50px; height: 50px; background: #000; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem;">
|
||
<i class="fab fa-google-play" style="color: #3DDC84;"></i>
|
||
</div>
|
||
<div style="flex: 1;">
|
||
<div style="font-size: 0.75rem; color: #848e9c;">Get it on</div>
|
||
<div style="font-size: 1.1rem; font-weight: 800; color: white;">Google Play</div>
|
||
</div>
|
||
<i class="fas fa-chevron-right" style="color: #848e9c;"></i>
|
||
</div>
|
||
</a>
|
||
|
||
<div style="display: flex; gap: 15px; align-items: center; background: linear-gradient(135deg, rgba(79, 172, 254, 0.1) 0%, rgba(0, 242, 254, 0.1) 100%); padding: 15px; border-radius: 16px; border: 1px solid rgba(79, 172, 254, 0.2);">
|
||
<div style="background: white; padding: 8px; border-radius: 10px;">
|
||
<i class="fas fa-qrcode" style="font-size: 2rem; color: #000;"></i>
|
||
</div>
|
||
<div>
|
||
<div style="font-weight: 700; color: white; font-size: 0.9rem;">Scan to Download</div>
|
||
<div style="font-size: 0.75rem; color: #848e9c;">iOS & Android</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Why Choose Us -->
|
||
<section class="container" style="padding: 60px 20px;">
|
||
<div style="text-align: center; margin-bottom: 50px;">
|
||
<h2 class="section-title-home" style="font-size: 2.2rem; font-weight: 800; margin-bottom: 15px;"><?php echo __('why_choose_us', '为什么选择 NovaEx？'); ?></h2>
|
||
<p style="color: var(--text-muted); max-width: 600px; margin: 0 auto; font-size: 1rem;"><?php echo __('platform_desc'); ?></p>
|
||
</div>
|
||
|
||
<div class="grid-3">
|
||
<div class="choose-card" style="padding: 40px 30px; background: rgba(255,255,255,0.02); border-radius: 24px; border: 1px solid rgba(255,255,255,0.05); text-align: center; transition: all 0.4s;">
|
||
<div style="width: 70px; height: 70px; background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); border-radius: 20px; display: flex; align-items: center; justify-content: center; margin: 0 auto 25px; color: white; font-size: 1.8rem;">
|
||
<i class="fas fa-shield-alt"></i>
|
||
</div>
|
||
<h3 style="margin-bottom: 15px; font-size: 1.4rem; font-weight: 700;"><?php echo __('secure_storage', 'Secure Storage'); ?></h3>
|
||
<p style="color: var(--text-muted); line-height: 1.6; font-size: 0.9rem;"><?php echo __('secure_storage_desc'); ?></p>
|
||
</div>
|
||
<div class="choose-card" style="padding: 40px 30px; background: rgba(255,255,255,0.02); border-radius: 24px; border: 1px solid rgba(255,255,255,0.05); text-align: center; transition: all 0.4s;">
|
||
<div style="width: 70px; height: 70px; background: linear-gradient(135deg, #00c087 0%, #00d2ff 100%); border-radius: 20px; display: flex; align-items: center; justify-content: center; margin: 0 auto 25px; color: white; font-size: 1.8rem;">
|
||
<i class="fas fa-user-lock"></i>
|
||
</div>
|
||
<h3 style="margin-bottom: 15px; font-size: 1.4rem; font-weight: 700;"><?php echo __('protected_insurance', 'Protected by Insurance'); ?></h3>
|
||
<p style="color: var(--text-muted); line-height: 1.6; font-size: 0.9rem;"><?php echo __('protected_insurance_desc'); ?></p>
|
||
</div>
|
||
<div class="choose-card" style="padding: 40px 30px; background: rgba(255,255,255,0.02); border-radius: 24px; border: 1px solid rgba(255,255,255,0.05); text-align: center; transition: all 0.4s;">
|
||
<div style="width: 70px; height: 70px; background: linear-gradient(135deg, #f0b90b 0%, #ff9a00 100%); border-radius: 20px; display: flex; align-items: center; justify-content: center; margin: 0 auto 25px; color: white; font-size: 1.8rem;">
|
||
<i class="fas fa-microchip"></i>
|
||
</div>
|
||
<h3 style="margin-bottom: 15px; font-size: 1.4rem; font-weight: 700;"><?php echo __('industry_best_practices', 'Best Practices'); ?></h3>
|
||
<p style="color: var(--text-muted); line-height: 1.6; font-size: 0.9rem;"><?php echo __('industry_best_practices_desc'); ?></p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Partners -->
|
||
<section style="padding: 60px 0; background: #161a1e;">
|
||
<div class="container" style="text-align: center;">
|
||
<h2 style="font-size: 1.8rem; font-weight: 800; margin-bottom: 40px;"><?php echo __('global_partners'); ?></h2>
|
||
<div class="partners-grid-custom" style="display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px;">
|
||
<div class="partner-item"><i class="fab fa-google-pay" style="font-size: 2rem; color: #4285F4;"></i></div>
|
||
<div class="partner-item"><i class="fab fa-apple-pay" style="font-size: 2rem; color: #ffffff;"></i></div>
|
||
<div class="partner-item"><i class="fab fa-visa" style="font-size: 2rem; color: #1a1f71;"></i></div>
|
||
<div class="partner-item"><i class="fab fa-mastercard" style="font-size: 2rem; color: #eb001b;"></i></div>
|
||
<div class="partner-item"><i class="fab fa-paypal" style="font-size: 2rem; color: #003087;"></i></div>
|
||
<div class="partner-item"><i class="fab fa-stripe" style="font-size: 2rem; color: #6772e5;"></i></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<style>
|
||
.carousel-dot.active { opacity: 1 !important; width: 30px !important; border-radius: 6px !important; background: var(--primary-color) !important; }
|
||
.partner-item { padding: 25px 15px; background: rgba(255,255,255,0.02); border-radius: 16px; transition: 0.3s; display: flex; align-items: center; justify-content: center; }
|
||
.partner-item:hover { background: rgba(255,255,255,0.05); transform: translateY(-3px); }
|
||
|
||
.download-card-new:hover { background: rgba(255,255,255,0.06) !important; border-color: var(--primary-color) !important; }
|
||
.choose-card:hover { transform: translateY(-10px); border-color: var(--primary-color) !important; background: rgba(79, 172, 254, 0.05) !important; }
|
||
|
||
@media (max-width: 992px) {
|
||
.carousel-container { height: 350px !important; border-radius: 0 !important; }
|
||
.carousel-title { font-size: 1.8rem !important; }
|
||
.carousel-desc { font-size: 0.9rem !important; margin-bottom: 20px !important; }
|
||
.partners-grid-custom { grid-template-columns: repeat(3, 1fr) !important; }
|
||
}
|
||
|
||
@media (max-width: 576px) {
|
||
.carousel-container { height: 300px !important; }
|
||
.carousel-title { font-size: 1.5rem !important; }
|
||
.section-title-home { font-size: 1.5rem !important; }
|
||
.partners-grid-custom { grid-template-columns: repeat(2, 1fr) !important; }
|
||
.desktop-only-cell { display: none; }
|
||
.features-mini-grid { grid-template-columns: 1fr !important; }
|
||
}
|
||
</style>
|
||
|
||
<script>
|
||
// Carousel Logic
|
||
let currentSlide = 0;
|
||
const track = document.getElementById('carouselTrack');
|
||
const dots = document.querySelectorAll('.carousel-dot');
|
||
|
||
function updateCarousel() {
|
||
if (!track) return;
|
||
track.style.transform = `translateX(-${currentSlide * 100}%)`;
|
||
dots.forEach((dot, i) => {
|
||
dot.classList.toggle('active', i === currentSlide);
|
||
});
|
||
}
|
||
|
||
function goToSlide(n) {
|
||
currentSlide = n;
|
||
updateCarousel();
|
||
}
|
||
|
||
function nextSlide() {
|
||
currentSlide = (currentSlide + 1) % 3;
|
||
updateCarousel();
|
||
}
|
||
|
||
setInterval(nextSlide, 5000);
|
||
|
||
const trendingPairs = <?php echo json_encode($trending_pairs); ?>;
|
||
const homeWs = new WebSocket('wss://stream.binance.com:9443/ws/' + trendingPairs.map(p => p.toLowerCase() + '@ticker').join('/'));
|
||
const homeMarketData = {};
|
||
|
||
homeWs.onmessage = (event) => {
|
||
const data = JSON.parse(event.data);
|
||
homeMarketData[data.s] = data;
|
||
renderHomeMarket();
|
||
};
|
||
|
||
function renderHomeMarket() {
|
||
const tbody = document.getElementById('home-market-list');
|
||
if (!tbody) return;
|
||
let html = '';
|
||
trendingPairs.forEach(p => {
|
||
const d = homeMarketData[p] || {c: 0, P: 0, q: 0};
|
||
const color = d.P >= 0 ? 'var(--success-color)' : 'var(--danger-color)';
|
||
const name = p.replace('USDT', '');
|
||
html += `
|
||
<tr style="border-bottom: 1px solid rgba(255,255,255,0.05);">
|
||
<td style="padding: 15px 20px; display: flex; align-items: center; gap: 10px;">
|
||
<img src="https://raw.githubusercontent.com/spothq/cryptocurrency-icons/master/128/color/${name.toLowerCase()}.png" width="28" onerror="this.src='https://cdn-icons-png.flaticon.com/512/2585/2585274.png'">
|
||
<div>
|
||
<div style="font-weight: 700; font-size: 0.95rem;">${name}</div>
|
||
<div style="font-size: 0.75rem; color: var(--text-muted);">USDT</div>
|
||
</div>
|
||
</td>
|
||
<td style="padding: 15px 20px; font-weight: 600; font-size: 0.95rem; color: #EAECEF;">$ ${parseFloat(d.c).toLocaleString()}</td>
|
||
<td style="padding: 15px 20px; color: ${color}; font-weight: 700; font-size: 0.95rem;">${d.P >= 0 ? '+' : ''}${d.P}%</td>
|
||
<td class="desktop-only-cell" style="padding: 15px 20px; color: var(--text-muted); font-size: 0.85rem;">$ ${(parseFloat(d.q) / 1000000).toFixed(2)}M</td>
|
||
</tr>
|
||
`;
|
||
});
|
||
tbody.innerHTML = html;
|
||
}
|
||
</script>
|
||
|
||
<?php include 'footer.php'; ?>
|