vo-office/vpn-7561
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: vo-office:06c53f64f34d3bbdc96309523becaf79e4c5653b
Branches Tags
vo-office:dev
vo-office:main
...
compare: vo-office:872fcb8854887238ae0794b5bbd3e619c6b1bd2f
Branches Tags
vo-office:main
vo-office:dev

3 Commits
06c53f64f3 ... 872fcb8854

Author SHA1 Message Date
Hermes Virtual Office Bot
872fcb8854 release(prod): 🚀 Rollout approved by founder for Катюша VPN 2026-10-21 13:36:02 +00:00
Hermes Virtual Office Bot
169fe78af9 feat(FEAT-09): Реферальная программа «Приведи друга — получи +14 дней VPN» [DEV staging] 2026-10-21 13:30:43 +00:00
Hermes Virtual Office Bot
7e67210b44 feat(assets): add Katyusha circular logo.jpg and RKN wall-breaker hero.jpg 2026-10-21 13:07:50 +00:00
6 changed files with 600 additions and 474 deletions
Show Stats Expand all files Collapse all files

7
REPO_MAP.md
View File

@ -8,5 +8,8 @@
| `contracts/PRD.md` | 9 ✅ | contract | | `contracts/PRD.md` | 9 ✅ | contract |
| `contracts/WEB_REFERENCES.md` | 20 ✅ | contract | | `contracts/WEB_REFERENCES.md` | 20 ✅ | contract |
| `backend/app/modules/core/router.py` | 2 ✅ | backend-module | | `backend/app/modules/core/router.py` | 2 ✅ | backend-module |
| `frontend/src/features/PreviewApp.html` | 213 ⚠️ OVER 200L | frontend-fsd | | `frontend/src/features/FEAT-09.tsx` | 5 ✅ | frontend-fsd |
| `frontend/src/features/PreviewDev.html` | 213 ⚠️ OVER 200L | frontend-fsd | | `frontend/src/features/PreviewApp.html` | 745 ⚠️ OVER 200L | frontend-fsd |
| `frontend/src/features/PreviewDev.html` | 745 ⚠️ OVER 200L | frontend-fsd |
| `frontend/assets/hero.jpg` | 5055 ⚠️ OVER 200L | frontend-fsd |
| `frontend/assets/logo.jpg` | 3841 ⚠️ OVER 200L | frontend-fsd |

BIN
frontend/assets/hero.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 832 KiB

BIN
frontend/assets/logo.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 684 KiB

5
frontend/src/features/FEAT-09.tsx Normal file
View File

@ -0,0 +1,5 @@
// Modular Feature FEAT-09: Реферальная программа «Приведи друга — получи +14 дней VPN»
// Path: features/referral-bonus (< 200 lines enforced)
export function FEAT_09Widget() {
return <div className='p-4 rounded-xl bg-slate-900 border border-emerald-500/30'>Реферальная программа «Приведи друга — получи +14 дней VPN»</div>;
}

529
frontend/src/features/PreviewApp.html
View File

