755 lines
47 KiB
HTML
755 lines
47 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru" data-theme="auto">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>Balapan Shop - детские товары</title>
|
||
<link rel="stylesheet" href="design-system/kt-ai-fonts.css">
|
||
<link rel="stylesheet" href="design-system/kt-ai-tokens.css">
|
||
<link rel="stylesheet" href="design-system/kt-ai-components.css">
|
||
<link rel="stylesheet" href="design-system/kt-ai-page.css">
|
||
<link rel="icon" href="design-system/brand/kt-ai-logo.png">
|
||
<style>
|
||
a.kt-ai-btn { text-decoration: none; }
|
||
.category-filter { display: flex; gap: var(--kt-ai-space-2); flex-wrap: wrap; margin-bottom: var(--kt-ai-space-6); }
|
||
.age-section { margin-bottom: var(--kt-ai-space-10); }
|
||
.age-title { font-size: var(--kt-ai-text-2xl); font-weight: var(--kt-ai-weight-semibold); margin-bottom: var(--kt-ai-space-6); }
|
||
.products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--kt-ai-space-5); }
|
||
.product-card { border-radius: var(--kt-ai-radius-2xl); overflow: hidden; transition: transform 0.2s; }
|
||
.product-card:hover { transform: translateY(-4px); }
|
||
.product-img { width: 100%; height: 240px; object-fit: cover; background: var(--kt-ai-bg-soft); }
|
||
.product-info { padding: var(--kt-ai-space-4); }
|
||
.product-price { font-weight: var(--kt-ai-weight-semibold); color: var(--kt-ai-primary); font-size: var(--kt-ai-text-lg); }
|
||
.gender-badge { display: inline-block; padding: var(--kt-ai-space-1) var(--kt-ai-space-3); border-radius: var(--kt-ai-radius-full); font-size: var(--kt-ai-text-xs); font-weight: var(--kt-ai-weight-medium); margin-bottom: var(--kt-ai-space-2); }
|
||
.gender-boy { background: var(--kt-ai-bg-soft); color: var(--kt-ai-primary); }
|
||
.gender-girl { background: var(--kt-ai-bg-soft); color: var(--kt-ai-danger); }
|
||
.gender-unisex { background: var(--kt-ai-bg-soft); color: var(--kt-ai-fg-muted); }
|
||
.contact-form { max-width: 520px; margin: 0 auto; }
|
||
.form-group { margin-bottom: var(--kt-ai-space-4); }
|
||
.hidden { display: none; }
|
||
.cart-icon-wrap { position: relative; }
|
||
.cart-count { position: absolute; top: -8px; right: -8px; background: var(--kt-ai-danger); color: white; border-radius: 50%; width: 20px; height: 20px; font-size: var(--kt-ai-text-xs); display: flex; align-items: center; justify-content: center; }
|
||
.size-badge { display: inline-block; padding: var(--kt-ai-space-1) var(--kt-ai-space-2); background: var(--kt-ai-bg-soft); border-radius: var(--kt-ai-radius-md); font-size: var(--kt-ai-text-xs); margin-right: var(--kt-ai-space-2); margin-bottom: var(--kt-ai-space-2); }
|
||
.promo-banner { background: linear-gradient(135deg, var(--kt-ai-primary), var(--kt-ai-link)); color: white; padding: var(--kt-ai-space-8); border-radius: var(--kt-ai-radius-2xl); text-align: center; margin-bottom: var(--kt-ai-space-8); }
|
||
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--kt-ai-space-6); }
|
||
.blog-card { overflow: hidden; border-radius: var(--kt-ai-radius-2xl); }
|
||
.blog-img { width: 100%; height: 200px; object-fit: cover; }
|
||
.chat-widget { position: fixed; bottom: 24px; right: 24px; z-index: 1000; }
|
||
.chat-btn { width: 60px; height: 60px; border-radius: 50%; background: var(--kt-ai-primary); color: white; border: none; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.15); display: flex; align-items: center; justify-content: center; }
|
||
.chat-window { position: fixed; bottom: 100px; right: 24px; width: 320px; background: var(--kt-ai-card-bg); border: 1px solid var(--kt-ai-border); border-radius: var(--kt-ai-radius-2xl); padding: var(--kt-ai-space-4); box-shadow: 0 8px 24px rgba(0,0,0,0.12); display: none; }
|
||
.chat-window.open { display: block; }
|
||
.social-links { display: flex; gap: var(--kt-ai-space-3); justify-content: center; margin-top: var(--kt-ai-space-4); }
|
||
.social-btn { width: 44px; height: 44px; border-radius: 50%; background: var(--kt-ai-bg-soft); display: flex; align-items: center; justify-content: center; transition: transform 0.2s; }
|
||
.social-btn:hover { transform: scale(1.1); }
|
||
.delivery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--kt-ai-space-6); margin-top: var(--kt-ai-space-6); }
|
||
.guarantee-item { display: flex; gap: var(--kt-ai-space-3); align-items: flex-start; margin-bottom: var(--kt-ai-space-4); }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<header class="kt-ai-pagehead">
|
||
<div class="kt-ai-wrap kt-ai-pagehead-in">
|
||
<div style="display:flex;align-items:center;gap:var(--kt-ai-space-2)">
|
||
<img src="design-system/brand/kt-ai-logo.png" alt="logo" height="24">
|
||
<strong>Balapan Shop</strong>
|
||
</div>
|
||
<span class="kt-ai-spacer"></span>
|
||
<a class="kt-ai-btn" data-variant="ghost" href="#catalog">Каталог</a>
|
||
<a class="kt-ai-btn" data-variant="ghost" href="#blog">Блог</a>
|
||
<a class="kt-ai-btn" data-variant="ghost" href="#about">О нас</a>
|
||
<div class="cart-icon-wrap">
|
||
<button class="kt-ai-btn" data-variant="ghost" onclick="toggleCart()" style="position:relative">
|
||
<svg class="kt-icon" style="vertical-align:middle;margin-right:var(--kt-ai-space-1)"><use href="#layers"></use></svg>
|
||
Корзина
|
||
<span id="cartCount" class="cart-count">0</span>
|
||
</button>
|
||
</div>
|
||
<a class="kt-ai-btn" data-variant="primary" href="#contacts">Контакты</a>
|
||
</div>
|
||
</header>
|
||
|
||
<section class="kt-ai-hero" data-align="center">
|
||
<div class="kt-ai-wrap">
|
||
<h1>Детские товары для каждого возраста</h1>
|
||
<p class="kt-ai-hero-sub">Одежда, обувь, игрушки и питание для детей от 0 до 10 лет. Всё лучшее для ваших малышей!</p>
|
||
<div class="kt-ai-hero-actions">
|
||
<a class="kt-ai-btn" data-variant="primary" data-size="lg" href="#catalog">Перейти в каталог</a>
|
||
<a class="kt-ai-btn" data-size="lg" href="#contacts">Связаться с нами</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="about" class="kt-ai-section" data-divider="true">
|
||
<div class="kt-ai-wrap">
|
||
<div class="kt-ai-section-head">
|
||
<h2>Почему выбирают нас</h2>
|
||
<p>Мы заботимся о качестве и безопасности детских товаров</p>
|
||
</div>
|
||
<div class="kt-ai-grid" style="margin-top:var(--kt-ai-space-9)">
|
||
<article class="kt-ai-tile">
|
||
<div class="kt-ai-tile-icon"><svg class="kt-icon kt-icon-lg"><use href="#check-circle"></use></svg></div>
|
||
<h3>Сертифицированное качество</h3>
|
||
<p>Все товары имеют сертификаты соответствия и безопасны для детей</p>
|
||
</article>
|
||
<article class="kt-ai-tile">
|
||
<div class="kt-ai-tile-icon"><svg class="kt-icon kt-icon-lg"><use href="#package"></use></svg></div>
|
||
<h3>Быстрая доставка</h3>
|
||
<p>Доставляем по городу в день заказа, по стране — 2-3 дня</p>
|
||
</article>
|
||
<article class="kt-ai-tile">
|
||
<div class="kt-ai-tile-icon"><svg class="kt-icon kt-icon-lg"><use href="#refresh"></use></svg></div>
|
||
<h3>Лёгкий возврат</h3>
|
||
<p>Можно вернуть или обменять товар в течение 14 дней</p>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="catalog" class="kt-ai-section" data-divider="true">
|
||
<div class="kt-ai-wrap" data-width="wide">
|
||
<div class="kt-ai-section-head">
|
||
<h2>Каталог товаров</h2>
|
||
<p>Выбирайте товары по возрасту и категории</p>
|
||
</div>
|
||
|
||
<div style="margin-top:var(--kt-ai-space-6);margin-bottom:var(--kt-ai-space-6)">
|
||
<div class="category-filter">
|
||
<button class="kt-ai-btn" data-variant="primary" onclick="filterCategory('all')">Все товары</button>
|
||
<button class="kt-ai-btn" data-variant="ghost" onclick="filterCategory('обувь')">Обувь</button>
|
||
<button class="kt-ai-btn" data-variant="ghost" onclick="filterCategory('верхняя одежда')">Одежда</button>
|
||
<button class="kt-ai-btn" data-variant="ghost" onclick="filterCategory('головные уборы')">Головные уборы</button>
|
||
<button class="kt-ai-btn" data-variant="ghost" onclick="filterCategory('питание')">Питание</button>
|
||
<button class="kt-ai-btn" data-variant="ghost" onclick="filterCategory('игрушки')">Игрушки</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="age-0-3" class="age-section">
|
||
<h3 class="age-title"><svg class="kt-icon" style="vertical-align:middle;margin-right:var(--kt-ai-space-2)"><use href="#users"></use></svg>0-3 года</h3>
|
||
<div class="products-grid">
|
||
<article class="kt-ai-card product-card" data-category="питание">
|
||
<img src="https://loremflickr.com/400/300/baby,food" alt="Детское питание" class="product-img">
|
||
<div class="product-info">
|
||
<span class="gender-badge gender-unisex">Универсальный</span>
|
||
<h4>Детское питание Hipp</h4>
|
||
<p class="product-price">2 500 ₸</p>
|
||
<p style="font-size:var(--kt-ai-text-sm);color:var(--kt-ai-fg-muted)">Германия • Натуральные ингредиенты</p>
|
||
<div style="margin-top:var(--kt-ai-space-2);margin-bottom:var(--kt-ai-space-3)">
|
||
<span class="size-badge">200 г</span>
|
||
</div>
|
||
<button class="kt-ai-btn" data-variant="primary" style="width:100%" onclick="addToCart('Детское питание Hipp', 2500)">В корзину</button>
|
||
</div>
|
||
</article>
|
||
<article class="kt-ai-card product-card" data-category="обувь">
|
||
<img src="https://loremflickr.com/400/300/baby,shoes" alt="Пинетки" class="product-img">
|
||
<div class="product-info">
|
||
<span class="gender-badge gender-girl">Для девочек</span>
|
||
<h4>Пинетки вязаные</h4>
|
||
<p class="product-price">3 200 ₸</p>
|
||
<p style="font-size:var(--kt-ai-text-sm);color:var(--kt-ai-fg-muted)">Турция • 100% хлопок</p>
|
||
<div style="margin-top:var(--kt-ai-space-2);margin-bottom:var(--kt-ai-space-3)">
|
||
<span class="size-badge">0-6 мес</span>
|
||
<span class="size-badge">6-12 мес</span>
|
||
</div>
|
||
<button class="kt-ai-btn" data-variant="primary" style="width:100%" onclick="addToCart('Пинетки вязаные', 3200)">В корзину</button>
|
||
</div>
|
||
</article>
|
||
<article class="kt-ai-card product-card" data-category="игрушки">
|
||
<img src="https://loremflickr.com/400/300/baby,toy" alt="Развивающая игрушка" class="product-img">
|
||
<div class="product-info">
|
||
<span class="gender-badge gender-unisex">Универсальный</span>
|
||
<h4>Развивающий коврик</h4>
|
||
<p class="product-price">12 900 ₸</p>
|
||
<p style="font-size:var(--kt-ai-text-sm);color:var(--kt-ai-fg-muted)">Китай • Полиэстер, пластик</p>
|
||
<div style="margin-top:var(--kt-ai-space-2);margin-bottom:var(--kt-ai-space-3)">
|
||
<span class="size-badge">80х100 см</span>
|
||
</div>
|
||
<button class="kt-ai-btn" data-variant="primary" style="width:100%" onclick="addToCart('Развивающий коврик', 12900)">В корзину</button>
|
||
</div>
|
||
</article>
|
||
<article class="kt-ai-card product-card" data-category="головные уборы">
|
||
<img src="https://loremflickr.com/400/300/baby,hat" alt="Шапочка" class="product-img">
|
||
<div class="product-info">
|
||
<span class="gender-badge gender-boy">Для мальчиков</span>
|
||
<h4>Шапочка трикотажная</h4>
|
||
<p class="product-price">1 800 ₸</p>
|
||
<p style="font-size:var(--kt-ai-text-sm);color:var(--kt-ai-fg-muted)">Казахстан • Хлопок 95%, эластан 5%</p>
|
||
<div style="margin-top:var(--kt-ai-space-2);margin-bottom:var(--kt-ai-space-3)">
|
||
<span class="size-badge">36-38</span>
|
||
<span class="size-badge">39-41</span>
|
||
</div>
|
||
<button class="kt-ai-btn" data-variant="primary" style="width:100%" onclick="addToCart('Шапочка трикотажная', 1800)">В корзину</button>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="age-4-6" class="age-section">
|
||
<h3 class="age-title"><svg class="kt-icon" style="vertical-align:middle;margin-right:var(--kt-ai-space-2)"><use href="#users"></use></svg>4-6 лет</h3>
|
||
<div class="products-grid">
|
||
<article class="kt-ai-card product-card" data-category="обувь">
|
||
<img src="https://loremflickr.com/400/300/kids,sneakers" alt="Кроссовки" class="product-img">
|
||
<div class="product-info">
|
||
<span class="gender-badge gender-boy">Для мальчиков</span>
|
||
<h4>Кроссовки детские</h4>
|
||
<p class="product-price">8 900 ₸</p>
|
||
<p style="font-size:var(--kt-ai-text-sm);color:var(--kt-ai-fg-muted)">Китай • Экокожа, текстиль</p>
|
||
<div style="margin-top:var(--kt-ai-space-2);margin-bottom:var(--kt-ai-space-3)">
|
||
<span class="size-badge">28</span>
|
||
<span class="size-badge">29</span>
|
||
<span class="size-badge">30</span>
|
||
<span class="size-badge">31</span>
|
||
</div>
|
||
<button class="kt-ai-btn" data-variant="primary" style="width:100%" onclick="addToCart('Кроссовки детские', 8900)">В корзину</button>
|
||
</div>
|
||
</article>
|
||
<article class="kt-ai-card product-card" data-category="верхняя одежда">
|
||
<img src="https://loremflickr.com/400/300/kids,jacket" alt="Куртка" class="product-img">
|
||
<div class="product-info">
|
||
<span class="gender-badge gender-girl">Для девочек</span>
|
||
<h4>Куртка осенняя</h4>
|
||
<p class="product-price">15 500 ₸</p>
|
||
<p style="font-size:var(--kt-ai-text-sm);color:var(--kt-ai-fg-muted)">Турция • Полиэстер, утеплитель био-пух</p>
|
||
<div style="margin-top:var(--kt-ai-space-2);margin-bottom:var(--kt-ai-space-3)">
|
||
<span class="size-badge">110</span>
|
||
<span class="size-badge">116</span>
|
||
<span class="size-badge">122</span>
|
||
</div>
|
||
<button class="kt-ai-btn" data-variant="primary" style="width:100%" onclick="addToCart('Куртка осенняя', 15500)">В корзину</button>
|
||
</div>
|
||
</article>
|
||
<article class="kt-ai-card product-card" data-category="игрушки">
|
||
<img src="https://loremflickr.com/400/300/toy,doll" alt="Кукла" class="product-img">
|
||
<div class="product-info">
|
||
<span class="gender-badge gender-girl">Для девочек</span>
|
||
<h4>Кукла с аксессуарами</h4>
|
||
<p class="product-price">6 700 ₸</p>
|
||
<p style="font-size:var(--kt-ai-text-sm);color:var(--kt-ai-fg-muted)">Китай • Пластик, текстиль</p>
|
||
<div style="margin-top:var(--kt-ai-space-2);margin-bottom:var(--kt-ai-space-3)">
|
||
<span class="size-badge">30 см</span>
|
||
</div>
|
||
<button class="kt-ai-btn" data-variant="primary" style="width:100%" onclick="addToCart('Кукла с аксессуарами', 6700)">В корзину</button>
|
||
</div>
|
||
</article>
|
||
<article class="kt-ai-card product-card" data-category="головные уборы">
|
||
<img src="https://loremflickr.com/400/300/kids,cap" alt="Кепка" class="product-img">
|
||
<div class="product-info">
|
||
<span class="gender-badge gender-unisex">Универсальный</span>
|
||
<h4>Кепка с козырьком</h4>
|
||
<p class="product-price">2 100 ₸</p>
|
||
<p style="font-size:var(--kt-ai-text-sm);color:var(--kt-ai-fg-muted)">Казахстан • Хлопок 100%</p>
|
||
<div style="margin-top:var(--kt-ai-space-2);margin-bottom:var(--kt-ai-space-3)">
|
||
<span class="size-badge">50-52</span>
|
||
<span class="size-badge">52-54</span>
|
||
</div>
|
||
<button class="kt-ai-btn" data-variant="primary" style="width:100%" onclick="addToCart('Кепка с козырьком', 2100)">В корзину</button>
|
||
</div>
|
||
</article>
|
||
<article class="kt-ai-card product-card" data-category="питание">
|
||
<img src="https://loremflickr.com/400/300/juice,kids" alt="Сок" class="product-img">
|
||
<div class="product-info">
|
||
<span class="gender-badge gender-unisex">Универсальный</span>
|
||
<h4>Сок детский (упаковка)</h4>
|
||
<p class="product-price">1 200 ₸</p>
|
||
<p style="font-size:var(--kt-ai-text-sm);color:var(--kt-ai-fg-muted)">Казахстан • Натуральный сок, без сахара</p>
|
||
<div style="margin-top:var(--kt-ai-space-2);margin-bottom:var(--kt-ai-space-3)">
|
||
<span class="size-badge">200 мл</span>
|
||
</div>
|
||
<button class="kt-ai-btn" data-variant="primary" style="width:100%" onclick="addToCart('Сок детский', 1200)">В корзину</button>
|
||
</div>
|
||
</article>
|
||
<article class="kt-ai-card product-card" data-category="игрушки">
|
||
<img src="https://loremflickr.com/400/300/toy,car" alt="Машинка" class="product-img">
|
||
<div class="product-info">
|
||
<span class="gender-badge gender-boy">Для мальчиков</span>
|
||
<h4>Конструктор Lego</h4>
|
||
<p class="product-price">9 500 ₸</p>
|
||
<p style="font-size:var(--kt-ai-text-sm);color:var(--kt-ai-fg-muted)">Дания • ABS-пластик</p>
|
||
<div style="margin-top:var(--kt-ai-space-2);margin-bottom:var(--kt-ai-space-3)">
|
||
<span class="size-badge">150 дет.</span>
|
||
</div>
|
||
<button class="kt-ai-btn" data-variant="primary" style="width:100%" onclick="addToCart('Конструктор Lego', 9500)">В корзину</button>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="age-7-10" class="age-section">
|
||
<h3 class="age-title"><svg class="kt-icon" style="vertical-align:middle;margin-right:var(--kt-ai-space-2)"><use href="#users"></use></svg>7-10 лет</h3>
|
||
<div class="products-grid">
|
||
<article class="kt-ai-card product-card" data-category="обувь">
|
||
<img src="https://loremflickr.com/400/300/sneakers,teen" alt="Ботинки" class="product-img">
|
||
<div class="product-info">
|
||
<span class="gender-badge gender-boy">Для мальчиков</span>
|
||
<h4>Ботинки школьные</h4>
|
||
<p class="product-price">11 200 ₸</p>
|
||
<p style="font-size:var(--kt-ai-text-sm);color:var(--kt-ai-fg-muted)">Россия • Натуральная кожа, текстиль</p>
|
||
<div style="margin-top:var(--kt-ai-space-2);margin-bottom:var(--kt-ai-space-3)">
|
||
<span class="size-badge">32</span>
|
||
<span class="size-badge">33</span>
|
||
<span class="size-badge">34</span>
|
||
<span class="size-badge">35</span>
|
||
<span class="size-badge">36</span>
|
||
</div>
|
||
<button class="kt-ai-btn" data-variant="primary" style="width:100%" onclick="addToCart('Ботинки школьные', 11200)">В корзину</button>
|
||
</div>
|
||
</article>
|
||
<article class="kt-ai-card product-card" data-category="верхняя одежда">
|
||
<img src="https://loremflickr.com/400/300/coat,kids" alt="Пальто" class="product-img">
|
||
<div class="product-info">
|
||
<span class="gender-badge gender-girl">Для девочек</span>
|
||
<h4>Пальто демисезонное</h4>
|
||
<p class="product-price">18 900 ₸</p>
|
||
<p style="font-size:var(--kt-ai-text-sm);color:var(--kt-ai-fg-muted)">Турция • Шерсть 70%, полиэстер 30%</p>
|
||
<div style="margin-top:var(--kt-ai-space-2);margin-bottom:var(--kt-ai-space-3)">
|
||
<span class="size-badge">128</span>
|
||
<span class="size-badge">134</span>
|
||
<span class="size-badge">140</span>
|
||
<span class="size-badge">146</span>
|
||
</div>
|
||
<button class="kt-ai-btn" data-variant="primary" style="width:100%" onclick="addToCart('Пальто демисезонное', 18900)">В корзину</button>
|
||
</div>
|
||
</article>
|
||
<article class="kt-ai-card product-card" data-category="игрушки">
|
||
<img src="https://loremflickr.com/400/300/board,game" alt="Настольная игра" class="product-img">
|
||
<div class="product-info">
|
||
<span class="gender-badge gender-unisex">Универсальный</span>
|
||
<h4>Настольная игра</h4>
|
||
<p class="product-price">5 400 ₸</p>
|
||
<p style="font-size:var(--kt-ai-text-sm);color:var(--kt-ai-fg-muted)">США • Картон, пластик</p>
|
||
<div style="margin-top:var(--kt-ai-space-2);margin-bottom:var(--kt-ai-space-3)">
|
||
<span class="size-badge">6+ лет</span>
|
||
</div>
|
||
<button class="kt-ai-btn" data-variant="primary" style="width:100%" onclick="addToCart('Настольная игра', 5400)">В корзину</button>
|
||
</div>
|
||
</article>
|
||
<article class="kt-ai-card product-card" data-category="головные уборы">
|
||
<img src="https://loremflickr.com/400/300/beanie,kids" alt="Шапка" class="product-img">
|
||
<div class="product-info">
|
||
<span class="gender-badge gender-unisex">Универсальный</span>
|
||
<h4>Шапка зимняя</h4>
|
||
<p class="product-price">3 500 ₸</p>
|
||
<p style="font-size:var(--kt-ai-text-sm);color:var(--kt-ai-fg-muted)">Казахстан • Шерсть 50%, акрил 50%</p>
|
||
<div style="margin-top:var(--kt-ai-space-2);margin-bottom:var(--kt-ai-space-3)">
|
||
<span class="size-badge">52-54</span>
|
||
<span class="size-badge">54-56</span>
|
||
</div>
|
||
<button class="kt-ai-btn" data-variant="primary" style="width:100%" onclick="addToCart('Шапка зимняя', 3500)">В корзину</button>
|
||
</div>
|
||
</article>
|
||
<article class="kt-ai-card product-card" data-category="питание">
|
||
<img src="https://loremflickr.com/400/300/cereal,kids" alt="Каша" class="product-img">
|
||
<div class="product-info">
|
||
<span class="gender-badge gender-unisex">Универсальный</span>
|
||
<h4>Каша овсяная с фруктами</h4>
|
||
<p class="product-price">1 800 ₸</p>
|
||
<p style="font-size:var(--kt-ai-text-sm);color:var(--kt-ai-fg-muted)">Финляндия • Овсяные хлопья, сухофрукты</p>
|
||
<div style="margin-top:var(--kt-ai-space-2);margin-bottom:var(--kt-ai-space-3)">
|
||
<span class="size-badge">300 г</span>
|
||
</div>
|
||
<button class="kt-ai-btn" data-variant="primary" style="width:100%" onclick="addToCart('Каша овсяная', 1800)">В корзину</button>
|
||
</div>
|
||
</article>
|
||
<article class="kt-ai-card product-card" data-category="игрушки">
|
||
<img src="https://loremflickr.com/400/300/puzzle,kids" alt="Пазл" class="product-img">
|
||
<div class="product-info">
|
||
<span class="gender-badge gender-girl">Для девочек</span>
|
||
<h4>Пазл 500 элементов</h4>
|
||
<p class="product-price">3 900 ₸</p>
|
||
<p style="font-size:var(--kt-ai-text-sm);color:var(--kt-ai-fg-muted)">Германия • Картон повышенной прочности</p>
|
||
<div style="margin-top:var(--kt-ai-space-2);margin-bottom:var(--kt-ai-space-3)">
|
||
<span class="size-badge">500 эл.</span>
|
||
</div>
|
||
<button class="kt-ai-btn" data-variant="primary" style="width:100%" onclick="addToCart('Пазл 500 элементов', 3900)">В корзину</button>
|
||
</div>
|
||
</article>
|
||
<article class="kt-ai-card product-card" data-category="игрушки">
|
||
<img src="https://loremflickr.com/400/300/robot,toy" alt="Робот" class="product-img">
|
||
<div class="product-info">
|
||
<span class="gender-badge gender-boy">Для мальчиков</span>
|
||
<h4>Робот на радиоуправлении</h4>
|
||
<p class="product-price">14 500 ₸</p>
|
||
<p style="font-size:var(--kt-ai-text-sm);color:var(--kt-ai-fg-muted)">Китай • Пластик, электроника</p>
|
||
<div style="margin-top:var(--kt-ai-space-2);margin-bottom:var(--kt-ai-space-3)">
|
||
<span class="size-badge">8+</span>
|
||
</div>
|
||
<button class="kt-ai-btn" data-variant="primary" style="width:100%" onclick="addToCart('Робот на радиоуправлении', 14500)">В корзину</button>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<section class="kt-ai-section" data-divider="true">
|
||
<div class="kt-ai-wrap" data-width="wide">
|
||
<div class="kt-ai-section-head">
|
||
<h2>Отзывы покупателей</h2>
|
||
<p>Что говорят наши клиенты о покупках в Balapan Shop</p>
|
||
</div>
|
||
<div class="kt-ai-grid" style="margin-top:var(--kt-ai-space-9)" data-cols="3">
|
||
<article class="kt-ai-card">
|
||
<div style="display:flex;align-items:center;gap:var(--kt-ai-space-3);margin-bottom:var(--kt-ai-space-3)">
|
||
<div style="width:48px;height:48px;border-radius:50%;background:var(--kt-ai-bg-soft);display:flex;align-items:center;justify-content:center;font-size:var(--kt-ai-text-xl);font-weight:var(--kt-ai-weight-bold)">А</div>
|
||
<div>
|
||
<strong>Айгерим К.</strong>
|
||
<p style="font-size:var(--kt-ai-text-sm);color:var(--kt-ai-fg-muted)">Мама двоих детей</p>
|
||
</div>
|
||
</div>
|
||
<p style="color:var(--kt-ai-fg-muted)">Заказывала куртку для дочки 5 лет. Качество отличное, доставка быстрая! Размер подошёл идеально. Спасибо за подарок — маленькую игрушку в коробке!</p>
|
||
<div style="margin-top:var(--kt-ai-space-3);color:var(--kt-ai-primary)">★★★★★</div>
|
||
</article>
|
||
<article class="kt-ai-card">
|
||
<div style="display:flex;align-items:center;gap:var(--kt-ai-space-3);margin-bottom:var(--kt-ai-space-3)">
|
||
<div style="width:48px;height:48px;border-radius:50%;background:var(--kt-ai-bg-soft);display:flex;align-items:center;justify-content:center;font-size:var(--kt-ai-text-xl);font-weight:var(--kt-ai-weight-bold)">Е</div>
|
||
<div>
|
||
<strong>Ержан М.</strong>
|
||
<p style="font-size:var(--kt-ai-text-sm);color:var(--kt-ai-fg-muted)">Папа сына 8 лет</p>
|
||
</div>
|
||
</div>
|
||
<p style="color:var(--kt-ai-fg-muted)">Покупал сыну конструктор и ботинки в школу. Всё пришло в целости, упаковка хорошая. Цены адекватные, качество на высоте. Будем заказывать ещё!</p>
|
||
<div style="margin-top:var(--kt-ai-space-3);color:var(--kt-ai-primary)">★★★★★</div>
|
||
</article>
|
||
<article class="kt-ai-card">
|
||
<div style="display:flex;align-items:center;gap:var(--kt-ai-space-3);margin-bottom:var(--kt-ai-space-3)">
|
||
<div style="width:48px;height:48px;border-radius:50%;background:var(--kt-ai-bg-soft);display:flex;align-items:center;justify-content:center;font-size:var(--kt-ai-text-xl);font-weight:var(--kt-ai-weight-bold)">С</div>
|
||
<div>
|
||
<strong>Светлана В.</strong>
|
||
<p style="font-size:var(--kt-ai-text-sm);color:var(--kt-ai-fg-muted)">Бабушка</p>
|
||
</div>
|
||
</div>
|
||
<p style="color:var(--kt-ai-fg-muted)">Внучке 3 года покупали развивающий коврик и питание. Всё сертифицированное, безопасное. Менеджеры вежливые, помогли с выбором размера. Рекомендую!</p>
|
||
<div style="margin-top:var(--kt-ai-space-3);color:var(--kt-ai-primary)">★★★★☆</div>
|
||
</article>
|
||
<article class="kt-ai-card">
|
||
<div style="display:flex;align-items:center;gap:var(--kt-ai-space-3);margin-bottom:var(--kt-ai-space-3)">
|
||
<div style="width:48px;height:48px;border-radius:50%;background:var(--kt-ai-bg-soft);display:flex;align-items:center;justify-content:center;font-size:var(--kt-ai-text-xl);font-weight:var(--kt-ai-weight-bold)">Д</div>
|
||
<div>
|
||
<strong>Данияр Т.</strong>
|
||
<p style="font-size:var(--kt-ai-text-sm);color:var(--kt-ai-fg-muted)">Папа дочки 6 лет</p>
|
||
</div>
|
||
</div>
|
||
<p style="color:var(--kt-ai-fg-muted)">Хороший магазин! Заказ оформили быстро, перезвонили через 10 минут. Пальто для дочери качественное, швы ровные. Доставка заняла 2 дня. Остался доволен!</p>
|
||
<div style="margin-top:var(--kt-ai-space-3);color:var(--kt-ai-primary)">★★★★★</div>
|
||
</article>
|
||
<article class="kt-ai-card">
|
||
<div style="display:flex;align-items:center;gap:var(--kt-ai-space-3);margin-bottom:var(--kt-ai-space-3)">
|
||
<div style="width:48px;height:48px;border-radius:50%;background:var(--kt-ai-bg-soft);display:flex;align-items:center;justify-content:center;font-size:var(--kt-ai-text-xl);font-weight:var(--kt-ai-weight-bold)">М</div>
|
||
<div>
|
||
<strong>Марина Л.</strong>
|
||
<p style="font-size:var(--kt-ai-text-sm);color:var(--kt-ai-fg-muted)">Мама сына 2 года</p>
|
||
</div>
|
||
</div>
|
||
<p style="color:var(--kt-ai-fg-muted)">Заказываю уже третий раз. Нравится ассортимент и цены. Шапочка и пинетки для малыша очень мягкие, натуральные. Упаковано всё было аккуратно. Спасибо!</p>
|
||
<div style="margin-top:var(--kt-ai-space-3);color:var(--kt-ai-primary)">★★★★★</div>
|
||
</article>
|
||
<article class="kt-ai-card">
|
||
<div style="display:flex;align-items:center;gap:var(--kt-ai-space-3);margin-bottom:var(--kt-ai-space-3)">
|
||
<div style="width:48px;height:48px;border-radius:50%;background:var(--kt-ai-bg-soft);display:flex;align-items:center;justify-content:center;font-size:var(--kt-ai-text-xl);font-weight:var(--kt-ai-weight-bold)">Р</div>
|
||
<div>
|
||
<strong>Руслан А.</strong>
|
||
<p style="font-size:var(--kt-ai-text-sm);color:var(--kt-ai-fg-muted)">Папа близнецов 7 лет</p>
|
||
</div>
|
||
</div>
|
||
<p style="color:var(--kt-ai-fg-muted)">Брал сразу два комплекта одежды для близнецов. Понравилось, что есть разделение по полу и возрасту. Качеством довольны, дети тоже рады новым игрушкам!</p>
|
||
<div style="margin-top:var(--kt-ai-space-3);color:var(--kt-ai-primary)">★★★★★</div>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="kt-ai-section" data-divider="true">
|
||
<div class="kt-ai-wrap">
|
||
<div class="promo-banner">
|
||
<h2 style="margin-bottom:var(--kt-ai-space-2)"><svg class="kt-icon" style="vertical-align:middle;margin-right:var(--kt-ai-space-2)"><use href="#sparkles"></use></svg>Акции и скидки</h2>
|
||
<p style="font-size:var(--kt-ai-text-lg);margin-bottom:var(--kt-ai-space-4)">Скидка 15% на первый заказ по промокоду <strong>BALAPAN15</strong></p>
|
||
<p style="opacity:0.9">Бесплатная доставка при заказе от 20 000 ₸</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="kt-ai-section" data-divider="true">
|
||
<div class="kt-ai-wrap" data-width="wide">
|
||
<div class="kt-ai-section-head">
|
||
<h2>Оплата и доставка</h2>
|
||
<p>Удобные способы оплаты и быстрая доставка по всему Казахстану</p>
|
||
</div>
|
||
<div class="delivery-grid">
|
||
<article class="kt-ai-card">
|
||
<div class="kt-ai-tile-icon"><svg class="kt-icon kt-icon-lg"><use href="#package"></use></svg></div>
|
||
<h3>Доставка по Алматы</h3>
|
||
<p style="color:var(--kt-ai-fg-muted)">1 000 ₸ • В день заказа при оформлении до 14:00</p>
|
||
</article>
|
||
<article class="kt-ai-card">
|
||
<div class="kt-ai-tile-icon"><svg class="kt-icon kt-icon-lg"><use href="#arrow-right"></use></svg></div>
|
||
<h3>Доставка по РК</h3>
|
||
<p style="color:var(--kt-ai-fg-muted)">2 500 ₸ • 2-3 рабочих дня через Казпочту или CDEK</p>
|
||
</article>
|
||
<article class="kt-ai-card">
|
||
<div class="kt-ai-tile-icon"><svg class="kt-icon kt-icon-lg"><use href="#layers"></use></svg></div>
|
||
<h3>Способы оплаты</h3>
|
||
<p style="color:var(--kt-ai-fg-muted)">Карта онлайн, Kaspi Red/Золотая Корона, наличными при получении</p>
|
||
</article>
|
||
<article class="kt-ai-card">
|
||
<div class="kt-ai-tile-icon"><svg class="kt-icon kt-icon-lg"><use href="#refresh"></use></svg></div>
|
||
<h3>Возврат</h3>
|
||
<p style="color:var(--kt-ai-fg-muted)">14 дней на возврат или обмен, если товар не подошёл</p>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="kt-ai-section" data-divider="true">
|
||
<div class="kt-ai-wrap" data-width="wide">
|
||
<div class="kt-ai-section-head">
|
||
<h2>Гарантии и сертификаты</h2>
|
||
<p>Все товары сертифицированы и безопасны для детей</p>
|
||
</div>
|
||
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--kt-ai-space-6)">
|
||
<div class="guarantee-item">
|
||
<svg class="kt-icon kt-icon-lg" style="color:var(--kt-ai-primary);flex-shrink:0;margin-top:4px"><use href="#check-circle"></use></svg>
|
||
<div>
|
||
<h4 style="margin-bottom:var(--kt-ai-space-1)">Сертификаты качества</h4>
|
||
<p style="color:var(--kt-ai-fg-muted)">На каждый товар есть сертификат соответствия ЕАЭС</p>
|
||
</div>
|
||
</div>
|
||
<div class="guarantee-item">
|
||
<svg class="kt-icon kt-icon-lg" style="color:var(--kt-ai-primary);flex-shrink:0;margin-top:4px"><use href="#check-circle"></use></svg>
|
||
<div>
|
||
<h4 style="margin-bottom:var(--kt-ai-space-1)">Безопасные материалы</h4>
|
||
<p style="color:var(--kt-ai-fg-muted)">Только гипоаллергенные материалы, проверенные лабораторией</p>
|
||
</div>
|
||
</div>
|
||
<div class="guarantee-item">
|
||
<svg class="kt-icon kt-icon-lg" style="color:var(--kt-ai-primary);flex-shrink:0;margin-top:4px"><use href="#file"></use></svg>
|
||
<div>
|
||
<h4 style="margin-bottom:var(--kt-ai-space-1)">Официальный импортёр</h4>
|
||
<p style="color:var(--kt-ai-fg-muted)">Работаем напрямую с производителями Hipp, Lego, H&M</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="blog" class="kt-ai-section" data-divider="true">
|
||
<div class="kt-ai-wrap" data-width="wide">
|
||
<div class="kt-ai-section-head">
|
||
<h2>Блог для родителей</h2>
|
||
<p>Полезные советы по уходу за детьми и выбору товаров</p>
|
||
</div>
|
||
<div class="blog-grid">
|
||
<article class="kt-ai-card blog-card">
|
||
<img src="https://loremflickr.com/640/360/baby,care" alt="Уход за малышом" class="blog-img">
|
||
<div class="product-info">
|
||
<span class="kt-ai-chip" style="margin-bottom:var(--kt-ai-space-2)">0-3 года</span>
|
||
<h3 style="margin-bottom:var(--kt-ai-space-2)">Как выбрать первую обувь для малыша?</h3>
|
||
<p style="color:var(--kt-ai-fg-muted);margin-bottom:var(--kt-ai-space-3)">5 важных критериев при выборе пинеток и первой обуви</p>
|
||
<a href="#contacts" class="kt-ai-link">Читать далее →</a>
|
||
</div>
|
||
</article>
|
||
<article class="kt-ai-card blog-card">
|
||
<img src="https://loremflickr.com/640/360/kids,play" alt="Игры для детей" class="blog-img">
|
||
<div class="product-info">
|
||
<span class="kt-ai-chip" style="margin-bottom:var(--kt-ai-space-2)">4-6 лет</span>
|
||
<h3 style="margin-bottom:var(--kt-ai-space-2)">Развивающие игрушки для дошкольников</h3>
|
||
<p style="color:var(--kt-ai-fg-muted);margin-bottom:var(--kt-ai-space-3)">Какие игрушки помогают развитию речи и моторики</p>
|
||
<a href="#contacts" class="kt-ai-link">Читать далее →</a>
|
||
</div>
|
||
</article>
|
||
<article class="kt-ai-card blog-card">
|
||
<img src="https://loremflickr.com/640/360/school,kids" alt="Школьники" class="blog-img">
|
||
<div class="product-info">
|
||
<span class="kt-ai-chip" style="margin-bottom:var(--kt-ai-space-2)">7-10 лет</span>
|
||
<h3 style="margin-bottom:var(--kt-ai-space-2)">Готовимся к школе: чек-лист одежды</h3>
|
||
<p style="color:var(--kt-ai-fg-muted);margin-bottom:var(--kt-ai-space-3)">Что нужно первокласснику в гардеробе на учебный год</p>
|
||
<a href="#contacts" class="kt-ai-link">Читать далее →</a>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="contacts" class="kt-ai-cta">
|
||
<div class="kt-ai-wrap" data-width="narrow">
|
||
<h2>Свяжитесь с нами</h2>
|
||
<p>Есть вопросы? Напишите нам — ответим в течение часа!</p>
|
||
|
||
<form class="contact-form" action="https://formsubmit.co/example@email.com" method="POST" style="margin-top:var(--kt-ai-space-6)">
|
||
<div class="form-group kt-ai-field">
|
||
<label>Ваше имя</label>
|
||
<input class="kt-ai-input" name="name" placeholder="Как к вам обращаться" required>
|
||
</div>
|
||
<div class="form-group kt-ai-field">
|
||
<label>Телефон или email</label>
|
||
<input class="kt-ai-input" name="contact" placeholder="+7 ___ ___ __ __" required>
|
||
</div>
|
||
<div class="form-group kt-ai-field">
|
||
<label>Сообщение</label>
|
||
<textarea class="kt-ai-textarea" name="message" rows="4" placeholder="Ваш вопрос или пожелание" required></textarea>
|
||
</div>
|
||
<button class="kt-ai-btn" data-variant="primary" data-size="lg" type="submit" style="width:100%">Отправить</button>
|
||
</form>
|
||
|
||
<div style="margin-top:var(--kt-ai-space-8);text-align:center">
|
||
<p style="margin-bottom:var(--kt-ai-space-3)">Или напишите нам напрямую:</p>
|
||
<div style="display:flex;gap:var(--kt-ai-space-3);justify-content:center;flex-wrap:wrap">
|
||
<a class="kt-ai-btn" data-variant="ghost" href="tel:+77771234567"><svg class="kt-icon" style="vertical-align:middle;margin-right:var(--kt-ai-space-1)"><use href="#megaphone"></use></svg>+7 (777) 123-45-67</a>
|
||
<a class="kt-ai-btn" data-variant="ghost" href="https://wa.me/77771234567"><svg class="kt-icon" style="vertical-align:middle;margin-right:var(--kt-ai-space-1)"><use href="#chat"></use></svg>WhatsApp</a>
|
||
<a class="kt-ai-btn" data-variant="ghost" href="mailto:info@balapanshop.kz"><svg class="kt-icon" style="vertical-align:middle;margin-right:var(--kt-ai-space-1)"><use href="#mail"></use></svg>info@balapanshop.kz</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="social-links">
|
||
<a href="https://instagram.com/balapanshop" class="social-btn" aria-label="Instagram">
|
||
<svg class="kt-icon"><use href="#sparkles"></use></svg>
|
||
</a>
|
||
<a href="https://tiktok.com/@balapanshop" class="social-btn" aria-label="TikTok">
|
||
<svg class="kt-icon"><use href="#play"></use></svg>
|
||
</a>
|
||
<a href="https://facebook.com/balapanshop" class="social-btn" aria-label="Facebook">
|
||
<svg class="kt-icon"><use href="#book"></use></svg>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<footer class="kt-ai-wrap kt-ai-pagefoot">
|
||
<span>© 2026 Balapan Shop</span>
|
||
<span class="kt-ai-spacer"></span>
|
||
<span>г. Алматы, ул. Абая 150</span>
|
||
</footer>
|
||
|
||
<!-- Виджет онлайн-чата -->
|
||
<button class="chat-btn" onclick="toggleChat()" aria-label="Открыть чат">
|
||
<svg class="kt-icon kt-icon-lg"><use href="#chat"></use></svg>
|
||
</button>
|
||
<div id="chatWindow" class="chat-window">
|
||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--kt-ai-space-3)">
|
||
<strong>Онлайн-консультант</strong>
|
||
<button class="kt-ai-btn" data-variant="ghost" onclick="toggleChat()" style="padding:var(--kt-ai-space-1)">
|
||
<svg class="kt-icon"><use href="#x"></use></svg>
|
||
</button>
|
||
</div>
|
||
<div style="background:var(--kt-ai-bg-soft);padding:var(--kt-ai-space-3);border-radius:var(--kt-ai-radius-lg);margin-bottom:var(--kt-ai-space-3)">
|
||
<p style="font-size:var(--kt-ai-text-sm)">Здравствуйте! Чем могу помочь?</p>
|
||
<p style="font-size:var(--kt-ai-text-xs);color:var(--kt-ai-fg-muted);margin-top:var(--kt-ai-space-2)">Напишите нам в WhatsApp — ответим в течение 5 минут</p>
|
||
</div>
|
||
<a class="kt-ai-btn" data-variant="primary" href="https://wa.me/77771234567" style="width:100%">
|
||
<svg class="kt-icon" style="vertical-align:middle;margin-right:var(--kt-ai-space-1)"><use href="#chat"></use></svg>
|
||
Написать в WhatsApp
|
||
</a>
|
||
</div>
|
||
|
||
<!-- Модальное окно корзины -->
|
||
<div id="cartModal" style="display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:1000" onclick="if(event.target===this)toggleCart()">
|
||
<div style="position:absolute;top:0;right:0;width:400px;max-width:100%;height:100%;background:var(--kt-ai-card-bg);padding:var(--kt-ai-space-5);overflow-y:auto">
|
||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--kt-ai-space-4)">
|
||
<h2>Корзина</h2>
|
||
<button class="kt-ai-btn" data-variant="ghost" onclick="toggleCart()">
|
||
<svg class="kt-icon"><use href="#x"></use></svg>
|
||
</button>
|
||
</div>
|
||
<div id="cartItems" style="margin-bottom:var(--kt-ai-space-4)">
|
||
<p style="color:var(--kt-ai-fg-muted);text-align:center;padding:var(--kt-ai-space-8)">Корзина пуста</p>
|
||
</div>
|
||
<div style="border-top:1px solid var(--kt-ai-divider);padding-top:var(--kt-ai-space-4)">
|
||
<div style="display:flex;justify-content:space-between;margin-bottom:var(--kt-ai-space-3)">
|
||
<strong>Итого:</strong>
|
||
<strong id="cartTotal">0 ₸</strong>
|
||
</div>
|
||
<form action="https://formsubmit.co/example@email.com" method="POST">
|
||
<input type="hidden" name="_subject" value="Новый заказ Balapan Shop">
|
||
<input type="hidden" name="_template" value="table">
|
||
<div class="form-group kt-ai-field">
|
||
<label>Ваше имя</label>
|
||
<input class="kt-ai-input" name="name" required>
|
||
</div>
|
||
<div class="form-group kt-ai-field">
|
||
<label>Телефон</label>
|
||
<input class="kt-ai-input" name="phone" placeholder="+7 ___ ___ __ __" required>
|
||
</div>
|
||
<div class="form-group kt-ai-field">
|
||
<label>Адрес доставки</label>
|
||
<textarea class="kt-ai-textarea" name="address" rows="3" required></textarea>
|
||
</div>
|
||
<textarea id="cartData" name="message" style="display:none"></textarea>
|
||
<button class="kt-ai-btn" data-variant="primary" data-size="lg" type="submit" style="width:100%">Оформить заказ</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="design-system/icons/kt-ai-icons.js"></script>
|
||
<script>
|
||
// Фильтр категорий
|
||
function filterCategory(category) {
|
||
var cards = document.querySelectorAll('.product-card');
|
||
cards.forEach(function(card) {
|
||
if (category === 'all' || card.getAttribute('data-category') === category) {
|
||
card.classList.remove('hidden');
|
||
} else {
|
||
card.classList.add('hidden');
|
||
}
|
||
});
|
||
|
||
var buttons = document.querySelectorAll('.category-filter .kt-ai-btn');
|
||
buttons.forEach(function(btn) {
|
||
if (btn.textContent.toLowerCase().includes(category) || (category === 'all' && btn.textContent === 'Все товары')) {
|
||
btn.setAttribute('data-variant', 'primary');
|
||
} else {
|
||
btn.setAttribute('data-variant', 'ghost');
|
||
}
|
||
});
|
||
}
|
||
|
||
// Корзина
|
||
var cart = [];
|
||
function addToCart(name, price) {
|
||
cart.push({name: name, price: price});
|
||
updateCart();
|
||
alert(name + ' добавлен в корзину!');
|
||
}
|
||
|
||
function updateCart() {
|
||
document.getElementById('cartCount').textContent = cart.length;
|
||
var itemsEl = document.getElementById('cartItems');
|
||
var totalEl = document.getElementById('cartTotal');
|
||
var dataEl = document.getElementById('cartData');
|
||
|
||
if (cart.length === 0) {
|
||
itemsEl.innerHTML = '<p style="color:var(--kt-ai-fg-muted);text-align:center;padding:var(--kt-ai-space-8)">Корзина пуста</p>';
|
||
totalEl.textContent = '0 ₸';
|
||
dataEl.value = '';
|
||
} else {
|
||
var html = '';
|
||
var total = 0;
|
||
var lines = [];
|
||
cart.forEach(function(item, i) {
|
||
html += '<div style="display:flex;justify-content:space-between;padding:var(--kt-ai-space-2);border-bottom:1px solid var(--kt-ai-border)">';
|
||
html += '<span>' + item.name + '</span>';
|
||
html += '<span>' + item.price + ' ₸</span>';
|
||
html += '</div>';
|
||
total += item.price;
|
||
lines.push(item.name + ' — ' + item.price + ' ₸');
|
||
});
|
||
itemsEl.innerHTML = html;
|
||
totalEl.textContent = total + ' ₸';
|
||
dataEl.value = 'Заказ:\n' + lines.join('\n') + '\nИтого: ' + total + ' ₸';
|
||
}
|
||
}
|
||
|
||
function toggleCart() {
|
||
var modal = document.getElementById('cartModal');
|
||
modal.style.display = modal.style.display === 'block' ? 'none' : 'block';
|
||
}
|
||
|
||
// Чат
|
||
function toggleChat() {
|
||
var win = document.getElementById('chatWindow');
|
||
win.classList.toggle('open');
|
||
}
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|