document.addEventListener('DOMContentLoaded', function() { // Mobile menu toggle const mobileMenuButton = document.querySelector('header button'); const mobileMenu = document.createElement('div'); mobileMenu.className = 'mobile-menu hidden bg-white w-full absolute left-0 top-full shadow-lg z-50'; const navItems = [ {text: 'Главная', href: '#'}, {text: 'Услуги', href: '#'}, {text: 'Специалисты', href: '#'}, {text: 'Цены', href: '#'}, {text: 'О нас', href: '#'}, {text: 'Контакты', href: '#'}, {text: 'Блог', href: '#'} ]; const navList = document.createElement('ul'); navList.className = 'py-4'; navItems.forEach(item => { const li = document.createElement('li'); const a = document.createElement('a'); a.href = item.href; a.className = 'block px-6 py-2 hover:bg-gray-100 font-medium'; a.textContent = item.text; li.appendChild(a); navList.appendChild(li); }); mobileMenu.appendChild(navList); document.querySelector('header').appendChild(mobileMenu); mobileMenuButton.addEventListener('click', function() { mobileMenu.classList.toggle('hidden'); feather.replace(); }); // Smooth scrolling for anchor links document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function(e) { e.preventDefault(); const targetId = this.getAttribute('href'); if (targetId === '#') return; const targetElement = document.querySelector(targetId); if (targetElement) { targetElement.scrollIntoView({ behavior: 'smooth' }); } }); }); // Form submission const appointmentForm = document.querySelector('form'); if (appointmentForm) { appointmentForm.addEventListener('submit', function(e) { e.preventDefault(); // Here you would normally send the form data to the server // For demo purposes, we'll just show an alert alert('Спасибо! Ваша заявка отправлена. Мы свяжемся с вами в ближайшее время.'); this.reset(); }); } // Add hover effects to elements document.querySelectorAll('.btn-hover').forEach(btn => { btn.addEventListener('mouseenter', function() { this.classList.add('transform', '-translate-y-1', 'shadow-md'); }); btn.addEventListener('mouseleave', function() { this.classList.remove('transform', '-translate-y-1', 'shadow-md'); }); }); // Initialize Feather Icons feather.replace(); });