Spaces:
Running
Running
| <html lang="ru"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>NAVI SYSTEMS | Премиальная автоэлектроника</title> | |
| <!-- Tailwind CSS --> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#ff3b3b', | |
| 'primary-dark': '#e03535', | |
| dark: '#0f0f0f', | |
| light: '#ffffff', | |
| 'card-bg': 'rgba(24,24,24,0.7)' | |
| }, | |
| boxShadow: { | |
| 'glow': '0 0 12px #ff3b3b, 0 0 24px rgba(255,59,59,0.4)' | |
| }, | |
| textShadow: { | |
| 'glow': '0 0 12px #ff3b3b, 0 0 24px rgba(255,59,59,0.4)' | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <!-- Google Fonts --> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"> | |
| <!-- Font Awesome --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <!-- AOS Animation --> | |
| <link href="https://unpkg.com/aos@2.3.4/dist/aos.css" rel="stylesheet"> | |
| <script src="https://unpkg.com/aos@2.3.4/dist/aos.js"></script> | |
| <style> | |
| :root { | |
| --primary: #ff3b3b; | |
| --primary-dark: #e03535; | |
| --dark: #0f0f0f; | |
| --light: #fff; | |
| --card-bg: rgba(24,24,24,0.7); | |
| --glow: 0 0 12px #ff3b3b, 0 0 24px rgba(255,59,59,0.4); | |
| } | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background: var(--dark); | |
| color: var(--light); | |
| overflow-x: hidden; | |
| scroll-behavior: smooth; | |
| } | |
| .text-glow { | |
| text-shadow: var(--glow); | |
| } | |
| .bg-card { | |
| background: var(--card-bg); | |
| backdrop-filter: blur(12px); | |
| border: 1px solid rgba(255,255,255,0.05); | |
| } | |
| .btn-primary { | |
| background: var(--primary); | |
| color: #000; | |
| font-weight: 600; | |
| transition: all 0.3s; | |
| } | |
| .btn-primary:hover { | |
| background: var(--primary-dark); | |
| transform: translateY(-2px); | |
| box-shadow: var(--glow); | |
| } | |
| /* Preloader */ | |
| #preloader { | |
| position: fixed; | |
| inset: 0; | |
| background: var(--dark); | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| z-index: 9999; | |
| transition: all 0.5s; | |
| } | |
| .logo-pre { | |
| width: 80px; | |
| height: 80px; | |
| border: 3px solid transparent; | |
| border-top: 3px solid var(--primary); | |
| border-radius: 50%; | |
| animation: spin 1.4s linear infinite, glow 2s ease-in-out infinite alternate; | |
| position: relative; | |
| } | |
| .logo-pre::after { | |
| content: "NS"; | |
| position: absolute; | |
| inset: 0; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 1.5rem; | |
| color: var(--light); | |
| font-weight: 800; | |
| } | |
| @keyframes spin { | |
| to { transform: rotate(360deg); } | |
| } | |
| @keyframes glow { | |
| to { filter: drop-shadow(var(--glow)); } | |
| } | |
| /* Hero overlay */ | |
| .hero-overlay { | |
| position: absolute; | |
| inset: 0; | |
| background: radial-gradient(circle at 50% 50%, rgba(255,59,59,0.15) 0%, rgba(15,15,15,0.95) 80%); | |
| z-index: -1; | |
| } | |
| /* Utility */ | |
| .hover-scale { | |
| transition: transform 0.3s; | |
| } | |
| .hover-scale:hover { | |
| transform: scale(1.03); | |
| } | |
| /* Navigation */ | |
| .nav-link { | |
| position: relative; | |
| } | |
| .nav-link::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -2px; | |
| left: 0; | |
| width: 0; | |
| height: 2px; | |
| background: var(--primary); | |
| transition: width 0.3s; | |
| } | |
| .nav-link:hover::after { | |
| width: 100%; | |
| } | |
| /* Mobile menu */ | |
| #mobile-menu { | |
| max-height: 0; | |
| overflow: hidden; | |
| transition: max-height 0.5s ease-out; | |
| } | |
| #mobile-menu.active { | |
| max-height: 500px; | |
| } | |
| /* Timeline */ | |
| .timeline-item { | |
| position: relative; | |
| padding-left: 3rem; | |
| } | |
| .timeline-item::before { | |
| content: ''; | |
| position: absolute; | |
| left: 0.7rem; | |
| top: 0; | |
| height: 100%; | |
| width: 2px; | |
| background: rgba(255,255,255,0.1); | |
| } | |
| .timeline-dot { | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| width: 1.5rem; | |
| height: 1.5rem; | |
| border-radius: 50%; | |
| background: var(--primary); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: #000; | |
| font-weight: bold; | |
| } | |
| /* Car models */ | |
| .car-model { | |
| transition: all 0.3s; | |
| } | |
| .car-model:hover { | |
| transform: translateY(-10px); | |
| box-shadow: var(--glow); | |
| } | |
| /* Form input */ | |
| .form-input { | |
| background: rgba(255,255,255,0.05); | |
| border: 1px solid rgba(255,255,255,0.1); | |
| transition: all 0.3s; | |
| } | |
| .form-input:focus { | |
| outline: none; | |
| border-color: var(--primary); | |
| box-shadow: 0 0 0 3px rgba(255,59,59,0.2); | |
| } | |
| /* Particles */ | |
| @keyframes float-particle { | |
| 0% { | |
| transform: translateY(0) translateX(0); | |
| opacity: 1; | |
| } | |
| 100% { | |
| transform: translateY(-100vh) translateX(20px); | |
| opacity: 0; | |
| } | |
| } | |
| /* Responsive */ | |
| @media (max-width: 768px) { | |
| .hero-title { | |
| font-size: 3rem; | |
| } | |
| .car-1, .car-2, .car-3, .car-4 { | |
| opacity: 0.15; | |
| width: 280px; | |
| height: 160px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="antialiased"> | |
| <!-- Preloader --> | |
| <div id="preloader"> | |
| <div class="logo-pre"></div> | |
| </div> | |
| <!-- Particles --> | |
| <div id="particles" class="particles fixed inset-0 pointer-events-none"></div> | |
| <!-- Navigation --> | |
| <header class="fixed w-full z-50 bg-black bg-opacity-80 backdrop-filter backdrop-blur-sm"> | |
| <div class="max-w-7xl mx-auto px-6 py-4 flex justify-between items-center"> | |
| <a href="#" class="flex items-center"> | |
| <span class="text-2xl font-bold text-primary">NAVI</span> | |
| <span class="text-2xl font-bold text-white">SYSTEMS</span> | |
| </a> | |
| <!-- Desktop Navigation --> | |
| <nav class="hidden md:flex space-x-8"> | |
| <a href="#home" class="nav-link text-white hover:text-primary">Главная</a> | |
| <a href="#services" class="nav-link text-white hover:text-primary">Услуги</a> | |
| <a href="#advantages" class="nav-link text-white hover:text-primary">Преимущества</a> | |
| <a href="#process" class="nav-link text-white hover:text-primary">Процесс</a> | |
| <a href="#contact" class="nav-link text-white hover:text-primary">Контакты</a> | |
| </nav> | |
| <!-- Mobile Menu Button --> | |
| <button id="mobile-menu-button" class="md:hidden text-white focus:outline-none"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| </div> | |
| <!-- Mobile Navigation --> | |
| <div id="mobile-menu" class="md:hidden overflow-hidden"> | |
| <div class="px-6 py-4 space-y-4 bg-black bg-opacity-90"> | |
| <a href="#home" class="block text-white hover:text-primary">Главная</a> | |
| <a href="#services" class="block text-white hover:text-primary">Услуги</a> | |
| <a href="#advantages" class="block text-white hover:text-primary">Преимущества</a> | |
| <a href="#process" class="block text-white hover:text-primary">Процесс</a> | |
| <a href="#contact" class="block text-white hover:text-primary">Контакты</a> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section id="home" class="relative min-h-screen flex items-center justify-center overflow-hidden pt-16"> | |
| <div class="hero-overlay"></div> | |
| <!-- Decorative car images --> | |
| <img src="https://via.placeholder.com/400x200/333333/666666?text=BMW" alt="BMW" class="car-1 absolute top-20 left-10 opacity-10 w-[400px] h-[200px] object-contain"> | |
| <img src="https://via.placeholder.com/400x200/333333/666666?text=MERCEDES" alt="Mercedes" class="car-2 absolute bottom-20 right-10 opacity-10 w-[400px] h-[200px] object-contain"> | |
| <img src="https://via.placeholder.com/400x200/333333/666666?text=AUDI" alt="Audi" class="car-3 absolute top-1/3 right-20 opacity-10 w-[400px] h-[200px] object-contain"> | |
| <img src="https://via.placeholder.com/400x200/333333/666666?text=PORSCHE" alt="Porsche" class="car-4 absolute bottom-1/3 left-20 opacity-10 w-[400px] h-[200px] object-contain"> | |
| <div class="relative z-10 text-center px-4" data-aos="fade-up"> | |
| <h1 class="hero-title text-6xl font-extrabold mb-6"> | |
| <span class="text-primary">NAVI</span> <span class="text-white">SYSTEMS</span> | |
| </h1> | |
| <p class="text-xl text-gray-300 max-w-2xl mx-auto mb-10"> | |
| Эксклюзивные решения для премиальных автомобилей. Технологии будущего — уже сегодня. | |
| </p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> | |
| <a href="#services" class="btn-primary px-8 py-4 rounded-lg hover-scale animate-pulse"> | |
| <i class="fas fa-tools mr-2"></i>Наши услуги | |
| </a> | |
| <a href="#contact" class="bg-white bg-opacity-10 px-8 py-4 rounded-lg hover:bg-opacity-20 transition border border-white border-opacity-10 hover-scale"> | |
| <i class="fas fa-phone-alt mr-2"></i>Консультация | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Services Section --> | |
| <section id="services" class="py-20 bg-black"> | |
| <div class="max-w-6xl mx-auto px-6"> | |
| <div class="text-center mb-16" data-aos="fade-up"> | |
| <span class="text-primary font-bold">УСЛУГИ</span> | |
| <h2 class="text-4xl font-extrabold mt-2 mb-4">Премиальные решения для вашего авто</h2> | |
| <p class="text-gray-400 max-w-2xl mx-auto">Мы предлагаем полный спектр услуг по модернизации и настройке мультимедийных систем премиальных автомобилей</p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <!-- Service 1 --> | |
| <div class="bg-card p-8 rounded-xl hover-scale" data-aos="fade-up" data-aos-delay="100"> | |
| <div class="w-14 h-14 bg-primary bg-opacity-20 rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-language text-2xl text-primary"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Русификация мультимедиа</h3> | |
| <p class="text-gray-400 mb-4">Полный перевод интерфейса, шаг FM, актуальные карты для навигации с поддержкой кириллицы.</p> | |
| <ul class="text-sm text-gray-400 space-y-2"> | |
| <li class="flex items-center"><i class="fas fa-check text-primary mr-2"></i> Поддержка всех языков</li> | |
| <li class="flex items-center"><i class="fas fa-check text-primary mr-2"></i> Обновление карт</li> | |
| <li class="flex items-center"><i class="fas fa-check text-primary mr-2"></i> Настройка FM-радио</li> | |
| </ul> | |
| </div> | |
| <!-- Service 2 --> | |
| <div class="bg-card p-8 rounded-xl hover-scale" data-aos="fade-up" data-aos-delay="200"> | |
| <div class="w-14 h-14 bg-primary bg-opacity-20 rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-music text-2xl text-primary"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Аудио апгрейд</h3> | |
| <p class="text-gray-400 mb-4">Профессиональная установка и настройка аудиосистем премиум-класса с сохранением штатной функциональности.</p> | |
| <ul class="text-sm text-gray-400 space-y-2"> | |
| <li class="flex items-center"><i class="fas fa-check text-primary mr-2"></i> Hi-End компоненты</li> | |
| <li class="flex items-center"><i class="fas fa-check text-primary mr-2"></i> Акустическая подготовка</li> | |
| <li class="flex items-center"><i class="fas fa-check text-primary mr-2"></i> Профессиональная настройка</li> | |
| </ul> | |
| </div> | |
| <!-- Service 3 --> | |
| <div class="bg-card p-8 rounded-xl hover-scale" data-aos="fade-up" data-aos-delay="300"> | |
| <div class="w-14 h-14 bg-primary bg-opacity-20 rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-car text-2xl text-primary"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Apple CarPlay / Android Auto</h3> | |
| <p class="text-gray-400 mb-4">Беспроводная интеграция смартфона с мультимедийной системой автомобиля без потери функционала.</p> | |
| <ul class="text-sm text-gray-400 space-y-2"> | |
| <li class="flex items-center"><i class="fas fa-check text-primary mr-2"></i> Беспроводное подключение</li> | |
| <li class="flex items-center"><i class="fas fa-check text-primary mr-2"></i> Полная поддержка OEM</li> | |
| <li class="flex items-center"><i class="fas fa-check text-primary mr-2"></i> Сохранение всех функций</li> | |
| </ul> | |
| </div> | |
| <!-- Service 4 --> | |
| <div class="bg-card p-8 rounded-xl hover-scale" data-aos="fade-up" data-aos-delay="100"> | |
| <div class="w-14 h-14 bg-primary bg-opacity-20 rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-map-marked-alt text-2xl text-primary"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Навигационные системы</h3> | |
| <p class="text-gray-400 mb-4">Установка и настройка премиальных навигационных систем с поддержкой онлайн-сервисов.</p> | |
| <ul class="text-sm text-gray-400 space-y-2"> | |
| <li class="flex items-center"><i class="fas fa-check text-primary mr-2"></i> Онлайн-карты</li> | |
| <li class="flex items-center"><i class="fas fa-check text-primary mr-2"></i> Пробки и камеры</li> | |
| <li class="flex items-center"><i class="fas fa-check text-primary mr-2"></i> Голосовое управление</li> | |
| </ul> | |
| </div> | |
| <!-- Service 5 --> | |
| <div class="bg-card p-8 rounded-xl hover-scale" data-aos="fade-up" data-aos-delay="200"> | |
| <div class="w-14 h-14 bg-primary bg-opacity-20 rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-tv text-2xl text-primary"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Мультимедиа системы</h3> | |
| <p class="text-gray-400 mb-4">Установка дополнительных экранов, DVD, TV-тюнеров и других мультимедийных устройств.</p> | |
| <ul class="text-sm text-gray-400 space-y-2"> | |
| <li class="flex items-center"><i class="fas fa-check text-primary mr-2"></i> Штатный внешний вид</li> | |
| <li class="flex items-center"><i class="fas fa-check text-primary mr-2"></i> Поддержка всех форматов</li> | |
| <li class="flex items-center"><i class="fas fa-check text-primary mr-2"></i> Интеграция с OEM</li> | |
| </ul> | |
| </div> | |
| <!-- Service 6 --> | |
| <div class="bg-card p-8 rounded-xl hover-scale" data-aos="fade-up" data-aos-delay="300"> | |
| <div class="w-14 h-14 bg-primary bg-opacity-20 rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-lock text-2xl text-primary"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Безопасность</h3> | |
| <p class="text-gray-400 mb-4">Установка систем видеонаблюдения, парктроников и камер кругового обзора.</p> | |
| <ul class="text-sm text-gray-400 space-y-2"> | |
| <li class="flex items-center"><i class="fas fa-check text-primary mr-2"></i> Камеры 360°</li> | |
| <li class="flex items-center"><i class="fas fa-check text-primary mr-2"></i> Запись в движении</li> | |
| <li class="flex items-center"><i class="fas fa-check text-primary mr-2"></i> Датчики парковки</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Advantages Section --> | |
| <section id="advantages" class="py-20 bg-gradient-to-b from-black to-gray-900"> | |
| <div class="max-w-6xl mx-auto px-6"> | |
| <div class="text-center mb-16" data-aos="fade-up"> | |
| <span class="text-primary font-bold">ПРЕИМУЩЕСТВА</span> | |
| <h2 class="text-4xl font-extrabold mt-2 mb-4">Почему выбирают нас</h2> | |
| <p class="text-gray-400 max-w-2xl mx-auto">Профессиональный подход и внимание к деталям - наши ключевые преимущества</p> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8"> | |
| <!-- Advantage 1 --> | |
| <div class="bg-card p-6 rounded-xl text-center hover-scale" data-aos="fade-up" data-aos-delay="100"> | |
| <div class="w-16 h-16 bg-primary bg-opacity-20 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-medal text-3xl text-primary"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Опыт</h3> | |
| <p class="text-gray-400">Более 12 лет работы с премиальными автомобилями</p> | |
| <span class="text-primary text-4xl font-bold mt-4 block">12+</span> | |
| <span class="text-gray-400 text-sm">лет опыта</span> | |
| </div> | |
| <!-- Advantage 2 --> | |
| <div class="bg-card p-6 rounded-xl text-center hover-scale" data-aos="fade-up" data-aos-delay="200"> | |
| <div class="w-16 h-16 bg-primary bg-opacity-20 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-car text-3xl text-primary"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Автомобилей</h3> | |
| <p class="text-gray-400">Успешно модернизированных систем</p> | |
| <span class="text-primary text-4xl font-bold mt-4 block">1500+</span> | |
| <span class="text-gray-400 text-sm">автомобилей</span> | |
| </div> | |
| <!-- Advantage 3 --> | |
| <div class="bg-card p-6 rounded-xl text-center hover-scale" data-aos="fade-up" data-aos-delay="300"> | |
| <div class="w-16 h-16 bg-primary bg-opacity-20 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-user-tie text-3xl text-primary"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Специалисты</h3> | |
| <p class="text-gray-400">Квалифицированные инженеры с сертификатами</p> | |
| <span class="text-primary text-4xl font-bold mt-4 block">15+</span> | |
| <span class="text-gray-400 text-sm">специалистов</span> | |
| </div> | |
| <!-- Advantage 4 --> | |
| <div class="bg-card p-6 rounded-xl text-center hover-scale" data-aos="fade-up" data-aos-delay="400"> | |
| <div class="w-16 h-16 bg-primary bg-opacity-20 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-shield-alt text-3xl text-primary"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Гарантия</h3> | |
| <p class="text-gray-400">На все работы и оборудование</p> | |
| <span class="text-primary text-4xl font-bold mt-4 block">2</span> | |
| <span class="text-gray-400 text-sm">года гарантии</span> | |
| </div> | |
| </div> | |
| <div class="mt-16 grid md:grid-cols-2 gap-8 items-center"> | |
| <div class="space-y-6" data-aos="fade-right"> | |
| <h3 class="text-2xl font-bold">Индивидуальный подход к каждому клиенту</h3> | |
| <p class="text-gray-400">Мы понимаем, что каждый автомобиль и каждый клиент уникальны. Поэтому мы предлагаем индивидуальные решения, учитывающие все ваши пожелания и особенности вашего автомобиля.</p> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="w-8 h-8 bg-primary bg-opacity-20 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-check text-primary"></i> | |
| </div> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-gray-300 font-medium">Бесплатная диагностика</p> | |
| <p class="text-gray-500 text-sm">Точная оценка возможностей вашего авто</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="w-8 h-8 bg-primary bg-opacity-20 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-check text-primary"></i> | |
| </div> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-gray-300 font-medium">Оригинальные компоненты</p> | |
| <p class="text-gray-500 text-sm">Используем только проверенное оборудование</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="w-8 h-8 bg-primary bg-opacity-20 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-check text-primary"></i> | |
| </div> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-gray-300 font-medium">Конфиденциальность</p> | |
| <p class="text-gray-500 text-sm">Ваши данные и автомобиль в безопасности</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="relative" data-aos="fade-left"> | |
| <div class="bg-card p-6 rounded-xl"> | |
| <img src="https://via.placeholder.com/600x400/333333/666666?text=Premium+Car+Electronics" alt="Car Electronics" class="rounded-lg w-full h-auto"> | |
| </div> | |
| <div class="absolute -bottom-6 -right-6 bg-primary p-4 rounded-lg shadow-lg"> | |
| <div class="text-black font-bold text-xl">NAVI SYSTEMS</div> | |
| <div class="text-black text-sm">Since 2011</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Process Section --> | |
| <section id="process" class="py-20 bg-black"> | |
| <div class="max-w-6xl mx-auto px-6"> | |
| <div class="text-center mb-16" data-aos="fade-up"> | |
| <span class="text-primary font-bold">ПРОЦЕСС</span> | |
| <h2 class="text-4xl font-extrabold mt-2 mb-4">Как мы работаем</h2> | |
| <p class="text-gray-400 max-w-2xl mx-auto">Четкий алгоритм работы обеспечивает качественный результат в кратчайшие сроки</p> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8 mb-16"> | |
| <!-- Step 1 --> | |
| <div class="bg-card p-6 rounded-xl text-center hover-scale" data-aos="fade-up" data-aos-delay="100"> | |
| <div class="w-16 h-16 bg-primary rounded-full flex items-center justify-center mx-auto mb-4 text-2xl font-bold">1</div> | |
| <h3 class="text-xl font-bold mb-2">Консультация</h3> | |
| <p class="text-gray-400">Обсуждаем ваши пожелания и возможности автомобиля</p> | |
| </div> | |
| <!-- Step 2 --> | |
| <div class="bg-card p-6 rounded-xl text-center hover-scale" data-aos="fade-up" data-aos-delay="200"> | |
| <div class="w-16 h-16 bg-primary rounded-full flex items-center justify-center mx-auto mb-4 text-2xl font-bold">2</div> | |
| <h3 class="text-xl font-bold mb-2">Диагностика</h3> | |
| <p class="text-gray-400">Проводим полную диагностику систем автомобиля</p> | |
| </div> | |
| <!-- Step 3 --> | |
| <div class="bg-card p-6 rounded-xl text-center hover-scale" data-aos="fade-up" data-aos-delay="300"> | |
| <div class="w-16 h-16 bg-primary rounded-full flex items-center justify-center mx-auto mb-4 text-2xl font-bold">3</div> | |
| <h3 class="text-xl font-bold mb-2">Реализация</h3> | |
| <p class="text-gray-400">Выполняем работы с использованием профессионального оборудования</p> | |
| </div> | |
| <!-- Step 4 --> | |
| <div class="bg-card p-6 rounded-xl text-center hover-scale" data-aos="fade-up" data-aos-delay="400"> | |
| <div class="w-16 h-16 bg-primary rounded-full flex items-center justify-center mx-auto mb-4 text-2xl font-bold">4</div> | |
| <h3 class="text-xl font-bold mb-2">Тестирование</h3> | |
| <p class="text-gray-400">Проверяем все системы перед передачей автомобиля</p> | |
| </div> | |
| </div> | |
| <div class="mt-12" data-aos="fade-up"> | |
| <h3 class="text-2xl font-bold text-center mb-8">Этапы работы в деталях</h3> | |
| <div class="max-w-3xl mx-auto"> | |
| <!-- Timeline Item 1 --> | |
| <div class="timeline-item mb-8"> | |
| <div class="timeline-dot">1</div> | |
| <div class="bg-card p-6 rounded-xl"> | |
| <h4 class="font-bold text-lg mb-2">Первичная консультация</h4> | |
| <p class="text-gray-400">На первой встрече мы внимательно выслушаем ваши пожелания, расскажем о возможностях модернизации именно вашего автомобиля и предложим оптимальные решения.</p> | |
| </div> | |
| </div> | |
| <!-- Timeline Item 2 --> | |
| <div class="timeline-item mb-8"> | |
| <div class="timeline-dot">2</div> | |
| <div class="bg-card p-6 rounded-xl"> | |
| <h4 class="font-bold text-lg mb-2">Диагностика и согласование</h4> | |
| <p class="text-gray-400">Наши специалисты проведут полную диагностику систем вашего автомобиля, после чего мы подготовим детальный план работ и согласуем его с вами.</p> | |
| </div> | |
| </div> | |
| <!-- Timeline Item 3 --> | |
| <div class="timeline-item mb-8"> | |
| <div class="timeline-dot">3</div> | |
| <div class="bg-card p-6 rounded-xl"> | |
| <h4 class="font-bold text-lg mb-2">Выполнение работ</h4> | |
| <p class="text-gray-400">После утверждения плана наши сертифицированные специалисты приступят к работе, используя только профессиональное оборудование и оригинальные компоненты.</p> | |
| </div> | |
| </div> | |
| <!-- Timeline Item 4 --> | |
| <div class="timeline-item"> | |
| <div class="timeline-dot">4</div> | |
| <div class="bg-card p-6 rounded-xl"> | |
| <h4 class="font-bold text-lg mb-2">Тестирование и передача</h4> | |
| <p class="text-gray-400">Перед передачей автомобиля мы проводим тщательное тестирование всех систем, демонстрируем вам результат работы и даем подробные рекомендации по использованию.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Brands Section --> | |
| <section class="py-16 bg-gradient-to-r from-gray-900 to-black"> | |
| <div class="max-w-6xl mx-auto px-6"> | |
| <div class="text-center mb-12" data-aos="fade-up"> | |
| <h2 class="text-3xl font-extrabold mb-4">Работаем с премиальными брендами</h2> | |
| <p class="text-gray-400 max-w-2xl mx-auto">Мы специализируемся на автомобилях следующих марок</p> | |
| </div> | |
| <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-8"> | |
| <!-- Brand 1 --> | |
| <div class="bg-card p-6 rounded-xl flex items-center justify-center hover-scale" data-aos="fade-up" data-aos-delay="100"> | |
| <img src="https://via.placeholder.com/150x80/333333/666666?text=BMW" alt="BMW" class="h-10 object-contain opacity-80 hover:opacity-100 transition"> | |
| </div> | |
| <!-- Brand 2 --> | |
| <div class="bg-card p-6 rounded-xl flex items-center justify-center hover-scale" data-aos="fade-up" data-aos-delay="150"> | |
| <img src="https://via.placeholder.com/150x80/333333/666666?text=MERCEDES" alt="Mercedes" class="h-10 object-contain opacity-80 hover:opacity-100 transition"> | |
| </div> | |
| <!-- Brand 3 --> | |
| <div class="bg-card p-6 rounded-xl flex items-center justify-center hover-scale" data-aos="fade-up" data-aos-delay="200"> | |
| <img src="https://via.placeholder.com/150x80/333333/666666?text=AUDI" alt="Audi" class="h-10 object-contain opacity-80 hover:opacity-100 transition"> | |
| </div> | |
| <!-- Brand 4 --> | |
| <div class="bg-card p-6 rounded-xl flex items-center justify-center hover-scale" data-aos="fade-up" data-aos-delay="250"> | |
| <img src="https://via.placeholder.com/150x80/333333/666666?text=PORSCHE" alt="Porsche" class="h-10 object-contain opacity-80 hover:opacity-100 transition"> | |
| </div> | |
| <!-- Brand 5 --> | |
| <div class="bg-card p-6 rounded-xl flex items-center justify-center hover-scale" data-aos="fade-up" data-aos-delay="300"> | |
| <img src="https://via.placeholder.com/150x80/333333/666666?text=LEXUS" alt="Lexus" class="h-10 object-contain opacity-80 hover:opacity-100 transition"> | |
| </div> | |
| <!-- Brand 6 --> | |
| <div class="bg-card p-6 rounded-xl flex items-center justify-center hover-scale" data-aos="fade-up" data-aos-delay="350"> | |
| <img src="https://via.placeholder.com/150x80/333333/666666?text=RANGE+ROVER" alt="Range Rover" class="h-10 object-contain opacity-80 hover:opacity-100 transition"> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials Section --> | |
| <section class="py-20 bg-black"> | |
| <div class="max-w-6xl mx-auto px-6"> | |
| <div class="text-center mb-16" data-aos="fade-up"> | |
| <span class="text-primary font-bold">ОТЗЫВЫ</span> | |
| <h2 class="text-4xl font-extrabold mt-2 mb-4">Что говорят наши клиенты</h2> | |
| <p class="text-gray-400 max-w-2xl mx-auto">Мы гордимся каждым выполненным проектом и благодарны за доверие</p> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Testimonial 1 --> | |
| <div class="bg-card p-8 rounded-xl hover-scale" data-aos="fade-up" data-aos-delay="100"> | |
| <div class="flex items-center mb-6"> | |
| <div class="w-12 h-12 bg-primary bg-opacity-20 rounded-full flex items-center justify-center mr-4"> | |
| <i class="fas fa-user text-primary"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Александр</h4> | |
| <p class="text-gray-400 text-sm">BMW X5</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-300 mb-4">"Отличная работа! Русифицировали мультимедиа в моем X5, все работает идеально. Карты обновили, радио настроили. Очень профессиональный подход."</p> | |
| <div class="flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="bg-card p-8 rounded-xl hover-scale" data-aos="fade-up" data-aos-delay="200"> | |
| <div class="flex items-center mb-6"> | |
| <div class="w-12 h-12 bg-primary bg-opacity-20 rounded-full flex items-center justify-center mr-4"> | |
| <i class="fas fa-user text-primary"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Дмитрий</h4> | |
| <p class="text-gray-400 text-sm">Mercedes S-Class</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-300 mb-4">"Установили CarPlay в мой S-класс. Работает безупречно, все функции сохранены. Мастера настоящие профессионалы, все сделали аккуратно и быстро."</p> | |
| <div class="flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="bg-card p-8 rounded-xl hover-scale" data-aos="fade-up" data-aos-delay="300"> | |
| <div class="flex items-center mb-6"> | |
| <div class="w-12 h-12 bg-primary bg-opacity-20 rounded-full flex items-center justify-center mr-4"> | |
| <i class="fas fa-user text-primary"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Ольга</h4> | |
| <p class="text-gray-400 text-sm">Porsche Cayenne</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-300 mb-4">"Сделали потрясающий аудиоапгрейд в моем Cayenne. Звук просто невероятный! Все компоненты установлены идеально, никаких следов вмешательства не видно."</p> | |
| <div class="flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-20 bg-gradient-to-b from-black to-gray-900"> | |
| <div class="max-w-6xl mx-auto px-6"> | |
| <div class="text-center mb-16" data-aos="fade-up"> | |
| <span class="text-primary font-bold">КОНТАКТЫ</span> | |
| <h2 class="text-4xl font-extrabold mt-2 mb-4">Свяжитесь с нами</h2> | |
| <p class="text-gray-400 max-w-2xl mx-auto">Готовы ответить на все ваши вопросы и предложить оптимальное решение</p> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-12"> | |
| <!-- Contact Info --> | |
| <div class="space-y-8" data-aos="fade-right"> | |
| <div class="bg-card p-6 rounded-xl"> | |
| <h3 class="text-xl font-bold mb-6">Контактная информация</h3> | |
| <div class="space-y-6"> | |
| <!-- Address --> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="w-10 h-10 bg-primary bg-opacity-20 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-map-marker-alt text-primary"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="font-bold text-gray-300">Адрес</h4> | |
| <p class="text-gray-400">г. Москва, ул. Автозаводская, д. 23</p> | |
| </div> | |
| </div> | |
| <!-- Phone --> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="w-10 h-10 bg-primary bg-opacity-20 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-phone-alt text-primary"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="font-bold text-gray-300">Телефон</h4> | |
| <p class="text-gray-400">+7 (495) 123-45-67</p> | |
| <p class="text-gray-400">+7 (926) 765-43-21</p> | |
| </div> | |
| </div> | |
| <!-- Email --> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="w-10 h-10 bg-primary bg-opacity-20 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-envelope text-primary"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="font-bold text-gray-300">Email</h4> | |
| <p class="text-gray-400">info@navisystems.ru</p> | |
| <p class="text-gray-400">support@navisystems.ru</p> | |
| </div> | |
| </div> | |
| <!-- Hours --> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="w-10 h-10 bg-primary bg-opacity-20 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-clock text-primary"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="font-bold text-gray-300">Часы работы</h4> | |
| <p class="text-gray-400">Пн-Пт: 9:00 - 20:00</p> | |
| <p class="text-gray-400">Сб: 10:00 - 18:00</p> | |
| <p class="text-gray-400">Вс: выходной</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Map --> | |
| <div class="bg-card p-6 rounded-xl"> | |
| <h3 class="text-xl font-bold mb-6">Как нас найти</h3> | |
| <div class="aspect-w-16 aspect-h-9 rounded-lg overflow-hidden"> | |
| <img src="https://via.placeholder.com/600x400/333333/666666?text=Map+Location" alt="Map" class="w-full h-full object-cover"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Contact Form --> | |
| <div class="bg-card p-8 rounded-xl" data-aos="fade-left"> | |
| <h3 class="text-2xl font-bold mb-6">Оставьте заявку</h3> | |
| <p class="text-gray-400 mb-8">Заполните форму, и наш специалист свяжется с вами в ближайшее время</p> | |
| <form class="space-y-6"> | |
| <div> | |
| <label for="name" class="block text-gray-300 mb-2">Ваше имя</label> | |
| <input type="text" id="name" class="form-input w-full px-4 py-3 rounded-lg focus:outline-none" placeholder="Иван Иванов"> | |
| </div> | |
| <div> | |
| <label for="phone" class="block text-gray-300 mb-2">Телефон</label> | |
| <input type="tel" id="phone" class="form-input w-full px-4 py-3 rounded-lg focus:outline-none" placeholder="+7 (___) ___-__-__"> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-gray-300 mb-2">Email</label> | |
| <input type="email" id="email" class="form-input w-full px-4 py-3 rounded-lg focus:outline-none" placeholder="example@mail.ru"> | |
| </div> | |
| <div> | |
| <label for="car" class="block text-gray-300 mb-2">Марка автомобиля</label> | |
| <select id="car" class="form-input w-full px-4 py-3 rounded-lg focus:outline-none"> | |
| <option value="">Выберите марку</option> | |
| <option value="bmw">BMW</option> | |
| <option value="mercedes">Mercedes-Benz</option> | |
| <option value="audi">Audi</option> | |
| <option value="porsche">Porsche</option> | |
| <option value="lexus">Lexus</option> | |
| <option value="range">Range Rover</option> | |
| <option value="other">Другая</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="message" class="block text-gray-300 mb-2">Сообщение</label> | |
| <textarea id="message" rows="4" class="form-input w-full px-4 py-3 rounded-lg focus:outline-none" placeholder="Опишите, какие услуги вас интересуют..."></textarea> | |
| </div> | |
| <button type="submit" class="btn-primary w-full py-4 rounded-lg hover-scale"> | |
| <i class="fas fa-paper-plane mr-2"></i>Отправить заявку | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-16 bg-primary"> | |
| <div class="max-w-6xl mx-auto px-6 text-center"> | |
| <h2 class="text-3xl md:text-4xl font-extrabold mb-6 text-black">Готовы модернизировать свой автомобиль?</h2> | |
| <p class="text-black text-opacity-80 mb-8 max-w-2xl mx-auto">Запишитесь на бесплатную диагностику и консультацию прямо сейчас</p> | |
| <a href="#contact" class="inline-block bg-black text-white px-10 py-4 rounded-lg font-bold hover:bg-opacity-90 transition transform hover:-translate-y-1"> | |
| <i class="fas fa-calendar-alt mr-2"></i>Записаться | |
| </a> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-black py-12"> | |
| <div class="max-w-6xl mx-auto px-6"> | |
| <div class="grid md:grid-cols-4 gap-8 mb-8"> | |
| <!-- About --> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4">NAVI SYSTEMS</h3> | |
| <p class="text-gray-400 mb-4">Эксклюзивные решения для премиальных автомобилей с 2011 года.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-primary transition"> | |
| <i class="fab fa-vk text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-primary transition"> | |
| <i class="fab fa-telegram text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-primary transition"> | |
| <i class="fab fa-youtube text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-primary transition"> | |
| <i class="fab fa-instagram text-xl"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Services --> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4">Услуги</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-primary transition">Русификация</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-primary transition">Аудио апгрейд</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-primary transition">CarPlay/Android Auto</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-primary transition">Навигационные системы</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-primary transition">Безопасность</a></li> | |
| </ul> | |
| </div> | |
| <!-- Links --> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4">Ссылки</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#home" class="text-gray-400 hover:text-primary transition">Главная</a></li> | |
| <li><a href="#services" class="text-gray-400 hover:text-primary transition">Услуги</a></li> | |
| <li><a href="#advantages" class="text-gray-400 hover:text-primary transition">Преимущества</a></li> | |
| <li><a href="#process" class="text-gray-400 hover:text-primary transition">Процесс</a></li> | |
| <li><a href="#contact" class="text-gray-400 hover:text-primary transition">Контакты</a></li> | |
| </ul> | |
| </div> | |
| <!-- Newsletter --> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4">Новостная рассылка</h3> | |
| <p class="text-gray-400 mb-4">Подпишитесь на наши новости и акции</p> | |
| <form class="flex"> | |
| <input type="email" placeholder="Ваш email" class="form-input px-4 py-3 rounded-l-lg focus:outline-none flex-grow"> | |
| <button type="submit" class="bg-primary text-black px-4 py-3 rounded-r-lg font-bold"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| <div class="pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-400 mb-4 md:mb-0">© 2023 NAVI SYSTEMS. Все права защищены.</p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-primary transition">Политика конфиденциальности</a> | |
| <a href="#" class="text-gray-400 hover:text-primary transition">Условия использования</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Back to Top --> | |
| <a href="#home" id="back-to-top" class="fixed bottom-8 right-8 w-12 h-12 bg-primary rounded-full flex items-center justify-center text-black text-xl opacity-0 invisible transition-all duration-300"> | |
| <i class="fas fa-arrow-up"></i> | |
| </a> | |
| <!-- Scripts --> | |
| <script> | |
| // AOS Animation | |
| document.addEventListener('DOMContentLoaded', () => { | |
| AOS.init({ | |
| once: true, | |
| duration: 800, | |
| offset: 120 | |
| }); | |
| }); | |
| // Preloader | |
| window.addEventListener('load', () => { | |
| const preloader = document.getElementById('preloader'); | |
| setTimeout(() => { | |
| preloader.style.opacity = '0'; | |
| preloader.style.visibility = 'hidden'; | |
| preloader.style.display = 'none'; | |
| }, 500); | |
| }); | |
| // Mobile Menu | |
| const mobileMenuButton = document.getElementById('mobile-menu-button'); | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| if (mobileMenuButton && mobileMenu) { | |
| mobileMenuButton.addEventListener('click', () => { | |
| mobileMenu.classList.toggle('active'); | |
| mobileMenu.classList.toggle('max-h-0'); | |
| }); | |
| } | |
| // Phone Mask | |
| const phoneInput = document.getElementById('phone'); | |
| if (phoneInput) { | |
| phoneInput.addEventListener('input', (e) => { | |
| let x = e.target.value.replace(/\D/g, '').match(/(\d{0,1})(\d{0,3})(\d{0,3})(\d{0,2})(\d{0,2})/); | |
| e.target.value = !x[2] ? '+7' : `+7 (${x[2]}${x[3] ? `) ${x[3]}` : ''}${x[4] ? `-${x[4]}` : ''}${x[5] ? `-${x[5]}` : ''}`; | |
| }); | |
| } | |
| // Particles | |
| function createParticles() { | |
| const wrap = document.getElementById('particles'); | |
| if (!wrap) return; | |
| const count = 30; | |
| const w = window.innerWidth; | |
| const h = window.innerHeight; | |
| for (let i = 0; i < count; i++) { | |
| const d = document.createElement('div'); | |
| d.style.cssText = ` | |
| position: absolute; | |
| width: 2px; | |
| height: 2px; | |
| background: rgba(255,255,255,0.8); | |
| border-radius: 50%; | |
| top: ${Math.random() * h}px; | |
| left: ${Math.random() * w}px; | |
| animation: float-particle ${10 + Math.random() * 10}s linear infinite; | |
| `; | |
| d.style.animationDelay = `${Math.random() * 5}s`; | |
| wrap.appendChild(d); | |
| } | |
| } | |
| createParticles(); | |
| // Back to Top Button | |
| const backToTop = document.getElementById('back-to-top'); | |
| window.addEventListener('scroll', () => { | |
| if (window.pageYOffset > 300) { | |
| backToTop.style.opacity = '1'; | |
| backToTop.style.visibility = 'visible'; | |
| } else { | |
| backToTop.style.opacity = '0'; | |
| backToTop.style.visibility = 'hidden'; | |
| } | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Denzel1989/moy-cod2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |