add slot new code

SlotNew/app.py

+from flask import Flask, render_template, request, flash, redirect, url_for, session
+from flask_mysqldb import MySQL
+import yaml
+from functools import wraps
+from wtforms import Form, StringField, validators
+
+from bookingSlot import command_handler
+from slotDetect import str_on_frame
+
+app = Flask(__name__)
+
+db = yaml.load(open('db.yaml'))
+app.config['MYSQL_HOST'] = db['mysql_host']
+app.config['MYSQL_USER'] = db['mysql_user']
+app.config['MYSQL_PASSWORD'] = db['mysql_password']
+app.config['MYSQL_DB'] = db['mysql_db']
+
+mysql= MySQL(app)
+
+
+def is_logged_in(f):
+    @wraps(f)
+    def wrap(*args, **kwargs):
+        if 'logged_in' in session:
+            return f(*args, **kwargs)
+        else:
+            flash('Unauthorized, Please login', 'danger')
+            return redirect(url_for('login'))
+    return wrap
+
+
+class AddTruckForm(Form):
+    vin = StringField('userName', [validators.Length(min=3, max=20)])
+    location = StringField('password', [validators.Length(min=3, max=20)])
+
+
+@app.route('/')
+def index():
+    cur1 = mysql.connection.cursor()
+    cur2 = mysql.connection.cursor()
+    resultValue1 = cur1.execute("SELECT * FROM users")
+    resultValue2 = cur2.execute("SELECT id, type, inDate FROM users WHERE isExit = 1")
+    if resultValue1 > 0 or resultValue2 > 0:
+        userDetails = cur1.fetchall()
+        userDetails2 = cur2.fetchall()
+        return render_template('index.html', userDetails = userDetails, userDetails2 = userDetails2)
+
+@app.route('/edit_pass', methods=['GET', 'POST'])
+@is_logged_in
+def edit_pass():
+    session['is_admin'] = False
+    form = AddTruckForm(request.form)
+    if request.method == 'POST':
+        if request.form['submit'] == 'Cancel':
+            return redirect(url_for('login'))
+            # return render_template('admin.html')
+        elif request.form['submit'] == 'Edit':
+            # location = form.location.data
+            # cur = mysql.connection.cursor()
+            # cur.execute("""UPDATE Truck SET truckLocation='{}' WHERE VIN='{}'""".format(location, id))
+            # mysql.connection.commit()
+            # cur.close()
+            # flash('Truck VIN {} location has been updated to {}'.format(id, location), 'success')
+            return redirect(url_for('login'))
+
+    return render_template('edit_pass.html', form=form)
+
+@app.route('/edit_price', methods=['GET', 'POST'])
+@is_logged_in
+def edit_price():
+    session['is_admin'] = False
+    form = AddTruckForm(request.form)
+    if request.method == 'POST':
+        if request.form['submit'] == 'Cancel':
+            return redirect(url_for('login'))
+            # return render_template('admin.html')
+        elif request.form['submit'] == 'Edit':
+            # location = form.location.data
+            # cur = mysql.connection.cursor()
+            # cur.execute("""UPDATE Truck SET truckLocation='{}' WHERE VIN='{}'""".format(location, id))
+            # mysql.connection.commit()
+            # cur.close()
+            # flash('Truck VIN {} location has been updated to {}'.format(id, location), 'success')
+            return redirect(url_for('login'))
+
+    return render_template('edit_price.html', form=form)
+
+@app.route('/login', methods=['GET', 'POST'])
+def login():
+    if request.method == 'POST':
+        username_candidate = request.form['username']
+        password_candidate = request.form['password']
+        cur = mysql.connection.cursor()
+        result = cur.execute("""SELECT * FROM admin WHERE userName='{}'""".format(username_candidate))
+
+        if result > 0:
+            data = cur.fetchone()
+            username = data[0]
+            password = data[1]
+
+            if password_candidate == password:
+                session['logged_in'] = True
+                session['username'] = username
+                flash("You are now logged in", "success")
+                cur = mysql.connection.cursor()
+                # resultValue = cur.execute("SELECT * FROM users")
+                resultValue = cur.execute("SELECT id, type, inDate FROM users WHERE isVIP = 1")
+                if resultValue > 0:
+                    session['is_admin'] = True
+                    userDetails = cur.fetchall()
+                    return render_template('admin.html', userDetails = userDetails)
+            else:
+                error = 'Invalid login'
+                return render_template('login.html', error=error)
+            cur.close()
+        else:
+            error = 'Username not found'
+            return render_template('login.html', error=error)
+    return render_template('login.html')
+
+@app.route('/logout')
+@is_logged_in
+def logout():
+    session.clear()
+    flash('You are now logged out', 'success')
+    return redirect(url_for('index'))
+
+@app.route('/admin')
+@is_logged_in
+def admin():
+    session['is_admin'] = True
+    cur = mysql.connection.cursor()
+    # resultValue = cur.execute("SELECT * FROM users")
+    resultValue = cur.execute("SELECT id, type, inDate FROM users WHERE isVIP = 1")
+    userDetails = cur.fetchall()
+    return render_template('admin.html', userDetails = userDetails)
+
+@app.route('/slot', methods=['GET', 'POST'])
+@is_logged_in
+def slot():
+    session['is_admin'] = False
+    form = AddTruckForm(request.form)
+    if request.method == 'POST':
+        if request.form['submit'] == 'Cancel':
+            return redirect(url_for('login'))
+            # return render_template('admin.html')
+        elif request.form['submit'] == 'Edit':
+            # location = form.location.data
+            # cur = mysql.connection.cursor()
+            # cur.execute("""UPDATE Truck SET truckLocation='{}' WHERE VIN='{}'""".format(location, id))
+            # mysql.connection.commit()
+            # cur.close()
+            # flash('Truck VIN {} location has been updated to {}'.format(id, location), 'success')
+            return redirect(url_for('login'))
+
+    return render_template('slot.html', form=form, value=str_on_frame)
+
+
+@app.route('/bookingSlot')
+def bookingSlot():
+
+        return render_template('bookingSlot.html')
+
+
+@app.route('/viewSlot')
+def viewSlot():
+    # cur1 = mysql.connection.cursor()
+    # # cur2 = mysql.connection.cursor()
+    # resultValue1 = cur1.execute("SELECT * FROM viewslot")
+    # # resultValue2 = cur2.execute("SELECT id, bookDate, bookTime, bookCName, bookContact, bookVNO, bookVType  FROM viewslot WHERE isExit = 1")
+    # if resultValue1 > 0:
+        # or resultValue2 > 0:
+        # slotDetails = cur1.fetchall()
+        # userDetails2 = cur2.fetchall()
+        # bookDate = (list(list(zip(*userDetails))[0]))
+        # bookTime = (list(list(zip(*userDetails))[1]))
+        # bookCName = (list(list(zip(*userDetails))[2]))
+        # bookContact = (list(list(zip(*userDetails))[3]))
+        # bookVNO = (list(list(zip(*userDetails))[4]))
+        # bookVType = (list(list(zip(*userDetails))[5]))
+        # userDetails = [bookDate, bookTime, bookCName, bookContact, bookVNO, bookVType]
+        # print(userDetails)
+        # return render_template('viewSlot.html', slotDetails=slotDetails, userDetails2 = userDetails2)
+    return render_template('viewSlot.html')
+
+if __name__ == '__main__':
+    app.secret_key = '12'
+    app.run(host='0.0.0.0', port=8080)
\ No newline at end of file

