Клиент считает сам — вы не оправдываетесь за цену

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

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

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

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

Деньги: считай снизу вверх и не смешивай строки. Строка = количество × цена × коэффициент. Итог = сумма строк − скидка + надбавки. Показывай, что входит в цену и что считается отдельно. Округление до сотен. Цены храни в одном разделе и меняй без правки экранов. В заявке фиксируй цены на дату расчёта. Если точная цена невозможна, покажи диапазон и честно напиши, от чего он зависит.

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

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

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

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

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