337 lines
21 KiB
HTML
337 lines
21 KiB
HTML
<!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.">
|
||
<meta name="keywords" content="Blackbox, продукты, сервисы, боксы">
|
||
<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">
|
||
<link rel="stylesheet" href="/css/products.css">
|
||
</head>
|
||
<body class="gradient-bg overflow-x-hidden">
|
||
|
||
<!-- ШАПКА -->
|
||
<header class="flex flex-wrap justify-between items-center px-5 md:px-10 py-4 md:py-7 bg-transparent z-20 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>
|
||
</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>
|
||
|
||
<main class="flex flex-col md:flex-row md:min-h-screen fade-up" style="--delay:.1s">
|
||
<!-- МЕНЮ -->
|
||
<div class="w-full md:w-64 bg-gray-900/50 border-b md:border-r border-gray-800 p-4 z-10">
|
||
<h2 class="text-xl font-bold text-cyan-400 mb-6">Категории</h2>
|
||
<ul class="space-y-2">
|
||
<!-- Category button with arrow icon -->
|
||
<!-- Arrow rotates 90deg and glows when category is active -->
|
||
<li class="dropdown-item menu-item">
|
||
<button class="w-full text-left px-4 py-3 rounded-lg bg-gray-800 hover:bg-gray-700 transition-all duration-300 flex justify-between items-center" data-target="boxes-content">
|
||
<span>Боксы</span>
|
||
<i class="fas text-cyan-400 transition-transform duration-300 arrow-icon"></i>
|
||
</button>
|
||
</li>
|
||
<!-- Second category button with same arrow behavior -->
|
||
<li class="dropdown-item menu-item">
|
||
<button class="w-full text-left px-4 py-3 rounded-lg bg-gray-800 hover:bg-gray-700 transition-all duration-300 flex justify-between items-center" data-target="services-content">
|
||
<span>Сервисы</span>
|
||
<i class="fas text-cyan-400 transition-transform duration-300 arrow-icon"></i>
|
||
</button>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- Content Areas -->
|
||
<div id="boxes-content" class="content-area p-8">
|
||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 justify-items-center">
|
||
<!-- BlackBox VPN -->
|
||
<div class="glass-card shadow-3d p-6 text-center">
|
||
<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">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">Создаёт Wi-Fi точку с защищённым VPN. 512 MB RAM.</p>
|
||
<div class="flex justify-center gap-3">
|
||
<button class="buy-btn">Купить</button>
|
||
<button onclick="showBlackBoxProductDetails('BlackBox VPN')" class="details-btn">Подробнее</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- BlackBox Privacy Messenger/Cloud -->
|
||
<div class="glass-card shadow-3d p-6 text-center">
|
||
<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">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">Встроенный Matrix Messenger или Nextcloud. 1 GB RAM. Полный контроль над вашими данными.</p>
|
||
<div class="flex justify-center gap-3">
|
||
<button class="buy-btn">Купить</button>
|
||
<button onclick="showBlackBoxProductDetails('BlackBox Privacy')" class="details-btn">Подробнее</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- BlackBox 4GB -->
|
||
<div class="glass-card shadow-3d p-6 text-center">
|
||
<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">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">Все функции первых моделей + удалённый рабочий стол (Workspace). 4 GB RAM.</p>
|
||
<div class="flex justify-center gap-3">
|
||
<button class="buy-btn">Купить</button>
|
||
<button onclick="showBlackBoxProductDetails('BlackBox 4GB')" class="details-btn">Подробнее</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- BlackBox Workstation -->
|
||
<div class="glass-card shadow-3d p-6 text-center">
|
||
<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">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">Полноценная рабочая станция. Все функции предыдущих моделей.</p>
|
||
<div class="flex justify-center gap-3">
|
||
<button class="buy-btn">Купить</button>
|
||
<button onclick="showBlackBoxProductDetails('BlackBox Workstation')" class="details-btn">Подробнее</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- BlackBox AI -->
|
||
<div class="glass-card shadow-3d p-6 text-center">
|
||
<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">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">Включает все технологии BlackBox. Приватный искусственный интеллект. Максимальная автономность и защита.</p>
|
||
<div class="flex justify-center gap-3">
|
||
<button class="buy-btn">Купить</button>
|
||
<button onclick="showBlackBoxProductDetails('BlackBox AI')" class="details-btn">Подробнее</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- BlackBox Shop -->
|
||
<div class="glass-card shadow-3d p-6 text-center">
|
||
<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">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">Создание магазина в Telegram через бота. Загрузка товаров, описание, цена. Оплата за товары через криптовалюту. Полная анонимность продавца и покупателя.</p>
|
||
<div class="flex justify-center gap-3">
|
||
<button class="buy-btn">Купить</button>
|
||
<button onclick="showBlackBoxProductDetails('BlackBox Shop')" class="details-btn">Подробнее</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="services-content" class="content-area p-8">
|
||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 justify-items-center">
|
||
<!-- Защита данных -->
|
||
<div class="glass-card shadow-3d p-6 text-center">
|
||
<div class="h-40 mb-4 flex items-center justify-center">
|
||
<i class="fas fa-shield-alt text-5xl text-cyan-400"></i>
|
||
</div>
|
||
<h3 class="text-xl font-bold mb-3 text-cyan-300">Защита данных</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>49 €/мес</span>
|
||
</div>
|
||
<p class="text-gray-300 mb-4">Полная защита ваших персональных данных. Включает: мониторинг утечек, защиту от фишинга, безопасное хранение паролей.</p>
|
||
<div class="flex justify-center gap-3">
|
||
<button class="buy-btn">Купить</button>
|
||
<button onclick="showBlackBoxProductDetails('Защита данных')" class="details-btn">Подробнее</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Облачное хранилище -->
|
||
<div class="glass-card shadow-3d p-6 text-center">
|
||
<div class="h-40 mb-4 flex items-center justify-center">
|
||
<i class="fas fa-cloud text-5xl text-cyan-400"></i>
|
||
</div>
|
||
<h3 class="text-xl font-bold mb-3 text-cyan-300">Облачное хранилище</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>29 €/мес</span>
|
||
</div>
|
||
<p class="text-gray-300 mb-4">Защищенное хранилище файлов с end-to-end шифрованием. Доступ с любого устройства. Автоматическое резервное копирование.</p>
|
||
<div class="flex justify-center gap-3">
|
||
<button class="buy-btn">Купить</button>
|
||
<button onclick="showBlackBoxProductDetails('Облачное хранилище')" class="details-btn">Подробнее</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Приватный чат -->
|
||
<div class="glass-card shadow-3d p-6 text-center">
|
||
<div class="h-40 mb-4 flex items-center justify-center">
|
||
<i class="fas fa-comments text-5xl text-cyan-400"></i>
|
||
</div>
|
||
<h3 class="text-xl font-bold mb-3 text-cyan-300">Приватный чат</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>19 €/мес</span>
|
||
</div>
|
||
<p class="text-gray-300 mb-4">Полностью анонимные переписки с end-to-end шифрованием. Нет логов сообщений. Поддержка групповых чатов.</p>
|
||
<div class="flex justify-center gap-3">
|
||
<button class="buy-btn">Купить</button>
|
||
<button onclick="showBlackBoxProductDetails('Приватный чат')" class="details-btn">Подробнее</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Анонимный email -->
|
||
<div class="glass-card shadow-3d p-6 text-center">
|
||
<div class="h-40 mb-4 flex items-center justify-center">
|
||
<i class="fas fa-envelope text-5xl text-cyan-400"></i>
|
||
</div>
|
||
<h3 class="text-xl font-bold mb-3 text-cyan-300">Анонимный email</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>39 €/мес</span>
|
||
</div>
|
||
<p class="text-gray-300 mb-4">Полностью анонимная почта без привязки к личности. Временные адреса. Шифрование всех входящих/исходящих сообщений.</p>
|
||
<div class="flex justify-center gap-3">
|
||
<button class="buy-btn">Купить</button>
|
||
<button onclick="showBlackBoxProductDetails('Анонимный email')" class="details-btn">Подробнее</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Крипто-кошелек -->
|
||
<div class="glass-card shadow-3d p-6 text-center">
|
||
<div class="h-40 mb-4 flex items-center justify-center">
|
||
<i class="fas fa-wallet text-5xl text-cyan-400"></i>
|
||
</div>
|
||
<h3 class="text-xl font-bold mb-3 text-cyan-300">Крипто-кошелек</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>59 €/мес</span>
|
||
</div>
|
||
<p class="text-gray-300 mb-4">Изолированный cold-wallet для хранения и операций криптовалютой с максимальной изоляцией от internet-угроз.</p>
|
||
<div class="flex justify-center gap-3">
|
||
<button class="buy-btn">Купить</button>
|
||
<button onclick="showBlackBoxProductDetails('Крипто-кошелек')" class="details-btn">Подробнее</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Децентрализованный хостинг -->
|
||
<div class="glass-card shadow-3d p-6 text-center">
|
||
<div class="h-40 mb-4 flex items-center justify-center">
|
||
<i class="fas fa-server text-5xl text-cyan-400"></i>
|
||
</div>
|
||
<h3 class="text-xl font-bold mb-3 text-cyan-300">Децентрализованный хостинг</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>79 €/мес</span>
|
||
</div>
|
||
<p class="text-gray-300 mb-4">Размещение сайтов и приложений без центрального сервера. Полная анонимность владельца. Защита от DDoS.</p>
|
||
<div class="flex justify-center gap-3">
|
||
<button class="buy-btn">Купить</button>
|
||
<button onclick="showBlackBoxProductDetails('Децентрализованный хостинг')" class="details-btn">Подробнее</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
|
||
<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> © 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>
|
||
|
|
||
<a href="/pages/faq.html" class="hover:underline text-cyan-300">FAQ</a>
|
||
|
|
||
<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()">×</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()">×</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/fade-up.js"></script>
|
||
<script src="/js/products.js"></script>
|
||
</body>
|
||
</html> |