SlotNew/bookingSlot.html

+{% extends 'layout.html' %}
+
+{% block body %}
+  <div class="jumbotron text-center" style="padding-top: 1vh; background: #0b486b; color: #FFFFFF">
+      <h1>SS Car Parking</h1>
+      <a href="bookingSlot" class="btn btn-primary">Booking Slot</a>
+      <a href="viewSlot" class="btn btn-primary">View Booking Slot</a>
+  </div>
+
+ <h1 style="text-align: center;">Book a Slot</h1>
+
+  <div class="jumbotron text-center">
+
+         <div class="col-12">
+             <label for="date" class="form-label">Booking Date</label>
+             <input type="text" class="form-control" id="date" placeholder="yyyy - mm - dd" />
+         </div> <br>
+
+         <div class="col-12">
+             <label for="time" class="form-label">Booking Time</label>
+             <input type="text" class="form-control" id="time" placeholder="00 : 00 AM/PM" />
+         </div> <br>
+
+         <div class="col-12">
+             <label for="customerName" class="form-label">Customer Name</label>
+             <input type="text" class="form-control" id="customerName" placeholder="" />
+         </div>
+
+         <div class="col-12">
+             <label for="contactNo" class="form-label">Contact No</label>
+             <input type="text" class="form-control" id="contactNo" placeholder="07********" />
+         </div>
+
+         <div class="col-12">
+             <label for="vehicleNo" class="form-label">Vehicle No</label>
+             <input type="text" class="form-control" id="vehicleNo" placeholder="" />
+         </div>
+
+         <div class="col-12">
+             <label for="vehicleType" class="form-label">Vehicle Type</label>
+             <input type="text" class="form-control" id="vehicleType" placeholder="" />
+         </div>
+
+ </div>
+    <div style="text-align: center;">
+        <input type="submit" name='submit' class="btn btn-primary" value="Save">
+        <input type="submit" name='submit' class="btn btn-basic" value="Cancel">
+    </div>
+
+  <script type="text/javascript">
+    var students = '{% for user in out %} {{user[0]}} {% endfor %}'
+    console.log(students);
+  </script>
+
+  <script type="text/javascript" src="{{ url_for('static', filename='script.js') }}"></script>
+
+{% endblock %}
\ No newline at end of file

SlotNew/config.txt

+# config file for parking lot system
+
+total_spaces=29
+rows=3
+
+linux=0
+demo_mode=1
+

SlotNew/datasets/Parking_Lot1.yml

+-
+    id: 0
+    points: [[55,475],[143,475],[142,416],[72,416]]
+-
+    id: 1
+    points: [[186,478],[266,479],[247,416],[176,416]]
+-
+    id: 2
+    points: [[380,477],[287,478],[270,437],[354,432]]
+-
+    id: 3
+    points: [[500,477],[407,478],[372,434],[450,429]]
+-
+    id: 4
+    points: [[605,465],[515,473],[469,419],[543,414]]
+-
+    id: 5
+    points: [[624,460],[676,440],[634,382],[583,382]]
+-
+    id: 6
+    points: [[6,372],[76,372],[67,326],[22, 326]]
+-
+    id: 7
+    points: [[146,368],[87,370],[89,340],[145,339]]
+-
+    id: 8
+    points: [[224,363],[168,367],[162,337],[216,336]]
+-
+    id: 9
+    points: [[299,358],[241,362],[230,333],[283,332]]
+-
+    id: 10
+    points: [[374,357],[319,361],[298,330],[344,327]]
+-
+    id: 11
+    points: [[441,349],[397,353],[371,328],[410,327]]    
+-
+    id: 12
+    points: [[514,347],[468,352],[428,324],[469,321]]    
+-
+    id: 13
+    points: [[577,340],[533,346],[509,319],[541,318]]    
+-
+    id: 14
+    points: [[587,337],[633,337],[600,291],[557,302]]
+-
+    id: 15
+    points: [[657,334],[688,332],[641,312],[631,314]]
+-
+    id: 16
+    points: [[742,324],[713,328],[663,306],[687,304]]
+-
+    id: 17
+    points: [[9,292],[48,292],[56,279],[20,279]]
+-
+    id: 18
+    points: [[60,285],[100,285],[100,269],[60,269]]
+-
+    id: 19
+    points: [[109,285],[152,285],[149,271],[114,271]]
+-
+    id: 20
+    points: [[158,285],[196,285],[193,271],[158,271]]
+-
+    id: 21
+    points: [[207,285],[249,285],[241,268],[205,270]]
+-
+    id: 22
+    points: [[258,277],[293,277],[286,263],[253,266]]
+-
+    id: 23
+    points: [[306,276],[345,277],[329,265],[300,267]]
+-
+    id: 24
+    points: [[354,274],[388,273],[373,247],[341,252]]
+-
+    id: 25
+    points: [[400,268],[433,268],[417,261],[387,261]]
+-
+    id: 26
+    points: [[447,269],[469,266],[459,259],[427,259]]
+-
+    id: 27
+    points: [[486,267],[512,267],[497,257],[469,258]]
+-
+    id: 28
+    points: [[533,268],[554,263],[541,250],[512,255]]
+
+    

