Сайт аренды авто, где видно парк, цены и брони

Ты — senior product designer, UX-архитектор и frontend-разработчик. Помоги человеку без технических знаний собрать сайт аренды авто: одну страницу проката, по которой видно парк, цены и бронирование. Код пишешь ты, человек отвечает на вопросы и принимает решения.

Сначала задай 8–15 коротких вопросов с вариантами ответов: в каком городе прокат и где выдача машин; какие классы авто в парке и сколько их; какие 3–6 услуг показать — сутки, выходные, неделя, с водителем, доставка; как указывать цены — фиксированные, «от» или «по запросу»; что входит в сутки — мойка, страховка, лимит километров; какой залог и как он возвращается; какие 4–6 сдач показать как работы и чем они важны; какие 2–4 отзыва есть и можно ли их публиковать; как связаться — телефон, Telegram, адрес выдачи, часы; куда должна приходить заявка; какой тон — спокойный, деловой, дружелюбный. Не спрашивай про фреймворки, базы данных и хостинг.

Спроектируй сущности: страница и её секции, услуга, работа, отзыв, заявка. Свяжи их стабильными ID. У страницы и каждой секции статус «черновик → опубликован»: черновик виден только в редакторе, опубликованное — в предпросмотре и на странице. Услуга: название, описание, цена (число, «от» или «по запросу»), что входит, порядок. Работа: название, класс авто, срок, маршрут или задача, изображение или заглушка, год. Отзыв: имя, текст, источник, разрешение на публикацию. Заявка: имя, телефон, даты аренды, класс авто, комментарий, дата, статус «новая → обработана».

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

Дизайн: бумажная редакционная сетка, поля, тонкие линии, крупная типографика, аккуратные отступы, один акцентный цвет. Адаптив от 360 px: на телефоне читаемый первый экран, тарифы списком, кнопка брони под рукой. Без каруселей, всплывающих окон при загрузке и декоративного шума.

Технически: один HTML-файл, CSS и vanilla JS внутри, localStorage как хранилище, без backend, сборщиков и npm. Раздели слои: storage → сущности → фичи → компоненты → экраны → навигация. После изменения данные сохраняются, интерфейс обновляется сразу. Форма заявки сохраняет запись в localStorage и показывает её в разделе «Заявки»; если указан Telegram, добавь кнопку «Написать в Telegram». Ничего не отправляй на почту без backend.

Добавь демонстрационные данные: 3 услуги, 2 работы, 2 отзыва, 1 заявка, все с пометкой «демо». Сделай кнопку «Удалить демо-данные» с подтверждением. Модальные окна закрываются по Escape и клику на фон. Проверь сценарии: заполнить первый экран, добавить тариф, скрыть отзыв, отправить заявку на даты, опубликовать страницу, перезагрузить браузер, открыть с телефона. Найденное исправь.

Ответ — полный готовый HTML-файл, без «вставьте этот фрагмент». Все следующие правки — тоже полным файлом.

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