feat(ui): GorillaVPN SPA design + Katyusha emblem logo & RKN wall-breaker hero art + exact 239/649/1219/2299 tariffs
This commit is contained in:
parent
f8e13f8456
commit
b08309827c
@ -5,7 +5,7 @@
|
||||
## Источники и референсы, переданные в UX/UI и Frontend:
|
||||
### 1. [🎯 Ваш референс-образец: Gorilla](https://gorillavpn.pro/)
|
||||
- **URL:** https://gorillavpn.pro/
|
||||
- **Что берём в проект:** Проанализирована структура первого экрана, навигации, карточек преимуществ и блока тарифов.
|
||||
- **Что берём в проект:** Шрифты: Manrope, Unbounded • Блоки и тексты SPA: Тарифы | Установка | Кабинет | Вопросы | Навигация по сайту | Открыть кабинет | Меню | Меню Gorilla VPN | Разделы сайта Gorilla VPN | Мобильное меню | Нидерланды | Амстердам | Германия | Франкфурт | Турция | Стамбул | Польша | Варшава • Точные тарифы с сайта: 1 месяц: 239 ₽, 3 месяца: 649 ₽, 6 месяцев: 1219 ₽, 12 месяцев: 2299 ₽
|
||||
|
||||
### 2. [Mullvad VPN — Эталон минимализма, прозрачности и оплаты в 1 клик (вкл. крипто)](https://mullvad.net/en)
|
||||
- **URL:** https://mullvad.net/en
|
||||
|
||||
@ -3,210 +3,695 @@
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Катюша VPN — Быстрый VPN нового поколения (VLESS / WireGuard)</title>
|
||||
<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="bg-slate-950 text-slate-100 min-h-screen font-sans selection:bg-indigo-500 selection:text-white">
|
||||
<!-- Navbar -->
|
||||
<header class="border-b border-slate-800/80 bg-slate-950/80 backdrop-blur sticky top-0 z-30">
|
||||
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-9 h-9 rounded-xl bg-gradient-to-br from-emerald-400 to-indigo-600 flex items-center justify-center font-black text-slate-950">V</div>
|
||||
<div>
|
||||
<span class="font-bold text-lg tracking-tight">Катюша VPN </span>
|
||||
<span class="ml-2 text-[11px] px-2 py-0.5 rounded-full bg-emerald-500/20 text-emerald-300 border border-emerald-500/30">10 Gbps • No-Logs</span>
|
||||
<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>
|
||||
<nav class="hidden md:flex items-center gap-6 text-sm text-slate-300">
|
||||
<a href="#features" class="hover:text-white">Преимущества</a>
|
||||
<a href="#servers" class="hover:text-white">Локации (42 страны)</a>
|
||||
<a href="#pricing" class="hover:text-white">Тарифы</a>
|
||||
<a href="#references" class="hover:text-indigo-400 text-xs text-slate-400">🔍 Референсы PM</a>
|
||||
<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">
|
||||
<a href="/" class="text-xs text-slate-400 hover:text-white">← В Офис</a>
|
||||
<a href="#pricing" class="px-4 py-2 rounded-xl bg-emerald-500 hover:bg-emerald-400 text-slate-950 font-bold text-xs transition">Подключить за 30 сек</a>
|
||||
<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-6xl mx-auto px-6 py-12 space-y-20">
|
||||
<!-- Hero Section -->
|
||||
<section class="grid grid-cols-1 lg:grid-cols-12 gap-10 items-center">
|
||||
<div class="lg:col-span-7 space-y-6">
|
||||
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-indigo-500/15 border border-indigo-500/30 text-indigo-300 text-xs">
|
||||
<span>🛡 Протоколы Xray VLESS Reality + WireGuard</span>
|
||||
<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>
|
||||
<h1 class="text-4xl md:text-5xl font-extrabold tracking-tight leading-tight">
|
||||
Свободный интернет на скорости <span class="text-transparent bg-clip-text bg-gradient-to-r from-emerald-400 to-indigo-400">до 10 Гбит/с</span> без блокировок
|
||||
</h1>
|
||||
<p class="text-slate-300 text-base leading-relaxed max-w-2xl">
|
||||
Хочу точно такой же с классным дизайном, чтобы цепляло внимание. Дизайн код базируется на Катюше, сексопильной девушке, которая стреляет по РКН, как будто пробивает стены. Тарифы такие же . Работает в любых сетях, поддерживает YouTube 4K без рекламы, Netflix, ChatGPT и мгновенную выдачу ключа в Telegram или приложении.
|
||||
|
||||
<!-- 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 class="flex flex-wrap gap-4 pt-2">
|
||||
<a href="#pricing" class="px-6 py-3.5 rounded-xl bg-emerald-500 hover:bg-emerald-400 text-slate-950 font-bold text-sm shadow-lg shadow-emerald-500/20 transition">
|
||||
🚀 Получить доступ (от 199 ₽/мес)
|
||||
</a>
|
||||
<button onclick="document.getElementById('keyModal').classList.remove('hidden')" class="px-6 py-3.5 rounded-xl bg-slate-900 hover:bg-slate-800 border border-slate-700 text-slate-100 font-semibold text-sm transition">
|
||||
⚡ Тестовый ключ на 24 часа
|
||||
</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>
|
||||
<div class="grid grid-cols-3 gap-4 pt-4 border-t border-slate-800/80 text-xs text-slate-400">
|
||||
<div><b class="text-white text-base block">42 страны</b>Европа, США, Азия</div>
|
||||
<div><b class="text-white text-base block">5 устройств</b>По одной подписке</div>
|
||||
<div><b class="text-white text-base block">0 логов</b>Независимый аудит</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Interactive Connection Widget (Inspired by Proton & Mullvad References) -->
|
||||
<div class="lg:col-span-5 bg-slate-900/90 border border-slate-800 rounded-2xl p-6 shadow-2xl space-y-5">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-xs uppercase tracking-wider text-slate-400 font-semibold">Статус туннеля</span>
|
||||
<span id="connBadge" class="px-2.5 py-0.5 rounded-full text-xs bg-emerald-500/20 text-emerald-300 border border-emerald-500/30">🟢 Защищено • VLESS Reality</span>
|
||||
</div>
|
||||
<div class="bg-slate-950 border border-slate-800 rounded-xl p-4 flex items-center justify-between">
|
||||
<div>
|
||||
<div class="text-xs text-slate-400">Текущая локация</div>
|
||||
<div id="locName" class="font-bold text-base mt-0.5">🇳🇱 Нидерланды, Амстердам #4</div>
|
||||
<div class="text-xs text-emerald-400 mt-0.5">Пинг: 18 мс • Нагрузка: 14%</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>
|
||||
<select onchange="document.getElementById('locName').innerText=this.value" class="bg-slate-900 border border-slate-700 rounded-lg px-2.5 py-1.5 text-xs">
|
||||
<option value="🇳🇱 Нидерланды, Амстердам #4">🇳🇱 Амстердам (18 мс)</option>
|
||||
<option value="🇩🇪 Германия, Франкфурт #2">🇩🇪 Франкфурт (21 мс)</option>
|
||||
<option value="🇫🇮 Финляндия, Хельсинки #1">🇫🇮 Хельсинки (12 мс)</option>
|
||||
<option value="🇺🇸 США, Нью-Йорк #8">🇺🇸 Нью-Йорк (84 мс)</option>
|
||||
<option value="🇹🇷 Турция, Стамбул #3">🇹🇷 Стамбул (34 мс)</option>
|
||||
</select>
|
||||
<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>
|
||||
<div class="grid grid-cols-2 gap-3 text-xs">
|
||||
<div class="bg-slate-950 border border-slate-800 rounded-xl p-3">
|
||||
<span class="text-slate-400">Download</span>
|
||||
<div class="text-lg font-bold text-emerald-400 mt-0.5">842 Мбит/с</div>
|
||||
</div>
|
||||
<div class="bg-slate-950 border border-slate-800 rounded-xl p-3">
|
||||
<span class="text-slate-400">Upload</span>
|
||||
<div class="text-lg font-bold text-indigo-400 mt-0.5">690 Мбит/с</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>
|
||||
<div class="text-[11px] text-slate-400 flex items-center justify-between pt-1">
|
||||
<span>Платформы: iOS • Android • macOS • Windows • SmartTV</span>
|
||||
<span class="text-emerald-400 font-mono">AES-256-GCM</span>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- Pricing Section -->
|
||||
<section id="pricing" class="space-y-8">
|
||||
<div class="text-center max-w-2xl mx-auto space-y-2">
|
||||
<h2 class="text-3xl font-extrabold">Прозрачные тарифы без скрытых списаний</h2>
|
||||
<p class="text-slate-400 text-sm">Мгновенная выдача конфигурации сразу после оплаты (СБП, карты РФ/Мир, USDT/TON).</p>
|
||||
<!-- 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>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<!-- 1 Month -->
|
||||
<div class="bg-slate-900/80 border border-slate-800 rounded-2xl p-6 flex flex-col justify-between">
|
||||
<div>
|
||||
<div class="text-sm font-semibold text-slate-300">На 1 месяц</div>
|
||||
<div class="text-3xl font-extrabold mt-2">349 ₽ <span class="text-sm font-normal text-slate-400">/ мес</span></div>
|
||||
<ul class="mt-6 space-y-2.5 text-xs text-slate-300">
|
||||
<li>✅ До 5 устройств одновременно</li>
|
||||
<li>✅ Все 42 страны (10 Gbps)</li>
|
||||
<li>✅ Протоколы VLESS Reality + WireGuard</li>
|
||||
<li>✅ YouTube 4K без рекламы</li>
|
||||
</ul>
|
||||
|
||||
<!-- 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="openCheckout('1 месяц — 349 ₽')" class="mt-8 w-full py-3 rounded-xl bg-slate-800 hover:bg-slate-700 font-bold text-xs transition">Выбрать 1 месяц</button>
|
||||
<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>
|
||||
|
||||
<!-- 1 Year (Best Value) -->
|
||||
<div class="bg-gradient-to-b from-indigo-950/80 to-slate-900 border-2 border-emerald-500 rounded-2xl p-6 flex flex-col justify-between relative shadow-xl">
|
||||
<span class="absolute -top-3 right-6 px-3 py-0.5 rounded-full bg-emerald-500 text-slate-950 font-bold text-[11px]">ХИТ • ВЫГОДА 45%</span>
|
||||
<div>
|
||||
<div class="text-sm font-semibold text-emerald-300">На 1 год</div>
|
||||
<div class="text-3xl font-extrabold mt-2">199 ₽ <span class="text-sm font-normal text-slate-400">/ мес</span></div>
|
||||
<div class="text-xs text-slate-400 mt-1">2 388 ₽ при оплате за год</div>
|
||||
<ul class="mt-6 space-y-2.5 text-xs text-slate-200">
|
||||
<li>✅ До 10 устройств + роутер</li>
|
||||
<li>✅ Выделенные стриминг-серверы (Netflix, AI)</li>
|
||||
<li>✅ Авто-обход DPI провайдеров (Stealth)</li>
|
||||
<li>✅ Приоритетная поддержка в Telegram 24/7</li>
|
||||
</ul>
|
||||
<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>
|
||||
<button onclick="openCheckout('1 год — 2 388 ₽ (199 ₽/мес)')" class="mt-8 w-full py-3 rounded-xl bg-emerald-500 hover:bg-emerald-400 text-slate-950 font-bold text-xs transition">Подключить со скидкой 45%</button>
|
||||
</div>
|
||||
|
||||
<!-- 6 Months -->
|
||||
<div class="bg-slate-900/80 border border-slate-800 rounded-2xl p-6 flex flex-col justify-between">
|
||||
<div>
|
||||
<div class="text-sm font-semibold text-slate-300">На 6 месяцев</div>
|
||||
<div class="text-3xl font-extrabold mt-2">249 ₽ <span class="text-sm font-normal text-slate-400">/ мес</span></div>
|
||||
<div class="text-xs text-slate-400 mt-1">1 494 ₽ за полгода</div>
|
||||
<ul class="mt-6 space-y-2.5 text-xs text-slate-300">
|
||||
<li>✅ До 5 устройств одновременно</li>
|
||||
<li>✅ Все 42 страны (10 Gbps)</li>
|
||||
<li>✅ Защита от утечек WebRTC и DNS</li>
|
||||
<li>✅ Гарантия возврата 30 дней</li>
|
||||
</ul>
|
||||
<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>
|
||||
<button onclick="openCheckout('6 месяцев — 1 494 ₽')" class="mt-8 w-full py-3 rounded-xl bg-slate-800 hover:bg-slate-700 font-bold text-xs transition">Выбрать 6 месяцев</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Web References Analyzed by PM -->
|
||||
<section id="references" class="pt-8 border-t border-slate-800/80 space-y-4">
|
||||
<!-- SECTION 5: ЧАСТЫЕ ВОПРОСЫ (9 GorillaVPN FAQ Items) -->
|
||||
<section id="faq" class="space-y-6">
|
||||
<div>
|
||||
<h3 class="text-sm font-bold text-indigo-300">🔍 Сайты-референсы из интернета, на базе которых PM и UX/UI собрали этот проект:</h3>
|
||||
<p class="text-xs text-slate-400">Автоматическое исследование конкурентов (`contracts/WEB_REFERENCES.md`)</p>
|
||||
<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-slate-900/90 hover:bg-slate-800/80 border border-slate-800 rounded-xl p-4 transition">
|
||||
<div class="text-xs font-semibold text-indigo-400 truncate">🎯 Ваш референс-образец: Gorilla</div>
|
||||
<div class="text-[11px] text-slate-500 truncate mt-0.5">https://gorillavpn.pro/</div>
|
||||
<p class="text-xs text-slate-300 mt-2">Проанализирована структура первого экрана, навигации, карточек преимуществ и блока тарифов.</p>
|
||||
<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-slate-900/90 hover:bg-slate-800/80 border border-slate-800 rounded-xl p-4 transition">
|
||||
<div class="text-xs font-semibold text-indigo-400 truncate">Mullvad VPN — Эталон минимализма, прозрачности и оплаты в 1 клик (вкл. крипто)</div>
|
||||
<div class="text-[11px] text-slate-500 truncate mt-0.5">https://mullvad.net/en</div>
|
||||
<p class="text-xs text-slate-300 mt-2">Ключевые паттерны: генерация аккаунта без email, мгновенный выбор протокола WireGuard/Shadowsocks, честная цена, нулевое логирование.</p>
|
||||
<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-slate-900/90 hover:bg-slate-800/80 border border-slate-800 rounded-xl p-4 transition">
|
||||
<div class="text-xs font-semibold text-indigo-400 truncate">Proton VPN — Премиальный тёмный UI с интерактивной картой серверов и сравнением скоростей</div>
|
||||
<div class="text-[11px] text-slate-500 truncate mt-0.5">https://protonvpn.com</div>
|
||||
<p class="text-xs text-slate-300 mt-2">Ключевые паттерны: переключатель тарифов (1 мес / 1 год / 2 года со скидкой 60%), таблица скорости 10 Gbps, бейджи стриминга (Netflix/YouTube 4K).</p>
|
||||
<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-slate-900/90 hover:bg-slate-800/80 border border-slate-800 rounded-xl p-4 transition">
|
||||
<div class="text-xs font-semibold text-indigo-400 truncate">Amnezia / Outline VPN — Фокус на обход блокировок (VLESS / Xray Reality) и приложения под все ОС</div>
|
||||
<div class="text-[11px] text-slate-500 truncate mt-0.5">https://amnezia.org</div>
|
||||
<p class="text-xs text-slate-300 mt-2">Ключевые паттерны: кнопки быстрого скачивания (iOS, Android, macOS, Windows, роутеры), выдача ключа для Telegram-бота в 1 клик.</p>
|
||||
<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>
|
||||
|
||||
<!-- Checkout / Free Trial Modal -->
|
||||
<div id="keyModal" class="hidden fixed inset-0 bg-black/75 backdrop-blur-sm z-50 flex items-center justify-center p-4">
|
||||
<div class="bg-slate-900 border border-slate-700 rounded-2xl max-w-md w-full p-6 space-y-4">
|
||||
<!-- 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">
|
||||
<h4 id="modalTitle" class="font-bold text-base">⚡ Мгновенное получение VPN-ключа</h4>
|
||||
<button onclick="document.getElementById('keyModal').classList.add('hidden')" class="text-slate-400 hover:text-white">✕</button>
|
||||
<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>
|
||||
<p class="text-xs text-slate-300">Ваш сгенерированный VLESS Reality ключ готов к импорту в Hiddify / Streisand / v2rayNG / Amnezia:</p>
|
||||
<div class="bg-slate-950 border border-slate-800 rounded-xl p-3 font-mono text-[11px] text-emerald-400 break-all">
|
||||
vless://9a8f2c1e-4b3d-4e9a-8c1a-vo2026@nl4.vo-office.com:443?security=reality&sni=www.microsoft.com&fp=chrome&pbk=VoPublicKey2026&type=tcp#Катюша_VPN_
|
||||
|
||||
<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>
|
||||
<button onclick="document.getElementById('keyModal').classList.add('hidden')" class="w-full py-2.5 rounded-xl bg-emerald-500 text-slate-950 font-bold text-xs">Готово</button>
|
||||
|
||||
<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 openCheckout(plan) {
|
||||
document.getElementById('modalTitle').innerText = 'Оформление: ' + plan;
|
||||
document.getElementById('keyModal').classList.remove('hidden');
|
||||
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>
|
||||
|
||||
@ -3,210 +3,695 @@
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Катюша VPN — Быстрый VPN нового поколения (VLESS / WireGuard)</title>
|
||||
<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="bg-slate-950 text-slate-100 min-h-screen font-sans selection:bg-indigo-500 selection:text-white">
|
||||
<!-- Navbar -->
|
||||
<header class="border-b border-slate-800/80 bg-slate-950/80 backdrop-blur sticky top-0 z-30">
|
||||
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-9 h-9 rounded-xl bg-gradient-to-br from-emerald-400 to-indigo-600 flex items-center justify-center font-black text-slate-950">V</div>
|
||||
<div>
|
||||
<span class="font-bold text-lg tracking-tight">Катюша VPN </span>
|
||||
<span class="ml-2 text-[11px] px-2 py-0.5 rounded-full bg-emerald-500/20 text-emerald-300 border border-emerald-500/30">10 Gbps • No-Logs</span>
|
||||
<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>
|
||||
<nav class="hidden md:flex items-center gap-6 text-sm text-slate-300">
|
||||
<a href="#features" class="hover:text-white">Преимущества</a>
|
||||
<a href="#servers" class="hover:text-white">Локации (42 страны)</a>
|
||||
<a href="#pricing" class="hover:text-white">Тарифы</a>
|
||||
<a href="#references" class="hover:text-indigo-400 text-xs text-slate-400">🔍 Референсы PM</a>
|
||||
<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">
|
||||
<a href="/" class="text-xs text-slate-400 hover:text-white">← В Офис</a>
|
||||
<a href="#pricing" class="px-4 py-2 rounded-xl bg-emerald-500 hover:bg-emerald-400 text-slate-950 font-bold text-xs transition">Подключить за 30 сек</a>
|
||||
<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-6xl mx-auto px-6 py-12 space-y-20">
|
||||
<!-- Hero Section -->
|
||||
<section class="grid grid-cols-1 lg:grid-cols-12 gap-10 items-center">
|
||||
<div class="lg:col-span-7 space-y-6">
|
||||
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-indigo-500/15 border border-indigo-500/30 text-indigo-300 text-xs">
|
||||
<span>🛡 Протоколы Xray VLESS Reality + WireGuard</span>
|
||||
<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>
|
||||
<h1 class="text-4xl md:text-5xl font-extrabold tracking-tight leading-tight">
|
||||
Свободный интернет на скорости <span class="text-transparent bg-clip-text bg-gradient-to-r from-emerald-400 to-indigo-400">до 10 Гбит/с</span> без блокировок
|
||||
</h1>
|
||||
<p class="text-slate-300 text-base leading-relaxed max-w-2xl">
|
||||
Хочу точно такой же с классным дизайном, чтобы цепляло внимание. Дизайн код базируется на Катюше, сексопильной девушке, которая стреляет по РКН, как будто пробивает стены. Тарифы такие же . Работает в любых сетях, поддерживает YouTube 4K без рекламы, Netflix, ChatGPT и мгновенную выдачу ключа в Telegram или приложении.
|
||||
|
||||
<!-- 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 class="flex flex-wrap gap-4 pt-2">
|
||||
<a href="#pricing" class="px-6 py-3.5 rounded-xl bg-emerald-500 hover:bg-emerald-400 text-slate-950 font-bold text-sm shadow-lg shadow-emerald-500/20 transition">
|
||||
🚀 Получить доступ (от 199 ₽/мес)
|
||||
</a>
|
||||
<button onclick="document.getElementById('keyModal').classList.remove('hidden')" class="px-6 py-3.5 rounded-xl bg-slate-900 hover:bg-slate-800 border border-slate-700 text-slate-100 font-semibold text-sm transition">
|
||||
⚡ Тестовый ключ на 24 часа
|
||||
</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>
|
||||
<div class="grid grid-cols-3 gap-4 pt-4 border-t border-slate-800/80 text-xs text-slate-400">
|
||||
<div><b class="text-white text-base block">42 страны</b>Европа, США, Азия</div>
|
||||
<div><b class="text-white text-base block">5 устройств</b>По одной подписке</div>
|
||||
<div><b class="text-white text-base block">0 логов</b>Независимый аудит</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Interactive Connection Widget (Inspired by Proton & Mullvad References) -->
|
||||
<div class="lg:col-span-5 bg-slate-900/90 border border-slate-800 rounded-2xl p-6 shadow-2xl space-y-5">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-xs uppercase tracking-wider text-slate-400 font-semibold">Статус туннеля</span>
|
||||
<span id="connBadge" class="px-2.5 py-0.5 rounded-full text-xs bg-emerald-500/20 text-emerald-300 border border-emerald-500/30">🟢 Защищено • VLESS Reality</span>
|
||||
</div>
|
||||
<div class="bg-slate-950 border border-slate-800 rounded-xl p-4 flex items-center justify-between">
|
||||
<div>
|
||||
<div class="text-xs text-slate-400">Текущая локация</div>
|
||||
<div id="locName" class="font-bold text-base mt-0.5">🇳🇱 Нидерланды, Амстердам #4</div>
|
||||
<div class="text-xs text-emerald-400 mt-0.5">Пинг: 18 мс • Нагрузка: 14%</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>
|
||||
<select onchange="document.getElementById('locName').innerText=this.value" class="bg-slate-900 border border-slate-700 rounded-lg px-2.5 py-1.5 text-xs">
|
||||
<option value="🇳🇱 Нидерланды, Амстердам #4">🇳🇱 Амстердам (18 мс)</option>
|
||||
<option value="🇩🇪 Германия, Франкфурт #2">🇩🇪 Франкфурт (21 мс)</option>
|
||||
<option value="🇫🇮 Финляндия, Хельсинки #1">🇫🇮 Хельсинки (12 мс)</option>
|
||||
<option value="🇺🇸 США, Нью-Йорк #8">🇺🇸 Нью-Йорк (84 мс)</option>
|
||||
<option value="🇹🇷 Турция, Стамбул #3">🇹🇷 Стамбул (34 мс)</option>
|
||||
</select>
|
||||
<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>
|
||||
<div class="grid grid-cols-2 gap-3 text-xs">
|
||||
<div class="bg-slate-950 border border-slate-800 rounded-xl p-3">
|
||||
<span class="text-slate-400">Download</span>
|
||||
<div class="text-lg font-bold text-emerald-400 mt-0.5">842 Мбит/с</div>
|
||||
</div>
|
||||
<div class="bg-slate-950 border border-slate-800 rounded-xl p-3">
|
||||
<span class="text-slate-400">Upload</span>
|
||||
<div class="text-lg font-bold text-indigo-400 mt-0.5">690 Мбит/с</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>
|
||||
<div class="text-[11px] text-slate-400 flex items-center justify-between pt-1">
|
||||
<span>Платформы: iOS • Android • macOS • Windows • SmartTV</span>
|
||||
<span class="text-emerald-400 font-mono">AES-256-GCM</span>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- Pricing Section -->
|
||||
<section id="pricing" class="space-y-8">
|
||||
<div class="text-center max-w-2xl mx-auto space-y-2">
|
||||
<h2 class="text-3xl font-extrabold">Прозрачные тарифы без скрытых списаний</h2>
|
||||
<p class="text-slate-400 text-sm">Мгновенная выдача конфигурации сразу после оплаты (СБП, карты РФ/Мир, USDT/TON).</p>
|
||||
<!-- 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>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<!-- 1 Month -->
|
||||
<div class="bg-slate-900/80 border border-slate-800 rounded-2xl p-6 flex flex-col justify-between">
|
||||
<div>
|
||||
<div class="text-sm font-semibold text-slate-300">На 1 месяц</div>
|
||||
<div class="text-3xl font-extrabold mt-2">349 ₽ <span class="text-sm font-normal text-slate-400">/ мес</span></div>
|
||||
<ul class="mt-6 space-y-2.5 text-xs text-slate-300">
|
||||
<li>✅ До 5 устройств одновременно</li>
|
||||
<li>✅ Все 42 страны (10 Gbps)</li>
|
||||
<li>✅ Протоколы VLESS Reality + WireGuard</li>
|
||||
<li>✅ YouTube 4K без рекламы</li>
|
||||
</ul>
|
||||
|
||||
<!-- 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="openCheckout('1 месяц — 349 ₽')" class="mt-8 w-full py-3 rounded-xl bg-slate-800 hover:bg-slate-700 font-bold text-xs transition">Выбрать 1 месяц</button>
|
||||
<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>
|
||||
|
||||
<!-- 1 Year (Best Value) -->
|
||||
<div class="bg-gradient-to-b from-indigo-950/80 to-slate-900 border-2 border-emerald-500 rounded-2xl p-6 flex flex-col justify-between relative shadow-xl">
|
||||
<span class="absolute -top-3 right-6 px-3 py-0.5 rounded-full bg-emerald-500 text-slate-950 font-bold text-[11px]">ХИТ • ВЫГОДА 45%</span>
|
||||
<div>
|
||||
<div class="text-sm font-semibold text-emerald-300">На 1 год</div>
|
||||
<div class="text-3xl font-extrabold mt-2">199 ₽ <span class="text-sm font-normal text-slate-400">/ мес</span></div>
|
||||
<div class="text-xs text-slate-400 mt-1">2 388 ₽ при оплате за год</div>
|
||||
<ul class="mt-6 space-y-2.5 text-xs text-slate-200">
|
||||
<li>✅ До 10 устройств + роутер</li>
|
||||
<li>✅ Выделенные стриминг-серверы (Netflix, AI)</li>
|
||||
<li>✅ Авто-обход DPI провайдеров (Stealth)</li>
|
||||
<li>✅ Приоритетная поддержка в Telegram 24/7</li>
|
||||
</ul>
|
||||
<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>
|
||||
<button onclick="openCheckout('1 год — 2 388 ₽ (199 ₽/мес)')" class="mt-8 w-full py-3 rounded-xl bg-emerald-500 hover:bg-emerald-400 text-slate-950 font-bold text-xs transition">Подключить со скидкой 45%</button>
|
||||
</div>
|
||||
|
||||
<!-- 6 Months -->
|
||||
<div class="bg-slate-900/80 border border-slate-800 rounded-2xl p-6 flex flex-col justify-between">
|
||||
<div>
|
||||
<div class="text-sm font-semibold text-slate-300">На 6 месяцев</div>
|
||||
<div class="text-3xl font-extrabold mt-2">249 ₽ <span class="text-sm font-normal text-slate-400">/ мес</span></div>
|
||||
<div class="text-xs text-slate-400 mt-1">1 494 ₽ за полгода</div>
|
||||
<ul class="mt-6 space-y-2.5 text-xs text-slate-300">
|
||||
<li>✅ До 5 устройств одновременно</li>
|
||||
<li>✅ Все 42 страны (10 Gbps)</li>
|
||||
<li>✅ Защита от утечек WebRTC и DNS</li>
|
||||
<li>✅ Гарантия возврата 30 дней</li>
|
||||
</ul>
|
||||
<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>
|
||||
<button onclick="openCheckout('6 месяцев — 1 494 ₽')" class="mt-8 w-full py-3 rounded-xl bg-slate-800 hover:bg-slate-700 font-bold text-xs transition">Выбрать 6 месяцев</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Web References Analyzed by PM -->
|
||||
<section id="references" class="pt-8 border-t border-slate-800/80 space-y-4">
|
||||
<!-- SECTION 5: ЧАСТЫЕ ВОПРОСЫ (9 GorillaVPN FAQ Items) -->
|
||||
<section id="faq" class="space-y-6">
|
||||
<div>
|
||||
<h3 class="text-sm font-bold text-indigo-300">🔍 Сайты-референсы из интернета, на базе которых PM и UX/UI собрали этот проект:</h3>
|
||||
<p class="text-xs text-slate-400">Автоматическое исследование конкурентов (`contracts/WEB_REFERENCES.md`)</p>
|
||||
<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-slate-900/90 hover:bg-slate-800/80 border border-slate-800 rounded-xl p-4 transition">
|
||||
<div class="text-xs font-semibold text-indigo-400 truncate">🎯 Ваш референс-образец: Gorilla</div>
|
||||
<div class="text-[11px] text-slate-500 truncate mt-0.5">https://gorillavpn.pro/</div>
|
||||
<p class="text-xs text-slate-300 mt-2">Проанализирована структура первого экрана, навигации, карточек преимуществ и блока тарифов.</p>
|
||||
<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-slate-900/90 hover:bg-slate-800/80 border border-slate-800 rounded-xl p-4 transition">
|
||||
<div class="text-xs font-semibold text-indigo-400 truncate">Mullvad VPN — Эталон минимализма, прозрачности и оплаты в 1 клик (вкл. крипто)</div>
|
||||
<div class="text-[11px] text-slate-500 truncate mt-0.5">https://mullvad.net/en</div>
|
||||
<p class="text-xs text-slate-300 mt-2">Ключевые паттерны: генерация аккаунта без email, мгновенный выбор протокола WireGuard/Shadowsocks, честная цена, нулевое логирование.</p>
|
||||
<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-slate-900/90 hover:bg-slate-800/80 border border-slate-800 rounded-xl p-4 transition">
|
||||
<div class="text-xs font-semibold text-indigo-400 truncate">Proton VPN — Премиальный тёмный UI с интерактивной картой серверов и сравнением скоростей</div>
|
||||
<div class="text-[11px] text-slate-500 truncate mt-0.5">https://protonvpn.com</div>
|
||||
<p class="text-xs text-slate-300 mt-2">Ключевые паттерны: переключатель тарифов (1 мес / 1 год / 2 года со скидкой 60%), таблица скорости 10 Gbps, бейджи стриминга (Netflix/YouTube 4K).</p>
|
||||
<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-slate-900/90 hover:bg-slate-800/80 border border-slate-800 rounded-xl p-4 transition">
|
||||
<div class="text-xs font-semibold text-indigo-400 truncate">Amnezia / Outline VPN — Фокус на обход блокировок (VLESS / Xray Reality) и приложения под все ОС</div>
|
||||
<div class="text-[11px] text-slate-500 truncate mt-0.5">https://amnezia.org</div>
|
||||
<p class="text-xs text-slate-300 mt-2">Ключевые паттерны: кнопки быстрого скачивания (iOS, Android, macOS, Windows, роутеры), выдача ключа для Telegram-бота в 1 клик.</p>
|
||||
<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>
|
||||
|
||||
<!-- Checkout / Free Trial Modal -->
|
||||
<div id="keyModal" class="hidden fixed inset-0 bg-black/75 backdrop-blur-sm z-50 flex items-center justify-center p-4">
|
||||
<div class="bg-slate-900 border border-slate-700 rounded-2xl max-w-md w-full p-6 space-y-4">
|
||||
<!-- 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">
|
||||
<h4 id="modalTitle" class="font-bold text-base">⚡ Мгновенное получение VPN-ключа</h4>
|
||||
<button onclick="document.getElementById('keyModal').classList.add('hidden')" class="text-slate-400 hover:text-white">✕</button>
|
||||
<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>
|
||||
<p class="text-xs text-slate-300">Ваш сгенерированный VLESS Reality ключ готов к импорту в Hiddify / Streisand / v2rayNG / Amnezia:</p>
|
||||
<div class="bg-slate-950 border border-slate-800 rounded-xl p-3 font-mono text-[11px] text-emerald-400 break-all">
|
||||
vless://9a8f2c1e-4b3d-4e9a-8c1a-vo2026@nl4.vo-office.com:443?security=reality&sni=www.microsoft.com&fp=chrome&pbk=VoPublicKey2026&type=tcp#Катюша_VPN_
|
||||
|
||||
<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>
|
||||
<button onclick="document.getElementById('keyModal').classList.add('hidden')" class="w-full py-2.5 rounded-xl bg-emerald-500 text-slate-950 font-bold text-xs">Готово</button>
|
||||
|
||||
<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 openCheckout(plan) {
|
||||
document.getElementById('modalTitle').innerText = 'Оформление: ' + plan;
|
||||
document.getElementById('keyModal').classList.remove('hidden');
|
||||
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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user