From 0c2cee410fb4d1991a6ad4c891fdf6913b3e3809 Mon Sep 17 00:00:00 2001 From: shop Date: Sun, 17 May 2026 14:14:38 +0300 Subject: [PATCH] =?UTF-8?q?ui:=20=D0=B8=D0=BA=D0=BE=D0=BD=D0=BA=D0=B8=20?= =?UTF-8?q?=D0=B8=20=D0=BD=D0=B0=D0=B3=D0=BB=D1=8F=D0=B4=D0=BD=D0=BE=D0=B5?= =?UTF-8?q?=20=D0=BE=D1=82=D0=BE=D0=B1=D1=80=D0=B0=D0=B6=D0=B5=D0=BD=D0=B8?= =?UTF-8?q?=D0=B5=20=D1=86=D0=B5=D0=BD=20=D1=81=D0=BE=20=D1=81=D0=BA=D0=B8?= =?UTF-8?q?=D0=B4=D0=BA=D0=BE=D0=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit SVG-иконки в шапке и кнопках, зачёркнутая старая цена и акцент на цене со скидкой в каталоге, корзине и на карточке товара. Co-authored-by: Cursor --- src/public/css/style.css | 220 ++++++++++++++++++++++++--- src/views/cart.ejs | 18 ++- src/views/home.ejs | 18 ++- src/views/partials/icon.ejs | 25 +++ src/views/partials/layout-start.ejs | 28 +++- src/views/partials/product-price.ejs | 38 ++++- src/views/product.ejs | 19 ++- 7 files changed, 315 insertions(+), 51 deletions(-) create mode 100644 src/views/partials/icon.ejs diff --git a/src/public/css/style.css b/src/public/css/style.css index 6f0422c..4a71822 100644 --- a/src/public/css/style.css +++ b/src/public/css/style.css @@ -10,6 +10,8 @@ --success: #00b894; --warn: #fdcb6e; --error: #ff7675; + --sale: #ff6b6b; + --sale-bg: rgba(255, 107, 107, 0.12); --radius: 12px; --shadow: 0 8px 32px rgba(0, 0, 0, 0.35); font-family: 'DM Sans', system-ui, sans-serif; @@ -63,6 +65,9 @@ a:hover { } .logo { + display: inline-flex; + align-items: center; + gap: 0.45rem; font-size: 1.35rem; font-weight: 700; color: var(--text); @@ -70,6 +75,10 @@ a:hover { letter-spacing: -0.02em; } +.logo__icon { + color: var(--accent-hover); +} + .logo:hover { color: var(--accent-hover); text-decoration: none; @@ -78,13 +87,24 @@ a:hover { .search { flex: 1; display: flex; + align-items: center; gap: 0.5rem; min-width: 200px; max-width: 420px; + position: relative; +} + +.search__icon { + position: absolute; + left: 0.75rem; + color: var(--muted); + pointer-events: none; + display: flex; } .search input { flex: 1; + padding-left: 2.35rem; } .nav { @@ -103,10 +123,25 @@ a:hover { color: var(--text); } +.nav__link--icon { + display: inline-flex; + align-items: center; + gap: 0.35rem; + text-decoration: none; +} + +.nav__link--icon:hover { + text-decoration: none; +} + .nav__cart { position: relative; } +.nav__admin { + color: var(--warn); +} + .badge { display: inline-flex; align-items: center; @@ -144,7 +179,8 @@ a:hover { letter-spacing: -0.03em; } -.hero p { +.hero p, +.hero__lead { margin: 0; color: var(--muted); } @@ -185,7 +221,7 @@ a:hover { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; - transition: transform 0.2s, box-shadow 0.2s; + transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; } .card:hover { @@ -193,13 +229,40 @@ a:hover { box-shadow: var(--shadow); } +.card--sale { + border-color: rgba(255, 107, 107, 0.35); + box-shadow: 0 0 0 1px rgba(255, 107, 107, 0.08); +} + +.card--sale:hover { + border-color: rgba(255, 107, 107, 0.55); +} + .card__image-wrap { display: block; + position: relative; aspect-ratio: 1; overflow: hidden; background: var(--surface-2); } +.card__sale-ribbon { + position: absolute; + top: 0.65rem; + left: 0.65rem; + z-index: 2; + display: inline-flex; + align-items: center; + gap: 0.3rem; + padding: 0.3rem 0.55rem; + font-size: 0.75rem; + font-weight: 700; + color: #fff; + background: linear-gradient(135deg, #ff6b6b, #ee5a5a); + border-radius: 6px; + box-shadow: 0 4px 12px rgba(255, 107, 107, 0.4); +} + .card__image { width: 100%; height: 100%; @@ -240,10 +303,8 @@ a:hover { color: var(--accent-hover); } -.card__price { - margin: 0 0 0.75rem; - font-size: 1.1rem; - font-weight: 700; +.card .price-block { + margin-bottom: 0.75rem; } .card__form { @@ -272,9 +333,16 @@ a:hover { } .product-detail__price { - font-size: 1.75rem; - font-weight: 700; - margin: 0.5rem 0; + margin: 0.75rem 0 1rem; + padding: 1rem 1.15rem; + background: var(--surface-2); + border: 1px solid var(--border); + border-radius: var(--radius); +} + +.product-detail__price:has(.price-block--sale) { + border-color: rgba(255, 107, 107, 0.3); + background: var(--sale-bg); } .product-detail__desc { @@ -323,15 +391,29 @@ a:hover { } .link-back { - display: inline-block; + display: inline-flex; + align-items: center; + gap: 0.35rem; margin-top: 1rem; color: var(--muted); + text-decoration: none; +} + +.link-back:hover { + color: var(--text); + text-decoration: none; +} + +.icon { + flex-shrink: 0; + vertical-align: middle; } .btn { display: inline-flex; align-items: center; justify-content: center; + gap: 0.45rem; padding: 0.55rem 1.1rem; border: none; border-radius: 8px; @@ -1008,27 +1090,129 @@ body:has(.cookie-banner) .main { } .price-block { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 0.35rem; +} + +.price-block__meta { + display: flex; + align-items: center; + gap: 0.4rem; + flex-wrap: wrap; +} + +.price-block__tag { + display: inline-flex; + align-items: center; + gap: 0.25rem; + font-size: 0.7rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.04em; + color: var(--sale); +} + +.price-block__badge { + font-size: 0.7rem; + font-weight: 700; + padding: 0.15rem 0.45rem; + border-radius: 4px; + background: var(--sale-bg); + color: var(--sale); +} + +.price-block__prices { display: flex; flex-wrap: wrap; align-items: baseline; - gap: 0.35rem 0.6rem; - margin: 0.35rem 0 0; + gap: 0.5rem 0.75rem; } .price-block__old { - text-decoration: line-through; + position: relative; color: var(--muted); - font-size: 0.9rem; + font-size: 0.95em; + font-weight: 500; + text-decoration: line-through; + text-decoration-thickness: 2px; + text-decoration-color: var(--sale); + opacity: 0.85; +} + +.price-block__current { + font-weight: 700; + color: var(--text); + letter-spacing: -0.02em; +} + +.price-block__current--solo { + font-size: 1.1rem; } .price-block--sale .price-block__current { - color: var(--accent); - font-weight: 600; + color: var(--sale); + font-weight: 800; +} + +.price-block__savings { + font-size: 0.85rem; + color: var(--success); + font-weight: 500; +} + +.price-block--md .price-block__current { + font-size: 1.2rem; +} + +.price-block--md .price-block__old { + font-size: 0.95rem; +} + +.price-block--lg .price-block__current { + font-size: clamp(1.75rem, 4vw, 2.25rem); +} + +.price-block--lg .price-block__old { + font-size: 1.15rem; +} + +.price-block--sm .price-block__meta { + display: none; +} + +.price-block--sm .price-block__prices { + flex-direction: column; + align-items: flex-start; + gap: 0.15rem; +} + +.price-block--sm .price-block__current { + font-size: 1rem; +} + +.cart-table__price .price-block { + margin: 0; +} + +.promo-countdown--product { + display: flex; + align-items: center; + gap: 0.4rem; + margin: 0.75rem 0 0; + padding: 0; + font-size: 0.9rem; + color: var(--muted); +} + +.promo-countdown--product strong { + color: var(--warn); } .badge--sale { - background: rgba(239, 68, 68, 0.15); - color: #f87171; + background: var(--sale-bg); + color: var(--sale); font-size: 0.75rem; padding: 0.15rem 0.45rem; border-radius: 4px; diff --git a/src/views/cart.ejs b/src/views/cart.ejs index d7eaa39..84425e4 100644 --- a/src/views/cart.ejs +++ b/src/views/cart.ejs @@ -29,20 +29,22 @@ <% } %> <%= item.name %> - - <% if (item.on_sale) { %> - <%= formatPrice(item.price_cents) %> - <%= formatPrice(item.effective_price_cents) %> - <% } else { %> - <%= formatPrice(item.effective_price_cents) %> - <% } %> + + <%- include('partials/product-price', { + product: item, + forceOnSale: item.on_sale, + forceEffective: item.effective_price_cents, + priceSize: 'sm' + }) %> <%= formatPrice(item.line_total) %> - + <% }) %> diff --git a/src/views/home.ejs b/src/views/home.ejs index 1664f9a..91e9546 100644 --- a/src/views/home.ejs +++ b/src/views/home.ejs @@ -2,7 +2,7 @@

