arazor72/brand_book
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Files
754056642da0bc71dedc414e091d0fa0d1b5dfc7
brand_book/docs/SPRINTS.md
T
AR 15 M4 754056642d plan: rewrite Sprint 5-12 — document only what exists on real site 
Key principle: brandbook documents only existing perm.oclinica.ru blocks,
no invented style variants. Every sprint starts with Research phase.

Sprint 5: Header/Navigation
Sprint 6: Hero banner + Advantages block
Sprint 7: Intro text (CEO) + Services
Sprint 8: Doctors page blocks
Sprint 9: Reviews + News
Sprint 10: Contact forms + Contact block
Sprint 11: Pages — Disease + Home (assembled)
Sprint 12: Pages — Prices + Contacts + final smoke

Sidebar: removed invented hero variants, added "soon" back to blocks
pending documentation from real site.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-22 23:31:57 +05:00

349 lines
25 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
# План спринтов — Брендбук О!Клиника
> Недельные спринты. Каждый спринт = 1 рабочая неделя.
> Базовая дата начала: уточняется при старте разработки.
---
## Обозначения
- **FE** — задача фронтенда (Next.js)
- **BE** — задача бэкенда (NestJS + Prisma)
- **DB** — изменения схемы базы данных
- **Design** — дизайн-решения, требующие согласования
---
## Sprint 1 — Инициализация проекта + страница «Логотип» ✅ ЗАВЕРШЁН
**Цель:** Рабочее окружение, monorepo, базовая архитектура, первая живая страница брендбука — «Логотип».
### Задачи — инфраструктура
- [x] FE: Инициализация Next.js 16 (App Router, Tailwind 4, TypeScript) в `apps/web`
- [x] BE: Инициализация NestJS 11 в `apps/api`
- [x] DB: PostgreSQL 16 + Prisma 7, схема User + ExperimentalComponent
- [x] Настройка Docker Compose (порт 5433 — 5432 занят на хосте)
- [x] Настройка monorepo (pnpm workspaces)
- [x] Создание `.env.example`
- [x] Git: создание веток `develop` и `sprint/1`, подключён remote git.pirogov.ai
- [x] FE: Layout с боковой навигацией (все разделы, статус «скоро»)
- [x] FE: Fira Sans подключён через next/font/google, CSS-токены бренда в globals.css
### Задачи — страница «Логотип»
- [x] Design: PNG логотипа извлечён из PDF программно (PyMuPDF + Pillow)
- [x] FE: Прозрачная версия логотипа (удалён белый фон через numpy)
- [x] FE: Страница `/foundation/logo`
- [x] FE: Иерархия версий (Основной / Общий) с реальным изображением из PDF
- [x] FE: Цветовые варианты: светлый / инвертированный (CSS filter) / на форме
- [x] FE: Охранная зона с визуализацией отступов
- [x] FE: Таблица минимальных размеров (до 46 р. и от 48 р.)
- [x] FE: 6 правил недопустимого использования
- [x] FE: Placeholder «Скачать вектор» (кнопка неактивна)
### Фактические результаты
- Брендбук запущен локально на `http://localhost:3001`
- Название клиники исправлено: «Клиника ухо, горло, нос им. проф. Е.Н.Оленевой»
- Инвертированный логотип корректно отображается (белый на тёмном фоне)
### Технические решения Sprint 1
- PostgreSQL запущен на порту **5433** (5432 занят на хосте)
- Логотип хранится как PNG с прозрачным фоном (`public/logo/logo-transparent.png`)
- Инверсия логотипа: CSS `filter: brightness(0) invert(1)` на прозрачном PNG
- Next.js запускается на порту **3001** (3000 занят на хосте)
---
## Sprint 2 — Цвета, типографика и оффлайн элементы (Brand Foundation) ✅ ЗАВЕРШЁН
**Цель:** Секция «Фундамент бренда» — цвета, оба шрифта, а также первый оффлайн-раздел.
### Задачи — цвета
- [x] Design: Зафиксировать HEX-эквиваленты всех цветов бренда (053M, 073M, 066M, 050M, 081M, 080M)
- [x] FE: Создать CSS-переменные / дизайн-токены для всей цветовой палитры
- [x] FE: Страница «Цвета» — палитра с кодами Oracal/Pantone, HEX, RGB, HSL, копирование в клик
- [x] FE: Проверка контрастности пар цветов (WCAG AA/AAA)
- [x] FE: Экспорт токенов в JSON (Figma-compatible)
### Задачи — типографика
- [x] FE: Страница «Типографика» — раздел DINPro (бренд/оффлайн) + раздел Fira Sans (веб)
- [x] FE: Шкала размеров для обоих шрифтов: h1–h6, body, caption, label, overline
- [x] FE: Чёткое указание: где DINPro, где Fira Sans
- [x] FE: Живые примеры текста обоими шрифтами
### Задачи — оффлайн элементы (справочный раздел)
- [x] FE: Раздел «Оффлайн элементы» в навигации брендбука
- [x] FE: Страница «Форма сотрудников» — схема размещения логотипа, таблица размеров
- [x] FE: Страница «Бейджи» — размеры 70×30 мм, варианты (светлый/тёмный), состав текста
- [x] FE: Страница «Внутренняя навигация» — шаблоны табличек, материалы, цвета Oracal
- [x] FE: Страница «Брендирование транспорта» — макет трамвая, цветовая схема
- [x] FE: Страница «Печатные материалы» — листовки, визитки, Telegram-бот
### Фактические результаты
- Страница `/foundation/colors` — 7 цветов с HEX/RGB/HSL/CSS-var и копированием, WCAG-контраст 7 пар, экспорт JSON
- Страница `/foundation/typography` — DINPro (оффлайн) + Fira Sans (веб), таблица применения, полные шкалы, живой пример
- Страница `/offline/uniform` — реальные фото из PDF (беж + синий вариант), таблица размеров, правила
- Страница `/offline/badges` — реальные фото из PDF (лицевая + оборотная), состав текста, пример
- Страница `/offline/navigation` — макеты из PDF (Кабинет 04, карточка врача), фото дверей с номерами (13, 31), указатели по этажам
- Страница `/offline/transport` — макет трамвая из PDF (оба вида, реальный рендер), таблица зон, цвета Oracal
- Страница `/offline/print` — убрана из навигации (нет данных из брендбука)
- Sidebar: убраны «скоро» для Цветов, Типографики и всех страниц Оффлайн кроме Печати
- Версия обновлена до **Sprint 2 · v0.2.0**
- **Деплой на Vercel:** https://web-oclinica.vercel.app (production, бесплатно)
- **Тайтлы страниц:** единый формат «Раздел. Цифровой брендбук Клиники ухо, горло, нос им. проф. Е.Н.Оленевой»
### Технические решения Sprint 2
- Страница «Цвета» — `"use client"` для clipboard API и экспорта JSON
- WCAG relative luminance вычисляется на клиенте, без зависимостей
- DINPro отображается с фоллбэком Arial (лицензионный шрифт)
- Реальные фото и макеты из PDF: PyMuPDF (fitz) — извлечение растровых изображений и рендер векторных страниц
- Рендер PDF страниц: 2.5–3.0x масштаб → JPEG, кроп до нужной области через Pillow
### Ретроспектива Sprint 2 — LLM-контекст
- [x] Docs: Создан `docs/LLM_CONTEXT.md` — сводный файл дизайн-данных для LLM (v2.1)
- [x] TZ: Добавлено требование ФТ-03-LLM — LLM-блок на каждой странице брендбука
- [ ] FE: Добавить LLM-блоки на страницы Sprint 1–2 (логотип, цвета, типографика, оффлайн) — перенесено в Sprint 3
**Результат спринта:** Разделы «Цвета», «Типографика» и «Оффлайн элементы» полностью готовы с реальными материалами из брендбука.
---
## Sprint 3 — Базовые компоненты: кнопки и поля ввода ✅ ЗАВЕРШЁН
**Цель:** Все варианты кнопок и форм-контролов в брендбуке. LLM-блоки на страницах.
### Задачи — LLM-контекст
- [x] FE: Добавить LLM-блок на страницу «Логотип» (`/foundation/logo`) — v1.0
- [x] FE: Добавить LLM-блок на страницу «Цвета» (`/foundation/colors`) — v2.1
- [x] FE: Добавить LLM-блок на страницу «Типографика» (`/foundation/typography`) — v2.0
- [x] FE: Создать переиспользуемый компонент `components/llm/LlmBlock.tsx` (LlmBlock, LlmSection, LlmTable, LlmRules)
- [x] Docs: Обновить `docs/LLM_CONTEXT.md` по итогам спринта — версия 3.0
### Задачи — компоненты
- [x] FE: Компонент Button (`components/ui/Button.tsx`) — варианты primary/outline/teal/pill, размеры sm/md/lg, loading
- [x] FE: Компонент Input (`.bb-input`) — text, password, focus/error/disabled, height 50px как на сайте
- [x] FE: Компонент Textarea (`.bb-textarea`) — resize:vertical, min-height 100px
- [x] FE: Компонент Select (`.bb-select`) — height 50px, кастомная стрелка SVG
- [x] FE: Компонент Checkbox (`.bb-checkbox`) и Radio (`.bb-radio`)
- [x] FE: Компонент Toggle/Switch (`components/ui/Toggle.tsx`) — React "use client", defaultChecked/disabled/label
- [x] FE: Страница `/components/buttons` — 4 варианта по реальному сайту, размеры, состояния, «Где применяется», LLM-блок v2.0
- [x] FE: Страница `/components/forms` — все 6 контролов, контекст на сайте с макетом, LLM-блок v2.0
- [x] FE: Копирование HTML/CSS кода в один клик (`components/ui/CodeCopy.tsx`)
### Фактические результаты
- **4 варианта кнопок** — скопированы с реального сайта perm.oclinica.ru: primary(#FFA39C), outline(#BF9975), teal(#60959c), pill(#e9e4d4)
- **6 форм-контролов** — input/textarea/select/checkbox/radio/toggle с полной документацией состояний
- **Input/Select** — height 50px, border 1px solid #ccc, border-radius 4px (entityform CSS с реального сайта)
- **Макет формы** на фоне #b8e6ed как «Узнайте стоимость операции» на oclinica.ru/lor
- **LLM-блоки** добавлены на логотип, цвета, типографику, кнопки, форм-контролы
- **Компоненты:** Button.tsx, Toggle.tsx, CodeCopy.tsx в `components/ui/`
- **Sidebar:** Sprint 3 · v0.3.0, кнопки/формы убраны из «скоро»
- **Деплой:** https://web-oclinica.vercel.app (production)
**Результат спринта:** Раздел «Базовые компоненты» полностью готов. Стили соответствуют реальному сайту.
---
## Sprint 4 — Карточки (Cards) ✅ ЗАВЕРШЁН
**Цель:** Все типы карточек, используемых на сайте.
### Задачи
- [x] Docs: Обновить `docs/LLM_CONTEXT.md` → версия 4.0
- [x] FE: Добавить LLM-блок на страницу «Карточки» — v1.0
- [x] FE: Карточка врача (DoctorCard) — фото 110×160px, имя, специализация, стаж, кнопка outline
- [x] FE: Карточка услуги / заболевания (ServiceCard) — иконка + заголовок + описание
- [x] FE: Карточка новости — превью, дата, заголовок, анонс, hover #eef4d1 (CSS сайта)
- [x] FE: Карточка отзыва — рейтинг SVG-звёзды, 4-строчный clamp, фон #eef4d1
- [x] FE: Карточка цены — услуга + стоимость + highlighted-вариант
- [x] FE: Бейджи (6 вариантов), теги (default/active), алерты (info/success/warning/error)
- [x] FE: Страница `/components/cards` с документацией и LLM-блоком
### Фактические результаты
- **5 типов карточек:** DoctorCard, NewsCard, ReviewCard, PriceCard, ServiceCard
- **NewsCard hover** — bg `#eef4d1` + box-shadow `0 0 16px #9e9e9a` (1:1 с реальным CSS сайта)
- **ReviewCard** — фон `#eef4d1` из CSS сайта, WebkitLineClamp: 4
- **Бейджи** — 6 вариантов (primary/success/warning/danger/neutral/outline-blue)
- **Алерты** — info (#dff0fa), success (#d1fae5), warning (#fef3c7), error (#fee2e2)
- **Исправлены цвета Oracal** — точные RGB из каталога для всех 6 плёнок
- **Деплой:** https://web-oclinica.vercel.app (production)
**Результат спринта:** Все карточки задокументированы. Цвета Oracal исправлены по каталогу.
---
## Принцип документирования (Sprint 5+)
> **Правило:** Брендбук документирует только то, что реально существует на сайте `perm.oclinica.ru`.
> Никаких придуманных вариантов, никаких новых стилей. Процесс: сначала изучаем реальный сайт → потом воспроизводим в брендбуке.
---
## Sprint 5 — Шапка (Header) и навигация
**Цель:** Задокументировать реальную шапку сайта perm.oclinica.ru/lor как она есть.
### Задачи
- [ ] Research: Изучить реальную шапку сайта — скриншот, CSS, HTML
- [ ] FE: Страница `/components/navigation` — документация реальной навигации сайта
- Логотип в шапке (размер, положение)
- Главное меню: Клиника, ЛОР врачи, Заболевания, Вопрос-ответ, ЛОР операции, Сурдология, Цены, Контакты
- Телефоны в шапке
- Кнопки «Записаться на прием» и «Заказать звонок» (цвета, стили взятые из CSS)
- [ ] FE: Убрать `soon` у `/components/navigation` в Sidebar
- [ ] FE: Добавить LLM-блок v1.0
- [ ] Docs: Обновить `docs/LLM_CONTEXT.md` — секция Navigation
**Результат спринта:** Шапка и навигация задокументированы по реальному сайту.
---
## Sprint 6 — Hero-баннер и блок преимуществ
**Цель:** Задокументировать реальный баннер страницы /lor и блок преимуществ — ровно так, как они есть.
### Задачи
- [ ] Research: Скриншот + CSS баннера с perm.oclinica.ru/lor
- [ ] FE: Страница `/blocks/hero` — реальный баннер:
- Фото врача-хирурга на фоне #b8e6ed
- Заголовок: «ЭНДОСКОПИЧЕСКОЕ ХИРУРГИЧЕСКОЕ ЛЕЧЕНИЕ ЛОР ОРГАНОВ»
- 3 преимущества (безопасность, без внешних разрезов, скорость восстановления)
- Кнопка «Узнать стоимость операции» (primary #FFA39C)
- [ ] FE: Блок «Преимущества клиники» на той же странице:
- 4 иконки + текст: кандидаты наук, оборудование, династия врачей, количество пациентов
- [ ] FE: Добавить LLM-блок v1.0
- [ ] Docs: Обновить `docs/LLM_CONTEXT.md`
**Результат спринта:** Hero и блок преимуществ задокументированы по реальному сайту.
---
## Sprint 7 — Вводный текст (CEO-блок) и блок услуг
**Цель:** Задокументировать вводный текст от клиники и блок заболеваний/услуг.
### Задачи
- [ ] Research: Изучить вводный текст на /lor (секция после баннера) — структура, стили
- [ ] FE: Страница `/blocks/ceo` — вводный текст:
- Структура секции (заголовок, описание специализации, вопросы-стимулы)
- Типографика, цвета, отступы — взятые с реального сайта
- [ ] Research: Блок заболеваний / услуг — как выглядит список (иконки/текст/карточки?)
- [ ] FE: Блок «Услуги и заболевания» на странице `/blocks/services`
- [ ] FE: Добавить LLM-блоки v1.0
- [ ] Docs: Обновить `docs/LLM_CONTEXT.md`
**Результат спринта:** Вводный блок и услуги задокументированы по реальному сайту.
---
## Sprint 8 — Врачи: блок на главной + страница списка
**Цель:** Задокументировать все блоки, связанные с врачами, по реальному сайту /lor/doctors.
### Задачи
- [ ] Research: Изучить страницу perm.oclinica.ru/lor/doctors — CSS, HTML, скриншоты
- [ ] FE: Страница `/blocks/doctors` — блок «Наши врачи»:
- Сетка карточек врачей (реальная вёрстка с сайта)
- Фильтры: по адресу клиники, стоимости приёма, стажу, специализации
- Пагинация — если есть на сайте
- [ ] FE: Страница `/pages/doctors` — полная страница врачей как сборка блоков
- [ ] FE: Добавить LLM-блоки v1.0
- [ ] Docs: Обновить `docs/LLM_CONTEXT.md`
**Результат спринта:** Все компоненты страницы врачей задокументированы.
---
## Sprint 9 — Отзывы и новости
**Цель:** Задокументировать блоки отзывов и новостей — только то, что реально на сайте.
### Задачи
- [ ] Research: Изучить блок отзывов на /lor — реальная вёрстка (список? карусель? что именно?)
- [ ] Research: Изучить страницу /lor/news — структура списка новостей
- [ ] FE: Страница `/blocks/reviews` — блок отзывов как на сайте
- [ ] FE: Страница `/blocks/news` — блок новостей как на сайте (список с датами + пагинация)
- [ ] FE: Добавить LLM-блоки v1.0
- [ ] Docs: Обновить `docs/LLM_CONTEXT.md`
**Результат спринта:** Блоки отзывов и новостей задокументированы по реальному сайту.
---
## Sprint 10 — Формы записи и контакт
**Цель:** Задокументировать реальные формы и блок контактов.
### Задачи
- [ ] Research: Модальная форма записи на приём — реальная с сайта (структура, поля, стили)
- [ ] Research: Блок «Контакт» — адрес, телефоны, карта, часы работы
- [ ] FE: Страница `/blocks/contact-forms` — форма записи (реальная с сайта)
- [ ] FE: Страница `/blocks/contact` — блок контактной информации
- [ ] FE: Добавить LLM-блоки v1.0
- [ ] Docs: Обновить `docs/LLM_CONTEXT.md`
**Результат спринта:** Формы и контакт задокументированы по реальному сайту.
---
## Sprint 11 — Страницы: Заболевание + Главная (сборки)
**Цель:** Задокументировать полные страницы как сборки из задокументированных блоков.
### Задачи
- [ ] Research: Выбрать реальную страницу заболевания (напр. /lor/rinit) — изучить все её блоки
- [ ] FE: Страница `/pages/disease` — сборка блоков по реальной странице заболевания
- [ ] FE: Страница `/pages/home` — сборка блоков по главной странице /lor
- [ ] FE: Раздел «Страницы» в навигации — убрать soon
- [ ] Docs: Обновить `docs/LLM_CONTEXT.md`
**Результат спринта:** 2 реальные страницы задокументированы в брендбуке.
---
## Sprint 12 — Страницы: Цены + Контакты
**Цель:** Задокументировать страницы цен и контактов.
### Задачи
- [ ] Research: Реальная страница цен на сайте — структура, таблица, фильтры
- [ ] Research: Реальная страница контактов — карта, адреса, часы, схема проезда
- [ ] FE: Страница `/pages/prices` — по реальной странице цен
- [ ] FE: Страница `/pages/contacts` — по реальной странице контактов
- [ ] FE: Полный smoke-тест брендбука
- [ ] Docs: Финальное обновление `docs/LLM_CONTEXT.md`
### Текущий статус деплоя
- **Фронтенд:** https://web-oclinica.vercel.app (Vercel Hobby, задеплоен в Sprint 2)
- **Команда деплоя:** `cd apps/web && vercel --prod --yes`
- **Бэкенд:** локально (Docker Compose), хостинг выбирается позднее
**Результат спринта:** Брендбук полностью задокументирован по реальному сайту.
---
## Сводная таблица
| Спринт | Тема | Источник |
|--------|---------------------------------------|-----------------------------------------|
| 1 | Инициализация + Логотип | PDF брендбука |
| 2 | Цвета, Типографика, Оффлайн элементы | PDF брендбука + Oracal каталог |
| 3 | Кнопки и форм-контролы | CSS реального сайта perm.oclinica.ru |
| 4 | Карточки | CSS реального сайта perm.oclinica.ru |
| 5 | Шапка и навигация | Реальная шапка perm.oclinica.ru |
| 6 | Hero-баннер + Преимущества | Реальная страница /lor |
| 7 | Вводный текст + Услуги | Реальные блоки /lor |
| 8 | Врачи | Реальная страница /lor/doctors |
| 9 | Отзывы и Новости | Реальные блоки /lor + /lor/news |
| 10 | Формы записи + Контакт | Реальные формы и контакты с сайта |
| 11 | Страницы: Заболевание + Главная | Сборки по реальным страницам |
| 12 | Страницы: Цены + Контакты | Реальные страницы + финальный smoke |
---
## Backlog (вне основных спринтов)
- Раздел «Логотип»: активация кнопки скачивания SVG (после получения вектора)
- Экспериментальная секция — если потребуется CRUD API (NestJS + Prisma)
- Тёмная тема — только если появится на реальном сайте
- Мультиязычность — только если появится на реальном сайте
Reference in New Issue View Git Blame Copy Permalink