Upload 31 files

.gitattributes

@@ -33,3 +33,7 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+static/videos/crime_login.mp4 filter=lfs diff=lfs merge=lfs -text
+static/videos/crime.mp4 filter=lfs diff=lfs merge=lfs -text
+templates/crime_distribution_district.html filter=lfs diff=lfs merge=lfs -text
+templates/Distribution_of_Accused_Ages.html filter=lfs diff=lfs merge=lfs -text

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Britto Sam Jose J
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,11 +1,89 @@
----
-title: Karnataka State Police Hackathon-police-rescue
-emoji: ⚡
-colorFrom: purple
-colorTo: indigo
-sdk: docker
-pinned: false
-license: mit
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Crime Prediction and Forecasting Web Application
+
+## Overview
+This web application is developed for the KSP Hackathon, aimed at predicting and forecasting crime trends in various districts. The application utilizes machine learning models to predict the likelihood of crimes based on various inputs and provides visualizations for crime data. 
+
+## Installation and Setup
+To run the application, follow these steps:
+
+1. **Clone the repository**:
+    ```bash
+    git clone <repository-url>
+    cd <repository-directory>
+    ```
+
+2. **Install required libraries**:
+    Make sure you have `pip` installed, then run:
+    ```bash
+    pip install -r requirements.txt
+    ```
+
+3. **Run the application**:
+    ```bash
+    python app.py
+    ```
+
+4. **Access the application**:
+    Open your browser and go to `http://0.0.0.0:5000/`.
+
+5. **Login credentials**:
+    - **Username**: `admin`
+    - **Password**: `admin123`
+
+## File Structure
+- `app.py`: Main application script containing all routes and logic.
+- `templates/`: Directory containing HTML templates for rendering web pages.
+- `static/`: Directory for static files such as CSS and JavaScript.
+- `models/`: Directory containing pre-trained models and data files.
+- `requirements.txt`: File containing a list of Python dependencies.
+
+## Functionality
+### Web Pages
+- **Login Page (`/`)**: User login with predefined credentials.
+- **Index Page (`/index`)**: Dashboard overview after logging in.
+- **District Pages**: Separate pages for each district, e.g., `/Bagalkot`, `/Bengaluru_City`.
+- **Crime Distribution (`/crime_distribution_district`)**: Visualize crime distribution across districts.
+- **Accused Age Distribution (`/Distribution_of_Accused_Ages`)**: Visualize age distribution of accused individuals.
+- **Forecast Crime (`/forecast_crime`)**: Predict and forecast future crime trends.
+- **Recent Crimes (`/Recent_Crimes`)**: Display recent crime data.
+- **Heat Map (`/heat-map`)**: Heat map visualization of crime incidents.
+- **Crime Marker (`/crime-marker`)**: Marker map visualization for crime locations.
+- **Cluster Analysis (`/cluster`)**: Display clustering analysis of crime data.
+- **Crime Prediction (`/predict`)**: Predict the likelihood of crime based on user inputs.
+- **Future Crime Forecast (`/future-crime-forecast`)**: Forecast future crime trends using ARIMA model.
+
+### Models and Data
+- **Logistic Regression Model** (`logistic_regression_model.pkl`): Used for predicting crime likelihood.
+- **Deployment Plan** (`deployment_plan.pkl`): Contains cluster information and deployment strategies.
+- **Crime Data** (`predicted_crime.pkl`): Contains predicted crime data for future years.
+- **ARIMA Model** (`arima_model.pkl`): Time series model for forecasting future crime trends.
+
+## Usage
+### Predict Crime
+1. Navigate to `/predict`.
+2. Enter the required details: age, sex, present city, and present state.
+3. Submit the form to get the prediction result.
+
+### Get Closest Cluster
+1. Navigate to `/get-closest-cluster`.
+2. Provide latitude and longitude to get the closest crime cluster details.
+
+### Crime Prediction for Future Years
+1. Navigate to `/crime-prediction`.
+2. Select the year (2025 or 2026) to view predicted crime trends for each month.
+
+### Future Crime Forecast
+1. Navigate to `/future-crime-forecast`.
+2. Enter the start date and the number of future steps to forecast.
+3. View the forecasted crime trend plot and data.
+
+## Prototype Link
+For a live demo of the application, visit the prototype link: 
+[Crime Prediction App](https://super-umbrella-pj7j4xpp49v9c6g4g-5000.app.github.dev/)
+
+## Notes
+- Ensure that all the necessary models and data files are present in the `models/` directory before running the application.
+- The application runs on Flask and requires the necessary dependencies listed in `requirements.txt`.
+
+## Contact
+For any issues or inquiries, please contact [brittosamjosej@gmail.com].

app.py

@@ -0,0 +1,236 @@
+from flask import Flask, render_template, request, jsonify, send_from_directory
+import pickle
+import pandas as pd
+import plotly.express as px
+import os
+import joblib
+from geopy.distance import geodesic
+import matplotlib.pyplot as plt
+import io
+import base64
+
+app = Flask(__name__)
+
+# Load models
+with open(r'C:\Users\hp\Downloads\flask\models\logistic_regression_model.pkl', 'rb') as f:
+    logistic_model = pickle.load(f)
+
+with open(r'C:\Users\hp\Downloads\flask\models\deployment_plan.pkl', 'rb') as file:
+    deployment_plan = pickle.load(file)
+centroids = {key: value['cluster_centroid'] for key, value in deployment_plan.items()}
+
+def load_crime_data():
+    pickle_path = r'C:\Users\hp\Downloads\flask\models\predicted_crime.pkl'
+    if os.path.exists(pickle_path):
+        try:
+            data = joblib.load(pickle_path)
+        except (ModuleNotFoundError, ImportError):
+            with open(pickle_path, 'rb') as f:
+                data = pickle.load(f)
+        if 'predicted_df_2025' in data and 'predicted_df_2026' in data:
+            return data
+        else:
+            raise KeyError("Expected keys ('predicted_df_2025', 'predicted_df_2026') not found in data.")
+    else:
+        raise FileNotFoundError("Pickle file 'predicted_crime.pkl' not found.")
+try:
+    crime_data = load_crime_data()
+except (FileNotFoundError, KeyError, ImportError) as e:
+    crime_data = None
+    print(f"Error loading data: {e}")
+
+def load_arima_model():
+    pickle_path = r"C:\Users\hp\Downloads\flask\models\arima_model.pkl"
+    if not os.path.exists(pickle_path):
+        raise FileNotFoundError(f"File not found: {pickle_path}")
+    with open(pickle_path, 'rb') as f:
+        return pickle.load(f)
+
+@app.route('/')
+def login():
+    return render_template('login.html')
+
+@app.route('/index')
+def index():
+    return render_template('index.html')
+
+@app.route('/Bagalkot')
+def bagalkot():
+    return render_template('Bagalkot.html')
+
+@app.route('/Bengaluru_City')
+def bengaluru_city():
+    return render_template('Bengaluru_City.html')
+
+@app.route('/Bengaluru_district')
+def bengaluru_district():
+    return render_template('Bengaluru_district.html')
+
+@app.route('/crime_distribution_district')
+def crime_distribution_district():
+    return render_template('crime_distribution_district.html')
+
+@app.route('/Distribution_of_Accused_Ages')
+def distribution_of_accused_ages():
+    return render_template('Distribution_of_Accused_Ages.html')
+
+@app.route('/forecast_crime')
+def forecast_crime():
+    return render_template('forecast_crime.html')
+
+@app.route('/Mandya')
+def mandya():
+    return render_template('Mandya.html')
+
+@app.route('/Recent_Crimes')
+def recent_crimes():
+    return render_template('Recent_Crimes.html')
+
+@app.route('/Shivamogga')
+def shivamogga():
+    return render_template('Shivamogga.html')
+
+@app.route('/Tumakuru')
+def tumakuru():
+    return render_template('Tumakuru.html')
+
+@app.route('/heat-map')
+def heat_map():
+    return render_template('heat-map.html')
+
+@app.route('/crime-marker')
+def crime_map():
+    return render_template('crime_map.html')
+
+@app.route('/predict', methods=['GET', 'POST'])
+def predict():
+    predicted_status = ""
+    if request.method == 'POST':
+        age = int(request.form['age'])
+        sex = request.form['sex']
+        present_city = request.form['present_city']
+        present_state = request.form['present_state']
+        sex_female = 1 if sex == 'FEMALE' else 0
+        sex_male = 1 if sex == 'MALE' else 0
+        city_bengaluru = 1 if present_city == 'Bengaluru City' else 0
+        state_karnataka = 1 if present_state == 'Karnataka' else 0
+        input_data = pd.DataFrame({
+            'age': [age],
+            'Sex_FEMALE': [sex_female],
+            'Sex_MALE': [sex_male],
+            'PresentCity_Bengaluru City': [city_bengaluru],
+            'PresentState_Karnataka': [state_karnataka]
+        })
+        prediction = logistic_model.predict(input_data)
+        predicted_status = prediction[0]
+    elif request.method == 'GET':
+        age = int(request.args.get('age', 0))
+        sex = request.args.get('sex', '')
+        present_city = request.args.get('present_city', '')
+        present_state = request.args.get('present_state', '')
+        sex_female = 1 if sex == 'FEMALE' else 0
+        sex_male = 1 if sex == 'MALE' else 0
+        city_bengaluru = 1 if present_city == 'Bengaluru City' else 0
+        state_karnataka = 1 if present_state == 'Karnataka' else 0
+        input_data = pd.DataFrame({
+            'age': [age],
+            'Sex_FEMALE': [sex_female],
+            'Sex_MALE': [sex_male],
+            'PresentCity_Bengaluru City': [city_bengaluru],
+            'PresentState_Karnataka': [state_karnataka]
+        })
+        prediction = logistic_model.predict(input_data)
+        predicted_status = prediction[0]
+    return render_template('behavior.html', predicted_status=predicted_status)
+
+@app.route('/cluster', methods=['GET'])
+def cluster():
+    return render_template('cluster.html')
+
+@app.route('/get-closest-cluster', methods=['GET'])
+def get_closest_cluster():
+    latitude = float(request.args.get('latitude'))
+    longitude = float(request.args.get('longitude'))
+
+    closest_cluster = min(
+        centroids.keys(),
+        key=lambda c: geodesic(
+            (latitude, longitude),
+            (centroids[c]['Latitude'], centroids[c]['Longitude'])
+        ).km
+    )
+
+    cluster_data = deployment_plan[closest_cluster]
+
+    return jsonify({
+        'closest_cluster': closest_cluster,
+        'cluster_centroid': cluster_data['cluster_centroid'],
+        'number_of_incidents': cluster_data['number_of_incidents'],
+        'suggestions': cluster_data['suggestions'],
+    }), 200
+
+@app.route('/crime-prediction', methods=['GET', 'POST'])
+def crime_prediction():
+    year_selected = request.form.get('year')
+    graph_html = None
+    error = None
+    if year_selected:
+        if crime_data is None:
+            error = "Data could not be loaded."
+        else:
+            year_selected = int(year_selected)
+            if year_selected == 2025:
+                predicted_df = crime_data['predicted_df_2025']
+                start_date = '2025-01-01'
+                steps = 12
+            elif year_selected == 2026:
+                predicted_df = crime_data['predicted_df_2026']
+                start_date = '2026-01-01'
+                steps = 24
+            else:
+                return render_template('crime_prediction.html', graph=None, error="Invalid year selected")
+            predicted_df_long = predicted_df.melt(
+                id_vars='CrimeGroup_Name', var_name='Month', value_name='Predicted_Count'
+            )
+            fig = px.line(
+                predicted_df_long,
+                x='Month', y='Predicted_Count', color='CrimeGroup_Name',
+                title=f'Top 5 Predicted Crimes for Each Month in {year_selected}'
+            )
+            graph_html = fig.to_html(full_html=False)
+    return render_template('crime_prediction.html', graph=graph_html, error=error)
+
+@app.route('/future-crime-forecast', methods=['GET', 'POST'])
+def future_crime_forecast():
+    future_steps = 12
+    forecast_plot = None
+    forecast_results = None
+    if request.method == 'POST':
+        try:
+            model_fit = load_arima_model()
+            if request.form.get('future_steps'):
+                future_steps = int(request.form.get('future_steps'))
+            start_date_input = request.form.get('start_date', "2024-03-02")
+            start_date = pd.to_datetime(start_date_input)
+            future_forecast = model_fit.forecast(steps=future_steps)
+            future_dates = pd.date_range(start=start_date, periods=future_steps, freq='M')
+            plt.figure(figsize=(10, 6))
+            plt.plot(future_dates, future_forecast, label="Forecast")
+            plt.legend()
+            plt.title("Future Crime Forecast")
+            plt.xlabel("Date")
+            plt.ylabel("Predicted Crime Count")
+            buf = io.BytesIO()
+            plt.savefig(buf, format='png')
+            buf.seek(0)
+            forecast_plot = base64.b64encode(buf.getvalue()).decode('utf-8')
+            forecast_results = future_forecast.tolist()
+            plt.close()
+        except Exception as e:
+            print(f"Error: {e}")
+            forecast_plot = None
+            forecast_results = None
+    return render_template('future_crime.html', forecast_plot=forecast_plot, forecast_results=forecast_results, future_steps=future_steps)
+
+if __name__ == '__main__':
+    app.run(debug=True, host='0.0.0.0', port=5000)

models/arima_model.pkl

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:4a0dc6d9b51cb4a8dccddc7b865981b7d140392f975d8818efaecbac3426cf18
+size 724531

models/deployment_plan.pkl

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:0436409862e46977fd11a5c3e9e6e415928c5cf9dbc17af0d7768f1631ae0c36
+size 553

models/logistic_regression_model.pkl

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:ee7c783d2e76ee847a7b759f79f0505537185daf4d5105085c4a8610def7d81d
+size 886

models/predicted_crime.pkl

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:4627f9cefc7bae53da0d8d8286165c8f4355fae70714e60041db8df27d5113d4
+size 1246475

requirements.txt

@@ -0,0 +1,9 @@
+Flask==2.1.1
+pandas==1.4.2
+plotly==5.7.0
+geopy==2.2.0
+matplotlib==3.5.1
+joblib==1.1.0
+scikit-learn==1.0.2
+statsmodels==0.13.2
+werkzeug==2.0.3

static/videos/crime.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:f01447fbc45ca89fb478e7a4f253e6f3179ef032519e2d5bee9e5ad680f2908c
+size 4132169

static/videos/crime_login.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:3ed28ad301506b0e51027e98590b28fcd980a871201f5d07872f83d9c2380c1e
+size 3074394

templates/Distribution_of_Accused_Ages.html

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:fe4113065e81ccec326a5a158c97bb45e397ed8ffe082b6805901e6767714084
+size 18804115

templates/Recent_Crimes.html

@@ -0,0 +1,7 @@
+<html>
+<head><meta charset="utf-8" /></head>
+<body>
+    <div>                        <script type="text/javascript">window.PlotlyConfig = {MathJaxConfig: 'local'};</script>
+        <script src="https://cdn.plot.ly/plotly-2.12.1.min.js"></script>                <div id="6f546c49-7539-4c7b-8b21-2ef038166a02" class="plotly-graph-div" style="height:100%; width:100%;"></div>            <script type="text/javascript">                                    window.PLOTLYENV=window.PLOTLYENV || {};                                    if (document.getElementById("6f546c49-7539-4c7b-8b21-2ef038166a02")) {                    Plotly.newPlot(                        "6f546c49-7539-4c7b-8b21-2ef038166a02",                        [{"name":"MOTOR VEHICLE ACCIDENTS NON-FATAL","x":[1,2,3],"y":[2735,2807,968],"type":"bar"},{"name":"THEFT","x":[1,2,3],"y":[1916,1992,628],"type":"bar"},{"name":" CYBER CRIME","x":[1,2,3],"y":[1896,1999,619],"type":"bar"},{"name":"MISSING PERSON","x":[1,2,3],"y":[1739,1894,574],"type":"bar"},{"name":"CASES OF HURT","x":[1,2,3],"y":[1367,1456,466],"type":"bar"}],                        {"barmode":"stack","title":{"text":"Top 5 Recent Crime Occurences by Month - 2024"},"xaxis":{"title":{"text":"Month"}},"yaxis":{"title":{"text":"Number of Occurrences"}},"template":{"data":{"histogram2dcontour":[{"type":"histogram2dcontour","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]}],"choropleth":[{"type":"choropleth","colorbar":{"outlinewidth":0,"ticks":""}}],"histogram2d":[{"type":"histogram2d","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]}],"heatmap":[{"type":"heatmap","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]}],"heatmapgl":[{"type":"heatmapgl","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]}],"contourcarpet":[{"type":"contourcarpet","colorbar":{"outlinewidth":0,"ticks":""}}],"contour":[{"type":"contour","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]}],"surface":[{"type":"surface","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]}],"mesh3d":[{"type":"mesh3d","colorbar":{"outlinewidth":0,"ticks":""}}],"scatter":[{"fillpattern":{"fillmode":"overlay","size":10,"solidity":0.2},"type":"scatter"}],"parcoords":[{"type":"parcoords","line":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scatterpolargl":[{"type":"scatterpolargl","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"bar":[{"error_x":{"color":"#2a3f5f"},"error_y":{"color":"#2a3f5f"},"marker":{"line":{"color":"#E5ECF6","width":0.5},"pattern":{"fillmode":"overlay","size":10,"solidity":0.2}},"type":"bar"}],"scattergeo":[{"type":"scattergeo","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scatterpolar":[{"type":"scatterpolar","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"histogram":[{"marker":{"pattern":{"fillmode":"overlay","size":10,"solidity":0.2}},"type":"histogram"}],"scattergl":[{"type":"scattergl","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scatter3d":[{"type":"scatter3d","line":{"colorbar":{"outlinewidth":0,"ticks":""}},"marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scattermapbox":[{"type":"scattermapbox","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scatterternary":[{"type":"scatterternary","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scattercarpet":[{"type":"scattercarpet","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"carpet":[{"aaxis":{"endlinecolor":"#2a3f5f","gridcolor":"white","linecolor":"white","minorgridcolor":"white","startlinecolor":"#2a3f5f"},"baxis":{"endlinecolor":"#2a3f5f","gridcolor":"white","linecolor":"white","minorgridcolor":"white","startlinecolor":"#2a3f5f"},"type":"carpet"}],"table":[{"cells":{"fill":{"color":"#EBF0F8"},"line":{"color":"white"}},"header":{"fill":{"color":"#C8D4E3"},"line":{"color":"white"}},"type":"table"}],"barpolar":[{"marker":{"line":{"color":"#E5ECF6","width":0.5},"pattern":{"fillmode":"overlay","size":10,"solidity":0.2}},"type":"barpolar"}],"pie":[{"automargin":true,"type":"pie"}]},"layout":{"autotypenumbers":"strict","colorway":["#636efa","#EF553B","#00cc96","#ab63fa","#FFA15A","#19d3f3","#FF6692","#B6E880","#FF97FF","#FECB52"],"font":{"color":"#2a3f5f"},"hovermode":"closest","hoverlabel":{"align":"left"},"paper_bgcolor":"white","plot_bgcolor":"#E5ECF6","polar":{"bgcolor":"#E5ECF6","angularaxis":{"gridcolor":"white","linecolor":"white","ticks":""},"radialaxis":{"gridcolor":"white","linecolor":"white","ticks":""}},"ternary":{"bgcolor":"#E5ECF6","aaxis":{"gridcolor":"white","linecolor":"white","ticks":""},"baxis":{"gridcolor":"white","linecolor":"white","ticks":""},"caxis":{"gridcolor":"white","linecolor":"white","ticks":""}},"coloraxis":{"colorbar":{"outlinewidth":0,"ticks":""}},"colorscale":{"sequential":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]],"sequentialminus":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]],"diverging":[[0,"#8e0152"],[0.1,"#c51b7d"],[0.2,"#de77ae"],[0.3,"#f1b6da"],[0.4,"#fde0ef"],[0.5,"#f7f7f7"],[0.6,"#e6f5d0"],[0.7,"#b8e186"],[0.8,"#7fbc41"],[0.9,"#4d9221"],[1,"#276419"]]},"xaxis":{"gridcolor":"white","linecolor":"white","ticks":"","title":{"standoff":15},"zerolinecolor":"white","automargin":true,"zerolinewidth":2},"yaxis":{"gridcolor":"white","linecolor":"white","ticks":"","title":{"standoff":15},"zerolinecolor":"white","automargin":true,"zerolinewidth":2},"scene":{"xaxis":{"backgroundcolor":"#E5ECF6","gridcolor":"white","linecolor":"white","showbackground":true,"ticks":"","zerolinecolor":"white","gridwidth":2},"yaxis":{"backgroundcolor":"#E5ECF6","gridcolor":"white","linecolor":"white","showbackground":true,"ticks":"","zerolinecolor":"white","gridwidth":2},"zaxis":{"backgroundcolor":"#E5ECF6","gridcolor":"white","linecolor":"white","showbackground":true,"ticks":"","zerolinecolor":"white","gridwidth":2}},"shapedefaults":{"line":{"color":"#2a3f5f"}},"annotationdefaults":{"arrowcolor":"#2a3f5f","arrowhead":0,"arrowwidth":1},"geo":{"bgcolor":"white","landcolor":"#E5ECF6","subunitcolor":"white","showland":true,"showlakes":true,"lakecolor":"white"},"title":{"x":0.05},"mapbox":{"style":"light"}}}},                        {"responsive": true}                    )                };                            </script>        </div>
+</body>
+</html>

