From e25281f695d607d520470930e7134b4cdb1e872a Mon Sep 17 00:00:00 2001 From: djjdjdbf9 Date: Sat, 24 Oct 2026 14:50:48 +0300 Subject: [PATCH] refactored a gui fully --- README.md | 33 +- assets/icons/android-tv.svg | 8 + assets/icons/android.svg | 17 + assets/icons/ios.svg | 5 + assets/icons/linux.svg | 12 + assets/icons/macos.svg | 4 + assets/icons/windows.svg | 6 + index.html | 1009 ++++++++++++----- script.js | 63 +- styles.css | 2065 ++++++++++++++++++++++++----------- 10 files changed, 2264 insertions(+), 958 deletions(-) create mode 100644 assets/icons/android-tv.svg create mode 100644 assets/icons/android.svg create mode 100644 assets/icons/ios.svg create mode 100644 assets/icons/linux.svg create mode 100644 assets/icons/macos.svg create mode 100644 assets/icons/windows.svg diff --git a/README.md b/README.md index fc4f52e..3e48ade 100644 --- a/README.md +++ b/README.md @@ -10,16 +10,24 @@ ## 📌 О проекте -Лендинг-страница для VPN-сервиса **DmitriyVPN**. Сайт рассказывает о тарифах, преимуществах сервиса и помогает пользователям быстро подключиться через Telegram-бот. +Лендинг-страница для VPN-сервиса **DmitriyVPN**, полностью переработанная в соответствии с дизайн-системой **Surfshark** (`DESIGN.md`). +Дизайн выполнен в концепции светлого SaaS с контрастными тёмными панелями (ритм «dark → light → dark»), фирменным акцентом Surfshark Teal (`#1ebfbf`), конверсионными кнопками Coral Pulse (`#fa3556`) и промо-баннером Promo Gold (`#ffc200`). --- -## 🛠 Технологии +## 🛠 Технологии и дизайн-система -- **HTML5** — семантическая разметка -- **CSS3** — стили, анимации, адаптив -- **Vanilla JS** — интерактивность (аккордеон FAQ, бургер-меню, тогл тарифов, scroll reveal) -- **Google Fonts** — Inter, Fira Code +- **HTML5** — семантическая разметка с чистой иерархией +- **CSS3** — полная система токенов Surfshark Design System: + - Шрифтовая система: исключительно **Inter** (веса 400, 600, 700; дисплейный трекинг -1.5px на 60px) + - Цветовая палитра: Surfshark Teal (`#1ebfbf`), Coral Pulse (`#fa3556`), Promo Gold (`#ffc200`), Charcoal Ink (`#16191c`), Tide Tint (`#e8f7f8`), Ash Gray (`#dadadd`), Deep Abyss (`#1e2327`) + - Скругления: 48px для карточек, 12px для стандартных кнопок, 64px для Hero-карточки, 96px для pill-элементов + - Плоский современный стиль без теней (elevation через контраст и 1px hairline-границы) +- **Vanilla JS** — интерактивность: + - Динамический переключатель периодов тарифов (1 мес, 3 мес со скидкой -10%, 12 мес со скидкой -20%) + - Интерактивный плавный аккордеон FAQ + - Адаптивное бургер-меню для мобильных устройств + - Плавная анимация появления контента при скролле (Scroll Reveal) --- @@ -27,9 +35,10 @@ ``` dmitriyvpn/ -├── index.html # Основная HTML-разметка -├── styles.css # Таблица стилей -├── script.js # Клиентские скрипты +├── DESIGN.md # Спецификация дизайн-системы Surfshark +├── index.html # Основная HTML-разметка страницы +├── styles.css # Таблица стилей (токены и компоненты) +├── script.js # Клиентские скрипты интерактивности └── README.md # Документация проекта ``` @@ -38,19 +47,17 @@ dmitriyvpn/ ## 🚀 Запуск локально ```bash -# Открыть страницу в браузере +# Открыть страницу в браузеру start index.html ``` -Или через расширение **Live Server** в VS Code. - --- ## 📋 Тарифы | Тариф | Устройства | Цена | |---|---|---| -| Бесплатный | 1 | 0 ₽ | +| Бесплатный | 1 | 0 ₽ / навсегда | | Standard | 1 | от 87.38 до 109.22 ₽/мес | | Pro | 5 | от 155.53 до 194.41 ₽/мес | | Premium | 15 | от 233.30 до 291.62 ₽/мес | diff --git a/assets/icons/android-tv.svg b/assets/icons/android-tv.svg new file mode 100644 index 0000000..1dc5075 --- /dev/null +++ b/assets/icons/android-tv.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/assets/icons/android.svg b/assets/icons/android.svg new file mode 100644 index 0000000..79580fd --- /dev/null +++ b/assets/icons/android.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/assets/icons/ios.svg b/assets/icons/ios.svg new file mode 100644 index 0000000..7360e76 --- /dev/null +++ b/assets/icons/ios.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/assets/icons/linux.svg b/assets/icons/linux.svg new file mode 100644 index 0000000..f16ac49 --- /dev/null +++ b/assets/icons/linux.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/assets/icons/macos.svg b/assets/icons/macos.svg new file mode 100644 index 0000000..9729477 --- /dev/null +++ b/assets/icons/macos.svg @@ -0,0 +1,4 @@ + + + + diff --git a/assets/icons/windows.svg b/assets/icons/windows.svg new file mode 100644 index 0000000..f832688 --- /dev/null +++ b/assets/icons/windows.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/index.html b/index.html index 8963ec5..9d64909 100644 --- a/index.html +++ b/index.html @@ -1,342 +1,797 @@ - + - DmitriyVPN — Быстрый и стабильный VPN для всех устройств - + DmitriyVPN — Надежный интернет без ограничений + + + + - + - - + +
+ ⚡ Ограниченное предложение: Скидка до 20% при оформлении подписки на 12 месяцев! Выбрать тариф → +
-
+ +
- -
+ + +
- -
+ +
-
Для всех устройств
-

