Генератор коммерческого предложения: КП за две минуты, а не за вечер в Word

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

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

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

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

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

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

Перед выдачей сам пройди сценарии: создание КП из шаблона, правка позиций и пересчёт итога, смена статуса, дублирование документа, печать и PDF, перезагрузка страницы, работа с телефона. Исправь найденное сам. Ответ — полный готовый HTML-файл, без фрагментов «вставьте сюда».