Smart-Parking

Smart-Parking

HTML CODE

<!DOCTYPE html>
<html>
<head>
    <title>Smart Parking System</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h1>Smart Parking System</h1>
    <div class="parking-lot">
        <div class="parking-space" id="parking-space-1"></div>
        <div class="parking-space" id="parking-space-2"></div>
        <div class="parking-space" id="parking-space-3"></div>
        <!-- Add more parking spaces as needed -->
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS CODE

body {
    text-align: center;
}
 
.parking-lot {
    display: flex;
    justify-content: center;
    margin-top: 50px;
}
 
.parking-space {
    width: 100px;
    height: 100px;
    margin: 10px;
    background-color: green;
    display: inline-block;
    border: 1px solid black;
}
 
.parking-space.occupied {
    background-color: red;
}

JAVASCRIPT CODE

// Simulating parking data, where 0 represents an available parking space and 1 represents an occupied space
var parkingData = [0, 1, 0];
 
window.addEventListener("DOMContentLoaded", function() {
    // Get parking spaces
    var parkingSpaces = document.getElementsByClassName("parking-space");
 
    // Update parking spaces based on the parking data
    for (var i = 0; i < parkingSpaces.length; i++) {
        if (parkingData[i] === 1) {
            parkingSpaces[i].classList.add("occupied");
        }
    }
});

PYTHON CODE

from flask import Flask, render_template
 
app = Flask(__name__)
 
@app.route("/")
def index():
    return render_template("index.html")
 
if __name__ == "__main__":
    app.run()

Tech Doubility

Smart-Parking

Post a Comment

Tech Doubility