@ -13,86 +13,133 @@
--bg-deep: #04100b; --bg-deep: #04100b;
--bg-card: #081d14; --bg-card: #081d14;
--bg-card-hover: #0d2b1e; --bg-card-hover: #0d2b1e;
--mint: #4ade80; --accent: #4ade80;
--mint-bright: #22c55e; --accent-bright: #86efac;
--accent-rgb: 74, 222, 128;
--text-main: #ecfdf5;
} }
body { body {
font-family: 'Manrope', sans-serif; font-family: 'Manrope', sans-serif;
background-color: var(--bg-deep); background-color: var(--bg-deep);
color: #ecfdf5; color: var(--text-main);
background-image: background-image:
radial-gradient(circle at 75% 22%, rgba(34, 197, 94, 0.14) 0%, transparent 45%), radial-gradient(circle at 75% 22%, rgba(var(--accent-rgb), 0.16) 0%, transparent 45%),
radial-gradient(circle at 20% 60%, rgba(16, 185, 129, 0.10) 0%, transparent 50%), radial-gradient(circle at 20% 60%, rgba(var(--accent-rgb), 0.11) 0%, transparent 50%),
linear-gradient(rgba(52, 211, 153, 0.03) 1px, transparent 1px), linear-gradient(rgba(var(--accent-rgb), 0.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(52, 211, 153, 0.03) 1px, transparent 1px); linear-gradient(90deg, rgba(var(--accent-rgb), 0.035) 1px, transparent 1px);
background-size: 100% 100%, 100% 100%, 48px 48px, 48px 48px; background-size: 100% 100%, 100% 100%, 48px 48px, 48px 48px;
transition: background-color 0.35s ease, color 0.35s ease;
} }
.font-unbounded { .font-unbounded {
font-family: 'Unbounded', sans-serif; font-family: 'Unbounded', sans-serif;
} }
/* GorillaVPN signature chamfered corners */ .accent-text {
color: var(--accent);
}
.accent-bg {
background-color: var(--accent);
color: var(--bg-deep);
}
.accent-border {
border-color: rgba(var(--accent-rgb), 0.32);
}
.gorilla-subcard {
background-color: var(--bg-card);
border: 1px solid rgba(var(--accent-rgb), 0.24);
}
/* GorillaVPN signature chamfered corners with dynamic palette variables */
.gorilla-card { .gorilla-card {
background: linear-gradient(165deg, rgba(11, 37, 26, 0.92) 0%, rgba(5, 19, 13, 0.96) 100%); background: linear-gradient(165deg, var(--bg-card) 0%, var(--bg-deep) 100%);
border: 1px solid rgba(74, 222, 128, 0.22); border: 1px solid rgba(var(--accent-rgb), 0.28);
clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 26px 100%, 0 calc(100% - 26px)); 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); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(var(--accent-rgb), 0.18);
transition: border-color 0.3s ease, background 0.3s ease;
} }
.gorilla-btn { .gorilla-btn {
background: linear-gradient(90deg, #4ade80 0%, #86efac 100%); background: linear-gradient(90deg, var(--accent) 0%, var(--accent-bright) 100%);
color: #03150c; color: #050a07;
font-weight: 800; font-weight: 800;
transition: all 0.2s ease; transition: all 0.2s ease;
box-shadow: 0 0 28px rgba(74, 222, 128, 0.35); box-shadow: 0 0 28px rgba(var(--accent-rgb), 0.38);
} }
.gorilla-btn:hover { .gorilla-btn:hover {
transform: translateY(-1px); transform: translateY(-1px);
box-shadow: 0 0 38px rgba(74, 222, 128, 0.6); box-shadow: 0 0 38px rgba(var(--accent-rgb), 0.65);
filter: brightness(1.05); filter: brightness(1.06);
} }
@keyframes radarSweep { @keyframes radarSweep {
from { transform: rotate(0deg); } from { transform: rotate(0deg); }
to { transform: rotate(360deg); } to { transform: rotate(360deg); }
} }
.radar-sweep { .radar-sweep {
background: conic-gradient(from 0deg, rgba(74, 222, 128, 0.38) 0deg, rgba(74, 222, 128, 0.0) 90deg, transparent 360deg); background: conic-gradient(from 0deg, rgba(var(--accent-rgb), 0.40) 0deg, rgba(var(--accent-rgb), 0.0) 90deg, transparent 360deg);
animation: radarSweep 5s linear infinite; animation: radarSweep 5s linear infinite;
} }
@keyframes pulseGlow { @keyframes pulseGlow {
0%, 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6); } 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.6); }
50% { box-shadow: 0 0 0 10px rgba(74, 222, 128, 0); } 50% { box-shadow: 0 0 0 10px rgba(var(--accent-rgb), 0); }
} }
.node-pulse { .node-pulse {
animation: pulseGlow 2.2s infinite; animation: pulseGlow 2.2s infinite;
} }
</style> </style>
</head> </head>
<body class="min-h-screen selection:bg-emerald-400 selection:text-slate-950"> <body class="min-h-screen">
<!-- Top Navbar (GorillaVPN Pill Header Style + Custom Circular Katyusha Emblem Logo) --> <!-- Top Navbar (GorillaVPN Pill Header + Custom Circular Emblem Logo + Live Palette Switcher) -->
<header class="sticky top-0 z-40 px-4 pt-3"> <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"> <div class="max-w-7xl mx-auto gorilla-subcard backdrop-blur-xl rounded-2xl px-5 py-3 flex flex-wrap items-center justify-between gap-4 shadow-2xl">
<a href="#" class="flex items-center gap-3.5 group"> <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"> <div class="relative w-12 h-12 rounded-full p-0.5 accent-bg shadow-lg">
<img src="/assets/vpn-7561/logo.jpg" alt="Катюша VPN Logo" class="w-full h-full object-cover rounded-full bg-[#04100b]" onerror="this.style.display='none'" /> <img src="/assets/vpn-7561/logo.jpg" alt="Катюша VPN Logo" class="w-full h-full object-cover rounded-full bg-black" onerror="this.style.display='none'" />
<span class="absolute -bottom-0.5 -right-0.5 w-3.5 h-3.5 rounded-full bg-emerald-400 border-2 border-[#04100b]"></span> <span class="absolute -bottom-0.5 -right-0.5 w-3.5 h-3.5 rounded-full accent-bg border-2 border-black"></span>
</div> </div>
<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="font-unbounded font-extrabold text-base md:text-lg tracking-wider uppercase text-white transition">Катюша VPN</span>
<span class="block text-[10px] uppercase tracking-widest text-emerald-400/90 font-semibold">Пробиваем любые стены · VLESS Reality</span> <span class="block text-[10px] uppercase tracking-widest accent-text font-semibold">Персонаж и гамма по промпту · VLESS Reality</span>
</div> </div>
</a> </a>
<nav class="hidden lg:flex items-center gap-7 text-sm font-medium text-emerald-100/80"> <nav class="hidden xl:flex items-center gap-6 text-sm font-medium opacity-85">
<a href="#how-it-works" class="hover:text-emerald-300 transition">Как подключить</a> <a href="#how-it-works" class="hover:opacity-100 transition">Как подключить</a>
<a href="#art-showcase" class="hover:text-emerald-300 transition">Катюша в деле</a> <a href="#art-showcase" class="hover:opacity-100 transition">Дизайн-код и Персонаж</a>
<a href="#tariffs" class="hover:text-emerald-300 transition">Тарифы</a> <a href="#tariffs" class="hover:opacity-100 transition">Тарифы</a>
<a href="#cabinet" class="hover:text-emerald-300 transition">Кабинет</a> <a href="#cabinet" class="hover:opacity-100 transition">Кабинет</a>
<a href="#faq" class="hover:text-emerald-300 transition">FAQ</a> <a href="#faq" class="hover:opacity-100 transition">FAQ</a>
</nav> </nav>
<div class="flex items-center gap-3"> <div class="flex flex-wrap 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"> <!-- Live Color Scheme Switcher (Reflects Prompt Palette + Allows Instant Preview) -->
🔑 Личный кабинет <div class="flex items-center gap-1.5 px-3 py-1.5 rounded-xl bg-black/40 border accent-border" title="Палитра из промпта (можно переключать на лету)">
<span class="text-[10px] uppercase tracking-wider opacity-70 mr-1 hidden sm:inline">🎨 Гамма:</span>
<button type="button" onclick="applyThemePalette('crimson')" id="pal-btn-crimson" title="Цветовая гамма: Алый Огонь (Crimson Neon)"
style="background:#f43f5e;"
class="w-5 h-5 rounded-full transition transform opacity-75 hover:opacity-100 shadow-md"></button>
<button type="button" onclick="applyThemePalette('violet')" id="pal-btn-violet" title="Цветовая гамма: Кибер-Фиолет (Cyber Violet)"
style="background:#a855f7;"
class="w-5 h-5 rounded-full transition transform opacity-75 hover:opacity-100 shadow-md"></button>
<button type="button" onclick="applyThemePalette('cyan')" id="pal-btn-cyan" title="Цветовая гамма: Ледяной Неон (Arctic Cyan)"
style="background:#38bdf8;"
class="w-5 h-5 rounded-full transition transform opacity-75 hover:opacity-100 shadow-md"></button>
<button type="button" onclick="applyThemePalette('amber')" id="pal-btn-amber" title="Цветовая гамма: Кибер-Золото (Gold Amber)"
style="background:#f59e0b;"
class="w-5 h-5 rounded-full transition transform opacity-75 hover:opacity-100 shadow-md"></button>
<button type="button" onclick="applyThemePalette('pink')" id="pal-btn-pink" title="Цветовая гамма: Неоновая Фуксия (Hot Pink)"
style="background:#ec4899;"
class="w-5 h-5 rounded-full transition transform opacity-75 hover:opacity-100 shadow-md"></button>
<button type="button" onclick="applyThemePalette('emerald')" id="pal-btn-emerald" title="Цветовая гамма: Изумрудный Радар (Gorilla Emerald)"
style="background:#4ade80;"
class="w-5 h-5 rounded-full transition transform ring-2 ring-white scale-110 shadow-md"></button>
</div>
<button onclick="openCabinetModal()" class="hidden sm:inline-flex items-center gap-2 px-3.5 py-2 rounded-xl gorilla-subcard hover:brightness-125 text-xs font-bold transition">
🔑 Кабинет
</button> </button>
<a href="#tariffs" class="gorilla-btn px-5 py-2.5 rounded-xl text-xs sm:text-sm tracking-tight"> <a href="#tariffs" class="gorilla-btn px-5 py-2.5 rounded-xl text-xs sm:text-sm tracking-tight">
Подключить → Подключить →
@ -103,22 +150,22 @@
<main class="max-w-7xl mx-auto px-4 sm:px-6 pt-10 pb-24 space-y-28"> <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) --> <!-- HERO SECTION -->
<section class="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-10 items-stretch"> <section class="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-10 items-stretch">
<!-- Left Column (7 cols) --> <!-- Left Column (7 cols) -->
<div class="lg:col-span-7 flex flex-col justify-between space-y-6"> <div class="lg:col-span-7 flex flex-col justify-between space-y-6">
<div class="space-y-5"> <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"> <div class="inline-flex items-center gap-2.5 px-3.5 py-1.5 rounded-full gorilla-subcard accent-text text-[11px] font-bold tracking-wider uppercase">
<span class="w-2 h-2 rounded-full bg-emerald-400 animate-ping"></span> <span class="w-2 h-2 rounded-full accent-bg animate-ping"></span>
УСТАНОВКА ЗА 3 МИНУТЫ · ПРОБНЫЙ ДОСТУП 48 ЧАСОВ УСТАНОВКА ЗА 3 МИНУТЫ · ПРОБНЫЙ ДОСТУП 48 ЧАСОВ
</div> </div>
<h1 class="font-unbounded font-black text-3xl sm:text-5xl xl:text-[52px] leading-[1.08] tracking-tight uppercase text-white"> <h1 class="font-unbounded font-black text-3xl sm:text-5xl xl:text-[50px] 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> БЛОКИРОВОК Катюша VPN: <span class="accent-text">ПРОБИВАЕМ СТЕНЫ</span> БЛОКИРОВОК
</h1> </h1>
<p class="text-emerald-100/80 text-base sm:text-lg leading-relaxed max-w-2xl"> <p class="opacity-85 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 летают на полной скорости. Хочу точно такой же с классным дизайном, чтобы цепляло внимание. Дизайн код базируется на Катюше, сексопильной девушке, которая стреляет по РКН, как будто пробивает стены. Тарифы такие же. Протокол <b class="accent-text">Xray VLESS Reality</b> сносит любые фаерволы и замедления — подключите телефон, ноутбук и телевизор за пару минут.
</p> </p>
<div class="flex flex-wrap items-center gap-4 pt-1"> <div class="flex flex-wrap items-center gap-4 pt-1">
@ -126,23 +173,23 @@
<span>Получить 2 дня за 0 ₽</span> <span>Получить 2 дня за 0 ₽</span>
<span class="text-lg">→</span> <span class="text-lg">→</span>
</button> </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"> <a href="#tariffs" class="px-6 py-4 rounded-xl gorilla-subcard hover:brightness-125 font-bold text-sm sm:text-base transition">
Выбрать тариф (от 191 ₽/мес) Выбрать тариф (от 191 ₽/мес)
</a> </a>
</div> </div>
</div> </div>
<!-- Katyusha Hero Artwork Card (Custom Generated Art: Katyusha Firing Laser Cannon Through RKN Wall) --> <!-- Character & Visual Code Showcase Card -->
<div id="art-showcase" class="gorilla-card p-3 sm:p-4 relative overflow-hidden group"> <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]"> <div class="relative rounded-xl overflow-hidden border accent-border aspect-[16/9] bg-black/60">
<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" /> <img src="/assets/vpn-7561/hero.jpg" alt="Катюша VPN Character Artwork" class="w-full h-full object-cover object-center group-hover:scale-[1.02] transition duration-500" />
<div class="absolute inset-0 bg-gradient-to-t from-[#030d08] via-transparent to-transparent opacity-80"></div> <div class="absolute inset-0 bg-gradient-to-t from-black/90 via-transparent to-transparent opacity-85"></div>
<div class="absolute bottom-3 left-3 right-3 flex flex-wrap items-end justify-between gap-2"> <div class="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="bg-black/80 backdrop-blur-md border accent-border rounded-xl px-3.5 py-2 max-w-xl">
<div class="text-[10px] uppercase tracking-widest text-emerald-400 font-bold">🔥 Фирменный дизайн-код · Катюша против блокировок</div> <div class="text-[10px] uppercase tracking-widest accent-text font-bold">🔥 Персонаж и цветовая гамма по вашему промпту (<span id="activePaletteLabel">Изумрудный Радар (Gorilla Emerald)</span>)</div>
<div class="text-xs sm:text-sm font-bold text-white">Прямой плазменный пробой DPI и стен цензуры без потери скорости</div> <div class="text-xs sm:text-sm font-bold text-white line-clamp-2">Хочу точно такой же с классным дизайном, чтобы цепляло внимание. Дизайн код базируется на Катюше, сексопильной девушке, которая стреляет по РКН, как будто пробивает стены. Тарифы такие же</div>
</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"> <span class="px-3 py-1.5 rounded-lg accent-bg font-unbounded font-extrabold text-xs uppercase shadow-lg">
10 Гбит/с · 0 логов 10 Гбит/с · 0 логов
</span> </span>
</div> </div>
@ -150,83 +197,81 @@
</div> </div>
</div> </div>
<!-- Right Column (5 cols): Authentic GorillaVPN Chamfered Trial Card + Interactive 6-Country Radar --> <!-- Right Column (5 cols): GorillaVPN Chamfered Trial Card + Interactive 6-Country Radar -->
<div class="lg:col-span-5 flex"> <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="gorilla-card w-full p-6 sm:p-7 flex flex-col justify-between space-y-6">
<div class="space-y-4"> <div class="space-y-4">
<div class="flex items-start justify-between gap-3"> <div class="flex items-start justify-between gap-3">
<div> <div>
<div class="text-[11px] uppercase tracking-widest text-emerald-400/80 font-bold">ПРОБНЫЙ ДОСТУП</div> <div class="text-[11px] uppercase tracking-widest accent-text font-bold">ПРОБНЫЙ ДОСТУП</div>
<h2 class="font-unbounded font-extrabold text-xl sm:text-2xl text-white mt-0.5">Katyusha Trial · 2 дня</h2> <h2 class="font-unbounded font-extrabold text-xl sm:text-2xl text-white mt-0.5">Катюша VPN Trial · 2 дня</h2>
</div> </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 class="px-3 py-1 rounded-full gorilla-subcard accent-text text-xs font-bold whitespace-nowrap">
● Активен ● Активен
</span> </span>
</div> </div>
<!-- 3 GorillaVPN Stat Boxes --> <!-- 3 GorillaVPN Stat Boxes -->
<div class="grid grid-cols-3 gap-2.5"> <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="bg-black/45 border accent-border rounded-xl p-3">
<div class="text-[11px] text-emerald-200/60">Срок</div> <div class="text-[11px] opacity-60">Срок</div>
<div class="font-unbounded font-bold text-sm sm:text-base text-white mt-0.5">48 часов</div> <div class="font-unbounded font-bold text-sm sm:text-base text-white mt-0.5">48 часов</div>
</div> </div>
<div class="bg-[#04120c]/90 border border-emerald-500/25 rounded-xl p-3"> <div class="bg-black/45 border accent-border rounded-xl p-3">
<div class="text-[11px] text-emerald-200/60">Устройства</div> <div class="text-[11px] opacity-60">Устройства</div>
<div class="font-unbounded font-bold text-sm sm:text-base text-white mt-0.5">5</div> <div class="font-unbounded font-bold text-sm sm:text-base text-white mt-0.5">5</div>
</div> </div>
<div class="bg-[#04120c]/90 border border-emerald-500/25 rounded-xl p-3"> <div class="bg-black/45 border accent-border rounded-xl p-3">
<div class="text-[11px] text-emerald-200/60">Трафик</div> <div class="text-[11px] opacity-60">Трафик</div>
<div class="font-unbounded font-bold text-sm sm:text-base text-emerald-400 mt-0.5">∞ ГБ</div> <div class="font-unbounded font-bold text-sm sm:text-base accent-text mt-0.5">∞ ГБ</div>
</div> </div>
</div> </div>
</div> </div>
<!-- Interactive Circular Radar (GorillaVPN Signature Element) --> <!-- Interactive Circular Radar -->
<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"> <div class="relative mx-auto w-64 h-64 sm:w-72 sm:h-72 rounded-full border accent-border bg-black/60 flex items-center justify-center overflow-hidden shadow-inner">
<!-- Rotating radar sweep -->
<div class="absolute inset-0 rounded-full radar-sweep pointer-events-none"></div> <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 accent-border opacity-50 pointer-events-none"></div>
<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 accent-border opacity-60 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 accent-bg opacity-15 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 accent-bg opacity-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 --> <!-- Center Character 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"> <div class="relative z-10 w-14 h-14 rounded-full p-0.5 accent-bg shadow-lg">
<img src="/assets/vpn-7561/logo.jpg" alt="Center Radar" class="w-full h-full rounded-full object-cover" /> <img src="/assets/vpn-7561/logo.jpg" alt="Center Radar" class="w-full h-full rounded-full object-cover" />
</div> </div>
<!-- Country Nodes on the Radar --> <!-- 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 onclick="selectRadarCountry('Нидерланды · Амстердам', '14 мс', '940 Мбит/с')" class="absolute top-5 left-10 z-20 px-2.5 py-1 rounded-full gorilla-subcard text-[11px] font-bold hover:brightness-125 transition node-pulse">
🇳🇱 Нидерланды 🇳🇱 Нидерланды
</button> </button>
<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 onclick="selectRadarCountry('Германия · Франкфурт', '18 мс', '910 Мбит/с')" class="absolute top-12 right-4 z-20 px-2.5 py-1 rounded-full gorilla-subcard text-[11px] font-bold hover:brightness-125 transition">
🇩🇪 Германия 🇩🇪 Германия
</button> </button>
<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 onclick="selectRadarCountry('Финляндия · Хельсинки', '11 мс', '980 Мбит/с')" class="absolute bottom-14 left-3 z-20 px-2.5 py-1 rounded-full gorilla-subcard text-[11px] font-bold hover:brightness-125 transition">
🇫🇮 Финляндия 🇫🇮 Финляндия
</button> </button>
<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 onclick="selectRadarCountry('Турция · Стамбул', '29 мс', '860 Мбит/с')" class="absolute bottom-6 right-8 z-20 px-2.5 py-1 rounded-full gorilla-subcard text-[11px] font-bold hover:brightness-125 transition">
🇹🇷 Турция 🇹🇷 Турция
</button> </button>
<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 onclick="selectRadarCountry('Польша · Варшава', '16 мс', '925 Мбит/с')" class="absolute top-1/2 -translate-y-1/2 left-2 z-20 px-2 py-0.5 rounded-full gorilla-subcard text-[10px] font-semibold hover:brightness-125 transition">
🇵🇱 Польша 🇵🇱 Польша
</button> </button>
<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 onclick="selectRadarCountry('Швеция · Стокгольм', '15 мс', '950 Мбит/с')" class="absolute top-1/2 -translate-y-1/2 right-2 z-20 px-2 py-0.5 rounded-full gorilla-subcard text-[10px] font-semibold hover:brightness-125 transition">
🇸🇪 Швеция 🇸🇪 Швеция
</button> </button>
</div> </div>
<!-- Selected Radar Node Status + CTA --> <!-- Selected Radar Node Status + CTA -->
<div class="space-y-3"> <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 class="bg-black/45 border accent-border rounded-xl px-4 py-2.5 flex items-center justify-between text-xs">
<div> <div>
<span class="text-emerald-200/60 block text-[10px] uppercase">Выбранный узел пробоя</span> <span class="opacity-60 block text-[10px] uppercase">Выбранный узел пробоя</span>
<b id="radarLoc" class="text-white font-bold">Нидерланды · Амстердам</b> <b id="radarLoc" class="text-white font-bold">Нидерланды · Амстердам</b>
</div> </div>
<div class="text-right"> <div class="text-right">
<span id="radarPing" class="text-emerald-400 font-mono font-bold block">Пинг: 14 мс</span> <span id="radarPing" class="accent-text font-mono font-bold block">Пинг: 14 мс</span>
<span id="radarSpeed" class="text-[11px] text-emerald-200/70">Канал: 940 Мбит/с</span> <span id="radarSpeed" class="text-[11px] opacity-75">Канал: 940 Мбит/с</span>
</div> </div>
</div> </div>
@ -239,148 +284,146 @@
</div> </div>
</section> </section>
<!-- SECTION 2: КАК ПОДКЛЮЧИТЬ — Установка за 3 минуты (Exact GorillaVPN Device Tabs + 4 Steps) --> <!-- SECTION 2: КАК ПОДКЛЮЧИТЬ — Установка за 3 минуты -->
<section id="how-it-works" class="space-y-8"> <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 class="flex flex-col md:flex-row md:items-end justify-between gap-4">
<div> <div>
<div class="text-xs uppercase tracking-widest text-emerald-400 font-bold">КАК ПОДКЛЮЧИТЬ</div> <div class="text-xs uppercase tracking-widest accent-text font-bold">КАК ПОДКЛЮЧИТЬ</div>
<h2 class="font-unbounded font-extrabold text-2xl sm:text-4xl text-white mt-1">Установка за 3 минуты</h2> <h2 class="font-unbounded font-extrabold text-2xl sm:text-4xl text-white mt-1">Установка за 3 минуты</h2>
</div> </div>
<p class="text-sm text-emerald-100/70 max-w-md"> <p class="text-sm opacity-75 max-w-md">
Выберите ваше устройство — мы дадим готовую ссылку подписки, которая настраивает всё сама в один клик. Выберите ваше устройство — мы дадим готовую ссылку подписки, которая настраивает всё сама в один клик.
</p> </p>
</div> </div>
<!-- 5 Interactive Platform Pills --> <!-- 5 Interactive Platform Pills -->
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-3" id="deviceTabs"> <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"> <button onclick="selectDeviceTab(this, 'iOS', 'Streisand / V2Box из App Store')" class="device-tab gorilla-btn rounded-2xl p-4 text-left transition font-bold shadow-lg">
<div class="font-unbounded text-sm">📱 iOS</div> <div class="font-unbounded text-sm">📱 iOS</div>
<div class="text-xs opacity-80 mt-0.5">iPhone и iPad</div> <div class="text-xs opacity-80 mt-0.5">iPhone и iPad</div>
</button> </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"> <button onclick="selectDeviceTab(this, 'Android', 'Hiddify / v2rayNG из Google Play или APK')" class="device-tab gorilla-subcard hover:brightness-125 text-white rounded-2xl p-4 text-left transition">
<div class="font-unbounded text-sm">🤖 Android</div> <div class="font-unbounded text-sm">🤖 Android</div>
<div class="text-xs text-emerald-200/60 mt-0.5">Смартфоны и планшеты</div> <div class="text-xs opacity-60 mt-0.5">Смартфоны и планшеты</div>
</button> </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"> <button onclick="selectDeviceTab(this, 'macOS', 'Hiddify / Streisand для Mac (M1/M2/M3/Intel)')" class="device-tab gorilla-subcard hover:brightness-125 text-white rounded-2xl p-4 text-left transition">
<div class="font-unbounded text-sm">💻 macOS</div> <div class="font-unbounded text-sm">💻 macOS</div>
<div class="text-xs text-emerald-200/60 mt-0.5">MacBook и iMac</div> <div class="text-xs opacity-60 mt-0.5">MacBook и iMac</div>
</button> </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"> <button onclick="selectDeviceTab(this, 'Windows', 'Hiddify Next для Windows 10 / 11')" class="device-tab gorilla-subcard hover:brightness-125 text-white rounded-2xl p-4 text-left transition">
<div class="font-unbounded text-sm">🖥 Windows</div> <div class="font-unbounded text-sm">🖥 Windows</div>
<div class="text-xs text-emerald-200/60 mt-0.5">ПК и ноутбуки</div> <div class="text-xs opacity-60 mt-0.5">ПК и ноутбуки</div>
</button> </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"> <button onclick="selectDeviceTab(this, 'Android TV', 'v2rayNG / Hiddify TV для YouTube 4K на телевизоре')" class="device-tab gorilla-subcard hover:brightness-125 text-white rounded-2xl p-4 text-left transition">
<div class="font-unbounded text-sm">📺 Android TV</div> <div class="font-unbounded text-sm">📺 Android TV</div>
<div class="text-xs text-emerald-200/60 mt-0.5">Телевизоры и приставки</div> <div class="text-xs opacity-60 mt-0.5">Телевизоры и приставки</div>
</button> </button>
</div> </div>
<!-- 4 Connection Steps (GorillaVPN Structure) --> <!-- 4 Connection Steps -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5"> <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"> <div class="gorilla-card p-6 space-y-3">
<span class="font-unbounded font-black text-2xl text-emerald-400">01</span> <span class="font-unbounded font-black text-2xl accent-text">01</span>
<h3 class="font-unbounded font-bold text-base text-white">Выберите устройство</h3> <h3 class="font-unbounded font-bold text-base text-white">Выберите устройство</h3>
<p class="text-xs text-emerald-100/75 leading-relaxed"> <p class="text-xs opacity-80 leading-relaxed">
Сейчас выбрана платформа: <b id="activeDeviceName" class="text-emerald-300">iOS</b>. Подписка работает сразу на 5 устройствах одновременно. Сейчас выбрана платформа: <b id="activeDeviceName" class="accent-text">iOS</b>. Подписка работает сразу на 5 устройствах одновременно.
</p> </p>
</div> </div>
<div class="gorilla-card p-6 space-y-3"> <div class="gorilla-card p-6 space-y-3">
<span class="font-unbounded font-black text-2xl text-emerald-400">02</span> <span class="font-unbounded font-black text-2xl accent-text">02</span>
<h3 class="font-unbounded font-bold text-base text-white">Скачайте приложение</h3> <h3 class="font-unbounded font-bold text-base text-white">Скачайте приложение</h3>
<p class="text-xs text-emerald-100/75 leading-relaxed"> <p class="text-xs opacity-80 leading-relaxed">
Рекомендуемый клиент: <b id="activeDeviceApp" class="text-emerald-300">Streisand / V2Box из App Store</b>. Установка занимает 20 секунд. Рекомендуемый клиент: <b id="activeDeviceApp" class="accent-text">Streisand / V2Box из App Store</b>. Установка занимает 20 секунд.
</p> </p>
</div> </div>
<div class="gorilla-card p-6 space-y-3"> <div class="gorilla-card p-6 space-y-3">
<span class="font-unbounded font-black text-2xl text-emerald-400">03</span> <span class="font-unbounded font-black text-2xl accent-text">03</span>
<h3 class="font-unbounded font-bold text-base text-white">Активируйте в 1 клик</h3> <h3 class="font-unbounded font-bold text-base text-white">Активируйте в 1 клик</h3>
<p class="text-xs text-emerald-100/75 leading-relaxed"> <p class="text-xs opacity-80 leading-relaxed">
Нажмите «Добавить подписку» в личном кабинете или Telegram-боте — все локации появятся автоматически. Нажмите «Добавить подписку» в личном кабинете или Telegram-боте — все локации появятся автоматически.
</p> </p>
</div> </div>
<div class="gorilla-card p-6 space-y-3"> <div class="gorilla-card p-6 space-y-3">
<span class="font-unbounded font-black text-2xl text-emerald-400">04</span> <span class="font-unbounded font-black text-2xl accent-text">04</span>
<h3 class="font-unbounded font-bold text-base text-white">Готово — вы под защитой</h3> <h3 class="font-unbounded font-bold text-base text-white">Готово — вы под защитой</h3>
<p class="text-xs text-emerald-100/75 leading-relaxed"> <p class="text-xs opacity-80 leading-relaxed">
Катюша пробивает любые блокировки: открывайте YouTube 4K, Instagram, звонки и игры без ограничений. Никаких стен и ограничений: открывайте YouTube 4K, Instagram, звонки и игры на максимальной скорости.
</p> </p>
</div> </div>
</div> </div>
</section> </section>
<!-- SECTION 3: ТАРИФЫ (Exact 4 GorillaVPN Plans: 239 ₽ / 649 ₽ / 1 219 ₽ / 2 299 ₽ + Promo & Gift Controls) --> <!-- SECTION 3: ТАРИФЫ (Exact 4 GorillaVPN Plans: 239 ₽ / 649 ₽ / 1 219 ₽ / 2 299 ₽) -->
<section id="tariffs" class="space-y-8"> <section id="tariffs" class="space-y-8">
<div class="flex flex-col lg:flex-row lg:items-end justify-between gap-4"> <div class="flex flex-col lg:flex-row lg:items-end justify-between gap-4">
<div> <div>
<div class="text-xs uppercase tracking-widest text-emerald-400 font-bold">ТАРИФЫ</div> <div class="text-xs uppercase tracking-widest accent-text font-bold">ТАРИФЫ</div>
<h2 class="font-unbounded font-extrabold text-2xl sm:text-4xl text-white mt-1">Один тариф — все возможности</h2> <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"> <p class="text-sm opacity-75 mt-2">
Никаких урезанных версий: на любом сроке доступны все локации 10 Гбит/с, 5 устройств и безлимитный трафик. Никаких урезанных версий: на любом сроке доступны все локации 10 Гбит/с, 5 устройств и безлимитный трафик.
</p> </p>
</div> </div>
<!-- Promo Code & Gift Toggle (From GorillaVPN Tariffs Block) -->
<div class="flex flex-wrap items-center gap-3"> <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"> <div class="flex items-center gorilla-subcard rounded-xl px-3 py-2">
<input id="promoInput" type="text" placeholder="Промокод (напр. KATYUSHA)" class="bg-transparent text-xs text-white placeholder-emerald-200/40 outline-none w-44" /> <input id="promoInput" type="text" placeholder="Промокод (напр. KATYUSHA)" class="bg-transparent text-xs text-white placeholder-white/40 outline-none w-44" />
<button onclick="applyPromo()" class="text-xs font-bold text-emerald-400 hover:text-emerald-300 ml-2">Применить</button> <button onclick="applyPromo()" class="text-xs font-bold accent-text ml-2">Применить</button>
</div> </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"> <label class="cursor-pointer inline-flex items-center gap-2 gorilla-subcard rounded-xl px-3.5 py-2 text-xs">
<input type="checkbox" id="giftToggle" class="accent-emerald-400 rounded" /> <input type="checkbox" id="giftToggle" class="rounded" />
<span>🎁 Подарить подписку другу</span> <span>🎁 Подарить подписку другу</span>
</label> </label>
</div> </div>
</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"> <div id="promoBanner" class="hidden gorilla-subcard rounded-xl px-4 py-2.5 text-xs accent-text font-semibold">
🔥 Промокод активирован! Дополнительные +7 дней бонусом к любому выбранному тарифу. 🔥 Промокод активирован! Дополнительные +7 дней бонусом к любому выбранному тарифу.
</div> </div>
<!-- 4 Tariff Cards Grid (Exact GorillaVPN Numbers) -->
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6"> <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6">
<!-- Plan 1: 1 Month (239 ₽) --> <!-- Plan 1: 1 Month (239 ₽) -->
<div class="gorilla-card p-6 flex flex-col justify-between"> <div class="gorilla-card p-6 flex flex-col justify-between">
<div class="space-y-4"> <div class="space-y-4">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<span class="font-unbounded font-bold text-lg text-white">1 месяц</span> <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> <span class="text-[11px] px-2.5 py-0.5 rounded-full gorilla-subcard accent-text">Старт</span>
</div> </div>
<div> <div>
<div class="font-unbounded font-black text-3xl sm:text-4xl text-white">239 ₽</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 class="text-xs opacity-75 mt-1">239 ₽/мес · Попробовать на месяц</div>
</div> </div>
<ul class="space-y-2.5 text-xs text-emerald-100/85 pt-3 border-t border-emerald-500/20"> <ul class="space-y-2.5 text-xs opacity-90 pt-3 border-t accent-border">
<li class="flex items-center gap-2">✅ <span><b>5 устройств</b> одновременно</span></li> <li class="flex items-center gap-2">✅ <span><b>5 устройств</b> одновременно</span></li>
<li class="flex items-center gap-2">✅ <span><b>Безлимитный</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>Все локации (VLESS Reality)</span></li>
<li class="flex items-center gap-2">💳 <span class="text-emerald-300/80">СБП · QR-код · Крипто · Telegram Stars</span></li> <li class="flex items-center gap-2">💳 <span class="accent-text">СБП · QR-код · Крипто · Telegram Stars</span></li>
</ul> </ul>
</div> </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"> <button onclick="openCheckoutModal('1 месяц', '239 ₽', '239 ₽/мес')" class="mt-7 w-full py-3.5 rounded-xl gorilla-subcard hover:brightness-125 font-unbounded font-bold text-xs uppercase transition">
Оформить за 239 ₽ → Оформить за 239 ₽ →
</button> </button>
</div> </div>
<!-- Plan 2: 3 Months (649 ₽ — Популярный, Экономия 10%) --> <!-- 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="gorilla-card p-6 flex flex-col justify-between relative">
<div class="space-y-4"> <div class="space-y-4">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<span class="font-unbounded font-bold text-lg text-white">3 месяца</span> <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> <span class="text-[11px] px-2.5 py-0.5 rounded-full accent-bg font-extrabold uppercase">Популярный</span>
</div> </div>
<div> <div>
<div class="font-unbounded font-black text-3xl sm:text-4xl text-emerald-300">649 ₽</div> <div class="font-unbounded font-black text-3xl sm:text-4xl accent-text">649 ₽</div>
<div class="flex items-center gap-2 mt-1"> <div class="flex items-center gap-2 mt-1">
<span class="text-xs text-white font-semibold">216 ₽/мес</span> <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> <span class="text-[11px] px-2 py-0.5 rounded gorilla-subcard accent-text font-bold">Экономия 10%</span>
</div> </div>
<div class="text-[11px] text-emerald-200/60 mt-0.5">Оптимальный старт</div> <div class="text-[11px] opacity-60 mt-0.5">Оптимальный старт</div>
</div> </div>
<ul class="space-y-2.5 text-xs text-emerald-100/85 pt-3 border-t border-emerald-500/20"> <ul class="space-y-2.5 text-xs opacity-90 pt-3 border-t accent-border">
<li class="flex items-center gap-2">✅ <span><b>5 устройств</b> одновременно</span></li> <li class="flex items-center gap-2">✅ <span><b>5 устройств</b> одновременно</span></li>
<li class="flex items-center gap-2">✅ <span><b>Безлимитный</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>Приоритетный канал YouTube 4K</span></li>
<li class="flex items-center gap-2">💳 <span class="text-emerald-300/80">СБП · QR-код · Крипто · Telegram Stars</span></li> <li class="flex items-center gap-2">💳 <span class="accent-text">СБП · QR-код · Крипто · Telegram Stars</span></li>
</ul> </ul>
</div> </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"> <button onclick="openCheckoutModal('3 месяца', '649 ₽', '216 ₽/мес (Экономия 10%)')" class="gorilla-btn mt-7 w-full py-3.5 rounded-xl font-unbounded text-xs uppercase">
@ -393,26 +436,26 @@
<div class="space-y-4"> <div class="space-y-4">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<span class="font-unbounded font-bold text-lg text-white">6 месяцев</span> <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> <span class="text-[11px] px-2.5 py-0.5 rounded-full gorilla-subcard accent-text font-bold">Экономия 15%</span>
</div> </div>
<div> <div>
<div class="font-unbounded font-black text-3xl sm:text-4xl text-white">1 219 ₽</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 class="text-xs opacity-75 mt-1">203 ₽/мес · Полгода спокойствия</div>
</div> </div>
<ul class="space-y-2.5 text-xs text-emerald-100/85 pt-3 border-t border-emerald-500/20"> <ul class="space-y-2.5 text-xs opacity-90 pt-3 border-t accent-border">
<li class="flex items-center gap-2">✅ <span><b>5 устройств</b> одновременно</span></li> <li class="flex items-center gap-2">✅ <span><b>5 устройств</b> одновременно</span></li>
<li class="flex items-center gap-2">✅ <span><b>Безлимитный</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>Защита от DPI и авто-ротация узлов</span></li>
<li class="flex items-center gap-2">💳 <span class="text-emerald-300/80">СБП · QR-код · Крипто · Telegram Stars</span></li> <li class="flex items-center gap-2">💳 <span class="accent-text">СБП · QR-код · Крипто · Telegram Stars</span></li>
</ul> </ul>
</div> </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"> <button onclick="openCheckoutModal('6 месяцев', '1 219 ₽', '203 ₽/мес (Экономия 15%)')" class="mt-7 w-full py-3.5 rounded-xl gorilla-subcard hover:brightness-125 font-unbounded font-bold text-xs uppercase transition">
Выбрать 6 месяцев → Выбрать 6 месяцев →
</button> </button>
</div> </div>
<!-- Plan 4: 12 Months (2 299 ₽ — Выгодно, Экономия 20%) --> <!-- 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="gorilla-card p-6 flex flex-col justify-between relative">
<div class="space-y-4"> <div class="space-y-4">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<span class="font-unbounded font-bold text-lg text-white">12 месяцев</span> <span class="font-unbounded font-bold text-lg text-white">12 месяцев</span>
@ -421,15 +464,15 @@
<div> <div>
<div class="font-unbounded font-black text-3xl sm:text-4xl text-white">2 299 ₽</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"> <div class="flex items-center gap-2 mt-1">
<span class="text-xs text-emerald-300 font-bold">191 ₽/мес</span> <span class="text-xs accent-text font-bold">191 ₽/мес</span>
<span class="text-[11px] text-emerald-200/60">Максимальная выгода</span> <span class="text-[11px] opacity-60">Максимальная выгода</span>
</div> </div>
</div> </div>
<ul class="space-y-2.5 text-xs text-emerald-100/85 pt-3 border-t border-emerald-500/20"> <ul class="space-y-2.5 text-xs opacity-90 pt-3 border-t accent-border">
<li class="flex items-center gap-2">✅ <span><b>5 устройств</b> + настройка роутера</span></li> <li class="flex items-center gap-2">✅ <span><b>5 устройств</b> + настройка роутера</span></li>
<li class="flex items-center gap-2">✅ <span><b>Безлимитный</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>VIP-серверы с минимальным пингом</span></li>
<li class="flex items-center gap-2">💳 <span class="text-emerald-300/80">СБП · QR-код · Крипто · Telegram Stars</span></li> <li class="flex items-center gap-2">💳 <span class="accent-text">СБП · QR-код · Крипто · Telegram Stars</span></li>
</ul> </ul>
</div> </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"> <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">
@ -439,85 +482,84 @@
</div> </div>
</section> </section>
<!-- SECTION 4: ЛИЧНЫЙ КАБИНЕТ — Всё управление в одном кабинете (GorillaVPN Section) --> <!-- SECTION 4: ЛИЧНЫЙ КАБИНЕТ -->
<section id="cabinet" class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-center"> <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="lg:col-span-5 space-y-5">
<div class="text-xs uppercase tracking-widest text-emerald-400 font-bold">ЛИЧНЫЙ КАБИНЕТ</div> <div class="text-xs uppercase tracking-widest accent-text font-bold">ЛИЧНЫЙ КАБИНЕТ</div>
<h2 class="font-unbounded font-extrabold text-2xl sm:text-4xl text-white leading-tight"> <h2 class="font-unbounded font-extrabold text-2xl sm:text-4xl text-white leading-tight">
Всё управление в одном кабинете Всё управление в одном кабинете
</h2> </h2>
<p class="text-sm text-emerald-100/75 leading-relaxed"> <p class="text-sm opacity-75 leading-relaxed">
Никаких сложных конфигов и ручных переключений. Управляйте своими устройствами, продлевайте доступ через СБП и делитесь QR-кодом прямо в браузере или Telegram. Никаких сложных конфигов и ручных переключений. Управляйте своими устройствами, продлевайте доступ через СБП и делитесь QR-кодом прямо в браузере или Telegram.
</p> </p>
<div class="grid grid-cols-2 gap-3 pt-2"> <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="gorilla-subcard rounded-2xl p-4">
<div class="font-unbounded font-extrabold text-xl text-emerald-400">5 устройств</div> <div class="font-unbounded font-extrabold text-xl accent-text">5 устройств</div>
<div class="text-xs text-emerald-100/70 mt-1">на одну подписку без доплат</div> <div class="text-xs opacity-70 mt-1">на одну подписку без доплат</div>
</div> </div>
<div class="bg-[#071c13] border border-emerald-500/25 rounded-2xl p-4"> <div class="gorilla-subcard rounded-2xl p-4">
<div class="font-unbounded font-extrabold text-xl text-emerald-400">6 платформ</div> <div class="font-unbounded font-extrabold text-xl accent-text">6 платформ</div>
<div class="text-xs text-emerald-100/70 mt-1">iOS, Android, Win, Mac, Linux, TV</div> <div class="text-xs opacity-70 mt-1">iOS, Android, Win, Mac, Linux, TV</div>
</div> </div>
<div class="bg-[#071c13] border border-emerald-500/25 rounded-2xl p-4"> <div class="gorilla-subcard rounded-2xl p-4">
<div class="font-unbounded font-extrabold text-sm text-white">QR и ссылка</div> <div class="font-unbounded font-extrabold text-sm text-white">QR и ссылка</div>
<div class="text-xs text-emerald-100/70 mt-1">для мгновенного подключения</div> <div class="text-xs opacity-70 mt-1">для мгновенного подключения</div>
</div> </div>
<div class="bg-[#071c13] border border-emerald-500/25 rounded-2xl p-4"> <div class="gorilla-subcard rounded-2xl p-4">
<div class="font-unbounded font-extrabold text-sm text-white">Без автосписаний</div> <div class="font-unbounded font-extrabold text-sm text-white">Без автосписаний</div>
<div class="text-xs text-emerald-100/70 mt-1">прозрачная история платежей</div> <div class="text-xs opacity-70 mt-1">прозрачная история платежей</div>
</div> </div>
</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="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 flex-wrap items-center justify-between gap-3 pb-4 border-b accent-border">
<div class="flex items-center gap-3"> <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" /> <img src="/assets/vpn-7561/logo.jpg" alt="Avatar" class="w-10 h-10 rounded-full object-cover border accent-border" />
<div> <div>
<div class="font-unbounded font-bold text-sm text-white">Кабинет бойца · #KTY-7561</div> <div class="font-unbounded font-bold text-sm text-white">Кабинет · #VPN-7561</div>
<div class="text-xs text-emerald-400">Подписка активна · Тариф «Оптимальный»</div> <div class="text-xs accent-text">Подписка активна · Тариф «Оптимальный»</div>
</div> </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"> <button onclick="openTrialModal()" class="px-3.5 py-2 rounded-xl gorilla-subcard hover:brightness-125 accent-text text-xs font-bold transition">
📲 Показать QR-код ключа 📲 Показать QR-код ключа
</button> </button>
</div> </div>
<div class="grid grid-cols-1 sm:grid-cols-3 gap-3 text-xs"> <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"> <div class="bg-black/45 border accent-border rounded-xl p-3.5">
<span class="text-emerald-200/60">Активные устройства</span> <span class="opacity-60">Активные устройства</span>
<div class="font-unbounded font-bold text-base text-white mt-1">3 из 5 подключено</div> <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 class="text-[11px] accent-text mt-0.5">iPhone 16 Pro · MacBook · Sony TV</div>
</div> </div>
<div class="bg-[#04120c] border border-emerald-500/20 rounded-xl p-3.5"> <div class="bg-black/45 border accent-border rounded-xl p-3.5">
<span class="text-emerald-200/60">Протокол маскировки</span> <span class="opacity-60">Протокол маскировки</span>
<div class="font-unbounded font-bold text-base text-emerald-300 mt-1">VLESS Reality</div> <div class="font-unbounded font-bold text-base accent-text mt-1">VLESS Reality</div>
<div class="text-[11px] text-emerald-200/60 mt-0.5">Порт 443 · TLS 1.3 Stealth</div> <div class="text-[11px] opacity-60 mt-0.5">Порт 443 · TLS 1.3 Stealth</div>
</div> </div>
<div class="bg-[#04120c] border border-emerald-500/20 rounded-xl p-3.5"> <div class="bg-black/45 border accent-border rounded-xl p-3.5">
<span class="text-emerald-200/60">Быстрая оплата</span> <span class="opacity-60">Быстрая оплата</span>
<div class="font-unbounded font-bold text-base text-white mt-1">СБП / Stars</div> <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 class="text-[11px] accent-text mt-0.5">Мгновенное продление</div>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<!-- SECTION 5: ЧАСТЫЕ ВОПРОСЫ (9 GorillaVPN FAQ Items) --> <!-- SECTION 5: ЧАСТЫЕ ВОПРОСЫ -->
<section id="faq" class="space-y-6"> <section id="faq" class="space-y-6">
<div> <div>
<div class="text-xs uppercase tracking-widest text-emerald-400 font-bold">ВОПРОСЫ И ОТВЕТЫ</div> <div class="text-xs uppercase tracking-widest accent-text font-bold">ВОПРОСЫ И ОТВЕТЫ</div>
<h2 class="font-unbounded font-extrabold text-2xl sm:text-4xl text-white mt-1">Частые вопросы</h2> <h2 class="font-unbounded font-extrabold text-2xl sm:text-4xl text-white mt-1">Частые вопросы</h2>
</div> </div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<details class="gorilla-card p-5 group open:border-emerald-400/50"> <details class="gorilla-card p-5 group">
<summary class="font-unbounded font-bold text-sm text-white cursor-pointer flex items-center justify-between"> <summary class="font-unbounded font-bold text-sm text-white cursor-pointer flex items-center justify-between">
<span>Как получить пробный доступ на 48 часов за 0 ₽?</span> <span>Как получить пробный доступ на 48 часов за 0 ₽?</span>
<span class="text-emerald-400 group-open:rotate-45 transition">+</span> <span class="accent-text group-open:rotate-45 transition">+</span>
</summary> </summary>
<p class="text-xs text-emerald-100/75 mt-3 leading-relaxed"> <p class="text-xs opacity-80 mt-3 leading-relaxed">
Нажмите кнопку «Получить 2 дня за 0 ₽» — вы сразу получите готовую ссылку подписки VLESS Reality на 48 часов для 5 устройств без привязки банковской карты. Нажмите кнопку «Получить 2 дня за 0 ₽» — вы сразу получите готовую ссылку подписки VLESS Reality на 48 часов для 5 устройств без привязки банковской карты.
</p> </p>
</details> </details>
@ -525,9 +567,9 @@
<details class="gorilla-card p-5 group"> <details class="gorilla-card p-5 group">
<summary class="font-unbounded font-bold text-sm text-white cursor-pointer flex items-center justify-between"> <summary class="font-unbounded font-bold text-sm text-white cursor-pointer flex items-center justify-between">
<span>Почему Катюша VPN не блокируется провайдерами?</span> <span>Почему Катюша VPN не блокируется провайдерами?</span>
<span class="text-emerald-400 group-open:rotate-45 transition">+</span> <span class="accent-text group-open:rotate-45 transition">+</span>
</summary> </summary>
<p class="text-xs text-emerald-100/75 mt-3 leading-relaxed"> <p class="text-xs opacity-80 mt-3 leading-relaxed">
Мы используем современный протокол Xray VLESS Reality с маскировкой под обычный HTTPS-трафик зарубежных сайтов. Системы ТСПУ/DPI не могут отличить его от обычного серфинга. Мы используем современный протокол Xray VLESS Reality с маскировкой под обычный HTTPS-трафик зарубежных сайтов. Системы ТСПУ/DPI не могут отличить его от обычного серфинга.
</p> </p>
</details> </details>
@ -535,9 +577,9 @@
<details class="gorilla-card p-5 group"> <details class="gorilla-card p-5 group">
<summary class="font-unbounded font-bold text-sm text-white cursor-pointer flex items-center justify-between"> <summary class="font-unbounded font-bold text-sm text-white cursor-pointer flex items-center justify-between">
<span>Сколько устройств можно подключить по одной подписке?</span> <span>Сколько устройств можно подключить по одной подписке?</span>
<span class="text-emerald-400 group-open:rotate-45 transition">+</span> <span class="accent-text group-open:rotate-45 transition">+</span>
</summary> </summary>
<p class="text-xs text-emerald-100/75 mt-3 leading-relaxed"> <p class="text-xs opacity-80 mt-3 leading-relaxed">
До 5 устройств одновременно: например, ваш смартфон, ноутбук, планшет, домашний ПК и телевизор Android TV / Apple TV. До 5 устройств одновременно: например, ваш смартфон, ноутбук, планшет, домашний ПК и телевизор Android TV / Apple TV.
</p> </p>
</details> </details>
@ -545,72 +587,64 @@
<details class="gorilla-card p-5 group"> <details class="gorilla-card p-5 group">
<summary class="font-unbounded font-bold text-sm text-white cursor-pointer flex items-center justify-between"> <summary class="font-unbounded font-bold text-sm text-white cursor-pointer flex items-center justify-between">
<span>Какими способами можно оплатить подписку?</span> <span>Какими способами можно оплатить подписку?</span>
<span class="text-emerald-400 group-open:rotate-45 transition">+</span> <span class="accent-text group-open:rotate-45 transition">+</span>
</summary> </summary>
<p class="text-xs text-emerald-100/75 mt-3 leading-relaxed"> <p class="text-xs opacity-80 mt-3 leading-relaxed">
Доступна моментальная оплата через СБП (по QR-коду любого российского банка), криптовалюту (USDT/TON) и Telegram Stars. Никаких скрытых автосписаний. Доступна моментальная оплата через СБП (по QR-коду любого российского банка), криптовалюту (USDT/TON) и Telegram Stars. Никаких скрытых автосписаний.
</p> </p>
</details> </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> </div>
</section> </section>
<!-- PM Reference Analysis Footer Block --> <!-- PM Reference Analysis Footer Block -->
<section class="pt-8 border-t border-emerald-500/20 space-y-4"> <section class="pt-8 border-t accent-border space-y-4">
<div class="flex flex-wrap items-center justify-between gap-2"> <div class="flex flex-wrap items-center justify-between gap-2">
<div> <div>
<h3 class="text-xs font-unbounded font-bold text-emerald-400 uppercase">🔍 Исследованный референс и дизайн-система (`contracts/WEB_REFERENCES.md`)</h3> <h3 class="text-xs font-unbounded font-bold accent-text 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> <p class="text-xs opacity-60">Спарсено из React SPA бандла <code>gorillavpn.pro</code> + адаптирована цветовая гамма и персонаж из промпта</p>
</div> </div>
<a href="/" class="text-xs text-emerald-300 hover:underline">← Вернуться в панель управления Виртуальным Офисом</a> <a href="/" class="text-xs accent-text hover:underline">← Вернуться в панель управления Виртуальным Офисом</a>
</div> </div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4"> <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"> <a href="https://gorillavpn.pro/" target="_blank" class="block gorilla-subcard hover:brightness-110 rounded-2xl p-4 transition">
<div class="text-xs font-bold text-emerald-400 truncate">🎯 Ваш референс-образец: Gorilla</div> <div class="text-xs font-bold accent-text truncate">🎯 Ваш референс-образец: Gorilla</div>
<div class="text-[11px] text-emerald-200/50 truncate mt-0.5 font-mono">https://gorillavpn.pro/</div> <div class="text-[11px] opacity-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> <p class="text-xs opacity-80 mt-2 line-clamp-3">Шрифты: Manrope, Unbounded • Блоки и тексты SPA: Тарифы | Установка | Кабинет | Вопросы | Навигация по сайту | Открыть кабинет | Меню | Меню Gorilla VPN | Разделы сайта Gorilla VPN | Мобильное меню | Нидерланды | Амстердам | Германия | Франкфурт | Турция | Стамбул | Польша | Варшава • Точные тарифы с сайта: 1 месяц: 239 ₽, 3 месяца: 649 ₽, 6 месяцев: 1219 ₽, 12 месяцев: 2299 ₽</p>
</a> </a>
<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"> <a href="https://mullvad.net/en" target="_blank" class="block gorilla-subcard hover:brightness-110 rounded-2xl p-4 transition">
<div class="text-xs font-bold text-emerald-400 truncate">Mullvad VPN — Эталон минимализма, прозрачности и оплаты в 1 клик (вкл. крипто)</div> <div class="text-xs font-bold accent-text truncate">Mullvad VPN — Эталон минимализма, прозрачности и оплаты в 1 клик (вкл. крипто)</div>
<div class="text-[11px] text-emerald-200/50 truncate mt-0.5 font-mono">https://mullvad.net/en</div> <div class="text-[11px] opacity-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> <p class="text-xs opacity-80 mt-2 line-clamp-3">Ключевые паттерны: генерация аккаунта без email, мгновенный выбор протокола WireGuard/Shadowsocks, честная цена, нулевое логирование.</p>
</a> </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"> <a href="https://protonvpn.com" target="_blank" class="block gorilla-subcard hover:brightness-110 rounded-2xl p-4 transition">
<div class="text-xs font-bold text-emerald-400 truncate">Proton VPN — Премиальный тёмный UI с интерактивной картой серверов и сравнением скоростей</div> <div class="text-xs font-bold accent-text truncate">Proton VPN — Премиальный тёмный UI с интерактивной картой серверов и сравнением скоростей</div>
<div class="text-[11px] text-emerald-200/50 truncate mt-0.5 font-mono">https://protonvpn.com</div> <div class="text-[11px] opacity-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> <p class="text-xs opacity-80 mt-2 line-clamp-3">Ключевые паттерны: переключатель тарифов (1 мес / 1 год / 2 года со скидкой 60%), таблица скорости 10 Gbps, бейджи стриминга (Netflix/YouTube 4K).</p>
</a> </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"> <a href="https://amnezia.org" target="_blank" class="block gorilla-subcard hover:brightness-110 rounded-2xl p-4 transition">
<div class="text-xs font-bold text-emerald-400 truncate">Amnezia / Outline VPN — Фокус на обход блокировок (VLESS / Xray Reality) и приложения под все ОС</div> <div class="text-xs font-bold accent-text 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> <div class="text-[11px] opacity-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> <p class="text-xs opacity-80 mt-2 line-clamp-3">Ключевые паттерны: кнопки быстрого скачивания (iOS, Android, macOS, Windows, роутеры), выдача ключа для Telegram-бота в 1 клик.</p>
</a> </a>
</div> </div>
</section> </section>
<section class="max-w-6xl mx-auto px-6 my-4">
<div class="bg-amber-500/15 border border-amber-500/40 rounded-2xl p-4 flex items-center justify-between">
<div>
<span class="text-xs font-bold uppercase text-amber-300">✅ Новая фича в ПРОДЕ (FEAT-09)</span>
<h4 class="font-bold text-sm text-white mt-0.5">Реферальная программа «Приведи друга — получи +14 дней VPN»</h4>
<p class="text-xs text-slate-300">Генерация персональной реферальной ссылки и учёт бонусных дней в личном кабинете.</p>
</div>
<span class="px-3 py-1 rounded-full text-xs bg-amber-500/20 text-amber-300 font-mono">ветка: main (PROD) (feat/feat-09)</span>
</div>
</section>
</main> </main>
<!-- Interactive Checkout / Free Trial Modal --> <!-- Interactive Checkout / Free Trial Modal -->
@ -618,30 +652,30 @@
<div class="gorilla-card max-w-lg w-full p-6 sm:p-7 space-y-5"> <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 justify-between">
<div class="flex items-center gap-3"> <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" /> <img src="/assets/vpn-7561/logo.jpg" alt="Logo" class="w-10 h-10 rounded-full object-cover border accent-border" />
<div> <div>
<h4 id="modalTitle" class="font-unbounded font-bold text-base text-white">Katyusha Trial · 48 часов за 0 ₽</h4> <h4 id="modalTitle" class="font-unbounded font-bold text-base text-white">Катюша VPN Trial · 48 часов за 0 ₽</h4>
<p id="modalSub" class="text-xs text-emerald-400">5 устройств · Безлимитный трафик · VLESS Reality</p> <p id="modalSub" class="text-xs accent-text">5 устройств · Безлимитный трафик · VLESS Reality</p>
</div> </div>
</div> </div>
<button onclick="closeCheckoutModal()" class="text-emerald-200/60 hover:text-white text-lg font-bold">✕</button> <button onclick="closeCheckoutModal()" class="opacity-60 hover:opacity-100 text-lg font-bold">✕</button>
</div> </div>
<div class="bg-[#030d08] border border-emerald-500/30 rounded-xl p-4 space-y-2"> <div class="bg-black/60 border accent-border rounded-xl p-4 space-y-2">
<div class="flex items-center justify-between text-[11px] text-emerald-300"> <div class="flex items-center justify-between text-[11px] accent-text">
<span>Ваша персональная VLESS Reality ссылка подписки:</span> <span>Ваша персональная VLESS Reality ссылка подписки:</span>
<button onclick="navigator.clipboard.writeText(document.getElementById('vlessKey').innerText);this.innerText='✅ Скопировано!'" class="font-bold underline">Скопировать</button> <button onclick="navigator.clipboard.writeText(document.getElementById('vlessKey').innerText);this.innerText='✅ Скопировано!'" class="font-bold underline">Скопировать</button>
</div> </div>
<div id="vlessKey" class="font-mono text-[11px] text-emerald-400 break-all select-all"> <div id="vlessKey" class="font-mono text-[11px] accent-text 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 vless://vpn-7561-reality@nl-amsterdam.vo-office.com:443?security=reality&sni=www.cloudflare.com&fp=chrome&pbk=KatyushaLaser2026&type=grpc#Катюша_VPN_10Gbps
</div> </div>
</div> </div>
<div class="grid grid-cols-2 sm:grid-cols-4 gap-2 text-center text-[11px] font-bold"> <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="gorilla-subcard rounded-lg py-2 accent-text">⚡ СБП QR</div>
<div class="bg-[#072015] border border-emerald-500/20 rounded-lg py-2 text-emerald-100/80">💎 USDT / TON</div> <div class="gorilla-subcard rounded-lg py-2 opacity-85">💎 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="gorilla-subcard rounded-lg py-2 opacity-85">⭐ TG Stars</div>
<div class="bg-[#072015] border border-emerald-500/20 rounded-lg py-2 text-emerald-100/80">💳 Карта РФ</div> <div class="gorilla-subcard rounded-lg py-2 opacity-85">💳 Карта РФ</div>
</div> </div>
<button onclick="closeCheckoutModal()" class="gorilla-btn w-full py-3.5 rounded-xl font-unbounded text-xs uppercase"> <button onclick="closeCheckoutModal()" class="gorilla-btn w-full py-3.5 rounded-xl font-unbounded text-xs uppercase">
@ -651,6 +685,31 @@
</div> </div>
<script> <script>
const PALETTES = {"crimson": {"key": "crimson", "name": "Алый Огонь (Crimson Neon)", "bg_deep": "#110408", "bg_card": "#1f0710", "bg_card_hover": "#2d0b18", "accent": "#f43f5e", "accent_bright": "#fb7185", "accent_rgb": "244, 63, 94", "text_main": "#fff1f2", "prompt_color_en": "deep obsidian crimson (#110408) background with glowing ruby red (#f43f5e) and fiery rose neon accents"}, "violet": {"key": "violet", "name": "Кибер-Фиолет (Cyber Violet)", "bg_deep": "#090414", "bg_card": "#140929", "bg_card_hover": "#1f0e3d", "accent": "#a855f7", "accent_bright": "#c084fc", "accent_rgb": "168, 85, 247", "text_main": "#faf5ff", "prompt_color_en": "deep cyber violet (#090414) background with electric purple (#a855f7) and magenta neon accents"}, "cyan": {"key": "cyan", "name": "Ледяной Неон (Arctic Cyan)", "bg_deep": "#030b14", "bg_card": "#071729", "bg_card_hover": "#0c233d", "accent": "#38bdf8", "accent_bright": "#7dd3fc", "accent_rgb": "56, 189, 248", "text_main": "#f0f9ff", "prompt_color_en": "deep abyssal navy (#030b14) background with electric ice cyan (#38bdf8) and laser blue neon accents"}, "amber": {"key": "amber", "name": "Кибер-Золото (Gold Amber)", "bg_deep": "#120c03", "bg_card": "#211606", "bg_card_hover": "#302009", "accent": "#f59e0b", "accent_bright": "#fbbf24", "accent_rgb": "245, 158, 11", "text_main": "#fffbeb", "prompt_color_en": "deep onyx black-gold (#120c03) background with glowing cyber gold (#f59e0b) and warm amber neon accents"}, "pink": {"key": "pink", "name": "Неоновая Фуксия (Hot Pink)", "bg_deep": "#14040d", "bg_card": "#260819", "bg_card_hover": "#380c25", "accent": "#ec4899", "accent_bright": "#f472b6", "accent_rgb": "236, 72, 153", "text_main": "#fdf2f8", "prompt_color_en": "deep dark magenta-noir (#14040d) background with hot neon pink (#ec4899) and electric rose accents"}, "emerald": {"key": "emerald", "name": "Изумрудный Радар (Gorilla Emerald)", "bg_deep": "#04100b", "bg_card": "#081d14", "bg_card_hover": "#0d2b1e", "accent": "#4ade80", "accent_bright": "#86efac", "accent_rgb": "74, 222, 128", "text_main": "#ecfdf5", "prompt_color_en": "deep dark emerald (#04100b) background with glowing mint green (#4ade80) and cyber lime accents"}};
function applyThemePalette(key) {
const p = PALETTES[key];
if (!p) return;
const root = document.documentElement;
root.style.setProperty('--bg-deep', p.bg_deep);
root.style.setProperty('--bg-card', p.bg_card);
root.style.setProperty('--bg-card-hover', p.bg_card_hover);
root.style.setProperty('--accent', p.accent);
root.style.setProperty('--accent-bright', p.accent_bright);
root.style.setProperty('--accent-rgb', p.accent_rgb);
root.style.setProperty('--text-main', p.text_main);
const lbl = document.getElementById('activePaletteLabel');
if (lbl) lbl.innerText = p.name;
Object.keys(PALETTES).forEach(k => {
const b = document.getElementById('pal-btn-' + k);
if (b) {
b.className = k === key
? 'w-5 h-5 rounded-full transition transform ring-2 ring-white scale-110 shadow-md'
: 'w-5 h-5 rounded-full transition transform opacity-75 hover:opacity-100 shadow-md';
}
});
}
function selectRadarCountry(name, ping, speed) { function selectRadarCountry(name, ping, speed) {
document.getElementById('radarLoc').innerText = name; document.getElementById('radarLoc').innerText = name;
document.getElementById('radarPing').innerText = 'Пинг: ' + ping; document.getElementById('radarPing').innerText = 'Пинг: ' + ping;
@ -659,9 +718,9 @@
function selectDeviceTab(btn, platform, appName) { function selectDeviceTab(btn, platform, appName) {
document.querySelectorAll('.device-tab').forEach(el => { 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'; el.className = 'device-tab gorilla-subcard hover:brightness-125 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'; btn.className = 'device-tab gorilla-btn rounded-2xl p-4 text-left transition font-bold shadow-lg';
document.getElementById('activeDeviceName').innerText = platform; document.getElementById('activeDeviceName').innerText = platform;
document.getElementById('activeDeviceApp').innerText = appName; document.getElementById('activeDeviceApp').innerText = appName;
} }
@ -674,7 +733,7 @@
} }
function openTrialModal() { function openTrialModal() {
document.getElementById('modalTitle').innerText = 'Katyusha Trial · 48 часов за 0 ₽'; document.getElementById('modalTitle').innerText = 'Катюша VPN Trial · 48 часов за 0 ₽';
document.getElementById('modalSub').innerText = 'Пробный доступ на 2 дня · 5 устройств · ∞ ГБ'; document.getElementById('modalSub').innerText = 'Пробный доступ на 2 дня · 5 устройств · ∞ ГБ';
document.getElementById('checkoutModal').classList.remove('hidden'); document.getElementById('checkoutModal').classList.remove('hidden');
} }

529
frontend/src/features/PreviewDev.html
View File

@ -13,86 +13,133 @@
--bg-deep: #04100b; --bg-deep: #04100b;
--bg-card: #081d14; --bg-card: #081d14;
--bg-card-hover: #0d2b1e; --bg-card-hover: #0d2b1e;
--mint: #4ade80; --accent: #4ade80;
--mint-bright: #22c55e; --accent-bright: #86efac;
--accent-rgb: 74, 222, 128;
--text-main: #ecfdf5;
} }
body { body {
font-family: 'Manrope', sans-serif; font-family: 'Manrope', sans-serif;
background-color: var(--bg-deep); background-color: var(--bg-deep);
color: #ecfdf5; color: var(--text-main);
background-image: background-image:
radial-gradient(circle at 75% 22%, rgba(34, 197, 94, 0.14) 0%, transparent 45%), radial-gradient(circle at 75% 22%, rgba(var(--accent-rgb), 0.16) 0%, transparent 45%),
radial-gradient(circle at 20% 60%, rgba(16, 185, 129, 0.10) 0%, transparent 50%), radial-gradient(circle at 20% 60%, rgba(var(--accent-rgb), 0.11) 0%, transparent 50%),
linear-gradient(rgba(52, 211, 153, 0.03) 1px, transparent 1px), linear-gradient(rgba(var(--accent-rgb), 0.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(52, 211, 153, 0.03) 1px, transparent 1px); linear-gradient(90deg, rgba(var(--accent-rgb), 0.035) 1px, transparent 1px);
background-size: 100% 100%, 100% 100%, 48px 48px, 48px 48px; background-size: 100% 100%, 100% 100%, 48px 48px, 48px 48px;
transition: background-color 0.35s ease, color 0.35s ease;
} }
.font-unbounded { .font-unbounded {
font-family: 'Unbounded', sans-serif; font-family: 'Unbounded', sans-serif;
} }
/* GorillaVPN signature chamfered corners */ .accent-text {
color: var(--accent);
}
.accent-bg {
background-color: var(--accent);
color: var(--bg-deep);
}
.accent-border {
border-color: rgba(var(--accent-rgb), 0.32);
}
.gorilla-subcard {
background-color: var(--bg-card);
border: 1px solid rgba(var(--accent-rgb), 0.24);
}
/* GorillaVPN signature chamfered corners with dynamic palette variables */
.gorilla-card { .gorilla-card {
background: linear-gradient(165deg, rgba(11, 37, 26, 0.92) 0%, rgba(5, 19, 13, 0.96) 100%); background: linear-gradient(165deg, var(--bg-card) 0%, var(--bg-deep) 100%);
border: 1px solid rgba(74, 222, 128, 0.22); border: 1px solid rgba(var(--accent-rgb), 0.28);
clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 26px 100%, 0 calc(100% - 26px)); 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); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(var(--accent-rgb), 0.18);
transition: border-color 0.3s ease, background 0.3s ease;
} }
.gorilla-btn { .gorilla-btn {
background: linear-gradient(90deg, #4ade80 0%, #86efac 100%); background: linear-gradient(90deg, var(--accent) 0%, var(--accent-bright) 100%);
color: #03150c; color: #050a07;
font-weight: 800; font-weight: 800;
transition: all 0.2s ease; transition: all 0.2s ease;
box-shadow: 0 0 28px rgba(74, 222, 128, 0.35); box-shadow: 0 0 28px rgba(var(--accent-rgb), 0.38);
} }
.gorilla-btn:hover { .gorilla-btn:hover {
transform: translateY(-1px); transform: translateY(-1px);
box-shadow: 0 0 38px rgba(74, 222, 128, 0.6); box-shadow: 0 0 38px rgba(var(--accent-rgb), 0.65);
filter: brightness(1.05); filter: brightness(1.06);
} }
@keyframes radarSweep { @keyframes radarSweep {
from { transform: rotate(0deg); } from { transform: rotate(0deg); }
to { transform: rotate(360deg); } to { transform: rotate(360deg); }
} }
.radar-sweep { .radar-sweep {
background: conic-gradient(from 0deg, rgba(74, 222, 128, 0.38) 0deg, rgba(74, 222, 128, 0.0) 90deg, transparent 360deg); background: conic-gradient(from 0deg, rgba(var(--accent-rgb), 0.40) 0deg, rgba(var(--accent-rgb), 0.0) 90deg, transparent 360deg);
animation: radarSweep 5s linear infinite; animation: radarSweep 5s linear infinite;
} }
@keyframes pulseGlow { @keyframes pulseGlow {
0%, 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6); } 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.6); }
50% { box-shadow: 0 0 0 10px rgba(74, 222, 128, 0); } 50% { box-shadow: 0 0 0 10px rgba(var(--accent-rgb), 0); }
} }
.node-pulse { .node-pulse {
animation: pulseGlow 2.2s infinite; animation: pulseGlow 2.2s infinite;
} }
</style> </style>
</head> </head>
<body class="min-h-screen selection:bg-emerald-400 selection:text-slate-950"> <body class="min-h-screen">
<!-- Top Navbar (GorillaVPN Pill Header Style + Custom Circular Katyusha Emblem Logo) --> <!-- Top Navbar (GorillaVPN Pill Header + Custom Circular Emblem Logo + Live Palette Switcher) -->
<header class="sticky top-0 z-40 px-4 pt-3"> <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"> <div class="max-w-7xl mx-auto gorilla-subcard backdrop-blur-xl rounded-2xl px-5 py-3 flex flex-wrap items-center justify-between gap-4 shadow-2xl">
<a href="#" class="flex items-center gap-3.5 group"> <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"> <div class="relative w-12 h-12 rounded-full p-0.5 accent-bg shadow-lg">
<img src="/assets/vpn-7561/logo.jpg" alt="Катюша VPN Logo" class="w-full h-full object-cover rounded-full bg-[#04100b]" onerror="this.style.display='none'" /> <img src="/assets/vpn-7561/logo.jpg" alt="Катюша VPN Logo" class="w-full h-full object-cover rounded-full bg-black" onerror="this.style.display='none'" />
<span class="absolute -bottom-0.5 -right-0.5 w-3.5 h-3.5 rounded-full bg-emerald-400 border-2 border-[#04100b]"></span> <span class="absolute -bottom-0.5 -right-0.5 w-3.5 h-3.5 rounded-full accent-bg border-2 border-black"></span>
</div> </div>
<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="font-unbounded font-extrabold text-base md:text-lg tracking-wider uppercase text-white transition">Катюша VPN</span>
<span class="block text-[10px] uppercase tracking-widest text-emerald-400/90 font-semibold">Пробиваем любые стены · VLESS Reality</span> <span class="block text-[10px] uppercase tracking-widest accent-text font-semibold">Персонаж и гамма по промпту · VLESS Reality</span>
</div> </div>
</a> </a>
<nav class="hidden lg:flex items-center gap-7 text-sm font-medium text-emerald-100/80"> <nav class="hidden xl:flex items-center gap-6 text-sm font-medium opacity-85">
<a href="#how-it-works" class="hover:text-emerald-300 transition">Как подключить</a> <a href="#how-it-works" class="hover:opacity-100 transition">Как подключить</a>
<a href="#art-showcase" class="hover:text-emerald-300 transition">Катюша в деле</a> <a href="#art-showcase" class="hover:opacity-100 transition">Дизайн-код и Персонаж</a>
<a href="#tariffs" class="hover:text-emerald-300 transition">Тарифы</a> <a href="#tariffs" class="hover:opacity-100 transition">Тарифы</a>
<a href="#cabinet" class="hover:text-emerald-300 transition">Кабинет</a> <a href="#cabinet" class="hover:opacity-100 transition">Кабинет</a>
<a href="#faq" class="hover:text-emerald-300 transition">FAQ</a> <a href="#faq" class="hover:opacity-100 transition">FAQ</a>
</nav> </nav>
<div class="flex items-center gap-3"> <div class="flex flex-wrap 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"> <!-- Live Color Scheme Switcher (Reflects Prompt Palette + Allows Instant Preview) -->
🔑 Личный кабинет <div class="flex items-center gap-1.5 px-3 py-1.5 rounded-xl bg-black/40 border accent-border" title="Палитра из промпта (можно переключать на лету)">
<span class="text-[10px] uppercase tracking-wider opacity-70 mr-1 hidden sm:inline">🎨 Гамма:</span>
<button type="button" onclick="applyThemePalette('crimson')" id="pal-btn-crimson" title="Цветовая гамма: Алый Огонь (Crimson Neon)"
style="background:#f43f5e;"
class="w-5 h-5 rounded-full transition transform opacity-75 hover:opacity-100 shadow-md"></button>
<button type="button" onclick="applyThemePalette('violet')" id="pal-btn-violet" title="Цветовая гамма: Кибер-Фиолет (Cyber Violet)"
style="background:#a855f7;"
class="w-5 h-5 rounded-full transition transform opacity-75 hover:opacity-100 shadow-md"></button>
<button type="button" onclick="applyThemePalette('cyan')" id="pal-btn-cyan" title="Цветовая гамма: Ледяной Неон (Arctic Cyan)"
style="background:#38bdf8;"
class="w-5 h-5 rounded-full transition transform opacity-75 hover:opacity-100 shadow-md"></button>
<button type="button" onclick="applyThemePalette('amber')" id="pal-btn-amber" title="Цветовая гамма: Кибер-Золото (Gold Amber)"
style="background:#f59e0b;"
class="w-5 h-5 rounded-full transition transform opacity-75 hover:opacity-100 shadow-md"></button>
<button type="button" onclick="applyThemePalette('pink')" id="pal-btn-pink" title="Цветовая гамма: Неоновая Фуксия (Hot Pink)"
style="background:#ec4899;"
class="w-5 h-5 rounded-full transition transform opacity-75 hover:opacity-100 shadow-md"></button>
<button type="button" onclick="applyThemePalette('emerald')" id="pal-btn-emerald" title="Цветовая гамма: Изумрудный Радар (Gorilla Emerald)"
style="background:#4ade80;"
class="w-5 h-5 rounded-full transition transform ring-2 ring-white scale-110 shadow-md"></button>
</div>
<button onclick="openCabinetModal()" class="hidden sm:inline-flex items-center gap-2 px-3.5 py-2 rounded-xl gorilla-subcard hover:brightness-125 text-xs font-bold transition">
🔑 Кабинет
</button> </button>
<a href="#tariffs" class="gorilla-btn px-5 py-2.5 rounded-xl text-xs sm:text-sm tracking-tight"> <a href="#tariffs" class="gorilla-btn px-5 py-2.5 rounded-xl text-xs sm:text-sm tracking-tight">
Подключить → Подключить →
@ -103,22 +150,22 @@
<main class="max-w-7xl mx-auto px-4 sm:px-6 pt-10 pb-24 space-y-28"> <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) --> <!-- HERO SECTION -->
<section class="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-10 items-stretch"> <section class="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-10 items-stretch">
<!-- Left Column (7 cols) --> <!-- Left Column (7 cols) -->
<div class="lg:col-span-7 flex flex-col justify-between space-y-6"> <div class="lg:col-span-7 flex flex-col justify-between space-y-6">
<div class="space-y-5"> <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"> <div class="inline-flex items-center gap-2.5 px-3.5 py-1.5 rounded-full gorilla-subcard accent-text text-[11px] font-bold tracking-wider uppercase">
<span class="w-2 h-2 rounded-full bg-emerald-400 animate-ping"></span> <span class="w-2 h-2 rounded-full accent-bg animate-ping"></span>
УСТАНОВКА ЗА 3 МИНУТЫ · ПРОБНЫЙ ДОСТУП 48 ЧАСОВ УСТАНОВКА ЗА 3 МИНУТЫ · ПРОБНЫЙ ДОСТУП 48 ЧАСОВ
</div> </div>
<h1 class="font-unbounded font-black text-3xl sm:text-5xl xl:text-[52px] leading-[1.08] tracking-tight uppercase text-white"> <h1 class="font-unbounded font-black text-3xl sm:text-5xl xl:text-[50px] 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> БЛОКИРОВОК Катюша VPN: <span class="accent-text">ПРОБИВАЕМ СТЕНЫ</span> БЛОКИРОВОК
</h1> </h1>
<p class="text-emerald-100/80 text-base sm:text-lg leading-relaxed max-w-2xl"> <p class="opacity-85 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 летают на полной скорости. Хочу точно такой же с классным дизайном, чтобы цепляло внимание. Дизайн код базируется на Катюше, сексопильной девушке, которая стреляет по РКН, как будто пробивает стены. Тарифы такие же. Протокол <b class="accent-text">Xray VLESS Reality</b> сносит любые фаерволы и замедления — подключите телефон, ноутбук и телевизор за пару минут.
</p> </p>
<div class="flex flex-wrap items-center gap-4 pt-1"> <div class="flex flex-wrap items-center gap-4 pt-1">
@ -126,23 +173,23 @@
<span>Получить 2 дня за 0 ₽</span> <span>Получить 2 дня за 0 ₽</span>
<span class="text-lg">→</span> <span class="text-lg">→</span>
</button> </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"> <a href="#tariffs" class="px-6 py-4 rounded-xl gorilla-subcard hover:brightness-125 font-bold text-sm sm:text-base transition">
Выбрать тариф (от 191 ₽/мес) Выбрать тариф (от 191 ₽/мес)
</a> </a>
</div> </div>
</div> </div>
<!-- Katyusha Hero Artwork Card (Custom Generated Art: Katyusha Firing Laser Cannon Through RKN Wall) --> <!-- Character & Visual Code Showcase Card -->
<div id="art-showcase" class="gorilla-card p-3 sm:p-4 relative overflow-hidden group"> <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]"> <div class="relative rounded-xl overflow-hidden border accent-border aspect-[16/9] bg-black/60">
<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" /> <img src="/assets/vpn-7561/hero.jpg" alt="Катюша VPN Character Artwork" class="w-full h-full object-cover object-center group-hover:scale-[1.02] transition duration-500" />
<div class="absolute inset-0 bg-gradient-to-t from-[#030d08] via-transparent to-transparent opacity-80"></div> <div class="absolute inset-0 bg-gradient-to-t from-black/90 via-transparent to-transparent opacity-85"></div>
<div class="absolute bottom-3 left-3 right-3 flex flex-wrap items-end justify-between gap-2"> <div class="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="bg-black/80 backdrop-blur-md border accent-border rounded-xl px-3.5 py-2 max-w-xl">
<div class="text-[10px] uppercase tracking-widest text-emerald-400 font-bold">🔥 Фирменный дизайн-код · Катюша против блокировок</div> <div class="text-[10px] uppercase tracking-widest accent-text font-bold">🔥 Персонаж и цветовая гамма по вашему промпту (<span id="activePaletteLabel">Изумрудный Радар (Gorilla Emerald)</span>)</div>
<div class="text-xs sm:text-sm font-bold text-white">Прямой плазменный пробой DPI и стен цензуры без потери скорости</div> <div class="text-xs sm:text-sm font-bold text-white line-clamp-2">Хочу точно такой же с классным дизайном, чтобы цепляло внимание. Дизайн код базируется на Катюше, сексопильной девушке, которая стреляет по РКН, как будто пробивает стены. Тарифы такие же</div>
</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"> <span class="px-3 py-1.5 rounded-lg accent-bg font-unbounded font-extrabold text-xs uppercase shadow-lg">
10 Гбит/с · 0 логов 10 Гбит/с · 0 логов
</span> </span>
</div> </div>
@ -150,83 +197,81 @@
</div> </div>
</div> </div>
<!-- Right Column (5 cols): Authentic GorillaVPN Chamfered Trial Card + Interactive 6-Country Radar --> <!-- Right Column (5 cols): GorillaVPN Chamfered Trial Card + Interactive 6-Country Radar -->
<div class="lg:col-span-5 flex"> <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="gorilla-card w-full p-6 sm:p-7 flex flex-col justify-between space-y-6">
<div class="space-y-4"> <div class="space-y-4">
<div class="flex items-start justify-between gap-3"> <div class="flex items-start justify-between gap-3">
<div> <div>
<div class="text-[11px] uppercase tracking-widest text-emerald-400/80 font-bold">ПРОБНЫЙ ДОСТУП</div> <div class="text-[11px] uppercase tracking-widest accent-text font-bold">ПРОБНЫЙ ДОСТУП</div>
<h2 class="font-unbounded font-extrabold text-xl sm:text-2xl text-white mt-0.5">Katyusha Trial · 2 дня</h2> <h2 class="font-unbounded font-extrabold text-xl sm:text-2xl text-white mt-0.5">Катюша VPN Trial · 2 дня</h2>
</div> </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 class="px-3 py-1 rounded-full gorilla-subcard accent-text text-xs font-bold whitespace-nowrap">
● Активен ● Активен
</span> </span>
</div> </div>
<!-- 3 GorillaVPN Stat Boxes --> <!-- 3 GorillaVPN Stat Boxes -->
<div class="grid grid-cols-3 gap-2.5"> <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="bg-black/45 border accent-border rounded-xl p-3">
<div class="text-[11px] text-emerald-200/60">Срок</div> <div class="text-[11px] opacity-60">Срок</div>
<div class="font-unbounded font-bold text-sm sm:text-base text-white mt-0.5">48 часов</div> <div class="font-unbounded font-bold text-sm sm:text-base text-white mt-0.5">48 часов</div>
</div> </div>
<div class="bg-[#04120c]/90 border border-emerald-500/25 rounded-xl p-3"> <div class="bg-black/45 border accent-border rounded-xl p-3">
<div class="text-[11px] text-emerald-200/60">Устройства</div> <div class="text-[11px] opacity-60">Устройства</div>
<div class="font-unbounded font-bold text-sm sm:text-base text-white mt-0.5">5</div> <div class="font-unbounded font-bold text-sm sm:text-base text-white mt-0.5">5</div>
</div> </div>
<div class="bg-[#04120c]/90 border border-emerald-500/25 rounded-xl p-3"> <div class="bg-black/45 border accent-border rounded-xl p-3">
<div class="text-[11px] text-emerald-200/60">Трафик</div> <div class="text-[11px] opacity-60">Трафик</div>
<div class="font-unbounded font-bold text-sm sm:text-base text-emerald-400 mt-0.5">∞ ГБ</div> <div class="font-unbounded font-bold text-sm sm:text-base accent-text mt-0.5">∞ ГБ</div>
</div> </div>
</div> </div>
</div> </div>
<!-- Interactive Circular Radar (GorillaVPN Signature Element) --> <!-- Interactive Circular Radar -->
<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"> <div class="relative mx-auto w-64 h-64 sm:w-72 sm:h-72 rounded-full border accent-border bg-black/60 flex items-center justify-center overflow-hidden shadow-inner">
<!-- Rotating radar sweep -->
<div class="absolute inset-0 rounded-full radar-sweep pointer-events-none"></div> <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 accent-border opacity-50 pointer-events-none"></div>
<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 accent-border opacity-60 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 accent-bg opacity-15 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 accent-bg opacity-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 --> <!-- Center Character 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"> <div class="relative z-10 w-14 h-14 rounded-full p-0.5 accent-bg shadow-lg">
<img src="/assets/vpn-7561/logo.jpg" alt="Center Radar" class="w-full h-full rounded-full object-cover" /> <img src="/assets/vpn-7561/logo.jpg" alt="Center Radar" class="w-full h-full rounded-full object-cover" />
</div> </div>
<!-- Country Nodes on the Radar --> <!-- 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 onclick="selectRadarCountry('Нидерланды · Амстердам', '14 мс', '940 Мбит/с')" class="absolute top-5 left-10 z-20 px-2.5 py-1 rounded-full gorilla-subcard text-[11px] font-bold hover:brightness-125 transition node-pulse">
🇳🇱 Нидерланды 🇳🇱 Нидерланды
</button> </button>
<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 onclick="selectRadarCountry('Германия · Франкфурт', '18 мс', '910 Мбит/с')" class="absolute top-12 right-4 z-20 px-2.5 py-1 rounded-full gorilla-subcard text-[11px] font-bold hover:brightness-125 transition">
🇩🇪 Германия 🇩🇪 Германия
</button> </button>
<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 onclick="selectRadarCountry('Финляндия · Хельсинки', '11 мс', '980 Мбит/с')" class="absolute bottom-14 left-3 z-20 px-2.5 py-1 rounded-full gorilla-subcard text-[11px] font-bold hover:brightness-125 transition">
🇫🇮 Финляндия 🇫🇮 Финляндия
</button> </button>
<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 onclick="selectRadarCountry('Турция · Стамбул', '29 мс', '860 Мбит/с')" class="absolute bottom-6 right-8 z-20 px-2.5 py-1 rounded-full gorilla-subcard text-[11px] font-bold hover:brightness-125 transition">
🇹🇷 Турция 🇹🇷 Турция
</button> </button>
<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 onclick="selectRadarCountry('Польша · Варшава', '16 мс', '925 Мбит/с')" class="absolute top-1/2 -translate-y-1/2 left-2 z-20 px-2 py-0.5 rounded-full gorilla-subcard text-[10px] font-semibold hover:brightness-125 transition">
🇵🇱 Польша 🇵🇱 Польша
</button> </button>
<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 onclick="selectRadarCountry('Швеция · Стокгольм', '15 мс', '950 Мбит/с')" class="absolute top-1/2 -translate-y-1/2 right-2 z-20 px-2 py-0.5 rounded-full gorilla-subcard text-[10px] font-semibold hover:brightness-125 transition">
🇸🇪 Швеция 🇸🇪 Швеция
</button> </button>
</div> </div>
<!-- Selected Radar Node Status + CTA --> <!-- Selected Radar Node Status + CTA -->
<div class="space-y-3"> <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 class="bg-black/45 border accent-border rounded-xl px-4 py-2.5 flex items-center justify-between text-xs">
<div> <div>
<span class="text-emerald-200/60 block text-[10px] uppercase">Выбранный узел пробоя</span> <span class="opacity-60 block text-[10px] uppercase">Выбранный узел пробоя</span>
<b id="radarLoc" class="text-white font-bold">Нидерланды · Амстердам</b> <b id="radarLoc" class="text-white font-bold">Нидерланды · Амстердам</b>
</div> </div>
<div class="text-right"> <div class="text-right">
<span id="radarPing" class="text-emerald-400 font-mono font-bold block">Пинг: 14 мс</span> <span id="radarPing" class="accent-text font-mono font-bold block">Пинг: 14 мс</span>
<span id="radarSpeed" class="text-[11px] text-emerald-200/70">Канал: 940 Мбит/с</span> <span id="radarSpeed" class="text-[11px] opacity-75">Канал: 940 Мбит/с</span>
</div> </div>
</div> </div>
@ -239,148 +284,146 @@
</div> </div>
</section> </section>
<!-- SECTION 2: КАК ПОДКЛЮЧИТЬ — Установка за 3 минуты (Exact GorillaVPN Device Tabs + 4 Steps) --> <!-- SECTION 2: КАК ПОДКЛЮЧИТЬ — Установка за 3 минуты -->
<section id="how-it-works" class="space-y-8"> <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 class="flex flex-col md:flex-row md:items-end justify-between gap-4">
<div> <div>
<div class="text-xs uppercase tracking-widest text-emerald-400 font-bold">КАК ПОДКЛЮЧИТЬ</div> <div class="text-xs uppercase tracking-widest accent-text font-bold">КАК ПОДКЛЮЧИТЬ</div>
<h2 class="font-unbounded font-extrabold text-2xl sm:text-4xl text-white mt-1">Установка за 3 минуты</h2> <h2 class="font-unbounded font-extrabold text-2xl sm:text-4xl text-white mt-1">Установка за 3 минуты</h2>
</div> </div>
<p class="text-sm text-emerald-100/70 max-w-md"> <p class="text-sm opacity-75 max-w-md">
Выберите ваше устройство — мы дадим готовую ссылку подписки, которая настраивает всё сама в один клик. Выберите ваше устройство — мы дадим готовую ссылку подписки, которая настраивает всё сама в один клик.
</p> </p>
</div> </div>
<!-- 5 Interactive Platform Pills --> <!-- 5 Interactive Platform Pills -->
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-3" id="deviceTabs"> <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"> <button onclick="selectDeviceTab(this, 'iOS', 'Streisand / V2Box из App Store')" class="device-tab gorilla-btn rounded-2xl p-4 text-left transition font-bold shadow-lg">
<div class="font-unbounded text-sm">📱 iOS</div> <div class="font-unbounded text-sm">📱 iOS</div>
<div class="text-xs opacity-80 mt-0.5">iPhone и iPad</div> <div class="text-xs opacity-80 mt-0.5">iPhone и iPad</div>
</button> </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"> <button onclick="selectDeviceTab(this, 'Android', 'Hiddify / v2rayNG из Google Play или APK')" class="device-tab gorilla-subcard hover:brightness-125 text-white rounded-2xl p-4 text-left transition">
<div class="font-unbounded text-sm">🤖 Android</div> <div class="font-unbounded text-sm">🤖 Android</div>
<div class="text-xs text-emerald-200/60 mt-0.5">Смартфоны и планшеты</div> <div class="text-xs opacity-60 mt-0.5">Смартфоны и планшеты</div>
</button> </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"> <button onclick="selectDeviceTab(this, 'macOS', 'Hiddify / Streisand для Mac (M1/M2/M3/Intel)')" class="device-tab gorilla-subcard hover:brightness-125 text-white rounded-2xl p-4 text-left transition">
<div class="font-unbounded text-sm">💻 macOS</div> <div class="font-unbounded text-sm">💻 macOS</div>
<div class="text-xs text-emerald-200/60 mt-0.5">MacBook и iMac</div> <div class="text-xs opacity-60 mt-0.5">MacBook и iMac</div>
</button> </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"> <button onclick="selectDeviceTab(this, 'Windows', 'Hiddify Next для Windows 10 / 11')" class="device-tab gorilla-subcard hover:brightness-125 text-white rounded-2xl p-4 text-left transition">
<div class="font-unbounded text-sm">🖥 Windows</div> <div class="font-unbounded text-sm">🖥 Windows</div>
<div class="text-xs text-emerald-200/60 mt-0.5">ПК и ноутбуки</div> <div class="text-xs opacity-60 mt-0.5">ПК и ноутбуки</div>
</button> </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"> <button onclick="selectDeviceTab(this, 'Android TV', 'v2rayNG / Hiddify TV для YouTube 4K на телевизоре')" class="device-tab gorilla-subcard hover:brightness-125 text-white rounded-2xl p-4 text-left transition">
<div class="font-unbounded text-sm">📺 Android TV</div> <div class="font-unbounded text-sm">📺 Android TV</div>
<div class="text-xs text-emerald-200/60 mt-0.5">Телевизоры и приставки</div> <div class="text-xs opacity-60 mt-0.5">Телевизоры и приставки</div>
</button> </button>
</div> </div>
<!-- 4 Connection Steps (GorillaVPN Structure) --> <!-- 4 Connection Steps -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5"> <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"> <div class="gorilla-card p-6 space-y-3">
<span class="font-unbounded font-black text-2xl text-emerald-400">01</span> <span class="font-unbounded font-black text-2xl accent-text">01</span>
<h3 class="font-unbounded font-bold text-base text-white">Выберите устройство</h3> <h3 class="font-unbounded font-bold text-base text-white">Выберите устройство</h3>
<p class="text-xs text-emerald-100/75 leading-relaxed"> <p class="text-xs opacity-80 leading-relaxed">
Сейчас выбрана платформа: <b id="activeDeviceName" class="text-emerald-300">iOS</b>. Подписка работает сразу на 5 устройствах одновременно. Сейчас выбрана платформа: <b id="activeDeviceName" class="accent-text">iOS</b>. Подписка работает сразу на 5 устройствах одновременно.
</p> </p>
</div> </div>
<div class="gorilla-card p-6 space-y-3"> <div class="gorilla-card p-6 space-y-3">
<span class="font-unbounded font-black text-2xl text-emerald-400">02</span> <span class="font-unbounded font-black text-2xl accent-text">02</span>
<h3 class="font-unbounded font-bold text-base text-white">Скачайте приложение</h3> <h3 class="font-unbounded font-bold text-base text-white">Скачайте приложение</h3>
<p class="text-xs text-emerald-100/75 leading-relaxed"> <p class="text-xs opacity-80 leading-relaxed">
Рекомендуемый клиент: <b id="activeDeviceApp" class="text-emerald-300">Streisand / V2Box из App Store</b>. Установка занимает 20 секунд. Рекомендуемый клиент: <b id="activeDeviceApp" class="accent-text">Streisand / V2Box из App Store</b>. Установка занимает 20 секунд.
</p> </p>
</div> </div>
<div class="gorilla-card p-6 space-y-3"> <div class="gorilla-card p-6 space-y-3">
<span class="font-unbounded font-black text-2xl text-emerald-400">03</span> <span class="font-unbounded font-black text-2xl accent-text">03</span>
<h3 class="font-unbounded font-bold text-base text-white">Активируйте в 1 клик</h3> <h3 class="font-unbounded font-bold text-base text-white">Активируйте в 1 клик</h3>
<p class="text-xs text-emerald-100/75 leading-relaxed"> <p class="text-xs opacity-80 leading-relaxed">
Нажмите «Добавить подписку» в личном кабинете или Telegram-боте — все локации появятся автоматически. Нажмите «Добавить подписку» в личном кабинете или Telegram-боте — все локации появятся автоматически.
</p> </p>
</div> </div>
<div class="gorilla-card p-6 space-y-3"> <div class="gorilla-card p-6 space-y-3">
<span class="font-unbounded font-black text-2xl text-emerald-400">04</span> <span class="font-unbounded font-black text-2xl accent-text">04</span>
<h3 class="font-unbounded font-bold text-base text-white">Готово — вы под защитой</h3> <h3 class="font-unbounded font-bold text-base text-white">Готово — вы под защитой</h3>
<p class="text-xs text-emerald-100/75 leading-relaxed"> <p class="text-xs opacity-80 leading-relaxed">
Катюша пробивает любые блокировки: открывайте YouTube 4K, Instagram, звонки и игры без ограничений. Никаких стен и ограничений: открывайте YouTube 4K, Instagram, звонки и игры на максимальной скорости.
</p> </p>
</div> </div>
</div> </div>
</section> </section>
<!-- SECTION 3: ТАРИФЫ (Exact 4 GorillaVPN Plans: 239 ₽ / 649 ₽ / 1 219 ₽ / 2 299 ₽ + Promo & Gift Controls) --> <!-- SECTION 3: ТАРИФЫ (Exact 4 GorillaVPN Plans: 239 ₽ / 649 ₽ / 1 219 ₽ / 2 299 ₽) -->
<section id="tariffs" class="space-y-8"> <section id="tariffs" class="space-y-8">
<div class="flex flex-col lg:flex-row lg:items-end justify-between gap-4"> <div class="flex flex-col lg:flex-row lg:items-end justify-between gap-4">
<div> <div>
<div class="text-xs uppercase tracking-widest text-emerald-400 font-bold">ТАРИФЫ</div> <div class="text-xs uppercase tracking-widest accent-text font-bold">ТАРИФЫ</div>
<h2 class="font-unbounded font-extrabold text-2xl sm:text-4xl text-white mt-1">Один тариф — все возможности</h2> <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"> <p class="text-sm opacity-75 mt-2">
Никаких урезанных версий: на любом сроке доступны все локации 10 Гбит/с, 5 устройств и безлимитный трафик. Никаких урезанных версий: на любом сроке доступны все локации 10 Гбит/с, 5 устройств и безлимитный трафик.
</p> </p>
</div> </div>
<!-- Promo Code & Gift Toggle (From GorillaVPN Tariffs Block) -->
<div class="flex flex-wrap items-center gap-3"> <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"> <div class="flex items-center gorilla-subcard rounded-xl px-3 py-2">
<input id="promoInput" type="text" placeholder="Промокод (напр. KATYUSHA)" class="bg-transparent text-xs text-white placeholder-emerald-200/40 outline-none w-44" /> <input id="promoInput" type="text" placeholder="Промокод (напр. KATYUSHA)" class="bg-transparent text-xs text-white placeholder-white/40 outline-none w-44" />
<button onclick="applyPromo()" class="text-xs font-bold text-emerald-400 hover:text-emerald-300 ml-2">Применить</button> <button onclick="applyPromo()" class="text-xs font-bold accent-text ml-2">Применить</button>
</div> </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"> <label class="cursor-pointer inline-flex items-center gap-2 gorilla-subcard rounded-xl px-3.5 py-2 text-xs">
<input type="checkbox" id="giftToggle" class="accent-emerald-400 rounded" /> <input type="checkbox" id="giftToggle" class="rounded" />
<span>🎁 Подарить подписку другу</span> <span>🎁 Подарить подписку другу</span>
</label> </label>
</div> </div>
</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"> <div id="promoBanner" class="hidden gorilla-subcard rounded-xl px-4 py-2.5 text-xs accent-text font-semibold">
🔥 Промокод активирован! Дополнительные +7 дней бонусом к любому выбранному тарифу. 🔥 Промокод активирован! Дополнительные +7 дней бонусом к любому выбранному тарифу.
</div> </div>
<!-- 4 Tariff Cards Grid (Exact GorillaVPN Numbers) -->
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6"> <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6">
<!-- Plan 1: 1 Month (239 ₽) --> <!-- Plan 1: 1 Month (239 ₽) -->
<div class="gorilla-card p-6 flex flex-col justify-between"> <div class="gorilla-card p-6 flex flex-col justify-between">
<div class="space-y-4"> <div class="space-y-4">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<span class="font-unbounded font-bold text-lg text-white">1 месяц</span> <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> <span class="text-[11px] px-2.5 py-0.5 rounded-full gorilla-subcard accent-text">Старт</span>
</div> </div>
<div> <div>
<div class="font-unbounded font-black text-3xl sm:text-4xl text-white">239 ₽</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 class="text-xs opacity-75 mt-1">239 ₽/мес · Попробовать на месяц</div>
</div> </div>
<ul class="space-y-2.5 text-xs text-emerald-100/85 pt-3 border-t border-emerald-500/20"> <ul class="space-y-2.5 text-xs opacity-90 pt-3 border-t accent-border">
<li class="flex items-center gap-2">✅ <span><b>5 устройств</b> одновременно</span></li> <li class="flex items-center gap-2">✅ <span><b>5 устройств</b> одновременно</span></li>
<li class="flex items-center gap-2">✅ <span><b>Безлимитный</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>Все локации (VLESS Reality)</span></li>
<li class="flex items-center gap-2">💳 <span class="text-emerald-300/80">СБП · QR-код · Крипто · Telegram Stars</span></li> <li class="flex items-center gap-2">💳 <span class="accent-text">СБП · QR-код · Крипто · Telegram Stars</span></li>
</ul> </ul>
</div> </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"> <button onclick="openCheckoutModal('1 месяц', '239 ₽', '239 ₽/мес')" class="mt-7 w-full py-3.5 rounded-xl gorilla-subcard hover:brightness-125 font-unbounded font-bold text-xs uppercase transition">
Оформить за 239 ₽ → Оформить за 239 ₽ →
</button> </button>
</div> </div>
<!-- Plan 2: 3 Months (649 ₽ — Популярный, Экономия 10%) --> <!-- 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="gorilla-card p-6 flex flex-col justify-between relative">
<div class="space-y-4"> <div class="space-y-4">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<span class="font-unbounded font-bold text-lg text-white">3 месяца</span> <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> <span class="text-[11px] px-2.5 py-0.5 rounded-full accent-bg font-extrabold uppercase">Популярный</span>
</div> </div>
<div> <div>
<div class="font-unbounded font-black text-3xl sm:text-4xl text-emerald-300">649 ₽</div> <div class="font-unbounded font-black text-3xl sm:text-4xl accent-text">649 ₽</div>
<div class="flex items-center gap-2 mt-1"> <div class="flex items-center gap-2 mt-1">
<span class="text-xs text-white font-semibold">216 ₽/мес</span> <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> <span class="text-[11px] px-2 py-0.5 rounded gorilla-subcard accent-text font-bold">Экономия 10%</span>
</div> </div>
<div class="text-[11px] text-emerald-200/60 mt-0.5">Оптимальный старт</div> <div class="text-[11px] opacity-60 mt-0.5">Оптимальный старт</div>
</div> </div>
<ul class="space-y-2.5 text-xs text-emerald-100/85 pt-3 border-t border-emerald-500/20"> <ul class="space-y-2.5 text-xs opacity-90 pt-3 border-t accent-border">
<li class="flex items-center gap-2">✅ <span><b>5 устройств</b> одновременно</span></li> <li class="flex items-center gap-2">✅ <span><b>5 устройств</b> одновременно</span></li>
<li class="flex items-center gap-2">✅ <span><b>Безлимитный</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>Приоритетный канал YouTube 4K</span></li>
<li class="flex items-center gap-2">💳 <span class="text-emerald-300/80">СБП · QR-код · Крипто · Telegram Stars</span></li> <li class="flex items-center gap-2">💳 <span class="accent-text">СБП · QR-код · Крипто · Telegram Stars</span></li>
</ul> </ul>
</div> </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"> <button onclick="openCheckoutModal('3 месяца', '649 ₽', '216 ₽/мес (Экономия 10%)')" class="gorilla-btn mt-7 w-full py-3.5 rounded-xl font-unbounded text-xs uppercase">
@ -393,26 +436,26 @@
<div class="space-y-4"> <div class="space-y-4">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<span class="font-unbounded font-bold text-lg text-white">6 месяцев</span> <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> <span class="text-[11px] px-2.5 py-0.5 rounded-full gorilla-subcard accent-text font-bold">Экономия 15%</span>
</div> </div>
<div> <div>
<div class="font-unbounded font-black text-3xl sm:text-4xl text-white">1 219 ₽</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 class="text-xs opacity-75 mt-1">203 ₽/мес · Полгода спокойствия</div>
</div> </div>
<ul class="space-y-2.5 text-xs text-emerald-100/85 pt-3 border-t border-emerald-500/20"> <ul class="space-y-2.5 text-xs opacity-90 pt-3 border-t accent-border">
<li class="flex items-center gap-2">✅ <span><b>5 устройств</b> одновременно</span></li> <li class="flex items-center gap-2">✅ <span><b>5 устройств</b> одновременно</span></li>
<li class="flex items-center gap-2">✅ <span><b>Безлимитный</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>Защита от DPI и авто-ротация узлов</span></li>
<li class="flex items-center gap-2">💳 <span class="text-emerald-300/80">СБП · QR-код · Крипто · Telegram Stars</span></li> <li class="flex items-center gap-2">💳 <span class="accent-text">СБП · QR-код · Крипто · Telegram Stars</span></li>
</ul> </ul>
</div> </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"> <button onclick="openCheckoutModal('6 месяцев', '1 219 ₽', '203 ₽/мес (Экономия 15%)')" class="mt-7 w-full py-3.5 rounded-xl gorilla-subcard hover:brightness-125 font-unbounded font-bold text-xs uppercase transition">
Выбрать 6 месяцев → Выбрать 6 месяцев →
</button> </button>
</div> </div>
<!-- Plan 4: 12 Months (2 299 ₽ — Выгодно, Экономия 20%) --> <!-- 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="gorilla-card p-6 flex flex-col justify-between relative">
<div class="space-y-4"> <div class="space-y-4">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<span class="font-unbounded font-bold text-lg text-white">12 месяцев</span> <span class="font-unbounded font-bold text-lg text-white">12 месяцев</span>
@ -421,15 +464,15 @@
<div> <div>
<div class="font-unbounded font-black text-3xl sm:text-4xl text-white">2 299 ₽</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"> <div class="flex items-center gap-2 mt-1">
<span class="text-xs text-emerald-300 font-bold">191 ₽/мес</span> <span class="text-xs accent-text font-bold">191 ₽/мес</span>
<span class="text-[11px] text-emerald-200/60">Максимальная выгода</span> <span class="text-[11px] opacity-60">Максимальная выгода</span>
</div> </div>
</div> </div>
<ul class="space-y-2.5 text-xs text-emerald-100/85 pt-3 border-t border-emerald-500/20"> <ul class="space-y-2.5 text-xs opacity-90 pt-3 border-t accent-border">
<li class="flex items-center gap-2">✅ <span><b>5 устройств</b> + настройка роутера</span></li> <li class="flex items-center gap-2">✅ <span><b>5 устройств</b> + настройка роутера</span></li>
<li class="flex items-center gap-2">✅ <span><b>Безлимитный</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>VIP-серверы с минимальным пингом</span></li>
<li class="flex items-center gap-2">💳 <span class="text-emerald-300/80">СБП · QR-код · Крипто · Telegram Stars</span></li> <li class="flex items-center gap-2">💳 <span class="accent-text">СБП · QR-код · Крипто · Telegram Stars</span></li>
</ul> </ul>
</div> </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"> <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">
@ -439,85 +482,84 @@
</div> </div>
</section> </section>
<!-- SECTION 4: ЛИЧНЫЙ КАБИНЕТ — Всё управление в одном кабинете (GorillaVPN Section) --> <!-- SECTION 4: ЛИЧНЫЙ КАБИНЕТ -->
<section id="cabinet" class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-center"> <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="lg:col-span-5 space-y-5">
<div class="text-xs uppercase tracking-widest text-emerald-400 font-bold">ЛИЧНЫЙ КАБИНЕТ</div> <div class="text-xs uppercase tracking-widest accent-text font-bold">ЛИЧНЫЙ КАБИНЕТ</div>
<h2 class="font-unbounded font-extrabold text-2xl sm:text-4xl text-white leading-tight"> <h2 class="font-unbounded font-extrabold text-2xl sm:text-4xl text-white leading-tight">
Всё управление в одном кабинете Всё управление в одном кабинете
</h2> </h2>
<p class="text-sm text-emerald-100/75 leading-relaxed"> <p class="text-sm opacity-75 leading-relaxed">
Никаких сложных конфигов и ручных переключений. Управляйте своими устройствами, продлевайте доступ через СБП и делитесь QR-кодом прямо в браузере или Telegram. Никаких сложных конфигов и ручных переключений. Управляйте своими устройствами, продлевайте доступ через СБП и делитесь QR-кодом прямо в браузере или Telegram.
</p> </p>
<div class="grid grid-cols-2 gap-3 pt-2"> <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="gorilla-subcard rounded-2xl p-4">
<div class="font-unbounded font-extrabold text-xl text-emerald-400">5 устройств</div> <div class="font-unbounded font-extrabold text-xl accent-text">5 устройств</div>
<div class="text-xs text-emerald-100/70 mt-1">на одну подписку без доплат</div> <div class="text-xs opacity-70 mt-1">на одну подписку без доплат</div>
</div> </div>
<div class="bg-[#071c13] border border-emerald-500/25 rounded-2xl p-4"> <div class="gorilla-subcard rounded-2xl p-4">
<div class="font-unbounded font-extrabold text-xl text-emerald-400">6 платформ</div> <div class="font-unbounded font-extrabold text-xl accent-text">6 платформ</div>
<div class="text-xs text-emerald-100/70 mt-1">iOS, Android, Win, Mac, Linux, TV</div> <div class="text-xs opacity-70 mt-1">iOS, Android, Win, Mac, Linux, TV</div>
</div> </div>
<div class="bg-[#071c13] border border-emerald-500/25 rounded-2xl p-4"> <div class="gorilla-subcard rounded-2xl p-4">
<div class="font-unbounded font-extrabold text-sm text-white">QR и ссылка</div> <div class="font-unbounded font-extrabold text-sm text-white">QR и ссылка</div>
<div class="text-xs text-emerald-100/70 mt-1">для мгновенного подключения</div> <div class="text-xs opacity-70 mt-1">для мгновенного подключения</div>
</div> </div>
<div class="bg-[#071c13] border border-emerald-500/25 rounded-2xl p-4"> <div class="gorilla-subcard rounded-2xl p-4">
<div class="font-unbounded font-extrabold text-sm text-white">Без автосписаний</div> <div class="font-unbounded font-extrabold text-sm text-white">Без автосписаний</div>
<div class="text-xs text-emerald-100/70 mt-1">прозрачная история платежей</div> <div class="text-xs opacity-70 mt-1">прозрачная история платежей</div>
</div> </div>
</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="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 flex-wrap items-center justify-between gap-3 pb-4 border-b accent-border">
<div class="flex items-center gap-3"> <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" /> <img src="/assets/vpn-7561/logo.jpg" alt="Avatar" class="w-10 h-10 rounded-full object-cover border accent-border" />
<div> <div>
<div class="font-unbounded font-bold text-sm text-white">Кабинет бойца · #KTY-7561</div> <div class="font-unbounded font-bold text-sm text-white">Кабинет · #VPN-7561</div>
<div class="text-xs text-emerald-400">Подписка активна · Тариф «Оптимальный»</div> <div class="text-xs accent-text">Подписка активна · Тариф «Оптимальный»</div>
</div> </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"> <button onclick="openTrialModal()" class="px-3.5 py-2 rounded-xl gorilla-subcard hover:brightness-125 accent-text text-xs font-bold transition">
📲 Показать QR-код ключа 📲 Показать QR-код ключа
</button> </button>
</div> </div>
<div class="grid grid-cols-1 sm:grid-cols-3 gap-3 text-xs"> <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"> <div class="bg-black/45 border accent-border rounded-xl p-3.5">
<span class="text-emerald-200/60">Активные устройства</span> <span class="opacity-60">Активные устройства</span>
<div class="font-unbounded font-bold text-base text-white mt-1">3 из 5 подключено</div> <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 class="text-[11px] accent-text mt-0.5">iPhone 16 Pro · MacBook · Sony TV</div>
</div> </div>
<div class="bg-[#04120c] border border-emerald-500/20 rounded-xl p-3.5"> <div class="bg-black/45 border accent-border rounded-xl p-3.5">
<span class="text-emerald-200/60">Протокол маскировки</span> <span class="opacity-60">Протокол маскировки</span>
<div class="font-unbounded font-bold text-base text-emerald-300 mt-1">VLESS Reality</div> <div class="font-unbounded font-bold text-base accent-text mt-1">VLESS Reality</div>
<div class="text-[11px] text-emerald-200/60 mt-0.5">Порт 443 · TLS 1.3 Stealth</div> <div class="text-[11px] opacity-60 mt-0.5">Порт 443 · TLS 1.3 Stealth</div>
</div> </div>
<div class="bg-[#04120c] border border-emerald-500/20 rounded-xl p-3.5"> <div class="bg-black/45 border accent-border rounded-xl p-3.5">
<span class="text-emerald-200/60">Быстрая оплата</span> <span class="opacity-60">Быстрая оплата</span>
<div class="font-unbounded font-bold text-base text-white mt-1">СБП / Stars</div> <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 class="text-[11px] accent-text mt-0.5">Мгновенное продление</div>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<!-- SECTION 5: ЧАСТЫЕ ВОПРОСЫ (9 GorillaVPN FAQ Items) --> <!-- SECTION 5: ЧАСТЫЕ ВОПРОСЫ -->
<section id="faq" class="space-y-6"> <section id="faq" class="space-y-6">
<div> <div>
<div class="text-xs uppercase tracking-widest text-emerald-400 font-bold">ВОПРОСЫ И ОТВЕТЫ</div> <div class="text-xs uppercase tracking-widest accent-text font-bold">ВОПРОСЫ И ОТВЕТЫ</div>
<h2 class="font-unbounded font-extrabold text-2xl sm:text-4xl text-white mt-1">Частые вопросы</h2> <h2 class="font-unbounded font-extrabold text-2xl sm:text-4xl text-white mt-1">Частые вопросы</h2>
</div> </div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<details class="gorilla-card p-5 group open:border-emerald-400/50"> <details class="gorilla-card p-5 group">
<summary class="font-unbounded font-bold text-sm text-white cursor-pointer flex items-center justify-between"> <summary class="font-unbounded font-bold text-sm text-white cursor-pointer flex items-center justify-between">
<span>Как получить пробный доступ на 48 часов за 0 ₽?</span> <span>Как получить пробный доступ на 48 часов за 0 ₽?</span>
<span class="text-emerald-400 group-open:rotate-45 transition">+</span> <span class="accent-text group-open:rotate-45 transition">+</span>
</summary> </summary>
<p class="text-xs text-emerald-100/75 mt-3 leading-relaxed"> <p class="text-xs opacity-80 mt-3 leading-relaxed">
Нажмите кнопку «Получить 2 дня за 0 ₽» — вы сразу получите готовую ссылку подписки VLESS Reality на 48 часов для 5 устройств без привязки банковской карты. Нажмите кнопку «Получить 2 дня за 0 ₽» — вы сразу получите готовую ссылку подписки VLESS Reality на 48 часов для 5 устройств без привязки банковской карты.
</p> </p>
</details> </details>
@ -525,9 +567,9 @@
<details class="gorilla-card p-5 group"> <details class="gorilla-card p-5 group">
<summary class="font-unbounded font-bold text-sm text-white cursor-pointer flex items-center justify-between"> <summary class="font-unbounded font-bold text-sm text-white cursor-pointer flex items-center justify-between">
<span>Почему Катюша VPN не блокируется провайдерами?</span> <span>Почему Катюша VPN не блокируется провайдерами?</span>
<span class="text-emerald-400 group-open:rotate-45 transition">+</span> <span class="accent-text group-open:rotate-45 transition">+</span>
</summary> </summary>
<p class="text-xs text-emerald-100/75 mt-3 leading-relaxed"> <p class="text-xs opacity-80 mt-3 leading-relaxed">
Мы используем современный протокол Xray VLESS Reality с маскировкой под обычный HTTPS-трафик зарубежных сайтов. Системы ТСПУ/DPI не могут отличить его от обычного серфинга. Мы используем современный протокол Xray VLESS Reality с маскировкой под обычный HTTPS-трафик зарубежных сайтов. Системы ТСПУ/DPI не могут отличить его от обычного серфинга.
</p> </p>
</details> </details>
@ -535,9 +577,9 @@
<details class="gorilla-card p-5 group"> <details class="gorilla-card p-5 group">
<summary class="font-unbounded font-bold text-sm text-white cursor-pointer flex items-center justify-between"> <summary class="font-unbounded font-bold text-sm text-white cursor-pointer flex items-center justify-between">
<span>Сколько устройств можно подключить по одной подписке?</span> <span>Сколько устройств можно подключить по одной подписке?</span>
<span class="text-emerald-400 group-open:rotate-45 transition">+</span> <span class="accent-text group-open:rotate-45 transition">+</span>
</summary> </summary>
<p class="text-xs text-emerald-100/75 mt-3 leading-relaxed"> <p class="text-xs opacity-80 mt-3 leading-relaxed">
До 5 устройств одновременно: например, ваш смартфон, ноутбук, планшет, домашний ПК и телевизор Android TV / Apple TV. До 5 устройств одновременно: например, ваш смартфон, ноутбук, планшет, домашний ПК и телевизор Android TV / Apple TV.
</p> </p>
</details> </details>
@ -545,72 +587,64 @@
<details class="gorilla-card p-5 group"> <details class="gorilla-card p-5 group">
<summary class="font-unbounded font-bold text-sm text-white cursor-pointer flex items-center justify-between"> <summary class="font-unbounded font-bold text-sm text-white cursor-pointer flex items-center justify-between">
<span>Какими способами можно оплатить подписку?</span> <span>Какими способами можно оплатить подписку?</span>
<span class="text-emerald-400 group-open:rotate-45 transition">+</span> <span class="accent-text group-open:rotate-45 transition">+</span>
</summary> </summary>
<p class="text-xs text-emerald-100/75 mt-3 leading-relaxed"> <p class="text-xs opacity-80 mt-3 leading-relaxed">
Доступна моментальная оплата через СБП (по QR-коду любого российского банка), криптовалюту (USDT/TON) и Telegram Stars. Никаких скрытых автосписаний. Доступна моментальная оплата через СБП (по QR-коду любого российского банка), криптовалюту (USDT/TON) и Telegram Stars. Никаких скрытых автосписаний.
</p> </p>
</details> </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> </div>
</section> </section>
<!-- PM Reference Analysis Footer Block --> <!-- PM Reference Analysis Footer Block -->
<section class="pt-8 border-t border-emerald-500/20 space-y-4"> <section class="pt-8 border-t accent-border space-y-4">
<div class="flex flex-wrap items-center justify-between gap-2"> <div class="flex flex-wrap items-center justify-between gap-2">
<div> <div>
<h3 class="text-xs font-unbounded font-bold text-emerald-400 uppercase">🔍 Исследованный референс и дизайн-система (`contracts/WEB_REFERENCES.md`)</h3> <h3 class="text-xs font-unbounded font-bold accent-text 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> <p class="text-xs opacity-60">Спарсено из React SPA бандла <code>gorillavpn.pro</code> + адаптирована цветовая гамма и персонаж из промпта</p>
</div> </div>
<a href="/" class="text-xs text-emerald-300 hover:underline">← Вернуться в панель управления Виртуальным Офисом</a> <a href="/" class="text-xs accent-text hover:underline">← Вернуться в панель управления Виртуальным Офисом</a>
</div> </div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4"> <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"> <a href="https://gorillavpn.pro/" target="_blank" class="block gorilla-subcard hover:brightness-110 rounded-2xl p-4 transition">
<div class="text-xs font-bold text-emerald-400 truncate">🎯 Ваш референс-образец: Gorilla</div> <div class="text-xs font-bold accent-text truncate">🎯 Ваш референс-образец: Gorilla</div>
<div class="text-[11px] text-emerald-200/50 truncate mt-0.5 font-mono">https://gorillavpn.pro/</div> <div class="text-[11px] opacity-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> <p class="text-xs opacity-80 mt-2 line-clamp-3">Шрифты: Manrope, Unbounded • Блоки и тексты SPA: Тарифы | Установка | Кабинет | Вопросы | Навигация по сайту | Открыть кабинет | Меню | Меню Gorilla VPN | Разделы сайта Gorilla VPN | Мобильное меню | Нидерланды | Амстердам | Германия | Франкфурт | Турция | Стамбул | Польша | Варшава • Точные тарифы с сайта: 1 месяц: 239 ₽, 3 месяца: 649 ₽, 6 месяцев: 1219 ₽, 12 месяцев: 2299 ₽</p>
</a> </a>
<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"> <a href="https://mullvad.net/en" target="_blank" class="block gorilla-subcard hover:brightness-110 rounded-2xl p-4 transition">
<div class="text-xs font-bold text-emerald-400 truncate">Mullvad VPN — Эталон минимализма, прозрачности и оплаты в 1 клик (вкл. крипто)</div> <div class="text-xs font-bold accent-text truncate">Mullvad VPN — Эталон минимализма, прозрачности и оплаты в 1 клик (вкл. крипто)</div>
<div class="text-[11px] text-emerald-200/50 truncate mt-0.5 font-mono">https://mullvad.net/en</div> <div class="text-[11px] opacity-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> <p class="text-xs opacity-80 mt-2 line-clamp-3">Ключевые паттерны: генерация аккаунта без email, мгновенный выбор протокола WireGuard/Shadowsocks, честная цена, нулевое логирование.</p>
</a> </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"> <a href="https://protonvpn.com" target="_blank" class="block gorilla-subcard hover:brightness-110 rounded-2xl p-4 transition">
<div class="text-xs font-bold text-emerald-400 truncate">Proton VPN — Премиальный тёмный UI с интерактивной картой серверов и сравнением скоростей</div> <div class="text-xs font-bold accent-text truncate">Proton VPN — Премиальный тёмный UI с интерактивной картой серверов и сравнением скоростей</div>
<div class="text-[11px] text-emerald-200/50 truncate mt-0.5 font-mono">https://protonvpn.com</div> <div class="text-[11px] opacity-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> <p class="text-xs opacity-80 mt-2 line-clamp-3">Ключевые паттерны: переключатель тарифов (1 мес / 1 год / 2 года со скидкой 60%), таблица скорости 10 Gbps, бейджи стриминга (Netflix/YouTube 4K).</p>
</a> </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"> <a href="https://amnezia.org" target="_blank" class="block gorilla-subcard hover:brightness-110 rounded-2xl p-4 transition">
<div class="text-xs font-bold text-emerald-400 truncate">Amnezia / Outline VPN — Фокус на обход блокировок (VLESS / Xray Reality) и приложения под все ОС</div> <div class="text-xs font-bold accent-text 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> <div class="text-[11px] opacity-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> <p class="text-xs opacity-80 mt-2 line-clamp-3">Ключевые паттерны: кнопки быстрого скачивания (iOS, Android, macOS, Windows, роутеры), выдача ключа для Telegram-бота в 1 клик.</p>
</a> </a>
</div> </div>
</section> </section>
<section class="max-w-6xl mx-auto px-6 my-4">
<div class="bg-amber-500/15 border border-amber-500/40 rounded-2xl p-4 flex items-center justify-between">
<div>
<span class="text-xs font-bold uppercase text-amber-300">🛠 Новая фича на DEV-стенде (FEAT-09)</span>
<h4 class="font-bold text-sm text-white mt-0.5">Реферальная программа «Приведи друга — получи +14 дней VPN»</h4>
<p class="text-xs text-slate-300">Генерация персональной реферальной ссылки и учёт бонусных дней в личном кабинете.</p>
</div>
<span class="px-3 py-1 rounded-full text-xs bg-amber-500/20 text-amber-300 font-mono">ветка: dev (feat/feat-09)</span>
</div>
</section>
</main> </main>
<!-- Interactive Checkout / Free Trial Modal --> <!-- Interactive Checkout / Free Trial Modal -->
@ -618,30 +652,30 @@
<div class="gorilla-card max-w-lg w-full p-6 sm:p-7 space-y-5"> <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 justify-between">
<div class="flex items-center gap-3"> <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" /> <img src="/assets/vpn-7561/logo.jpg" alt="Logo" class="w-10 h-10 rounded-full object-cover border accent-border" />
<div> <div>
<h4 id="modalTitle" class="font-unbounded font-bold text-base text-white">Katyusha Trial · 48 часов за 0 ₽</h4> <h4 id="modalTitle" class="font-unbounded font-bold text-base text-white">Катюша VPN Trial · 48 часов за 0 ₽</h4>
<p id="modalSub" class="text-xs text-emerald-400">5 устройств · Безлимитный трафик · VLESS Reality</p> <p id="modalSub" class="text-xs accent-text">5 устройств · Безлимитный трафик · VLESS Reality</p>
</div> </div>
</div> </div>
<button onclick="closeCheckoutModal()" class="text-emerald-200/60 hover:text-white text-lg font-bold">✕</button> <button onclick="closeCheckoutModal()" class="opacity-60 hover:opacity-100 text-lg font-bold">✕</button>
</div> </div>
<div class="bg-[#030d08] border border-emerald-500/30 rounded-xl p-4 space-y-2"> <div class="bg-black/60 border accent-border rounded-xl p-4 space-y-2">
<div class="flex items-center justify-between text-[11px] text-emerald-300"> <div class="flex items-center justify-between text-[11px] accent-text">
<span>Ваша персональная VLESS Reality ссылка подписки:</span> <span>Ваша персональная VLESS Reality ссылка подписки:</span>
<button onclick="navigator.clipboard.writeText(document.getElementById('vlessKey').innerText);this.innerText='✅ Скопировано!'" class="font-bold underline">Скопировать</button> <button onclick="navigator.clipboard.writeText(document.getElementById('vlessKey').innerText);this.innerText='✅ Скопировано!'" class="font-bold underline">Скопировать</button>
</div> </div>
<div id="vlessKey" class="font-mono text-[11px] text-emerald-400 break-all select-all"> <div id="vlessKey" class="font-mono text-[11px] accent-text 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 vless://vpn-7561-reality@nl-amsterdam.vo-office.com:443?security=reality&sni=www.cloudflare.com&fp=chrome&pbk=KatyushaLaser2026&type=grpc#Катюша_VPN_10Gbps
</div> </div>
</div> </div>
<div class="grid grid-cols-2 sm:grid-cols-4 gap-2 text-center text-[11px] font-bold"> <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="gorilla-subcard rounded-lg py-2 accent-text">⚡ СБП QR</div>
<div class="bg-[#072015] border border-emerald-500/20 rounded-lg py-2 text-emerald-100/80">💎 USDT / TON</div> <div class="gorilla-subcard rounded-lg py-2 opacity-85">💎 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="gorilla-subcard rounded-lg py-2 opacity-85">⭐ TG Stars</div>
<div class="bg-[#072015] border border-emerald-500/20 rounded-lg py-2 text-emerald-100/80">💳 Карта РФ</div> <div class="gorilla-subcard rounded-lg py-2 opacity-85">💳 Карта РФ</div>
</div> </div>
<button onclick="closeCheckoutModal()" class="gorilla-btn w-full py-3.5 rounded-xl font-unbounded text-xs uppercase"> <button onclick="closeCheckoutModal()" class="gorilla-btn w-full py-3.5 rounded-xl font-unbounded text-xs uppercase">
@ -651,6 +685,31 @@
</div> </div>
<script> <script>
const PALETTES = {"crimson": {"key": "crimson", "name": "Алый Огонь (Crimson Neon)", "bg_deep": "#110408", "bg_card": "#1f0710", "bg_card_hover": "#2d0b18", "accent": "#f43f5e", "accent_bright": "#fb7185", "accent_rgb": "244, 63, 94", "text_main": "#fff1f2", "prompt_color_en": "deep obsidian crimson (#110408) background with glowing ruby red (#f43f5e) and fiery rose neon accents"}, "violet": {"key": "violet", "name": "Кибер-Фиолет (Cyber Violet)", "bg_deep": "#090414", "bg_card": "#140929", "bg_card_hover": "#1f0e3d", "accent": "#a855f7", "accent_bright": "#c084fc", "accent_rgb": "168, 85, 247", "text_main": "#faf5ff", "prompt_color_en": "deep cyber violet (#090414) background with electric purple (#a855f7) and magenta neon accents"}, "cyan": {"key": "cyan", "name": "Ледяной Неон (Arctic Cyan)", "bg_deep": "#030b14", "bg_card": "#071729", "bg_card_hover": "#0c233d", "accent": "#38bdf8", "accent_bright": "#7dd3fc", "accent_rgb": "56, 189, 248", "text_main": "#f0f9ff", "prompt_color_en": "deep abyssal navy (#030b14) background with electric ice cyan (#38bdf8) and laser blue neon accents"}, "amber": {"key": "amber", "name": "Кибер-Золото (Gold Amber)", "bg_deep": "#120c03", "bg_card": "#211606", "bg_card_hover": "#302009", "accent": "#f59e0b", "accent_bright": "#fbbf24", "accent_rgb": "245, 158, 11", "text_main": "#fffbeb", "prompt_color_en": "deep onyx black-gold (#120c03) background with glowing cyber gold (#f59e0b) and warm amber neon accents"}, "pink": {"key": "pink", "name": "Неоновая Фуксия (Hot Pink)", "bg_deep": "#14040d", "bg_card": "#260819", "bg_card_hover": "#380c25", "accent": "#ec4899", "accent_bright": "#f472b6", "accent_rgb": "236, 72, 153", "text_main": "#fdf2f8", "prompt_color_en": "deep dark magenta-noir (#14040d) background with hot neon pink (#ec4899) and electric rose accents"}, "emerald": {"key": "emerald", "name": "Изумрудный Радар (Gorilla Emerald)", "bg_deep": "#04100b", "bg_card": "#081d14", "bg_card_hover": "#0d2b1e", "accent": "#4ade80", "accent_bright": "#86efac", "accent_rgb": "74, 222, 128", "text_main": "#ecfdf5", "prompt_color_en": "deep dark emerald (#04100b) background with glowing mint green (#4ade80) and cyber lime accents"}};
function applyThemePalette(key) {
const p = PALETTES[key];
if (!p) return;
const root = document.documentElement;
root.style.setProperty('--bg-deep', p.bg_deep);
root.style.setProperty('--bg-card', p.bg_card);
root.style.setProperty('--bg-card-hover', p.bg_card_hover);
root.style.setProperty('--accent', p.accent);
root.style.setProperty('--accent-bright', p.accent_bright);
root.style.setProperty('--accent-rgb', p.accent_rgb);
root.style.setProperty('--text-main', p.text_main);
const lbl = document.getElementById('activePaletteLabel');
if (lbl) lbl.innerText = p.name;
Object.keys(PALETTES).forEach(k => {
const b = document.getElementById('pal-btn-' + k);
if (b) {
b.className = k === key
? 'w-5 h-5 rounded-full transition transform ring-2 ring-white scale-110 shadow-md'
: 'w-5 h-5 rounded-full transition transform opacity-75 hover:opacity-100 shadow-md';
}
});
}
function selectRadarCountry(name, ping, speed) { function selectRadarCountry(name, ping, speed) {
document.getElementById('radarLoc').innerText = name; document.getElementById('radarLoc').innerText = name;
document.getElementById('radarPing').innerText = 'Пинг: ' + ping; document.getElementById('radarPing').innerText = 'Пинг: ' + ping;
@ -659,9 +718,9 @@
function selectDeviceTab(btn, platform, appName) { function selectDeviceTab(btn, platform, appName) {
document.querySelectorAll('.device-tab').forEach(el => { 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'; el.className = 'device-tab gorilla-subcard hover:brightness-125 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'; btn.className = 'device-tab gorilla-btn rounded-2xl p-4 text-left transition font-bold shadow-lg';
document.getElementById('activeDeviceName').innerText = platform; document.getElementById('activeDeviceName').innerText = platform;
document.getElementById('activeDeviceApp').innerText = appName; document.getElementById('activeDeviceApp').innerText = appName;
} }
@ -674,7 +733,7 @@
} }
function openTrialModal() { function openTrialModal() {
document.getElementById('modalTitle').innerText = 'Katyusha Trial · 48 часов за 0 ₽'; document.getElementById('modalTitle').innerText = 'Катюша VPN Trial · 48 часов за 0 ₽';
document.getElementById('modalSub').innerText = 'Пробный доступ на 2 дня · 5 устройств · ∞ ГБ'; document.getElementById('modalSub').innerText = 'Пробный доступ на 2 дня · 5 устройств · ∞ ГБ';
document.getElementById('checkoutModal').classList.remove('hidden'); document.getElementById('checkoutModal').classList.remove('hidden');
} }