VEHICLE MANAGEMENT
Vehicle Management System:
Suppose there is a serious traffic jam in your city or area. It cannot be maintained only for
automation, and it is required manual supervision also. Then you can set your signal system
by manually or if required then for automation. Both systems are available in the following
code:
STEP ONE : Open your Notepad
STEP TWO : Copy the following code
STEP THREE: Save it putting name “Vehicle Management System”
STEP FOUR : Open it in your browser
STEP FIVE : Done
CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Traffic Management System</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 1em;
text-align: center;
}
main {
padding: 2em;
text-align: center;
}
.traffic-light {
width: 100px;
margin: 2em auto;
padding: 1em;
background-color: #333;
border-radius: 10px;
}
.light {
width: 60px;
height: 60px;
margin: 10px auto;
border-radius: 50%;
background-color: #555;
}
.red {
background-color: red;
}
.yellow {
background-color: yellow;
}
.green {
background-color: green;
}
.button {
padding: 10px 20px;
margin: 10px;
font-size: 1em;
}
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 1em;
position: fixed;
width: 100%;
bottom: 0;
}
.settings {
margin: 20px 0;
}
.settings input {
margin: 5px;
}
</style>
</head>
<body>
<header>
<h1>Traffic Management System</h1>
</header>
<main>
<div class="traffic-light">
<div class="light" id="redLight"></div>
<div class="light" id="yellowLight"></div>
<div class="light" id="greenLight"></div>
</div>
<div class="settings">
<button class="button" onclick="setMode('auto')">Automatic</button>
<button class="button" onclick="setMode('manual')">Manual</button>
<div>
<label for="greenTime">Green Time (ms):</label>
<input type="number" id="greenTime" value="5000">
</div>
<div>
<label for="yellowTime">Yellow Time (ms):</label>
<input type="number" id="yellowTime" value="2000">
</div>
<div>
<label for="redTime">Red Time (ms):</label>
<input type="number" id="redTime" value="5000">
</div>
<button class="button" onclick="updateTimes()">Set Times</button>
</div>
</main>
<footer>
<p>© 2024 Traffic Management System</p>
</footer>
<script>
let greenTime = 5000; // Default 5 seconds
let yellowTime = 2000; // Default 2 seconds
let redTime = 5000; // Default 5 seconds
let mode = 'auto';
let timer;
function changeLight(color) {
document.getElementById('redLight').style.backgroundColor = color === 'red' ? 'red' : '#555';
document.getElementById('yellowLight').style.backgroundColor = color === 'yellow' ? 'yellow' : '#555';
document.getElementById('greenLight').style.backgroundColor = color === 'green' ? 'green' : '#555';
}
function cycleLights() {
if (mode === 'auto') {
timer = setTimeout(() => changeLight('green'), 0);
timer = setTimeout(() => changeLight('yellow'), greenTime); // greenTime
timer = setTimeout(() => changeLight('red'), greenTime + yellowTime); // greenTime + yellowTime
timer = setTimeout(() => cycleLights(), greenTime + yellowTime + redTime); // Total cycle time
}
}
function setMode(selectedMode) {
mode = selectedMode;
if (mode === 'auto') {
cycleLights();
} else {
clearTimeout(timer);
}
}
function updateTimes() {
greenTime = parseInt(document.getElementById('greenTime').value);
yellowTime = parseInt(document.getElementById('yellowTime').value);
redTime = parseInt(document.getElementById('redTime').value);
if (mode === 'auto') {
cycleLights(); // Restart the cycle with new times
}
}
document.addEventListener('DOMContentLoaded', cycleLights);
</script>
</body>
</html>
function updateTimes() {
greenTime = parseInt(document.getElementById('greenTime').value);
yellowTime = parseInt(document.getElementById('yellowTime').value);
redTime = parseInt(document.getElementById('redTime').value);
if (mode === 'auto') {
cycleLights(); // Restart the cycle with new times
}
}
document.addEventListener('DOMContentLoaded', cycleLights);
</script>
</body>
</html>
Post a Comment