Update scripts.js

scripts.js

@@ -1,20 +1,109 @@
-// Плавная прокрутка к разделу "Контакты"
+// Плавная прокрутка
 function scrollToContact() {
     document.querySelector('#contact').scrollIntoView({ behavior: 'smooth' });
 }
 
-// Микроанимация для кнопки при загрузке страницы
+// Кастомный курсор
+const cursor = document.querySelector('.cursor');
+const follower = document.querySelector('.cursor-follower');
+document.addEventListener('mousemove', (e) => {
+    cursor.style.left = `${e.clientX}px`;
+    cursor.style.top = `${e.clientY}px`;
+    follower.style.left = `${e.clientX - 15}px`;
+    follower.style.top = `${e.clientY - 15}px`;
+});
+
+// WebGL фон
+const scene = new THREE.Scene();
+const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+const renderer = new THREE.WebGLRenderer({ alpha: true });
+renderer.setSize(window.innerWidth, window.innerHeight);
+document.getElementById('webgl-bg').appendChild(renderer.domElement);
+
+const geometry = new THREE.SphereGeometry(5, 32, 32);
+const material = new THREE.MeshBasicMaterial({
+    color: 0xe74c3c,
+    wireframe: true
+});
+const sphere = new THREE.Mesh(geometry, material);
+scene.add(sphere);
+
+camera.position.z = 15;
+
+function animateWebGL() {
+    requestAnimationFrame(animateWebGL);
+    sphere.rotation.x += 0.01;
+    sphere.rotation.y += 0.01;
+    renderer.render(scene, camera);
+}
+animateWebGL();
+
+// Параллакс-эффект
+document.addEventListener('mousemove', (e) => {
+    const parallaxElements = document.querySelectorAll('[data-parallax]');
+    parallaxElements.forEach(el => {
+        const speed = 0.05;
+        const x = (window.innerWidth - e.pageX * speed) / 100;
+        const y = (window.innerHeight - e.pageY * speed) / 100;
+        el.style.transform = `translate(${x}px, ${y}px)`;
+    });
+});
+
+// Голосовое управление
+const voiceBtn = document.getElementById('voice-btn');
+if ('webkitSpeechRecognition' in window) {
+    const recognition = new webkitSpeechRecognition();
+    recognition.lang = 'ru-RU';
+    recognition.onresult = (event) => {
+        const transcript = event.results[0][0].transcript;
+        if (transcript.toLowerCase().includes('заказать')) {
+            scrollToContact();
+            alert('Голосовой заказ активирован! Заполните форму ниже.');
+        }
+    };
+    voiceBtn.addEventListener('click', () => {
+        recognition.start();
+        voiceBtn.textContent = 'Слушаю...';
+        setTimeout(() => voiceBtn.textContent = '🎙️ Голосовой заказ', 3000);
+    });
+} else {
+    voiceBtn.style.display = 'none';
+}
+
+// Анимация загрузки
 document.addEventListener('DOMContentLoaded', () => {
-    const button = document.querySelector('.cta-button');
-    button.style.transform = 'scale(0.95)';
-    setTimeout(() => {
-        button.style.transition = 'transform 0.5s ease';
-        button.style.transform = 'scale(1)';
-    }, 100);
+    const elements = [document.querySelector('.cta-button'), ...document.querySelectorAll('.service-card')];
+    elements.forEach(el => {
+        el.style.opacity = '0';
+        el.style.transform = 'translateY(20px)';
+        setTimeout(() => {
+            el.style.transition = 'all 0.8s ease';
+            el.style.opacity = '1';
+            el.style.transform = 'translateY(0)';
+        }, 300);
+    });
 });
 
-// Предотвращение отправки формы (демо)
-document.querySelector('form').addEventListener('submit', (e) => {
+// Отслеживание груза (демо)
+function trackCargo() {
+    const trackNum = document.getElementById('track-input').value;
+    if (trackNum) {
+        alert(`Груз ${trackNum}: В пути (этап 2/4). Ожидаемое время прибытия: 28 февраля 2025.`);
+    } else {
+        alert('Введите номер груза!');
+    }
+}
+
+// Обработка формы
+document.getElementById('contact-form').addEventListener('submit', (e) => {
     e.preventDefault();
-    alert('Спасибо за заявку! Мы свяжемся с вами скоро.');
+    alert('Заявка успешно отправлена! Мы свяжемся с вами в течение 24 часов.');
+});
+
+// Vanilla Tilt для карточек
+VanillaTilt.init(document.querySelectorAll('.service-card'), {
+    max: 20,
+    speed: 300,
+    glare: true,
+    'max-glare': 0.3
 });