Калькулятор забора и навеса, который считает вместо блокнота

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

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

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

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

Деньги: итог = длина периметра × цена метра + столбы × штука + лаги × метраж + ворота + калитка + автоматика + площадь навеса × цена кровли + монтаж + доставка − скидка. Округление до десятков рублей, все цены в одном месте и меняются без правки кода экранов. Скидка отдельной строкой, видно исходную сумму и итог.

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

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

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

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

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