305 lines
23 KiB
PHP
305 lines
23 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 style="padding-top: 20px; background: #0b0e11;">
|
||
<div 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 style="position: absolute; top: 50%; left: 8%; transform: translateY(-50%); color: white; max-width: 600px;">
|
||
<h2 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 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 style="position: absolute; top: 50%; left: 8%; transform: translateY(-50%); color: white; max-width: 600px;">
|
||
<h2 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 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 style="position: absolute; top: 50%; left: 8%; transform: translateY(-50%); color: white; max-width: 600px;">
|
||
<h2 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 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 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 style="padding: 60px 0; max-width: 1200px; margin: 0 auto;">
|
||
<div style="display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 30px;">
|
||
<h2 style="font-size: 2rem; font-weight: 800;"><?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 style="background: var(--card-bg); border-radius: 24px; border: 1px solid var(--border-color); overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.2);">
|
||
<table style="width: 100%; border-collapse: collapse; text-align: left;">
|
||
<thead>
|
||
<tr style="border-bottom: 1px solid var(--border-color); background: rgba(255,255,255,0.02);">
|
||
<th style="padding: 20px 30px; color: var(--text-muted); font-weight: 500; font-size: 14px;"><?php echo __('pair', '币对'); ?></th>
|
||
<th style="padding: 20px 30px; color: var(--text-muted); font-weight: 500; font-size: 14px;"><?php echo __('last_price', '最新价'); ?></th>
|
||
<th style="padding: 20px 30px; color: var(--text-muted); font-weight: 500; font-size: 14px;"><?php echo __('24h_change', '24h 涨跌'); ?></th>
|
||
<th style="padding: 20px 30px; color: var(--text-muted); font-weight: 500; font-size: 14px;"><?php echo __('market_cap', '市值'); ?></th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="home-market-list">
|
||
<!-- JS Filled -->
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Download Section (Beautified and Constrained) -->
|
||
<section style="padding: 80px 0; background: #0b0e11; border-top: 1px solid rgba(255,255,255,0.05);">
|
||
<div style="max-width: 1200px; margin: 0 auto;">
|
||
<div style="display: flex; align-items: center; justify-content: space-between; gap: 60px; flex-wrap: wrap;">
|
||
<div style="flex: 1; min-width: 400px;">
|
||
<h2 style="font-size: 2.5rem; font-weight: 800; margin-bottom: 25px; 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: 1.1rem; line-height: 1.6; margin-bottom: 40px;">Stay connected to the markets with the NovaEx mobile app. Experience professional trading features in the palm of your hand, featuring real-time alerts, advanced charting, and instant deposits.</p>
|
||
|
||
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 40px;">
|
||
<div style="display: flex; gap: 15px; align-items: flex-start;">
|
||
<div style="width: 40px; height: 40px; border-radius: 12px; background: rgba(79, 172, 254, 0.1); display: flex; align-items: center; justify-content: center; color: var(--primary-color);">
|
||
<i class="fas fa-bolt"></i>
|
||
</div>
|
||
<div>
|
||
<h4 style="margin: 0 0 5px; font-weight: 700;">Fast & Secure</h4>
|
||
<p style="font-size: 0.9rem; color: #848e9c; margin: 0;">Optimized performance with military-grade encryption.</p>
|
||
</div>
|
||
</div>
|
||
<div style="display: flex; gap: 15px; align-items: flex-start;">
|
||
<div style="width: 40px; height: 40px; border-radius: 12px; background: rgba(0, 192, 135, 0.1); display: flex; align-items: center; justify-content: center; color: #00c087;">
|
||
<i class="fas fa-chart-line"></i>
|
||
</div>
|
||
<div>
|
||
<h4 style="margin: 0 0 5px; font-weight: 700;">Real-time Data</h4>
|
||
<p style="font-size: 0.9rem; color: #848e9c; margin: 0;">Low-latency market updates for precise execution.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="flex: 1; display: flex; flex-direction: column; gap: 20px; min-width: 300px;">
|
||
<div class="download-card-new" style="background: rgba(255,255,255,0.03); padding: 25px; border-radius: 20px; border: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; gap: 20px; transition: 0.3s; cursor: pointer;">
|
||
<div style="width: 60px; height: 60px; background: #000; border-radius: 15px; display: flex; align-items: center; justify-content: center; font-size: 2rem;">
|
||
<i class="fab fa-apple" style="color: white;"></i>
|
||
</div>
|
||
<div style="flex: 1;">
|
||
<div style="font-size: 0.85rem; color: #848e9c; font-weight: 500;">Download on the</div>
|
||
<div style="font-size: 1.3rem; font-weight: 800; color: white;">App Store</div>
|
||
</div>
|
||
<i class="fas fa-chevron-right" style="color: #848e9c;"></i>
|
||
</div>
|
||
|
||
<div class="download-card-new" style="background: rgba(255,255,255,0.03); padding: 25px; border-radius: 20px; border: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; gap: 20px; transition: 0.3s; cursor: pointer;">
|
||
<div style="width: 60px; height: 60px; background: #000; border-radius: 15px; display: flex; align-items: center; justify-content: center; font-size: 1.8rem;">
|
||
<i class="fab fa-google-play" style="color: #3DDC84;"></i>
|
||
</div>
|
||
<div style="flex: 1;">
|
||
<div style="font-size: 0.85rem; color: #848e9c; font-weight: 500;">Get it on</div>
|
||
<div style="font-size: 1.3rem; font-weight: 800; color: white;">Google Play</div>
|
||
</div>
|
||
<i class="fas fa-chevron-right" style="color: #848e9c;"></i>
|
||
</div>
|
||
|
||
<div style="display: flex; gap: 20px; align-items: center; background: linear-gradient(135deg, rgba(79, 172, 254, 0.1) 0%, rgba(0, 242, 254, 0.1) 100%); padding: 20px; border-radius: 20px; border: 1px solid rgba(79, 172, 254, 0.2);">
|
||
<div style="background: white; padding: 10px; border-radius: 12px;">
|
||
<i class="fas fa-qrcode" style="font-size: 2.5rem; color: #000;"></i>
|
||
</div>
|
||
<div>
|
||
<div style="font-weight: 700; color: white; font-size: 1rem;">Scan to Download</div>
|
||
<div style="font-size: 0.85rem; color: #848e9c; margin-top: 4px;">Supports iOS & Android</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Why Choose Us -->
|
||
<section style="padding: 100px 0; background: #0b0e11;">
|
||
<div style="max-width: 1200px; margin: 0 auto;">
|
||
<div style="text-align: center; margin-bottom: 80px;">
|
||
<h2 style="font-size: 2.8rem; font-weight: 800; margin-bottom: 20px;"><?php echo __('why_choose_us', '为什么选择 NovaEx？'); ?></h2>
|
||
<p style="color: var(--text-muted); max-width: 700px; margin: 0 auto; font-size: 1.1rem;"><?php echo __('platform_desc', 'NovaEx is the world\'s most trusted cryptocurrency exchange, offering professional trading tools and deep liquidity.'); ?></p>
|
||
</div>
|
||
|
||
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px;">
|
||
<div class="choose-card" style="padding: 50px 40px; background: rgba(255,255,255,0.02); border-radius: 32px; border: 1px solid rgba(255,255,255,0.05); text-align: center; transition: all 0.4s;">
|
||
<div style="width: 100px; height: 100px; background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); border-radius: 30px; display: flex; align-items: center; justify-content: center; margin: 0 auto 35px; color: white; font-size: 2.5rem; box-shadow: 0 15px 30px rgba(79, 172, 254, 0.3);">
|
||
<i class="fas fa-shield-alt"></i>
|
||
</div>
|
||
<h3 style="margin-bottom: 20px; font-size: 1.8rem; font-weight: 700;"><?php echo __('secure_storage', 'Secure Storage'); ?></h3>
|
||
<p style="color: var(--text-muted); line-height: 1.8; font-size: 1rem;"><?php echo __('secure_storage_desc', 'Most of our digital assets are stored in secure offline cold storage, providing institutional-grade protection for your funds.'); ?></p>
|
||
</div>
|
||
<div class="choose-card" style="padding: 50px 40px; background: rgba(255,255,255,0.02); border-radius: 32px; border: 1px solid rgba(255,255,255,0.05); text-align: center; transition: all 0.4s;">
|
||
<div style="width: 100px; height: 100px; background: linear-gradient(135deg, #00c087 0%, #00d2ff 100%); border-radius: 30px; display: flex; align-items: center; justify-content: center; margin: 0 auto 35px; color: white; font-size: 2.5rem; box-shadow: 0 15px 30px rgba(0, 192, 135, 0.3);">
|
||
<i class="fas fa-user-lock"></i>
|
||
</div>
|
||
<h3 style="margin-bottom: 20px; font-size: 1.8rem; font-weight: 700;"><?php echo __('protected_insurance', 'Protected by Insurance'); ?></h3>
|
||
<p style="color: var(--text-muted); line-height: 1.8; font-size: 1rem;"><?php echo __('protected_insurance_desc', 'NovaEx maintains an asset insurance fund to cover potential security breaches, ensuring user peace of mind.'); ?></p>
|
||
</div>
|
||
<div class="choose-card" style="padding: 50px 40px; background: rgba(255,255,255,0.02); border-radius: 32px; border: 1px solid rgba(255,255,255,0.05); text-align: center; transition: all 0.4s;">
|
||
<div style="width: 100px; height: 100px; background: linear-gradient(135deg, #f0b90b 0%, #ff9a00 100%); border-radius: 30px; display: flex; align-items: center; justify-content: center; margin: 0 auto 35px; color: white; font-size: 2.5rem; box-shadow: 0 15px 30px rgba(240, 185, 11, 0.3);">
|
||
<i class="fas fa-microchip"></i>
|
||
</div>
|
||
<h3 style="margin-bottom: 20px; font-size: 1.8rem; font-weight: 700;"><?php echo __('industry_best_practices', 'Best Practices'); ?></h3>
|
||
<p style="color: var(--text-muted); line-height: 1.8; font-size: 1rem;"><?php echo __('industry_best_practices_desc', 'NovaEx supports a variety of the most popular digital currencies and keeps adding more based on rigorous security standards.'); ?></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Partners (Colorful and Beautiful) -->
|
||
<section style="padding: 80px 0; background: #161a1e;">
|
||
<div style="max-width: 1200px; margin: 0 auto; text-align: center;">
|
||
<h2 style="font-size: 2.2rem; font-weight: 800; margin-bottom: 60px;"><?php echo __('global_partners', 'Global Strategic Partners'); ?></h2>
|
||
<div style="display: grid; grid-template-columns: repeat(6, 1fr); gap: 30px;">
|
||
<div class="partner-item">
|
||
<i class="fab fa-google-pay" style="font-size: 3rem; color: #4285F4;"></i>
|
||
<div style="margin-top: 15px; font-weight: 600; opacity: 0.9;">Google Pay</div>
|
||
</div>
|
||
<div class="partner-item">
|
||
<i class="fab fa-apple-pay" style="font-size: 3rem; color: #ffffff;"></i>
|
||
<div style="margin-top: 15px; font-weight: 600; opacity: 0.9;">Apple Pay</div>
|
||
</div>
|
||
<div class="partner-item">
|
||
<i class="fab fa-visa" style="font-size: 3rem; color: #1a1f71;"></i>
|
||
<div style="margin-top: 15px; font-weight: 600; opacity: 0.9;">VISA</div>
|
||
</div>
|
||
<div class="partner-item">
|
||
<i class="fab fa-mastercard" style="font-size: 3rem; color: #eb001b;"></i>
|
||
<div style="margin-top: 15px; font-weight: 600; opacity: 0.9;">Mastercard</div>
|
||
</div>
|
||
<div class="partner-item">
|
||
<i class="fab fa-paypal" style="font-size: 3rem; color: #003087;"></i>
|
||
<div style="margin-top: 15px; font-weight: 600; opacity: 0.9;">PayPal</div>
|
||
</div>
|
||
<div class="partner-item">
|
||
<i class="fab fa-stripe" style="font-size: 3rem; color: #6772e5;"></i>
|
||
<div style="margin-top: 15px; font-weight: 600; opacity: 0.9;">Stripe</div>
|
||
</div>
|
||
<!-- Row 2 -->
|
||
<div class="partner-item">
|
||
<i class="fab fa-amazon" style="font-size: 2.8rem; color: #ff9900;"></i>
|
||
<div style="margin-top: 15px; font-weight: 600; opacity: 0.9;">Amazon</div>
|
||
</div>
|
||
<div class="partner-item">
|
||
<i class="fab fa-microsoft" style="font-size: 2.8rem; color: #00a4ef;"></i>
|
||
<div style="margin-top: 15px; font-weight: 600; opacity: 0.9;">Microsoft</div>
|
||
</div>
|
||
<div class="partner-item">
|
||
<i class="fab fa-salesforce" style="font-size: 2.8rem; color: #00a1e0;"></i>
|
||
<div style="margin-top: 15px; font-weight: 600; opacity: 0.9;">Salesforce</div>
|
||
</div>
|
||
<div class="partner-item">
|
||
<i class="fab fa-slack" style="font-size: 2.8rem; color: #4a154b;"></i>
|
||
<div style="margin-top: 15px; font-weight: 600; opacity: 0.9;">Slack</div>
|
||
</div>
|
||
<div class="partner-item">
|
||
<i class="fab fa-atlassian" style="font-size: 2.8rem; color: #0052cc;"></i>
|
||
<div style="margin-top: 15px; font-weight: 600; opacity: 0.9;">Atlassian</div>
|
||
</div>
|
||
<div class="partner-item">
|
||
<i class="fab fa-github" style="font-size: 2.8rem; color: #ffffff;"></i>
|
||
<div style="margin-top: 15px; font-weight: 600; opacity: 0.9;">GitHub</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<style>
|
||
.carousel-dot.active { opacity: 1 !important; width: 35px !important; border-radius: 6px !important; background: var(--primary-color) !important; }
|
||
.partner-item { padding: 35px 20px; background: rgba(255,255,255,0.02); border-radius: 24px; transition: 0.3s; border: 1px solid transparent; }
|
||
.partner-item:hover { background: rgba(255,255,255,0.05); transform: translateY(-5px); border-color: rgba(255,255,255,0.1); }
|
||
|
||
.download-card-new:hover { background: rgba(255,255,255,0.06) !important; border-color: var(--primary-color) !important; transform: translateX(5px); }
|
||
|
||
.choose-card:hover { transform: translateY(-15px); border-color: var(--primary-color) !important; background: rgba(79, 172, 254, 0.05) !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); transition: 0.2s;" onmouseover="this.style.background='rgba(255,255,255,0.02)'" onmouseout="this.style.background='transparent'">
|
||
<td style="padding: 25px 30px; display: flex; align-items: center; gap: 15px;">
|
||
<img src="https://raw.githubusercontent.com/spothq/cryptocurrency-icons/master/128/color/${name.toLowerCase()}.png" width="32" onerror="this.src='https://cdn-icons-png.flaticon.com/512/2585/2585274.png'">
|
||
<div>
|
||
<div style="font-weight: 700; font-size: 1.1rem;">${name}</div>
|
||
<div style="font-size: 0.8rem; color: var(--text-muted);">USDT</div>
|
||
</div>
|
||
</td>
|
||
<td style="padding: 25px 30px; font-weight: 600; font-size: 1.1rem; color: #EAECEF;">$ ${parseFloat(d.c).toLocaleString()}</td>
|
||
<td style="padding: 25px 30px; color: ${color}; font-weight: 700; font-size: 1.1rem;">${d.P >= 0 ? '+' : ''}${d.P}%</td>
|
||
<td style="padding: 25px 30px; color: var(--text-muted); font-family: monospace; font-size: 0.9rem;">$ ${(parseFloat(d.q) / 1000000).toFixed(2)}M</td>
|
||
</tr>
|
||
`;
|
||
});
|
||
tbody.innerHTML = html;
|
||
}
|
||
</script>
|
||
|
||
<?php include 'footer.php'; ?>
|