290 lines
22 KiB
PHP
290 lines
22 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: 20px 0; background: #0b0e11;">
|
|
<div class="carousel-container" style="max-width: 1200px; margin: 0 auto; position: relative; height: 500px; overflow: hidden; border-radius: 24px; box-shadow: 0 30px 60px rgba(0,0,0,0.6);">
|
|
<div class="carousel-track" id="carouselTrack" style="display: flex; height: 100%; transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);">
|
|
<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: 650px;">
|
|
<h2 class="carousel-title" style="font-size: 3.5rem; font-weight: 800; margin-bottom: 25px; line-height: 1.1; text-shadow: 0 10px 20px rgba(0,0,0,0.5);">NovaEx Global Launch</h2>
|
|
<p class="carousel-desc" style="font-size: 1.2rem; opacity: 0.9; margin-bottom: 35px; line-height: 1.6;">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: 15px 45px; border-radius: 12px; font-weight: bold; text-decoration: none; display: inline-block; background: var(--primary-color); color: white; font-size: 1.1rem; box-shadow: 0 10px 20px rgba(79, 172, 254, 0.3);"><?php echo __('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: 650px;">
|
|
<h2 class="carousel-title" style="font-size: 3.5rem; font-weight: 800; margin-bottom: 25px; line-height: 1.1; text-shadow: 0 10px 20px rgba(0,0,0,0.5);">Trade Futures with 100x Leverage</h2>
|
|
<p class="carousel-desc" style="font-size: 1.2rem; opacity: 0.9; margin-bottom: 35px; line-height: 1.6;">Maximize your capital efficiency with our professional perpetual futures contracts.</p>
|
|
<a href="futures.php" class="btn-primary" style="padding: 15px 45px; border-radius: 12px; font-weight: bold; text-decoration: none; display: inline-block; background: var(--primary-color); color: white; font-size: 1.1rem;"><?php echo __('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: 650px;">
|
|
<h2 class="carousel-title" style="font-size: 3.5rem; font-weight: 800; margin-bottom: 25px; line-height: 1.1; text-shadow: 0 10px 20px rgba(0,0,0,0.5);">Secure Crypto Staking</h2>
|
|
<p class="carousel-desc" style="font-size: 1.2rem; opacity: 0.9; margin-bottom: 35px; line-height: 1.6;">Earn passive income on your idle assets with our high-yield staking pools.</p>
|
|
<a href="mining.php" class="btn-primary" style="padding: 15px 45px; border-radius: 12px; font-weight: bold; text-decoration: none; display: inline-block; background: var(--primary-color); color: white; font-size: 1.1rem;"><?php echo __('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: 60px 20px;">
|
|
<div style="display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 30px;">
|
|
<h2 class="section-title-home" style="font-size: 2.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: 15px;"><?php echo __('view_more_markets'); ?> <i class="fas fa-chevron-right" style="font-size: 11px; margin-left: 5px;"></i></a>
|
|
</div>
|
|
|
|
<div class="market-table-container" style="background: var(--card-bg); border-radius: 24px; border: 1px solid var(--border-color); overflow: hidden; box-shadow: 0 15px 40px rgba(0,0,0,0.3);">
|
|
<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.03);">
|
|
<th style="padding: 20px 25px; color: var(--text-muted); font-weight: 600; font-size: 14px;"><?php echo __('pair'); ?></th>
|
|
<th style="padding: 20px 25px; color: var(--text-muted); font-weight: 600; font-size: 14px;"><?php echo __('last_price'); ?></th>
|
|
<th style="padding: 20px 25px; color: var(--text-muted); font-weight: 600; font-size: 14px;"><?php echo __('24h_change'); ?></th>
|
|
<th class="desktop-only-cell" style="padding: 20px 25px; color: var(--text-muted); font-weight: 600; font-size: 14px;"><?php echo __('market_cap'); ?></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="home-market-list">
|
|
<!-- JS Filled -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Why Choose Us -->
|
|
<section class="container" style="padding: 80px 20px; border-top: 1px solid rgba(255,255,255,0.05);">
|
|
<div style="text-align: center; margin-bottom: 60px;">
|
|
<h2 class="section-title-home" style="font-size: 2.8rem; font-weight: 800; margin-bottom: 20px;"><?php echo __('why_choose_us'); ?></h2>
|
|
<p style="color: var(--text-muted); max-width: 700px; margin: 0 auto; font-size: 1.1rem; line-height: 1.7;"><?php echo __('platform_desc'); ?></p>
|
|
</div>
|
|
|
|
<div class="grid-3" style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;">
|
|
<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 ease;">
|
|
<div style="width: 80px; height: 80px; background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); border-radius: 24px; display: flex; align-items: center; justify-content: center; margin: 0 auto 30px; color: white; font-size: 2rem; box-shadow: 0 10px 20px rgba(79, 172, 254, 0.3);">
|
|
<i class="fas fa-shield-alt"></i>
|
|
</div>
|
|
<h3 style="margin-bottom: 18px; font-size: 1.5rem; font-weight: 700; color: white;"><?php echo __('secure_storage'); ?></h3>
|
|
<p style="color: var(--text-muted); line-height: 1.7; font-size: 1rem;"><?php echo __('secure_storage_desc'); ?></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 ease;">
|
|
<div style="width: 80px; height: 80px; background: linear-gradient(135deg, #00c087 0%, #00d2ff 100%); border-radius: 24px; display: flex; align-items: center; justify-content: center; margin: 0 auto 30px; color: white; font-size: 2rem; box-shadow: 0 10px 20px rgba(0, 192, 135, 0.3);">
|
|
<i class="fas fa-user-lock"></i>
|
|
</div>
|
|
<h3 style="margin-bottom: 18px; font-size: 1.5rem; font-weight: 700; color: white;"><?php echo __('protected_insurance'); ?></h3>
|
|
<p style="color: var(--text-muted); line-height: 1.7; font-size: 1rem;"><?php echo __('protected_insurance_desc'); ?></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 ease;">
|
|
<div style="width: 80px; height: 80px; background: linear-gradient(135deg, #f0b90b 0%, #ff9a00 100%); border-radius: 24px; display: flex; align-items: center; justify-content: center; margin: 0 auto 30px; color: white; font-size: 2rem; box-shadow: 0 10px 20px rgba(240, 185, 11, 0.3);">
|
|
<i class="fas fa-microchip"></i>
|
|
</div>
|
|
<h3 style="margin-bottom: 18px; font-size: 1.5rem; font-weight: 700; color: white;"><?php echo __('industry_best_practices'); ?></h3>
|
|
<p style="color: var(--text-muted); line-height: 1.7; font-size: 1rem;"><?php echo __('industry_best_practices_desc'); ?></p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Partners -->
|
|
<section style="padding: 100px 0; background: #0b0e11; border-top: 1px solid rgba(255,255,255,0.05);">
|
|
<div class="container" style="text-align: center;">
|
|
<h2 style="font-size: 2.2rem; font-weight: 800; margin-bottom: 15px;"><?php echo __('global_partners'); ?></h2>
|
|
<p style="color: var(--text-muted); margin-bottom: 60px; font-size: 1.1rem;"><?php echo __('partners_subtitle'); ?></p>
|
|
<div class="partners-grid-custom" style="display: grid; grid-template-columns: repeat(6, 1fr); gap: 25px;">
|
|
<div class="partner-item"><i class="fab fa-google-pay" style="font-size: 2.5rem; color: #4285F4;"></i></div>
|
|
<div class="partner-item"><i class="fab fa-apple-pay" style="font-size: 2.5rem; color: #ffffff;"></i></div>
|
|
<div class="partner-item"><i class="fab fa-visa" style="font-size: 2.5rem; color: #1a1f71;"></i></div>
|
|
<div class="partner-item"><i class="fab fa-mastercard" style="font-size: 2.5rem; color: #eb001b;"></i></div>
|
|
<div class="partner-item"><i class="fab fa-paypal" style="font-size: 2.5rem; color: #003087;"></i></div>
|
|
<div class="partner-item"><i class="fab fa-stripe" style="font-size: 2.5rem; color: #6772e5;"></i></div>
|
|
<div class="partner-item"><i class="fab fa-amazon-pay" style="font-size: 2.5rem; color: #FF9900;"></i></div>
|
|
<div class="partner-item"><i class="fab fa-alipay" style="font-size: 2.5rem; color: #00A3EE;"></i></div>
|
|
<div class="partner-item"><i class="fab fa-cc-amex" style="font-size: 2.5rem; color: #007bc1;"></i></div>
|
|
<div class="partner-item"><i class="fab fa-cc-discover" style="font-size: 2.5rem; color: #ff6000;"></i></div>
|
|
<div class="partner-item"><i class="fab fa-cc-diners-club" style="font-size: 2.5rem; color: #004a97;"></i></div>
|
|
<div class="partner-item"><i class="fab fa-cc-jcb" style="font-size: 2.5rem; color: #003184;"></i></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Download Section -->
|
|
<section style="padding: 100px 0; background: linear-gradient(to bottom, #0b0e11, #161a1e);">
|
|
<div class="container">
|
|
<div class="download-grid" style="display: flex; align-items: center; justify-content: space-between; gap: 60px; flex-wrap: wrap;">
|
|
<div style="flex: 1.2; min-width: 300px;">
|
|
<h2 class="section-title-small" style="font-size: 3rem; font-weight: 800; margin-bottom: 25px; background: linear-gradient(135deg, #fff 0%, #848e9c 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; line-height: 1.2;">Trade Anywhere, Anytime</h2>
|
|
<p style="color: var(--text-muted); font-size: 1.2rem; line-height: 1.8; margin-bottom: 40px;">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: 30px; margin-top: 40px;">
|
|
<div style="display: flex; gap: 15px; align-items: flex-start;">
|
|
<div style="width: 44px; height: 44px; border-radius: 14px; 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: 18px;"></i>
|
|
</div>
|
|
<div>
|
|
<h4 style="margin: 0 0 5px; font-weight: 700; font-size: 1.1rem; color: white;">Fast & Secure</h4>
|
|
<p style="font-size: 0.95rem; color: #848e9c; margin: 0; line-height: 1.4;">Military-grade encryption for all your data.</p>
|
|
</div>
|
|
</div>
|
|
<div style="display: flex; gap: 15px; align-items: flex-start;">
|
|
<div style="width: 44px; height: 44px; border-radius: 14px; 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: 18px;"></i>
|
|
</div>
|
|
<div>
|
|
<h4 style="margin: 0 0 5px; font-weight: 700; font-size: 1.1rem; color: white;">Real-time</h4>
|
|
<p style="font-size: 0.95rem; color: #848e9c; margin: 0; line-height: 1.4;">Low-latency updates and market depth.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="flex: 1; display: flex; flex-direction: column; gap: 20px; min-width: 320px;">
|
|
<a href="app.php" style="text-decoration: none;">
|
|
<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: all 0.3s ease;">
|
|
<div style="width: 60px; height: 60px; background: #000; border-radius: 16px; 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;">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>
|
|
</a>
|
|
|
|
<a href="app.php" style="text-decoration: none;">
|
|
<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: all 0.3s ease;">
|
|
<div style="width: 60px; height: 60px; background: #000; border-radius: 16px; 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;">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>
|
|
</a>
|
|
|
|
<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: 12px; border-radius: 14px; box-shadow: 0 5px 15px rgba(0,0,0,0.2);">
|
|
<i class="fas fa-qrcode" style="font-size: 2.5rem; color: #000;"></i>
|
|
</div>
|
|
<div>
|
|
<div style="font-weight: 800; color: white; font-size: 1.1rem; margin-bottom: 4px;">Scan to Download</div>
|
|
<div style="font-size: 0.9rem; color: #848e9c;">Support for iOS & Android</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<style>
|
|
.carousel-dot.active { opacity: 1 !important; width: 35px !important; border-radius: 8px !important; background: var(--primary-color) !important; }
|
|
.partner-item { padding: 30px 20px; background: rgba(255,255,255,0.02); border-radius: 20px; transition: 0.3s; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,0.03); }
|
|
.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; }
|
|
|
|
@media (max-width: 992px) {
|
|
.carousel-container { height: 400px !important; border-radius: 0 !important; }
|
|
.carousel-title { font-size: 2.2rem !important; }
|
|
.carousel-desc { font-size: 1rem !important; margin-bottom: 25px !important; }
|
|
.partners-grid-custom { grid-template-columns: repeat(3, 1fr) !important; }
|
|
.grid-3 { grid-template-columns: 1fr !important; }
|
|
.section-title-home { font-size: 2.2rem !important; }
|
|
}
|
|
|
|
@media (max-width: 576px) {
|
|
.carousel-container { height: 350px !important; }
|
|
.carousel-title { font-size: 1.8rem !important; }
|
|
.section-title-home { font-size: 1.8rem !important; }
|
|
.partners-grid-custom { grid-template-columns: repeat(2, 1fr) !important; }
|
|
.desktop-only-cell { display: none; }
|
|
.features-mini-grid { grid-template-columns: 1fr !important; }
|
|
.download-grid { gap: 40px !important; }
|
|
.section-title-small { font-size: 2.2rem !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, 6000);
|
|
|
|
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: 20px 25px; 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; color: white;">${name}</div>
|
|
<div style="font-size: 0.8rem; color: var(--text-muted);">USDT</div>
|
|
</div>
|
|
</td>
|
|
<td style="padding: 20px 25px; font-weight: 600; font-size: 1.1rem; color: #EAECEF;">$ ${parseFloat(d.c).toLocaleString()}</td>
|
|
<td style="padding: 20px 25px; color: ${color}; font-weight: 700; font-size: 1.1rem;">${d.P >= 0 ? '+' : ''}${d.P}%</td>
|
|
<td class="desktop-only-cell" style="padding: 20px 25px; color: var(--text-muted); font-size: 1rem;">$ ${(parseFloat(d.q) / 1000000).toFixed(2)}M</td>
|
|
</tr>
|
|
`;
|
|
});
|
|
tbody.innerHTML = html;
|
|
}
|
|
</script>
|
|
|
|
<?php include 'footer.php'; ?>
|