# True Cost — комплект для разработки

Доработаны 28 экранов из исходного архива и отдельный каталог Flower Home. Визуальная основа сохранена: глубокий изумрудный фон, тёплое золото, спокойная подача. Заголовки — Cormorant Garamond, интерфейс — Inter. Все изображения, шрифты и знаки сервисов лежат локально.

## Открыть дизайн

- `../index.html` — все 28 экранов, выбор отдельного экрана, прокрутка содержимого телефонов, переходы по нижней навигации, переключение трёх фотографий White Velvet.
- `../assets.html` — визуальный каталог ассетов с загрузкой оригиналов.
- Оба файла открываются напрямую в браузере. Интернет и установка зависимостей не нужны.
- При необходимости сервер: `python3 true-cost/scripts/serve.py`, затем `http://localhost:4173`.

Это комплект дизайна и просмотрщик. Оформление заказа, авторизация и оплата представлены визуальными состояниями; реальные запросы не выполняются.

## Структура

| Путь | Назначение |
| --- | --- |
| `assets/products/` | Шесть отдельных букетов и два дополнительных кадра White Velvet |
| `assets/addons/` | Открытка, ваза, шоколад, свеча, премиальная упаковка |
| `assets/editorial/` | Флористическая мастерская и букет в интерьере |
| `assets/icons/` | 22 отдельных SVG, 24 × 24, stroke 1.5, currentColor |
| `assets/states/` | Знак активной подписки: календарь с цветком и галочкой, SVG 112 × 112 |
| `assets/brand/` | Монограмма True Cost, официальная графика Apple и Google |
| `assets/fonts/` | Локальные TTF: Inter 400/500/600/700, Cormorant Garamond 600; лицензии OFL |
| `assets/manifest.json` | ID, размеры, формат, пути, контрольные суммы, точки фокуса |
| `handoff/products.json`, `products.ts` | Шесть продуктов, цены в евроцентах, фотографии и галереи |
| `handoff/design-data.json` | Демоданные всех экранов |
| `handoff/tokens.json` | Цвета, типографика, размеры, отступы, радиусы |
| `handoff/generation.json` | Промпты для повторения художественного направления |
| `theme.css` | Подключённые шрифты и общие стили |
| `*.dc.html`, `TabBar.dc.html`, `ios-frame.jsx`, `support.js` | Отредактированные исходники Design Canvas и исходная оболочка |

Пути в JSON/TypeScript указаны относительно корня `true-cost`. При переносе в веб-проект положите `assets/` в публичный каталог. Для React Native используйте статические `require()`; для iOS перенесите PNG в Asset Catalog и зарегистрируйте шрифты. Нельзя передавать динамическую строку `require(product.image)` в Metro.

## Изображения

15 PNG-оригиналов без пережатия и без встроенных интерфейсных надписей. Палитра, свет, камера и подача продуктов выдержаны в одной серии. Каталог — 3:4, `object-fit: cover`; миниатюры — квадратный контейнер с тем же файлом. Координаты фокуса приведены в manifest. Для финальной доставки по сети можно создавать WebP/AVIF и миниатюры, сохраняя эти PNG как мастер-файлы.

White Velvet имеет три настоящих кадра: общий вид, детали лепестков, боковой ракурс. У остальных пяти букетов по одному основному изображению; интерфейс галереи в коде должен строиться по длине `gallery`, без фиктивных точек. Галерейные изображения не следует смешивать между разными товарами.

Фотографии сгенерированы для дизайна. Названия, состав и цены — демонстрационные данные исходного макета; точный коммерческий состав и количество стеблей необходимо связать с реальным ассортиментом при реализации.

## Состояния и исправления

- Фотографии подключены в каталоге, деталях, сводке, трекинге, списке заказов и истории подписок.
- Дополнения получили отдельные фото и заметное выбранное состояние открытки.
- Apple / Google имеют логотипы (вход по телефону из дизайна убран); Apple Pay и сохранённая карта получили визуальные знаки.
- Добавлены иконки профиля, пустого списка заказов и ошибки оплаты. Каталог обозначен букетом, подписки — повторением.
- Шаги разового заказа согласованы: получатель → адрес → дата → дополнения → сводка, всего пять.
- Демозаказ: White Velvet 169 € + открытка 9 € + доставка 15 € = 193 €. Упаковка 12 € остаётся отдельным невыбранным дополнением.
- Календарь соответствует сентябрю 2026: 1 сентября — вторник, 14 — понедельник, ближайшая пятница — 18 сентября.
- В профиле указаны три сохранённых адреса, как в списке адресов.
- Схематическая заглушка карты заменена карточкой адреса. При реализации географической карты используйте MapKit/провайдера карты с настоящими координатами; вымышленная география в ассеты не включена.
- Скелетоны сохранены только как осмысленные состояния загрузки и затемнённый фон модальных окон.

## Перенос компонентов

Для iOS следует использовать нативные safe areas, Dynamic Type, системный статус-бар, реальные текстовые поля и переключатели. Рамка телефона в просмотрщике — презентационная оболочка. Размер дизайна 402 × 874; касания в приложении — минимум 44 × 44 pt. Маленькие видимые glyph не определяют размер touch target.

Для Apple используйте `ASAuthorizationAppleIDButton`, для Apple Pay — системную платёжную кнопку. Для Google используйте официальный SDK и поддерживаемый им вариант кнопки. SVG/PNG в этом комплекте нужны для макетов и автономного просмотра, они не заменяют OAuth/платёжную интеграцию. У официального Google SVG есть сложные фильтры; для сред без их поддержки предоставлен официальный PNG @4x.

## Источники и права

- Google: [Branding guidelines](https://developers.google.com/identity/branding-guidelines), [официальный пакет кнопок](https://developers.google.com/static/identity/images/signin-assets.zip). Графика Google сохранена в исходных цветах; в интерфейсе обрезаны только внешние поля кнопки вокруг G.
- Apple: [Sign in with Apple](https://developer.apple.com/design/human-interface-guidelines/sign-in-with-apple), графика извлечена из [официального ресурса Apple](https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js), без изменения контура.
- Шрифты: Google Fonts; лицензии SIL Open Font License приложены к TTF.
- Монограмма True Cost и линейные иконки созданы для этого проекта. Знаки сторонних сервисов принадлежат соответствующим владельцам.

## Пересборка просмотрщика

Редактируйте `True Cost Screens.dc.html` и `theme.css`. Затем выполните:

```sh
python3 true-cost/scripts/build-preview.py
python3 true-cost/scripts/package-assets.py
python3 true-cost/scripts/build-readme.py
```

Для пересборки нужны Node.js, Python, BeautifulSoup, Pillow и markdown-it-py. Для просмотра уже собранного комплекта они не требуются. `preview.js` отвечает только за навигацию просмотрщика и галерею.