Spaces:

harshdhane
/

TrafficManagement

Sleeping

App Files Files Community

harshdhane commited on Jun 11, 2025

Commit

8b283be

verified ·

1 Parent(s): 09ac3f1

Upload 9 files

Browse files

Files changed (9) hide show

app.py +99 -0
full code.txt +861 -0
requirements.txt +2 -0
static/css/style.css +234 -0
templates/index.html +70 -0
templates/login.html +91 -0
templates/main.html +239 -0
templates/signup.html +86 -0
traffic_management.db +0 -0

app.py ADDED Viewed

	@@ -0,0 +1,99 @@

+from flask import Flask, render_template, request, redirect, url_for, session
+import sqlite3
+import os
+from werkzeug.security import generate_password_hash, check_password_hash
+app = Flask(__name__)
+app.secret_key = 'your_secret_key'  # Replace with a secure key
+# Database setup
+def get_db_connection():
+    conn = sqlite3.connect('traffic_management.db')
+    conn.row_factory = sqlite3.Row
+    return conn
+# Create database and users table if not exists
+def init_db():
+    conn = get_db_connection()
+    conn.execute('''
+        CREATE TABLE IF NOT EXISTS users (
+            id INTEGER PRIMARY KEY AUTOINCREMENT,
+            username TEXT UNIQUE NOT NULL,
+            password TEXT NOT NULL
+        )
+    ''')
+    conn.commit()
+    conn.close()
+# Initialize database
+init_db()
+# Upload folder setup
+UPLOAD_FOLDER = 'uploads'
+app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
+if not os.path.exists(UPLOAD_FOLDER):
+    os.makedirs(UPLOAD_FOLDER)
+# Routes
+@app.route('/')
+def index():
+    return render_template('index.html')
+@app.route('/main')
+def main_dashboard():
+    if 'username' not in session:
+        session['referrer'] = 'main'
+        return redirect(url_for('login'))
+    return render_template('main.html')
+@app.route('/login', methods=['GET', 'POST'])
+def login():
+    if request.method == 'POST':
+        username = request.form['username']
+        password = request.form['password']
+        conn = get_db_connection()
+        user = conn.execute('SELECT * FROM users WHERE username = ?', (username,)).fetchone()
+        conn.close()
+        if user and check_password_hash(user['password'], password):
+            session['username'] = user['username']
+            redirect_page = session.pop('referrer', 'index')
+            return redirect(url_for(redirect_page))
+        else:
+            return render_template('login.html', error="Invalid username or password.")
+    else:
+        if 'referrer' not in session and request.referrer and 'login' not in request.referrer and 'signup' not in request.referrer:
+            session['referrer'] = request.referrer.split('/')[-1] or 'index'
+        return render_template('login.html')
+@app.route('/signup', methods=['GET', 'POST'])
+def signup():
+    if request.method == 'POST':
+        username = request.form['username']
+        password = request.form['password']
+        confirm_password = request.form['confirm_password']
+        if password != confirm_password:
+            return "<script>alert('Passwords do not match!'); window.history.back();</script>"
+        hashed_password = generate_password_hash(password)
+        conn = get_db_connection()
+        try:
+            conn.execute('INSERT INTO users (username, password) VALUES (?, ?)', (username, hashed_password))
+            conn.commit()
+            return redirect(url_for('login'))
+        except sqlite3.IntegrityError:
+            return "<script>alert('Username already exists!'); window.history.back();</script>"
+        finally:
+            conn.close()
+    return render_template('signup.html')
+@app.route('/logout')
+def logout():
+    session.clear()
+    return redirect(url_for('index'))
+if __name__ == '__main__':
+    app.run(debug=True)

full code.txt ADDED Viewed

	@@ -0,0 +1,861 @@

