# teeu — Инвентаризация дизайна ## Источник Действующий макет — **редизайн 2026**, `tmp/design/redesign-2026/` (папка вне git, не удалять): | Файл | Назначение | |---|---| | `README.md` | Спецификация: токены, компоненты, взаимодействия | | `Teeu Redesign.dc.html` | Десктоп: главная, мега-меню, каталог, товар, продавец, корзина, кабинет покупателя, справка | | `Teeu Mobile.dc.html` | Мобильная версия (390px) | | `ProductCard.dc.html` | Карточка товара — единственный общий компонент | | `UI Kit.dc.html` | Логотип, палитры, типографика, кнопки, поля, бейджи, шапка, сетка | | `assets/teeu-logo.png` | Логотип без полей → `public/images/teeu-wordmark.webp` (шапка, подвал) | | `screenshots/` | Эталонные скриншоты экранов | Файлы `.dc.html` — HTML-прототипы с инлайн-стилями: значения в них точные, разметку переносим в Blade, а не копируем. Прежний макет (`Teeu Marketplace Kit.dc.html`, Manrope, `#1877FF`) лежит там же в `tmp/design/` и больше не действует. Цель редизайна — уйти от «шаблонного» вида к плотному торговому стилю (как Ozon/Avito): жёсткая иерархия с ценой как главным элементом, **хайрлайны вместо мягких теней**. ## Токены (`@theme` в `resources/css/app.css`) | Токен | Hex | Назначение | |---|---|---| | `primary` | `#1E4FD8` | Кнопки, ссылки, акценты | | `primary-dark` | `#1740B0` | hover основных кнопок | | `primary-soft` / `-soft-hover` | `#EDF2FE` / `#DCE6FD` | Вторичные кнопки («В корзину» в карточке), активные пункты навигации | | `dark` | `#14151A` | Подвал, тёмные плашки | | `ink` | `#16181D` | Заголовки, цены | | `slate` | `#3A3F4A` | Основной текст | | `secondary` | `#5A5F6A` | Вторичный текст | | `muted` | `#8A8F98` | Подписи | | `disabled` | `#9AA0AB` | Зачёркнутая цена, неактивное | | `line` / `line-strong` | `#E7E9EE` / `#C6CCDA` | Хайрлайн / бордер при наведении | | `divider` | `#F0F1F5` | Разделители внутри панелей | | `canvas` / `hover` | `#F6F7F9` / `#F2F4F8` | Фон секций / фон при наведении | | `sale` / `sale-soft` | `#E5322D` / `#FDECEC` | Скидка, ошибка | | `success` / `success-soft` | `#1D7A44` / `#E5F5EB` | Наличие, успех | | `warning` / `warning-soft` | `#B4682B` / `#FFF1E3` | Предупреждение | | `rating` | `#F5A623` | Звезда рейтинга | Фон страницы — белый; `canvas` — только для секций и полос. Кабинет продавца (`layouts.merchant`) сам ставит себе `canvas`. **Шрифт:** Golos Text 400–800 (кириллица), самохостится через `bunny()` в `vite.config.js`. JetBrains Mono — для номеров заказов и технических меток. **Шкала:** H1 страницы 26/800/−0.5 (на телефоне 22); H2 секции 22/800/−0.4; заголовок товара 21/700/−0.3; цена крупная 28/800/−0.6; цена в карточке 17/800/−0.2; body 13.5/400/lh 1.55; название в карточке 13px, максимум 2 строки; подписи 12px `muted`. **Радиусы:** `sm` 6 — бейджи · `md` 8 — кнопки, поля, карточки · `lg`/`xl` 12 — панели и баннеры · 20px — чипы-пилюли. **Тени:** по умолчанию — только бордер. `--shadow-card` нарочно равен кольцу в 1px цвета `line`: старые блоки `shadow-[var(--shadow-card)]` без переделки становятся рамкой. Настоящие тени: `--shadow-hover` (карточка при наведении), `--shadow-sticky` (липкие панели), `--shadow-frame` (выпадашки), `--shadow-modal`. `--shadow-primary` обнулён — цветного свечения у кнопок больше нет. **Сетка:** контейнер 1320px, поля 24px (`px-4 sm:px-6`), gap 12px; товары — 6 колонок на всю ширину, 4 рядом с боковой колонкой, 2 на телефоне. ## Компоненты - **Кнопки:** primary — `primary`, белый текст, 40px (44–46 для главного действия), r8, без тени; secondary — белая с бордером `primary` или заливка `primary-soft`; нейтральная — бордер `line`; disabled — `opacity .45`. - **Поля:** 40px, бордер 1px `line`, focus — `primary`. Поиск — бордер 1.5px `primary` + приклеенная кнопка «Найти». Чекбоксы 16px, `accent-color: primary`. Степпер количества 30×32 в рамке r8. - **Бейджи:** скидка — `sale`, белый, 11.5/700, r6; статусы — тинт + цвет текста; счётчики в шапке 15px (синий у корзины, красный у уведомлений); чипы — пилюля r20 с бордером `line`. - **Карточка товара** (`components/product-card`): бордер `line`, r8, фото 1:1 (`object-contain` — фото из чужих фидов любой ориентации); цена первой → название 2 строки → ★ рейтинг продавца + продавец → «В корзину» во всю ширину, прижата к низу. Звезды нет, пока у продавца нет отзывов. - **Шапка:** 62px + ряд категорий 38px (одна строка, обрезка затуханием справа), липкая, с хайрлайном. - **Пагинация** (`vendor/pagination/tailwind`): «Показано с N по M из K» + квадраты 32px. ## Статус переноса Сделано: токены и шрифт, шапка и мега-меню, подвал, карточка товара, пагинация, страница категории (левая колонка «Категории» + фильтры по UI-kit, сортировка и выбранные фильтры чипами), корзина с оформлением (две колонки, липкий итог справа), окошко «Товар добавлен в корзину» (ПК), страница товара. **Страница товара:** три колонки — галерея · название, первые 8 характеристик и описание (длинное сворачивается) · липкая панель покупки и карточка продавца. Раскладка — через `grid-template-areas`: на телефоне порядок «фото → название → покупка → подробности», на ПК — три колонки. Полный список характеристик, если их больше 8, — отдельным блоком `#specs` ниже; строки характеристик — `product/partials/characteristics`. Звезда и «N отзывов» — рейтинг продавца, показываются только при отзывах. Блоки «Другие товары продавца» / «Похожие» — по 12 товаров (ровно два ряда при 2/3/4/6 колонках). **Главная:** hero 2:1 (слайдер баннеров из панели или синий запасной) + две плитки «Товар дня» и «Продавцам» (на телефоне — в ряд), полоса преимуществ одной рамкой с разделителями, категории, «Акции дня» лентой — на ПК ровно 6 карточек в ширину, бейдж «до −N%» по максимальной скидке, магазины, тёмная плашка, «Рекомендации» в 6 колонок (порция ленты 24 — целые ряды). **Витрина продавца:** шапка-панель (логотип, «★ рейтинг · N отзывов · на teeu с ГГГГ · заказ от», контакты пилюлями, «Написать продавцу» справа), «О продавце», товары с колонкой «Категории» магазина (220px, та же панель, что в каталоге) и сетка 4 колонки, отзывы карточками. Без отзывов — «Отзывов пока нет» вместо звезды «0.0». **Кабинет покупателя:** боковое меню 240px с иконками 16px — в макете их нет, но без них список читался хуже, владелец попросил вернуть (активный — тинтом, счётчики синими кружками), обзор с тремя плитками, строка заказа — общий `account/orders/partials/row`, значок статуса — `` с тоном из `OrderStatus::tone()` / `PaymentStatus::tone()`. Заказ: степпер (``: пройденные — синие с галочкой, текущий — синий, будущие — белые с рамкой), панели товаров/оплаты/доставки. Уведомления — одним списком в общей рамке; у каждого типа своя иконка, цвет и подпись (карта `$kinds` в шаблоне, неизвестный тип — колокольчик). Чат — пузыри «срезанным» углом: свои синие справа, чужие белые слева. **Справочный центр:** главная — разделы карточками в две колонки (первые 6 статей ссылками, «Все статьи (N)»); раздел и статья — панель навигации 250px (липкая) и колонка текста до 720px. Текст — ``: по умолчанию 14/1.65 и H2 17px, как статья в макете (справка, интеграции, правовые страницы); `size="lg"` — 15px для длинного чтения в блоге. **Мобильная версия:** строка поиска под шапкой видна всегда (шрифт поля 16px — иначе iOS увеличивает страницу при фокусе); ящик каталога 330px — «Все категории» и аккордеон корней с разделителями, подкатегории по тапу на стрелку; нижнее меню — активная вкладка подсвечена целиком, «Каталог» подсвечивается и пока открыт ящик, повторное нажатие его закрывает. Все экраны макета перенесены. Не входили в макет и остались в прежней раскладке (с новыми токенами): кабинет продавца, `/sell`, блог, интеграции, партнёры, «Отследить заказ», страницы подвала. ## Решения по адаптации - Макет — SPA-прототип; у нас Blade SSR + Alpine, поэтому «мгновенные переходы» остаются обычными переходами по ссылкам. - Иконки — Lucide (``), совпадают по стилю с line-иконками макета. - Тексты-заглушки макета («Поддержка 24/7», «Без комиссии», «120 000 товаров») не переносим: тексты главной редактируются в панели, а обещания должны быть правдой. - Страницы категории и оформления заказа в макете не нарисованы — собраны из UI-kit: панель «Категории» со страницы продавца, фильтры в той же панели, итог — по панели корзины. - Кабинет продавца и админка в редизайн не входят. Кабинет продавца сохраняет тёмный сайдбар (ТЗ §3.3 — визуально отличается от покупательской части), но получает новые токены. ## Правила, выведенные из живого использования Не из макета — из того, что оказалось неудобным на реальных данных. **Карты не крадут прокрутку.** Колесо мыши над картой прокручивает страницу; масштаб — только с Ctrl, о чём написано прямо на карте. Иначе курсор случайно проезжает по карте, и вместо прокрутки едет зум — страница будто залипает. Щипок на тачпаде продолжает работать: браузер шлёт этот жест как колесо с `ctrlKey`. Карты компактные, с кнопкой «Развернуть»; после разворота обязателен `invalidateSize()` — Leaflet считает размеры контейнера при создании, и половина карты осталась бы серой. **Сообщение об успехе печатает только макет.** `layouts.account` и `layouts.merchant` выводят `session('status')` сами; вид, который делает то же самое, выдаёт его вторым. Это трудно заметить — оба сообщения выглядят правильно, просто их два. На это есть статический тест (`FlashMessageTest`), который падает с именем файла-нарушителя. **Длинные значения не обрезаются по одной строке.** Путь категории («Автотовары → Авто/мото запчасти → Электродвигатель…») обрезался ровно на последнем звене — том, которое и отличает одну строку от другой. Показываем до трёх строк (`line-clamp-3`), полный текст — в `title`. **Цвет обязан быть подписан.** Бейдж, который что-то означает (стадия магазина, статус фида), получает `tooltip` с расшифровкой: цвет без подписи читается как украшение. **`match` по перечислению в UI — источник падений.** Забытая ветка роняет всю страницу, и увидеть это можно только наткнувшись на редкое значение. Цвет/подпись держим методом на самом перечислении (`FeedStatus::color()`), а не `match` в таблице Filament.