<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Color Therapy</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
            overflow: hidden;
            font-family: Arial, sans-serif;
        }
        #colorBox {
            width: 100%;
            height: 100%;
            transition: background-color 2s;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
        }
        #message {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 24px;
            text-align: center;
            z-index: 2;
            white-space: nowrap;
            animation: breathe 5s ease-in-out infinite, glow 2s ease-in-out infinite;
        }
        @keyframes breathe {
            0%, 100% {
                transform: scale(1) translate(-50%, -50%);
            }
            50% {
                transform: scale(1.1) translate(-50%, -50%);
            }
        }
        @keyframes glow {
            0%, 100% {
                text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
            }
            50% {
                text-shadow: 0 0 20px rgba(255, 255, 255, 1);
            }
        }
        .popup {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 20px;
            border-radius: 10px;
            text-align: center;
            z-index: 1000;
        }
        .popup button {
            margin: 10px;
            padding: 10px 20px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        .popup button:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
    <div id="colorBox"></div>
    <div id="message"></div>
    <div class="popup" id="exitPopup">
        <p>¿Estás seguro de que quieres salir?</p>
        <button id="confirmExit">Sí</button>
        <button id="cancelExit">No</button>
    </div>
    <script>
        const backgroundColors = [
            '#7CFC00', // Lime Green
            '#4682B4', // Steel Blue
            '#E6E6FA', // Lavender
            '#FFB6C1', // Light Pink
            '#FFD700'  // Gold
        ];
        let backgroundColorIndex = 0;

        const messages = [
            "Relax and focus on the colors...",
            "Breathe deeply and let go of stress...",
            "Feel the calm and energy around you...",
            "Embrace the moment and find peace..."
        ];
        let messageIndex = 0;

        function changeBackgroundColor() {
            document.getElementById('colorBox').style.backgroundColor = backgroundColors[backgroundColorIndex];
            backgroundColorIndex = (backgroundColorIndex + 1) % backgroundColors.length;
        }

        function getRandomColor() {
            const letters = '0123456789ABCDEF';
            let color = '#';
            for (let i = 0; i < 6; i++) {
                color += letters[Math.floor(Math.random() * 16)];
            }
            return color;
        }

        async function changeMessage() {
            const messageElement = document.getElementById('message');
            const nextMessage = messages[messageIndex];
            messageIndex = (messageIndex + 1) % messages.length;

            // Clear the current message
            messageElement.innerHTML = '';

            // Set a random color for the entire sentence
            const randomColor = getRandomColor();
            messageElement.style.color = randomColor;

            // Typing effect
            for (let i = 0; i < nextMessage.length; i++) {
                const charSpan = document.createElement('span');
                charSpan.classList.add('char');
                charSpan.innerText = nextMessage[i];

                // Check if the character is a space
                if (nextMessage[i] === ' ') {
                    charSpan.innerHTML = '&nbsp;'; // Use non-breaking space for spaces
                }

                messageElement.appendChild(charSpan);

                // Wait before showing the next character
                await new Promise(resolve => setTimeout(resolve, 70)); // Adjust the delay as needed
            }
        }

        // Initial background color change
        changeBackgroundColor();

        // Change background color every 5 seconds
        setInterval(changeBackgroundColor, 5000);

        // Initial message display
        changeMessage();

        // Change message every 10 seconds
        setInterval(changeMessage, 5000);

        let isPopupVisible = false;

        // Show popup when any key is pressed or mouse is clicked
        document.addEventListener('keydown', function(event) {
            if (!isPopupVisible) {
                showExitPopup();
            }
        });

        document.addEventListener('click', function(event) {
            if (!isPopupVisible) {
                showExitPopup();
            }
        });

        // Show popup when the exit button is clicked
        document.getElementById('confirmExit').addEventListener('click', function() {
            window.close();
        });

        document.getElementById('cancelExit').addEventListener('click', function() {
            hideExitPopup();
        });

        function showExitPopup() {
            isPopupVisible = true;
            document.getElementById('exitPopup').style.display = 'block';
        }

        function hideExitPopup() {
            isPopupVisible = false;
            document.getElementById('exitPopup').style.display = 'none';
        }
    </script>
</body>
</html>