Spaces:

Denzel1989
/

moy-cod2

Running

App Files Files Community

Denzel1989 commited on May 15

Commit

da538da

verified ·

1 Parent(s): 2ed8956

Add 3 files

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +1035 -19
prompts.txt +1 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Moy Cod2
-emoji: 🏢
-colorFrom: gray
-colorTo: blue
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: moy-cod2
+emoji: 🐳
+colorFrom: red
+colorTo: red
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,1035 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<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>

prompts.txt ADDED Viewed

	@@ -0,0 +1 @@

+ <!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>NAVI SYSTEMS | Премиальная автоэлектроника</title>  <script src="https://cdn.tailwindcss.com"></script>  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">  <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" defer></script> <style> :root{ --primary:#ff3b3b;--primary-dark:#e03535;--dark:#0f0f0f;--light:#fff; --card-bg:rgba(24,24,24,.7);--glow:0 0 12px #ff3b3b,0 0 24px rgba(255,59,59,.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,.05)} .btn-primary{background:var(--primary);color:#000;font-weight:600;transition:.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:.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 + decorative */ .hero-overlay{position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(255,59,59,.15)0%,rgba(15,15,15,.95)80%);z-index:-1} /* utility */ .hover-scale{transition:transform .3s}.hover-scale:hover{transform:scale(1.03)} /* fix timeline typo */ @media(max-width:768px){.car-1,.car-2,.car-3,.car-4{opacity:.15;width:280px;height:160px}} </style> </head> <body class="antialiased">  <div id="preloader"><div class="logo-pre"></div></div>  <div id="particles" class="particles"></div>  <section class="relative min-h-screen flex items-center justify-center overflow-hidden pt-16"> <div class="hero-overlay"></div> <div class="relative z-10 text-center px-4" data-aos="fade-up"> <h1 class="text-6xl font-extrabold text-glow mb-6"><span style="color:var(--primary)">NAVI</span> SYSTEMS</h1> <p class="text-xl text-gray-300 max-w-2xl mx-auto mb-10">Эксклюзивные решения для премиальных автомобилей. Технологии будущего — уже сегодня.</p> <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> </div> </section>  <section id="services" class="py-20 bg-black"> <div class="max-w-6xl mx-auto px-6"> <h2 class="text-4xl text-center font-extrabold mb-12 text-glow">Наши услуги</h2> <div class="grid md:grid-cols-3 gap-8"> <div class="bg-card p-8 rounded-xl hover-scale" data-aos="fade-up"> <i class="fas fa-language text-3xl text-red-500 mb-4"></i> <h3 class="text-xl font-bold mb-2">Русификация мультимедиа</h3> <p class="text-gray-400 text-sm">Полный перевод интерфейса, шаг FM, актуальные карты.</p> </div>  </div> </div> </section>   <script> /* AOS */ window.addEventListener('DOMContentLoaded',()=>AOS.init({once:true,duration:800,offset:120})); /* Preloader */ window.addEventListener('load',()=>{ const p=document.getElementById('preloader'); setTimeout(()=>{p.style.opacity='0';p.style.visibility='hidden';p.style.display='none'},500); }); /* Particles (simple dots) */ function createParticles(){ const wrap=document.getElementById('particles'); if(!wrap) return; const count=30, w=window.innerWidth, 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,.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(); /* Mobile menu */ document.getElementById('mobile-menu-button')?.addEventListener('click',()=>{ const m=document.getElementById('mobile-menu');m.classList.toggle('hidden');m.classList.toggle('active'); }); /* 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]}`:''}`; }); } </script> </body> </html>