# Прил. Л — 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