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, официальный пакет кнопок. Графика Google сохранена в исходных цветах; в интерфейсе обрезаны только внешние поля кнопки вокруг G.
Apple: Sign in with Apple, графика извлечена из официального ресурса Apple, без изменения контура.
Шрифты: Google Fonts; лицензии SIL Open Font License приложены к TTF.
Монограмма True Cost и линейные иконки созданы для этого проекта. Знаки сторонних сервисов принадлежат соответствующим владельцам.

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

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

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 отвечает только за навигацию просмотрщика и галерею.