SlotNew/db.yaml

+mysql_host: 'localhost'
+mysql_user: 'root'
+mysql_password: 'root'
+mysql_db: 'parking_system'
\ No newline at end of file

SlotNew/mysql.txt

+
+create database parking_system;
+use parking_system;
+
+create table users(id varchar(100) NOT NULL, type varchar(100) NOT NULL, min INT(100) NOT NULL, hour INT(100) NOT NULL, date INT(100) NOT NULL, month INT(100) NOT NULL, year INT(100) NOT NULL, isVIP INT(10) NOT NULL, isExit INT(10) NOT NULL) ENGINE=InnoDB DEFAULT CHARSET=utf8;
+INSERT INTO users VALUES ('ID001','VIP', 00, 08, 11, 1, 2021);
+select * from users;
+
+
+create table users(id varchar(100) NOT NULL, type varchar(100) NOT NULL, isVIP INT(10) NOT NULL, isExit INT(10) NOT NULL, inDate datetime DEFAULT NULL, outDate datetime DEFAULT NULL, vehical varchar(100) DEFAULT NULL) ENGINE=InnoDB DEFAULT CHARSET=utf8;
+INSERT INTO users VALUES ('ID001','VIP', 1, 0, '2018-01-30 23:32:40', NULL, NULL);
+
+
+CREATE TABLE admin(userName varchar(20) NOT NULL, password varchar(45) DEFAULT NULL)ENGINE=InnoDB DEFAULT CHARSET=utf8;
+INSERT INTO admin VALUES ('admin','adminpass');
+select * from admin;
\ No newline at end of file

SlotNew/run.py

+from flask import Flask, request, jsonify, render_template
+import json
+import pymongo
+from bson import json_util
+from pymongo import MongoClient
+import app as test
+
+myclient = pymongo.MongoClient("mongodb://localhost:27017/")
+mydb = myclient["slot"]
+mycol = mydb["carpark"]
+
+app = Flask(__name__)
+
+
+@app.route('/')
+def hello_world():
+
+    data = mycol.find_one({'full': "Empty Slot:11  Full Slot:19"})
+    strData = json_util.dumps(data)
+    det = json.loads(strData)
+    info = det['full']
+    info1 = mycol.find()
+    testdata = []
+    for x in info1:
+        print(x['_id'])
+        print(x['full'])
+        testdata.append(x['full'])
+    print(test.hello_world())
+
+    return render_template("index.html", value=info, value2=testdata)
+
+
+if __name__ == '__main__':
+    app.run()
\ No newline at end of file

SlotNew/slotDetect.py

