Сайт фотографа, который собирается за вечер

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

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

Спроектируй сущности: секция страницы (первый экран, услуги, работы, отзывы, контакты, форма), услуга (название, пакет часов, что входит, цена, порядок), работа (серия, обложка, 5–12 кадров, дата, место, подпись), отзыв (текст, имя, тип съёмки), заявка (дата, жанр, бюджет, контакт, комментарий, статус). Свяжи работы с услугами по стабильным ID. Статусы услуги и работы: черновик → опубликован; черновик видит только владелец.

Экраны: публичная страница — первый экран, услуги, работы, отзывы, контакты и форма; и режим редактирования. В режиме редактирования добавляйте, скрывайте и меняйте порядок секций и работ, правьте тексты и цены на месте, без перезагрузки. Галерея открывается по клику: крупный кадр, стрелки, подпись, закрытие по Escape. Форма заявки проверяет обязательные поля и после отправки показывает готовый текст для мессенджера — без backend.

Дизайн: выбери цельную систему под фотографию — много воздуха, крупные кадры, спокойная типографика, тонкие линии, никаких декоративных рамок и стоковых иконок. Адаптив от 360 px, галерея листается свайпом, кнопка «Оставить заявку» доступна с телефона. Продумай пустые состояния, alt-тексты и то, что видит посетитель без JavaScript.

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

Добавь 6–8 демонстрационных работ с подписями и 3 отзыва, кнопку «Удалить демо-данные» с подтверждением. Учти пустые поля, битые данные, удаление работы из галереи, переносы строк. Модальные окна закрываются по Escape и по клику на фон.

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

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