landing/index.html
2025-05-04 16:09:55 +00:00

411 lines
30 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>BlackBox Экосистема приватности и безопасности</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, minimum-scale=0.5, viewport-fit=cover">
<meta name="description" content="BlackBox — физическое устройство для мультиуровневой приватности: VPN, анонимный email, приватный мессенджер, децентрализованный хостинг, защищённая передача файлов, крипто-операции. Глубокое динамическое сравнение — в одном устройстве.">
<meta name="keywords" content="BlackBox, приватность, безопасность, VPN, экосистема, роутер, анонимный email, приватный мессенджер, децентрализованный хостинг, защищённая передача файлов, крипто-операции">
<link href="/css/tailwind.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/css/all.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat+Alternates:wght@700;500&family=Montserrat:wght@700;500;400&family=Inter:wght@400;600&display=swap" rel="stylesheet">
<script src="/js/echarts.min.js"></script>
<link rel="stylesheet" href="/css/style.css">
<!-- Open Graph Meta Tags for Social Media -->
<meta property="og:title" content="BlackBox Экосистема приватности и безопасности">
<meta property="og:description" content="BlackBox — физическое устройство для мультиуровневой приватности: VPN, анонимный email, приватный мессенджер, децентрализованный хостинг, защищённая передача файлов, крипто-операции.">
<meta property="og:image" content="/images/scales.webp"> <!-- Using the main device image -->
<meta property="og:url" content="https://bbox.wtf"> <!-- Replace with actual URL -->
<meta property="og:type" content="website">
<!-- Twitter Card Meta Tags -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="BlackBox Экосистема приватности и безопасности">
<meta name="twitter:description" content="BlackBox — физическое устройство для мультиуровневой приватности: VPN, анонимный email, приватный мессенджер, децентрализованный хостинг, защищённая передача файлов, крипто-операции.">
<meta name="twitter:image" content="/images/scales.webp"> <!-- Using the main device image -->
</head>
<body class="gradient-bg overflow-x-hidden">
<!-- ШАПКА -->
<header class="flex flex-wrap justify-between items-center px-5 md:px-10 py-7 bg-transparent z-10 relative">
<a href="/ru/" class="flex items-center space-x-4">
<img src="/images/logo.webp" alt="bbox logo" class="w-14 h-14 rounded-lg shadow-lg">
<span class="font-montserrat font-bold text-2xl text-cyan-400 tracking-widest">BlackBox</span>
</a>
<nav class="hidden md:flex space-x-8 text-lg font-montserrat font-semibold">
<a href="/ru/#features" class="hover:text-cyan-400 transition-colors">Особенности</a>
<a href="/ru/#supercompare" class="hover:text-cyan-400 transition-colors">Сравнение</a>
<a href="/ru/#pricing" class="hover:text-cyan-400 transition-colors">Цена</a>
<a href="/ru/#testimonials" class="hover:text-cyan-400 transition-colors">Отзывы</a>
<a href="/pages/products.html" class="hover:text-cyan-400 transition-colors">Каталог</a>
</nav>
<a href="#order" class="pulse-cta rounded-xl px-7 py-3 bg-emerald-500 text-white text-lg font-bold shadow-lg hover:bg-emerald-400 transition-all duration-300 transform hover:scale-105" style="font-family: 'Montserrat', sans-serif; box-shadow: 0 0 15px 5px rgba(16, 185, 129, 0.5);">
Заказать сейчас
<i class="fas fa-lock ml-2"></i>
</a>
</header>
<!-- ГЛАВНЫЙ РАЗДЕЛ -->
<section class="pt-10 pb-14 md:pt-18 md:pb-32 px-5 lg:px-0 flex flex-col items-center text-center relative overflow-visible bg-gradient-to-b from-black/90 to-gray-950 z-0">
<div class="w-full mx-auto shadow-3d transition-all duration-300" style="background: url('/images/banner-image.webp') center/cover no-repeat; padding: 2rem; border-radius: 1rem;">
<h1 class="text-3xl md:text-5xl lg:text-6xl leading-tight mb-6 fade-up text-white" style="--delay:.1s; text-shadow: 0 2px 4px rgba(0,0,0,0.5);">
<span class="font-montserrat-alternates font-medium">Целая</span><br class="hidden md:inline">
<span class="font-bebas-neue">ЭКОСИСТЕМА</span><br class="hidden lg:inline">
<span class="font-montserrat-alternates font-medium">Приватности</span><br>
<span class="text-cyan-400 font-montserrat">в одном устройстве</span>
</h1>
<p class="text-xl md:text-2xl max-w-2xl mx-auto mb-10 text-white fade-up" style="--delay:.3s">
BlackBox — не просто VPN.<br>
Это инновационное аппаратное решение, которое объединяет инструменты приватности, общения и блокировки слежки на уровне, который невозможен у обычных VPN-сервисов и роутеров!
</p>
<div class="flex flex-col md:flex-row gap-4 items-center justify-center fade-up" style="--delay:.55s">
<a href="#order" class="pulse-cta px-12 py-4 rounded-2xl text-white font-extrabold font-montserrat bg-gradient-to-r from-emerald-500 to-green-500 text-2xl shadow-3d hover:from-emerald-400 hover:to-green-400 transform-gpu transition-all duration-300 hover:scale-105" style="box-shadow: 0 0 20px 8px rgba(16, 185, 129, 0.6);">Купить со скидкой</a>
<a href="#supercompare" class="px-10 py-4 rounded-2xl border-2 border-cyan-400 text-cyan-300 bg-transparent font-bold text-xl font-montserrat hover:bg-cyan-700/10 transition">Динамическое сравнение</a>
</div>
</div>
<div class="mt-14 mb-8 relative flex justify-center fade-up" style="--delay:.85s;">
<img src="/images/scales.webp" alt="BlackBox Device" class="hero-3d rounded-3xl w-[370px] md:w-[470px] z-10" draggable="false">
<div class="absolute -bottom-4 left-1/2 -translate-x-1/2 w-72 h-16 bg-cyan-400/10 rounded-full blur-2xl z-0"></div>
</div>
<div class="mt-4 max-w-2xl mx-auto fade-up" style="--delay:1.1s;">
<span class="inline-flex items-center px-4 py-1 rounded-full bg-cyan-800/20 text-cyan-200 font-semibold text-lg animate-pulse">
<i class="fas fa-bolt text-yellow-300 mr-2"></i>
Скидка 30% на предзаказ до 1 июня!
</span>
</div>
</section>
<!-- СУПЕРДИНАМИЧЕСКОЕ СРАВНЕНИЕ -->
<section id="supercompare" class="max-w-5xl mx-auto py-14 px-5 fade-up" style="--delay:.1s">
<h2 class="text-3xl md:text-4xl font-black font-montserrat text-cyan-400 mb-5 text-center tracking-tight">
Динамическое сравнение:&nbsp;<span class="text-white">BlackBox</span> против VPN и роутеров
</h2>
<p class="text-lg text-gray-300 max-w-2xl mx-auto mb-10 text-center">
<span class="text-cyan-300 font-bold">BlackBox</span> — это <span class="underline">экосистема приватности</span>. Смотрите как поддержка функций расширяется в сравнении с простыми VPN-сервисами и аппаратными роутерами.
</p>
<div class="glass-card shadow-3d p-8 mb-8">
<div class="grid grid-cols-4 gap-4 mb-6">
<div class="col-span-1 font-bold text-gray-300 text-right pr-4">Функции</div>
<div class="col-span-1 font-bold text-cyan-400 text-center">BlackBox</div>
<div class="col-span-1 font-bold text-blue-400 text-center">VPN-Роутер</div>
<div class="col-span-1 font-bold text-purple-400 text-center">VPN-сервис</div>
</div>
<div id="featuresContainer">
<!-- Features will be inserted here by JS -->
</div>
<div class="text-gray-400 mt-6 text-base">
<i class="fas fa-info-circle text-cyan-300"></i>
<span class="ml-1">Наведите курсор на строку, чтобы увидеть подробности о каждой функции</span>
</div>
<div id="dynCompareHint" class="font-mono text-sm mt-3 p-3 bg-gray-800/50 rounded-lg"></div>
</div>
</section>
<!-- ОСОБЕННОСТИ -->
<section id="features" class="max-w-7xl mx-auto mt-8 lg:mt-0 py-13 px-5">
<h2 class="text-3xl md:text-4xl font-bold font-montserrat text-cyan-400 mb-7 fade-up" style="--delay:.15s">BlackBox: преимущества экосистемы</h2>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8 fade-up" style="--delay:.22s">
<div class="glass-card shadow-3d p-8 transition hover:scale-105">
<i class="fas fa-user-secret text-cyan-300 text-4xl mb-4"></i>
<h3 class="font-bold text-xl mb-2">Все инструменты приватности</h3>
<p class="text-gray-300">VPN, мессенджер, email, файлы, кошелек и хостинг — в одном мини-компьютере. Больше не нужно искать отдельные сервисы!</p>
</div>
<div class="glass-card shadow-3d p-8 transition hover:scale-105">
<i class="fas fa-globe text-cyan-400 text-4xl mb-4"></i>
<h3 class="font-bold text-xl mb-2">Анонимный интернет & даркнет</h3>
<p class="text-gray-300">Безопасный доступ ко всем сервисам, включая onion и децентрализованный интернет — даже если они заблокированы вашим провайдером.</p>
</div>
<div class="glass-card shadow-3d p-8 transition hover:scale-105">
<i class="fas fa-comments text-purple-300 text-4xl mb-4"></i>
<h3 class="font-bold text-xl mb-2">Личный защищённый мессенджер</h3>
<p class="text-gray-300">Собственная платформа для групповых и приватных чатов без риска "утечек". Все данные только у вас!</p>
</div>
<div class="glass-card shadow-3d p-8 transition hover:scale-105">
<i class="fas fa-envelope-open-text text-yellow-300 text-4xl mb-4"></i>
<h3 class="font-bold text-xl mb-2">Анонимный email и обмен файлами</h3>
<p class="text-gray-300">Создание почтового адреса за 1 клик, обмен файлами без посредников и цензуры.</p>
</div>
<div class="glass-card shadow-3d p-8 transition hover:scale-105">
<i class="fas fa-coins text-emerald-300 text-4xl mb-4"></i>
<h3 class="font-bold text-xl mb-2">Изолированный крипто-кошелек</h3>
<p class="text-gray-300">Cold-wallet для хранения и операций криптовалютой с максимальной изоляцией от интернет-угроз.</p>
</div>
<div class="glass-card shadow-3d p-8 transition hover:scale-105">
<i class="fas fa-users-cog text-pink-400 text-4xl mb-4"></i>
<h3 class="font-bold text-xl mb-2">Платформа для всех устройств</h3>
<p class="text-gray-300">BlackBox работает как для одного пользователя, так и для всей семьи или бизнес-группы. Неограниченное количество подключённых устройств.</p>
</div>
</div>
</section>
<!-- ВИТРИНА ПРОДУКТОВ -->
<section id="products" class="max-w-6xl mx-auto py-12 fade-up" style="--delay:.1s">
<h2 class="text-3xl md:text-4xl font-extrabold mb-10 font-montserrat text-center text-cyan-400 px-6">Модельный ряд BlackBox</h2>
<div class="flipbook-container relative h-96 md:h-[36rem] w-full">
<!-- BlackBox VPN (far left) -->
<div class="flipbook-page" data-page="1">
<div class="glass-card shadow-3d p-6 text-center h-full">
<div class="h-40 mb-4 flex items-center justify-center">
<img src="/images/bb_on_white-square.webp" alt="BlackBox VPN" class="h-full object-contain rounded-lg">
</div>
<h3 class="text-xl font-bold mb-3 text-cyan-300 product-title" data-product="BlackBox VPN">BlackBox VPN</h3>
<div class="inline-flex items-center px-3 py-1 rounded-full bg-cyan-800/20 text-cyan-200 font-bold mb-3 animate-pulse">
<span>99 €</span>
</div>
<p class="text-gray-300 mb-4 product-description">Создаёт Wi-Fi точку с защищённым VPN. 512 MB RAM.</p>
<div class="flex justify-center gap-3">
<button class="buy-btn product-buy-btn">Купить</button>
<button onclick="window.location.href='/items/boxes/blackbox-vpn.html'" class="details-btn product-details-btn">Подробнее</button>
</div>
</div>
</div>
<!-- BlackBox Privacy Messenger/Cloud (left) -->
<div class="flipbook-page" data-page="2">
<div class="glass-card shadow-3d p-6 text-center h-full">
<div class="h-40 mb-4 flex items-center justify-center">
<img src="/images/bb_on_white-square.webp" alt="BlackBox Privacy" class="h-full object-contain rounded-lg">
</div>
<h3 class="text-xl font-bold mb-3 text-cyan-300 product-title" data-product="BlackBox Privacy Messenger/Cloud">BlackBox Privacy Messenger/Cloud</h3>
<div class="inline-flex items-center px-3 py-1 rounded-full bg-cyan-800/20 text-cyan-200 font-bold mb-3 animate-pulse">
<span>199 €</span>
</div>
<p class="text-gray-300 mb-4 product-description">Встроенный Matrix Messenger или Nextcloud. 1 GB RAM. Полный контроль над вашими данными.</p>
<div class="flex justify-center gap-3">
<button class="buy-btn product-buy-btn">Купить</button>
<button onclick="window.location.href='/items/boxes/blackbox-privacy.html'" class="details-btn product-details-btn">Подробнее</button>
</div>
</div>
</div>
<!-- BlackBox 4GB (center) -->
<div class="flipbook-page active" data-page="3">
<div class="glass-card shadow-3d p-6 text-center h-full selected">
<div class="h-40 mb-4 flex items-center justify-center">
<img src="/images/bb_on_white-square.webp" alt="BlackBox 4GB" class="h-full object-contain rounded-lg">
</div>
<h3 class="text-xl font-bold mb-3 text-cyan-300 product-title" data-product="BlackBox 4GB">BlackBox 4GB</h3>
<div class="inline-flex items-center px-3 py-1 rounded-full bg-cyan-800/20 text-cyan-200 font-bold mb-3 animate-pulse">
<span>299 €</span>
</div>
<p class="text-gray-300 mb-4 product-description">Все функции первых моделей + удалённый рабочий стол (Workspace). 4 GB RAM.</p>
<div class="flex justify-center gap-3">
<button class="buy-btn product-buy-btn">Купить</button>
<button onclick="window.location.href='/items/boxes/blackbox-4gb.html'" class="details-btn product-details-btn">Подробнее</button>
</div>
</div>
</div>
<!-- BlackBox Workstation (right) -->
<div class="flipbook-page" data-page="4">
<div class="glass-card shadow-3d p-6 text-center h-full">
<div class="h-40 mb-4 flex items-center justify-center">
<img src="/images/bb_on_white-square.webp" alt="BlackBox Workstation" class="h-full object-contain rounded-lg">
</div>
<h3 class="text-xl font-bold mb-3 text-cyan-300 product-title" data-product="BlackBox Workstation">BlackBox Workstation</h3>
<div class="inline-flex items-center px-3 py-1 rounded-full bg-cyan-800/20 text-cyan-200 font-bold mb-3 animate-pulse">
<span>499 €</span>
</div>
<p class="text-gray-300 mb-4 product-description">Полноценная рабочая станция. Все функции предыдущих моделей.</p>
<div class="flex justify-center gap-3">
<button class="buy-btn product-buy-btn">Купить</button>
<button onclick="window.location.href='/items/boxes/blackbox-workstation.html'" class="details-btn product-details-btn">Подробнее</button>
</div>
</div>
</div>
<!-- BlackBox AI (far right) -->
<div class="flipbook-page" data-page="5">
<div class="glass-card shadow-3d p-6 text-center h-full">
<div class="h-40 mb-4 flex items-center justify-center">
<img src="/images/bb_on_white-square.webp" alt="BlackBox AI" class="h-full object-contain rounded-lg">
</div>
<h3 class="text-xl font-bold mb-3 text-cyan-300 product-title" data-product="BlackBox AI">BlackBox AI</h3>
<div class="inline-flex items-center px-3 py-1 rounded-full bg-cyan-800/20 text-cyan-200 font-bold mb-3 animate-pulse" style="box-shadow: 0 0 10px 2px rgba(116, 250, 255, 0.3);">
<span>2999 €</span>
</div>
<p class="text-gray-300 mb-4 product-description">Включает все технологии BlackBox. Приватный искусственный интеллект. Максимальная автономность и защита.</p>
<div class="flex justify-center gap-3">
<button class="buy-btn product-buy-btn">Купить</button>
<button onclick="window.location.href='/items/boxes/blackbox-ai.html'" class="details-btn product-details-btn">Подробнее</button>
</div>
</div>
</div>
<!-- BlackBox Shop -->
<div class="flipbook-page" data-page="6">
<div class="glass-card shadow-3d p-6 text-center h-full">
<div class="h-40 mb-4 flex items-center justify-center">
<img src="/images/bb_on_white-square.webp" alt="BlackBox Shop" class="h-full object-contain rounded-lg">
</div>
<h3 class="text-xl font-bold mb-3 text-cyan-300 product-title" data-product="BlackBox Shop">BlackBox Shop</h3>
<div class="inline-flex items-center px-3 py-1 rounded-full bg-cyan-800/20 text-cyan-200 font-bold mb-3 animate-pulse" style="box-shadow: 0 0 10px 2px rgba(116, 250, 255, 0.3);">
<span>от 499 €</span>
</div>
<p class="text-gray-300 mb-4 product-description">Создание магазина в Telegram через бота. Загрузка товаров, описание, цена. Оплата за товары через криптовалюту. Полная анонимность продавца и покупателя.</p>
<div class="flex justify-center gap-3">
<button class="buy-btn product-buy-btn">Купить</button>
<button onclick="window.location.href='/items/boxes/blackbox-shop.html'" class="details-btn product-details-btn">Подробнее</button>
</div>
</div>
</div>
</div>
<div class="flipbook-indicator-track"></div>
<div class="flipbook-indicator" style="transform: translateX(-150%);"></div>
</section>
<!-- PRICING & ORDER -->
<section id="order" class="max-w-3xl mx-auto mb-18 py-12 px-6 rounded-3xl glass-card mt-14 text-center border-2 border-cyan-500 relative fade-up" style="--delay:.1s">
<div class="absolute top-3 left-1/3 -translate-x-1/2 bg-gradient-to-r from-emerald-500 to-green-500 text-white text-lg font-black rounded-full px-8 py-2 shadow-xl animate-bounce" style="box-shadow: 0 0 15px 5px rgba(16, 185, 129, 0.5);">
-30% Только сейчас!
</div>
<h2 class="text-3xl md:text-4xl font-extrabold mb-4 font-montserrat">Закажите BlackBox WorkStation со скидкой <span class="text-cyan-400">350&nbsp;USD</span></h2>
<p class="text-lg text-gray-200 mb-6 max-w-xl mx-auto">Единоразовая оплата — никаких подписок.<br> Доставка по всему миру. Количество устройств по акции ограничено!</p>
<div class="flex flex-wrap items-center justify-center gap-8 mb-7">
<div class="text-left bg-gray-800/70 rounded-2xl p-6">
<div class="text-2xl">
<span class="text-cyan-400 font-bold">149&nbsp;USD</span>
<span class="line-through text-gray-500 ml-2 text-lg">499&nbsp;USD</span>
</div>
<div class="text-gray-400 text-xs mt-1">Спец. цена для 10 первых покупателей</div>
<div class="mt-3 text-base text-green-300 font-bold">+ Бесплатное обновление в течении года</div>
</div>
<ul class="text-left space-y-2 text-sm text-gray-200">
<li><i class="fas fa-check mr-2 text-cyan-400"></i>Гарантия возврата денег 30 дней</li>
<li><i class="fas fa-check mr-2 text-cyan-400"></i>Доставка по всему миру</li>
<li><i class="fas fa-check mr-2 text-cyan-400"></i>Персональная поддержка</li>
</ul>
</div>
<a href="https://bbox.rocks/#order" target="_blank" class="pulse-cta px-12 py-4 rounded-xl text-white font-extrabold font-montserrat bg-gradient-to-r from-cyan-400 via-emerald-400 to-cyan-500 shadow-3d text-2xl hover:bg-cyan-400 transform transition">Заказать</a>
<div class="mt-6 text-gray-300 text-base">Действительно до <span class="inline-block text-cyan-300 rounded px-2 py-1 font-bold bg-cyan-800/30">1&nbsp;июня 2025</span> или пока не кончится запас.</div>
</section>
<!-- TESTIMONIALS -->
<section id="testimonials" class="max-w-6xl mx-auto py-11 px-6 mt-4 fade-up" style="--delay:.1s">
<h2 class="text-3xl font-extrabold text-cyan-400 mb-7 text-center">Что говорят наши пользователи?</h2>
<div class="grid md:grid-cols-3 gap-7 lg:gap-12">
<div class="glass-card p-7 shadow-3d flex flex-col items-center text-center">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Testimonial" class="w-14 h-14 rounded-full mb-3 shadow-lg">
<div class="mb-2 font-bold text-lg text-emerald-300">Андрей, стартапер</div>
<div class="text-gray-300 italic">"BlackBox — первый гаджет, которому я доверяю свои личные данные. Никаких логов, быстрая работа, супер для работы из любой точки мира."</div>
</div>
<div class="glass-card p-7 shadow-3d flex flex-col items-center text-center border-2 border-cyan-400">
<img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Testimonial" class="w-14 h-14 rounded-full mb-3 shadow-lg">
<div class="mb-2 font-bold text-lg text-cyan-300">Мария, мама</div>
<div class="text-gray-300 italic">"Для нас BlackBox — гарантия интернет-безопасности всей семьи. Даже дети могут пользоваться, ничего не настраивая."</div>
</div>
<div class="glass-card p-7 shadow-3d flex flex-col items-center text-center">
<img src="https://randomuser.me/api/portraits/men/67.jpg" alt="Testimonial" class="w-14 h-14 rounded-full mb-3 shadow-lg">
<div class="mb-2 font-bold text-lg text-purple-300">Влад, программист</div>
<div class="text-gray-300 italic">"Linux, опенсорс, анонимность — все работает быстро и продуманно. Отличная альтернатива VPN-сервисам и роутерам."</div>
</div>
</div>
</section>
<!-- FOOTER -->
<footer class="w-full mt-10 pt-7 pb-8 bg-black/60 flex flex-col items-center text-center text-gray-500 text-sm">
<img src="/images/logo.webp" alt="bbox logo" class="w-10 h-10 mx-auto mb-3">
<div class="mb-2">
<span class="font-montserrat font-bold text-cyan-400 text-lg">BlackBox</span> &copy; 2022-2025. Все права защищены.<br>
</div>
<div class="flex justify-center space-x-6 mb-4">
<a href="https://t.me/bbox_wtf" target="_blank" class="text-cyan-300 hover:text-cyan-400 transition-colors" aria-label="Наш канал в Telegram">
<i class="fab fa-telegram text-2xl"></i> Telegram
</a>
<a href="https://vk.com/bbox_wtf" target="_blank" class="text-cyan-300 hover:text-cyan-400 transition-colors" aria-label="Наша группа ВКонтакте">
<i class="fab fa-vk text-2xl"></i> ВКонтакте
</a>
</div>
<div>
<a href="mailto:support@bbox.wtf" class="hover:underline text-cyan-300">Поддержка</a>
&nbsp;|&nbsp;
<a href="/pages/faq.html" class="hover:underline text-cyan-300">FAQ</a>
&nbsp;|&nbsp;
<a href="https://bbox.rocks" class="hover:underline">Старый не поддерживаемый сайт</a>
</div>
<div class="mt-4">
<span class="text-gray-400">bbox.wtf — лендинг нового поколения: BlackBox — не просто VPN, это экосистема и ваша цифровая приватность.</span>
</div>
</footer>
<!-- PRODUCT DETAILS MODAL -->
<div id="productModal" class="fixed inset-0 bg-black/90 backdrop-blur-sm z-50 flex items-center justify-center p-4 hidden">
<div class="glass-card shadow-3d p-6 md:p-8 max-w-2xl w-full mx-4 pulse-border relative">
<span class="modal-close sticky top-0 right-0 text-2xl cursor-pointer text-cyan-400 hover:text-cyan-300 bg-gray-900/80 rounded-full w-10 h-10 flex items-center justify-center ml-auto mb-4" onclick="hideBlackBoxProductDetails()">&times;</span>
<h3 id="modalTitle" class="text-2xl font-bold mb-6 text-cyan-400 text-center"></h3>
<p id="modalDescription" class="text-gray-300 mb-6 text-lg"></p>
<button class="w-full py-3 buy-btn text-lg font-bold" onclick="hideProductDetails(); showCryptoModal()">Купить сейчас</button>
</div>
</div>
<!-- CRYPTO PAYMENT MODAL -->
<div id="cryptoModal" class="fixed inset-0 bg-black/90 backdrop-blur-sm z-50 flex items-center justify-center p-4 hidden">
<div class="glass-card shadow-3d p-4 md:p-8 max-w-4xl w-full mx-4 pulse-border relative overflow-y-auto" style="max-height: 90vh;">
<span class="modal-close sticky top-0 right-0 text-2xl cursor-pointer text-cyan-400 hover:text-cyan-300 bg-gray-900/80 rounded-full w-10 h-10 flex items-center justify-center ml-auto mb-2" onclick="hideCryptoModal()">&times;</span>
<h3 class="text-2xl font-bold mb-6 text-cyan-400 text-center">Оплата криптовалютой</h3>
<div class="flex flex-col md:flex-row gap-8">
<div class="flex-1 flex flex-col items-center">
<div class="w-64 h-64 bg-white p-4 rounded-lg mb-4 flex items-center justify-center">
<img src="/images/wallet_ltc.webp" alt="LTC QR код" class="w-full h-full object-contain">
</div>
<p class="text-gray-300 text-center">Litecoin (LTC)</p>
<p class="text-cyan-300 text-center mt-2" id="paymentAmount">Сумма к оплате: [Сумма]</p>
</div>
<div class="flex-1">
<div class="bg-gray-800/50 p-6 rounded-lg h-full">
<h4 class="text-xl font-bold mb-4 text-cyan-300">Инструкция по оплате:</h4>
<ol class="text-gray-300 space-y-3 text-lg">
<li>1. Откройте крипто-кошелек на вашем устройстве</li>
<li>2. Нажмите "Отправить" и выберите крипто-кошелекLTC</li>
<li>3. Отсканируйте соответствующий QR-код</li>
<li>4. Укажите точную сумму</li>
<li>5. Подтвердите транзакцию</li>
<li>6. После подтверждения сети (обычно 2-5 min) ваш заказ будет обработан</li>
<li>7. Войдите в наш телеграмм бот и введите 3 параметра, кошелк с которого вы отправили деньги, точное время и точную сумму, бот вам вышлет доступ в личный кабинет.</li>
</ol>
<div class="mt-6 space-y-4">
<div class="p-4 bg-gray-900 rounded-lg">
<p class="text-cyan-300 font-mono break-all">LTC: ltc1q0rq7shseegk0g44rd04e2w9psl6qn3hsnzj3j5</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/js/all.min.js"></script>
<script src="/js/features.js"></script>
<script src="/js/flipbook.js"></script>
<script src="/js/fade-up.js"></script>
<script src="/js/products.js"></script>
<!-- Yandex.Metrika counter -->
<script type="text/javascript" >
(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
m[i].l=1*new Date();
for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }}
k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
(window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
ym(55764994, "init", {
clickmap:true,
trackLinks:true,
accurateTrackBounce:true,
webvisor:true,
trackHash:true
});
</script>
<noscript><div><img src="https://mc.yandex.ru/watch/55764994" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
<!-- /Yandex.Metrika counter -->
<script src="/js/lang-detect-redirect.js"></script>
<script src="/js/language-switcher.js"></script>
</body>
</html>