mirror of
https://github.com/andrey271192/amnezia_web.git
synced 2026-09-20 14:41:59 +00:00
feat: open community panel (read-only clients only)
Ship full install stack with .amnezia-panel-edition=community; docs and footer point to Boosty/PRO. Managing peers, export, cascade and WARP require private PRO build. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Андрей Бобырев
3
landing/Dockerfile
Normal file
3
landing/Dockerfile
Normal file
@@ -0,0 +1,3 @@
|
||||
FROM nginx:1.27-alpine
|
||||
COPY nginx.conf /etc/nginx/conf.d/default.conf
|
||||
COPY index.html styles.css admin-port.js /usr/share/nginx/html/
|
||||
1
landing/admin-port.js
Normal file
1
landing/admin-port.js
Normal file
@@ -0,0 +1 @@
|
||||
window.__AMNEZIA_ADMIN_PORT__ = "8080";
|
||||
355
landing/index.html
Normal file
355
landing/index.html
Normal file
@@ -0,0 +1,355 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Подключение к VPN · частный сервер</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header class="site-header">
|
||||
<div class="header-inner">
|
||||
<a href="#" class="logo"><span class="logo-icon" aria-hidden="true">🔒</span>Подключение к VPN</a>
|
||||
<div class="header-actions">
|
||||
<a id="admin-panel-link" class="header-admin" href="#">Админ-панель</a>
|
||||
<div class="status-pill"><span class="status-dot"></span>Сервер активен</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="hero">
|
||||
<div class="hero-badge">Частный сервер</div>
|
||||
<h1>Подключение к VPN</h1>
|
||||
<p>Используйте приложение <strong>AmneziaVPN</strong>. Конфигурацию выдаёт администратор — импортируйте файл или ключ, который вам передали, и включите туннель. Ниже — пошаговые инструкции для WireGuard и Amnezia VPN.</p>
|
||||
</section>
|
||||
|
||||
<section class="server-summary" aria-labelledby="server-card-title">
|
||||
<div class="server-summary-card">
|
||||
<div id="server-card-title" class="server-summary-label">Сервер</div>
|
||||
<span class="server-addr-label">Адрес</span>
|
||||
<div class="server-addr-row">
|
||||
<div id="server-address-display" class="addr-box" aria-live="polite">—</div>
|
||||
<button type="button" class="copy-btn" onclick="copyServerAddr(this)">Копировать</button>
|
||||
</div>
|
||||
<p class="services-line"><strong>Сервисы на машине:</strong> <span id="server-services">XRay (TCP) · AmneziaWG (UDP)</span></p>
|
||||
<p class="server-note">Номера портов и тип протокола уже зашиты в конфиг Amnezia — вручную их обычно не вводят.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<nav class="page-nav">
|
||||
<button class="page-nav-btn active" onclick="switchPage('vpn',this)"> Подключение VPN</button>
|
||||
<button class="page-nav-btn" onclick="switchPage('region',this)"> Смена региона App Store</button>
|
||||
</nav>
|
||||
|
||||
<!-- PAGE: VPN -->
|
||||
<div class="page-section visible" id="page-vpn">
|
||||
<div class="vpn-switcher">
|
||||
<div class="vpn-tabs">
|
||||
<button class="vpn-tab active" onclick="switchVpn('wg',this)">WireGuard <span class="vpn-tab-badge wg-badge">Стандарт</span></button>
|
||||
<button class="vpn-tab" onclick="switchVpn('amn',this)">Amnezia VPN <span class="vpn-tab-badge amn-badge">Обход DPI</span></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
|
||||
<!-- WIREGUARD -->
|
||||
<div class="vpn-section visible" id="vpn-wg">
|
||||
<div class="platform-selector" id="wg-plats">
|
||||
<button class="plat-btn wg-active" onclick="switchPlat('wg','ios',this)"> iOS</button>
|
||||
<button class="plat-btn" onclick="switchPlat('wg','android',this)"> Android</button>
|
||||
<button class="plat-btn" onclick="switchPlat('wg','windows',this)"> Windows</button>
|
||||
<button class="plat-btn" onclick="switchPlat('wg','macos',this)"> macOS</button>
|
||||
</div>
|
||||
<div class="steps-panel visible" id="wg-ios">
|
||||
<div class="guide-card">
|
||||
<div class="guide-card-header"><div class="plat-icon-lg ios-icon"></div><div class="guide-card-header-text"><h2>WireGuard на iOS</h2><p>iPhone и iPad · iOS 15 и новее</p></div></div>
|
||||
<ul class="step-list">
|
||||
<li class="step-item"><span class="step-circle wg-circle">1</span><div class="step-body"><p>Откройте <b>App Store</b>, найдите <b>WireGuard</b> и нажмите «Установить»</p></div></li>
|
||||
<li class="step-item"><span class="step-circle wg-circle">2</span><div class="step-body"><p>Откройте приложение, нажмите <b>+</b> в правом верхнем углу</p></div></li>
|
||||
<li class="step-item"><span class="step-circle wg-circle">3</span><div class="step-body"><p>Выберите <b>«Сканировать QR-код»</b> и наведите камеру на QR — конфиг добавится автоматически</p><div class="alt-step">Или «Создать из файла» → выберите файл <span class="code-tag">.conf</span></div></div></li>
|
||||
<li class="step-item"><span class="step-circle wg-circle">4</span><div class="step-body"><p>Придумайте имя туннелю и нажмите <b>«Сохранить»</b></p></div></li>
|
||||
<li class="step-item"><span class="step-circle wg-circle">5</span><div class="step-body"><p>Нажмите тумблер → появится запрос, нажмите <b>«Разрешить»</b></p></div></li>
|
||||
</ul>
|
||||
<div class="notice notice-success"><span class="notice-icon">✅</span><p>Тумблер зелёный — вы подключены. Значок VPN в строке статуса.</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="steps-panel" id="wg-android">
|
||||
<div class="guide-card">
|
||||
<div class="guide-card-header"><div class="plat-icon-lg android-icon"></div><div class="guide-card-header-text"><h2>WireGuard на Android</h2><p>Android 8 и новее</p></div></div>
|
||||
<ul class="step-list">
|
||||
<li class="step-item"><span class="step-circle wg-circle">1</span><div class="step-body"><p>Откройте <b>Google Play</b>, найдите <b>WireGuard</b> и установите</p></div></li>
|
||||
<li class="step-item"><span class="step-circle wg-circle">2</span><div class="step-body"><p>Запустите приложение, нажмите <b>синюю кнопку +</b> внизу</p></div></li>
|
||||
<li class="step-item"><span class="step-circle wg-circle">3</span><div class="step-body"><p>Выберите <b>«Сканировать QR-код»</b> и поднесите телефон к коду</p><div class="alt-step">Или «Создать из файла» → файл <span class="code-tag">.conf</span> из загрузок</div></div></li>
|
||||
<li class="step-item"><span class="step-circle wg-circle">4</span><div class="step-body"><p>Дайте имя туннелю и нажмите <b>«Создать туннель»</b></p></div></li>
|
||||
<li class="step-item"><span class="step-circle wg-circle">5</span><div class="step-body"><p>Переключите тумблер → нажмите <b>«ОК»</b> в системном запросе</p></div></li>
|
||||
</ul>
|
||||
<div class="notice notice-success"><span class="notice-icon">✅</span><p>Значок замка в строке состояния — VPN активен.</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="steps-panel" id="wg-windows">
|
||||
<div class="guide-card">
|
||||
<div class="guide-card-header"><div class="plat-icon-lg windows-icon"></div><div class="guide-card-header-text"><h2>WireGuard на Windows</h2><p>Windows 10 и 11</p></div></div>
|
||||
<ul class="step-list">
|
||||
<li class="step-item"><span class="step-circle wg-circle">1</span><div class="step-body"><p>Скачайте установщик с <b>wireguard.com/install</b> и запустите</p></div></li>
|
||||
<li class="step-item"><span class="step-circle wg-circle">2</span><div class="step-body"><p>Откройте WireGuard → <b>«Добавить туннель»</b> → <b>«Импорт из файла»</b></p></div></li>
|
||||
<li class="step-item"><span class="step-circle wg-circle">3</span><div class="step-body"><p>Выберите ваш файл <span class="code-tag">.conf</span></p></div></li>
|
||||
<li class="step-item"><span class="step-circle wg-circle">4</span><div class="step-body"><p>Нажмите <b>«Подключиться»</b> — статус сменится на «Активен»</p></div></li>
|
||||
</ul>
|
||||
<div class="notice notice-tip"><span class="notice-icon"></span><p>Если появится запрос UAC — нажмите «Да». Нужно для создания VPN-адаптера.</p></div>
|
||||
<div class="notice notice-success"><span class="notice-icon">✅</span><p>Статус «Активен» — VPN работает.</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="steps-panel" id="wg-macos">
|
||||
<div class="guide-card">
|
||||
<div class="guide-card-header"><div class="plat-icon-lg macos-icon"></div><div class="guide-card-header-text"><h2>WireGuard на macOS</h2><p>macOS 12 и новее</p></div></div>
|
||||
<ul class="step-list">
|
||||
<li class="step-item"><span class="step-circle wg-circle">1</span><div class="step-body"><p>Установите <b>WireGuard</b> из Mac App Store</p></div></li>
|
||||
<li class="step-item"><span class="step-circle wg-circle">2</span><div class="step-body"><p>Откройте приложение → в меню <b>File → Import Tunnel(s)</b></p></div></li>
|
||||
<li class="step-item"><span class="step-circle wg-circle">3</span><div class="step-body"><p>Выберите файл <span class="code-tag">.conf</span> и нажмите «Открыть»</p></div></li>
|
||||
<li class="step-item"><span class="step-circle wg-circle">4</span><div class="step-body"><p>Нажмите <b>«Подключить»</b> и разрешите VPN в системных настройках</p></div></li>
|
||||
</ul>
|
||||
<div class="notice notice-success"><span class="notice-icon">✅</span><p>Иконка в меню-баре активна — вы подключены.</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- AMNEZIA -->
|
||||
<div class="vpn-section" id="vpn-amn">
|
||||
<div class="platform-selector" id="amn-plats">
|
||||
<button class="plat-btn amn-active" onclick="switchPlat('amn','ios',this)"> iOS</button>
|
||||
<button class="plat-btn" onclick="switchPlat('amn','android',this)"> Android</button>
|
||||
<button class="plat-btn" onclick="switchPlat('amn','windows',this)"> Windows</button>
|
||||
<button class="plat-btn" onclick="switchPlat('amn','macos',this)"> macOS</button>
|
||||
</div>
|
||||
<div class="steps-panel visible" id="amn-ios">
|
||||
<div class="guide-card">
|
||||
<div class="guide-card-header"><div class="plat-icon-lg ios-icon"></div><div class="guide-card-header-text"><h2>Amnezia VPN на iOS</h2><p>iPhone и iPad · Обходит глубокую блокировку</p></div></div>
|
||||
<ul class="step-list">
|
||||
<li class="step-item"><span class="step-circle amn-circle">1</span><div class="step-body"><p>Откройте <b>App Store</b>, найдите <b>Amnezia VPN</b> и установите</p></div></li>
|
||||
<li class="step-item"><span class="step-circle amn-circle">2</span><div class="step-body"><p>Запустите приложение и нажмите <b>«Добавить сервер»</b></p></div></li>
|
||||
<li class="step-item"><span class="step-circle amn-circle">3</span><div class="step-body"><p>Нажмите <b>«У меня есть файл настроек»</b> и выберите файл <span class="code-tag">.vpn</span></p><div class="alt-step">Или «Сканировать QR» → поднесите камеру к коду</div></div></li>
|
||||
<li class="step-item"><span class="step-circle amn-circle">4</span><div class="step-body"><p>Нажмите <b>«Подключиться»</b> и разрешите добавить VPN-профиль</p></div></li>
|
||||
</ul>
|
||||
<div class="notice notice-tip"><span class="notice-icon">️</span><p>Amnezia маскирует трафик под обычный HTTPS — работает там, где WireGuard блокируется.</p></div>
|
||||
<div class="notice notice-success"><span class="notice-icon">✅</span><p>Кнопка стала оранжевой — вы защищены.</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="steps-panel" id="amn-android">
|
||||
<div class="guide-card">
|
||||
<div class="guide-card-header"><div class="plat-icon-lg android-icon"></div><div class="guide-card-header-text"><h2>Amnezia VPN на Android</h2><p>Android 8 и новее</p></div></div>
|
||||
<ul class="step-list">
|
||||
<li class="step-item"><span class="step-circle amn-circle">1</span><div class="step-body"><p>Установите <b>Amnezia VPN</b> из Google Play или APK с <b>amnezia.org</b></p></div></li>
|
||||
<li class="step-item"><span class="step-circle amn-circle">2</span><div class="step-body"><p>Откройте → <b>«Добавить сервер»</b></p></div></li>
|
||||
<li class="step-item"><span class="step-circle amn-circle">3</span><div class="step-body"><p>Нажмите <b>«Загрузить файл»</b> и выберите файл <span class="code-tag">.vpn</span></p></div></li>
|
||||
<li class="step-item"><span class="step-circle amn-circle">4</span><div class="step-body"><p>Нажмите <b>«Подключиться»</b> → разрешите системный запрос VPN</p></div></li>
|
||||
</ul>
|
||||
<div class="notice notice-success"><span class="notice-icon">✅</span><p>Замок в строке состояния — VPN работает.</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="steps-panel" id="amn-windows">
|
||||
<div class="guide-card">
|
||||
<div class="guide-card-header"><div class="plat-icon-lg windows-icon"></div><div class="guide-card-header-text"><h2>Amnezia VPN на Windows</h2><p>Windows 10 и 11 · Протокол AmneziaWG</p></div></div>
|
||||
<ul class="step-list">
|
||||
<li class="step-item"><span class="step-circle amn-circle">1</span><div class="step-body"><p>Скачайте с <b>amnezia.org</b> для Windows и запустите установщик</p></div></li>
|
||||
<li class="step-item"><span class="step-circle amn-circle">2</span><div class="step-body"><p>Откройте → <b>«Добавить сервер»</b> → <b>«Открыть файл конфигурации»</b></p></div></li>
|
||||
<li class="step-item"><span class="step-circle amn-circle">3</span><div class="step-body"><p>Выберите файл <span class="code-tag">.vpn</span> и нажмите <b>«Подключиться»</b></p></div></li>
|
||||
</ul>
|
||||
<div class="notice notice-tip"><span class="notice-icon"></span><p>AmneziaWG — улучшенный WireGuard с обходом DPI.</p></div>
|
||||
<div class="notice notice-success"><span class="notice-icon">✅</span><p>Индикатор зелёный — VPN активен.</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="steps-panel" id="amn-macos">
|
||||
<div class="guide-card">
|
||||
<div class="guide-card-header"><div class="plat-icon-lg macos-icon"></div><div class="guide-card-header-text"><h2>Amnezia VPN на macOS</h2><p>macOS 12 и новее</p></div></div>
|
||||
<ul class="step-list">
|
||||
<li class="step-item"><span class="step-circle amn-circle">1</span><div class="step-body"><p>Скачайте с <b>amnezia.org</b> для macOS</p></div></li>
|
||||
<li class="step-item"><span class="step-circle amn-circle">2</span><div class="step-body"><p>Перетащите в папку «Программы» и запустите</p></div></li>
|
||||
<li class="step-item"><span class="step-circle amn-circle">3</span><div class="step-body"><p>Нажмите <b>«Добавить сервер»</b> → загрузите файл <span class="code-tag">.vpn</span></p></div></li>
|
||||
<li class="step-item"><span class="step-circle amn-circle">4</span><div class="step-body"><p>Нажмите <b>«Подключиться»</b> и разрешите сетевые расширения в системных настройках</p></div></li>
|
||||
</ul>
|
||||
<div class="notice notice-success"><span class="notice-icon">✅</span><p>Иконка Amnezia в меню-баре активна — вы защищены.</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ip-check-section">
|
||||
<h3>Как проверить, что VPN работает?</h3>
|
||||
<div class="check-cards">
|
||||
<div class="check-card"><span class="n">1.</span> Откройте <span class="code-tag">2ip.ru</span> или <span class="code-tag">whatismyip.com</span></div>
|
||||
<div class="check-card"><span class="n">2.</span> Страна должна измениться на страну вашего сервера</div>
|
||||
<div class="check-card"><span class="n">3.</span> Попробуйте открыть нужный сайт — загрузится</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="trouble-section">
|
||||
<h3>Что делать, если что-то пошло не так</h3>
|
||||
<div class="trouble-grid">
|
||||
<div class="trouble-card"><div class="trouble-icon"></div><div class="trouble-title">VPN не подключается</div><ul class="trouble-list"><li>Перезапустите приложение</li><li>Выключите/включите Wi-Fi или мобильный интернет</li><li>Удалите туннель и добавьте конфиг заново</li><li>Попробуйте другую сеть</li></ul></div>
|
||||
<div class="trouble-card"><div class="trouble-icon"></div><div class="trouble-title">VPN включён, нет интернета</div><ul class="trouble-list"><li>Отключитесь и подключитесь снова</li><li>Убедитесь, что конфиг актуальный</li><li>Перезагрузите устройство</li><li>Напишите в поддержку</li></ul></div>
|
||||
<div class="trouble-card"><div class="trouble-icon"></div><div class="trouble-title">Сайты не открываются</div><ul class="trouble-list"><li>Очистите кеш браузера</li><li>Смените DNS на 1.1.1.1</li><li>Откройте в режиме инкогнито</li><li>Попробуйте другой браузер</li></ul></div>
|
||||
<div class="trouble-card"><div class="trouble-icon"></div><div class="trouble-title">Медленная скорость</div><ul class="trouble-list"><li>Проверьте скорость без VPN</li><li>Переподключитесь</li><li>Закройте лишние приложения</li><li>Переключитесь Wi-Fi ↔ 4G</li></ul></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- PAGE: REGION -->
|
||||
<div class="page-section" id="page-region">
|
||||
<div class="content">
|
||||
<div class="region-hero">
|
||||
<h2>Смена региона App Store</h2>
|
||||
<p>Пошаговые инструкции для iPhone и iPad</p>
|
||||
</div>
|
||||
<div class="region-tabs">
|
||||
<button class="region-tab active" onclick="switchRegion('kz',this)"> Казахстан</button>
|
||||
<button class="region-tab" onclick="switchRegion('us',this)"> США</button>
|
||||
</div>
|
||||
|
||||
<div class="region-panel visible" id="region-kz">
|
||||
<div class="warn-box"><span style="font-size:18px;flex-shrink:0;"></span><p>Смена региона позволяет скачивать приложения, недоступные в вашем регионе. Покупки сохранятся, но активные подписки могут потребовать подтверждения.</p></div>
|
||||
<div class="guide-card">
|
||||
<div class="guide-card-header"><div class="plat-icon-lg" style="background:linear-gradient(135deg,#1a4a1a,#2ea82e);"></div><div class="guide-card-header-text"><h2>Регион: Казахстан</h2><p>iPhone · iPad · iOS 15 и новее</p></div></div>
|
||||
<ul class="step-list">
|
||||
<li class="step-item"><span class="step-circle wg-circle">1</span><div class="step-body"><p>Откройте <b>Настройки</b> → нажмите на своё <b>имя</b> вверху</p></div></li>
|
||||
<li class="step-item"><span class="step-circle wg-circle">2</span><div class="step-body"><p>Нажмите <b>«Медиаматериалы и покупки»</b> → <b>«Просмотр учётной записи»</b></p></div></li>
|
||||
<li class="step-item"><span class="step-circle wg-circle">3</span><div class="step-body"><p>Нажмите <b>«Страна/Регион»</b> → <b>«Сменить страну или регион»</b></p></div></li>
|
||||
<li class="step-item"><span class="step-circle wg-circle">4</span><div class="step-body"><p>Найдите и выберите <b>Казахстан</b></p></div></li>
|
||||
<li class="step-item"><span class="step-circle wg-circle">5</span><div class="step-body"><p>Нажмите <b>«Принять»</b> условия</p></div></li>
|
||||
<li class="step-item"><span class="step-circle wg-circle">6</span><div class="step-body"><p>Способ оплаты — выберите <b>«Нет»</b></p></div></li>
|
||||
<li class="step-item"><span class="step-circle wg-circle">7</span><div class="step-body"><p>Заполните адрес:</p><div class="addr-card"><div class="addr-card-title">Пример адреса · Алматы</div><div class="addr-row"><span class="addr-label">Город</span><span class="addr-val">Алматы</span></div><div class="addr-row"><span class="addr-label">Адрес</span><span class="addr-val">ул. Абая 1</span></div><div class="addr-row"><span class="addr-label">Индекс</span><span class="addr-val">050000</span></div><div class="addr-row"><span class="addr-label">Телефон</span><span class="addr-val">+7 727 000 0000</span></div></div></div></li>
|
||||
<li class="step-item"><span class="step-circle wg-circle">8</span><div class="step-body"><p>Нажмите <b>«Далее»</b> — регион изменён</p></div></li>
|
||||
</ul>
|
||||
<div class="notice notice-success"><span class="notice-icon">✅</span><p>Готово! Откройте App Store — доступны приложения казахстанского региона.</p></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="region-panel" id="region-us">
|
||||
<div class="warn-box"><span style="font-size:18px;flex-shrink:0;"></span><p>Американский App Store даёт максимальный доступ к приложениям. Рекомендуем штат <b>Орегон</b> — там нет налога с продаж.</p></div>
|
||||
<div class="guide-card">
|
||||
<div class="guide-card-header"><div class="plat-icon-lg" style="background:linear-gradient(135deg,#1a3a6e,#3a6bd4);"></div><div class="guide-card-header-text"><h2>Регион: США · Oregon</h2><p>iPhone · iPad · Без налога с продаж</p></div></div>
|
||||
<ul class="step-list">
|
||||
<li class="step-item"><span class="step-circle amn-circle">1</span><div class="step-body"><p>Откройте <b>Настройки</b> → нажмите на своё <b>имя</b> вверху</p></div></li>
|
||||
<li class="step-item"><span class="step-circle amn-circle">2</span><div class="step-body"><p>Нажмите <b>«Медиаматериалы и покупки»</b> → <b>«Просмотр учётной записи»</b></p></div></li>
|
||||
<li class="step-item"><span class="step-circle amn-circle">3</span><div class="step-body"><p>Нажмите <b>«Страна/Регион»</b> → <b>«Сменить страну или регион»</b></p></div></li>
|
||||
<li class="step-item"><span class="step-circle amn-circle">4</span><div class="step-body"><p>Найдите и выберите <b>Соединённые Штаты</b></p></div></li>
|
||||
<li class="step-item"><span class="step-circle amn-circle">5</span><div class="step-body"><p>Нажмите <b>«Принять»</b> условия</p></div></li>
|
||||
<li class="step-item"><span class="step-circle amn-circle">6</span><div class="step-body"><p>Способ оплаты — выберите <b>«None / Нет»</b></p></div></li>
|
||||
<li class="step-item"><span class="step-circle amn-circle">7</span><div class="step-body"><p>Заполните адрес (штат Орегон — без налогов):</p><div class="addr-card"><div class="addr-card-title">Пример адреса · Oregon, No Tax</div><div class="addr-row"><span class="addr-label">Street</span><span class="addr-val">1234 SW Main St</span></div><div class="addr-row"><span class="addr-label">City</span><span class="addr-val">Portland</span></div><div class="addr-row"><span class="addr-label">State</span><span class="addr-val">Oregon (OR)</span></div><div class="addr-row"><span class="addr-label">ZIP</span><span class="addr-val">97201</span></div><div class="addr-row"><span class="addr-label">Phone</span><span class="addr-val">503-555-0100</span></div></div></div></li>
|
||||
<li class="step-item"><span class="step-circle amn-circle">8</span><div class="step-body"><p>Нажмите <b>«Далее»</b> — регион изменён</p></div></li>
|
||||
</ul>
|
||||
<div class="notice notice-success"><span class="notice-icon">✅</span><p>Готово! Бесплатные приложения доступны сразу — без карты.</p></div>
|
||||
<div class="notice notice-tip"><span class="notice-icon"></span><p>Для платных нужна американская карта или подарочная карта iTunes (Gift Card).</p></div>
|
||||
</div>
|
||||
<div class="ip-check-section" style="margin-top:1.5rem;">
|
||||
<h3>Как вернуть свой регион обратно?</h3>
|
||||
<div class="check-cards">
|
||||
<div class="check-card"><span class="n">1.</span> Повторите шаги 1–3 из инструкции выше</div>
|
||||
<div class="check-card"><span class="n">2.</span> Выберите свою страну из списка</div>
|
||||
<div class="check-card"><span class="n">3.</span> Скачанные приложения останутся на телефоне</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="site-footer">
|
||||
<p class="site-footer-lead">Возникли проблемы с подключением — напишите администратору сервера.</p>
|
||||
<p class="disclaimer-footer">Страница только для приглашённых пользователей. Не передавайте конфиг третьим лицам.</p>
|
||||
</footer>
|
||||
|
||||
<script src="admin-port.js"></script>
|
||||
<script>
|
||||
(function () {
|
||||
var port =
|
||||
(typeof window.__AMNEZIA_ADMIN_PORT__ !== "undefined" && window.__AMNEZIA_ADMIN_PORT__) || "8080";
|
||||
var h = location.hostname || "";
|
||||
var proto = location.protocol || "http:";
|
||||
var adminUrl = proto + "//" + h + ":" + port + "/";
|
||||
var a = document.getElementById("admin-panel-link");
|
||||
if (a) {
|
||||
a.href = adminUrl;
|
||||
a.title = "Открыть в новой вкладке: " + adminUrl;
|
||||
}
|
||||
var ipEl = document.getElementById("server-address-display");
|
||||
if (ipEl) {
|
||||
ipEl.textContent = h || "—";
|
||||
}
|
||||
})();
|
||||
|
||||
function copyServerAddr(btn) {
|
||||
var t = document.getElementById("server-address-display");
|
||||
if (!t) return;
|
||||
var v = (t.textContent || "").trim();
|
||||
if (!v || v === "—") return;
|
||||
function done() {
|
||||
if (!btn) return;
|
||||
var prev = btn.dataset.prevLabel || btn.textContent;
|
||||
btn.dataset.prevLabel = prev;
|
||||
btn.textContent = "Скопировано";
|
||||
btn.classList.add("copied");
|
||||
setTimeout(function () {
|
||||
btn.textContent = btn.dataset.prevLabel;
|
||||
btn.classList.remove("copied");
|
||||
}, 1800);
|
||||
}
|
||||
if (navigator.clipboard && navigator.clipboard.writeText) {
|
||||
navigator.clipboard.writeText(v).then(done).catch(function () {
|
||||
fallbackCopy(v, done);
|
||||
});
|
||||
} else {
|
||||
fallbackCopy(v, done);
|
||||
}
|
||||
}
|
||||
|
||||
function fallbackCopy(text, cb) {
|
||||
var ta = document.createElement("textarea");
|
||||
ta.value = text;
|
||||
ta.style.position = "fixed";
|
||||
ta.style.left = "-9999px";
|
||||
document.body.appendChild(ta);
|
||||
ta.select();
|
||||
try {
|
||||
document.execCommand("copy");
|
||||
if (cb) cb();
|
||||
} finally {
|
||||
document.body.removeChild(ta);
|
||||
}
|
||||
}
|
||||
|
||||
function switchPage(page, btn) {
|
||||
document.querySelectorAll('.page-section').forEach(function(s){ s.classList.remove('visible'); });
|
||||
document.getElementById('page-' + page).classList.add('visible');
|
||||
document.querySelectorAll('.page-nav-btn').forEach(function(b){ b.classList.remove('active'); });
|
||||
btn.classList.add('active');
|
||||
window.scrollTo({top:0, behavior:'smooth'});
|
||||
}
|
||||
function switchVpn(vpn, btn) {
|
||||
document.querySelectorAll('.vpn-section').forEach(function(s){ s.classList.remove('visible'); });
|
||||
document.getElementById('vpn-' + vpn).classList.add('visible');
|
||||
document.querySelectorAll('.vpn-tab').forEach(function(b){ b.classList.remove('active'); });
|
||||
btn.classList.add('active');
|
||||
}
|
||||
function switchPlat(vpn, plat, btn) {
|
||||
['ios','android','windows','macos'].forEach(function(p){
|
||||
var el = document.getElementById(vpn+'-'+p);
|
||||
if(el) el.classList.remove('visible');
|
||||
});
|
||||
var t = document.getElementById(vpn+'-'+plat);
|
||||
if(t) t.classList.add('visible');
|
||||
var sel = document.getElementById(vpn+'-plats');
|
||||
if(sel) sel.querySelectorAll('.plat-btn').forEach(function(b){ b.classList.remove('wg-active','amn-active'); });
|
||||
btn.classList.add(vpn==='wg' ? 'wg-active' : 'amn-active');
|
||||
}
|
||||
function switchRegion(r, btn) {
|
||||
document.querySelectorAll('.region-panel').forEach(function(p){ p.classList.remove('visible'); });
|
||||
document.getElementById('region-'+r).classList.add('visible');
|
||||
document.querySelectorAll('.region-tab').forEach(function(b){ b.classList.remove('active'); });
|
||||
btn.classList.add('active');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
20
landing/nginx.conf
Normal file
20
landing/nginx.conf
Normal file
@@ -0,0 +1,20 @@
|
||||
server {
|
||||
listen 80;
|
||||
server_name _;
|
||||
root /usr/share/nginx/html;
|
||||
index index.html;
|
||||
|
||||
gzip on;
|
||||
gzip_types text/css text/plain application/json application/javascript;
|
||||
|
||||
add_header X-Content-Type-Options nosniff always;
|
||||
|
||||
location / {
|
||||
try_files $uri $uri/ /index.html;
|
||||
}
|
||||
|
||||
location ~* \.css$ {
|
||||
expires 1h;
|
||||
add_header Cache-Control "public, max-age=3600";
|
||||
}
|
||||
}
|
||||
949
landing/styles.css
Normal file
949
landing/styles.css
Normal file
@@ -0,0 +1,949 @@
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:root {
|
||||
--teal: #1d9e75;
|
||||
--teal-light: #e1f5ee;
|
||||
--teal-dark: #085041;
|
||||
--blue: #378add;
|
||||
--blue-dark: #185fa5;
|
||||
--amber: #ba7517;
|
||||
--bg: #0d0f12;
|
||||
--bg2: #141720;
|
||||
--bg3: #1c202b;
|
||||
--bg4: #232837;
|
||||
--border: rgba(255, 255, 255, 0.08);
|
||||
--border2: rgba(255, 255, 255, 0.14);
|
||||
--text: #f0f2f5;
|
||||
--muted: #8a93a8;
|
||||
--muted2: #5e6880;
|
||||
--font: "Outfit", system-ui, sans-serif;
|
||||
--mono: "JetBrains Mono", ui-monospace, monospace;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font);
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
min-height: 100vh;
|
||||
line-height: 1.6;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.site-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
background: rgba(13, 15, 18, 0.92);
|
||||
backdrop-filter: blur(20px);
|
||||
border-bottom: 1px solid var(--border);
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
|
||||
.header-inner {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
min-height: 56px;
|
||||
flex-wrap: wrap;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-weight: 700;
|
||||
font-size: 17px;
|
||||
letter-spacing: -0.02em;
|
||||
text-decoration: none;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.logo-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 9px;
|
||||
background: linear-gradient(135deg, var(--teal), #0a5c45);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.header-admin {
|
||||
padding: 8px 14px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid var(--border2);
|
||||
background: var(--bg3);
|
||||
font-family: var(--font);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #5fd8b0;
|
||||
text-decoration: none;
|
||||
transition:
|
||||
border-color 0.18s,
|
||||
background 0.18s;
|
||||
}
|
||||
|
||||
.header-admin:hover {
|
||||
border-color: rgba(29, 158, 117, 0.45);
|
||||
background: rgba(29, 158, 117, 0.1);
|
||||
}
|
||||
|
||||
.status-pill {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 5px 12px;
|
||||
border-radius: 20px;
|
||||
border: 1px solid rgba(29, 158, 117, 0.3);
|
||||
background: rgba(29, 158, 117, 0.08);
|
||||
font-size: 12px;
|
||||
color: var(--teal);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: var(--teal);
|
||||
box-shadow: 0 0 6px var(--teal);
|
||||
animation: pulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.hero {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
padding: 2.5rem 1.5rem 1.25rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 5px 14px;
|
||||
border-radius: 20px;
|
||||
border: 1px solid var(--border2);
|
||||
background: var(--bg3);
|
||||
font-size: 12px;
|
||||
color: #5fd8b0;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-size: clamp(26px, 6vw, 44px);
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.03em;
|
||||
line-height: 1.15;
|
||||
margin-bottom: 0.5rem;
|
||||
background: linear-gradient(135deg, #f0f2f5 30%, #8a93a8);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.hero p {
|
||||
font-size: clamp(14px, 2.5vw, 16px);
|
||||
color: var(--muted);
|
||||
max-width: 520px;
|
||||
margin: 0 auto 1.25rem;
|
||||
}
|
||||
|
||||
.hero p strong {
|
||||
color: var(--text);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.server-summary {
|
||||
max-width: 900px;
|
||||
margin: 0 auto 1.5rem;
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
|
||||
.server-summary-card {
|
||||
background: var(--bg2);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 18px;
|
||||
padding: 1.25rem 1.5rem;
|
||||
}
|
||||
|
||||
.server-summary-label {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: #5fd8b0;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.server-addr-label {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
color: var(--muted);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.server-addr-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.addr-box {
|
||||
flex: 1;
|
||||
min-width: 180px;
|
||||
font-family: var(--mono);
|
||||
font-size: 14px;
|
||||
padding: 10px 14px;
|
||||
background: var(--bg4);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
color: var(--text);
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.copy-btn {
|
||||
padding: 10px 18px;
|
||||
border-radius: 10px;
|
||||
border: none;
|
||||
background: linear-gradient(135deg, var(--teal), #0a6b4f);
|
||||
color: #fff;
|
||||
font-family: var(--font);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: filter 0.15s;
|
||||
}
|
||||
|
||||
.copy-btn:hover {
|
||||
filter: brightness(1.06);
|
||||
}
|
||||
|
||||
.copy-btn.copied {
|
||||
background: var(--bg4);
|
||||
color: #5fd8b0;
|
||||
border: 1px solid rgba(29, 158, 117, 0.4);
|
||||
}
|
||||
|
||||
.services-line {
|
||||
font-size: 13.5px;
|
||||
color: var(--muted);
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.services-line strong {
|
||||
color: var(--text);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.server-note {
|
||||
margin-top: 10px;
|
||||
font-size: 12.5px;
|
||||
color: var(--muted2);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.page-nav {
|
||||
max-width: 900px;
|
||||
margin: 0 auto 1.5rem;
|
||||
padding: 0 1.5rem;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.page-nav-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 11px 20px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--bg3);
|
||||
font-family: var(--font);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--muted);
|
||||
cursor: pointer;
|
||||
transition: all 0.18s;
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
min-width: 160px;
|
||||
}
|
||||
|
||||
.page-nav-btn:hover {
|
||||
border-color: var(--border2);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.page-nav-btn.active {
|
||||
background: var(--bg4);
|
||||
color: var(--text);
|
||||
border-color: var(--border2);
|
||||
}
|
||||
|
||||
.page-section {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.page-section.visible {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.vpn-switcher {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
|
||||
.vpn-tabs {
|
||||
display: flex;
|
||||
background: var(--bg3);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 14px;
|
||||
padding: 4px;
|
||||
gap: 4px;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.vpn-tab {
|
||||
flex: 1;
|
||||
padding: 10px 16px;
|
||||
border-radius: 10px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
font-family: var(--font);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--muted);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.vpn-tab.active {
|
||||
background: var(--bg4);
|
||||
color: var(--text);
|
||||
border: 1px solid var(--border2);
|
||||
}
|
||||
|
||||
.vpn-tab-badge {
|
||||
font-size: 10px;
|
||||
padding: 2px 7px;
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.wg-badge {
|
||||
background: rgba(55, 138, 221, 0.15);
|
||||
color: #7ab8f5;
|
||||
}
|
||||
|
||||
.amn-badge {
|
||||
background: rgba(29, 158, 117, 0.15);
|
||||
color: #5fd8b0;
|
||||
}
|
||||
|
||||
.platform-selector {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
margin-bottom: 1.25rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.plat-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
padding: 8px 14px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--bg3);
|
||||
font-family: var(--font);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--muted);
|
||||
cursor: pointer;
|
||||
transition: all 0.18s;
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
.plat-btn:hover {
|
||||
border-color: var(--border2);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.plat-btn.wg-active {
|
||||
background: rgba(55, 138, 221, 0.1);
|
||||
border-color: rgba(55, 138, 221, 0.4);
|
||||
color: #7ab8f5;
|
||||
}
|
||||
|
||||
.plat-btn.amn-active {
|
||||
background: rgba(29, 158, 117, 0.1);
|
||||
border-color: rgba(29, 158, 117, 0.4);
|
||||
color: #5fd8b0;
|
||||
}
|
||||
|
||||
.content {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
padding: 0 1.5rem 3rem;
|
||||
}
|
||||
|
||||
.vpn-section {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.vpn-section.visible {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.steps-panel {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.steps-panel.visible {
|
||||
display: block;
|
||||
animation: fadeUp 0.2s ease;
|
||||
}
|
||||
|
||||
.region-panel {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.region-panel.visible {
|
||||
display: block;
|
||||
animation: fadeUp 0.2s ease;
|
||||
}
|
||||
|
||||
@keyframes fadeUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(6px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.guide-card {
|
||||
background: var(--bg2);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.guide-card-header {
|
||||
padding: 1.25rem 1.5rem;
|
||||
border-bottom: 1px solid var(--border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
background: var(--bg3);
|
||||
}
|
||||
|
||||
.plat-icon-lg {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 13px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 22px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.ios-icon {
|
||||
background: linear-gradient(135deg, #1c4f8a, #2d7be5);
|
||||
}
|
||||
|
||||
.android-icon {
|
||||
background: linear-gradient(135deg, #1a5c38, #2ea86a);
|
||||
}
|
||||
|
||||
.windows-icon {
|
||||
background: linear-gradient(135deg, #173a6e, #0077d4);
|
||||
}
|
||||
|
||||
.macos-icon {
|
||||
background: linear-gradient(135deg, #3a3a3a, #666);
|
||||
}
|
||||
|
||||
.guide-card-header-text h2 {
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.guide-card-header-text p {
|
||||
font-size: 12.5px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.step-list {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.step-item {
|
||||
display: flex;
|
||||
gap: 14px;
|
||||
padding: 1rem 1.5rem;
|
||||
border-bottom: 1px solid var(--border);
|
||||
align-items: flex-start;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
|
||||
.step-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.step-item:hover {
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
}
|
||||
|
||||
.step-circle {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
.wg-circle {
|
||||
background: rgba(55, 138, 221, 0.15);
|
||||
color: #7ab8f5;
|
||||
border: 1px solid rgba(55, 138, 221, 0.25);
|
||||
}
|
||||
|
||||
.amn-circle {
|
||||
background: rgba(29, 158, 117, 0.15);
|
||||
color: #5fd8b0;
|
||||
border: 1px solid rgba(29, 158, 117, 0.25);
|
||||
}
|
||||
|
||||
.step-body {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.step-body p {
|
||||
font-size: 14.5px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.step-body p b {
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.code-tag {
|
||||
font-family: var(--mono);
|
||||
font-size: 12px;
|
||||
background: var(--bg4);
|
||||
color: #7ab8f5;
|
||||
padding: 1px 7px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid var(--border2);
|
||||
}
|
||||
|
||||
.alt-step {
|
||||
font-size: 12.5px;
|
||||
color: var(--muted);
|
||||
margin-top: 5px;
|
||||
padding: 6px 10px;
|
||||
background: var(--bg4);
|
||||
border-radius: 8px;
|
||||
border-left: 2px solid var(--border2);
|
||||
}
|
||||
|
||||
.notice {
|
||||
padding: 1rem 1.5rem;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: flex-start;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.notice-tip {
|
||||
background: rgba(186, 117, 23, 0.08);
|
||||
}
|
||||
|
||||
.notice-success {
|
||||
background: rgba(29, 158, 117, 0.08);
|
||||
}
|
||||
|
||||
.notice-icon {
|
||||
font-size: 16px;
|
||||
flex-shrink: 0;
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
.notice p {
|
||||
font-size: 13.5px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.notice-tip p {
|
||||
color: #e8b76a;
|
||||
}
|
||||
|
||||
.notice-success p {
|
||||
color: #5fd8b0;
|
||||
}
|
||||
|
||||
.ip-check-section {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.ip-check-section h3 {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.875rem;
|
||||
}
|
||||
|
||||
.check-cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.check-card {
|
||||
background: var(--bg2);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 14px;
|
||||
padding: 1rem 1.125rem;
|
||||
font-size: 13.5px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.check-card .n {
|
||||
font-weight: 700;
|
||||
color: var(--teal);
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.trouble-section {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.trouble-section h3 {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.875rem;
|
||||
}
|
||||
|
||||
.trouble-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.trouble-card {
|
||||
background: var(--bg2);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 14px;
|
||||
padding: 1rem 1.125rem;
|
||||
}
|
||||
|
||||
.trouble-icon {
|
||||
font-size: 18px;
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
|
||||
.trouble-title {
|
||||
font-size: 13.5px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.trouble-list {
|
||||
font-size: 12.5px;
|
||||
color: var(--muted);
|
||||
line-height: 1.8;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.trouble-list li {
|
||||
padding-left: 10px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.trouble-list li::before {
|
||||
content: "·";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
color: var(--teal);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.region-tabs {
|
||||
display: flex;
|
||||
background: var(--bg3);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 14px;
|
||||
padding: 4px;
|
||||
gap: 4px;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.region-tab {
|
||||
flex: 1;
|
||||
padding: 10px 16px;
|
||||
border-radius: 10px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
font-family: var(--font);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--muted);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.region-tab.active {
|
||||
background: var(--bg4);
|
||||
color: var(--text);
|
||||
border: 1px solid var(--border2);
|
||||
}
|
||||
|
||||
.region-hero {
|
||||
text-align: center;
|
||||
padding: 0.5rem 1rem 1.5rem;
|
||||
}
|
||||
|
||||
.region-hero h2 {
|
||||
font-size: clamp(20px, 4vw, 32px);
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.02em;
|
||||
margin-bottom: 0.4rem;
|
||||
background: linear-gradient(135deg, #f0f2f5 30%, #8a93a8);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.region-hero p {
|
||||
font-size: 14px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.warn-box {
|
||||
background: rgba(186, 117, 23, 0.08);
|
||||
border-radius: 14px;
|
||||
padding: 1rem 1.25rem;
|
||||
margin-bottom: 1.25rem;
|
||||
border: 1px solid rgba(186, 117, 23, 0.2);
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.warn-box p {
|
||||
font-size: 13.5px;
|
||||
color: #e8b76a;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.addr-card {
|
||||
background: var(--bg3);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 14px;
|
||||
padding: 1rem 1.25rem;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.addr-card-title {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: var(--muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.addr-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 6px 0;
|
||||
border-bottom: 1px solid var(--border);
|
||||
font-size: 13.5px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.addr-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.addr-label {
|
||||
color: var(--muted);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.addr-val {
|
||||
font-family: var(--mono);
|
||||
font-size: 12.5px;
|
||||
color: var(--text);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.site-footer {
|
||||
border-top: 1px solid var(--border);
|
||||
padding: 1.75rem 1.5rem 2rem;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: var(--muted2);
|
||||
}
|
||||
|
||||
.site-footer-lead {
|
||||
color: var(--muted);
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.support-line {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 0.35rem 0.5rem;
|
||||
margin-top: 12px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.support-title {
|
||||
color: var(--text);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.support-sep {
|
||||
opacity: 0.45;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.support-line a {
|
||||
color: #5fd8b0;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.support-line a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.support-blurb {
|
||||
margin: 10px auto 0;
|
||||
max-width: 36rem;
|
||||
font-size: 11px;
|
||||
line-height: 1.45;
|
||||
color: var(--muted2);
|
||||
}
|
||||
|
||||
.disclaimer-footer {
|
||||
margin-top: 16px;
|
||||
font-size: 11px;
|
||||
color: var(--muted2);
|
||||
line-height: 1.45;
|
||||
max-width: 28rem;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--bg);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--bg4);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.hero {
|
||||
padding: 1.75rem 1.25rem 1rem;
|
||||
}
|
||||
|
||||
.page-nav,
|
||||
.vpn-switcher,
|
||||
.content,
|
||||
.server-summary {
|
||||
padding-left: 1.25rem;
|
||||
padding-right: 1.25rem;
|
||||
}
|
||||
|
||||
.step-item {
|
||||
padding: 0.875rem 1rem;
|
||||
}
|
||||
|
||||
.guide-card-header {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.notice {
|
||||
padding: 0.875rem 1rem;
|
||||
}
|
||||
|
||||
.vpn-tab-badge {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.page-nav-btn {
|
||||
font-size: 13px;
|
||||
padding: 9px 12px;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user