vpn-7561/frontend/src/features/PreviewDev.html

698 lines
48 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" class="dark scroll-smooth">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Катюша VPN — Свободный интернет без стен и блокировок</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Unbounded:wght@600;700;800;900&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<style>
:root {
--bg-deep: #04100b;
--bg-card: #081d14;
--bg-card-hover: #0d2b1e;
--mint: #4ade80;
--mint-bright: #22c55e;
}
body {
font-family: 'Manrope', sans-serif;
background-color: var(--bg-deep);
color: #ecfdf5;
background-image:
radial-gradient(circle at 75% 22%, rgba(34, 197, 94, 0.14) 0%, transparent 45%),
radial-gradient(circle at 20% 60%, rgba(16, 185, 129, 0.10) 0%, transparent 50%),
linear-gradient(rgba(52, 211, 153, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(52, 211, 153, 0.03) 1px, transparent 1px);
background-size: 100% 100%, 100% 100%, 48px 48px, 48px 48px;
}
.font-unbounded {
font-family: 'Unbounded', sans-serif;
}
/* GorillaVPN signature chamfered corners */
.gorilla-card {
background: linear-gradient(165deg, rgba(11, 37, 26, 0.92) 0%, rgba(5, 19, 13, 0.96) 100%);
border: 1px solid rgba(74, 222, 128, 0.22);
clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 26px 100%, 0 calc(100% - 26px));
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(74, 222, 128, 0.15);
}
.gorilla-btn {
background: linear-gradient(90deg, #4ade80 0%, #86efac 100%);
color: #03150c;
font-weight: 800;
transition: all 0.2s ease;
box-shadow: 0 0 28px rgba(74, 222, 128, 0.35);
}
.gorilla-btn:hover {
transform: translateY(-1px);
box-shadow: 0 0 38px rgba(74, 222, 128, 0.6);
filter: brightness(1.05);
}
@keyframes radarSweep {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.radar-sweep {
background: conic-gradient(from 0deg, rgba(74, 222, 128, 0.38) 0deg, rgba(74, 222, 128, 0.0) 90deg, transparent 360deg);
animation: radarSweep 5s linear infinite;
}
@keyframes pulseGlow {
0%, 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6); }
50% { box-shadow: 0 0 0 10px rgba(74, 222, 128, 0); }
}
.node-pulse {
animation: pulseGlow 2.2s infinite;
}
</style>
</head>
<body class="min-h-screen selection:bg-emerald-400 selection:text-slate-950">
<!-- Top Navbar (GorillaVPN Pill Header Style + Custom Circular Katyusha Emblem Logo) -->
<header class="sticky top-0 z-40 px-4 pt-3">
<div class="max-w-7xl mx-auto bg-[#061810]/90 backdrop-blur-xl border border-emerald-500/25 rounded-2xl px-5 py-3 flex items-center justify-between shadow-2xl">
<a href="#" class="flex items-center gap-3.5 group">
<div class="relative w-12 h-12 rounded-full p-0.5 bg-gradient-to-tr from-emerald-400 via-green-300 to-rose-500 shadow-lg shadow-emerald-500/25">
<img src="/assets/vpn-7561/logo.jpg" alt="Катюша VPN Logo" class="w-full h-full object-cover rounded-full bg-[#04100b]" onerror="this.style.display='none'" />
<span class="absolute -bottom-0.5 -right-0.5 w-3.5 h-3.5 rounded-full bg-emerald-400 border-2 border-[#04100b]"></span>
</div>
<div>
<span class="font-unbounded font-extrabold text-base md:text-lg tracking-wider uppercase text-white group-hover:text-emerald-300 transition">Катюша VPN</span>
<span class="block text-[10px] uppercase tracking-widest text-emerald-400/90 font-semibold">Пробиваем любые стены · VLESS Reality</span>
</div>
</a>
<nav class="hidden lg:flex items-center gap-7 text-sm font-medium text-emerald-100/80">
<a href="#how-it-works" class="hover:text-emerald-300 transition">Как подключить</a>
<a href="#art-showcase" class="hover:text-emerald-300 transition">Катюша в деле</a>
<a href="#tariffs" class="hover:text-emerald-300 transition">Тарифы</a>
<a href="#cabinet" class="hover:text-emerald-300 transition">Кабинет</a>
<a href="#faq" class="hover:text-emerald-300 transition">FAQ</a>
</nav>
<div class="flex items-center gap-3">
<button onclick="openCabinetModal()" class="hidden sm:inline-flex items-center gap-2 px-4 py-2.5 rounded-xl bg-[#0b251a] hover:bg-[#113828] border border-emerald-500/30 text-xs font-bold text-emerald-200 transition">
🔑 Личный кабинет
</button>
<a href="#tariffs" class="gorilla-btn px-5 py-2.5 rounded-xl text-xs sm:text-sm tracking-tight">
Подключить →
</a>
</div>
</div>
</header>
<main class="max-w-7xl mx-auto px-4 sm:px-6 pt-10 pb-24 space-y-28">
<!-- HERO SECTION (GorillaVPN Layout: Left Unbounded Typography + Katyusha Wall-Breaker Card, Right Chamfered Trial & Interactive Radar) -->
<section class="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-10 items-stretch">
<!-- Left Column (7 cols) -->
<div class="lg:col-span-7 flex flex-col justify-between space-y-6">
<div class="space-y-5">
<div class="inline-flex items-center gap-2.5 px-3.5 py-1.5 rounded-full bg-emerald-950/90 border border-emerald-400/30 text-emerald-300 text-[11px] font-bold tracking-wider uppercase">
<span class="w-2 h-2 rounded-full bg-emerald-400 animate-ping"></span>
УСТАНОВКА ЗА 3 МИНУТЫ · ПРОБНЫЙ ДОСТУП 48 ЧАСОВ
</div>
<h1 class="font-unbounded font-black text-3xl sm:text-5xl xl:text-[52px] leading-[1.08] tracking-tight uppercase text-white">
КАТЮША <span class="text-transparent bg-clip-text bg-gradient-to-r from-emerald-300 via-green-400 to-emerald-200">ПРОБИВАЕТ СТЕНЫ</span> БЛОКИРОВОК
</h1>
<p class="text-emerald-100/80 text-base sm:text-lg leading-relaxed max-w-2xl">
Быстрый VPN без сложной настройки: подключите телефон, ноутбук и телевизор за пару минут. Протокол <b class="text-emerald-300">Xray VLESS Reality</b> сносит любые фаерволы и замедления — YouTube 4K, Instagram, Discord и ChatGPT летают на полной скорости.
</p>
<div class="flex flex-wrap items-center gap-4 pt-1">
<button onclick="openTrialModal()" class="gorilla-btn px-7 py-4 rounded-xl text-sm sm:text-base inline-flex items-center gap-2.5">
<span>Получить 2 дня за 0 ₽</span>
<span class="text-lg">→</span>
</button>
<a href="#tariffs" class="px-6 py-4 rounded-xl bg-[#092117] hover:bg-[#0f3324] border border-emerald-400/30 text-emerald-100 font-bold text-sm sm:text-base transition">
Выбрать тариф (от 191 ₽/мес)
</a>
</div>
</div>
<!-- Katyusha Hero Artwork Card (Custom Generated Art: Katyusha Firing Laser Cannon Through RKN Wall) -->
<div id="art-showcase" class="gorilla-card p-3 sm:p-4 relative overflow-hidden group">
<div class="relative rounded-xl overflow-hidden border border-emerald-400/30 aspect-[16/9] bg-[#030c08]">
<img src="/assets/vpn-7561/hero.jpg" alt="Катюша пробивает стену блокировок РКН" class="w-full h-full object-cover object-center group-hover:scale-[1.02] transition duration-500" />
<div class="absolute inset-0 bg-gradient-to-t from-[#030d08] via-transparent to-transparent opacity-80"></div>
<div class="absolute bottom-3 left-3 right-3 flex flex-wrap items-end justify-between gap-2">
<div class="bg-[#04120c]/90 backdrop-blur-md border border-emerald-400/30 rounded-xl px-3.5 py-2">
<div class="text-[10px] uppercase tracking-widest text-emerald-400 font-bold">🔥 Фирменный дизайн-код · Катюша против блокировок</div>
<div class="text-xs sm:text-sm font-bold text-white">Прямой плазменный пробой DPI и стен цензуры без потери скорости</div>
</div>
<span class="px-3 py-1.5 rounded-lg bg-emerald-400 text-[#03150c] font-unbounded font-extrabold text-xs uppercase shadow-lg">
10 Гбит/с · 0 логов
</span>
</div>
</div>
</div>
</div>
<!-- Right Column (5 cols): Authentic GorillaVPN Chamfered Trial Card + Interactive 6-Country Radar -->
<div class="lg:col-span-5 flex">
<div class="gorilla-card w-full p-6 sm:p-7 flex flex-col justify-between space-y-6">
<div class="space-y-4">
<div class="flex items-start justify-between gap-3">
<div>
<div class="text-[11px] uppercase tracking-widest text-emerald-400/80 font-bold">ПРОБНЫЙ ДОСТУП</div>
<h2 class="font-unbounded font-extrabold text-xl sm:text-2xl text-white mt-0.5">Katyusha Trial · 2 дня</h2>
</div>
<span class="px-3 py-1 rounded-full bg-emerald-500/20 border border-emerald-400/40 text-emerald-300 text-xs font-bold whitespace-nowrap">
● Активен
</span>
</div>
<!-- 3 GorillaVPN Stat Boxes -->
<div class="grid grid-cols-3 gap-2.5">
<div class="bg-[#04120c]/90 border border-emerald-500/25 rounded-xl p-3">
<div class="text-[11px] text-emerald-200/60">Срок</div>
<div class="font-unbounded font-bold text-sm sm:text-base text-white mt-0.5">48 часов</div>
</div>
<div class="bg-[#04120c]/90 border border-emerald-500/25 rounded-xl p-3">
<div class="text-[11px] text-emerald-200/60">Устройства</div>
<div class="font-unbounded font-bold text-sm sm:text-base text-white mt-0.5">5</div>
</div>
<div class="bg-[#04120c]/90 border border-emerald-500/25 rounded-xl p-3">
<div class="text-[11px] text-emerald-200/60">Трафик</div>
<div class="font-unbounded font-bold text-sm sm:text-base text-emerald-400 mt-0.5">∞ ГБ</div>
</div>
</div>
</div>
<!-- Interactive Circular Radar (GorillaVPN Signature Element) -->
<div class="relative mx-auto w-64 h-64 sm:w-72 sm:h-72 rounded-full border border-emerald-500/30 bg-[#030f0a] flex items-center justify-center overflow-hidden shadow-inner">
<!-- Rotating radar sweep -->
<div class="absolute inset-0 rounded-full radar-sweep pointer-events-none"></div>
<!-- Concentric rings -->
<div class="absolute w-48 h-48 rounded-full border border-emerald-500/20 pointer-events-none"></div>
<div class="absolute w-28 h-28 rounded-full border border-emerald-500/25 pointer-events-none"></div>
<div class="absolute inset-x-0 h-px bg-emerald-500/15 pointer-events-none"></div>
<div class="absolute inset-y-0 w-px bg-emerald-500/15 pointer-events-none"></div>
<!-- Center Katyusha Emblem Node -->
<div class="relative z-10 w-14 h-14 rounded-full p-0.5 bg-emerald-400 shadow-lg shadow-emerald-500/50">
<img src="/assets/vpn-7561/logo.jpg" alt="Center Radar" class="w-full h-full rounded-full object-cover" />
</div>
<!-- Country Nodes on the Radar -->
<button onclick="selectRadarCountry('Нидерланды · Амстердам', '14 мс', '940 Мбит/с')" class="absolute top-5 left-10 z-20 px-2.5 py-1 rounded-full bg-[#072217]/95 border border-emerald-400 text-[11px] font-bold text-emerald-200 hover:bg-emerald-400 hover:text-slate-950 transition node-pulse">
🇳🇱 Нидерланды
</button>
<button onclick="selectRadarCountry('Германия · Франкфурт', '18 мс', '910 Мбит/с')" class="absolute top-12 right-4 z-20 px-2.5 py-1 rounded-full bg-[#072217]/95 border border-emerald-400/50 text-[11px] font-bold text-emerald-200 hover:bg-emerald-400 hover:text-slate-950 transition">
🇩🇪 Германия
</button>
<button onclick="selectRadarCountry('Финляндия · Хельсинки', '11 мс', '980 Мбит/с')" class="absolute bottom-14 left-3 z-20 px-2.5 py-1 rounded-full bg-[#072217]/95 border border-emerald-400/50 text-[11px] font-bold text-emerald-200 hover:bg-emerald-400 hover:text-slate-950 transition">
🇫🇮 Финляндия
</button>
<button onclick="selectRadarCountry('Турция · Стамбул', '29 мс', '860 Мбит/с')" class="absolute bottom-6 right-8 z-20 px-2.5 py-1 rounded-full bg-[#072217]/95 border border-emerald-400/50 text-[11px] font-bold text-emerald-200 hover:bg-emerald-400 hover:text-slate-950 transition">
🇹🇷 Турция
</button>
<button onclick="selectRadarCountry('Польша · Варшава', '16 мс', '925 Мбит/с')" class="absolute top-1/2 -translate-y-1/2 left-2 z-20 px-2 py-0.5 rounded-full bg-[#072217]/90 border border-emerald-400/40 text-[10px] font-semibold text-emerald-300 hover:bg-emerald-400 hover:text-slate-950 transition">
🇵🇱 Польша
</button>
<button onclick="selectRadarCountry('Швеция · Стокгольм', '15 мс', '950 Мбит/с')" class="absolute top-1/2 -translate-y-1/2 right-2 z-20 px-2 py-0.5 rounded-full bg-[#072217]/90 border border-emerald-400/40 text-[10px] font-semibold text-emerald-300 hover:bg-emerald-400 hover:text-slate-950 transition">
🇸🇪 Швеция
</button>
</div>
<!-- Selected Radar Node Status + CTA -->
<div class="space-y-3">
<div class="bg-[#04120c]/90 border border-emerald-500/25 rounded-xl px-4 py-2.5 flex items-center justify-between text-xs">
<div>
<span class="text-emerald-200/60 block text-[10px] uppercase">Выбранный узел пробоя</span>
<b id="radarLoc" class="text-white font-bold">Нидерланды · Амстердам</b>
</div>
<div class="text-right">
<span id="radarPing" class="text-emerald-400 font-mono font-bold block">Пинг: 14 мс</span>
<span id="radarSpeed" class="text-[11px] text-emerald-200/70">Канал: 940 Мбит/с</span>
</div>
</div>
<button onclick="openTrialModal()" class="gorilla-btn w-full py-4 rounded-xl text-sm sm:text-base flex items-center justify-center gap-2">
<span>Начать пробный доступ</span>
<span>→</span>
</button>
</div>
</div>
</div>
</section>
<!-- SECTION 2: КАК ПОДКЛЮЧИТЬ — Установка за 3 минуты (Exact GorillaVPN Device Tabs + 4 Steps) -->
<section id="how-it-works" class="space-y-8">
<div class="flex flex-col md:flex-row md:items-end justify-between gap-4">
<div>
<div class="text-xs uppercase tracking-widest text-emerald-400 font-bold">КАК ПОДКЛЮЧИТЬ</div>
<h2 class="font-unbounded font-extrabold text-2xl sm:text-4xl text-white mt-1">Установка за 3 минуты</h2>
</div>
<p class="text-sm text-emerald-100/70 max-w-md">
Выберите ваше устройство — мы дадим готовую ссылку подписки, которая настраивает всё сама в один клик.
</p>
</div>
<!-- 5 Interactive Platform Pills -->
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-3" id="deviceTabs">
<button onclick="selectDeviceTab(this, 'iOS', 'Streisand / V2Box из App Store')" class="device-tab bg-emerald-400 text-[#03150c] rounded-2xl p-4 text-left transition font-bold shadow-lg">
<div class="font-unbounded text-sm">📱 iOS</div>
<div class="text-xs opacity-80 mt-0.5">iPhone и iPad</div>
</button>
<button onclick="selectDeviceTab(this, 'Android', 'Hiddify / v2rayNG из Google Play или APK')" class="device-tab bg-[#081d14] hover:bg-[#0d2b1e] border border-emerald-500/25 text-white rounded-2xl p-4 text-left transition">
<div class="font-unbounded text-sm">🤖 Android</div>
<div class="text-xs text-emerald-200/60 mt-0.5">Смартфоны и планшеты</div>
</button>
<button onclick="selectDeviceTab(this, 'macOS', 'Hiddify / Streisand для Mac (M1/M2/M3/Intel)')" class="device-tab bg-[#081d14] hover:bg-[#0d2b1e] border border-emerald-500/25 text-white rounded-2xl p-4 text-left transition">
<div class="font-unbounded text-sm">💻 macOS</div>
<div class="text-xs text-emerald-200/60 mt-0.5">MacBook и iMac</div>
</button>
<button onclick="selectDeviceTab(this, 'Windows', 'Hiddify Next для Windows 10 / 11')" class="device-tab bg-[#081d14] hover:bg-[#0d2b1e] border border-emerald-500/25 text-white rounded-2xl p-4 text-left transition">
<div class="font-unbounded text-sm">🖥 Windows</div>
<div class="text-xs text-emerald-200/60 mt-0.5">ПК и ноутбуки</div>
</button>
<button onclick="selectDeviceTab(this, 'Android TV', 'v2rayNG / Hiddify TV для YouTube 4K на телевизоре')" class="device-tab bg-[#081d14] hover:bg-[#0d2b1e] border border-emerald-500/25 text-white rounded-2xl p-4 text-left transition">
<div class="font-unbounded text-sm">📺 Android TV</div>
<div class="text-xs text-emerald-200/60 mt-0.5">Телевизоры и приставки</div>
</button>
</div>
<!-- 4 Connection Steps (GorillaVPN Structure) -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
<div class="gorilla-card p-6 space-y-3">
<span class="font-unbounded font-black text-2xl text-emerald-400">01</span>
<h3 class="font-unbounded font-bold text-base text-white">Выберите устройство</h3>
<p class="text-xs text-emerald-100/75 leading-relaxed">
Сейчас выбрана платформа: <b id="activeDeviceName" class="text-emerald-300">iOS</b>. Подписка работает сразу на 5 устройствах одновременно.
</p>
</div>
<div class="gorilla-card p-6 space-y-3">
<span class="font-unbounded font-black text-2xl text-emerald-400">02</span>
<h3 class="font-unbounded font-bold text-base text-white">Скачайте приложение</h3>
<p class="text-xs text-emerald-100/75 leading-relaxed">
Рекомендуемый клиент: <b id="activeDeviceApp" class="text-emerald-300">Streisand / V2Box из App Store</b>. Установка занимает 20 секунд.
</p>
</div>
<div class="gorilla-card p-6 space-y-3">
<span class="font-unbounded font-black text-2xl text-emerald-400">03</span>
<h3 class="font-unbounded font-bold text-base text-white">Активируйте в 1 клик</h3>
<p class="text-xs text-emerald-100/75 leading-relaxed">
Нажмите «Добавить подписку» в личном кабинете или Telegram-боте — все локации появятся автоматически.
</p>
</div>
<div class="gorilla-card p-6 space-y-3">
<span class="font-unbounded font-black text-2xl text-emerald-400">04</span>
<h3 class="font-unbounded font-bold text-base text-white">Готово — вы под защитой</h3>
<p class="text-xs text-emerald-100/75 leading-relaxed">
Катюша пробивает любые блокировки: открывайте YouTube 4K, Instagram, звонки и игры без ограничений.
</p>
</div>
</div>
</section>
<!-- SECTION 3: ТАРИФЫ (Exact 4 GorillaVPN Plans: 239 ₽ / 649 ₽ / 1 219 ₽ / 2 299 ₽ + Promo & Gift Controls) -->
<section id="tariffs" class="space-y-8">
<div class="flex flex-col lg:flex-row lg:items-end justify-between gap-4">
<div>
<div class="text-xs uppercase tracking-widest text-emerald-400 font-bold">ТАРИФЫ</div>
<h2 class="font-unbounded font-extrabold text-2xl sm:text-4xl text-white mt-1">Один тариф — все возможности</h2>
<p class="text-sm text-emerald-100/75 mt-2">
Никаких урезанных версий: на любом сроке доступны все локации 10 Гбит/с, 5 устройств и безлимитный трафик.
</p>
</div>
<!-- Promo Code & Gift Toggle (From GorillaVPN Tariffs Block) -->
<div class="flex flex-wrap items-center gap-3">
<div class="flex items-center bg-[#071c13] border border-emerald-500/30 rounded-xl px-3 py-2">
<input id="promoInput" type="text" placeholder="Промокод (напр. KATYUSHA)" class="bg-transparent text-xs text-white placeholder-emerald-200/40 outline-none w-44" />
<button onclick="applyPromo()" class="text-xs font-bold text-emerald-400 hover:text-emerald-300 ml-2">Применить</button>
</div>
<label class="cursor-pointer inline-flex items-center gap-2 bg-[#071c13] border border-emerald-500/30 rounded-xl px-3.5 py-2 text-xs text-emerald-100">
<input type="checkbox" id="giftToggle" class="accent-emerald-400 rounded" />
<span>🎁 Подарить подписку другу</span>
</label>
</div>
</div>
<div id="promoBanner" class="hidden bg-emerald-500/15 border border-emerald-400/40 rounded-xl px-4 py-2.5 text-xs text-emerald-300 font-semibold">
🔥 Промокод активирован! Дополнительные +7 дней бонусом к любому выбранному тарифу.
</div>
<!-- 4 Tariff Cards Grid (Exact GorillaVPN Numbers) -->
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6">
<!-- Plan 1: 1 Month (239 ₽) -->
<div class="gorilla-card p-6 flex flex-col justify-between">
<div class="space-y-4">
<div class="flex items-center justify-between">
<span class="font-unbounded font-bold text-lg text-white">1 месяц</span>
<span class="text-[11px] px-2.5 py-0.5 rounded-full bg-emerald-950 border border-emerald-500/30 text-emerald-300">Старт</span>
</div>
<div>
<div class="font-unbounded font-black text-3xl sm:text-4xl text-white">239 ₽</div>
<div class="text-xs text-emerald-300/80 mt-1">239 ₽/мес · Попробовать на месяц</div>
</div>
<ul class="space-y-2.5 text-xs text-emerald-100/85 pt-3 border-t border-emerald-500/20">
<li class="flex items-center gap-2">✅ <span><b>5 устройств</b> одновременно</span></li>
<li class="flex items-center gap-2">✅ <span><b>Безлимитный</b> трафик (∞ ГБ)</span></li>
<li class="flex items-center gap-2">✅ <span>Все локации (VLESS Reality)</span></li>
<li class="flex items-center gap-2">💳 <span class="text-emerald-300/80">СБП · QR-код · Крипто · Telegram Stars</span></li>
</ul>
</div>
<button onclick="openCheckoutModal('1 месяц', '239 ₽', '239 ₽/мес')" class="mt-7 w-full py-3.5 rounded-xl bg-[#0d2e20] hover:bg-emerald-400 hover:text-[#03150c] border border-emerald-400/30 font-unbounded font-bold text-xs uppercase transition">
Оформить за 239 ₽ →
</button>
</div>
<!-- Plan 2: 3 Months (649 ₽ — Популярный, Экономия 10%) -->
<div class="gorilla-card p-6 flex flex-col justify-between relative ring-2 ring-emerald-400/70">
<div class="space-y-4">
<div class="flex items-center justify-between">
<span class="font-unbounded font-bold text-lg text-white">3 месяца</span>
<span class="text-[11px] px-2.5 py-0.5 rounded-full bg-emerald-400 text-[#03150c] font-extrabold uppercase">Популярный</span>
</div>
<div>
<div class="font-unbounded font-black text-3xl sm:text-4xl text-emerald-300">649 ₽</div>
<div class="flex items-center gap-2 mt-1">
<span class="text-xs text-white font-semibold">216 ₽/мес</span>
<span class="text-[11px] px-2 py-0.5 rounded bg-emerald-500/20 text-emerald-300 font-bold">Экономия 10%</span>
</div>
<div class="text-[11px] text-emerald-200/60 mt-0.5">Оптимальный старт</div>
</div>
<ul class="space-y-2.5 text-xs text-emerald-100/85 pt-3 border-t border-emerald-500/20">
<li class="flex items-center gap-2">✅ <span><b>5 устройств</b> одновременно</span></li>
<li class="flex items-center gap-2">✅ <span><b>Безлимитный</b> трафик (∞ ГБ)</span></li>
<li class="flex items-center gap-2">✅ <span>Приоритетный канал YouTube 4K</span></li>
<li class="flex items-center gap-2">💳 <span class="text-emerald-300/80">СБП · QR-код · Крипто · Telegram Stars</span></li>
</ul>
</div>
<button onclick="openCheckoutModal('3 месяца', '649 ₽', '216 ₽/мес (Экономия 10%)')" class="gorilla-btn mt-7 w-full py-3.5 rounded-xl font-unbounded text-xs uppercase">
Выбрать 3 месяца →
</button>
</div>
<!-- Plan 3: 6 Months (1 219 ₽ — Экономия 15%) -->
<div class="gorilla-card p-6 flex flex-col justify-between">
<div class="space-y-4">
<div class="flex items-center justify-between">
<span class="font-unbounded font-bold text-lg text-white">6 месяцев</span>
<span class="text-[11px] px-2.5 py-0.5 rounded-full bg-emerald-500/20 border border-emerald-400/30 text-emerald-300 font-bold">Экономия 15%</span>
</div>
<div>
<div class="font-unbounded font-black text-3xl sm:text-4xl text-white">1 219 ₽</div>
<div class="text-xs text-emerald-300/80 mt-1">203 ₽/мес · Полгода спокойствия</div>
</div>
<ul class="space-y-2.5 text-xs text-emerald-100/85 pt-3 border-t border-emerald-500/20">
<li class="flex items-center gap-2">✅ <span><b>5 устройств</b> одновременно</span></li>
<li class="flex items-center gap-2">✅ <span><b>Безлимитный</b> трафик (∞ ГБ)</span></li>
<li class="flex items-center gap-2">✅ <span>Защита от DPI и авто-ротация узлов</span></li>
<li class="flex items-center gap-2">💳 <span class="text-emerald-300/80">СБП · QR-код · Крипто · Telegram Stars</span></li>
</ul>
</div>
<button onclick="openCheckoutModal('6 месяцев', '1 219 ₽', '203 ₽/мес (Экономия 15%)')" class="mt-7 w-full py-3.5 rounded-xl bg-[#0d2e20] hover:bg-emerald-400 hover:text-[#03150c] border border-emerald-400/30 font-unbounded font-bold text-xs uppercase transition">
Выбрать 6 месяцев →
</button>
</div>
<!-- Plan 4: 12 Months (2 299 ₽ — Выгодно, Экономия 20%) -->
<div class="gorilla-card p-6 flex flex-col justify-between relative border-emerald-400/50">
<div class="space-y-4">
<div class="flex items-center justify-between">
<span class="font-unbounded font-bold text-lg text-white">12 месяцев</span>
<span class="text-[11px] px-2.5 py-0.5 rounded-full bg-amber-400 text-slate-950 font-extrabold uppercase">Выгодно · -20%</span>
</div>
<div>
<div class="font-unbounded font-black text-3xl sm:text-4xl text-white">2 299 ₽</div>
<div class="flex items-center gap-2 mt-1">
<span class="text-xs text-emerald-300 font-bold">191 ₽/мес</span>
<span class="text-[11px] text-emerald-200/60">Максимальная выгода</span>
</div>
</div>
<ul class="space-y-2.5 text-xs text-emerald-100/85 pt-3 border-t border-emerald-500/20">
<li class="flex items-center gap-2">✅ <span><b>5 устройств</b> + настройка роутера</span></li>
<li class="flex items-center gap-2">✅ <span><b>Безлимитный</b> трафик (∞ ГБ)</span></li>
<li class="flex items-center gap-2">✅ <span>VIP-серверы с минимальным пингом</span></li>
<li class="flex items-center gap-2">💳 <span class="text-emerald-300/80">СБП · QR-код · Крипто · Telegram Stars</span></li>
</ul>
</div>
<button onclick="openCheckoutModal('12 месяцев', '2 299 ₽', '191 ₽/мес (Экономия 20%)')" class="gorilla-btn mt-7 w-full py-3.5 rounded-xl font-unbounded text-xs uppercase">
Забрать год за 2 299 ₽ →
</button>
</div>
</div>
</section>
<!-- SECTION 4: ЛИЧНЫЙ КАБИНЕТ — Всё управление в одном кабинете (GorillaVPN Section) -->
<section id="cabinet" class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-center">
<div class="lg:col-span-5 space-y-5">
<div class="text-xs uppercase tracking-widest text-emerald-400 font-bold">ЛИЧНЫЙ КАБИНЕТ</div>
<h2 class="font-unbounded font-extrabold text-2xl sm:text-4xl text-white leading-tight">
Всё управление в одном кабинете
</h2>
<p class="text-sm text-emerald-100/75 leading-relaxed">
Никаких сложных конфигов и ручных переключений. Управляйте своими устройствами, продлевайте доступ через СБП и делитесь QR-кодом прямо в браузере или Telegram.
</p>
<div class="grid grid-cols-2 gap-3 pt-2">
<div class="bg-[#071c13] border border-emerald-500/25 rounded-2xl p-4">
<div class="font-unbounded font-extrabold text-xl text-emerald-400">5 устройств</div>
<div class="text-xs text-emerald-100/70 mt-1">на одну подписку без доплат</div>
</div>
<div class="bg-[#071c13] border border-emerald-500/25 rounded-2xl p-4">
<div class="font-unbounded font-extrabold text-xl text-emerald-400">6 платформ</div>
<div class="text-xs text-emerald-100/70 mt-1">iOS, Android, Win, Mac, Linux, TV</div>
</div>
<div class="bg-[#071c13] border border-emerald-500/25 rounded-2xl p-4">
<div class="font-unbounded font-extrabold text-sm text-white">QR и ссылка</div>
<div class="text-xs text-emerald-100/70 mt-1">для мгновенного подключения</div>
</div>
<div class="bg-[#071c13] border border-emerald-500/25 rounded-2xl p-4">
<div class="font-unbounded font-extrabold text-sm text-white">Без автосписаний</div>
<div class="text-xs text-emerald-100/70 mt-1">прозрачная история платежей</div>
</div>
</div>
</div>
<!-- Interactive Cabinet Preview Mock -->
<div class="lg:col-span-7 gorilla-card p-6 sm:p-8 space-y-5">
<div class="flex flex-wrap items-center justify-between gap-3 pb-4 border-b border-emerald-500/20">
<div class="flex items-center gap-3">
<img src="/assets/vpn-7561/logo.jpg" alt="Avatar" class="w-10 h-10 rounded-full object-cover border border-emerald-400" />
<div>
<div class="font-unbounded font-bold text-sm text-white">Кабинет бойца · #KTY-7561</div>
<div class="text-xs text-emerald-400">Подписка активна · Тариф «Оптимальный»</div>
</div>
</div>
<button onclick="openTrialModal()" class="px-3.5 py-2 rounded-xl bg-emerald-400/15 hover:bg-emerald-400/25 border border-emerald-400/40 text-emerald-300 text-xs font-bold transition">
📲 Показать QR-код ключа
</button>
</div>
<div class="grid grid-cols-1 sm:grid-cols-3 gap-3 text-xs">
<div class="bg-[#04120c] border border-emerald-500/20 rounded-xl p-3.5">
<span class="text-emerald-200/60">Активные устройства</span>
<div class="font-unbounded font-bold text-base text-white mt-1">3 из 5 подключено</div>
<div class="text-[11px] text-emerald-400 mt-0.5">iPhone 16 Pro · MacBook · Sony TV</div>
</div>
<div class="bg-[#04120c] border border-emerald-500/20 rounded-xl p-3.5">
<span class="text-emerald-200/60">Протокол маскировки</span>
<div class="font-unbounded font-bold text-base text-emerald-300 mt-1">VLESS Reality</div>
<div class="text-[11px] text-emerald-200/60 mt-0.5">Порт 443 · TLS 1.3 Stealth</div>
</div>
<div class="bg-[#04120c] border border-emerald-500/20 rounded-xl p-3.5">
<span class="text-emerald-200/60">Быстрая оплата</span>
<div class="font-unbounded font-bold text-base text-white mt-1">СБП / Stars</div>
<div class="text-[11px] text-emerald-400 mt-0.5">Мгновенное продление</div>
</div>
</div>
</div>
</section>
<!-- SECTION 5: ЧАСТЫЕ ВОПРОСЫ (9 GorillaVPN FAQ Items) -->
<section id="faq" class="space-y-6">
<div>
<div class="text-xs uppercase tracking-widest text-emerald-400 font-bold">ВОПРОСЫ И ОТВЕТЫ</div>
<h2 class="font-unbounded font-extrabold text-2xl sm:text-4xl text-white mt-1">Частые вопросы</h2>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<details class="gorilla-card p-5 group open:border-emerald-400/50">
<summary class="font-unbounded font-bold text-sm text-white cursor-pointer flex items-center justify-between">
<span>Как получить пробный доступ на 48 часов за 0 ₽?</span>
<span class="text-emerald-400 group-open:rotate-45 transition">+</span>
</summary>
<p class="text-xs text-emerald-100/75 mt-3 leading-relaxed">
Нажмите кнопку «Получить 2 дня за 0 ₽» — вы сразу получите готовую ссылку подписки VLESS Reality на 48 часов для 5 устройств без привязки банковской карты.
</p>
</details>
<details class="gorilla-card p-5 group">
<summary class="font-unbounded font-bold text-sm text-white cursor-pointer flex items-center justify-between">
<span>Почему Катюша VPN не блокируется провайдерами?</span>
<span class="text-emerald-400 group-open:rotate-45 transition">+</span>
</summary>
<p class="text-xs text-emerald-100/75 mt-3 leading-relaxed">
Мы используем современный протокол Xray VLESS Reality с маскировкой под обычный HTTPS-трафик зарубежных сайтов. Системы ТСПУ/DPI не могут отличить его от обычного серфинга.
</p>
</details>
<details class="gorilla-card p-5 group">
<summary class="font-unbounded font-bold text-sm text-white cursor-pointer flex items-center justify-between">
<span>Сколько устройств можно подключить по одной подписке?</span>
<span class="text-emerald-400 group-open:rotate-45 transition">+</span>
</summary>
<p class="text-xs text-emerald-100/75 mt-3 leading-relaxed">
До 5 устройств одновременно: например, ваш смартфон, ноутбук, планшет, домашний ПК и телевизор Android TV / Apple TV.
</p>
</details>
<details class="gorilla-card p-5 group">
<summary class="font-unbounded font-bold text-sm text-white cursor-pointer flex items-center justify-between">
<span>Какими способами можно оплатить подписку?</span>
<span class="text-emerald-400 group-open:rotate-45 transition">+</span>
</summary>
<p class="text-xs text-emerald-100/75 mt-3 leading-relaxed">
Доступна моментальная оплата через СБП (по QR-коду любого российского банка), криптовалюту (USDT/TON) и Telegram Stars. Никаких скрытых автосписаний.
</p>
</details>
<details class="gorilla-card p-5 group">
<summary class="font-unbounded font-bold text-sm text-white cursor-pointer flex items-center justify-between">
<span>Режет ли VPN скорость и работает ли YouTube в 4K?</span>
<span class="text-emerald-400 group-open:rotate-45 transition">+</span>
</summary>
<p class="text-xs text-emerald-100/75 mt-3 leading-relaxed">
Все узлы подключены к каналам 10 Гбит/с в Нидерландах, Германии, Финляндии, Польше, Швеции и Турции. Видео 4K 60fps загружается мгновенно и без рекламы.
</p>
</details>
<details class="gorilla-card p-5 group">
<summary class="font-unbounded font-bold text-sm text-white cursor-pointer flex items-center justify-between">
<span>Можно ли подарить подписку другу?</span>
<span class="text-emerald-400 group-open:rotate-45 transition">+</span>
</summary>
<p class="text-xs text-emerald-100/75 mt-3 leading-relaxed">
Да! В блоке тарифов включите галочку «🎁 Подарить подписку другу» — после оплаты вы получите подарочный купон-ссылку, которую можно переслать в Telegram.
</p>
</details>
</div>
</section>
<!-- PM Reference Analysis Footer Block -->
<section class="pt-8 border-t border-emerald-500/20 space-y-4">
<div class="flex flex-wrap items-center justify-between gap-2">
<div>
<h3 class="text-xs font-unbounded font-bold text-emerald-400 uppercase">🔍 Исследованный референс и дизайн-система (`contracts/WEB_REFERENCES.md`)</h3>
<p class="text-xs text-emerald-100/60">Спарсено из React SPA бандла <code>gorillavpn.pro</code> + сгенерированы фирменные ассеты Катюши (`logo.jpg` и `hero.jpg`)</p>
</div>
<a href="/" class="text-xs text-emerald-300 hover:underline">← Вернуться в панель управления Виртуальным Офисом</a>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<a href="https://gorillavpn.pro/" target="_blank" class="block bg-[#071a12]/90 hover:bg-[#0c291d] border border-emerald-500/20 rounded-2xl p-4 transition">
<div class="text-xs font-bold text-emerald-400 truncate">🎯 Ваш референс-образец: Gorilla</div>
<div class="text-[11px] text-emerald-200/50 truncate mt-0.5 font-mono">https://gorillavpn.pro/</div>
<p class="text-xs text-emerald-100/80 mt-2 line-clamp-3">Шрифты: Manrope, Unbounded • Блоки и тексты SPA: Тарифы | Установка | Кабинет | Вопросы | Навигация по сайту | Открыть кабинет | Меню | Меню Gorilla VPN | Разделы сайта Gorilla VPN | Мобильное меню | Нидерланды | Амстердам | Германия | Франкфурт | Турция | Стамбул | Польша | Варшава • Точные тарифы с сайта: 1 месяц: 239 ₽, 3 месяца: 649 ₽, 6 месяцев: 1219 ₽, 12 месяцев: 2299 ₽</p>
</a>
<a href="https://mullvad.net/en" target="_blank" class="block bg-[#071a12]/90 hover:bg-[#0c291d] border border-emerald-500/20 rounded-2xl p-4 transition">
<div class="text-xs font-bold text-emerald-400 truncate">Mullvad VPN — Эталон минимализма, прозрачности и оплаты в 1 клик (вкл. крипто)</div>
<div class="text-[11px] text-emerald-200/50 truncate mt-0.5 font-mono">https://mullvad.net/en</div>
<p class="text-xs text-emerald-100/80 mt-2 line-clamp-3">Ключевые паттерны: генерация аккаунта без email, мгновенный выбор протокола WireGuard/Shadowsocks, честная цена, нулевое логирование.</p>
</a>
<a href="https://protonvpn.com" target="_blank" class="block bg-[#071a12]/90 hover:bg-[#0c291d] border border-emerald-500/20 rounded-2xl p-4 transition">
<div class="text-xs font-bold text-emerald-400 truncate">Proton VPN — Премиальный тёмный UI с интерактивной картой серверов и сравнением скоростей</div>
<div class="text-[11px] text-emerald-200/50 truncate mt-0.5 font-mono">https://protonvpn.com</div>
<p class="text-xs text-emerald-100/80 mt-2 line-clamp-3">Ключевые паттерны: переключатель тарифов (1 мес / 1 год / 2 года со скидкой 60%), таблица скорости 10 Gbps, бейджи стриминга (Netflix/YouTube 4K).</p>
</a>
<a href="https://amnezia.org" target="_blank" class="block bg-[#071a12]/90 hover:bg-[#0c291d] border border-emerald-500/20 rounded-2xl p-4 transition">
<div class="text-xs font-bold text-emerald-400 truncate">Amnezia / Outline VPN — Фокус на обход блокировок (VLESS / Xray Reality) и приложения под все ОС</div>
<div class="text-[11px] text-emerald-200/50 truncate mt-0.5 font-mono">https://amnezia.org</div>
<p class="text-xs text-emerald-100/80 mt-2 line-clamp-3">Ключевые паттерны: кнопки быстрого скачивания (iOS, Android, macOS, Windows, роутеры), выдача ключа для Telegram-бота в 1 клик.</p>
</a>
</div>
</section>
</main>
<!-- Interactive Checkout / Free Trial Modal -->
<div id="checkoutModal" class="hidden fixed inset-0 bg-black/80 backdrop-blur-md z-50 flex items-center justify-center p-4">
<div class="gorilla-card max-w-lg w-full p-6 sm:p-7 space-y-5">
<div class="flex items-center justify-between">
<div class="flex items-center gap-3">
<img src="/assets/vpn-7561/logo.jpg" alt="Logo" class="w-10 h-10 rounded-full object-cover border border-emerald-400" />
<div>
<h4 id="modalTitle" class="font-unbounded font-bold text-base text-white">Katyusha Trial · 48 часов за 0 ₽</h4>
<p id="modalSub" class="text-xs text-emerald-400">5 устройств · Безлимитный трафик · VLESS Reality</p>
</div>
</div>
<button onclick="closeCheckoutModal()" class="text-emerald-200/60 hover:text-white text-lg font-bold">✕</button>
</div>
<div class="bg-[#030d08] border border-emerald-500/30 rounded-xl p-4 space-y-2">
<div class="flex items-center justify-between text-[11px] text-emerald-300">
<span>Ваша персональная VLESS Reality ссылка подписки:</span>
<button onclick="navigator.clipboard.writeText(document.getElementById('vlessKey').innerText);this.innerText='✅ Скопировано!'" class="font-bold underline">Скопировать</button>
</div>
<div id="vlessKey" class="font-mono text-[11px] text-emerald-400 break-all select-all">
vless://katyusha-7561-reality@nl-amsterdam.vo-office.com:443?security=reality&sni=www.cloudflare.com&fp=chrome&pbk=KatyushaLaser2026&type=grpc#Katyusha_VPN_10Gbps
</div>
</div>
<div class="grid grid-cols-2 sm:grid-cols-4 gap-2 text-center text-[11px] font-bold">
<div class="bg-[#072015] border border-emerald-400/40 rounded-lg py-2 text-emerald-300">⚡ СБП QR</div>
<div class="bg-[#072015] border border-emerald-500/20 rounded-lg py-2 text-emerald-100/80">💎 USDT / TON</div>
<div class="bg-[#072015] border border-emerald-500/20 rounded-lg py-2 text-emerald-100/80">⭐ TG Stars</div>
<div class="bg-[#072015] border border-emerald-500/20 rounded-lg py-2 text-emerald-100/80">💳 Карта РФ</div>
</div>
<button onclick="closeCheckoutModal()" class="gorilla-btn w-full py-3.5 rounded-xl font-unbounded text-xs uppercase">
Подключить в 1 клик →
</button>
</div>
</div>
<script>
function selectRadarCountry(name, ping, speed) {
document.getElementById('radarLoc').innerText = name;
document.getElementById('radarPing').innerText = 'Пинг: ' + ping;
document.getElementById('radarSpeed').innerText = 'Канал: ' + speed;
}
function selectDeviceTab(btn, platform, appName) {
document.querySelectorAll('.device-tab').forEach(el => {
el.className = 'device-tab bg-[#081d14] hover:bg-[#0d2b1e] border border-emerald-500/25 text-white rounded-2xl p-4 text-left transition';
});
btn.className = 'device-tab bg-emerald-400 text-[#03150c] rounded-2xl p-4 text-left transition font-bold shadow-lg';
document.getElementById('activeDeviceName').innerText = platform;
document.getElementById('activeDeviceApp').innerText = appName;
}
function applyPromo() {
const val = document.getElementById('promoInput').value.trim();
if (val) {
document.getElementById('promoBanner').classList.remove('hidden');
}
}
function openTrialModal() {
document.getElementById('modalTitle').innerText = 'Katyusha Trial · 48 часов за 0 ₽';
document.getElementById('modalSub').innerText = 'Пробный доступ на 2 дня · 5 устройств · ∞ ГБ';
document.getElementById('checkoutModal').classList.remove('hidden');
}
function openCheckoutModal(period, price, sub) {
const isGift = document.getElementById('giftToggle') && document.getElementById('giftToggle').checked;
document.getElementById('modalTitle').innerText = (isGift ? '🎁 Подарок: ' : 'Тариф: ') + period + ' — ' + price;
document.getElementById('modalSub').innerText = sub + ' · СБП / QR / Крипто / Stars';
document.getElementById('checkoutModal').classList.remove('hidden');
}
function openCabinetModal() {
openTrialModal();
}
function closeCheckoutModal() {
document.getElementById('checkoutModal').classList.add('hidden');
}
</script>
</body>
</html>