ui: иконки и наглядное отображение цен со скидкой

SVG-иконки в шапке и кнопках, зачёркнутая старая цена и акцент на цене со скидкой в каталоге, корзине и на карточке товара.

Co-authored-by: Cursor <cursoragent@cursor.com>

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 {
+.card .price-block {
-  margin: 0 0 0.75rem;
+  margin-bottom: 0.75rem;
-  font-size: 1.1rem;
-  font-weight: 700;
 }
 
 .card__form {
@@ -272,9 +333,16 @@ a:hover {
 }
 
 .product-detail__price {
-  font-size: 1.75rem;
+  margin: 0.75rem 0 1rem;
-  font-weight: 700;
+  padding: 1rem 1.15rem;
-  margin: 0.5rem 0;
+  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;
+  gap: 0.5rem 0.75rem;
-  margin: 0.35rem 0 0;
 }
 
 .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);
+  color: var(--sale);
-  font-weight: 600;
+  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);
+  background: var(--sale-bg);
-  color: #f87171;
+  color: var(--sale);
   font-size: 0.75rem;
   padding: 0.15rem 0.45rem;
   border-radius: 4px;

src/views/cart.ejs

@@ -29,20 +29,22 @@
               <% } %>
               <a href="/product/<%= item.slug %>"><%= item.name %></a>
             </td>
-            <td>
+            <td class="cart-table__price">
-              <% if (item.on_sale) { %>
+              <%- include('partials/product-price', {
-                <span class="price-block__old"><%= formatPrice(item.price_cents) %></span>
+                product: item,
-                <%= formatPrice(item.effective_price_cents) %>
+                forceOnSale: item.on_sale,
-              <% } else { %>
+                forceEffective: item.effective_price_cents,
-                <%= formatPrice(item.effective_price_cents) %>
+                priceSize: 'sm'
-              <% } %>
+              }) %>
             </td>
             <td>
               <input type="number" name="items[<%= item.id %>]" value="<%= item.quantity %>" min="0" max="<%= item.stock %>" class="input input--qty">
             </td>
             <td><%= formatPrice(item.line_total) %></td>
             <td>
-              <button type="submit" formaction="/cart/remove/<%= item.id %>" formmethod="post" class="btn btn--ghost btn--sm" title="Удалить">×</button>
+              <button type="submit" formaction="/cart/remove/<%= item.id %>" formmethod="post" class="btn btn--ghost btn--sm btn--icon" title="Удалить" aria-label="Удалить">
+                <%- include('partials/icon', { name: 'trash', iconSize: 16 }) %>
+              </button>
             </td>
           </tr>
         <% }) %>

src/views/home.ejs

@@ -2,7 +2,7 @@
 
 <section class="hero">
   <h1>Каталог товаров</h1>
