Spaces:

Denzel1989
/

me-cod

Running

App Files Files Community

Denzel1989 commited on May 15, 2025

Commit

8b7f0a7

verified ·

1 Parent(s): d7976a3

Add 2 files

Browse files

Files changed (2) hide show

index.html +165 -217
prompts.txt +2 -1

index.html CHANGED Viewed

@@ -1,16 +1,15 @@
 <!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;
@@ -52,32 +51,6 @@
       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;
@@ -118,7 +91,6 @@
       to { filter: drop-shadow(var(--glow)); }
     }
-    /* Hero gradient overlay */
     .hero-overlay {
       position: absolute;
       inset: 0;
@@ -126,38 +98,54 @@
       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>
@@ -168,6 +156,9 @@
   <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">
@@ -220,7 +211,6 @@
   <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">
@@ -376,59 +366,6 @@
         </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>
@@ -444,80 +381,41 @@
       </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>
@@ -592,24 +490,6 @@
             </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">
@@ -626,36 +506,11 @@
             <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>
@@ -665,7 +520,100 @@
   </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>

 <!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>
     :root {
       --primary: #ff3b3b;
       --primary-dark: #e03535;
       box-shadow: var(--glow);
     }
     #preloader {
       position: fixed;
       inset: 0;
       to { filter: drop-shadow(var(--glow)); }
     }
     .hero-overlay {
       position: absolute;
       inset: 0;
       z-index: -1;
     }
+    .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;
     }
+    /* Упрощенная версия звездного фона */
+    #stars {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: -1;
+      background: #0f0f0f;
+      overflow: hidden;
     }
+    .star {
+      position: absolute;
+      background: white;
+      border-radius: 50%;
+      animation: twinkle var(--duration) infinite ease-in-out;
+      opacity: 0;
     }
+    @keyframes twinkle {
+      0%, 100% { opacity: 0; }
+      50% { opacity: var(--opacity); }
     }
   </style>
 </head>
   <div class="logo-pre"></div>
 </div>
+<!-- Star Background -->
+<div id="stars"></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="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>
   <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">
         </p>
       </div>
     </div>
   </div>
 </section>
       </p>
     </div>
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
       <!-- Step 1 -->
+      <div class="bg-card rounded-xl p-6" data-aos="fade-up" data-aos-delay="100">
+        <div class="text-red-500 text-3xl font-bold mb-4">1</div>
+        <h3 class="text-xl font-bold text-white mb-3">Консультация</h3>
+        <p class="text-gray-400">
+          Анализ вашего автомобиля и потребностей. Подбор оптимального решения.
+        </p>
       </div>
       <!-- Step 2 -->
+      <div class="bg-card rounded-xl p-6" data-aos="fade-up" data-aos-delay="200">
+        <div class="text-red-500 text-3xl font-bold mb-4">2</div>
+        <h3 class="text-xl font-bold text-white mb-3">Установка</h3>
+        <p class="text-gray-400">
+          Монтаж оборудования сертифицированными специалистами с сохранением гарантии.
+        </p>
       </div>
       <!-- Step 3 -->
+      <div class="bg-card rounded-xl p-6" data-aos="fade-up" data-aos-delay="300">
+        <div class="text-red-500 text-3xl font-bold mb-4">3</div>
+        <h3 class="text-xl font-bold text-white mb-3">Тестирование</h3>
+        <p class="text-gray-400">
+          Полная проверка всех систем. Подробный инструктаж по использованию.
+        </p>
       </div>
       <!-- Step 4 -->
+      <div class="bg-card rounded-xl p-6" data-aos="fade-up" data-aos-delay="400">
+        <div class="text-red-500 text-3xl font-bold mb-4">4</div>
+        <h3 class="text-xl font-bold text-white mb-3">Поддержка</h3>
+        <p class="text-gray-400">
+          Бесплатные консультации и обновления ПО. Помощь в решении вопросов.
+        </p>
       </div>
     </div>
   </div>
             </div>
           </div>
         </div>
       </div>
       <div class="bg-card rounded-xl p-8" data-aos="fade-left">
             <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="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>
           <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>
   </div>
 </section>
