606 lines
27 KiB
HTML
606 lines
27 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>AutoPrime — Автомобили с пробегом</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>">
|
||
<style>
|
||
:root{--ink:#0F1218;--cyan:#0066FF;--cyan-dark:#0052CC;--cyan-50:#E8F2FF;--white:#FFFFFF;--gray-500:#5B6573;--gray-200:#E8ECF1;--gray-100:#F2F4F7;--success:#10B981;--warning:#F59E0B}
|
||
*{box-sizing:border-box;margin:0;padding:0}
|
||
body{font:17px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;color:var(--ink);background:var(--white)}
|
||
.container{max-width:1200px;margin:0 auto;padding:0 24px}
|
||
a{text-decoration:none;color:inherit}
|
||
button{cursor:pointer;border:none;font-family:inherit}
|
||
|
||
/* Header */
|
||
.header{background:var(--white);border-bottom:1px solid var(--gray-200);position:sticky;top:0;z-index:100}
|
||
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;max-width:1200px;margin:0 auto}
|
||
.logo{font-size:24px;font-weight:800;color:var(--cyan)}
|
||
.nav{display:flex;gap:24px}
|
||
.nav a{font-weight:500;transition:color .2s}
|
||
.nav a:hover{color:var(--cyan)}
|
||
.header-phone{font-weight:700;color:var(--ink)}
|
||
|
||
/* Hero */
|
||
.hero{background:linear-gradient(135deg,var(--ink) 0%,#1a1f2e 100%);color:var(--white);padding:80px 24px}
|
||
.hero-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
|
||
.hero h1{font-size:48px;font-weight:800;line-height:1.1;margin-bottom:20px}
|
||
.hero p{font-size:18px;color:#9aa3b2;margin-bottom:32px}
|
||
.hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}
|
||
.stat{background:rgba(255,255,255,0.1);border-radius:12px;padding:20px;text-align:center}
|
||
.stat-num{font-size:32px;font-weight:800;color:var(--cyan);display:block}
|
||
.stat-label{font-size:14px;color:#9aa3b2}
|
||
.hero-image{background:var(--gray-200);border-radius:16px;height:400px;display:flex;align-items:center;justify-content:center;overflow:hidden}
|
||
.hero-image img{width:100%;height:100%;object-fit:cover}
|
||
|
||
/* Search & Filters */
|
||
.search-section{background:var(--cyan-50);padding:60px 24px;margin-top:-40px;position:relative;z-index:10}
|
||
.search-box{max-width:1200px;margin:0 auto;background:var(--white);border-radius:16px;padding:32px;box-shadow:0 10px 40px rgba(0,0,0,0.1)}
|
||
.search-title{font-size:24px;font-weight:700;margin-bottom:24px;text-align:center}
|
||
.filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:24px}
|
||
.filter-group label{display:block;font-size:14px;font-weight:500;margin-bottom:8px;color:var(--gray-500)}
|
||
.filter-group select,.filter-group input{width:100%;padding:12px 16px;border:1px solid var(--gray-200);border-radius:8px;font-size:16px;background:var(--white)}
|
||
.filter-actions{display:flex;gap:16px;justify-content:center}
|
||
.btn{padding:14px 32px;border-radius:8px;font-weight:700;font-size:16px;transition:all .2s}
|
||
.btn-primary{background:var(--cyan);color:var(--white)}
|
||
.btn-primary:hover{background:var(--cyan-dark)}
|
||
.btn-outline{background:transparent;border:2px solid var(--gray-200);color:var(--ink)}
|
||
.btn-outline:hover{border-color:var(--cyan)}
|
||
|
||
/* Catalog */
|
||
.catalog{padding:80px 24px}
|
||
.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:40px}
|
||
.section-title{font-size:36px;font-weight:700}
|
||
.cars-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:24px}
|
||
.car-card{background:var(--white);border-radius:16px;overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,0.08);transition:transform .2s,box-shadow .2s}
|
||
.car-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,0.12)}
|
||
.car-image{height:220px;background:var(--gray-100);overflow:hidden}
|
||
.car-image img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
|
||
.car-card:hover .car-image img{transform:scale(1.05)}
|
||
.car-content{padding:20px}
|
||
.car-price{font-size:24px;font-weight:800;color:var(--cyan);margin-bottom:8px}
|
||
.car-title{font-size:18px;font-weight:700;margin-bottom:12px}
|
||
.car-specs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
|
||
.spec{background:var(--gray-100);padding:6px 12px;border-radius:6px;font-size:13px;color:var(--gray-500)}
|
||
.car-meta{display:flex;justify-content:space-between;align-items:center;padding-top:16px;border-top:1px solid var(--gray-200)}
|
||
.car-location{font-size:14px;color:var(--gray-500}
|
||
.btn-test{background:var(--cyan);color:var(--white);padding:10px 20px;border-radius:8px;font-weight:600;font-size:14px}
|
||
.btn-test:hover{background:var(--cyan-dark)}
|
||
|
||
/* Features */
|
||
.features{background:var(--gray-100);padding:80px 24px}
|
||
.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:32px;max-width:1200px;margin:0 auto}
|
||
.feature{text-align:center;padding:32px;background:var(--white);border-radius:16px}
|
||
.feature-icon{font-size:48px;margin-bottom:16px}
|
||
.feature h3{font-size:20px;font-weight:700;margin-bottom:12px}
|
||
.feature p{color:var(--gray-500);line-height:1.7}
|
||
|
||
/* Test Drive Form */
|
||
.test-drive{padding:80px 24px}
|
||
.form-container{max-width:600px;margin:0 auto;background:var(--white);border-radius:16px;padding:40px;box-shadow:0 4px 20px rgba(0,0,0,0.1)}
|
||
.form-title{font-size:28px;font-weight:700;margin-bottom:12px;text-align:center}
|
||
.form-subtitle{color:var(--gray-500);text-align:center;margin-bottom:32px}
|
||
.form-group{margin-bottom:20px}
|
||
.form-group label{display:block;font-size:14px;font-weight:500;margin-bottom:8px;color:var(--gray-500)}
|
||
.form-group input,.form-group select,.form-group textarea{width:100%;padding:14px 16px;border:1px solid var(--gray-200);border-radius:8px;font-size:16px;font-family:inherit}
|
||
.form-group textarea{resize:vertical;min-height:100px}
|
||
.form-submit{width:100%;padding:16px;background:var(--cyan);color:var(--white);border:none;border-radius:8px;font-size:18px;font-weight:700;cursor:pointer;transition:background .2s}
|
||
.form-submit:hover{background:var(--cyan-dark)}
|
||
.form-success{display:none;text-align:center;padding:40px}
|
||
.form-success.show{display:block}
|
||
.form-success-icon{font-size:64px;margin-bottom:20px}
|
||
.form-success h3{font-size:24px;font-weight:700;margin-bottom:12px}
|
||
.form-success p{color:var(--gray-500)}
|
||
|
||
/* Contact */
|
||
.contact{background:var(--ink);color:var(--white);padding:80px 24px}
|
||
.contact-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:48px}
|
||
.contact h2{font-size:36px;font-weight:700;margin-bottom:24px}
|
||
.contact-info{margin-bottom:32px}
|
||
.contact-item{display:flex;align-items:center;gap:16px;margin-bottom:20px;font-size:18px}
|
||
.contact-item-icon{width:40px;height:40px;background:var(--cyan);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px}
|
||
.socials{display:flex;gap:16px}
|
||
.social-link{width:48px;height:48px;background:rgba(255,255,255,0.1);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;transition:background .2s}
|
||
.social-link:hover{background:var(--cyan)}
|
||
.map-container{border-radius:16px;overflow:hidden;height:400px}
|
||
|
||
/* Footer */
|
||
.footer{background:#0a0c10;color:#9aa3b2;padding:40px 24px;text-align:center}
|
||
.footer p{font-size:14px}
|
||
|
||
/* Modal */
|
||
.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.6);z-index:1000;align-items:center;justify-content:center}
|
||
.modal.show{display:flex}
|
||
.modal-content{background:var(--white);border-radius:16px;max-width:500px;width:90%;max-height:90vh;overflow-y:auto}
|
||
.modal-header{padding:24px;border-bottom:1px solid var(--gray-200);display:flex;justify-content:space-between;align-items:center}
|
||
.modal-title{font-size:22px;font-weight:700}
|
||
.modal-close{background:none;font-size:28px;color:var(--gray-500)}
|
||
.modal-body{padding:24px}
|
||
.modal-car-info{background:var(--gray-100);border-radius:12px;padding:20px;margin-bottom:24px}
|
||
.modal-car-title{font-size:20px;font-weight:700;margin-bottom:8px}
|
||
.modal-car-price{font-size:24px;font-weight:800;color:var(--cyan)}
|
||
|
||
/* Responsive */
|
||
@media(max-width:900px){
|
||
.hero-inner{grid-template-columns:1fr}.hero-image{display:none}.hero-stats{grid-template-columns:repeat(3,1fr)}
|
||
.search-box{padding:20px}.filters{grid-template-columns:repeat(2,1fr)}
|
||
.cars-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr)}}
|
||
@media(max-width:640px){
|
||
.hero h1{font-size:32px}.hero-stats{grid-template-columns:1fr}.section-title{font-size:28px}
|
||
.filters{grid-template-columns:1fr}.contact-inner{grid-template-columns:1fr}
|
||
.nav{display:none}.header-inner{padding:12px 20px}}
|
||
|
||
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
|
||
.reveal.in{opacity:1;transform:none}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<header class="header">
|
||
<div class="header-inner">
|
||
<a href="#" class="logo">🚗 AutoPrime</a>
|
||
<nav class="nav">
|
||
<a href="#catalog">Каталог</a>
|
||
<a href="#features">Преимущества</a>
|
||
<a href="#test-drive">Тест-драйв</a>
|
||
<a href="#contact">Контакты</a>
|
||
</nav>
|
||
<a href="tel:+77771234567" class="header-phone">+7 (777) 123-45-67</a>
|
||
</div>
|
||
</header>
|
||
|
||
<section class="hero">
|
||
<div class="hero-inner">
|
||
<div>
|
||
<h1>Автомобили с пробегом в Казахстане</h1>
|
||
<p>Проверенные авто с гарантией качества. Запишитесь на тест-драйв онлайн и выберите свой идеальный автомобиль.</p>
|
||
<a href="#catalog" class="btn btn-primary" style="display:inline-block">Смотреть каталог</a>
|
||
<div class="hero-stats">
|
||
<div class="stat">
|
||
<span class="stat-num">500+</span>
|
||
<span class="stat-label">авто в наличии</span>
|
||
</div>
|
||
<div class="stat">
|
||
<span class="stat-num">15</span>
|
||
<span class="stat-label">лет на рынке</span>
|
||
</div>
|
||
<div class="stat">
|
||
<span class="stat-num">98%</span>
|
||
<span class="stat-label">довольных клиентов</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="hero-image">
|
||
<img src="https://picsum.photos/seed/cars/800/600" alt="Автомобили">
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="search-section">
|
||
<div class="search-box">
|
||
<h2 class="search-title">Подбор автомобиля</h2>
|
||
<div class="filters">
|
||
<div class="filter-group">
|
||
<label>Марка</label>
|
||
<select id="filter-make">
|
||
<option value="">Все марки</option>
|
||
<option value="Toyota">Toyota</option>
|
||
<option value="Mercedes-Benz">Mercedes-Benz</option>
|
||
<option value="BMW">BMW</option>
|
||
<option value="Lexus">Lexus</option>
|
||
<option value="Hyundai">Hyundai</option>
|
||
<option value="Kia">Kia</option>
|
||
<option value="Volkswagen">Volkswagen</option>
|
||
<option value="Audi">Audi</option>
|
||
</select>
|
||
</div>
|
||
<div class="filter-group">
|
||
<label>Модель</label>
|
||
<select id="filter-model">
|
||
<option value="">Все модели</option>
|
||
</select>
|
||
</div>
|
||
<div class="filter-group">
|
||
<label>Цена до, ₸</label>
|
||
<input type="number" id="filter-price" placeholder="Макс. цена">
|
||
</div>
|
||
<div class="filter-group">
|
||
<label>Год от</label>
|
||
<input type="number" id="filter-year" placeholder="2015" min="2000" max="2026">
|
||
</div>
|
||
</div>
|
||
<div class="filter-actions">
|
||
<button class="btn btn-primary" onclick="applyFilters()">Найти авто</button>
|
||
<button class="btn btn-outline" onclick="resetFilters()">Сбросить</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="catalog" class="catalog">
|
||
<div class="container">
|
||
<div class="section-header">
|
||
<h2 class="section-title">Каталог автомобилей</h2>
|
||
<div id="cars-count" style="color:var(--gray-500)">Найдено: 0</div>
|
||
</div>
|
||
<div class="cars-grid" id="cars-grid"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="features" class="features">
|
||
<div class="container">
|
||
<h2 class="section-title" style="text-align:center;margin-bottom:48px">Почему выбирают нас</h2>
|
||
<div class="features-grid">
|
||
<div class="feature reveal">
|
||
<div class="feature-icon">✅</div>
|
||
<h3>Проверенные авто</h3>
|
||
<p>Каждый автомобиль проходит техническую диагностику по 120 пунктам</p>
|
||
</div>
|
||
<div class="feature reveal">
|
||
<div class="feature-icon">📋</div>
|
||
<h3>Прозрачная история</h3>
|
||
<p>Предоставляем полную историю обслуживания и количество владельцев</p>
|
||
</div>
|
||
<div class="feature reveal">
|
||
<div class="feature-icon">🛡️</div>
|
||
<h3>Гарантия качества</h3>
|
||
<p>Даем гарантию на основные узлы и агрегаты до 1 года</p>
|
||
</div>
|
||
<div class="feature reveal">
|
||
<div class="feature-icon">💰</div>
|
||
<h3>Выгодный Trade-in</h3>
|
||
<p>Обменяйте свой автомобиль на новый с доплатой в день обращения</p>
|
||
</div>
|
||
<div class="feature reveal">
|
||
<div class="feature-icon">📝</div>
|
||
<h3>Оформление в офисе</h3>
|
||
<p>Полное сопровождение сделки и помощь в оформлении документов</p>
|
||
</div>
|
||
<div class="feature reveal">
|
||
<div class="feature-icon">🚗</div>
|
||
<h3>Тест-драйв</h3>
|
||
<p>Бесплатный тест-драйв любого автомобиля в удобное время</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="test-drive" class="test-drive">
|
||
<div class="container">
|
||
<div class="form-container">
|
||
<div id="form-success" class="form-success">
|
||
<div class="form-success-icon">✅</div>
|
||
<h3>Заявка отправлена!</h3>
|
||
<p>Наш менеджер свяжется с вами в течение 15 минут для подтверждения записи.</p>
|
||
</div>
|
||
<form id="test-drive-form">
|
||
<h2 class="form-title">Запись на тест-драйв</h2>
|
||
<p class="form-subtitle">Оставьте заявку и мы свяжемся с вами для подтверждения</p>
|
||
|
||
<div class="form-group">
|
||
<label>Ваше имя *</label>
|
||
<input type="text" name="name" required placeholder="Иван Иванов">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label>Телефон *</label>
|
||
<input type="tel" name="phone" required placeholder="+7 (777) 123-45-67">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label>Автомобиль</label>
|
||
<input type="text" name="car" id="form-car" placeholder="Выберите авто из каталога или оставьте пустым">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label>Желаемая дата *</label>
|
||
<input type="date" name="date" required>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label>Комментарий</label>
|
||
<textarea name="comment" placeholder="Пожелания по времени, вопросы..."></textarea>
|
||
</div>
|
||
|
||
<button type="submit" class="form-submit">Записаться на тест-драйв</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="contact" class="contact">
|
||
<div class="contact-inner">
|
||
<div>
|
||
<h2>Контакты</h2>
|
||
<div class="contact-info">
|
||
<div class="contact-item">
|
||
<div class="contact-item-icon">📍</div>
|
||
<span>г. Алматы, пр. Аль-Фараби 123</span>
|
||
</div>
|
||
<div class="contact-item">
|
||
<div class="contact-item-icon">📞</div>
|
||
<span>+7 (777) 123-45-67</span>
|
||
</div>
|
||
<div class="contact-item">
|
||
<div class="contact-item-icon">✉️</div>
|
||
<span>info@autoprime.kz</span>
|
||
</div>
|
||
<div class="contact-item">
|
||
<div class="contact-item-icon">⏰</div>
|
||
<span>Ежедневно с 9:00 до 20:00</span>
|
||
</div>
|
||
</div>
|
||
<div class="socials">
|
||
<a href="https://wa.me/77771234567" class="social-link">💬</a>
|
||
<a href="https://t.me/autoprime" class="social-link">✈️</a>
|
||
<a href="https://instagram.com/autoprime" class="social-link">📷</a>
|
||
</div>
|
||
</div>
|
||
<div class="map-container">
|
||
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d93184.2768770017!2d76.850182!3d43.238949!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x38836e7c9c5a0c3b%3A0x5b39fc2c3e0c3b5b!2z0JzQvtGB0LrQstCw!5e0!3m2!1sru!2skz!4v1234567890" width="100%" height="100%" style="border:0" loading="lazy"></iframe>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<footer class="footer">
|
||
<p>© 2026 AutoPrime. Все права защищены.</p>
|
||
</footer>
|
||
|
||
<!-- Modal for Test Drive -->
|
||
<div id="modal" class="modal">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h3 class="modal-title">Запись на тест-драйв</h3>
|
||
<button class="modal-close" onclick="closeModal()">×</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="modal-car-info">
|
||
<div class="modal-car-title" id="modal-car-title"></div>
|
||
<div class="modal-car-price" id="modal-car-price"></div>
|
||
</div>
|
||
<form id="modal-form">
|
||
<input type="hidden" name="car" id="modal-car-input">
|
||
<div class="form-group">
|
||
<label>Ваше имя *</label>
|
||
<input type="text" name="name" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Телефон *</label>
|
||
<input type="tel" name="phone" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Желаемая дата *</label>
|
||
<input type="date" name="date" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Комментарий</label>
|
||
<textarea name="comment"></textarea>
|
||
</div>
|
||
<button type="submit" class="form-submit">Отправить заявку</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// Автомобили (мок-данные)
|
||
const cars = [
|
||
{id:1,make:"Toyota",model:"Camry",year:2021,price:14500000,mileage:45000,transmission:"Автомат",fuel:"Бензин",location:"Алматы",image:"https://picsum.photos/seed/toyota1/600/400"},
|
||
{id:2,make:"Mercedes-Benz",model:"E-Class",year:2020,price:24000000,mileage:62000,transmission:"Автомат",fuel:"Дизель",location:"Алматы",image:"https://picsum.photos/seed/mercedes1/600/400"},
|
||
{id:3,make:"BMW",model:"5 Series",year:2019,price:21500000,mileage:78000,transmission:"Автомат",fuel:"Бензин",location:"Астана",image:"https://picsum.photos/seed/bmw1/600/400"},
|
||
{id:4,make:"Lexus",model:"RX 350",year:2022,price:32000000,mileage:28000,transmission:"Автомат",fuel:"Бензин",location:"Алматы",image:"https://picsum.photos/seed/lexus1/600/400"},
|
||
{id:5,make:"Hyundai",model:"Santa Fe",year:2021,price:16800000,mileage:52000,transmission:"Автомат",fuel:"Дизель",location:"Шымкент",image:"https://picsum.photos/seed/hyundai1/600/400"},
|
||
{id:6,make:"Kia",model:"K5",year:2022,price:13200000,mileage:35000,transmission:"Автомат",fuel:"Бензин",location:"Алматы",image:"https://picsum.photos/seed/kia1/600/400"},
|
||
{id:7,make:"Volkswagen",model:"Tiguan",year:2020,price:15500000,mileage:68000,transmission:"Автомат",fuel:"Бензин",location:"Астана",image:"https://picsum.photos/seed/vw1/600/400"},
|
||
{id:8,make:"Audi",model:"Q7",year:2021,price:35000000,mileage:41000,transmission:"Автомат",fuel:"Дизель",location:"Алматы",image:"https://picsum.photos/seed/audi1/600/400"},
|
||
{id:9,make:"Toyota",model:"RAV4",year:2020,price:13800000,mileage:59000,transmission:"Автомат",fuel:"Бензин",location:"Караганда",image:"https://picsum.photos/seed/toyota2/600/400"},
|
||
{id:10,make:"Hyundai",model:"Tucson",year:2021,price:12500000,mileage:47000,transmission:"Автомат",fuel:"Бензин",location:"Алматы",image:"https://picsum.photos/seed/hyundai2/600/400"},
|
||
{id:11,make:"Kia",model:"Sportage",year:2022,price:14200000,mileage:31000,transmission:"Автомат",fuel:"Бензин",location:"Астана",image:"https://picsum.photos/seed/kia2/600/400"},
|
||
{id:12,make:"Mercedes-Benz",model:"GLC",year:2021,price:28500000,mileage:39000,transmission:"Автомат",fuel:"Бензин",location:"Алматы",image:"https://picsum.photos/seed/mercedes2/600/400"}
|
||
];
|
||
|
||
// Модели по маркам
|
||
const modelsByMake = {
|
||
"Toyota": ["Camry", "RAV4", "Corolla", "Land Cruiser"],
|
||
"Mercedes-Benz": ["E-Class", "C-Class", "GLC", "GLE"],
|
||
"BMW": ["5 Series", "3 Series", "X5", "X3"],
|
||
"Lexus": ["RX 350", "ES", "NX", "LX"],
|
||
"Hyundai": ["Santa Fe", "Tucson", "Sonata", "Creta"],
|
||
"Kia": ["K5", "Sportage", "Sorento", "Cerato"],
|
||
"Volkswagen": ["Tiguan", "Touareg", "Passat", "Golf"],
|
||
"Audi": ["Q7", "Q5", "A6", "A4"]
|
||
};
|
||
|
||
// Рендеринг авто
|
||
function renderCars(carsToRender) {
|
||
const grid = document.getElementById('cars-grid');
|
||
document.getElementById('cars-count').textContent = 'Найдено: ' + carsToRender.length;
|
||
|
||
if (carsToRender.length === 0) {
|
||
grid.innerHTML = '<div style="grid-column:1/-1;text-align:center;padding:60px;color:var(--gray-500)">По вашим фильтрам ничего не найдено</div>';
|
||
return;
|
||
}
|
||
|
||
grid.innerHTML = carsToRender.map(car => `
|
||
<div class="car-card reveal">
|
||
<div class="car-image">
|
||
<img src="${car.image}" alt="${car.make} ${car.model}">
|
||
</div>
|
||
<div class="car-content">
|
||
<div class="car-price">${formatPrice(car.price)}</div>
|
||
<div class="car-title">${car.make} ${car.model}</div>
|
||
<div class="car-specs">
|
||
<span class="spec">${car.year}</span>
|
||
<span class="spec">${formatMileage(car.mileage)}</span>
|
||
<span class="spec">${car.transmission}</span>
|
||
<span class="spec">${car.fuel}</span>
|
||
</div>
|
||
<div class="car-meta">
|
||
<span class="car-location">📍 ${car.location}</span>
|
||
<button class="btn-test" onclick="openModal(${car.id})">Тест-драйв</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`).join('');
|
||
}
|
||
|
||
// Форматирование цены
|
||
function formatPrice(price) {
|
||
return price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ") + " ₸";
|
||
}
|
||
|
||
// Форматирование пробега
|
||
function formatMileage(mileage) {
|
||
return mileage.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ") + " км";
|
||
}
|
||
|
||
// Фильтрация
|
||
function applyFilters() {
|
||
const make = document.getElementById('filter-make').value;
|
||
const model = document.getElementById('filter-model').value;
|
||
const price = document.getElementById('filter-price').value;
|
||
const year = document.getElementById('filter-year').value;
|
||
|
||
let filtered = cars;
|
||
|
||
if (make) {
|
||
filtered = filtered.filter(c => c.make === make);
|
||
if (model) {
|
||
filtered = filtered.filter(c => c.model === model);
|
||
}
|
||
}
|
||
|
||
if (price) {
|
||
filtered = filtered.filter(c => c.price <= parseInt(price));
|
||
}
|
||
|
||
if (year) {
|
||
filtered = filtered.filter(c => c.year >= parseInt(year));
|
||
}
|
||
|
||
renderCars(filtered);
|
||
}
|
||
|
||
// Сброс фильтров
|
||
function resetFilters() {
|
||
document.getElementById('filter-make').value = '';
|
||
document.getElementById('filter-model').value = '';
|
||
document.getElementById('filter-price').value = '';
|
||
document.getElementById('filter-year').value = '';
|
||
document.getElementById('filter-model').innerHTML = '<option value="">Все модели</option>';
|
||
renderCars(cars);
|
||
}
|
||
|
||
// Обновление моделей при выборе марки
|
||
document.getElementById('filter-make').addEventListener('change', function() {
|
||
const modelSelect = document.getElementById('filter-model');
|
||
const selectedMake = this.value;
|
||
|
||
modelSelect.innerHTML = '<option value="">Все модели</option>';
|
||
|
||
if (selectedMake && modelsByMake[selectedMake]) {
|
||
modelsByMake[selectedMake].forEach(model => {
|
||
const opt = document.createElement('option');
|
||
opt.value = model;
|
||
opt.textContent = model;
|
||
modelSelect.appendChild(opt);
|
||
});
|
||
}
|
||
});
|
||
|
||
// Модальное окно
|
||
function openModal(carId) {
|
||
const car = cars.find(c => c.id === carId);
|
||
if (!car) return;
|
||
|
||
document.getElementById('modal-car-title').textContent = car.make + ' ' + car.model;
|
||
document.getElementById('modal-car-price').textContent = formatPrice(car.price);
|
||
document.getElementById('modal-car-input').value = car.make + ' ' + car.model;
|
||
|
||
document.getElementById('modal').classList.add('show');
|
||
}
|
||
|
||
function closeModal() {
|
||
document.getElementById('modal').classList.remove('show');
|
||
}
|
||
|
||
document.getElementById('modal').addEventListener('click', function(e) {
|
||
if (e.target === this) closeModal();
|
||
});
|
||
|
||
// Обработка форм
|
||
document.getElementById('test-drive-form').addEventListener('submit', function(e) {
|
||
e.preventDefault();
|
||
|
||
const formData = new FormData(this);
|
||
const data = Object.fromEntries(formData);
|
||
|
||
// Сохранение заявки
|
||
saveTestDriveRequest(data);
|
||
|
||
this.style.display = 'none';
|
||
document.getElementById('form-success').classList.add('show');
|
||
});
|
||
|
||
document.getElementById('modal-form').addEventListener('submit', function(e) {
|
||
e.preventDefault();
|
||
|
||
const formData = new FormData(this);
|
||
const data = Object.fromEntries(formData);
|
||
|
||
saveTestDriveRequest(data);
|
||
|
||
closeModal();
|
||
alert('Заявка отправлена! Менеджер свяжется с вами в течение 15 минут.');
|
||
this.reset();
|
||
});
|
||
|
||
// Сохранение заявки (localStorage для демонстрации)
|
||
function saveTestDriveRequest(data) {
|
||
const requests = JSON.parse(localStorage.getItem('testDriveRequests') || '[]');
|
||
requests.push({
|
||
...data,
|
||
id: Date.now(),
|
||
createdAt: new Date().toISOString()
|
||
});
|
||
localStorage.setItem('testDriveRequests', JSON.stringify(requests));
|
||
console.log('Заявка сохранена:', data);
|
||
}
|
||
|
||
// Плавный скролл
|
||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||
anchor.addEventListener('click', function(e) {
|
||
e.preventDefault();
|
||
const target = document.querySelector(this.getAttribute('href'));
|
||
if (target) {
|
||
target.scrollIntoView({behavior: 'smooth', block: 'start'});
|
||
}
|
||
});
|
||
});
|
||
|
||
// Анимация при скролле
|
||
const observer = new IntersectionObserver(function(entries) {
|
||
entries.forEach(function(entry) {
|
||
if (entry.isIntersecting) {
|
||
entry.target.classList.add('in');
|
||
}
|
||
});
|
||
}, {threshold: 0.15});
|
||
|
||
document.querySelectorAll('.reveal').forEach(function(el) {
|
||
observer.observe(el);
|
||
});
|
||
|
||
// Инициализация
|
||
renderCars(cars);
|
||
|
||
// Установка минимальной даты на сегодня
|
||
const today = new Date().toISOString().split('T')[0];
|
||
document.querySelectorAll('input[type="date"]').forEach(input => {
|
||
input.setAttribute('min', today);
|
||
});
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|