Клубный теплоход «ПУРГА»: лендинг мероприятия с формой заявки

Лендинг клубного теплохода «ПУРГА» — старый, но показательный пример одностраничного сайта по готовому макету. По постановке задачи нужно было сверстать страницу с возможностью отправить заявку на мероприятие.

Открыть исходное описание проекта: https://raskumandrin.pages.dev/purga

В таких задачах качество определяется не только совпадением с макетом. Важно, чтобы интерактивные элементы вели себя по-человечески: форма не ломала сценарий заявки, поля были понятны, а динамический текст не превращался в роботизированные «1 часов» и «2 часов».

Для промо-страниц мероприятий статический лендинг остаётся практичным форматом: он быстро открывается, легко передаётся подрядчику или владельцу проекта и не требует тяжёлой инфраструктуры, если бизнес-логика ограничена заявкой и несколькими интерактивными элементами.

Отправить бриф

Рисунок 1. Лендинг клубного теплохода «ПУРГА»: промо-страница с заявкой и выбором параметров мероприятия.

Задача

Нужно было превратить макет в рабочую HTML-страницу. Для этого лендинг должен был:

• сохранить визуальную структуру исходного макета;
• дать пользователю понятный путь к отправке заявки;
• поддержать выбор количества часов для мероприятия;
• корректно показывать русские словоформы рядом с числом часов;
• оставаться простым в размещении и передаче заказчику.

Внимание к деталям

В макете был показан вариант «5 часов». Если просто менять число, интерфейс быстро начинает выглядеть небрежно: «1 часов», «2 часов», «3 часов». Формально это небольшая деталь, но именно такие детали влияют на ощущение качества.

Когда в веб-форме есть динамика — количество часов, гостей, товаров, файлов или любых других сущностей — текст рядом с числом тоже должен меняться корректно. Пользователю приятнее читать форму, которая говорит на нормальном языке, а не механически подставляет одно и то же слово после любого числа.

Эту специфику особенно важно учитывать на мультиязычных сайтах: в разных языках формы слов склоняются по-разному, и правило для русского нельзя просто перенести на английский, сербский или другой язык. Поэтому такие подписи лучше проектировать как часть интерфейсной логики, а не как статичный текст в макете.

Ниже пример именно для русского языка: функция получает число и три формы слова, а возвращает корректную подпись — «1 час», «2 часа», «5 часов».

function plural(n, form1, form2, form5) {
  n = Math.abs(n) % 100;
  var n1 = n % 10;

  if (n > 10 && n < 20) {
    return form5;
  }
  if (n1 > 1 && n1 < 5) {
    return form2;
  }
  if (n1 == 1) {
    return form1;
  }

  return form5;
}

Для форматированного заполнения полей формы дополнительно использовалась библиотека formatter.js. Это помогало сделать ввод более аккуратным без усложнения всего проекта.

Технический контур

• Формат: одностраничный промо-сайт.
• Frontend: HTML/CSS-вёрстка по макету.
• Интерактивность: JavaScript для выбора параметров и склонения числительных.
• Форма: заявка с форматированным вводом полей.
• Backend: минимальный контур, достаточный для сценария заявки.

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

Результат

• Макет был превращён в рабочий одностраничный лендинг.
• На странице появился сценарий отправки заявки на мероприятие.
• Количество часов отображалось с корректными русскими склонениями.
• Поля формы получили форматированное заполнение.
• Проект показывает практичный подход к лендингам: не только сверстать экран, но и довести интерактивные детали до нормального пользовательского уровня.

Кому подходит такой формат

• Ивент-проектам, которым нужен быстрый промо-лендинг под мероприятие или площадку.
• Малым бизнесам, где заявка важнее сложного каталога или личного кабинета.
• Командам, у которых уже есть макет и нужен аккуратный frontend без лишней архитектуры.
• Проектам на русском языке, где динамический интерфейс должен учитывать склонения и форматирование ввода.

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

Отправить бриф