Бриф клиента, который клиент заполняет сам

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

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

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

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

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

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

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