Надежный интернет без ограничений

-

- DmitriyVPN — современное, легковесное решение для вашей безопасности. Стабильный обход блокировок, минимальный пинг в играх и мгновенная скорость на любом устройстве. +

+ + VLESS XTLS-Reality 2026 · Без Блокировок +
+ +

Надежный интернет без ограничений

+ +

+ DmitriyVPN — современное легковесное решение для вашей безопасности. Стабильный обход блокировок и DPI, минимальный пинг в играх и мгновенная скорость на любом устройстве.

-
- Выбрать тариф - В Telegram-канал + + +
+
+ + + + Необнаруживаемый протокол VLESS XTLS-Reality (маскировка под HTTPS) +
+
+ + + + Скорость до 1 Гбит/с без троттлинга трафика и лимитов +
+
+ + + + Строгая политика No-Logs — абсолютная конфиденциальность данных +
+
+ + +
+ Выбрать тариф + В Telegram-канал →
+
-
-
🛡️
-
DMITRIY_CORE V2
-
-
-
- - -
-

Почему выбирают нас

-

Всё что нужно для быстрого, безопасного и стабильного интернета

-
-
- 🚀 -
Максимальная скорость
-
До 1 Гбит/с без троттлинга и ограничений трафика на всех тарифах.
-
-
- 🔒 -
Без логов
-
Мы не храним никаких данных о вашей активности. Абсолютная приватность.
-
-
- 🌍 -
20 локаций
-
Серверы по всему миру: Европа, Азия, Америка — выбери ближайший.
-
-
- ⚡ -
Пинг <100 мс
-
Оптимизировано для игр. Никаких потерь пакетов и лагов.
-
-
-
- - -
-

Поддерживаемые устройства

-

Один аккаунт — все ваши гаджеты

-
-
- 🖥️ -
Windows
-
-
- 🍎 -
macOS
-
-
- 🤖 -
Android
-
-
- 📱 -
iOS
-
-
- 🐧 -
Linux
-
-
- 📺 -
Android TV
-
-
-
- - -
-

Подключение за 3 шага

-

Никаких сложных настроек — просто работает

-
-
-
1
-
Открой Telegram-бот
-
Перейди в наш бот @DmitriyVPN и нажми Старт. Регистрация не требуется.
-
-
-
2
-
Выбери тариф
-
Выбери подходящий план и оплати удобным способом — всё внутри бота.
-
-
-
3
-
Подключись за 1 минуту
-
Получи конфиг или QR-код и импортируй его в приложение. Готово!
-
-
-
- - -
-

Гибкие тарифные планы

-

Выбери период — сэкономь больше

- -
- - - -
- -
- - -
-
Бесплатный
-
0 ₽/ навсегда
-
    -
  • Медленная скорость работы
    • -
  • Доступно всего 5 локаций
    • -
  • Обход жестких глушилок
    • -
  • Приоритетная поддержка
    • -
- Подключить -
- - -
-
Платные тарифы
-
- от 109.22 ₽/ мес. + +
+
+
+ + Соединение активно +
+
VLESS Reality
-
    -
  • Максимальная скорость соединения
    • -
  • 20 доступных локаций
    • -
  • Полный обход глушилок
    • -
  • Высокая стабильность работы
    • + +
    +
    + + + + + +
    +
    DMITRIY_CORE V2
    +
    Frankfurt, Germany · 1 Gbps
    +
    + +
    +
    +
    Пинг в играх
    +
    < 100 мс
    +
    +
    +
    Потери пакетов
    +
    0.00%
    +
    +
    +
    Шифрование
    +
    Reality
    +
    +
    +
    Хранение логов
    +
    0 (No-Log)
    +
    +
    +
