Descriptions

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>

Add a review