<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simulasi Lampu Lalu Lintas</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
.traffic-light {
width: 100px;
height: 300px;
background-color: #333;
border-radius: 10px;
padding: 10px;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.light {
width: 80px;
height: 80px;
border-radius: 50%;
background-color: #444;
transition: background-color 0.5s;
}
.red { background-color: #f00; }
.yellow { background-color: #ff0; }
.green { background-color: #0f0; }
</style>
</head>
<body>
<div class="traffic-light">
<div class="light" id="red"></div>
<div class="light" id="yellow"></div>
<div class="light" id="green"></div>
</div>
<script>
let currentLight = 0;
const lights = [document.getElementById('red'), document.getElementById('yellow'), document.getElementById('green')];
function changeLight() {
lights.forEach(light => light.style.backgroundColor = '#444'); // Reset all lights
if (currentLight === 0) {
lights[0].style.backgroundColor = '#f00'; // Red
currentLight = 1;
setTimeout(changeLight, 3000); // Red for 3 seconds
} else if (currentLight === 1) {
lights[1].style.backgroundColor = '#ff0'; // Yellow
currentLight = 2;
setTimeout(changeLight, 1000); // Yellow for 1 second
} else {
lights[2].style.backgroundColor = '#0f0'; // Green
currentLight = 0;
setTimeout(changeLight, 3000); // Green for 3 seconds
}
}
changeLight(); // Start the light cycle
</script>
</body>
</html>