templates/behavior.html

@@ -0,0 +1,340 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Crime Dashboard</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            background-color: #121212;
+            color: white;
+            margin: 0;
+            padding: 0;
+        }
+
+        .container {
+            display: flex;
+            min-height: 100vh;
+        }
+
+        .sidebar {
+            width: 300px;
+            background-color: #2A2A2A;
+            padding: 20px;
+            box-sizing: border-box;
+        }
+
+        .sidebar h2, .sidebar h1, .sidebar label {
+            color: #EFF204;
+        }
+
+        .sidebar form {
+            margin-top: 20px;
+        }
+
+        .sidebar .form-group {
+            margin-bottom: 20px;
+        }
+
+        .sidebar .form-control {
+            background-color: #121212;
+            color: white;
+            border: 1px solid #444;
+            width: 100%;
+        }
+
+        .sidebar .btn-primary {
+            background-color: #FF4747;
+            border: none;
+            width: 100%;
+        }
+
+        .sidebar .btn-back {
+            background-color: #FF4747;
+            border: none;
+            width: 100%;
+            margin-bottom: 20px;
+        }
+
+        .sidebar .chart-container {
+            margin-top: 20px;
+            background-color: #1E1E1E;
+            padding: 20px;
+            border-radius: 8px;
+        }
+
+        .sidebar canvas {
+            width: 100% !important;
+            height: 300px; /* Set a fixed height for the chart */
+        }
+
+        .main-content {
+            flex: 1;
+            padding: 20px;
+            box-sizing: border-box;
+        }
+
+        .header h1 {
+            color: #EFF204;
+        }
+
+        .content {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 20px;
+        }
+
+        .chart {
+            background-color: #1E1E1E;
+            padding: 20px;
+            border-radius: 8px;
+            box-sizing: border-box;
+            width: calc(50% - 10px); /* Adjusted to fit two charts in a row */
+            height: 300px; /* Reduced height */
+        }
+
+        .live-data {
+            background-color: #1E1E1E;
+            padding: 20px;
+            border-radius: 8px;
+            box-sizing: border-box;
+            width: 100%;
+            height: 300px; /* Reduced height */
+            margin-bottom: 20px;
+        }
+
+        .statistics {
+            background-color: #1E1E1E;
+            padding: 20px;
+            border-radius: 8px;
+            box-sizing: border-box;
+            width: 100%;
+            margin-bottom: 20px;
+        }
+
+        .statistics h3 {
+            color: #EFF204;
+            margin: 10px 0;
+        }
+
+        .statistics p {
+            color: #FF4747;
+        }
+
+        .forecast {
+            background-color: #1E1E1E;
+            padding: 20px;
+            border-radius: 8px;
+            box-sizing: border-box;
+            width: 100%;
+            text-align: center;
+            margin-bottom: 20px;
+        }
+
+        .forecast h2 {
+            color: #EFF204;
+        }
+
+        .forecast img {
+            max-width: 100%;
+            height: auto;
+        }
+
+        .forecast ul {
+            list-style: none;
+            padding: 0;
+        }
+
+        .forecast ul li {
+            margin: 5px 0;
+        }
+
+        canvas {
+            height: 100% !important; /* Ensures the canvas elements take the full height of their container */
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="sidebar">
+            <button class="btn-back" onclick="goBack()">Back</button>
+            <h2>Dashboard</h2>
+            <h1>Predict Behavioral Status</h1>
+            <form action="/predict" method="POST" class="form-group">
+                <div class="form-group">
+                    <label for="age">Enter age:</label>
+                    <input type="number" id="age" name="age" min="0" required class="form-control"><br>
+                </div>
+
+                <div class="form-group">
+                    <label>Select sex:</label>
+                    <div>
+                        <div class="form-check form-check-inline">
+                            <input type="radio" id="female" name="sex" value="FEMALE" checked class="form-check-input">
+                            <label for="female" class="form-check-label">Female</label>
+                        </div>
+                        <div class="form-check form-check-inline">
+                            <input type="radio" id="male" name="sex" value="MALE" class="form-check-input">
+                            <label for="male" class="form-check-label">Male</label>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="form-group">
+                    <label>Select present city:</label>
+                    <div>
+                        <div class="form-check form-check-inline">
+                            <input type="radio" id="bengaluru" name="present_city" value="Bengaluru City" checked class="form-check-input">
+                            <label for="bengaluru" class="form-check-label">Bengaluru City</label>
+                        </div>
+                        <div class="form-check form-check-inline">
+                            <input type="radio" id="other_city" name="present_city" value="Other" class="form-check-input">
+                            <label for="other_city" class="form-check-label">Other</label>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="form-group">
+                    <label>Select present state:</label>
+                    <div>
+                        <div class="form-check form-check-inline">
+                            <input type="radio" id="karnataka" name="present_state" value="Karnataka" checked class="form-check-input">
+                            <label for="karnataka" class="form-check-label">Karnataka</label>
+                        </div>
+                        <div class="form-check form-check-inline">
+                            <input type="radio" id="other_state" name="present_state" value="Other" class="form-check-input">
+                            <label for="other_state" class="form-check-label">Other</label>
+                        </div>
+                    </div>
+                </div>
+
+                <button type="submit" class="btn btn-primary">Predict Behavioral Status</button>
+            </form>
+
+            <!-- New chart added below the form -->
+            <div class="chart-container">
+                <canvas id="newChart"></canvas>
+            </div>
+        </div>
+        <div class="main-content">
+            <div class="header">
+                <h1>Analysis</h1>
+            </div>
+            <div class="content">
+                <div class="chart">
+                    <!-- Inserted iframe in place of the original chart -->
+                    <iframe src="http://127.0.0.1:5000/Bengaluru_district" style="width:100%; height:100%; border:none;"></iframe>
+                </div>
+                <div class="chart">
+                    <!-- Inserted iframe in place of the original chart -->
+                    <iframe src="http://127.0.0.1:5000/Distribution_of_Accused_Ages" style="width:100%; height:100%; border:none;"></iframe>
+                </div>
+                
+                <div class="forecast">
+                    <!-- Prediction Result -->
+                    {% if predicted_status %}
+                    <div class="alert alert-success mt-4">
+                        <h2>Prediction Result</h2>
+                        <p>The predicted Behavioral Status is: <strong>{{ predicted_status }}</strong></p>
+                    </div>
+                    {% endif %}
+                </div>
+                
+                <div class="chart">
+                    <canvas id="waterfallChart"></canvas>
+                </div>
+                <div class="chart">
+                    <canvas id="radarChart"></canvas>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>
+    <script>
+        function goBack() {
+            window.location.href = 'http://127.0.0.1:5000/index';
+        }
+
+        document.addEventListener("DOMContentLoaded", function() {
+            // Waterfall Chart
+            const waterfallCtx = document.getElementById('waterfallChart').getContext('2d');
+            new Chart(waterfallCtx, {
+                type: 'bar',
+                data: {
+                    labels: ['Start', '1', '0', '0', '1', 'End'],
+                    datasets: [{
+                        label: 'Age Chart',
+                        data: [40, 20, 10, 10, 30, 22],
+                        backgroundColor: 'rgba(75, 192, 192, 0.8)',
+                        borderColor: 'rgba(75, 192, 192, 1)',
+                        borderWidth: 1
+                    }]
+                },
+                options: {
+                    plugins: {
+                        datalabels: {
+                            display: true,
+                            color: 'black',
+                            align: 'top'
+                        }
+                    },
+                    scales: {
+                        y: {
+                            beginAtZero: true
+                        }
+                    }
+                }
+            });
+
+            // Radar Chart
+            const radarCtx = document.getElementById('radarChart').getContext('2d');
+            new Chart(radarCtx, {
+                type: 'radar',
+                data: {
+                    labels: ['Male', 'Female', 'Both', '', '', '', ''],
+                    datasets: [{
+                        label: 'Age Rate Radar',
+                        data: [25, 10, 30, 40, 45, 16, 20],
+                        backgroundColor: 'rgba(255, 206, 86, 0.2)',
+                        borderColor: 'rgba(255, 206, 86, 1)',
+                        borderWidth: 1
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    scales: {
+                        r: {
+                            beginAtZero: true
+                        }
+                    }
+                }
+            });
+
+            // New Chart
+            const newChartCtx = document.getElementById('newChart').getContext('2d');
+            new Chart(newChartCtx, {
+                type: 'doughnut',
+                data: {
+                    labels: ['Male', 'Female', 'Adult', 'Children'],
+                    datasets: [{
+                        label: 'AGE',
+                        data: [12, 30, 40, 55],
+                        backgroundColor: [
+                            'rgba(54, 162, 235, 0.8)',
+                            'rgba(255, 206, 86, 0.8)',
+                            'rgba(75, 192, 192, 0.8)',
+                            'rgba(153, 102, 255, 0.8)'
+                        ]
+                    }]
+                },
+                options: {
+                    responsive: true
+                }
+            });
+        });
+    </script>
+</body>
+</html>

templates/cluster.html

@@ -0,0 +1,305 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Crime Dashboard</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            background-color: #121212;
+            color: white;
+            margin: 0;
+            padding: 0;
+        }
+
+        .container {
+            display: flex;
+            min-height: 100vh;
+        }
+
+        .sidebar {
+            width: 300px;
+            background-color: #2A2A2A;
+            padding: 20px;
+            box-sizing: border-box;
+        }
+
+        .sidebar h2, .sidebar h1, .sidebar label {
+            color: #C70B94;
+        }
+
+        .sidebar form {
+            margin-top: 20px;
+        }
+
+        .sidebar .form-group {
+            margin-bottom: 20px;
+        }
+
+        .sidebar .form-control {
+            background-color: #121212;
+            color: white;
+            border: 1px solid #444;
+            width: 100%;
+        }
+
+        .sidebar .btn-primary {
+            background-color: #C70B94;
+            border: none;
+            width: 100%;
+        }
+
+        .sidebar .btn-back {
+            background-color: #C70B94;
+            border: none;
+            width: 100%;
+            margin-bottom: 20px;
+        }
+
+        .sidebar .chart-container {
+            margin-top: 20px;
+            background-color: #1E1E1E;
+            padding: 20px;
+            border-radius: 8px;
+        }
+
+        .sidebar canvas {
+            width: 100% !important;
+            height: 300px; /* Set a fixed height for the chart */
+        }
+
+        .main-content {
+            flex: 1;
+            padding: 20px;
+            box-sizing: border-box;
+        }
+
+        .header h1 {
+            color: #C70B94;
+        }
+
+        .content {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 20px;
+        }
+
+        .chart {
+            background-color: #1E1E1E;
+            padding: 20px;
+            border-radius: 8px;
+            box-sizing: border-box;
+            width: calc(50% - 10px); /* Adjusted to fit two charts in a row */
+            height: 300px; /* Reduced height */
+        }
+
+        .live-data {
+            background-color: #1E1E1E;
+            padding: 20px;
+            border-radius: 8px;
+            box-sizing: border-box;
+            width: 100%;
+            height: 300px; /* Reduced height */
+            margin-bottom: 20px;
+        }
+
+        .statistics {
+            background-color: #1E1E1E;
+            padding: 20px;
+            border-radius: 8px;
+            box-sizing: border-box;
+            width: 100%;
+            margin-bottom: 20px;
+        }
+
+        .statistics h3 {
+            color: #FF4747;
+            margin: 10px 0;
+        }
+
+        .statistics p {
+            color: #FF4747;
+        }
+
+        .forecast {
+            background-color: #1E1E1E;
+            padding: 20px;
+            border-radius: 8px;
+            box-sizing: border-box;
+            width: 100%;
+            text-align: center;
+            margin-bottom: 20px;
+        }
+
+        .forecast h2 {
+            color: #FF4747;
+        }
+
+        .forecast img {
+            max-width: 100%;
+            height: auto;
+        }
+
+        .forecast ul {
+            list-style: none;
+            padding: 0;
+        }
+
+        .forecast ul li {
+            margin: 5px 0;
+        }
+
+        canvas {
+            height: 100% !important; /* Ensures the canvas elements take the full height of their container */
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="sidebar">
+            <button class="btn-back" onclick="goBack()">Back</button>
+            <h2>Dashboard</h2>
+            <h1 class="my-4">Find Closest Cluster by Coordinates</h1>
+        
+        <!-- Form to find the closest cluster -->
+        <form id="queryForm" class="form-inline">
+            <div class="form-group mx-2">
+                <label for="latitude" class="sr-only">Latitude</label>
+                <input type="text" id="latitude" placeholder="Latitude" class="form-control" required>
+            </div>
+            
+            <div class="form-group mx-2">
+                <label for="longitude" class="sr-only">Longitude</label>
+                <input type="text" id="longitude" placeholder="Longitude" class="form-control" required>
+            </div>
+            
+            <button type="submit" class="btn btn-primary mx-2">Find Cluster</button>
+        </form>
+
+            <!-- New chart added below the form -->
+            <div class="chart-container">
+                    <canvas id="radarChart"></canvas>
+                </div>
+        </div>
+        <div class="main-content">
+            <div class="header">
+                <h1>Analysis</h1>
+            </div>
+           <div class="content">
+                <div class="chart">
+                    <!-- Inserted iframe in place of the original chart -->
+                    <iframe src="http://127.0.0.1:5000/Tumakuru" style="width:100%; height:100%; border:none;"></iframe>
+                </div>
+                <!-- Removed the original 'newChart' canvas element -->
+                <div class="chart">
+                    <!-- Inserted iframe in place of the original chart -->
+                    <iframe src="http://127.0.0.1:5000/Bagalkot" style="width:100%; height:100%; border:none;"></iframe>
+                </div>
+                
+                <div class="forecast">
+                    <!-- Result section to display the response -->
+      <center> <div id="result" class="chart">
+            <!-- The results will be displayed here -->
+        </div> </center>
+    </div>
+
+    <!-- JavaScript to handle form submission and AJAX -->
+    <script>
+        document.getElementById('queryForm').addEventListener('submit', function(event) {
+            event.preventDefault(); // Prevent the form from submitting in the traditional way
+
+            const latitude = document.getElementById('latitude').value;
+            const longitude = document.getElementById('longitude').value;
+
+            fetch(`/get-closest-cluster?latitude=${latitude}&longitude=${longitude}`)
+                .then(response => response.json())
+                .then(data => {
+                    const resultDiv = document.getElementById('result');
+
+                    if (data.closest_cluster) {
+                        resultDiv.innerHTML = `
+                            <div class="highlight">
+                                <h2>Closest Cluster: ${data.closest_cluster}</h2>
+                                <p>Centroid: Latitude ${data.cluster_centroid.Latitude}, Longitude ${data.cluster_centroid.Longitude}</p>
+                                <p><strong>Number of Incidents:</strong> ${data.number_of_incidents}</p>
+                                <p><strong>Suggestions:</strong> ${data.suggestions}</p>
+                            </div>
+                        `;
+                    } else {
+                        resultDiv.innerHTML = `<p>Error fetching closest cluster data.</p>`;
+                    }
+                })
+                .catch(error => {
+                    console.error('Error fetching data:', error);
+                    const resultDiv = document.getElementById('result');
+                    resultDiv.innerHTML = `<p>Unable to retrieve data.</p>`;
+                });
+        });
+    </script>
+                </div>
+                
+                
+                
+                <center>
+                <div class="chart">
+                    <!-- Inserted iframe in place of the original chart -->
+                    <iframe src="http://127.0.0.1:5000/forecast_crime" style="width:100%; height:100%; border:none;"></iframe>
+                </div> </center>
+                
+            </div>
+        </div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>
+    <script>
+        function goBack() {
+            window.location.href = 'http://127.0.0.1:5000/index';
+        }
+
+        document.addEventListener("DOMContentLoaded", function() {
+            
+
+            
+
+            // Radar Chart
+            const radarCtx = document.getElementById('radarChart').getContext('2d');
+            new Chart(radarCtx, {
+                type: 'radar',
+                type: 'pie',
+            data: {
+                labels: ['accident non-fatal', 'Theft', 'CrPc', 'Cases of hurd', 'Missing persion'],
+                datasets: [{
+                    label: 'Crime Rate',
+                    data: [6500, 6000,5600 , 4900, 3200, 2500,],
+                    backgroundColor: [
+                        'rgba(255, 99, 132, 0.2)',
+                        'rgba(54, 162, 235, 0.2)',
+                        'rgba(255, 206, 86, 0.2)',
+                        'rgba(75, 192, 192, 0.2)',
+                        'rgba(153, 102, 255, 0.2)',
+                        'rgba(255, 159, 64, 0.2)',
+                        'rgba(201, 203, 207, 0.2)'
+                    ],
+                    borderColor: [
+                        'rgba(255, 99, 132, 1)',
+                        'rgba(54, 162, 235, 1)',
+                        'rgba(255, 206, 86, 1)',
+                        'rgba(75, 192, 192, 1)',
+                        'rgba(153, 102, 255, 1)',
+                        'rgba(255, 159, 64, 1)',
+                        'rgba(201, 203, 207, 1)'
+                    ],
+                    borderWidth: 1
+                }]
+            },
+            options: {
+                responsive: true
+            }
+        });
+            
+        });
+    </script>
+</body>
+</html>

templates/crime_distribution_district.html

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:bfb647856484c8f32eaf6875dfd8e493dc7d3bed8c62236cec709ddfc4afca95
+size 27157934

templates/crime_map.html

@@ -0,0 +1,210 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Crime Dashboard</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            background-color: #121212;
+            color: white;
+            margin: 0;
+            padding: 0;
+        }
+
+        .container {
+            display: flex;
+            min-height: 100vh;
+        }
+
+        .sidebar {
+            width: 300px;
+            background-color: #2A2A2A;
+            padding: 20px;
+            box-sizing: border-box;
+        }
+
+        .sidebar h2, .sidebar h1, .sidebar label {
+            color: #EFF204;
+        }
+
+        .sidebar .btn-back {
+            background-color: #FF4747;
+            border: none;
+            width: 100%;
+            margin-bottom: 20px;
+        }
+
+        .sidebar nav a {
+            display: block;
+            color: white;
+            padding: 10px 0;
+            text-decoration: none;
+            font-size: 16px;
+            cursor: pointer;
+        }
+
+        .sidebar nav a:hover {
+            background-color: #444;
+        }
+
+        .sidebar nav .sub-menu {
+            display: none;
+            padding-left: 20px;
+        }
+
+        .sidebar nav .sub-menu a {
+            padding: 5px 0;
+        }
+
+        .main-content {
+            flex: 1;
+            padding: 0;
+            box-sizing: border-box;
+            position: relative;
+        }
+
+        .iframe-container {
+            position: relative;
+            width: 100%;
+            height: 100vh;
+            overflow: hidden;
+        }
+
+        .iframe-container iframe {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            border: none;
+        }
+
+        .chart-container {
+            margin-top: 20px;
+            background-color: #1E1E1E;
+            padding: 20px;
+            border-radius: 8px;
+        }
+
+        canvas {
+            height: 100% !important;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="sidebar">
+            <button class="btn-back" onclick="goBack()">Back</button>
+            <h2>Dashboard</h2>
+            <nav>
+                <a href="http://127.0.0.1:5000/heat-map">Heat Map</a>
+                <a onclick="toggleSubMenu(event)">Prediction</a>
+                <div class="sub-menu">
+                    <a href="http://127.0.0.1:5000/cluster">Crime Suggestion Prediction</a>
+                    <a href="http://127.0.0.1:5000/predict">Behavior Prediction</a>
+                    <a href="http://127.0.0.1:5000/future-crime-forecast">Future Crime Prediction</a>
+                     <a href="http://127.0.0.1:5000/crime-prediction">Crime Prediction</a>
+                </div>
+            </nav>
+           
+            <div class="chart-container">
+                <canvas id="crimeMapChart"></canvas>
+            </div>
+            <div class="chart-container">
+                <canvas id="karnatakaMapChart"></canvas>
+            </div>
+        </div>
+        <div class="main-content">
+            <div class="iframe-container">
+                <iframe src="https://crime-marker-map.netlify.app/"></iframe>
+            </div>
+        </div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script>
+        function goBack() {
+            window.location.href = 'http://127.0.0.1:5000/index';
+        }
+
+        function toggleSubMenu(event) {
+            event.preventDefault();
+            const subMenu = event.target.nextElementSibling;
+            subMenu.style.display = subMenu.style.display === 'block' ? 'none' : 'block';
+        }
+
+        document.addEventListener("DOMContentLoaded", function() {
+           
+
+            // Crime Map Chart
+            const crimeMapCtx = document.getElementById('crimeMapChart').getContext('2d');
+            new Chart(crimeMapCtx, {
+                type: 'bubble',
+                data: {
+                    datasets: [{
+                        label: 'Crime Map',
+                        data: [
+                            { x: 10, y: 20, r: 15 },
+                            { x: 15, y: 10, r: 10 },
+                            { x: 20, y: 30, r: 25 },
+                            { x: 25, y: 20, r: 5 },
+                            { x: 30, y: 25, r: 20 }
+                        ],
+                        backgroundColor: 'rgba(54, 162, 235, 0.8)',
+                        borderColor: 'rgba(54, 162, 235, 1)',
+                        borderWidth: 1
+                    }]
+                },
+                options: {
+                    scales: {
+                        y: {
+                            beginAtZero: true
+                        }
+                    }
+                }
+            });
+
+            // Karnataka Map Chart
+            const karnatakaMapCtx = document.getElementById('karnatakaMapChart').getContext('2d');
+            new Chart(karnatakaMapCtx, {
+                type: 'bubble',
+                data: {
+                    datasets: [{
+                        label: 'Crime Rates in Karnataka',
+                        data: [
+                            { x: 12.9716, y: 77.5946, r: 15 }, // Bengaluru
+                            { x: 12.2958, y: 76.6394, r: 10 }, // Mysuru
+                            { x: 12.9141, y: 74.8560, r: 12 }, // Mangaluru
+                            { x: 15.3647, y: 75.1240, r: 8 }, // Hubli
+                            { x: 15.8497, y: 74.4977, r: 5 }  // Belagavi
+                        ],
+                        backgroundColor: 'rgba(255, 99, 132, 0.8)',
+                        borderColor: 'rgba(255, 99, 132, 1)',
+                        borderWidth: 1
+                    }]
+                },
+                options: {
+                    scales: {
+                        x: {
+                            type: 'linear',
+                            position: 'bottom',
+                            title: {
+                                display: true,
+                                text: 'Latitude'
+                            }
+                        },
+                        y: {
+                            title: {
+                                display: true,
+                                text: 'Longitude'
+                            }
+                        }
+                    }
+                }
+            });
+        });
+    </script>
+</body>
+</html>

templates/crime_prediction.html

@@ -0,0 +1,401 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Crime Dashboard</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            background-color: #121212;
+            color: white;
+            margin: 0;
+            padding: 0;
+        }
+
+        .container {
+            display: flex;
+            min-height: 100vh;
+        }
+
+        .sidebar {
+            width: 300px;
+            background-color: #2A2A2A;
+            padding: 20px;
+            box-sizing: border-box;
+        }
+
+        .sidebar h2, .sidebar h1, .sidebar label {
+            color: #FF4747;
+        }
+
+        .sidebar form {
+            margin-top: 20px;
+        }
+
+        .sidebar .form-group {
+            margin-bottom: 20px;
+        }
+
+        .sidebar .form-control {
+            background-color: #121212;
+            color: white;
+            border: 1px solid #444;
+            width: 100%;
+        }
+
+        .sidebar .btn-primary {
+            background-color: #FF4747;
+            border: none;
+            width: 100%;
+        }
+
+        .sidebar .chart-container {
+            margin-top: 20px;
+            background-color: #1E1E1E;
+            padding: 20px;
+            border-radius: 8px;
+        }
+
+        .sidebar canvas {
+            width: 100% !important;
+            height: 300px; /* Set a fixed height for the chart */
+        }
+
+        .main-content {
+            flex: 1;
+            padding: 20px;
+            box-sizing: border-box;
+        }
+
+        .header h1 {
+            color: #FF4747;
+        }
+
+        .content {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 20px;
+        }
+
+        .chart {
+            background-color: #1E1E1E;
+            padding: 20px;
+            border-radius: 8px;
+            box-sizing: border-box;
+            width: calc(50% - 10px); /* Adjusted to fit two charts in a row */
+            height: 300px; /* Reduced height */
+        }
+
+        .live-data {
+            background-color: #1E1E1E;
+            padding: 20px;
+            border-radius: 8px;
+            box-sizing: border-box;
+            width: 100%;
+            height: 300px; /* Reduced height */
+            margin-bottom: 20px;
+        }
+
+        .statistics {
+            background-color: #1E1E1E;
+            padding: 20px;
+            border-radius: 8px;
+            box-sizing: border-box;
+            width: 100%;
+            margin-bottom: 20px;
+        }
+
+        .statistics h3 {
+            color: #FF4747;
+            margin: 10px 0;
+        }
+
+        .statistics p {
+            color: #FF4747;
+        }
+
+        .forecast {
+            background-color: #1E1E1E;
+            padding: 20px;
+            border-radius: 8px;
+            box-sizing: border-box;
+            width: 100%;
+            text-align: center;
+            margin-bottom: 20px;
+        }
+
+        .forecast h2 {
+            color: #FF4747;
+        }
+
+        .forecast img {
+            max-width: 100%;
+            height: auto;
+        }
+
+        .forecast ul {
+            list-style: none;
+            padding: 0;
+        }
+         .sidebar .btn-back {
+            background-color: #FF4747;
+            border: none;
+            width: 100%;
+            margin-bottom: 20px;
+        }
+
+        .forecast ul li {
+            margin: 5px 0;
+        }
+
+        canvas {
+            height: 100% !important; /* Ensures the canvas elements take the full height of their container */
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="sidebar">
+            <button class="btn-back" onclick="goBack()">Back</button>
+            <h2>Dashboard</h2>
+            <h1 class="mt-4">Crime Prediction for 2025 and 2026</h1>
+
+            <!-- Form to select a year for prediction -->
+            <form method="post" class="mb-4">
+                <div class="form-group">
+                    <label for="year">Select Year to Predict:</label>
+                    <select name="year" id="year" class="form-control w-25">
+                        <option value="2025">2025</option>
+                        <option value="2026">2026</option>
+                    </select>
+                </div>
+                <button type="submit" class="btn btn-primary">Show Predictions</button>
+            </form>
+
+            <!-- New chart added below the form -->
+            <div class="chart-container">
+                <canvas id="newChart"></canvas>
+            </div>
+        </div>
+        <div class="main-content">
+            <div class="header">
+                <h1>Analysis</h1>
+            </div>
+            <div class="content">
+                <div class="chart">
+                    <canvas id="barChart"></canvas>
+                </div>
+                <div class="chart">
+                    <canvas id="crimeRateChart"></canvas>
+                </div>
+                
+                <div class="forecast">
+                    <!-- Display the Plotly graph if available -->
+                    {% if graph %}
+                        <h2>Predicted Crimes</h2>
+                        <div>
+                            {{ graph|safe }}  <!-- The Plotly graph rendered as HTML -->
+                        </div>
+                    {% endif %}
+
+                    <!-- Display error messages if there's an error -->
+                    {% if error %}
+                        <div class="alert alert-danger mt-4">
+                            <strong>Error:</strong> {{ error }}
+                        </div>
+                    {% endif %}
+                </div>
+                
+                <div class="chart">
+                    <canvas id="waterfallChart"></canvas>
+                </div>
+                <div class="chart">
+                    <canvas id="radarChart"></canvas>
+                </div>
+                <div class="live-data">
+                    <canvas id="liveDataChart"></canvas>
+                </div>
+                <div class="statistics">
+                    <h3>Crime Statistics</h3>
+                    <p>Early hours 3am-9am the crime rates are low</p>
+                    <p>After 9am-12pm the crime rate are low but starts increasing</p>
+                    <p>After 12pm the crime rates will be moderate but keeps on increasing</p>
+                    <p>After 6pm the crime rates are high</p>
+                    <p>Drug abuse and trafficking remain significant issues mainly the increasing of drugs and drug peddlers are high in Bangalore due to extensive networks​</p>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>
+    <script>
+         function goBack() {
+            window.location.href = 'http://127.0.0.1:5000/index';
+        }
+        document.addEventListener("DOMContentLoaded", function() {
+            // Bar Chart
+            const barCtx = document.getElementById('barChart').getContext('2d');
+            new Chart(barCtx, {
+                type: 'bar',
+                data: {
+                    labels: ["2016","2017","2018","2019","2020","2021","2022","2023","2024"],
+                    datasets: [{
+                        label: 'Crime Analysis 2016-2024',
+                        data: [230.4000,250.12000,222.12000,177.36000,162.29000,177.818000,179.97000,233.781000,42.72000],
+                        backgroundColor: [
+                            '#00BFFF', '#7CFC00', '#FF69B4', '#FF4500', '#FFD700', '#ADFF2F', '#00FFFF', '#BA55D3', '#32CD32', '#FF6347'
+                        ],
+                        borderColor: [
+                            '#00BFFF', '#7CFC00', '#FF69B4', '#FF4500', '#FFD700', '#ADFF2F', '#00FFFF', '#BA55D3', '#32CD32', '#FF6347'
+                        ],
+                        borderWidth: 1
+                    }]
+                },
+                options: {
+                    scales: {
+                        y: {
+                            beginAtZero: true
+                        }
+                    }
+                }
+            });
+
+            // Crime Rate Pie Chart
+            const crimeRateCtx = document.getElementById('crimeRateChart').getContext('2d');
+            new Chart(crimeRateCtx, {
+                type: 'pie',
+                data: {
+                    labels: ["Motor Vehicle Accident Non-Fatal","Theft","CrPc","Cases of Hurt","Missing Person"],
+                    datasets: [{
+                        label: 'Top 5 Crime in Karnataka',
+                        data: [20.3,13.3,11.5,10.5,10.4],
+                        backgroundColor: [
+                            'rgba(75, 192, 192, 0.8)',
+                            'rgba(153, 102, 255, 0.8)',
+                            'rgba(255, 159, 64, 0.8)',
+                            'rgba(255, 206, 86, 0.8)',
+                            'rgba(54, 162, 235, 0.8)',
+                            'rgba(255, 99, 132, 0.8)'
+                        ]
+                    }]
+                },
+                options: {
+                    responsive: true
+                }
+            });
+
+            // Live Data Chart
+            const liveDataCtx = document.getElementById('liveDataChart').getContext('2d');
+            new Chart(liveDataCtx, {
+                type: 'line',
+                data: {
+                    labels: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00','12:00',"13:00",'14:00',"15:00",'16:00','17:00','18:00',"19:00",'20:00','21:00','22:00','23:00'],
+                    datasets: [{
+                        label: 'Crime Occuring Probability in a Day',
+                        data: [86, 87, 90, 55, 45, 24, 17, 6.6, 6, 8, 9, 10, 14, 18, 20,25,30,35,55,62,70,78,82,84],
+                        backgroundColor: 'rgba(255, 71, 71, 0.2)',
+                        borderColor: 'rgba(255, 71, 71, 1)',
+                        borderWidth: 1
+                    }]
+                },
+                options: {
+                    scales: {
+                        y: {
+                            beginAtZero: true
+                        }
+                    }
+                }
+            });
+
+            // Waterfall Chart
+            const waterfallCtx = document.getElementById('waterfallChart').getContext('2d');
+            new Chart(waterfallCtx, {
+                type: 'bar',
+                data: {
+                    labels: ["Bengaluru City","Bengaluru Dist","Tumakuru","Shivamogga","Mandya"],
+                    datasets: [{
+                        label: 'Top 5 Most Occured Districts',
+                        data: [430754,65032,62520,62047,60219],
+                        backgroundColor: 'rgba(75, 192, 192, 0.8)',
+                        borderColor: 'rgba(75, 192, 192, 1)',
+                        borderWidth: 1
+                    }]
+                },
+                options: {
+                    plugins: {
+                        datalabels: {
+                            display: true,
+                            color: 'black',
+                            align: 'top'
+                        }
+                    },
+                    scales: {
+                        y: {
+                            beginAtZero: true
+                        }
+                    }
+                }
+            });
+
+            // Radar Chart
+            const radarCtx = document.getElementById('radarChart').getContext('2d');
+            new Chart(radarCtx, {
+                type: 'doughnut',
+            data: {
+                labels: ['Bengalurucity', 'Mandya', 'Shivamogga', 'Bagalkot', 'Tumakuru', 'Mysuru'],
+                datasets: [{
+                    label: '',
+                    data: [60,50 , 40, 30, 35, 10],
+                    backgroundColor: [
+                        'rgba(255, 99, 132, 0.2)',
+                        'rgba(54, 162, 235, 0.2)',
+                        'rgba(255, 206, 86, 0.2)',
+                        'rgba(75, 192, 192, 0.2)',
+                        'rgba(153, 102, 255, 0.2)',
+                        'rgba(255, 159, 64, 0.2)',
+                        'rgba(201, 203, 207, 0.2)'
+                    ],
+                    borderColor: [
+                        'rgba(255, 99, 132, 1)',
+                        'rgba(54, 162, 235, 1)',
+                        'rgba(255, 206, 86, 1)',
+                        'rgba(75, 192, 192, 1)',
+                        'rgba(153, 102, 255, 1)',
+                        'rgba(255, 159, 64, 1)',
+                        'rgba(201, 203, 207, 1)'
+                    ],
+                    borderWidth: 1
+                }]
+            },
+            options: {
+                responsive: true
+            }
+        });
+
+            // New Chart
+            const newChartCtx = document.getElementById('newChart').getContext('2d');
+            new Chart(newChartCtx, {
+                type: 'doughnut',
+                data: {
+                    labels: ['Male','Female','Enuch'],
+                    datasets: [{
+                        label: 'Sex',
+                        data: [995123,469964,4690],
+                        backgroundColor: [
+                            'rgba(54, 162, 235, 0.8)',
+                            'rgba(255, 206, 86, 0.8)',
+                            'rgba(75, 192, 192, 0.8)',
+                            'rgba(153, 102, 255, 0.8)'
+                        ]
+                    }]
+                },
+                options: {
+                    responsive: true
+                }
+            });
+        });
+    </script>
+</body>
+</html>

templates/forecast_crime.html

@@ -0,0 +1,7 @@
+<html>
+<head><meta charset="utf-8" /></head>
+<body>
+    <div>                        <script type="text/javascript">window.PlotlyConfig = {MathJaxConfig: 'local'};</script>
+        <script src="https://cdn.plot.ly/plotly-2.12.1.min.js"></script>                <div id="10a55ede-0e53-4be9-8541-388749fa67dc" class="plotly-graph-div" style="height:100%; width:100%;"></div>            <script type="text/javascript">                                    window.PLOTLYENV=window.PLOTLYENV || {};                                    if (document.getElementById("10a55ede-0e53-4be9-8541-388749fa67dc")) {                    Plotly.newPlot(                        "10a55ede-0e53-4be9-8541-388749fa67dc",                        [{"line":{"color":"red"},"mode":"lines","name":"Forecasted Crime","x":["2024-04-30T00:00:00","2024-05-31T00:00:00","2024-06-30T00:00:00","2024-07-31T00:00:00","2024-08-31T00:00:00","2024-09-30T00:00:00","2024-10-31T00:00:00","2024-11-30T00:00:00","2024-12-31T00:00:00","2025-01-31T00:00:00","2025-02-28T00:00:00","2025-03-31T00:00:00"],"y":[7334.4935200006685,8495.648952876838,10857.735558768876,10899.51268565768,11786.591380281296,10998.026209786825,10695.814385824617,10369.229525275254,10530.742695584298,10556.978992525956,10707.765319334601,10712.358286657383],"type":"scatter"}],                        {"template":{"data":{"histogram2dcontour":[{"type":"histogram2dcontour","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]}],"choropleth":[{"type":"choropleth","colorbar":{"outlinewidth":0,"ticks":""}}],"histogram2d":[{"type":"histogram2d","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]}],"heatmap":[{"type":"heatmap","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]}],"heatmapgl":[{"type":"heatmapgl","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]}],"contourcarpet":[{"type":"contourcarpet","colorbar":{"outlinewidth":0,"ticks":""}}],"contour":[{"type":"contour","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]}],"surface":[{"type":"surface","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]}],"mesh3d":[{"type":"mesh3d","colorbar":{"outlinewidth":0,"ticks":""}}],"scatter":[{"fillpattern":{"fillmode":"overlay","size":10,"solidity":0.2},"type":"scatter"}],"parcoords":[{"type":"parcoords","line":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scatterpolargl":[{"type":"scatterpolargl","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"bar":[{"error_x":{"color":"#2a3f5f"},"error_y":{"color":"#2a3f5f"},"marker":{"line":{"color":"#E5ECF6","width":0.5},"pattern":{"fillmode":"overlay","size":10,"solidity":0.2}},"type":"bar"}],"scattergeo":[{"type":"scattergeo","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scatterpolar":[{"type":"scatterpolar","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"histogram":[{"marker":{"pattern":{"fillmode":"overlay","size":10,"solidity":0.2}},"type":"histogram"}],"scattergl":[{"type":"scattergl","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scatter3d":[{"type":"scatter3d","line":{"colorbar":{"outlinewidth":0,"ticks":""}},"marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scattermapbox":[{"type":"scattermapbox","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scatterternary":[{"type":"scatterternary","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scattercarpet":[{"type":"scattercarpet","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"carpet":[{"aaxis":{"endlinecolor":"#2a3f5f","gridcolor":"white","linecolor":"white","minorgridcolor":"white","startlinecolor":"#2a3f5f"},"baxis":{"endlinecolor":"#2a3f5f","gridcolor":"white","linecolor":"white","minorgridcolor":"white","startlinecolor":"#2a3f5f"},"type":"carpet"}],"table":[{"cells":{"fill":{"color":"#EBF0F8"},"line":{"color":"white"}},"header":{"fill":{"color":"#C8D4E3"},"line":{"color":"white"}},"type":"table"}],"barpolar":[{"marker":{"line":{"color":"#E5ECF6","width":0.5},"pattern":{"fillmode":"overlay","size":10,"solidity":0.2}},"type":"barpolar"}],"pie":[{"automargin":true,"type":"pie"}]},"layout":{"autotypenumbers":"strict","colorway":["#636efa","#EF553B","#00cc96","#ab63fa","#FFA15A","#19d3f3","#FF6692","#B6E880","#FF97FF","#FECB52"],"font":{"color":"#2a3f5f"},"hovermode":"closest","hoverlabel":{"align":"left"},"paper_bgcolor":"white","plot_bgcolor":"#E5ECF6","polar":{"bgcolor":"#E5ECF6","angularaxis":{"gridcolor":"white","linecolor":"white","ticks":""},"radialaxis":{"gridcolor":"white","linecolor":"white","ticks":""}},"ternary":{"bgcolor":"#E5ECF6","aaxis":{"gridcolor":"white","linecolor":"white","ticks":""},"baxis":{"gridcolor":"white","linecolor":"white","ticks":""},"caxis":{"gridcolor":"white","linecolor":"white","ticks":""}},"coloraxis":{"colorbar":{"outlinewidth":0,"ticks":""}},"colorscale":{"sequential":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]],"sequentialminus":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]],"diverging":[[0,"#8e0152"],[0.1,"#c51b7d"],[0.2,"#de77ae"],[0.3,"#f1b6da"],[0.4,"#fde0ef"],[0.5,"#f7f7f7"],[0.6,"#e6f5d0"],[0.7,"#b8e186"],[0.8,"#7fbc41"],[0.9,"#4d9221"],[1,"#276419"]]},"xaxis":{"gridcolor":"white","linecolor":"white","ticks":"","title":{"standoff":15},"zerolinecolor":"white","automargin":true,"zerolinewidth":2},"yaxis":{"gridcolor":"white","linecolor":"white","ticks":"","title":{"standoff":15},"zerolinecolor":"white","automargin":true,"zerolinewidth":2},"scene":{"xaxis":{"backgroundcolor":"#E5ECF6","gridcolor":"white","linecolor":"white","showbackground":true,"ticks":"","zerolinecolor":"white","gridwidth":2},"yaxis":{"backgroundcolor":"#E5ECF6","gridcolor":"white","linecolor":"white","showbackground":true,"ticks":"","zerolinecolor":"white","gridwidth":2},"zaxis":{"backgroundcolor":"#E5ECF6","gridcolor":"white","linecolor":"white","showbackground":true,"ticks":"","zerolinecolor":"white","gridwidth":2}},"shapedefaults":{"line":{"color":"#2a3f5f"}},"annotationdefaults":{"arrowcolor":"#2a3f5f","arrowhead":0,"arrowwidth":1},"geo":{"bgcolor":"white","landcolor":"#E5ECF6","subunitcolor":"white","showland":true,"showlakes":true,"lakecolor":"white"},"title":{"x":0.05},"mapbox":{"style":"light"}}},"legend":{"x":0.7,"y":1},"margin":{"l":0,"r":0,"t":50,"b":0},"title":{"text":"Forecast Crime pattern"},"xaxis":{"title":{"text":"Months"}},"yaxis":{"title":{"text":"Crime Count"}},"plot_bgcolor":"rgba(0,0,0,0)"},                        {"responsive": true}                    )                };                            </script>        </div>
+</body>
+</html>

templates/future_crime.html

@@ -0,0 +1,390 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Crime Dashboard</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            background-color: #121212;
+            color: white;
+            margin: 0;
+            padding: 0;
+        }
+
+        .container {
+            display: flex;
+            min-height: 100vh;
+        }
+
+        .sidebar {
+            width: 300px;
+            background-color: #2A2A2A;
+            padding: 20px;
+            box-sizing: border-box;
+        }
+
+        .sidebar h2, .sidebar h1, .sidebar label {
+            color: #1E90FF; /* Changed color */
+        }
+
+        .sidebar form {
+            margin-top: 20px;
+        }
+
+        .sidebar .form-group {
+            margin-bottom: 20px;
+        }
+
+        .sidebar .form-control {
+            background-color: #121212;
+            color: white;
+            border: 1px solid #444;
+            width: 100%;
+        }
+
+        .sidebar .btn-primary {
+            background-color: #1E90FF; /* Changed color */
+            border: none;
+            width: 100%;
+        }
+
+        .main-content {
+            flex: 1;
+            padding: 20px;
+            box-sizing: border-box;
+        }
+
+        .header h1 {
+            color: #1E90FF; /* Changed color */
+        }
+
+          .sidebar .btn-back {
+            background-color: #FF4747;
+            border: none;
+            width: 100%;
+            margin-bottom: 20px;
+        }
+
+        .content {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 20px;
+        }
+
+        .chart {
+            background-color: #1E1E1E;
+            padding: 20px;
+            border-radius: 8px;
+            box-sizing: border-box;
+            width: calc(50% - 10px); /* Adjusted to fit two charts in a row */
+            height: 300px; /* Reduced height */
+        }
+
+        .pie-charts {
+            display: flex;
+            gap: 20px;
+            width: 100%;
+            flex-wrap: wrap;
+        }
+
+        .pie-chart {
+            background-color: #1E1E1E;
+            padding: 20px;
+            border-radius: 8px;
+            box-sizing: border-box;
+            width: calc(50% - 10px); /* Adjusted to fit two charts in a row */
+            height: 300px; /* Reduced height */
+        }
+
+        .live-data {
+            background-color: #1E1E1E;
+            padding: 20px;
+            border-radius: 8px;
+            box-sizing: border-box;
+            width: 100%;
+            height: 300px; /* Reduced height */
+            margin-bottom: 20px;
+        }
+
+        .statistics {
+            background-color: #1E1E1E;
+            padding: 20px;
+            border-radius: 8px;
+            box-sizing: border-box;
+            width: 100%;
+            margin-bottom: 20px;
+        }
+
+        .statistics h3 {
+            color: #1E90FF; /* Changed color */
+            margin: 10px 0;
+        }
+
+        .statistics p {
+            color: #1E90FF; /* Changed color */
+        }
+
+        .forecast-container {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            width: 100%;
+            margin-bottom: 20px;
+        }
+
+        .forecast {
+            background-color: #1E1E1E;
+            padding: 20px;
+            border-radius: 8px;
+            box-sizing: border-box;
+            width: 100%;
+            text-align: center;
+        }
+
+        .forecast h2 {
+            color: #1E90FF; /* Changed color */
+        }
+
+        .forecast img {
+            max-width: 100%;
+            height: auto;
+        }
+
+        .forecast ul {
+            list-style: none;
+            padding: 0;
+        }
+
+        .forecast ul li {
+            margin: 5px 0;
+        }
+
+        canvas {
+            height: 100% !important; /* Ensures the canvas elements take the full height of their container */
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="sidebar">
+            <button class="btn-back" onclick="goBack()">Back</button>
+            <h2>Dashboard</h2>
+            <h1>Future Crime Pattern Prediction</h1>
+            <!-- Form to input forecasting details -->
+            <form method="post">
+                <div class="form-group">
+                    <label for="future_steps">Enter number of months to forecast:</label>
+                    <input type="number" id="future_steps" name="future_steps" class="form-control" min="1" value="{{ future_steps }}">
+                </div>
+                <div class="form-group">
+                    <label for="start_date">Enter start date for the forecast:</label>
+                    <input type="date" id="start_date" name="start_date" class="form-control">
+                </div>
+                <button type="submit" class="btn btn-primary">Forecast</button>
+            </form>
+            <!-- Forecasted Values Result -->
+            <div class="forecasted-values">
+                <h2>Forecasted Values</h2>
+                {% if forecast_results %}
+                    <ul>
+                        {% for value in forecast_results %}
+                            <li>{{ value }}</li>
+                        {% endfor %}
+                    </ul>
+                {% endif %}
+            </div>
+        </div>
+        <div class="main-content">
+            <div class="header">
+                <h1>Analysis</h1>
+            </div>
+            <div class="content">
+                <div class="chart">
+                    <canvas id="barChart"></canvas>
+                </div>
+                <div class="chart">
+                    <canvas id="crimeRateChart"></canvas>
+                </div>
+                <div class="forecast-container">
+                    <!-- Forecast result section -->
+                    <div class="forecast">
+                        <h2>Forecast Plot</h2>
+                        {% if forecast_plot %}
+                            <img src="data:image/png;base64,{{ forecast_plot }}" alt="Forecast Plot" class="img-fluid">
+                        {% endif %}
+                    </div>
+                </div>
+                <div class="chart">
+                    <canvas id="waterfallChart"></canvas>
+                </div>
+                <div class="chart">
+                    <canvas id="radarChart"></canvas>
+                </div>
+                <div class="live-data">
+                    <canvas id="liveDataChart"></canvas>
+                </div>
+                <div class="statistics">
+                    <h3>Live Data</h3>
+                    <p>A Murder every min</p>
+                    <p>A Suicide every 40 sec</p>
+                    <p>7812 Sexual Assaults every day</p>
+                    <p>More than 100,000 pending rape cases in India. Close to 90 Rapes are reported every day in India.</p>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script>
+         function goBack() {
+            window.location.href = 'http://127.0.0.1:5000/index';
+        }
+        document.addEventListener("DOMContentLoaded", function() {
+            // Bar Chart
+            const barCtx = document.getElementById('barChart').getContext('2d');
+            new Chart(barCtx, {
+                type: 'bar',
+                data: {
+                    labels: ['Cyber Crime', 'Violent Crime', 'Sexual Harassment', 'Rape', 'Kidnapping', 'Property', 'Fraud', 'Childhood Abuse', 'Robbery', 'Under Age Activities'],
+                    datasets: [{
+                        label: 'Crime Analysis 2003-2018',
+                        data: [2300, 1000, 1000, 624, 500, 431, 430, 355, 329.5, 246.5],
+                        backgroundColor: [
+                            '#00BFFF', '#7CFC00', '#FF69B4', '#FF4500', '#FFD700', '#ADFF2F', '#00FFFF', '#BA55D3', '#32CD32', '#FF6347'
+                        ],
+                        borderColor: [
+                            '#00BFFF', '#7CFC00', '#FF69B4', '#FF4500', '#FFD700', '#ADFF2F', '#00FFFF', '#BA55D3', '#32CD32', '#FF6347'
+                        ],
+                        borderWidth: 1
+                    }]
+                },
+                options: {
+                    scales: {
+                        y: {
+                            beginAtZero: true
+                        }
+                    }
+                }
+            });
+
+            // Crime Rate Pie Chart
+            const crimeRateCtx = document.getElementById('crimeRateChart').getContext('2d');
+            new Chart(crimeRateCtx, {
+                type: 'pie',
+                data: {
+                    labels: ['Bengaluru City ', 'Bengaluru District', 'Tumakuru', 'Shivamogga', 'Mandya', 'Bagalkot'],
+                    datasets: [{
+                        label: 'Crime Rate',
+                        data: [23.2, 20.5, 14.7, 17.8, 12.4, 11.4],
+                        backgroundColor: [
+                            'rgba(75, 192, 192, 0.8)',
+                            'rgba(153, 102, 255, 0.8)',
+                            'rgba(255, 159, 64, 0.8)',
+                            'rgba(255, 206, 86, 0.8)',
+                            'rgba(54, 162, 235, 0.8)',
+                            'rgba(255, 99, 132, 0.8)'
+                        ]
+                    }]
+                },
+                options: {
+                    responsive: true
+                }
+            });
+
+            // Live Data Chart
+            const liveDataCtx = document.getElementById('liveDataChart').getContext('2d');
+            new Chart(liveDataCtx, {
+                type: 'line',
+                data: {
+                    labels: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00'],
+                    datasets: [{
+                        label: 'Live Data',
+                        data: [10, 20, 30, 25, 20, 15, 10, 15, 20, 25, 30, 35],
+                        backgroundColor: 'rgba(255, 71, 71, 0.2)',
+                        borderColor: 'rgba(255, 71, 71, 1)',
+                        borderWidth: 1
+                    }]
+                },
+                options: {
+                    scales: {
+                        y: {
+                            beginAtZero: true
+                        }
+                    }
+                }
+            });
+        });
+        // Waterfall Chart
+            const crimessolved = document.getElementById('waterfallChart').getContext('2d');
+            new Chart(crimessolved, {
+                type: 'bar',
+                data: {
+                    labels: ['Bengalurucity', 'Mandya', 'Shivamogga', 'Bagalkot', 'Tumakuru', 'Mysuru'],
+                    datasets: [{
+                        label: 'Crimes Solved',
+                        data: [60,50 , 40, 30, 35, 10],
+                        backgroundColor: 'rgba(75, 192, 192, 0.8)',
+                        borderColor: 'rgba(75, 192, 192, 1)',
+                        borderWidth: 1
+                    }]
+                },
+                options: {
+                    plugins: {
+                        datalabels: {
+                            display: true,
+                            color: 'black',
+                            align: 'top'
+                        }
+                    },
+                    scales: {
+                        y: {
+                            beginAtZero: true
+                        }
+                    }
+                }
+            });
+
+            // Radar Chart
+            const radarCtx = document.getElementById('radarChart').getContext('2d');
+            new Chart(radarCtx, {
+                type: 'bar',
+            data: {
+                labels: ['accident non-fatal', 'Theft', 'CrPc', 'Cases of hurd', 'Missing persion'],
+                datasets: [{
+                    label: 'Crime Rate',
+                    data: [6500, 6000,5600 , 4900, 3200, 2500,],
+                    backgroundColor: [
+                        'rgba(255, 99, 132, 0.2)',
+                        'rgba(54, 162, 235, 0.2)',
+                        'rgba(255, 206, 86, 0.2)',
+                        'rgba(75, 192, 192, 0.2)',
+                        'rgba(153, 102, 255, 0.2)',
+                        'rgba(255, 159, 64, 0.2)',
+                        'rgba(201, 203, 207, 0.2)'
+                    ],
+                    borderColor: [
+                        'rgba(255, 99, 132, 1)',
+                        'rgba(54, 162, 235, 1)',
+                        'rgba(255, 206, 86, 1)',
+                        'rgba(75, 192, 192, 1)',
+                        'rgba(153, 102, 255, 1)',
+                        'rgba(255, 159, 64, 1)',
+                        'rgba(201, 203, 207, 1)'
+                    ],
+                    borderWidth: 1
+                }]
+            },
+            options: {
+                responsive: true,
+                scales: {
+                    y: {
+                        beginAtZero: true
+                    }
+                }
+            }
+        });
+    </script>
+</body>
+</html>

templates/heat-map.html

@@ -0,0 +1,214 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Crime Dashboard</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            background-color: #121212;
+            color: white;
+            margin: 0;
+            padding: 0;
+        }
+
+        .container {
+            display: flex;
+            min-height: 100vh;
+        }
+
+        .sidebar {
+            width: 300px;
+            background-color: #2A2A2A;
+            padding: 20px;
+            box-sizing: border-box;
+        }
+
+        .sidebar h2, .sidebar h1, .sidebar label {
+            color: #EFF204;
+        }
+
+        .sidebar .btn-back {
+            background-color: #FF4747;
+            border: none;
+            width: 100%;
+            margin-bottom: 20px;
+        }
+
+        .sidebar nav a {
+            display: block;
+            color: white;
+            padding: 10px 0;
+            text-decoration: none;
+            font-size: 16px;
+            cursor: pointer;
+        }
+
+        .sidebar nav a:hover {
+            background-color: #444;
+        }
+
+        .sidebar nav .sub-menu {
+            display: none;
+            padding-left: 20px;
+        }
+
+        .sidebar nav .sub-menu a {
+            padding: 5px 0;
+        }
+
+        .main-content {
+            flex: 1;
+            padding: 0;
+            box-sizing: border-box;
+            position: relative;
+        }
+
+        .iframe-container {
+            position: relative;
+            width: 100%;
+            height: 100vh;
+            overflow: hidden;
+        }
+
+        .iframe-container iframe {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            border: none;
+        }
+
+        .chart-container {
+            margin-top: 20px;
+            background-color: #1E1E1E;
+            padding: 20px;
+            border-radius: 8px;
+        }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+</head>
+<body>
+    <div class="container">
+        <div class="sidebar">
+            <button class="btn-back" onclick="goBack()">Back</button>
+            <h2>Dashboard</h2>
+            <nav>
+                <a href="http://127.0.0.1:5000/crime-marker">Crime_marker</a>
+                <a onclick="toggleSubMenu(event)">Prediction</a>
+                <div class="sub-menu">
+                    <a href="http://127.0.0.1:5000/cluster">Crime Suggestion Prediction</a>
+                    <a href="http://127.0.0.1:5000/predict">Behavior Prediction</a>
+                    <a href="http://127.0.0.1:5000/future-crime-forecast">Future Crime Prediction</a>
+                     <a href="http://127.0.0.1:5000/crime-prediction">Crime Prediction</a>
+                </div>
+            </nav>
+            
+            <div class="chart-container">
+                <canvas id="karnatakaMapChart"></canvas>
+            </div>
+            <div class="chart-container">
+                <canvas id="crimeTrendChart"></canvas>
+            </div>
+        </div>
+        <div class="main-content">
+            <div class="iframe-container">
+                <iframe src="https://heat-map1.netlify.app"></iframe>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        function goBack() {
+            window.location.href = 'http://127.0.0.1:5000/index';
+        }
+
+        function toggleSubMenu(event) {
+            event.preventDefault();
+            const subMenu = event.target.nextElementSibling;
+            subMenu.style.display = subMenu.style.display === 'block' ? 'none' : 'block';
+        }
+
+        document.addEventListener("DOMContentLoaded", function() {
+            console.log("DOM content loaded");
+
+            
+
+            // Karnataka Map Chart
+            const karnatakaMapCtx = document.getElementById('karnatakaMapChart').getContext('2d');
+            new Chart(karnatakaMapCtx, {
+                type: 'bubble',
+                data: {
+                    datasets: [{
+                        label: 'Crime Rates in Karnataka',
+                        data: [
+                            { x: 12.9716, y: 77.5946, r: 15 }, // Bengaluru
+                            { x: 12.2958, y: 76.6394, r: 10 }, // Mysuru
+                            { x: 12.9141, y: 74.8560, r: 12 }, // Mangaluru
+                            { x: 15.3647, y: 75.1240, r: 8 }, // Hubli
+                            { x: 15.8497, y: 74.4977, r: 5 }  // Belagavi
+                        ],
+                        backgroundColor: 'rgba(255, 99, 132, 0.8)',
+                        borderColor: 'rgba(255, 99, 132, 1)',
+                        borderWidth: 1
+                    }]
+                },
+                options: {
+                    scales: {
+                        x: {
+                            type: 'linear',
+                            position: 'bottom',
+                            title: {
+                                display: true,
+                                text: 'Latitude'
+                            }
+                        },
+                        y: {
+                            title: {
+                                display: true,
+                                text: 'Longitude'
+                            }
+                        }
+                    }
+                }
+            });
+
+            // Crime Trend Chart
+            const crimeTrendCtx = document.getElementById('crimeTrendChart').getContext('2d');
+            new Chart(crimeTrendCtx, {
+                type: 'line',
+                data: {
+                    labels: ['2019', '2020', '2021', '2022', '2023'],
+                    datasets: [{
+                        label: 'Crime Trends Over the Years',
+                        data: [120, 150, 180, 130, 170],
+                        borderColor: 'rgba(75, 192, 192, 1)',
+                        backgroundColor: 'rgba(75, 192, 192, 0.2)',
+                        fill: true,
+                        tension: 0.1
+                    }]
+                },
+                options: {
+                    scales: {
+                        x: {
+                            title: {
+                                display: true,
+                                text: 'Year'
+                            }
+                        },
+                        y: {
+                            beginAtZero: true,
+                            title: {
+                                display: true,
+                                text: 'Number of Crimes'
+                            }
+                        }
+                    }
+                }
+            });
+        });
+    </script>
+</body>
+</html>

templates/index.html

@@ -0,0 +1,226 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Crime Prediction</title>
+    <link rel="stylesheet" href="styles.css">
+    <style>
+        body, html {
+            margin: 0;
+            padding: 0;
+            width: 100%;
+            height: 100%;
+            font-family: Arial, sans-serif;
+            background-color: #000;
+            color: #fff;
+            overflow: hidden; /* Prevents scrollbars */
+        }
+
+        .container {
+            position: relative;
+            height: 100%;
+        }
+
+        nav {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 10px 20px;
+            background-color: rgba(0, 0, 0, 0.7);
+            position: absolute;
+            width: 100%;
+            top: 0;
+            left: 0;
+            z-index: 1000;
+        }
+
+        .nav-left {
+            display: flex;
+            align-items: center;
+        }
+
+        .nav-left img {
+            width: 50px;
+            height: auto;
+            margin-right: 10px;
+        }
+
+        .nav-right {
+            display: flex;
+            align-items: center;
+            margin-left: auto;
+        }
+
+        .nav-right ul {
+            list-style: none;
+            margin: 0;
+            padding: 0;
+            display: flex;
+            align-items: center;
+        }
+
+        .nav-right ul li {
+            position: relative;
+            margin-left: 20px;
+        }
+
+        .nav-right ul li a {
+            text-decoration: none;
+            color: #fff;
+            font-size: 16px;
+            cursor: pointer;
+        }
+
+        .dropdown {
+            display: none;
+            position: absolute;
+            top: 30px;
+            left: 0;
+            background-color: rgba(0, 0, 0, 0.7);
+            border: 1px solid #fff;
+            border-radius: 5px;
+            z-index: 1001;
+        }
+
+        .dropdown a {
+            display: block;
+            padding: 10px;
+            color: #fff;
+            text-decoration: none;
+        }
+
+        .dropdown a:hover {
+            background-color: #333;
+        }
+
+        .hero {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            text-align: center;
+            background: url("{{ url_for('static', filename='videos/crime.avif') }}") no-repeat center center fixed;
+        }
+
+        .hero-text {
+            position: relative;
+            color: #ff0000;
+            z-index: 1001;
+        }
+
+        .hero-text img {
+            width: 100px;
+            height: auto;
+            margin-bottom: 20px;
+        }
+
+        .hero-text h1 {
+            font-size: 6vw;
+            margin: 0;
+        }
+
+        .hero-text h3 {
+            font-size: 3vw;
+            margin: 10px 0;
+        }
+
+        .hero-text p {
+            font-size: 2vw;
+        }
+
+        @media (max-width: 768px) {
+            .nav-right ul {
+                flex-direction: column;
+                align-items: flex-start;
+            }
+
+            .nav-right ul li {
+                margin-left: 0;
+                margin-top: 10px;
+            }
+
+            .dropdown {
+                position: static;
+            }
+
+            .hero-text h1 {
+                font-size: 8vw;
+            }
+
+            .hero-text h3 {
+                font-size: 4vw;
+            }
+
+            .hero-text p {
+                font-size: 3vw;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <nav>
+            <div class="nav-left">
+                <img src="{{ url_for('static', filename='images/Seal_of_Karnataka.png') }}" alt="Logo">
+            </div>
+            <div class="nav-right">
+                <ul>
+                    <li>
+                        <a href="#" class="toggle-dropdown">Prediction</a>
+                        <div class="dropdown">
+                            
+                            <a href="http://127.0.0.1:5000/crime-prediction">Crime Prediction</a>
+                            <a href="http://127.0.0.1:5000/future-crime-forecast">Future Crime Prediction</a>
+                            <a href="http://127.0.0.1:5000/cluster">Crime Solution</a>
+                            <a href="http://127.0.0.1:5000/predict">Behavior Prediction</a>
+                        </div>
+                    </li>
+                    <li>
+                        <a href="#" class="toggle-dropdown">Hotspot</a>
+                        <div class="dropdown">
+                            <a href="http://127.0.0.1:5000/heat-map">Heat-map</a>
+                            <a href="http://127.0.0.1:5000/crime-marker">Crime-marker</a>
+                        </div>
+                    </li>
+                    <li><a href="http://127.0.0.1:5000/">Login</a></li>
+                </ul>
+            </div>
+        </nav>
+        <div class="hero">
+            <div class="hero-text">
+                <img src="{{ url_for('static', filename='images/Seal_of_Karnataka.png') }}" alt="Logo">
+                <h1>PREDICTIVE CRIME ANALYTICS</h1>
+                <h3>POLICE RESCUE</h3>
+                <p>KARNATAKA POLICE HACKATHON</p>
+            </div>
+        </div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const dropdownToggles = document.querySelectorAll('.toggle-dropdown');
+            
+            dropdownToggles.forEach(toggle => {
+                toggle.addEventListener('click', function(event) {
+                    event.preventDefault();
+                    const dropdown = this.nextElementSibling;
+                    const isOpen = dropdown.style.display === 'block';
+                    document.querySelectorAll('.dropdown').forEach(drop => drop.style.display = 'none');
+                    dropdown.style.display = isOpen ? 'none' : 'block';
+                });
+            });
+
+            document.addEventListener('click', function(event) {
+                if (!event.target.closest('.nav-right ul li')) {
+                    document.querySelectorAll('.dropdown').forEach(drop => drop.style.display = 'none');
+                }
+            });
+        });
+    </script>
+</body>
+</html>

templates/login.html

@@ -0,0 +1,127 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Login - Crime Prediction System</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            background: url('{{ url_for('static', filename='videos/crime.avif') }}') no-repeat center center fixed;
+            background-size: cover;
+            color: #fff;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            margin: 0;
+        }
+
+        .video-background {
+            position: fixed;
+            right: 0;
+            bottom: 0;
+            min-width: 100%;
+            min-height: 100%;
+            width: auto;
+            height: auto;
+            z-index: -1;
+            background: url('{{ url_for('static', filename='videos/crime.avif') }}') no-repeat center center fixed;
+            background-size: cover;
+        }
+
+        .login-container {
+            background: rgba(0, 0, 0, 0.8);
+            padding: 30px;
+            border-radius: 10px;
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+            text-align: center;
+            width: 300px;
+            position: relative;
+        }
+
+        .login-container h1 {
+            margin-bottom: 20px;
+        }
+
+        .logo {
+            margin-bottom: 20px;
+        }
+
+        .input-group {
+            margin-bottom: 15px;
+            text-align: left;
+        }
+
+        .input-group label {
+            display: block;
+            margin-bottom: 5px;
+        }
+
+        .input-group input {
+            width: 100%;
+            padding: 10px;
+            border: none;
+            border-radius: 5px;
+        }
+
+        button {
+            width: 100%;
+            padding: 10px;
+            background: #d63031;
+            border: none;
+            border-radius: 5px;
+            color: #fff;
+            font-size: 16px;
+            cursor: pointer;
+        }
+
+        button:hover {
+            background: #e84343;
+        }
+
+        .error-message {
+            margin-top: 15px;
+            color: #ff6b6b;
+            display: none;
+        }
+    </style>
+</head>
+<body>
+    <video autoplay loop muted class="video-background">
+        <source src="{{ url_for('static', filename='videos/crime_login.mp4') }}" type="video/mp4">
+    </video>
+    <div class="login-container">
+        <img src="{{ url_for('static', filename='images/logo.png') }}" alt="Logo" class="logo">
+        <h1>Crime Prediction System</h1>
+        <form id="loginForm" onsubmit="return validateLogin()">
+            <div class="input-group">
+                <label for="username">Username</label>
+                <input type="text" id="username" name="username" required>
+            </div>
+            <div class="input-group">
+                <label for="password">Password</label>
+                <input type="password" id="password" name="password" required>
+            </div>
+            <button type="submit">Login</button>
+        </form>
+        <p id="errorMessage" class="error-message"></p>
+    </div>
+    <script>
+        function validateLogin() {
+            const username = document.getElementById('username').value;
+            const password = document.getElementById('password').value;
+            const errorMessage = document.getElementById('errorMessage');
+
+            if (username === 'admin' && password === 'admin123') {
+                window.location.href = 'https://super-umbrella-pj7j4xpp49v9c6g4g-5000.app.github.dev/index';
+                return false;
+            } else {
+                errorMessage.textContent = 'Invalid username or password';
+                errorMessage.style.display = 'block';
+                return false;
+            }
+        }
+    </script>
+</body>
+</html>