From 6fc312d8e7475f354a69e34c0430585bb56acf22 Mon Sep 17 00:00:00 2001 From: djjdjdbf9 Date: Sat, 24 Oct 2026 14:03:15 +0300 Subject: [PATCH] -burger menu for phones, -scroll reveal -pros -which devices are supported -faq -faq how to connect -billing toggle -reviews --- index.html | 832 ++++++++++++++++++++++++++++++++++++++++++++++------- 1 file changed, 724 insertions(+), 108 deletions(-) diff --git a/index.html b/index.html index f0ed023..0b8878e 100644 --- a/index.html +++ b/index.html @@ -19,12 +19,8 @@ --font-main: 'Inter', sans-serif; } - * { - box-sizing: border-box; - margin: 0; - padding: 0; - scroll-behavior: smooth; - } + * { box-sizing: border-box; margin: 0; padding: 0; } + html { scroll-behavior: smooth; } body { font-family: var(--font-main); @@ -32,12 +28,11 @@ color: var(--text-main); line-height: 1.5; overflow-x: hidden; - position: relative; } body::before { content: ''; - position: absolute; + position: fixed; top: -10%; left: 50%; transform: translateX(-50%); @@ -55,14 +50,15 @@ padding: 0 24px; } + /* ===== HEADER ===== */ header { - padding: 24px 0; + padding: 20px 0; border-bottom: 1px solid var(--border); backdrop-filter: blur(12px); position: sticky; top: 0; - z-index: 100; - background: rgba(10, 11, 13, 0.7); + z-index: 1000; + background: rgba(10, 11, 13, 0.88); } .header-wrap { @@ -77,29 +73,27 @@ letter-spacing: -0.5px; text-decoration: none; color: var(--text-main); + z-index: 1001; + position: relative; } - .logo span { - color: var(--accent); - } + .logo span { color: var(--accent); } nav { display: flex; align-items: center; - gap: 32px; + gap: 28px; } nav a { color: #94a3b8; text-decoration: none; - font-size: 0.9rem; + font-size: 0.875rem; font-weight: 500; transition: color 0.2s; } - nav a:hover { - color: var(--text-main); - } + nav a:hover { color: var(--text-main); } .btn-tg-nav { background: #1e293b; @@ -111,6 +105,7 @@ font-weight: 600; text-decoration: none; transition: all 0.2s; + white-space: nowrap; } .btn-tg-nav:hover { @@ -118,22 +113,123 @@ border-color: #38bdf8; } + /* Burger */ + .burger { + display: none; + flex-direction: column; + gap: 5px; + cursor: pointer; + padding: 4px; + background: none; + border: none; + z-index: 1001; + position: relative; + } + + .burger span { + display: block; + width: 24px; + height: 2px; + background: var(--text-main); + border-radius: 2px; + transition: all 0.3s ease; + } + + .burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } + .burger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); } + .burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } + + /* Mobile nav overlay */ + .mobile-nav { + display: none; + position: fixed; + inset: 0; + background: rgba(10, 11, 13, 0.97); + backdrop-filter: blur(20px); + z-index: 999; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 32px; + } + + .mobile-nav.open { display: flex; } + + .mobile-nav a { + color: var(--text-main); + text-decoration: none; + font-size: 1.4rem; + font-weight: 700; + transition: color 0.2s; + } + + .mobile-nav a:hover { color: var(--accent); } + + .mobile-nav .btn-tg-nav { + font-size: 1rem; + padding: 12px 28px; + } + + @media (max-width: 900px) { + .burger { display: flex; } + nav { display: none; } + } + + /* ===== SCROLL REVEAL ===== */ + .reveal { + opacity: 0; + transform: translateY(32px); + transition: opacity 0.65s ease, transform 0.65s ease; + } + + .reveal.visible { + opacity: 1; + transform: translateY(0); + } + + /* ===== SECTIONS BASE ===== */ + section { + padding: 80px 0; + border-top: 1px solid var(--border); + } + + .section-title { + text-align: center; + font-size: 2.25rem; + font-weight: 800; + margin-bottom: 10px; + letter-spacing: -1px; + } + + .section-sub { + text-align: center; + color: #94a3b8; + font-size: 1rem; + margin-bottom: 48px; + } + + @media (max-width: 768px) { + section { padding: 60px 0; } + .section-title { font-size: 1.75rem; } + } + + /* ===== HERO ===== */ .hero { - padding: 80px 0 100px 0; + padding: 80px 0 100px; display: grid; grid-template-columns: 1.2fr 0.8fr; align-items: center; gap: 48px; + border-top: none; } @media (max-width: 768px) { - .hero { grid-template-columns: 1fr; text-align: center; padding: 40px 0; } - .hero-left { order: 1; } - .hero-right { order: 2; display: flex; justify-content: center; } - } - - .hero-left { - max-width: 600px; + .hero { + grid-template-columns: 1fr; + text-align: center; + padding: 52px 0 64px; + } + .hero-right { display: flex; justify-content: center; } } .badge { @@ -175,7 +271,10 @@ gap: 16px; } - @media (max-width: 768px) { .hero-btns { justify-content: center; } } + @media (max-width: 768px) { + .hero-btns { justify-content: center; flex-wrap: wrap; } + h1 { font-size: 2.4rem; } + } .btn-main { display: inline-block; @@ -188,10 +287,7 @@ transition: transform 0.2s, opacity 0.2s; } - .btn-main:hover { - transform: translateY(-2px); - opacity: 0.95; - } + .btn-main:hover { transform: translateY(-2px); opacity: 0.9; } .btn-sec { display: inline-block; @@ -205,7 +301,7 @@ } .btn-sec:hover { - background: rgba(255, 255, 255, 0.03); + background: rgba(255,255,255,0.04); border-color: var(--border-hover); } @@ -247,19 +343,192 @@ 50% { transform: translateY(-12px); } } - .pricing { - padding: 80px 0; - border-top: 1px solid var(--border); + /* ===== FEATURES ===== */ + .grid-features { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 20px; } - .section-title { + @media (max-width: 900px) { .grid-features { grid-template-columns: repeat(2, 1fr); } } + @media (max-width: 480px) { .grid-features { grid-template-columns: 1fr; } } + + .feature-card { + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: 16px; + padding: 28px 24px; + transition: all 0.3s; + } + + .feature-card:hover { + border-color: rgba(56,189,248,0.3); + transform: translateY(-4px); + background: var(--bg-card-hover); + } + + .feature-icon { + font-size: 2rem; + margin-bottom: 14px; + display: block; + } + + .feature-title { + font-size: 1rem; + font-weight: 700; + margin-bottom: 8px; + } + + .feature-desc { + color: #94a3b8; + font-size: 0.875rem; + line-height: 1.6; + } + + /* ===== DEVICES ===== */ + .grid-devices { + display: grid; + grid-template-columns: repeat(6, 1fr); + gap: 16px; + } + + @media (max-width: 900px) { .grid-devices { grid-template-columns: repeat(3, 1fr); } } + @media (max-width: 480px) { .grid-devices { grid-template-columns: repeat(2, 1fr); } } + + .device-card { + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: 14px; + padding: 28px 16px; text-align: center; - font-size: 2.25rem; - font-weight: 800; - margin-bottom: 48px; - letter-spacing: -1px; + transition: all 0.3s; } + .device-card:hover { + border-color: rgba(56,189,248,0.35); + background: var(--bg-card-hover); + transform: translateY(-4px); + } + + .device-icon { + font-size: 2.4rem; + margin-bottom: 10px; + display: block; + } + + .device-name { + font-size: 0.8rem; + font-weight: 600; + color: #94a3b8; + } + + /* ===== HOW TO CONNECT ===== */ + .steps { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 24px; + position: relative; + } + + @media (max-width: 768px) { .steps { grid-template-columns: 1fr; } } + + .steps::before { + content: ''; + position: absolute; + top: 36px; + left: calc(16.666% + 12px); + right: calc(16.666% + 12px); + height: 1px; + background: linear-gradient(to right, #0284c7, #a855f7); + opacity: 0.25; + pointer-events: none; + } + + @media (max-width: 768px) { .steps::before { display: none; } } + + .step-card { + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: 16px; + padding: 32px 24px; + text-align: center; + transition: border-color 0.3s; + } + + .step-card:hover { border-color: var(--border-hover); } + + .step-num { + width: 52px; + height: 52px; + border-radius: 50%; + background: linear-gradient(135deg, #0284c7, #a855f7); + display: flex; + align-items: center; + justify-content: center; + font-weight: 800; + font-size: 1.1rem; + margin: 0 auto 18px; + box-shadow: 0 0 20px rgba(2,132,199,0.3); + } + + .step-title { + font-size: 1rem; + font-weight: 700; + margin-bottom: 10px; + } + + .step-desc { + color: #94a3b8; + font-size: 0.875rem; + line-height: 1.6; + } + + /* ===== BILLING TOGGLE ===== */ + .billing-toggle { + display: flex; + justify-content: center; + gap: 4px; + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: 10px; + padding: 4px; + width: fit-content; + margin: 0 auto 40px; + } + + .billing-btn { + background: none; + border: none; + padding: 9px 20px; + border-radius: 7px; + color: #64748b; + font-size: 0.875rem; + font-weight: 600; + cursor: pointer; + transition: all 0.2s; + font-family: var(--font-main); + position: relative; + } + + .billing-btn.active { + background: #0284c7; + color: #fff; + } + + .save-badge { + position: absolute; + top: -9px; + right: -6px; + background: #22c55e; + color: #fff; + font-size: 0.58rem; + padding: 2px 5px; + border-radius: 4px; + font-weight: 700; + line-height: 1.4; + } + + /* ===== PRICING ===== */ .grid-pricing { display: grid; grid-template-columns: repeat(3, 1fr); @@ -292,7 +561,7 @@ border-color: #0284c7; background: linear-gradient(180deg, #12151c 0%, #0d1015 100%); } - + .price-card.featured::before { content: 'ОБХОД ГЛУШИЛОК'; position: absolute; @@ -338,7 +607,7 @@ color: #94a3b8; margin-bottom: 12px; display: flex; - align-items: center; + align-items: flex-start; gap: 10px; } @@ -351,6 +620,7 @@ content: '✓'; color: var(--accent); font-weight: bold; + flex-shrink: 0; } .card-features li.disabled::before { @@ -376,13 +646,11 @@ font-size: 0.85rem; } - .bot-sub-item span { - color: #94a3b8; - } + .bot-sub-item span { color: #94a3b8; } + .bot-sub-item strong { color: #fff; } - .bot-sub-item strong { - color: #ffffff; - } + .price-val { transition: opacity 0.15s; } + .price-val.updating { opacity: 0; } .btn-card { display: block; @@ -403,17 +671,81 @@ } .btn-card-sec:hover { background: #334155; } - .btn-card-primary { - background: #0284c7; - color: #fff; - } - .btn-card-primary:hover { background: #0369a1; box-shadow: 0 0 15px rgba(2, 132, 199, 0.3); } + .btn-card-primary { background: #0284c7; color: #fff; } + .btn-card-primary:hover { background: #0369a1; box-shadow: 0 0 15px rgba(2,132,199,0.3); } - .reviews { - padding: 80px 0; - border-top: 1px solid var(--border); + /* ===== FAQ ===== */ + .faq-list { + max-width: 760px; + margin: 0 auto; + display: flex; + flex-direction: column; + gap: 12px; } + .faq-item { + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: 12px; + overflow: hidden; + transition: border-color 0.25s; + } + + .faq-item.open { border-color: rgba(56,189,248,0.3); } + + .faq-q { + width: 100%; + background: none; + border: none; + padding: 20px 24px; + display: flex; + justify-content: space-between; + align-items: center; + cursor: pointer; + color: var(--text-main); + font-size: 0.95rem; + font-weight: 600; + font-family: var(--font-main); + text-align: left; + gap: 16px; + } + + .faq-q:hover { background: rgba(255,255,255,0.02); } + + .faq-icon { + width: 26px; + height: 26px; + border-radius: 50%; + border: 1px solid var(--border); + display: flex; + align-items: center; + justify-content: center; + font-size: 1.1rem; + flex-shrink: 0; + transition: all 0.3s; + color: var(--accent); + line-height: 1; + } + + .faq-item.open .faq-icon { + transform: rotate(45deg); + border-color: var(--accent); + } + + .faq-a { + max-height: 0; + overflow: hidden; + transition: max-height 0.35s ease; + } + + .faq-a-inner { + padding: 0 24px 22px; + color: #94a3b8; + font-size: 0.9rem; + line-height: 1.7; + } + + /* ===== REVIEWS ===== */ .grid-reviews { display: grid; grid-template-columns: repeat(2, 1fr); @@ -427,40 +759,62 @@ border: 1px solid var(--border); border-radius: 12px; padding: 24px; + transition: border-color 0.2s; + } + + .review-card:hover { border-color: var(--border-hover); } + + .review-header { + display: flex; + align-items: center; + gap: 14px; + margin-bottom: 14px; + } + + .review-avatar { + width: 42px; + height: 42px; + border-radius: 50%; + background: linear-gradient(135deg, #0284c7, #a855f7); + display: flex; + align-items: center; + justify-content: center; + font-weight: 700; + font-size: 1rem; + flex-shrink: 0; + } + + .review-stars { + color: #fbbf24; + font-size: 0.8rem; + margin-bottom: 2px; } .review-user { font-weight: 700; font-size: 0.95rem; - margin-bottom: 4px; - display: flex; - align-items: center; - gap: 8px; } - .review-user::after { - content: '• Проверенный покупатель'; - font-size: 0.75rem; + .review-verified { + font-size: 0.73rem; color: #22c55e; - font-weight: 400; } .review-text { color: #94a3b8; font-size: 0.9rem; - line-height: 1.6; + line-height: 1.65; } - .support { - padding: 80px 0; - border-top: 1px solid var(--border); + /* ===== SUPPORT ===== */ + .support-inner { text-align: center; } .support-card { background: linear-gradient(135deg, #11141a 0%, #0a0c10 100%); border: 1px solid var(--border); - padding: 48px; + padding: 52px 48px; border-radius: 20px; max-width: 700px; margin: 0 auto; @@ -474,7 +828,7 @@ .support-card p { color: #94a3b8; - margin-bottom: 24px; + margin-bottom: 28px; font-size: 0.95rem; } @@ -491,10 +845,11 @@ .btn-support:hover { background: #16a34a; - box-shadow: 0 0 20px rgba(34, 197, 94, 0.2); + box-shadow: 0 0 20px rgba(34,197,94,0.25); transform: translateY(-1px); } + /* ===== FOOTER ===== */ footer { padding: 40px 0; text-align: center; @@ -502,41 +857,48 @@ color: #475569; font-size: 0.85rem; } - - .fade-in { - animation: fadeIn 0.6s ease-out forwards; - } - - @keyframes fadeIn { - from { opacity: 0; transform: translateY(10px); } - to { opacity: 1; transform: translateY(0); } - } + + +
+
- - -
+ + +
-
Для всех устройств

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

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

Выбрать тариф @@ -551,11 +913,106 @@
- -
+ +
+

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

+

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

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

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

+

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

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

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

+

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

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

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

+

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

+ +
+ + + +
+
- +
Бесплатный
@@ -569,34 +1026,32 @@ Подключить
- +
Платные тарифы
-
от 109.22 ₽/ мес.
- +
+ от 109.22 ₽/ мес. +
  • Максимальная скорость соединения
    • -
  • 20 доступные локации
    • +
  • 20 доступных локаций
  • Полный обход глушилок
  • Высокая стабильность работы
- -
Standard | 1 устр. - 109.22 ₽ + 109.22 ₽
Pro | 5 устр. - 194.41 ₽ + 194.41 ₽
Premium | 15 устр. - 291.62 ₽ + 291.62 ₽
- Открыть в Telegram
@@ -616,26 +1071,110 @@
- -
+ +
+

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

+

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

+
+ +
+ +
+
Да. 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 — проблема обычно решается за несколько минут. Также можно попробовать сменить локацию сервера прямо в боте.
+
+
+ +
+
+ + +

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

+

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

-
Сергей К.
-

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

+
+
С
+
+
★★★★★
+
Сергей К.
+
✓ Проверенный покупатель
+
+
+

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

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

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

- -
+ +

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

-

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

+

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

Связаться с техподдержкой
@@ -644,9 +1183,86 @@
-

© 2026 DmitriyVPN. Все права защищены. Разработано для всех типов устройств.

+

© 2026 DmitriyVPN. Все права защищены. Разработано для всех типов устройств.

+ + \ No newline at end of file