javascript.js - master - Orpheus/laba1

javascript.js
176 строк7 KB
Orpheus
1лаб
09 июн 2025, 05:36
09 июн 2025, 05:36ccea60f
document.addEventListener('DOMContentLoaded', function() {
    // ==================== ОБРАБОТКА ФОРМЫ ====================
    const registrationForm = document.getElementById('registration-form');
    const passwordInput = document.getElementById('password');
    const emailInput = document.getElementById('email');
    
    if (registrationForm) {
        // Валидация email
        emailInput.addEventListener('input', function() {
            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            if (!emailRegex.test(this.value)) {
                this.setCustomValidity('Пожалуйста, введите корректный email');
            } else {
                this.setCustomValidity('');
            }
        });
        
        // Валидация пароля (минимум 6 символов)
        passwordInput.addEventListener('input', function() {
            if (this.value.length < 6) {
                this.setCustomValidity('Пароль должен содержать минимум 6 символов');
            } else {
                this.setCustomValidity('');
            }
        });
        
        // Обработка отправки формы
        registrationForm.addEventListener('submit', function(e) {
            e.preventDefault();
            
            // Сбор данных формы
            const formData = new FormData(this);
            const formValues = Object.fromEntries(formData.entries());
            
            // Логирование данных (в реальном проекте здесь была бы отправка на сервер)
            console.log('Данные формы:', formValues);
            
            // Показ сообщения об успехе
            showNotification('Регистрация прошла успешно!', 'success');
            
            // Очистка формы
            this.reset();
        });
    }
    
    // ==================== РАБОТА С ИЗОБРАЖЕНИЯМИ ====================
    const largeImageContainer = document.querySelector('.large-image-container');
    const smallImages = document.querySelectorAll('.small-image');
    
    if (largeImageContainer && smallImages.length > 0) {
        // Добавляем эффект при наведении на маленькие изображения
        smallImages.forEach(img => {
            img.addEventListener('mouseenter', function() {
                this.style.transform = 'scale(1.1)';
                this.style.transition = 'transform 0.3s ease';
                this.style.zIndex = '10';
            });
            
            img.addEventListener('mouseleave', function() {
                this.style.transform = 'scale(1)';
                this.style.zIndex = '1';
            });
            
            // Клик по маленькому изображению
            img.addEventListener('click', function() {
                // Можно добавить функционал увеличения изображения
                showNotification(`Изображение ${this.alt} было кликнуто`, 'info');
            });
        });
        
        // Клик по большому изображению
        const largeImage = document.querySelector('.large-image');
        if (largeImage) {
            largeImage.addEventListener('click', function() {
                this.classList.toggle('zoomed');
            });
        }
    }
    
    // ==================== ДОПОЛНИТЕЛЬНЫЕ ФУНКЦИИ ====================
    // Функция показа уведомлений
    function showNotification(message, type = 'info') {
        const notification = document.createElement('div');
        notification.className = `notification ${type}`;
        notification.textContent = message;
        
        document.body.appendChild(notification);
        
        // Автоматическое исчезновение через 3 секунды
        setTimeout(() => {
            notification.style.opacity = '0';
            setTimeout(() => notification.remove(), 300);
        }, 3000);
    }
    
    // ==================== ИНИЦИАЛИЗАЦИЯ ====================
    // Добавляем стили для уведомлений динамически
    const notificationStyles = document.createElement('style');
    notificationStyles.textContent = `
        .notification {
            position: fixed;
            bottom: 20px;
            right: 20px;
            padding: 15px 25px;
            border-radius: 5px;
            color: white;
            background-color: #3498db;
            box-shadow: 0 2px 10px rgba(0,0,0,0.2);
            opacity: 1;
            transition: opacity 0.3s ease;
            z-index: 1000;
        }
        .notification.success { background-color: #2ecc71; }
        .notification.error { background-color: #e74c3c; }
        .notification.info { background-color: #3498db; }
        .notification.warning { background-color: #f39c12; }
    `;
    document.head.appendChild(notificationStyles);
    
    // Тестовое уведомление при загрузке страницы
    showNotification('Страница успешно загружена!', 'success');
    
    // ==================== ДОПОЛНИТЕЛЬНЫЙ ФУНКЦИОНАЛ ====================
    // Изменение темы (светлая/темная)
    const themeToggle = document.createElement('button');
    themeToggle.textContent = '🌙 Тёмная тема';
    themeToggle.style.position = 'fixed';
    themeToggle.style.top = '10px';
    themeToggle.style.right = '10px';
    themeToggle.style.padding = '5px 10px';
    themeToggle.style.borderRadius = '5px';
    themeToggle.style.border = 'none';
    themeToggle.style.cursor = 'pointer';
    themeToggle.style.zIndex = '1000';
    
    themeToggle.addEventListener('click', function() {
        document.body.classList.toggle('dark-theme');
        this.textContent = document.body.classList.contains('dark-theme') 
            ? '☀️ Светлая тема' 
            : '🌙 Тёмная тема';
    });
    
    document.body.appendChild(themeToggle);
    
    // Добавляем стили для темной темы
    const darkThemeStyles = document.createElement('style');
    darkThemeStyles.textContent = `
        body.dark-theme {
            background-color: #121212;
            color: #e0e0e0;
        }
        body.dark-theme article,
        body.dark-theme .form-section {
            background-color: #1e1e1e;
            color: #e0e0e0;
        }
        body.dark-theme header,
        body.dark-theme footer {
            background-color: #1a1a1a;
        }
        body.dark-theme h1,
        body.dark-theme h2 {
            color: #bb86fc;
        }
        body.dark-theme .contact-section {
            background-color: #1e3a5f;
        }
        body.dark-theme input,
        body.dark-theme select {
            background-color: #2d2d2d;
            color: #e0e0e0;
            border-color: #444;
        }
    `;
    document.head.appendChild(darkThemeStyles);
});