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