Work done so far -> Flask backend, Simple dashboard

app.py

+from fileinput import filename
+from flask import Flask, flash, request, redirect, url_for, render_template
+import urllib.request
+import os
+from werkzeug.utils import secure_filename
+import pandas as pd
+import matplotlib
+matplotlib.use('Agg')
+import matplotlib.pyplot as plt
+import numpy as np
+
+app = Flask(__name__)
+ 
+UPLOAD_FOLDER = 'static/'
+ 
+app.secret_key = "secret key"
+app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
+app.config["CACHE_TYPE"] = "null"
+app.config['SEND_FILE_MAX_AGE_DEFAULT'] = 0
+
+# app.config['MAX_CONTENT_LENGTH'] = 16 * 1024 * 1024
+ 
+# ALLOWED_EXTENSIONS = set(['png', 'jpg', 'jpeg', 'gif'])
+ 
+# def allowed_file(filename):
+#     return '.' in filename and filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS
+
+def prepare_graph(filename):
+    data=list(np.random.uniform(1, 10, size=(10,1)).reshape(-1))
+    ind = np.arange(len(data))
+#     plt.ioff()
+    fig = plt.figure(figsize=(8,6))
+    plt.plot(data, label='Number of Schools', ls='--', color='black', marker='o', markersize=9, mew=2, linewidth=2)
+    plt.xlabel('Year')
+    plt.ylabel('Number of Schools')
+    plt.xticks(ind, [2000+i for i in ind])
+    plt.legend(loc=0)
+    plt.savefig('./static/'+filename)
+    plt.close(fig)
+
+@app.after_request
+def add_header(request):
+    """
+    Add headers to both force latest IE rendering engine or Chrome Frame,
+    and also to cache the rendered page for 10 minutes.
+    """
+    request.headers["Cache-Control"] = "no-cache, no-store, must-revalidate"
+    request.headers["Pragma"] = "no-cache"
+    request.headers["Expires"] = "0"
+    request.headers['Cache-Control'] = 'public, max-age=0'
+    return request
+    
+@app.route('/')
+def home():
+    return render_template('index.html')
+
+@app.route('/index.html')
+def index():
+    return render_template('index.html')
+
+@app.route('/students.html')
+def students():
+    return render_template('students.html')
+
+@app.route('/teachers.html')
+def teachers():
+    return render_template('teachers.html')
+
+@app.route('/schools.html')
+def schools():
+    return render_template('schools.html')
+
+@app.route('/classrooms.html')
+def classrooms():
+    return render_template('classrooms.html')
+
+@app.route('/facilities.html')
+def facilities():
+    return render_template('facilities.html')
+
+# display selected image
+@app.route('/get_card_from_index', methods=['POST'])
+def get_card_from_index():    
+    card_from_index = 'img/sample_trend_schools.jpeg'
+    prepare_graph(card_from_index)
+    return render_template('index.html', card_from_index=card_from_index)
+
+@app.route('/get_facilities_from_index', methods=['POST'])
+def get_facilities_from_index():    
+    facilities_from_index = 'img/sample_trend_facilities.jpeg'
+    prepare_graph(facilities_from_index)
+    return render_template('index.html', facilities_from_index=facilities_from_index)
+
+@app.route('/get_trend_from_students', methods=['POST'])
+def get_trend_from_students():
+    trend_from_students = 'img/sample_trend_students_new.jpeg'
+    prepare_graph(trend_from_students)
+    return render_template('students.html', trend_from_students=trend_from_students)
+
+@app.route('/get_distribution_from_students', methods=['POST'])
+def get_distribution_from_students():
+    distribution_from_students = 'img/sample_distribution_students_new.jpeg'
+    prepare_graph(distribution_from_students)
+    return render_template('students.html', distribution_from_students=distribution_from_students)
+
+@app.route('/get_trend_from_teachers', methods=['POST'])
+def get_trend_from_teachers():
+    trend_from_teachers = 'img/sample_trend_teachers_new.jpeg'
+    prepare_graph(trend_from_teachers)
+    return render_template('teachers.html', trend_from_teachers=trend_from_teachers)
+
+@app.route('/get_distribution_from_teachers', methods=['POST'])
+def get_distribution_from_teachers():
+    distribution_from_teachers = 'img/sample_distribution_teachers_new.jpeg'
+    prepare_graph(distribution_from_teachers)
+    return render_template('teachers.html', distribution_from_teachers=distribution_from_teachers)
+
+@app.route('/get_trend_from_schools', methods=['POST'])
+def get_trend_from_schools():
+    trend_from_schools = 'img/sample_trend_schools_new.jpeg'
+    prepare_graph(trend_from_schools)
+    return render_template('schools.html', trend_from_schools=trend_from_schools)
+
+@app.route('/get_distribution_from_schools', methods=['POST'])
+def get_distribution_from_schools():
+    distribution_from_schools = 'img/sample_distribution_schools_new.jpeg'
+    prepare_graph(distribution_from_schools)
+    return render_template('schools.html', distribution_from_schools=distribution_from_schools)
+
+@app.route('/get_trend_from_classrooms', methods=['POST'])
+def get_trend_from_classrooms():
+    trend_from_classrooms = 'img/sample_trend_classrooms_new.jpeg'
+    prepare_graph(trend_from_classrooms)
+    return render_template('classrooms.html', trend_from_classrooms=trend_from_classrooms)
+
+@app.route('/get_distribution_from_classrooms', methods=['POST'])
+def get_distribution_from_classrooms():
+    distribution_from_classrooms = 'img/sample_distribution_classrooms_new.jpeg'
+    prepare_graph(distribution_from_classrooms)
+    return render_template('classrooms.html', distribution_from_classrooms=distribution_from_classrooms)
+
+@app.route('/get_trend_from_facilities', methods=['POST'])
+def get_trend_from_facilities():
+    trend_from_facilities = 'img/sample_trend_facilities_new.jpeg'
+    prepare_graph(trend_from_facilities)
+    return render_template('facilities.html', trend_from_facilities=trend_from_facilities)
+
+@app.route('/get_distribution_from_facilities', methods=['POST'])
+def get_distribution_from_facilities():
+    distribution_from_facilities = 'img/sample_distribution_facilities_new.jpeg'
+    prepare_graph(distribution_from_facilities)
+    return render_template('facilities.html', distribution_from_facilities=distribution_from_facilities)
+
+# submit image and display
+# @app.route('/', methods=['POST'])
+# def upload_image():
+#     print(request.files)
+#     if 'file' not in request.files:
+#         flash('No file part')
+#         return redirect(request.url)
+#     file = request.files['file']
+#     if file.filename == '':
+#         flash('No image selected for uploading')
+#         return redirect(request.url)
+#     if file and allowed_file(file.filename):
+#         filename = secure_filename(file.filename)
+#         file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
+#         print('upload_image filename: ' + filename)
+#         flash('Image successfully uploaded and displayed below')
+#         return render_template('index.html', filename=filename)
+#     else:
+#         flash('Allowed image types are - png, jpg, jpeg, gif')
+# #         print(request.url)
+#         return redirect(request.url)
+
+# # @app.route('/display/<filename>')
+# @app.route('/display/<filename>')
+# def display_image(filename):
+#     pass
+# #     print('display_image filename: ' + filename)
+#     return redirect(url_for('static', filename=filename), code=301)
+
+
+if __name__ == "__main__":
+    app.run()
\ No newline at end of file

