Spaces:

Denzel1989
/

me-cod

Running

App Files Files Community

Denzel1989 commited on May 15, 2025

Commit

d7976a3

verified ·

1 Parent(s): bec8572

Add 3 files

Browse files

Files changed (3) hide show

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

README.md CHANGED Viewed

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

 ---
+title: me-cod
+emoji: 🐳
+colorFrom: blue
+colorTo: green
 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,671 @@
-<!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>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@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@next/dist/aos.css" rel="stylesheet"/>
+  <style>
+    /* Custom styles */
+    :root {
+      --primary: #ff3b3b;
+      --primary-dark: #e03535;
+      --dark: #0f0f0f;
+      --darker: #0a0a0a;
+      --light: #ffffff;
+      --gray: #888888;
+      --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-color: var(--dark);
+      color: var(--light);
+      overflow-x: hidden;
+    }
+    .text-glow {
+      text-shadow: var(--glow);
+    }
+    .bg-card {
+      background: var(--card-bg);
+      backdrop-filter: blur(12px);
+      border: 1px solid rgba(255, 255, 255, 0.1);
+    }
+    .btn-primary {
+      background: var(--primary);
+      color: #000;
+      font-weight: 600;
+      transition: all 0.3s ease;
+    }
+    .btn-primary:hover {
+      background: var(--primary-dark);
+      transform: translateY(-2px);
+      box-shadow: var(--glow);
+    }
+    .nav-link {
+      position: relative;
+    }
+    .nav-link::after {
+      content: '';
+      position: absolute;
+      bottom: -4px;
+      left: 0;
+      width: 0;
+      height: 2px;
+      background: var(--primary);
+      transition: width 0.3s ease;
+    }
+    .nav-link:hover::after {
+      width: 100%;
+    }
+    .feature-icon {
+      font-size: 2rem;
+      color: var(--primary);
+      margin-bottom: 1rem;
+    }
+    /* Preloader */
+    #preloader {
+      position: fixed;
+      inset: 0;
+      background: var(--dark);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      z-index: 9999;
+    }
+    .logo-pre {
+      width: 80px;
+      height: 80px;
+      border-radius: 50%;
+      border: 3px solid transparent;
+      border-top: 3px solid var(--primary);
+      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;
+      justify-content: center;
+      align-items: 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 gradient overlay */
+    .hero-overlay {
+      position: absolute;
+      inset: 0;
+      background: radial-gradient(circle at 50% 50%, rgba(255, 59, 59, 0.2) 0%, rgba(15, 15, 15, 0.9) 70%);
+      z-index: -1;
+    }
+    /* Floating animation */
+    @keyframes float {
+      0%, 100% { transform: translateY(0); }
+      50% { transform: translateY(-10px); }
+    }
+    .floating {
+      animation: float 4s ease-in-out infinite;
+    }
+    /* Pulse animation */
+    @keyframes pulse {
+      0%, 100% { opacity: 1; }
+      50% { opacity: 0.5; }
+    }
+    .pulse {
+      animation: pulse 2s infinite;
+    }
+    /* Custom scrollbar */
+    ::-webkit-scrollbar {
+      width: 8px;
+    }
+    ::-webkit-scrollbar-track {
+      background: var(--darker);
+    }
+    ::-webkit-scrollbar-thumb {
+      background: var(--primary);
+      border-radius: 4px;
+    }
+  </style>
+</head>
+<body class="antialiased">
+<!-- Preloader -->
+<div id="preloader">
+  <div class="logo-pre"></div>
+</div>
+<!-- Navigation -->
+<nav class="fixed w-full z-50 bg-black bg-opacity-80 backdrop-blur-md">
+  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+    <div class="flex items-center justify-between h-16">
+      <div class="flex items-center">
+        <div class="flex-shrink-0">
+          <span class="text-2xl font-bold">
+            <span class="text-red-500">NAVI</span>
+            <span class="text-white">SYSTEMS</span>
+          </span>
+        </div>
+      </div>
+      <div class="hidden md:block">
+        <div class="ml-10 flex items-baseline space-x-8">
+          <a href="#services" class="nav-link text-white hover:text-red-400 px-3 py-2 text-sm font-medium">Услуги</a>
+          <a href="#advantages" class="nav-link text-white hover:text-red-400 px-3 py-2 text-sm font-medium">Преимущества</a>
+          <a href="#steps" class="nav-link text-white hover:text-red-400 px-3 py-2 text-sm font-medium">Этапы</a>
+          <a href="#contact" class="nav-link text-white hover:text-red-400 px-3 py-2 text-sm font-medium">Контакты</a>
+          <a href="tel:+79181364222" class="ml-4 flex items-center text-red-400 hover:text-red-300">
+            <i class="fas fa-phone-alt mr-2"></i>
+            +7 918 136-42-22
+          </a>
+        </div>
+      </div>
+      <div class="md:hidden">
+        <button id="mobile-menu-button" class="text-gray-300 hover:text-white focus:outline-none">
+          <i class="fas fa-bars text-xl"></i>
+        </button>
+      </div>
+    </div>
+  </div>
+  <!-- Mobile menu -->
+  <div id="mobile-menu" class="hidden md:hidden bg-black bg-opacity-90 backdrop-blur-lg">
+    <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
+      <a href="#services" class="block px-3 py-2 text-base font-medium text-white hover:text-red-400">Услуги</a>
+      <a href="#advantages" class="block px-3 py-2 text-base font-medium text-white hover:text-red-400">Преимущества</a>
+      <a href="#steps" class="block px-3 py-2 text-base font-medium text-white hover:text-red-400">Этапы</a>
+      <a href="#contact" class="block px-3 py-2 text-base font-medium text-white hover:text-red-400">Контакты</a>
+      <a href="tel:+79181364222" class="block px-3 py-2 text-base font-medium text-red-400 hover:text-red-300">
+        <i class="fas fa-phone-alt mr-2"></i>
+        +7 918 136-42-22
+      </a>
+    </div>
+  </div>
+</nav>
+<!-- Hero Section -->
+<section class="relative min-h-screen flex items-center justify-center overflow-hidden pt-16">
+  <div class="hero-overlay"></div>
+  <div class="absolute inset-0 z-0">
+    <div class="absolute inset-0 bg-gradient-to-b from-black to-transparent opacity-90"></div>
+    <div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1492144534655-ae79c964c9d7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1280&q=80')] bg-cover bg-center opacity-20"></div>
+  </div>
+  <div class="relative z-10 px-4 sm:px-6 lg:px-8 py-20 text-center max-w-4xl mx-auto" data-aos="fade-up">
+    <h1 class="text-5xl md:text-6xl font-extrabold mb-6">
+      <span class="text-red-500 text-glow">NAVI</span>
+      <span class="text-white">SYSTEMS</span>
+    </h1>
+    <p class="text-lg md:text-xl text-gray-300 mb-10 max-w-2xl mx-auto">
+      Инновационные решения по автоэлектронике и навигации. Превратите свой автомобиль в технологичный центр на колесах.
+    </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 font-bold text-lg">
+        <i class="fas fa-tools mr-2"></i> Наши услуги
+      </a>
+      <a href="#contact" class="px-8 py-4 rounded-lg font-bold text-lg border-2 border-red-500 text-red-500 hover:bg-red-500 hover:text-black transition-all">
+        <i class="fas fa-phone-alt mr-2"></i> Консультация
+      </a>
+    </div>
+  </div>
+  <div class="absolute bottom-10 left-0 right-0 flex justify-center z-10">
+    <a href="#services" class="text-white animate-bounce">
+      <i class="fas fa-chevron-down text-2xl"></i>
+    </a>
+  </div>
+</section>
+<!-- Services Section -->
+<section id="services" class="py-20 bg-gradient-to-b from-black to-gray-900">
+  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+    <div class="text-center mb-16" data-aos="fade-up">
+      <h2 class="text-3xl md:text-4xl font-extrabold mb-4 text-white">
+        <span class="text-red-500">Наши</span> услуги
+      </h2>
+      <p class="text-lg text-gray-400 max-w-3xl mx-auto">
+        Полный спектр услуг по модернизации и обслуживанию автомобильной электроники
+      </p>
+    </div>
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+      <!-- Service 1 -->
+      <div class="bg-card rounded-xl p-8 transition-all hover:shadow-lg hover:shadow-red-500/20" data-aos="fade-up" data-aos-delay="100">
+        <div class="feature-icon">
+          <i class="fas fa-language"></i>
+        </div>
+        <h3 class="text-xl font-bold text-white mb-3">Русификация мультимедиа</h3>
+        <p class="text-gray-400">
+          Полный перевод интерфейса, адаптация радиочастот для российского рынка, обновление карт для Европы и СНГ.
+        </p>
+      </div>
+      <!-- Service 2 -->
+      <div class="bg-card rounded-xl p-8 transition-all hover:shadow-lg hover:shadow-red-500/20" data-aos="fade-up" data-aos-delay="200">
+        <div class="feature-icon">
+          <i class="fas fa-map-marked-alt"></i>
+        </div>
+        <h3 class="text-xl font-bold text-white mb-3">Навигация & карты</h3>
+        <p class="text-gray-400">
+          Установка NAV-блоков, актуальные обновления картографических данных, интеграция онлайн-сервисов трафика.
+        </p>
+      </div>
+      <!-- Service 3 -->
+      <div class="bg-card rounded-xl p-8 transition-all hover:shadow-lg hover:shadow-red-500/20" data-aos="fade-up" data-aos-delay="300">
+        <div class="feature-icon">
+          <i class="fas fa-camera"></i>
+        </div>
+        <h3 class="text-xl font-bold text-white mb-3">Камеры 360° / парктроники</h3>
+        <p class="text-gray-400">
+          Системы кругового обзора 5D, интеллектуальные парктроники с цветовой индикацией, штатная интеграция без повреждений.
+        </p>
+      </div>
+      <!-- Service 4 -->
+      <div class="bg-card rounded-xl p-8 transition-all hover:shadow-lg hover:shadow-red-500/20" data-aos="fade-up" data-aos-delay="100">
+        <div class="feature-icon">
+          <i class="fas fa-volume-up"></i>
+        </div>
+        <h3 class="text-xl font-bold text-white mb-3">Аудио-апгрейд</h3>
+        <p class="text-gray-400">
+          Профессиональные DSP-процессоры, Hi-Fi акустические системы, компактные сабвуферы скрытого монтажа.
+        </p>
+      </div>
+      <!-- Service 5 -->
+      <div class="bg-card rounded-xl p-8 transition-all hover:shadow-lg hover:shadow-red-500/20" data-aos="fade-up" data-aos-delay="200">
+        <div class="feature-icon">
+          <i class="fas fa-code"></i>
+        </div>
+        <h3 class="text-xl font-bold text-white mb-3">Диагностика & кодирование</h3>
+        <p class="text-gray-400">
+          Профессиональное оборудование для диагностики и программирования, адаптация под российские условия (мили → км, °F → °C).
+        </p>
+      </div>
+      <!-- Service 6 -->
+      <div class="bg-card rounded-xl p-8 transition-all hover:shadow-lg hover:shadow-red-500/20" data-aos="fade-up" data-aos-delay="300">
+        <div class="feature-icon">
+          <i class="fas fa-microchip"></i>
+        </div>
+        <h3 class="text-xl font-bold text-white mb-3">ГУ NAVI SYSTEMS</h3>
+        <p class="text-gray-400">
+          Мультимедийные системы на Android с поддержкой CarPlay, полная интеграция с CAN-шиной автомобиля, голосовое управление.
+        </p>
+      </div>
+    </div>
+  </div>
+</section>
+<!-- Advantages Section -->
+<section id="advantages" class="py-20 bg-gray-900">
+  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+    <div class="text-center mb-16" data-aos="fade-up">
+      <h2 class="text-3xl md:text-4xl font-extrabold mb-4 text-white">
+        Почему <span class="text-red-500">выбирают нас</span>
+      </h2>
+      <p class="text-lg text-gray-400 max-w-3xl mx-auto">
+        Профессионализм, качество и индивидуальный подход к каждому клиенту
+      </p>
+    </div>
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+      <!-- Advantage 1 -->
+      <div class="bg-card rounded-xl p-8 text-center" data-aos="fade-up" data-aos-delay="100">
+        <div class="w-20 h-20 bg-red-500 rounded-full flex items-center justify-center mx-auto mb-6">
+          <i class="fas fa-award text-2xl text-white"></i>
+        </div>
+        <h3 class="text-xl font-bold text-white mb-3">10+ лет опыта</h3>
+        <p class="text-gray-400">
+          С 2013 года мы реализовали более 5,000 успешных проектов по модернизации автомобилей
+        </p>
+      </div>
+      <!-- Advantage 2 -->
+      <div class="bg-card rounded-xl p-8 text-center" data-aos="fade-up" data-aos-delay="200">
+        <div class="w-20 h-20 bg-red-500 rounded-full flex items-center justify-center mx-auto mb-6">
+          <i class="fas fa-shield-alt text-2xl text-white"></i>
+        </div>
+        <h3 class="text-xl font-bold text-white mb-3">Гарантия 12 месяцев</h3>
+        <p class="text-gray-400">
+          На все оборудование и работы предоставляется расширенная гарантия сроком на 1 год
+        </p>
+      </div>
+      <!-- Advantage 3 -->
+      <div class="bg-card rounded-xl p-8 text-center" data-aos="fade-up" data-aos-delay="300">
+        <div class="w-20 h-20 bg-red-500 rounded-full flex items-center justify-center mx-auto mb-6">
+          <i class="fas fa-check-circle text-2xl text-white"></i>
+        </div>
+        <h3 class="text-xl font-bold text-white mb-3">Проверенные решения</h3>
+        <p class="text-gray-400">
+          Мы используем только проверенное оборудование, прошедшее наши стендовые испытания
+        </p>
+      </div>
+    </div>
+    <div class="mt-16 grid grid-cols-1 md:grid-cols-2 gap-8">
+      <div class="bg-gradient-to-br from-gray-800 to-gray-900 rounded-xl p-8" data-aos="fade-right">
+        <h3 class="text-2xl font-bold text-white mb-6">Наши клиенты</h3>
+        <div class="space-y-4">
+          <div class="flex items-center">
+            <div class="w-12 h-12 bg-red-500 rounded-full flex items-center justify-center mr-4">
+              <i class="fas fa-car text-white"></i>
+            </div>
+            <div>
+              <h4 class="font-bold text-white">Владельцы премиальных авто</h4>
+              <p class="text-gray-400 text-sm">Mercedes, BMW, Audi, Lexus, Porsche</p>
+            </div>
+          </div>
+          <div class="flex items-center">
+            <div class="w-12 h-12 bg-red-500 rounded-full flex items-center justify-center mr-4">
+              <i class="fas fa-truck-pickup text-white"></i>
+            </div>
+            <div>
+              <h4 class="font-bold text-white">Коммерческий транспорт</h4>
+              <p class="text-gray-400 text-sm">Грузовики, автобусы, спецтехника</p>
+            </div>
+          </div>
+          <div class="flex items-center">
+            <div class="w-12 h-12 bg-red-500 rounded-full flex items-center justify-center mr-4">
+              <i class="fas fa-users text-white"></i>
+            </div>
+            <div>
+              <h4 class="font-bold text-white">Автопарки компаний</h4>
+              <p class="text-gray-400 text-sm">Корпоративные решения для бизнеса</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="bg-gradient-to-br from-gray-800 to-gray-900 rounded-xl p-8" data-aos="fade-left">
+        <h3 class="text-2xl font-bold text-white mb-6">Наши партнеры</h3>
+        <div class="grid grid-cols-2 gap-4">
+          <div class="bg-gray-800 rounded-lg p-4 flex items-center justify-center h-24">
+            <img src="https://via.placeholder.com/150x60?text=Pioneer" alt="Pioneer" class="h-12 object-contain">
+          </div>
+          <div class="bg-gray-800 rounded-lg p-4 flex items-center justify-center h-24">
+            <img src="https://via.placeholder.com/150x60?text=Alpine" alt="Alpine" class="h-12 object-contain">
+          </div>
+          <div class="bg-gray-800 rounded-lg p-4 flex items-center justify-center h-24">
+            <img src="https://via.placeholder.com/150x60?text=Kenwood" alt="Kenwood" class="h-12 object-contain">
+          </div>
+          <div class="bg-gray-800 rounded-lg p-4 flex items-center justify-center h-24">
+            <img src="https://via.placeholder.com/150x60?text=Here+Maps" alt="Here Maps" class="h-12 object-contain">
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+<!-- Steps Section -->
+<section id="steps" class="py-20 bg-black">
+  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+    <div class="text-center mb-16" data-aos="fade-up">
+      <h2 class="text-3xl md:text-4xl font-extrabold mb-4 text-white">
+        <span class="text-red-500">4 шага</span> к идеальному результату
+      </h2>
+      <p class="text-lg text-gray-400 max-w-3xl mx-auto">
+        Наш процесс работы обеспечивает максимальное качество и удовлетворенность клиента
+      </p>
+    </div>
+    <div class="relative">
+      <!-- Timeline line -->
+      <div class="hidden md:block absolute left-1/2 h-full w-1 bg-gray-800 transform -translate-x-1/2"></div>
+      <!-- Step 1 -->
+      <div class="mb-16 flex flex-col md:flex-row items-center" data-aos="fade-up">
+        <div class="md:w-1/2 md:pr-16 mb-8 md:mb-0 md:text-right">
+          <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-red-500 text-white text-xl font-bold mb-4">
+            1
+          </div>
+          <h3 class="text-2xl font-bold text-white mb-2">Консультация и подбор</h3>
+          <p class="text-gray-400">
+            Анализ вашего автомобиля и потребностей. Подбор оптимального решения с учетом бюджета и технических ��озможностей.
+          </p>
+        </div>
+        <div class="md:w-1/2">
+          <div class="bg-gradient-to-br from-gray-800 to-gray-900 rounded-xl p-6 h-full">
+            <img src="https://images.unsplash.com/photo-1601362840469-51e4d8d58785?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" alt="Consultation" class="rounded-lg w-full h-auto">
+          </div>
+        </div>
+      </div>
+      <!-- Step 2 -->
+      <div class="mb-16 flex flex-col md:flex-row items-center" data-aos="fade-up">
+        <div class="md:w-1/2 order-1 md:order-none md:pl-16 mb-8 md:mb-0">
+          <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-red-500 text-white text-xl font-bold mb-4">
+            2
+          </div>
+          <h3 class="text-2xl font-bold text-white mb-2">Профессиональная установка</h3>
+          <p class="text-gray-400">
+            Монтаж оборудования нашими сертифицированными специалистами с сохранением заводской гарантии и оригинального дизайна.
+          </p>
+        </div>
+        <div class="md:w-1/2 order-none md:order-1">
+          <div class="bg-gradient-to-br from-gray-800 to-gray-900 rounded-xl p-6 h-full">
+            <img src="https://images.unsplash.com/photo-1547036967-23d11aacaee0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" alt="Installation" class="rounded-lg w-full h-auto">
+          </div>
+        </div>
+      </div>
+      <!-- Step 3 -->
+      <div class="mb-16 flex flex-col md:flex-row items-center" data-aos="fade-up">
+        <div class="md:w-1/2 md:pr-16 mb-8 md:mb-0 md:text-right">
+          <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-red-500 text-white text-xl font-bold mb-4">
+            3
+          </div>
+          <h3 class="text-2xl font-bold text-white mb-2">Тестирование и обучение</h3>
+          <p class="text-gray-400">
+            Полная проверка всех систем. Подробный инструктаж по использованию нового оборудования и его возможностям.
+          </p>
+        </div>
+        <div class="md:w-1/2">
+          <div class="bg-gradient-to-br from-gray-800 to-gray-900 rounded-xl p-6 h-full">
+            <img src="https://images.unsplash.com/photo-1555215695-3004980ad54e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" alt="Testing" class="rounded-lg w-full h-auto">
+          </div>
+        </div>
+      </div>
+      <!-- Step 4 -->
+      <div class="flex flex-col md:flex-row items-center" data-aos="fade-up">
+        <div class="md:w-1/2 order-1 md:order-none md:pl-16 mb-8 md:mb-0">
+          <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-red-500 text-white text-xl font-bold mb-4">
+            4
+          </div>
+          <h3 class="text-2xl font-bold text-white mb-2">Техническая поддержка</h3>
+          <p class="text-gray-400">
+            Бесплатные консультации, обновления программного обеспечения и помощь в решении любых вопросов 24/7.
+          </p>
+        </div>
+        <div class="md:w-1/2 order-none md:order-1">
+          <div class="bg-gradient-to-br from-gray-800 to-gray-900 rounded-xl p-6 h-full">
+            <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" alt="Support" class="rounded-lg w-full h-auto">
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+<!-- Contact Section -->
+<section id="contact" class="py-20 bg-gradient-to-b from-gray-900 to-black">
+  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+    <div class="text-center mb-16" data-aos="fade-up">
+      <h2 class="text-3xl md:text-4xl font-extrabold mb-4 text-white">
+        <span class="text-red-500">Свяжитесь</span> с нами
+      </h2>
+      <p class="text-lg text-gray-400 max-w-3xl mx-auto">
+        Оставьте заявку и мы подберем для вас оптимальное решение
+      </p>
+    </div>
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
+      <div class="bg-card rounded-xl p-8" data-aos="fade-right">
+        <h3 class="text-2xl font-bold text-white mb-6">Контактная информация</h3>
+        <div class="space-y-6">
+          <div class="flex items-start">
+            <div class="flex-shrink-0">
+              <div class="w-12 h-12 bg-red-500 rounded-full flex items-center justify-center">
+                <i class="fas fa-map-marker-alt text-white"></i>
+              </div>
+            </div>
+            <div class="ml-4">
+              <h4 class="text-lg font-semibold text-white">Адрес</h4>
+              <p class="text-gray-400">ул. 1 Мая 493/22, Краснодар</p>
+            </div>
+          </div>
+          <div class="flex items-start">
+            <div class="flex-shrink-0">
+              <div class="w-12 h-12 bg-red-500 rounded-full flex items-center justify-center">
+                <i class="fas fa-phone-alt text-white"></i>
+              </div>
+            </div>
+            <div class="ml-4">
+              <h4 class="text-lg font-semibold text-white">Телефон</h4>
+              <p class="text-gray-400">
+                <a href="tel:+79181364222" class="hover:text-red-400 transition-colors">+7 918 136-42-22</a>
+              </p>
+            </div>
+          </div>
+          <div class="flex items-start">
+            <div class="flex-shrink-0">
+              <div class="w-12 h-12 bg-red-500 rounded-full flex items-center justify-center">
+                <i class="fas fa-envelope text-white"></i>
+              </div>
+            </div>
+            <div class="ml-4">
+              <h4 class="text-lg font-semibold text-white">Email</h4>
+              <p class="text-gray-400">
+                <a href="mailto:info@navisystems.ru" class="hover:text-red-400 transition-colors">info@navisystems.ru</a>
+              </p>
+            </div>
+          </div>
+          <div class="flex items-start">
+            <div class="flex-shrink-0">
+              <div class="w-12 h-12 bg-red-500 rounded-full flex items-center justify-center">
+                <i class="fas fa-clock text-white"></i>
+              </div>
+            </div>
+            <div class="ml-4">
+              <h4 class="text-lg font-semibold text-white">Режим работы</h4>
+              <p class="text-gray-400">Пн-Пт: 9:00 - 19:00<br>Сб: 10:00 - 17:00<br>Вс: выходной</p>
+            </div>
+          </div>
+        </div>
+        <div class="mt-10">
+          <h4 class="text-lg font-semibold text-white mb-4">Мы в соцсетях</h4>
+          <div class="flex space-x-4">
+            <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-red-500 transition-colors">
+              <i class="fab fa-vk text-white"></i>
+            </a>
+            <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-red-500 transition-colors">
+              <i class="fab fa-telegram text-white"></i>
+            </a>
+            <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-red-500 transition-colors">
+              <i class="fab fa-instagram text-white"></i>
+            </a>
+            <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-red-500 transition-colors">
+              <i class="fab fa-youtube text-white"></i>
+            </a>
+          </div>
+        </div>
+      </div>
+      <div class="bg-card rounded-xl p-8" data-aos="fade-left">
+        <h3 class="text-2xl font-bold text-white mb-6">Форма обратной связи</h3>
+        <form id="contact-form" class="space-y-6">
+          <div>
+            <label for="name" class="block text-sm font-medium text-gray-300 mb-1">Ваше имя*</label>
+            <input type="text" id="name" name="name" required class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500 text-white placeholder-gray-500 transition-all">
+          </div>
+          <div>
+            <label for="phone" class="block text-sm font-medium text-gray-300 mb-1">Телефон*</label>
+            <input type="tel" id="phone" name="phone" required class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500 text-white placeholder-gray-500 transition-all" placeholder="+7 (___) ___-__-__">
+          </div>
+          <div>
+            <label for="car" class="block text-sm font-medium text-gray-300 mb-1">Марка и модель авто</label>
+            <input type="text" id="car" name="car" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500 text-white placeholder-gray-500 transition-all">
+          </div>
+          <div>
+            <label for="service" class="block text-sm font-medium text-gray-300 mb-1">Интересующая услуга</label>
+            <select id="service" name="service" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500 text-white placeholder-gray-500 transition-all">
+              <option value="">Выберите услугу</option>
+              <option value="russian">Русификация мультимедиа</option>
+              <option value="navi">Навигация и карты</option>
+              <option value="cameras">Камеры 360° / парктроники</option>
+              <option value="audio">Аудио-апгрейд</option>
+              <option value="coding">Диагностика и кодирование</option>
+              <option value="headunit">ГУ NAVI SYSTEMS</option>
+            </select>
+          </div>
+          <div>
+            <label for="message" class="block text-sm font-medium text-gray-300 mb-1">Сообщение</label>
+            <textarea id="message" name="message" rows="4" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500 text-white placeholder-gray-500 transition-all"></textarea>
+          </div>
+          <div class="flex items-center">
+            <input type="checkbox" id="consent" name="consent" required class="w-4 h-4 text-red-600 bg-gray-700 border-gray-600 rounded focus:ring-red-500">
+            <label for="consent" class="ml-2 text-sm text-gray-300">
+              Я согласен на обработку персональных данных
+            </label>
+          </div>
+          <button type="submit" class="w-full btn-primary py-4 rounded-lg font-bold text-lg">
+            <i class="fas fa-paper-plane mr-2"></i> Отправить заявку
+          </button>
+        </form>
+      </div>
+    </div>
+  </div>
+</section>
+<!-- Map Section -->
+<div class="h-96 w-full bg-gray-900 overflow-hidden">
+  <iframe src="https://yandex.ru/map-widget/v1/?um=constructor%3A6d5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1e5e5c4b5c1c6c1
+</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>  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap" rel="stylesheet" />  <link href="https://unpkg.com/aos@next/dist/aos.css" rel="stylesheet"/> <style> /* ======= ПЕРЕМЕННЫЕ ======= */ :root{ --bg:#0f0f0f; --card:#181818b3; /* glass-card α */ --red:#ff3b3b; --white:#ffffff; --glow:0 0 12px #ff3b3b,0 0 24px #ff3b3b66; } /* ======= ОБНУЛЕНИЕ ======= */ *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ font-family:"Inter",sans-serif; background:var(--bg); color:var(--white); line-height:1.6; overflow-x:hidden; } h1,h2,h3{font-weight:800} a{color:var(--red);text-decoration:none} button,input,textarea{font-family:inherit} /* ======= ПРЕЛОАДЕР ======= */ #preloader{ position:fixed;inset:0;background:var(--bg);display:flex; justify-content:center;align-items:center;z-index:9999; } .logo-pre{ width:120px;height:120px;border-radius:50%; border:3px solid transparent;border-top:3px solid var(--red); animation:spin 1.4s linear infinite,glow 2s ease-in-out infinite alternate; position:relative; } .logo-pre::after{ content:"AI";position:absolute;inset:0;display:flex; justify-content:center;align-items:center;font-size:2rem; color:var(--white);font-weight:800; } @keyframes spin{to{transform:rotate(360deg)}} @keyframes glow{to{filter:drop-shadow(var(--glow))}} /* ======= BACKGROUND-PARTICLES ======= */ #stars{ position:fixed;top:0;left:0;width:100%;height:100%;z-index:-2; background:#0f0f0f; } /* ======= ТОП-БАР ======= */ .topbar{ position:fixed;top:0;left:0;width:100%;padding:8px 20px; backdrop-filter:blur(10px);background:rgba(15,15,15,.6); display:flex;justify-content:flex-end;z-index:50 } .topbar a{color:var(--red);font-weight:600} /* ======= HERO ======= */ .hero{ min-height:100vh;display:flex;flex-direction:column; align-items:center;justify-content:center;text-align:center; padding:120px 20px 80px;position:relative;overflow:hidden } .hero h1{ font-size:3.4rem;letter-spacing:1px;margin-bottom:14px; text-shadow:var(--glow) } .hero .brand .navi{color:var(--red)} .hero .brand .systems{color:var(--white)} .hero p{max-width:650px;margin-bottom:46px} /* ======= КНОПКИ ======= */ .btn{ display:inline-block;padding:15px 38px;border-radius:10px; background:var(--red);color:#000;font-weight:600;letter-spacing:.5px; box-shadow:0 0 10px #ff3b3b80;transition:transform .25s,box-shadow .25s } .btn:hover{transform:scale(1.07);box-shadow:var(--glow)} /* ======= GLASS-КАРТОЧКИ ======= */ .grid{display:grid;gap:28px;margin-top:40px} @media(min-width:768px){.grid{grid-template-columns:repeat(3,1fr)}} .card{ background:var(--card);border-radius:14px;padding:28px; backdrop-filter:blur(12px);border:1px solid #ffffff1a; transition:transform .4s,box-shadow .4s } .card:hover{transform:translateY(-8px);box-shadow:var(--glow)} /* ======= STEPS ======= */ .steps{display:grid;gap:22px;margin-top:28px} .steps div{background:var(--card);padding:20px;border-radius:8px;border-left:6px solid var(--red)} /* ======= CONTACT ======= */ .contact-box{ background:var(--card);backdrop-filter:blur(10px); border-radius:14px;padding:34px;display:flex;flex-direction:column;gap:18px } .contact-box input,.contact-box textarea{ background:#272727;border:none;border-radius:8px;padding:14px;color:var(--white) } /* ======= FOOTER ======= */ footer{ background:#161616;text-align:center;padding:32px 15px; font-size:.9rem;color:#888 } footer a{color:var(--red)} /* SMALL UTILITIES */ .section{padding:90px 20px;max-width:1100px;margin:auto} h2.section-title{text-align:center;font-size:2.2rem;margin-bottom:28px;text-shadow:0 0 6px #ff3b3b55} </style> </head> <body>  <div id="preloader"><div class="logo-pre"></div></div>  <canvas id="stars"></canvas>  <div class="topbar"> <a href="tel:+79181364222">📞 +7 918 136-42-22</a> </div>  <header class="hero"> <h1 class="brand" data-aos="zoom-in" data-aos-duration="1200"> <span class="navi">NAVI</span> <span class="systems">SYSTEMS</span> </h1> <p data-aos="fade-up" data-aos-delay="200"> Инновационные решения по автоэлектронике и навигации.<br> Адрес: <strong>ул. 1 Мая 493/22</strong> — звоните <a href="tel:+79181364222">+7 918 136-42-22</a> </p> <a href="#services" class="btn" data-aos="fade-up" data-aos-delay="400">Посмотреть услуги</a> </header>  <section id="services" class="section" data-aos="fade-up"> <h2 class="section-title">Наши сервиса</h2> <div class="grid"> <div class="card"><h3>Русификация мультимедиа</h3><p>Перевод интерфейса, шаг FM, карты для Европы и СНГ.</p></div> <div class="card"><h3>Навигация & карты</h3><p>Установка NAV-блоков, актуальные обновления, онлайн-трафик.</p></div> <div class="card"><h3>Камеры 360° / парктроники</h3><p>5D-обзор, помощь при парковке, штатная интеграция.</p></div> <div class="card"><h3>Аудио-апгрейд</h3><p>DSP, hi-fi акустика, невидимые сабвуферы.</p></div> <div class="card"><h3>Диагностика & кодирование</h3><p>Оборудование pro-уровня, миля → км, °F → °C.</p></div> <div class="card"><h3>ГУ NAVI SYSTEMS</h3><p>Android / CarPlay, полная поддержка CAN-шины.</p></div> </div> </section>  <section class="section" data-aos="fade-up"> <h2 class="section-title">Почему мы</h2> <div class="grid"> <div class="card"><h3>10+ лет на рынке</h3><p>С 2013 года — более 5 000 проектов.</p></div> <div class="card"><h3>Гарантия 12 мес.</h3><p>На оборудование и установку.</p></div> <div class="card"><h3>Только проверенные бренды</h3><p>Каждая позиция проходит наши стенд-тесты.</p></div> </div> </section>  <section class="section" data-aos="fade-up"> <h2 class="section-title">4 шага к результату</h2> <div class="steps"> <div><strong>1. Подбор</strong> — решение под вашу марку и комплектацию.</div> <div><strong>2. Установка</strong> — монтаж без потери дилерской гарантии.</div> <div><strong>3. Проверка</strong> — тест, обучение владельца.</div> <div><strong>4. Поддержка</strong> — обновления и помощь 24/7.</div> </div> </section>  <section id="contact" class="section" data-aos="fade-up"> <h2 class="section-title">Быстрая заявка</h2> <form class="contact-box" onsubmit="tgLead(event)"> <input id="name" placeholder="Ваше имя" required/> <input id="phone" placeholder="Телефон / Telegram" value="+7 918 136-42-22"/> <textarea id="msg" rows="4" placeholder="Что интересует?"></textarea> <button type="submit" class="btn">Отправить</button> </form> <p style="text-align:center;margin-top:22px;">или пишите в TG <a href="https://t.me/Denis_2024" target="_blank">@Denis_2024</a></p> </section>  <footer> © 2025 <span class="brand"><span class="navi">NAVI</span> <span class="systems">SYSTEMS</span></span> | ул. 1 Мая 493/22 | +7 918 136-42-22 </footer>  <script src="https://unpkg.com/aos@next/dist/aos.js"></script> <script> AOS.init({once:true,duration:800}); /* --- TG lead --- */ function tgLead(e){ e.preventDefault(); const n=document.getElementById('name').value.trim(); const p=document.getElementById('phone').value.trim(); const m=document.getElementById('msg').value.trim(); const text=encodeURIComponent( `Заявка с сайта NAVI SYSTEMS:%0AИмя: ${n}%0AКонтакт: ${p}%0AСообщение: ${m}` ); window.open(`https://t.me/share/url?url=&text=${text}`,'_blank'); e.target.reset();alert('Спасибо! Мы свяжемся в ближайшее время.'); } /* --- Preloader fade-out --- */ window.addEventListener('load',()=>{document.getElementById('preloader').style.display='none'}); /* --- Simple star-particles --- */ const canvas=document.getElementById('stars'),ctx=canvas.getContext('2d'); let w,h,stars=[]; function resize(){w=canvas.width=window.innerWidth;h=canvas.height=window.innerHeight} window.onresize=resize;resize(); for(let i=0;i<120;i++){ stars.push({x:Math.random()*w,y:Math.random()*h,r:Math.random()*1.2+0.2,dx:(Math.random()-.5)*0.3,dy:(Math.random()-.5)*0.3}); } function draw(){ ctx.clearRect(0,0,w,h); ctx.fillStyle="#ffffff22"; stars.forEach(s=>{ s.x+=s.dx;s.y+=s.dy; if(s.x<0||s.x>w)s.dx*=-1;if(s.y<0||s.y>h)s.dy*=-1; ctx.beginPath();ctx.arc(s.x,s.y,s.r,0,Math.PI*2);ctx.fill(); }); requestAnimationFrame(draw); }draw(); </script> </body> </html> чат отредактируй код под свои возможности и напиши сайт.