From 7c6409974c215a3cf86f27ce40153c105e5962e5 Mon Sep 17 00:00:00 2001 From: Alexey S Date: Fri, 17 Apr 2026 16:02:22 +0300 Subject: [PATCH] Consolidate DP Trade into one HTML/CSS project --- .gitignore | 4 + README.md | 40 ++ catalog.html | 50 +++ components/footer.html | 69 ++++ components/menu.html | 86 +++++ css/site.css | 719 ++++++++++++++++++++++++++++++++++ css/tokens.css | 31 ++ css/ui-kit.css | 850 +++++++++++++++++++++++++++++++++++++++++ index.html | 121 ++++++ product.html | 35 ++ ui-kit.html | 374 ++++++++++++++++++ 11 files changed, 2379 insertions(+) create mode 100644 .gitignore create mode 100644 README.md create mode 100644 catalog.html create mode 100644 components/footer.html create mode 100644 components/menu.html create mode 100644 css/site.css create mode 100644 css/tokens.css create mode 100644 css/ui-kit.css create mode 100644 index.html create mode 100644 product.html create mode 100644 ui-kit.html diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..6a73c02 --- /dev/null +++ b/.gitignore @@ -0,0 +1,4 @@ +.DS_Store +node_modules/ +dist/ +.env diff --git a/README.md b/README.md new file mode 100644 index 0000000..62e99b1 --- /dev/null +++ b/README.md @@ -0,0 +1,40 @@ +# DP Trade — Site UI Kit + +Единый HTML/CSS проект для сайта и дизайн-системы DP Trade. + +## Структура + +- `index.html` — главная страница с меню, hero, карточками и футером. +- `catalog.html` — пример страницы каталога. +- `product.html` — пример страницы продукта. +- `ui-kit.html` — живая витрина дизайн-системы. +- `css/tokens.css` — дизайн-токены: цвета, шрифты, отступы, радиусы, тени. +- `css/site.css` — общие стили сайта: header, menu, footer, cards, layouts. +- `css/ui-kit.css` — стили страницы UI-kit. +- `components/menu.html` — HTML-фрагмент меню. +- `components/footer.html` — HTML-фрагмент футера. +- `assets/images` и `assets/icons` — место для локальных изображений и иконок. + +## Правило организации + +В проекте должен быть один Git-репозиторий на уровне этой папки. Отдельные компоненты сайта живут внутри `components/`, а не как самостоятельные соседние проекты. + +## Naming + +Для дизайн-системы используется формат: + +```txt +[Category] / [Type] / [Variant] / [State] +``` + +Примеры: + +```txt +Button / Primary / Default +Card / Product / Hover +Nav / Header / Desktop +``` + +## Как смотреть + +Открой `index.html` или `ui-kit.html` напрямую в браузере. Сервер для текущей версии не нужен. diff --git a/catalog.html b/catalog.html new file mode 100644 index 0000000..76ec0cf --- /dev/null +++ b/catalog.html @@ -0,0 +1,50 @@ + + + + + + DP Trade — Catalog + + + + + + +
+
+
+

Catalog

+

Каталог вина

+
+
+ +
+
+
+
Bordeaux

Chateau Laroque Grand Cru

France · Red dry · 2019

+
3 890 ₽Подробнее
+
+
+
+
Tuscany

Brunello di Montalcino

Italy · Red dry · 2018

