414 lines
21 KiB
HTML
414 lines
21 KiB
HTML
<!doctype html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>CLOTHES STORE — Магазин одежды</title>
|
||
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>👕</text></svg>">
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<style>
|
||
:root{--ink:#0F1218;--cyan:#00E5FF;--cyan-50:#E8FCFF;--white:#fff;--gray-500:#5B6573;--gray-100:#F2F4F7}
|
||
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif}
|
||
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
|
||
.reveal.in{opacity:1;transform:none}
|
||
.logo-text{font-family:'Arial Black',sans-serif;letter-spacing:-1px}
|
||
</style>
|
||
</head>
|
||
<body class="bg-white text-gray-900">
|
||
|
||
<!-- Header -->
|
||
<header class="sticky top-0 z-50 bg-white border-b border-gray-200">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="flex justify-between items-center h-16">
|
||
<a href="#" class="flex items-center space-x-2">
|
||
<div class="w-10 h-10 bg-cyan-400 rounded-lg flex items-center justify-center text-2xl">👕</div>
|
||
<span class="text-2xl font-extrabold text-gray-900 logo-text">CLOTHES<span class="text-cyan-400">STORE</span></span>
|
||
</a>
|
||
<nav class="hidden md:flex space-x-8">
|
||
<a href="#catalog" class="text-gray-700 hover:text-cyan-500 font-medium">Каталог</a>
|
||
<a href="#about" class="text-gray-700 hover:text-cyan-500 font-medium">О нас</a>
|
||
<a href="#contact" class="text-gray-700 hover:text-cyan-500 font-medium">Контакты</a>
|
||
</nav>
|
||
<button onclick="toggleCart()" class="relative p-2 text-gray-700 hover:text-cyan-500">
|
||
<svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"/>
|
||
</svg>
|
||
<span id="cartCount" class="absolute -top-1 -right-1 bg-cyan-500 text-white text-xs font-bold w-5 h-5 rounded-full flex items-center justify-center">0</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- Hero -->
|
||
<section class="bg-gray-900 text-white py-20">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center reveal">
|
||
<h1 class="text-5xl md:text-6xl font-extrabold mb-6">Новая коллекция 2026</h1>
|
||
<p class="text-xl text-gray-400 mb-8 max-w-2xl mx-auto">Стильная одежда для тех, кто ценит комфорт и качество. Скидки до 30% на весеннюю коллекцию.</p>
|
||
<a href="#catalog" class="inline-block bg-cyan-400 text-gray-900 px-8 py-4 rounded-lg font-bold text-lg hover:bg-cyan-300 transition">Смотреть каталог</a>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Categories -->
|
||
<section id="catalog" class="py-16 bg-gray-50">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<h2 class="text-4xl font-bold text-center mb-12 reveal">Категории</h2>
|
||
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-16">
|
||
<button onclick="filterCategory('all')" class="category-btn active bg-gray-900 text-white py-4 rounded-lg font-semibold hover:bg-cyan-400 hover:text-gray-900 transition">Все</button>
|
||
<button onclick="filterCategory('tshirts')" class="category-btn bg-white border-2 border-gray-200 py-4 rounded-lg font-semibold hover:bg-cyan-400 hover:border-cyan-400 hover:text-gray-900 transition">Футболки</button>
|
||
<button onclick="filterCategory('hoodies')" class="category-btn bg-white border-2 border-gray-200 py-4 rounded-lg font-semibold hover:bg-cyan-400 hover:border-cyan-400 hover:text-gray-900 transition">Худи</button>
|
||
<button onclick="filterCategory('pants')" class="category-btn bg-white border-2 border-gray-200 py-4 rounded-lg font-semibold hover:bg-cyan-400 hover:border-cyan-400 hover:text-gray-900 transition">Брюки</button>
|
||
<button onclick="filterCategory('shoes')" class="category-btn bg-white border-2 border-gray-200 py-4 rounded-lg font-semibold hover:bg-cyan-400 hover:border-cyan-400 hover:text-gray-900 transition">Обувь</button>
|
||
</div>
|
||
|
||
<!-- Products Grid -->
|
||
<div id="productsGrid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
||
<!-- Products will be rendered here -->
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- About -->
|
||
<section id="about" class="py-16 bg-white">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<h2 class="text-4xl font-bold text-center mb-12 reveal">Почему выбирают нас</h2>
|
||
<div class="grid md:grid-cols-3 gap-8">
|
||
<div class="text-center p-6 reveal">
|
||
<div class="text-5xl mb-4">🚚</div>
|
||
<h3 class="text-xl font-bold mb-2">Быстрая доставка</h3>
|
||
<p class="text-gray-600">Доставим по городу за 1-2 дня, по стране — 3-5 дней</p>
|
||
</div>
|
||
<div class="text-center p-6 reveal">
|
||
<div class="text-5xl mb-4">💯</div>
|
||
<h3 class="text-xl font-bold mb-2">Гарантия качества</h3>
|
||
<p class="text-gray-600">Только оригинальные товары от проверенных брендов</p>
|
||
</div>
|
||
<div class="text-center p-6 reveal">
|
||
<div class="text-5xl mb-4">🔄</div>
|
||
<h3 class="text-xl font-bold mb-2">Лёгкий возврат</h3>
|
||
<p class="text-gray-600">Вернём деньги в течение 14 дней, если не подойдёт</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Contact -->
|
||
<section id="contact" class="py-16 bg-gray-900 text-white">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<h2 class="text-4xl font-bold text-center mb-12 reveal">Контакты</h2>
|
||
<div class="grid md:grid-cols-2 gap-8">
|
||
<div class="reveal">
|
||
<h3 class="text-2xl font-bold mb-4">Наши контакты</h3>
|
||
<p class="text-gray-400 mb-2">📍 г. Кызылорда, ул. Аскар Токмагамбетов 3</p>
|
||
<p class="text-gray-400 mb-2">📞 +7 777 123 45 67</p>
|
||
<p class="text-gray-400 mb-2">✉️ info@clothesstore.kz</p>
|
||
<p class="text-gray-400">⏰ Ежедневно с 10:00 до 22:00</p>
|
||
</div>
|
||
<div class="reveal">
|
||
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2844.5!2d65.45!3d44.85!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zNDTCsDUxJzAwLjAiTiA2NcKwMjcnMDAuMCJF!5e0!3m2!1sru!2skz!4v1600000000000" width="100%" height="300" style="border:0;border-radius:12px" loading="lazy"></iframe>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Footer -->
|
||
<footer class="bg-gray-800 text-gray-400 py-8">
|
||
<div class="max-w-7xl mx-auto px-4 text-center">
|
||
<p>© 2026 CLOTHES STORE. Все права защищены.</p>
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- Cart Modal -->
|
||
<div id="cartModal" class="fixed inset-0 z-50 hidden">
|
||
<div class="absolute inset-0 bg-black bg-opacity-50" onclick="toggleCart()"></div>
|
||
<div class="absolute right-0 top-0 h-full w-full max-w-md bg-white shadow-2xl">
|
||
<div class="p-6 h-full flex flex-col">
|
||
<div class="flex justify-between items-center mb-6">
|
||
<h2 class="text-2xl font-bold">Корзина</h2>
|
||
<button onclick="toggleCart()" class="text-gray-500 hover:text-gray-700">
|
||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
|
||
</button>
|
||
</div>
|
||
<div id="cartItems" class="flex-1 overflow-y-auto space-y-4"></div>
|
||
<div class="border-t pt-4 mt-4">
|
||
<div class="flex justify-between text-lg font-bold mb-4">
|
||
<span>Итого:</span>
|
||
<span id="cartTotal">0 ₸</span>
|
||
</div>
|
||
<button onclick="checkout()" class="w-full bg-cyan-400 text-gray-900 py-4 rounded-lg font-bold text-lg hover:bg-cyan-300 transition">Оформить заказ</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Checkout Modal -->
|
||
<div id="checkoutModal" class="fixed inset-0 z-50 hidden">
|
||
<div class="absolute inset-0 bg-black bg-opacity-50" onclick="toggleCheckout()"></div>
|
||
<div class="absolute right-0 top-0 h-full w-full max-w-lg bg-white shadow-2xl overflow-y-auto">
|
||
<div class="p-6">
|
||
<div class="flex justify-between items-center mb-6">
|
||
<h2 class="text-2xl font-bold">Оформление заказа</h2>
|
||
<button onclick="toggleCheckout()" class="text-gray-500 hover:text-gray-700">
|
||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
|
||
</button>
|
||
</div>
|
||
<form id="checkoutForm" onsubmit="submitOrder(event)" class="space-y-4">
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-1">Имя *</label>
|
||
<input type="text" name="name" required class="w-full border border-gray-300 rounded-lg px-4 py-3 focus:ring-2 focus:ring-cyan-400 focus:border-transparent">
|
||
</div>
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-1">Телефон *</label>
|
||
<input type="tel" name="phone" required placeholder="+7 777 123 45 67" class="w-full border border-gray-300 rounded-lg px-4 py-3 focus:ring-2 focus:ring-cyan-400 focus:border-transparent">
|
||
</div>
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-1">Адрес доставки *</label>
|
||
<input type="text" name="address" required placeholder="Улица, дом, квартира" class="w-full border border-gray-300 rounded-lg px-4 py-3 focus:ring-2 focus:ring-cyan-400 focus:border-transparent">
|
||
</div>
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-1">Комментарий</label>
|
||
<textarea name="comment" rows="3" placeholder="Размер, цвет, пожелания" class="w-full border border-gray-300 rounded-lg px-4 py-3 focus:ring-2 focus:ring-cyan-400 focus:border-transparent"></textarea>
|
||
</div>
|
||
<div class="bg-gray-50 p-4 rounded-lg">
|
||
<h3 class="font-bold mb-2">Способ оплаты</h3>
|
||
<label class="flex items-center space-x-3 mb-2">
|
||
<input type="radio" name="payment" value="card" checked class="text-cyan-400">
|
||
<span>Перевод на карту (Kaspi)</span>
|
||
</label>
|
||
<label class="flex items-center space-x-3">
|
||
<input type="radio" name="payment" value="cash" class="text-cyan-400">
|
||
<span>Наличные при получении</span>
|
||
</label>
|
||
</div>
|
||
<div class="border-t pt-4">
|
||
<div class="flex justify-between text-lg font-bold mb-4">
|
||
<span>К оплате:</span>
|
||
<span id="checkoutTotal">0 ₸</span>
|
||
</div>
|
||
<button type="submit" class="w-full bg-cyan-400 text-gray-900 py-4 rounded-lg font-bold text-lg hover:bg-cyan-300 transition">Подтвердить заказ</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Success Modal -->
|
||
<div id="successModal" class="fixed inset-0 z-50 hidden">
|
||
<div class="absolute inset-0 bg-black bg-opacity-50"></div>
|
||
<div class="absolute inset-0 flex items-center justify-center p-4">
|
||
<div class="bg-white rounded-2xl p-8 max-w-md w-full text-center">
|
||
<div class="text-6xl mb-4">✅</div>
|
||
<h2 class="text-2xl font-bold mb-2">Заказ оформлен!</h2>
|
||
<p class="text-gray-600 mb-4">Наш менеджер свяжется с вами в ближайшее время для подтверждения.</p>
|
||
<p class="text-sm text-gray-500 mb-6">Номер заказа: <span id="orderNumber" class="font-bold"></span></p>
|
||
<button onclick="closeSuccess()" class="w-full bg-cyan-400 text-gray-900 py-3 rounded-lg font-bold hover:bg-cyan-300 transition">Закрыть</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// Data
|
||
const products = [
|
||
{ id: 1, name: "Футболка Basic White", category: "tshirts", price: 5990, oldPrice: 7990, image: "https://picsum.photos/seed/tshirt1/400/500", sizes: ["S", "M", "L", "XL"], description: "Классическая белая футболка из 100% хлопка" },
|
||
{ id: 2, name: "Футболка Black Urban", category: "tshirts", price: 6490, oldPrice: null, image: "https://picsum.photos/seed/tshirt2/400/500", sizes: ["M", "L", "XL"], description: "Чёрная футболка с принтом" },
|
||
{ id: 3, name: "Футболка Grey Comfort", category: "tshirts", price: 5490, oldPrice: 6990, image: "https://picsum.photos/seed/tshirt3/400/500", sizes: ["S", "M", "L"], description: "Серая футболка оверсайз" },
|
||
{ id: 4, name: "Худи Classic Black", category: "hoodies", price: 15990, oldPrice: 19990, image: "https://picsum.photos/seed/hoodie1/400/500", sizes: ["S", "M", "L", "XL", "XXL"], description: "Чёрное худи с капюшоном" },
|
||
{ id: 5, name: "Худи Grey Melange", category: "hoodies", price: 14990, oldPrice: null, image: "https://picsum.photos/seed/hoodie2/400/500", sizes: ["M", "L", "XL"], description: "Серое меланжевое худи" },
|
||
{ id: 6, name: "Худи Navy Blue", category: "hoodies", price: 16490, oldPrice: 20990, image: "https://picsum.photos/seed/hoodie3/400/500", sizes: ["S", "M", "L"], description: "Тёмно-синее худи премиум" },
|
||
{ id: 7, name: "Брюки Chino Beige", category: "pants", price: 12990, oldPrice: null, image: "https://picsum.photos/seed/pants1/400/500", sizes: ["30", "32", "34", "36"], description: "Бежевые чиносы" },
|
||
{ id: 8, name: "Джинсы Slim Blue", category: "pants", price: 14990, oldPrice: 18990, image: "https://picsum.photos/seed/pants2/400/500", sizes: ["30", "32", "34"], description: "Синие зауженные джинсы" },
|
||
{ id: 9, name: "Джоггеры Sport", category: "pants", price: 11990, oldPrice: 14990, image: "https://picsum.photos/seed/pants3/400/500", sizes: ["S", "M", "L", "XL"], description: "Спортивные джоггеры" },
|
||
{ id: 10, name: "Кроссовки White Pro", category: "shoes", price: 24990, oldPrice: 29990, image: "https://picsum.photos/seed/shoes1/400/500", sizes: ["39", "40", "41", "42", "43"], description: "Белые кроссовки" },
|
||
{ id: 11, name: "Кроссовки Black Run", category: "shoes", price: 26990, oldPrice: null, image: "https://picsum.photos/seed/shoes2/400/500", sizes: ["40", "41", "42", "43"], description: "Чёрные беговые кроссовки" },
|
||
{ id: 12, name: "Кеды Canvas", category: "shoes", price: 18990, oldPrice: 22990, image: "https://picsum.photos/seed/shoes3/400/500", sizes: ["38", "39", "40", "41", "42"], description: "Кеды из натуральной ткани" }
|
||
];
|
||
|
||
let cart = JSON.parse(localStorage.getItem('cart') || '[]');
|
||
|
||
// Render products
|
||
function renderProducts(filter = 'all') {
|
||
const grid = document.getElementById('productsGrid');
|
||
const filtered = filter === 'all' ? products : products.filter(p => p.category === filter);
|
||
|
||
grid.innerHTML = filtered.map(p => `
|
||
<div class="bg-white rounded-xl overflow-hidden shadow-lg hover:shadow-2xl transition reveal group">
|
||
<div class="relative overflow-hidden">
|
||
<img src="${p.image}" alt="${p.name}" class="w-full h-64 object-cover group-hover:scale-105 transition duration-300">
|
||
${p.oldPrice ? `<span class="absolute top-2 left-2 bg-red-500 text-white px-3 py-1 rounded-full text-sm font-bold">-${Math.round((1 - p.price / p.oldPrice) * 100)}%</span>` : ''}
|
||
</div>
|
||
<div class="p-4">
|
||
<h3 class="font-bold text-lg mb-1">${p.name}</h3>
|
||
<p class="text-gray-500 text-sm mb-2">${p.description}</p>
|
||
<div class="flex flex-wrap gap-1 mb-3">
|
||
${p.sizes.map(s => `<span class="text-xs bg-gray-100 px-2 py-1 rounded">${s}</span>`).join('')}
|
||
</div>
|
||
<div class="flex items-center justify-between">
|
||
<div>
|
||
<span class="text-xl font-bold text-gray-900">${p.price.toLocaleString()} ₸</span>
|
||
${p.oldPrice ? `<span class="text-sm text-gray-400 line-through ml-2">${p.oldPrice.toLocaleString()} ₸</span>` : ''}
|
||
</div>
|
||
<button onclick="addToCart(${p.id})" class="bg-cyan-400 text-gray-900 px-4 py-2 rounded-lg font-bold hover:bg-cyan-300 transition">В корзину</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`).join('');
|
||
}
|
||
|
||
// Filter
|
||
function filterCategory(cat) {
|
||
document.querySelectorAll('.category-btn').forEach(btn => {
|
||
btn.classList.remove('bg-gray-900', 'text-white');
|
||
btn.classList.add('bg-white', 'border-2', 'border-gray-200');
|
||
});
|
||
event.target.classList.remove('bg-white', 'border-2', 'border-gray-200');
|
||
event.target.classList.add('bg-gray-900', 'text-white');
|
||
renderProducts(cat);
|
||
}
|
||
|
||
// Cart functions
|
||
function addToCart(id) {
|
||
const product = products.find(p => p.id === id);
|
||
const existing = cart.find(item => item.id === id);
|
||
if (existing) {
|
||
existing.quantity++;
|
||
} else {
|
||
cart.push({ ...product, quantity: 1 });
|
||
}
|
||
saveCart();
|
||
updateCartDisplay();
|
||
}
|
||
|
||
function removeFromCart(id) {
|
||
cart = cart.filter(item => item.id !== id);
|
||
saveCart();
|
||
updateCartDisplay();
|
||
renderCartItems();
|
||
}
|
||
|
||
function updateQuantity(id, delta) {
|
||
const item = cart.find(item => item.id === id);
|
||
if (item) {
|
||
item.quantity += delta;
|
||
if (item.quantity <= 0) removeFromCart(id);
|
||
else {
|
||
saveCart();
|
||
updateCartDisplay();
|
||
renderCartItems();
|
||
}
|
||
}
|
||
}
|
||
|
||
function saveCart() {
|
||
localStorage.setItem('cart', JSON.stringify(cart));
|
||
}
|
||
|
||
function updateCartDisplay() {
|
||
const count = cart.reduce((sum, item) => sum + item.quantity, 0);
|
||
document.getElementById('cartCount').textContent = count;
|
||
}
|
||
|
||
function renderCartItems() {
|
||
const container = document.getElementById('cartItems');
|
||
if (cart.length === 0) {
|
||
container.innerHTML = '<p class="text-gray-500 text-center py-8">Корзина пуста</p>';
|
||
document.getElementById('cartTotal').textContent = '0 ₸';
|
||
return;
|
||
}
|
||
|
||
let total = 0;
|
||
container.innerHTML = cart.map(item => {
|
||
total += item.price * item.quantity;
|
||
return `
|
||
<div class="flex items-center space-x-4 p-4 bg-gray-50 rounded-lg">
|
||
<img src="${item.image}" alt="${item.name}" class="w-16 h-16 object-cover rounded">
|
||
<div class="flex-1">
|
||
<h4 class="font-semibold text-sm">${item.name}</h4>
|
||
<p class="text-cyan-600 font-bold">${item.price.toLocaleString()} ₸</p>
|
||
</div>
|
||
<div class="flex items-center space-x-2">
|
||
<button onclick="updateQuantity(${item.id}, -1)" class="w-8 h-8 bg-gray-200 rounded-full font-bold hover:bg-gray-300">-</button>
|
||
<span class="font-semibold">${item.quantity}</span>
|
||
<button onclick="updateQuantity(${item.id}, 1)" class="w-8 h-8 bg-gray-200 rounded-full font-bold hover:bg-gray-300">+</button>
|
||
</div>
|
||
<button onclick="removeFromCart(${item.id})" class="text-red-500 hover:text-red-700">
|
||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
|
||
</button>
|
||
</div>
|
||
`;
|
||
}).join('');
|
||
|
||
document.getElementById('cartTotal').textContent = total.toLocaleString() + ' ₸';
|
||
document.getElementById('checkoutTotal').textContent = total.toLocaleString() + ' ₸';
|
||
}
|
||
|
||
function toggleCart() {
|
||
const modal = document.getElementById('cartModal');
|
||
modal.classList.toggle('hidden');
|
||
if (!modal.classList.contains('hidden')) renderCartItems();
|
||
}
|
||
|
||
function toggleCheckout() {
|
||
const modal = document.getElementById('checkoutModal');
|
||
modal.classList.toggle('hidden');
|
||
if (!modal.classList.contains('hidden')) {
|
||
document.getElementById('checkoutForm').reset();
|
||
}
|
||
}
|
||
|
||
function checkout() {
|
||
if (cart.length === 0) {
|
||
alert('Корзина пуста!');
|
||
return;
|
||
}
|
||
toggleCart();
|
||
toggleCheckout();
|
||
}
|
||
|
||
function submitOrder(e) {
|
||
e.preventDefault();
|
||
const form = e.target;
|
||
const order = {
|
||
id: Date.now(),
|
||
date: new Date().toISOString(),
|
||
items: [...cart],
|
||
total: cart.reduce((sum, item) => sum + item.price * item.quantity, 0),
|
||
customer: {
|
||
name: form.name.value,
|
||
phone: form.phone.value,
|
||
address: form.address.value,
|
||
comment: form.comment.value
|
||
},
|
||
payment: form.payment.value
|
||
};
|
||
|
||
// Save order to localStorage (for demo)
|
||
const orders = JSON.parse(localStorage.getItem('orders') || '[]');
|
||
orders.push(order);
|
||
localStorage.setItem('orders', JSON.stringify(orders));
|
||
|
||
// Clear cart
|
||
cart = [];
|
||
saveCart();
|
||
updateCartDisplay();
|
||
|
||
toggleCheckout();
|
||
document.getElementById('orderNumber').textContent = '#' + order.id;
|
||
document.getElementById('successModal').classList.remove('hidden');
|
||
}
|
||
|
||
function closeSuccess() {
|
||
document.getElementById('successModal').classList.add('hidden');
|
||
}
|
||
|
||
// Intersection Observer for animations
|
||
const io = new IntersectionObserver(function(entries) {
|
||
entries.forEach(function(e) { if (e.isIntersecting) e.target.classList.add('in'); });
|
||
}, { threshold: 0.15 });
|
||
document.querySelectorAll('.reveal').forEach(function(el) { io.observe(el); });
|
||
|
||
// Init
|
||
renderProducts();
|
||
updateCartDisplay();
|
||
</script>
|
||
</body>
|
||
</html>
|