добавил корзину, акции, доставку, блог, гарантии, чат, соцсети
This commit is contained in:
parent
3369a709a9
commit
0660d1747f
373
index.html
373
index.html
@ -27,6 +27,22 @@
|
|||||||
.contact-form { max-width: 520px; margin: 0 auto; }
|
.contact-form { max-width: 520px; margin: 0 auto; }
|
||||||
.form-group { margin-bottom: var(--kt-ai-space-4); }
|
.form-group { margin-bottom: var(--kt-ai-space-4); }
|
||||||
.hidden { display: none; }
|
.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>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
@ -39,7 +55,15 @@
|
|||||||
</div>
|
</div>
|
||||||
<span class="kt-ai-spacer"></span>
|
<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="#catalog">Каталог</a>
|
||||||
|
<a class="kt-ai-btn" data-variant="ghost" href="#blog">Блог</a>
|
||||||
<a class="kt-ai-btn" data-variant="ghost" href="#about">О нас</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>
|
<a class="kt-ai-btn" data-variant="primary" href="#contacts">Контакты</a>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
@ -108,7 +132,11 @@
|
|||||||
<span class="gender-badge gender-unisex">Универсальный</span>
|
<span class="gender-badge gender-unisex">Универсальный</span>
|
||||||
<h4>Детское питание Hipp</h4>
|
<h4>Детское питание Hipp</h4>
|
||||||
<p class="product-price">2 500 ₸</p>
|
<p class="product-price">2 500 ₸</p>
|
||||||
<p style="font-size:var(--kt-ai-text-sm);color:var(--kt-ai-fg-muted)">🇩🇪 Германия • Натуральные ингредиенты</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>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="kt-ai-card product-card" data-category="обувь">
|
<article class="kt-ai-card product-card" data-category="обувь">
|
||||||
@ -117,7 +145,12 @@
|
|||||||
<span class="gender-badge gender-girl">Для девочек</span>
|
<span class="gender-badge gender-girl">Для девочек</span>
|
||||||
<h4>Пинетки вязаные</h4>
|
<h4>Пинетки вязаные</h4>
|
||||||
<p class="product-price">3 200 ₸</p>
|
<p class="product-price">3 200 ₸</p>
|
||||||
<p style="font-size:var(--kt-ai-text-sm);color:var(--kt-ai-fg-muted)">🇹🇷 Турция • 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">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>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="kt-ai-card product-card" data-category="игрушки">
|
<article class="kt-ai-card product-card" data-category="игрушки">
|
||||||
@ -126,7 +159,11 @@
|
|||||||
<span class="gender-badge gender-unisex">Универсальный</span>
|
<span class="gender-badge gender-unisex">Универсальный</span>
|
||||||
<h4>Развивающий коврик</h4>
|
<h4>Развивающий коврик</h4>
|
||||||
<p class="product-price">12 900 ₸</p>
|
<p class="product-price">12 900 ₸</p>
|
||||||
<p style="font-size:var(--kt-ai-text-sm);color:var(--kt-ai-fg-muted)">🇨🇳 Китай • Полиэстер, пластик</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>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="kt-ai-card product-card" data-category="головные уборы">
|
<article class="kt-ai-card product-card" data-category="головные уборы">
|
||||||
@ -135,7 +172,12 @@
|
|||||||
<span class="gender-badge gender-boy">Для мальчиков</span>
|
<span class="gender-badge gender-boy">Для мальчиков</span>
|
||||||
<h4>Шапочка трикотажная</h4>
|
<h4>Шапочка трикотажная</h4>
|
||||||
<p class="product-price">1 800 ₸</p>
|
<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>
|
<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>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
</div>
|
</div>
|
||||||
@ -150,7 +192,14 @@
|
|||||||
<span class="gender-badge gender-boy">Для мальчиков</span>
|
<span class="gender-badge gender-boy">Для мальчиков</span>
|
||||||
<h4>Кроссовки детские</h4>
|
<h4>Кроссовки детские</h4>
|
||||||
<p class="product-price">8 900 ₸</p>
|
<p class="product-price">8 900 ₸</p>
|
||||||
<p style="font-size:var(--kt-ai-text-sm);color:var(--kt-ai-fg-muted)">🇨🇳 Китай • Экокожа, текстиль</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>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="kt-ai-card product-card" data-category="верхняя одежда">
|
<article class="kt-ai-card product-card" data-category="верхняя одежда">
|
||||||
@ -159,7 +208,13 @@
|
|||||||
<span class="gender-badge gender-girl">Для девочек</span>
|
<span class="gender-badge gender-girl">Для девочек</span>
|
||||||
<h4>Куртка осенняя</h4>
|
<h4>Куртка осенняя</h4>
|
||||||
<p class="product-price">15 500 ₸</p>
|
<p class="product-price">15 500 ₸</p>
|
||||||
<p style="font-size:var(--kt-ai-text-sm);color:var(--kt-ai-fg-muted)">🇹🇷 Турция • Полиэстер, утеплитель био-пух</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>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="kt-ai-card product-card" data-category="игрушки">
|
<article class="kt-ai-card product-card" data-category="игрушки">
|
||||||
@ -168,7 +223,11 @@
|
|||||||
<span class="gender-badge gender-girl">Для девочек</span>
|
<span class="gender-badge gender-girl">Для девочек</span>
|
||||||
<h4>Кукла с аксессуарами</h4>
|
<h4>Кукла с аксессуарами</h4>
|
||||||
<p class="product-price">6 700 ₸</p>
|
<p class="product-price">6 700 ₸</p>
|
||||||
<p style="font-size:var(--kt-ai-text-sm);color:var(--kt-ai-fg-muted)">🇨🇳 Китай • Пластик, текстиль</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>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="kt-ai-card product-card" data-category="головные уборы">
|
<article class="kt-ai-card product-card" data-category="головные уборы">
|
||||||
@ -177,7 +236,12 @@
|
|||||||
<span class="gender-badge gender-unisex">Универсальный</span>
|
<span class="gender-badge gender-unisex">Универсальный</span>
|
||||||
<h4>Кепка с козырьком</h4>
|
<h4>Кепка с козырьком</h4>
|
||||||
<p class="product-price">2 100 ₸</p>
|
<p class="product-price">2 100 ₸</p>
|
||||||
<p style="font-size:var(--kt-ai-text-sm);color:var(--kt-ai-fg-muted)">🇰🇿 Казахстан • Хлопок 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>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="kt-ai-card product-card" data-category="питание">
|
<article class="kt-ai-card product-card" data-category="питание">
|
||||||
@ -186,7 +250,11 @@
|
|||||||
<span class="gender-badge gender-unisex">Универсальный</span>
|
<span class="gender-badge gender-unisex">Универсальный</span>
|
||||||
<h4>Сок детский (упаковка)</h4>
|
<h4>Сок детский (упаковка)</h4>
|
||||||
<p class="product-price">1 200 ₸</p>
|
<p class="product-price">1 200 ₸</p>
|
||||||
<p style="font-size:var(--kt-ai-text-sm);color:var(--kt-ai-fg-muted)">🇰🇿 Казахстан • Натуральный сок, без сахара</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>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="kt-ai-card product-card" data-category="игрушки">
|
<article class="kt-ai-card product-card" data-category="игрушки">
|
||||||
@ -195,7 +263,11 @@
|
|||||||
<span class="gender-badge gender-boy">Для мальчиков</span>
|
<span class="gender-badge gender-boy">Для мальчиков</span>
|
||||||
<h4>Конструктор Lego</h4>
|
<h4>Конструктор Lego</h4>
|
||||||
<p class="product-price">9 500 ₸</p>
|
<p class="product-price">9 500 ₸</p>
|
||||||
<p style="font-size:var(--kt-ai-text-sm);color:var(--kt-ai-fg-muted)">🇩🇰 Дания • ABS-пластик</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>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
</div>
|
</div>
|
||||||
@ -210,7 +282,15 @@
|
|||||||
<span class="gender-badge gender-boy">Для мальчиков</span>
|
<span class="gender-badge gender-boy">Для мальчиков</span>
|
||||||
<h4>Ботинки школьные</h4>
|
<h4>Ботинки школьные</h4>
|
||||||
<p class="product-price">11 200 ₸</p>
|
<p class="product-price">11 200 ₸</p>
|
||||||
<p style="font-size:var(--kt-ai-text-sm);color:var(--kt-ai-fg-muted)">🇷🇺 Россия • Натуральная кожа, текстиль</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>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="kt-ai-card product-card" data-category="верхняя одежда">
|
<article class="kt-ai-card product-card" data-category="верхняя одежда">
|
||||||
@ -219,7 +299,14 @@
|
|||||||
<span class="gender-badge gender-girl">Для девочек</span>
|
<span class="gender-badge gender-girl">Для девочек</span>
|
||||||
<h4>Пальто демисезонное</h4>
|
<h4>Пальто демисезонное</h4>
|
||||||
<p class="product-price">18 900 ₸</p>
|
<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>
|
<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>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="kt-ai-card product-card" data-category="игрушки">
|
<article class="kt-ai-card product-card" data-category="игрушки">
|
||||||
@ -228,7 +315,11 @@
|
|||||||
<span class="gender-badge gender-unisex">Универсальный</span>
|
<span class="gender-badge gender-unisex">Универсальный</span>
|
||||||
<h4>Настольная игра</h4>
|
<h4>Настольная игра</h4>
|
||||||
<p class="product-price">5 400 ₸</p>
|
<p class="product-price">5 400 ₸</p>
|
||||||
<p style="font-size:var(--kt-ai-text-sm);color:var(--kt-ai-fg-muted)">🇺🇸 США • Картон, пластик</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>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="kt-ai-card product-card" data-category="головные уборы">
|
<article class="kt-ai-card product-card" data-category="головные уборы">
|
||||||
@ -237,7 +328,12 @@
|
|||||||
<span class="gender-badge gender-unisex">Универсальный</span>
|
<span class="gender-badge gender-unisex">Универсальный</span>
|
||||||
<h4>Шапка зимняя</h4>
|
<h4>Шапка зимняя</h4>
|
||||||
<p class="product-price">3 500 ₸</p>
|
<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>
|
<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>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="kt-ai-card product-card" data-category="питание">
|
<article class="kt-ai-card product-card" data-category="питание">
|
||||||
@ -246,7 +342,11 @@
|
|||||||
<span class="gender-badge gender-unisex">Универсальный</span>
|
<span class="gender-badge gender-unisex">Универсальный</span>
|
||||||
<h4>Каша овсяная с фруктами</h4>
|
<h4>Каша овсяная с фруктами</h4>
|
||||||
<p class="product-price">1 800 ₸</p>
|
<p class="product-price">1 800 ₸</p>
|
||||||
<p style="font-size:var(--kt-ai-text-sm);color:var(--kt-ai-fg-muted)">🇫🇮 Финляндия • Овсяные хлопья, сухофрукты</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>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="kt-ai-card product-card" data-category="игрушки">
|
<article class="kt-ai-card product-card" data-category="игрушки">
|
||||||
@ -255,7 +355,11 @@
|
|||||||
<span class="gender-badge gender-girl">Для девочек</span>
|
<span class="gender-badge gender-girl">Для девочек</span>
|
||||||
<h4>Пазл 500 элементов</h4>
|
<h4>Пазл 500 элементов</h4>
|
||||||
<p class="product-price">3 900 ₸</p>
|
<p class="product-price">3 900 ₸</p>
|
||||||
<p style="font-size:var(--kt-ai-text-sm);color:var(--kt-ai-fg-muted)">🇩🇪 Германия • Картон повышенной прочности</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>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="kt-ai-card product-card" data-category="игрушки">
|
<article class="kt-ai-card product-card" data-category="игрушки">
|
||||||
@ -264,7 +368,11 @@
|
|||||||
<span class="gender-badge gender-boy">Для мальчиков</span>
|
<span class="gender-badge gender-boy">Для мальчиков</span>
|
||||||
<h4>Робот на радиоуправлении</h4>
|
<h4>Робот на радиоуправлении</h4>
|
||||||
<p class="product-price">14 500 ₸</p>
|
<p class="product-price">14 500 ₸</p>
|
||||||
<p style="font-size:var(--kt-ai-text-sm);color:var(--kt-ai-fg-muted)">🇨🇳 Китай • Пластик, электроника</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>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
</div>
|
</div>
|
||||||
@ -350,6 +458,117 @@
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</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">
|
<section id="contacts" class="kt-ai-cta">
|
||||||
<div class="kt-ai-wrap" data-width="narrow">
|
<div class="kt-ai-wrap" data-width="narrow">
|
||||||
<h2>Свяжитесь с нами</h2>
|
<h2>Свяжитесь с нами</h2>
|
||||||
@ -379,6 +598,18 @@
|
|||||||
<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>
|
<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>
|
</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>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
@ -388,8 +619,69 @@
|
|||||||
<span>г. Алматы, ул. Абая 150</span>
|
<span>г. Алматы, ул. Абая 150</span>
|
||||||
</footer>
|
</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 src="design-system/icons/kt-ai-icons.js"></script>
|
||||||
<script>
|
<script>
|
||||||
|
// Фильтр категорий
|
||||||
function filterCategory(category) {
|
function filterCategory(category) {
|
||||||
var cards = document.querySelectorAll('.product-card');
|
var cards = document.querySelectorAll('.product-card');
|
||||||
cards.forEach(function(card) {
|
cards.forEach(function(card) {
|
||||||
@ -409,6 +701,53 @@ function filterCategory(category) {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Корзина
|
||||||
|
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>
|
</script>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user