Cinematic first impression Кинематографичный первый кадр
Full-screen lounge background, large editorial heading, info pills, and two clear CTAs — Reserve and View Menu. Within five seconds, a guest knows where this is, what's served, and how to book. Полноэкранный фон лаунжа, крупный редакционный заголовок, инфо-плашки и две понятные кнопки — «Зарезервировать» и «Меню». За 5 секунд гость понимает, где это, что предлагают и как забронировать.
- Parallax background — image shifts on scroll, gives depth without weightПараллакс фона — изображение смещается при скролле, добавляет глубину без перегруза
- Platinum gradient on the headline supports the brand name visuallyПлатиновый градиент в заголовке визуально поддерживает имя бренда
- Sticky header turns into a glass blur after scroll — never blocks the viewШапка превращается в стеклянный блюр при скролле — не перекрывает контент
"Play the Vibe" — optional ambient sound «Play the Vibe» — звук по желанию
A discreet button in the hero plays a club beat synthesised live in the browser — kick, hi-hat, sub-bass, minor pluck chord. It's off by default (browsers block autoplay anyway), so guests opt in. Easy to swap for a real DJ mix or a SoundCloud playlist later. Незаметная кнопка в hero включает клубный бит, сгенерированный прямо в браузере — кик, хэт, саб-бас, минорный pluck-аккорд. По умолчанию выключен (браузеры всё равно блокируют автоплей), включает гость сам. Легко заменить на реальный DJ-микс или плейлист SoundCloud.
- 118 BPM — classic deep house tempo, suits the browsing pace118 BPM — классический deep house, под темп листания
- Smooth fade in/out when toggled — no abrupt cutsПлавный fade in/out при переключении — без резких обрывов
- No MP3 file required for the preview — works offline tooДля превью не нужен MP3-файл — работает даже офлайн
Menu that reads like a luxury card Меню как карта премиум-ресторана
Six tabbed categories — Burgers, Steaks, Salads, Drinks, Coffee & Desserts, Mojitos. Each item flows in with a soft stagger animation. Signature dishes get a shimmering platinum star and a subtle background tint — that's where the eye goes first. A full-card modal opens for the complete list. Шесть категорий-табов: бургеры, стейки, салаты, напитки, кофе и десерты, мохито. Каждый пункт появляется с лёгкой staggered-анимацией. Сигнатурные позиции отмечены мерцающей платиновой звездой и фоновой подсветкой — туда идёт взгляд в первую очередь. Полное меню открывается в модалке.
- One-click highlighting — flag
signature: truein the dataПодсветка в один клик — флагsignature: trueв данных - Hover slides the row right and shows a platinum barHover сдвигает строку и показывает платиновую полосу слева
Same menu, rebuilt for thumbs То же меню, переделанное под палец
On desktop the menu is a clean two-column list with name and price on one line. On phones — that same row would overflow, so the layout flips: name and price on row one, description on row two. Tabs become a horizontally scrollable strip stretched edge-to-edge so big categories don't wrap awkwardly. На десктопе меню — чистый двухколоночный список с именем и ценой в одну строку. На телефоне такая строка не помещается, поэтому верстка меняется: название и цена — в первую строку, описание — во вторую. Табы превращаются в горизонтально-прокручиваемую ленту от края до края, чтобы длинные категории не переносились криво.
- Tabs scroll horizontally with hidden scrollbar — like StoriesТабы скроллятся горизонтально без видимого скроллбара — как Stories
- Item descriptions wrap into a second row, never get cut offОписания переносятся на вторую строку, никогда не обрезаются
- All hover effects replaced with tap-friendly active statesHover-эффекты заменены на тап-совместимые active-состояния
Spinning vinyl cursor + spotlight Курсор-пластинка + следящий свет
On desktop, the cursor becomes a small spinning vinyl record with a platinum centre label. A soft spotlight follows it across the page, lifting whatever the guest is looking at. It's a tactile detail — the kind that makes the site feel built, not assembled. На десктопе курсор превращается в маленькую вращающуюся виниловую пластинку с платиновой центральной этикеткой. По странице за ним ходит мягкий пучок света и подсвечивает то, что гость рассматривает. Тактильная деталь, благодаря которой сайт ощущается сделанным, а не собранным.
- Pure CSS — no images, scales perfectly on retinaЧистый CSS — без картинок, идеально на retina
- Spins faster when hovering over interactive elementsКрутится быстрее при наведении на интерактив
- Auto-disabled on touch devices — they have native touch feedbackАвто-отключается на тач-устройствах — там работает нативный тач
Sticky bottom bar — Call · Reserve · Instagram Закреплённая нижняя панель — Звонок · Бронь · Instagram
On phones, three actions stay glued to the bottom of the screen no matter where the guest scrolls. Most traffic comes from Instagram on a phone — which means thumb-zone access to a phone call and a reservation is the single biggest conversion lever on the entire site. На телефонах три действия закреплены внизу экрана независимо от прокрутки. Основной трафик придёт из Instagram с телефона — значит, мгновенный доступ большим пальцем к звонку и брони — это самый сильный конверсионный рычаг на всём сайте.
- Call opens the dialer with the bar's number pre-filledCall открывает диалер с уже введённым номером
- Reserve scrolls smoothly to the booking formReserve плавно прокручивает к форме брони
- Instagram opens the bar's profile in a new tabInstagram открывает профиль в новой вкладке
Event booking — built to convert groups Бронь событий — сделана под групповые продажи
A dark glass form with a platinum border, six event-type quick picks (birthday, corporate, private karaoke, holiday, date night, friends), and a clean five-field form. The whole section sits on a fixed parallax lounge background — gives the form weight and atmosphere instead of a sterile white box. Тёмная стеклянная форма с платиновой обводкой, шесть быстрых типов событий (день рождения, корпоратив, приватный караоке, праздник, свидание, посиделки) и чистая форма из пяти полей. Вся секция стоит на фиксированном параллакс-фоне — это даёт форме вес и атмосферу вместо стерильного белого блока.
- Success state with confirmation message after submitСостояние успеха с подтверждением после отправки
- Ready to wire up to email, CRM, or a Telegram botГотова к подключению к почте, CRM или Telegram-боту
Real Google Map — dark themed Настоящая Google-карта — тёмная тема
Embedded Google Maps tinted dark to match the lounge mood, with a pulsing platinum pin. No API key required for the preview — and one button sends the guest into Google Maps for directions, another into Instagram, another straight to a phone call. Встроенная Google-карта с тёмным CSS-оверлеем под настроение лаунжа, пульсирующая платиновая метка. API-ключ для превью не нужен — а одна кнопка отправляет гостя в Google Maps за маршрутом, вторая — в Instagram, третья — сразу в звонок.
- Hours, address, phone are clearly marked
EDITABLEin codeЧасы, адрес, телефон чётко помеченыEDITABLEв коде - Single HTML file — works without a server, easy to host anywhereОдин HTML-файл — работает без сервера, легко разместить где угодно
