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

757 lines
51 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;
--accent: #4ade80;
--accent-bright: #86efac;
--accent-rgb: 74, 222, 128;
--text-main: #ecfdf5;
}
body {
font-family: 'Manrope', sans-serif;
background-color: var(--bg-deep);
color: var(--text-main);
background-image:
radial-gradient(circle at 75% 22%, rgba(var(--accent-rgb), 0.16) 0%, transparent 45%),
radial-gradient(circle at 20% 60%, rgba(var(--accent-rgb), 0.11) 0%, transparent 50%),
linear-gradient(rgba(var(--accent-rgb), 0.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(var(--accent-rgb), 0.035) 1px, transparent 1px);
background-size: 100% 100%, 100% 100%, 48px 48px, 48px 48px;
transition: background-color 0.35s ease, color 0.35s ease;
}
.font-unbounded {
font-family: 'Unbounded', sans-serif;
}
.accent-text {
color: var(--accent);
}
.accent-bg {
background-color: var(--accent);
color: var(--bg-deep);
}
.accent-border {
border-color: rgba(var(--accent-rgb), 0.32);
}
.gorilla-subcard {
background-color: var(--bg-card);
border: 1px solid rgba(var(--accent-rgb), 0.24);
}
/* GorillaVPN signature chamfered corners with dynamic palette variables */
.gorilla-card {
background: linear-gradient(165deg, var(--bg-card) 0%, var(--bg-deep) 100%);
border: 1px solid rgba(var(--accent-rgb), 0.28);
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(var(--accent-rgb), 0.18);
transition: border-color 0.3s ease, background 0.3s ease;
}
.gorilla-btn {
background: linear-gradient(90deg, var(--accent) 0%, var(--accent-bright) 100%);
color: #050a07;
font-weight: 800;
transition: all 0.2s ease;
box-shadow: 0 0 28px rgba(var(--accent-rgb), 0.38);
}
.gorilla-btn:hover {
transform: translateY(-1px);
box-shadow: 0 0 38px rgba(var(--accent-rgb), 0.65);
filter: brightness(1.06);
}
@keyframes radarSweep {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.radar-sweep {
background: conic-gradient(from 0deg, rgba(var(--accent-rgb), 0.40) 0deg, rgba(var(--accent-rgb), 0.0) 90deg, transparent 360deg);
animation: radarSweep 5s linear infinite;
}
@keyframes pulseGlow {
0%, 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.6); }
50% { box-shadow: 0 0 0 10px rgba(var(--accent-rgb), 0); }
}
.node-pulse {
animation: pulseGlow 2.2s infinite;
}
</style>
</head>
<body class="min-h-screen">
<!-- Top Navbar (GorillaVPN Pill Header + Custom Circular Emblem Logo + Live Palette Switcher) -->
<header class="sticky top-0 z-40 px-4 pt-3">
<div class="max-w-7xl mx-auto gorilla-subcard backdrop-blur-xl rounded-2xl px-5 py-3 flex flex-wrap items-center justify-between gap-4 shadow-2xl">
<a href="#" class="flex items-center gap-3.5 group">
<div class="relative w-12 h-12 rounded-full p-0.5 accent-bg shadow-lg">
<img src="/assets/vpn-7561/logo.jpg" alt="Катюша VPN Logo" class="w-full h-full object-cover rounded-full bg-black" onerror="this.style.display='none'" />
<span class="absolute -bottom-0.5 -right-0.5 w-3.5 h-3.5 rounded-full accent-bg border-2 border-black"></span>
</div>
<div>
<span class="font-unbounded font-extrabold text-base md:text-lg tracking-wider uppercase text-white transition">Катюша VPN</span>
<span class="block text-[10px] uppercase tracking-widest accent-text font-semibold">Персонаж и гамма по промпту · VLESS Reality</span>
</div>
</a>
<nav class="hidden xl:flex items-center gap-6 text-sm font-medium opacity-85">
<a href="#how-it-works" class="hover:opacity-100 transition">Как подключить</a>
<a href="#art-showcase" class="hover:opacity-100 transition">Дизайн-код и Персонаж</a>
<a href="#tariffs" class="hover:opacity-100 transition">Тарифы</a>
<a href="#cabinet" class="hover:opacity-100 transition">Кабинет</a>
<a href="#faq" class="hover:opacity-100 transition">FAQ</a>
</nav>
<div class="flex flex-wrap items-center gap-3">
<!-- Live Color Scheme Switcher (Reflects Prompt Palette + Allows Instant Preview) -->
<div class="flex items-center gap-1.5 px-3 py-1.5 rounded-xl bg-black/40 border accent-border" title="Палитра из промпта (можно переключать на лету)">
<span class="text-[10px] uppercase tracking-wider opacity-70 mr-1 hidden sm:inline">🎨 Гамма:</span>
<button type="button" onclick="applyThemePalette('crimson')" id="pal-btn-crimson" title="Цветовая гамма: Алый Огонь (Crimson Neon)"
style="background:#f43f5e;"
class="w-5 h-5 rounded-full transition transform opacity-75 hover:opacity-100 shadow-md"></button>
<button type="button" onclick="applyThemePalette('violet')" id="pal-btn-violet" title="Цветовая гамма: Кибер-Фиолет (Cyber Violet)"
style="background:#a855f7;"
class="w-5 h-5 rounded-full transition transform opacity-75 hover:opacity-100 shadow-md"></button>
<button type="button" onclick="applyThemePalette('cyan')" id="pal-btn-cyan" title="Цветовая гамма: Ледяной Неон (Arctic Cyan)"
style="background:#38bdf8;"
class="w-5 h-5 rounded-full transition transform opacity-75 hover:opacity-100 shadow-md"></button>
<button type="button" onclick="applyThemePalette('amber')" id="pal-btn-amber" title="Цветовая гамма: Кибер-Золото (Gold Amber)"
style="background:#f59e0b;"
class="w-5 h-5 rounded-full transition transform opacity-75 hover:opacity-100 shadow-md"></button>
<button type="button" onclick="applyThemePalette('pink')" id="pal-btn-pink" title="Цветовая гамма: Неоновая Фуксия (Hot Pink)"
style="background:#ec4899;"
class="w-5 h-5 rounded-full transition transform opacity-75 hover:opacity-100 shadow-md"></button>
<button type="button" onclick="applyThemePalette('emerald')" id="pal-btn-emerald" title="Цветовая гамма: Изумрудный Радар (Gorilla Emerald)"
style="background:#4ade80;"
class="w-5 h-5 rounded-full transition transform ring-2 ring-white scale-110 shadow-md"></button>
</div>
<button onclick="openCabinetModal()" class="hidden sm:inline-flex items-center gap-2 px-3.5 py-2 rounded-xl gorilla-subcard hover:brightness-125 text-xs font-bold 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 -->
<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 gorilla-subcard accent-text text-[11px] font-bold tracking-wider uppercase">
<span class="w-2 h-2 rounded-full accent-bg animate-ping"></span>
УСТАНОВКА ЗА 3 МИНУТЫ · ПРОБНЫЙ ДОСТУП 48 ЧАСОВ
</div>
<h1 class="font-unbounded font-black text-3xl sm:text-5xl xl:text-[50px] leading-[1.08] tracking-tight uppercase text-white">
Катюша VPN: <span class="accent-text">ПРОБИВАЕМ СТЕНЫ</span> БЛОКИРОВОК
</h1>
<p class="opacity-85 text-base sm:text-lg leading-relaxed max-w-2xl">
Хочу точно такой же с классным дизайном, чтобы цепляло внимание. Дизайн код базируется на Катюше, сексопильной девушке, которая стреляет по РКН, как будто пробивает стены. Тарифы такие же. Протокол <b class="accent-text">Xray VLESS Reality</b> сносит любые фаерволы и замедления — подключите телефон, ноутбук и телевизор за пару минут.
</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 gorilla-subcard hover:brightness-125 font-bold text-sm sm:text-base transition">
Выбрать тариф (от 191 ₽/мес)
</a>
</div>
</div>
<!-- Character & Visual Code Showcase Card -->
<div id="art-showcase" class="gorilla-card p-3 sm:p-4 relative overflow-hidden group">
<div class="relative rounded-xl overflow-hidden border accent-border aspect-[16/9] bg-black/60">
<img src="/assets/vpn-7561/hero.jpg" alt="Катюша VPN Character Artwork" 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-black/90 via-transparent to-transparent opacity-85"></div>
<div class="absolute bottom-3 left-3 right-3 flex flex-wrap items-end justify-between gap-2">
<div class="bg-black/80 backdrop-blur-md border accent-border rounded-xl px-3.5 py-2 max-w-xl">
<div class="text-[10px] uppercase tracking-widest accent-text font-bold">🔥 Персонаж и цветовая гамма по вашему промпту (<span id="activePaletteLabel">Изумрудный Радар (Gorilla Emerald)</span>)</div>
<div class="text-xs sm:text-sm font-bold text-white line-clamp-2">Хочу точно такой же с классным дизайном, чтобы цепляло внимание. Дизайн код базируется на Катюше, сексопильной девушке, которая стреляет по РКН, как будто пробивает стены. Тарифы такие же</div>
</div>
<span class="px-3 py-1.5 rounded-lg accent-bg font-unbounded font-extrabold text-xs uppercase shadow-lg">
10 Гбит/с · 0 логов
</span>
</div>
</div>
</div>
</div>
<!-- Right Column (5 cols): 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 accent-text font-bold">ПРОБНЫЙ ДОСТУП</div>
<h2 class="font-unbounded font-extrabold text-xl sm:text-2xl text-white mt-0.5">Катюша VPN Trial · 2 дня</h2>
</div>
<span class="px-3 py-1 rounded-full gorilla-subcard accent-text text-xs font-bold whitespace-nowrap">
● Активен
</span>
</div>
<!-- 3 GorillaVPN Stat Boxes -->
<div class="grid grid-cols-3 gap-2.5">
<div class="bg-black/45 border accent-border rounded-xl p-3">
<div class="text-[11px] opacity-60">Срок</div>
<div class="font-unbounded font-bold text-sm sm:text-base text-white mt-0.5">48 часов</div>
</div>
<div class="bg-black/45 border accent-border rounded-xl p-3">
<div class="text-[11px] opacity-60">Устройства</div>
<div class="font-unbounded font-bold text-sm sm:text-base text-white mt-0.5">5</div>
</div>
<div class="bg-black/45 border accent-border rounded-xl p-3">
<div class="text-[11px] opacity-60">Трафик</div>
<div class="font-unbounded font-bold text-sm sm:text-base accent-text mt-0.5">∞ ГБ</div>
</div>
</div>
</div>
<!-- Interactive Circular Radar -->
<div class="relative mx-auto w-64 h-64 sm:w-72 sm:h-72 rounded-full border accent-border bg-black/60 flex items-center justify-center overflow-hidden shadow-inner">
<div class="absolute inset-0 rounded-full radar-sweep pointer-events-none"></div>
<div class="absolute w-48 h-48 rounded-full border accent-border opacity-50 pointer-events-none"></div>
<div class="absolute w-28 h-28 rounded-full border accent-border opacity-60 pointer-events-none"></div>
<div class="absolute inset-x-0 h-px accent-bg opacity-15 pointer-events-none"></div>
<div class="absolute inset-y-0 w-px accent-bg opacity-15 pointer-events-none"></div>
<!-- Center Character Emblem Node -->
<div class="relative z-10 w-14 h-14 rounded-full p-0.5 accent-bg shadow-lg">
<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 gorilla-subcard text-[11px] font-bold hover:brightness-125 transition node-pulse">
🇳🇱 Нидерланды
</button>
<button onclick="selectRadarCountry('Германия · Франкфурт', '18 мс', '910 Мбит/с')" class="absolute top-12 right-4 z-20 px-2.5 py-1 rounded-full gorilla-subcard text-[11px] font-bold hover:brightness-125 transition">
🇩🇪 Германия
</button>
<button onclick="selectRadarCountry('Финляндия · Хельсинки', '11 мс', '980 Мбит/с')" class="absolute bottom-14 left-3 z-20 px-2.5 py-1 rounded-full gorilla-subcard text-[11px] font-bold hover:brightness-125 transition">
🇫🇮 Финляндия
</button>
<button onclick="selectRadarCountry('Турция · Стамбул', '29 мс', '860 Мбит/с')" class="absolute bottom-6 right-8 z-20 px-2.5 py-1 rounded-full gorilla-subcard text-[11px] font-bold hover:brightness-125 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 gorilla-subcard text-[10px] font-semibold hover:brightness-125 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 gorilla-subcard text-[10px] font-semibold hover:brightness-125 transition">
🇸🇪 Швеция
</button>
</div>
<!-- Selected Radar Node Status + CTA -->
<div class="space-y-3">
<div class="bg-black/45 border accent-border rounded-xl px-4 py-2.5 flex items-center justify-between text-xs">
<div>
<span class="opacity-60 block text-[10px] uppercase">Выбранный узел пробоя</span>
<b id="radarLoc" class="text-white font-bold">Нидерланды · Амстердам</b>
</div>
<div class="text-right">
<span id="radarPing" class="accent-text font-mono font-bold block">Пинг: 14 мс</span>
<span id="radarSpeed" class="text-[11px] opacity-75">Канал: 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 минуты -->
<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 accent-text 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 opacity-75 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 gorilla-btn 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 gorilla-subcard hover:brightness-125 text-white rounded-2xl p-4 text-left transition">
<div class="font-unbounded text-sm">🤖 Android</div>
<div class="text-xs opacity-60 mt-0.5">Смартфоны и планшеты</div>
</button>
<button onclick="selectDeviceTab(this, 'macOS', 'Hiddify / Streisand для Mac (M1/M2/M3/Intel)')" class="device-tab gorilla-subcard hover:brightness-125 text-white rounded-2xl p-4 text-left transition">
<div class="font-unbounded text-sm">💻 macOS</div>
<div class="text-xs opacity-60 mt-0.5">MacBook и iMac</div>
</button>
<button onclick="selectDeviceTab(this, 'Windows', 'Hiddify Next для Windows 10 / 11')" class="device-tab gorilla-subcard hover:brightness-125 text-white rounded-2xl p-4 text-left transition">
<div class="font-unbounded text-sm">🖥 Windows</div>
<div class="text-xs opacity-60 mt-0.5">ПК и ноутбуки</div>
</button>
<button onclick="selectDeviceTab(this, 'Android TV', 'v2rayNG / Hiddify TV для YouTube 4K на телевизоре')" class="device-tab gorilla-subcard hover:brightness-125 text-white rounded-2xl p-4 text-left transition">
<div class="font-unbounded text-sm">📺 Android TV</div>
<div class="text-xs opacity-60 mt-0.5">Телевизоры и приставки</div>
</button>
</div>
<!-- 4 Connection Steps -->
<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 accent-text">01</span>
<h3 class="font-unbounded font-bold text-base text-white">Выберите устройство</h3>
<p class="text-xs opacity-80 leading-relaxed">
Сейчас выбрана платформа: <b id="activeDeviceName" class="accent-text">iOS</b>. Подписка работает сразу на 5 устройствах одновременно.
</p>
</div>
<div class="gorilla-card p-6 space-y-3">
<span class="font-unbounded font-black text-2xl accent-text">02</span>
<h3 class="font-unbounded font-bold text-base text-white">Скачайте приложение</h3>
<p class="text-xs opacity-80 leading-relaxed">
Рекомендуемый клиент: <b id="activeDeviceApp" class="accent-text">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 accent-text">03</span>
<h3 class="font-unbounded font-bold text-base text-white">Активируйте в 1 клик</h3>
<p class="text-xs opacity-80 leading-relaxed">
Нажмите «Добавить подписку» в личном кабинете или Telegram-боте — все локации появятся автоматически.
</p>
</div>
<div class="gorilla-card p-6 space-y-3">
<span class="font-unbounded font-black text-2xl accent-text">04</span>
<h3 class="font-unbounded font-bold text-base text-white">Готово — вы под защитой</h3>
<p class="text-xs opacity-80 leading-relaxed">
Никаких стен и ограничений: открывайте YouTube 4K, Instagram, звонки и игры на максимальной скорости.
</p>
</div>
</div>
</section>
<!-- SECTION 3: ТАРИФЫ (Exact 4 GorillaVPN Plans: 239 ₽ / 649 ₽ / 1 219 ₽ / 2 299 ₽) -->
<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 accent-text font-bold">ТАРИФЫ</div>
<h2 class="font-unbounded font-extrabold text-2xl sm:text-4xl text-white mt-1">Один тариф — все возможности</h2>
<p class="text-sm opacity-75 mt-2">
Никаких урезанных версий: на любом сроке доступны все локации 10 Гбит/с, 5 устройств и безлимитный трафик.
</p>
</div>
<div class="flex flex-wrap items-center gap-3">
<div class="flex items-center gorilla-subcard rounded-xl px-3 py-2">
<input id="promoInput" type="text" placeholder="Промокод (напр. KATYUSHA)" class="bg-transparent text-xs text-white placeholder-white/40 outline-none w-44" />
<button onclick="applyPromo()" class="text-xs font-bold accent-text ml-2">Применить</button>
</div>
<label class="cursor-pointer inline-flex items-center gap-2 gorilla-subcard rounded-xl px-3.5 py-2 text-xs">
<input type="checkbox" id="giftToggle" class="rounded" />
<span>🎁 Подарить подписку другу</span>
</label>
</div>
</div>
<div id="promoBanner" class="hidden gorilla-subcard rounded-xl px-4 py-2.5 text-xs accent-text font-semibold">
🔥 Промокод активирован! Дополнительные +7 дней бонусом к любому выбранному тарифу.
</div>
<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 gorilla-subcard accent-text">Старт</span>
</div>
<div>
<div class="font-unbounded font-black text-3xl sm:text-4xl text-white">239 ₽</div>
<div class="text-xs opacity-75 mt-1">239 ₽/мес · Попробовать на месяц</div>
</div>
<ul class="space-y-2.5 text-xs opacity-90 pt-3 border-t accent-border">
<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="accent-text">СБП · QR-код · Крипто · Telegram Stars</span></li>
</ul>
</div>
<button onclick="openCheckoutModal('1 месяц', '239 ₽', '239 ₽/мес')" class="mt-7 w-full py-3.5 rounded-xl gorilla-subcard hover:brightness-125 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">
<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 accent-bg font-extrabold uppercase">Популярный</span>
</div>
<div>
<div class="font-unbounded font-black text-3xl sm:text-4xl accent-text">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 gorilla-subcard accent-text font-bold">Экономия 10%</span>
</div>
<div class="text-[11px] opacity-60 mt-0.5">Оптимальный старт</div>
</div>
<ul class="space-y-2.5 text-xs opacity-90 pt-3 border-t accent-border">
<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="accent-text">СБП · 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 gorilla-subcard accent-text 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 opacity-75 mt-1">203 ₽/мес · Полгода спокойствия</div>
</div>
<ul class="space-y-2.5 text-xs opacity-90 pt-3 border-t accent-border">
<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="accent-text">СБП · 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 gorilla-subcard hover:brightness-125 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">
<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 accent-text font-bold">191 ₽/мес</span>
<span class="text-[11px] opacity-60">Максимальная выгода</span>
</div>
</div>
<ul class="space-y-2.5 text-xs opacity-90 pt-3 border-t accent-border">
<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="accent-text">СБП · 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: ЛИЧНЫЙ КАБИНЕТ -->
<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 accent-text font-bold">ЛИЧНЫЙ КАБИНЕТ</div>
<h2 class="font-unbounded font-extrabold text-2xl sm:text-4xl text-white leading-tight">
Всё управление в одном кабинете
</h2>
<p class="text-sm opacity-75 leading-relaxed">
Никаких сложных конфигов и ручных переключений. Управляйте своими устройствами, продлевайте доступ через СБП и делитесь QR-кодом прямо в браузере или Telegram.
</p>
<div class="grid grid-cols-2 gap-3 pt-2">
<div class="gorilla-subcard rounded-2xl p-4">
<div class="font-unbounded font-extrabold text-xl accent-text">5 устройств</div>
<div class="text-xs opacity-70 mt-1">на одну подписку без доплат</div>
</div>
<div class="gorilla-subcard rounded-2xl p-4">
<div class="font-unbounded font-extrabold text-xl accent-text">6 платформ</div>
<div class="text-xs opacity-70 mt-1">iOS, Android, Win, Mac, Linux, TV</div>
</div>
<div class="gorilla-subcard rounded-2xl p-4">
<div class="font-unbounded font-extrabold text-sm text-white">QR и ссылка</div>
<div class="text-xs opacity-70 mt-1">для мгновенного подключения</div>
</div>
<div class="gorilla-subcard rounded-2xl p-4">
<div class="font-unbounded font-extrabold text-sm text-white">Без автосписаний</div>
<div class="text-xs opacity-70 mt-1">прозрачная история платежей</div>
</div>
</div>
</div>
<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 accent-border">
<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 accent-border" />
<div>
<div class="font-unbounded font-bold text-sm text-white">Кабинет · #VPN-7561</div>
<div class="text-xs accent-text">Подписка активна · Тариф «Оптимальный»</div>
</div>
</div>
<button onclick="openTrialModal()" class="px-3.5 py-2 rounded-xl gorilla-subcard hover:brightness-125 accent-text 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-black/45 border accent-border rounded-xl p-3.5">
<span class="opacity-60">Активные устройства</span>
<div class="font-unbounded font-bold text-base text-white mt-1">3 из 5 подключено</div>
<div class="text-[11px] accent-text mt-0.5">iPhone 16 Pro · MacBook · Sony TV</div>
</div>
<div class="bg-black/45 border accent-border rounded-xl p-3.5">
<span class="opacity-60">Протокол маскировки</span>
<div class="font-unbounded font-bold text-base accent-text mt-1">VLESS Reality</div>
<div class="text-[11px] opacity-60 mt-0.5">Порт 443 · TLS 1.3 Stealth</div>
</div>
<div class="bg-black/45 border accent-border rounded-xl p-3.5">
<span class="opacity-60">Быстрая оплата</span>
<div class="font-unbounded font-bold text-base text-white mt-1">СБП / Stars</div>
<div class="text-[11px] accent-text mt-0.5">Мгновенное продление</div>
</div>
</div>
</div>
</section>
<!-- SECTION 5: ЧАСТЫЕ ВОПРОСЫ -->
<section id="faq" class="space-y-6">
<div>
<div class="text-xs uppercase tracking-widest accent-text 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">
<summary class="font-unbounded font-bold text-sm text-white cursor-pointer flex items-center justify-between">
<span>Как получить пробный доступ на 48 часов за 0 ₽?</span>
<span class="accent-text group-open:rotate-45 transition">+</span>
</summary>
<p class="text-xs opacity-80 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="accent-text group-open:rotate-45 transition">+</span>
</summary>
<p class="text-xs opacity-80 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="accent-text group-open:rotate-45 transition">+</span>
</summary>
<p class="text-xs opacity-80 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="accent-text group-open:rotate-45 transition">+</span>
</summary>
<p class="text-xs opacity-80 mt-3 leading-relaxed">
Доступна моментальная оплата через СБП (по QR-коду любого российского банка), криптовалюту (USDT/TON) и Telegram Stars. Никаких скрытых автосписаний.
</p>
</details>
</div>
</section>
<!-- PM Reference Analysis Footer Block -->
<section class="pt-8 border-t accent-border space-y-4">
<div class="flex flex-wrap items-center justify-between gap-2">
<div>
<h3 class="text-xs font-unbounded font-bold accent-text uppercase">🔍 Исследованный референс и дизайн-система (`contracts/WEB_REFERENCES.md`)</h3>
<p class="text-xs opacity-60">Спарсено из React SPA бандла <code>gorillavpn.pro</code> + адаптирована цветовая гамма и персонаж из промпта</p>
</div>
<a href="/" class="text-xs accent-text 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 gorilla-subcard hover:brightness-110 rounded-2xl p-4 transition">
<div class="text-xs font-bold accent-text truncate">🎯 Ваш референс-образец: Gorilla</div>
<div class="text-[11px] opacity-50 truncate mt-0.5 font-mono">https://gorillavpn.pro/</div>
<p class="text-xs opacity-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 gorilla-subcard hover:brightness-110 rounded-2xl p-4 transition">
<div class="text-xs font-bold accent-text truncate">Mullvad VPN — Эталон минимализма, прозрачности и оплаты в 1 клик (вкл. крипто)</div>
<div class="text-[11px] opacity-50 truncate mt-0.5 font-mono">https://mullvad.net/en</div>
<p class="text-xs opacity-80 mt-2 line-clamp-3">Ключевые паттерны: генерация аккаунта без email, мгновенный выбор протокола WireGuard/Shadowsocks, честная цена, нулевое логирование.</p>
</a>
<a href="https://protonvpn.com" target="_blank" class="block gorilla-subcard hover:brightness-110 rounded-2xl p-4 transition">
<div class="text-xs font-bold accent-text truncate">Proton VPN — Премиальный тёмный UI с интерактивной картой серверов и сравнением скоростей</div>
<div class="text-[11px] opacity-50 truncate mt-0.5 font-mono">https://protonvpn.com</div>
<p class="text-xs opacity-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 gorilla-subcard hover:brightness-110 rounded-2xl p-4 transition">
<div class="text-xs font-bold accent-text truncate">Amnezia / Outline VPN — Фокус на обход блокировок (VLESS / Xray Reality) и приложения под все ОС</div>
<div class="text-[11px] opacity-50 truncate mt-0.5 font-mono">https://amnezia.org</div>
<p class="text-xs opacity-80 mt-2 line-clamp-3">Ключевые паттерны: кнопки быстрого скачивания (iOS, Android, macOS, Windows, роутеры), выдача ключа для Telegram-бота в 1 клик.</p>
</a>
</div>
</section>
<section class="max-w-6xl mx-auto px-6 my-4">
<div class="bg-amber-500/15 border border-amber-500/40 rounded-2xl p-4 flex items-center justify-between">
<div>
<span class="text-xs font-bold uppercase text-amber-300">🛠 Новая фича на DEV-стенде (FEAT-09)</span>
<h4 class="font-bold text-sm text-white mt-0.5">Реферальная программа «Приведи друга — получи +14 дней VPN»</h4>
<p class="text-xs text-slate-300">Генерация персональной реферальной ссылки и учёт бонусных дней в личном кабинете.</p>
</div>
<span class="px-3 py-1 rounded-full text-xs bg-amber-500/20 text-amber-300 font-mono">ветка: dev (feat/feat-09)</span>
</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 accent-border" />
<div>
<h4 id="modalTitle" class="font-unbounded font-bold text-base text-white">Катюша VPN Trial · 48 часов за 0 ₽</h4>
<p id="modalSub" class="text-xs accent-text">5 устройств · Безлимитный трафик · VLESS Reality</p>
</div>
</div>
<button onclick="closeCheckoutModal()" class="opacity-60 hover:opacity-100 text-lg font-bold">✕</button>
</div>
<div class="bg-black/60 border accent-border rounded-xl p-4 space-y-2">
<div class="flex items-center justify-between text-[11px] accent-text">
<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] accent-text break-all select-all">
vless://vpn-7561-reality@nl-amsterdam.vo-office.com:443?security=reality&sni=www.cloudflare.com&fp=chrome&pbk=KatyushaLaser2026&type=grpc#Катюша_VPN_10Gbps
</div>
</div>
<div class="grid grid-cols-2 sm:grid-cols-4 gap-2 text-center text-[11px] font-bold">
<div class="gorilla-subcard rounded-lg py-2 accent-text">⚡ СБП QR</div>
<div class="gorilla-subcard rounded-lg py-2 opacity-85">💎 USDT / TON</div>
<div class="gorilla-subcard rounded-lg py-2 opacity-85">⭐ TG Stars</div>
<div class="gorilla-subcard rounded-lg py-2 opacity-85">💳 Карта РФ</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>
const PALETTES = {"crimson": {"key": "crimson", "name": "Алый Огонь (Crimson Neon)", "bg_deep": "#110408", "bg_card": "#1f0710", "bg_card_hover": "#2d0b18", "accent": "#f43f5e", "accent_bright": "#fb7185", "accent_rgb": "244, 63, 94", "text_main": "#fff1f2", "prompt_color_en": "deep obsidian crimson (#110408) background with glowing ruby red (#f43f5e) and fiery rose neon accents"}, "violet": {"key": "violet", "name": "Кибер-Фиолет (Cyber Violet)", "bg_deep": "#090414", "bg_card": "#140929", "bg_card_hover": "#1f0e3d", "accent": "#a855f7", "accent_bright": "#c084fc", "accent_rgb": "168, 85, 247", "text_main": "#faf5ff", "prompt_color_en": "deep cyber violet (#090414) background with electric purple (#a855f7) and magenta neon accents"}, "cyan": {"key": "cyan", "name": "Ледяной Неон (Arctic Cyan)", "bg_deep": "#030b14", "bg_card": "#071729", "bg_card_hover": "#0c233d", "accent": "#38bdf8", "accent_bright": "#7dd3fc", "accent_rgb": "56, 189, 248", "text_main": "#f0f9ff", "prompt_color_en": "deep abyssal navy (#030b14) background with electric ice cyan (#38bdf8) and laser blue neon accents"}, "amber": {"key": "amber", "name": "Кибер-Золото (Gold Amber)", "bg_deep": "#120c03", "bg_card": "#211606", "bg_card_hover": "#302009", "accent": "#f59e0b", "accent_bright": "#fbbf24", "accent_rgb": "245, 158, 11", "text_main": "#fffbeb", "prompt_color_en": "deep onyx black-gold (#120c03) background with glowing cyber gold (#f59e0b) and warm amber neon accents"}, "pink": {"key": "pink", "name": "Неоновая Фуксия (Hot Pink)", "bg_deep": "#14040d", "bg_card": "#260819", "bg_card_hover": "#380c25", "accent": "#ec4899", "accent_bright": "#f472b6", "accent_rgb": "236, 72, 153", "text_main": "#fdf2f8", "prompt_color_en": "deep dark magenta-noir (#14040d) background with hot neon pink (#ec4899) and electric rose accents"}, "emerald": {"key": "emerald", "name": "Изумрудный Радар (Gorilla Emerald)", "bg_deep": "#04100b", "bg_card": "#081d14", "bg_card_hover": "#0d2b1e", "accent": "#4ade80", "accent_bright": "#86efac", "accent_rgb": "74, 222, 128", "text_main": "#ecfdf5", "prompt_color_en": "deep dark emerald (#04100b) background with glowing mint green (#4ade80) and cyber lime accents"}};
function applyThemePalette(key) {
const p = PALETTES[key];
if (!p) return;
const root = document.documentElement;
root.style.setProperty('--bg-deep', p.bg_deep);
root.style.setProperty('--bg-card', p.bg_card);
root.style.setProperty('--bg-card-hover', p.bg_card_hover);
root.style.setProperty('--accent', p.accent);
root.style.setProperty('--accent-bright', p.accent_bright);
root.style.setProperty('--accent-rgb', p.accent_rgb);
root.style.setProperty('--text-main', p.text_main);
const lbl = document.getElementById('activePaletteLabel');
if (lbl) lbl.innerText = p.name;
Object.keys(PALETTES).forEach(k => {
const b = document.getElementById('pal-btn-' + k);
if (b) {
b.className = k === key
? 'w-5 h-5 rounded-full transition transform ring-2 ring-white scale-110 shadow-md'
: 'w-5 h-5 rounded-full transition transform opacity-75 hover:opacity-100 shadow-md';
}
});
}
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 gorilla-subcard hover:brightness-125 text-white rounded-2xl p-4 text-left transition';
});
btn.className = 'device-tab gorilla-btn 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 = 'Катюша VPN 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>