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> <!-- 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> чат отредактируй код под свои возможности и напиши сайт. | |
| Не загружается найди ошибку исправь. | |
| Вставь в фон автомобили премиум класса привлекающие взор | |
| улучши дизайн сайта и изображения автомобилей премиум класса на сайте | |
| Максимально улучши дизайн исправь все баги |