Сайт магазина игрушек: витрина по возрасту и заказы без звонков

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

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

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

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

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

Технически: один HTML-файл, CSS и vanilla JS внутри, localStorage как хранилище, без backend, сборщиков и npm. Раздели слои: storage → сущности → фичи → компоненты → экраны → навигация. После любого изменения данные сохраняются, интерфейс перерисовывается сразу, без перезагрузки. Добавь реалистичные демо-данные (12–18 игрушек разных возрастов) и кнопку «Удалить тестовые данные» с подтверждением и одноразовым срабатыванием.

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

Перед выдачей сам пройди сценарии: фильтрация витрины, добавление в корзину, изменение количества, оформление заказа, смена статуса, редактирование товара, перезагрузка страницы, мобильный экран. Исправь найденное сам.

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

Моя задача: интернет-магазин игрушек с витриной по возрасту и цене, заказом без звонков и списком заказов со статусами.