From e166b0550ae4d084d0bda4fe88315fddf858faf4 Mon Sep 17 00:00:00 2001
From: Katubaeva <78_Guma@mail.ru>
Date: Fri, 28 Aug 2026 09:54:31 +0000
Subject: [PATCH] =?UTF-8?q?=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8=D0=BB=20?=
 =?UTF-8?q?=D1=81=D0=BA=D0=B8=D0=B4=D0=BA=D0=B8=20=D0=BD=D0=B0=20=D1=82?=
 =?UTF-8?q?=D0=BE=D0=B2=D0=B0=D1=80=D1=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 script.js | 18 +++++++++++++++---
 style.css | 24 ++++++++++++++++++++++++
 2 files changed, 39 insertions(+), 3 deletions(-)

diff --git a/script.js b/script.js
index cb72ed4..1bfaea1 100644
--- a/script.js
+++ b/script.js
@@ -3,6 +3,7 @@ const products = [
     id: 1,
     name: "Сумка классическая",
     price: 12900,
+    oldPrice: 16900,
     desc: "Элегантная сумка из экокожи премиум класса",
     image: "https://images.unsplash.com/photo-1584917865442-de89df76afd3?w=600"
   },
@@ -10,6 +11,7 @@ const products = [
     id: 2,
     name: "Сумка кросс-боди",
     price: 8900,
+    oldPrice: 11900,
     desc: "Компактная сумка через плечо на каждый день",
     image: "https://images.unsplash.com/photo-1548036328-c9fa89d128fa?w=600"
   },
@@ -24,6 +26,7 @@ const products = [
     id: 4,
     name: "Клатч вечерний",
     price: 6900,
+    oldPrice: 9900,
     desc: "Изысканный клатч для особых случаев",
     image: "https://images.unsplash.com/photo-1566150905458-1bf1dad1f565?w=600"
   },
@@ -31,6 +34,7 @@ const products = [
     id: 5,
     name: "Рюкзак городской",
     price: 11900,
+    oldPrice: 14900,
     desc: "Стильный рюкзак для города и путешествий",
     image: "https://images.unsplash.com/photo-1553062407-98eeb64c6a62?w=600"
   },
@@ -45,6 +49,7 @@ const products = [
     id: 7,
     name: "Сумка седло",
     price: 10900,
+    oldPrice: 13900,
     desc: "Трендовая сумка в форме седла",
     image: "https://images.unsplash.com/photo-1575207365668-42a2021e5a6b?w=600"
   },
@@ -61,17 +66,24 @@ let cart = [];
 
 function renderProducts() {
   const grid = document.getElementById('productsGrid');
-  grid.innerHTML = products.map(p => `
+  grid.innerHTML = products.map(p => {
+    const discount = p.oldPrice ? Math.round((1 - p.price / p.oldPrice) * 100) : 0;
+    return `
     <div class="product-card">
+      ${discount > 0 ? '<div class="sale-badge">-' + discount + '%</div>' : ''}
       <img src="${p.image}" alt="${p.name}" class="product-image">
       <div class="product-info">
         <h3 class="product-name">${p.name}</h3>
         <p class="product-desc">${p.desc}</p>
-        <div class="product-price">${p.price.toLocaleString()} ₸</div>
+        <div class="product-price">
+          ${p.oldPrice ? '<span class="old-price">' + p.oldPrice.toLocaleString() + ' ₸</span> ' : ''}
+          ${p.price.toLocaleString()} ₸
+        </div>
         <button class="add-to-cart" onclick="addToCart(${p.id})">В корзину</button>
       </div>
     </div>
-  `).join('');
+  `;
+  }).join('');
 }
 
 function addToCart(id) {
diff --git a/style.css b/style.css
index 709ff5d..aabe837 100644
--- a/style.css
+++ b/style.css
@@ -163,6 +163,7 @@ section {
   overflow: hidden;
   box-shadow: var(--shadow);
   transition: transform 0.3s, box-shadow 0.3s;
+  position: relative;
 }
 
 .product-card:hover {
@@ -170,6 +171,19 @@ section {
   box-shadow: 0 8px 20px rgba(0,0,0,0.12);
 }
 
+.sale-badge {
+  position: absolute;
+  top: 12px;
+  left: 12px;
+  background: #e74c3c;
+  color: var(--white);
+  padding: 6px 12px;
+  border-radius: 20px;
+  font-weight: 700;
+  font-size: 14px;
+  z-index: 10;
+}
+
 .product-image {
   width: 100%;
   height: 280px;
@@ -200,6 +214,16 @@ section {
   font-weight: 700;
   color: var(--primary);
   margin-bottom: 15px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.old-price {
+  text-decoration: line-through;
+  color: var(--text-light);
+  font-size: 16px;
+  font-weight: 400;
 }
 
 .add-to-cart {