html/lab5/task1/script.js - main - maxxon/web-static-labs

html/lab5/task1/script.js
123 строки5 KB
Dasha_10
изменения
27 окт 2025, 07:57
27 окт 2025, 07:57f3e9b7b
document.addEventListener('DOMContentLoaded', function() {
    let popupContainer = document.createElement('div');
    popupContainer.id = 'popup-container';
    popupContainer.style.position = 'fixed';
    popupContainer.style.top = '0';
    popupContainer.style.left = '0';
    popupContainer.style.width = '100vw';
    popupContainer.style.height = '100vh';
    popupContainer.style.backgroundColor = 'rgba(0,0,0,0.5)';
    popupContainer.style.display = 'none';
    popupContainer.style.justifyContent = 'center';
    popupContainer.style.alignItems = 'center';
    document.body.appendChild(popupContainer);

    let popupContent = document.createElement('div');
    popupContent.id = 'popup-content';
    popupContent.style.backgroundColor = 'white';
    popupContent.style.padding = '20px';
    popupContent.style.borderRadius = '8px';
    popupContent.style.textAlign = 'center';
    popupContainer.appendChild(popupContent);

    let subscriptionResult = document.getElementById('subscription-result');

    function createSubscriptionForm() {
        popupContent.innerHTML = ''; // очистить содержимое
        let emailInput = document.createElement('input');
        emailInput.type = 'email';
        emailInput.placeholder = 'Введите ваш e-mail';
        emailInput.id = 'email-input';
        popupContent.appendChild(emailInput);

        let emailError = document.createElement('p');
        emailError.id = 'email-error';
        emailError.style.color = 'red';
        popupContent.appendChild(emailError);

        let subscribeButton = document.createElement('button');
        subscribeButton.textContent = 'Подписаться';
        popupContent.appendChild(subscribeButton);

        let closeButton = document.createElement('button');
        closeButton.textContent = 'Закрыть';
        closeButton.style.marginLeft = '10px';
        popupContent.appendChild(closeButton);

        subscribeButton.addEventListener('click', function() {
            const email = emailInput.value.trim();

            if (!email) {
                emailError.textContent = 'Пожалуйста, введите e-mail.';
                emailInput.classList.add('error-input');
                return;
            }

            if (!isValidEmail(email)) {
                emailError.textContent = 'Пожалуйста, введите корректный e-mail.';
                emailInput.classList.add('error-input');
                return;
            }

            emailInput.classList.remove('error-input');
            emailError.textContent = '';

            showThankYou(email);
        });

        closeButton.addEventListener('click', function() {
            closePopup();
            if(subscriptionResult) subscriptionResult.textContent = 'Подписка не выполнена.';
        });
    }

    function showThankYou(email) {
        popupContent.innerHTML = `<p>Спасибо за подписку! На Ваш адрес ${email} будет направлено письмо.</p>`;
        if(subscriptionResult) subscriptionResult.textContent = `Подписка выполнена на ${email}`;

        // Закрывать автоматически через 10 секунд
        setTimeout(() => {
            closePopup();
        }, 10000);
    }

    function openPopup() {
        const screenWidth = window.innerWidth;
        const screenHeight = window.innerHeight;

        const popupWidth = Math.max(screenWidth * 0.5, 300);
        const popupHeight = Math.max(screenHeight * 0.3, 200);

        popupContent.style.width = popupWidth + 'px';
        popupContent.style.height = popupHeight + 'px';
        popupContainer.style.display = 'flex';

        createSubscriptionForm();
    }

    function closePopup() {
        popupContainer.style.display = 'none';
    }

    function isValidEmail(email) {
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        return emailRegex.test(email);
    }

    // Обработчик для кнопки Esc — всегда активен
    document.addEventListener('keydown', function(event) {
        if (event.key === 'Escape') {
            // Если сейчас показано сообщение благодарности — показать форму заново, иначе закрыть
            if (popupContainer.style.display === 'flex') {
                let currentText = popupContent.textContent || '';
                if (currentText.includes('Спасибо за подписку')) {
                    createSubscriptionForm();
                } else {
                    closePopup();
                }
            }
        }
    });

    setTimeout(openPopup, 7000);
});