<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Futuristic Stoplight</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #000;
margin: 0;
font-family: 'Arial', sans-serif;
color: #fff;
}
#stoplight {
background: linear-gradient(145deg, #333, #111);
padding: 20px;
border-radius: 20px;
width: 120px;
box-shadow: 0 0 20px #00ff00, inset 0 0 15px #666;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
#countdown {
font-size: 24px;
margin-bottom: 20px;
color: #00ff00;
font-family: 'Courier New', Courier, monospace;
text-shadow: 0 0 10px #00ff00;
visibility: visible;
}
.light {
width: 60px;
height: 60px;
border-radius: 50%;
margin: 15px 0;
opacity: 0.3;
transition: all 0.5s;
background: radial-gradient(circle, rgba(255,255,255,0.4) 0%, rgba(0,0,0,0.1) 70%);
}
.active {
opacity: 1;
box-shadow: 0 0 20px #fff, 0 0 40px #fff;
animation: pulse 2s infinite;
}
#neutral { background: #80bfff; }
#prep { background: #ffbf00; }
#caution { background: #ff4500; }
#almostGo { background: #9400d3; }
#go { background: #00ff00; }
@keyframes pulse {
0% {
box-shadow: 0 0 10px #fff;
}
50% {
box-shadow: 0 0 20px #fff;
}
100% {
box-shadow: 0 0 10px #fff;
}
}
</style>
</head>
<body>
<div id="stoplight">
<div id="countdown">60</div>
<div id="neutral" class="light"></div>
<div id="prep" class="light"></div>
<div id="caution" class="light"></div>
<div id="almostGo" class="light"></div>
<div id="go" class="light"></div>
</div>
<script>
document.addEventListener('DOMContentLoaded', (event) => {
const lights = {
neutral: document.getElementById('neutral'),
prep: document.getElementById('prep'),
caution: document.getElementById('caution'),
almostGo: document.getElementById('almostGo'),
go: document.getElementById('go')
};
const countdownElement = document.getElementById('countdown');
let countdownTime = 60;
let currentPhase = 'neutral';
let timer;
function setPhase(phase) {
Object.values(lights).forEach(light => light.classList.remove('active'));
lights[phase].classList.add('active');
currentPhase = phase;
}
function updateCountdown() {
countdownElement.textContent = countdownTime;
if (countdownTime === 0) {
countdownElement.style.visibility = 'hidden';
}
}
function startCycle() {
setPhase('neutral');
countdownElement.style.visibility = 'visible';
countdownTime = 60;
updateCountdown();
const countdownInterval = setInterval(() => {
countdownTime--;
updateCountdown();
if (countdownTime <= 0) {
clearInterval(countdownInterval);
}
}, 1000);
timer = setTimeout(() => {
setPhase('prep');
setTimeout(() => {
setPhase('caution');
const randomDelay = Math.floor(Math.random() * 8000) + 1000; // Random between 1 to 8 seconds
setTimeout(() => {
setPhase('almostGo');
setTimeout(() => {
setPhase('go');
setTimeout(() => {
resetCycle();
}, 5000); // GO lasts for 5 seconds
}, 1000); // almostGo to go transition
}, randomDelay);
}, 10000); // caution lasts for 10 seconds
}, 60000); // neutral lasts for 60 seconds
}
function resetCycle() {
clearTimeout(timer);
startCycle();
}
// Start the cycle
startCycle();
});
</script>
</body>
</html>