989 lines
35 KiB
HTML
989 lines
35 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru" data-theme="light">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>KhanDrive — Автомобили премиум-класса</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[data-theme="light"]{
|
||
--bg-primary: #FFFFFF;
|
||
--bg-secondary: #F8FAFC;
|
||
--bg-tertiary: #F1F5F9;
|
||
--text-primary: #0F172A;
|
||
--text-secondary: #64748B;
|
||
--text-tertiary: #94A3B8;
|
||
--accent: #3B82F6;
|
||
--accent-hover: #2563EB;
|
||
--accent-glow: rgba(59, 130, 246, 0.15);
|
||
--border: #E2E8F0;
|
||
--shadow: rgba(0, 0, 0, 0.08);
|
||
--card-bg: #FFFFFF;
|
||
--success: #10B981;
|
||
}
|
||
:root[data-theme="dark"]{
|
||
--bg-primary: #0B0F19;
|
||
--bg-secondary: #111827;
|
||
--bg-tertiary: #1F2937;
|
||
--text-primary: #F9FAFB;
|
||
--text-secondary: #9CA3AF;
|
||
--text-tertiary: #6B7280;
|
||
--accent: #60A5FA;
|
||
--accent-hover: #3B82F6;
|
||
--accent-glow: rgba(96, 165, 250, 0.2);
|
||
--border: #374151;
|
||
--shadow: rgba(0, 0, 0, 0.4);
|
||
--card-bg: #1F2937;
|
||
--success: #34D399;
|
||
}
|
||
|
||
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
|
||
html{scroll-behavior:smooth}
|
||
body{
|
||
font:16px/1.6 -apple-system,BlinkMacSystemFont,"SF Pro Display","Inter",system-ui,sans-serif;
|
||
color:var(--text-primary);
|
||
background:var(--bg-primary);
|
||
transition:background-color 0.3s ease,color 0.3s ease;
|
||
overflow-x:hidden;
|
||
}
|
||
|
||
.container{max-width:1280px;margin:0 auto;padding:0 24px}
|
||
@media(max-width:768px){.container{padding:0 20px}}
|
||
|
||
a{text-decoration:none;color:inherit;transition:color 0.2s ease}
|
||
button{cursor:pointer;border:none;font-family:inherit;background:none}
|
||
|
||
/* Header */
|
||
.header{
|
||
position:fixed;top:0;left:0;right:0;z-index:1000;
|
||
background:var(--bg-primary);
|
||
border-bottom:1px solid var(--border);
|
||
backdrop-filter:blur(20px);
|
||
-webkit-backdrop-filter:blur(20px);
|
||
transition:all 0.3s ease;
|
||
}
|
||
.header-inner{
|
||
display:flex;align-items:center;justify-content:space-between;
|
||
padding:18px 24px;max-width:1280px;margin:0 auto;
|
||
}
|
||
.logo{
|
||
font-size:22px;font-weight:800;letter-spacing:-0.5px;
|
||
display:flex;align-items:center;gap:10px;
|
||
}
|
||
.logo-icon{
|
||
width:36px;height:36px;background:linear-gradient(135deg,var(--accent),var(--accent-hover));
|
||
border-radius:10px;display:flex;align-items:center;justify-content:center;
|
||
font-size:18px;color:#fff;
|
||
}
|
||
.nav{display:flex;gap:32px}
|
||
.nav a{
|
||
font-size:15px;font-weight:500;color:var(--text-secondary);
|
||
position:relative;
|
||
}
|
||
.nav a:hover{color:var(--text-primary)}
|
||
.nav a::after{
|
||
content:'';position:absolute;bottom:-6px;left:0;width:0;height:2px;
|
||
background:var(--accent);transition:width 0.3s ease;
|
||
}
|
||
.nav a:hover::after{width:100%}
|
||
|
||
.header-actions{display:flex;align-items:center;gap:16px}
|
||
.theme-toggle{
|
||
width:44px;height:44px;border-radius:12px;
|
||
background:var(--bg-tertiary);
|
||
display:flex;align-items:center;justify-content:center;
|
||
font-size:20px;transition:all 0.2s ease;
|
||
}
|
||
.theme-toggle:hover{background:var(--accent);color:#fff}
|
||
.header-phone{
|
||
font-weight:600;font-size:15px;
|
||
padding:12px 20px;background:var(--bg-tertiary);
|
||
border-radius:10px;transition:all 0.2s ease;
|
||
}
|
||
.header-phone:hover{background:var(--accent);color:#fff}
|
||
.mobile-toggle{display:none;font-size:24px}
|
||
|
||
/* Hero */
|
||
.hero{
|
||
position:relative;min-height:100vh;display:flex;align-items:center;
|
||
background:var(--bg-secondary);
|
||
padding:120px 24px 80px;
|
||
overflow:hidden;
|
||
}
|
||
.hero::before{
|
||
content:'';position:absolute;top:0;left:0;right:0;bottom:0;
|
||
background:radial-gradient(circle at 30% 50%,var(--accent-glow),transparent 50%);
|
||
pointer-events:none;
|
||
}
|
||
.hero-inner{
|
||
max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;
|
||
gap:60px;align-items:center;position:relative;z-index:1;
|
||
}
|
||
.hero-badge{
|
||
display:inline-flex;align-items:center;gap:8px;
|
||
padding:8px 16px;background:var(--accent-glow);
|
||
color:var(--accent);border-radius:100px;
|
||
font-size:14px;font-weight:600;margin-bottom:24px;
|
||
}
|
||
.hero h1{
|
||
font-size:clamp(40px,5vw,64px);
|
||
font-weight:800;line-height:1.05;letter-spacing:-2px;
|
||
margin-bottom:24px;
|
||
background:linear-gradient(135deg,var(--text-primary),var(--text-secondary));
|
||
-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
|
||
}
|
||
.hero p{
|
||
font-size:18px;color:var(--text-secondary);line-height:1.7;
|
||
margin-bottom:40px;max-width:540px;
|
||
}
|
||
.hero-buttons{display:flex;gap:16px;flex-wrap:wrap}
|
||
.btn{
|
||
display:inline-flex;align-items:center;gap:10px;
|
||
padding:16px 32px;border-radius:14px;
|
||
font-size:16px;font-weight:600;
|
||
transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
|
||
}
|
||
.btn-primary{
|
||
background:linear-gradient(135deg,var(--accent),var(--accent-hover));
|
||
color:#fff;box-shadow:0 4px 20px var(--accent-glow);
|
||
}
|
||
.btn-primary:hover{
|
||
transform:translateY(-2px);
|
||
box-shadow:0 8px 30px var(--accent-glow);
|
||
}
|
||
.btn-secondary{
|
||
background:var(--bg-tertiary);color:var(--text-primary);
|
||
border:1px solid var(--border);
|
||
}
|
||
.btn-secondary:hover{background:var(--bg-secondary);border-color:var(--accent)}
|
||
|
||
.hero-stats{
|
||
display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
|
||
margin-top:60px;
|
||
}
|
||
.stat{
|
||
padding:24px;background:var(--card-bg);border-radius:16px;
|
||
border:1px solid var(--border);
|
||
box-shadow:0 4px 20px var(--shadow);
|
||
transition:transform 0.3s ease,box-shadow 0.3s ease;
|
||
}
|
||
.stat:hover{transform:translateY(-4px);box-shadow:0 8px 30px var(--shadow)}
|
||
.stat-num{
|
||
font-size:36px;font-weight:800;color:var(--accent);
|
||
display:block;line-height:1.2;
|
||
}
|
||
.stat-label{font-size:14px;color:var(--text-secondary);margin-top:4px}
|
||
|
||
.hero-visual{
|
||
position:relative;height:500px;border-radius:24px;
|
||
overflow:hidden;box-shadow:0 20px 60px var(--shadow);
|
||
}
|
||
.hero-image{
|
||
width:100%;height:100%;object-fit:cover;
|
||
transition:transform 0.5s ease;
|
||
}
|
||
.hero-visual:hover .hero-image{transform:scale(1.05)}
|
||
|
||
/* Search */
|
||
.search-section{
|
||
padding:80px 24px;background:var(--bg-primary);
|
||
margin-top:-60px;position:relative;z-index:10;
|
||
}
|
||
.search-box{
|
||
max-width:1280px;margin:0 auto;
|
||
background:var(--card-bg);border-radius:24px;
|
||
padding:40px;border:1px solid var(--border);
|
||
box-shadow:0 20px 60px var(--shadow);
|
||
}
|
||
.search-title{
|
||
font-size:28px;font-weight:700;margin-bottom:32px;
|
||
text-align:center;letter-spacing:-0.5px;
|
||
}
|
||
.filters{
|
||
display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
|
||
gap:20px;margin-bottom:32px;
|
||
}
|
||
.filter-group label{
|
||
display:block;font-size:13px;font-weight:600;
|
||
color:var(--text-secondary);margin-bottom:10px;
|
||
text-transform:uppercase;letter-spacing:0.5px;
|
||
}
|
||
.filter-group select,.filter-group input{
|
||
width:100%;padding:16px 20px;
|
||
background:var(--bg-tertiary);border:1px solid var(--border);
|
||
border-radius:12px;font-size:16px;color:var(--text-primary);
|
||
transition:all 0.2s ease;
|
||
}
|
||
.filter-group select:focus,.filter-group input:focus{
|
||
outline:none;border-color:var(--accent);
|
||
box-shadow:0 0 0 3px var(--accent-glow);
|
||
}
|
||
.filter-actions{
|
||
display:flex;gap:16px;justify-content:center;flex-wrap:wrap;
|
||
}
|
||
|
||
/* Catalog */
|
||
.catalog{padding:100px 24px;background:var(--bg-secondary)}
|
||
.section-header{
|
||
display:flex;justify-content:space-between;align-items:center;
|
||
margin-bottom:48px;max-width:1280px;margin-left:auto;margin-right:auto;
|
||
}
|
||
.section-title{
|
||
font-size:clamp(28px,4vw,40px);font-weight:800;
|
||
letter-spacing:-1px;
|
||
}
|
||
.cars-grid{
|
||
display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));
|
||
gap:32px;max-width:1280px;margin:0 auto;
|
||
}
|
||
.car-card{
|
||
background:var(--card-bg);border-radius:20px;overflow-hidden;
|
||
border:1px solid var(--border);
|
||
box-shadow:0 4px 20px var(--shadow);
|
||
transition:all 0.4s cubic-bezier(0.4,0,0.2,1);
|
||
}
|
||
.car-card:hover{
|
||
transform:translateY(-8px);
|
||
box-shadow:0 20px 40px var(--shadow);
|
||
}
|
||
.car-image{
|
||
height:240px;background:var(--bg-tertiary);
|
||
overflow:hidden;position:relative;
|
||
}
|
||
.car-image img{
|
||
width:100%;height:100%;object-fit:cover;
|
||
transition:transform 0.5s ease;
|
||
}
|
||
.car-card:hover .car-image img{transform:scale(1.1)}
|
||
.car-badge{
|
||
position:absolute;top:16px;left:16px;
|
||
padding:8px 14px;background:var(--accent);
|
||
color:#fff;border-radius:8px;
|
||
font-size:13px;font-weight:600;
|
||
}
|
||
.car-content{padding:24px}
|
||
.car-price{
|
||
font-size:28px;font-weight:800;color:var(--accent);
|
||
margin-bottom:12px;letter-spacing:-0.5px;
|
||
}
|
||
.car-title{
|
||
font-size:20px;font-weight:700;margin-bottom:16px;
|
||
letter-spacing:-0.3px;
|
||
}
|
||
.car-specs{
|
||
display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px;
|
||
}
|
||
.spec{
|
||
padding:8px 14px;background:var(--bg-tertiary);
|
||
border-radius:8px;font-size:13px;color:var(--text-secondary);
|
||
font-weight:500;
|
||
}
|
||
.car-meta{
|
||
display:flex;justify-content:space-between;align-items:center;
|
||
padding-top:20px;border-top:1px solid var(--border);
|
||
}
|
||
.car-location{font-size:14px;color:var(--text-secondary);display:flex;align-items:center;gap:6px}
|
||
.btn-test{
|
||
padding:12px 24px;background:var(--accent);
|
||
color:#fff;border-radius:10px;font-weight:600;font-size:14px;
|
||
transition:all 0.2s ease;
|
||
}
|
||
.btn-test:hover{background:var(--accent-hover)}
|
||
|
||
/* Features */
|
||
.features{padding:100px 24px;background:var(--bg-primary)}
|
||
.features-header{text-align:center;margin-bottom:60px;max-width:700px;margin-left:auto;margin-right:auto}
|
||
.features h2{font-size:clamp(28px,4vw,40px);font-weight:800;margin-bottom:16px;letter-spacing:-1px}
|
||
.features-header p{font-size:18px;color:var(--text-secondary);line-height:1.7}
|
||
.features-grid{
|
||
display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
|
||
gap:32px;max-width:1280px;margin:0 auto;
|
||
}
|
||
.feature{
|
||
padding:40px;background:var(--card-bg);border-radius:20px;
|
||
border:1px solid var(--border);
|
||
transition:all 0.3s ease;
|
||
}
|
||
.feature:hover{transform:translateY(-4px);border-color:var(--accent)}
|
||
.feature-icon{
|
||
width:64px;height:64px;background:var(--accent-glow);
|
||
border-radius:16px;display:flex;align-items:center;justify-content:center;
|
||
font-size:32px;margin-bottom:24px;
|
||
}
|
||
.feature h3{font-size:20px;font-weight:700;margin-bottom:12px;letter-spacing:-0.3px}
|
||
.feature p{font-size:16px;color:var(--text-secondary);line-height:1.7}
|
||
|
||
/* Test Drive */
|
||
.test-drive{padding:100px 24px;background:var(--bg-secondary)}
|
||
.form-container{
|
||
max-width:640px;margin:0 auto;
|
||
background:var(--card-bg);border-radius:24px;
|
||
padding:48px;border:1px solid var(--border);
|
||
box-shadow:0 20px 60px var(--shadow);
|
||
}
|
||
.form-title{font-size:32px;font-weight:800;text-align:center;margin-bottom:12px;letter-spacing:-1px}
|
||
.form-subtitle{text-align:center;color:var(--text-secondary);margin-bottom:40px;font-size:16px}
|
||
.form-group{margin-bottom:24px}
|
||
.form-group label{
|
||
display:block;font-size:14px;font-weight:600;
|
||
color:var(--text-secondary);margin-bottom:10px;
|
||
}
|
||
.form-group input,.form-group select,.form-group textarea{
|
||
width:100%;padding:16px 20px;
|
||
background:var(--bg-tertiary);border:1px solid var(--border);
|
||
border-radius:12px;font-size:16px;color:var(--text-primary);
|
||
font-family:inherit;transition:all 0.2s ease;
|
||
}
|
||
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{
|
||
outline:none;border-color:var(--accent);
|
||
box-shadow:0 0 0 3px var(--accent-glow);
|
||
}
|
||
.form-group textarea{resize:vertical;min-height:120px}
|
||
.form-submit{
|
||
width:100%;padding:18px;
|
||
background:linear-gradient(135deg,var(--accent),var(--accent-hover));
|
||
color:#fff;border:none;border-radius:14px;
|
||
font-size:17px;font-weight:700;cursor:pointer;
|
||
transition:all 0.3s ease;
|
||
}
|
||
.form-submit:hover{transform:translateY(-2px);box-shadow:0 8px 30px var(--accent-glow)}
|
||
.form-success{display:none;text-align:center;padding:40px 20px}
|
||
.form-success.show{display:block}
|
||
.form-success-icon{font-size:72px;margin-bottom:24px}
|
||
.form-success h3{font-size:26px;font-weight:700;margin-bottom:12px}
|
||
.form-success p{color:var(--text-secondary);font-size:16px}
|
||
|
||
/* Contact */
|
||
.contact{padding:100px 24px;background:var(--bg-primary)}
|
||
.contact-inner{
|
||
max-width:1280px;margin:0 auto;
|
||
display:grid;grid-template-columns:1fr 1fr;gap:60px;
|
||
}
|
||
.contact h2{font-size:clamp(28px,4vw,40px);font-weight:800;margin-bottom:24px;letter-spacing:-1px}
|
||
.contact-info{margin-bottom:40px}
|
||
.contact-item{
|
||
display:flex;align-items:center;gap:20px;
|
||
padding:20px;margin-bottom:16px;
|
||
background:var(--bg-tertiary);border-radius:14px;
|
||
transition:transform 0.2s ease;
|
||
}
|
||
.contact-item:hover{transform:translateX(8px)}
|
||
.contact-item-icon{
|
||
width:48px;height:48px;background:var(--accent-glow);
|
||
border-radius:12px;display:flex;align-items:center;justify-content:center;
|
||
font-size:22px;
|
||
}
|
||
.socials{display:flex;gap:12px}
|
||
.social-link{
|
||
width:52px;height:52px;background:var(--bg-tertiary);
|
||
border-radius:14px;display:flex;align-items:center;justify-content:center;
|
||
font-size:24px;transition:all 0.2s ease;
|
||
}
|
||
.social-link:hover{background:var(--accent);color:#fff;transform:translateY(-4px)}
|
||
.map-container{border-radius:20px;overflow:hidden;height:450px;box-shadow:0 10px 40px var(--shadow)}
|
||
|
||
/* Footer */
|
||
.footer{
|
||
background:var(--bg-secondary);
|
||
padding:40px 24px;text-align:center;
|
||
border-top:1px solid var(--border);
|
||
}
|
||
.footer p{font-size:14px;color:var(--text-secondary)}
|
||
|
||
/* Modal */
|
||
.modal{
|
||
display:none;position:fixed;top:0;left:0;width:100%;height:100%;
|
||
background:rgba(0,0,0,0.7);z-index:2000;
|
||
align-items:center;justify-content:center;
|
||
backdrop-filter:blur(10px);
|
||
}
|
||
.modal.show{display:flex}
|
||
.modal-content{
|
||
background:var(--card-bg);border-radius:24px;
|
||
max-width:540px;width:90%;max-height:90vh;overflow-y:auto;
|
||
border:1px solid var(--border);
|
||
box-shadow:0 20px 60px rgba(0,0,0,0.3);
|
||
}
|
||
.modal-header{
|
||
padding:28px;border-bottom:1px solid var(--border);
|
||
display:flex;justify-content:space-between;align-items:center;
|
||
}
|
||
.modal-title{font-size:24px;font-weight:700;letter-spacing:-0.5px}
|
||
.modal-close{
|
||
width:40px;height:40px;border-radius:10px;
|
||
background:var(--bg-tertiary);font-size:24px;
|
||
display:flex;align-items:center;justify-content:center;
|
||
transition:all 0.2s ease;
|
||
}
|
||
.modal-close:hover{background:var(--accent);color:#fff}
|
||
.modal-body{padding:28px}
|
||
.modal-car-info{
|
||
background:var(--bg-tertiary);border-radius:16px;
|
||
padding:24px;margin-bottom:28px;
|
||
}
|
||
.modal-car-title{font-size:22px;font-weight:700;margin-bottom:8px}
|
||
.modal-car-price{font-size:28px;font-weight:800;color:var(--accent)}
|
||
|
||
/* Animations */
|
||
@keyframes fadeInUp{
|
||
from{opacity:0;transform:translateY(30px)}
|
||
to{opacity:1;transform:translateY(0)}
|
||
}
|
||
.animate{animation:fadeInUp 0.6s ease forwards}
|
||
|
||
/* Responsive */
|
||
@media(max-width:1024px){
|
||
.hero-inner{grid-template-columns:1fr}
|
||
.hero-visual{display:none}
|
||
.contact-inner{grid-template-columns:1fr}
|
||
}
|
||
@media(max-width:768px){
|
||
.nav{display:none}
|
||
.mobile-toggle{display:block}
|
||
.header-inner{padding:14px 20px}
|
||
.hero{padding-top:100px}
|
||
.hero-stats{grid-template-columns:1fr}
|
||
.search-box{padding:24px}
|
||
.filters{grid-template-columns:1fr}
|
||
.cars-grid{grid-template-columns:1fr}
|
||
.form-container{padding:32px 24px}
|
||
}
|
||
|
||
/* Reveal on scroll */
|
||
.reveal{opacity:0;transform:translateY(30px);transition:all 0.6s ease}
|
||
.reveal.in{opacity:1;transform:none}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<header class="header">
|
||
<div class="header-inner">
|
||
<a href="#" class="logo">
|
||
<div class="logo-icon">🚗</div>
|
||
<span>KhanDrive</span>
|
||
</a>
|
||
<nav class="nav">
|
||
<a href="#catalog">Каталог</a>
|
||
<a href="#features">Преимущества</a>
|
||
<a href="#test-drive">Тест-драйв</a>
|
||
<a href="#contact">Контакты</a>
|
||
</nav>
|
||
<div class="header-actions">
|
||
<button class="theme-toggle" onclick="toggleTheme()" aria-label="Переключить тему">🌙</button>
|
||
<a href="tel:+77771234567" class="header-phone">+7 (777) 123-45-67</a>
|
||
<button class="mobile-toggle" onclick="toggleMobileMenu()">☰</button>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<section class="hero">
|
||
<div class="hero-inner">
|
||
<div>
|
||
<div class="hero-badge">
|
||
<span>✨</span>
|
||
<span>Премиум автомобили 2026</span>
|
||
</div>
|
||
<h1>Ваш идеальный автомобиль с пробегом</h1>
|
||
<p>Технологичный подход к выбору авто. Полная проверка, прозрачная история и гарантия качества. Запишитесь на тест-драйв онлайн за 30 секунд.</p>
|
||
<div class="hero-buttons">
|
||
<a href="#catalog" class="btn btn-primary">
|
||
Смотреть каталог
|
||
<span>→</span>
|
||
</a>
|
||
<a href="#test-drive" class="btn btn-secondary">
|
||
Записаться на тест
|
||
</a>
|
||
</div>
|
||
<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-visual">
|
||
<img class="hero-image" src="https://picsum.photos/seed/luxury-car/1200/800" 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>
|
||
</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 class="filter-group">
|
||
<label>Топливо</label>
|
||
<select id="filter-fuel">
|
||
<option value="">Любое</option>
|
||
<option value="Бензин">Бензин</option>
|
||
<option value="Дизель">Дизель</option>
|
||
<option value="Гибрид">Гибрид</option>
|
||
</select>
|
||
</div>
|
||
<div class="filter-group">
|
||
<label>Привод</label>
|
||
<select id="filter-drive">
|
||
<option value="">Любой</option>
|
||
<option value="Передний">Передний</option>
|
||
<option value="Задний">Задний</option>
|
||
<option value="Полный">Полный</option>
|
||
</select>
|
||
</div>
|
||
<div class="filter-group">
|
||
<label>Коробка</label>
|
||
<select id="filter-transmission">
|
||
<option value="">Любая</option>
|
||
<option value="Автомат">Автомат</option>
|
||
<option value="Вариатор">Вариатор</option>
|
||
<option value="Механика">Механика</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="filter-actions">
|
||
<button class="btn btn-primary" onclick="applyFilters()">
|
||
🔍 Найти авто
|
||
</button>
|
||
<button class="btn btn-secondary" onclick="resetFilters()">
|
||
Сбросить
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="catalog" class="catalog">
|
||
<div class="container">
|
||
<div class="section-header">
|
||
<h2 class="section-title">Каталог автомобилей</h2>
|
||
<div style="display:flex;align-items:center;gap:16px">
|
||
<div id="cars-count" style="color:var(--text-secondary);font-weight:500"></div>
|
||
<button class="btn btn-secondary" onclick="exportToCSV()" style="padding:10px 16px;font-size:14px">📥 Скачать CSV</button>
|
||
</div>
|
||
</div>
|
||
<div class="cars-grid" id="cars-grid"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="features" class="features">
|
||
<div class="container">
|
||
<div class="features-header">
|
||
<h2>Преимущества KhanDrive</h2>
|
||
<p style="color:var(--text-secondary);margin-top:16px">Технологии и забота о каждом клиенте</p>
|
||
</div>
|
||
<div class="features-grid">
|
||
<div class="feature reveal">
|
||
<div class="feature-icon">✅</div>
|
||
<h3>Диагностика 120 пунктов</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>Гарантия 12 месяцев</h3>
|
||
<p>Защищаем вашу покупку гарантией на двигатель, КПП и основные узлы</p>
|
||
</div>
|
||
<div class="feature reveal">
|
||
<div class="feature-icon">💰</div>
|
||
<h3>Trade-in за 1 день</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>Тест-драйв 24/7</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">Займёт менее 1 минуты</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>
|
||
<div>
|
||
<div style="font-weight:600;margin-bottom:4px">Адрес</div>
|
||
<div style="color:var(--text-secondary)">г. Алматы, пр. Аль-Фараби 123</div>
|
||
</div>
|
||
</div>
|
||
<div class="contact-item">
|
||
<div class="contact-item-icon">📞</div>
|
||
<div>
|
||
<div style="font-weight:600;margin-bottom:4px">Телефон</div>
|
||
<div style="color:var(--text-secondary)">+7 (777) 123-45-67</div>
|
||
</div>
|
||
</div>
|
||
<div class="contact-item">
|
||
<div class="contact-item-icon">✉️</div>
|
||
<div>
|
||
<div style="font-weight:600;margin-bottom:4px">Email</div>
|
||
<div style="color:var(--text-secondary)">info@khandrive.kz</div>
|
||
</div>
|
||
</div>
|
||
<div class="contact-item">
|
||
<div class="contact-item-icon">⏰</div>
|
||
<div>
|
||
<div style="font-weight:600;margin-bottom:4px">Режим работы</div>
|
||
<div style="color:var(--text-secondary)">Ежедневно 9:00 — 20:00</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="socials">
|
||
<a href="https://wa.me/77771234567" class="social-link" title="WhatsApp">💬</a>
|
||
<a href="https://t.me/khandrive" class="social-link" title="Telegram">✈️</a>
|
||
<a href="https://instagram.com/khandrive" class="social-link" title="Instagram">📷</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 KhanDrive. Все права защищены. | Политика конфиденциальности</p>
|
||
</footer>
|
||
|
||
<!-- Modal -->
|
||
<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>
|
||
let cars = [];
|
||
let allMakes = [];
|
||
let allModels = {};
|
||
|
||
// Загрузка данных
|
||
async function loadData() {
|
||
try {
|
||
const response = await fetch('data.json');
|
||
const data = await response.json();
|
||
cars = data.cars;
|
||
allMakes = data.allMakes;
|
||
allModels = data.allModels;
|
||
initFilters();
|
||
renderCars(cars);
|
||
} catch (error) {
|
||
console.error('Ошибка загрузки данных:', error);
|
||
renderCars([]);
|
||
}
|
||
}
|
||
|
||
// Инициализация фильтров
|
||
function initFilters() {
|
||
const makeSelect = document.getElementById('filter-make');
|
||
makeSelect.innerHTML = '<option value="">Все марки</option>';
|
||
|
||
allMakes.sort().forEach(make => {
|
||
const option = document.createElement('option');
|
||
option.value = make;
|
||
option.textContent = make;
|
||
makeSelect.appendChild(option);
|
||
});
|
||
}
|
||
|
||
// Переключение темы
|
||
function toggleTheme() {
|
||
const html = document.documentElement;
|
||
const current = html.getAttribute('data-theme');
|
||
const next = current === 'light' ? 'dark' : 'light';
|
||
html.setAttribute('data-theme', next);
|
||
localStorage.setItem('theme', next);
|
||
|
||
const btn = document.querySelector('.theme-toggle');
|
||
btn.textContent = next === 'light' ? '🌙' : '☀️';
|
||
}
|
||
|
||
// Загрузка темы
|
||
(function initTheme() {
|
||
const saved = localStorage.getItem('theme') || 'light';
|
||
document.documentElement.setAttribute('data-theme', saved);
|
||
const btn = document.querySelector('.theme-toggle');
|
||
btn.textContent = saved === 'light' ? '🌙' : '☀️';
|
||
})();
|
||
|
||
// Рендеринг авто
|
||
function renderCars(list) {
|
||
const grid = document.getElementById('cars-grid');
|
||
document.getElementById('cars-count').textContent = list.length + ' авто';
|
||
|
||
if (!list.length) {
|
||
grid.innerHTML = '<div style="grid-column:1/-1;text-align:center;padding:80px;color:var(--text-secondary)">По фильтрам ничего не найдено</div>';
|
||
return;
|
||
}
|
||
|
||
grid.innerHTML = list.map(car => `
|
||
<div class="car-card reveal">
|
||
<div class="car-image">
|
||
<img src="${car.image}" alt="${car.make} ${car.model}">
|
||
<span class="car-badge">В наличии</span>
|
||
</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">${formatNum(car.mileage)} км</span>
|
||
<span class="spec">${car.engine}</span>
|
||
<span class="spec">${car.power}</span>
|
||
<span class="spec">${car.transmission}</span>
|
||
<span class="spec">${car.drive}</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(p) {
|
||
return p.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ") + " ₸";
|
||
}
|
||
function formatNum(n) {
|
||
return n.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;
|
||
const fuel = document.getElementById('filter-fuel').value;
|
||
const drive = document.getElementById('filter-drive').value;
|
||
const transmission = document.getElementById('filter-transmission').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));
|
||
if (fuel) filtered = filtered.filter(c => c.fuel === fuel);
|
||
if (drive) filtered = filtered.filter(c => c.drive === drive);
|
||
if (transmission) filtered = filtered.filter(c => c.transmission === transmission);
|
||
|
||
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-fuel').value = '';
|
||
document.getElementById('filter-drive').value = '';
|
||
document.getElementById('filter-transmission').value = '';
|
||
document.getElementById('filter-model').innerHTML = '<option value="">Все модели</option>';
|
||
renderCars(cars);
|
||
}
|
||
|
||
document.getElementById('filter-make').addEventListener('change', function() {
|
||
const sel = document.getElementById('filter-model');
|
||
const make = this.value;
|
||
sel.innerHTML = '<option value="">Все модели</option>';
|
||
if (make && allModels[make]) {
|
||
allModels[make].sort().forEach(m => {
|
||
const o = document.createElement('option');
|
||
o.value = m; o.textContent = m;
|
||
sel.appendChild(o);
|
||
});
|
||
}
|
||
});
|
||
|
||
// Модалка
|
||
function openModal(id) {
|
||
const car = cars.find(c => c.id === id);
|
||
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 data = Object.fromEntries(new FormData(this));
|
||
saveRequest(data);
|
||
this.style.display = 'none';
|
||
document.getElementById('form-success').classList.add('show');
|
||
});
|
||
|
||
document.getElementById('modal-form').addEventListener('submit', function(e) {
|
||
e.preventDefault();
|
||
const data = Object.fromEntries(new FormData(this));
|
||
saveRequest(data);
|
||
closeModal();
|
||
alert('Заявка отправлена! Менеджер свяжется с вами в течение 15 минут.');
|
||
this.reset();
|
||
});
|
||
|
||
function saveRequest(data) {
|
||
const reqs = JSON.parse(localStorage.getItem('testDriveRequests') || '[]');
|
||
reqs.push({...data, id: Date.now(), createdAt: new Date().toISOString()});
|
||
localStorage.setItem('testDriveRequests', JSON.stringify(reqs));
|
||
}
|
||
|
||
// Экспорт в CSV
|
||
function exportToCSV() {
|
||
const headers = ['ID', 'Марка', 'Модель', 'Год', 'Цена', 'Пробег', 'Двигатель', 'Мощность', 'Коробка', 'Привод', 'Топливо', 'Город'];
|
||
const rows = cars.map(c => [
|
||
c.id, c.make, c.model, c.year, c.price, c.mileage, c.engine, c.power, c.transmission, c.drive, c.fuel, c.location
|
||
].map(v => '"' + String(v) + '"').join(','));
|
||
|
||
const csv = '\uFEFF' + [headers.join(','), ...rows].join('\n');
|
||
const blob = new Blob([csv], {type: 'text/csv;charset=utf-8;'});
|
||
const link = document.createElement('a');
|
||
link.href = URL.createObjectURL(blob);
|
||
link.download = 'khandrive_cars_' + new Date().toISOString().split('T')[0] + '.csv';
|
||
link.click();
|
||
}
|
||
|
||
// Скролл
|
||
document.querySelectorAll('a[href^="#"]').forEach(a => {
|
||
a.addEventListener('click', function(e) {
|
||
e.preventDefault();
|
||
const t = document.querySelector(this.getAttribute('href'));
|
||
if (t) t.scrollIntoView({behavior: 'smooth', block: 'start'});
|
||
});
|
||
});
|
||
|
||
// Анимация
|
||
const io = new IntersectionObserver(entries => {
|
||
entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('in'); });
|
||
}, {threshold: 0.15});
|
||
document.querySelectorAll('.reveal').forEach(el => io.observe(el));
|
||
|
||
// Старт
|
||
loadData();
|
||
const today = new Date().toISOString().split('T')[0];
|
||
document.querySelectorAll('input[type="date"]').forEach(i => i.setAttribute('min', today));
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|