156 lines
7.0 KiB
HTML
156 lines
7.0 KiB
HTML
<!DOCTYPE html>
|
||
<!-- Дизайн: Стандартный дизайн. Сохраняй все пять CSS; подробности в design.md. -->
|
||
<html lang="ru" data-theme="light">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>Канцелярия — продажа канцелярских товаров</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="stylesheet" href="design-system/vibe-theme.css">
|
||
<style>
|
||
/* ДС рисует кнопки для <button>; у ссылки-кнопки браузер добавляет подчёркивание */
|
||
a.kt-ai-btn { text-decoration: none; }
|
||
|
||
.cart-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--kt-ai-bg-elevated); border-top: 1px solid var(--kt-ai-border); box-shadow: 0 -4px 16px var(--kt-ai-bg-hover); }
|
||
.cart-bar-in { display: flex; align-items: center; gap: 16px; padding: 12px 0; }
|
||
.cart-sum { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
|
||
.cart-qty { font-size: 14px; color: var(--kt-ai-fg-muted); }
|
||
.tile-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: var(--kt-ai-space-5); }
|
||
.tile-price { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
|
||
.tile-stock { font-size: 12px; color: var(--kt-ai-fg-muted); margin-top: 2px; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<header class="kt-ai-pagehead">
|
||
<div class="kt-ai-wrap kt-ai-pagehead-in">
|
||
<strong>Канцелярия</strong>
|
||
<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="#contacts">Контакты</a>
|
||
</div>
|
||
</header>
|
||
|
||
<section class="kt-ai-hero" data-align="center">
|
||
<div class="kt-ai-wrap">
|
||
<h1>Канцелярские товары <span class="vibe-highlight">в один заказ</span></h1>
|
||
<p class="kt-ai-hero-sub">Тетради, ручки, папки и офисные принадлежности с фиксированными ценами. Выберите количество — итог корзины посчитается сам.</p>
|
||
<div class="kt-ai-hero-actions">
|
||
<a class="kt-ai-btn" data-variant="primary" data-size="lg" href="#catalog">Смотреть товары</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="catalog" 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" id="catalog-grid" style="margin-top:var(--kt-ai-space-9)"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="contacts" class="kt-ai-cta">
|
||
<div class="kt-ai-wrap">
|
||
<h2>Оформить заказ</h2>
|
||
<p>Напишите нам по телефону или в WhatsApp — подтвердим наличие и согласуем доставку в течение 30 минут.</p>
|
||
<a class="kt-ai-btn" data-variant="primary" data-size="lg" href="https://wa.me/77000000000">WhatsApp</a>
|
||
</div>
|
||
</section>
|
||
|
||
<div id="cart-bar" class="cart-bar" style="display:none">
|
||
<div class="kt-ai-wrap cart-bar-in">
|
||
<div>
|
||
<div class="cart-sum" id="cart-sum">0 ₸</div>
|
||
<div class="cart-qty" id="cart-qty">товаров: 0</div>
|
||
</div>
|
||
<span class="kt-ai-spacer"></span>
|
||
<button class="kt-ai-btn" data-variant="primary" id="cart-order">Оформить заказ</button>
|
||
<button class="kt-ai-btn" data-variant="ghost" id="cart-clear">Очистить</button>
|
||
</div>
|
||
</div>
|
||
|
||
<footer class="kt-ai-wrap kt-ai-pagefoot" style="padding-bottom:96px">
|
||
<span>© 2026 Канцелярия</span>
|
||
<span class="kt-ai-spacer"></span>
|
||
<span>8 700 000-00-00</span>
|
||
</footer>
|
||
|
||
<script>
|
||
const PRODUCTS = [
|
||
{ name: "Тетрадь 96 листов, плотная", price: 950, stock: 120 },
|
||
{ name: "Ручка гелевая синяя", price: 350, stock: 300 },
|
||
{ name: "Карандаш простой 2B", price: 200, stock: 250 },
|
||
{ name: "Папка-скоросшиватель A4", price: 1200, stock: 80 },
|
||
{ name: "Блокнот А5, в кожаном переплёте", price: 2500, stock: 45 },
|
||
{ name: "Ластик офисный", price: 150, stock: 400 },
|
||
{ name: "Линейка 20 см", price: 500, stock: 90 },
|
||
{ name: "Скрепки (коробка 100 шт.)", price: 450, stock: 160 },
|
||
{ name: "Степлер с динками 1000 шт.", price: 3500, stock: 22 }
|
||
];
|
||
|
||
const fmt = n => n.toLocaleString("ru-RU") + " ₸";
|
||
const cart = {};
|
||
|
||
const grid = document.getElementById("catalog-grid");
|
||
PRODUCTS.forEach((p, i) => {
|
||
const tile = document.createElement("article");
|
||
tile.className = "kt-ai-tile";
|
||
tile.innerHTML = '<div class="tile-foot" style="margin-top:0">'
|
||
+ '<div><h3>' + p.name + '</h3><div class="tile-stock">в наличии: ' + p.stock + ' шт.</div></div>'
|
||
+ '<div class="tile-price">' + fmt(p.price) + '</div></div>'
|
||
+ '<div class="tile-foot"><span class="cart-qty" data-qty="' + i + '">выбрано: 0</span>'
|
||
+ '<button class="kt-ai-btn" data-variant="primary" data-add="' + i + '">В корзину</button></div>';
|
||
grid.appendChild(tile);
|
||
});
|
||
|
||
const bar = document.getElementById("cart-bar");
|
||
const sumEl = document.getElementById("cart-sum");
|
||
const qtyEl = document.getElementById("cart-qty");
|
||
|
||
function refresh() {
|
||
let sum = 0, count = 0;
|
||
PRODUCTS.forEach((p, i) => {
|
||
const q = cart[i] || 0;
|
||
sum += q * p.price;
|
||
count += q;
|
||
const el = grid.querySelector('[data-qty="' + i + '"]');
|
||
if (el) el.textContent = "выбрано: " + q;
|
||
});
|
||
sumEl.textContent = fmt(sum);
|
||
qtyEl.textContent = "товаров: " + count;
|
||
bar.style.display = count > 0 ? "" : "none";
|
||
}
|
||
|
||
grid.addEventListener("click", e => {
|
||
const btn = e.target.closest("[data-add]");
|
||
if (!btn) return;
|
||
const i = Number(btn.dataset.add);
|
||
const q = cart[i] || 0;
|
||
if (q >= PRODUCTS[i].stock) { alert("Больше нет на складе: " + PRODUCTS[i].name); return; }
|
||
cart[i] = q + 1;
|
||
refresh();
|
||
});
|
||
|
||
document.getElementById("cart-clear").addEventListener("click", () => {
|
||
Object.keys(cart).forEach(k => delete cart[k]);
|
||
refresh();
|
||
});
|
||
|
||
document.getElementById("cart-order").addEventListener("click", () => {
|
||
let msg = "Здравствуйте! Хочу заказать:\n";
|
||
PRODUCTS.forEach((p, i) => {
|
||
if (cart[i]) msg += "• " + p.name + " — " + cart[i] + " шт. × " + fmt(p.price) + "\n";
|
||
});
|
||
msg += "Итого: " + sumEl.textContent;
|
||
window.open("https://wa.me/77000000000?text=" + encodeURIComponent(msg), "_blank");
|
||
});
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|