42point/dp-trade-UI-kit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

image localization

Browse Source
This commit is contained in:
Alexey S 2026-04-23 11:33:56 +03:00
parent 83ce3622a3
commit c40d310924
15 changed files with 68 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
.claude/settings.local.json
View File

@ -2,7 +2,13 @@
"permissions": { "permissions": {
"allow": [ "allow": [
"mcp__Claude_Preview__preview_start", "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}')"
] ]
} }
} }

2
.nova/Publishing/REG.RU hosting.json
View File

@ -1,7 +1,7 @@
{ {
"identifier" : "39856AD9-BD44-4500-B03F-EDFAE2A870CB", "identifier" : "39856AD9-BD44-4500-B03F-EDFAE2A870CB",
"localPath" : "_site", "localPath" : "_site",
"remotePath" : "\/www\/vodkainmyblood.com\/wine-proto", "remotePath" : "\/www\/wine-proto.vodkainmyblood.com",
"remoteURL" : "wine-proto.vodkainmyblood.com", "remoteURL" : "wine-proto.vodkainmyblood.com",
"server" : "REG.RU hosting", "server" : "REG.RU hosting",
"usesPublishing" : true "usesPublishing" : true

67
docs/design-audit-followup.md
View File

@ -9,6 +9,28 @@
Часть аудита уже не полностью совпадает с текущей реализацией: на главной CTA в hero присутствуют (`Смотреть каталог`, `Открыть UI-kit`), а заголовки в исходных HTML не набраны капсом руками. Но CSS принудительно включает uppercase и тяжелый вес, поэтому визуально замечание дизайнера остается актуальным. Часть аудита уже не полностью совпадает с текущей реализацией: на главной 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. Типографика ### 1. Типографика
@ -84,40 +106,40 @@
### Этап 1. Системные токены и базовая типографика ### Этап 1. Системные токены и базовая типографика
1. Обновить `src/css/tokens.css`: `--font-heading` на Cormorant Garamond, `--font-body` на Manrope, основной бордовый на `#7D021D`, фон на теплый `#FFFDFA`, surface/card background на теплую белую/кремовую шкалу. 1. [done] V2: обновить `src/css/tokens.css`: `--font-heading` на Cormorant Garamond, `--font-body` на Manrope, основной бордовый на `#7D021D`, фон на теплый `#FFFDFA`, surface/card background на теплую белую/кремовую шкалу.
2. Синхронизировать те же токены в `src/css/ui-kit.css`, чтобы витрина UI-kit не расходилась с сайтом. 2. [partial] Частично: синхронизировать те же токены в `src/css/ui-kit.css`, чтобы витрина UI-kit не расходилась с сайтом. V2-override работает, но базовый `ui-kit.css` остался на V1-токенах.
3. Убрать uppercase с H2-H4, product titles, news titles, page hero titles, form titles. Caps оставить только для eyebrow/meta labels. 3. [done] V2: убрать uppercase с H2-H4, product titles, news titles, page hero titles, form titles. Caps оставить только для eyebrow/meta labels.
4. Пересобрать шкалу весов: H1 может быть крупным, но не обязательно 800; H2-H4 сделать 500-600 или доступный локальный эквивалент с текущими файлами шрифтов. 4. [done] V2: пересобрать шкалу весов: H1 может быть крупным, но не обязательно 800; H2-H4 сделать 500-600 или доступный локальный эквивалент с текущими файлами шрифтов.
5. Проверить минимальные размеры: не использовать текст ниже 12px. 5. [done] V2: проверить минимальные размеры: не использовать текст ниже 12px.
### Этап 2. Карточки и CTA ### Этап 2. Карточки и CTA
1. Заменить градиентные product media на единый теплый нейтральный фон `#F5F0E8`. 1. [done] V2: заменить градиентные product media на единый теплый нейтральный фон `#F5F0E8`.
2. Перестроить карточку рекомендаций: region label, serif title 16-18px, gray meta 13px, разделитель, цена 22-24px, outlined full-width CTA. 2. [done] V2: перестроить карточку рекомендаций: region label, serif title 16-18px, gray meta 13px, разделитель, цена 22-24px, outlined full-width CTA.
3. Смягчить primary/secondary buttons: новый бордовый, меньше "B2B-тяжести", четкие hover/focus states. 3. [done] V2: смягчить primary/secondary buttons: новый бордовый, меньше "B2B-тяжести", четкие hover/focus states.
4. Проверить карточки каталога отдельно: сохранить плотность B2B-списка, но снизить вес заголовков и цены. 4. [partial] Частично: проверить карточки каталога отдельно: сохранить плотность B2B-списка, но снизить вес заголовков и цены.
### Этап 3. Header и mega-menu ### Этап 3. Header и mega-menu
1. Убрать синий цвет телефона в шапке, оставить синий только внутри логотипа. 1. [done] V2: убрать синий цвет телефона в шапке, оставить синий только внутри логотипа.
2. Уменьшить и облегчить заголовки mega-menu: 16-18px, normal case, semibold. 2. [done] V2: уменьшить и облегчить заголовки mega-menu: 16-18px, normal case, semibold.
3. Переделать визуальную колонку mega-menu: уменьшить изображение или вынести его в небольшой промо-блок. 3. [done] V2: переделать визуальную колонку mega-menu: уменьшить изображение или вынести его в небольшой промо-блок.
4. Настроить иерархию апелласьонов: страна как meta label, регионы с отступом и normal case. 4. [done] V2: настроить иерархию апелласьонов: страна как meta label, регионы с отступом и normal case.
5. Выровнять popular chips: единый min-width или одна строка с равномерным ритмом. 5. [done] V2: выровнять popular chips: единый min-width или одна строка с равномерным ритмом.
### Этап 4. Страницы ### Этап 4. Страницы
1. Главная: обновить hero-типографику, H2 секций, карточки рекомендаций и холодные фоны новостей. 1. [done] V2: главная - обновить hero-типографику, H2 секций, карточки рекомендаций и холодные фоны новостей.
2. Продукт: добавить breadcrumbs, расширенный description-блок с `max-width: 65-72ch`, пересобрать вертикальную иерархию metadata/price/CTA. 2. [partial] Частично: продукт - добавить breadcrumbs, расширенный description-блок с `max-width: 65-72ch`, пересобрать вертикальную иерархию metadata/price/CTA.
3. О нас: сделать hero спокойнее, смягчить правую карточку, сузить основной текст до 66ch, облегчить подзаголовки, убрать жесткую высоту feature-card, заменить холодный muted-section. 3. [partial] Частично: о нас - сделать hero спокойнее, смягчить правую карточку, сузить основной текст до 66ch, облегчить подзаголовки, убрать жесткую высоту feature-card, заменить холодный muted-section.
4. Контакты: сделать компактный hero без тяжелой фотографии, вывести телефон/email в первый экран, юридический текст перенести ниже, облегчить форму, разделить контактные поля или добавить подсказку, добавить success-state. 4. [partial] Частично: контакты - сделать компактный hero без тяжелой фотографии, вывести телефон/email в первый экран, юридический текст перенести ниже, облегчить форму, разделить контактные поля или добавить подсказку, добавить success-state.
### Этап 5. Проверка ### Этап 5. Проверка
1. Прогнать `npm run build`. 1. [todo] Прогнать `npm run build`.
2. Проверить страницы минимум на desktop и mobile: `index.html`, `catalog.html`, `product.html`, `about.html`, `contacts.html`, `ui-kit.html`. 2. [todo] Проверить страницы минимум на desktop и mobile: `index.html`, `catalog.html`, `product.html`, `about.html`, `contacts.html`, `ui-kit.html`.
3. Отдельно проверить, что длинные русские заголовки и телефоны не ломают сетку. 3. [todo] Отдельно проверить, что длинные русские заголовки и телефоны не ломают сетку.
4. Сверить UI-kit с сайтом: токены, кнопки, карточки, hero, формы. 4. [partial] Частично: сверить UI-kit с сайтом: токены, кнопки, карточки, hero, формы.
## Приоритет ## Приоритет
@ -128,4 +150,3 @@ P1: карточки товара, CTA, header/mega-menu. Это самые за
P2: страницы "О нас", "Контакты", "Продукт". Здесь много композиционных улучшений, но они лучше лягут после системной смены визуального языка. P2: страницы "О нас", "Контакты", "Продукт". Здесь много композиционных улучшений, но они лучше лягут после системной смены визуального языка.
P3: финальная полировка UI-kit, состояния формы, hover/focus, адаптивные проверки. P3: финальная полировка UI-kit, состояния формы, hover/focus, адаптивные проверки.

2
src/_includes/partials/footer.njk
View File

@ -3,7 +3,7 @@
<section class="footer-main"> <section class="footer-main">
<div class="footer-brand-block"> <div class="footer-brand-block">
<a class="footer-brand" href="index.html" aria-label="DP Trade"> <a class="footer-brand" href="index.html" aria-label="DP Trade">
<img src="https://wine-dp-trade.ru/wp-content/uploads/2024/11/logo-500x107.png" alt="DP Trade" width="156" height="33" /> <img src="assets/images/logo-dp-trade.png" alt="DP Trade" width="156" height="33" />
</a> </a>
<p class="footer-brand-subtitle">Территория качественного вина</p> <p class="footer-brand-subtitle">Территория качественного вина</p>
</div> </div>

14
src/_includes/partials/header.njk
View File

@ -1,7 +1,7 @@
<header class="site-header"> <header class="site-header">
<div class="container header-top"> <div class="container header-top">
<a class="brand-logo" href="index.html" aria-label="DP Trade"> <a class="brand-logo" href="index.html" aria-label="DP Trade">
<img src="https://wine-dp-trade.ru/wp-content/uploads/2024/11/logo-500x107.png" alt="DP Trade" width="156" height="33"> <img src="assets/images/logo-dp-trade.png" alt="DP Trade" width="156" height="33">
</a> </a>
<form class="search-bar" action="#" role="search"> <form class="search-bar" action="#" role="search">
@ -43,7 +43,7 @@
<div class="menu-grid"> <div class="menu-grid">
<article class="menu-column visual-column"> <article class="menu-column visual-column">
<img src="https://images.unsplash.com/photo-1506377247377-2a5b3b417ebb?auto=format&fit=crop&w=900&q=80" alt="Виноградник на холмах"> <img src="assets/images/vineyard-hills.jpg" alt="Виноградник на холмах">
<p>Выбирайте через знакомую страну или сразу через регион, если точно знаете, что ищете.</p> <p>Выбирайте через знакомую страну или сразу через регион, если точно знаете, что ищете.</p>
</article> </article>
@ -106,7 +106,7 @@
<div class="menu-grid"> <div class="menu-grid">
<article class="menu-column visual-column"> <article class="menu-column visual-column">
<img src="https://images.unsplash.com/photo-1510812431401-41d2bd2722f3?auto=format&fit=crop&w=900&q=80" alt="Бокалы вина"> <img src="assets/images/wine-glasses.jpg" alt="Бокалы вина">
<p>Начните с типа вина или сразу переходите к стилю, если знаете нужный профиль.</p> <p>Начните с типа вина или сразу переходите к стилю, если знаете нужный профиль.</p>
</article> </article>
@ -156,7 +156,7 @@
<div class="menu-grid"> <div class="menu-grid">
<article class="menu-column visual-column"> <article class="menu-column visual-column">
<img src="https://images.unsplash.com/photo-1527281400683-1aae777175f8?auto=format&fit=crop&w=900&q=80" alt="Крепкий алкоголь в бокале"> <img src="assets/images/spirits-glass.jpg" alt="Крепкий алкоголь в бокале">
<p>Категории, выдержка и происхождение для быстрой навигации по ассортименту.</p> <p>Категории, выдержка и происхождение для быстрой навигации по ассортименту.</p>
</article> </article>
@ -209,7 +209,7 @@
<div class="menu-grid"> <div class="menu-grid">
<article class="menu-column visual-column"> <article class="menu-column visual-column">
<img src="https://images.unsplash.com/photo-1568213816046-0ee1c42bd559?auto=format&fit=crop&w=900&q=80" alt="Винодельня и бочки"> <img src="assets/images/winery-barrels.jpg" alt="Винодельня и бочки">
<p>Откройте ассортимент через знакомые хозяйства, винные дома и регионы производства.</p> <p>Откройте ассортимент через знакомые хозяйства, винные дома и регионы производства.</p>
</article> </article>
@ -261,7 +261,7 @@
<div class="menu-grid"> <div class="menu-grid">
<article class="menu-column visual-column"> <article class="menu-column visual-column">
<img src="https://images.unsplash.com/photo-1568213816046-0ee1c42bd559?auto=format&fit=crop&w=900&q=80" alt="Винные бочки в погребе"> <img src="assets/images/winery-barrels.jpg" alt="Винные бочки в погребе">
<p>Команда DP Trade работает с вином как с живым продуктом — от поставки до клиента.</p> <p>Команда DP Trade работает с вином как с живым продуктом — от поставки до клиента.</p>
</article> </article>
@ -303,7 +303,7 @@
</div> </div>
<div class="menu-grid"> <div class="menu-grid">
<article class="menu-column visual-column"> <article class="menu-column visual-column">
<img src="https://images.unsplash.com/photo-1510812431401-41d2bd2722f3?auto=format&fit=crop&w=900&q=80" alt="Демонстрация винного каталога" /> <img src="assets/images/wine-glasses.jpg" alt="Демонстрация винного каталога" />
<p>Все демо-страницы собраны в одном месте для проверки header, footer, карточек и каталожных сценариев.</p> <p>Все демо-страницы собраны в одном месте для проверки header, footer, карточек и каталожных сценариев.</p>
</article> </article>
<article class="menu-column"> <article class="menu-column">

BIN
src/assets/images/hero-guidelines.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 450 KiB

BIN
src/assets/images/hero-main.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 459 KiB

BIN
src/assets/images/logo-dp-trade.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
src/assets/images/news-catena.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 76 KiB

BIN
src/assets/images/news-italy.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 121 KiB

BIN
src/assets/images/spirits-glass.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 177 KiB

BIN
src/assets/images/vineyard-hills.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 198 KiB

BIN
src/assets/images/wine-glasses.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 199 KiB

BIN
src/assets/images/winery-barrels.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 320 KiB

16
src/css/site.css
View File

@ -432,7 +432,7 @@ select {
padding: 104px 0 72px; padding: 104px 0 72px;
background: background:
linear-gradient(100deg, rgba(22, 20, 17, 0.84) 0%, rgba(22, 20, 17, 0.58) 38%, rgba(22, 20, 17, 0.12) 72%), linear-gradient(100deg, rgba(22, 20, 17, 0.84) 0%, rgba(22, 20, 17, 0.58) 38%, rgba(22, 20, 17, 0.12) 72%),
url("https://images.unsplash.com/photo-1560493676-04071c5f467b?auto=format&fit=crop&w=1800&q=80"); url("../assets/images/hero-main.jpg");
background-position: center right; background-position: center right;
background-size: cover; background-size: cover;
color: #f8fafc; color: #f8fafc;
@ -569,15 +569,15 @@ select {
} }
.news-card__image--catena { .news-card__image--catena {
background-image: linear-gradient(rgba(22, 22, 22, 0.1), rgba(22, 22, 22, 0.1)), url("https://images.unsplash.com/photo-1556760544-74068565f05c?auto=format&fit=crop&w=900&q=80"); background-image: linear-gradient(rgba(22, 22, 22, 0.1), rgba(22, 22, 22, 0.1)), url("../assets/images/news-catena.jpg");
} }
.news-card__image--brand { .news-card__image--brand {
background-image: linear-gradient(rgba(22, 22, 22, 0.1), rgba(22, 22, 22, 0.1)), url("https://images.unsplash.com/photo-1506377247377-2a5b3b417ebb?auto=format&fit=crop&w=900&q=80"); background-image: linear-gradient(rgba(22, 22, 22, 0.1), rgba(22, 22, 22, 0.1)), url("../assets/images/vineyard-hills.jpg");
} }
.news-card__image--italy { .news-card__image--italy {
background-image: linear-gradient(rgba(22, 22, 22, 0.1), rgba(22, 22, 22, 0.1)), url("https://images.unsplash.com/photo-1528823872057-9c018a7a7553?auto=format&fit=crop&w=900&q=80"); background-image: linear-gradient(rgba(22, 22, 22, 0.1), rgba(22, 22, 22, 0.1)), url("../assets/images/news-italy.jpg");
} }
.type-lab-section { .type-lab-section {
@ -1387,7 +1387,7 @@ select {
color: #f8fafc; color: #f8fafc;
background: background:
linear-gradient(100deg, rgba(22, 20, 17, 0.86), rgba(22, 20, 17, 0.48) 54%, rgba(22, 20, 17, 0.22)), linear-gradient(100deg, rgba(22, 20, 17, 0.86), rgba(22, 20, 17, 0.48) 54%, rgba(22, 20, 17, 0.22)),
url("https://images.unsplash.com/photo-1506377247377-2a5b3b417ebb?auto=format&fit=crop&w=1800&q=80"); url("../assets/images/vineyard-hills.jpg");
background-position: center; background-position: center;
background-size: cover; background-size: cover;
} }
@ -1395,19 +1395,19 @@ select {
.page-hero--about { .page-hero--about {
background-image: background-image:
linear-gradient(100deg, rgba(22, 20, 17, 0.84), rgba(22, 20, 17, 0.46) 54%, rgba(22, 20, 17, 0.18)), linear-gradient(100deg, rgba(22, 20, 17, 0.84), rgba(22, 20, 17, 0.46) 54%, rgba(22, 20, 17, 0.18)),
url("https://images.unsplash.com/photo-1568213816046-0ee1c42bd559?auto=format&fit=crop&w=1800&q=80"); url("../assets/images/winery-barrels.jpg");
} }
.page-hero--contacts { .page-hero--contacts {
background-image: background-image:
linear-gradient(100deg, rgba(22, 20, 17, 0.86), rgba(22, 20, 17, 0.5) 54%, rgba(22, 20, 17, 0.2)), linear-gradient(100deg, rgba(22, 20, 17, 0.86), rgba(22, 20, 17, 0.5) 54%, rgba(22, 20, 17, 0.2)),
url("https://images.unsplash.com/photo-1510812431401-41d2bd2722f3?auto=format&fit=crop&w=1800&q=80"); url("../assets/images/wine-glasses.jpg");
} }
.page-hero--guidelines { .page-hero--guidelines {
background-image: background-image:
linear-gradient(100deg, rgba(22, 20, 17, 0.86), rgba(22, 20, 17, 0.5) 54%, rgba(22, 20, 17, 0.22)), linear-gradient(100deg, rgba(22, 20, 17, 0.86), rgba(22, 20, 17, 0.5) 54%, rgba(22, 20, 17, 0.22)),
url("https://images.unsplash.com/photo-1516594798947-e65505dbb29d?auto=format&fit=crop&w=1800&q=80"); url("../assets/images/hero-guidelines.jpg");
} }
.page-hero__inner { .page-hero__inner {