Бот для записи клиентов: клиент записывается самбез переписки и блокнота

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

Сначала задай мне 8–15 простых вопросов с вариантами ответов: какие услуги вы оказываете и сколько минут занимает каждая; сколько человек принимает клиентов; как выглядит ваш день и есть ли перерывы; откуда приходят клиенты сейчас; нужна ли предоплата; какие статусы заявок важны; что должно быть видно на главном экране; нужна ли тёмная тема. Про фреймворки, базы данных и хостинг не спрашивай. После ответов перескажи, что понял, и приступай.

Сущности: клиент (имя, телефон, комментарий, история заявок), услуга (название, категория, длительность, цена, активна ли), заявка (номер, клиент, услуга, дата, время, длительность, цена, статус, источник, комментарий), уведомление (короткий текст подтверждения после записи), день (счётчики). Связи — по стабильным ID, а не по именам.

Статусы заявки: новая → в работе → закрыта. Отдельная ветка — «не пришёл» и «отменена». Переходы кнопками с подтверждением; закрытая заявка остаётся в истории и не пропадает.

Экраны:
1) «Запись» — форма или каталог: услуга, дата, свободное время, имя, телефон, комментарий; кнопка «Записаться».
2) «Заявки» — список на сегодня и неделю, фильтры по дате и статусу, новые сверху.
3) «Карточка заявки» — все поля, история изменений, кнопки «В работу» и «Закрыть».
4) «Счётчики за день» — новые, в работе, закрытые, сумма.
5) «Услуги» — прайс с длительностью и ценой, включение и выключение услуги.

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

Дизайн: тема Telegram — светлая и тёмная, компактные карточки, крупные кнопки, радиусы 14–24 px, аккуратная типографика, hover и focus, адаптив от 360 px. Главное действие — «Записаться» или «Новая заявка» — без прокрутки. Никакого визуального шума и стоковых картинок.

Технически: один HTML-файл, CSS и vanilla JS внутри, localStorage как хранилище, без backend, сборщиков, npm и внешних библиотек. Слои: storage → сущности → фичи → компоненты → экраны → навигация. После любого действия данные сохранены и интерфейс перерисован сразу.

Добавь демо-данные (6 услуг разной длительности, 8 клиентов, 12 заявок в разных статусах) и кнопку «Удалить тестовые данные» с подтверждением. Предусмотри пустые поля, битые данные, удаление связанных записей, закрытие окон по Escape и клику на фон. Сам пройди сценарии: новая заявка, перенос, отмена, неявка, закрытие, счётчики, перезагрузка, телефон.

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

Моя задача: запись клиентов, 6 услуг, два мастера, форма на планшете и телефоне.