feat(mvp): initial build for Катюша VPN [DEV staging]
This commit is contained in:
Hermes Virtual Office Bot
commit
f8e13f8456
12
REPO_MAP.md
Normal file
12
REPO_MAP.md
Normal file
@ -0,0 +1,12 @@
|
||||
# REPO_MAP.md (Auto-Generated Modular Index)
|
||||
> Hard Rule: Max 200 lines per file. Read ONLY the contract and target feature folder.
|
||||
|
||||
| Path | Lines | Layer / Responsibility |
|
||||
|------|-------|------------------------|
|
||||
| `contracts/DESIGN_SYSTEM.md` | 8 ✅ | contract |
|
||||
| `contracts/OPENAPI.yaml` | 4 ✅ | contract |
|
||||
| `contracts/PRD.md` | 9 ✅ | contract |
|
||||
| `contracts/WEB_REFERENCES.md` | 20 ✅ | contract |
|
||||
| `backend/app/modules/core/router.py` | 2 ✅ | backend-module |
|
||||
| `frontend/src/features/PreviewApp.html` | 213 ⚠️ OVER 200L | frontend-fsd |
|
||||
| `frontend/src/features/PreviewDev.html` | 213 ⚠️ OVER 200L | frontend-fsd |
|
||||
2
backend/app/modules/core/router.py
Normal file
2
backend/app/modules/core/router.py
Normal file
@ -0,0 +1,2 @@
|
||||
from fastapi import APIRouter
|
||||
router = APIRouter(prefix='/api/v1/items')
|
||||
8
contracts/DESIGN_SYSTEM.md
Normal file
8
contracts/DESIGN_SYSTEM.md
Normal file
@ -0,0 +1,8 @@
|
||||
# DESIGN_SYSTEM.md (Normalized Figma Tokens)
|
||||
- **Reference Source:** Autonomous UX/UI Market Standard
|
||||
- **File Key / Node:** `N/A` / `Root`
|
||||
- **Primary Palette:** `#0F172A, #6366F1, #10B981, #F8FAFC, #1E293B`
|
||||
- **Typography:** `Inter, JetBrains Mono`
|
||||
- **Border Radius & Surface:** `12px`, Glassmorphic slate cards (`backdrop-blur-md`)
|
||||
- **Responsive Breakpoints:** Desktop `1440x900` (12-col grid) | Mobile `390x844` (single-col stack)
|
||||
- **Mapped FSD Widgets:** `AppHeader, HeroMetricBanner, FilterBar, FeatureCardGrid, ActionModal`
|
||||
4
contracts/OPENAPI.yaml
Normal file
4
contracts/OPENAPI.yaml
Normal file
@ -0,0 +1,4 @@
|
||||
openapi: 3.1.0
|
||||
info:
|
||||
title: Катюша VPN API
|
||||
version: 1.0.0
|
||||
9
contracts/PRD.md
Normal file
9
contracts/PRD.md
Normal file
@ -0,0 +1,9 @@
|
||||
# PRD: Катюша VPN
|
||||
- Режим: `reference_url`
|
||||
- Идея: Хочу точно такой же с классным дизайном, чтобы цепляло внимание. Дизайн код базируется на Катюше, сексопильной девушке, которая стреляет по РКН, как будто пробивает стены. Тарифы такие же
|
||||
|
||||
## Сайты-референсы:
|
||||
- 🎯 Ваш референс-образец: Gorilla (https://gorillavpn.pro/): Проанализирована структура первого экрана, навигации, карточек преимуществ и блока тарифов.
|
||||
- Mullvad VPN — Эталон минимализма, прозрачности и оплаты в 1 клик (вкл. крипто) (https://mullvad.net/en): Ключевые паттерны: генерация аккаунта без email, мгновенный выбор протокола WireGuard/Shadowsocks, честная цена, нулевое логирование.
|
||||
- Proton VPN — Премиальный тёмный UI с интерактивной картой серверов и сравнением скоростей (https://protonvpn.com): Ключевые паттерны: переключатель тарифов (1 мес / 1 год / 2 года со скидкой 60%), таблица скорости 10 Gbps, бейджи стриминга (Netflix/YouTube 4K).
|
||||
- Amnezia / Outline VPN — Фокус на обход блокировок (VLESS / Xray Reality) и приложения под все ОС (https://amnezia.org): Ключевые паттерны: кнопки быстрого скачивания (iOS, Android, macOS, Windows, роутеры), выдача ключа для Telegram-бота в 1 клик.
|
||||
20
contracts/WEB_REFERENCES.md
Normal file
20
contracts/WEB_REFERENCES.md
Normal file
@ -0,0 +1,20 @@
|
||||
# WEB_REFERENCES.md — Референсы и режим проектирования
|
||||
- **Выбранный режим:** 🔄 Режим 2: По вашему примеру / референсу (± аналог)
|
||||
- **Запрос / Задача:** `Катюша VPN Хочу точно такой же с классным дизайном, чтобы цепляло внимание. Дизайн код базируется на Катюше, сексопильной девушке, которая стреляет по РКН, как будто пробивает стены. Тарифы такие же `
|
||||
|
||||
## Источники и референсы, переданные в UX/UI и Frontend:
|
||||
### 1. [🎯 Ваш референс-образец: Gorilla](https://gorillavpn.pro/)
|
||||
- **URL:** https://gorillavpn.pro/
|
||||
- **Что берём в проект:** Проанализирована структура первого экрана, навигации, карточек преимуществ и блока тарифов.
|
||||
|
||||
### 2. [Mullvad VPN — Эталон минимализма, прозрачности и оплаты в 1 клик (вкл. крипто)](https://mullvad.net/en)
|
||||
- **URL:** https://mullvad.net/en
|
||||
- **Что берём в проект:** Ключевые паттерны: генерация аккаунта без email, мгновенный выбор протокола WireGuard/Shadowsocks, честная цена, нулевое логирование.
|
||||
|
||||
### 3. [Proton VPN — Премиальный тёмный UI с интерактивной картой серверов и сравнением скоростей](https://protonvpn.com)
|
||||
- **URL:** https://protonvpn.com
|
||||
- **Что берём в проект:** Ключевые паттерны: переключатель тарифов (1 мес / 1 год / 2 года со скидкой 60%), таблица скорости 10 Gbps, бейджи стриминга (Netflix/YouTube 4K).
|
||||
|
||||
### 4. [Amnezia / Outline VPN — Фокус на обход блокировок (VLESS / Xray Reality) и приложения под все ОС](https://amnezia.org)
|
||||
- **URL:** https://amnezia.org
|
||||
- **Что берём в проект:** Ключевые паттерны: кнопки быстрого скачивания (iOS, Android, macOS, Windows, роутеры), выдача ключа для Telegram-бота в 1 клик.
|
||||
213
frontend/src/features/PreviewApp.html
Normal file
213
frontend/src/features/PreviewApp.html
Normal file
@ -0,0 +1,213 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru" class="dark scroll-smooth">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Катюша VPN — Быстрый VPN нового поколения (VLESS / WireGuard)</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
<body class="bg-slate-950 text-slate-100 min-h-screen font-sans selection:bg-indigo-500 selection:text-white">
|
||||
<!-- Navbar -->
|
||||
<header class="border-b border-slate-800/80 bg-slate-950/80 backdrop-blur sticky top-0 z-30">
|
||||
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-9 h-9 rounded-xl bg-gradient-to-br from-emerald-400 to-indigo-600 flex items-center justify-center font-black text-slate-950">V</div>
|
||||
<div>
|
||||
<span class="font-bold text-lg tracking-tight">Катюша VPN </span>
|
||||
<span class="ml-2 text-[11px] px-2 py-0.5 rounded-full bg-emerald-500/20 text-emerald-300 border border-emerald-500/30">10 Gbps • No-Logs</span>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="hidden md:flex items-center gap-6 text-sm text-slate-300">
|
||||
<a href="#features" class="hover:text-white">Преимущества</a>
|
||||
<a href="#servers" class="hover:text-white">Локации (42 страны)</a>
|
||||
<a href="#pricing" class="hover:text-white">Тарифы</a>
|
||||
<a href="#references" class="hover:text-indigo-400 text-xs text-slate-400">🔍 Референсы PM</a>
|
||||
</nav>
|
||||
<div class="flex items-center gap-3">
|
||||
<a href="/" class="text-xs text-slate-400 hover:text-white">← В Офис</a>
|
||||
<a href="#pricing" class="px-4 py-2 rounded-xl bg-emerald-500 hover:bg-emerald-400 text-slate-950 font-bold text-xs transition">Подключить за 30 сек</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="max-w-6xl mx-auto px-6 py-12 space-y-20">
|
||||
<!-- Hero Section -->
|
||||
<section class="grid grid-cols-1 lg:grid-cols-12 gap-10 items-center">
|
||||
<div class="lg:col-span-7 space-y-6">
|
||||
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-indigo-500/15 border border-indigo-500/30 text-indigo-300 text-xs">
|
||||
<span>🛡 Протоколы Xray VLESS Reality + WireGuard</span>
|
||||
</div>
|
||||
<h1 class="text-4xl md:text-5xl font-extrabold tracking-tight leading-tight">
|
||||
Свободный интернет на скорости <span class="text-transparent bg-clip-text bg-gradient-to-r from-emerald-400 to-indigo-400">до 10 Гбит/с</span> без блокировок
|
||||
</h1>
|
||||
<p class="text-slate-300 text-base leading-relaxed max-w-2xl">
|
||||
Хочу точно такой же с классным дизайном, чтобы цепляло внимание. Дизайн код базируется на Катюше, сексопильной девушке, которая стреляет по РКН, как будто пробивает стены. Тарифы такие же . Работает в любых сетях, поддерживает YouTube 4K без рекламы, Netflix, ChatGPT и мгновенную выдачу ключа в Telegram или приложении.
|
||||
</p>
|
||||
<div class="flex flex-wrap gap-4 pt-2">
|
||||
<a href="#pricing" class="px-6 py-3.5 rounded-xl bg-emerald-500 hover:bg-emerald-400 text-slate-950 font-bold text-sm shadow-lg shadow-emerald-500/20 transition">
|
||||
🚀 Получить доступ (от 199 ₽/мес)
|
||||
</a>
|
||||
<button onclick="document.getElementById('keyModal').classList.remove('hidden')" class="px-6 py-3.5 rounded-xl bg-slate-900 hover:bg-slate-800 border border-slate-700 text-slate-100 font-semibold text-sm transition">
|
||||
⚡ Тестовый ключ на 24 часа
|
||||
</button>
|
||||
</div>
|
||||
<div class="grid grid-cols-3 gap-4 pt-4 border-t border-slate-800/80 text-xs text-slate-400">
|
||||
<div><b class="text-white text-base block">42 страны</b>Европа, США, Азия</div>
|
||||
<div><b class="text-white text-base block">5 устройств</b>По одной подписке</div>
|
||||
<div><b class="text-white text-base block">0 логов</b>Независимый аудит</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Interactive Connection Widget (Inspired by Proton & Mullvad References) -->
|
||||
<div class="lg:col-span-5 bg-slate-900/90 border border-slate-800 rounded-2xl p-6 shadow-2xl space-y-5">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-xs uppercase tracking-wider text-slate-400 font-semibold">Статус туннеля</span>
|
||||
<span id="connBadge" class="px-2.5 py-0.5 rounded-full text-xs bg-emerald-500/20 text-emerald-300 border border-emerald-500/30">🟢 Защищено • VLESS Reality</span>
|
||||
</div>
|
||||
<div class="bg-slate-950 border border-slate-800 rounded-xl p-4 flex items-center justify-between">
|
||||
<div>
|
||||
<div class="text-xs text-slate-400">Текущая локация</div>
|
||||
<div id="locName" class="font-bold text-base mt-0.5">🇳🇱 Нидерланды, Амстердам #4</div>
|
||||
<div class="text-xs text-emerald-400 mt-0.5">Пинг: 18 мс • Нагрузка: 14%</div>
|
||||
</div>
|
||||
<select onchange="document.getElementById('locName').innerText=this.value" class="bg-slate-900 border border-slate-700 rounded-lg px-2.5 py-1.5 text-xs">
|
||||
<option value="🇳🇱 Нидерланды, Амстердам #4">🇳🇱 Амстердам (18 мс)</option>
|
||||
<option value="🇩🇪 Германия, Франкфурт #2">🇩🇪 Франкфурт (21 мс)</option>
|
||||
<option value="🇫🇮 Финляндия, Хельсинки #1">🇫🇮 Хельсинки (12 мс)</option>
|
||||
<option value="🇺🇸 США, Нью-Йорк #8">🇺🇸 Нью-Йорк (84 мс)</option>
|
||||
<option value="🇹🇷 Турция, Стамбул #3">🇹🇷 Стамбул (34 мс)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-3 text-xs">
|
||||
<div class="bg-slate-950 border border-slate-800 rounded-xl p-3">
|
||||
<span class="text-slate-400">Download</span>
|
||||
<div class="text-lg font-bold text-emerald-400 mt-0.5">842 Мбит/с</div>
|
||||
</div>
|
||||
<div class="bg-slate-950 border border-slate-800 rounded-xl p-3">
|
||||
<span class="text-slate-400">Upload</span>
|
||||
<div class="text-lg font-bold text-indigo-400 mt-0.5">690 Мбит/с</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-[11px] text-slate-400 flex items-center justify-between pt-1">
|
||||
<span>Платформы: iOS • Android • macOS • Windows • SmartTV</span>
|
||||
<span class="text-emerald-400 font-mono">AES-256-GCM</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Pricing Section -->
|
||||
<section id="pricing" class="space-y-8">
|
||||
<div class="text-center max-w-2xl mx-auto space-y-2">
|
||||
<h2 class="text-3xl font-extrabold">Прозрачные тарифы без скрытых списаний</h2>
|
||||
<p class="text-slate-400 text-sm">Мгновенная выдача конфигурации сразу после оплаты (СБП, карты РФ/Мир, USDT/TON).</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<!-- 1 Month -->
|
||||
<div class="bg-slate-900/80 border border-slate-800 rounded-2xl p-6 flex flex-col justify-between">
|
||||
<div>
|
||||
<div class="text-sm font-semibold text-slate-300">На 1 месяц</div>
|
||||
<div class="text-3xl font-extrabold mt-2">349 ₽ <span class="text-sm font-normal text-slate-400">/ мес</span></div>
|
||||
<ul class="mt-6 space-y-2.5 text-xs text-slate-300">
|
||||
<li>✅ До 5 устройств одновременно</li>
|
||||
<li>✅ Все 42 страны (10 Gbps)</li>
|
||||
<li>✅ Протоколы VLESS Reality + WireGuard</li>
|
||||
<li>✅ YouTube 4K без рекламы</li>
|
||||
</ul>
|
||||
</div>
|
||||
<button onclick="openCheckout('1 месяц — 349 ₽')" class="mt-8 w-full py-3 rounded-xl bg-slate-800 hover:bg-slate-700 font-bold text-xs transition">Выбрать 1 месяц</button>
|
||||
</div>
|
||||
|
||||
<!-- 1 Year (Best Value) -->
|
||||
<div class="bg-gradient-to-b from-indigo-950/80 to-slate-900 border-2 border-emerald-500 rounded-2xl p-6 flex flex-col justify-between relative shadow-xl">
|
||||
<span class="absolute -top-3 right-6 px-3 py-0.5 rounded-full bg-emerald-500 text-slate-950 font-bold text-[11px]">ХИТ • ВЫГОДА 45%</span>
|
||||
<div>
|
||||
<div class="text-sm font-semibold text-emerald-300">На 1 год</div>
|
||||
<div class="text-3xl font-extrabold mt-2">199 ₽ <span class="text-sm font-normal text-slate-400">/ мес</span></div>
|
||||
<div class="text-xs text-slate-400 mt-1">2 388 ₽ при оплате за год</div>
|
||||
<ul class="mt-6 space-y-2.5 text-xs text-slate-200">
|
||||
<li>✅ До 10 устройств + роутер</li>
|
||||
<li>✅ Выделенные стриминг-серверы (Netflix, AI)</li>
|
||||
<li>✅ Авто-обход DPI провайдеров (Stealth)</li>
|
||||
<li>✅ Приоритетная поддержка в Telegram 24/7</li>
|
||||
</ul>
|
||||
</div>
|
||||
<button onclick="openCheckout('1 год — 2 388 ₽ (199 ₽/мес)')" class="mt-8 w-full py-3 rounded-xl bg-emerald-500 hover:bg-emerald-400 text-slate-950 font-bold text-xs transition">Подключить со скидкой 45%</button>
|
||||
</div>
|
||||
|
||||
<!-- 6 Months -->
|
||||
<div class="bg-slate-900/80 border border-slate-800 rounded-2xl p-6 flex flex-col justify-between">
|
||||
<div>
|
||||
<div class="text-sm font-semibold text-slate-300">На 6 месяцев</div>
|
||||
<div class="text-3xl font-extrabold mt-2">249 ₽ <span class="text-sm font-normal text-slate-400">/ мес</span></div>
|
||||
<div class="text-xs text-slate-400 mt-1">1 494 ₽ за полгода</div>
|
||||
<ul class="mt-6 space-y-2.5 text-xs text-slate-300">
|
||||
<li>✅ До 5 устройств одновременно</li>
|
||||
<li>✅ Все 42 страны (10 Gbps)</li>
|
||||
<li>✅ Защита от утечек WebRTC и DNS</li>
|
||||
<li>✅ Гарантия возврата 30 дней</li>
|
||||
</ul>
|
||||
</div>
|
||||
<button onclick="openCheckout('6 месяцев — 1 494 ₽')" class="mt-8 w-full py-3 rounded-xl bg-slate-800 hover:bg-slate-700 font-bold text-xs transition">Выбрать 6 месяцев</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Web References Analyzed by PM -->
|
||||
<section id="references" class="pt-8 border-t border-slate-800/80 space-y-4">
|
||||
<div>
|
||||
<h3 class="text-sm font-bold text-indigo-300">🔍 Сайты-референсы из интернета, на базе которых PM и UX/UI собрали этот проект:</h3>
|
||||
<p class="text-xs text-slate-400">Автоматическое исследование конкурентов (`contracts/WEB_REFERENCES.md`)</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
|
||||
<a href="https://gorillavpn.pro/" target="_blank" class="block bg-slate-900/90 hover:bg-slate-800/80 border border-slate-800 rounded-xl p-4 transition">
|
||||
<div class="text-xs font-semibold text-indigo-400 truncate">🎯 Ваш референс-образец: Gorilla</div>
|
||||
<div class="text-[11px] text-slate-500 truncate mt-0.5">https://gorillavpn.pro/</div>
|
||||
<p class="text-xs text-slate-300 mt-2">Проанализирована структура первого экрана, навигации, карточек преимуществ и блока тарифов.</p>
|
||||
</a>
|
||||
|
||||
<a href="https://mullvad.net/en" target="_blank" class="block bg-slate-900/90 hover:bg-slate-800/80 border border-slate-800 rounded-xl p-4 transition">
|
||||
<div class="text-xs font-semibold text-indigo-400 truncate">Mullvad VPN — Эталон минимализма, прозрачности и оплаты в 1 клик (вкл. крипто)</div>
|
||||
<div class="text-[11px] text-slate-500 truncate mt-0.5">https://mullvad.net/en</div>
|
||||
<p class="text-xs text-slate-300 mt-2">Ключевые паттерны: генерация аккаунта без email, мгновенный выбор протокола WireGuard/Shadowsocks, честная цена, нулевое логирование.</p>
|
||||
</a>
|
||||
|
||||
<a href="https://protonvpn.com" target="_blank" class="block bg-slate-900/90 hover:bg-slate-800/80 border border-slate-800 rounded-xl p-4 transition">
|
||||
<div class="text-xs font-semibold text-indigo-400 truncate">Proton VPN — Премиальный тёмный UI с интерактивной картой серверов и сравнением скоростей</div>
|
||||
<div class="text-[11px] text-slate-500 truncate mt-0.5">https://protonvpn.com</div>
|
||||
<p class="text-xs text-slate-300 mt-2">Ключевые паттерны: переключатель тарифов (1 мес / 1 год / 2 года со скидкой 60%), таблица скорости 10 Gbps, бейджи стриминга (Netflix/YouTube 4K).</p>
|
||||
</a>
|
||||
|
||||
<a href="https://amnezia.org" target="_blank" class="block bg-slate-900/90 hover:bg-slate-800/80 border border-slate-800 rounded-xl p-4 transition">
|
||||
<div class="text-xs font-semibold text-indigo-400 truncate">Amnezia / Outline VPN — Фокус на обход блокировок (VLESS / Xray Reality) и приложения под все ОС</div>
|
||||
<div class="text-[11px] text-slate-500 truncate mt-0.5">https://amnezia.org</div>
|
||||
<p class="text-xs text-slate-300 mt-2">Ключевые паттерны: кнопки быстрого скачивания (iOS, Android, macOS, Windows, роутеры), выдача ключа для Telegram-бота в 1 клик.</p>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!-- Checkout / Free Trial Modal -->
|
||||
<div id="keyModal" class="hidden fixed inset-0 bg-black/75 backdrop-blur-sm z-50 flex items-center justify-center p-4">
|
||||
<div class="bg-slate-900 border border-slate-700 rounded-2xl max-w-md w-full p-6 space-y-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<h4 id="modalTitle" class="font-bold text-base">⚡ Мгновенное получение VPN-ключа</h4>
|
||||
<button onclick="document.getElementById('keyModal').classList.add('hidden')" class="text-slate-400 hover:text-white">✕</button>
|
||||
</div>
|
||||
<p class="text-xs text-slate-300">Ваш сгенерированный VLESS Reality ключ готов к импорту в Hiddify / Streisand / v2rayNG / Amnezia:</p>
|
||||
<div class="bg-slate-950 border border-slate-800 rounded-xl p-3 font-mono text-[11px] text-emerald-400 break-all">
|
||||
vless://9a8f2c1e-4b3d-4e9a-8c1a-vo2026@nl4.vo-office.com:443?security=reality&sni=www.microsoft.com&fp=chrome&pbk=VoPublicKey2026&type=tcp#Катюша_VPN_
|
||||
</div>
|
||||
<button onclick="document.getElementById('keyModal').classList.add('hidden')" class="w-full py-2.5 rounded-xl bg-emerald-500 text-slate-950 font-bold text-xs">Готово</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function openCheckout(plan) {
|
||||
document.getElementById('modalTitle').innerText = 'Оформление: ' + plan;
|
||||
document.getElementById('keyModal').classList.remove('hidden');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
213
frontend/src/features/PreviewDev.html
Normal file
213
frontend/src/features/PreviewDev.html
Normal file
@ -0,0 +1,213 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru" class="dark scroll-smooth">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Катюша VPN — Быстрый VPN нового поколения (VLESS / WireGuard)</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
<body class="bg-slate-950 text-slate-100 min-h-screen font-sans selection:bg-indigo-500 selection:text-white">
|
||||
<!-- Navbar -->
|
||||
<header class="border-b border-slate-800/80 bg-slate-950/80 backdrop-blur sticky top-0 z-30">
|
||||
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-9 h-9 rounded-xl bg-gradient-to-br from-emerald-400 to-indigo-600 flex items-center justify-center font-black text-slate-950">V</div>
|
||||
<div>
|
||||
<span class="font-bold text-lg tracking-tight">Катюша VPN </span>
|
||||
<span class="ml-2 text-[11px] px-2 py-0.5 rounded-full bg-emerald-500/20 text-emerald-300 border border-emerald-500/30">10 Gbps • No-Logs</span>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="hidden md:flex items-center gap-6 text-sm text-slate-300">
|
||||
<a href="#features" class="hover:text-white">Преимущества</a>
|
||||
<a href="#servers" class="hover:text-white">Локации (42 страны)</a>
|
||||
<a href="#pricing" class="hover:text-white">Тарифы</a>
|
||||
<a href="#references" class="hover:text-indigo-400 text-xs text-slate-400">🔍 Референсы PM</a>
|
||||
</nav>
|
||||
<div class="flex items-center gap-3">
|
||||
<a href="/" class="text-xs text-slate-400 hover:text-white">← В Офис</a>
|
||||
<a href="#pricing" class="px-4 py-2 rounded-xl bg-emerald-500 hover:bg-emerald-400 text-slate-950 font-bold text-xs transition">Подключить за 30 сек</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="max-w-6xl mx-auto px-6 py-12 space-y-20">
|
||||
<!-- Hero Section -->
|
||||
<section class="grid grid-cols-1 lg:grid-cols-12 gap-10 items-center">
|
||||
<div class="lg:col-span-7 space-y-6">
|
||||
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-indigo-500/15 border border-indigo-500/30 text-indigo-300 text-xs">
|
||||
<span>🛡 Протоколы Xray VLESS Reality + WireGuard</span>
|
||||
</div>
|
||||
<h1 class="text-4xl md:text-5xl font-extrabold tracking-tight leading-tight">
|
||||
Свободный интернет на скорости <span class="text-transparent bg-clip-text bg-gradient-to-r from-emerald-400 to-indigo-400">до 10 Гбит/с</span> без блокировок
|
||||
</h1>
|
||||
<p class="text-slate-300 text-base leading-relaxed max-w-2xl">
|
||||
Хочу точно такой же с классным дизайном, чтобы цепляло внимание. Дизайн код базируется на Катюше, сексопильной девушке, которая стреляет по РКН, как будто пробивает стены. Тарифы такие же . Работает в любых сетях, поддерживает YouTube 4K без рекламы, Netflix, ChatGPT и мгновенную выдачу ключа в Telegram или приложении.
|
||||
</p>
|
||||
<div class="flex flex-wrap gap-4 pt-2">
|
||||
<a href="#pricing" class="px-6 py-3.5 rounded-xl bg-emerald-500 hover:bg-emerald-400 text-slate-950 font-bold text-sm shadow-lg shadow-emerald-500/20 transition">
|
||||
🚀 Получить доступ (от 199 ₽/мес)
|
||||
</a>
|
||||
<button onclick="document.getElementById('keyModal').classList.remove('hidden')" class="px-6 py-3.5 rounded-xl bg-slate-900 hover:bg-slate-800 border border-slate-700 text-slate-100 font-semibold text-sm transition">
|
||||
⚡ Тестовый ключ на 24 часа
|
||||
</button>
|
||||
</div>
|
||||
<div class="grid grid-cols-3 gap-4 pt-4 border-t border-slate-800/80 text-xs text-slate-400">
|
||||
<div><b class="text-white text-base block">42 страны</b>Европа, США, Азия</div>
|
||||
<div><b class="text-white text-base block">5 устройств</b>По одной подписке</div>
|
||||
<div><b class="text-white text-base block">0 логов</b>Независимый аудит</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Interactive Connection Widget (Inspired by Proton & Mullvad References) -->
|
||||
<div class="lg:col-span-5 bg-slate-900/90 border border-slate-800 rounded-2xl p-6 shadow-2xl space-y-5">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-xs uppercase tracking-wider text-slate-400 font-semibold">Статус туннеля</span>
|
||||
<span id="connBadge" class="px-2.5 py-0.5 rounded-full text-xs bg-emerald-500/20 text-emerald-300 border border-emerald-500/30">🟢 Защищено • VLESS Reality</span>
|
||||
</div>
|
||||
<div class="bg-slate-950 border border-slate-800 rounded-xl p-4 flex items-center justify-between">
|
||||
<div>
|
||||
<div class="text-xs text-slate-400">Текущая локация</div>
|
||||
<div id="locName" class="font-bold text-base mt-0.5">🇳🇱 Нидерланды, Амстердам #4</div>
|
||||
<div class="text-xs text-emerald-400 mt-0.5">Пинг: 18 мс • Нагрузка: 14%</div>
|
||||
</div>
|
||||
<select onchange="document.getElementById('locName').innerText=this.value" class="bg-slate-900 border border-slate-700 rounded-lg px-2.5 py-1.5 text-xs">
|
||||
<option value="🇳🇱 Нидерланды, Амстердам #4">🇳🇱 Амстердам (18 мс)</option>
|
||||
<option value="🇩🇪 Германия, Франкфурт #2">🇩🇪 Франкфурт (21 мс)</option>
|
||||
<option value="🇫🇮 Финляндия, Хельсинки #1">🇫🇮 Хельсинки (12 мс)</option>
|
||||
<option value="🇺🇸 США, Нью-Йорк #8">🇺🇸 Нью-Йорк (84 мс)</option>
|
||||
<option value="🇹🇷 Турция, Стамбул #3">🇹🇷 Стамбул (34 мс)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-3 text-xs">
|
||||
<div class="bg-slate-950 border border-slate-800 rounded-xl p-3">
|
||||
<span class="text-slate-400">Download</span>
|
||||
<div class="text-lg font-bold text-emerald-400 mt-0.5">842 Мбит/с</div>
|
||||
</div>
|
||||
<div class="bg-slate-950 border border-slate-800 rounded-xl p-3">
|
||||
<span class="text-slate-400">Upload</span>
|
||||
<div class="text-lg font-bold text-indigo-400 mt-0.5">690 Мбит/с</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-[11px] text-slate-400 flex items-center justify-between pt-1">
|
||||
<span>Платформы: iOS • Android • macOS • Windows • SmartTV</span>
|
||||
<span class="text-emerald-400 font-mono">AES-256-GCM</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Pricing Section -->
|
||||
<section id="pricing" class="space-y-8">
|
||||
<div class="text-center max-w-2xl mx-auto space-y-2">
|
||||
<h2 class="text-3xl font-extrabold">Прозрачные тарифы без скрытых списаний</h2>
|
||||
<p class="text-slate-400 text-sm">Мгновенная выдача конфигурации сразу после оплаты (СБП, карты РФ/Мир, USDT/TON).</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<!-- 1 Month -->
|
||||
<div class="bg-slate-900/80 border border-slate-800 rounded-2xl p-6 flex flex-col justify-between">
|
||||
<div>
|
||||
<div class="text-sm font-semibold text-slate-300">На 1 месяц</div>
|
||||
<div class="text-3xl font-extrabold mt-2">349 ₽ <span class="text-sm font-normal text-slate-400">/ мес</span></div>
|
||||
<ul class="mt-6 space-y-2.5 text-xs text-slate-300">
|
||||
<li>✅ До 5 устройств одновременно</li>
|
||||
<li>✅ Все 42 страны (10 Gbps)</li>
|
||||
<li>✅ Протоколы VLESS Reality + WireGuard</li>
|
||||
<li>✅ YouTube 4K без рекламы</li>
|
||||
</ul>
|
||||
</div>
|
||||
<button onclick="openCheckout('1 месяц — 349 ₽')" class="mt-8 w-full py-3 rounded-xl bg-slate-800 hover:bg-slate-700 font-bold text-xs transition">Выбрать 1 месяц</button>
|
||||
</div>
|
||||
|
||||
<!-- 1 Year (Best Value) -->
|
||||
<div class="bg-gradient-to-b from-indigo-950/80 to-slate-900 border-2 border-emerald-500 rounded-2xl p-6 flex flex-col justify-between relative shadow-xl">
|
||||
<span class="absolute -top-3 right-6 px-3 py-0.5 rounded-full bg-emerald-500 text-slate-950 font-bold text-[11px]">ХИТ • ВЫГОДА 45%</span>
|
||||
<div>
|
||||
<div class="text-sm font-semibold text-emerald-300">На 1 год</div>
|
||||
<div class="text-3xl font-extrabold mt-2">199 ₽ <span class="text-sm font-normal text-slate-400">/ мес</span></div>
|
||||
<div class="text-xs text-slate-400 mt-1">2 388 ₽ при оплате за год</div>
|
||||
<ul class="mt-6 space-y-2.5 text-xs text-slate-200">
|
||||
<li>✅ До 10 устройств + роутер</li>
|
||||
<li>✅ Выделенные стриминг-серверы (Netflix, AI)</li>
|
||||
<li>✅ Авто-обход DPI провайдеров (Stealth)</li>
|
||||
<li>✅ Приоритетная поддержка в Telegram 24/7</li>
|
||||
</ul>
|
||||
</div>
|
||||
<button onclick="openCheckout('1 год — 2 388 ₽ (199 ₽/мес)')" class="mt-8 w-full py-3 rounded-xl bg-emerald-500 hover:bg-emerald-400 text-slate-950 font-bold text-xs transition">Подключить со скидкой 45%</button>
|
||||
</div>
|
||||
|
||||
<!-- 6 Months -->
|
||||
<div class="bg-slate-900/80 border border-slate-800 rounded-2xl p-6 flex flex-col justify-between">
|
||||
<div>
|
||||
<div class="text-sm font-semibold text-slate-300">На 6 месяцев</div>
|
||||
<div class="text-3xl font-extrabold mt-2">249 ₽ <span class="text-sm font-normal text-slate-400">/ мес</span></div>
|
||||
<div class="text-xs text-slate-400 mt-1">1 494 ₽ за полгода</div>
|
||||
<ul class="mt-6 space-y-2.5 text-xs text-slate-300">
|
||||
<li>✅ До 5 устройств одновременно</li>
|
||||
<li>✅ Все 42 страны (10 Gbps)</li>
|
||||
<li>✅ Защита от утечек WebRTC и DNS</li>
|
||||
<li>✅ Гарантия возврата 30 дней</li>
|
||||
</ul>
|
||||
</div>
|
||||
<button onclick="openCheckout('6 месяцев — 1 494 ₽')" class="mt-8 w-full py-3 rounded-xl bg-slate-800 hover:bg-slate-700 font-bold text-xs transition">Выбрать 6 месяцев</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Web References Analyzed by PM -->
|
||||
<section id="references" class="pt-8 border-t border-slate-800/80 space-y-4">
|
||||
<div>
|
||||
<h3 class="text-sm font-bold text-indigo-300">🔍 Сайты-референсы из интернета, на базе которых PM и UX/UI собрали этот проект:</h3>
|
||||
<p class="text-xs text-slate-400">Автоматическое исследование конкурентов (`contracts/WEB_REFERENCES.md`)</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
|
||||
<a href="https://gorillavpn.pro/" target="_blank" class="block bg-slate-900/90 hover:bg-slate-800/80 border border-slate-800 rounded-xl p-4 transition">
|
||||
<div class="text-xs font-semibold text-indigo-400 truncate">🎯 Ваш референс-образец: Gorilla</div>
|
||||
<div class="text-[11px] text-slate-500 truncate mt-0.5">https://gorillavpn.pro/</div>
|
||||
<p class="text-xs text-slate-300 mt-2">Проанализирована структура первого экрана, навигации, карточек преимуществ и блока тарифов.</p>
|
||||
</a>
|
||||
|
||||
<a href="https://mullvad.net/en" target="_blank" class="block bg-slate-900/90 hover:bg-slate-800/80 border border-slate-800 rounded-xl p-4 transition">
|
||||
<div class="text-xs font-semibold text-indigo-400 truncate">Mullvad VPN — Эталон минимализма, прозрачности и оплаты в 1 клик (вкл. крипто)</div>
|
||||
<div class="text-[11px] text-slate-500 truncate mt-0.5">https://mullvad.net/en</div>
|
||||
<p class="text-xs text-slate-300 mt-2">Ключевые паттерны: генерация аккаунта без email, мгновенный выбор протокола WireGuard/Shadowsocks, честная цена, нулевое логирование.</p>
|
||||
</a>
|
||||
|
||||
<a href="https://protonvpn.com" target="_blank" class="block bg-slate-900/90 hover:bg-slate-800/80 border border-slate-800 rounded-xl p-4 transition">
|
||||
<div class="text-xs font-semibold text-indigo-400 truncate">Proton VPN — Премиальный тёмный UI с интерактивной картой серверов и сравнением скоростей</div>
|
||||
<div class="text-[11px] text-slate-500 truncate mt-0.5">https://protonvpn.com</div>
|
||||
<p class="text-xs text-slate-300 mt-2">Ключевые паттерны: переключатель тарифов (1 мес / 1 год / 2 года со скидкой 60%), таблица скорости 10 Gbps, бейджи стриминга (Netflix/YouTube 4K).</p>
|
||||
</a>
|
||||
|
||||
<a href="https://amnezia.org" target="_blank" class="block bg-slate-900/90 hover:bg-slate-800/80 border border-slate-800 rounded-xl p-4 transition">
|
||||
<div class="text-xs font-semibold text-indigo-400 truncate">Amnezia / Outline VPN — Фокус на обход блокировок (VLESS / Xray Reality) и приложения под все ОС</div>
|
||||
<div class="text-[11px] text-slate-500 truncate mt-0.5">https://amnezia.org</div>
|
||||
<p class="text-xs text-slate-300 mt-2">Ключевые паттерны: кнопки быстрого скачивания (iOS, Android, macOS, Windows, роутеры), выдача ключа для Telegram-бота в 1 клик.</p>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!-- Checkout / Free Trial Modal -->
|
||||
<div id="keyModal" class="hidden fixed inset-0 bg-black/75 backdrop-blur-sm z-50 flex items-center justify-center p-4">
|
||||
<div class="bg-slate-900 border border-slate-700 rounded-2xl max-w-md w-full p-6 space-y-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<h4 id="modalTitle" class="font-bold text-base">⚡ Мгновенное получение VPN-ключа</h4>
|
||||
<button onclick="document.getElementById('keyModal').classList.add('hidden')" class="text-slate-400 hover:text-white">✕</button>
|
||||
</div>
|
||||
<p class="text-xs text-slate-300">Ваш сгенерированный VLESS Reality ключ готов к импорту в Hiddify / Streisand / v2rayNG / Amnezia:</p>
|
||||
<div class="bg-slate-950 border border-slate-800 rounded-xl p-3 font-mono text-[11px] text-emerald-400 break-all">
|
||||
vless://9a8f2c1e-4b3d-4e9a-8c1a-vo2026@nl4.vo-office.com:443?security=reality&sni=www.microsoft.com&fp=chrome&pbk=VoPublicKey2026&type=tcp#Катюша_VPN_
|
||||
</div>
|
||||
<button onclick="document.getElementById('keyModal').classList.add('hidden')" class="w-full py-2.5 rounded-xl bg-emerald-500 text-slate-950 font-bold text-xs">Готово</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function openCheckout(plan) {
|
||||
document.getElementById('modalTitle').innerText = 'Оформление: ' + plan;
|
||||
document.getElementById('keyModal').classList.remove('hidden');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user