+
+
+ + + + + +
+
+

Почему выбирают DmitriyVPN

+

Всё необходимое для ультрабыстрого, безопасного и стабильного интернета без цензуры

+
+ +
+
+
+ + + +
+

Максимальная скорость

+

До 1 Гбит/с без троттлинга провайдеров и ограничений трафика. Идеально для 4K HDR стриминга и торрентов.

+
+ +
+
+ + + + +
+

Без логов и слежки

+

Мы не сохраняем никаких логов вашей активности, истории посещений или IP-адресов. Полная анонимность.

+
+ +
+
+ + + + + +
+

20+ локаций по миру

+

Выделенные серверы в Европе, США и Азии. Автоматический подбор самого быстрого маршрута в 1 клик.

+
+ +
+
+ + + + +
+

Пинг <100 мс

+

Оптимизировано для сетевых игр. Никаких потерь пакетов, лагов и скачков задержки.

+
+
+
+ + +
+
+
+

Поддерживаемые устройства

+

Один аккаунт — для всех ваших смартфонов, ПК и телевизоров

+
+ +
+
+
+ Windows +
+
Windows
+
v2rayN / Hiddify
+
+ +
+
+ macOS +
+
macOS
+
Sing-Box / FoXray
+
+ +
+
+ Android +
+
Android
+
v2rayNG / Hiddify
+
+ +
+
+ iOS +
+
iOS (iPhone)
+
Shadowrocket / Streisand
+
+ +
+
+ Linux +
+
Linux
+
CLI / Sing-Box
+
+ +
+
+ Android TV +
+
Android TV
+
v2rayNG / Smart TV
+
+
+
+
+ + +
+
+
+

Подключение за 3 простых шага

+

Никаких сложных регистраций и заполнения форм — всё работает через Telegram за 1 минуту

+
+ +
+
+
1
+

Открой Telegram-бот

+

Перейди в официальный бот @DmitriyVPN и нажми кнопку «Старт». Аккаунт создаётся моментально.

+
+ +
+
2
+

Выбери тариф

+

Выбери подходящий период и оплати через СБП, карту любого банка РФ или криптовалюту прямо в боте.

+
+ +
+
3
+

Подключись за 30 сек

+

Получи персональный ключ или QR-код и импортируй его в клиент на своём устройстве. Свободный интернет готов!

+
+
+
+
+ + +
+
+

Гибкие тарифные планы

+

Выберите подходящий период — экономьте больше при годовой оплате

+
+ + +
+
+ + + +
+
+ + +
+ + +
+
Бесплатный
+
+ 0 ₽ / навсегда +
+ +
    +
  • + + + + Базовая скорость соединения +
    • +
  • + + + + Доступно 5 базовых локаций +
    • +
  • + + + + Полный обход +
    • +
  • + + + + Приоритетная техподдержка +
-
-
+ + Подключить бесплатно +
+ + +
+
ПОЛНЫЙ ОБХОД
+ +
Платные тарифы
+
+ от 109.22 ₽ / мес. +
+ +
+
Standard | 1 устр. - 109.22 ₽ + 109.22 ₽/мес
-
+
Pro | 5 устр. - 194.41 ₽ + 194.41 ₽/мес
-
+
Premium | 15 устр. - 291.62 ₽ + 291.62 ₽/мес
- Открыть в Telegram -
- -
-
Пробный тест
-
0 ₽/ 3 дня
-
    -
  • Высокая скорость работы
    • -
  • Доступно 10 локаций
    • -
  • Обход жестких глушилок
    • -
  • Приоритетная поддержка
    • +
      +
    • + + + + Максимальная скорость (до 1 Гбит/с) +
      • +
    • + + + + 20 мировых высокоскоростных локаций +
      • +
    • + + + + Полный обход +
      • +
    • + + + + Мгновенная выдача и круглосуточная поддержка +
    - Попробовать + + + Оформить в Telegram +
+ + +
+
Пробный тест
+
+ 0 ₽ / 3 дня +
+ +
    +
  • + + + + Высокая скорость работы +
    • +
  • + + + + Доступно 10 локаций +
    • +
  • + + + + Полный обход +
    • +
  • + + + + Приоритетная техподдержка +
    • +
+ + Попробовать 3 дня
- -
-

Часто задаваемые вопросы

-

Ответы на самые популярные вопросы

-
- -
- -
-
Да. DmitriyVPN использует современные протоколы, разработанные для обхода глубокой инспекции пакетов (DPI). Платные тарифы имеют полный обход жёстких блокировок и стабильно работают на территории РФ.
-
+ +
+
+
+

Часто задаваемые вопросы

+

Ответы на самые популярные вопросы о подключении и работе сервиса

