| Server IP : 185.252.147.100 / Your IP : 216.73.216.196 Web Server : nginx/1.27.3 System : Linux mitrofanov.ru 6.1.0-37-amd64 #1 SMP PREEMPT_DYNAMIC Debian 6.1.140-1 (2025-05-22) x86_64 User : mitr ( 1000) PHP Version : 8.2.29 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : OFF | Sudo : ON | Pkexec : OFF Directory : /www/html/epauto/html/ |
Upload File : |
<!DOCTYPE html>
<html class="light" lang="ru"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&family=Inter:wght@400;600&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"surface-variant": "#e0e3e5",
"on-tertiary-fixed-variant": "#3c475a",
"error-container": "#ffdad6",
"on-tertiary-container": "#f6f7ff",
"surface-container-high": "#e6e8ea",
"secondary": "#00677f",
"surface-container": "#eceef0",
"primary-container": "#0066ff",
"outline": "#727687",
"inverse-on-surface": "#eff1f3",
"on-primary-fixed-variant": "#003fa4",
"on-primary-container": "#f8f7ff",
"surface": "#f7f9fb",
"on-primary": "#ffffff",
"on-secondary": "#ffffff",
"on-secondary-fixed-variant": "#004e60",
"secondary-container": "#00ccf9",
"primary": "#0050cb",
"on-background": "#191c1e",
"error": "#ba1a1a",
"inverse-surface": "#2d3133",
"surface-container-highest": "#e0e3e5",
"background": "#f7f9fb",
"inverse-primary": "#b3c5ff",
"secondary-fixed-dim": "#4cd6ff",
"surface-container-lowest": "#ffffff",
"tertiary": "#4f5a6e",
"on-tertiary-fixed": "#111c2d",
"surface-bright": "#f7f9fb",
"on-error-container": "#93000a",
"on-secondary-container": "#005266",
"tertiary-container": "#677287",
"on-tertiary": "#ffffff",
"on-secondary-fixed": "#001f28",
"on-error": "#ffffff",
"primary-fixed-dim": "#b3c5ff",
"surface-container-low": "#f2f4f6",
"surface-dim": "#d8dadc",
"secondary-fixed": "#b7eaff",
"on-surface-variant": "#424656",
"on-surface": "#191c1e",
"surface-tint": "#0054d6",
"tertiary-fixed-dim": "#bcc7de",
"outline-variant": "#c2c6d8",
"on-primary-fixed": "#001849",
"primary-fixed": "#dae1ff",
"tertiary-fixed": "#d8e3fb"
},
"borderRadius": {
"DEFAULT": "0.25rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"spacing": {
"gutter": "24px",
"xs": "8px",
"container-max": "1280px",
"base": "4px",
"lg": "48px",
"sm": "16px",
"xl": "80px",
"md": "24px"
},
"fontFamily": {
"body-lg": ["Inter"],
"label-sm": ["Inter"],
"h1": ["Manrope"],
"h3": ["Manrope"],
"h2": ["Manrope"],
"body-md": ["Inter"]
},
"fontSize": {
"body-lg": ["18px", {"lineHeight": "1.6", "fontWeight": "400"}],
"label-sm": ["14px", {"lineHeight": "1", "letterSpacing": "0.05em", "fontWeight": "600"}],
"h1": ["48px", {"lineHeight": "1.2", "letterSpacing": "-0.02em", "fontWeight": "700"}],
"h3": ["24px", {"lineHeight": "1.3", "fontWeight": "600"}],
"h2": ["36px", {"lineHeight": "1.25", "letterSpacing": "-0.01em", "fontWeight": "600"}],
"body-md": ["16px", {"lineHeight": "1.5", "fontWeight": "400"}]
}
},
},
}
</script>
<style>
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
vertical-align: middle;
}
body {
background-color: #f7f9fb;
}
</style>
</head>
<body class="font-body-md text-on-surface">
<!-- TopNavBar -->
<nav class="sticky top-0 w-full z-50 border-b border-slate-100 bg-white/90 backdrop-blur-md shadow-[0px_4px_20px_rgba(15,23,42,0.05)] font-['Manrope'] antialiased">
<div class="flex justify-between items-center max-w-7xl mx-auto px-6 md:px-12 h-20">
<div class="text-xl font-extrabold tracking-tight text-slate-900">EP Auto</div>
<div class="hidden md:flex items-center space-x-8">
<a class="text-blue-600 font-semibold border-b-2 border-blue-600 pb-1" href="#">Каталог</a>
<a class="text-slate-600 font-medium hover:text-blue-600 transition-colors" href="/#benefits">Выгодно</a>
<a class="text-slate-600 font-medium hover:text-blue-600 transition-colors" href="/#process">Процесс</a>
<a class="text-slate-600 font-medium hover:text-blue-600 transition-colors" href="/#contacts">Контакты</a>
</div>
<div class="flex items-center space-x-6">
<span class="hidden lg:block text-slate-600 font-medium">+7 950 287 87 51</span>
<button class="bg-primary text-on-primary px-6 py-2.5 rounded-lg font-bold hover:opacity-90 active:scale-95 transform transition-all">Заказать</button>
</div>
</div>
</nav>
<main class="max-w-7xl mx-auto px-6 md:px-12 py-12">
<header class="mb-12">
<h1 class="font-h1 text-h1 text-on-surface mb-4">Каталог автомобилей</h1>
<p class="font-body-lg text-body-lg text-on-surface-variant max-w-2xl">Премиальный подбор и доставка автомобилей из Китая, Кореи и Японии с полной таможенной очисткой.</p>
</header>
<div class="grid grid-cols-1 lg:grid-cols-12 gap-12">
<!-- Sidebar Filters -->
<aside class="lg:col-span-3">
<div class="bg-surface-container-lowest p-6 rounded-xl shadow-[0px_4px_20px_rgba(15,23,42,0.05)] sticky top-32">
<h3 class="font-h3 text-h3 text-on-surface mb-6 flex items-center gap-2">
<span class="material-symbols-outlined" data-icon="filter_list">filter_list</span>
Фильтры
</h3>
<div class="space-y-6">
<!-- Country -->
<div>
<label class="font-label-sm text-label-sm text-outline block mb-3">Страна</label>
<select class="w-full bg-surface-container border-none rounded-lg px-4 py-3 text-body-md focus:ring-2 focus:ring-primary/10">
<option>Все страны</option>
<option>Китай</option>
<option>Япония</option>
<option>Корея</option>
</select>
</div>
<!-- Brand -->
<div>
<label class="font-label-sm text-label-sm text-outline block mb-3">Марка</label>
<input class="w-full bg-surface-container border-none rounded-lg px-4 py-3 text-body-md focus:ring-2 focus:ring-primary/10" placeholder="Например: Toyota" type="text"/>
</div>
<!-- Price Range -->
<div>
<label class="font-label-sm text-label-sm text-outline block mb-3">Цена (₽)</label>
<div class="grid grid-cols-2 gap-2">
<input class="w-full bg-surface-container border-none rounded-lg px-3 py-3 text-body-md" placeholder="От" type="number"/>
<input class="w-full bg-surface-container border-none rounded-lg px-3 py-3 text-body-md" placeholder="До" type="number"/>
</div>
</div>
<!-- Year -->
<div>
<label class="font-label-sm text-label-sm text-outline block mb-3">Год выпуска</label>
<div class="grid grid-cols-2 gap-2">
<input class="w-full bg-surface-container border-none rounded-lg px-3 py-3 text-body-md" placeholder="С" type="number"/>
<input class="w-full bg-surface-container border-none rounded-lg px-3 py-3 text-body-md" placeholder="По" type="number"/>
</div>
</div>
<!-- Mileage -->
<div>
<label class="font-label-sm text-label-sm text-outline block mb-3">Пробег (км)</label>
<input class="w-full accent-primary" type="range"/>
</div>
<button class="w-full py-4 bg-primary text-on-primary rounded-lg font-bold hover:opacity-90 transition-all">Применить</button>
<button class="w-full py-4 text-primary font-semibold hover:bg-primary-container/10 rounded-lg transition-all">Сбросить</button>
</div>
</div>
</aside>
<!-- Car Grid -->
<div class="lg:col-span-9">
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<!-- Toyota Levin Card -->
<div class="bg-surface-container-lowest rounded-xl overflow-hidden shadow-[0px_4px_20px_rgba(15,23,42,0.05)] hover:-translate-y-1 transition-all duration-300 group">
<div class="relative h-64 overflow-hidden">
<img alt="Toyota Levin" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" src="levin.webp"/>
<div class="absolute top-4 left-4 bg-primary/90 text-on-primary text-[12px] px-3 py-1 rounded-full font-bold">Япония</div>
</div>
<div class="p-8">
<div class="flex justify-between items-start mb-4">
<div>
<h3 class="font-h3 text-h3 text-on-surface">Toyota Levin</h3>
<p class="text-on-surface-variant font-body-md">2022 • 1.2 Turbo Premium</p>
</div>
<span class="bg-surface-container text-on-surface-variant p-2 rounded-lg">
<span class="material-symbols-outlined" data-icon="verified" style="font-variation-settings: 'FILL' 1;">verified</span>
</span>
</div>
<div class="flex items-center gap-6 mb-8 py-4 border-y border-surface-variant/50">
<div class="flex items-center gap-2">
<span class="material-symbols-outlined text-outline" data-icon="speed">speed</span>
<span class="text-on-surface font-semibold text-sm">15 000 км</span>
</div>
<div class="flex items-center gap-2">
<span class="material-symbols-outlined text-outline" data-icon="settings">settings</span>
<span class="text-on-surface font-semibold text-sm">АКПП</span>
</div>
</div>
<div class="flex justify-between items-center">
<div class="text-2xl font-bold text-primary">2 150 000 ₽</div>
<button class="p-3 bg-secondary-container/10 text-on-secondary-container rounded-lg hover:bg-secondary-container hover:text-on-secondary transition-all">
<span class="material-symbols-outlined" data-icon="arrow_forward">arrow_forward</span>
</button>
</div>
</div>
</div>
<!-- Haval Jolion Card -->
<div class="bg-surface-container-lowest rounded-xl overflow-hidden shadow-[0px_4px_20px_rgba(15,23,42,0.05)] hover:-translate-y-1 transition-all duration-300 group">
<div class="relative h-64 overflow-hidden">
<img alt="Haval Jolion" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" src="haval.webp"/>
<div class="absolute top-4 left-4 bg-primary/90 text-on-primary text-[12px] px-3 py-1 rounded-full font-bold">Китай</div>
</div>
<div class="p-8">
<div class="flex justify-between items-start mb-4">
<div>
<h3 class="font-h3 text-h3 text-on-surface">Haval Jolion</h3>
<p class="text-on-surface-variant font-body-md">2023 • 1.5 AWD Premium</p>
</div>
<span class="bg-surface-container text-on-surface-variant p-2 rounded-lg">
<span class="material-symbols-outlined" data-icon="verified" style="font-variation-settings: 'FILL' 1;">verified</span>
</span>
</div>
<div class="flex items-center gap-6 mb-8 py-4 border-y border-surface-variant/50">
<div class="flex items-center gap-2">
<span class="material-symbols-outlined text-outline" data-icon="speed">speed</span>
<span class="text-on-surface font-semibold text-sm">2 000 км</span>
</div>
<div class="flex items-center gap-2">
<span class="material-symbols-outlined text-outline" data-icon="settings">settings</span>
<span class="text-on-surface font-semibold text-sm">Робот</span>
</div>
</div>
<div class="flex justify-between items-center">
<div class="text-2xl font-bold text-primary">2 890 000 ₽</div>
<button class="p-3 bg-secondary-container/10 text-on-secondary-container rounded-lg hover:bg-secondary-container hover:text-on-secondary transition-all">
<span class="material-symbols-outlined" data-icon="arrow_forward">arrow_forward</span>
</button>
</div>
</div>
</div>
</div>
<div class="mt-16 flex justify-center">
<button class="group flex items-center gap-3 px-10 py-5 bg-surface-container-lowest border-2 border-primary/20 text-primary font-bold rounded-xl hover:bg-primary hover:text-on-primary transition-all shadow-[0px_4px_20px_rgba(15,23,42,0.05)]">
Показать еще модели
<span class="material-symbols-outlined group-hover:translate-y-1 transition-transform" data-icon="expand_more">expand_more</span>
</button>
</div>
</div>
</div>
</main>
<!-- Footer -->
<footer class="w-full py-16 bg-slate-50 border-t border-slate-200 font-['Manrope'] text-sm leading-relaxed">
<div class="grid grid-cols-1 md:grid-cols-4 gap-12 max-w-7xl mx-auto px-6 md:px-12">
<div class="col-span-1 md:col-span-1">
<div class="text-lg font-bold text-slate-900 mb-6">EP Auto</div>
<p class="text-slate-500 mb-8">Премиальный сервис по подбору и доставке автомобилей из-за рубежа. Гарантия качества и прозрачности на каждом этапе.</p>
<div class="flex gap-4">
<span class="material-symbols-outlined text-slate-400 cursor-pointer hover:text-blue-600" data-icon="public">public</span>
<span class="material-symbols-outlined text-slate-400 cursor-pointer hover:text-blue-600" data-icon="mail">mail</span>
</div>
</div>
<div>
<h4 class="font-bold text-slate-900 mb-6">Каталог</h4>
<ul class="space-y-4">
<li><a class="text-slate-500 hover:text-slate-900 transition-all hover:underline" href="#">Авто из Китая</a></li>
<li><a class="text-slate-500 hover:text-slate-900 transition-all hover:underline" href="#">Авто из Кореи</a></li>
<li><a class="text-slate-500 hover:text-slate-900 transition-all hover:underline" href="#">Авто из Японии</a></li>
</ul>
</div>
<div>
<h4 class="font-bold text-slate-900 mb-6">Компания</h4>
<ul class="space-y-4">
<li><a class="text-slate-500 hover:text-slate-900 transition-all hover:underline" href="#">Выгодно</a></li>
<li><a class="text-slate-500 hover:text-slate-900 transition-all hover:underline" href="#">Процесс</a></li>
<li><a class="text-slate-500 hover:text-slate-900 transition-all hover:underline" href="#">Обработка данных</a></li>
</ul>
</div>
<div>
<h4 class="font-bold text-slate-900 mb-6">Контакты</h4>
<div class="space-y-4">
<div class="flex items-center gap-3 text-slate-500">
<span class="material-symbols-outlined text-blue-600" data-icon="call">call</span>
+7 950 287 87 51
</div>
<div class="flex items-center gap-3 text-slate-500">
<span class="material-symbols-outlined text-blue-600" data-icon="location_on">location_on</span>
г. Владивосток, ул. Авраменко, 2
</div>
</div>
</div>
</div>
<div class="max-w-7xl mx-auto px-6 md:px-12 mt-16 pt-8 border-t border-slate-200/60 text-slate-400 text-center">
© 2024 EP Auto.
</div>
</footer>
</body></html>