Дмитрий
79 lines
4.9 KiB
Markdown
79 lines
4.9 KiB
Markdown
# Прил. Л — 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 цифре с автопереходом) уже близка к боевой.
|
||
|
||
## Версионирование
|
||
|
||
Каждый файл прототипа фиксирует свою версию в шапке (`<!-- Версия: vX.Y от ДД.ММ.ГГГГ -->`). При смене узла брендбука или narrative — обновляем затронутые прототипы и фиксируем в этой таблице:
|
||
|
||
| Дата | Что изменилось |
|
||
|---|---|
|
||
| 05.05.2026 | v0.1 — прототип №01 (Логин/Регистрация/2FA/Recovery) |
|
||
|
||
---
|
||
|
||
*Прил. Л v0.1 от 05.05.2026 — старт серии прототипов.*
|
||
|
||
## Репозиторий
|
||
|
||
https://github.com/GWIN14123/lidpotok
|