-
- -
-
Мы используем VLESS / XTLS-Reality — один из самых современных и необнаруживаемых протоколов. Он маскирует трафик под обычный HTTPS, что делает его практически невидимым для блокировок.
-
-
- -
- -
-
Мгновенно. Бот автоматически выдаёт конфиг сразу после подтверждения оплаты — обычно не более 30 секунд.
-
-
- -
- -
-
Да, VPN работает на Android, iOS, Android TV, Windows, macOS и Linux. Для подключения используется v2rayNG (Android / Android TV) или Shadowrocket (iOS). Установка занимает 1–2 минуты.
-
-
- -
- -
-
Нет. Мы придерживаемся строгой политики No-Log. Никакие данные о вашем трафике, посещённых сайтах или IP-адресах не сохраняются и не передаются третьим лицам.
-
-
- -
- -
-
Напишите в техподдержку @Gioramily — проблема обычно решается за несколько минут. Также можно попробовать сменить локацию сервера прямо в боте.
-
-
- -
-
- - -
-

Что говорят пользователи

-

Реальные отзывы от наших клиентов

-
-
-
-
С
-
-
★★★★★
-
Сергей К.
-
✓ Проверенный покупатель
+
+
+ +
+
+ Да, абсолютно. DmitriyVPN использует современный протокол VLESS XTLS-Reality, специально разработанный для эффективного обхода глубокой инспекции пакетов (DPI). Платные тарифы имеют полный обход любых региональных блокировок и работают стабильно на мобильном интернете и проводных провайдерах. +
-

«Брал премиум чисто ради того, чтобы нормально смотреть видосы в 4К на компе, так как стандартные методы перестали работать. Всё летает, задержек нет вообще. Топ за свои деньги.»

-
-
-
-
D
-
-
★★★★★
-
Dima_Gamer
-
✓ Проверенный покупатель
+ +
+ +
+
+ Мы используем VLESS с XTLS-Reality — один из самых защищённых и необнаруживаемых протоколов в мире. Он идеально маскирует ваш трафик под обычный защищённый веб-трафик (HTTPS), что делает его незаметным для блокирующих систем. +
+
+
+ +
+ +
+
+ Мгновенно. Наш Telegram-бот автоматически формирует ваш персональный конфиг и QR-код сразу же после подтверждения транзакции. Весь процесс занимает менее 30 секунд. +
+
+
+ +
+ +
+
+ Да, сервис поддерживается на Android, iOS, Windows, macOS, Linux и Android TV. В боте есть пошаговые видео-инструкции по настройке бесплатных приложений (v2rayNG, Shadowrocket, Hiddify). +
+
+
+ +
+ +
+
+ Нет. Мы строго придерживаемся политики No-Logs. Никакие данные о передаваемом трафике, посещённых доменах, DNS-запросах или реальных IP-адресах пользователей никогда не записываются на серверах. +
+
+
+ +
+ +
+
+ Вы можете в любой момент написать напрямую нашему специалисту техподдержки @Gioramily в Telegram. Мы помогаем с пошаговой настройкой каждого устройства и решаем любые технические вопросы в течение нескольких минут. +
-

«Респект разработчику за пинг! Играю в онлайн-шутеры, с этим впном пакеты не теряются, коннект стабильный. Главное — на ПК настраивается за полминуты.»

- -
-
-

Возникли вопросы или нужна помощь?

-

Наша техническая поддержка работает оперативно. Если не получается настроить клиент или есть вопросы по оплате — напишите нам напрямую.

- Связаться с техподдержкой + +
+
+
+ «DmitriyVPN полностью решил вопрос со стабильным интернетом и YouTube в 4K. Никаких тормозов, нулевой пинг и настройка за минуту.» +
+
АЛЕКСЕЙ М.
+
Активный подписчик DmitriyVPN Pro · 1 год использования
+ + Все отзывы в Telegram-канале → + +
+ +
+
+
+
С
+
+
★★★★★
+
Сергей К.
+
✓ Проверенный покупатель
+
+
+

+ «Брал тариф Premium чисто ради того, чтобы нормально смотреть видео в 4К на ТВ и ноутбуке, так как остальные решения перестали работать. Всё летает, задержек нет вообще. Топ за свои деньги!» +

+
+ +
+
+
D
+
+
★★★★★
+
Dima_Gamer
+
✓ Проверенный покупатель
+
+
+

+ «Огромный респект за пинг! Играю в онлайн-шутеры, с DmitriyVPN пакеты не теряются, коннект кристально чистый. И главное — на ПК настроил буквально за 30 секунд.» +

+
+
+
+ + +
+
+

Возникли вопросы или нужна помощь с настройкой?

+

+ Наша техническая поддержка работает оперативно. Если не получается настроить клиент или есть вопросы по оплате — напишите нам напрямую в Telegram. +

+ + Написать в техподдержку @Gioramily → +
-