Прил. Л — HTML-прототипы Лидпоток

Самодостаточные HTML-прототипы 8 ключевых экранов клиентского приложения и админки SaaS. Это не боевой код — это референс для дизайнера (Диз-1) и рабочая заготовка для frontend-команды в спринтах 1, 4, 5, 8, 14.

Как пользоваться

открыть web/index.html → выбрать экран → двойной клик

Структура проекта

lidpotok/
├── README.md      ← этот файл
├── docs/          ← документация, инструкции, аудиты, брендбук
├── web/           ← HTML-прототипы экранов
└── db/            ← schema.sql и changelog схемы

Каждый прототип:

Полностью офлайн-самодостаточный, кроме одного запроса к Google Fonts за Inter и JetBrains Mono (можно заменить на локальный fallback за минуту).
Содержит «пилюлю i» в правом нижнем углу — открывает спецификацию экрана: состояния, API-контракты, требования безопасности, что не реализовано.
Использует только токены из brandbook.md v1.1. Если в проекте появятся новые токены — править надо брендбук, не прототип.

Источники истины

Что	Где
Палитра, типографика, размерная сетка	`brandbook.md` v1.1 §3, §4, §5, §8
SVG-логотипы	`brandbook.md` §9.1–9.5
Поведение экранов	`CRM_bp-gr_Инструкция_v8_3.md` v8.3.1
Админка SaaS (экран 08)	`Админка_SaaS_v8_2.md`
Открытые вопросы по дизайну	`Открытые_вопросы_v8_3.md` Диз-1, Диз-3

Статус экранов

#	Экран	Статус	Сессия
01	Логин · Регистрация · 2FA · Recovery	✅ Готово	05.05.2026
02	Дашборд	⏸ В очереди	—
03	Список сделок	⏸ В очереди	—
04	Карточка сделки	⏸ В очереди	—
05	Канбан-доска	⏸ В очереди	—
06	Биллинг и тарифы	⏸ В очереди	—
07	Настройки тенанта	⏸ В очереди	—
08	Админка SaaS	⏸ В очереди	—

Прототипы выпускаются по одному за сессию.

Что прототип НЕ делает

Не подключается к API. Все формы отправляют заглушки (alert или симулированный успех).
Не использует Vue/Vuetify — это сознательно, чтобы прототип открывался в браузере и читался без npm.
Не покрывает все пограничные состояния (loading skeletons, ошибки сети). Эти состояния перечислены в spec-аннотации каждого экрана.
Не финализирует слабо проработанные в ТЗ места — их я отмечаю в спецификации тегом [?] (по соглашению Pravila_raboty_Claude_v1_1.md §3.1).

Что брать из прототипа в боевой код

CSS-переменные из :root — копировать в resources/css/brand.css Vue-проекта (но единственный источник истины — brandbook.md §8.1).
Структура DOM и aria-атрибуты — переносить в .vue компоненты как есть.
JavaScript-логику — переписывать на Composition API, но логика валидаций (zxcvbn-эвристика, TOTP-таймер, ввод по 1 цифре с автопереходом) уже близка к боевой.

Версионирование

Каждый файл прототипа фиксирует свою версию в шапке (). При смене узла брендбука или narrative — обновляем затронутые прототипы и фиксируем в этой таблице:

Дата	Что изменилось
05.05.2026	v0.1 — прототип №01 (Логин/Регистрация/2FA/Recovery)

Прил. Л v0.1 от 05.05.2026 — старт серии прототипов.

Репозиторий

https://github.com/GWIN14123/lidpotok

4.9 KiB Raw Blame History Unescape Escape