+import yaml
+import numpy as np
+import cv2
+from flask import Flask
+from pymongo import MongoClient
+
+
+app = Flask(__name__)
+
+client = MongoClient('localhost', 27017)
+client.list_database_names()
+
+db = client.slot
+db.list_collection_names()
+
+
+fn = r"./datasets/Parking_Lot1.mp4"
+fn_yaml = r"./datasets/Parking_Lot1.yml"
+fn_out = r"./datasets/output.avi"
+config = {'save_video': False,
+          'text_overlay': True,
+          'parking_overlay': True,
+          'parking_id_overlay': False,
+          'parking_detection': True,
+          'min_area_motion_contour': 60,
+          'park_sec_to_wait': 3,
+          'start_frame': 0}
+
+cap = cv2.VideoCapture ( fn )
+video_info = {'fps': cap.get ( cv2.CAP_PROP_FPS ),
+              'width': int ( cap.get ( cv2.CAP_PROP_FRAME_WIDTH ) ),
+              'height': int ( cap.get ( cv2.CAP_PROP_FRAME_HEIGHT ) ),
+              'fourcc': cap.get ( cv2.CAP_PROP_FOURCC ),
+              'num_of_frames': int ( cap.get ( cv2.CAP_PROP_FRAME_COUNT ) )}
+cap.set ( cv2.CAP_PROP_POS_FRAMES, config['start_frame'] )
+
+if config['save_video']:
+    fourcc = cv2.VideoWriter_fourcc ( 'D', 'I', 'V', 'X' )
+    out = cv2.VideoWriter ( fn_out, -1, 25.0,
+                            (video_info['width'], video_info['height']) )
+
+with open ( fn_yaml, 'r' ) as stream:
+    parking_data = yaml.load ( stream, yaml.FullLoader )
+parking_contours = []
+parking_bounding_rects = []
+parking_mask = []
+for park in parking_data:
+    points = np.array ( park['points'] )
+    rect = cv2.boundingRect ( points )
+    points_shifted = points.copy ()
+    points_shifted[:, 0] = points[:, 0] - rect[0]
+    points_shifted[:, 1] = points[:, 1] - rect[1]
+    parking_contours.append ( points )
+    parking_bounding_rects.append ( rect )
+    mask = cv2.drawContours ( np.zeros ( (rect[3], rect[2]), dtype=np.uint8 ), [points_shifted], contourIdx=-1,
+                              color=255, thickness=-1, lineType=cv2.LINE_8 )
+    mask = mask == 255
+    parking_mask.append ( mask )
+
+parking_status = [False] * len ( parking_data )
+parking_buffer = [None] * len ( parking_data )
+
+
+while (cap.isOpened ()):
+    empty = 0
+    full = 0
+
+    video_cur_pos = cap.get ( cv2.CAP_PROP_POS_MSEC ) / 1000.0
+    video_cur_frame = cap.get ( cv2.CAP_PROP_POS_FRAMES )
+    ret, frame = cap.read ()
+    if ret == False:
+        print ( "Capture Error" )
+        break
+
+    # frame_gray = cv2.cvtColor(frame.copy(), cv2.COLOR_BGR2GRAY)
+    frame_blur = cv2.GaussianBlur ( frame.copy (), (5, 5), 3 )
+    frame_gray = cv2.cvtColor ( frame_blur, cv2.COLOR_BGR2GRAY )
+    frame_out = frame.copy ()
+
+    if config['parking_detection']:
+        for ind, park in enumerate ( parking_data ):
+            points = np.array ( park['points'] )
+            rect = parking_bounding_rects[ind]
+            roi_gray = frame_gray[rect[1]:(rect[1] + rect[3]), rect[0]:(rect[0] + rect[2])]
+            # print np.std(roi_gray)
+
+            points[:, 0] = points[:, 0] - rect[0]
+            points[:, 1] = points[:, 1] - rect[1]
+            # print np.std(roi_gray), np.mean(roi_gray)
+            status = np.std ( roi_gray ) < 22 and np.mean ( roi_gray ) > 53
+
+            if status != parking_status[ind] and parking_buffer[ind] == None:
+                parking_buffer[ind] = video_cur_pos
+
+            elif status != parking_status[ind] and parking_buffer[ind] != None:
+                if video_cur_pos - parking_buffer[ind] > config['park_sec_to_wait']:
+                    parking_status[ind] = status
+                    parking_buffer[ind] = None
+
+            elif status == parking_status[ind] and parking_buffer[ind] != None:
+                # if video_cur_pos - parking_buffer[ind] > config['park_sec_to_wait']:
+                parking_buffer[ind] = None
+                # print(parking_status)
+
+    if config['parking_overlay']:
+        for ind, park in enumerate ( parking_data ):
+            points = np.array ( park['points'] )
+            if parking_status[ind]:
+                color = (0, 255, 0)
+                empty = empty + 1
+            else:
+                color = (0, 0, 255)
+                full = full + 1
+            cv2.drawContours ( frame_out, [points], contourIdx=-1,
+                               color=color, thickness=2, lineType=cv2.LINE_8 )
+            moments = cv2.moments ( points )
+            centroid = (int ( moments['m10'] / moments['m00'] ) - 3, int ( moments['m01'] / moments['m00'] ) + 3)
+            # print 'occupied: ', occupied
+            # print 'spot: ', spot
+
+    # Show empty slot and full slot in display
+    if config['text_overlay']:
+        # cv2.rectangle(frame_out, (1, 5), (280, 90),(255,255,255), 85)
+        str_on_frame = "Empty Slot:%d  Full Slot:%d" % (empty, full)
+
+
+        cv2.putText(frame_out,
+                    str_on_frame,
+                    (50, 50),  # org
+                    cv2.FONT_HERSHEY_SIMPLEX,  # font style
+                    0.7,
+                    (0, 0, 255),  # orange color in letters
+                    2,  # Line thickness of 2 px
+                    cv2.LINE_AA)
+
+    ##############
+
+    if config['save_video']:
+        # if video_cur_frame % 35 == 0:
+             out.write ( frame_out )
+
+    cv2.imshow ('Car Parking Slot Availability', frame_out)  # Displaying the image
+    cv2.waitKey ( 40 )
+    k = cv2.waitKey ( 1 )
+    if k == ord ( 'q' ):
+        db.carpark.insert_one({'full': str_on_frame})  # db connect
+        break
+cap.release ()
+if config['save_video']: out.release ()
+cv2.destroyAllWindows ()
+
+if __name__ == '__main__':
+    app.run()
\ No newline at end of file

SlotNew/static/script.js

+var my_modal = document.getElementById('my_modal');
+var span_tag = document.getElementById('show_time');
+var countdown_call = '';
+var time_count = 0;
+
+function showModal(){
+  my_modal.style.display = "block";
+  // countdown after show
+  // countdown_call = setInterval(updateTime, 1000); // call for every 1s
+  setInterval(closeModal, 10000);
+}
+// now show automatically after 1s
+// working
+// setTimeout(showModal,5000) // 1000ms
+
+var plc = Math.floor((Math.random() * 2 +1));
+console.log(plc);
+
+if (plc == 1){
+  showModal() // 1000ms
+}
+
+// now close 
+function closeModal(){
+  my_modal.style.display = "none";
+}
+// setTimeout(closeModal,3000) // 1000ms
+// no need
+
+// now countdown time
+function updateTime(){
+  time_count++;  
+  span_tag.innerHTML = time_count;
+  if(time_count == 21){
+    clearInterval(countdown_call);
+    closeModal();
+  }
+
+}
\ No newline at end of file

SlotNew/static/style.css

