|
|
@@ -0,0 +1,418 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="ru">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
|
|
|
+ <title>ТарДетейл | Премиальный детейлинг автомобилей</title>
|
|
|
+ <!-- Tailwind CSS + Google Fonts -->
|
|
|
+ <script src="https://cdn.tailwindcss.com"></script>
|
|
|
+ <link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300;14..32,400;14..32,500;14..32,600;14..32,700&family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
|
|
+ <!-- FontAwesome 6 (иконки) -->
|
|
|
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
|
|
+ <style>
|
|
|
+ * {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+ body {
|
|
|
+ font-family: 'Inter', 'Manrope', system-ui, sans-serif;
|
|
|
+ background-color: #0A0A0A;
|
|
|
+ color: #FFFFFF;
|
|
|
+ scroll-behavior: smooth;
|
|
|
+ }
|
|
|
+ /* Анимации появления */
|
|
|
+ .fade-up {
|
|
|
+ opacity: 0;
|
|
|
+ transform: translateY(30px);
|
|
|
+ transition: opacity 0.7s cubic-bezier(0.2, 0.9, 0.4, 1), transform 0.7s cubic-bezier(0.2, 0.9, 0.4, 1);
|
|
|
+ }
|
|
|
+ .fade-up.visible {
|
|
|
+ opacity: 1;
|
|
|
+ transform: translateY(0);
|
|
|
+ }
|
|
|
+ /* Hover эффекты карточек */
|
|
|
+ .service-card, .principle-card {
|
|
|
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
|
+ background: #111111;
|
|
|
+ border-radius: 1.5rem;
|
|
|
+ overflow: hidden;
|
|
|
+ border: 1px solid #2A2A2A;
|
|
|
+ }
|
|
|
+ .service-card:hover, .principle-card:hover {
|
|
|
+ transform: translateY(-6px);
|
|
|
+ box-shadow: 0 20px 35px -12px rgba(0,0,0,0.6);
|
|
|
+ }
|
|
|
+ /* Стили для изображений в карточках */
|
|
|
+ .service-img {
|
|
|
+ width: 100%;
|
|
|
+ height: 200px;
|
|
|
+ object-fit: cover;
|
|
|
+ transition: transform 0.5s ease;
|
|
|
+ }
|
|
|
+ .service-card:hover .service-img {
|
|
|
+ transform: scale(1.03);
|
|
|
+ }
|
|
|
+ /* Стили полей формы */
|
|
|
+ input, textarea {
|
|
|
+ transition: all 0.2s ease;
|
|
|
+ background-color: #00000080;
|
|
|
+ border: 1px solid #333;
|
|
|
+ border-radius: 0.75rem;
|
|
|
+ padding: 0.75rem 1.25rem;
|
|
|
+ color: white;
|
|
|
+ }
|
|
|
+ input:focus, textarea:focus {
|
|
|
+ outline: none;
|
|
|
+ border-color: #FFFFFF;
|
|
|
+ box-shadow: 0 0 0 2px rgba(255,255,255,0.2);
|
|
|
+ }
|
|
|
+ /* Уведомление */
|
|
|
+ .toast-message {
|
|
|
+ position: fixed;
|
|
|
+ bottom: 30px;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%) translateY(20px);
|
|
|
+ background: #1A1A1A;
|
|
|
+ backdrop-filter: blur(12px);
|
|
|
+ border: 1px solid #333;
|
|
|
+ padding: 12px 24px;
|
|
|
+ border-radius: 48px;
|
|
|
+ font-weight: 500;
|
|
|
+ z-index: 1000;
|
|
|
+ opacity: 0;
|
|
|
+ transition: opacity 0.3s, transform 0.3s;
|
|
|
+ pointer-events: none;
|
|
|
+ font-size: 0.9rem;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+ .toast-message.show {
|
|
|
+ opacity: 1;
|
|
|
+ transform: translateX(-50%) translateY(0);
|
|
|
+ }
|
|
|
+ @media (max-width: 640px) {
|
|
|
+ .toast-message { white-space: normal; text-align: center; width: 90%; font-size: 0.8rem; }
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body class="bg-[#0A0A0A] antialiased">
|
|
|
+
|
|
|
+ <!-- НАВИГАЦИЯ -->
|
|
|
+ <nav class="fixed top-0 left-0 w-full z-50 bg-[#0A0A0A]/80 backdrop-blur-md border-b border-[#222] py-4">
|
|
|
+ <div class="container mx-auto px-6 md:px-12 flex justify-between items-center">
|
|
|
+ <div class="text-2xl font-bold tracking-tighter"><span class="text-white">Тар</span><span class="font-light">Детейл</span></div>
|
|
|
+ <div class="hidden md:flex gap-8 text-sm font-medium">
|
|
|
+ <a href="#home" class="hover:text-gray-300 transition">Главная</a>
|
|
|
+ <a href="#about" class="hover:text-gray-300 transition">О нас</a>
|
|
|
+ <a href="#services" class="hover:text-gray-300 transition">Услуги</a>
|
|
|
+ <a href="#contact" class="hover:text-gray-300 transition">Консультация</a>
|
|
|
+ </div>
|
|
|
+ <div class="md:hidden">
|
|
|
+ <button id="mobileMenuBtn" class="text-white text-2xl"><i class="fas fa-bars"></i></button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- Мобильное меню -->
|
|
|
+ <div id="mobileMenu" class="fixed top-0 left-0 w-full h-full bg-black/95 backdrop-blur-md z-50 transform -translate-x-full transition-transform duration-300 pt-24 px-6">
|
|
|
+ <button id="closeMenu" class="absolute top-6 right-6 text-3xl text-white">×</button>
|
|
|
+ <div class="flex flex-col gap-8 text-xl font-medium">
|
|
|
+ <a href="#home" class="border-b border-gray-700 pb-2">Главная</a>
|
|
|
+ <a href="#about" class="border-b border-gray-700 pb-2">О нас</a>
|
|
|
+ <a href="#services" class="border-b border-gray-700 pb-2">Услуги</a>
|
|
|
+ <a href="#contact" class="border-b border-gray-700 pb-2">Консультация</a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </nav>
|
|
|
+
|
|
|
+ <main class="pt-20">
|
|
|
+ <!-- Hero секция (главная) -->
|
|
|
+ <section id="home" class="min-h-screen flex items-center justify-center px-6 md:px-12 py-24">
|
|
|
+ <div class="container mx-auto max-w-6xl text-center md:text-left fade-up">
|
|
|
+ <h1 class="text-4xl md:text-6xl lg:text-7xl font-bold leading-tight tracking-tight">
|
|
|
+ ТарДетейл:<br>
|
|
|
+ <span class="bg-gradient-to-r from-white to-gray-400 bg-clip-text text-transparent">Безупречный уход за вашим автомобилем</span>
|
|
|
+ </h1>
|
|
|
+ <p class="text-gray-300 text-lg md:text-xl max-w-3xl mx-auto md:mx-0 mt-6 leading-relaxed">
|
|
|
+ Студия профессионального детейлинга Матвея Тарабана. Мы не просто моем машины,
|
|
|
+ мы возвращаем им первозданный вид, работая на совесть.
|
|
|
+ </p>
|
|
|
+ <div class="mt-10">
|
|
|
+ <a href="#contact" class="inline-block bg-white text-black font-semibold px-8 py-4 rounded-full text-lg shadow-2xl hover:bg-gray-200 transition transform hover:scale-[1.02]">Записаться на осмотр →</a>
|
|
|
+ </div>
|
|
|
+ <div class="mt-16 flex flex-wrap justify-center md:justify-start gap-6 text-sm text-gray-400">
|
|
|
+ <div class="flex items-center gap-2"><i class="fas fa-check-circle text-white"></i> Полировка</div>
|
|
|
+ <div class="flex items-center gap-2"><i class="fas fa-check-circle text-white"></i> Керамика</div>
|
|
|
+ <div class="flex items-center gap-2"><i class="fas fa-check-circle text-white"></i> Химчистка</div>
|
|
|
+ <div class="flex items-center gap-2"><i class="fas fa-check-circle text-white"></i> Антидождь</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <!-- О НАС / История + Принципы -->
|
|
|
+ <section id="about" class="py-24 px-6 md:px-12">
|
|
|
+ <div class="container mx-auto max-w-6xl">
|
|
|
+ <div class="fade-up border-l-4 border-white pl-6 md:pl-8 mb-24">
|
|
|
+ <span class="text-sm uppercase tracking-wider text-gray-400">Основано Матвеем Тарабаном</span>
|
|
|
+ <h2 class="text-3xl md:text-5xl font-bold mt-3">История ТарДетейл</h2>
|
|
|
+ <p class="text-gray-300 text-lg md:text-xl max-w-4xl mt-6 leading-relaxed">
|
|
|
+ Всё началось с безграничной любви к автомобилям и перфекционизма. Матвей Тарабан,
|
|
|
+ основатель студии, долгие годы искал сервис, где к машине относятся как к искусству.
|
|
|
+ Не найдя — создал своё пространство «ТарДетейл». Здесь каждый проект ведётся лично
|
|
|
+ под контролем Матвея, а компромиссы в качестве — недопустимы. Девиз «Делаем на совесть»
|
|
|
+ стал фундаментом безупречной репутации.
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Принципы 4 карточки -->
|
|
|
+ <div class="fade-up">
|
|
|
+ <h3 class="text-2xl md:text-3xl font-semibold text-center mb-14">Наши принципы</h3>
|
|
|
+ <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
|
|
|
+ <div class="principle-card p-6">
|
|
|
+ <div class="text-4xl mb-4"><i class="fas fa-hand-sparkles"></i></div>
|
|
|
+ <h4 class="text-xl font-bold">Работаем на совесть</h4>
|
|
|
+ <p class="text-gray-400 mt-2 text-sm">Каждая деталь проверяется лично.</p>
|
|
|
+ </div>
|
|
|
+ <div class="principle-card p-6">
|
|
|
+ <div class="text-4xl mb-4"><i class="fas fa-gem"></i></div>
|
|
|
+ <h4 class="text-xl font-bold">Премиальные материалы</h4>
|
|
|
+ <p class="text-gray-400 mt-2 text-sm">Лучшие мировые бренды.</p>
|
|
|
+ </div>
|
|
|
+ <div class="principle-card p-6">
|
|
|
+ <div class="text-4xl mb-4"><i class="fas fa-shield-alt"></i></div>
|
|
|
+ <h4 class="text-xl font-bold">Гарантия результата</h4>
|
|
|
+ <p class="text-gray-400 mt-2 text-sm">Гарантийные обязательства.</p>
|
|
|
+ </div>
|
|
|
+ <div class="principle-card p-6">
|
|
|
+ <div class="text-4xl mb-4"><i class="fas fa-chart-line"></i></div>
|
|
|
+ <h4 class="text-xl font-bold">Прозрачные цены</h4>
|
|
|
+ <p class="text-gray-400 mt-2 text-sm">Фиксированная стоимость.</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <!-- УСЛУГИ с фотографиями (все ваши ссылки добавлены) -->
|
|
|
+ <section id="services" class="py-24 px-6 md:px-12 bg-[#050505]">
|
|
|
+ <div class="container mx-auto max-w-6xl">
|
|
|
+ <div class="text-center fade-up mb-14">
|
|
|
+ <h2 class="text-3xl md:text-5xl font-bold">Наши услуги</h2>
|
|
|
+ <div class="w-20 h-[2px] bg-white/50 mx-auto mt-4"></div>
|
|
|
+ <p class="text-gray-400 mt-4">Качественные фото наших работ — лучшее подтверждение мастерства</p>
|
|
|
+ </div>
|
|
|
+ <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
|
+ <!-- 1. Полировка кузова -->
|
|
|
+ <div class="service-card">
|
|
|
+ <img class="service-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSCOzjz7kgoz8Dq4LoaOQ6Rs3TSB5Hi0KK3XA&s" alt="Полировка автомобиля">
|
|
|
+ <div class="p-5">
|
|
|
+ <h3 class="text-xl font-bold">Полировка кузова</h3>
|
|
|
+ <p class="text-gray-400 text-sm mt-2">Восстановление ЛКП до зеркального блеска.</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 2. Керамическое покрытие -->
|
|
|
+ <div class="service-card">
|
|
|
+ <img class="service-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRuhWF6lxUXwoNEZ1qPZrvwgLyuGnSTrUgJDw&s" alt="Керамическое покрытие авто">
|
|
|
+ <div class="p-5">
|
|
|
+ <h3 class="text-xl font-bold">Керамическое покрытие</h3>
|
|
|
+ <p class="text-gray-400 text-sm mt-2">Надёжная защита на годы, гидрофобность.</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 3. Детейлинг-химчистка (фото процессов детейлинга) -->
|
|
|
+ <div class="service-card">
|
|
|
+ <img class="service-img" src="https://spbdetailing.ru/wp-content/uploads/2022/07/INS09083-scaled.jpg" alt="Детейлинг химчистка салона">
|
|
|
+ <div class="p-5">
|
|
|
+ <h3 class="text-xl font-bold">Детейлинг-химчистка</h3>
|
|
|
+ <p class="text-gray-400 text-sm mt-2">Глубокая чистка салона, удаление запахов.</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 4. Антидождь + полировка фар / пример -->
|
|
|
+ <div class="service-card">
|
|
|
+ <img class="service-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTAiVFoc9rdi5z0ceYA-rx_2ubic9iOAdKddg&s" alt="Антидождь покрытие стёкол">
|
|
|
+ <div class="p-5">
|
|
|
+ <h3 class="text-xl font-bold">Антидождь</h3>
|
|
|
+ <p class="text-gray-400 text-sm mt-2">Нанопокрытие стёкол для идеального обзора.</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- Дополнительные фото для красоты можно добавить второй ряд (по желанию) -->
|
|
|
+ <div class="grid md:grid-cols-3 gap-6 mt-10">
|
|
|
+ <div class="service-card">
|
|
|
+ <img class="service-img h-48" src="https://storeaudio.ru/upload/iblock/46c/1qb33ngtv1t58jfyp2uy6mjn071y7q7c.jpg" alt="Полировка фар">
|
|
|
+ <div class="p-4">
|
|
|
+ <h3 class="font-bold">Полировка фар</h3>
|
|
|
+ <p class="text-gray-400 text-xs">Возвращаем прозрачность оптике.</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="service-card">
|
|
|
+ <img class="service-img h-48" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR-7hID6M2fhena-J-tK1TvDyryonrL1HRryw&s" alt="Защита кузова">
|
|
|
+ <div class="p-4">
|
|
|
+ <h3 class="font-bold">Защитная пленка</h3>
|
|
|
+ <p class="text-gray-400 text-xs">Антигравийная защита кузова.</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="service-card">
|
|
|
+ <img class="service-img h-48" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcScEUcyi44yHlWDc24cxYZJWy2Xrv-6-jIotg&s" alt="Чистка двигателя">
|
|
|
+ <div class="p-4">
|
|
|
+ <h3 class="font-bold">Чистка моторного отсека</h3>
|
|
|
+ <p class="text-gray-400 text-xs">Детейлинг под капотом.</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <!-- ФОРМА ОБРАТНОЙ СВЯЗИ -->
|
|
|
+ <section id="contact" class="py-28 px-6 md:px-12">
|
|
|
+ <div class="container mx-auto max-w-5xl fade-up">
|
|
|
+ <div class="text-center mb-12">
|
|
|
+ <h2 class="text-3xl md:text-5xl font-bold">Оставьте заявку на <span class="border-b-2 border-white">бесплатную консультацию</span></h2>
|
|
|
+ <p class="text-gray-400 mt-4">Заполните форму, и основатель студии Матвей Тарабан свяжется с вами.</p>
|
|
|
+ </div>
|
|
|
+ <div class="bg-[#111111] rounded-3xl border border-[#2A2A2A] p-6 md:p-10">
|
|
|
+ <form id="leadForm" class="space-y-6">
|
|
|
+ <div>
|
|
|
+ <label class="block text-sm font-medium mb-2">ФИО *</label>
|
|
|
+ <input type="text" id="fullname" placeholder="Иван Иванов" class="w-full">
|
|
|
+ <div class="text-red-400 text-xs mt-1 hidden" id="nameError">Укажите ФИО</div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <label class="block text-sm font-medium mb-2">Телефон *</label>
|
|
|
+ <input type="tel" id="phone" placeholder="+7 (999) 000-00-00" class="w-full">
|
|
|
+ <div class="text-red-400 text-xs mt-1 hidden" id="phoneError">Введите 10 цифр номера</div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <label class="block text-sm font-medium mb-2">Электронная почта *</label>
|
|
|
+ <input type="email" id="email" placeholder="example@mail.ru" class="w-full">
|
|
|
+ <div class="text-red-400 text-xs mt-1 hidden" id="emailError">Введите корректный email</div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <label class="block text-sm font-medium mb-2">Марка авто / Комментарий</label>
|
|
|
+ <textarea id="comment" rows="3" placeholder="Например: BMW X5, керамика..." class="w-full"></textarea>
|
|
|
+ </div>
|
|
|
+ <button type="submit" id="submitBtn" class="w-full bg-white text-black font-bold py-4 rounded-xl text-lg hover:bg-gray-200 transition flex justify-center items-center gap-2">Отправить заявку <i class="fas fa-arrow-right"></i></button>
|
|
|
+ </form>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <!-- ФУТЕР -->
|
|
|
+ <footer class="border-t border-[#222] py-12 px-6 md:px-12 bg-[#050505]">
|
|
|
+ <div class="container mx-auto max-w-6xl grid md:grid-cols-3 gap-8">
|
|
|
+ <div>
|
|
|
+ <div class="text-2xl font-bold">Тар<span class="font-light">Детейл</span></div>
|
|
|
+ <p class="text-gray-400 text-sm mt-3">Студия детейлинга. Делаем на совесть.</p>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <h4 class="font-semibold text-lg mb-3">Контакты</h4>
|
|
|
+ <p class="text-gray-400 flex gap-2 items-center"><i class="fas fa-phone-alt"></i> +7 (928) 888-22-33</p>
|
|
|
+ <p class="text-gray-400 flex gap-2 items-center mt-2"><i class="fas fa-map-marker-alt"></i> г. Таганрог, Детейлинговая 12</p>
|
|
|
+ <div class="flex gap-5 mt-4">
|
|
|
+ <a href="#" class="text-gray-400 hover:text-white text-xl"><i class="fab fa-telegram"></i></a>
|
|
|
+ <a href="#" class="text-gray-400 hover:text-white text-xl"><i class="fab fa-instagram"></i></a>
|
|
|
+ <a href="#" class="text-gray-400 hover:text-white text-xl"><i class="fab fa-whatsapp"></i></a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="text-gray-400 text-sm">
|
|
|
+ <p>© 2026 ТарДетейл. Все права защищены. <br>Основатель: Матвей Тарабан.</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </footer>
|
|
|
+ </main>
|
|
|
+
|
|
|
+ <div id="toastMsg" class="toast-message"></div>
|
|
|
+
|
|
|
+ <script>
|
|
|
+ // Анимации Intersection Observer
|
|
|
+ const faders = document.querySelectorAll('.fade-up');
|
|
|
+ const observer = new IntersectionObserver((entries) => {
|
|
|
+ entries.forEach(entry => {
|
|
|
+ if(entry.isIntersecting) {
|
|
|
+ entry.target.classList.add('visible');
|
|
|
+ observer.unobserve(entry.target);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }, { threshold: 0.1 });
|
|
|
+ faders.forEach(el => observer.observe(el));
|
|
|
+
|
|
|
+ // Мобильное меню
|
|
|
+ const menuBtn = document.getElementById('mobileMenuBtn');
|
|
|
+ const mobileMenu = document.getElementById('mobileMenu');
|
|
|
+ const closeMenuBtn = document.getElementById('closeMenu');
|
|
|
+ if(menuBtn && mobileMenu && closeMenuBtn) {
|
|
|
+ menuBtn.onclick = () => { mobileMenu.classList.remove('-translate-x-full'); mobileMenu.classList.add('translate-x-0'); };
|
|
|
+ closeMenuBtn.onclick = () => { mobileMenu.classList.add('-translate-x-full'); mobileMenu.classList.remove('translate-x-0'); };
|
|
|
+ document.querySelectorAll('#mobileMenu a').forEach(link => {
|
|
|
+ link.onclick = () => { mobileMenu.classList.add('-translate-x-full'); mobileMenu.classList.remove('translate-x-0'); };
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ // Маска телефона
|
|
|
+ const phoneField = document.getElementById('phone');
|
|
|
+ if(phoneField) {
|
|
|
+ phoneField.addEventListener('input', function(e) {
|
|
|
+ let val = e.target.value.replace(/\D/g, '');
|
|
|
+ if(val.length > 11) val = val.slice(0,11);
|
|
|
+ let formatted = '';
|
|
|
+ if(val.length > 0) formatted = '+7 ';
|
|
|
+ if(val.length >= 1) {
|
|
|
+ let part1 = val.slice(1,4);
|
|
|
+ if(part1) formatted += `(${part1}`;
|
|
|
+ if(val.length >= 4) formatted += `) ${val.slice(4,7)}`;
|
|
|
+ if(val.length >= 7) formatted += `-${val.slice(7,9)}`;
|
|
|
+ if(val.length >= 9) formatted += `-${val.slice(9,11)}`;
|
|
|
+ }
|
|
|
+ e.target.value = formatted;
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ // Валидация и отправка
|
|
|
+ const form = document.getElementById('leadForm');
|
|
|
+ const toast = document.getElementById('toastMsg');
|
|
|
+ function showMessage(text, isError = false) {
|
|
|
+ toast.innerText = text;
|
|
|
+ toast.classList.add('show');
|
|
|
+ toast.style.background = isError ? '#2c1515' : '#1E1E1E';
|
|
|
+ toast.style.border = isError ? '1px solid #f44336' : '1px solid #4CAF50';
|
|
|
+ setTimeout(() => toast.classList.remove('show'), 4000);
|
|
|
+ }
|
|
|
+
|
|
|
+ form.addEventListener('submit', (e) => {
|
|
|
+ e.preventDefault();
|
|
|
+ let isValid = true;
|
|
|
+ const fullname = document.getElementById('fullname').value.trim();
|
|
|
+ const phoneDigits = document.getElementById('phone').value.replace(/\D/g, '');
|
|
|
+ const email = document.getElementById('email').value.trim();
|
|
|
+ const nameErr = document.getElementById('nameError');
|
|
|
+ const phoneErr = document.getElementById('phoneError');
|
|
|
+ const emailErr = document.getElementById('emailError');
|
|
|
+ if(!fullname) { nameErr.classList.remove('hidden'); isValid = false; } else { nameErr.classList.add('hidden'); }
|
|
|
+ if(phoneDigits.length < 10) { phoneErr.classList.remove('hidden'); isValid = false; } else { phoneErr.classList.add('hidden'); }
|
|
|
+ const emailRegex = /^[^\s@]+@([^\s@]+\.)+[^\s@]+$/;
|
|
|
+ if(!email || !emailRegex.test(email)) { emailErr.classList.remove('hidden'); isValid = false; } else { emailErr.classList.add('hidden'); }
|
|
|
+ if(isValid) {
|
|
|
+ const btn = document.getElementById('submitBtn');
|
|
|
+ const original = btn.innerHTML;
|
|
|
+ btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Отправка...';
|
|
|
+ btn.disabled = true;
|
|
|
+ setTimeout(() => {
|
|
|
+ showMessage('✅ Спасибо! Матвей или менеджер свяжется с вами.');
|
|
|
+ form.reset();
|
|
|
+ btn.innerHTML = original;
|
|
|
+ btn.disabled = false;
|
|
|
+ }, 1000);
|
|
|
+ } else {
|
|
|
+ showMessage('⚠️ Заполните все обязательные поля верно', true);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ // Плавный скролл по якорям
|
|
|
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
|
|
+ anchor.addEventListener('click', function(e) {
|
|
|
+ const target = document.querySelector(this.getAttribute('href'));
|
|
|
+ if(target) { e.preventDefault(); target.scrollIntoView({ behavior: 'smooth' }); }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ window.addEventListener('load', () => {
|
|
|
+ faders.forEach(el => { if(el.getBoundingClientRect().top < window.innerHeight-100) el.classList.add('visible'); });
|
|
|
+ });
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+</html>
|
