From c40d31092445aec98286ee376b13192732c560ad Mon Sep 17 00:00:00 2001 From: Alexey S Date: Thu, 23 Apr 2026 11:33:56 +0300 Subject: [PATCH] image localization --- .claude/settings.local.json | 8 ++- .nova/Publishing/REG.RU hosting.json | 2 +- docs/design-audit-followup.md | 67 +++++++++++++++++--------- src/_includes/partials/footer.njk | 2 +- src/_includes/partials/header.njk | 14 +++--- src/assets/images/hero-guidelines.jpg | Bin 0 -> 460731 bytes src/assets/images/hero-main.jpg | Bin 0 -> 470285 bytes src/assets/images/logo-dp-trade.png | Bin 0 -> 14678 bytes src/assets/images/news-catena.jpg | Bin 0 -> 77850 bytes src/assets/images/news-italy.jpg | Bin 0 -> 124097 bytes src/assets/images/spirits-glass.jpg | Bin 0 -> 181532 bytes src/assets/images/vineyard-hills.jpg | Bin 0 -> 202914 bytes src/assets/images/wine-glasses.jpg | Bin 0 -> 204234 bytes src/assets/images/winery-barrels.jpg | Bin 0 -> 327501 bytes src/css/site.css | 16 +++--- 15 files changed, 68 insertions(+), 41 deletions(-) create mode 100644 src/assets/images/hero-guidelines.jpg create mode 100644 src/assets/images/hero-main.jpg create mode 100644 src/assets/images/logo-dp-trade.png create mode 100644 src/assets/images/news-catena.jpg create mode 100644 src/assets/images/news-italy.jpg create mode 100644 src/assets/images/spirits-glass.jpg create mode 100644 src/assets/images/vineyard-hills.jpg create mode 100644 src/assets/images/wine-glasses.jpg create mode 100644 src/assets/images/winery-barrels.jpg diff --git a/.claude/settings.local.json b/.claude/settings.local.json index 761cdaf..3654033 100644 --- a/.claude/settings.local.json +++ b/.claude/settings.local.json @@ -2,7 +2,13 @@ "permissions": { "allow": [ "mcp__Claude_Preview__preview_start", - "Bash(npm run *)" + "Bash(npm run *)", + "Bash(curl -sLo logo-dp-trade.png \"https://wine-dp-trade.ru/wp-content/uploads/2024/11/logo-500x107.png\")", + "Bash(curl -sLo hero-main.jpg \"https://images.unsplash.com/photo-1560493676-04071c5f467b?auto=format&fit=crop&w=1800&q=82\")", + "Bash(curl -sLo vineyard-hills.jpg \"https://images.unsplash.com/photo-1506377247377-2a5b3b417ebb?auto=format&fit=crop&w=1800&q=82\")", + "Bash(curl -sLo news-catena.jpg \"https://images.unsplash.com/photo-1556760544-74068565f05c?auto=format&fit=crop&w=900&q=80\")", + "Bash(curl -sLo news-italy.jpg \"https://images.unsplash.com/photo-1528823872057-9c018a7a7553?auto=format&fit=crop&w=900&q=80\")", + "Bash(awk '{print $5, $9}')" ] } } diff --git a/.nova/Publishing/REG.RU hosting.json b/.nova/Publishing/REG.RU hosting.json index baaa5ad..93164a7 100644 --- a/.nova/Publishing/REG.RU hosting.json +++ b/.nova/Publishing/REG.RU hosting.json @@ -1,7 +1,7 @@ { "identifier" : "39856AD9-BD44-4500-B03F-EDFAE2A870CB", "localPath" : "_site", - "remotePath" : "\/www\/vodkainmyblood.com\/wine-proto", + "remotePath" : "\/www\/wine-proto.vodkainmyblood.com", "remoteURL" : "wine-proto.vodkainmyblood.com", "server" : "REG.RU hosting", "usesPublishing" : true diff --git a/docs/design-audit-followup.md b/docs/design-audit-followup.md index 63a9cc9..33c60e6 100644 --- a/docs/design-audit-followup.md +++ b/docs/design-audit-followup.md @@ -9,6 +9,28 @@ Часть аудита уже не полностью совпадает с текущей реализацией: на главной CTA в hero присутствуют (`Смотреть каталог`, `Открыть UI-kit`), а заголовки в исходных HTML не набраны капсом руками. Но CSS принудительно включает uppercase и тяжелый вес, поэтому визуально замечание дизайнера остается актуальным. +## Статус проверки кода - 2026-04-23 + +Важно: исправления внедрены как переключаемая версия V2, а не как замена V1. В `src/_includes/layouts/base.njk` подключен `css/v2.css`, `src/js/design-switcher.js` переключает `data-design-version="v1|v2"` через `localStorage`, а переключатели есть в header и UI-kit. По умолчанию без сохраненного выбора открывается V1, поэтому статусы ниже означают "исправлено в V2". + +| Блок | Статус | Что найдено в коде | +| --- | --- | --- | +| Механика V2 | [done] исправлено | Добавлены `src/css/v2.css`, `src/js/design-switcher.js`, переключатели V1/V2 в `src/_includes/partials/header.njk` и `src/ui-kit.njk`. | +| Системные токены | [done] исправлено в V2 | В `src/css/tokens.css` для `:root[data-design-version="v2"]` заданы `#7D021D`, `#FFFDFA`, `#F5F0E8`, Cormorant Garamond и Manrope. | +| UI-kit токены | [partial] частично | `src/css/ui-kit.css` все еще содержит старые V1-токены, но V2-override подключается после него через `src/css/v2.css`. Для полной чистоты можно синхронизировать сам `ui-kit.css`. | +| Типографика и uppercase | [done] исправлено в V2 | `src/css/v2.css` снимает uppercase с H1-H4, hero, карточек, page hero, формы и снижает веса заголовков. Caps оставлен для meta/eyebrow. | +| Минимальный размер 8px | [done] исправлено в V2 | `.brand-logo small` поднят до 12px в `src/css/v2.css`. | +| Палитра и синий телефон | [done] исправлено в V2 | В V2 синий акцент заменен на бордовый, `.phone-link` стал бордовым и легче по весу. | +| Холодные фоны | [partial] частично | Главные конфликтные фоны (`news-section`, `muted-section`, contacts hero) переведены в теплую гамму в V2. В V1 и отдельных старых CSS-участках холодные цвета остаются. | +| Карточки товара | [done] исправлено в V2 | Градиенты `.product-media*` заменены на `#F5F0E8`, название стало serif/normal case, footer перестроен вертикально, CTA стал outlined/full-width. | +| Карточки каталога | [partial] частично | Заголовки списка облегчены и переведены в serif/normal case. Цена и плотная B2B-композиция в основном сохранены. | +| Mega-menu | [done] исправлено в V2 | Заголовки снижены до 18px/normal case, изображения уменьшены, страны/апелласьоны разведены по иерархии, popular chips получили единый min-width. | +| Главная | [done] исправлено в V2 | Hero H1 и H2 секций переведены в Cormorant/normal case, карточки рекомендаций и фон новостей обновлены. CTA уже был. | +| Страница продукта | [partial] частично | Добавлены V2-only breadcrumbs, H1 облегчен, описание ограничено `66ch`. Расширенного описания пока нет, и вертикальную композицию метаданных/CTA стоит еще проверить визуально. | +| "О нас" | [partial] частично | H1, article width, H2, feature-card, blockquote и muted-section исправлены в V2. Hero все еще использует темную фотографию и правую meta-карточку, хотя карточка стала мягче. | +| "Контакты" | [partial] частично | Hero без фото, телефон уменьшен, форма облегчена, поле контакта разделяется JS на телефон/email, success-state добавлен. Юридический блок только опущен в конец левой колонки, но не вынесен ниже формы/в конец страницы. | +| Проверка сборки | [todo] не проверено | После этой сверки build еще не запускался. | + ## Ключевые замечания ### 1. Типографика @@ -84,40 +106,40 @@ ### Этап 1. Системные токены и базовая типографика -1. Обновить `src/css/tokens.css`: `--font-heading` на Cormorant Garamond, `--font-body` на Manrope, основной бордовый на `#7D021D`, фон на теплый `#FFFDFA`, surface/card background на теплую белую/кремовую шкалу. -2. Синхронизировать те же токены в `src/css/ui-kit.css`, чтобы витрина UI-kit не расходилась с сайтом. -3. Убрать uppercase с H2-H4, product titles, news titles, page hero titles, form titles. Caps оставить только для eyebrow/meta labels. -4. Пересобрать шкалу весов: H1 может быть крупным, но не обязательно 800; H2-H4 сделать 500-600 или доступный локальный эквивалент с текущими файлами шрифтов. -5. Проверить минимальные размеры: не использовать текст ниже 12px. +1. [done] V2: обновить `src/css/tokens.css`: `--font-heading` на Cormorant Garamond, `--font-body` на Manrope, основной бордовый на `#7D021D`, фон на теплый `#FFFDFA`, surface/card background на теплую белую/кремовую шкалу. +2. [partial] Частично: синхронизировать те же токены в `src/css/ui-kit.css`, чтобы витрина UI-kit не расходилась с сайтом. V2-override работает, но базовый `ui-kit.css` остался на V1-токенах. +3. [done] V2: убрать uppercase с H2-H4, product titles, news titles, page hero titles, form titles. Caps оставить только для eyebrow/meta labels. +4. [done] V2: пересобрать шкалу весов: H1 может быть крупным, но не обязательно 800; H2-H4 сделать 500-600 или доступный локальный эквивалент с текущими файлами шрифтов. +5. [done] V2: проверить минимальные размеры: не использовать текст ниже 12px. ### Этап 2. Карточки и CTA -1. Заменить градиентные product media на единый теплый нейтральный фон `#F5F0E8`. -2. Перестроить карточку рекомендаций: region label, serif title 16-18px, gray meta 13px, разделитель, цена 22-24px, outlined full-width CTA. -3. Смягчить primary/secondary buttons: новый бордовый, меньше "B2B-тяжести", четкие hover/focus states. -4. Проверить карточки каталога отдельно: сохранить плотность B2B-списка, но снизить вес заголовков и цены. +1. [done] V2: заменить градиентные product media на единый теплый нейтральный фон `#F5F0E8`. +2. [done] V2: перестроить карточку рекомендаций: region label, serif title 16-18px, gray meta 13px, разделитель, цена 22-24px, outlined full-width CTA. +3. [done] V2: смягчить primary/secondary buttons: новый бордовый, меньше "B2B-тяжести", четкие hover/focus states. +4. [partial] Частично: проверить карточки каталога отдельно: сохранить плотность B2B-списка, но снизить вес заголовков и цены. ### Этап 3. Header и mega-menu -1. Убрать синий цвет телефона в шапке, оставить синий только внутри логотипа. -2. Уменьшить и облегчить заголовки mega-menu: 16-18px, normal case, semibold. -3. Переделать визуальную колонку mega-menu: уменьшить изображение или вынести его в небольшой промо-блок. -4. Настроить иерархию апелласьонов: страна как meta label, регионы с отступом и normal case. -5. Выровнять popular chips: единый min-width или одна строка с равномерным ритмом. +1. [done] V2: убрать синий цвет телефона в шапке, оставить синий только внутри логотипа. +2. [done] V2: уменьшить и облегчить заголовки mega-menu: 16-18px, normal case, semibold. +3. [done] V2: переделать визуальную колонку mega-menu: уменьшить изображение или вынести его в небольшой промо-блок. +4. [done] V2: настроить иерархию апелласьонов: страна как meta label, регионы с отступом и normal case. +5. [done] V2: выровнять popular chips: единый min-width или одна строка с равномерным ритмом. ### Этап 4. Страницы -1. Главная: обновить hero-типографику, H2 секций, карточки рекомендаций и холодные фоны новостей. -2. Продукт: добавить breadcrumbs, расширенный description-блок с `max-width: 65-72ch`, пересобрать вертикальную иерархию metadata/price/CTA. -3. О нас: сделать hero спокойнее, смягчить правую карточку, сузить основной текст до 66ch, облегчить подзаголовки, убрать жесткую высоту feature-card, заменить холодный muted-section. -4. Контакты: сделать компактный hero без тяжелой фотографии, вывести телефон/email в первый экран, юридический текст перенести ниже, облегчить форму, разделить контактные поля или добавить подсказку, добавить success-state. +1. [done] V2: главная - обновить hero-типографику, H2 секций, карточки рекомендаций и холодные фоны новостей. +2. [partial] Частично: продукт - добавить breadcrumbs, расширенный description-блок с `max-width: 65-72ch`, пересобрать вертикальную иерархию metadata/price/CTA. +3. [partial] Частично: о нас - сделать hero спокойнее, смягчить правую карточку, сузить основной текст до 66ch, облегчить подзаголовки, убрать жесткую высоту feature-card, заменить холодный muted-section. +4. [partial] Частично: контакты - сделать компактный hero без тяжелой фотографии, вывести телефон/email в первый экран, юридический текст перенести ниже, облегчить форму, разделить контактные поля или добавить подсказку, добавить success-state. ### Этап 5. Проверка -1. Прогнать `npm run build`. -2. Проверить страницы минимум на desktop и mobile: `index.html`, `catalog.html`, `product.html`, `about.html`, `contacts.html`, `ui-kit.html`. -3. Отдельно проверить, что длинные русские заголовки и телефоны не ломают сетку. -4. Сверить UI-kit с сайтом: токены, кнопки, карточки, hero, формы. +1. [todo] Прогнать `npm run build`. +2. [todo] Проверить страницы минимум на desktop и mobile: `index.html`, `catalog.html`, `product.html`, `about.html`, `contacts.html`, `ui-kit.html`. +3. [todo] Отдельно проверить, что длинные русские заголовки и телефоны не ломают сетку. +4. [partial] Частично: сверить UI-kit с сайтом: токены, кнопки, карточки, hero, формы. ## Приоритет @@ -128,4 +150,3 @@ P1: карточки товара, CTA, header/mega-menu. Это самые за P2: страницы "О нас", "Контакты", "Продукт". Здесь много композиционных улучшений, но они лучше лягут после системной смены визуального языка. P3: финальная полировка UI-kit, состояния формы, hover/focus, адаптивные проверки. - diff --git a/src/_includes/partials/footer.njk b/src/_includes/partials/footer.njk index 8a8251d..cca061a 100644 --- a/src/_includes/partials/footer.njk +++ b/src/_includes/partials/footer.njk @@ -3,7 +3,7 @@
- DP Trade + DP Trade

Территория качественного вина

diff --git a/src/_includes/partials/header.njk b/src/_includes/partials/header.njk index f794af8..3595ac0 100644 --- a/src/_includes/partials/header.njk +++ b/src/_includes/partials/header.njk @@ -1,7 +1,7 @@