+.table-fixed tbody {
+    height: 50vh;
+    overflow-y: auto;
+    width: 100%;
+    }
+    .table-fixed thead,
+    .table-fixed tbody,
+    .table-fixed tr,
+    .table-fixed td,
+    .table-fixed th {
+    display: block;
+    }
+    .table-fixed tr:after {
+    content: "";
+    display: block;
+    visibility: hidden;
+    clear: both;
+    }
+    .table-fixed tbody td,
+    .table-fixed thead > tr > th {
+    float: left;
+    }
+
+    .table > thead > tr > th,
+    .table > thead > tr > td {
+    font-size: .9em;
+    font-weight: 400;
+    border-bottom: 0;
+    letter-spacing: 1px;
+    vertical-align: top;
+    padding: 8px;
+    background: #51596a;
+    text-transform: uppercase;
+    color: #ffffff;
+    }
+
+    .container .jumbotron, .container-fluid .jumbotron {
+    padding-right: 250px;
+    padding-left: 250px;
+    }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

SlotNew/static/stylex.css

+#my_modal{
+  width: 500px;
+  height: 300px;
+  border: 1px solid #333;
+  box-sizing: border-box;
+  padding: 20px;
+  text-align: center;
+  background: #f1f1f1;
+
+  /*// making modal center*/
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
+
+  /*// hide for the first time */
+
+  display: none;
+}
+#my_modal h2{
+  margin: 0px;
+}
+#show_time{
+  font-size: 18px;
+  color: red;
+}
\ No newline at end of file

SlotNew/templates/admin.html

+{% extends 'layout.html' %}
+
+{% block body %}
+  <div class="jumbotron text-center" style="padding-top: 1vh; background: #0b486b; color: #FFFFFF">
+    <h3>SECURE SMART PARKING SOLUTION</h3>
+    <h4>...MAIN DASHBOARD...</h4>
+    <p class="lead"> Admin Panel</p>
+    {% if session.logged_in != NULL %}
+    <a href="slot" class="btn btn-primary">Slot Management</a>
+    <a href="#" class="btn btn-primary">Routing Management</a>
+    <a href="#" class="btn btn-primary">Queue Management</a>
+    <a href="#" class="btn btn-primary">Security Management</a>
+    <br><br>
+    <a href="edit_pass" class="btn btn-info">Change Password</a>
+    <a href="edit_price" class="btn btn-info">Change Price</a>
+    {% endif %}
+  </div>
+
+{% endblock %}
+
+
+
+

SlotNew/templates/bookingSlot.html

+{% extends 'layout.html' %}
+
+{% block body %}
+  <div class="jumbotron text-center" style="padding-top: 1vh; background: #0b486b; color: #FFFFFF">
+      <h1>SS Car Parking</h1>
+      <a href="bookingSlot" class="btn btn-primary">Booking Slot</a>
+      <a href="viewSlot" class="btn btn-primary">View Booking Slot</a>
+  </div>
+
+ <h1 style="text-align: center;">Book a Slot</h1>
+  <div class="jumbotron text-center">
+
+      <div class=".col-6 .col-md-4">
+             <label for="date" class="form-label">Booking Date</label>
+             <input type="text" class="form-control" id="date" placeholder="yyyy - mm - dd" />
+         </div> <br>
+
+         <div class="col-12">
+             <label for="time" class="form-label">Booking Time</label>
+             <input type="text" class="form-control" id="time" placeholder="00 : 00 AM/PM" />
+         </div> <br>
+
+         <div class="col-12">
+             <label for="customerName" class="form-label">Customer Name</label>
+             <input type="text" class="form-control" id="customerName" placeholder="" />
+         </div>
+
+         <div class="col-12">
+             <label for="contactNo" class="form-label">Contact No</label>
+             <input type="text" class="form-control" id="contactNo" placeholder="07********" />
+         </div>
+
+         <div class="col-12">
+             <label for="vehicleNo" class="form-label">Vehicle No</label>
+             <input type="text" class="form-control" id="vehicleNo" placeholder="" />
+         </div>
+
+         <div class="col-12">
+             <label for="vehicleType" class="form-label">Vehicle Type</label>
+             <input type="text" class="form-control" id="vehicleType" placeholder="" />
+         </div>
+
+ </div>
+<div style="text-align: center;">
+        <input type="submit" name='submit' class="btn btn-primary" value="Save">
+        <input type="submit" name='submit' class="btn btn-basic" value="Cancel">
+    </div>
+
+  <script type="text/javascript">
+    var students = '{% for user in out %} {{user[0]}} {% endfor %}'
+    console.log(students);
+  </script>
+
+  <script type="text/javascript" src="{{ url_for('static', filename='script.js') }}"></script>
+
+{% endblock %}
\ No newline at end of file

SlotNew/templates/css/flaticon.css

