Bbox.wtf/landing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update v1.1

Browse Source
This commit is contained in:
olilovedani
2025-05-03 23:33:02 +00:00
parent 3afa5e666b
commit 635d1a4ce1
7 changed files with 1069 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

337
pages/products.html Normal file
View File

@@ -0,0 +1,337 @@
<!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> &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/fade-up.js"></script>
<script src="/js/products.js"></script>
</body>
</html>