+main.php
+  <?php session_start(); ?>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Autonomous Traffic Management System</title>
+ <style>
+    body {
+      font-family: 'Georgia', serif;
+      margin: 0;
+      padding: 0;
+      background-color: #f0f5f9;
+      color: #333;
+    }
+    header {
+      background-color: #1e3a8a;
+      color: white;
+      padding: 1rem;
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+    .logo-title {
+      display: flex;
+      align-items: center;
+    }
+    .logo {
+      width: 50px;
+      height: 50px;
+      margin-right: 15px;
+      background-color: #fff;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 24px;
+      font-weight: bold;
+      color: #1e3a8a;
+    }
+    main {
+      padding: 2rem;
+      max-width: 1200px;
+      margin: 0 auto;
+    }
+    .content-container {
+      display: flex;
+      gap: 2rem;
+    }
+    #route-section, #stats-section {
+      flex: 1;
+    }
+    #map {
+      width: 100%;
+      height: 400px;
+      margin-bottom: 2rem;
+      border: 2px solid #ddd;
+      border-radius: 8px;
+      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    }
+    form {
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+      max-width: 400px;
+      background-color: #fff;
+      padding: 20px;
+      border-radius: 8px;
+      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    }
+    form label {
+      font-weight: bold;
+      color: #1e3a8a;
+    }
+    form input[type="text"] {
+      padding: 10px;
+      border: 1px solid #ddd;
+      border-radius: 4px;
+      font-size: 16px;
+    }
+    form button, .nav-btn, .login-btn {
+      background-color: #4caf50;
+      color: white;
+      border: none;
+      padding: 10px 15px;
+      cursor: pointer;
+      font-size: 16px;
+      border-radius: 4px;
+      transition: background-color 0.3s ease;
+    }
+    form button:hover, .nav-btn:hover, .login-btn:hover {
+      background-color: #21a271;
+    }
+    footer {
+      text-align: center;
+      padding: 1rem;
+      background-color: #1e3a8a;
+      color: white;
+      bottom: 0;
+      width: 100%;
+    }
+    h1 {
+      margin: 0;
+      font-size: 24px;
+    }
+    h2 {
+      color: #1e3a8a;
+      border-bottom: 2px solid #1e3a8a;
+      padding-bottom: 10px;
+    }
+    .login-btn {
+      background-color: #f59e0b;
+    }
+    .login-btn:hover {
+      background-color: #d97706;
+    }
+    .nav-buttons {
+      display: flex;
+      gap: 10px;
+    }
+    .nav-btn {
+            background-color: #4caf50;
+            color: white;
+            border: none;
+            padding: 8px 15px;
+            margin: 0 5px;
+            border-radius: 5px;
+            cursor: pointer;
+        }
+    #route-options button {
+      background-color: #e0e7ff;
+      color: #1e3a8a;
+      border: 1px solid #1e3a8a;
+      padding: 10px 15px;
+      margin: 5px;
+      border-radius: 4px;
+      cursor: pointer;
+      transition: background-color 0.3s ease;
+    }
+    #route-options button:hover {
+      background-color: #c7d2fe;
+    }
+    #traffic-toggle {
+      margin-right: 10px;
+    }
+    #traffic-stats-chart {
+      max-width: 100%;
+      background-color: #fff;
+      padding: 20px;
+      border-radius: 8px;
+      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    }
+  </style>
+ <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+ <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA0S_ArVIWsGXkPwpgIhCy2g4y7HlSamX8&libraries=geometry,places&callback=initMap" async defer></script>
+</head>
+<body>
+ <header>
+  <img src="https://cdn-icons-png.flaticon.com/512/3448/3448339.png" alt="Traffic Management Logo" class="logo">
+  <h1>Autonomous Traffic Management Dashboard</h1>
+  <div class="nav-buttons">
+    <a href="index.php">
+        <button class="nav-btn" >Search place</button>
+       </a>
+       <a href="<?php echo isset($_SESSION['username']) ? 'main.php' : 'login.php'; ?>">
+         <button class="nav-btn">Live Traffic & Find Route</button>
+        </a>
+  </div>
+<button class="login-btn" onclick="window.location.href='<?php echo isset($_SESSION['username']) ? 'logout.php' : 'login.php'; ?>'">
+    <?php echo isset($_SESSION['username']) ? "Hello, " . $_SESSION['username'] : "Hello, Login"; ?>
+</button>
+ </header>
+ <main>
+  <div class="content-container">
+    <!-- Find Route Section -->
+    <section id="route-section">
+      <h2>Find Route</h2>
+      <form id="route-form">
+        <label for="source-input">Source:</label>
+        <input id="source-input" type="text" placeholder="Enter source location">
+        <label for="destination-input">Destination:</label>
+        <input id="destination-input" type="text" placeholder="Enter destination location">
+        <button type="submit">Find</button>
+      </form>
+      <div id="travel-info"></div>
+      <div id="route-options" style="margin-top: 20px;"></div>
+    </section>
+    <!-- Traffic Stats Section -->
+    <section id="stats-section">
+      <h2>Traffic Statistics</h2>
+      <canvas id="traffic-stats-chart"></canvas>
+    </section>
+  </div>
+  <!-- Map Section -->
+  <section id="map-section">
+    <h2>Traffic Visualization</h2>
+    <div>
+      <label for="traffic-toggle">Show Traffic Layer:</label>
+      <input id="traffic-toggle" type="checkbox" checked>
+    </div>
+    <div id="map" style="height: 400px; width: 100%; margin-top: 10px;"></div>
+  </section>
+ </main>
+ <footer>
+  <p>&copy; Autonomous Traffic Management System Created By @RAVIRAJ kHARADE (RK)</p>
+ </footer>
+ <script>
+    let map;
+    let directionsService;
+    let directionsRenderer;
+    let trafficLayer;
+    function initMap() {
+        map = new google.maps.Map(document.getElementById('map'), {
+            center: { lat: 18.4889, lng: 74.0246 },
+            zoom: 13
+        });
+        trafficLayer = new google.maps.TrafficLayer();
+        trafficLayer.setMap(map);
+        directionsService = new google.maps.DirectionsService();
+        directionsRenderer = new google.maps.DirectionsRenderer({ map: map });
+        const sourceInput = document.getElementById('source-input');
+        const destinationInput = document.getElementById('destination-input');
+        new google.maps.places.Autocomplete(sourceInput);
+        new google.maps.places.Autocomplete(destinationInput);
+        // Add event listener to the traffic toggle checkbox
+        const trafficToggle = document.getElementById('traffic-toggle');
+        trafficToggle.addEventListener('change', () => {
+            if (trafficToggle.checked) {
+                trafficLayer.setMap(map);
+            } else {
+                trafficLayer.setMap(null);
+            }
+        });
+    }
+    async function calculateAndDisplayRoute(source, destination) {
+        try {
+            const response = await directionsService.route({
+                origin: source,
+                destination: destination,
+                travelMode: google.maps.TravelMode.DRIVING,
+                provideRouteAlternatives: true
+            });
+            directionsRenderer.setDirections(response);
+            const routes = response.routes;
+            displayAvailableRoutes(routes);
+        } catch (error) {
+            alert("Error calculating route: " + error.message);
+        }
+    }
+    function displayAvailableRoutes(routes) {
+        const routeOptionsDiv = document.getElementById('route-options');
+        routeOptionsDiv.innerHTML = '<h3>Available Routes:</h3>';
+        routes.forEach((route, index) => {
+            const distance = route.legs[0].distance.text;
+            const duration = route.legs[0].duration.text;
+            const routeButton = document.createElement('button');
+            routeButton.textContent = `Route ${index + 1}: ${distance}, ${duration}`;
+            routeButton.addEventListener('click', () => {
+                directionsRenderer.setRouteIndex(index);
+                checkLiveTrafficOnRoute(route);
+            });
+            routeOptionsDiv.appendChild(routeButton);
+        });
+    }
+    async function checkLiveTrafficOnRoute(route) {
+        const trafficDetails = [];
+        const path = route.overview_path;
+        for (let i = 0; i < path.length; i += 1) { // Sample every 10th point to reduce API calls
+            const point = path[i];
+            try {
+                const trafficData = await axios.get(`https://maps.googleapis.com/maps/api/distancematrix/json`, {
+                    params: {
+                        origins: `${point.lat()},${point.lng()}`,
+                        destinations: `${point.lat()},${point.lng()}`,
+                        departure_time: 'now',
+                        key: 'AIzaSyA0S_ArVIWsGXkPwpgIhCy2g4y7HlSamX8'
+                    }
+                });
+                const durationInTraffic = trafficData.data.rows[0].elements[0].duration_in_traffic;
+                if (durationInTraffic) {
+                    trafficDetails.push({
+                        lat: point.lat(),
+                        lng: point.lng(),
+                        duration: durationInTraffic.text
+                    });
+                } // this above function calculate the duration ising live traffic deatails using coradenates like point.lat() & Point.lng()
+            } catch (error) {
+                console.error("Error fetching traffic data: ", error);
+            }
+        }
+        if (trafficDetails.length > 0) {
+            displayTrafficAlert(trafficDetails);
+        } else {
+            alert("This route has no significant traffic. You can proceed.");
+        }
+    }
+    function displayTrafficAlert(trafficDetails) {
+        let message = "Heavy Traffic Detected:\n\n";
+        trafficDetails.forEach((detail, index) => {
+            message += `Traffic Point ${index + 1}: Latitude: ${detail.lat}, Longitude: ${detail.lng}, Duration in Traffic: ${detail.duration}\n`;
+        });
+        message += "\nThis route has heavy traffic. Consider choosing another route.";
+        alert(message);
+    }
+    document.getElementById('route-form').addEventListener('submit', (e) => {
+        e.preventDefault();
+        const sourceLocation = document.getElementById('source-input').value;
+        const destinationLocation = document.getElementById('destination-input').value;
+        calculateAndDisplayRoute(sourceLocation, destinationLocation);
+    });
+    const ctx = document.getElementById('traffic-stats-chart').getContext('2d');
+    new Chart(ctx, {
+        type: 'bar',
+        data: {
+            labels: ['Intersection 1', 'Intersection 2', 'Intersection 3'],
+            datasets: [{
+                label: 'Traffic Density',
+                data: [30, 45, 60],
+                backgroundColor: ['green', 'yellow', 'red']
+            }]
+        },
+        options: {
+            responsive: true,
+            plugins: {
+                legend: {
+                    display: true,
+                    position: 'top',
+                },
+                tooltip: {
+                    enabled: true,
+                }
+            },
+            scales: {
+                x: {
+                    title: {
+                        display: true,
+                        text: 'Intersections',
+                    }
+                },
+                y: {
+                    title: {
+                        display: true,
+                        text: 'Traffic Density',
+                    },
+                    min: 0,
+                    max: 100
+                }
+            }
+        }
+    });
+ </script>
+</body>
+</html>
+signup.php
+<?php
+if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+    include 'db.php';
+    $username = $_POST['username'];
+    $password = $_POST['password'];
+    $confirm_password = $_POST['confirm_password'];
+    if ($password !== $confirm_password) {
+        echo "<script>alert('Passwords do not match!'); window.history.back();</script>";
+        exit;
+    }
+    $hashed_password = password_hash($password, PASSWORD_BCRYPT);
+    $sql = "INSERT INTO users (username, password) VALUES ('$username', '$hashed_password')";
+    if ($conn->query($sql) === TRUE) {
+        header('Location: login.php');
+    } else {
+        echo "Error: " . $conn->error;
+    }
+}
+?>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Signup</title>
+    <style>
+        body {
+            font-family: 'Arial', sans-serif;
+            margin: 0;
+            padding: 0;
+            background: linear-gradient(135deg, #1d3557, #457b9d);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            color: #333;
+        }
+        .container {
+            background: #fff;
+            padding: 2rem;
+            border-radius: 10px;
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+            width: 350px;
+            text-align: center;
+        }
+        h2 {
+            color: #1d3557;
+            margin-bottom: 1.5rem;
+        }
+        .form input {
+            width: 100%;
+            padding: 12px;
+            margin: 10px 0;
+            border: 1px solid #ccc;
+            border-radius: 5px;
+            font-size: 1rem;
+            transition: border-color 0.3s ease;
+            box-sizing: border-box;
+        }
+        .form input:focus {
+            outline: none;
+            border-color: #457b9d;
+        }
+        .form button {
+            width: 100%;
+            padding: 12px;
+            margin: 15px 0;
+            background: #1d3557;
+            color: #fff;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            font-size: 1rem;
+            transition: background-color 0.3s ease;
+        }
+        .form button:hover {
+            background: #457b9d;
+        }
+        .form a {
+            display: block;
+            color: #1d3557;
+            text-decoration: none;
+            margin-top: 15px;
+            font-size: 0.9rem;
+            transition: color 0.3s ease;
+        }
+        .form a:hover {
+            color: #457b9d;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h2>Signup</h2>
+        <form class="form" method="POST" action="">
+            <input type="text" name="username" placeholder="Username" required>
+            <input type="password" name="password" placeholder="Password" required>
+            <input type="password" name="confirm_password" placeholder="Confirm Password" required>
+            <button type="submit">Signup</button>
+            <a href="login.php">Already have an account? Login</a>
+        </form>
+    </div>
+</body>
+</html>
+db.php
+<?php
+$servername = "localhost";
+$username = "root";
+$password = "";
+$database = "traffic_management";
+$conn = new mysqli($servername, $username, $password, $database);
+if ($conn->connect_error) {
+    die("Connection failed: " . $conn->connect_error);
+}
+?>
+index.php
+<?php session_start(); ?>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Autonomous Traffic Management Dashboard</title>
+    <style>
+        body {
+            font-family: 'Georgia', serif;
+            margin: 0;
+            padding: 0;
+            background-color: #f0f5f9;
+            color: #333;
+        }
+        form button, .nav-btn, .login-btn {
+            background-color: #4caf50;
+            color: white;
+            border: none;
+            padding: 10px 15px;
+            cursor: pointer;
+            font-size: 16px;
+            border-radius: 4px;
+            transition: background-color 0.3s ease;
+        }
+        form button:hover, .nav-btn:hover, .login-btn:hover {
+            background-color: #45a049;
+        }
+        header {
+            background-color: #1e3a8a;
+            color: white;
+            padding: 1rem;
+            position: relative;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+        }
+        footer {
+            text-align: center;
+            padding: 1rem;
+            background-color: #1e3a8a;
+            color: white;
+            bottom: 0;
+            width: 100%;
+        }
+        .logo-title {
+            display: flex;
+            align-items: center;
+        }
+        .logo {
+            width: 50px;
+            height: 50px;
+            margin-right: 15px;
+            background-color: #fff;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 24px;
+            font-weight: bold;
+            color: #1e3a8a;
+        }
+        main {
+            padding: 2rem;
+            max-width: 1200px;
+            margin: 0 auto;
+        }
+        h1 {
+            margin: 0;
+            font-size: 24px;
+        }
+        h2 {
+            color: #1e3a8a;
+            border-bottom: 2px solid #1e3a8a;
+            padding-bottom: 10px;
+        }
+        .login-btn {
+            background-color: #f59e0b;
+        }
+        .login-btn:hover {
+            background-color: #d97706;
+        }
+        .nav-buttons {
+            display: flex;
+            gap: 10px;
+        }
+        .nav-btn {
+            background-color: #4caf50;
+            color: white;
+            border: none;
+            padding: 8px 15px;
+            margin: 0 5px;
+            border-radius: 5px;
+            cursor: pointer;
+        }
+        #map {
+            height: 550px;
+            width: 100%;
+            margin-top: 20px;
+        }
+        #pac-input {
+            width: 300px;
+            padding: 10px;
+            font-size: 16px;
+            margin: 20px auto;
+            display: block;
+            border: 1px solid #bdc3c7;
+            border-radius: 5px;
+        }
+    </style>
+</head>
+<body>
+    <header>
+        <img src="https://cdn-icons-png.flaticon.com/512/3448/3448339.png" alt="Traffic Management Logo" class="logo">
+        <h1>Autonomous Traffic Management Dashboard</h1>
+        <div class="nav-buttons">
+            <a href="index.php">
+                <button class="nav-btn">Search place</button>
+            </a>
+            <a href="<?php echo isset($_SESSION['username']) ? 'main.php' : 'login.php'; ?>">
+                <button class="nav-btn">Live Traffic & Find Route</button>
+            </a>
+        </div>
+        <button class="login-btn" onclick="window.location.href='<?php echo isset($_SESSION['username']) ? 'logout.php' : 'login.php'; ?>'">
+            <?php echo isset($_SESSION['username']) ? "Hello, " . $_SESSION['username'] : "Hello, Login"; ?>
+        </button>
+    </header>
+    <input id="pac-input" type="text" placeholder="Search for a place">
+    <div id="map"></div>
+    <script async defer
+        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA0S_ArVIWsGXkPwpgIhCy2g4y7HlSamX8&libraries=geometry,places&callback=initMap">
+    </script>
+    <script>
+        let map;
+        let autocomplete;
+        function initMap() {
+            map = new google.maps.Map(document.getElementById('map'), {
+                center: { lat: 18.4889, lng: 74.0246 },
+                zoom: 13
+            });
+            const input = document.getElementById('pac-input');
+            autocomplete = new google.maps.places.Autocomplete(input);
+            autocomplete.bindTo('bounds', map);
+            autocomplete.addListener('place_changed', () => {
+                const place = autocomplete.getPlace();
+                if (!place.geometry) {
+                    console.log("No details available for the input: '" + place.name + "'");
+                    return;
+                }
+                if (place.geometry.viewport) {
+                    map.fitBounds(place.geometry.viewport);
+                } else {
+                    map.setCenter(place.geometry.location);
+                    map.setZoom(17);
+                }
+                new google.maps.Marker({
+                    position: place.geometry.location,
+                    map: map
+                });
+            });
+        }
+    </script>
+</body>
+</html>
+login.php
+<?php
+session_start();
+if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+    include 'db.php';
+    $username = $_POST['username'];
+    $password = $_POST['password'];
+    $sql = "SELECT * FROM users WHERE username = '$username'";
+    $result = $conn->query($sql);
+    if ($result->num_rows > 0) {
+        $row = $result->fetch_assoc();
+        if (password_verify($password, $row['password'])) {
+            $_SESSION['username'] = $row['username'];
+            $redirectPage = $_SESSION['referrer'] ?? 'index.php';
+            unset($_SESSION['referrer']);
+            header("Location: $redirectPage");
+            exit();
+        } else {
+            $error = "Invalid username or password.";
+        }
+    } else {
+        $error = "Invalid username or password.";
+    }
+}
+if (!isset($_SESSION['referrer']) && !str_contains($_SERVER['PHP_SELF'], 'login.php') && !str_contains($_SERVER['PHP_SELF'], 'signup.php')) {
+    $_SESSION['referrer'] = $_SERVER['HTTP_REFERER'] ?? 'index.php';
+}
+?>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Login</title>
+    <style>
+        body {
+            font-family: 'Arial', sans-serif;
+            margin: 0;
+            padding: 0;
+            background: linear-gradient(135deg, #1d3557, #457b9d);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            color: #333;
+        }
+        .container {
+            background: #fff;
+            padding: 2rem;
+            border-radius: 10px;
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+            width: 350px;
+            text-align: center;
+        }
+        h2 {
+            color: #1d3557;
+            margin-bottom: 1.5rem;
+        }
+        .form input {
+            width: 100%;
+            padding: 10px;
+            margin: 10px 0;
+            border: 1px solid #ccc;
+            border-radius: 5px;
+            font-size: 1rem;
+            transition: border-color 0.3s ease;
+        }
+        .form input:focus {
+            outline: none;
+            border-color: #457b9d;
+        }
+        .form button {
+            width: 100%;
+            padding: 12px;
+            margin: 15px 0;
+            background: #1d3557;
+            color: #fff;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            font-size: 1rem;
+            transition: background-color 0.3s ease;
+        }
+        .form button:hover {
+            background: #457b9d;
+        }
+        .form a {
+            display: block;
+            color: #1d3557;
+            text-decoration: none;
+            margin-top: 15px;
+            font-size: 0.9rem;
+            transition: color 0.3s ease;
+        }
+        .form a:hover {
+            color: #457b9d;
+        }
+        .error {
+            color: #e63946;
+            margin-top: 10px;
+            font-size: 0.9rem;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h2>Login</h2>
+        <form class="form" method="POST" action="">
+            <input type="text" name="username" placeholder="Username" required>
+            <input type="password" name="password" placeholder="Password" required>
+            <button type="submit">Login</button>
+            <a href="signup.php">Don't have an account? Sign up</a>
+        </form>
+        <?php if (isset($error)) echo "<p class='error'>$error</p>"; ?>
+    </div>
+</body>
+</html>
+logout.php
+<?php
+session_start();
+session_destroy();
+header('Location: index.php');
+exit();
+?>

requirements.txt ADDED Viewed

	@@ -0,0 +1,2 @@


1	+ Flask==2.3.2
2	+ bcrypt==4.0.1

static/css/style.css ADDED Viewed

	@@ -0,0 +1,234 @@

+body {
+    font-family: 'Georgia', serif;
+    margin: 0;
+    padding: 0;
+    background-color: #f0f5f9;
+    color: #333;
+}
+header {
+    background-color: #1e3a8a;
+    color: white;
+    padding: 1rem;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+.logo {
+    width: 50px;
+    height: 50px;
+    margin-right: 15px;
+    background-color: #fff;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 24px;
+    font-weight: bold;
+    color: #1e3a8a;
+}
+main {
+    padding: 2rem;
+    max-width: 1200px;
+    margin: 0 auto;
+}
+.content-container {
+    display: flex;
+    gap: 2rem;
+}
+#route-section, #stats-section {
+    flex: 1;
+}
+#map {
+    width: 100%;
+    height: 400px;
+    margin-bottom: 2rem;
+    border: 2px solid #ddd;
+    border-radius: 8px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+form {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    max-width: 400px;
+    background-color: #fff;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+form label {
+    font-weight: bold;
+    color: #1e3a8a;
+}
+form input[type="text"] {
+    padding: 10px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    font-size: 16px;
+}
+form button, .nav-btn, .login-btn {
+    background-color: #4caf50;
+    color: white;
+    border: none;
+    padding: 10px 15px;
+    cursor: pointer;
+    font-size: 16px;
+    border-radius: 4px;
+    transition: background-color 0.3s ease;
+}
+form button:hover, .nav-btn:hover, .login-btn:hover {
+    background-color: #45a049;
+}
+footer {
+    text-align: center;
+    padding: 1rem;
+    background-color: #1e3a8a;
+    color: white;
+    bottom: 0;
+    width: 100%;
+}
+h1 {
+    margin: 0;
+    font-size: 24px;
+}
+h2 {
+    color: #1e3a8a;
+    border-bottom: 2px solid #1e3a8a;
+    padding-bottom: 10px;
+}
+.login-btn {
+    background-color: #f59e0b;
+}
+.login-btn:hover {
+    background-color: #d97706;
+}
+.nav-buttons {
+    display: flex;
+    gap: 10px;
+}
+.nav-btn {
+    background-color: #4caf50;
+    color: white;
+    border: none;
+    padding: 8px 15px;
+    margin: 0 5px;
+    border-radius: 5px;
+    cursor: pointer;
+}
+#route-options button {
+    background-color: #e0e7ff;
+    color: #1e3a8a;
+    border: 1px solid #1e3a8a;
+    padding: 10px 15px;
+    margin: 5px;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+#route-options button:hover {
+    background-color: #c7d2fe;
+}
+#traffic-toggle {
+    margin-right: 10px;
+}
+#traffic-stats-chart {
+    max-width: 100%;
+    background-color: #fff;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+.container {
+    background: #fff;
+    padding: 2rem;
+    border-radius: 10px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+    width: 350px;
+    text-align: center;
+}
+.form input {
+    width: 100%;
+    padding: 12px;
+    margin: 10px 0;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    font-size: 1rem;
+    transition: border-color 0.3s ease;
+    box-sizing: border-box;
+}
+.form input:focus {
+    outline: none;
+    border-color: #457b9d;
+}
+.form button {
+    width: 100%;
+    padding: 12px;
+    margin: 15px 0;
+    background: #1d3557;
+    color: #fff;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 1rem;
+    transition: background-color 0.3s ease;
+}
+.form button:hover {
+    background: #457b9d;
+}
+.form a {
+    display: block;
+    color: #1d3557;
+    text-decoration: none;
+    margin-top: 15px;
+    font-size: 0.9rem;
+    transition: color 0.3s ease;
+}
+.form a:hover {
+    color: #457b9d;
+}
+.error {
+    color: #e63946;
+    margin-top: 10px;
+    font-size: 0.9rem;
+}
+#pac-input {
+    width: 300px;
+    padding: 10px;
+    font-size: 16px;
+    margin: 20px auto;
+    display: block;
+    border: 1px solid #bdc3c7;
+    border-radius: 5px;
+}

