Anton | натяжка страницы test1
This commit is contained in:
1452
index3.css
Normal file
1452
index3.css
Normal file
File diff suppressed because it is too large
Load Diff
750
index3.html
Normal file
750
index3.html
Normal file
@@ -0,0 +1,750 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="ru">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Доставка воды в Севастополе - артезианская вода 19 литров на дом и в офис</title>
|
||||||
|
<meta name="description" content="Доставка воды в Севастополе для дома и офиса. Артезианская вода 19 литров с доставкой в Гагаринский, Ленинский, Нахимовский и Балаклавский районы. Быстрый заказ, выгодные цены, возвратная тара.">
|
||||||
|
<meta name="theme-color" content="#0d4fd6">
|
||||||
|
<meta property="og:title" content="Доставка воды в Севастополе - чистая артезианская вода с доставкой">
|
||||||
|
<meta property="og:description" content="Заказать воду на дом или в офис в Севастополе. Вода 19 литров, 5 литров, минеральная и питьевая вода с быстрой доставкой.">
|
||||||
|
<meta property="og:type" content="website">
|
||||||
|
<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=Manrope:wght@400;500;700;800&display=swap" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="index3.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header class="site-header">
|
||||||
|
<div class="container">
|
||||||
|
<div class="header-row">
|
||||||
|
<a class="brand" href="#top" aria-label="Перейти в начало страницы">
|
||||||
|
<span class="brand-mark" aria-hidden="true">
|
||||||
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M12 2C9 6.1 6 9.4 6 13.2C6 16.9 8.69 20 12 20C15.31 20 18 16.9 18 13.2C18 9.4 15 6.1 12 2Z" fill="currentColor"/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
<span class="brand-text">
|
||||||
|
<strong>АкваЛиния</strong>
|
||||||
|
<span>доставка воды в Севастополе</span>
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<nav class="nav" aria-label="Основная навигация">
|
||||||
|
<a href="#catalog">Каталог</a>
|
||||||
|
<a href="#delivery">Доставка</a>
|
||||||
|
<a href="#business">Для дома и офиса</a>
|
||||||
|
<a href="#faq">FAQ</a>
|
||||||
|
<a href="#contacts">Контакты</a>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="header-actions">
|
||||||
|
<a class="header-phone" href="tel:+79781234567" aria-label="Позвонить по номеру плюс семь девятьсот семьдесят восемь сто двадцать три сорок пять шестьдесят семь">
|
||||||
|
<span aria-hidden="true">+7 (978) 123-45-67</span>
|
||||||
|
</a>
|
||||||
|
<button class="cart-button" id="cartOpenButton" aria-label="Открыть корзину">
|
||||||
|
<span aria-hidden="true">Корзина</span>
|
||||||
|
<span class="cart-count" id="cartCount">0</span>
|
||||||
|
</button>
|
||||||
|
<button class="mobile-toggle" id="mobileToggle" aria-label="Открыть меню" aria-expanded="false" aria-controls="mobilePanel">
|
||||||
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||||||
|
<path d="M4 7H20" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
||||||
|
<path d="M4 12H20" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
||||||
|
<path d="M4 17H20" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mobile-panel" id="mobilePanel">
|
||||||
|
<div class="mobile-card">
|
||||||
|
<nav class="mobile-nav" aria-label="Мобильная навигация">
|
||||||
|
<a href="#catalog">Каталог</a>
|
||||||
|
<a href="#delivery">Условия доставки</a>
|
||||||
|
<a href="#business">Для дома и офиса</a>
|
||||||
|
<a href="#faq">FAQ</a>
|
||||||
|
<a href="#contacts">Контакты</a>
|
||||||
|
</nav>
|
||||||
|
<a class="header-phone" href="tel:+79781234567">+7 (978) 123-45-67</a>
|
||||||
|
<button class="cart-button" id="mobileCartOpenButton" aria-label="Открыть корзину с мобильного меню">
|
||||||
|
<span>Корзина</span>
|
||||||
|
<span class="cart-count" id="mobileCartCount">0</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main id="top">
|
||||||
|
<section class="hero">
|
||||||
|
<div class="container">
|
||||||
|
<div class="hero-grid">
|
||||||
|
<div class="hero-copy reveal">
|
||||||
|
<span class="eyebrow">Чистая вода каждый день</span>
|
||||||
|
<h1 class="hero-title">Доставка воды в <span>Севастополе</span> без ожидания и компромиссов</h1>
|
||||||
|
<p class="hero-text" id="heroAudienceText">Артезианская вода 19 литров с доставкой на дом и в офис. Привозим по Гагаринскому, Ленинскому, Нахимовскому и Балаклавскому районам, помогаем с возвратной тарой и держим понятные цены без скрытых доплат.</p>
|
||||||
|
|
||||||
|
<div class="hero-toggle" role="tablist" aria-label="Выбор аудитории">
|
||||||
|
<button class="toggle-button active" data-audience="home" role="tab" aria-selected="true">Для дома</button>
|
||||||
|
<button class="toggle-button" data-audience="office" role="tab" aria-selected="false">Для офиса</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="hero-actions">
|
||||||
|
<button class="button" data-open-order aria-label="Открыть форму заказа воды">Заказать воду</button>
|
||||||
|
<a class="ghost-button" href="#catalog" aria-label="Перейти к каталогу воды">Посмотреть каталог</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="hero-stats">
|
||||||
|
<div class="stat-card reveal reveal-delay-1">
|
||||||
|
<strong>от 290 ₽</strong>
|
||||||
|
<span>вода 19 литров с доставкой по Севастополю</span>
|
||||||
|
</div>
|
||||||
|
<div class="stat-card reveal reveal-delay-2">
|
||||||
|
<strong>2 часа</strong>
|
||||||
|
<span>среднее время доставки по городу в будни</span>
|
||||||
|
</div>
|
||||||
|
<div class="stat-card reveal reveal-delay-3">
|
||||||
|
<strong>7 дней</strong>
|
||||||
|
<span>работаем без выходных для дома и офиса</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<aside class="hero-panel reveal reveal-delay-1" aria-label="Информация о доставке">
|
||||||
|
<div class="panel-top">
|
||||||
|
<div>
|
||||||
|
<span class="signal-pill">Маршрут активен</span>
|
||||||
|
<h2>Сегодня в доставке: центральные и прибрежные районы</h2>
|
||||||
|
</div>
|
||||||
|
<div class="chip">SEO: вода 19 литров с доставкой</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="route-map" aria-hidden="true">
|
||||||
|
<div class="map-line"></div>
|
||||||
|
<div class="map-chip one">Гагаринский</div>
|
||||||
|
<div class="map-chip two">Ленинский</div>
|
||||||
|
<div class="map-chip three">Нахимовский</div>
|
||||||
|
<div class="delivery-chip">Ближайшее окно: 12:00-14:00</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="hero-notes">
|
||||||
|
<div class="hero-note">
|
||||||
|
<strong>Для дома</strong>
|
||||||
|
<span>Питьевая вода, компактные упаковки, удобное повторение заказа одним нажатием.</span>
|
||||||
|
</div>
|
||||||
|
<div class="hero-note">
|
||||||
|
<strong>Для офиса</strong>
|
||||||
|
<span>Поставка по графику, документы для бухгалтерии, стабильный запас для команды.</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="ticker reveal reveal-delay-2" aria-label="Ключевые преимущества сервиса">
|
||||||
|
<div class="ticker-item">
|
||||||
|
<strong>Источник</strong>
|
||||||
|
<span>артезианская вода с многоступенчатым контролем</span>
|
||||||
|
</div>
|
||||||
|
<div class="ticker-item">
|
||||||
|
<strong>Сервис</strong>
|
||||||
|
<span>подъем на этаж и помощь с заменой бутыли</span>
|
||||||
|
</div>
|
||||||
|
<div class="ticker-item">
|
||||||
|
<strong>Оплата</strong>
|
||||||
|
<span>наличные, карта, перевод и безнал для компаний</span>
|
||||||
|
</div>
|
||||||
|
<div class="ticker-item">
|
||||||
|
<strong>Автодоставка</strong>
|
||||||
|
<span>гибкий график без повторных звонков</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="section" id="catalog">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-head">
|
||||||
|
<div>
|
||||||
|
<span class="eyebrow">Каталог</span>
|
||||||
|
<h2 class="section-title">Выберите формат воды под свой ритм</h2>
|
||||||
|
</div>
|
||||||
|
<p class="section-copy">Каталог собран под ежедневные бытовые и коммерческие задачи: от крупной бутыли 19 литров для кулера до компактной питьевой воды для дома, зала, кафе и переговорных.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="catalog-grid">
|
||||||
|
<article class="catalog-card reveal">
|
||||||
|
<div class="catalog-icon" aria-hidden="true">💧</div>
|
||||||
|
<h3>Вода 19 литров</h3>
|
||||||
|
<p>Главный формат для кулеров, кухни и офиса. Самая выгодная цена за литр и удобная возвратная тара.</p>
|
||||||
|
<div class="tag-row">
|
||||||
|
<span class="chip">хит продаж</span>
|
||||||
|
<span class="chip">для кулера</span>
|
||||||
|
</div>
|
||||||
|
<div class="card-price"><strong>290 ₽</strong><span>за бутыль</span></div>
|
||||||
|
<button class="mini-button add-to-cart" data-name="Вода артезианская 19 л" data-volume="19 л" data-price="290">Добавить в корзину</button>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="catalog-card reveal reveal-delay-1">
|
||||||
|
<div class="catalog-icon" aria-hidden="true">🫙</div>
|
||||||
|
<h3>Вода 5 литров</h3>
|
||||||
|
<p>Удобный домашний формат для кухни, поездок и дачи. Легко хранить, просто переносить.</p>
|
||||||
|
<div class="tag-row">
|
||||||
|
<span class="chip">домой</span>
|
||||||
|
<span class="chip">компактно</span>
|
||||||
|
</div>
|
||||||
|
<div class="card-price"><strong>95 ₽</strong><span>за бутылку</span></div>
|
||||||
|
<button class="mini-button add-to-cart" data-name="Питьевая вода 5 л" data-volume="5 л" data-price="95">Добавить в корзину</button>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="catalog-card reveal reveal-delay-2">
|
||||||
|
<div class="catalog-icon" aria-hidden="true">🥤</div>
|
||||||
|
<h3>0.5 / 1.5 литра</h3>
|
||||||
|
<p>Для тренировок, поездок, мероприятий и ежедневного запаса питьевой воды дома или на работе.</p>
|
||||||
|
<div class="tag-row">
|
||||||
|
<span class="chip">спорт</span>
|
||||||
|
<span class="chip">мероприятия</span>
|
||||||
|
</div>
|
||||||
|
<div class="card-price"><strong>39 ₽</strong><span>от 0.5 л</span></div>
|
||||||
|
<button class="mini-button add-to-cart" data-name="Питьевая вода 1.5 л" data-volume="1.5 л" data-price="49">Добавить в корзину</button>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="catalog-card reveal reveal-delay-3">
|
||||||
|
<div class="catalog-icon" aria-hidden="true">⛰️</div>
|
||||||
|
<h3>Минеральная вода</h3>
|
||||||
|
<p>Освежающий вариант для гостей, кафе и тех, кто предпочитает яркий минеральный вкус.</p>
|
||||||
|
<div class="tag-row">
|
||||||
|
<span class="chip">для кафе</span>
|
||||||
|
<span class="chip">рестораны</span>
|
||||||
|
</div>
|
||||||
|
<div class="card-price"><strong>68 ₽</strong><span>за 1.5 л</span></div>
|
||||||
|
<button class="mini-button add-to-cart" data-name="Минеральная вода 1.5 л" data-volume="1.5 л" data-price="68">Добавить в корзину</button>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="catalog-card reveal reveal-delay-4">
|
||||||
|
<div class="catalog-icon" aria-hidden="true">✨</div>
|
||||||
|
<h3>Газированная / негазированная</h3>
|
||||||
|
<p>Соберите микс под привычки семьи или офиса: мягкая вода на каждый день и газированная к столу.</p>
|
||||||
|
<div class="tag-row">
|
||||||
|
<span class="chip">микс заказ</span>
|
||||||
|
<span class="chip">на выбор</span>
|
||||||
|
</div>
|
||||||
|
<div class="card-price"><strong>45 ₽</strong><span>за 0.5 л</span></div>
|
||||||
|
<button class="mini-button add-to-cart" data-name="Газированная вода 0.5 л" data-volume="0.5 л" data-price="45">Добавить в корзину</button>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="section" id="bestsellers">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-head">
|
||||||
|
<div>
|
||||||
|
<span class="eyebrow">Бестселлеры</span>
|
||||||
|
<h2 class="section-title">Популярные позиции, которые заказывают чаще всего</h2>
|
||||||
|
</div>
|
||||||
|
<p class="section-copy">Если вы впервые выбираете воду с доставкой в Севастополе, начните с этих комплектов: они закрывают базовые домашние и офисные сценарии без лишних затрат.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="featured-grid">
|
||||||
|
<div class="glass-card reveal">
|
||||||
|
<span class="eyebrow">Хит по Севастополю</span>
|
||||||
|
<h3>Вода 19 л с доставкой - лучший баланс цены и удобства</h3>
|
||||||
|
<p>Артезианская вода для кулера и повседневного потребления. Подходит для дома, офиса, салонов, фитнес-клубов, медицинских кабинетов и небольших кафе.</p>
|
||||||
|
|
||||||
|
<div class="product-table">
|
||||||
|
<div class="product-row">
|
||||||
|
<div>
|
||||||
|
<strong>АкваЛиния Классик</strong>
|
||||||
|
<span>19 л, мягкий вкус, ежедневное потребление</span>
|
||||||
|
</div>
|
||||||
|
<div class="price">290 ₽</div>
|
||||||
|
<button class="mini-button add-to-cart" data-name="АкваЛиния Классик" data-volume="19 л" data-price="290">Заказать</button>
|
||||||
|
</div>
|
||||||
|
<div class="product-row">
|
||||||
|
<div>
|
||||||
|
<strong>АкваЛиния Премиум</strong>
|
||||||
|
<span>19 л, артезианская вода, усиленный контроль</span>
|
||||||
|
</div>
|
||||||
|
<div class="price">340 ₽</div>
|
||||||
|
<button class="mini-button add-to-cart" data-name="АкваЛиния Премиум" data-volume="19 л" data-price="340">Заказать</button>
|
||||||
|
</div>
|
||||||
|
<div class="product-row">
|
||||||
|
<div>
|
||||||
|
<strong>Стартовый комплект</strong>
|
||||||
|
<span>2 бутыли 19 л + помпа для первого заказа</span>
|
||||||
|
</div>
|
||||||
|
<div class="price">690 ₽</div>
|
||||||
|
<button class="mini-button add-to-cart" data-name="Стартовый комплект 19 л + помпа" data-volume="2 x 19 л" data-price="690">Заказать</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="glass-card reveal reveal-delay-1">
|
||||||
|
<span class="eyebrow">Почему выбирают</span>
|
||||||
|
<h3>Вода, которую удобно заказывать регулярно</h3>
|
||||||
|
<div class="chip-row chip-row-spaced">
|
||||||
|
<span class="chip">быстрая доставка</span>
|
||||||
|
<span class="chip">чистая бутыль</span>
|
||||||
|
<span class="chip">возврат тары</span>
|
||||||
|
<span class="chip">выгодно для офиса</span>
|
||||||
|
</div>
|
||||||
|
<p>Мы заранее резервируем окна доставки, напоминаем об окончании запаса воды и подбираем график под вашу семью или рабочий день команды. Такой сервис особенно важен, когда вода нужна без срывов и лишних звонков.</p>
|
||||||
|
<div class="hero-actions hero-actions-spaced">
|
||||||
|
<button class="button" data-open-order>Заказать воду 19 литров</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="section" id="delivery">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-head">
|
||||||
|
<div>
|
||||||
|
<span class="eyebrow">Условия доставки</span>
|
||||||
|
<h2 class="section-title">Доставка воды по районам Севастополя</h2>
|
||||||
|
</div>
|
||||||
|
<p class="section-copy">Привозим заказы в удобные интервалы и заранее подтверждаем маршрут. Для локального SEO мы естественно указываем районы, в которых чаще всего принимаем заявки.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="delivery-grid">
|
||||||
|
<div class="glass-card reveal">
|
||||||
|
<h3>Что важно знать перед заказом</h3>
|
||||||
|
<div class="product-table">
|
||||||
|
<div class="product-row">
|
||||||
|
<div>
|
||||||
|
<strong>Зоны доставки</strong>
|
||||||
|
<span>Гагаринский, Ленинский, Нахимовский, Балаклава, Камышовая бухта, Остряки, Стрелецкая</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="product-row">
|
||||||
|
<div>
|
||||||
|
<strong>Время доставки</strong>
|
||||||
|
<span>Ежедневно с 8:00 до 21:00, срочные окна по возможности в день обращения</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="product-row">
|
||||||
|
<div>
|
||||||
|
<strong>Минимальный заказ</strong>
|
||||||
|
<span>От 1 бутыли 19 л или от 500 ₽ для малых форматов</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="product-row">
|
||||||
|
<div>
|
||||||
|
<strong>Возвратная тара</strong>
|
||||||
|
<span>Пустые бутыли забираем при следующей доставке или при отдельном выезде по согласованию</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="delivery-map reveal reveal-delay-1" aria-label="Карта районов доставки">
|
||||||
|
<span class="eyebrow eyebrow-inverse">Активные маршруты</span>
|
||||||
|
<h3 class="section-heading-compact section-heading-delivery">Заказать воду на дом или в офис можно по всему городу</h3>
|
||||||
|
<div class="zones">
|
||||||
|
<span class="zone-card">Гагаринский район</span>
|
||||||
|
<span class="zone-card">Ленинский район</span>
|
||||||
|
<span class="zone-card">Нахимовский район</span>
|
||||||
|
<span class="zone-card">Балаклава</span>
|
||||||
|
</div>
|
||||||
|
<div class="delivery-pins" aria-hidden="true">
|
||||||
|
<div class="delivery-wave"></div>
|
||||||
|
<div class="pin one">Остряки</div>
|
||||||
|
<div class="pin two">Центр</div>
|
||||||
|
<div class="pin three">Стрелецкая</div>
|
||||||
|
<div class="pin four">Камышовая</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="section" id="how-order">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-head">
|
||||||
|
<div>
|
||||||
|
<span class="eyebrow">Как заказать</span>
|
||||||
|
<h2 class="section-title">Четыре быстрых шага до чистой воды</h2>
|
||||||
|
</div>
|
||||||
|
<p class="section-copy">Процесс специально сделан коротким и понятным: вы выбираете подходящую воду, оформляете заявку и получаете доставку в согласованное окно.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="steps-grid">
|
||||||
|
<article class="step-card reveal">
|
||||||
|
<div class="step-number">1</div>
|
||||||
|
<h3>Выберите воду</h3>
|
||||||
|
<p>Определите нужный объем: вода 19 литров, 5 литров, малые бутылки, минеральная или газированная вода.</p>
|
||||||
|
</article>
|
||||||
|
<article class="step-card reveal reveal-delay-1">
|
||||||
|
<div class="step-number">2</div>
|
||||||
|
<h3>Добавьте в корзину</h3>
|
||||||
|
<p>Соберите заказ прямо на сайте и проверьте итоговую сумму до подтверждения.</p>
|
||||||
|
</article>
|
||||||
|
<article class="step-card reveal reveal-delay-2">
|
||||||
|
<div class="step-number">3</div>
|
||||||
|
<h3>Подтвердите заказ</h3>
|
||||||
|
<p>Оставьте телефон и адрес в Севастополе, а мы уточним время и детали по таре.</p>
|
||||||
|
</article>
|
||||||
|
<article class="step-card reveal reveal-delay-3">
|
||||||
|
<div class="step-number">4</div>
|
||||||
|
<h3>Получите доставку</h3>
|
||||||
|
<p>Курьер привезет воду, поможет с выгрузкой и при необходимости заберет пустые бутыли.</p>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="section" id="business">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-head">
|
||||||
|
<div>
|
||||||
|
<span class="eyebrow">Для дома и офиса</span>
|
||||||
|
<h2 class="section-title">Два сценария сервиса, одна стабильная доставка</h2>
|
||||||
|
</div>
|
||||||
|
<p class="section-copy">Мы разделили предложения, чтобы сразу показать преимущества для семей и для компаний: частота, объем, документы, регулярность и удобство повторных поставок.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="segments-grid">
|
||||||
|
<article class="segment-card reveal">
|
||||||
|
<span class="eyebrow">Доставка воды на дом</span>
|
||||||
|
<h3>Комфортный домашний запас без лишней тяжести</h3>
|
||||||
|
<p>Подходит для семей, молодых родителей, пожилых клиентов и тех, кто не хочет тратить время на покупку воды в магазине.</p>
|
||||||
|
<ul class="segment-list">
|
||||||
|
<li>Удобные интервалы утром, днем и вечером</li>
|
||||||
|
<li>Подъем на этаж и помощь с установкой</li>
|
||||||
|
<li>Небольшие форматы и вода 19 литров с доставкой</li>
|
||||||
|
<li>Напоминание о повторном заказе</li>
|
||||||
|
</ul>
|
||||||
|
<div class="segment-meta">Часто выбирают: 2 бутыли 19 л + вода 5 л для кухни</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="segment-card featured reveal reveal-delay-1">
|
||||||
|
<span class="eyebrow eyebrow-inverse">Доставка воды в офис</span>
|
||||||
|
<h3>Регулярные поставки для команд, переговорных и клиентских зон</h3>
|
||||||
|
<p>Офисам, салонам, кафе, фитнес-клубам и студиям нужен предсказуемый сервис. Мы строим график так, чтобы запас воды не заканчивался в рабочие часы.</p>
|
||||||
|
<ul class="segment-list">
|
||||||
|
<li>Безналичная оплата и закрывающие документы</li>
|
||||||
|
<li>Автодоставка воды по графику</li>
|
||||||
|
<li>Приоритетные интервалы на будни</li>
|
||||||
|
<li>Комбинированные заказы для кулеров и гостей</li>
|
||||||
|
</ul>
|
||||||
|
<div class="segment-meta">Часто выбирают: 6-12 бутылей 19 л в неделю + минеральная вода для переговорных</div>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="section" id="promotions">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-head">
|
||||||
|
<div>
|
||||||
|
<span class="eyebrow">Акции</span>
|
||||||
|
<h2 class="section-title">Выгоднее с первого заказа и еще удобнее по подписке</h2>
|
||||||
|
</div>
|
||||||
|
<p class="section-copy">Промо-блоки усиливают конверсию: первый заказ снижает барьер входа, а автодоставка делает повторные продажи естественными и предсказуемыми.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="promo-grid">
|
||||||
|
<article class="promo-card highlight reveal">
|
||||||
|
<h3>Скидка на первый заказ</h3>
|
||||||
|
<p>Получите скидку 10% на первый заказ воды 19 литров с доставкой в Севастополе. Отличный способ попробовать сервис без риска.</p>
|
||||||
|
</article>
|
||||||
|
<article class="promo-card reveal reveal-delay-1">
|
||||||
|
<h3>Автодоставка воды</h3>
|
||||||
|
<p>Настройте регулярный график: раз в 3 дня, неделю или по вашему потреблению. Мы напомним и приедем вовремя.</p>
|
||||||
|
</article>
|
||||||
|
<article class="promo-card reveal reveal-delay-2">
|
||||||
|
<h3>Помпа в подарок</h3>
|
||||||
|
<p>При заказе стартового комплекта для дома дарим механическую помпу, чтобы пользоваться 19-литровой бутылью было проще.</p>
|
||||||
|
</article>
|
||||||
|
<article class="promo-card reveal reveal-delay-3">
|
||||||
|
<h3>Офисный тариф</h3>
|
||||||
|
<p>Для корпоративных клиентов действует персональная цена при регулярном объеме и закрепленном графике поставок.</p>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="section" id="faq">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-head">
|
||||||
|
<div>
|
||||||
|
<span class="eyebrow">FAQ</span>
|
||||||
|
<h2 class="section-title">Частые вопросы о доставке воды в Севастополе</h2>
|
||||||
|
</div>
|
||||||
|
<p class="section-copy">SEO-блок с реальными вопросами помогает пользователям быстро снять возражения и усиливает релевантность по коммерческим запросам.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="faq-list">
|
||||||
|
<article class="faq-item reveal open">
|
||||||
|
<button class="faq-question" aria-expanded="true">
|
||||||
|
<span>Как быстро вы привозите воду по Севастополю?</span>
|
||||||
|
<span aria-hidden="true">+</span>
|
||||||
|
</button>
|
||||||
|
<div class="faq-answer">Обычно доставка воды в Севастополе занимает от 2 до 4 часов в пределах активных маршрутов. При высокой загрузке мы предлагаем ближайший удобный интервал и обязательно подтверждаем его по телефону.</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="faq-item reveal reveal-delay-1">
|
||||||
|
<button class="faq-question" aria-expanded="false">
|
||||||
|
<span>Какие способы оплаты доступны?</span>
|
||||||
|
<span aria-hidden="true">+</span>
|
||||||
|
</button>
|
||||||
|
<div class="faq-answer">Принимаем наличные, оплату картой при получении, перевод по номеру телефона и безналичный расчет для компаний. Для офисов можем выставить счет.</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="faq-item reveal reveal-delay-2">
|
||||||
|
<button class="faq-question" aria-expanded="false">
|
||||||
|
<span>Нужен ли залог за бутыль 19 литров?</span>
|
||||||
|
<span aria-hidden="true">+</span>
|
||||||
|
</button>
|
||||||
|
<div class="faq-answer">Если у вас нет своей тары, при первом заказе может взиматься возвратный депозит за бутыль. При возврате тары депозит учитывается в следующих заказах.</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="faq-item reveal reveal-delay-3">
|
||||||
|
<button class="faq-question" aria-expanded="false">
|
||||||
|
<span>Как часто лучше заказывать воду домой?</span>
|
||||||
|
<span aria-hidden="true">+</span>
|
||||||
|
</button>
|
||||||
|
<div class="faq-answer">Для семьи из 2-4 человек обычно достаточно заказа 2-4 бутылей 19 литров раз в 1-2 недели. Точный график зависит от потребления и наличия кулера.</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="faq-item reveal">
|
||||||
|
<button class="faq-question" aria-expanded="false">
|
||||||
|
<span>Откуда поступает вода и как контролируется качество?</span>
|
||||||
|
<span aria-hidden="true">+</span>
|
||||||
|
</button>
|
||||||
|
<div class="faq-answer">Мы используем артезианскую воду из защищенного источника, проводим фильтрацию, санитарную обработку тары и регулярный лабораторный контроль. По запросу предоставляем информацию о сертификатах качества.</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="faq-item reveal reveal-delay-1">
|
||||||
|
<button class="faq-question" aria-expanded="false">
|
||||||
|
<span>Можно ли оформить доставку воды в офис?</span>
|
||||||
|
<span aria-hidden="true">+</span>
|
||||||
|
</button>
|
||||||
|
<div class="faq-answer">Да, мы регулярно обслуживаем офисы, кафе, фитнес-клубы, студии и медицинские кабинеты. Настраиваем график, безнал и объем под ваш режим работы.</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="faq-item reveal reveal-delay-2">
|
||||||
|
<button class="faq-question" aria-expanded="false">
|
||||||
|
<span>Какой минимальный заказ действует для доставки?</span>
|
||||||
|
<span aria-hidden="true">+</span>
|
||||||
|
</button>
|
||||||
|
<div class="faq-answer">Для воды 19 литров можно заказать от одной бутыли. Для небольших упаковок минимальная сумма заказа составляет 500 ₽, чтобы доставка оставалась быстрой и выгодной.</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="faq-item reveal reveal-delay-3">
|
||||||
|
<button class="faq-question" aria-expanded="false">
|
||||||
|
<span>Что делать с пустыми бутылками после использования?</span>
|
||||||
|
<span aria-hidden="true">+</span>
|
||||||
|
</button>
|
||||||
|
<div class="faq-answer">Сохраните пустые бутыли до следующего визита курьера. Мы заберем их при следующей доставке или согласуем отдельный выезд при крупном заказе.</div>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="section" id="about">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-head">
|
||||||
|
<div>
|
||||||
|
<span class="eyebrow">О компании</span>
|
||||||
|
<h2 class="section-title">Чистый источник, строгий контроль, понятный сервис</h2>
|
||||||
|
</div>
|
||||||
|
<p class="section-copy">Этот блок отвечает на главный вопрос о доверии: откуда берется вода, как она обрабатывается, кто следит за качеством и почему ей можно доверять каждый день.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="about-grid">
|
||||||
|
<div class="glass-card about-copy reveal">
|
||||||
|
<h3>Мы строим сервис вокруг качества воды, а не вокруг красивых обещаний</h3>
|
||||||
|
<p>Источник воды - артезианский горизонт с защищенной зоной забора. После подъема вода проходит фильтрацию, проверку минерализации и санитарный контроль перед розливом. Особое внимание уделяем чистоте тары и логистике, потому что вкус и безопасность зависят не только от источника, но и от дисциплины на каждом этапе.</p>
|
||||||
|
<p class="about-copy-secondary">Для клиентов доступны сертификаты качества, а для офисов и коммерческих объектов мы предлагаем стабильные поставки с прогнозируемым временем прибытия. Поэтому доставка воды в офис или домой остается одинаково надежной в любой сезон.</p>
|
||||||
|
<div class="chip-row hero-actions-spaced">
|
||||||
|
<span class="chip">артезианская вода</span>
|
||||||
|
<span class="chip">контроль качества</span>
|
||||||
|
<span class="chip">сертификаты</span>
|
||||||
|
<span class="chip">санобработка тары</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="about-visual reveal reveal-delay-1" aria-hidden="true">
|
||||||
|
<div class="droplet"></div>
|
||||||
|
<div class="quality-stack">
|
||||||
|
<div class="quality-card"><strong>Источник</strong><br>Защищенный артезианский горизонт</div>
|
||||||
|
<div class="quality-card"><strong>Проверка</strong><br>Регулярный лабораторный анализ качества</div>
|
||||||
|
<div class="quality-card"><strong>Тара</strong><br>Санитарная обработка и контроль оборота бутылей</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="section" id="reviews">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-head">
|
||||||
|
<div>
|
||||||
|
<span class="eyebrow">Отзывы</span>
|
||||||
|
<h2 class="section-title">Что говорят клиенты о нашей воде и доставке</h2>
|
||||||
|
</div>
|
||||||
|
<p class="section-copy">Натуральные отзывы работают сильнее абстрактных обещаний. Мы добавили разные сценарии: дом, офис и коммерческие объекты.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="reviews-grid">
|
||||||
|
<article class="review-card reveal">
|
||||||
|
<strong>«Привозят точно в обещанный интервал»</strong>
|
||||||
|
<p>Заказываем воду 19 литров домой в Гагаринский район. Курьер всегда заранее звонит, поднимает бутыли и забирает пустые. Удобно, что не нужно снова объяснять адрес.</p>
|
||||||
|
<div class="review-meta">Марина, Севастополь</div>
|
||||||
|
</article>
|
||||||
|
<article class="review-card reveal reveal-delay-1">
|
||||||
|
<strong>«Для офиса это реально спасение»</strong>
|
||||||
|
<p>У нас небольшая команда, вода уходит быстро. С автодоставкой больше не вспоминаем в последний момент, что кулер пустой. Документы присылают без задержек.</p>
|
||||||
|
<div class="review-meta">Андрей, управляющий офисом</div>
|
||||||
|
</article>
|
||||||
|
<article class="review-card reveal reveal-delay-2">
|
||||||
|
<strong>«Вкус воды мягкий, без постороннего запаха»</strong>
|
||||||
|
<p>Переходили с другого поставщика и сразу почувствовали разницу. Вода приятная и для питья, и для чайника. Заказываем и 19 литров, и 5 литров домой.</p>
|
||||||
|
<div class="review-meta">Елена, Ленинский район</div>
|
||||||
|
</article>
|
||||||
|
<article class="review-card reveal reveal-delay-3">
|
||||||
|
<strong>«Хорошо работают с коммерческими заказами»</strong>
|
||||||
|
<p>Для нашего фитнес-клуба важна стабильность. Ребята привозят четко по графику, можно комбинировать большие бутыли и маленькие бутылки для стойки продаж.</p>
|
||||||
|
<div class="review-meta">Игорь, фитнес-клуб в Стрелецкой</div>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="section" id="contacts">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-head">
|
||||||
|
<div>
|
||||||
|
<span class="eyebrow">Контакты</span>
|
||||||
|
<h2 class="section-title">Свяжитесь с нами и оформите заказ в пару минут</h2>
|
||||||
|
</div>
|
||||||
|
<p class="section-copy">Контактный блок завершает воронку: даем телефон, адрес, зону обслуживания и простую форму для заявки прямо на странице.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="contacts-grid">
|
||||||
|
<div class="contact-card reveal">
|
||||||
|
<h3>Контактные данные</h3>
|
||||||
|
<ul class="contact-list">
|
||||||
|
<li><strong>Телефон:</strong> <a href="tel:+79781234567">+7 (978) 123-45-67</a></li>
|
||||||
|
<li><strong>Адрес:</strong> г. Севастополь, ул. Генерала Острякова, 92</li>
|
||||||
|
<li><strong>График:</strong> ежедневно с 8:00 до 21:00</li>
|
||||||
|
<li><strong>E-mail:</strong> order@aqualinia-sev.ru</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<form class="contact-form" id="contactForm">
|
||||||
|
<input class="field" type="text" name="name" placeholder="Ваше имя" aria-label="Ваше имя" required>
|
||||||
|
<input class="field" type="tel" name="phone" placeholder="Телефон" aria-label="Телефон" required>
|
||||||
|
<input class="field" type="text" name="address" placeholder="Адрес доставки в Севастополе" aria-label="Адрес доставки" required>
|
||||||
|
<textarea class="field" name="comment" placeholder="Что нужно доставить: например, 2 бутыли 19 л и 1 упаковка 1.5 л" aria-label="Комментарий к заказу"></textarea>
|
||||||
|
<button class="button" type="submit">Отправить заявку</button>
|
||||||
|
<div class="success-note" id="contactSuccess">Спасибо! Заявка принята. Мы свяжемся с вами для подтверждения заказа.</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="map-placeholder reveal reveal-delay-1" aria-label="Схема расположения и зона обслуживания">
|
||||||
|
<span class="eyebrow eyebrow-inverse">Карта обслуживания</span>
|
||||||
|
<h3 class="section-heading-compact section-heading-map">Офис и логистика в Севастополе</h3>
|
||||||
|
<p class="map-copy">Оперативно закрываем центральные и спальные районы, чтобы доставка воды на дом и в офис оставалась быстрой даже в часы пик.</p>
|
||||||
|
<div class="map-note a">Острякова</div>
|
||||||
|
<div class="map-note b">Центр</div>
|
||||||
|
<div class="map-note c">Гагаринский</div>
|
||||||
|
<div class="map-note d">Балаклава</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer class="footer">
|
||||||
|
<div class="container">
|
||||||
|
<div class="footer-grid">
|
||||||
|
<div class="footer-card">
|
||||||
|
<a class="brand" href="#top" aria-label="Перейти в начало страницы">
|
||||||
|
<span class="brand-mark" aria-hidden="true">
|
||||||
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M12 2C9 6.1 6 9.4 6 13.2C6 16.9 8.69 20 12 20C15.31 20 18 16.9 18 13.2C18 9.4 15 6.1 12 2Z" fill="currentColor"/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
<span class="brand-text">
|
||||||
|
<strong>АкваЛиния</strong>
|
||||||
|
<span>вода с доставкой для Севастополя</span>
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
<p class="footer-description">Доставка воды в Севастополе для дома, офиса, кафе и фитнес-клубов. Вода 19 литров, питьевая и минеральная вода с удобным заказом на сайте.</p>
|
||||||
|
</div>
|
||||||
|
<div class="footer-card">
|
||||||
|
<h3>Навигация и документы</h3>
|
||||||
|
<div class="footer-links">
|
||||||
|
<a href="#catalog">Каталог</a>
|
||||||
|
<a href="#delivery">Доставка воды в Севастополе</a>
|
||||||
|
<a href="#business">Доставка воды в офис</a>
|
||||||
|
<a href="#faq">Частые вопросы</a>
|
||||||
|
<a href="#contacts">Контакты</a>
|
||||||
|
</div>
|
||||||
|
<div class="footer-legal">
|
||||||
|
<a href="#">Политика конфиденциальности</a>
|
||||||
|
<a href="#">Пользовательское соглашение</a>
|
||||||
|
<a href="#">Условия использования</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="footer-bottom">
|
||||||
|
<span>© 2026 АкваЛиния. Все права защищены.</span>
|
||||||
|
<span>Сделано для запросов «заказать воду на дом» и «вода 19 литров с доставкой»</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<div class="cart-drawer" id="cartDrawer" aria-hidden="true">
|
||||||
|
<div class="cart-panel" role="dialog" aria-modal="true" aria-labelledby="cartTitle">
|
||||||
|
<div class="drawer-head">
|
||||||
|
<div>
|
||||||
|
<h3 id="cartTitle">Корзина</h3>
|
||||||
|
<p class="dialog-copy">Проверьте состав заказа и переходите к оформлению.</p>
|
||||||
|
</div>
|
||||||
|
<button class="close-button" id="cartCloseButton" aria-label="Закрыть корзину">×</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="cart-summary">
|
||||||
|
<div class="summary-row"><span>Товаров</span><span id="cartItemsCount">0</span></div>
|
||||||
|
<div class="summary-row"><span>Сумма</span><strong id="cartTotal">0 ₽</strong></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="cart-list" id="cartList">
|
||||||
|
<div class="empty-state">Корзина пока пуста. Добавьте воду 19 литров, компактные форматы или минеральную воду из каталога.</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button class="button" id="checkoutButton">Оформить заказ</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="modal-backdrop" id="orderModal" aria-hidden="true">
|
||||||
|
<div class="modal-card" role="dialog" aria-modal="true" aria-labelledby="orderModalTitle">
|
||||||
|
<div class="modal-head">
|
||||||
|
<div>
|
||||||
|
<h3 id="orderModalTitle">Оформление заказа</h3>
|
||||||
|
<p class="dialog-copy">Оставьте контакты, и мы быстро подтвердим доставку воды.</p>
|
||||||
|
</div>
|
||||||
|
<button class="close-button" id="modalCloseButton" aria-label="Закрыть форму заказа">×</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form class="contact-form" id="orderForm">
|
||||||
|
<input class="field" type="text" name="customerName" placeholder="Ваше имя" aria-label="Ваше имя" required>
|
||||||
|
<input class="field" type="tel" name="customerPhone" placeholder="Телефон" aria-label="Телефон" required>
|
||||||
|
<input class="field" type="text" name="customerAddress" placeholder="Адрес доставки" aria-label="Адрес доставки" required>
|
||||||
|
<select class="field" name="customerType" aria-label="Тип клиента">
|
||||||
|
<option value="Для дома">Для дома</option>
|
||||||
|
<option value="Для офиса">Для офиса</option>
|
||||||
|
</select>
|
||||||
|
<textarea class="field" name="customerOrder" id="orderItemsField" placeholder="Комментарий к заказу" aria-label="Комментарий к заказу"></textarea>
|
||||||
|
<button class="button" type="submit">Подтвердить заказ</button>
|
||||||
|
<div class="success-note" id="orderSuccess">Спасибо! Ваш заказ сохранен. Мы свяжемся с вами в ближайшее время.</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script src="index3.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
220
index3.js
Normal file
220
index3.js
Normal file
@@ -0,0 +1,220 @@
|
|||||||
|
const audienceContent = {
|
||||||
|
home: 'Артезианская вода 19 литров с доставкой на дом и в офис. Привозим по Гагаринскому, Ленинскому, Нахимовскому и Балаклавскому районам, помогаем с возвратной тарой и держим понятные цены без скрытых доплат.',
|
||||||
|
office: 'Доставка воды в офис в Севастополе с регулярным графиком, безналичной оплатой и приоритетными интервалами. Подходит для команд, кафе, студий, фитнес-клубов и клиентских пространств.'
|
||||||
|
}
|
||||||
|
|
||||||
|
const audienceButtons = document.querySelectorAll('[data-audience]')
|
||||||
|
const heroAudienceText = document.getElementById('heroAudienceText')
|
||||||
|
const mobileToggle = document.getElementById('mobileToggle')
|
||||||
|
const mobilePanel = document.getElementById('mobilePanel')
|
||||||
|
const cartDrawer = document.getElementById('cartDrawer')
|
||||||
|
const cartOpenButton = document.getElementById('cartOpenButton')
|
||||||
|
const mobileCartOpenButton = document.getElementById('mobileCartOpenButton')
|
||||||
|
const cartCloseButton = document.getElementById('cartCloseButton')
|
||||||
|
const modalBackdrop = document.getElementById('orderModal')
|
||||||
|
const modalCloseButton = document.getElementById('modalCloseButton')
|
||||||
|
const checkoutButton = document.getElementById('checkoutButton')
|
||||||
|
const orderButtons = document.querySelectorAll('[data-open-order]')
|
||||||
|
const addToCartButtons = document.querySelectorAll('.add-to-cart')
|
||||||
|
const faqItems = document.querySelectorAll('.faq-item')
|
||||||
|
const cartCount = document.getElementById('cartCount')
|
||||||
|
const mobileCartCount = document.getElementById('mobileCartCount')
|
||||||
|
const cartItemsCount = document.getElementById('cartItemsCount')
|
||||||
|
const cartTotal = document.getElementById('cartTotal')
|
||||||
|
const cartList = document.getElementById('cartList')
|
||||||
|
const orderForm = document.getElementById('orderForm')
|
||||||
|
const contactForm = document.getElementById('contactForm')
|
||||||
|
const orderItemsField = document.getElementById('orderItemsField')
|
||||||
|
const orderSuccess = document.getElementById('orderSuccess')
|
||||||
|
const contactSuccess = document.getElementById('contactSuccess')
|
||||||
|
|
||||||
|
let cart = []
|
||||||
|
|
||||||
|
const updateAudience = audience => {
|
||||||
|
heroAudienceText.textContent = audienceContent[audience]
|
||||||
|
audienceButtons.forEach(button => {
|
||||||
|
const isActive = button.dataset.audience === audience
|
||||||
|
button.classList.toggle('active', isActive)
|
||||||
|
button.setAttribute('aria-selected', String(isActive))
|
||||||
|
})
|
||||||
|
const typeField = orderForm.elements.customerType
|
||||||
|
typeField.value = audience === 'office' ? 'Для офиса' : 'Для дома'
|
||||||
|
}
|
||||||
|
|
||||||
|
const openMobileMenu = () => {
|
||||||
|
mobilePanel.classList.add('active')
|
||||||
|
mobileToggle.setAttribute('aria-expanded', 'true')
|
||||||
|
document.body.classList.add('menu-open')
|
||||||
|
}
|
||||||
|
|
||||||
|
const closeMobileMenu = () => {
|
||||||
|
mobilePanel.classList.remove('active')
|
||||||
|
mobileToggle.setAttribute('aria-expanded', 'false')
|
||||||
|
document.body.classList.remove('menu-open')
|
||||||
|
}
|
||||||
|
|
||||||
|
const openCart = () => {
|
||||||
|
cartDrawer.classList.add('open')
|
||||||
|
cartDrawer.setAttribute('aria-hidden', 'false')
|
||||||
|
document.body.classList.add('modal-open')
|
||||||
|
}
|
||||||
|
|
||||||
|
const closeCart = () => {
|
||||||
|
cartDrawer.classList.remove('open')
|
||||||
|
cartDrawer.setAttribute('aria-hidden', 'true')
|
||||||
|
document.body.classList.remove('modal-open')
|
||||||
|
}
|
||||||
|
|
||||||
|
const openModal = () => {
|
||||||
|
orderItemsField.value = cart.length
|
||||||
|
? cart.map(item => `${item.name} (${item.volume}) - ${item.price} ₽`).join('\n')
|
||||||
|
: ''
|
||||||
|
modalBackdrop.classList.add('open')
|
||||||
|
modalBackdrop.setAttribute('aria-hidden', 'false')
|
||||||
|
document.body.classList.add('modal-open')
|
||||||
|
}
|
||||||
|
|
||||||
|
const closeModal = () => {
|
||||||
|
modalBackdrop.classList.remove('open')
|
||||||
|
modalBackdrop.setAttribute('aria-hidden', 'true')
|
||||||
|
document.body.classList.remove('modal-open')
|
||||||
|
}
|
||||||
|
|
||||||
|
const renderCart = () => {
|
||||||
|
const total = cart.reduce((sum, item) => sum + item.price, 0)
|
||||||
|
const count = cart.length
|
||||||
|
|
||||||
|
cartCount.textContent = count
|
||||||
|
mobileCartCount.textContent = count
|
||||||
|
cartItemsCount.textContent = count
|
||||||
|
cartTotal.textContent = `${total} ₽`
|
||||||
|
|
||||||
|
if (!count) {
|
||||||
|
cartList.innerHTML = '<div class="empty-state">Корзина пока пуста. Добавьте воду 19 литров, компактные форматы или минеральную воду из каталога.</div>'
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
cartList.innerHTML = cart.map((item, index) => `
|
||||||
|
<div class="cart-item">
|
||||||
|
<div>
|
||||||
|
<strong>${item.name}</strong>
|
||||||
|
<span>${item.volume} · ${item.price} ₽</span>
|
||||||
|
</div>
|
||||||
|
<button type="button" data-remove-index="${index}" aria-label="Удалить ${item.name} из корзины">Удалить</button>
|
||||||
|
</div>
|
||||||
|
`).join('')
|
||||||
|
|
||||||
|
cartList.querySelectorAll('[data-remove-index]').forEach(button => {
|
||||||
|
button.addEventListener('click', () => {
|
||||||
|
const index = Number(button.dataset.removeIndex)
|
||||||
|
cart.splice(index, 1)
|
||||||
|
renderCart()
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
audienceButtons.forEach(button => {
|
||||||
|
button.addEventListener('click', () => updateAudience(button.dataset.audience))
|
||||||
|
})
|
||||||
|
|
||||||
|
mobileToggle.addEventListener('click', () => {
|
||||||
|
const isOpen = mobilePanel.classList.contains('active')
|
||||||
|
if (isOpen) {
|
||||||
|
closeMobileMenu()
|
||||||
|
return
|
||||||
|
}
|
||||||
|
openMobileMenu()
|
||||||
|
})
|
||||||
|
|
||||||
|
document.querySelectorAll('.mobile-nav a').forEach(link => {
|
||||||
|
link.addEventListener('click', closeMobileMenu)
|
||||||
|
})
|
||||||
|
|
||||||
|
addToCartButtons.forEach(button => {
|
||||||
|
button.addEventListener('click', () => {
|
||||||
|
cart.push({
|
||||||
|
name: button.dataset.name,
|
||||||
|
volume: button.dataset.volume,
|
||||||
|
price: Number(button.dataset.price)
|
||||||
|
})
|
||||||
|
renderCart()
|
||||||
|
openCart()
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
cartOpenButton.addEventListener('click', openCart)
|
||||||
|
mobileCartOpenButton.addEventListener('click', () => {
|
||||||
|
closeMobileMenu()
|
||||||
|
openCart()
|
||||||
|
})
|
||||||
|
cartCloseButton.addEventListener('click', closeCart)
|
||||||
|
checkoutButton.addEventListener('click', () => {
|
||||||
|
closeCart()
|
||||||
|
openModal()
|
||||||
|
})
|
||||||
|
|
||||||
|
orderButtons.forEach(button => {
|
||||||
|
button.addEventListener('click', openModal)
|
||||||
|
})
|
||||||
|
|
||||||
|
modalCloseButton.addEventListener('click', closeModal)
|
||||||
|
|
||||||
|
cartDrawer.addEventListener('click', event => {
|
||||||
|
if (event.target === cartDrawer) {
|
||||||
|
closeCart()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
modalBackdrop.addEventListener('click', event => {
|
||||||
|
if (event.target === modalBackdrop) {
|
||||||
|
closeModal()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
faqItems.forEach(item => {
|
||||||
|
const trigger = item.querySelector('.faq-question')
|
||||||
|
trigger.addEventListener('click', () => {
|
||||||
|
const isOpen = item.classList.contains('open')
|
||||||
|
faqItems.forEach(entry => {
|
||||||
|
entry.classList.remove('open')
|
||||||
|
entry.querySelector('.faq-question').setAttribute('aria-expanded', 'false')
|
||||||
|
})
|
||||||
|
if (!isOpen) {
|
||||||
|
item.classList.add('open')
|
||||||
|
trigger.setAttribute('aria-expanded', 'true')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
orderForm.addEventListener('submit', event => {
|
||||||
|
event.preventDefault()
|
||||||
|
orderSuccess.classList.add('visible')
|
||||||
|
cart = []
|
||||||
|
renderCart()
|
||||||
|
setTimeout(() => {
|
||||||
|
closeModal()
|
||||||
|
orderForm.reset()
|
||||||
|
orderSuccess.classList.remove('visible')
|
||||||
|
}, 1800)
|
||||||
|
})
|
||||||
|
|
||||||
|
contactForm.addEventListener('submit', event => {
|
||||||
|
event.preventDefault()
|
||||||
|
contactSuccess.classList.add('visible')
|
||||||
|
setTimeout(() => {
|
||||||
|
contactForm.reset()
|
||||||
|
contactSuccess.classList.remove('visible')
|
||||||
|
}, 2200)
|
||||||
|
})
|
||||||
|
|
||||||
|
document.addEventListener('keydown', event => {
|
||||||
|
if (event.key !== 'Escape') {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
closeCart()
|
||||||
|
closeModal()
|
||||||
|
closeMobileMenu()
|
||||||
|
})
|
||||||
|
|
||||||
|
renderCart()
|
||||||
|
updateAudience('home')
|
||||||
@@ -204,3 +204,73 @@ if ( ! function_exists( 'twentytwentyfour_pattern_categories' ) ) :
|
|||||||
endif;
|
endif;
|
||||||
|
|
||||||
add_action( 'init', 'twentytwentyfour_pattern_categories' );
|
add_action( 'init', 'twentytwentyfour_pattern_categories' );
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Use a standalone PHP template for the page slug "test1".
|
||||||
|
*
|
||||||
|
* @since Twenty Twenty-Four 1.0
|
||||||
|
*
|
||||||
|
* @param string $template Resolved template path.
|
||||||
|
* @return string
|
||||||
|
*/
|
||||||
|
function twentytwentyfour_test1_template( $template ) {
|
||||||
|
if ( ! is_page( 'test1' ) ) {
|
||||||
|
return $template;
|
||||||
|
}
|
||||||
|
|
||||||
|
$custom_template = get_theme_file_path( 'page-test1.php' );
|
||||||
|
|
||||||
|
if ( file_exists( $custom_template ) ) {
|
||||||
|
return $custom_template;
|
||||||
|
}
|
||||||
|
|
||||||
|
return $template;
|
||||||
|
}
|
||||||
|
add_filter( 'template_include', 'twentytwentyfour_test1_template' );
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Enqueue standalone landing assets for the page slug "test1".
|
||||||
|
*
|
||||||
|
* @since Twenty Twenty-Four 1.0
|
||||||
|
* @return void
|
||||||
|
*/
|
||||||
|
function twentytwentyfour_test1_assets() {
|
||||||
|
if ( ! is_page( 'test1' ) ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
$css_file = ABSPATH . 'index3.css';
|
||||||
|
$js_file = ABSPATH . 'index3.js';
|
||||||
|
|
||||||
|
wp_dequeue_style( 'global-styles' );
|
||||||
|
wp_dequeue_style( 'wp-block-library' );
|
||||||
|
wp_dequeue_style( 'wp-block-library-theme' );
|
||||||
|
wp_dequeue_style( 'classic-theme-styles' );
|
||||||
|
|
||||||
|
wp_enqueue_style(
|
||||||
|
'twentytwentyfour-test1-fonts',
|
||||||
|
'https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;700;800&display=swap',
|
||||||
|
array(),
|
||||||
|
null
|
||||||
|
);
|
||||||
|
|
||||||
|
if ( file_exists( $css_file ) ) {
|
||||||
|
wp_enqueue_style(
|
||||||
|
'twentytwentyfour-test1-style',
|
||||||
|
home_url( '/index3.css' ),
|
||||||
|
array( 'twentytwentyfour-test1-fonts' ),
|
||||||
|
(string) filemtime( $css_file )
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( file_exists( $js_file ) ) {
|
||||||
|
wp_enqueue_script(
|
||||||
|
'twentytwentyfour-test1-script',
|
||||||
|
home_url( '/index3.js' ),
|
||||||
|
array(),
|
||||||
|
(string) filemtime( $js_file ),
|
||||||
|
true
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
add_action( 'wp_enqueue_scripts', 'twentytwentyfour_test1_assets', 100 );
|
||||||
|
|||||||
36
wp-content/themes/twentytwentyfour/page-test1.php
Normal file
36
wp-content/themes/twentytwentyfour/page-test1.php
Normal file
@@ -0,0 +1,36 @@
|
|||||||
|
<?php
|
||||||
|
/**
|
||||||
|
* Standalone landing template for the page slug "test1".
|
||||||
|
*
|
||||||
|
* @package Twenty_Twenty_Four
|
||||||
|
* @since Twenty Twenty-Four 1.0
|
||||||
|
*/
|
||||||
|
|
||||||
|
$landing_file = ABSPATH . 'index3.html';
|
||||||
|
$landing_html = file_exists( $landing_file ) ? file_get_contents( $landing_file ) : false;
|
||||||
|
?><!DOCTYPE html>
|
||||||
|
<html <?php language_attributes(); ?>>
|
||||||
|
<head>
|
||||||
|
<meta charset="<?php bloginfo( 'charset' ); ?>">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<?php wp_head(); ?>
|
||||||
|
</head>
|
||||||
|
<body <?php body_class( 'test1-landing-page' ); ?>>
|
||||||
|
<?php wp_body_open(); ?>
|
||||||
|
<?php
|
||||||
|
if ( $landing_html && preg_match( '/<body[^>]*>(.*)<\/body>/is', $landing_html, $matches ) ) {
|
||||||
|
// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
|
||||||
|
echo $matches[1];
|
||||||
|
} else {
|
||||||
|
?>
|
||||||
|
<main class="site-main" role="main">
|
||||||
|
<div style="padding:48px 16px;max-width:1180px;margin:0 auto;">
|
||||||
|
<p>Не удалось загрузить шаблон страницы `index3.html`.</p>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<?php
|
||||||
|
}
|
||||||
|
?>
|
||||||
|
<?php wp_footer(); ?>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -266,10 +266,10 @@ function water_delivery_fonts_url() {
|
|||||||
/**
|
/**
|
||||||
* Enqueue scripts and styles.
|
* Enqueue scripts and styles.
|
||||||
*/
|
*/
|
||||||
function water_delivery_scripts() {
|
function water_delivery_scripts() {
|
||||||
$min = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ? '' : '.min';
|
$min = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ? '' : '.min';
|
||||||
$fonts_url = water_delivery_fonts_url();
|
$fonts_url = water_delivery_fonts_url();
|
||||||
$primary_color = water_delivery_get_option( 'primary_color' );
|
$primary_color = water_delivery_get_option( 'primary_color' );
|
||||||
if ( ! empty( $fonts_url ) ) {
|
if ( ! empty( $fonts_url ) ) {
|
||||||
wp_enqueue_style( 'water-delivery-google-fonts', $fonts_url, array(), null );
|
wp_enqueue_style( 'water-delivery-google-fonts', $fonts_url, array(), null );
|
||||||
}
|
}
|
||||||
@@ -297,12 +297,12 @@ function water_delivery_scripts() {
|
|||||||
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
|
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
|
||||||
wp_enqueue_script( 'comment-reply' );
|
wp_enqueue_script( 'comment-reply' );
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
add_action( 'wp_enqueue_scripts', 'water_delivery_scripts' );
|
add_action( 'wp_enqueue_scripts', 'water_delivery_scripts' );
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Enqueue editor styles for Gutenberg
|
* Enqueue editor styles for Gutenberg
|
||||||
*
|
*
|
||||||
* @since Water Delivery 1.0.0
|
* @since Water Delivery 1.0.0
|
||||||
*/
|
*/
|
||||||
function water_delivery_block_editor_styles() {
|
function water_delivery_block_editor_styles() {
|
||||||
|
|||||||
Reference in New Issue
Block a user