# Handoff: РестоМесто — портал подбора ресторанов и бронирования

## Overview
Портал поиска ресторанов и онлайн-бронирования столов с двумя ролями: гость и ресторан.
В пакете 6 экранов: UI-kit, Главная с поиском, Каталог с фильтрами, Карточка ресторана
с формой брони, Личный кабинет гостя, Кабинет ресторана.

## About the Design Files
Файлы в этом пакете — **дизайн-референс, сделанный в HTML**. Это прототип, показывающий
задуманный вид и поведение, а не продакшн-код для копирования. Задача — **воспроизвести
эти экраны в целевой кодовой базе** (React / Vue / Next / нативное приложение) её
собственными паттернами, библиотеками компонентов и стилевым слоем. Если кодовой базы
ещё нет — выбрать подходящий фреймворк и реализовать дизайн в нём.

Прототип написан как один файл-компонент: разметка в теле документа, состояние — в классе
логики внизу файла. Разбиение на компоненты при переносе делайте по правилам своего проекта.

## Fidelity
**High-fidelity.** Цвета, типографика, отступы, радиусы и состояния финальные —
воспроизводить попиксельно. Исключение: фотографии заведений — плейсхолдеры
(полосатый паттерн + подпись моноширинным), их заменяют реальные фото.

## Design Tokens

### Цвет
| Токен | HEX | Применение |
|---|---|---|
| orange-500 | #FF5A1F | Основные действия, активные состояния, акценты |
| orange-600 | #E14A10 | Hover основной кнопки, ссылки, текст на светлом оранжевом |
| orange-700 | #C43D08 | Active основной кнопки |
| orange-100 | #FFE3D3 | Focus-ring (3 px), hover tonal-кнопки |
| orange-50 | #FFF0E8 | Tonal-кнопки, аватар, бейдж «осталось мало» |
| orange-bg | #FFF4EC | Фон героя, блок ответа заведения, подсказки |
| orange-line | #F5E2D5 | Граница блоков на оранжевом фоне |
| ink | #17130F | Основной текст, тёмные блоки, сайдбар кабинета |
| ink-800 | #221D18 | Карточка внутри тёмного сайдбара |
| ink-700 | #2A241E | Активный пункт тёмного меню, разделитель в футере |
| ink-70 | #4A423C | Текст в карточках, лейблы |
| ink-60 | #7A716A | Вторичный текст |
| ink-40 | #A9A099 | Подписи, мета, моно-подписи |
| ink-30 | #B3ABA4 | Плейсхолдеры, текст на тёмном фоне |
| ink-20 | #C6BFB8 | Занятые слоты, отключённые элементы |
| line | #ECE6E1 | Границы карточек |
| line-strong | #DCD5CE | Границы полей и вторичных кнопок |
| line-soft | #F0EBE6 | Внутренние разделители строк |
| surface | #FFFFFF | Карточки, поля |
| canvas | #FAF8F6 | Фон страницы |
| muted-surface | #F5F1ED | Теги, нейтральные бейджи |
| success | #14804A | Текст «есть места», «подтверждено» |
| success-bg | #E7F4EC | Фон успешных бейджей |
| danger | #D93A2B | Ошибки, отменённая бронь |
| danger-bg | #FDECEA | Фон бейджа отмены |

Правило: оранжевый только для действий и активных состояний. Не более двух фоновых
цветов на экран (canvas + orange-bg или ink).

### Типографика
Golos Text (400/500/600/700/800) — интерфейс; JetBrains Mono (400/500) — цифры,
слоты времени, служебные метки. Обе с Google Fonts, подключены сабсеты Cyrillic.

| Роль | Размер / вес | Трекинг |
|---|---|---|
| H1 hero | 52 / 800 | -0.035em, line-height 1.05 |
| H1 экрана | 34–38 / 800 | -0.03em |
| H2 секции | 28 / 700 | -0.02em |
| H2 в кабинете | 30 / 800 | -0.03em |
| H3 карточки | 17–20 / 700 | нормальный |
| Body | 15–16 / 400 | line-height 1.55–1.6 |
| Caption | 13 / 400–500 | — |
| Label формы | 12–13 / 600 | — |
| Mono метка | 10–11 / 500 | 0.12–0.16em, uppercase |
| Mono цифры | 13–30 / 400–500 | — |

