public/main.js - main - unluckattempt/Ruby_practice

public/main.js
270 строк9 KB
Rodion
Final work
01 июн 2026, 11:21
01 июн 2026, 11:21cc864a9
document.addEventListener('DOMContentLoaded', function () {
    const observerOptions = {
        threshold: 0.1,
        rootMargin: '0px 0px -50px 0px'
    };

    const observer = new IntersectionObserver(function (entries) {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('fade-in-visible');
            }
        });
    }, observerOptions);
    const elementsToAnimate = document.querySelectorAll('._anim_item');
    elementsToAnimate.forEach(el => {
        el.classList.add('fade-in');
        observer.observe(el);
    });
    const form = document.getElementById('registrationForm');
            const nameInput = document.getElementById('name');
            const emailInput = document.getElementById('email');
            const nameError = document.getElementById('nameError');
            const emailError = document.getElementById('emailError');
            const submitBtn = document.getElementById('submitBtn');
            const successMessage = document.getElementById('successMessage');
            
            
            const nameRegex = /^[а-яА-ЯёЁa-zA-Z\s\-']{2,50}$/;
            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/;
            
            
            function showError(element, message) {
                element.textContent = message;
                element.classList.add('show');
            }
            
           
            function hideError(element) {
                element.textContent = '';
                element.classList.remove('show');
            }
            
            
            function validateName() {
                const name = nameInput.value.trim();
                
                if (name === '') {
                    showError(nameError, 'Поле "Имя" обязательно для заполнения');
                    nameInput.classList.remove('valid');
                    nameInput.classList.add('error');
                    return false;
                }
                
                if (name.length < 2) {
                    showError(nameError, 'Имя должно содержать минимум 2 символа');
                    nameInput.classList.remove('valid');
                    nameInput.classList.add('error');
                    return false;
                }
                
                if (!nameRegex.test(name)) {
                    showError(nameError, 'Имя может содержать только буквы, пробелы, дефисы и апострофы');
                    nameInput.classList.remove('valid');
                    nameInput.classList.add('error');
                    return false;
                }
                
                hideError(nameError);
                nameInput.classList.remove('error');
                nameInput.classList.add('valid');
                return true;
            }
            
            
            function validateEmail() {
                const email = emailInput.value.trim();
                
                if (email === '') {
                    showError(emailError, 'Поле "Email" обязательно для заполнения');
                    emailInput.classList.remove('valid');
                    emailInput.classList.add('error');
                    return false;
                }
                
                if (!emailRegex.test(email)) {
                    showError(emailError, 'Введите корректный email адрес (например: example@mail.com)');
                    emailInput.classList.remove('valid');
                    emailInput.classList.add('error');
                    return false;
                }
                
                
                const domainPart = email.split('@')[1];
                if (domainPart && domainPart.split('.')[0].length < 2) {
                    showError(emailError, 'Некорректный домен email');
                    emailInput.classList.remove('valid');
                    emailInput.classList.add('error');
                    return false;
                }
                
                hideError(emailError);
                emailInput.classList.remove('error');
                emailInput.classList.add('valid');
                return true;
            }
            
            
            nameInput.addEventListener('input', function() {
                validateName();
                checkFormValidity();
            });
            
            nameInput.addEventListener('blur', validateName);
            
            emailInput.addEventListener('input', function() {
                validateEmail();
                checkFormValidity();
            });
            
            emailInput.addEventListener('blur', validateEmail);
            
            
            function checkFormValidity() {
                const isNameValid = validateName();
                const isEmailValid = validateEmail();
                submitBtn.disabled = !(isNameValid && isEmailValid);
            }
            
            
            form.addEventListener('submit', function(event) {
                event.preventDefault(); 
                
                const isNameValid = validateName();
                const isEmailValid = validateEmail();
                
                if (isNameValid && isEmailValid) {
                    
                    console.log('Форма отправлена!');
                    console.log('Имя:', nameInput.value.trim());
                    console.log('Email:', emailInput.value.trim());
                    
                    
                    successMessage.classList.add('show');
                    
                    
                    setTimeout(function() {
                        form.reset();
                        nameInput.classList.remove('valid', 'error');
                        emailInput.classList.remove('valid', 'error');
                        successMessage.classList.remove('show');
                        submitBtn.disabled = true;
                        hideError(nameError);
                        hideError(emailError);
                    }, 2000);
                } else {
                    
                    if (!isNameValid) {
                        nameInput.focus();
                    } else if (!isEmailValid) {
                        emailInput.focus();
                    }
                }
            });
            
            
            submitBtn.disabled = true;
    
});

const buttons = document.querySelectorAll('button');

buttons.forEach(button => {
    
    const originalStyles = {
        backgroundColor: button.style.backgroundColor,
        color: button.style.color,
        border: button.style.border,
        padding: button.style.padding,
        borderRadius: button.style.borderRadius,
        fontSize: button.style.fontSize,
    };

    
    button.addEventListener('mouseenter', function() {
        this.style.backgroundColor = '#e00fb3ff';    
    });
    
    button.addEventListener('mouseleave', function() {
        
        this.style.backgroundColor = originalStyles.backgroundColor || '';
        
    });

    
    button.addEventListener('mousedown', function() {
        this.style.backgroundColor = '#8c0fe0ff';
    });

    
    button.addEventListener('mouseup', function() {
        this.style.backgroundColor = '#170b1fff';
    });
    button.addEventListener('blur', function() {
        this.style.transform = '';
        this.style.boxShadow = '';
    });
});

const images = document.querySelectorAll('img');

images.forEach(photo => {
    
    const originalStyles = {
        width: photo.style.width,
        marginRight: photo.style.marginRight,
        borderRadius: photo.style.borderRadius
    };

    
    photo.addEventListener('mouseenter', function() {
        this.style.borderRadius = '25%';
        this.style.width = '350px';
        this.style.transition = 'all 0.8s ease 0s';   
    });
    photo.addEventListener('mouseleave', function() {
        
        this.style.borderRadius = '7px';
        this.style.transition = 'all 0.8s ease 0s'; 
        this.style.width = originalStyles.width;
    });

    
    img.addEventListener('mousedown', function() {
        this.style.backgroundColor = '#8c0fe0ff';
    });

    // Эффект при отпускании (mouseup)
    img.addEventListener('mouseup', function() {
        this.style.backgroundColor = '#170b1fff';
    });
    img.addEventListener('blur', function() {
        this.style.transform = '';
        this.style.boxShadow = '';
    });
    
    
});

const button = document.querySelector('.button_1');

if (button) {
    button.addEventListener('click', function(e) {
        e.preventDefault();
        
        // Запрашиваем подтверждение
        const isConfirmed = confirm('Вы уверены, что хотите отправить запрос?');
        
        if (isConfirmed) {
            // Показываем таймер
            alert('Отправляем запрос...');
            
            // Имитация отправки
            setTimeout(() => {
                alert('✅ Запрос успешно отправлен!\n\nОжидайте ответа в течение 24 часов.');
            }, 1000);
        } else {
            alert('Запрос отменен. Вы можете попробовать снова!');
        }
    });
}