Дизайн-бриф и готовый промт

Спроектируй мобильное приложение бронирования автобусных билетов «belbilet» (пассажирский бренд, Беларусь) как современный, удобный продукт. Собери кликабельный интерактивный прототип на HTML/CSS/JS в одном файле, на статических тестовых данных — НЕ набор картинок, а рабочие переходы между экранами.

БРЕНД (строго соблюдать):
- Логотип: знак «два билетика» (зелёный #009639 + оранжевый #EF7F1B) + надпись «belbilet.by» (bel и .by — зелёные, bilet — оранжевый). Не использовать старое начертание с «дорогой».
- Основной цвет — зелёный #009639, глубокий #0A5F27, тинт #E4F3E8. Акцент-золото #BD8A48 (выделение «лучшего»). Оранжевый #EF7F1B — только дефицит/логотип, дозированно.
- Нейтрали с лёгким зелёным подтоном. Обязательно светлая и тёмная темы.
- Шрифт Manrope; цены и время — табличными цифрами.
- Язык интерфейса — русский. Валюта — BYN (руб.). Данные — по Беларуси (Минск, Гродно, Витебск, Полоцк).

ПРИЁМЫ (перенять у лидеров рынка, переложить на наш бренд):
1. Поиск: поля Откуда/Куда с кнопкой обмена, дата с чипами «Сегодня/Завтра», один доминирующий зелёный CTA.
2. Автокомплит городов на весь экран, с иконкой города и чипом точки посадки в подсказке.
3. Выдача: липкая шапка «маршрут + дата», прокручиваемый ряд чипов-фильтров, карточки рейса.
4. Карточка рейса: время→время + длительность, «осталось N мест», перевозчик + тип автобуса, зелёный чип рейтинга с числом отзывов, зачёркнутая старая цена, плашки удобств, преимущества перевозчика («всегда вовремя», Wi-Fi). Лучший рейс — золотая лента «Выбор пассажиров».
5. Фильтры — bottom sheet, две колонки (категории | значения) со СЧЁТЧИКОМ рейсов у каждого значения и закреплёнными «Сбросить / Применить».
6. Детали рейса — вкладки: Преимущества, Маршрут (остановки + индикатор пунктуальности), Удобства и оценки (иконки удобств + гистограмма звёзд + аспектные теги «чаще всего хвалят»), Отзывы (с ответом перевозчика), Условия отмены (таблица «время до рейса → % возврата»).
7. Оформление — линейный поток со степпером: Места → Посадка → Данные. Каждый пройденный шаг помечается галочкой.
8. Карта мест: цена на самом месте, состояние цветом И формой (свободно/выбрано/занято), выбор места пальцем с анимацией, живой пересчёт итога.
9. Посадка/высадка — аккордеон, авто-раскрытие высадки после выбора посадки, у каждой точки время + ориентир.
10. Данные пассажира: компактная сводка поездки сверху, минимум полей, тумблер уведомлений в Telegram, автоподстановка из контекста.
11. Финал — экран успешного билета с анимацией.

СОВРЕМЕННЫЕ ПРИЁМЫ UI:
- Скруглления 16–22px, мягкие многослойные тени, воздух между блоками.
- Микровзаимодействия: нажатие кнопки, всплытие bottom sheet, scale выбранного места, пульс-подсказка, прогресс-степпер.
- Sticky-хедеры с blur, семантические цвета отдельно от бренда.
- Уважать prefers-reduced-motion; доступный фокус; горизонтально скроллящийся контент — в своём контейнере.

ЧЕГО НЕ ДЕЛАТЬ:
- Не перекрывать контент баннерами «установите приложение» и плавающими ассистентами.
- Не показывать скидку, которой нет в источнике (у нас полное зеркало поставщика).
- Не выдумывать чужой брендинг; тестовые данные помечать как тестовые.

ВЫВОД: один HTML-файл с прототипом (телефон-фрейм, переходы по тапу, выбор мест, оформление до билета) + краткая записка, какие приёмы использованы и почему.