### Сетка и размеры
- Контейнер 1200 px, поля 24 px, 12 колонок, gap 24 px, шаг сетки 4 px.
- Радиусы: 6–8 (мелкие бейджи/слоты), 9–10 (кнопки, поля), 12 (крупные кнопки, табы), 14 (карточки), 99 (пилюли, аватары).
- Высоты контролов: поле/селект 44–48 px, кнопка S 36 / M 44 / L 52 px. Тап-таргет не менее 44 px.
- Тени: карточка поиска `0 8px 30px rgba(23,19,15,.06)`, hover карточки `0 6px 22px rgba(23,19,15,.07)`, активный таб `0 1px 3px rgba(23,19,15,.12)`. Больше теней в системе нет — глубина задаётся границами.

## Логотип
Знак: скруглённый квадрат 30×30 (radius 9) цвета #FF5A1F; внутри белый круг r=6 в точке (18,15)
и белый прямоугольник 3×16 (radius 1.5) в точке (7,7) — тарелка и прибор. На тёмном фоне
вырезы красятся в цвет подложки (#17130F).
Леттеринг: «Ресто» ink + «Место» orange-500, вес 800, трекинг −0.02em. Минимальная ширина
леттеринга 120 px. Размеры знака: 32 / 26 / 24 / 16 px.

## Screens / Views

### 1. UI-kit
**Назначение:** справочник системы для дизайнеров и разработчиков.
**Раскладка:** контейнер 1200, каждая секция — грид `200px 1fr`, gap 40; заголовок секции
sticky (top 110), 15/700, uppercase, letter-spacing .1em, цвет ink-40.
**Секции:** Логотип (3 варианта), Палитра (карточки-свотчи 150 px минимум, высота плашки 72),
Типографика (строки «моно-подпись + образец»), Сетка (12 плашек 64 px в orange-50 + правила),
Кнопки (primary во всех состояниях, secondary, tonal, ghost, размеры, иконочная 44×44),
Поля (обычное, focus, error, select, disabled, чекбокс, радио), Чипы/статусы/слоты,
Карточки (заведение, бронь, тост, пустое состояние), Иконки 9 штук в линейном стиле stroke 1.5.

### 2. Главная
**Герой:** фон orange-bg, граница снизу orange-line, паддинг 72/24/56.
H1 52 px, подзаголовок 18 px ink-60, максимальная ширина 560.
**Форма поиска:** белая карточка radius 16, граница orange-line, паддинг 18, тень героя.
Грид `2fr 1fr 1fr .8fr auto` (поле «Что ищем», Дата, Время, Гостей, кнопка «Найти» 48 px).
Ниже — чекбокс «Только со свободными столами» и справка «Москва · 128 заведений принимают брони».
**«Свободно сегодня вечером»:** заголовок 28/700 + ссылка «Весь каталог →»;
подпись «Слоты подтверждены заведениями 10 минут назад»; грид `auto-fill, minmax(280px, 1fr)`, gap 20.
Карточка: фото 160 px (плейсхолдер), кнопка избранного 36 px в правом верхнем углу
(белая на 92% прозрачности, сердце ink-30 → orange-500), название 17/700 + рейтинг моно
со звездой orange, мета, число отзывов, три слота времени, кнопка «Забронировать» 44 px во всю ширину.
**«Куда пойти»:** 4 карточки подборок (moно-счётчик, 18/700 заголовок, пояснение).
**Города и Кухни:** два столбца пилюль (высота 38, radius 99, счётчик моно ink-40).

### 3. Каталог
Хлебные крошки 13 px ink-40 → H1 «Рестораны Москвы» → строка результата.
Грид `260px 1fr`, gap 28.
**Фильтры (sticky, top 110):** «Свободно» — пилюли-переключатели; «Кухня» — чекбоксы
со счётчиками справа; «Средний чек» — сегмент из трёх ₽; «Район» — селект;
ссылка «Сбросить фильтры» orange-600.
**Список:** строка активных чипов + селект сортировки; карточка выдачи — грид
`200px 1fr 220px`, gap 18, паддинг 14: фото, блок с названием/рейтингом/статусом/описанием/тегами,
правая колонка со слотами и кнопкой (отделена границей слева line-soft, отступ 18).
Пагинация: квадраты 40×40, активный — ink, остальные с границей.

### 4. Карточка ресторана
Грид `1fr 380px`, gap 32.
**Галерея:** `2fr 1fr` × 2 ряда по 130 px, gap 10; на третьем изображении бейдж «Ещё 14».
**Шапка:** H1 38/800, рейтинг-бейдж (тёмный, звезда orange), «214 отзывов · Русская · ₽₽₽»,
бейдж «Открыто до 00:00»; справа кнопка избранного (переключается tonal ↔ secondary).
**Инфо-блок:** карточка 2×2 — адрес с иконкой, часы работы, телефон, ссылка на сайт.
**О заведении:** абзац 16 px, line-height 1.6, макс. 680 px + теги-удобства.
**Отзывы:** карточка с аватаром-инициалами 36 px, именем, датой, оценкой моно справа,
текстом и, если есть, блоком «Ответ заведения» на orange-bg.
**Панель брони (sticky, top 110):**
- Плашка доступности на orange-bg: «Осталось мало мест» orange-600, «Проверено 10 минут назад».
- Форма: Дата + Гостей (грид 1×2), сетка слотов 4 колонки (свободный — граница line-strong;
  выбранный — заливка orange-500, белый текст; занятый — line, ink-20, зачёркнут, cursor not-allowed),
  Имя, Телефон, Пожелания (textarea 72 px), чекбокс согласия со ссылками,
  кнопка 52 px «Забронировать на 19:00» (подпись включает выбранный слот),
  сноска про SMS и бесплатную отмену за 2 часа.

### 5. Кабинет гостя
Контейнер 1000 px. H1 «Гость Яндекс» + строка телефон/город/«с нами с марта 2026».
Табы — сегмент-контрол на подложке #F0EBE6, паддинг 5, radius 12; активный таб белый
с тенью. Порядок: Профиль, Бронирования, Отзывы, Избранное (по умолчанию — Бронирования).
- **Бронирования:** карточка `1fr auto`: название, бейдж статуса (Подтверждено / Визит состоялся /
  Отменена), номер брони моно, дата-время, число гостей, адрес; справа контекстные действия
  (Изменить/Отменить, Оставить отзыв/Повторить, Забронировать снова).
- **Профиль:** карточка идентичности (аватар 56 px, бейдж «Телефон подтверждён», «Привязано: Яндекс»)
  и форма «Данные» в две колонки (Имя, Телефон, Email с подсказкой, Город с подсказкой),
  чекбокс рассылки, кнопка «Сохранить», ссылка «Выйти из аккаунта».
- **Отзывы:** свои отзывы с действиями «Редактировать»/«Удалить» + напоминание о визите без отзыва.
- **Избранное:** карточки `auto-fill, minmax(280px, 1fr)` с кнопкой «Забронировать снова» (tonal).

### 6. Кабинет ресторана
Грид `240px 1fr`, минимальная высота экрана.
**Сайдбар ink:** логотип на тёмном, карточка заведения на ink-800, меню
(Брони — бейдж 6, Отзывы — бейдж 3, Карточка и меню, Фото, Статистика);
активный пункт — ink-700, белый текст; внизу примечание о модерации до 24 часов.
- **Брони:** список строк `70px 1fr 150px auto` — время моно 17 px, гость + статус + номер,
  гости и стол, пожелание orange-600, источник, кнопки «Подтвердить» / «Стол».
- **Отзывы:** три KPI-карточки (4.8 / 92% / 4 ч), список отзывов; у отвеченных — блок
  «Ваш ответ» на orange-bg, у неотвеченных — инлайн-поле ответа с кнопкой «Отправить».
- **Карточка и меню:** форма (Название, Кухня, Описание до 600 символов, Средний чек, Телефон);
  блок «Фотографии» — сетка 150 px, обложка помечена бейджем «Главное», плитка загрузки
  пунктиром, требования JPG/PNG от 1200 px, до 5 МБ; блок «Меню» — строки
  `1fr 120px 100px 90px` с состояниями «В меню» / «Стоп-лист» / «На модерации»;
  внизу «Отправить на модерацию», «Сохранить черновик», отметка о времени сохранения.
- **Статистика:** 4 KPI-карточки и столбчатая диаграмма по дням недели
  (пиковые дни orange-500, остальные orange-100).

## Interactions & Behavior
- Верхняя тёмная панель со списком экранов — служебная навигация прототипа. **В продакшн не переносится**, её заменяет реальный роутинг.
- Переходы: карточка/фото/кнопка «Забронировать» → карточка ресторана; логотип → главная; «Найти» и «Весь каталог» → каталог; ссылка в футере «Кабинет ресторана» → кабинет; аватар в шапке → кабинет гостя. При переходе — скролл наверх.
- Избранное: сердце на карточке и кнопка на странице заведения переключают одно состояние; кнопка на карточке не должна поднимать клик до самой карточки (stopPropagation).
- Слот времени: выбирается один; занятые не кликаются; подпись кнопки брони содержит выбранное время.
- Фильтры каталога: пилюли времени и чекбоксы кухни — независимые переключатели, отражаются в строке активных чипов; «Сбросить фильтры» очищает оба набора. Фактическая фильтрация выдачи в прототипе не реализована — на бэке фильтровать по этим параметрам.
- Табы кабинета гостя и меню кабинета ресторана переключают панели внутри страницы; «Фото» ведёт на ту же панель, что «Карточка и меню».
- Состояния: hover primary → orange-600; hover secondary → граница ink; hover карточки → граница line-strong + тень; focus поля → граница orange-500 + ring 3 px orange-100; disabled — #F0EBE6 / ink-30.
- Пустое состояние отзывов: «Отзывов пока нет. Забронируйте стол — после визита сможете оставить первый.»
- Анимации в прототипе не используются: только мгновенные состояния. При переносе допустимы переходы 120–160 мс ease-out на цвет и границу.

## Responsive
Дизайн десктопный с адаптивом. Брейкпоинты:
- **≤1080:** карточка ресторана в одну колонку, панель брони перестаёт быть sticky; карточка выдачи → `160px 1fr`, колонка слотов уходит на всю ширину под контент.
- **≤900:** каталог и кабинет ресторана в одну колонку (сайдбары превращаются в горизонтальные блоки), форма поиска в 2 колонки, футер в 2 колонки, секции UI-kit в одну колонку.
- **≤680:** все перечисленные гриды в одну колонку, галерея заведения — одно фото 180 px, служебные колонки в таблицах броней и меню скрываются.

## State Management
Состояние прототипа:
- `screen` — активный экран (служебное, заменяется роутером).
- `slot` — выбранное время брони.
- `guestTab` — вкладка кабинета гостя (profile/bookings/reviews/fav).
- `cab` — раздел кабинета ресторана (bookings/reviews/card/stats).
- `fav` — карта «название заведения → в избранном».
- `timeF`, `cuisineF` — выбранные фильтры каталога.

Данные, которые понадобятся с бэка: список заведений (название, кухня, адрес, чек, рейтинг,
число отзывов, теги, фото, свободные слоты на дату), карточка заведения (описание, часы,
контакты, залы, столы), слоты по дате и числу гостей, брони гостя, брони заведения на дату,
отзывы с ответами, меню, агрегированная статистика.

## Assets
Собственных изображений нет. Фото заведений — плейсхолдеры
(`repeating-linear-gradient(135deg, #F3EEE9 0 10px, #EDE7E1 10px 20px)` + моно-подпись),
заменяются реальными фото. Иконки — инлайновые SVG (поиск, адрес, время, дата, гость,
рейтинг, фильтры, готово, далее), stroke 1.5, размер 18–22; при переносе допустимо взять
эквиваленты из иконочного набора проекта. Шрифты — Google Fonts (Golos Text, JetBrains Mono).

## Files
- `Ресто Место.dc.html` — все шесть экранов и вся логика состояния.
- `support.js` — рантайм прототипа, в продакшн не переносится.