+	/*
+  	Flaticon icon font: Flaticon
+  	Creation date: 31/05/2020 03:44
+  	*/
+
+@font-face {
+  font-family: "Flaticon";
+  src: url("../fonts/Flaticon.eot");
+  src: url("../fonts/Flaticond41d.eot?#iefix") format("embedded-opentype"),
+       url("../fonts/Flaticon.woff2") format("woff2"),
+       url("../fonts/Flaticon.woff") format("woff"),
+       url("../fonts/Flaticon.ttf") format("truetype"),
+       url("../fonts/Flaticon.svg#Flaticon") format("svg");
+  font-weight: normal;
+  font-style: normal;
+}
+
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+  @font-face {
+    font-family: "Flaticon";
+    src: url("../fonts/Flaticon.svg#Flaticon") format("svg");
+  }
+}
+
+[class^="flaticon-"]:before, [class*=" flaticon-"]:before,
+[class^="flaticon-"]:after, [class*=" flaticon-"]:after {
+  font-family: Flaticon;
+  font-style: normal;
+}
+
+.flaticon-rooster:before { content: "\f100"; }
+.flaticon-cow-head-outline:before { content: "\f101"; }
+.flaticon-cow-head:before { content: "\f102"; }
+.flaticon-harvest:before { content: "\f103"; }
+.flaticon-combine-harvester:before { content: "\f104"; }
+.flaticon-heavy-vehicle:before { content: "\f105"; }
+.flaticon-cauliflower:before { content: "\f106"; }
+.flaticon-up-arrow:before { content: "\f107"; }
+.flaticon-down-arrow:before { content: "\f108"; }
+.flaticon-duck:before { content: "\f109"; }
+.flaticon-null:before { content: "\f10a"; }
+.flaticon-pistachio:before { content: "\f10b"; }
+.flaticon-placeholder:before { content: "\f10c"; }
+.flaticon-grain:before { content: "\f10d"; }
+.flaticon-greenhouse:before { content: "\f10e"; }
+.flaticon-hen:before { content: "\f10f"; }
+.flaticon-chainsaw:before { content: "\f110"; }
+.flaticon-carrot:before { content: "\f111"; }
+.flaticon-fish:before { content: "\f112"; }
+.flaticon-field:before { content: "\f113"; }
+.flaticon-butterfly:before { content: "\f114"; }
+.flaticon-boot:before { content: "\f115"; }
+.flaticon-fence:before { content: "\f116"; }
+.flaticon-farmer:before { content: "\f117"; }
+.flaticon-beetroot:before { content: "\f118"; }
+.flaticon-barrel:before { content: "\f119"; }
+.flaticon-cow:before { content: "\f11a"; }
+.flaticon-meat:before { content: "\f11b"; }
+.flaticon-corn:before { content: "\f11c"; }
+.flaticon-cotton:before { content: "\f11d"; }
+.flaticon-hose:before { content: "\f11e"; }
+.flaticon-null-1:before { content: "\f11f"; }
\ No newline at end of file

SlotNew/templates/css/magnific-popup.css

