https://pastein.ru/t/jjB
Загрузка данных
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MOTO-DRIVE — Премиальный Мотосалон</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">
</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="index.html" class="text-amber-500 font-bold border-b-2 border-amber-500 pb-1">Главная</a>
<a href="catalog.html" class="text-slate-300 hover:text-amber-500 transition">Каталог</a>
<a href="about.html" class="text-slate-300 hover:text-amber-500 transition">О нас</a>
</div>
<div>
<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 transition cursor-pointer shadow-lg shadow-amber-500/20">
<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 class="relative bg-slate-950 py-32 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-25"></div>
<div class="relative max-w-4xl mx-auto px-4 text-center z-10">
<span class="text-amber-500 font-bold uppercase tracking-widest text-xs bg-amber-500/10 px-4 py-2 rounded-full border border-amber-500/20">Инновации и скорость — Сезон 2026</span>
<h1 class="text-5xl md:text-7xl font-extrabold text-white mt-6 mb-6 tracking-tight uppercase">Создай свой <span class="text-amber-500">Драйв</span></h1>
<p class="text-lg text-slate-300 max-w-2xl mx-auto mb-10 leading-relaxed">Полноценный интерактивный конфигуратор, честные тест-драйвы и премиальное обслуживание техники.</p>
<div class="flex flex-wrap justify-center gap-4">
<a href="catalog.html" 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 transition shadow-lg shadow-amber-500/30">
В каталог техники <i class="fa-solid fa-chevron-right text-sm"></i>
</a>
<a href="#configurator" class="bg-slate-800 hover:bg-slate-700 text-white px-8 py-4 rounded-xl font-bold text-lg inline-flex items-center gap-3 transition border border-slate-700">
Кастомизация байка <i class="fa-solid fa-sliders text-sm"></i>
</a>
</div>
</div>
</header>
<section id="configurator" class="max-w-7xl mx-auto px-4 py-24 scroll-mt-20">
<div class="text-center mb-16">
<h2 class="text-4xl font-black text-white uppercase tracking-tight">Онлайн Конфигуратор</h2>
<p class="text-slate-400 mt-2">Собери комплектацию мечты и узнай стоимость в реальном времени</p>
</div>
<div class="bg-slate-950 border border-slate-800 rounded-3xl p-8 lg:p-12 grid grid-cols-1 lg:grid-cols-2 gap-12">
<div class="flex flex-col justify-between bg-slate-900 rounded-2xl p-6 border border-slate-800 relative">
<div>
<span class="text-xs font-bold text-amber-500 uppercase tracking-widest">Превью сборки</span>
<h3 id="config-title" class="text-2xl font-black text-white mt-1">Street Custom Base</h3>
</div>
<div class="py-12 flex justify-center">
<i class="fa-solid fa-motorcycle text-[120px] text-amber-500 transition-all duration-500 transform" id="config-bike-icon"></i>
</div>
<div class="border-t border-slate-800 pt-4 flex justify-between items-end">
<div>
<span class="text-slate-500 text-sm block">Расчетная стоимость</span>
<span id="config-price" class="text-3xl font-black text-white">1 500 000 ₽</span>
</div>
<button onclick="addConfigToCart()" class="bg-amber-500 hover:bg-amber-600 text-slate-950 px-6 py-3 rounded-xl font-bold transition flex items-center gap-2 cursor-pointer">
<i class="fa-solid fa-cart-plus"></i> В корзину эту сборку
</button>
</div>
</div>
<div class="space-y-6">
<div>
<label class="block text-sm font-bold text-slate-400 uppercase tracking-wider mb-3">1. Базовая модель</label>
<select id="config-base" onchange="updateConfigurator()" class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-amber-500">
<option value="1500000" data-name="Street Custom Cruiser">Urban Cruiser Classic — 1 500 000 ₽</option>
<option value="2200000" data-name="Sport Track Edition">Sport Track Pro — 2 200 000 ₽</option>
<option value="1200000" data-name="Enduro Raid Adventure">Enduro Wild Raid — 1 200 000 ₽</option>
</select>
</div>
<div>
<label class="block text-sm font-bold text-slate-400 uppercase tracking-wider mb-3">2. Фирменный цвет салона</label>
<div class="flex gap-4">
<button onclick="setConfigColor('text-amber-500', 0)" class="w-10 h-10 rounded-full bg-amber-500 border-2 border-white cursor-pointer"></button>
<button onclick="setConfigColor('text-red-500', 30000)" class="w-10 h-10 rounded-full bg-red-500 hover:border-2 hover:border-slate-400 cursor-pointer"></button>
<button onclick="setConfigColor('text-blue-500', 30000)" class="w-10 h-10 rounded-full bg-blue-500 hover:border-2 hover:border-slate-400 cursor-pointer"></button>
<button onclick="setConfigColor('text-emerald-500', 45000)" class="w-10 h-10 rounded-full bg-emerald-500 hover:border-2 hover:border-slate-400 cursor-pointer"></button>
</div>
</div>
<div>
<label class="block text-sm font-bold text-slate-400 uppercase tracking-wider mb-3">3. Дополнительные пакеты</label>
<div class="space-y-3">
<label class="flex items-center gap-3 bg-slate-900 p-4 rounded-xl border border-slate-800 cursor-pointer select-none">
<input type="checkbox" id="opt-exhaust" value="120000" onchange="updateConfigurator()" class="w-5 h-5 accent-amber-500">
<div>
<span class="text-white font-bold block text-sm">Спортивный выхлоп Akrapovič (+120 000 ₽)</span>
<span class="text-slate-500 text-xs">Прирост мощности +7 л.с. и сочный басовитый звук.</span>
</div>
</label>
<label class="flex items-center gap-3 bg-slate-900 p-4 rounded-xl border border-slate-800 cursor-pointer select-none">
<input type="checkbox" id="opt-bags" value="65000" onchange="updateConfigurator()" class="w-5 h-5 accent-amber-500">
<div>
<span class="text-white font-bold block text-sm">Комплект багажных кофров (+65 000 ₽)</span>
<span class="text-slate-500 text-xs">Влагозащищенные анатомические боковые кейсы.</span>
</div>
</label>
</div>
</div>
</div>
</div>
</section>
<section class="bg-slate-950 py-20 border-t border-b border-slate-800">
<div class="max-w-7xl mx-auto px-4">
<h2 class="text-3xl font-black text-white text-center mb-12 uppercase tracking-tight">Отзывы Райдеров</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6" id="reviews-container">
<div class="bg-slate-900 p-6 rounded-2xl border border-slate-800">
<div class="flex text-amber-500 gap-1 mb-3"><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i></div>
<p class="text-slate-300 text-sm mb-4">"Взял здесь Fat Boy. Сервис космический, доставили до Тюмени в идеальном закрытом прицепе. Проверил по базам — всё прозрачно!"</p>
<span class="text-white text-xs font-bold block">— Михаил К.</span>
</div>
<div class="bg-slate-900 p-6 rounded-2xl border border-slate-800">
<div class="flex text-amber-500 gap-1 mb-3"><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i></div>
<p class="text-slate-300 text-sm mb-4">"Конфигуратор на сайте — пушка. Собрал, отправил заявку, через 20 минут перезвонили и подтвердили сборку. Жду свой байк!"</p>
<span class="text-white text-xs font-bold block">— Артур Д.</span>
</div>
</div>
<div class="mt-12 max-w-xl mx-auto bg-slate-900 p-6 rounded-2xl border border-slate-800">
<h4 class="text-white font-bold mb-4 text-sm uppercase">Оставить отзыв о салоне</h4>
<div class="space-y-3">
<input type="text" id="rev-name" placeholder="Ваше имя" class="w-full bg-slate-950 border border-slate-700 rounded-lg px-4 py-2 text-white text-sm focus:outline-none">
<textarea id="rev-text" rows="2" placeholder="Текст отзыва" class="w-full bg-slate-950 border border-slate-700 rounded-lg px-4 py-2 text-white text-sm focus:outline-none"></textarea>
<button onclick="addReview()" class="bg-amber-500 hover:bg-amber-600 text-slate-950 px-4 py-2 rounded-lg font-bold text-xs cursor-pointer transition">Опубликовать</button>
</div>
</div>
</div>
</section>
<div id="cart-container"></div>
<script src="cart.js"></script>
<script>
let currentColorClass = 'text-amber-500';
let colorPrice = 0;
function setConfigColor(colorClass, price) {
const bike = document.getElementById('config-bike-icon');
bike.classList.remove(currentColorClass);
bike.classList.add(colorClass);
currentColorClass = colorClass;
colorPrice = price;
updateConfigurator();
}
function updateConfigurator() {
const baseSelect = document.getElementById('config-base');
const selectedOption = baseSelect.options[baseSelect.selectedIndex];
let basePrice = parseInt(selectedOption.value);
let baseName = selectedOption.getAttribute('data-name');
let exhaustPrice = document.getElementById('opt-exhaust').checked ? parseInt(document.getElementById('opt-exhaust').value) : 0;
let bagsPrice = document.getElementById('opt-bags').checked ? parseInt(document.getElementById('opt-bags').value) : 0;
let finalPrice = basePrice + colorPrice + exhaustPrice + bagsPrice;
document.getElementById('config-title').innerText = baseName;
document.getElementById('config-price').innerText = finalPrice.toLocaleString() + ' ₽';
}
function addConfigToCart() {
const title = document.getElementById('config-title').innerText;
const priceText = document.getElementById('config-price').innerText;
const price = parseInt(priceText.replace(/\s/g, ''));
if (typeof addToCart === 'function') {
addToCart(Date.now(), `[Сборка] ${title}`, price);
alert('Ваша персональная сборка успешно добавлена в корзину!');
}
}
function addReview() {
const nameInput = document.getElementById('rev-name');
const textInput = document.getElementById('rev-text');
if(!nameInput.value || !textInput.value) return alert('Заполните поля отзыва');
const container = document.getElementById('reviews-container');
const block = document.createElement('div');
block.className = 'bg-slate-900 p-6 rounded-2xl border border-slate-800 animate-pulse';
block.innerHTML = `
<div class="flex text-amber-500 gap-1 mb-3"><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i></div>
<p class="text-slate-300 text-sm mb-4">"${textInput.value}"</p>
<span class="text-white text-xs font-bold block">— ${nameInput.value}</span>
`;
container.appendChild(block);
nameInput.value = '';
textInput.value = '';
}
updateConfigurator();
</script>
</body>
</html>
каталог
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MOTO-DRIVE — Расширенный Каталог</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">
</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="index.html" class="text-slate-300 hover:text-amber-500 transition">Главная</a>
<a href="catalog.html" class="text-amber-500 font-bold border-b-2 border-amber-500 pb-1">Каталог</a>
<a href="about.html" class="text-slate-300 hover:text-amber-500 transition">О нас</a>
</div>
<div>
<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 transition cursor-pointer shadow-lg shadow-amber-500/20">
<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>
<div id="compare-bar" class="fixed bottom-0 inset-x-0 bg-slate-950 border-t border-slate-800 p-4 z-40 hidden shadow-2xl">
<div class="max-w-7xl mx-auto flex items-center justify-between">
<div class="flex items-center gap-4">
<i class="fa-solid fa-code-compare text-amber-500 text-xl"></i>
<span class="font-bold text-sm text-white">Выбрано моделей для сравнения: <span id="compare-count" class="text-amber-500">0</span></span>
</div>
<div class="flex gap-3">
<button onclick="openCompareModal()" class="bg-amber-500 hover:bg-amber-600 text-slate-950 font-bold px-4 py-2 rounded-lg text-xs cursor-pointer">Показать таблицу</button>
<button onclick="clearCompare()" class="text-slate-400 hover:text-white text-xs">Сбросить</button>
</div>
</div>
</div>
<div id="compare-modal" class="fixed inset-0 bg-black/90 z-50 hidden flex items-center justify-center p-4">
<div class="bg-slate-950 border border-slate-800 rounded-3xl max-w-4xl w-full p-8 relative overflow-x-auto">
<button onclick="closeCompareModal()" class="absolute top-4 right-4 text-slate-400 hover:text-white text-2xl"><i class="fa-solid fa-xmark"></i></button>
<h3 class="text-2xl font-black mb-6 uppercase text-white">Сравнительный анализ моделей</h3>
<table class="w-full text-left text-sm border-collapse">
<thead>
<tr class="border-b border-slate-800 text-slate-400 uppercase text-xs" id="compare-table-head"></tr>
</thead>
<tbody id="compare-table-body" class="text-slate-300"></tbody>
</table>
</div>
</div>
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
<div class="flex flex-col lg:flex-row lg:items-center justify-between gap-6 border-b border-slate-800 pb-8 mb-10">
<div>
<h1 class="text-4xl font-black text-white uppercase tracking-tight">Каталог Техники</h1>
<p class="text-slate-400 text-sm mt-1">Используйте живой поиск и фильтры по классам</p>
</div>
<div class="relative w-full lg:w-72">
<i class="fa-solid fa-magnifying-glass absolute left-4 top-3.5 text-slate-500"></i>
<input type="text" id="search-input" oninput="handleSearchAndFilter()" placeholder="Поиск по названию..." class="w-full bg-slate-950 border border-slate-800 rounded-xl pl-11 pr-4 py-3 text-white text-sm focus:outline-none focus:border-amber-500">
</div>
<div class="flex flex-wrap gap-2" id="filter-buttons">
<button onclick="setCategory('all')" class="cat-btn bg-amber-500 text-slate-950 px-5 py-2.5 rounded-xl font-bold cursor-pointer">Все</button>
<button onclick="setCategory('sport')" class="cat-btn bg-slate-800 text-slate-300 px-5 py-2.5 rounded-xl font-bold cursor-pointer">Спортбайки</button>
<button onclick="setCategory('cruiser')" class="cat-btn bg-slate-800 text-slate-300 px-5 py-2.5 rounded-xl font-bold cursor-pointer">Круизеры</button>
<button onclick="setCategory('enduro')" class="cat-btn bg-slate-800 text-slate-300 px-5 py-2.5 rounded-xl font-bold 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-container"></div>
<script src="cart.js"></script>
<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', engine: '998 см³', power: '203 л.с.', weight: '207 кг' },
{ 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', engine: '1868 см³', power: '94 л.с.', weight: '317 кг' },
{ 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', engine: '293 см³', power: '51 л.с.', weight: '103 кг' },
{ 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', engine: '599 см³', power: '118 л.с.', weight: '190 кг' },
{ 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', engine: '1084 см³', power: '87 л.с.', weight: '223 кг' },
{ id: 6, name: 'BMW R 1250 GS Adventure', category: 'enduro', price: 2700000, img: 'https://images.unsplash.com/photo-1615887023516-9b6bcd559e87?auto=format&fit=crop&q=80&w=600', engine: '1254 см³', power: '136 л.с.', weight: '268 кг' }
];
let currentCategory = 'all';
let compareList = [];
function renderCatalog(items) {
const grid = document.getElementById('bike-grid');
grid.innerHTML = '';
if(items.length === 0) {
grid.innerHTML = `<div class="col-span-full text-center text-slate-500 py-12">Ничего не найдено...</div>`;
return;
}
items.forEach(item => {
const isCompared = compareList.some(p => p.id === item.id);
const card = document.createElement('div');
card.className = 'bg-slate-950 border border-slate-800 rounded-2xl overflow-hidden hover:border-slate-700 transition flex flex-col justify-between';
card.innerHTML = `
<div>
<div class="h-52 bg-slate-900 overflow-hidden relative">
<img src="${item.img}" alt="${item.name}" class="w-full h-full object-cover">
<button onclick="toggleCompare(${item.id})" class="absolute top-4 right-4 ${isCompared ? 'bg-amber-500 text-slate-950' : 'bg-slate-950/80 text-white'} w-10 h-10 rounded-xl flex items-center justify-center transition border border-slate-800 cursor-pointer">
<i class="fa-solid fa-code-compare"></i>
</button>
</div>
<div class="p-6">
<h3 class="text-xl font-bold text-white mb-4">${item.name}</h3>
<div class="grid grid-cols-3 gap-2 text-center text-xs">
<div class="bg-slate-900 p-2 rounded-lg border border-slate-800"><span class="block text-slate-500">Объем</span><span class="text-amber-500 font-bold">${item.engine}</span></div>
<div class="bg-slate-900 p-2 rounded-lg border border-slate-800"><span class="block text-slate-500">Сила</span><span class="text-amber-500 font-bold">${item.power}</span></div>
<div class="bg-slate-900 p-2 rounded-lg border border-slate-800"><span class="block text-slate-500">Вес</span><span class="text-amber-500 font-bold">${item.weight}</span></div>
</div>
</div>
</div>
<div class="p-6 pt-0 flex items-center justify-between border-t border-slate-900">
<span class="text-xl font-black text-white mt-4">${item.price.toLocaleString()} ₽</span>
<button onclick="addToCart(${item.id}, '${item.name}', ${item.price})" class="bg-amber-500 hover:bg-amber-600 text-slate-950 px-4 py-2.5 rounded-xl font-bold text-sm mt-4 flex items-center gap-2 cursor-pointer transition">
<i class="fa-solid fa-cart-plus"></i>
</button>
</div>
`;
grid.appendChild(card);
});
}
function handleSearchAndFilter() {
const query = document.getElementById('search-input').value.toLowerCase();
const filtered = products.filter(p => {
const matchCat = (currentCategory === 'all' || p.category === currentCategory);
const matchSearch = p.name.toLowerCase().includes(query);
return matchCat && matchSearch;
});
renderCatalog(filtered);
}
function setCategory(cat) {
currentCategory = cat;
const buttons = document.querySelectorAll('#filter-buttons button');
buttons.forEach(btn => btn.className = "bg-slate-800 text-slate-300 px-5 py-2.5 rounded-xl font-bold cursor-pointer");
event.target.className = "bg-amber-500 text-slate-950 px-5 py-2.5 rounded-xl font-bold cursor-pointer";
handleSearchAndFilter();
}
// Логика сравнения
function toggleCompare(id) {
const item = products.find(p => p.id === id);
const index = compareList.findIndex(p => p.id === id);
if(index > -1) compareList.splice(index, 1);
else if(compareList.length < 3) compareList.push(item);
else alert('Можно сравнивать не более 3-х моделей одновременно!');
updateCompareBar();
handleSearchAndFilter();
}
function updateCompareBar() {
const bar = document.getElementById('compare-bar');
const count = document.getElementById('compare-count');
count.innerText = compareList.length;
if(compareList.length > 0) bar.classList.remove('hidden');
else bar.classList.add('hidden');
}
function clearCompare() { compareList = []; updateCompareBar(); handleSearchAndFilter(); }
function openCompareModal() {
document.getElementById('compare-modal').classList.remove('hidden');
const head = document.getElementById('compare-table-head');
const body = document.getElementById('compare-table-body');
head.innerHTML = `<th class="p-4">Характеристика</th>`;
compareList.forEach(p => head.innerHTML += `<th class="p-4 text-amber-500">${p.name}</th>`);
const specs = [
{ label: 'Стоимость', key: 'price', suffix: ' ₽' },
{ label: 'Объем двигателя', key: 'engine', suffix: '' },
{ label: 'Мощность', key: 'power', suffix: '' },
{ label: 'Сухой вес', key: 'weight', suffix: '' }
];
body.innerHTML = '';
specs.forEach(spec => {
let rowHtml = `<tr class="border-b border-slate-900"><td class="p-4 font-bold text-slate-400">${spec.label}</td>`;
compareList.forEach(p => {
let val = spec.key === 'price' ? p[spec.key].toLocaleString() : p[spec.key];
rowHtml += `<td class="p-4">${val}${spec.suffix}</td>`;
});
rowHtml += `</tr>`;
body.innerHTML += rowHtml;
});
}
function closeCompareModal() { document.getElementById('compare-modal').classList.add('hidden'); }
renderCatalog(products);
</script>
</body>
</html>
аобоуо
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MOTO-DRIVE — О компании и FAQ</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">
</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="index.html" class="text-slate-300 hover:text-amber-500 transition">Главная</a>
<a href="catalog.html" class="text-slate-300 hover:text-amber-500 transition">Каталог</a>
<a href="about.html" class="text-amber-500 font-bold border-b-2 border-amber-500 pb-1">О нас</a>
</div>
<div>
<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 transition cursor-pointer shadow-lg shadow-amber-500/20">
<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>
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
<div class="bg-slate-950 border border-slate-800 rounded-3xl p-8 max-w-2xl mx-auto mb-20 shadow-xl">
<h2 class="text-2xl font-black text-white text-center uppercase tracking-tight mb-2">Запись на Тест-Драйв</h2>
<p class="text-slate-400 text-center text-sm mb-6">Опробуйте байк на специализированной трассе перед покупкой</p>
<form onsubmit="bookTestDrive(event)" class="space-y-4">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<input type="text" required placeholder="Ваше имя" class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-amber-500">
<input type="tel" required placeholder="Контактный телефон" class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-amber-500">
</div>
<select required class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-amber-500">
<option value="">Выберите класс техники</option>
<option value="sport">Спортбайк (Трековая сессия)</option>
<option value="cruiser">Круизер (Городской заезд)</option>
<option value="enduro">Эндуро (Внедорожный полигон)</option>
</select>
<button type="submit" class="w-full bg-amber-500 hover:bg-amber-600 text-slate-950 font-black py-3.5 rounded-xl transition cursor-pointer">Подать заявку</button>
</form>
</div>
<div class="max-w-3xl mx-auto">
<h2 class="text-3xl font-black text-center mb-8 uppercase tracking-tight text-white">Часто Задаваемые Вопросы</h2>
<div class="space-y-4">
<div class="border border-slate-800 bg-slate-950 rounded-xl overflow-hidden">
<button onclick="toggleFaq(this)" class="w-full p-5 text-left font-bold flex justify-between items-center text-white focus:outline-none cursor-pointer">
<span>Возможно ли оформление мотоцикла в кредит или лизинг?</span>
<i class="fa-solid fa-chevron-down text-amber-500 transition-transform"></i>
</button>
<div class="max-h-0 overflow-hidden transition-all duration-300 ease-in-out bg-slate-900/50">
<p class="p-5 text-sm text-slate-400 leading-relaxed">Да, мы сотрудничаем с 5 ведущими банками России. Возможно оформление онлайн-заявки прямо через нашего менеджера по паспорту и водительскому удостоверению с первоначальным взносом от 10%.</p>
</div>
</div>
<div class="border border-slate-800 bg-slate-950 rounded-xl overflow-hidden">
<button onclick="toggleFaq(this)" class="w-full p-5 text-left font-bold flex justify-between items-center text-white focus:outline-none cursor-pointer">
<span>Как осуществляется доставка техники в другие регионы?</span>
<i class="fa-solid fa-chevron-down text-amber-500 transition-transform"></i>
</button>
<div class="max-h-0 overflow-hidden transition-all duration-300 ease-in-out bg-slate-900/50">
<p class="p-5 text-sm text-slate-400 leading-relaxed">Доставка по РФ производится специализированными закрытыми фургонами нашей собственной логистической службы. Каждый мотоцикл надежно крепится растяжками и страхуется на полную стоимость.</p>
</div>
</div>
</div>
</div>
</main>
<div id="cart-container"></div>
<script src="cart.js"></script>
<script>
function toggleFaq(button) {
const content = button.nextElementSibling;
const icon = button.querySelector('i');
if (content.style.maxHeight && content.style.maxHeight !== '0px') {
content.style.maxHeight = '0px';
icon.style.transform = 'rotate(0deg)';
} else {
content.style.maxHeight = content.scrollHeight + 'px';
icon.style.transform = 'rotate(180deg)';
}
}
function bookTestDrive(e) {
e.preventDefault();
alert('Менеджер полигона свяжется с вами для верификации ваших водительских прав категории А. Заявка утверждена!');
e.target.reset();
}
</script>
</body>
</html>
