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 `
+ ${discount > 0 ? '
-' + discount + '%
' : ''} ${p.name}

${p.name}

${p.desc}

-
${p.price.toLocaleString()} ₸
+
+ ${p.oldPrice ? '' + p.oldPrice.toLocaleString() + ' ₸ ' : ''} + ${p.price.toLocaleString()} ₸ +
- `).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 {