2026-10-24 10:51:42 +00:00
|
|
|
|
# DmitriyVPN — Лендинг сервиса
|
|
|
|
|
|
|
|
|
|
|
|
> Быстрый, стабильный и надёжный VPN для всех устройств.
|
|
|
|
|
|
|
|
|
|
|
|
🌐 **Сайт:** [dmitriyvpn.serotonin.su](https://dmitriyvpn.serotonin.su)
|
|
|
|
|
|
💬 **Telegram-канал:** [@DmitriyVPN](https://t.me/DmitriyVPN)
|
|
|
|
|
|
🛠 **Поддержка:** [@Gioramily](https://t.me/Gioramily)
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
## 📌 О проекте
|
|
|
|
|
|
|
2026-10-24 11:50:48 +00:00
|
|
|
|
Лендинг-страница для VPN-сервиса **DmitriyVPN**, полностью переработанная в соответствии с дизайн-системой **Surfshark** (`DESIGN.md`).
|
|
|
|
|
|
Дизайн выполнен в концепции светлого SaaS с контрастными тёмными панелями (ритм «dark → light → dark»), фирменным акцентом Surfshark Teal (`#1ebfbf`), конверсионными кнопками Coral Pulse (`#fa3556`) и промо-баннером Promo Gold (`#ffc200`).
|
2026-10-24 10:51:42 +00:00
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
2026-10-24 11:50:48 +00:00
|
|
|
|
## 🛠 Технологии и дизайн-система
|
2026-10-24 10:51:42 +00:00
|
|
|
|
|
2026-10-24 11:50:48 +00:00
|
|
|
|
- **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)
|
2026-10-24 10:51:42 +00:00
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
## 📂 Структура
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
dmitriyvpn/
|
2026-10-24 11:50:48 +00:00
|
|
|
|
├── DESIGN.md # Спецификация дизайн-системы Surfshark
|
|
|
|
|
|
├── index.html # Основная HTML-разметка страницы
|
|
|
|
|
|
├── styles.css # Таблица стилей (токены и компоненты)
|
|
|
|
|
|
├── script.js # Клиентские скрипты интерактивности
|
2026-10-24 11:25:35 +00:00
|
|
|
|
└── README.md # Документация проекта
|
2026-10-24 10:51:42 +00:00
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
## 🚀 Запуск локально
|
|
|
|
|
|
|
|
|
|
|
|
```bash
|
2026-10-24 11:50:48 +00:00
|
|
|
|
# Открыть страницу в браузеру
|
2026-10-24 10:51:42 +00:00
|
|
|
|
start index.html
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
## 📋 Тарифы
|
|
|
|
|
|
|
|
|
|
|
|
| Тариф | Устройства | Цена |
|
|
|
|
|
|
|---|---|---|
|
2026-10-24 11:50:48 +00:00
|
|
|
|
| Бесплатный | 1 | 0 ₽ / навсегда |
|
2026-10-24 11:25:35 +00:00
|
|
|
|
| Standard | 1 | от 87.38 до 109.22 ₽/мес |
|
|
|
|
|
|
| Pro | 5 | от 155.53 до 194.41 ₽/мес |
|
|
|
|
|
|
| Premium | 15 | от 233.30 до 291.62 ₽/мес |
|
2026-10-24 10:51:42 +00:00
|
|
|
|
| Пробный | 1 | 0 ₽ / 3 дня |
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
## 📞 Контакты
|
|
|
|
|
|
|
|
|
|
|
|
- Telegram-канал: [@DmitriyVPN](https://t.me/DmitriyVPN)
|
|
|
|
|
|
- Техподдержка: [@Gioramily](https://t.me/Gioramily)
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
© 2026 DmitriyVPN. Все права защищены.
|
