Запись к психологу: программа, которая держит время

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

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

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

Статусы визита: записан → подтверждён → пришёл → оплачен или не пришёл. Предусмотри отмену и перенос: освободившееся окно снова становится доступным. Занятым считай всё время сессии плюс паузу после неё. Второй визит на пересекающееся время блокируй и предлагай ближайшее свободное окно с учётом длительности и паузы.

Экраны: «сегодня» (ближайшие консультации по времени, свободные окна, заявки на подтверждение), сетка недели (дни по столбцам, сессии блоками с длительностью, паузы видны отдельно), карточка клиента (контакты, запрос, заметки, история, повторная запись в один тап), услуги и цены, напоминания о повторных встречах. Оплату и заметку создавай прямо из карточки визита. Сделай понятные пустые состояния, подтверждение удаления, закрытие окон по Escape и по клику на фон.

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

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

Добавь реалистичные демо-данные и кнопку «Удалить тестовые данные» с одноразовым подтверждением. Учти пустые поля, битые данные в localStorage, удаление связанных записей и переходы между экранами.

Перед выдачей сам пройди сценарии: запись на 50 и 80 минут, попытка поставить клиента на занятое время, пауза между сессиями, отмену и перенос, отметку «пришёл» и оплату, повторную запись, перезагрузку страницы, открытие с телефона. Найденное исправь сам.

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

Моя задача: ___ (одна фраза о вашей практике и клиентах).