-  <p>Доставка по России. Оплата при получении.</p>
+  <p class="hero__lead">Доставка по России · Оплата при получении · Акции со скидкой в каталоге</p>
 </section>
 
 <% if (categories.length) { %>
@@ -19,8 +19,15 @@
 <% } else { %>
   <div class="grid">
     <% products.forEach(p => { %>
-      <article class="card">
+      <% const onSale = isSaleActive(p); %>
+      <article class="card<%= onSale ? ' card--sale' : '' %>">
         <a href="/product/<%= p.slug %>" class="card__image-wrap">
+          <% if (onSale) { %>
+            <span class="card__sale-ribbon" aria-hidden="true">
+              <%- include('partials/icon', { name: 'tag', iconSize: 14 }) %>
+              −<%= salePercent(p) %>%
+            </span>
+          <% } %>
           <% if (p.image_url) { %>
             <img src="<%= p.image_url %>" alt="<%= p.name %>" class="card__image" loading="lazy">
           <% } else { %>
@@ -32,11 +39,14 @@
             <span class="card__category"><%= p.category_name %></span>
           <% } %>
           <h2 class="card__title"><a href="/product/<%= p.slug %>"><%= p.name %></a></h2>
-          <%- include('partials/product-price', { product: p }) %>
+          <%- include('partials/product-price', { product: p, priceSize: 'md' }) %>
           <form action="/cart/add" method="post" class="card__form">
             <input type="hidden" name="product_id" value="<%= p.id %>">
             <input type="hidden" name="redirect" value="/cart">
-            <button type="submit" class="btn btn--primary btn--block">В корзину</button>
+            <button type="submit" class="btn btn--primary btn--block">
+              <%- include('partials/icon', { name: 'cart', iconSize: 18 }) %>
+              В корзину
+            </button>
           </form>
         </div>
       </article>

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') { %>
+<svg class="<%= cls %>" width="<%= sz %>" height="<%= sz %>" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/></svg>
+<% } else if (name === 'search') { %>
+<svg class="<%= cls %>" width="<%= sz %>" height="<%= sz %>" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
+<% } else if (name === 'tag') { %>
+<svg class="<%= cls %>" width="<%= sz %>" height="<%= sz %>" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"/><line x1="7" y1="7" x2="7.01" y2="7"/></svg>
+<% } else if (name === 'user') { %>
+<svg class="<%= cls %>" width="<%= sz %>" height="<%= sz %>" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
+<% } else if (name === 'shield') { %>
+<svg class="<%= cls %>" width="<%= sz %>" height="<%= sz %>" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
+<% } else if (name === 'plus') { %>
+<svg class="<%= cls %>" width="<%= sz %>" height="<%= sz %>" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg>
+<% } else if (name === 'trash') { %>
+<svg class="<%= cls %>" width="<%= sz %>" height="<%= sz %>" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
+<% } else if (name === 'clock') { %>
+<svg class="<%= cls %>" width="<%= sz %>" height="<%= sz %>" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
+<% } else if (name === 'arrow-left') { %>
+<svg class="<%= cls %>" width="<%= sz %>" height="<%= sz %>" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m12 19-7-7 7-7M19 12H5"/></svg>
+<% } else if (name === 'package') { %>
+<svg class="<%= cls %>" width="<%= sz %>" height="<%= sz %>" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M16.5 9.4 7.55 4.24M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/></svg>
+<% } %>

src/views/partials/layout-start.ejs

@@ -12,26 +12,40 @@
 <body>
   <header class="header">
     <div class="container header__inner">
-      <a href="/" class="logo">Shop</a>
+      <a href="/" class="logo">
+        <%- include('partials/icon', { name: 'package', iconSize: 22, iconClass: 'logo__icon' }) %>
+        Shop
+      </a>
       <form class="search" action="/" method="get">
+        <span class="search__icon" aria-hidden="true"><%- include('partials/icon', { name: 'search', iconSize: 18 }) %></span>
         <input type="search" name="q" placeholder="Поиск товаров…" value="<%= typeof searchQuery !== 'undefined' ? searchQuery : '' %>" aria-label="Поиск">
-        <button type="submit" class="btn btn--ghost">Найти</button>
+        <button type="submit" class="btn btn--ghost btn--icon-text">Найти</button>
       </form>
       <nav class="nav">
-        <a href="/cart" class="nav__link nav__cart">
+        <a href="/cart" class="nav__link nav__cart nav__link--icon">
-          Корзина
+          <%- include('partials/icon', { name: 'cart', iconSize: 18 }) %>
+          <span>Корзина</span>
           <% if (cartCount > 0) { %><span class="badge"><%= cartCount %></span><% } %>
         </a>
         <% if (user) { %>
           <% if (typeof isAdmin !== 'undefined' && isAdmin) { %>
-            <a href="/admin" class="nav__link nav__admin">Админ</a>
+            <a href="/admin" class="nav__link nav__link--icon nav__admin">
+              <%- include('partials/icon', { name: 'shield', iconSize: 18 }) %>
+              <span>Админ</span>
+            </a>
           <% } %>
-          <a href="/account" class="nav__link"><%= user.name %></a>
+          <a href="/account" class="nav__link nav__link--icon">
+            <%- include('partials/icon', { name: 'user', iconSize: 18 }) %>
+            <span><%= user.name %></span>
+          </a>
           <form action="/logout" method="post" class="inline-form">
             <button type="submit" class="btn btn--ghost btn--sm">Выйти</button>
           </form>
         <% } else if (cookieConsent) { %>
-          <a href="/login" class="nav__link">Вход</a>
+          <a href="/login" class="nav__link nav__link--icon">
+            <%- include('partials/icon', { name: 'user', iconSize: 18 }) %>
+            <span>Вход</span>
+          </a>
           <a href="/register" class="btn btn--primary btn--sm">Регистрация</a>
         <% } else { %>
           <span class="nav__link nav__link--disabled" title="Примите cookies">Вход</span>

src/views/partials/product-price.ejs

@@ -1,11 +1,33 @@
-<% const onSale = typeof isSaleActive === 'function' && isSaleActive(product); %>
+<%
-<% const eff = typeof effectivePrice === 'function' ? effectivePrice(product) : product.price_cents; %>
+  const onSale = typeof forceOnSale !== 'undefined'
-<p class="price-block<%= onSale ? ' price-block--sale' : '' %>">
+    ? forceOnSale
+    : (typeof isSaleActive === 'function' && isSaleActive(product));
+  const eff = typeof forceEffective !== 'undefined'
+    ? forceEffective
+    : (typeof effectivePrice === 'function' ? effectivePrice(product) : product.price_cents);
+  const oldCents = product.price_cents;
+  const pct = onSale && typeof salePercent === 'function'
+    ? salePercent(product)
+    : (onSale && oldCents ? Math.round(((oldCents - eff) / oldCents) * 100) : 0);
+  const sizeMod = typeof priceSize !== 'undefined' ? ' price-block--' + priceSize : '';
+%>
+<div class="price-block<%= sizeMod %><%= onSale ? ' price-block--sale' : '' %>" role="group" aria-label="<%= onSale ? 'Цена со скидкой' : 'Цена' %>">
   <% if (onSale) { %>
-    <span class="price-block__old"><%= formatPrice(product.price_cents) %></span>
+    <div class="price-block__meta">
-    <span class="price-block__current"><%= formatPrice(eff) %></span>
+      <span class="price-block__tag">
-    <span class="badge badge--sale">−<%= salePercent(product) %>%</span>
+        <%- include('partials/icon', { name: 'tag', iconSize: 12 }) %>
+        Акция
+      </span>
+      <span class="price-block__badge">−<%= pct %>%</span>
+    </div>
+    <div class="price-block__prices">
+      <span class="price-block__old" aria-label="Старая цена"><%= formatPrice(oldCents) %></span>
+      <span class="price-block__current" aria-label="Цена со скидкой"><%= formatPrice(eff) %></span>
+    </div>
+    <% if (typeof showSavings !== 'undefined' && showSavings) { %>
+      <span class="price-block__savings">Экономия <%= formatPrice(oldCents - eff) %></span>
+    <% } %>
   <% } else { %>
-    <span class="price-block__current"><%= formatPrice(product.price_cents) %></span>
+    <span class="price-block__current price-block__current--solo"><%= formatPrice(oldCents) %></span>
   <% } %>
-</p>
+</div>

src/views/product.ejs

@@ -14,11 +14,12 @@
     <% } %>
     <h1><%= product.name %></h1>
     <div class="product-detail__price">
-      <%- include('partials/product-price', { product }) %>
+      <%- include('partials/product-price', { product, priceSize: 'lg', showSavings: true }) %>
       <% if (isSaleActive(product) && product.sale_ends_at) { %>
-        <div class="promo-countdown" data-expires="<%= product.sale_ends_at %>">
+        <p class="promo-countdown promo-countdown--product" data-expires="<%= product.sale_ends_at %>">
-          Акция заканчивается: <span class="promo-countdown__timer">—</span>
+          <%- include('partials/icon', { name: 'clock', iconSize: 16 }) %>
-        </div>
+          <span>Акция заканчивается: <strong class="promo-countdown__timer">—</strong></span>
+        </p>
       <% } %>
     </div>
     <p class="product-detail__desc"><%= product.description %></p>
@@ -43,7 +44,10 @@
           <input type="number" name="quantity" value="1" min="1" max="<%= product.stock %>" class="input input--qty">
         </label>
         <input type="hidden" name="redirect" value="/cart">
-        <button type="submit" class="btn btn--primary btn--lg">Добавить в корзину</button>
+        <button type="submit" class="btn btn--primary btn--lg">
+          <%- include('partials/icon', { name: 'cart', iconSize: 20 }) %>
+          Добавить в корзину
+        </button>
       </form>
 
       <% if (user && !userReservation) { %>
@@ -87,7 +91,10 @@
         </section>
       <% } %>
     <% } %>
-    <a href="/" class="link-back">← Назад в каталог</a>
+    <a href="/" class="link-back">
+      <%- include('partials/icon', { name: 'arrow-left', iconSize: 16 }) %>
+      Назад в каталог
+    </a>
   </div>
 </article>