static/css/styles.css

+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Poppins', sans-serif;
+}
+
+body {
+    min-height: 100vh;
+}
+
+a {
+    text-decoration: none;
+}
+
+li {
+    list-style: none;
+}
+
+h1,
+h2 {
+    color: #444;
+}
+
+h3 {
+    color: #999;
+}
+
+.btn {
+    background: #f05462;
+    color: white;
+    padding: 5px 10px;
+    text-align: center;
+}
+
+.btn:hover {
+    color: #f05462;
+    background: white;
+    padding: 3px 8px;
+    border: 2px solid #f05462;
+}
+
+.title {
+    display: flex;
+    font-weight: 1000;
+    font-size: 25px;
+    align-items: center;
+    /* justify-content: space-around; */
+    justify-content: center;
+    padding: 10px 10px;
+    border-bottom: 2px solid #999;
+    /* height: 14vh; */
+}
+
+table {
+    padding: 10px;
+}
+
+th,
+td {
+    text-align: left;
+    padding: 8px;
+}
+
+.side-menu {
+    position: fixed;
+    background: #f05462;
+    width: 18vw;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+.side-menu .brand-name {
+    height: 10vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.side-menu a {
+    font-size: 24px;
+    padding: 10px 40px;
+    color: white;
+    display: flex;
+    align-items: center;
+}
+
+.side-menu a:hover {
+    background: white;
+    color: #f05462;
+}
+
+.container {
+    position: absolute;
+    right: 0;
+    width: 80vw;
+    height: 100vh;
+    background: #f1f1f1;
+}
+
+.container .header {
+    position: fixed;
+    top: 0;
+    right: 0;
+    width: 80vw;
+    height: 10vh;
+    background: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+    z-index: 1;
+}
+
+.container .header .dashboard_title {
+    height: 14vh;
+    font-size: 30px;
+    font-weight: 1000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+/* .title {
+    height: 14vh;
+    font-size: 30px;
+    font-weight: 1000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+} */
+
+.container .content {
+    position: relative;
+    margin-top: 10vh;
+    min-height: 90vh;
+    background: #f1f1f1;
+}
+
+.container .content .cards {
+    padding: 20px 15px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+}
+
+.container .content .cards .card {
+    width: 250px;
+    height: 150px;
+    background: white;
+    margin: 20px 10px;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+}
+
+.container .content .content-2 {
+    min-height: 60vh;
+    display: flex;
+    justify-content: space-around;
+    align-items: flex-start;
+    flex-wrap: wrap;
+}
+
+.container .content .content-2 .recent-payments {
+    min-height: 100%;
+    background: white;
+    /* margin: 0 25px 25px 25px; */
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+    display: flex;
+    flex-direction: column;
+    /* margin: auto; */
+    margin-top: 0vh;
+    margin-bottom: 5vh;
+}
+
+/* .container .content .content-2 .recent-payments {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+    background: white;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+}
+
+.container .content .content-2 .recent-payments img{
+    min-width: 100%;
+    min-height: 100%
+} */
+
+.container .content .content-2 .new-students {
+    min-height: 100%;
+    background: white;
+    /* margin: 0 25px 25px 25px; */
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 5vh;
+    /* margin-top: 10vh; */
+}
+
+.container .content .content-2 .new-students .performance{
+    min-height: 100%;
+    background: white;
+    /* margin: 0 25px 25px 25px; */
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+    display: flex;
+    flex-direction: column;
+    /* margin-top: 10vh; */
+}
+
+.container .content .content-2 .new-students table td:nth-child(1) img {
+    height: 40px;
+    width: 40px;
+}
+
+@media screen and (max-width: 1050px) {
+    .side-menu li {
+        font-size: 18px;
+    }
+}
+
+@media screen and (max-width: 940px) {
+    .side-menu li span {
+        display: none;
+    }
+    .side-menu {
+        align-items: center;
+    }
+    .side-menu li img {
+        width: 40px;
+        height: 40px;
+    }
+    .side-menu li:hover {
+        background: #f05462;
+        padding: 8px 38px;
+        border: 2px solid white;
+    }
+}
+
+@media screen and (max-width:536px) {
+    .brand-name h1 {
+        font-size: 16px;
+    }
+    .container .content .cards {
+        justify-content: center;
+    }
+    .side-menu li img {
+        width: 30px;
+        height: 30px;
+    }
+    .container .content .content-2 .recent-payments table th:nth-child(2),
+    .container .content .content-2 .recent-payments table td:nth-child(2) {
+        display: none;
+    }
+}
\ No newline at end of file

styles/styles.css

+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Poppins', sans-serif;
+}
+
+body {
+    min-height: 100vh;
+}
+
+a {
+    text-decoration: none;
+}
+
+li {
+    list-style: none;
+}
+
+h1,
+h2 {
+    color: #444;
+}
+
+h3 {
+    color: #999;
+}
+
+.btn {
+    background: #f05462;
+    color: white;
+    padding: 5px 10px;
+    text-align: center;
+}
+
+.btn:hover {
+    color: #f05462;
+    background: white;
+    padding: 3px 8px;
+    border: 2px solid #f05462;
+}
+
+.title {
+    display: flex;
+    font-weight: 1000;
+    font-size: 25px;
+    align-items: center;
+    /* justify-content: space-around; */
+    justify-content: center;
+    padding: 10px 10px;
+    border-bottom: 2px solid #999;
+    /* height: 14vh; */
+}
+
+table {
+    padding: 10px;
+}
+
+th,
+td {
+    text-align: left;
+    padding: 8px;
+}
+
+.side-menu {
+    position: fixed;
+    background: #f05462;
+    width: 18vw;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+.side-menu .brand-name {
+    height: 10vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.side-menu a {
+    font-size: 24px;
+    padding: 10px 40px;
+    color: white;
+    display: flex;
+    align-items: center;
+}
+
+.side-menu a:hover {
+    background: white;
+    color: #f05462;
+}
+
+.container {
+    position: absolute;
+    right: 0;
+    width: 80vw;
+    height: 100vh;
+    background: #f1f1f1;
+}
+
+.container .header {
+    position: fixed;
+    top: 0;
+    right: 0;
+    width: 80vw;
+    height: 10vh;
+    background: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+    z-index: 1;
+}
+
+.container .header .dashboard_title {
+    height: 14vh;
+    font-size: 30px;
+    font-weight: 1000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+/* .title {
+    height: 14vh;
+    font-size: 30px;
+    font-weight: 1000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+} */
+
+.container .content {
+    position: relative;
+    margin-top: 10vh;
+    min-height: 90vh;
+    background: #f1f1f1;
+}
+
+.container .content .cards {
+    padding: 20px 15px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+}
+
+.container .content .cards .card {
+    width: 250px;
+    height: 150px;
+    background: white;
+    margin: 20px 10px;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+}
+
+.container .content .content-2 {
+    min-height: 60vh;
+    display: flex;
+    justify-content: space-around;
+    align-items: flex-start;
+    flex-wrap: wrap;
+}
+
+.container .content .content-2 .recent-payments {
+    min-height: 50vh;
+    flex: 5;
+    background: white;
+    margin: 0 25px 25px 25px;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+    display: flex;
+    flex-direction: column;
+}
+
+.container .content .content-2 .new-students {
+    flex: 2;
+    background: white;
+    min-height: 50vh;
+    margin: 0 25px;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+    display: flex;
+    flex-direction: column;
+}
+
+.container .content .content-2 .new-students table td:nth-child(1) img {
+    height: 40px;
+    width: 40px;
+}
+
+@media screen and (max-width: 1050px) {
+    .side-menu li {
+        font-size: 18px;
+    }
+}
+
+@media screen and (max-width: 940px) {
+    .side-menu li span {
+        display: none;
+    }
+    .side-menu {
+        align-items: center;
+    }
+    .side-menu li img {
+        width: 40px;
+        height: 40px;
+    }
+    .side-menu li:hover {
+        background: #f05462;
+        padding: 8px 38px;
+        border: 2px solid white;
+    }
+}
+
+@media screen and (max-width:536px) {
+    .brand-name h1 {
+        font-size: 16px;
+    }
+    .container .content .cards {
+        justify-content: center;
+    }
+    .side-menu li img {
+        width: 30px;
+        height: 30px;
+    }
+    .container .content .content-2 .recent-payments table th:nth-child(2),
+    .container .content .content-2 .recent-payments table td:nth-child(2) {
+        display: none;
+    }
+}
\ No newline at end of file

templates/classrooms.html

+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta http-equiv="cache-control" content="no-cache" />
+    <meta http-equiv="expires" content="0" />
+    <meta http-equiv="pragma" content="no-cache" />
+
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css">
+    <title>Classrooms</title>
+</head>
+
+<body>
+    <div class="side-menu">
+        <div class="brand-name">
+            <h1>Navigation</h1>
+        </div>
+        <ul>
+            <li><a href="{{ url_for('index') }}"><img src="{{ url_for('static', filename='img/dashboard.png') }}" alt="">&nbsp; <span>Home</span></a></li>
+            <li><a href="{{ url_for('students') }}"><img src="{{ url_for('static', filename='img/students_navbar.png') }}" alt="">&nbsp;<span>Students</span></a></li>
+            <li><a href="{{ url_for('teachers') }}"><img src="{{ url_for('static', filename='img/teacher2.png') }}" alt="">&nbsp;<span>Teachers</span></a></li>
+            <li><a href="{{ url_for('schools') }}"><img src="{{ url_for('static', filename='img/school.png') }}" alt="">&nbsp;<span>Schools</span></a></li>
+            <li><a href="{{ url_for('classrooms') }}"><img src="{{ url_for('static', filename='img/payment.png') }}" alt="">&nbsp;<span>Classrooms</span></a></li>
+            <li><a href="{{ url_for('facilities') }}"><img src="{{ url_for('static', filename='img/help-web-button.png') }}" alt="">&nbsp; <span>Facilities</span></a></li>
+        </ul>
+    </div>
+    <div class="container">
+        <div class="header">
+            <div class="dashboard_title">
+                Classrooms
+            </div>
+        </div>
+        <div class="content">
+            <div class="cards">
+                <div class="card">
+                    <div class="box">
+                        <h1>2194</h1>
+                        <h3>Teachers</h3>
+                    </div>
+                    <div class="icon-case">
+                        <img src="{{ url_for('static', filename='img/students.png') }}" alt="">
+                    </div>
+                </div>
+                <div class="card">
+                    <div class="box">
+                        <h1>53</h1>
+                        <h3>Government</h3>
+                    </div>
+                    <div class="icon-case">
+                        <img src="{{ url_for('static', filename='img/teachers.png') }}" alt="">
+                    </div>
+                </div>
+                <div class="card">
+                    <div class="box">
+                        <h1>5</h1>
+                        <h3>Private</h3>
+                    </div>
+                    <div class="icon-case">
+                        <img src="{{ url_for('static', filename='img/schools.png') }}" alt="">
+                    </div>
+                </div>
+                <div class="card">
+                    <div class="box">
+                        <h1>150</h1>
+                        <h3>Others</h3>
+                    </div>
+                    <div class="icon-case">
+                        <img src="{{ url_for('static', filename='img/income.png') }}" alt="">
+                    </div>
+                </div>
+            </div>
+            <div class="content-2">
+                <div class="recent-payments">
+                    <div class="title">
+                        Trend by state
+                    </div>
+                    <form method="POST" action="/get_trend_from_classrooms">
+                        Select state:
+                        <select name="state" class="state">
+                            <option value="Maharashtra">Maharashtra</option>
+                            <option value="Gujarat">Gujarat</option>
+                            <option value="Karnataka">Karnataka</option>
+                            <option value="Kerela">Kerela</option>
+                        </select>
+                        Select type:
+                        <select name="type" class="type">
+                            <option value="category">By Category</option>
+                            <option value="rural">By Rural Enrolments</option>                    
+                        </select>
+                        <input name="get_trend_from_classrooms" type="submit" value="Submit">
+                    </form>
+                    {% if trend_from_classrooms %}
+                    <div>
+                        <img src="{{ url_for('static', filename=trend_from_classrooms) }}">
+                    </div>
+                    {% else %}
+                    <div>
+                        <img src="{{ url_for('static', filename='img/sample_trend_classrooms.jpeg') }}">
+                    </div>
+                    {% endif %}
+                </div>
+            </div>
+            <div class="content-2">
+                <div class="new-students">
+                    <div class="title">
+                        Distribution across states
+                    </div>
+                    <form method="POST" action="/get_distribution_from_classrooms">
+                        Select state:
+                        <select name="state" class="state">
+                            <option value="Maharashtra">Maharashtra</option>
+                            <option value="Gujarat">Gujarat</option>
+                            <option value="Karnataka">Karnataka</option>
+                            <option value="Kerela">Kerela</option>
+                        </select>
+                        Select type:
+                        <select name="type" class="type">
+                            <option value="government">Government</option>
+                            <option value="private">Private</option>
+                            <option value="others">Madrasas and Others</option>
+                        </select>
+                        <input name="get_distribution_from_classrooms" type="submit" value="Submit">
+                    </form>
+                    {% if distribution_from_classrooms %}
+                    <div>
+                        <img src="{{ url_for('static', filename=distribution_from_classrooms) }}">
+                    </div>
+                    {% else %}
+                    <div>
+                        <img src="{{ url_for('static', filename='img/sample_distribution_classrooms.jpeg') }}">
+                    </div>
+                    {% endif %}
+                </div>
+            </div>
+            {% if distribution_from_classrooms %}
+            <div class="cards">
+                <div class="card">
+                    <div class="box">
+                        <h1>2194</h1>
+                        <h3>Government</h3>
+                    </div>
+                    <div class="icon-case">
+                        <img src="{{ url_for('static', filename='img/students.png') }}" alt="">
+                    </div>
+                </div>
+                <div class="card">
+                    <div class="box">
+                        <h1>53</h1>
+                        <h3>Private</h3>
+                    </div>
+                    <div class="icon-case">
+                        <img src="{{ url_for('static', filename='img/teachers.png') }}" alt="">
+                    </div>
+                </div>
+                <div class="card">
+                    <div class="box">
+                        <h1>5</h1>
+                        <h3>Others</h3>
+                    </div>
+                    <div class="icon-case">
+                        <img src="{{ url_for('static', filename='img/schools.png') }}" alt="">
+                    </div>
+                </div>
+            </div>
+            {% else %}
+            <div class="content-2">
+                <div class="new-students">
+                    <div class="title">
+                        Top Performing States
+                    </div>
+                    <table>
+                        <tr>
+                            <th>Rank</th>
+                            <th>Name</th>
+                        </tr>
+                        <tr>
+                            <td>1</td>
+                            <td>Maharashtra</td>
+                        </tr>
+                        <tr>
+                            <td>2</td>
+                            <td>Gujarat</td>
+                        </tr>
+                        <tr>
+                            <td>3</td>
+                            <td>Karnataka</td>
+                        </tr>
+                    </table>
+                </div>
+                <div class="new-students">
+                    <div class="title">
+                        Worst Performing States
+                    </div>
+                    <table>
+                        <tr>
+                            <th>Rank</th>
+                            <th>Name</th>
+                        </tr>
+                        <tr>
+                            <td>1</td>
+                            <td>West Bengal</td>
+                        </tr>
+                        <tr>
+                            <td>2</td>
+                            <td>Orissa</td>
+                        </tr>
+                        <tr>
+                            <td>3</td>
+                            <td>Bihar</td>
+                        </tr>
+                    </table>
+                </div>
+            </div>
+            {% endif %}
+        </div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file

templates/facilities.html

+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta http-equiv="cache-control" content="no-cache" />
+    <meta http-equiv="expires" content="0" />
+    <meta http-equiv="pragma" content="no-cache" />
+
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css">
+    <title>Facilities</title>
+</head>
+
+<body>
+    <div class="side-menu">
+        <div class="brand-name">
+            <h1>Navigation</h1>
+        </div>
+        <ul>
+            <li><a href="{{ url_for('index') }}"><img src="{{ url_for('static', filename='img/dashboard.png') }}" alt="">&nbsp; <span>Home</span></a></li>
+            <li><a href="{{ url_for('students') }}"><img src="{{ url_for('static', filename='img/students_navbar.png') }}" alt="">&nbsp;<span>Students</span></a></li>
+            <li><a href="{{ url_for('teachers') }}"><img src="{{ url_for('static', filename='img/teacher2.png') }}" alt="">&nbsp;<span>Teachers</span></a></li>
+            <li><a href="{{ url_for('schools') }}"><img src="{{ url_for('static', filename='img/school.png') }}" alt="">&nbsp;<span>Schools</span></a></li>
+            <li><a href="{{ url_for('classrooms') }}"><img src="{{ url_for('static', filename='img/payment.png') }}" alt="">&nbsp;<span>Classrooms</span></a></li>
+            <li><a href="{{ url_for('facilities') }}"><img src="{{ url_for('static', filename='img/help-web-button.png') }}" alt="">&nbsp; <span>Facilities</span></a></li>
+        </ul>
+    </div>
+    <div class="container">
+        <div class="header">
+            <div class="dashboard_title">
+                Facilities
+            </div>
+        </div>
+        <div class="content">
+            <div class="cards">
+                <div class="card">
+                    <div class="box">
+                        <h1>2194</h1>
+                        <h3>Teachers</h3>
+                    </div>
+                    <div class="icon-case">
+                        <img src="{{ url_for('static', filename='img/students.png') }}" alt="">
+                    </div>
+                </div>
+                <div class="card">
+                    <div class="box">
+                        <h1>53</h1>
+                        <h3>Government</h3>
+                    </div>
+                    <div class="icon-case">
+                        <img src="{{ url_for('static', filename='img/teachers.png') }}" alt="">
+                    </div>
+                </div>
+                <div class="card">
+                    <div class="box">
+                        <h1>5</h1>
+                        <h3>Private</h3>
+                    </div>
+                    <div class="icon-case">
+                        <img src="{{ url_for('static', filename='img/schools.png') }}" alt="">
+                    </div>
+                </div>
+                <div class="card">
+                    <div class="box">
+                        <h1>150</h1>
+                        <h3>Others</h3>
+                    </div>
+                    <div class="icon-case">
+                        <img src="{{ url_for('static', filename='img/income.png') }}" alt="">
+                    </div>
+                </div>
+            </div>
+            <div class="content-2">
+                <div class="recent-payments">
+                    <div class="title">
+                        Trend by state
+                    </div>
+                    <form method="POST" action="/get_trend_from_facilities">
+                        Select state:
+                        <select name="state" class="state">
+                            <option value="Maharashtra">Maharashtra</option>
+                            <option value="Gujarat">Gujarat</option>
+                            <option value="Karnataka">Karnataka</option>
+                            <option value="Kerela">Kerela</option>
+                        </select>
+                        Select type:
+                        <select name="type" class="type">
+                            <option value="category">By Category</option>
+                            <option value="rural">By Rural Enrolments</option>                    
+                        </select>
+                        <input name="get_trend_from_facilities" type="submit" value="Submit">
+                    </form>
+                    {% if trend_from_facilities %}
+                    <div>
+                        <img src="{{ url_for('static', filename=trend_from_facilities) }}">
+                    </div>
+                    {% else %}
+                    <div>
+                        <img src="{{ url_for('static', filename='img/sample_trend_facilities.jpeg') }}">
+                    </div>
+                    {% endif %}
+                </div>
+            </div>
+            <div class="content-2">
+                <div class="new-students">
+                    <div class="title">
+                        Distribution across states
+                    </div>
+                    <form method="POST" action="/get_distribution_from_facilities">
+                        Select state:
+                        <select name="state" class="state">
+                            <option value="Maharashtra">Maharashtra</option>
+                            <option value="Gujarat">Gujarat</option>
+                            <option value="Karnataka">Karnataka</option>
+                            <option value="Kerela">Kerela</option>
+                        </select>
+                        Select type:
+                        <select name="type" class="type">
+                            <option value="government">Government</option>
+                            <option value="private">Private</option>
+                            <option value="others">Madrasas and Others</option>
+                        </select>
+                        <input name="get_distribution_from_facilities" type="submit" value="Submit">
+                    </form>
+                    {% if distribution_from_facilities %}
+                    <div>
+                        <img src="{{ url_for('static', filename=distribution_from_facilities) }}">
+                    </div>
+                    {% else %}
+                    <div>
+                        <img src="{{ url_for('static', filename='img/sample_distribution_facilities.jpeg') }}">
+                    </div>
+                    {% endif %}
+                </div>
+            </div>
+            {% if distribution_from_facilities %}
+            <div class="cards">
+                <div class="card">
+                    <div class="box">
+                        <h1>2194</h1>
+                        <h3>Government</h3>
+                    </div>
+                    <div class="icon-case">
+                        <img src="{{ url_for('static', filename='img/students.png') }}" alt="">
+                    </div>
+                </div>
+                <div class="card">
+                    <div class="box">
+                        <h1>53</h1>
+                        <h3>Private</h3>
+                    </div>
+                    <div class="icon-case">
+                        <img src="{{ url_for('static', filename='img/teachers.png') }}" alt="">
+                    </div>
+                </div>
+                <div class="card">
+                    <div class="box">
+                        <h1>5</h1>
+                        <h3>Others</h3>
+                    </div>
+                    <div class="icon-case">
+                        <img src="{{ url_for('static', filename='img/schools.png') }}" alt="">
+                    </div>
+                </div>
+            </div>
+            {% else %}
+            <div class="content-2">
+                <div class="new-students">
+                    <div class="title">
+                        Top Performing States
+                    </div>
+                    <table>
+                        <tr>
+                            <th>Rank</th>
+                            <th>Name</th>
+                        </tr>
+                        <tr>
+                            <td>1</td>
+                            <td>Maharashtra</td>
+                        </tr>
+                        <tr>
+                            <td>2</td>
+                            <td>Gujarat</td>
+                        </tr>
+                        <tr>
+                            <td>3</td>
+                            <td>Karnataka</td>
+                        </tr>
+                    </table>
+                </div>
+                <div class="new-students">
+                    <div class="title">
+                        Worst Performing States
+                    </div>
+                    <table>
+                        <tr>
+                            <th>Rank</th>
+                            <th>Name</th>
+                        </tr>
+                        <tr>
+                            <td>1</td>
+                            <td>West Bengal</td>
+                        </tr>
+                        <tr>
+                            <td>2</td>
+                            <td>Orissa</td>
+                        </tr>
+                        <tr>
+                            <td>3</td>
+                            <td>Bihar</td>
+                        </tr>
+                    </table>
+                </div>
+            </div>
+            {% endif %}
+        </div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file

templates/index.html

+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta http-equiv="cache-control" content="no-cache" />
+    <meta http-equiv="expires" content="0" />
+    <meta http-equiv="pragma" content="no-cache" />
+
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css">
+    <title>Education in India</title>
+</head>
+
+<body>
+    <div class="side-menu">
+        <div class="brand-name">
+            <h1>Navigation</h1>
+        </div>
+        <ul>
+            <li><a href="{{ url_for('index') }}"><img src="{{ url_for('static', filename='img/dashboard.png') }}" alt="">&nbsp; <span>Home</span></a></li>
+            <li><a href="{{ url_for('students') }}"><img src="{{ url_for('static', filename='img/students_navbar.png') }}" alt="">&nbsp;<span>Students</span></a></li>
+            <li><a href="{{ url_for('teachers') }}"><img src="{{ url_for('static', filename='img/teacher2.png') }}" alt="">&nbsp;<span>Teachers</span></a></li>
+            <li><a href="{{ url_for('schools') }}"><img src="{{ url_for('static', filename='img/school.png') }}" alt="">&nbsp;<span>Schools</span></a></li>
+            <li><a href="{{ url_for('classrooms') }}"><img src="{{ url_for('static', filename='img/payment.png') }}" alt="">&nbsp;<span>Classrooms</span></a></li>
+            <li><a href="{{ url_for('facilities') }}"><img src="{{ url_for('static', filename='img/help-web-button.png') }}" alt="">&nbsp; <span>Facilities</span></a></li>
+        </ul>
+    </div>
+    <div class="container">
+        <div class="header">
+            <div class="dashboard_title">
+                Education in INDIA
+            </div>
+        </div>
+        <div class="content">
+            <div class="cards">
+                <div class="card">
+                    <div class="box">
+                        <h1>2194</h1>
+                        <h3>Students</h3>
+                    </div>
+                    <div class="icon-case">
+                        <img src="{{ url_for('static', filename='img/students.png') }}" alt="">
+                    </div>
+                </div>
+                <div class="card">
+                    <div class="box">
+                        <h1>53</h1>
+                        <h3>Teachers</h3>
+                    </div>
+                    <div class="icon-case">
+                        <img src="{{ url_for('static', filename='img/teachers.png') }}" alt="">
+                    </div>
+                </div>
+                <div class="card">
+                    <div class="box">
+                        <h1>5</h1>
+                        <h3>Schools</h3>
+                    </div>
+                    <div class="icon-case">
+                        <img src="{{ url_for('static', filename='img/schools.png') }}" alt="">
+                    </div>
+                </div>
+                <div class="card">
+                    <div class="box">
+                        <h1>150</h1>
+                        <h3>Classrooms</h3>
+                    </div>
+                    <div class="icon-case">
+                        <img src="{{ url_for('static', filename='img/income.png') }}" alt="">
+                    </div>
+                </div>
+            </div>
+            <div class="content-2">
+                <div class="recent-payments">
+                    <div class="title">
+                        Schools
+                    </div>
+                    <form method="POST" action="/get_card_from_index">
+                        <select name="dimension" class="dimension">
+                            <option value="Students">Students</option>
+                            <option value="Teachers">Teachers</option>
+                            <option value="Schools">Schools</option>
+                            <option value="Classrooms">Classrooms</option>
+                        </select>
+                        <input name="get_card_from_index" type="submit" value="Submit">
+                    </form>
+                    {% if card_from_index %}
+                    <div>
+                        <img src="{{ url_for('static', filename=card_from_index) }}">
+                    </div>
+                    {% else %}
+                    <div>
+                        <img src="{{ url_for('static', filename='img/sample_trend_schools.jpeg') }}">
+                    </div>
+                    {% endif %}
+                </div>
+            </div>
+            <div class="content-2">
+                <div class="new-students">
+                    <div class="title">
+                        Facilities
+                    </div>
+                    <form method="POST" action="/get_facilities_from_index">
+                        <select name="facilities" class="facilities">
+                            <option value="girls_toilet">Girl's Toilet</option>
+                            <option value="ramp">Ramp</option>
+                            <option value="drinking_water">Drinking Water</option>
+                            <option value="enrolment_less_than_50">Enrolment &lt; 50</option>
+                            <option value="single_classroom">Single Classrooms</option>
+                            <option value="single_teacher">Single Teacher</option>
+                        </select>
+                        <input name="get_facilities_from_index" type="submit" value="Submit">
+                        <!-- <button name="foo" value="upvote">Upvote</button> -->
+                    </form>
+                    {% if facilities_from_index %}
+                    <div>
+                        <img src="{{ url_for('static', filename=facilities_from_index) }}">
+                    </div>
+                    {% else %}
+                    <div>
+                        <img src="{{ url_for('static', filename='img/sample_trend_facilities.jpeg') }}">
+                    </div>
+                    {% endif %}
+                </div>
+            </div>
+        </div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file

templates/schools.html

+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta http-equiv="cache-control" content="no-cache" />
+    <meta http-equiv="expires" content="0" />
+    <meta http-equiv="pragma" content="no-cache" />
+
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css">
+    <title>Schools</title>
+</head>
+
+<body>
+    <div class="side-menu">
+        <div class="brand-name">
+            <h1>Navigation</h1>
+        </div>
+        <ul>
+            <li><a href="{{ url_for('index') }}"><img src="{{ url_for('static', filename='img/dashboard.png') }}" alt="">&nbsp; <span>Home</span></a></li>
+            <li><a href="{{ url_for('students') }}"><img src="{{ url_for('static', filename='img/students_navbar.png') }}" alt="">&nbsp;<span>Students</span></a></li>
+            <li><a href="{{ url_for('teachers') }}"><img src="{{ url_for('static', filename='img/teacher2.png') }}" alt="">&nbsp;<span>Teachers</span></a></li>
+            <li><a href="{{ url_for('schools') }}"><img src="{{ url_for('static', filename='img/school.png') }}" alt="">&nbsp;<span>Schools</span></a></li>
+            <li><a href="{{ url_for('classrooms') }}"><img src="{{ url_for('static', filename='img/payment.png') }}" alt="">&nbsp;<span>Classrooms</span></a></li>
+            <li><a href="{{ url_for('facilities') }}"><img src="{{ url_for('static', filename='img/help-web-button.png') }}" alt="">&nbsp; <span>Facilities</span></a></li>
+        </ul>
+    </div>
+    <div class="container">
+        <div class="header">
+            <div class="dashboard_title">
+                Schools
+            </div>
+        </div>
+        <div class="content">
+            <div class="cards">
+                <div class="card">
+                    <div class="box">
+                        <h1>2194</h1>
+                        <h3>Teachers</h3>
+                    </div>
+                    <div class="icon-case">
+                        <img src="{{ url_for('static', filename='img/students.png') }}" alt="">
+                    </div>
+                </div>
+                <div class="card">
+                    <div class="box">
+                        <h1>53</h1>
+                        <h3>Government</h3>
+                    </div>
+                    <div class="icon-case">
+                        <img src="{{ url_for('static', filename='img/teachers.png') }}" alt="">
+                    </div>
+                </div>
+                <div class="card">
+                    <div class="box">
+                        <h1>5</h1>
+                        <h3>Private</h3>
+                    </div>
+                    <div class="icon-case">
+                        <img src="{{ url_for('static', filename='img/schools.png') }}" alt="">
+                    </div>
+                </div>
+                <div class="card">
+                    <div class="box">
+                        <h1>150</h1>
+                        <h3>Others</h3>
+                    </div>
+                    <div class="icon-case">
+                        <img src="{{ url_for('static', filename='img/income.png') }}" alt="">
+                    </div>
+                </div>
+            </div>
+            <div class="content-2">
+                <div class="recent-payments">
+                    <div class="title">
+                        Trend by state
+                    </div>
+                    <form method="POST" action="/get_trend_from_schools">
+                        Select state:
+                        <select name="state" class="state">
+                            <option value="Maharashtra">Maharashtra</option>
+                            <option value="Gujarat">Gujarat</option>
+                            <option value="Karnataka">Karnataka</option>
+                            <option value="Kerela">Kerela</option>
+                        </select>
+                        Select type:
+                        <select name="type" class="type">
+                            <option value="category">By Category</option>
+                            <option value="rural">By Rural Enrolments</option>                    
+                        </select>
+                        <input name="get_trend_from_schools" type="submit" value="Submit">
+                    </form>
+                    {% if trend_from_schools %}
+                    <div>
+                        <img src="{{ url_for('static', filename=trend_from_schools) }}">
+                    </div>
+                    {% else %}
+                    <div>
+                        <img src="{{ url_for('static', filename='img/sample_trend_schools.jpeg') }}">
+                    </div>
+                    {% endif %}
+                </div>
+            </div>
+            <div class="content-2">
+                <div class="new-students">
+                    <div class="title">
+                        Distribution across states
+                    </div>
+                    <form method="POST" action="/get_distribution_from_schools">
+                        Select state:
+                        <select name="state" class="state">
+                            <option value="Maharashtra">Maharashtra</option>
+                            <option value="Gujarat">Gujarat</option>
+                            <option value="Karnataka">Karnataka</option>
+                            <option value="Kerela">Kerela</option>
+                        </select>
+                        Select type:
+                        <select name="type" class="type">
+                            <option value="government">Government</option>
+                            <option value="private">Private</option>
+                            <option value="others">Madrasas and Others</option>
+                        </select>
+                        <input name="get_distribution_from_schools" type="submit" value="Submit">
+                    </form>
+                    {% if distribution_from_schools %}
+                    <div>
+                        <img src="{{ url_for('static', filename=distribution_from_schools) }}">
+                    </div>
+                    {% else %}
+                    <div>
+                        <img src="{{ url_for('static', filename='img/sample_distribution_schools.jpeg') }}">
+                    </div>
+                    {% endif %}
+                </div>
+            </div>
+            {% if distribution_from_schools %}
+            <div class="cards">
+                <div class="card">
+                    <div class="box">
+                        <h1>2194</h1>
+                        <h3>Government</h3>
+                    </div>
+                    <div class="icon-case">
+                        <img src="{{ url_for('static', filename='img/students.png') }}" alt="">
+                    </div>
+                </div>
+                <div class="card">
+                    <div class="box">
+                        <h1>53</h1>
+                        <h3>Private</h3>
+                    </div>
+                    <div class="icon-case">
+                        <img src="{{ url_for('static', filename='img/teachers.png') }}" alt="">
+                    </div>
+                </div>
+                <div class="card">
+                    <div class="box">
+                        <h1>5</h1>
+                        <h3>Others</h3>
+                    </div>
+                    <div class="icon-case">
+                        <img src="{{ url_for('static', filename='img/schools.png') }}" alt="">
+                    </div>
+                </div>
+            </div>
+            {% else %}
+            <div class="content-2">
+                <div class="new-students">
+                    <div class="title">
+                        Top Performing States
+                    </div>
+                    <table>
+                        <tr>
+                            <th>Rank</th>
+                            <th>Name</th>
+                        </tr>
+                        <tr>
+                            <td>1</td>
+                            <td>Maharashtra</td>
+                        </tr>
+                        <tr>
+                            <td>2</td>
+                            <td>Gujarat</td>
+                        </tr>
+                        <tr>
+                            <td>3</td>
+                            <td>Karnataka</td>
+                        </tr>
+                    </table>
+                </div>
+                <div class="new-students">
+                    <div class="title">
+                        Worst Performing States
+                    </div>
+                    <table>
+                        <tr>
+                            <th>Rank</th>
+                            <th>Name</th>
+                        </tr>
+                        <tr>
+                            <td>1</td>
+                            <td>West Bengal</td>
+                        </tr>
+                        <tr>
+                            <td>2</td>
+                            <td>Orissa</td>
+                        </tr>
+                        <tr>
+                            <td>3</td>
+                            <td>Bihar</td>
+                        </tr>
+                    </table>
+                </div>
+            </div>
+            {% endif %}
+        </div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file

templates/students.html

+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta http-equiv="cache-control" content="no-cache" />
+    <meta http-equiv="expires" content="0" />
+    <meta http-equiv="pragma" content="no-cache" />
+
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css">
+    <title>Students</title>
+</head>
+
+<body>
+    <div class="side-menu">
+        <div class="brand-name">
+            <h1>Navigation</h1>
+        </div>
+        <ul>
+            <li><a href="{{ url_for('index') }}"><img src="{{ url_for('static', filename='img/dashboard.png') }}" alt="">&nbsp; <span>Home</span></a></li>
+            <li><a href="{{ url_for('students') }}"><img src="{{ url_for('static', filename='img/students_navbar.png') }}" alt="">&nbsp;<span>Students</span></a></li>
+            <li><a href="{{ url_for('teachers') }}"><img src="{{ url_for('static', filename='img/teacher2.png') }}" alt="">&nbsp;<span>Teachers</span></a></li>
+            <li><a href="{{ url_for('schools') }}"><img src="{{ url_for('static', filename='img/school.png') }}" alt="">&nbsp;<span>Schools</span></a></li>
+            <li><a href="{{ url_for('classrooms') }}"><img src="{{ url_for('static', filename='img/payment.png') }}" alt="">&nbsp;<span>Classrooms</span></a></li>
+            <li><a href="{{ url_for('facilities') }}"><img src="{{ url_for('static', filename='img/help-web-button.png') }}" alt="">&nbsp; <span>Facilities</span></a></li>
+        </ul>
+    </div>
+    <div class="container">
+        <div class="header">
+            <div class="dashboard_title">
+                Students
+            </div>
+        </div>
+        <div class="content">
+            <div class="cards">
+                <div class="card">
+                    <div class="box">
+                        <h1>2194</h1>
+                        <h3>Students</h3>
+                    </div>
+                    <div class="icon-case">
+                        <img src="{{ url_for('static', filename='img/students.png') }}" alt="">
+                    </div>
+                </div>
+                <div class="card">
+                    <div class="box">
+                        <h1>53</h1>
+                        <h3>Government</h3>
+                    </div>
+                    <div class="icon-case">
+                        <img src="{{ url_for('static', filename='img/teachers.png') }}" alt="">
+                    </div>
+                </div>
+                <div class="card">
+                    <div class="box">
+                        <h1>5</h1>
+                        <h3>Private</h3>
+                    </div>
+                    <div class="icon-case">
+                        <img src="{{ url_for('static', filename='img/schools.png') }}" alt="">
+                    </div>
+                </div>
+                <div class="card">
+                    <div class="box">
+                        <h1>150</h1>
+                        <h3>Others</h3>
+                    </div>
+                    <div class="icon-case">
+                        <img src="{{ url_for('static', filename='img/income.png') }}" alt="">
+                    </div>
+                </div>
+            </div>
+            <div class="content-2">
+                <div class="recent-payments">
+                    <div class="title">
+                        Trend by state
+                    </div>
+                    <form method="POST" action="/get_trend_from_students">
+                        Select state:
+                        <select name="state" class="state">
+                            <option value="Maharashtra">Maharashtra</option>
+                            <option value="Gujarat">Gujarat</option>
+                            <option value="Karnataka">Karnataka</option>
+                            <option value="Kerela">Kerela</option>
+                        </select>
+                        Select type:
+                        <select name="type" class="type">
+                            <option value="category">By Category</option>
+                            <option value="rural">By Rural Enrolments</option>                    
+                        </select>
+                        <input name="get_trend_from_students" type="submit" value="Submit">
+                    </form>
+                    {% if trend_from_students %}
+                    <div>
+                        <img src="{{ url_for('static', filename=trend_from_students) }}">
+                    </div>
+                    {% else %}
+                    <div>
+                        <img src="{{ url_for('static', filename='img/sample_trend_students.jpeg') }}">
+                    </div>
+                    {% endif %}
+                </div>
+            </div>
+            <div class="content-2">
+                <div class="new-students">
+                    <div class="title">
+                        Distribution across states
+                    </div>
+                    <form method="POST" action="/get_distribution_from_students">
+                        Select state:
+                        <select name="state" class="state">
+                            <option value="Maharashtra">Maharashtra</option>
+                            <option value="Gujarat">Gujarat</option>
+                            <option value="Karnataka">Karnataka</option>
+                            <option value="Kerela">Kerela</option>
+                        </select>
+                        Select type:
+                        <select name="type" class="type">
+                            <option value="government">Government</option>
+                            <option value="private">Private</option>
+                            <option value="others">Madrasas and Others</option>
+                        </select>
+                        <input name="get_distribution_from_students" type="submit" value="Submit">
+                    </form>
+                    {% if distribution_from_students %}
+                    <div>
+                        <img src="{{ url_for('static', filename=distribution_from_students) }}">
+                    </div>
+                    {% else %}
+                    <div>
+                        <img src="{{ url_for('static', filename='img/sample_distribution_students.jpeg') }}">
+                    </div>
+                    {% endif %}
+                </div>
+            </div>
+            {% if distribution_from_students %}
+            <div class="cards">
+                <div class="card">
+                    <div class="box">
+                        <h1>2194</h1>
+                        <h3>Government</h3>
+                    </div>
+                    <div class="icon-case">
+                        <img src="{{ url_for('static', filename='img/students.png') }}" alt="">
+                    </div>
+                </div>
+                <div class="card">
+                    <div class="box">
+                        <h1>53</h1>
+                        <h3>Private</h3>
+                    </div>
+                    <div class="icon-case">
+                        <img src="{{ url_for('static', filename='img/teachers.png') }}" alt="">
+                    </div>
+                </div>
+                <div class="card">
+                    <div class="box">
+                        <h1>5</h1>
+                        <h3>Others</h3>
+                    </div>
+                    <div class="icon-case">
+                        <img src="{{ url_for('static', filename='img/schools.png') }}" alt="">
+                    </div>
+                </div>
+            </div>
+            {% else %}
+            <div class="content-2">
+                <div class="new-students">
+                    <div class="title">
+                        Top Performing States
+                    </div>
+                    <table>
+                        <tr>
+                            <th>Rank</th>
+                            <th>Name</th>
+                        </tr>
+                        <tr>
+                            <td>1</td>
+                            <td>Maharashtra</td>
+                        </tr>
+                        <tr>
+                            <td>2</td>
+                            <td>Gujarat</td>
+                        </tr>
+                        <tr>
+                            <td>3</td>
+                            <td>Karnataka</td>
+                        </tr>
+                    </table>
+                </div>
+                <div class="new-students">
+                    <div class="title">
+                        Worst Performing States
+                    </div>
+                    <table>
+                        <tr>
+                            <th>Rank</th>
+                            <th>Name</th>
+                        </tr>
+                        <tr>
+                            <td>1</td>
+                            <td>West Bengal</td>
+                        </tr>
+                        <tr>
+                            <td>2</td>
+                            <td>Orissa</td>
+                        </tr>
+                        <tr>
+                            <td>3</td>
+                            <td>Bihar</td>
+                        </tr>
+                    </table>
+                </div>
+            </div>
+            {% endif %}
+        </div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file

templates/submit_display.html

+<html>
+<head>
+<title>Python Flask Upload and display image</title>
+<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />        
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
+</head>
+<body>
+<p><h1 align="center">Python Flask Upload and display image</h1></p>
+<div class="container">
+<div class="row">
+    <h2>Select a file to upload</h2>
+    <p>
+        {% with messages = get_flashed_messages() %}
+          {% if messages %}
+            <ul>
+            {% for message in messages %}
+              <li>{{ message }}</li>
+            {% endfor %}
+            </ul>
+          {% endif %}
+        {% endwith %}
+    </p>
+    {% if filename %}
+        <div>
+            <img src="{{ url_for('display_image', filename=filename) }}">
+        </div>
+    {% endif %}
+    <form method="post" action="/" enctype="multipart/form-data">
+        <dl>
+            <p>
+                <input type="file" name="file" class="form-control" autocomplete="off" required>
+            </p>
+        </dl>
+        <p>
+            <input type="submit" value="Submit" class="btn btn-info">
+        </p>
+    </form>
+</div>
+</div>
+</body>
+</html>
\ No newline at end of file

templates/teachers.html

+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta http-equiv="cache-control" content="no-cache" />
+    <meta http-equiv="expires" content="0" />
+    <meta http-equiv="pragma" content="no-cache" />
+
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css">
+    <title>Teachers</title>
+</head>
+
+<body>
+    <div class="side-menu">
+        <div class="brand-name">
+            <h1>Navigation</h1>
+        </div>
+        <ul>
+            <li><a href="{{ url_for('index') }}"><img src="{{ url_for('static', filename='img/dashboard.png') }}" alt="">&nbsp; <span>Home</span></a></li>
+            <li><a href="{{ url_for('students') }}"><img src="{{ url_for('static', filename='img/students_navbar.png') }}" alt="">&nbsp;<span>Students</span></a></li>
+            <li><a href="{{ url_for('teachers') }}"><img src="{{ url_for('static', filename='img/teacher2.png') }}" alt="">&nbsp;<span>Teachers</span></a></li>
+            <li><a href="{{ url_for('schools') }}"><img src="{{ url_for('static', filename='img/school.png') }}" alt="">&nbsp;<span>Schools</span></a></li>
+            <li><a href="{{ url_for('classrooms') }}"><img src="{{ url_for('static', filename='img/payment.png') }}" alt="">&nbsp;<span>Classrooms</span></a></li>
+            <li><a href="{{ url_for('facilities') }}"><img src="{{ url_for('static', filename='img/help-web-button.png') }}" alt="">&nbsp; <span>Facilities</span></a></li>
+        </ul>
+    </div>
+    <div class="container">
+        <div class="header">
+            <div class="dashboard_title">
+                Teachers
+            </div>
+        </div>
+        <div class="content">
+            <div class="cards">
+                <div class="card">
+                    <div class="box">
+                        <h1>2194</h1>
+                        <h3>Teachers</h3>
+                    </div>
+                    <div class="icon-case">
+                        <img src="{{ url_for('static', filename='img/students.png') }}" alt="">
+                    </div>
+                </div>
+                <div class="card">
+                    <div class="box">
+                        <h1>53</h1>
+                        <h3>Government</h3>
+                    </div>
+                    <div class="icon-case">
+                        <img src="{{ url_for('static', filename='img/teachers.png') }}" alt="">
+                    </div>
+                </div>
+                <div class="card">
+                    <div class="box">
+                        <h1>5</h1>
+                        <h3>Private</h3>
+                    </div>
+                    <div class="icon-case">
+                        <img src="{{ url_for('static', filename='img/schools.png') }}" alt="">
+                    </div>
+                </div>
+                <div class="card">
+                    <div class="box">
+                        <h1>150</h1>
+                        <h3>Others</h3>
+                    </div>
+                    <div class="icon-case">
+                        <img src="{{ url_for('static', filename='img/income.png') }}" alt="">
+                    </div>
+                </div>
+            </div>
+            <div class="content-2">
+                <div class="recent-payments">
+                    <div class="title">
+                        Trend by state
+                    </div>
+                    <form method="POST" action="/get_trend_from_teachers">
+                        Select state:
+                        <select name="state" class="state">
+                            <option value="Maharashtra">Maharashtra</option>
+                            <option value="Gujarat">Gujarat</option>
+                            <option value="Karnataka">Karnataka</option>
+                            <option value="Kerela">Kerela</option>
+                        </select>
+                        Select type:
+                        <select name="type" class="type">
+                            <option value="category">By Category</option>
+                            <option value="rural">By Rural Enrolments</option>                    
+                        </select>
+                        <input name="get_trend_from_teachers" type="submit" value="Submit">
+                    </form>
+                    {% if trend_from_teachers %}
+                    <div>
+                        <img src="{{ url_for('static', filename=trend_from_teachers) }}">
+                    </div>
+                    {% else %}
+                    <div>
+                        <img src="{{ url_for('static', filename='img/sample_trend_teachers.jpeg') }}">
+                    </div>
+                    {% endif %}
+                </div>
+            </div>
+            <div class="content-2">
+                <div class="new-students">
+                    <div class="title">
+                        Distribution across states
+                    </div>
+                    <form method="POST" action="/get_distribution_from_teachers">
+                        Select state:
+                        <select name="state" class="state">
+                            <option value="Maharashtra">Maharashtra</option>
+                            <option value="Gujarat">Gujarat</option>
+                            <option value="Karnataka">Karnataka</option>
+                            <option value="Kerela">Kerela</option>
+                        </select>
+                        Select type:
+                        <select name="type" class="type">
+                            <option value="government">Government</option>
+                            <option value="private">Private</option>
+                            <option value="others">Madrasas and Others</option>
+                        </select>
+                        <input name="get_distribution_from_teachers" type="submit" value="Submit">
+                    </form>
+                    {% if distribution_from_teachers %}
+                    <div>
+                        <img src="{{ url_for('static', filename=distribution_from_teachers) }}">
+                    </div>
+                    {% else %}
+                    <div>
+                        <img src="{{ url_for('static', filename='img/sample_distribution_teachers.jpeg') }}">
+                    </div>
+                    {% endif %}
+                </div>
+            </div>
+            {% if distribution_from_teachers %}
+            <div class="cards">
+                <div class="card">
+                    <div class="box">
+                        <h1>2194</h1>
+                        <h3>Government</h3>
+                    </div>
+                    <div class="icon-case">
+                        <img src="{{ url_for('static', filename='img/students.png') }}" alt="">
+                    </div>
+                </div>
+                <div class="card">
+                    <div class="box">
+                        <h1>53</h1>
+                        <h3>Private</h3>
+                    </div>
+                    <div class="icon-case">
+                        <img src="{{ url_for('static', filename='img/teachers.png') }}" alt="">
+                    </div>
+                </div>
+                <div class="card">
+                    <div class="box">
+                        <h1>5</h1>
+                        <h3>Others</h3>
+                    </div>
+                    <div class="icon-case">
+                        <img src="{{ url_for('static', filename='img/schools.png') }}" alt="">
+                    </div>
+                </div>
+            </div>
+            {% else %}
+            <div class="content-2">
+                <div class="new-students">
+                    <div class="title">
+                        Top Performing States
+                    </div>
+                    <table>
+                        <tr>
+                            <th>Rank</th>
+                            <th>Name</th>
+                        </tr>
+                        <tr>
+                            <td>1</td>
+                            <td>Maharashtra</td>
+                        </tr>
+                        <tr>
+                            <td>2</td>
+                            <td>Gujarat</td>
+                        </tr>
+                        <tr>
+                            <td>3</td>
+                            <td>Karnataka</td>
+                        </tr>
+                    </table>
+                </div>
+                <div class="new-students">
+                    <div class="title">
+                        Worst Performing States
+                    </div>
+                    <table>
+                        <tr>
+                            <th>Rank</th>
+                            <th>Name</th>
+                        </tr>
+                        <tr>
+                            <td>1</td>
+                            <td>West Bengal</td>
+                        </tr>
+                        <tr>
+                            <td>2</td>
+                            <td>Orissa</td>
+                        </tr>
+                        <tr>
+                            <td>3</td>
+                            <td>Bihar</td>
+                        </tr>
+                    </table>
+                </div>
+            </div>
+            {% endif %}
+        </div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file