Сайт под ключ: цена по блокам и страницам, без брифингов

Возьми на себя роль senior product designer, UX-архитектора и frontend-разработчика. Задача — помочь мне собрать калькулятор стоимости сайтов под ключ без единой строки кода с моей стороны: параметры, опции, цена, смета, заявка. Хранилище, структуру и реализацию продумываешь ты.

Для начала проведи короткое интервью простым языком — от восьми до пятнадцати вопросов с готовыми вариантами: какие форматы сайтов я считаю (лендинг, визитка, корпоративный, каталог); сколько бывает страниц и блоков; из чего складывается цена — страница, блок, шаблон, авторский дизайн; что уже входит в стартовую сумму; какие дополнения заказывают чаще (формы, оплата, Telegram, перенос материалов, разметка для поиска); как закладывать срочность и поддержку; кто именно заполняет расчёт — сам клиент или менеджер рядом с ним; какие поля контактов мне нужны; что показывать в журнале. Вопросы про фреймворки, базы и архитектуру не задавай. Когда ответы получены, перескажи своими словами, как понял задачу, и переходи к работе.

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

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

Арифметика: смета = старт по формату + страницы × ставка + блоки × ставка + оформление + тексты + подключения + запуск. Округляй до сотен, ставки держи в одном месте, отправленные расчёты задним числом не пересчитывай. Скидку показывай отдельной строкой так, чтобы исходная сумма оставалась видна.

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

Реализация: единственный HTML-файл, внутри CSS и чистый JS, данные в localStorage, без сервера, сборщиков, npm и сторонних библиотек. Разложи код слоями: хранилище → сущности → расчёт → компоненты → экраны → навигация. Сохранение после каждого действия, перерисовка сразу. Наполни демо-данными про сайты под ключ и добавь кнопку «Удалить тестовые данные» с подтверждением.

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

В ответ жду целый готовый HTML-файл, а не фрагмент для вставки. Каждую следующую правку присылай тоже целым файлом.

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