+/* Magnific Popup CSS */
+.mfp-bg {
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1042;
+  overflow: hidden;
+  position: fixed;
+  background: #0b0b0b;
+  opacity: 0.8; }
+
+.mfp-wrap {
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1043;
+  position: fixed;
+  outline: none !important;
+  -webkit-backface-visibility: hidden; }
+
+.mfp-container {
+  text-align: center;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  padding: 0 8px;
+  box-sizing: border-box; }
+
+.mfp-container:before {
+  content: '';
+  display: inline-block;
+  height: 100%;
+  vertical-align: middle; }
+
+.mfp-align-top .mfp-container:before {
+  display: none; }
+
+.mfp-content {
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+  margin: 0 auto;
+  text-align: left;
+  z-index: 1045; }
+
+.mfp-inline-holder .mfp-content,
+.mfp-ajax-holder .mfp-content {
+  width: 100%;
+  cursor: auto; }
+
+.mfp-ajax-cur {
+  cursor: progress; }
+
+.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
+  cursor: -moz-zoom-out;
+  cursor: -webkit-zoom-out;
+  cursor: zoom-out; }
+
+.mfp-zoom {
+  cursor: pointer;
+  cursor: -webkit-zoom-in;
+  cursor: -moz-zoom-in;
+  cursor: zoom-in; }
+
+.mfp-auto-cursor .mfp-content {
+  cursor: auto; }
+
+.mfp-close,
+.mfp-arrow,
+.mfp-preloader,
+.mfp-counter {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none; }
+
+.mfp-loading.mfp-figure {
+  display: none; }
+
+.mfp-hide {
+  display: none !important; }
+
+.mfp-preloader {
+  color: #CCC;
+  position: absolute;
+  top: 50%;
+  width: auto;
+  text-align: center;
+  margin-top: -0.8em;
+  left: 8px;
+  right: 8px;
+  z-index: 1044; }
+  .mfp-preloader a {
+    color: #CCC; }
+    .mfp-preloader a:hover {
+      color: #FFF; }
+
+.mfp-s-ready .mfp-preloader {
+  display: none; }
+
+.mfp-s-error .mfp-content {
+  display: none; }
+
+button.mfp-close,
+button.mfp-arrow {
+  overflow: visible;
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  -webkit-appearance: none;
+  display: block;
+  outline: none;
+  padding: 0;
+  z-index: 1046;
+  box-shadow: none;
+  touch-action: manipulation; }
+
+button::-moz-focus-inner {
+  padding: 0;
+  border: 0; }
+
+.mfp-close {
+  width: 44px;
+  height: 44px;
+  line-height: 44px;
+  position: absolute;
+  right: 0;
+  top: 0;
+  text-decoration: none;
+  text-align: center;
+  opacity: 0.65;
+  padding: 0 0 18px 10px;
+  color: #FFF;
+  font-style: normal;
+  font-size: 28px;
+  font-family: Arial, Baskerville, monospace; }
+  .mfp-close:hover,
+  .mfp-close:focus {
+    opacity: 1; }
+  .mfp-close:active {
+    top: 1px; }
+
+.mfp-close-btn-in .mfp-close {
+  color: #333; }
+
+.mfp-image-holder .mfp-close,
+.mfp-iframe-holder .mfp-close {
+  color: #FFF;
+  right: -6px;
+  text-align: right;
+  padding-right: 6px;
+  width: 100%; }
+
+.mfp-counter {
+  position: absolute;
+  top: 0;
+  right: 0;
+  color: #CCC;
+  font-size: 12px;
+  line-height: 18px;
+  white-space: nowrap; }
+
+.mfp-arrow {
+  position: absolute;
+  opacity: 0.65;
+  margin: 0;
+  top: 50%;
+  margin-top: -55px;
+  padding: 0;
+  width: 90px;
+  height: 110px;
+  -webkit-tap-highlight-color: transparent; }
+  .mfp-arrow:active {
+    margin-top: -54px; }
+  .mfp-arrow:hover,
+  .mfp-arrow:focus {
+    opacity: 1; }
+  .mfp-arrow:before,
+  .mfp-arrow:after {
+    content: '';
+    display: block;
+    width: 0;
+    height: 0;
+    position: absolute;
+    left: 0;
+    top: 0;
+    margin-top: 35px;
+    margin-left: 35px;
+    border: medium inset transparent; }
+  .mfp-arrow:after {
+    border-top-width: 13px;
+    border-bottom-width: 13px;
+    top: 8px; }
+  .mfp-arrow:before {
+    border-top-width: 21px;
+    border-bottom-width: 21px;
+    opacity: 0.7; }
+
+.mfp-arrow-left {
+  left: 0; }
+  .mfp-arrow-left:after {
+    border-right: 17px solid #FFF;
+    margin-left: 31px; }
+  .mfp-arrow-left:before {
+    margin-left: 25px;
+    border-right: 27px solid #3F3F3F; }
+
+.mfp-arrow-right {
+  right: 0; }
+  .mfp-arrow-right:after {
+    border-left: 17px solid #FFF;
+    margin-left: 39px; }
+  .mfp-arrow-right:before {
+    border-left: 27px solid #3F3F3F; }
+
+.mfp-iframe-holder {
+  padding-top: 40px;
+  padding-bottom: 40px; }
+  .mfp-iframe-holder .mfp-content {
+    line-height: 0;
+    width: 100%;
+    max-width: 900px; }
+  .mfp-iframe-holder .mfp-close {
+    top: -40px; }
+
+.mfp-iframe-scaler {
+  width: 100%;
+  height: 0;
+  overflow: hidden;
+  padding-top: 56.25%; }
+  .mfp-iframe-scaler iframe {
+    position: absolute;
+    display: block;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
+    background: #000; }
+
+/* Main image in popup */
+img.mfp-img {
+  width: auto;
+  max-width: 100%;
+  height: auto;
+  display: block;
+  line-height: 0;
+  box-sizing: border-box;
+  padding: 40px 0 40px;
+  margin: 0 auto; }
+
+/* The shadow behind the image */
+.mfp-figure {
+  line-height: 0; }
+  .mfp-figure:after {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 40px;
+    bottom: 40px;
+    display: block;
+    right: 0;
+    width: auto;
+    height: auto;
+    z-index: -1;
+    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
+    background: #444; }
+  .mfp-figure small {
+    color: #BDBDBD;
+    display: block;
+    font-size: 12px;
+    line-height: 14px; }
+  .mfp-figure figure {
+    margin: 0; }
+
+.mfp-bottom-bar {
+  margin-top: -36px;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  width: 100%;
+  cursor: auto; }
+
+.mfp-title {
+  text-align: left;
+  line-height: 18px;
+  color: #F3F3F3;
+  word-wrap: break-word;
+  padding-right: 36px; }
+
+.mfp-image-holder .mfp-content {
+  max-width: 100%; }
+
+.mfp-gallery .mfp-image-holder .mfp-figure {
+  cursor: pointer; }
+
+@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
+  /**
+       * Remove all paddings around the image on small screen
+       */
+  .mfp-img-mobile .mfp-image-holder {
+    padding-left: 0;
+    padding-right: 0; }
+  .mfp-img-mobile img.mfp-img {
+    padding: 0; }
+  .mfp-img-mobile .mfp-figure:after {
+    top: 0;
+    bottom: 0; }
+  .mfp-img-mobile .mfp-figure small {
+    display: inline;
+    margin-left: 5px; }
+  .mfp-img-mobile .mfp-bottom-bar {
+    background: rgba(0, 0, 0, 0.6);
+    bottom: 0;
+    margin: 0;
+    top: auto;
+    padding: 3px 5px;
+    position: fixed;
+    box-sizing: border-box; }
+    .mfp-img-mobile .mfp-bottom-bar:empty {
+      padding: 0; }
+  .mfp-img-mobile .mfp-counter {
+    right: 5px;
+    top: 3px; }
+  .mfp-img-mobile .mfp-close {
+    top: 0;
+    right: 0;
+    width: 35px;
+    height: 35px;
+    line-height: 35px;
+    background: rgba(0, 0, 0, 0.6);
+    position: fixed;
+    text-align: center;
+    padding: 0; } }
+
+@media all and (max-width: 900px) {
+  .mfp-arrow {
+    -webkit-transform: scale(0.75);
+    transform: scale(0.75); }
+  .mfp-arrow-left {
+    -webkit-transform-origin: 0;
+    transform-origin: 0; }
+  .mfp-arrow-right {
+    -webkit-transform-origin: 100%;
+    transform-origin: 100%; }
+  .mfp-container {
+    padding-left: 6px;
+    padding-right: 6px; } }

SlotNew/templates/css/odometer.css

+.odometer.odometer-auto-theme, .odometer.odometer-theme-default {
+  display: inline-block;
+  vertical-align: middle;
+  *vertical-align: auto;
+  *zoom: 1;
+  *display: inline;
+  position: relative;
+}
+.odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-default .odometer-digit {
+  display: inline-block;
+  vertical-align: middle;
+  *vertical-align: auto;
+  *zoom: 1;
+  *display: inline;
+  position: relative;
+}
+.odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer, .odometer.odometer-theme-default .odometer-digit .odometer-digit-spacer {
+  display: inline-block;
+  vertical-align: middle;
+  *vertical-align: auto;
+  *zoom: 1;
+  *display: inline;
+  visibility: hidden;
+}
+.odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner, .odometer.odometer-theme-default .odometer-digit .odometer-digit-inner {
+  text-align: left;
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  overflow: hidden;
+}
+.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon, .odometer.odometer-theme-default .odometer-digit .odometer-ribbon {
+  display: block;
+}
+.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon-inner, .odometer.odometer-theme-default .odometer-digit .odometer-ribbon-inner {
+  display: block;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+.odometer.odometer-auto-theme .odometer-digit .odometer-value, .odometer.odometer-theme-default .odometer-digit .odometer-value {
+  display: block;
+  -webkit-transform: translateZ(0);
+  transform: translateZ(0);
+}
+.odometer.odometer-auto-theme .odometer-digit .odometer-value.odometer-last-value, .odometer.odometer-theme-default .odometer-digit .odometer-value.odometer-last-value {
+  position: absolute;
+}
+.odometer.odometer-auto-theme.odometer-animating-up .odometer-ribbon-inner, .odometer.odometer-theme-default.odometer-animating-up .odometer-ribbon-inner {
+  -webkit-transition: -webkit-transform 2s;
+  -moz-transition: -moz-transform 2s;
+  -ms-transition: -ms-transform 2s;
+  -o-transition: -o-transform 2s;
+  transition: transform 2s;
+}
+.odometer.odometer-auto-theme.odometer-animating-up.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-default.odometer-animating-up.odometer-animating .odometer-ribbon-inner {
+  -webkit-transform: translateY(-100%);
+  -moz-transform: translateY(-100%);
+  -ms-transform: translateY(-100%);
+  -o-transform: translateY(-100%);
+  transform: translateY(-100%);
+}
+.odometer.odometer-auto-theme.odometer-animating-down .odometer-ribbon-inner, .odometer.odometer-theme-default.odometer-animating-down .odometer-ribbon-inner {
+  -webkit-transform: translateY(-100%);
+  -moz-transform: translateY(-100%);
+  -ms-transform: translateY(-100%);
+  -o-transform: translateY(-100%);
+  transform: translateY(-100%);
+}
+.odometer.odometer-auto-theme.odometer-animating-down.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-default.odometer-animating-down.odometer-animating .odometer-ribbon-inner {
+  -webkit-transition: -webkit-transform 2s;
+  -moz-transition: -moz-transform 2s;
+  -ms-transition: -ms-transform 2s;
+  -o-transition: -o-transform 2s;
+  transition: transform 2s;
+  -webkit-transform: translateY(0);
+  -moz-transform: translateY(0);
+  -ms-transform: translateY(0);
+  -o-transform: translateY(0);
+  transform: translateY(0);
+}
+.odometer.odometer-auto-theme .odometer-value, .odometer.odometer-theme-default .odometer-value {
+  text-align: center;
+}
+.odometer-formatting-mark {
+  display: none;
+}
\ No newline at end of file

SlotNew/templates/css/owl.carousel.min.css

+/**
+ * Owl Carousel v2.3.4
+ * Copyright 2013-2018 David Deutsch
+ * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE
+ */
+.owl-carousel,.owl-carousel .owl-item{-webkit-tap-highlight-color:transparent;position:relative}.owl-carousel{display:none;width:100%;z-index:1}.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y;touch-action:manipulation;-moz-backface-visibility:hidden}.owl-carousel .owl-stage:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.owl-carousel .owl-stage-outer{position:relative;overflow:hidden;-webkit-transform:translate3d(0,0,0)}.owl-carousel .owl-item,.owl-carousel .owl-wrapper{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)}.owl-carousel .owl-item{min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-touch-callout:none}.owl-carousel .owl-item img{display:block;width:100%}.owl-carousel .owl-dots.disabled,.owl-carousel .owl-nav.disabled{display:none}.no-js .owl-carousel,.owl-carousel.owl-loaded{display:block}.owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev{cursor:pointer;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel .owl-nav button.owl-next,.owl-carousel .owl-nav button.owl-prev,.owl-carousel button.owl-dot{background:0 0;color:inherit;border:none;padding:0!important;font:inherit}.owl-carousel.owl-loading{opacity:0;display:block}.owl-carousel.owl-hidden{opacity:0}.owl-carousel.owl-refresh .owl-item{visibility:hidden}.owl-carousel.owl-drag .owl-item{-ms-touch-action:pan-y;touch-action:pan-y;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-grab{cursor:move;cursor:grab}.owl-carousel.owl-rtl{direction:rtl}.owl-carousel.owl-rtl .owl-item{float:right}.owl-carousel .animated{animation-duration:1s;animation-fill-mode:both}.owl-carousel .owl-animated-in{z-index:0}.owl-carousel .owl-animated-out{z-index:1}.owl-carousel .fadeOut{animation-name:fadeOut}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.owl-height{transition:height .5s ease-in-out}.owl-carousel .owl-item .owl-lazy{opacity:0;transition:opacity .4s ease}.owl-carousel .owl-item .owl-lazy:not([src]),.owl-carousel .owl-item .owl-lazy[src^=""]{max-height:0}.owl-carousel .owl-item img.owl-lazy{transform-style:preserve-3d}.owl-carousel .owl-video-wrapper{position:relative;height:100%;background:#000}.owl-carousel .owl-video-play-icon{position:absolute;height:80px;width:80px;left:50%;top:50%;margin-left:-40px;margin-top:-40px;background:url(owl.video.play.html) no-repeat;cursor:pointer;z-index:1;-webkit-backface-visibility:hidden;transition:transform .1s ease}.owl-carousel .owl-video-play-icon:hover{-ms-transform:scale(1.3,1.3);transform:scale(1.3,1.3)}.owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn{display:none}.owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background-repeat:no-repeat;background-size:contain;transition:opacity .4s ease}.owl-carousel .owl-video-frame{position:relative;z-index:1;height:100%;width:100%}