script.js - master - neyro_ufa/html

script.js
389 строк15 KB
neyro_ufa
fisrt
15 янв 2026, 16:41
15 янв 2026, 16:4141e0ac6
// ===== ОСНОВНОЙ КОД ДЛЯ САЙТА =====

document.addEventListener('DOMContentLoaded', function() {
    
    // ===== ПЕРЕМЕННЫЕ И ЭЛЕМЕНТЫ =====
    const menuToggle = document.getElementById('menuToggle');
    const navList = document.querySelector('.nav-list');
    const navLinks = document.querySelectorAll('.nav-link');
    const scrollTopBtn = document.getElementById('scrollTop');
    const faqItems = document.querySelectorAll('.faq-item');
    const testimonialSlider = document.querySelector('.testimonials-slider');
    const prevBtn = testimonialSlider ? testimonialSlider.querySelector('.prev-btn') : null;
    const nextBtn = testimonialSlider ? testimonialSlider.querySelector('.next-btn') : null;
    const dots = testimonialSlider ? testimonialSlider.querySelectorAll('.dot') : [];
    const appointmentForm = document.getElementById('appointmentForm');
    const formSuccess = document.getElementById('formSuccess');
    
    // ===== МОБИЛЬНОЕ МЕНЮ =====
    if (menuToggle) {
        menuToggle.addEventListener('click', function() {
            navList.classList.toggle('active');
            this.querySelector('i').classList.toggle('fa-bars');
            this.querySelector('i').classList.toggle('fa-times');
        });
        
        // Закрытие меню при клике на ссылку
        navLinks.forEach(link => {
            link.addEventListener('click', function() {
                navList.classList.remove('active');
                menuToggle.querySelector('i').classList.add('fa-bars');
                menuToggle.querySelector('i').classList.remove('fa-times');
                
                // Обновление активного пункта меню
                navLinks.forEach(item => item.classList.remove('active'));
                this.classList.add('active');
            });
        });
        
        // Закрытие меню при клике вне его
        document.addEventListener('click', function(event) {
            if (!menuToggle.contains(event.target) && !navList.contains(event.target)) {
                navList.classList.remove('active');
                menuToggle.querySelector('i').classList.add('fa-bars');
                menuToggle.querySelector('i').classList.remove('fa-times');
            }
        });
    }
    
    // ===== ПЛАВНАЯ ПРОКРУТКА К РАЗДЕЛАМ =====
    navLinks.forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            
            const targetId = this.getAttribute('href');
            if (targetId === '#home') {
                window.scrollTo({
                    top: 0,
                    behavior: 'smooth'
                });
            } else {
                const targetElement = document.querySelector(targetId);
                if (targetElement) {
                    const headerHeight = document.querySelector('.header').offsetHeight;
                    const targetPosition = targetElement.offsetTop - headerHeight;
                    
                    window.scrollTo({
                        top: targetPosition,
                        behavior: 'smooth'
                    });
                }
            }
        });
    });
    
    // ===== КНОПКА "НАВЕРХ" =====
    window.addEventListener('scroll', function() {
        // Показ/скрытие кнопки "Наверх"
        if (scrollTopBtn) {
            if (window.scrollY > 500) {
                scrollTopBtn.classList.add('visible');
            } else {
                scrollTopBtn.classList.remove('visible');
            }
        }
        
        // Подсветка активного пункта меню при прокрутке
        const headerHeight = document.querySelector('.header').offsetHeight;
        const scrollPosition = window.scrollY + headerHeight + 100;
        
        // Определяем текущий раздел
        const sections = document.querySelectorAll('section[id]');
        
        sections.forEach(section => {
            const sectionTop = section.offsetTop;
            const sectionHeight = section.offsetHeight;
            const sectionId = section.getAttribute('id');
            
            if (scrollPosition >= sectionTop && scrollPosition < sectionTop + sectionHeight) {
                navLinks.forEach(link => {
                    link.classList.remove('active');
                    if (link.getAttribute('href') === `#${sectionId}`) {
                        link.classList.add('active');
                    }
                });
            }
        });
    });
    
    // Клик по кнопке "Наверх"
    if (scrollTopBtn) {
        scrollTopBtn.addEventListener('click', function(e) {
            e.preventDefault();
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });
    }
    
    // ===== FAQ (АККОРДЕОН) =====
    faqItems.forEach(item => {
        const question = item.querySelector('.faq-question');
        
        question.addEventListener('click', function() {
            // Закрыть все другие открытые вопросы
            faqItems.forEach(otherItem => {
                if (otherItem !== item && otherItem.classList.contains('active')) {
                    otherItem.classList.remove('active');
                }
            });
            
            // Переключить текущий вопрос
            item.classList.toggle('active');
        });
    });
    
    // ===== СЛАЙДЕР ОТЗЫВОВ =====
    let currentSlide = 0;
    const testimonials = testimonialSlider ? testimonialSlider.querySelectorAll('.testimonial') : [];
    
    function showSlide(index) {
        // Проверка границ
        if (index < 0) index = testimonials.length - 1;
        if (index >= testimonials.length) index = 0;
        
        // Скрыть все слайды
        testimonials.forEach(slide => {
            slide.classList.remove('active');
        });
        
        // Показать текущий слайд
        testimonials[index].classList.add('active');
        
        // Обновить точки
        dots.forEach((dot, i) => {
            dot.classList.toggle('active', i === index);
        });
        
        currentSlide = index;
    }
    
    // Инициализация слайдера
    if (testimonialSlider && testimonials.length > 0) {
        // Кнопка "Назад"
        if (prevBtn) {
            prevBtn.addEventListener('click', function() {
                showSlide(currentSlide - 1);
            });
        }
        
        // Кнопка "Вперед"
        if (nextBtn) {
            nextBtn.addEventListener('click', function() {
                showSlide(currentSlide + 1);
            });
        }
        
        // Точки для навигации
        dots.forEach((dot, index) => {
            dot.addEventListener('click', function() {
                showSlide(index);
            });
        });
        
        // Автопереключение слайдов (каждые 8 секунд)
        let slideInterval = setInterval(function() {
            showSlide(currentSlide + 1);
        }, 8000);
        
        // Остановить автопереключение при наведении на слайдер
        testimonialSlider.addEventListener('mouseenter', function() {
            clearInterval(slideInterval);
        });
        
        // Возобновить автопереключение при уходе мыши
        testimonialSlider.addEventListener('mouseleave', function() {
            slideInterval = setInterval(function() {
                showSlide(currentSlide + 1);
            }, 8000);
        });
        
        // Показать первый слайд
        showSlide(0);
    }
    
    // ===== ФОРМА ЗАПИСИ =====
    if (appointmentForm) {
        appointmentForm.addEventListener('submit', function(e) {
            e.preventDefault();
            
            // Простая валидация формы
            const nameInput = document.getElementById('name');
            const phoneInput = document.getElementById('phone');
            const privacyCheckbox = document.getElementById('privacy');
            
            let isValid = true;
            
            // Сброс стилей ошибок
            [nameInput, phoneInput].forEach(input => {
                input.style.borderColor = '';
            });
            
            // Проверка имени
            if (!nameInput.value.trim()) {
                nameInput.style.borderColor = '#e74c3c';
                isValid = false;
            }
            
            // Проверка телефона (простая)
            if (!phoneInput.value.trim() || phoneInput.value.length < 5) {
                phoneInput.style.borderColor = '#e74c3c';
                isValid = false;
            }
            
            // Проверка согласия с политикой
            if (!privacyCheckbox.checked) {
                alert('Пожалуйста, подтвердите согласие на обработку персональных данных');
                isValid = false;
            }
            
            if (isValid) {
                // Имитация отправки формы
                console.log('Данные формы:');
                console.log('Имя:', nameInput.value);
                console.log('Телефон:', phoneInput.value);
                console.log('Email:', document.getElementById('email').value);
                console.log('Услуга:', document.getElementById('service').value);
                console.log('Сообщение:', document.getElementById('message').value);
                
                // Показать сообщение об успехе
                if (formSuccess) {
                    formSuccess.style.display = 'block';
                    appointmentForm.reset();
                    
                    // Прокрутить к сообщению об успехе
                    formSuccess.scrollIntoView({
                        behavior: 'smooth',
                        block: 'center'
                    });
                    
                    // Скрыть сообщение через 10 секунд
                    setTimeout(function() {
                        formSuccess.style.display = 'none';
                    }, 10000);
                } else {
                    alert('Спасибо! Ваша заявка отправлена. Я свяжусь с вами в течение 24 часов.');
                    appointmentForm.reset();
                }
                
                // В реальном проекте здесь будет AJAX запрос к серверу
                // Например:
                // fetch('send_email.php', {
                //     method: 'POST',
                //     body: new FormData(appointmentForm)
                // })
                // .then(response => response.json())
                // .then(data => {
                //     if (data.success) {
                //         formSuccess.style.display = 'block';
                //         appointmentForm.reset();
                //     }
                // });
            }
        });
    }
    
    // ===== МАСКА ДЛЯ ТЕЛЕФОНА =====
    const phoneInput = document.getElementById('phone');
    if (phoneInput) {
        phoneInput.addEventListener('input', function(e) {
            let value = e.target.value.replace(/\D/g, '');
            
            // Форматирование: +7 (XXX) XXX-XX-XX
            if (value.length > 0) {
                if (value[0] === '7' || value[0] === '8') {
                    value = value.substring(1);
                }
                
                let formattedValue = '+7 (';
                
                if (value.length > 0) {
                    formattedValue += value.substring(0, 3);
                }
                
                if (value.length >= 4) {
                    formattedValue += ') ' + value.substring(3, 6);
                }
                
                if (value.length >= 7) {
                    formattedValue += '-' + value.substring(6, 8);
                }
                
                if (value.length >= 9) {
                    formattedValue += '-' + value.substring(8, 10);
                }
                
                e.target.value = formattedValue;
            }
        });
    }
    
    // ===== АНИМАЦИЯ ПРИ ПРОКРУТКЕ =====
    // Функция для проверки, виден ли элемент на экране
    function isElementInViewport(el) {
        const rect = el.getBoundingClientRect();
        return (
            rect.top <= (window.innerHeight || document.documentElement.clientHeight) * 0.85 &&
            rect.bottom >= 0
        );
    }
    
    // Анимация элементов при прокрутке
    function animateOnScroll() {
        const animatedElements = document.querySelectorAll('.service-card, .step, .stat-item');
        
        animatedElements.forEach(element => {
            if (isElementInViewport(element) && !element.classList.contains('animated')) {
                element.classList.add('animated');
                element.style.opacity = '1';
                element.style.transform = 'translateY(0)';
            }
        });
    }
    
    // Инициализация анимации
    const animatedElements = document.querySelectorAll('.service-card, .step, .stat-item');
    animatedElements.forEach(element => {
        element.style.opacity = '0';
        element.style.transform = 'translateY(20px)';
        element.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
    });
    
    // Запустить проверку при загрузке и прокрутке
    window.addEventListener('scroll', animateOnScroll);
    window.addEventListener('load', animateOnScroll);
    
    // Инициализировать анимацию сразу для видимых элементов
    setTimeout(animateOnScroll, 100);
    
    // ===== ДОПОЛНИТЕЛЬНЫЕ ФУНКЦИИ =====
    
    // Подтверждение при выходе со страницы с неотправленной формой
    let formChanged = false;
    
    if (appointmentForm) {
        const formInputs = appointmentForm.querySelectorAll('input, textarea, select');
        
        formInputs.forEach(input => {
            input.addEventListener('input', function() {
                formChanged = true;
            });
        });
        
        window.addEventListener('beforeunload', function(e) {
            if (formChanged) {
                e.preventDefault();
                e.returnValue = 'Вы не отправили заполненную форму. Вы уверены, что хотите покинуть страницу?';
            }
        });
        
        // Сбросить флаг при отправке формы
        appointmentForm.addEventListener('submit', function() {
            formChanged = false;
        });
    }
    
    // ===== ИНИЦИАЛИЗАЦИЯ =====
    console.log('Сайт нейропсихолога загружен и готов к работе!');
});