Анна-Мария – сайт гостевого дома у моря

adlanna-maria.ru – сайт гостевого дома «Анна-Мария» на первой береговой линии в Сириусе (Сочи), с восточной стороны Олимпийского парка.

Раньше сайт жил на Tilda. Мы собрали новый с нуля: свой дизайн, своя вёрстка, генератор страниц и онлайн-бронирование напрямую у гостевого дома – без посредников.

Что видит посетитель

Первый экран главной страницы – вид на море и форма «Проверить даты». Гость указывает заезд, выезд и число гостей и сразу попадает к свободным номерам. Если он хочет сначала осмотреться, ниже его ждут рассказ о гостевом доме, номера, услуги, галерея, локация с расстояниями до моря, Олимпийского парка и аэропорта, отзывы гостей и контакты.

В разделе «Номера» собраны пять категорий – с фильтром и сравнением. У каждой категории своя страница: площадь, число гостей, удобства, цена «от» и фотогалерея.

Бронирование происходит на странице /booking/ через модуль Bnovo: свободные номера и цены показываются в реальном времени. Даты из формы на главной подставляются сами, так что вводить их второй раз не нужно.

Прямо под модулем брони – предоплата по QR-коду. Гость сканирует код в приложении своего банка, а если сидит с телефона, сохраняет картинку и загружает её из галереи.

Через виджет партнёра можно заказать экскурсии – на Красную Поляну, в Абхазию и по другим направлениям. Документы тоже на месте: политика обработки персональных данных, уведомление о cookie и публичная оферта.

Связаться можно в один клик: звонок на ресепшен, MAX или почта.

Как это выглядит и ощущается

Галерея открывается на весь экран. Кадры листаются пальцем, мышью или тачпадом, соседний кадр плавно выезжает следом, а свайп вниз закрывает просмотр.

Телефонная версия продумана отдельно: у неё свой кадр на первом экране, карусели номеров и отзывов и меню-шторка.

Подача спокойная. Шапка из дымчатого стекла сжимается при прокрутке, а блоки мягко появляются по мере чтения.

При этом сайт быстрый. Фотографии нарезаны в WebP в двух размерах (и JPEG для старых браузеров), а шрифт лежит на самом сайте.

Фирменный стиль и материалы

Кроме сайта мы собрали для гостевого дома всё, из чего складывается его облик.

Логотип сделан в нескольких вариантах – цветном, плоском и сплошном, а на сайте он появляется с анимацией. К нему добавились иконки услуг и контактов и фавикон для вкладки браузера и экрана телефона.

Отдельная работа – фотографии: номера, холл, веранда и вид на море. Мы отобрали кадры, обработали их и нарезали под сайт и под модуль бронирования Bnovo.

И наконец, для гостей сделана информационная листовка A4 – в печать и в PDF.

Чтобы сайт находили

Поисковики получают структурированные данные: гостевой дом с адресом и координатами, каждую категорию номеров и хлебные крошки. У каждой страницы свои заголовок и описание, есть sitemap.xml и robots.txt. Главное зеркало одно: www и второй домен ведут на adlanna-maria.ru.

Сайт подключён к Яндекс Вебмастеру и Google Search Console. Яндекс Метрика и карта включаются только после согласия посетителя в cookie-баннере.

Последний штрих – типограф. Он расставляет неразрывные пробелы во всех текстах, чтобы предлоги и числа не отрывались от слов.

Под капотом

Стек. Статичный HTML, CSS и чистый JavaScript без фреймворков и сборщиков: десяток небольших модулей – меню, карусели, лайтбокс, фильтр номеров, появление блоков, cookie, Метрика, карта. Генераторы страниц – Python 3. Шрифт Montserrat (300/400/500, кириллица и латиница) отдаётся с самого сайта в WOFF2. Весь сайт вместе с фотографиями – около 24 МБ.

Генераторы. Данные хранятся в JSON, а страницы собираются скриптами.

Главный из них – build_rooms.py. Он берёт rooms.json с пятью категориями (метраж, гости, кровати, этаж, вид, цена «от», id в Bnovo, галерея) и собирает из него каталог /nomera/ с фильтром и сравнением, страницы категорий, карточки на главной и 404. Шапку, меню и подвал он вырезает из index.html, поэтому навигация правится в одном месте. Режим --check проверяет данные, ничего не записывая.

Юридические страницы делают build_legal.py и build_oferta.py: из legal.json получаются политика по 152-ФЗ с разделом про cookie и публичная оферта, а заодно строка реквизитов в подвале всех страниц. Страницу /booking/ с модулем Bnovo собирает build_booking.py.

Фотографиями занимается build_photos.py. Он обрабатывает исходники параллельно через Pillow: WebP 1600 идёт в галереи и лайтбокс, WebP 800 – только в плитки и карточки, JPEG 1200 – для старых браузеров. EXIF и GPS вырезаются, размеры кадров записываются в photos.json, и у каждого <img> есть width/height – страница не прыгает при загрузке.

build_sitemap.py берёт lastmod из даты коммита файла, а при незакоммиченных правках ставит сегодняшнюю. typograf.py расставляет неразрывные пробелы после предлогов и в числах на всех страницах. build_pay_qr.py выпускает QR для предоплаты в банковском формате ГОСТ Р 56042 (ST00012) – SVG для страницы и PNG для сохранения в галерею.

Страница пишется на диск, только если изменилась, а у CSS и JS в адресе стоит ?v=<хэш> – браузеры не держат старые версии.

Бронирование. Форма на главной – обычный GET на /booking/?dfrom=…&dto=…&adults=…, работает и без JavaScript. Скрипт переводит даты в формат Bnovo (DD-MM-YYYY) и передаёт их в модуль. Если в адресе нет своих UTM, бронь получает utm_source=site и страницу, с которой пришёл гость, – в Bnovo видно, что бронь пришла с сайта и откуда. Если модуль Bnovo не загрузился, вместо вечного спиннера гость видит запасной путь: телефон и мессенджер.

SEO и сервер. JSON-LD BedAndBreakfast с адресом и координатами, HotelRoom на каждую категорию, BreadcrumbList на страницах номеров. В robots.txt – Clean-param для параметров формы брони и меток Яндекс Карт. .htaccess: одно главное зеркало (www и annamariasochi.ru – 301 на adlanna-maria.ru), 301 со старых адресов категорий, /index.html → /, слэш у каталогов, HSTS, nosniff, no-cache для HTML. Метрика, Вебвизор и Яндекс Карта грузятся только после согласия в cookie-баннере, выбор хранится в localStorage.

Выкатка. ./ship.sh – сборка, список того, что уедет, подтверждение, заливка по SSH через rsync и сверка. Скрипт откажется писать куда-либо, кроме каталога этого сайта на хостинге. Запасной путь – FTP-зеркало с удалением лишнего, только по FTPS. После заливки verify_live.py скачивает каждый файл с боевого адреса и сверяет md5 – недокачанный файл не пройдёт незамеченным.

Во что это обходится

Сайт работает на обычном виртуальном хостинге Timeweb – без отдельного сервера и базы данных. Никаких подписок на конструкторы и плагины нет: сайт целиком принадлежит владельцу, и его можно перенести к любому хостеру.

FURAI LAB

Проект спроектирован и собран FURAI LAB – от логотипа, фотографий и листовки до дизайна, вёрстки, бронирования, юридических страниц и выкатки.