https://pastein.ru/t/EiB
Загрузка данных
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MotoDrive — Интернет-магазин мотоциклов</title>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
.smooth-transition { transition: all 0.3s ease; }
</style>
</head>
<body class="bg-slate-900 text-slate-100 font-sans antialiased">
<nav class="bg-slate-950 sticky top-0 z-50 border-b border-slate-800 shadow-xl">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-20">
<div class="flex items-center gap-2">
<i class="fa-solid fa-motorcycle text-amber-500 text-3xl"></i>
<span class="text-2xl font-black tracking-wider text-white">MOTO<span class="text-amber-500">DRIVE</span></span>
</div>
<div class="hidden md:flex space-x-8 font-medium">
<a href="#home" class="text-amber-500 hover:text-amber-400 smooth-transition">Главная</a>
<a href="#catalog" class="text-slate-300 hover:text-amber-500 smooth-transition">Каталог</a>
<a href="#about" class="text-slate-300 hover:text-amber-500 smooth-transition">О нас</a>
</div>
<div class="relative">
<button onclick="toggleCart()" class="bg-amber-500 hover:bg-amber-600 text-slate-950 px-5 py-2.5 rounded-full font-bold flex items-center gap-2 smooth-transition shadow-lg shadow-amber-500/20 cursor-pointer">
<i class="fa-solid fa-basket-shopping"></i>
<span>Корзина</span>
<span id="cart-count" class="bg-slate-950 text-amber-500 text-xs px-2 py-0.5 rounded-full ml-1">0</span>
</button>
</div>
</div>
</div>
</nav>
<header id="home" class="relative bg-slate-950 py-24 flex items-center justify-center overflow-hidden">
<div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1558981806-ec527fa84c39?auto=format&fit=crop&q=80&w=1920')] bg-cover bg-center opacity-30"></div>
<div class="relative max-w-7xl mx-auto px-4 text-center z-10">
<span class="text-amber-500 font-bold uppercase tracking-widest text-sm bg-amber-500/10 px-4 py-2 rounded-full border border-amber-500/20">Твой идеальный байк уже здесь</span>
<h1 class="text-5xl md:text-7xl font-extrabold text-white mt-6 mb-6 tracking-tight">Почувствуй Свободу и Скорость</h1>
<p class="text-xl text-slate-300 max-w-2xl mx-auto mb-10 leading-relaxed">Лучшие мировые бренды, гарантия качества и полное техническое обслуживание. Выбери свой стиль жизни сегодня.</p>
<a href="#catalog" class="bg-amber-500 hover:bg-amber-600 text-slate-950 px-8 py-4 rounded-xl font-bold text-lg inline-flex items-center gap-3 smooth-transition shadow-lg shadow-amber-500/30">
Перейти в каталог <i class="fa-solid fa-arrow-right"></i>
</a>
</div>
</header>
<main id="catalog" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
<div class="flex flex-col md:flex-row md:items-end justify-between mb-12 gap-6">
<div>
<h2 class="text-4xl font-bold text-white mb-2">Наш Мотопарк</h2>
<p class="text-slate-400">От городского круиза до трековых рекордов</p>
</div>
<div class="flex flex-wrap gap-2" id="filter-buttons">
<button onclick="filterCategory('all')" class="filter-btn active bg-amber-500 text-slate-950 px-5 py-2 rounded-lg font-semibold smooth-transition cursor-pointer">Все</button>
<button onclick="filterCategory('sport')" class="filter-btn bg-slate-800 hover:bg-slate-700 text-slate-300 px-5 py-2 rounded-lg font-semibold smooth-transition cursor-pointer">Спорт</button>
<button onclick="filterCategory('cruiser')" class="filter-btn bg-slate-800 hover:bg-slate-700 text-slate-300 px-5 py-2 rounded-lg font-semibold smooth-transition cursor-pointer">Круизеры</button>
<button onclick="filterCategory('enduro')" class="filter-btn bg-slate-800 hover:bg-slate-700 text-slate-300 px-5 py-2 rounded-lg font-semibold smooth-transition cursor-pointer">Эндуро</button>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8" id="bike-grid">
</div>
</main>
<div id="cart-sidebar" class="fixed inset-y-0 right-0 w-full max-w-md bg-slate-950 shadow-2xl z-50 transform translate-x-full smooth-transition border-l border-slate-800 flex flex-col">
<div class="p-6 border-b border-slate-800 flex items-center justify-between">
<h3 class="text-xl font-bold text-white flex items-center gap-2">
<i class="fa-solid fa-basket-shopping text-amber-500"></i> Ваша корзина
</h3>
<button onclick="toggleCart()" class="text-slate-400 hover:text-white text-2xl cursor-pointer"><i class="fa-solid fa-xmark"></i></button>
</div>
<div id="cart-items" class="p-6 flex-1 overflow-y-auto space-y-4">
</div>
<div class="p-6 border-t border-slate-800 bg-slate-900/50">
<div class="flex justify-between text-lg font-bold mb-6">
<span>Итого к оплате:</span>
<span id="cart-total" class="text-amber-500">0 ₽</span>
</div>
<button onclick="openCheckout()" id="checkout-btn" class="w-full bg-amber-500 hover:bg-amber-600 disabled:bg-slate-800 disabled:text-slate-500 text-slate-950 py-4 rounded-xl font-bold text-center block smooth-transition cursor-pointer" disabled>
Оформить заказ
</button>
</div>
</div>
<div id="checkout-modal" class="fixed inset-0 bg-black/80 z-50 hidden flex items-center justify-center p-4">
<div class="bg-slate-950 border border-slate-800 rounded-2xl max-w-md w-full p-8 relative">
<button onclick="closeCheckout()" class="absolute top-4 right-4 text-slate-400 hover:text-white text-xl cursor-pointer"><i class="fa-solid fa-xmark"></i></button>
<h3 class="text-2xl font-bold text-white mb-6">Оформление заказа</h3>
<form id="order-form" onsubmit="submitOrder(event)" class="space-y-4">
<div>
<label class="block text-sm font-medium text-slate-400 mb-1">Ваше Имя</label>
<input type="text" required class="w-full bg-slate-900 border border-slate-700 rounded-lg px-4 py-2.5 text-white focus:outline-none focus:border-amber-500">
</div>
<div>
<label class="block text-sm font-medium text-slate-400 mb-1">Телефон</label>
<input type="tel" required placeholder="+7 (___) ___-__-__" class="w-full bg-slate-900 border border-slate-700 rounded-lg px-4 py-2.5 text-white focus:outline-none focus:border-amber-500">
</div>
<div>
<label class="block text-sm font-medium text-slate-400 mb-1">Адрес доставки</label>
<textarea required rows="3" class="w-full bg-slate-900 border border-slate-700 rounded-lg px-4 py-2.5 text-white focus:outline-none focus:border-amber-500"></textarea>
</div>
<button type="submit" class="w-full bg-amber-500 hover:bg-amber-600 text-slate-950 font-bold py-3.5 rounded-lg mt-6 smooth-transition cursor-pointer">
Подтвердить заказ
</button>
</form>
</div>
</div>
<footer id="about" class="bg-slate-950 border-t border-slate-800 py-12 mt-20">
<div class="max-w-7xl mx-auto px-4 text-center text-slate-500 text-sm">
<p class="mb-4">© 2026 MOTO-DRIVE. Учебная практика. Все права защищены.</p>
<p>Разработано в учебных целях.</p>
</div>
</footer>
<script>
// База данных товаров (динамический вывод)
const products = [
{ id: 1, name: 'Kawasaki Ninja ZX-10R', category: 'sport', price: 2450000, img: 'https://images.unsplash.com/photo-1614162692292-7ac56d7f7f1e?auto=format&fit=crop&q=80&w=600', desc: 'Флагманский суперспорт для трека и города.' },
{ id: 2, name: 'Harley-Davidson Fat Boy', category: 'cruiser', price: 3100000, img: 'https://images.unsplash.com/photo-1568772585407-9361f9bf3a87?auto=format&fit=crop&q=80&w=600', desc: 'Икона стиля. Легендарный американский круизер.' },
{ id: 3, name: 'KTM 300 EXC TPI', category: 'enduro', price: 1150000, img: 'https://images.unsplash.com/photo-1599819811279-d5ad9cccf838?auto=format&fit=crop&q=80&w=600', desc: 'Король хард-эндуро. Максимальная проходимость.' },
{ id: 4, name: 'Yamaha YZF-R6', category: 'sport', price: 1850000, img: 'https://images.unsplash.com/photo-1609630875171-b1321377ee65?auto=format&fit=crop&q=80&w=600', desc: 'Бескомпромиссный спортивный байк с идеальной управляемостью.' },
{ id: 5, name: 'Honda Rebel 1100', category: 'cruiser', price: 1400000, img: 'https://images.unsplash.com/photo-1558981403-c5f9899a28bc?auto=format&fit=crop&q=80&w=600', desc: 'Современный боббер для ценителей комфорта и технологий.' },
{ id: 6, name: 'BMW R 1250 GS', category: 'enduro', price: 2700000, img: 'https://images.unsplash.com/photo-1615887023516-9b6bcd559e87?auto=format&fit=crop&q=80&w=600', desc: 'Туристический эндуро для кругосветных путешествий.' }
];
let cart = [];
// Инициализация каталога
function displayProducts(filteredProducts) {
const grid = document.getElementById('bike-grid');
grid.innerHTML = '';
filteredProducts.forEach(product => {
const card = document.createElement('div');
card.className = 'bg-slate-950 border border-slate-800 rounded-2xl overflow-hidden shadow-lg hover:border-slate-700 smooth-transition group';
card.innerHTML = `
<div class="overflow-hidden relative h-56 bg-slate-900">
<img src="${product.img}" alt="${product.name}" class="w-full h-full object-cover group-hover:scale-105 smooth-transition">
<span class="absolute top-4 left-4 bg-slate-950/80 text-amber-500 text-xs font-bold uppercase tracking-wider px-3 py-1 rounded-full backdrop-blur-sm border border-slate-800">
${product.category === 'sport' ? 'Спорт' : product.category === 'cruiser' ? 'Круизер' : 'Эндуро'}
</span>
</div>
<div class="p-6">
<h3 class="text-xl font-bold text-white mb-2">${product.name}</h3>
<p class="text-slate-400 text-sm mb-4 line-clamp-2">${product.desc}</p>
<div class="flex items-center justify-between mt-6">
<span class="text-2xl font-black text-white">${product.price.toLocaleString()} ₽</span>
<button onclick="addToCart(${product.id})" class="bg-amber-500 hover:bg-amber-600 text-slate-950 px-4 py-2.5 rounded-xl font-bold text-sm flex items-center gap-2 smooth-transition cursor-pointer">
<i class="fa-solid fa-cart-plus"></i> В корзину
</button>
</div>
</div>
`;
grid.appendChild(card);
});
}
// Фильтрация категорий
function filterCategory(category) {
// Смена активного класса на кнопках
const buttons = document.querySelectorAll('#filter-buttons button');
buttons.forEach(btn => {
btn.classList.remove('bg-amber-500', 'text-slate-950');
btn.classList.add('bg-slate-800', 'text-slate-300', 'hover:bg-slate-700');
});
event.target.classList.remove('bg-slate-800', 'text-slate-300', 'hover:bg-slate-700');
event.target.classList.add('bg-amber-500', 'text-slate-950');
if (category === 'all') {
displayProducts(products);
} else {
displayProducts(products.filter(p => p.category === category));
}
}
// Управление корзиной
function toggleCart() {
const sidebar = document.getElementById('cart-sidebar');
sidebar.classList.toggle('translate-x-full');
}
function addToCart(id) {
const product = products.find(p => p.id === id);
const cartItem = cart.find(item => item.id === id);
if (cartItem) {
cartItem.quantity++;
} else {
cart.push({ ...product, quantity: 1 });
}
updateCart();
}
function removeFromCart(id) {
cart = cart.filter(item => item.id !== id);
updateCart();
}
function changeQuantity(id, delta) {
const item = cart.find(item => item.id === id);
if (item) {
item.quantity += delta;
if (item.quantity <= 0) {
removeFromCart(id);
return;
}
}
updateCart();
}
function updateCart() {
const cartItemsContainer = document.getElementById('cart-items');
const cartCount = document.getElementById('cart-count');
const cartTotal = document.getElementById('cart-total');
const checkoutBtn = document.getElementById('checkout-btn');
cartItemsContainer.innerHTML = '';
let total = 0;
let count = 0;
cart.forEach(item => {
total += item.price * item.quantity;
count += item.quantity;
const itemElement = document.createElement('div');
itemElement.className = 'flex items-center justify-between bg-slate-900 p-4 rounded-xl border border-slate-800';
itemElement.innerHTML = `
<div class="flex-1 min-w-0 pr-4">
<h4 class="text-white font-bold text-sm truncate">${item.name}</h4>
<p class="text-amber-500 text-xs mt-1">${(item.price * item.quantity).toLocaleString()} ₽</p>
</div>
<div class="flex items-center gap-3">
<div class="flex items-center bg-slate-950 border border-slate-800 rounded-lg">
<button onclick="changeQuantity(${item.id}, -1)" class="px-2 py-1 text-slate-400 hover:text-white text-xs cursor-pointer">-</button>
<span class="px-2 text-sm font-bold text-white">${item.quantity}</span>
<button onclick="changeQuantity(${item.id}, 1)" class="px-2 py-1 text-slate-400 hover:text-white text-xs cursor-pointer">+</button>
</div>
<button onclick="removeFromCart(${item.id})" class="text-slate-500 hover:text-red-400 smooth-transition cursor-pointer">
<i class="fa-solid fa-trash-can"></i>
</button>
</div>
`;
cartItemsContainer.appendChild(itemElement);
});
cartCount.innerText = count;
cartTotal.innerText = total.toLocaleString() + ' ₽';
checkoutBtn.disabled = cart.length === 0;
}
// Оформление заказа
function openCheckout() {
toggleCart();
document.getElementById('checkout-modal').classList.remove('hidden');
}
function closeCheckout() {
document.getElementById('checkout-modal').classList.add('hidden');
}
function submitOrder(event) {
event.preventDefault();
alert('Успешно! Ваш заказ принят в обработку. Спасибо за покупку!');
cart = [];
updateCart();
closeCheckout();
document.getElementById('order-form').reset();
}
// Рендер при загрузке
displayProducts(products);
</script>
</body>
</html>
