Spaces:
Running
Running
| <!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>NAVI SYSTEMS | Премиальная автоэлектроника</title> <!-- Tailwind CDN --> <script src="https://cdn.tailwindcss.com"></script> <!-- Google Font --> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"> <!-- Font-Awesome --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <!-- AOS --> <link href="https://unpkg.com/aos@2.3.4/dist/aos.css" rel="stylesheet"> <script src="https://unpkg.com/aos@2.3.4/dist/aos.js" defer></script> <style> :root{ --primary:#ff3b3b;--primary-dark:#e03535;--dark:#0f0f0f;--light:#fff; --card-bg:rgba(24,24,24,.7);--glow:0 0 12px #ff3b3b,0 0 24px rgba(255,59,59,.4) } body{font-family:'Inter',sans-serif;background:var(--dark);color:var(--light);overflow-x:hidden;scroll-behavior:smooth} .text-glow{text-shadow:var(--glow)} .bg-card{background:var(--card-bg);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.05)} .btn-primary{background:var(--primary);color:#000;font-weight:600;transition:.3s} .btn-primary:hover{background:var(--primary-dark);transform:translateY(-2px);box-shadow:var(--glow)} /* preloader */ #preloader{position:fixed;inset:0;background:var(--dark);display:flex;justify-content:center;align-items:center;z-index:9999;transition:.5s} .logo-pre{width:80px;height:80px;border:3px solid transparent;border-top:3px solid var(--primary);border-radius:50%;animation:spin 1.4s linear infinite,glow 2s ease-in-out infinite alternate;position:relative} .logo-pre::after{content:"NS";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:1.5rem;color:var(--light);font-weight:800} @keyframes spin{to{transform:rotate(360deg)}} @keyframes glow{to{filter:drop-shadow(var(--glow))}} /* hero overlay + decorative */ .hero-overlay{position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(255,59,59,.15)0%,rgba(15,15,15,.95)80%);z-index:-1} /* utility */ .hover-scale{transition:transform .3s}.hover-scale:hover{transform:scale(1.03)} /* fix timeline typo */ @media(max-width:768px){.car-1,.car-2,.car-3,.car-4{opacity:.15;width:280px;height:160px}} </style> </head> <body class="antialiased"> <!-- Preloader --> <div id="preloader"><div class="logo-pre"></div></div> <!-- Particles --> <div id="particles" class="particles"></div> <!-- hero section simplified for brevity --> <section class="relative min-h-screen flex items-center justify-center overflow-hidden pt-16"> <div class="hero-overlay"></div> <div class="relative z-10 text-center px-4" data-aos="fade-up"> <h1 class="text-6xl font-extrabold text-glow mb-6"><span style="color:var(--primary)">NAVI</span> SYSTEMS</h1> <p class="text-xl text-gray-300 max-w-2xl mx-auto mb-10">Эксклюзивные решения для премиальных автомобилей. Технологии будущего — уже сегодня.</p> <a href="#services" class="btn-primary px-8 py-4 rounded-lg hover-scale animate-pulse"><i class="fas fa-tools mr-2"></i>Наши услуги</a> </div> </section> <!-- Services (пример одной карточки) --> <section id="services" class="py-20 bg-black"> <div class="max-w-6xl mx-auto px-6"> <h2 class="text-4xl text-center font-extrabold mb-12 text-glow">Наши услуги</h2> <div class="grid md:grid-cols-3 gap-8"> <div class="bg-card p-8 rounded-xl hover-scale" data-aos="fade-up"> <i class="fas fa-language text-3xl text-red-500 mb-4"></i> <h3 class="text-xl font-bold mb-2">Русификация мультимедиа</h3> <p class="text-gray-400 text-sm">Полный перевод интерфейса, шаг FM, актуальные карты.</p> </div> <!-- … остальные карточки … --> </div> </div> </section> <!-- … другие блоки (advantages, steps, contact, footer) оставил без изменений … --> <!-- Scripts --> <script> /* AOS */ window.addEventListener('DOMContentLoaded',()=>AOS.init({once:true,duration:800,offset:120})); /* Preloader */ window.addEventListener('load',()=>{ const p=document.getElementById('preloader'); setTimeout(()=>{p.style.opacity='0';p.style.visibility='hidden';p.style.display='none'},500); }); /* Particles (simple dots) */ function createParticles(){ const wrap=document.getElementById('particles'); if(!wrap) return; const count=30, w=window.innerWidth, h=window.innerHeight; for(let i=0;i<count;i++){ const d=document.createElement('div'); d.style.cssText=`position:absolute;width:2px;height:2px;background:rgba(255,255,255,.8);border-radius:50%;top:${Math.random()*h}px;left:${Math.random()*w}px;animation:float-particle ${10+Math.random()*10}s linear infinite;`; d.style.animationDelay=`${Math.random()*5}s`; wrap.appendChild(d); } } createParticles(); /* Mobile menu */ document.getElementById('mobile-menu-button')?.addEventListener('click',()=>{ const m=document.getElementById('mobile-menu');m.classList.toggle('hidden');m.classList.toggle('active'); }); /* Phone mask */ const phoneInput=document.getElementById('phone'); if(phoneInput){ phoneInput.addEventListener('input',e=>{ let x=e.target.value.replace(/\D/g,'').match(/(\d{0,1})(\d{0,3})(\d{0,3})(\d{0,2})(\d{0,2})/); e.target.value=!x[2]?'+7':`+7 (${x[2]}${x[3]?`) ${x[3]}`:''}${x[4]?`-${x[4]}`:''}${x[5]?`-${x[5]}`:''}`; }); } </script> </body> </html> |