Каталог товаров

-

Доставка по России. Оплата при получении.

+

Доставка по России · Оплата при получении · Акции со скидкой в каталоге

<% if (categories.length) { %> @@ -19,8 +19,15 @@ <% } else { %>
<% products.forEach(p => { %> -
+ <% const onSale = isSaleActive(p); %> +
diff --git a/src/views/partials/icon.ejs b/src/views/partials/icon.ejs new file mode 100644 index 0000000..be3045e --- /dev/null +++ b/src/views/partials/icon.ejs @@ -0,0 +1,25 @@ +<% + const sz = typeof iconSize !== 'undefined' ? iconSize : 20; + const cls = 'icon' + (typeof iconClass !== 'undefined' ? ' ' + iconClass : ''); +%> +<% if (name === 'cart') { %> + +<% } else if (name === 'search') { %> + +<% } else if (name === 'tag') { %> + +<% } else if (name === 'user') { %> + +<% } else if (name === 'shield') { %> + +<% } else if (name === 'plus') { %> + +<% } else if (name === 'trash') { %> + +<% } else if (name === 'clock') { %> + +<% } else if (name === 'arrow-left') { %> + +<% } else if (name === 'package') { %> + +<% } %> diff --git a/src/views/partials/layout-start.ejs b/src/views/partials/layout-start.ejs index 89900df..b21b791 100644 --- a/src/views/partials/layout-start.ejs +++ b/src/views/partials/layout-start.ejs @@ -12,26 +12,40 @@
- +
+ - +