+<!-- Footer -->
+<footer class="bg-black py-12">
+  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+    <div class="flex flex-col md:flex-row justify-between items-center">
+      <div class="mb-6 md:mb-0">
+        <span class="text-2xl font-bold">
+          <span class="text-red-500">NAVI</span>
+          <span class="text-white">SYSTEMS</span>
+        </span>
+        <p class="text-gray-500 mt-2">Автоэлектроника будущего</p>
+      </div>
+      <div class="flex space-x-6">
+        <a href="#" class="text-gray-400 hover:text-red-500 transition-colors">
+          <i class="fab fa-vk text-xl"></i>
+        </a>
+        <a href="#" class="text-gray-400 hover:text-red-500 transition-colors">
+          <i class="fab fa-telegram text-xl"></i>
+        </a>
+        <a href="#" class="text-gray-400 hover:text-red-500 transition-colors">
+          <i class="fab fa-instagram text-xl"></i>
+        </a>
+      </div>
+    </div>
+    <div class="border-t border-gray-800 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center">
+      <p class="text-gray-500 text-sm mb-4 md:mb-0">
+        © 2023 NAVI SYSTEMS. Все права защищены.
+      </p>
+      <a href="tel:+79181364222" class="text-gray-400 hover:text-red-500 transition-colors">
+        <i class="fas fa-phone-alt mr-2"></i> +7 918 136-42-22
+      </a>
+    </div>
+  </div>
+</footer>
+<!-- Scripts -->
+<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
+<script>
+  // Initialize AOS
+  AOS.init({
+    once: true,
+    duration: 800
+  });
+  // Mobile menu toggle
+  document.getElementById('mobile-menu-button').addEventListener('click', function() {
+    document.getElementById('mobile-menu').classList.toggle('hidden');
+  });
+  // Preloader
+  window.addEventListener('load', function() {
+    setTimeout(function() {
+      document.getElementById('preloader').style.opacity = '0';
+      document.getElementById('preloader').style.visibility = 'hidden';
+    }, 500);
+  });
+  // Simple star background
+  function createStars() {
+    const starsContainer = document.getElementById('stars');
+    const starsCount = 100;
+    for (let i = 0; i < starsCount; i++) {
+      const star = document.createElement('div');
+      star.className = 'star';
+      // Random properties
+      const size = Math.random() * 3;
+      const posX = Math.random() * 100;
+      const posY = Math.random() * 100;
+      const opacity = Math.random() * 0.8 + 0.2;
+      const duration = Math.random() * 3 + 2;
+      star.style.width = `${size}px`;
+      star.style.height = `${size}px`;
+      star.style.left = `${posX}%`;
+      star.style.top = `${posY}%`;
+      star.style.setProperty('--opacity', opacity);
+      star.style.setProperty('--duration', `${duration}s`);
+      starsContainer.appendChild(star);
+    }
+  }
+  // Form submission
+  document.getElementById('contact-form').addEventListener('submit', function(e) {
+    e.preventDefault();
+    alert('Спасибо за вашу заявку! Мы свяжемся с вами в ближайшее время.');
+    this.reset();
+  });
+  // Initialize stars
+  createStars();
+</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/me-cod" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>

prompts.txt CHANGED Viewed

	@@ -1 +1,2 @@
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> <!-- Google-шрифт --> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap" rel="stylesheet" /> <!-- AOS (анимация появления) --> <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> <!-- === PRELOADER === --> <div id="preloader"><div class="logo-pre"></div></div> <!-- === STAR-PARTICLES CANVAS === --> <canvas id="stars"></canvas> <!-- === TOP-BAR TEL === --> <div class="topbar"> <a href="tel:+79181364222">📞 +7 918 136-42-22</a> </div> <!-- === HERO === --> <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> <!-- === CONTACT === --> <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 === --> <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> <!-- ===== SCRIPTS ===== --> <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> чат отредактируй код под свои возможности и напиши сайт.


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> <!-- Google-шрифт --> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap" rel="stylesheet" /> <!-- AOS (анимация появления) --> <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> <!-- === PRELOADER === --> <div id="preloader"><div class="logo-pre"></div></div> <!-- === STAR-PARTICLES CANVAS === --> <canvas id="stars"></canvas> <!-- === TOP-BAR TEL === --> <div class="topbar"> <a href="tel:+79181364222">📞 +7 918 136-42-22</a> </div> <!-- === HERO === --> <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> <!-- === CONTACT === --> <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 === --> <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> <!-- ===== SCRIPTS ===== --> <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> чат отредактируй код под свои возможности и напиши сайт.
2	+ Не загружается найди ошибку исправь.