466 lines
17 KiB
PHP
466 lines
17 KiB
PHP
<?php
|
|
require_once __DIR__ . '/includes/lang.php';
|
|
require_once __DIR__ . '/includes/header.php';
|
|
|
|
// Smart Download Redirection Logic
|
|
if (isset($_GET['action']) && $_GET['action'] === 'download') {
|
|
$ua = strtolower($_SERVER['HTTP_USER_AGENT']);
|
|
$isIos = (strpos($ua, 'iphone') !== false || strpos($ua, 'ipad') !== false || strpos($ua, 'ipod') !== false);
|
|
$isAndroid = (strpos($ua, 'android') !== false);
|
|
|
|
if ($isIos) {
|
|
$url = getSetting('ios_download_url', '#');
|
|
} elseif ($isAndroid) {
|
|
$url = getSetting('apk_download_url', getSetting('android_download_url', '#'));
|
|
} else {
|
|
$url = getSetting('android_download_url', '#');
|
|
}
|
|
|
|
if ($url && $url !== '#') {
|
|
header("Location: $url");
|
|
exit;
|
|
} else {
|
|
// Fallback to page if no URL set
|
|
header("Location: /app.php");
|
|
exit;
|
|
}
|
|
}
|
|
?>
|
|
<main class="app-page-wrapper">
|
|
<!-- Hero Section -->
|
|
<section class="app-hero py-5 position-relative overflow-hidden">
|
|
<!-- Background decorative elements -->
|
|
<div class="position-absolute top-0 start-0 w-100 h-100 bg-gradient-dark z-0"></div>
|
|
<div class="blob blob-1"></div>
|
|
<div class="blob blob-2"></div>
|
|
|
|
<div class="container py-lg-5 position-relative z-1">
|
|
<div class="row align-items-center g-5">
|
|
<div class="col-lg-6 text-center text-lg-start animate__animated animate__fadeInLeft">
|
|
<h1 class="display-3 fw-bold text-white mb-4 line-height-1-2">
|
|
<span class="text-gradient-primary-light"><?= __('support_anywhere') ?></span>
|
|
</h1>
|
|
<p class="lead text-white mb-5 fs-5 opacity-75">
|
|
<?= __('app_mockup_desc') ?>
|
|
</p>
|
|
|
|
<div class="download-section mb-5">
|
|
<div class="row g-3 justify-content-center justify-content-lg-start">
|
|
<div class="col-12 mb-2 d-lg-none">
|
|
<a href="?action=download" class="download-btn-modern smart-download w-100 shadow-primary">
|
|
<i class="bi bi-download text-white"></i>
|
|
<div class="text">
|
|
<span class="text-white-50"><?= __('get_started') ?></span>
|
|
<div class="store text-white"><?= __('app_download') ?></div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div class="col-6 col-md-4">
|
|
<a href="<?= getSetting('ios_download_url', '#') ?>" class="download-btn-modern ios">
|
|
<i class="bi bi-apple text-white"></i>
|
|
<div class="text">
|
|
<span class="text-white-50"><?= __('download_on') ?></span>
|
|
<div class="store text-white"><?= __('app_store') ?></div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div class="col-6 col-md-4">
|
|
<a href="<?= getSetting('android_download_url', '#') ?>" class="download-btn-modern android">
|
|
<i class="bi bi-google-play text-info"></i>
|
|
<div class="text">
|
|
<span class="text-white-50"><?= __('get_it_on') ?></span>
|
|
<div class="store text-white"><?= __('google_play') ?></div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div class="col-12 col-md-4">
|
|
<a href="<?= getSetting('apk_download_url', '#') ?>" class="download-btn-modern apk">
|
|
<i class="bi bi-android2 text-success"></i>
|
|
<div class="text">
|
|
<span class="text-white-50"><?= __('download_on') ?></span>
|
|
<div class="store text-white"><?= __('android_apk') ?></div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="qr-container-modern d-inline-flex align-items-center p-1 rounded-5 bg-glass border border-white border-opacity-10 shadow-lg animate__animated animate__zoomIn">
|
|
<div class="qr-code-wrapper p-3 bg-white rounded-5 shadow-inner">
|
|
<?php
|
|
$protocol = isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on' ? 'https' : 'http';
|
|
$download_url = $protocol . '://' . $_SERVER['HTTP_HOST'] . '/app.php?action=download';
|
|
?>
|
|
<img src="https://api.qrserver.com/v1/create-qr-code/?size=100x100&data=<?= urlencode($download_url) ?>" alt="QR" class="qr-img">
|
|
</div>
|
|
<div class="px-4 py-2 text-start">
|
|
<h5 class="text-white fw-bold mb-1 fs-6"><?= __('scan_download') ?></h5>
|
|
<p class="text-white-50 x-small mb-0"><?= __('scan_qr_to_download') ?></p>
|
|
<div class="mt-2 d-flex gap-1">
|
|
<div class="dot bg-primary"></div>
|
|
<div class="dot bg-success"></div>
|
|
<div class="dot bg-info"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-6 text-center position-relative animate__animated animate__fadeInRight">
|
|
<div class="mockup-container-modern">
|
|
<!-- CSS Based Mockup for better performance and reliability -->
|
|
<div class="iphone-mockup-modern">
|
|
<div class="screen-modern">
|
|
<iframe src="/binary.php?symbol=BTC" frameborder="0" style="width: 100%; height: 100%; border: none;"></iframe>
|
|
</div>
|
|
<div class="home-bar-modern"></div>
|
|
<div class="notch-modern"></div>
|
|
</div>
|
|
<!-- Floating elements for depth -->
|
|
<div class="floating-element element-1"><div class="glass-card"><i class="bi bi-currency-bitcoin text-warning"></i><span>BTC/USDT</span></div></div>
|
|
<div class="floating-element element-2"><div class="glass-card"><i class="bi bi-shield-check text-success"></i><span>Secure</span></div></div>
|
|
<div class="floating-element element-3"><div class="glass-card"><i class="bi bi-lightning-charge-fill text-info"></i><span>Fast</span></div></div>
|
|
|
|
<!-- Background Glow -->
|
|
<div class="mockup-glow"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Installation Guide -->
|
|
<section class="py-5 position-relative overflow-hidden" style="background: #080a0c;">
|
|
<div class="container position-relative z-1">
|
|
<div class="text-center mb-5">
|
|
<h2 class="text-white fw-bold display-6 mb-3"><?= __('kyc_steps') ?></h2>
|
|
<p class="text-white-50 lead mx-auto" style="max-width: 600px;"><?= __('recharge_steps') ?></p>
|
|
</div>
|
|
<div class="row g-4">
|
|
<div class="col-md-4">
|
|
<div class="guide-card-modern p-4 rounded-5 bg-glass-dark border border-white border-opacity-5 h-100">
|
|
<div class="step-badge mb-4">01</div>
|
|
<h4 class="text-white mb-3"><?= __('scan_download') ?></h4>
|
|
<p class="text-white-50 mb-0"><?= __('app_guide_step1') ?></p>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="guide-card-modern p-4 rounded-5 bg-glass-dark border border-white border-opacity-5 h-100">
|
|
<div class="step-badge mb-4">02</div>
|
|
<h4 class="text-white mb-3"><?= __('app_install_auth') ?></h4>
|
|
<p class="text-white-50 mb-0"><?= __('app_guide_step2') ?></p>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="guide-card-modern p-4 rounded-5 bg-glass-dark border border-white border-opacity-5 h-100">
|
|
<div class="step-badge mb-4">03</div>
|
|
<h4 class="text-white mb-3"><?= __('app_experience_now') ?></h4>
|
|
<p class="text-white-50 mb-0"><?= __('app_guide_step3') ?></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Features -->
|
|
<section class="py-5 bg-gradient-dark-reverse border-top border-white border-opacity-5">
|
|
<div class="container">
|
|
<div class="row g-4">
|
|
<div class="col-md-4">
|
|
<div class="feature-item-modern p-4 text-center">
|
|
<div class="icon-box bg-gradient-primary text-white mb-4 shadow-primary">
|
|
<i class="bi bi-graph-up-arrow fs-2"></i>
|
|
</div>
|
|
<h4 class="text-white fw-bold mb-3"><?= __('real_time_alerts') ?></h4>
|
|
<p class="text-white-50"><?= __('full_trading_features') ?></p>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="feature-item-modern p-4 text-center">
|
|
<div class="icon-box bg-gradient-success text-white mb-4 shadow-success">
|
|
<i class="bi bi-safe2 fs-2"></i>
|
|
</div>
|
|
<h4 class="text-white fw-bold mb-3"><?= __('two_fa_security') ?></h4>
|
|
<p class="text-white-50"><?= __('inst_security_desc') ?></p>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="feature-item-modern p-4 text-center">
|
|
<div class="icon-box bg-gradient-info text-white mb-4 shadow-info">
|
|
<i class="bi bi-chat-dots fs-2"></i>
|
|
</div>
|
|
<h4 class="text-white fw-bold mb-3"><?= __('live_chat_247') ?></h4>
|
|
<p class="text-white-50"><?= __('support_247') ?></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</main>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const ua = navigator.userAgent.toLowerCase();
|
|
const isIos = /iphone|ipad|ipod/.test(ua);
|
|
const isAndroid = /android/.test(ua);
|
|
|
|
if (isIos) {
|
|
document.querySelector('.download-btn-modern.ios').classList.add('highlight-pulse');
|
|
} else if (isAndroid) {
|
|
document.querySelector('.download-btn-modern.android').classList.add('highlight-pulse');
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
:root {
|
|
--primary: #0062ff;
|
|
--primary-light: #4c9aff;
|
|
--success: #02c076;
|
|
--info: #00d2ff;
|
|
--warning: #f0b90b;
|
|
--surface: #1e2329;
|
|
--glass: rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
.app-page-wrapper {
|
|
background: #080a0c;
|
|
overflow-x: hidden;
|
|
color: #fff;
|
|
}
|
|
|
|
.bg-gradient-dark {
|
|
background: radial-gradient(circle at 0% 0%, rgba(0, 98, 255, 0.1) 0%, transparent 50%),
|
|
radial-gradient(circle at 100% 100%, rgba(2, 192, 118, 0.05) 0%, transparent 50%);
|
|
}
|
|
|
|
.bg-gradient-dark-reverse {
|
|
background: radial-gradient(circle at 100% 0%, rgba(0, 210, 255, 0.05) 0%, transparent 50%),
|
|
radial-gradient(circle at 0% 100%, rgba(0, 98, 255, 0.05) 0%, transparent 50%);
|
|
}
|
|
|
|
.text-gradient-primary-light {
|
|
background: linear-gradient(135deg, #fff 0%, var(--primary-light) 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
.bg-glass {
|
|
background: rgba(255, 255, 255, 0.03);
|
|
backdrop-filter: blur(10px);
|
|
-webkit-backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.bg-glass-dark {
|
|
background: rgba(0, 0, 0, 0.2);
|
|
backdrop-filter: blur(10px);
|
|
-webkit-backdrop-filter: blur(10px);
|
|
}
|
|
|
|
/* Blobs for background decoration */
|
|
.blob {
|
|
position: absolute;
|
|
width: 500px;
|
|
height: 500px;
|
|
background: var(--primary);
|
|
filter: blur(150px);
|
|
opacity: 0.1;
|
|
border-radius: 50%;
|
|
z-index: 0;
|
|
}
|
|
.blob-1 { top: -100px; right: -100px; }
|
|
.blob-2 { bottom: -100px; left: -100px; background: var(--success); }
|
|
|
|
/* Buttons */
|
|
.download-btn-modern {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 14px 18px;
|
|
background: rgba(255, 255, 255, 0.03);
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
border-radius: 16px;
|
|
text-decoration: none !important;
|
|
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
|
|
height: 100%;
|
|
}
|
|
.download-btn-modern:hover {
|
|
background: rgba(255, 255, 255, 0.08);
|
|
border-color: var(--primary);
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
|
|
}
|
|
.download-btn-modern i {
|
|
font-size: 28px;
|
|
margin-right: 15px;
|
|
}
|
|
.download-btn-modern .text .store {
|
|
font-size: 15px;
|
|
font-weight: 700;
|
|
line-height: 1.2;
|
|
}
|
|
.download-btn-modern .text span {
|
|
font-size: 10px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
display: block;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.smart-download {
|
|
background: var(--primary) !important;
|
|
border-color: var(--primary) !important;
|
|
}
|
|
|
|
/* QR Code */
|
|
.qr-container-modern {
|
|
margin-top: 20px;
|
|
}
|
|
.qr-img {
|
|
border-radius: 12px;
|
|
}
|
|
.dot {
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
}
|
|
.x-small { font-size: 11px; }
|
|
|
|
/* Mockup */
|
|
.mockup-container-modern {
|
|
position: relative;
|
|
padding: 40px;
|
|
display: inline-block;
|
|
}
|
|
.iphone-mockup-modern {
|
|
width: 280px;
|
|
height: 580px;
|
|
background: #111;
|
|
border-radius: 45px;
|
|
border: 10px solid #222;
|
|
position: relative;
|
|
z-index: 2;
|
|
box-shadow: 0 50px 100px rgba(0, 0, 0, 0.8);
|
|
}
|
|
.screen-modern {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 35px;
|
|
overflow: hidden;
|
|
background: #000;
|
|
}
|
|
.notch-modern {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 130px;
|
|
height: 25px;
|
|
background: #222;
|
|
border-bottom-left-radius: 18px;
|
|
border-bottom-right-radius: 18px;
|
|
z-index: 10;
|
|
}
|
|
.home-bar-modern {
|
|
position: absolute;
|
|
bottom: 8px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 90px;
|
|
height: 4px;
|
|
background: rgba(255, 255, 255, 0.3);
|
|
border-radius: 2px;
|
|
z-index: 10;
|
|
}
|
|
|
|
.mockup-glow {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 120%;
|
|
height: 110%;
|
|
background: radial-gradient(circle, rgba(0, 98, 255, 0.15) 0%, transparent 70%);
|
|
z-index: 1;
|
|
}
|
|
|
|
.floating-element {
|
|
position: absolute;
|
|
z-index: 3;
|
|
animation: float 5s ease-in-out infinite;
|
|
}
|
|
.glass-card {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
backdrop-filter: blur(10px);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
padding: 10px 15px;
|
|
border-radius: 15px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
|
|
}
|
|
.glass-card i { font-size: 20px; }
|
|
.glass-card span { font-size: 12px; font-weight: 600; color: #fff; }
|
|
|
|
.element-1 { top: 15%; right: -20px; animation-delay: 0s; }
|
|
.element-2 { bottom: 25%; left: -30px; animation-delay: 1.5s; }
|
|
.element-3 { top: 45%; left: -50px; animation-delay: 0.7s; }
|
|
|
|
@keyframes float {
|
|
0%, 100% { transform: translateY(0) rotate(0); }
|
|
50% { transform: translateY(-15px) rotate(2deg); }
|
|
}
|
|
|
|
/* Guide Cards */
|
|
.guide-card-modern {
|
|
transition: all 0.4s ease;
|
|
}
|
|
.guide-card-modern:hover {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border-color: var(--primary-light) !important;
|
|
transform: translateY(-8px);
|
|
}
|
|
.step-badge {
|
|
width: 50px;
|
|
height: 50px;
|
|
background: linear-gradient(135deg, var(--primary), var(--info));
|
|
border-radius: 15px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: 900;
|
|
font-size: 20px;
|
|
box-shadow: 0 10px 20px rgba(0, 98, 255, 0.3);
|
|
}
|
|
|
|
/* Feature Items */
|
|
.icon-box {
|
|
width: 80px;
|
|
height: 80px;
|
|
border-radius: 22px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0 auto;
|
|
}
|
|
.bg-gradient-primary { background: linear-gradient(135deg, var(--primary), var(--primary-light)); }
|
|
.bg-gradient-success { background: linear-gradient(135deg, var(--success), #3ae39f); }
|
|
.bg-gradient-info { background: linear-gradient(135deg, var(--info), #5de4ff); }
|
|
|
|
.shadow-primary { box-shadow: 0 15px 30px rgba(0, 98, 255, 0.25); }
|
|
.shadow-success { box-shadow: 0 15px 30px rgba(2, 192, 118, 0.25); }
|
|
.shadow-info { box-shadow: 0 15px 30px rgba(0, 210, 255, 0.25); }
|
|
|
|
@media (max-width: 991px) {
|
|
.iphone-mockup-modern {
|
|
width: 240px;
|
|
height: 500px;
|
|
}
|
|
.display-3 { font-size: 2.5rem; }
|
|
.element-1, .element-2, .element-3 { display: none; }
|
|
}
|
|
</style>
|
|
|
|
<?php require_once __DIR__ . '/includes/footer.php'; ?>
|
|
|