templates/index.html ADDED Viewed

	@@ -0,0 +1,70 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Autonomous Traffic Management Dashboard</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+</head>
+<body>
+    <header>
+        <img src="https://cdn-icons-png.flaticon.com/512/3448/3448339.png" alt="Traffic Management Logo" class="logo">
+        <h1>Autonomous Traffic Management Dashboard</h1>
+        <div class="nav-buttons">
+            <a href="{{ url_for('index') }}">
+                <button class="nav-btn">Search place</button>
+            </a>
+            <a href="{{ url_for('main_dashboard') if 'username' in session else url_for('login') }}">
+                <button class="nav-btn">Live Traffic & Find Route</button>
+            </a>
+        </div>
+        <button class="login-btn" onclick="window.location.href='{{ url_for('logout') if 'username' in session else url_for('login') }}'">
+            {{ "Hello, " + session['username'] if 'username' in session else "Hello, Login" }}
+        </button>
+    </header>
+    <input id="pac-input" type="text" placeholder="Search for a place">
+    <div id="map"></div>
+    <script async defer
+        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA0S_ArVIWsGXkPwpgIhCy2g4y7HlSamX8&libraries=geometry,places&callback=initMap">
+    </script>
+    <script>
+        let map;
+        let autocomplete;
+        function initMap() {
+            map = new google.maps.Map(document.getElementById('map'), {
+                center: { lat: 18.4889, lng: 74.0246 },
+                zoom: 13
+            });
+            const input = document.getElementById('pac-input');
+            autocomplete = new google.maps.places.Autocomplete(input);
+            autocomplete.bindTo('bounds', map);
+            autocomplete.addListener('place_changed', () => {
+                const place = autocomplete.getPlace();
+                if (!place.geometry) {
+                    console.log("No details available for the input: '" + place.name + "'");
+                    return;
+                }
+                if (place.geometry.viewport) {
+                    map.fitBounds(place.geometry.viewport);
+                } else {
+                    map.setCenter(place.geometry.location);
+                    map.setZoom(17);
+                }
+                new google.maps.Marker({
+                    position: place.geometry.location,
+                    map: map
+                });
+            });
+        }
+    </script>
+</body>
+</html>

