Kibubu · June 12, 2025 15:10
diff --git a/timer.html b/timer.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Countdown Timer</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
            transition: background-color 0.5s, color 0.5s;
        }

        #countdown {
            font-weight: bold;
            text-align: center;
        }

        .countdown-time {
            font-size: 500px;
        }

        .time-up {
            font-size: 200px;
            color: #ffeb3b;
        }

        #controls {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
        }

        input, button {
            padding: 10px;
            font-size: 16px;
            margin: 5px;
        }
    </style>
 </head>
 <body>
    <div id="controls">
        <h1>Countdown Timer</h1>
        <input type="number" id="minutesInput" placeholder="Enter minutes" min="1">
        <button id="startButton">Start Countdown</button>
    </div>

    <div id="countdown" class="countdown-time">00:00</div>

    <script>
        const startButton = document.getElementById('startButton');
        const countdownDisplay = document.getElementById('countdown');
        const body = document.body;
        const controls = document.getElementById('controls');

        let countdownInterval;
        let waitingForUserInput = false;

        function showControlsOnUserInput() {
            if (waitingForUserInput) {
                controls.style.display = 'flex';
                window.removeEventListener('keydown', showControlsOnUserInput);
                window.removeEventListener('click', showControlsOnUserInput);
                waitingForUserInput = false;
            }
        }

        startButton.addEventListener('click', () => {
            const minutes = parseInt(document.getElementById('minutesInput').value);
            if (isNaN(minutes) || minutes <= 0) {
                alert('Please enter a valid number of minutes.');
                return;
            }

            let timeInSeconds = minutes * 60;

            // Hide controls while running
            controls.style.display = 'none';

            // Clear any existing interval
            clearInterval(countdownInterval);

            // Reset any "time-up" styling
            countdownDisplay.classList.remove('time-up');
            countdownDisplay.classList.add('countdown-time');

            countdownInterval = setInterval(() => {
                const mins = Math.floor(timeInSeconds / 60);
                const secs = timeInSeconds % 60;

                countdownDisplay.textContent =
                    `${String(mins).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;

                // Change background and text color based on time remaining
                if (timeInSeconds > 240) { // above 4 minutes
                    body.style.backgroundColor = '#2e7d32'; // nice green
                    body.style.color = '#ffffff'; // white text
                } else if (timeInSeconds > 90) { // between 4 and 1:30
                    body.style.backgroundColor = '#fdd835'; // nice yellow
                    body.style.color = '#333333'; // dark gray text
                } else { // under 1:30
                    body.style.backgroundColor = '#c62828'; // nice red
                    body.style.color = '#ffffff'; // white text
                }

                if (timeInSeconds <= 0) {
                    clearInterval(countdownInterval);
                    countdownDisplay.textContent = 'TIME UP!';
                    countdownDisplay.classList.remove('countdown-time');
                    countdownDisplay.classList.add('time-up');

                    // Wait for user interaction to show controls again
                    waitingForUserInput = true;
                    window.addEventListener('keydown', showControlsOnUserInput);
                    window.addEventListener('click', showControlsOnUserInput);
                }

                timeInSeconds--;
            }, 1000);
        });
    </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Countdown Timer</title>
	<style>
	body {
	font-family: Arial, sans-serif;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100vh;
	margin: 0;
	transition: background-color 0.5s, color 0.5s;
	}

	#countdown {
	font-weight: bold;
	text-align: center;
	}

	.countdown-time {
	font-size: 500px;
	}

	.time-up {
	font-size: 200px;
	color: #ffeb3b;
	}

	#controls {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
	}

	input, button {
	padding: 10px;
	font-size: 16px;
	margin: 5px;
	}
	</style>
	</head>
	<body>
	<div id="controls">
	<h1>Countdown Timer</h1>
	<input type="number" id="minutesInput" placeholder="Enter minutes" min="1">
	<button id="startButton">Start Countdown</button>
	</div>

	<div id="countdown" class="countdown-time">00:00</div>

	<script>
	const startButton = document.getElementById('startButton');
	const countdownDisplay = document.getElementById('countdown');
	const body = document.body;
	const controls = document.getElementById('controls');

	let countdownInterval;
	let waitingForUserInput = false;

	function showControlsOnUserInput() {
	if (waitingForUserInput) {
	controls.style.display = 'flex';
	window.removeEventListener('keydown', showControlsOnUserInput);
	window.removeEventListener('click', showControlsOnUserInput);
	waitingForUserInput = false;
	}
	}

	startButton.addEventListener('click', () => {
	const minutes = parseInt(document.getElementById('minutesInput').value);
	if (isNaN(minutes) \|\| minutes <= 0) {
	alert('Please enter a valid number of minutes.');
	return;
	}

	let timeInSeconds = minutes * 60;

	// Hide controls while running
	controls.style.display = 'none';

	// Clear any existing interval
	clearInterval(countdownInterval);

	// Reset any "time-up" styling
	countdownDisplay.classList.remove('time-up');
	countdownDisplay.classList.add('countdown-time');

	countdownInterval = setInterval(() => {
	const mins = Math.floor(timeInSeconds / 60);
	const secs = timeInSeconds % 60;

	countdownDisplay.textContent =
	`${String(mins).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;

	// Change background and text color based on time remaining
	if (timeInSeconds > 240) { // above 4 minutes
	body.style.backgroundColor = '#2e7d32'; // nice green
	body.style.color = '#ffffff'; // white text
	} else if (timeInSeconds > 90) { // between 4 and 1:30
	body.style.backgroundColor = '#fdd835'; // nice yellow
	body.style.color = '#333333'; // dark gray text
	} else { // under 1:30
	body.style.backgroundColor = '#c62828'; // nice red
	body.style.color = '#ffffff'; // white text
	}

	if (timeInSeconds <= 0) {
	clearInterval(countdownInterval);
	countdownDisplay.textContent = 'TIME UP!';
	countdownDisplay.classList.remove('countdown-time');
	countdownDisplay.classList.add('time-up');

	// Wait for user interaction to show controls again
	waitingForUserInput = true;
	window.addEventListener('keydown', showControlsOnUserInput);
	window.addEventListener('click', showControlsOnUserInput);
	}

	timeInSeconds--;
	}, 1000);
	});
	</script>
	</body>
	</html>