+
4 240 ₽Подробнее
+
+ +
+
+
+
+ + diff --git a/components/footer.html b/components/footer.html new file mode 100644 index 0000000..99dbb3b --- /dev/null +++ b/components/footer.html @@ -0,0 +1,69 @@ + diff --git a/components/menu.html b/components/menu.html new file mode 100644 index 0000000..a5500c2 --- /dev/null +++ b/components/menu.html @@ -0,0 +1,86 @@ +
+
+ + + + + +7 (495) 937-94-60 +
+ + +
diff --git a/css/site.css b/css/site.css new file mode 100644 index 0000000..0ea63eb --- /dev/null +++ b/css/site.css @@ -0,0 +1,719 @@ +@import url("tokens.css"); + +* { + box-sizing: border-box; +} + +html { + scroll-behavior: smooth; +} + +body { + margin: 0; + background: var(--color-background-base); + color: var(--color-neutral-black); + font-family: var(--font-body); + font-size: 16px; + line-height: 1.5; +} + +img { + display: block; + max-width: 100%; +} + +a { + color: inherit; + text-decoration: none; +} + +button, +input, +select { + font: inherit; +} + +.site-shell { + min-height: 100vh; + display: flex; + flex-direction: column; +} + +.container { + width: min(100% - 40px, var(--container)); + margin: 0 auto; +} + +.site-header { + position: sticky; + top: 0; + z-index: 20; + background: rgba(255, 253, 249, 0.94); + border-bottom: 1px solid rgba(102, 96, 95, 0.18); + backdrop-filter: blur(16px); +} + +.header-top { + display: grid; + grid-template-columns: 210px minmax(260px, 1fr) auto; + align-items: center; + gap: 28px; + min-height: 86px; +} + +.brand-logo { + position: relative; + display: inline-block; + width: fit-content; + color: var(--color-accent-blue); + font-size: 30px; + font-style: italic; + font-weight: 900; + letter-spacing: 0; + line-height: 0.8; +} + +.brand-logo span:first-child { + color: var(--color-primary-wine-80); +} + +.brand-logo small { + position: absolute; + left: 70px; + top: 27px; + color: var(--color-primary-wine-80); + font-size: 8px; + font-style: italic; + font-weight: 700; + white-space: nowrap; +} + +.search-bar { + display: grid; + grid-template-columns: 50px minmax(0, 1fr); + align-items: center; + min-height: 52px; + border: 1px solid rgba(102, 96, 95, 0.24); + border-radius: 999px; + background: var(--color-surface); +} + +.search-bar:focus-within { + border-color: var(--color-primary-wine-100); + box-shadow: 0 0 0 4px rgba(75, 15, 36, 0.08); +} + +.search-bar button { + width: 50px; + height: 50px; + border: 0; + background: transparent; + color: var(--color-primary-wine-100); + cursor: pointer; +} + +.search-bar input { + min-width: 0; + border: 0; + outline: 0; + color: var(--color-neutral-black); +} + +.phone-link { + color: var(--color-accent-blue); + font-size: 18px; + font-weight: 700; + white-space: nowrap; +} + +.main-nav { + display: flex; + align-items: center; + justify-content: center; + gap: 42px; + min-height: 68px; + overflow-x: auto; +} + +.main-nav > a, +.nav-trigger { + display: inline-flex; + align-items: center; + gap: 7px; + min-height: 40px; + border: 0; + border-bottom: 2px solid transparent; + background: transparent; + color: var(--color-neutral-gray-700); + font-size: 14px; + font-weight: 700; + letter-spacing: 0; + text-transform: uppercase; + cursor: pointer; + white-space: nowrap; +} + +.main-nav > a:hover, +.nav-item:hover .nav-trigger, +.nav-item:focus-within .nav-trigger { + border-bottom-color: var(--color-primary-wine-100); + color: var(--color-primary-wine-100); +} + +.nav-item { + position: static; +} + +.mega-menu { + position: absolute; + left: 50%; + top: 154px; + width: min(1180px, calc(100vw - 40px)); + max-height: calc(100vh - 172px); + overflow: auto; + padding: 28px; + border: 1px solid rgba(102, 96, 95, 0.18); + background: #fffdfa; + box-shadow: var(--shadow-lift); + transform: translateX(-50%); + display: none; +} + +.nav-item:hover .mega-menu, +.nav-item:focus-within .mega-menu { + display: block; +} + +.mega-intro { + display: grid; + grid-template-columns: minmax(220px, 0.55fr) minmax(320px, 1fr); + gap: 18px 34px; + align-items: end; + padding-bottom: 22px; + border-bottom: 1px solid rgba(102, 96, 95, 0.18); +} + +.eyebrow, +.section-title, +.muted-caps { + margin: 0; + color: var(--color-accent-gold); + font-size: 12px; + font-weight: 800; + letter-spacing: 0; + text-transform: uppercase; +} + +.mega-intro h2, +.section-heading h2, +.hero h1, +.product-card h3 { + margin: 0; + font-family: var(--font-heading); + line-height: 1.12; +} + +.mega-intro p:last-child { + margin: 0; + color: var(--color-neutral-gray-600); +} + +.menu-grid { + display: grid; + grid-template-columns: 1.4fr 0.9fr 1.1fr 1fr; + gap: 28px; + padding-top: 28px; +} + +.menu-column { + display: flex; + flex-direction: column; + gap: 12px; + min-width: 0; +} + +.menu-column a { + width: fit-content; + max-width: 100%; + font-size: 16px; +} + +.menu-column a:hover { + color: var(--color-primary-wine-80); +} + +.visual-column img { + width: 100%; + aspect-ratio: 16 / 9; + object-fit: cover; + border-radius: var(--radius-sm); +} + +.visual-column p { + margin: 0; + color: var(--color-neutral-gray-600); +} + +.appellations { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 20px; +} + +.appellations .section-title { + grid-column: 1 / -1; +} + +.appellation-group { + display: flex; + flex-direction: column; + gap: 10px; +} + +.country-link { + font-weight: 800; + text-transform: uppercase; +} + +.popular-list, +.hero-actions, +.product-footer { + display: flex; + align-items: center; + flex-wrap: wrap; + gap: 12px; +} + +.popular-list a, +.tag { + min-height: 34px; + padding: 7px 12px; + border: 1px solid rgba(75, 15, 36, 0.18); + border-radius: var(--radius-sm); + background: var(--color-surface); + color: var(--color-primary-wine-100); + font-size: 13px; + font-weight: 700; +} + +.tag--filled { + background: var(--color-primary-wine-100); + color: var(--color-surface); +} + +.button { + min-height: 48px; + padding: 12px 22px; + border: 1px solid transparent; + border-radius: var(--radius-sm); + display: inline-flex; + align-items: center; + justify-content: center; + gap: 8px; + font-weight: 800; + cursor: pointer; +} + +.button--primary { + background: var(--color-primary-wine-100); + color: var(--color-surface); + box-shadow: 0 10px 22px rgba(75, 15, 36, 0.16); +} + +.button--secondary { + border-color: rgba(75, 15, 36, 0.24); + color: var(--color-primary-wine-100); + background: rgba(255, 255, 255, 0.72); +} + +.button--sm { + min-height: 38px; + padding: 8px 14px; + font-size: 14px; +} + +.hero { + min-height: calc(100vh - 154px); + display: grid; + align-items: end; + padding: 88px 0; + background: + linear-gradient(90deg, rgba(22, 20, 17, 0.78), rgba(22, 20, 17, 0.18)), + url("https://images.unsplash.com/photo-1560493676-04071c5f467b?auto=format&fit=crop&w=1800&q=80"); + background-position: center; + background-size: cover; + color: #fffdfa; +} + +.hero-copy { + max-width: 760px; +} + +.hero h1 { + margin: 12px 0 20px; + font-size: clamp(44px, 7vw, 88px); +} + +.hero p:not(.eyebrow) { + max-width: 610px; + color: rgba(255, 253, 250, 0.84); + font-size: 18px; +} + +.section { + padding: 80px 0; +} + +.section-heading { + display: grid; + gap: 8px; + margin-bottom: 32px; +} + +.section-heading h2 { + font-size: clamp(34px, 4vw, 52px); +} + +.product-grid { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 20px; +} + +.product-card { + min-width: 0; + padding: 16px; + border: 1px solid rgba(102, 96, 95, 0.16); + border-radius: var(--radius-sm); + background: var(--color-surface); + box-shadow: var(--shadow-soft); + display: grid; + gap: 16px; +} + +.product-media { + min-height: 220px; + border-radius: var(--radius-sm); + display: grid; + place-items: center; + background: linear-gradient(140deg, #5d1027, #c8a45d); +} + +.product-media--amber { + background: linear-gradient(140deg, #a8632a, #eaded2); +} + +.product-media--green { + background: linear-gradient(140deg, #1f4d3a, #e8eadb); +} + +.bottle { + width: 54px; + height: 152px; + border-radius: 16px 16px 10px 10px; + background: linear-gradient(90deg, #161616, #2f2a29 44%, #0c0c0c); + box-shadow: 18px 18px 44px rgba(22, 22, 22, 0.24); + position: relative; +} + +.bottle::before { + content: ""; + position: absolute; + top: -58px; + left: 17px; + width: 20px; + height: 72px; + border-radius: 8px 8px 2px 2px; + background: #171212; +} + +.bottle::after { + content: ""; + position: absolute; + inset: 54px 8px auto; + height: 42px; + border-radius: 4px; + background: #f4eee8; +} + +.product-card h3 { + margin-top: 8px; + font-size: 24px; +} + +.product-card p { + margin: 6px 0 0; + color: var(--color-neutral-gray-600); +} + +.product-footer { + justify-content: space-between; +} + +.product-footer strong { + color: var(--color-primary-wine-100); + font-size: 18px; +} + +.catalog-layout { + display: grid; + grid-template-columns: 280px minmax(0, 1fr); + gap: 28px; +} + +.filters-panel, +.info-panel { + padding: 24px; + border-radius: var(--radius-sm); + background: var(--color-surface); + box-shadow: var(--shadow-soft); +} + +.filters-panel { + display: grid; + gap: 14px; + align-content: start; +} + +.checkbox { + display: flex; + align-items: center; + gap: 10px; + color: var(--color-neutral-gray-600); + font-weight: 700; +} + +.checkbox input { + width: 18px; + height: 18px; + accent-color: var(--color-primary-wine-100); +} + +.product-detail { + display: grid; + grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.1fr); + gap: 40px; + align-items: start; +} + +.product-detail .product-media { + min-height: 520px; +} + +.detail-copy h1 { + margin: 10px 0 18px; + font-family: var(--font-heading); + font-size: clamp(40px, 5vw, 64px); + line-height: 1.08; +} + +.meta-list { + display: grid; + gap: 12px; + margin: 28px 0; +} + +.meta-list div { + display: flex; + justify-content: space-between; + gap: 18px; + padding-bottom: 12px; + border-bottom: 1px solid rgba(102, 96, 95, 0.16); +} + +.meta-list span { + color: var(--color-neutral-gray-600); +} + +.site-footer { + margin-top: auto; + padding: 40px 0 56px; + background: #f1f4f8; +} + +.footer-container { + padding: 32px; + border: 1px solid rgba(217, 222, 229, 0.9); + border-radius: var(--radius-lg); + background: #f3f5f7; + box-shadow: 0 18px 40px rgba(25, 37, 62, 0.08); +} + +.footer-main { + display: grid; + grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); + gap: 40px; +} + +.footer-left { + display: flex; + flex-direction: column; + gap: 28px; +} + +.footer-brand { + display: inline-flex; + align-items: baseline; + color: var(--color-accent-blue); + font-size: clamp(40px, 5vw, 68px); + font-style: italic; + font-weight: 900; + letter-spacing: 0; + line-height: 0.95; +} + +.footer-brand span:first-child { + color: var(--color-primary-wine-80); +} + +.footer-brand-subtitle { + margin: 10px 0 0; + color: var(--color-primary-wine-80); +} + +.social-links { + display: flex; + gap: 12px; + flex-wrap: wrap; +} + +.social-links a { + min-width: 58px; + padding: 10px 16px; + border: 1px solid rgba(143, 23, 54, 0.22); + border-radius: var(--radius-sm); + background: rgba(255, 255, 255, 0.72); + color: var(--color-primary-wine-80); + font-weight: 800; + text-align: center; +} + +.contacts-card { + padding: 24px; + border: 1px solid rgba(217, 222, 229, 0.9); + border-radius: var(--radius-sm); + background: var(--color-surface); +} + +.contacts-card h2, +.nav-group h2 { + margin: 0 0 16px; + font-size: 13px; + font-weight: 800; + letter-spacing: 0; + text-transform: uppercase; +} + +.contact-link { + display: block; + width: fit-content; +} + +.contact-phone { + margin-bottom: 10px; + color: var(--color-neutral-gray-700); + font-size: 22px; + font-weight: 800; +} + +.footer-nav { + display: grid; + grid-template-columns: repeat(3, minmax(140px, 1fr)); + gap: 32px; + align-items: start; +} + +.nav-group ul { + margin: 0; + padding: 0; + list-style: none; +} + +.nav-group li + li { + margin-top: 12px; +} + +.nav-group a, +.footer-legal { + color: #6b7280; +} + +.footer-legal { + grid-column: 1 / -1; + margin-top: 8px; + padding-top: 24px; + border-top: 1px solid #d9dee5; + font-size: 14px; + line-height: 1.6; +} + +.footer-legal a { + color: var(--color-primary-wine-80); +} + +@media (max-width: 1080px) { + .header-top, + .footer-main, + .catalog-layout, + .product-detail { + grid-template-columns: 1fr; + } + + .phone-link { + display: none; + } + + .main-nav { + justify-content: flex-start; + } + + .menu-grid, + .product-grid { + grid-template-columns: 1fr 1fr; + } + + .mega-menu { + top: 206px; + } +} + +@media (max-width: 720px) { + .container { + width: min(100% - 28px, var(--container)); + } + + .header-top { + gap: 14px; + padding: 18px 0; + } + + .main-nav { + min-height: 58px; + } + + .mega-menu { + top: 204px; + padding: 20px; + } + + .mega-intro, + .menu-grid, + .appellations, + .product-grid, + .footer-nav { + grid-template-columns: 1fr; + } + + .hero { + min-height: 620px; + padding: 56px 0; + } + + .section { + padding: 56px 0; + } + + .footer-container { + padding: 22px 18px; + } +} diff --git a/css/tokens.css b/css/tokens.css new file mode 100644 index 0000000..26dd439 --- /dev/null +++ b/css/tokens.css @@ -0,0 +1,31 @@ +:root { + --color-primary-wine-100: #4b0f24; + --color-primary-wine-80: #6d1c36; + --color-neutral-black: #161616; + --color-neutral-gray-700: #30343a; + --color-neutral-gray-600: #66605f; + --color-neutral-gray-300: #d8d3cf; + --color-background-base: #faf8f5; + --color-surface: #ffffff; + --color-accent-gold: #b9965b; + --color-accent-blue: #1f3476; + + --font-heading: "Playfair Display", Georgia, serif; + --font-body: "Inter", Arial, sans-serif; + + --spacing-4: 4px; + --spacing-8: 8px; + --spacing-16: 16px; + --spacing-24: 24px; + --spacing-32: 32px; + --spacing-48: 48px; + --spacing-64: 64px; + + --radius-sm: 8px; + --radius-md: 12px; + --radius-lg: 24px; + + --shadow-soft: 0 12px 32px rgba(22, 22, 22, 0.08); + --shadow-lift: 0 20px 52px rgba(75, 15, 36, 0.14); + --container: 1240px; +} diff --git a/css/ui-kit.css b/css/ui-kit.css new file mode 100644 index 0000000..04687e6 --- /dev/null +++ b/css/ui-kit.css @@ -0,0 +1,850 @@ +:root { + --color-primary-wine-100: #4b0f24; + --color-primary-wine-80: #6d1c36; + --color-neutral-black: #161616; + --color-gray-600: #66605f; + --color-gray-300: #d8d3cf; + --color-background-base: #faf8f5; + --color-accent-gold: #b9965b; + --color-white: #ffffff; + --color-error: #a33a2f; + + --font-heading: "Playfair Display", Georgia, serif; + --font-body: "Inter", Arial, sans-serif; + + --spacing-1: 4px; + --spacing-2: 8px; + --spacing-3: 16px; + --spacing-4: 24px; + --spacing-5: 32px; + --spacing-6: 48px; + --spacing-7: 64px; + + --radius-sm: 8px; + --radius-md: 12px; + --shadow-soft: 0 12px 32px rgba(22, 22, 22, 0.08); + --shadow-lift: 0 20px 52px rgba(75, 15, 36, 0.14); +} + +* { + box-sizing: border-box; +} + +html { + scroll-behavior: smooth; +} + +body { + margin: 0; + background: var(--color-background-base); + color: var(--color-neutral-black); + font-family: var(--font-body); + font-size: 16px; + line-height: 1.5; +} + +a { + color: inherit; + text-decoration: none; +} + +button, +input, +select { + font: inherit; +} + +.sidebar { + position: fixed; + inset: 0 auto 0 0; + width: 280px; + padding: 24px; + background: #fffdf9; + border-right: 1px solid rgba(102, 96, 95, 0.18); + display: flex; + flex-direction: column; + gap: 32px; + z-index: 5; +} + +.brand { + display: inline-flex; + align-items: center; + gap: 12px; +} + +.brand__mark { + width: 44px; + height: 44px; + border-radius: var(--radius-sm); + background: var(--color-primary-wine-100); + color: var(--color-accent-gold); + display: inline-grid; + place-items: center; + font-family: var(--font-heading); + font-weight: 700; +} + +.brand strong, +.brand small { + display: block; +} + +.brand small { + color: var(--color-gray-600); + font-size: 13px; +} + +.brand--compact .brand__mark { + width: 36px; + height: 36px; +} + +.side-nav { + display: grid; + gap: 8px; +} + +.side-nav a { + padding: 10px 12px; + border-radius: var(--radius-sm); + color: var(--color-gray-600); + font-weight: 600; +} + +.side-nav a:hover { + background: rgba(75, 15, 36, 0.07); + color: var(--color-primary-wine-100); +} + +.page-shell { + margin-left: 280px; + min-width: 0; +} + +.kit-hero { + min-height: 92vh; + padding: 56px clamp(24px, 5vw, 72px); + display: grid; + grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr); + align-items: center; + gap: 48px; + background: + radial-gradient(circle at 82% 28%, rgba(185, 150, 91, 0.25), transparent 24%), + linear-gradient(135deg, #fffdfa 0%, #f4eee8 58%, #eaded2 100%); +} + +.kit-hero__content { + max-width: 720px; +} + +.eyebrow, +.muted-caps { + margin: 0; + color: var(--color-accent-gold); + font-size: 12px; + line-height: 16px; + font-weight: 700; + letter-spacing: 0; + text-transform: uppercase; +} + +h1, +h2, +h3, +p { + margin-top: 0; +} + +h1, +h2, +h3 { + font-family: var(--font-heading); + line-height: 1.16; +} + +h1 { + max-width: 780px; + margin-bottom: 20px; + font-size: clamp(42px, 6vw, 76px); +} + +h2 { + margin-bottom: 0; + font-size: 42px; +} + +h3 { + margin-bottom: 16px; + font-size: 25px; +} + +.kit-hero p:not(.eyebrow) { + max-width: 640px; + color: var(--color-gray-600); + font-size: 18px; + line-height: 28px; +} + +.hero-actions, +.component-row, +.chip-row { + display: flex; + align-items: center; + flex-wrap: wrap; + gap: 12px; +} + +.kit-hero__visual { + justify-self: center; + width: min(100%, 420px); +} + +.button { + min-height: 48px; + padding: 12px 22px; + border: 1px solid transparent; + border-radius: var(--radius-sm); + display: inline-flex; + align-items: center; + justify-content: center; + gap: 8px; + color: var(--color-neutral-black); + background: transparent; + font-weight: 700; + cursor: pointer; + transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; +} + +.button:hover, +.button.is-hover { + transform: translateY(-1px); +} + +.button--primary { + background: var(--color-primary-wine-100); + color: var(--color-white); + box-shadow: 0 10px 22px rgba(75, 15, 36, 0.16); +} + +.button--primary:hover, +.button--primary.is-hover { + background: var(--color-primary-wine-80); + box-shadow: var(--shadow-lift); +} + +.button--secondary { + border-color: rgba(75, 15, 36, 0.24); + background: rgba(255, 255, 255, 0.55); + color: var(--color-primary-wine-100); +} + +.button--ghost { + color: var(--color-primary-wine-100); +} + +.button--sm { + min-height: 38px; + padding: 8px 14px; + font-size: 14px; +} + +.section { + padding: 72px clamp(24px, 5vw, 72px); + border-top: 1px solid rgba(102, 96, 95, 0.16); +} + +.section--last { + padding-bottom: 96px; +} + +.section-heading { + display: grid; + gap: 8px; + margin-bottom: 40px; +} + +.subsection { + margin-top: 40px; +} + +.swatch-grid { + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap: 16px; +} + +.swatch, +.template-card, +.mini-card { + min-width: 0; + padding: 16px; + border: 1px solid rgba(102, 96, 95, 0.16); + border-radius: var(--radius-sm); + background: rgba(255, 255, 255, 0.74); +} + +.swatch span { + display: block; + height: 88px; + margin-bottom: 14px; + border: 1px solid rgba(22, 22, 22, 0.08); + border-radius: var(--radius-sm); + background: var(--swatch); +} + +.swatch strong, +.swatch code, +.template-card span, +.template-card strong { + display: block; +} + +code { + color: var(--color-primary-wine-80); + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; + font-size: 13px; +} + +.typography-specimen { + display: grid; + gap: 18px; +} + +.type-row { + padding-bottom: 18px; + border-bottom: 1px solid rgba(102, 96, 95, 0.16); + display: grid; + grid-template-columns: 280px minmax(0, 1fr); + gap: 24px; + align-items: baseline; +} + +.type-row span { + color: var(--color-gray-600); + font-size: 13px; +} + +.type-row p { + margin: 0; +} + +.text-h1, +.text-h2, +.text-h3 { + font-family: var(--font-heading); +} + +.text-h1 { + font-size: 48px; + line-height: 56px; +} + +.text-h2 { + font-size: 36px; + line-height: 44px; +} + +.text-h3 { + font-size: 28px; + line-height: 36px; +} + +.text-body { + font-size: 16px; + line-height: 24px; +} + +.text-label { + font-size: 12px; + line-height: 16px; + font-weight: 700; + text-transform: uppercase; +} + +.grid-demo { + height: 120px; + padding: 16px; + border-radius: var(--radius-sm); + background: rgba(75, 15, 36, 0.06); + display: grid; + grid-template-columns: repeat(12, 1fr); + gap: 16px; +} + +.grid-demo span { + border-radius: 4px; + background: rgba(75, 15, 36, 0.18); +} + +.spacing-scale { + margin-top: 20px; + display: flex; + align-items: end; + flex-wrap: wrap; + gap: 18px; +} + +.spacing-scale span { + width: var(--space); + height: var(--space); + min-width: 4px; + min-height: 4px; + background: var(--color-accent-gold); + color: var(--color-neutral-black); + font-size: 12px; + font-weight: 700; + display: grid; + place-items: center; +} + +.token-grid { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 12px; +} + +.token-grid code { + padding: 14px; + border-radius: var(--radius-sm); + background: #fff; +} + +.product-grid { + display: grid; + gap: 20px; +} + +.product-grid--3 { + grid-template-columns: repeat(3, minmax(0, 1fr)); +} + +.product-card { + min-width: 0; + padding: 16px; + border: 1px solid rgba(102, 96, 95, 0.16); + border-radius: var(--radius-sm); + background: var(--color-white); + box-shadow: var(--shadow-soft); + display: grid; + gap: 16px; + transition: transform 0.2s ease, box-shadow 0.2s ease; +} + +.product-card:hover, +.product-card--hover, +.product-card--featured { + transform: translateY(-3px); + box-shadow: var(--shadow-lift); +} + +.product-card--compact { + grid-template-columns: 90px minmax(0, 1fr); + align-items: center; +} + +.product-card--compact .product-footer { + grid-column: 2; +} + +.product-media { + position: relative; + min-height: 220px; + border-radius: var(--radius-sm); + overflow: hidden; + display: grid; + place-items: center; + background: + linear-gradient(135deg, rgba(255, 255, 255, 0.42), transparent 48%), + var(--media-bg, #eaded2); +} + +.product-card--compact .product-media { + min-height: 130px; +} + +.product-media--wine { + --media-bg: linear-gradient(140deg, #5d1027, #c8a45d); +} + +.product-media--amber { + --media-bg: linear-gradient(140deg, #a8632a, #eaded2); +} + +.product-media--green { + --media-bg: linear-gradient(140deg, #1f4d3a, #e8eadb); +} + +.bottle { + width: 54px; + height: 152px; + border-radius: 16px 16px 10px 10px; + background: linear-gradient(90deg, #161616, #2f2a29 44%, #0c0c0c); + box-shadow: 18px 18px 44px rgba(22, 22, 22, 0.24); + position: relative; +} + +.bottle::before { + content: ""; + position: absolute; + top: -58px; + left: 17px; + width: 20px; + height: 72px; + border-radius: 8px 8px 2px 2px; + background: #171212; +} + +.bottle::after { + content: ""; + position: absolute; + inset: 54px 8px auto; + height: 42px; + border-radius: 4px; + background: #f4eee8; +} + +.product-meta { + min-width: 0; +} + +.product-meta h3 { + margin: 8px 0 6px; + font-size: 24px; +} + +.product-meta p { + margin: 0; + color: var(--color-gray-600); + font-size: 14px; +} + +.product-footer { + display: flex; + align-items: center; + justify-content: space-between; + gap: 12px; +} + +.product-footer strong { + color: var(--color-primary-wine-100); + font-size: 18px; +} + +.header-demo { + padding: 16px; + border-radius: var(--radius-sm); + background: var(--color-white); + box-shadow: var(--shadow-soft); + display: flex; + align-items: center; + justify-content: space-between; + gap: 20px; +} + +.header-demo nav { + display: flex; + flex-wrap: wrap; + gap: 18px; + color: var(--color-gray-600); + font-weight: 600; +} + +.component-columns, +.catalog-pattern, +.template-grid { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 24px; +} + +.control-stack { + padding: 20px; + border-radius: var(--radius-sm); + background: var(--color-white); + display: grid; + gap: 14px; + box-shadow: var(--shadow-soft); +} + +.checkbox { + display: flex; + align-items: center; + gap: 10px; + color: var(--color-gray-600); + font-weight: 600; +} + +.checkbox input { + width: 18px; + height: 18px; + accent-color: var(--color-primary-wine-100); +} + +.chip, +.tag { + min-height: 34px; + padding: 7px 12px; + border: 1px solid rgba(75, 15, 36, 0.18); + border-radius: var(--radius-sm); + background: var(--color-white); + color: var(--color-primary-wine-100); + font-size: 13px; + font-weight: 700; +} + +.chip { + cursor: pointer; +} + +.chip--active, +.tag--filled { + background: var(--color-primary-wine-100); + color: var(--color-white); +} + +.tag--outline { + background: transparent; + border-color: var(--color-accent-gold); + color: var(--color-primary-wine-100); +} + +.range { + display: grid; + gap: 8px; + color: var(--color-gray-600); + font-weight: 600; +} + +.range input { + accent-color: var(--color-primary-wine-100); +} + +.input { + width: 100%; + min-height: 48px; + padding: 12px 14px; + border: 1px solid rgba(102, 96, 95, 0.24); + border-radius: var(--radius-sm); + background: var(--color-white); + color: var(--color-neutral-black); +} + +.input--focus, +.input:focus { + border-color: var(--color-primary-wine-100); + box-shadow: 0 0 0 3px rgba(75, 15, 36, 0.1); + outline: none; +} + +.input--error { + border-color: var(--color-error); + color: var(--color-error); +} + +.table-wrap { + overflow-x: auto; + border-radius: var(--radius-sm); + box-shadow: var(--shadow-soft); +} + +table { + width: 100%; + min-width: 720px; + border-collapse: collapse; + background: var(--color-white); +} + +th, +td { + padding: 16px; + border-bottom: 1px solid rgba(102, 96, 95, 0.16); + text-align: left; +} + +th { + background: #f0e8df; + color: var(--color-primary-wine-100); + font-size: 12px; + text-transform: uppercase; +} + +tbody tr:hover { + background: rgba(75, 15, 36, 0.04); +} + +.filters-panel { + padding: 24px; + border-radius: var(--radius-sm); + background: var(--color-white); + box-shadow: var(--shadow-soft); + display: grid; + gap: 14px; + align-content: start; +} + +.mini-card { + min-height: 120px; + display: grid; + place-items: center; + color: var(--color-primary-wine-100); + font-family: var(--font-heading); + font-size: 22px; + text-align: center; +} + +.template-grid { + grid-template-columns: repeat(4, minmax(0, 1fr)); +} + +.template-card { + min-height: 148px; + display: grid; + align-content: space-between; +} + +.template-card span { + color: var(--color-accent-gold); + font-size: 12px; + font-weight: 700; + text-transform: uppercase; +} + +.template-card strong { + font-family: var(--font-heading); + font-size: 22px; + line-height: 1.2; +} + +.screen-preview { + overflow: hidden; + border: 1px solid rgba(102, 96, 95, 0.18); + border-radius: var(--radius-sm); + background: var(--color-white); + box-shadow: var(--shadow-soft); +} + +.screen-preview__bar { + height: 48px; + background: var(--color-primary-wine-100); +} + +.screen-preview__hero { + min-height: 300px; + padding: 48px; + background: + linear-gradient(90deg, rgba(75, 15, 36, 0.84), rgba(75, 15, 36, 0.24)), + linear-gradient(135deg, #4b0f24, #b9965b); + color: var(--color-white); + display: grid; + align-content: center; + justify-items: start; +} + +.screen-preview__hero h3 { + max-width: 520px; + margin: 8px 0 20px; + font-size: 52px; +} + +.screen-preview__content { + padding: 24px; + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 16px; +} + +.screen-preview__content span { + min-height: 110px; + border-radius: var(--radius-sm); + background: #f0e8df; +} + +@media (max-width: 1100px) { + .sidebar { + position: static; + width: auto; + border-right: none; + border-bottom: 1px solid rgba(102, 96, 95, 0.18); + } + + .side-nav { + grid-template-columns: repeat(5, minmax(0, 1fr)); + } + + .page-shell { + margin-left: 0; + } + + .kit-hero, + .component-columns, + .catalog-pattern { + grid-template-columns: 1fr; + } + + .swatch-grid, + .template-grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } +} + +@media (max-width: 760px) { + .sidebar { + padding: 18px; + } + + .side-nav { + grid-template-columns: 1fr 1fr; + } + + .kit-hero, + .section { + padding: 40px 18px; + } + + .kit-hero { + min-height: auto; + } + + h1 { + font-size: 42px; + } + + h2 { + font-size: 34px; + } + + .swatch-grid, + .product-grid--3, + .template-grid, + .screen-preview__content, + .token-grid { + grid-template-columns: 1fr; + } + + .type-row { + grid-template-columns: 1fr; + gap: 8px; + } + + .header-demo { + align-items: flex-start; + flex-direction: column; + } + + .product-card--compact { + grid-template-columns: 1fr; + } + + .product-card--compact .product-footer { + grid-column: auto; + } + + .screen-preview__hero { + padding: 28px; + } + + .screen-preview__hero h3 { + font-size: 36px; + } +} diff --git a/index.html b/index.html new file mode 100644 index 0000000..14a087d --- /dev/null +++ b/index.html @@ -0,0 +1,121 @@ + + + + + + DP Trade — Home + + + + + + +
+
+
+ + + +7 (495) 937-94-60 +
+ +
+ +
+
+
+

DP Trade

+

Премиальный каталог вина для торговли

+

Регионы, производители, партии и коммерческие условия собраны в одном интерфейсе для быстрых закупочных решений.

+
+ Смотреть каталог + Открыть UI-kit +
+
+
+ +
+
+
+

Recommendations

+

Рекомендации недели

+
+
+
+
+
Bordeaux

Chateau Laroque Grand Cru

France · Red dry · 2019 · 0.75 L

+
3 890 ₽Подробнее
+
+
+
+
Tuscany

Brunello di Montalcino

Italy · Red dry · 2018 · 0.75 L

+
4 240 ₽Подробнее
+
+
+
+
Mosel

Riesling Kabinett

Germany · White · 2021 · 0.75 L

+
2 150 ₽Подробнее
+
+
+
+
+
+ + +
+ + diff --git a/product.html b/product.html new file mode 100644 index 0000000..3d4b519 --- /dev/null +++ b/product.html @@ -0,0 +1,35 @@ + + + + + + DP Trade — Product + + + + + + +
+
+
+
+

Product / Default

+

Chateau Laroque Grand Cru

+

Премиальная позиция из Bordeaux для ресторанных карт и специализированной розницы.

+
+
РегионBordeaux
+
ТипRed dry
+
Год2019
+
Объем0.75 L
+
Цена3 890 ₽
+
+
+ Запросить прайс + Вернуться в каталог +
+
+
+
+ + diff --git a/ui-kit.html b/ui-kit.html new file mode 100644 index 0000000..6edc38b --- /dev/null +++ b/ui-kit.html @@ -0,0 +1,374 @@ + + + + + + DP Trade — Design System + + + + + + + + +
+
+
+

DP Trade — Design System

+

UI-kit для премиального торгового каталога

+

+ Живая HTML/CSS витрина компонентов, токенов, паттернов и экранов для сайта DP Trade. + Структура повторяет Figma-файл и использует критичный naming format. +

+
+ Компоненты + Dev tokens +
+
+
+
+
+ +
+
+ Bordeaux +

Chateau Laroque Grand Cru

+

France · Red dry · 2019 · 0.75 L

+
+
+ от 3 890 ₽ + +
+
+
+
+ +
+
+

01 Foundations

+

База системы

+
+ +
+

Colors

+
+
+ + Color / Primary / Wine / 100 + #4B0F24 +
+
+ + Color / Primary / Wine / 80 + #6D1C36 +
+
+ + Color / Neutral / Black + #161616 +
+
+ + Color / Neutral / Gray / 600 + #66605F +
+
+ + Color / Neutral / Gray / 300 + #D8D3CF +
+
+ + Color / Background / Base + #FAF8F5 +
+
+ + Color / Accent / Gold + #B9965B +
+
+
+ +
+

Typography

+
+ Text / Heading / H1 / Playfair / 48 / 56 +

Rare wines for trade

+
+
+ Text / Heading / H2 / Playfair / 36 / 44 +

Catalog collections

+
+
+ Text / Heading / H3 / Playfair / 28 / 36 +

Producer selection

+
+
+ Text / Body / Regular / Inter / 16 / 24 +

Вина, регионы, партии и коммерческие условия в единой системе.

+
+
+ Text / Label / Caps / Inter / 12 / 16 +

FEATURED REGION

+
+
+ +
+

Grid & Spacing

+
+ + +
+
+ 4 + 8 + 16 + 24 + 32 + 48 + 64 +
+
+ +
+

Tokens

+
+ color.primary = #4B0F24 + color.text = #161616 + spacing.md = 16px + radius.sm = 8px + shadow.soft = 0 12px 32px rgba(22,22,22,.08) +
+
+
+ +
+
+

02 Components

+

Компоненты

+
+ +
+

Buttons

+
+ + + + +
+
+ +
+

Product Card

+
+
+
+
+ Tuscany +

Brunello di Montalcino

+

Italy · Red dry · 2018 · 0.75 L

+
+
+ 4 240 ₽ + +
+
+
+
+
+ Rioja +

Reserva Seleccion Especial

+

Spain · Red dry · 2017 · 0.75 L

+
+
+ 2 980 ₽ + +
+
+
+
+
+ Mosel +

Riesling Kabinett

+

Germany · White · 2021

+
+
+ 2 150 ₽ +
+
+
+
+ +
+

Navigation

+
+ DPTrade + + +
+
+ +
+
+

Filters

+
+ + +
+ + + +
+ +
+
+
+

Tags & Inputs

+
+
+ Tag / Default + Tag / Filled + Tag / Outline +
+ + + + +
+
+
+ +
+

Tables / B2B

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SKUNameRegionStockTrade price
DP-1042Chateau Laroque Grand CruBordeaux48 cases3 890 ₽
DP-1188Riesling KabinettMosel32 cases2 150 ₽
+
+
+
+ +
+
+

03 Patterns

+

Паттерны

+
+
+ +
+

Pattern / Product Grid / 3 col

+
+
Bordeaux Grand Cru
+
Tuscany Reserve
+
Mosel Riesling
+
+
+
+
+ +
+
+

04 Templates

+

Шаблоны

+
+
+
+ Template / Home + Hero + regions + recommendations +
+
+ Template / Catalog + Filters + product grid + table mode +
+
+ Template / Product Page + Gallery + meta + CTA + availability +
+
+ Template / Producer Page + Story + region + producer catalog +
+
+
+ +
+
+

05 Screens

+

Реальные экраны

+
+
+
+
+

Screen / Home / v1

+

Curated trade catalog

+ +
+
+ +
+
+
+
+ +