7.9 KiB
UI parity: EventHubFront ↔ CalenTIQ board
План визуального выравнивания клиентского фронта с утверждённым бордом.
SoT: boards/calentiq-ui-board-final.png.
Эпик: EventHubSpec#10.
Статус: workstreams 1–5 закрыты в коде Front (Refs Front#25–#29). Stage smoke — после batch push/deploy.
Known deviations from board (Front#29)
Зафиксировано осознанно / пока не делаем:
| Зона | Борд | Сейчас |
|---|---|---|
| Pixel-perfect calendar | denser board mock chrome | mood-токены + soft panels; не копия Figma 1:1 |
| Discover cards | иногда с фото/рейтинг-блоками как на макете | soft cards + CTA + rating; без фото-hero |
| CONTROL booking §E | отдельные mock-карточки «слот/специалист» | те же сущности в EventActionCard / specialists / bookings list |
| Favicon set | 3 отдельных favicon файла на борде | mood appicon через applyMood |
| Stage | полный smoke на stage | после batch push + deploy образа (локально — mock smoke) |
| Домены calentiq.* | — | DNS не куплен (B1 checklist) |
IA без sidebar / без Creator mood — совпадает с non-goals.
Mood concept = product surface
Mood — не переименование calm|energetic|business и не смена primary hex.
Каждый mood — отдельная атмосфера продукта при той же IA:
| Mood | Ощущение | Chrome / surfaces | Discover / booking feel |
|---|---|---|---|
FLOW (calm) |
спокойствие, баланс | soft sage panels, light wash, soft chips | мягкие карточки, спокойный CTA |
MOMENTUM (energetic) |
энергия, скорость | ink #111820, coral #FF6A3D, denser chips |
тёмный discover, яркий CTA |
CONTROL (business) |
бизнес, доступность | steel #324A5F, cool neutrals |
коммерческие карточки слот/специалист/CTA |
Референс на борде: секции B Mood Overview, C Mood Switcher, D Core Screens, NEW Discover, E Booking / Commercial.
Switcher — branded cards (иконка + короткий tagline), не plain list/tabs:
- FLOW — Find balance
- MOMENTUM — Get more done
- CONTROL — Grow the business
Опционально: mood-aware favicon из boards/calentiq-icon-system-final.png / mood-icons/.
Токены сейчас узкие (tokens/colors.json); для parity нужны surfaces, gradients, chip/event styles, chrome — не только primary.
Workstreams (mood-first)
Порядок важен: сначала атмосфера и токены, затем экраны поверх них.
1. Mood system / atmosphere — P0 / first ✅
CSS-токены и chrome на mood beyond primary hex: surfaces, gradients, event chip styles; switcher как branded cards (icon + tagline); опционально mood favicon.
Acceptance
- Per-mood token set: surface / wash / chip / border / CTA (не только primary)
- Mood switcher = 3 branded cards с иконкой и tagline с борда
- Смена mood меняет атмосферу chrome (не только accent button)
- API keys остаются
calm|energetic|business - Опционально: favicon следует активному mood
Design: board §B, §C, §F; mood-icons/; tokens/
Done: EventHubFront#25 — index.css mood tokens + MoodSwitcher cards + favicon via applyMood.
2. Calendar mood-chrome — P0 ✅
Та же сетка/IA; soft panels (FLOW), denser chips (MOMENTUM), mood-tinted cells (CONTROL) — как на борде §B / §D Calendar.
Acceptance
- Month/week выглядят различно по mood при той же навигации
- Event chips / cells тонированы mood-токенами
- Нет sidebar / смены layout ради «красоты»
Design: board §B Mood Overview, §D Calendar
Done: EventHubFront#26 — --cal-* tokens + .eh-cal / .eh-chip в CalendarWidget; IA без изменений.
3. Discover mood variants — P1 ✅
Визуальная дифференциация FLOW vs MOMENTUM vs CONTROL: soft cards + CTA; соответствие борду (NEW Discover / §D Discover), не as-is скринам.
Acceptance
- Discover в трёх moods визуально различим (фон, карточки, CTA)
- Soft card + CTA pattern с борда (не плоский as-is list-only)
- IA и фильтры без смены модели; только presentation
Design: board NEW Discover, §D Discover; as-is refs: eventhub-discover-{flow,momentum,control}.png
Done: EventHubFront#27 — --disc-* + .eh-discover-card / .eh-discover-cta; list → card grid.
4. CONTROL booking surfaces — P1 ✅
Коммерческие карточки: слот, специалист, CTA — только Control-specific (§E).
Acceptance
- Slot card + specialist card + primary CTA в CONTROL
- Specialists остаются внутри Control (не 4-й mood)
- FLOW/MOMENTUM не получают Control commercial chrome
Design: board §E Booking / Commercial
Done: EventHubFront#28 — .eh-book-slot / .eh-book-specialist / .eh-book-request; steel chrome только под data-mood=business.
5. Polish + stage smoke — P2 ✅
Мелкие расхождения с бордом, wordmark/lockup consistency, stage smoke трёх moods.
Acceptance
- Mock smoke: calendar → discover → bookings в 3 moods (+ IA без sidebar)
- Нет регрессий IA (top + bottom nav) — покрыто mock e2e
- Известные отклонения от борда зафиксированы в UI-PARITY (Known deviations)
- Stage smoke на живом стенде — после batch push/deploy
Done: EventHubFront#29 — e2e/tests/mood-parity-smoke.spec.ts, brand meta, CONTROL tagline polish.
Non-goals
- Left sidebar / смена IA
- 4-й Creator mood / AI-assistant home
- Rename API keys (
calm|energetic|businessостаются) - Покупка доменов / DNS cutover
- Админский UI (
design/admin/) — не трогать Front-бордами - Полный pixel-perfect каждого пикселя борда (направление + mood atmosphere)
Mapping → issues
| # | Workstream | Issue |
|---|---|---|
| — | Story (родитель) | Spec#11 |
| 1 | Mood system / atmosphere | Front#25 |
| 2 | Calendar mood-chrome | Front#26 |
| 3 | Discover mood variants | Front#27 |
| 4 | CONTROL booking surfaces | Front#28 |
| 5 | Polish + stage smoke | Front#29 |
Эпик: Spec#10.
Suggested start
Кодить с Task 1 (Mood system / atmosphere): без токенов и switcher-as-cards остальные экраны будут «перекраской primary», а не mood product surface.