templates/login.html ADDED Viewed

	@@ -0,0 +1,91 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Login</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+</head>    <style>
+        body {
+            font-family: 'Arial', sans-serif;
+            margin: 0;
+            padding: 0;
+            background: linear-gradient(135deg, #1d3557, #457b9d);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            color: #333;
+        }
+        .container {
+            background: #fff;
+            padding: 2rem;
+            border-radius: 10px;
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+            width: 350px;
+            text-align: center;
+        }
+        h2 {
+            color: #1d3557;
+            margin-bottom: 1.5rem;
+        }
+        .form input {
+            width: 100%;
+            padding: 10px;
+            margin: 10px 0;
+            border: 1px solid #ccc;
+            border-radius: 5px;
+            font-size: 1rem;
+            transition: border-color 0.3s ease;
+        }
+        .form input:focus {
+            outline: none;
+            border-color: #457b9d;
+        }
+        .form button {
+            width: 100%;
+            padding: 12px;
+            margin: 15px 0;
+            background: #1d3557;
+            color: #fff;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            font-size: 1rem;
+            transition: background-color 0.3s ease;
+        }
+        .form button:hover {
+            background: #457b9d;
+        }
+        .form a {
+            display: block;
+            color: #1d3557;
+            text-decoration: none;
+            margin-top: 15px;
+            font-size: 0.9rem;
+            transition: color 0.3s ease;
+        }
+        .form a:hover {
+            color: #457b9d;
+        }
+        .error {
+            color: #e63946;
+            margin-top: 10px;
+            font-size: 0.9rem;
+        }
+    </style>
+</head><body>
+    <div class="container">
+        <h2>Login</h2>
+        <form class="form" method="POST" action="{{ url_for('login') }}">
+            <input type="text" name="username" placeholder="Username" required>
+            <input type="password" name="password" placeholder="Password" required>
+            <button type="submit">Login</button>
+            <a href="{{ url_for('signup') }}">Don't have an account? Sign up</a>
+        </form>
+        {% if error %}
+            <p class="error">{{ error }}</p>
+        {% endif %}
+    </div>
+</body>
+</html>

templates/main.html ADDED Viewed

	@@ -0,0 +1,239 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Autonomous Traffic Management System</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA0S_ArVIWsGXkPwpgIhCy2g4y7HlSamX8&libraries=geometry,places&callback=initMap" async defer></script>
+</head>
+<body>
+    <header>
+        <img src="https://cdn-icons-png.flaticon.com/512/3448/3448339.png" alt="Traffic Management Logo" class="logo">
+        <h1>Autonomous Traffic Management Dashboard</h1>
+        <div class="nav-buttons">
+            <a href="{{ url_for('index') }}">
+                <button class="nav-btn">Search place</button>
+            </a>
+            <a href="{{ url_for('main_dashboard') }}">
+                <button class="nav-btn">Live Traffic & Find Route</button>
+            </a>
+        </div>
+        <button class="login-btn" onclick="window.location.href='{{ url_for('logout') if 'username' in session else url_for('login') }}'">
+            {{ "Hello, " + session['username'] if 'username' in session else "Hello, Login" }}
+        </button>
+    </header>
+    <main>
+        <div class="content-container">
+            <!-- Find Route Section -->
+            <section id="route-section">
+                <h2>Find Route</h2>
+                <form id="route-form">
+                    <label for="source-input">Source:</label>
+                    <input id="source-input" type="text" placeholder="Enter source location">
+                    <label for="destination-input">Destination:</label>
+                    <input id="destination-input" type="text" placeholder="Enter destination location">
+                    <button type="submit">Find</button>
+                </form>
+                <div id="travel-info"></div>
+                <div id="route-options" style="margin-top: 20px;"></div>
+            </section>
+            <!-- Traffic Stats Section -->
+            <section id="stats-section">
+                <h2>Traffic Statistics</h2>
+                <canvas id="traffic-stats-chart"></canvas>
+            </section>
+        </div>
+        <!-- Map Section -->
+        <section id="map-section">
+            <h2>Traffic Visualization</h2>
+            <div>
+                <label for="traffic-toggle">Show Traffic Layer:</label>
+                <input id="traffic-toggle" type="checkbox" checked>
+            </div>
+            <div id="map" style="height: 400px; width: 100%; margin-top: 10px;"></div>
+        </section>
+    </main>
+    <footer>
+        <p>Autonomous Traffic Management System</p>
+    </footer>
+    <script>
+        let map;
+        let directionsService;
+        let directionsRenderer;
+        let trafficLayer;
+        function initMap() {
+            map = new google.maps.Map(document.getElementById('map'), {
+                center: { lat: 18.4889, lng: 74.0246 },
+                zoom: 13
+            });
+            trafficLayer = new google.maps.TrafficLayer();
+            trafficLayer.setMap(map);
+            directionsService = new google.maps.DirectionsService();
+            directionsRenderer = new google.maps.DirectionsRenderer({ map: map });
+            const sourceInput = document.getElementById('source-input');
+            const destinationInput = document.getElementById('destination-input');
+            new google.maps.places.Autocomplete(sourceInput);
+            new google.maps.places.Autocomplete(destinationInput);
+            // Add event listener to the traffic toggle checkbox
+            const trafficToggle = document.getElementById('traffic-toggle');
+            trafficToggle.addEventListener('change', () => {
+                if (trafficToggle.checked) {
+                    trafficLayer.setMap(map);
+                } else {
+                    trafficLayer.setMap(null);
+                }
+            });
+        }
+        async function calculateAndDisplayRoute(source, destination) {
+            try {
+                const response = await directionsService.route({
+                    origin: source,
+                    destination: destination,
+                    travelMode: google.maps.TravelMode.DRIVING,
+                    provideRouteAlternatives: true
+                });
+                directionsRenderer.setDirections(response);
+                const routes = response.routes;
+                displayAvailableRoutes(routes);
+            } catch (error) {
+                alert("Error calculating route: " + error.message);
+            }
+        }
+        function displayAvailableRoutes(routes) {
+            const routeOptionsDiv = document.getElementById('route-options');
+            routeOptionsDiv.innerHTML = '<h3>Available Routes:</h3>';
+            routes.forEach((route, index) => {
+                const distance = route.legs[0].distance.text;
+                const duration = route.legs[0].duration.text;
+                const routeButton = document.createElement('button');
+                routeButton.textContent = `Route ${index + 1}: ${distance}, ${duration}`;
+                routeButton.addEventListener('click', () => {
+                    directionsRenderer.setRouteIndex(index);
+                    checkLiveTrafficOnRoute(route);
+                });
+                routeOptionsDiv.appendChild(routeButton);
+            });
+        }
+        async function checkLiveTrafficOnRoute(route) {
+            const trafficDetails = [];
+            const path = route.overview_path;
+            for (let i = 0; i < path.length; i += 1) {
+                const point = path[i];
+                try {
+                    const trafficData = await axios.get(`https://maps.googleapis.com/maps/api/distancematrix/json`, {
+                        params: {
+                            origins: `${point.lat()},${point.lng()}`,
+                            destinations: `${point.lat()},${point.lng()}`,
+                            departure_time: 'now',
+                            key: 'AIzaSyA0S_ArVIWsGXkPwpgIhCy2g4y7HlSamX8'
+                        }
+                    });
+                    const durationInTraffic = trafficData.data.rows[0].elements[0].duration_in_traffic;
+                    if (durationInTraffic) {
+                        trafficDetails.push({
+                            lat: point.lat(),
+                            lng: point.lng(),
+                            duration: durationInTraffic.text
+                        });
+                    }
+                } catch (error) {
+                    console.error("Error fetching traffic data: ", error);
+                }
+            }
+            if (trafficDetails.length > 0) {
+                displayTrafficAlert(trafficDetails);
+            } else {
+                alert("This route has no significant traffic. You can proceed.");
+            }
+        }
+        function displayTrafficAlert(trafficDetails) {
+            let message = "Heavy Traffic Detected:\n\n";
+            trafficDetails.forEach((detail, index) => {
+                message += `Traffic Point ${index + 1}: Latitude: ${detail.lat}, Longitude: ${detail.lng}, Duration in Traffic: ${detail.duration}\n`;
+            });
+            message += "\nThis route has heavy traffic. Consider choosing another route.";
+            alert(message);
+        }
+        document.getElementById('route-form').addEventListener('submit', (e) => {
+            e.preventDefault();
+            const sourceLocation = document.getElementById('source-input').value;
+            const destinationLocation = document.getElementById('destination-input').value;
+            calculateAndDisplayRoute(sourceLocation, destinationLocation);
+        });
+        const ctx = document.getElementById('traffic-stats-chart').getContext('2d');
+        new Chart(ctx, {
+            type: 'bar',
+            data: {
+                labels: ['Intersection 1', 'Intersection 2', 'Intersection 3'],
+                datasets: [{
+                    label: 'Traffic Density',
+                    data: [30, 45, 60],
+                    backgroundColor: ['green', 'yellow', 'red']
+                }]
+            },
+            options: {
+                responsive: true,
+                plugins: {
+                    legend: {
+                        display: true,
+                        position: 'top',
+                    },
+                    tooltip: {
+                        enabled: true,
+                    }
+                },
+                scales: {
+                    x: {
+                        title: {
+                            display: true,
+                            text: 'Intersections',
+                        }
+                    },
+                    y: {
+                        title: {
+                            display: true,
+                            text: 'Traffic Density',
+                        },
+                        min: 0,
+                        max: 100
+                    }
+                }
+            }
+        });
+    </script>
+</body>
+</html>

templates/signup.html ADDED Viewed

	@@ -0,0 +1,86 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Signup</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+    <style>
+        body {
+            font-family: 'Arial', sans-serif;
+            margin: 0;
+            padding: 0;
+            background: linear-gradient(135deg, #1d3557, #457b9d);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            color: #333;
+        }
+        .container {
+            background: #fff;
+            padding: 2rem;
+            border-radius: 10px;
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+            width: 350px;
+            text-align: center;
+        }
+        h2 {
+            color: #1d3557;
+            margin-bottom: 1.5rem;
+        }
+        .form input {
+            width: 100%;
+            padding: 12px;
+            margin: 10px 0;
+            border: 1px solid #ccc;
+            border-radius: 5px;
+            font-size: 1rem;
+            transition: border-color 0.3s ease;
+            box-sizing: border-box;
+        }
+        .form input:focus {
+            outline: none;
+            border-color: #457b9d;
+        }
+        .form button {
+            width: 100%;
+            padding: 12px;
+            margin: 15px 0;
+            background: #1d3557;
+            color: #fff;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            font-size: 1rem;
+            transition: background-color 0.3s ease;
+        }
+        .form button:hover {
+            background: #457b9d;
+        }
+        .form a {
+            display: block;
+            color: #1d3557;
+            text-decoration: none;
+            margin-top: 15px;
+            font-size: 0.9rem;
+            transition: color 0.3s ease;
+        }
+        .form a:hover {
+            color: #457b9d;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h2>Signup</h2>
+        <form class="form" method="POST" action="{{ url_for('signup') }}">
+            <input type="text" name="username" placeholder="Username" required>
+            <input type="password" name="password" placeholder="Password" required>
+            <input type="password" name="confirm_password" placeholder="Confirm Password" required>
+            <button type="submit">Signup</button>
+            <a href="{{ url_for('login') }}">Already have an account? Login</a>
+        </form>
+    </div>
+</body>
+</html>

traffic_management.db ADDED Viewed

Binary file (16.4 kB). View file