Upload 69 files

.gitattributes

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+static/505error.gif filter=lfs diff=lfs merge=lfs -text

app.py

@@ -0,0 +1,1137 @@
+from flask import Flask, render_template, request, redirect, url_for, session
+from nltk.sentiment.vader import SentimentIntensityAnalyzer
+from flask_mysqldb import MySQL
+import nltk
+import io
+import bcrypt
+import datetime
+import json
+from flask_mail import *
+import random
+import smtplib, ssl
+from email.message import EmailMessage
+import secrets
+import string
+import time
+
+nltk.download('vader_lexicon')
+
+class SmileCheckApp:
+    def __init__(self):
+        self.app = Flask(__name__)
+        self.app.static_folder = 'static'
+        self.app.static_url_path = '/static'
+
+        self.app.secret_key = "smilecheck-abhi-2023"
+
+        self.app.config['MYSQL_HOST'] = 'localhost'
+        self.app.config['MYSQL_USER'] = 'root'
+        self.app.config['MYSQL_PASSWORD'] = ''
+        self.app.config['MYSQL_CURSORCLASS'] = 'DictCursor'
+        self.app.config['MYSQL_PORT'] = 3306
+
+        mysql = MySQL(self.app)
+
+        # @app.before_request
+        # def before_request():
+        #     if request.path != '/logout' and 'email' in session:
+        #         session.permanent = True
+        #         app.permanent_session_lifetime = datetime.timedelta(minutes=1)
+        #
+        # @app.teardown_request
+        # def teardown_request(exception=None):
+        #     if not session.permanent and 'email' in session: return redirect(url_for('logout'))
+
+        @self.app.route('/')
+        def index():
+            return render_template("index.html")
+
+
+        @self.app.route('/home', methods=["GET", "POST"])
+        def home():
+            if request.method == 'GET':
+                if 'email' in session:
+                    self.app.config['MYSQL_DB'] = session['database']
+                    curh = mysql.connection.cursor()
+                    if session['usertype'] == 0:
+                        curh.execute("SELECT `assessid`, `name` FROM assessments")
+                        typedata = curh.fetchall()
+
+                        curh.execute("SELECT `id`, `type` FROM custom WHERE id=%s", (session['id'],))
+                        given = curh.fetchall()
+                        isdone = []
+                        for give in given:
+                            isdone.append(give['type'])
+
+                        typesgiven = []
+                        for type in typedata:
+                            typesgiven.append(type['assessid'])
+
+                        curh.execute("SELECT `name`, `happy`, `datetime` FROM `custom`, `assessments` WHERE custom.type = assessments.assessId AND id=%s", (session['id'],))
+                        previous = curh.fetchall()
+
+                        return render_template("home.html", typedata=typedata, given=isdone, previous=previous)
+
+                    elif session['usertype'] == 1:
+                        return redirect(url_for('admin'))
+                    mysql.connection.commit()
+                    curh.close()
+                else:
+                    return redirect(url_for('login'))
+
+            if request.method == 'POST':
+                if 'email' in session:
+                    self.app.config['MYSQL_DB'] = session['database']
+
+                    curh = mysql.connection.cursor()
+
+                    if 'fname' in request.form:
+                        fname = request.form['fname']
+                        femail = request.form['femail']
+                        feedback = request.form['feedback']
+                        curh.execute("INSERT INTO `feedbacks`(`name`, `email`, `feedback`) VALUES (%s, %s, %s)", (fname, femail, feedback,))
+                        mysql.connection.commit()
+                        curh.close()
+                        session['feed'] = 1
+                        return redirect(url_for('home'))
+
+                    curh.execute("SELECT * FROM users WHERE email=%s", (session['email'],))
+                    user = curh.fetchone()
+
+                    session['type'] = request.form['type']
+
+                    curh.execute("SELECT `id`, `type` FROM custom WHERE id=%s AND type=%s", (session['id'], session['type'],))
+                    given = curh.fetchone()
+                    mysql.connection.commit()
+                    curh.close()
+
+                    if given == None:
+                        return redirect(url_for('form'))
+                    else:
+                        return redirect(url_for('result'))
+
+                else:
+                    return redirect(url_for('login'))
+
+            return render_template("home.html")
+
+
+        @self.app.route('/register', methods=["GET", "POST"])
+        def register():
+            now = datetime.datetime.now()
+            if request.method == 'GET':
+                return render_template("register.html", error_code=999, message_code=999)
+
+            if request.method == 'POST':
+                database = request.form['database']
+                if database == 'database1':
+                    self.app.config['MYSQL_DB'] = 'test'
+                    session['database'] = self.app.config['MYSQL_DB']
+                elif database == 'database2':
+                    self.app.config['MYSQL_DB'] = 'test2'
+                    session['database'] = self.app.config['MYSQL_DB']
+
+                name = request.form['name']
+                email = request.form['email']
+                cur = mysql.connection.cursor()
+                cur.execute("SELECT * FROM users WHERE email = %s", (email,))
+                user = cur.fetchone()
+                mysql.connection.commit()
+                cur.close()
+
+                if user:
+                    error = 'Email address already in use. Please use a different email address.'
+                    return render_template('register.html', error=error, error_code=550, message_code=569)
+                else:
+                    session['name'] = name
+                    session['email'] = email
+                    usertype = 'student'
+                    session['pretype'] = usertype
+                    password = request.form['password'].encode('utf-8')
+                    hash_password = bcrypt.hashpw(password, bcrypt.gensalt())
+                    session['hash'] = hash_password
+
+                    msg = EmailMessage()
+
+                    # otp = random.randint(100000, 999999)
+                    alphabet = string.ascii_letters + string.digits
+                    otp = 'smilecheck-user-'+''.join(secrets.choice(alphabet) for i in range(30))
+                    session['otp'] = otp
+                    # with open('static\email.html?name={name}&otp={otp}', 'rb') as f:
+                    # 	html_content = f.read().decode('utf-8')
+                    # 	msg.set_content(html_content, subtype='html')
+
+                    # msg.set_content("The body of the email is here")
+                    msg["Subject"] = "SmileCheck Verification"
+                    msg["From"] = "smilecheck100@gmail.com"
+                    msg["To"] = email
+                    link = f"http://127.0.0.1:5000/verify/{otp}"
+
+                    html_content = render_template('email.html', name=name, link=link)
+                    msg.set_content(html_content, subtype='html')
+
+                    context = ssl.create_default_context()
+
+                    with smtplib.SMTP_SSL('smtp.gmail.com', 465) as smtp:
+                        smtp.login('smilecheck23@gmail.com', 'dczcfrdkthwcfoqu')
+                        smtp.send_message(msg)
+
+                    return render_template('register.html', message='An Verification Email has been sent to your email address.', message_code=560, error_code=568)
+
+                return redirect(url_for('home'))
+
+        # def getmail():
+        # 	if request.method=="POST":
+        # 		email = request.form['email']
+        # 		code = hashlib.md5(str(random.randint(0, 1000000)).encode()).hexdigest()
+        # 		session['code'] = code
+        # 		link = f"http://127.0.0.1:5000/verify/{code}"
+        # 		send_email(email, link)
+        # 		return "A verification email has been sent to your email address. Please click the link in the email to verify your email."
+
+        @self.app.route('/verify/<otp>')
+        def verify(otp):
+            now = datetime.datetime.now()
+            if str(session['otp']) == otp:
+                self.app.config['MYSQL_DB'] = session['database']
+
+                cur = mysql.connection.cursor()
+                cur.execute("INSERT INTO users (name, email, password) VALUES (%s,%s,%s)", (session['name'], session['email'], session['hash'],))
+
+                if session['pretype'] == 'student':
+                    cur.execute("UPDATE `users` SET `usertype` = %s WHERE `email`=%s", (0, session['email'],))
+                    session['usertype'] = 0
+                elif session['pretype'] == 'admin':
+                    cur.execute("UPDATE `users` SET `usertype` = %s WHERE `email`=%s", (1, session['email'],))
+                    session['usertype'] = 1
+
+                # cur.execute("SELECT `id` FROM users WHERE email = %s", (session['email'],))
+                # uid = cur.fetchone()
+                # session['id'] = uid['id']
+                # cur.execute("INSERT INTO session (id, email, action, actionC, datetime) VALUES (%s, %s, %s, %s, %s)", (session['id'], session['email'], 'Logged In - Session Started', 1, now,))
+                mysql.connection.commit()
+                cur.close()
+
+                #destroy session['otp'] and session['hash']
+                session.clear()
+
+                redi = 'login'
+                return render_template('verify.html', message=111, redirect_url=redi)
+
+            else:
+                redi = 'register'
+                return render_template('verify.html', message=999, redirect_url=redi)
+
+        # def send_email(email, link):
+        #     subject = "Verify Your Email"
+        #     body = f"Please click the following link to verify your email: {link}"
+        #     message = f"Subject: {subject}\n\n{body}"
+        #     sender_email = 'legendVI001@gmail.com'  # replace with your email
+        #     sender_password = 'ABC321VI01'  # replace with your password
+        #
+        #     with smtplib.SMTP_SSL('smtp.gmail.com', 465) as smtp:
+        #         smtp.login(sender_email, sender_password)
+        #         smtp.sendmail(sender_email, email, message)
+
+        @self.app.route('/login', methods=["GET", "POST"])
+        def login():
+            if request.method == 'GET':
+                return render_template("login.html", error_code=999)
+
+            if request.method == 'POST':
+                now = datetime.datetime.now()
+                database = request.form['database']
+                if database == 'database1':
+                    self.app.config['MYSQL_DB'] = 'test'
+                elif database == 'database2':
+                    self.app.config['MYSQL_DB'] = 'test2'
+
+                email = request.form['email']
+                password = request.form['password'].encode('utf-8')
+
+                curl = mysql.connection.cursor()
+                curl.execute("SELECT * FROM users WHERE email=%s", (email,))
+                user = curl.fetchone()
+
+                if user != None:
+                    if bcrypt.hashpw(password, user["password"].encode('utf-8')) == user["password"].encode('utf-8'):
+
+                        curl.execute("SELECT * FROM session WHERE email=%s  ORDER BY `datetime` DESC LIMIT 1", (email,))
+                        userses = curl.fetchone()
+
+                        if userses == None or userses['actionC']==0:
+                            session['id'] = user['id']
+                            session['name'] = user['name']
+                            session['email'] = user['email']
+                            session['database'] = self.app.config['MYSQL_DB']
+
+                            curl.execute("INSERT INTO session (id, email, action, actionC, datetime) VALUES (%s, %s, %s, %s, %s)", (session['id'], session['email'], 'Logged In - Session Started', 1, now,))
+                            mysql.connection.commit()
+                            curl.close()
+
+                            if user['usertype'] == 0:
+                                session['usertype'] = 0
+                                return redirect(url_for('home'))
+                            elif user['usertype'] == 1:
+                                session['usertype'] = 1
+                                return redirect(url_for('admin'))
+
+                        elif userses['actionC'] == 1:
+                            return render_template("login.html", error="Error: Session already in use.", error_code=450)
+
+                    else:
+                        return render_template("login.html", error="Error: Password or Email are incorrect.", error_code=451)
+
+                else:
+                    return render_template("login.html", error="Error: User not found. Please register.", error_code=452)
+
+                mysql.connection.commit()
+                curl.close()
+            else:
+                return render_template("login.html")
+
+
+        @self.app.route('/forgot', methods=["GET", "POST"])
+        def forgot():
+            if request.method == 'GET':
+                return render_template("forgot.html")
+
+            if request.method == 'POST':
+                now = datetime.datetime.now()
+                self.app.config['MYSQL_DB'] = 'test'
+
+                email = request.form['email']
+                session['email'] = email
+
+                curl = mysql.connection.cursor()
+                curl.execute("SELECT * FROM users WHERE email=%s", (email,))
+                user = curl.fetchone()
+
+                mysql.connection.commit()
+                curl.close()
+
+                if user != None:
+                    msg = EmailMessage()
+
+                    name= user['name']
+
+                    alphabet = string.ascii_letters + string.digits
+                    otp = 'smilecheck-pass-' + ''.join(secrets.choice(alphabet) for i in range(30))
+                    session['otp'] = otp
+                    msg["Subject"] = "SmileCheck Verification"
+                    msg["From"] = "smilecheck100@gmail.com"
+                    msg["To"] = email
+                    link = f"http://127.0.0.1:5000/password/{otp}"
+
+                    html_content = render_template('pass.html', name=name, link=link)
+                    msg.set_content(html_content, subtype='html')
+
+                    context = ssl.create_default_context()
+
+                    with smtplib.SMTP_SSL('smtp.gmail.com', 465) as smtp:
+                        smtp.login('smilecheck23@gmail.com', 'dczcfrdkthwcfoqu')
+                        smtp.send_message(msg)
+
+                    return render_template('register.html', message='An Verification Email has been sent to your email address.', message_code=560, error_code=568)
+
+                else:
+                    return render_template("forgot.html", mess="No such User Found.")
+
+
+        @self.app.route('/password/<otp>', methods=["GET", "POST"])
+        def password(otp):
+            now = datetime.datetime.now()
+            if str(session['otp']) == otp:
+                redi = 'change'
+                return render_template('password.html', message=111, redirect_url=redi)
+            else:
+                redi = 'login'
+                return render_template('password.html', message=999, redirect_url=redi)
+
+
+        @self.app.route('/change', methods=["GET", "POST"])
+        def change():
+            if request.method == 'GET':
+                return render_template("change.html")
+
+            if request.method == 'POST':
+                self.app.config['MYSQL_DB'] = 'test'
+
+                password = request.form['password'].encode('utf-8')
+                hash_password = bcrypt.hashpw(password, bcrypt.gensalt())
+
+                curl = mysql.connection.cursor()
+                curl.execute("UPDATE `users` SET `password`=%s WHERE email=%s", (hash_password, session['email'],))
+                user = curl.fetchone()
+
+                mysql.connection.commit()
+                curl.close()
+
+                session.clear()
+
+                return redirect(url_for('login'))
+
+
+        @self.app.route('/admin', methods=["GET", "POST"])
+        def admin():
+            if 'email' in session:
+                if session['usertype'] == 0:
+                    return redirect(url_for('home'))
+            else:
+                return redirect(url_for('login'))
+
+            if request.method == 'GET':
+                if 'email' in session:
+                    self.app.config['MYSQL_DB'] = session['database']
+                    cura = mysql.connection.cursor()
+                    cura.execute("SELECT `assessid`, `name` FROM assessments")
+                    typedata = cura.fetchall()
+                    cura.execute("SELECT `id`, `type` FROM custom")
+                    given = cura.fetchall()
+
+                    isdone = []
+                    for give in given:
+                        isdone.append(give['type'])
+
+                    cura.execute("SELECT `id`, `name`, `email`, `isdone` FROM `users` WHERE `usertype` = 0")
+                    res = cura.fetchall()
+
+                    cura.execute("SELECT `assessId`, `name`, `description`, `Questions`, `average` FROM `assessments`")
+                    que = cura.fetchall()
+
+                    cura.execute("SELECT `id`, `type`, `name` FROM `custom`, `assessments` WHERE custom.type = assessments.assessId")
+                    abc = cura.fetchall()
+
+                    ahi = 0.0
+                    for assess in que:
+                        if assess['assessId'] == 101:
+                            ahi = assess['average']
+
+                    ts = len(res)
+                    tas = len(isdone)
+
+                    cura.execute("SELECT `name`, `email`, `feedback` FROM `feedbacks`")
+                    feeds = cura.fetchall()
+
+                    mysql.connection.commit()
+                    cura.close()
+
+                    return render_template("admin.html", typedata=typedata, given=given, result=res, assess=que, abc=abc, ts=ts, ahi=ahi, tas=tas, feeds= feeds)
+
+            if request.method == "POST":
+                self.app.config['MYSQL_DB'] = session['database']
+
+                if 'resid' in request.form:
+                    resid = request.form.get('resid')
+                    types = request.form.get('type')
+
+                    session['id'] = resid
+                    session['type'] = types
+
+                    return redirect(url_for('result'))
+
+                elif 'delete' in request.form:
+                    cura = mysql.connection.cursor()
+                    deleteId = request.form['delete']
+                    cura.execute("DELETE FROM `assessments` WHERE `assessId`= %s", (deleteId,))
+                    mysql.connection.commit()
+                    cura.close()
+                    return redirect(url_for('admin'))
+
+                # cura = mysql.connection.cursor()
+                # cura.execute("SELECT * FROM `result` WHERE `id` = %s", (resid,))
+                # chart = cura.fetchone()
+                #
+                # cura.execute("SELECT * FROM `assessments` WHERE `assessid` = %s", (type,))
+                # chart = cura.fetchone()
+                # mysql.connection.commit()
+                # cura.close()
+                #
+                # return render_template('result.html')
+
+            return render_template('admin.html')
+
+
+        @self.app.route('/form', methods=["GET", "POST"])
+        def form():
+            if 'email' not in session:
+                return redirect(url_for('login'))
+
+            if request.method == "GET":
+                self.app.config['MYSQL_DB'] = session['database']
+                typeid = session['type']
+                curf = mysql.connection.cursor()
+                curf.execute("SELECT `name`, `description`, `Questions`, `types` FROM assessments WHERE assessid = %s", (typeid,))
+                questions = curf.fetchone()
+                mysql.connection.commit()
+                curf.close()
+
+                return render_template("form.html", questions=questions)
+
+            if request.method == "POST":
+                self.app.config['MYSQL_DB'] = session['database']
+
+                email = session["email"]
+
+                '''Sentiment analysis for each response...'''
+
+                data = request.form.to_dict()
+
+                length = len(request.form)
+                inp = []
+                for i in range(0, length):
+                    inp.append(data['inp' + str(i + 1) + ''])
+
+                sid_obj = SentimentIntensityAnalyzer()
+
+                compound = []
+                for i in range(0, length):
+                    # locals()[f"sentiment_dict{i}"] = sid_obj.polarity_scores(data['inp'+ (i+1) +''])
+                    compound.append(sid_obj.polarity_scores(data['inp' + str(i + 1) + ''])['compound'] * 100)
+
+                '''SQL Queries for data storing in database...'''
+
+                now = datetime.datetime.now()
+                cur = mysql.connection.cursor()
+
+                query = "INSERT INTO `custom` (`Id`, `type`, `response`, `result`, `datetime`) VALUES (%s, %s, %s, %s, %s)"
+                cur.execute(query, (session['id'], session['type'], json.dumps(inp), json.dumps(compound), now,))
+
+                query = "UPDATE `users` SET `isdone`=%s WHERE `id`=%s"
+                cur.execute(query, (1, session['id'],))
+
+                cur.execute("SELECT * FROM `custom` WHERE id=%s AND type=%s", (session['id'], session['type'],))
+                res = cur.fetchone()
+
+                cur.execute("SELECT qval FROM `assessments` WHERE assessId=%s", (session['type'],))
+                qval = cur.fetchone()
+
+                happy = []
+                multi = []
+                multi = eval(qval['qval'])
+                happy = eval(res['result'])
+                for j in range(len(happy)):
+                    happy[j] = happy[j] * multi[j]
+
+                min_value = min(compound)
+                max_value = max(compound)
+                scaled_values = [(value - min_value) / (max_value - min_value) * 5 for value in compound]
+
+                happy_index = round(sum(scaled_values) / len(scaled_values), 2)
+                # happy_score = round(sum(happy) / len(happy), 4)
+
+                query = "UPDATE `custom` SET `happy`=%s WHERE `id`=%s AND `type`=%s"
+                cur.execute(query, (happy_index, session['id'], session['type'],))
+
+                cur.execute("SELECT `happy` FROM `custom` WHERE type=%s", (session['type'],))
+                avg_dict = cur.fetchall()
+
+                avg_list = [d['happy'] for d in avg_dict if isinstance(d['happy'], float)] + [item for d in avg_dict if isinstance(d['happy'], (list, tuple)) for item in d['happy']]
+
+                avg_score = round(sum(avg_list)/len(avg_list), 2)
+
+                query = "UPDATE `assessments` SET `average`=%s WHERE `assessId`=%s"
+                cur.execute(query, (avg_score, session['type'],))
+
+                mysql.connection.commit()
+                cur.close()
+
+                '''Re-render template...'''
+
+                return redirect(url_for('result'))
+
+        #*********************************************** Further optimization....
+        #		form_data = request.form.to_dict()
+        #***********************************************
+                #
+                # inp1 = request.form.get("inp1")
+                # inp2 = request.form.get("inp2")
+                # inp3 = request.form.get("inp3")
+                # inp4 = request.form.get("inp4")
+                # inp5 = request.form.get("inp5")
+                # inp6 = request.form.get("inp6")
+                # inp7 = request.form.get("inp7")
+                # inp8 = request.form.get("inp8")
+                # inp9 = request.form.get("inp9")
+                # inp10 = request.form.get("inp10")
+                #
+                # sid_obj = SentimentIntensityAnalyzer()
+                #
+                # sentiment_dict1 = sid_obj.polarity_scores(inp1)
+                # sentiment_dict2 = sid_obj.polarity_scores(inp2)
+                # sentiment_dict3 = sid_obj.polarity_scores(inp3)
+                # sentiment_dict4 = sid_obj.polarity_scores(inp4)
+                # sentiment_dict5 = sid_obj.polarity_scores(inp5)
+                # sentiment_dict6 = sid_obj.polarity_scores(inp6)
+                # sentiment_dict7 = sid_obj.polarity_scores(inp7)
+                # sentiment_dict8 = sid_obj.polarity_scores(inp8)
+                # sentiment_dict9 = sid_obj.polarity_scores(inp9)
+                # sentiment_dict10 = sid_obj.polarity_scores(inp10)
+                # # negative = sentiment_dict['neg']
+                # # neutral = sentiment_dict['neu']
+                # # positive = sentiment_dict['pos']
+                # compound1 = sentiment_dict1['compound'] * 100
+                # compound2 = sentiment_dict2['compound'] * 100
+                # compound3 = sentiment_dict3['compound'] * 100
+                # compound4 = sentiment_dict4['compound'] * 100
+                # compound5 = sentiment_dict5['compound'] * 100
+                # compound6 = sentiment_dict6['compound'] * 100
+                # compound7 = sentiment_dict7['compound'] * 100
+                # compound8 = sentiment_dict8['compound'] * 100
+                # compound9 = sentiment_dict9['compound'] * 100
+                # compound10 = sentiment_dict10['compound'] * 100
+                #
+                # # _________________________________________________________________________________________________________#
+                #
+                # '''Matlab Plots...'''
+                #
+                # x = ["Q1", "Q2", "Q3", "Q4", "Q5", "Q6", "Q7", "Q8", "Q9", "Q10"]
+                # y = [compound1, compound2, compound3, compound4, compound5, compound6, compound7, compound8, compound9, compound10]
+                # fig, ax = plt.subplots()
+                # plt.bar(x, y)
+                # fig.set_size_inches(10, 6)
+                # img_name = str(session['id'])
+                # fig.savefig('' + img_name + '.png', dpi=384, transparent=True)
+                # with open('' + img_name + '.png', 'rb') as f:
+                # 	img = f.read()
+                #
+                # # _________________________________________________________________________________________________________#
+                #
+                # '''SQL Queries for data storing in database...'''
+                #
+                # now = datetime.datetime.now()
+                # cur = mysql.connection.cursor()
+                #
+                # query = "INSERT INTO `testy` (`Id`, `Q1`, `Q2`, `Q3`, `Q4`, `Q5`, `Q6`, `Q7`, `Q8`, `Q9`, `Q10`, `datetime`) VALUES (%s, %s, %s, %s, %s, %s, %s, %s, %s, %s, %s, %s)"
+                # cur.execute(query, (session['id'], inp1, inp2, inp3, inp4, inp5, inp6, inp7, inp8, inp9, inp10, now))
+                #
+                # query = "INSERT INTO `result` (`id`, `R1`, `R2`, `R3`, `R4`, `R5`, `R6`, `R7`, `R8`, `R9`, `R10`, `image`, `datetime`) VALUES (%s, %s, %s, %s, %s, %s, %s, %s, %s, %s, %s, %s, %s)"
+                # cur.execute(query, (session['id'], compound1, compound2, compound3, compound4, compound5, compound6, compound7, compound8, compound9, compound10, img, now))
+                #
+                # query = "UPDATE `users` SET `isdone`=%s WHERE `id`=%s"
+                # cur.execute(query, (1, session['id'],))
+                #
+                # mysql.connection.commit()
+                # cur.close()
+
+                # '''Retrival of data...'''
+                # query = "SELECT Image FROM testy WHERE Id = %s"
+                # cur.execute(query, (103))
+                # row = cur.fetchone()
+                # img = Image.open(io.BytesIO(row[0]))
+                # cur.close()
+                #
+                # plt.imshow(img)
+                # plt.show()
+
+                # _________________________________________________________________________________________________________#
+            return redirect(url_for('result'))
+        # def index():
+        # 	if request.method == "POST":
+        #
+        # 		'''Matlab Plots...'''
+        # 		x = ["a", "b", "c", "d"]
+        # 		y = [85,90,70,75]
+        # 		fig, ax = plt.subplots()
+        # 		plt.bar(x, y)
+        # 		fig.set_size_inches(10, 6)
+        # 		fig.savefig('foo.png', dpi=384, transparent=True)
+        # 		with open('foo.png', 'rb') as f:
+        # 			img = f.read()
+        # 	# _________________________________________________________________________________________________________#
+        #
+        # 		'''SQL Queries for data storing in database...'''
+        # 		cur = mysql.connection.cursor()
+        # 		query = "INSERT INTO `testy` (`Id`, `Q1`, `Q2`, `Q3`, `Image`) VALUES (%s, %s, %s, %s, %s)"
+        # 		cur.execute(query, (103, 2, 3, 1, img))
+        # 		mysql.connection.commit()
+        #
+        # 		query = "SELECT Image FROM testy WHERE Id = %s"
+        # 		cur.execute(query, (103,))
+        # 		row = cur.fetchone()
+        # 		img = Image.open(io.BytesIO(row[0]))
+        # 		cur.close()
+        #
+        # 		plt.imshow(img)
+        # 		plt.show()
+        # 	# _________________________________________________________________________________________________________#
+        #
+        #
+        # 		'''Sentiment analysis for each response...'''
+        # 		inp = request.form.get("inp1")
+        # 		name = request.form.get("name")
+        # 		sid_obj = SentimentIntensityAnalyzer()
+        # 		# score = sid.polarity_scores(inp)
+        # 		# if score["neg"] > 0:
+        # 		# 	return render_template('home.html', message="Negative")
+        # 		# if score["neg"] == 0:
+        # 		# 	return render_template('home.html', message="Neutral")
+        # 		# else:
+        # 		# 	return render_template('home.html', message="Positive")
+        #
+        # 		sentiment_dict = sid_obj.polarity_scores(inp)
+        # 		negative = sentiment_dict['neg']
+        # 		neutral = sentiment_dict['neu']
+        # 		positive = sentiment_dict['pos']
+        # 		compound = sentiment_dict['compound']
+        #
+        # 		return render_template('home.html', message=sentiment_dict['compound'], names=name)
+        #
+        # 		# if sentiment_dict['compound'] >= 0.05:
+        # 		# 	return render_template('home.html', message="Positive")
+        # 		#
+        # 		# elif sentiment_dict['compound'] <= - 0.05:
+        # 		# 	return render_template('home.html', message="Negative")
+        # 		#
+        # 		# else:
+        # 		# 	return render_template('home.html', message="Neutral")
+        #
+        # 	# _________________________________________________________________________________________________________#
+        #
+        # 	return render_template('home.html')
+
+
+        @self.app.route('/custom', methods=["GET", "POST"])
+        def custom():
+            if 'email' not in session:
+                return redirect(url_for('login'))
+
+            if request.method == "GET":
+                if session['usertype'] == 0:
+                    return redirect(url_for('home'))
+
+                return render_template('custom.html')
+
+            if request.method == "POST":
+                self.app.config['MYSQL_DB'] = session['database']
+                email = session["email"]
+
+                '''Sentiment analysis for each response...'''
+
+                data = request.form.to_dict()
+
+                length = len(request.form)
+                inp = []
+                for i in range(0, int((length - 3)/2)):
+                    inp.append(data['inpt' + str(i + 1) + ''])
+
+                sid_obj = SentimentIntensityAnalyzer()
+
+                compound = []
+                for i in range(0, int((length - 3)/2)):
+                    compound.append(sid_obj.polarity_scores(data['inpt' + str(i + 1) + ''])['compound'] * 100)
+
+                types = []
+                for i in range(0, int((length - 3) / 2)):
+                    types.append(int(data['select' + str(i + 1) + '']))
+
+                for i in range(len(compound)):
+                    if compound[i] < 0:
+                        compound[i] = -1
+                    elif compound[i] >= 0:
+                        compound[i] = 1
+
+                name = request.form['name']
+                describ = request.form['describ']
+
+                '''SQL Queries for data storing in database...'''
+
+                now = datetime.datetime.now()
+                cur = mysql.connection.cursor()
+
+                query = "INSERT INTO `assessments` (`name`, `description`, `Questions`, `types`, `qval`) VALUES (%s, %s, %s, %s, %s)"
+                cur.execute(query, (name, describ, json.dumps(inp), json.dumps(types), json.dumps(compound),))
+
+                mysql.connection.commit()
+                cur.close()
+
+                return redirect(url_for('admin'))
+
+            return render_template("custom.html")
+
+
+        @self.app.route('/result')
+        def result():
+            if 'email' not in session:
+                return redirect(url_for('home'))
+
+            self.app.config['MYSQL_DB'] = session['database']
+            curr = mysql.connection.cursor()
+
+            curr.execute("SELECT * FROM `custom` WHERE id=%s AND type=%s", (session['id'], session['type'],))
+            res = curr.fetchone()
+
+            curr.execute("SELECT result FROM `custom` WHERE type=%s", (session['type'],))
+            avg = curr.fetchall()
+
+            # curr.execute("SELECT qval FROM `assessments` WHERE assessId=%s", (session['type'],))
+            # qval = curr.fetchone()
+
+            dynamic = [list(eval(d['result'])) for d in avg]
+
+            # Personal Average per questions will be compared....
+            # average = []
+            # multi = []
+            # multi = eval(qval['qval'])
+            # for i in range(len(avg)):
+            # 	temp = eval(avg[i]['result'])
+            # 	for j in range(len(temp)):
+            # 		temp[j] = temp[j] * multi[j]
+            # 	average.append(sum(temp) / len(temp))
+
+            #Compute Happiness Index
+            # happy = []
+            # multi = []
+            # multi = eval(qval['qval'])
+            # happy = eval(res['result'])
+            # for j in range(len(happy)):
+            # 	happy[j] = happy[j] * multi[j]
+            # happy_score = round(sum(happy) / len(happy), 4)
+
+            dyna = []
+            i = 0
+            for i in range(len(dynamic[i])):
+                temp2 = 0
+                for j in range(len(dynamic)):
+                    temp2 = temp2 + dynamic[j][i]
+                dyna.append(temp2 / len(dynamic))
+
+
+            ques = []
+            for i in range(1, len(dyna)+1):
+                ques.append("Question " + str(i) + "")
+
+            curr.execute("SELECT * FROM assessments WHERE assessid = %s", (session['type'],))
+            questions = curr.fetchone()
+
+            curr.execute("SELECT * FROM suggestions")
+            suggests = curr.fetchall()
+            response = []
+            mapper = eval(questions['types'])
+            score = eval(res['result'])
+
+            score_dict = {}
+            for i in range(len(mapper)):
+                if mapper[i] not in score_dict:
+                    score_dict[mapper[i]] = []
+                score_dict[mapper[i]].append(score[i])
+
+            result_dict = {}
+
+            for key, value in score_dict.items():
+                temp_score = sum(value) / len(value)
+                avg_score = round(((temp_score + 100) / 200) * (90 - 10) + 10, 2)
+                if key == 1101:
+                    if avg_score >= 66:
+                        result_dict[key] = {"average_score": avg_score, "name": "Psychological well being", "description": "Refers to an individual`s mental state and overall happiness, including feelings of fulfillment, purpose, and contentment.", "suggestions_text": [list(eval(d['good'])) for d in suggests if d['idtype'] == 1101]}
+                    elif avg_score >= 30:
+                        result_dict[key] = {"average_score": avg_score, "name": "Psychological well being", "description": "Refers to an individual`s mental state and overall happiness, including feelings of fulfillment, purpose, and contentment.", "suggestions_text": [list(eval(d['average'])) for d in suggests if d['idtype'] == 1101]}
+                    elif avg_score < 30:
+                        result_dict[key] = {"average_score": avg_score, "name": "Psychological well being", "description": "Refers to an individual`s mental state and overall happiness, including feelings of fulfillment, purpose, and contentment.", "suggestions_text": [list(eval(d['bad'])) for d in suggests if d['idtype'] == 1101]}
+
+                elif key == 1102:
+                    if avg_score >= 66:
+                        result_dict[key] = {"average_score": avg_score, "name": "Health aspects", "description": "Refers to an individual`s physical health, including factors such as nutrition, exercise, and access to medical care.", "suggestions_text": [list(eval(d['good'])) for d in suggests if d['idtype'] == 1102]}
+                    elif avg_score >= 30:
+                        result_dict[key] = {"average_score": avg_score, "name": "Health aspects", "description": "Refers to an individual`s physical health, including factors such as nutrition, exercise, and access to medical care.", "suggestions_text": [list(eval(d['average'])) for d in suggests if d['idtype'] == 1102]}
+                    elif avg_score < 30:
+                        result_dict[key] = {"average_score": avg_score, "name": "Health aspects", "description": "Refers to an individual`s physical health, including factors such as nutrition, exercise, and access to medical care.", "suggestions_text": [list(eval(d['bad'])) for d in suggests if d['idtype'] == 1102]}
+
+                elif key == 1103:
+                    if avg_score >= 66:
+                        result_dict[key] = {"average_score": avg_score, "name": "Time management", "description": "Refers to an individual`s ability to effectively manage their time and prioritize tasks to maximize productivity and reduce stress.", "suggestions_text": [list(eval(d['good'])) for d in suggests if d['idtype'] == 1103]}
+                    elif avg_score >= 30:
+                        result_dict[key] = {"average_score": avg_score, "name": "Time management", "description": "Refers to an individual`s ability to effectively manage their time and prioritize tasks to maximize productivity and reduce stress.", "suggestions_text": [list(eval(d['average'])) for d in suggests if d['idtype'] == 1103]}
+                    elif avg_score < 30:
+                        result_dict[key] = {"average_score": avg_score, "name": "Time management", "description": "Refers to an individual`s ability to effectively manage their time and prioritize tasks to maximize productivity and reduce stress.", "suggestions_text": [list(eval(d['bad'])) for d in suggests if d['idtype'] == 1103]}
+
+                elif key == 1104:
+                    if avg_score >= 66:
+                        result_dict[key] = {"average_score": avg_score, "name": "Educational standards", "description": "Refers to the quality of education provided in a given community, including factors such as curriculum, teaching quality, and access to resources.", "suggestions_text": [list(eval(d['good'])) for d in suggests if d['idtype'] == 1104]}
+                    elif avg_score >= 30:
+                        result_dict[key] = {"average_score": avg_score, "name": "Educational standards", "description": "Refers to the quality of education provided in a given community, including factors such as curriculum, teaching quality, and access to resources.", "suggestions_text": [list(eval(d['average'])) for d in suggests if d['idtype'] == 1104]}
+                    elif avg_score < 30:
+                        result_dict[key] = {"average_score": avg_score, "name": "Educational standards", "description": "Refers to the quality of education provided in a given community, including factors such as curriculum, teaching quality, and access to resources.", "suggestions_text": [list(eval(d['bad'])) for d in suggests if d['idtype'] == 1104]}
+
+                elif key == 1105:
+                    if avg_score >= 66:
+                        result_dict[key] = {"average_score": avg_score, "name": "Cultural diversity", "description": "Refers to the range of cultures, beliefs, and practices within a given community, and the level of acceptance and celebration of diversity.", "suggestions_text": [list(eval(d['good'])) for d in suggests if d['idtype'] == 1105]}
+                    elif avg_score >= 30:
+                        result_dict[key] = {"average_score": avg_score, "name": "Cultural diversity", "description": "Refers to the range of cultures, beliefs, and practices within a given community, and the level of acceptance and celebration of diversity.", "suggestions_text": [list(eval(d['average'])) for d in suggests if d['idtype'] == 1105]}
+                    elif avg_score < 30:
+                        result_dict[key] = {"average_score": avg_score, "name": "Cultural diversity", "description": "Refers to the range of cultures, beliefs, and practices within a given community, and the level of acceptance and celebration of diversity.", "suggestions_text": [list(eval(d['bad'])) for d in suggests if d['idtype'] == 1105]}
+
+                elif key == 1106:
+                    if avg_score >= 66:
+                        result_dict[key] = {"average_score": avg_score, "name": "Social well-being", "description": "Social well-being refers to the quality of an individual`s social interactions, relationships, and sense of community belonging.", "suggestions_text": [list(eval(d['good'])) for d in suggests if d['idtype'] == 1106]}
+                    elif avg_score >= 30:
+                        result_dict[key] = {"average_score": avg_score, "name": "Social well-being", "description": "Social well-being refers to the quality of an individual`s social interactions, relationships, and sense of community belonging.", "suggestions_text": [list(eval(d['average'])) for d in suggests if d['idtype'] == 1106]}
+                    elif avg_score < 30:
+                        result_dict[key] = {"average_score": avg_score, "name": "Social well-being", "description": "Social well-being refers to the quality of an individual`s social interactions, relationships, and sense of community belonging.", "suggestions_text": [list(eval(d['bad'])) for d in suggests if d['idtype'] == 1106]}
+
+                elif key == 1107:
+                    if avg_score >= 66:
+                        result_dict[key] = {"average_score": avg_score, "name": "Good governance", "description": "Refers to the effectiveness and transparency of governing systems and institutions in promoting the well-being of all members of a community.", "suggestions_text": [list(eval(d['good'])) for d in suggests if d['idtype'] == 1107]}
+                    elif avg_score >= 30:
+                        result_dict[key] = {"average_score": avg_score, "name": "Good governance", "description": "Refers to the effectiveness and transparency of governing systems and institutions in promoting the well-being of all members of a community.", "suggestions_text": [list(eval(d['average'])) for d in suggests if d['idtype'] == 1107]}
+                    elif avg_score < 30:
+                        result_dict[key] = {"average_score": avg_score, "name": "Good governance", "description": "Refers to the effectiveness and transparency of governing systems and institutions in promoting the well-being of all members of a community.", "suggestions_text": [list(eval(d['bad'])) for d in suggests if d['idtype'] == 1107]}
+
+                elif key == 1108:
+                    if avg_score >= 66:
+                        result_dict[key] = {"average_score": avg_score, "name": "Community vitality", "description": "Refers to the health and vibrancy of a community, including factors such as social cohesion, civic engagement, and access to resources.", "suggestions_text": [list(eval(d['good'])) for d in suggests if d['idtype'] == 1108]}
+                    elif avg_score >= 30:
+                        result_dict[key] = {"average_score": avg_score, "name": "Community vitality", "description": "Refers to the health and vibrancy of a community, including factors such as social cohesion, civic engagement, and access to resources.", "suggestions_text": [list(eval(d['average'])) for d in suggests if d['idtype'] == 1108]}
+                    elif avg_score < 30:
+                        result_dict[key] = {"average_score": avg_score, "name": "Community vitality", "description": "Refers to the health and vibrancy of a community, including factors such as social cohesion, civic engagement, and access to resources.", "suggestions_text": [list(eval(d['bad'])) for d in suggests if d['idtype'] == 1108]}
+
+            suggest_dict = dict(sorted(result_dict.items()))
+
+            # for i in range(len(score)):
+            # 	if score[i] == 999:
+            # 		response.append({'none'})
+            #
+            # 	elif score[i] >= 66:
+            # 		if mapper[i] == 1101:
+            # 			new_dict = {
+            # 				'domain': 'Psychological well being',
+            # 				'describ': 'Refers to an individual`s mental state and overall happiness, including feelings of fulfillment, purpose, and contentment.',
+            # 				'suggest': [list(eval(d['good'])) for d in suggests if d['idtype'] == 1101]
+            # 			}
+            # 		elif mapper[i] == 1102:
+            # 			new_dict = {
+            # 				'domain': 'Health aspects',
+            # 				'describ': 'Refers to an individual`s physical health, including factors such as nutrition, exercise, and access to medical care.',
+            # 				'suggest': [list(eval(d['good'])) for d in suggests if d['idtype'] == 1102]
+            # 			}
+            # 		elif mapper[i] == 1103:
+            # 			new_dict = {
+            # 				'domain': 'Time management',
+            # 				'describ': 'Refers to an individual`s ability to effectively manage their time and prioritize tasks to maximize productivity and reduce stress.',
+            # 				'suggest': [list(eval(d['good'])) for d in suggests if d['idtype'] == 1103]
+            # 			}
+            # 		elif mapper[i] == 1104:
+            # 			new_dict = {
+            # 				'domain': 'Educational standards',
+            # 				'describ': 'Refers to the quality of education provided in a given community, including factors such as curriculum, teaching quality, and access to resources.',
+            # 				'suggest': [list(eval(d['good'])) for d in suggests if d['idtype'] == 1104]
+            # 			}
+            # 		elif mapper[i] == 1105:
+            # 			new_dict = {
+            # 				'domain': 'Cultural diversity',
+            # 				'describ': 'Refers to the range of cultures, beliefs, and practices within a given community, and the level of acceptance and celebration of diversity.',
+            # 				'suggest': [list(eval(d['good'])) for d in suggests if d['idtype'] == 1105]
+            # 			}
+            # 		elif mapper[i] == 1106:
+            # 			new_dict = {
+            # 				'domain': 'Social well-being',
+            # 				'describ': 'Social well-being refers to the quality of an individual`s social interactions, relationships, and sense of community belonging.',
+            # 				'suggest': [list(eval(d['good'])) for d in suggests if d['idtype'] == 1106]
+            # 			}
+            # 		elif mapper[i] == 1107:
+            # 			new_dict = {
+            # 				'domain': 'Good governance',
+            # 				'describ': 'Refers to the effectiveness and transparency of governing systems and institutions in promoting the well-being of all members of a community.',
+            # 				'suggest': [list(eval(d['good'])) for d in suggests if d['idtype'] == 1107]
+            # 			}
+            # 		elif mapper[i] == 1108:
+            # 			new_dict = {
+            # 				'domain': 'Community vitality',
+            # 				'describ': 'Refers to the health and vibrancy of a community, including factors such as social cohesion, civic engagement, and access to resources.',
+            # 				'suggest': [list(eval(d['good'])) for d in suggests if d['idtype'] == 1108]
+            # 			}
+            # 		response.append(new_dict)
+            #
+            # 	elif score[i] >= 40:
+            # 		if mapper[i] == 1101:
+            # 			new_dict = {
+            # 				'domain': 'Psychological well being',
+            # 				'describ': 'Refers to an individual`s mental state and overall happiness, including feelings of fulfillment, purpose, and contentment.',
+            # 				'suggest': [list(eval(d['average'])) for d in suggests if d['idtype'] == 1101]
+            # 			}
+            # 		elif mapper[i] == 1102:
+            # 			new_dict = {
+            # 				'domain': 'Health aspects',
+            # 				'describ': 'Refers to an individual`s physical health, including factors such as nutrition, exercise, and access to medical care.',
+            # 				'suggest': [list(eval(d['average'])) for d in suggests if d['idtype'] == 1102]
+            # 			}
+            # 		elif mapper[i] == 1103:
+            # 			new_dict = {
+            # 				'domain': 'Time management',
+            # 				'describ': 'Refers to an individual`s ability to effectively manage their time and prioritize tasks to maximize productivity and reduce stress.',
+            # 				'suggest': [list(eval(d['average'])) for d in suggests if d['idtype'] == 1103]
+            # 			}
+            # 		elif mapper[i] == 1104:
+            # 			new_dict = {
+            # 				'domain': 'Educational standards',
+            # 				'describ': 'Refers to the quality of education provided in a given community, including factors such as curriculum, teaching quality, and access to resources.',
+            # 				'suggest': [list(eval(d['average'])) for d in suggests if d['idtype'] == 1104]
+            # 			}
+            # 		elif mapper[i] == 1105:
+            # 			new_dict = {
+            # 				'domain': 'Cultural diversity',
+            # 				'describ': 'Refers to the range of cultures, beliefs, and practices within a given community, and the level of acceptance and celebration of diversity.',
+            # 				'suggest': [list(eval(d['average'])) for d in suggests if d['idtype'] == 1105]
+            # 			}
+            # 		elif mapper[i] == 1106:
+            # 			new_dict = {
+            # 				'domain': 'Social well-being',
+            # 				'describ': 'Social well-being refers to the quality of an individual`s social interactions, relationships, and sense of community belonging.',
+            # 				'suggest': [list(eval(d['average'])) for d in suggests if d['idtype'] == 1106]
+            # 			}
+            # 		elif mapper[i] == 1107:
+            # 			new_dict = {
+            # 				'domain': 'Good governance',
+            # 				'describ': 'Refers to the effectiveness and transparency of governing systems and institutions in promoting the well-being of all members of a community.',
+            # 				'suggest': [list(eval(d['average'])) for d in suggests if d['idtype'] == 1107]
+            # 			}
+            # 		elif mapper[i] == 1108:
+            # 			new_dict = {
+            # 				'domain': 'Community vitality',
+            # 				'describ': 'Refers to the health and vibrancy of a community, including factors such as social cohesion, civic engagement, and access to resources.',
+            # 				'suggest': [list(eval(d['average'])) for d in suggests if d['idtype'] == 1108]
+            # 			}
+            # 		response.append(new_dict)
+            #
+            # 	elif score[i] < 40:
+            # 		if mapper[i] == 1101:
+            # 			new_dict = {
+            # 				'domain': 'Psychological well being',
+            # 				'describ': 'Refers to an individual`s mental state and overall happiness, including feelings of fulfillment, purpose, and contentment.',
+            # 				'suggest': [list(eval(d['bad'])) for d in suggests if d['idtype'] == 1101]
+            # 			}
+            # 		elif mapper[i] == 1102:
+            # 			new_dict = {
+            # 				'domain': 'Health aspects',
+            # 				'describ': 'Refers to an individual`s physical health, including factors such as nutrition, exercise, and access to medical care.',
+            # 				'suggest': [list(eval(d['bad'])) for d in suggests if d['idtype'] == 1102]
+            # 			}
+            # 		elif mapper[i] == 1103:
+            # 			new_dict = {
+            # 				'domain': 'Time management',
+            # 				'describ': 'Refers to an individual`s ability to effectively manage their time and prioritize tasks to maximize productivity and reduce stress.',
+            # 				'suggest': [list(eval(d['bad'])) for d in suggests if d['idtype'] == 1103]
+            # 			}
+            # 		elif mapper[i] == 1104:
+            # 			new_dict = {
+            # 				'domain': 'Educational standards',
+            # 				'describ': 'Refers to the quality of education provided in a given community, including factors such as curriculum, teaching quality, and access to resources.',
+            # 				'suggest': [list(eval(d['bad'])) for d in suggests if d['idtype'] == 1104]
+            # 			}
+            # 		elif mapper[i] == 1105:
+            # 			new_dict = {
+            # 				'domain': 'Cultural diversity',
+            # 				'describ': 'Refers to the range of cultures, beliefs, and practices within a given community, and the level of acceptance and celebration of diversity.',
+            # 				'suggest': [list(eval(d['bad'])) for d in suggests if d['idtype'] == 1105]
+            # 			}
+            # 		elif mapper[i] == 1106:
+            # 			new_dict = {
+            # 				'domain': 'Social well-being',
+            # 				'describ': 'Social well-being refers to the quality of an individual`s social interactions, relationships, and sense of community belonging.',
+            # 				'suggest': [list(eval(d['bad'])) for d in suggests if d['idtype'] == 1106]
+            # 			}
+            # 		elif mapper[i] == 1107:
+            # 			new_dict = {
+            # 				'domain': 'Good governance',
+            # 				'describ': 'Refers to the effectiveness and transparency of governing systems and institutions in promoting the well-being of all members of a community.',
+            # 				'suggest': [list(eval(d['bad'])) for d in suggests if d['idtype'] == 1107]
+            # 			}
+            # 		elif mapper[i] == 1108:
+            # 			new_dict = {
+            # 				'domain': 'Community vitality',
+            # 				'describ': 'Refers to the health and vibrancy of a community, including factors such as social cohesion, civic engagement, and access to resources.',
+            # 				'suggest': [list(eval(d['bad'])) for d in suggests if d['idtype'] == 1108]
+            # 			}
+            # 		response.append(new_dict)
+
+            curr.execute("SELECT `Questions`,`response`, `result`, `datetime` FROM `custom`, `assessments` WHERE `id`=%s AND `type`=%s AND custom.type = assessments.assessId", (session['id'], session['type'],))
+            details = curr.fetchone()
+
+            mysql.connection.commit()
+            curr.close()
+
+            return render_template("result.html", ques=ques, res1=res['response'], res2=res['result'], res3=res['datetime'], res4=res['happy'], res5=dyna, res6=response, res7=suggest_dict, res8=questions, res9=details)
+
+        # @app.route('/customresult')
+        # def customresult():
+        # 	app.config['MYSQL_DB'] = session['database']
+        # 	curr = mysql.connection.cursor()
+        # 	curr.execute("SELECT * FROM `custom` WHERE id=%s", (session['id'],))
+        # 	res = curr.fetchone()
+        # 	mysql.connection.commit()
+        # 	curr.close()
+        #
+        # 	ques = []
+        # 	for i in range(1, len(res)):
+        # 		ques.append("Q"+ str(i) +"")
+        #
+        # 	return render_template("customresult.html", ques=ques, res1=res['response'], res2=res['result'], res3=res['datetime'])
+
+        @self.app.route('/logout')
+        def logout():
+            self.app.config['MYSQL_DB'] = session['database']
+            now = datetime.datetime.now()
+            curo = mysql.connection.cursor()
+            if 'id' in session:
+                curo.execute("INSERT INTO session (id, email, action, actionC, datetime) VALUES (%s, %s, %s, %s, %s)", (session['id'], session['email'], 'Logged Out - Session Terminated', 0, now,))
+            else:
+                curo.execute("INSERT INTO session (email, action, actionC, datetime) VALUES (%s, %s, %s, %s)", (session['email'], 'Logged Out - Session Terminated', 0, now,))
+
+            mysql.connection.commit()
+            curo.close()
+            session.clear()
+            return redirect(url_for("home"))
+
+
+        @self.app.errorhandler(Exception)
+        def handle_error(error):
+            self.app.logger.error(error)
+            error_name = error.__class__.__name__
+            message = f"{error_name}: {str(error)}"
+            return render_template('error.html', message=message), 500
+
+
+if __name__=='__main__':
+    my_app = SmileCheckApp()
+    my_app.app.run(debug=True)
+    # app.run(debug=True)
+
+
+"""
+python -m flask run
+
+Vader
+VADER (Valence Aware Dictionary and Sentiment Reasoner) is a lexicon and rule-based sentiment analysis tool that is specifically designed to detect sentiments expressed in social media.
+
+It's disheartening to see so much suffering and injustice in the world. From poverty and inequality to violence and discrimination, there are so many deep-rooted problems that seem almost insurmountable. It can be hard to maintain hope and optimism when faced with so much negativity, and it's all too easy to feel powerless in the face of such overwhelming challenges. The daily news cycle can be overwhelming, with constant reports of tragedy and heartbreak, and it's easy to feel as though the world is an increasingly dangerous and hopeless place. Despite all this, however, we must continue to work towards a better future and hold onto the belief that change is possible.
+
+@app.route('/submit', methods=['POST'])
+def handle_submit():
+    if 'form1' in request.form:
+        # Handle form1 submission code here
+        return 'Form 1 submitted successfully'
+    elif 'form2' in request.form:
+        # Handle form2 submission code here
+        return 'Form 2 submitted successfully'
+    else:
+        # Handle case where neither form1 nor form2 were submitted
+        return 'Invalid form submission'
+
+
+<form method="post" action="/submit">
+  <!-- Form 1 fields here -->
+  <button type="submit" name="form1">Submit Form 1</button>
+</form>
+
+<form method="post" action="/submit">
+  <!-- Form 2 fields here -->
+  <button type="submit" name="form2">Submit Form 2</button>
+</form>
+
+
+if there are two forms in my html template i want run two different flask codes with post request from each form
+
+no within a single app route but with two different forms
+
+
+"""

static/css/style.css

@@ -0,0 +1,2827 @@
+/*============ Google fonts ============*/
+@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+
+/*======= CSS variables =======*/
+:root {
+  --white-color: #000;
+  --dark-color: #fff;
+  --body-bg-color: #fff;
+  --section-bg-color: #fff;
+  --navigation-item-hover-color: #ff9900;
+
+  --text-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
+  --box-shadow: 0 5px 25px rgb(0 0 0 / 20%);
+
+  --scroll-bar-color: #fff;
+  --scroll-thumb-color: #ff9100;
+  --scroll-thumb-hover-color: #ff6800;
+}
+
+/*======= Scroll bar =======*/
+::-webkit-scrollbar{
+  width: 11px;
+  background: var(--scroll-bar-color);
+}
+
+::-webkit-scrollbar-thumb{
+  width: 100%;
+  background: var(--scroll-thumb-color);
+  border-radius: 2em;
+}
+
+::-webkit-scrollbar-thumb:hover{
+  background: var(--scroll-thumb-hover-color);
+}
+
+/*======= Main CSS =======*/
+*{
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: 'Poppins', sans-serif;
+}
+
+body{
+  background: var(--body-bg-color);
+}
+html {
+    scroll-behavior: smooth;
+}
+section{
+  position: relative;
+}
+
+.section{
+  color: var(--white-color);
+  background: var(--section-bg-color);
+  padding: 35px 200px;
+  transition: 0.3s ease;
+}
+
+/*======= Header =======*/
+header{
+  z-index: 999;
+  position: fixed;
+  width: 100%;
+  height: calc(5rem + 1rem);
+  top: 0;
+  left: 0;
+  display: flex;
+  justify-content: center;
+  transition: 0.5s ease;
+  transition-property: height, background;
+}
+
+header.sticky{
+  height: calc(2.5rem + 1rem);
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(20px);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+header .nav-bar{
+  position: relative;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 200px;
+  transition: 0.3s ease;
+}
+
+.nav-close-btn, .nav-menu-btn{
+  display: none;
+}
+
+.nav-bar .logo{
+  color: var(--white-color);
+  font-size: 1.8em;
+  font-weight: 600;
+  letter-spacing: 2px;
+  text-transform: uppercase;
+  text-decoration: none;
+  text-shadow: var(--text-shadow);
+}
+
+.navigation .nav-items a{
+  color: var(--white-color);
+  font-size: 1em;
+  text-decoration: none;
+  text-shadow: var(--text-shadow);
+  position: relative;
+}
+
+.navigation .nav-items a i{
+  display: none;
+}
+
+.navigation .nav-items a:not(:last-child){
+  margin-right: 45px;
+}
+
+.navigation .nav-items a .svgContainer {
+  position: absolute;
+  top : -50%;
+  left: 100%;
+  width: 50px;
+  height: 50px;
+  margin: 0 auto 1em;
+  border-radius: 50%;
+  background: none;
+  border: solid 2.5px #3A5E77;
+  overflow: hidden;
+}
+
+.navigation .nav-items a .svgContainer div {
+  position: relative;
+  width: 100%;
+  height: 0;
+  overflow: hidden;
+  padding-bottom: 100%;
+}
+
+.navigation .nav-items a .svgContainer .mySVG {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
+.profile {
+  position: relative;
+}
+
+.floating-div {
+  position: absolute;
+  display: none;
+  top: 80px;
+  right: 10%;
+  padding: 10px;
+  background-color: #fff;
+  border-radius: 10px;
+  border: 1px solid #333;
+}
+
+.floating-div .svgContainer {
+  position: relative;
+  width: 100px;
+  height: 100px;
+  margin: 0 auto 1em;
+  border-radius: 50%;
+  background: none;
+  border: solid 2.5px #3A5E77;
+  overflow: hidden;
+}
+
+.floating-div .svgContainer div {
+  position: relative;
+  width: 100%;
+  height: 0;
+  overflow: hidden;
+  padding-bottom: 100%;
+}
+
+.floating-div .svgContainer .mySVG {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
+.flex-div {
+  padding: 10px;
+  margin:10px auto;
+}
+
+.flex-div a{
+    color:black;
+    line-height:400%;
+}
+
+.flex-div .svgContainer {
+  position: relative;
+  width: 100px;
+  height: 100px;
+  margin: 0 auto 1em;
+  border-radius: 50%;
+  background: none;
+  border: solid 2.5px #3A5E77;
+  overflow: hidden;
+}
+
+.flex-div .svgContainer div {
+  position: relative;
+  width: 100%;
+  height: 0;
+  overflow: hidden;
+  padding-bottom: 100%;
+}
+
+.flex-div .svgContainer .mySVG {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
+/*======= Home =======*/
+.home{
+  min-height: 100vh;
+}
+
+.home:before{
+  z-index: 888;
+  content: '';
+  position: absolute;
+  width: 100%;
+  height: 50px;
+  bottom: 0;
+  left: 0;
+  background: linear-gradient(transparent, var(--section-bg-color));
+}
+
+/*======= Background slider =======*/
+.bg-slider{
+  z-index: 777;
+  position: relative;
+  width: 100%;
+  min-height: 100vh;
+}
+
+.bg-slider .swiper-slide{
+  background-image: url('/static/index-backed.svg');
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center center;
+  position: relative;
+  width: 100%;
+  height: 100vh;
+}
+
+.bg-slider .swiper-slide img{
+  width: 100%;
+  height: 100vh;
+  object-fit: cover;
+  background-position: center;
+  background-size: cover;
+  pointer-events: none;
+}
+
+@media screen and (max-width: 700px){
+    .bg-slider .swiper-slide img {
+        width: 100%;
+        height: 50vh;
+    }
+
+}
+
+.swiper-slide .text-content{
+  position: absolute;
+  top: 25%;
+  color: var(--white-color);
+  margin: 0 200px;
+  transition: 0.3s ease;
+}
+
+.swiper-slide .text-content .title{
+  font-size: 4em;
+  font-weight: 700;
+  text-shadow: var(--text-shadow);
+  margin-bottom: 20px;
+  transform: translateY(-50px);
+  opacity: 0;
+}
+
+.swiper-slide-active .text-content .title{
+  transform: translateY(0);
+  opacity: 1;
+  transition: 1s ease;
+  transition-delay: 0.3s;
+  transition-property: transform, opacity;
+}
+
+.swiper-slide .text-content .title span{
+  font-size: 0.3em;
+  font-weight: 300;
+}
+
+.swiper-slide .text-content p{
+  max-width: 700px;
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  text-shadow: var(--text-shadow);
+  padding: 20px;
+  border-radius: 10px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  border-right: 1px solid rgba(255, 255, 255, 0.1);
+  box-shadow: var(--box-shadow);
+  transform: translateX(-80px);
+  opacity: 0;
+}
+
+.swiper-slide-active .text-content p{
+  transform: translateX(0);
+  opacity: 1;
+  transition: 1s ease;
+  transition-delay: 0.3s;
+  transition-property: transform, opacity;
+}
+
+.swiper-slide .text-content .read-btn{
+  border: none;
+  outline: none;
+  background: var(--white-color);
+  color: var(--dark-color);
+  font-size: 1em;
+  font-weight: 500;
+  padding: 8px 25px;
+  display: flex;
+  align-items: center;
+  margin-top: 40px;
+  border-radius: 10px;
+  cursor: pointer;
+  transform: translateX(50px);
+  opacity: 0;
+}
+
+.swiper-slide-active .text-content .read-btn{
+  transform: translateX(0);
+  opacity: 1;
+  transition: 1s ease;
+  transition-delay: 0.3s;
+  transition-property: transform, opacity;
+}
+
+.swiper-slide .text-content .read-btn i{
+  font-size: 1.6em;
+  transition: 0.3s ease;
+}
+
+.swiper-slide .text-content .read-btn:hover i{
+  transform: translateX(5px);
+}
+
+.dark-layer:before{
+  content: '';
+  position: absolute;
+  width: 100%;
+  height: 100vh;
+  top: 0;
+  left: 0;
+  background: rgba(0, 0, 0, 0.1);
+}
+
+.bg-slider-thumbs{
+  z-index: 777;
+  position: absolute;
+  bottom: 7em;
+  left: 50%;
+  transform: translateX(-50%);
+  transition: 0.3s ease;
+}
+
+.thumbs-container{
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  padding: 10px 3px;
+  border-radius: 10px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  border-right: 1px solid rgba(255, 255, 255, 0.1);
+  box-shadow: var(--box-shadow);
+}
+
+.thumbs-container img{
+  width: 50px;
+  height: 35px;
+  margin: 0 5px;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.swiper-slide-thumb-active{
+  border: 1px solid var(--white-color);
+}
+
+#visual {
+    width:100%;
+    height:100%;
+    animation: spin 30s linear infinite;
+}
+
+@keyframes spin {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+#visual2 {
+    width:100%;
+    height:100%;
+    animation: spin2 30s linear infinite;
+}
+
+@keyframes spin2 {
+  100% {
+    transform: rotate(-360deg);
+  }
+}
+
+/*======= Media icons =======*/
+.media-icons{
+  z-index: 999;
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  top: 50%;
+  transform: translateY(-50%);
+  margin-left: 90px;
+}
+
+.media-icons a{
+  color: var(--white-color);
+  font-size: 1.7em;
+  margin: 10px 0;
+}
+
+/*======= About section =======*/
+.about h2{
+  font-size: 3em;
+  font-weight: 600;
+}
+
+.about p{
+  margin: 25px 0;
+}
+
+/*======= Media queries (max-width: 1100px) =======*/
+@media screen and (max-width: 1100px){
+  header .nav-bar{
+    padding: 0 50px;
+  }
+
+  .section{
+    padding: 25px 50px;
+  }
+
+  .media-icons{
+    right: 0;
+    margin-right: 50px;
+  }
+
+  .swiper-slide .text-content{
+    margin: 0 120px 0 50px;
+  }
+
+  .bg-slider-thumbs{
+    bottom: 3em;
+  }
+}
+
+/*======= Media queries (max-width: 900px) =======*/
+@media screen and (max-width: 900px){
+  header .nav-bar{
+    padding: 25px 20px;
+  }
+
+  .section{
+    padding: 25px 20px;
+  }
+
+  .media-icons{
+    margin-right: 20px;
+  }
+
+  .media-icons a{
+    font-size: 1.5em;
+  }
+
+  .swiper-slide .text-content{
+    margin: 0 70px 0 20px;
+  }
+
+  .swiper-slide .text-content .title{
+    font-size: 2em;
+  }
+
+  .swiper-slide .text-content .title span{
+    font-size: 0.35em;
+  }
+
+  .swiper-slide .text-content p{
+    font-size: 0.7em;
+  }
+
+  /*======= Navigation menu =======*/
+  .nav-menu-btn{
+    display: block;
+    color: var(--white-color);
+    font-size: 1.5em;
+    cursor: pointer;
+  }
+
+  .nav-close-btn{
+    display: block;
+    color: var(--white-color);
+    position: absolute;
+    top: 0;
+    right: 0;
+    font-size: 1.3em;
+    margin: 10px;
+    cursor: pointer;
+    transition: 0.3s ease;
+  }
+
+  .navigation{
+    z-index: 99999;
+    position: fixed;
+    width: 100%;
+    height: 100vh;
+    top: 0;
+    left: 0;
+    background: rgba(0, 0, 0, 0.25);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    visibility: hidden;
+    opacity: 0;
+    transition: 0.3s ease;
+  }
+
+  .navigation.active{
+    visibility: visible;
+    opacity: 1;
+  }
+
+  .navigation .nav-items{
+    position: relative;
+    background: var(--dark-color);
+    width: 400px;
+    max-width: 400px;
+    display: grid;
+    place-content: center;
+    margin: 20px;
+    padding: 40px;
+    border-radius: 20px;
+    box-shadow: var(--box-shadow);
+    transform: translateY(-200px);
+    transition: 0.3s ease;
+  }
+
+  .navigation.active .nav-items{
+    transform: translateY(0);
+  }
+
+  .navigation .nav-items a{
+    color: var(--white-color);
+    font-size: 1em;
+    margin: 15px 50px;
+    transition: 0.3s ease;
+  }
+
+  .navigation .nav-items a:hover{
+    color: var(--navigation-item-hover-color);
+  }
+
+  .navigation .nav-items > a > i{
+    display: inline-block;
+    font-size: 1.3em;
+    margin-right: 5px;
+  }
+
+  .swiper-slide .text-content .read-btn{
+    font-size: 0.9em;
+    padding: 5px 15px;
+  }
+
+  /*======= About section =======*/
+  .about h2{
+    font-size: 2.5em;
+  }
+
+  .about p{
+    font-size: 0.9em;
+  }
+}
+
+  /*======= Features section =======*/
+#features {
+    background-image: url('/static/feature-back.svg');
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center center;
+  width:100%;
+}
+
+.flex-container {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.flex-item1,
+.flex-item4,
+.flex-item5,
+.flex-item8 {
+  border: 2px;
+  border-radius: 15px;
+  margin:20px;
+  padding: 20px;
+  text-align: justify;
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  text-shadow: var(--text-shadow);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  border-right: 1px solid rgba(255, 255, 255, 0.1);
+  box-shadow: var(--box-shadow);
+}
+
+.flex-item2,
+.flex-item3,
+.flex-item6,
+.flex-item7 {
+  margin:20px;
+  width:40%;
+  flex-basis: 50%;
+  padding: 10px;
+  text-align: center;
+}
+/*
+.flex-item-line{
+ width: 25%;
+ height: 50px;
+ position: absolute;
+ border-bottom: 3px solid grey
+}*/
+
+.numbers {
+  margin:10px auto;
+  border-radius:50%;
+  height:150px;
+  width:150px;
+  text-align:center;
+  justify-content:center;
+  padding:30px;
+  font-size:40px;
+  background: rgb(255,153,0);
+  background: linear-gradient(45deg, rgba(255,153,0,1) 0%, rgba(255,235,0,1) 100%, rgba(0,212,255,1) 100%);
+  box-shadow: var(--box-shadow);
+}
+
+.marker {
+    display:none;
+}
+
+@media screen and (max-width: 900px) {
+  .marker {
+    display: block;
+  }
+  .flex-item2,
+  .flex-item3,
+  .flex-item6,
+  .flex-item7 {
+    display: none;
+  }
+  .flex-item1,
+  .flex-item4,
+  .flex-item5,
+  .flex-item8 {
+    flex-basis: 75%;
+    font-size:0.8em;
+    width:100%;
+  }
+}
+
+
+/* ============== Footer ================ */
+.footer-flex {
+    display: flex;
+    flex-direction:row;
+    justify-content: space-around;
+    align-items: flex-end;
+    padding:20px;
+    font-weight:bold;
+}
+.logo-foot {
+    padding:20px;
+    margin:10px auto;
+}
+.copyright {
+    padding:20px;
+    margin:10px auto;
+}
+.follow {
+    padding:20px;
+    margin:10px auto;
+}
+
+.flex { /*Flexbox for containers*/
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+
+.waves {
+  position:relative;
+  width: 100%;
+  height:auto;
+  margin-bottom:-7px; /*Fix for safari gap*/
+  min-height:100px;
+  max-height:150px;
+}
+
+.content {
+  position:relative;
+  height:20vh;
+  text-align:center;
+  background-color: rgba(255, 157, 0, 1);
+}
+
+/* Animation */
+
+.parallax > use {
+  animation: move-forever 25s cubic-bezier(.55,.5,.45,.5)     infinite;
+}
+.parallax > use:nth-child(1) {
+  animation-delay: -2s;
+  animation-duration: 7s;
+}
+.parallax > use:nth-child(2) {
+  animation-delay: -3s;
+  animation-duration: 10s;
+}
+.parallax > use:nth-child(3) {
+  animation-delay: -4s;
+  animation-duration: 13s;
+}
+.parallax > use:nth-child(4) {
+  animation-delay: -5s;
+  animation-duration: 20s;
+}
+@keyframes move-forever {
+  0% {
+   transform: translate3d(-90px,0,0);
+  }
+  100% {
+    transform: translate3d(85px,0,0);
+  }
+}
+/*Shrinking for mobile*/
+@media (max-width: 768px) {
+  .waves {
+    height:40px;
+    min-height:40px;
+  }
+  .content {
+    height:30vh;
+  }
+  h1 {
+    font-size:24px;
+  }
+  .footer-flex {
+    flex-direction:column;
+  }
+  .logo-foot {
+    padding:10px;
+    margin:5px auto;
+  }
+  .copyright {
+      padding:10px;
+      margin:5px auto;
+  }
+  .follow {
+      padding:10px;
+      margin:5px auto;
+  }
+  .content {
+    height:45vh;
+  }
+}
+
+.contact-items a{
+  color: var(--white-color);
+  font-size: 1em;
+  text-decoration:none;
+  text-shadow: var(--text-shadow);
+}
+
+.loader {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: #fff;
+  margin:auto;
+  justify-content: center;
+  align-items: center;
+  transition: opacity 0.5s ease-in-out;
+  opacity: 1;
+}
+
+.loader.hide {
+  opacity: 0.15;
+}
+
+.loader3{
+	position: relative;
+	width: 150px;
+	height: 20px;
+	top: 45%;
+	top: -webkit-calc(50% - 10px);
+	top: calc(50% - 10px);
+	left: 25%;
+	left: -webkit-calc(50% - 75px);
+	left: calc(50% - 75px);
+}
+
+.loader3:after{
+	content: "LOADING ...";
+	color: #000;
+	font-weight: 200;
+	font-size: 16px;
+	position: absolute;
+	width: 100%;
+	height: 20px;
+	line-height: 20px;
+	left: 0;
+	top: 0;
+	background-color: #fff;
+	z-index: 1;
+}
+
+.loader3:before{
+	content: "";
+	position: absolute;
+	background: linear-gradient(to right, #FF416C, #FFA63E);
+	top: -5px;
+	left: 0px;
+	height: 30px;
+	width: 0px;
+	z-index: 0;
+	opacity: 1;
+	-webkit-transform-origin:  100% 0%;
+			transform-origin:  100% 0% ;
+	-webkit-animation: loader3 3s ease-in-out infinite;
+			animation: loader3 3s ease-in-out infinite;
+}
+
+@-webkit-keyframes loader3{
+    0%{width: 0px;}
+    70%{width: 100%; opacity: 1;}
+    90%{opacity: 0; width: 100%;}
+    100%{opacity: 0;width: 0px;}
+}
+
+@keyframes loader3{
+    0%{width: 0px;}
+    70%{width: 100%; opacity: 1;}
+    90%{opacity: 0; width: 100%;}
+    100%{opacity: 0;width: 0px;}
+}
+
+/*===== Admin Table ====*/
+.accordion {
+  background-color: #eee;
+  color: #444;
+  cursor: pointer;
+  padding: 10px;
+  margin:10px;
+  margin-left:30px;
+  width: 95%;
+  border: none;
+  text-align: left;
+  outline: none;
+  font-size: 20px;
+  transition: 0.4s;
+}
+
+.active, .accordion:hover {
+  background-color: #ccc;
+}
+
+.accordion:after {
+  content: '\002B';
+  color: #777;
+  font-weight: bold;
+  float: right;
+  margin-left: 5px;
+}
+
+.active:after {
+  content: "\2212";
+}
+
+.panel {
+  padding: 0 18px;
+  background-color: white;
+  max-height: 0;
+  font-size:14px;
+  overflow: hidden;
+  transition: max-height 0.2s ease-out;
+}
+
+.my-div {
+    padding: 20px;
+    margin: 0 auto;
+    max-width: 100%;
+    text-align: center;
+    font-size: 14px;
+    color: #333;
+}
+
+.flexbox {
+    display:flex;
+    flex-direction:row;
+    align-items:stretch;
+}
+
+.flexbox1 {
+    width:25%;
+    margin:20px auto;
+}
+
+.flexbox1 button {
+    background:white;
+    padding:5px;
+    width:100%;
+    align-items:left;
+    text-align:left;
+    font-weight:bold;
+    border-radius:10px;
+    border:none;
+    margin:10px;
+    cursor: pointer;
+    box-shadow: 0 5px 25px rgb(0 0 0 / 20%);
+}
+
+.flexbox2 {
+    width:80%;
+    margin:20px auto;
+}
+
+.feed {
+    text-align: center;
+    padding:5px;
+    width:80%;
+    margin:10px auto;
+    line-height:300%;
+    border-radius: 30px;
+    border:solid green;
+    background: rgba(0, 255, 21, 0.3);
+    box-shadow: 0 5px 25px rgb(0 0 0 / 20%);
+}
+
+.forminfo-admin {
+    display: flex;
+    flex-direction: column;
+    justify-content: start;
+    align-items: stretch;
+    align-content: stretch;
+    text-align: justify;
+    padding: 10px;
+    margin: 10px auto;
+    width:80%;
+    height: 85vh;
+    font-size: 15px;
+    border-radius: 20px;
+    background: #ffeab0;
+    box-shadow: 0 5px 25px rgb(0 0 0 / 20%);
+    position: -webkit-sticky;
+    position: sticky;
+    top: 80px;
+}
+
+.flex-container {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: space-around;
+  align-items: center;
+  align-content: center;
+  font-size:1em;
+  padding:30px;
+}
+
+.flex-items:nth-child(1) {
+    display: block;
+    flex-grow: 0;
+    flex-shrink: 1;
+    flex-basis: auto;
+    align-self: auto;
+    order: 0;
+    border: 2px;
+    border-radius: 10px;
+    background: linear-gradient(45deg, rgba(255,153,0,1) 0%, rgba(255,235,0,1) 100%, rgba(0,212,255,1) 100%);
+    color:black;
+    width:20%;
+    padding: 5px;
+    text-align: center;
+    box-shadow: 0 5px 25px rgb(0 0 0 / 50%);
+}
+
+.flex-items:nth-child(2) {
+    display: block;
+    flex-grow: 0;
+    flex-shrink: 1;
+    flex-basis: auto;
+    align-self: auto;
+    order: 0;
+    border: 2px;
+    border-radius: 10px;
+    background: linear-gradient(45deg, rgba(255,153,0,1) 0%, rgba(255,235,0,1) 100%, rgba(0,212,255,1) 100%);
+    color:black;
+    width:20%;
+    padding: 5px;
+    text-align: center;
+    box-shadow: 0 5px 25px rgb(0 0 0 / 50%);
+}
+
+.flex-items:nth-child(3) {
+    display: block;
+    flex-grow: 0;
+    flex-shrink: 1;
+    flex-basis: auto;
+    align-self: auto;
+    order: 0;
+    border: 2px;
+    border-radius: 10px;
+    background: linear-gradient(45deg, rgba(255,153,0,1) 0%, rgba(255,235,0,1) 100%, rgba(0,212,255,1) 100%);
+    color:black;
+    width:25%;
+    padding: 5px;
+    text-align: center;
+    box-shadow: 0 5px 25px rgb(0 0 0 / 50%);
+}
+
+.create {
+    border: none;
+    outline: none;
+    background: var(--white-color);
+    color: var(--dark-color);
+    font-size: 1.1em;
+    font-weight: 500;
+    display: flex;
+    align-items: center;
+    align-content: center;
+    margin: 10px auto;
+    padding: 10px;
+    border-radius: 10px;
+    cursor: pointer;
+    transform: scale(1);
+    transition: transform 0.3s ease-in-out;
+    text-shadow: 0 5px 25px rgba(0, 0, 0, 0.4);
+    box-shadow: 0 5px 25px rgb(0 0 0 / 50%);
+}
+
+.but1,
+.but2,
+.but3 {
+    margin:20px;
+    padding:10px;
+    width:100%;
+    text-decoration: none;
+}
+
+.but1:hover {
+    transform: scale(1.1);
+}
+.but2:hover {
+    transform: scale(1.1);
+}
+.but3:hover {
+    transform: scale(1.1);
+}
+.but4:hover {
+    transform: scale(1.1);
+}
+
+.create:hover {
+    transform: scale(1.1);
+    opacity: 1;
+}
+
+.arrow {
+    transform: scale(1.5);
+    transition: transform 0.3s ease-out;
+}
+
+.arrow:hover {
+    transform: scale(2);
+}
+
+.flexsub {
+    display:flex;
+    flex-direction:row;
+    justify-content:space-between;
+    align-items: space-between;
+    font-size:0.8em;
+    padding-left:70px;
+    padding-right:100px;
+}
+
+.navsub1 p {
+    margin:20px;
+    margin-bottom:5px;
+    top:500;
+    padding:5px;
+    text-align:center;
+    width:100%;
+    border-radius:20px;
+    border:solid;
+    border-color:#ffbb00;
+    font-weight:bold;
+    text-decoration: none;
+    opacity:0.7;
+}
+
+.sub1 {
+    margin:20px;
+    margin-bottom:5px;
+    padding:10px;
+    width:100%;
+    border-radius:20px;
+    border:none;
+    font-weight:bold;
+    text-decoration: none;
+    background:#fff9cc;
+    transform: scale(1);
+    transition: transform 0.3s ease-in-out;
+}
+
+.sub1:hover {
+    transform: scale(1.1);
+}
+
+.qres {
+    display:flex;
+    flex-direction:row;
+    padding:20px;
+    margin:10px;
+    border:solid;
+    border-color:#ffbb00;
+    border-radius: 6px;
+}
+.qflex1 {
+    flex-basis:15%;
+}
+.qflex2 {
+    flex-basis:85%;
+}
+
+.response {
+    padding:10px;
+    margin:5px;
+    border-radius:5px;
+    background:#fff9cc;
+}
+
+.progressdiv  {
+  width: 20%;
+  height: 100px;
+  border: 1px solid black;
+  border-radius: 5px;
+  background: linear-gradient(to top,#ffbb00 75%,white 50%,white 100%);
+}
+
+
+.flex-container-result {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    align-items: center;
+    font-size:0.9em;
+}
+
+.flex-item1-result {
+    border: 2px;
+    border-radius: 10px;
+    background-color: #ff9900;
+    color:black;
+    margin:10px;
+    width:30%;
+    padding: 5px;
+    text-align: justify;
+    box-shadow: 0 5px 25px rgb(0 0 0 / 50%);
+}
+
+.flex-item1-result a {
+    color:black;
+    text-decoration: none;
+}
+
+.flex-item2-result {
+    border: 2px;
+    border-radius: 15px;
+    background-color: #00db21;
+    margin: 20px;
+    padding: 20px;
+    width: 30%;
+    text-align: justify;
+    box-shadow: 0 5px 25px rgb(0 0 0 / 50%);
+}
+
+.flex-item2-result a {
+    color:black;
+    text-decoration: none;
+}
+
+@media screen and (max-width: 768px) {
+    .flex-container-result {
+        flex-direction:column;
+    }
+    .flex-item1-result,
+    .flex-item2-result {
+        width:90%;
+    }
+    .flex-container {
+        flex-direction: column;
+    }
+    .flex-items:nth-child(1),
+    .flex-items:nth-child(2),
+    .flex-items:nth-child(3) {
+        width:80%;
+    }
+
+    .flexbox {
+        flex-direction: column;
+    }
+
+    .flexbox1 {
+        width:90%;
+        margin:10px auto;
+    }
+
+    .flexbox2 {
+        width:100%;
+        margin:10px auto;
+    }
+
+    .forminfo-admin {
+        padding: 10px;
+        margin: 10px auto;
+        margin-bottom:100px;
+        width:100%;
+        height: 100%;
+        font-size: 13px;
+        border-radius: 10px;
+        position:relative;
+        top: 80px;
+    }
+}
+
+.flex-container-previous {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    background: #ffeab0;
+    box-shadow: 0 5px 25px rgb(0 0 0 / 20%);
+    margin:30px;
+    border-radius:30px;
+}
+
+ .flex-item1-previous {
+    border: 2px;
+    border-radius: 15px;
+    background-color: light-gray;
+    color:black;
+    margin:10px;
+    padding: 20px;
+    text-align: center;
+}
+
+ .flex-item2-previous {
+    border: 2px;
+    border-radius: 15px;
+    background-color: light-gray;
+    color:black;
+    margin: 0px 30px;
+    padding:30px;
+    text-align: center;
+ }
+
+.flex-item1-previous a,
+.flex-item2-previous a {
+    color:black;
+    text-decoration: none;
+}
+
+@media screen and (max-width: 768px) {
+    .flex-item1-previous .flex-item2-previous {
+        flex-basis: 75%;
+    }
+}
+
+/* Media query to adjust the div for smaller screens */
+@media screen and (max-width: 600px) {
+    .my-div {
+        max-width: 100%;
+        padding: 10px;
+        font-size: 14px;
+    }
+}
+
+/* ================== Custom Assessment Form ======================== */
+/*.form-group {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: stretch;
+    align-content: stretch;
+    margin: 20px;
+}
+
+.form-group label {
+    padding:20px;
+    width: auto;
+}
+
+.form-group textarea {
+    padding:20px;
+    width: 70%;
+    margin:30px auto;
+}*/
+.add-btn {
+    margin:20px;
+    width:50px;
+    height:50px;
+    border-radius:50%;
+    background:linear-gradient(45deg, rgba(255,153,0,1) 0%, rgba(255,235,0,1) 100%, rgba(0,212,255,1) 100%);
+    font-size:24px;
+    font-weight:bold;
+    border:none;
+    transform: scale(1);
+}
+.add-btn:hover {
+    transform: scale(1.1);
+}
+
+.sub-btn {
+    margin:20px;
+    padding:10px;
+    background:rgba(0, 255, 0, 0.6);
+    font-size:20px;
+    font-weight:bold;
+    border:none;
+    border-radius: 10px;
+    transform: scale(1);
+}
+.sub-btn:hover {
+    transform: scale(1.1);
+}
+
+.rst-btn {
+    margin:20px;
+    padding:10px;
+    border-radius:10px;
+    background:yellow;
+    font-size:20px;
+    font-weight:bold;
+    border:none;
+    transform: scale(1);
+}
+.rst-btn:hover {
+    transform: scale(1.1);
+}
+
+.rel-btn {
+    margin:20px;
+    padding:10px;
+    border-radius:10px;
+    background: #ffa200;
+    font-size:20px;
+    font-weight:bold;
+    border:none;
+    transform: scale(1);
+}
+.rel-btn:hover {
+    transform: scale(1.1);
+}
+
+.remove-button {
+    padding:10px;
+    background:rgba(255, 0, 0, 0.6);
+    border:solid red;
+    font-weight:bold;
+    border-radius:10px;
+    transform: scale(0.9);
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+}
+
+.remove-button:hover {
+    transform: scale(1);
+}
+
+#inputContainer select {
+    padding:5px;
+    margin:20px auto;
+    font-size:0.8em;
+    font-weight: 700;
+    text-indent: 5px;
+    max-width:250px;
+    background-color: #ffebb5;
+    border: solid 2px #217093;
+    border-radius: 4px;
+    width: 90%;
+    color: #353538;
+    transition: box-shadow 0.2s linear, border-color 0.25s ease-out;
+}
+
+#inputContainer option {
+    background: white;
+    text-indent: 5px;
+    spacing:20px;
+    font-size:1em;
+    font-weight: 700;
+}
+
+.form-group {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: stretch;
+    align-content: stretch;
+    text-align: justify;
+    margin: 20px auto;
+    border-radius: 30px;
+    padding:20px;
+}
+
+.form-group label {
+    padding:30px;
+    width: auto; /* adjust as needed */
+}
+
+.form-group textarea {
+    padding:10px;
+    width: 80%;
+    margin:10px auto;
+    border-radius:10px;
+}
+
+@media (max-width: 785px) {
+    .form-group {
+        margin:5px;
+        flex-wrap: wrap;
+    }
+
+    label {
+        width: 100%;
+        margin-bottom: 5px;
+    }
+
+    textarea {
+        width: 100%;
+    }
+}
+
+
+.formdiv {
+    padding: 20px;
+    margin: 10px auto;
+    max-width: 100%;
+    font-size: 18px;
+    color: #333;
+}
+
+@media (max-width: 785px) {
+    .formdiv {
+        padding: 20px;
+        margin: 0 auto;
+        font-size: 14px;
+    }
+}
+.forminfo {
+    display: flex;
+    flex-direction: column;
+    justify-content: start;
+    align-items: stretch;
+    align-content: stretch;
+    text-align: justify;
+    padding: 20px;
+    margin:20px;
+    width:30%;
+    height: 80vh;
+    font-size: 14px;
+    border-radius: 20px;
+    background: #ffeab0;
+    position: -webkit-sticky;
+    position: sticky;
+    top: 80px;
+    box-shadow: 0 5px 25px rgb(0 0 0 / 20%);
+}
+
+.forminfo input {
+    margin:20px auto;
+}
+.forminfo label {
+    padding:10px;
+    margin:10px;
+    width: auto;
+}
+.forminfo textarea {
+    padding:10px;
+    width: 70%;
+    margin:10px auto;
+    margin-top:30px;
+}
+
+.form-ques {
+    width:80%;
+}
+.form-ques label {
+    padding:10px;
+    margin:10px auto;
+    width: auto; /* adjust as needed */
+}
+
+.form-ques textarea {
+    padding:10px;
+    width: 50%;
+    margin:20px auto;
+    padding:10px;
+    border-radius:10px;
+    background: #ffebb5;
+}
+
+.container {
+    display: flex;
+    justify-content: space-around;
+    flex-direction: row;
+    padding:20px;
+    margin:20px;
+}
+
+.namearea {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: normal;
+    align-items: center;
+    align-content: stretch;
+}
+
+.labelarea {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: normal;
+    align-items: center;
+    align-content: stretch;
+}
+
+
+@media (max-width: 785px) {
+    .forminfo {
+        padding: 10px;
+        margin: 0 auto;
+        font-size: 12px;
+    }
+    .forminfo input {
+        margin:5px auto;
+    }
+    .forminfo label {
+        padding:5px;
+        margin:5px;
+        width: auto;
+    }
+    .forminfo textarea {
+        padding:5px;
+        width: 70%;
+        margin:0px auto;
+        margin-top:15px;
+    }
+    .form-ques {
+        width:90%;
+        margin:5px auto;
+    }
+
+    .forminfo {
+        padding: 10px;
+        margin: 10px auto;
+        margin-bottom:100px;
+        width:100%;
+        height: 100%;
+        font-size: 13px;
+        border-radius: 10px;
+        position:relative;
+        top: 80px;
+    }
+}
+
+.drag {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    border-radius: 10px;
+    border:solid;
+    border-color:#ffbb00;
+    cursor: move;
+    transition: transform 0.2s ease-in-out;
+    background-size: 50% auto;
+    margin:15px auto;
+    padding:5px;
+    position: relative;
+    width:100%;
+        box-shadow: 0 5px 25px rgb(0 0 0 / 10%);
+}
+.drag::before {
+  content: "";
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 30%;
+  height: 100%;
+  background-color: transparent; /* set the color of the transparent portion */
+}
+
+.drag-enter {
+    opacity: 0;
+    transform: translateY(-100%);
+    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
+}
+
+.drag-leave {
+  opacity: 1;
+  transform: scale(1) translateY(0);
+  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
+}
+
+.drag-leave.zoom-out {
+  opacity: 0;
+  transform: scale(0.8) translateY(-20px);
+}
+
+.drag:hover {
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+}
+
+.dragging {
+    opacity: 0.5;
+    transform: scale(1.05);
+}
+@media (max-width: 785px) {
+    .drag {
+        flex-direction: column;
+    }
+}
+
+
+/* ============ Verify Homepage link ======================= */
+
+.homelink {
+    border: none;
+    outline: none;
+    background: var(--white-color);
+    color: var(--dark-color);
+    font-size: 1.1em;
+    font-weight: 500;
+    padding: 8px 25px;
+    display: flex;
+    align-items: center;
+    margin-top: 40px;
+    border-radius: 10px;
+    cursor: pointer;
+    transform: scale(0.8);
+    transition: transform 0.3s ease-in-out;
+}
+
+.homelink:hover {
+    transform: scale(1);
+    opacity: 1;
+}
+
+#success {
+    display:none;
+    text-align: center;
+}
+
+#failure {
+    display:none;
+    text-align: center;
+}
+
+#success-svg{
+    width: 500px;
+    height: 400px;
+    margin: 0 auto;
+    transform: scale(0.8);
+    transition: transform 0.3s ease-in-out;
+}
+
+#success-svg:hover {
+    transform: scale(1);
+    opacity: 1;
+}
+
+svg {
+    width: 100%;
+    height: 100%;
+}
+
+#failure-svg{
+    width: 400px;
+    height: 400px;
+    margin: 0 auto;
+    transform: scale(0.8);
+    transition: transform 0.3s ease-in-out;
+}
+
+#failure-svg:hover {
+    transform: scale(1);
+    opacity: 1;
+}
+
+@media (max-width: 785px) {
+    .homelink {
+        font-size: 1em;
+    }
+}
+
+
+
+/* ================= Error Page ======================= */
+#notfound {
+    display:none;
+    text-align: center;
+    background-color: rgba(255, 0, 0, 0.7);
+    display:flex-center;
+    width:100%;
+    height:auto;
+    margin:auto;
+    max-height:500px;
+    max-width:500px;
+    margin:10px auto;
+    border-radius:50%;
+    text-align:center;
+}
+
+#server {
+    display:none;
+    margin: 10px auto;
+    padding:20px;
+    max-height:400px;
+    max-width:700px;
+    text-align:center;
+}
+
+#server p {
+    font-size: 45px;
+    text-align:center;
+}
+
+@media (max-width: 785px) {
+    #server p {
+        font-size: 24px;
+        text-align:center;
+    }
+}
+
+.checkdetail {
+    border: none;
+    outline: none;
+    background: var(--white-color);
+    color: var(--dark-color);
+    font-size: 1.1em;
+    font-weight: 500;
+    padding: 8px 25px;
+    display: flex;
+    align-items: center;
+    margin-top: 40px;
+    border-radius: 10px;
+    cursor: pointer;
+    transform: scale(0.8);
+    transition: transform 0.3s ease-in-out;
+}
+
+.checkdetail:hover {
+    transform: scale(1);
+    opacity: 1;
+}
+
+
+/* ================ Home Page ====================== */
+.body {
+    width:100%;
+    height:90vh;
+    background-image: url('/static/back-index.svg');
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center center;
+}
+
+.radio-container {
+    display: flex;
+    flex-direction: column;
+    align-items: left;
+    justify-content: left;
+    padding-left:30%;
+    padding-right:30%;
+    gap: 10px;
+}
+
+.radio-label {
+    border:solid;
+    border-color:#ff9900;
+    padding:10px;
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    border-radius:10px;
+    cursor: pointer;
+    box-shadow: 0 5px 25px rgb(0 0 0 / 20%);
+}
+
+.radio-input {
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    height: 20px;
+    width: 20px;
+    border-radius: 50%;
+    border: 2px solid #f1c40f;
+    outline: none;
+    cursor: pointer;
+}
+
+@media (max-width: 785px) {
+    .radio-container {
+        padding-left:5%;
+        padding-right:5%;
+    }
+}
+
+.radio-input:checked {
+    background-color: #f1c40f;
+}
+
+.radio-input:focus {
+    box-shadow: 0 0 0 2px #f1c40f;
+}
+
+.radio-label:hover .radio-input {
+    border-color: #f39c12;
+}
+
+.radio-label:hover .radio-input:checked {
+    background-color: #f39c12;
+}
+
+.radio-label:hover .radio-input:focus {
+    box-shadow: 0 0 0 2px #f39c12;
+}
+
+.radio-label:hover .radio-text {
+    color: #f39c12;
+}
+
+.radio-text {
+    font-size: 16px;
+    font-weight: bold;
+    color: #f1c40f;
+}
+
+
+#select-wrapper select {
+    padding:15px;
+    margin:20px auto;
+    font-size:1em;
+    font-weight: 700;
+    text-indent: 5px;
+    width:90%;
+    max-width:450px;
+    background-color: #ffebb5;
+    border: solid 2px #217093;
+    border-radius: 4px;
+    width: 90%;
+    color: #353538;
+    transition: box-shadow 0.2s linear, border-color 0.25s ease-out;
+}
+
+#select-wrapper option {
+    background: white;
+    text-indent: 5px;
+    spacing:20px;
+    font-size:1em;
+    font-weight: 700;
+}
+
+.takecheck {
+    border: none;
+    outline: none;
+    background: var(--white-color);
+    color: var(--dark-color);
+    font-size: 1.1em;
+    font-weight: 500;
+    display: flex;
+    justify-content:center;
+    align-items: center;
+    margin: 10px auto;
+    padding: 20px;
+    border-radius: 10px;
+    cursor: pointer;
+    transform: scale(1);
+    transition: transform 0.3s ease-in-out;
+}
+
+.takecheck:hover {
+    transform: scale(1.1);
+    opacity: 1;
+}
+
+.arrow {
+  display: inline-block;
+  transform: scale(1.5);
+  transition: transform 0.3s ease-out;
+}
+
+.arrow:hover {
+  transform: scale(2);
+}
+
+.check-mark {
+  color: green;
+}
+
+#selector {
+    padding:30px;
+    margin:20px auto;
+}
+
+#startContent {
+    padding:30px;
+    margin:20px auto;
+    font-size:1em;
+}
+
+#startContent p {
+    padding:30px;
+    text-align:justify;
+    text-indent:10%;
+}
+
+#select-wrapper {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    align-content: center;
+    margin: 20px;
+}
+
+@media (max-width: 800px) {
+    #select-wrapper {
+        flex-direction: column;
+        justify-content: space-between;
+    }
+    #startContent {
+        padding:20px;
+        margin:20px auto;
+        font-size:0.8em;
+    }
+    #startContent p {
+        padding:20px;
+    }
+}
+/* =====================Feedback Form ================*/
+.feedback {
+    border: 2px;
+    border-radius: 15px;
+    margin:20px;
+    padding: 20px;
+    text-align: justify;
+    background: rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(10px);
+    text-shadow: var(--text-shadow);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    border-right: 1px solid rgba(255, 255, 255, 0.1);
+    box-shadow: var(--box-shadow);
+}
+.feedback h2 {
+    font-size: 36px;
+    color: #222;
+    text-align: center;
+    margin: 50px 0;
+}
+.feedback form {
+    max-width: 600px;
+    margin: 0 auto;
+    padding: 20px;
+    background-color: #fff;
+    border-radius: 10px;
+    box-shadow: 0px 2px 10px rgba(0,0,0,0.1);
+}
+.feedback input[type=text], input[type=email], textarea {
+    width: 100%;
+    padding: 12px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    resize: vertical;
+}
+.feedback label {
+    display: block;
+    margin-bottom: 10px;
+    font-size: 18px;
+    color: #555;
+}
+.feedback button[type=submit] {
+    background-color: #ffcc00;
+    color: #fff;
+    border: none;
+    margin:10px auto;
+    border-radius: 4px;
+    padding: 12px 20px;
+    cursor: pointer;
+    font-size: 18px;
+    margin-top: 20px;
+    transition: background-color 0.2s;
+}
+.feedback button[type=submit]:hover {
+    background-color: #f5b800;
+}
+
+/* ====================== Form Page ====================  */
+.container {
+    display: flex;
+    justify-content: space-around;
+    flex-direction: row;
+    padding:20px;
+    margin:20px;
+}
+
+.forminfo-form {
+    text-align: justify;
+    padding: 10px;
+    margin: 10px auto;
+    width:40%;
+    height: 85vh;
+    font-size: 14px;
+    border-radius: 10px;
+    background: #ffeab0;
+    position: -webkit-sticky;
+    position: sticky;
+    top: 80px;
+    box-shadow: 0 5px 25px rgb(0 0 0 / 20%);
+}
+
+.forminfo-form input {
+    margin:20px auto;
+}
+.forminfo-form label {
+    padding:10px;
+    margin:10px;
+    width: auto;
+}
+.forminfo-form textarea {
+    padding:10px;
+    width: 70%;
+    margin:0px auto;
+    margin-top:30px;
+}
+
+.formquestions {
+    width:100%;
+}
+
+.assess-group {
+    text-align: justify;
+    margin: 10px;
+    border-radius: 30px;
+    padding:10px;
+    width:100%;
+}
+
+.assess-group label {
+    font-size:0.9rem;
+    padding:20px;
+    width: auto; /* adjust as needed */
+}
+
+.assess-group textarea {
+    background: #fff2cf;
+    padding:5px;
+    width: 80%;
+    height:70px;
+    margin:5px auto;
+    border-radius:6px;
+}
+
+.seperate {
+    margin:20px auto;
+    border-radius: 10px;
+    border:solid;
+    border-color:#ffbb00;
+    padding:10px;
+    display:flex;
+    flex-direction:column;
+    align-items: stretch;
+    text-indent:20px;
+    position: relative;
+    width:90%;
+    box-shadow: 0 5px 25px rgb(0 0 0 / 20%);
+}
+
+.ribbon {
+  width: 150px;
+  height: 150px;
+  position: absolute;
+  top: 0px;
+  left: 10px;
+  overflow: hidden;
+  font-weight:800;
+}
+
+.ribbon span {
+  position: absolute;
+  width: 50px;
+  height: 50px;
+  background: rgb(255,153,0);
+  background: linear-gradient(90deg, rgba(255,153,0,1) 0%, rgba(255,235,0,1) 100%, rgba(0,212,255,1) 100%);
+  top: 10px;
+  left: 0px;
+  text-align: center;
+  line-height: 50px; /* should be same as heigh */
+  text-indent:-5%;
+  color: #000;
+  border-radius:50%;
+}
+
+
+.submitassess {
+    border: none;
+    outline: none;
+    background: green;
+    color: var(--dark-color);
+    font-size: 1.1em;
+    font-weight: 500;
+    display: flex;
+    align-items: center;
+    margin: 20px auto;
+    padding: 20px;
+    border-radius: 10px;
+    cursor: pointer;
+    transform: scale(0.9);
+    transition: transform 0.3s ease-in-out;
+}
+
+.submitassess:hover {
+    transform: scale(1);
+    opacity: 0.8;
+}
+
+@media (max-width: 785px) {
+    .container {
+        flex-direction:column;
+        padding:5px;
+        margin:5px;
+    }
+
+    .assess-group {
+        margin:5px;
+        padding:5px;
+        flex-wrap: wrap;
+    }
+
+    .seperate {
+        margin:15px auto;
+        border-radius: 10px;
+        padding:10px;
+        text-indent:10px;
+        width:100%;
+    }
+
+    .seperate label {
+        width: 100%;
+        margin-bottom: 5px;
+        font-size:0.9em;
+    }
+
+    .seperate textarea {
+        width: 100%;
+    }
+
+    .forminfo-form {
+        padding: 10px;
+        margin: 10px auto;
+        margin-bottom:100px;
+        width:100%;
+        height: 100%;
+        font-size: 13px;
+        border-radius: 10px;
+        position:relative;
+        top: 80px;
+    }
+}
+
+
+/* ================== Login ================ */
+.log-container {
+  background-image: url('/static/login-back.svg');
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center center;
+  width:100%;
+}
+/*
+.log-container::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: inherit;
+  filter: blur(5px);
+  z-index: -1;
+}*/
+
+.log-form {
+  position: relative;
+  z-index: 1;
+  backdrop-filter: blur(40px);
+  width: 100%;
+  max-width: 500px;
+  margin: 0;
+  padding: 5px;
+  margin:10px auto;
+  box-sizing: border-box;
+  border: solid 1px #DDD;
+  border-radius: 0.5em;
+  font-family: "Source Sans Pro", sans-serif;
+  text-shadow: var(--text-shadow);
+  box-shadow: var(--box-shadow);
+}
+
+@media (max-width: 785px) {
+    .log-form {
+        max-width:350px;
+    }
+    .log-container {
+        background-size: contain;
+  }
+}
+
+.log-form .svgContainer {
+  position: relative;
+  width: 150px;
+  height: 150px;
+  margin: 0 auto 1em;
+  border-radius: 50%;
+  background: none;
+  border: solid 2.5px #3A5E77;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.log-form .svgContainer div {
+  position: relative;
+  width: 100%;
+  height: 0;
+  overflow: hidden;
+  padding-bottom: 100%;
+}
+
+.log-form .svgContainer .mySVG {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
+.log-form .svgContainer-pass {
+  position: relative;
+  width: 150px;
+  height: 150px;
+  margin: 0 auto 1em;
+  border-radius: 50%;
+  background: none;
+  border: solid 2.5px #3A5E77;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.log-form .svgContainer-pass div {
+  position: relative;
+  width: 100%;
+  height: 0;
+  overflow: hidden;
+  padding-bottom: 100%;
+}
+
+.log-form .svgContainer-pass .mySVG {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
+.log-form .inputGroup {
+  margin: 0 auto;
+  padding: 0;
+  position: relative;
+}
+
+.log-form .inputGroup:last-of-type {
+  margin-bottom: 0;
+}
+
+.log-form label {
+  margin: 0 0 0px;
+  font-size: 1em;
+  color: black;
+  font-weight: 500;
+  font-family: inherit;
+}
+
+.log-form input[type=email], form input[type=text], form input[type=password] {
+  display: block;
+  margin: 0 auto;
+  padding: 5px;
+  background-color: #ffebb5;
+  border: solid 2px #217093;
+  border-radius: 4px;
+  -webkit-appearance: none;
+  box-sizing: border-box;
+  width: 90%;
+  height: 30px;
+  font-size: 0.8em;
+  color: #353538;
+  font-weight: 500;
+  font-family: inherit;
+  transition: box-shadow 0.2s linear, border-color 0.25s ease-out;
+}
+
+.log-form input[type=email]:focus, form input[type=text]:focus, form input[type=password]:focus {
+  outline: none;
+  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
+  border: solid 2px #4eb8dd;
+}
+
+.log-form button {
+  cursor:pointer;
+  margin: 20px auto;
+  background-color: #ffc629;
+  border: none;
+  border-radius: 4px;
+  width: 50%;
+  height: 40px;
+  font-size: 1.55em;
+  color: #FFF;
+  font-weight: 600;
+  font-family: inherit;
+  transition: background-color 0.2s ease-out;
+  transform: scale(1);
+  transition: transform 0.3s ease-in-out;
+}
+
+.log-form button:hover {
+  transform: scale(1.1);
+  opacity:0.9;
+}
+
+.log-form select {
+  margin: 0 auto;
+  padding: 10px;
+  background-color: #ffebb5;
+  border: solid 2px #217093;
+  border-radius: 4px;
+  box-sizing: border-box;
+  width: 90%;
+  height: 40px;
+  font-size: 0.9em;
+  color: #353538;
+  font-weight: 500;
+  font-family: inherit;
+  transition: box-shadow 0.2s linear, border-color 0.25s ease-out;
+}
+
+
+
+/* ================== Register ================ */
+.reg-container {
+  background-image: url('/static/login-back.svg');
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center center;
+  width:100%;
+}
+/*
+.log-container::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: inherit;
+  filter: blur(5px);
+  z-index: -1;
+}*/
+
+.reg-form {
+  position: relative;
+  z-index: 1;
+  backdrop-filter: blur(40px);
+  width: 100%;
+  max-width: 500px;
+  margin: 0;
+  padding: 2.25em;
+  margin:20px auto;
+  box-sizing: border-box;
+  border: solid 1px #DDD;
+  border-radius: 0.5em;
+  font-family: "Source Sans Pro", sans-serif;
+}
+
+@media (max-width: 785px) {
+    .reg-form {
+        max-width:350px;
+    }
+    .reg-container {
+        background-size: contain;
+  }
+}
+
+.reg-form .svgContainer {
+  position: relative;
+  width: 150px;
+  height: 150px;
+  margin: 0 auto 1em;
+  border-radius: 50%;
+  background: none;
+  border: solid 2.5px #3A5E77;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.reg-form .svgContainer div {
+  position: relative;
+  width: 100%;
+  height: 0;
+  overflow: hidden;
+  padding-bottom: 100%;
+}
+
+.reg-form .svgContainer .mySVG {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
+.reg-form .inputGroup {
+  margin: 0 0 2em;
+  padding: 0;
+  position: relative;
+}
+
+.reg-form .inputGroup:last-of-type {
+  margin-bottom: 0;
+}
+
+.reg-form label {
+  margin: 0 0 0px;
+  font-size: 1em;
+  color: black;
+  font-weight: 500;
+  font-family: inherit;
+}
+
+.reg-form input[type=email], form input[type=text], form input[type=password] {
+  display: block;
+  margin: 0 auto;
+  padding: 5px;
+  background-color: #ffebb5;
+  border: solid 2px #217093;
+  border-radius: 4px;
+  -webkit-appearance: none;
+  box-sizing: border-box;
+  width: 90%;
+  height: 30px;
+  font-size: 1.1em;
+  color: #353538;
+  font-weight: 500;
+  font-family: inherit;
+  transition: box-shadow 0.2s linear, border-color 0.25s ease-out;
+}
+
+.reg-form input[type=email]:focus, form input[type=text]:focus, form input[type=password]:focus {
+  outline: none;
+  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
+  border: solid 2px #4eb8dd;
+}
+
+.reg-form input[type=email], form input[type=text] {
+/*  padding: 14px 1em 0px;*/
+}
+
+.reg-form button {
+  cursor:pointer;
+  margin: 0 auto;
+  padding: px;
+  background-color: #ffc629;
+  border: none;
+  border-radius: 4px;
+  width: 50%;
+  height: 40px;
+  font-size: 1.55em;
+  color: #FFF;
+  font-weight: 600;
+  font-family: inherit;
+  transition: background-color 0.2s ease-out;
+  transform: scale(1);
+  transition: transform 0.3s ease-in-out;
+}
+
+.reg-form button:hover {
+  transform: scale(1.1);
+  opacity:0.9;
+}
+
+.reg-form select {
+  margin: 0 auto;
+  padding: 10px;
+  background-color: #ffebb5;
+  border: solid 2px #217093;
+  border-radius: 4px;
+  box-sizing: border-box;
+  width: 90%;
+  height: 40px;
+  font-size: 0.9em;
+  color: #353538;
+  font-weight: 500;
+  font-family: inherit;
+  transition: box-shadow 0.2s linear, border-color 0.25s ease-out;
+}
+
+/* ================== Result Page =================== */
+.domains {
+    padding:20px;
+    margin:10px;
+    display:flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+
+.each-domain {
+    width:45%;
+    padding:20px;
+    margin:20px auto;
+    background: #FFA733;
+    background: linear-gradient(to top right, #FFA733 0%, #ffc370 100%);
+    border:none;
+    border-radius:15px;
+    box-shadow: 0 5px 25px rgb(0 0 0 / 20%);
+}
+
+.each-domain .name{
+    font-size:1.5em;
+    font-weight:bold;
+    text-align:center;
+    margin:10px;
+}
+
+.each-domain .description{
+    text-align:justify;
+    font-size:1em;
+}
+
+.each-domain .average-score{
+    background: white;
+    margin:10px auto;
+    width:90%;
+    border-radius: 15px;x
+    line-height:200%;
+    font-size:2em;
+    font-weight:900;
+    text-shadow: 0 5px 25px rgba(0, 0, 0, 0.4);
+}
+
+.each-domain .suggestions-text{
+    font-size:1em;
+    line-height: 200%;
+}
+
+@media (max-width: 785px) {
+    .domains {
+        font-size:1em;
+        padding:10px;
+        margin:5px;
+        flex-direction: column;
+        flex-wrap: wrap;
+    }
+    .each-domain {
+        width:90%;
+        padding:10px;
+        margin:10px auto;
+    }
+    .each-domain .name{
+        font-size:0.9em;
+    }
+    .each-domain .average-score{
+        font-size:1.5em;
+    }
+    .each-domain .description{
+        font-size:0.8em;
+    }
+    .each-domain .suggestions-text{
+        font-size: 0.8em;
+    }
+}
+
+.flexContainer {
+    display:flex;
+    flex-direction:row;
+    align-items:stretch;
+}
+
+.flex1 {
+    width:30%;
+    margin:20px auto;
+}
+
+.flex2 {
+    width:70%;
+    margin:20px auto;
+}
+
+.forminfo-result {
+    display: flex;
+    flex-direction: column;
+    justify-content: start;
+    align-items: stretch;
+    align-content: stretch;
+    text-align: justify;
+    padding: 10px;
+    margin: 10px auto;
+    width:80%;
+    height: 85vh;
+    font-size: 0.9em;;
+    border-radius: 20px;
+    background: #ffeab0;
+    box-shadow: 0 5px 25px rgb(0 0 0 / 20%);
+    position: -webkit-sticky;
+    position: sticky;
+    top: 80px;
+}
+
+.chart {
+    padding:10px;
+    margin:20px auto;
+    width:95%;
+    border-radius:20px;
+    box-shadow: 0 5px 25px rgb(0 0 0 / 20%);
+}
+
+.text-content1 {
+    padding:20px;
+    margin:20px auto;
+    text-indent:10%;
+}
+
+.text-content-congo {
+    text-align: center;
+    padding:5px;
+    width:80%;
+    margin:10px auto;
+    line-height:300%;
+    border-radius: 30px;
+    border:solid green;
+    background: rgba(0, 255, 21, 0.3);
+    box-shadow: 0 5px 25px rgb(0 0 0 / 20%);
+}
+
+.text-content-end {
+    border: 2px;
+    border-radius: 15px;
+    margin:20px;
+    padding: 20px;
+    text-align: center;
+    background: rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(10px);
+    text-shadow: var(--text-shadow);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    border-right: 1px solid rgba(255, 255, 255, 0.1);
+    box-shadow: var(--box-shadow);
+}
+
+.happy-score{
+    border:solid green;
+    background: rgba(0, 255, 21, 0.3);
+    margin:10px auto;
+    width:60%;
+    line-height:200%;
+    border-radius: 15px;
+    text-align:center;
+    font-size:2.5em;
+    font-weight:900;
+    text-shadow: 0 5px 25px rgba(0, 0, 0, 0.4);
+}
+
+.caption {
+    position: relative;
+    width: 100%;
+    text-align: center;
+    padding: 10px;
+    margin: 0;
+}
+
+@media (max-width: 785px) {
+    .flexContainer {
+        flex-direction: column;
+    }
+
+    .flex1 {
+        width:90%;
+        margin:10px auto;
+    }
+
+    .flex2 {
+        width:100%;
+        margin:10px auto;
+    }
+
+    .forminfo-result {
+        padding: 10px;
+        margin: 10px auto;
+        margin-bottom:100px;
+        width:100%;
+        height: 100%;
+        font-size: 13px;
+        border-radius: 10px;
+        position:relative;
+        top: 80px;
+    }
+}
+
+/* =============== Forgot Password ==============*/
+.forgot1 {
+    width:50%;
+    margin:20px auto;
+    padding:20px;
+    align-content:center;
+    border:solid;
+    border-color:#ffbb00;
+}
+
+.verify {
+    padding:10px;
+    margin:10px auto;
+    align-content:center;
+    text-align:center;
+    font-weight:bold;
+    background:lightblue;
+    border:none;
+    border-radius:10px;
+    transform: scale(1);
+    transition: transform 0.3s ease-in-out;
+}
+
+.verify:hover {
+    transform: scale(1.1);
+}
+
+
+#success-svg-pass{
+    width: 500px;
+    height: 400px;
+    margin: 0 auto;
+    transform: scale(0.8);
+    transition: transform 0.3s ease-in-out;
+}
+
+#success-svg-pass:hover {
+    transform: scale(1);
+    opacity: 1;
+}
+
+#failure-svg-pass{
+    width: 400px;
+    height: 400px;
+    margin: 0 auto;
+    transform: scale(0.8);
+    transition: transform 0.3s ease-in-out;
+}
+
+#failure-svg-pass:hover {
+    transform: scale(1);
+    opacity: 1;
+}
+
+.verify-pass {
+    width:40%;
+    padding:20px;
+    margin:20px auto;
+    align-content:center;
+    border:solid;
+    border-color:#ffbb00;
+}

static/css/swiper-bundle.min.css

@@ -0,0 +1,13 @@
+/**
+ * Swiper 7.4.1
+ * Most modern mobile touch slider and framework with hardware accelerated transitions
+ * https://swiperjs.com
+ *
+ * Copyright 2014-2021 Vladimir Kharlampidi
+ *
+ * Released under the MIT License
+ *
+ * Released on: December 24, 2021
+ */
+
+@font-face{font-family:swiper-icons;src:url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA');font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;box-sizing:content-box}.swiper-android .swiper-slide,.swiper-wrapper{transform:translate3d(0px,0,0)}.swiper-pointer-events{touch-action:pan-y}.swiper-pointer-events.swiper-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-3d,.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-cube-shadow,.swiper-3d .swiper-slide,.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top,.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-3d .swiper-slide-shadow{background:rgba(0,0,0,.15)}.swiper-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-horizontal.swiper-css-mode>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-vertical.swiper-css-mode>.swiper-wrapper{scroll-snap-type:y mandatory}.swiper-centered>.swiper-wrapper::before{content:'';flex-shrink:0;order:9999}.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}.swiper-centered.swiper-horizontal>.swiper-wrapper::before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}.swiper-centered.swiper-vertical>.swiper-wrapper::before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center}.swiper-virtual.swiper-css-mode .swiper-wrapper::after{content:'';position:absolute;left:0;top:0;pointer-events:none}.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after{height:1px;width:var(--swiper-virtual-size)}.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after{width:1px;height:var(--swiper-virtual-size)}:root{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{position:absolute;top:50%;width:calc(var(--swiper-navigation-size)/ 44 * 27);height:var(--swiper-navigation-size);margin-top:calc(0px - (var(--swiper-navigation-size)/ 2));z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--swiper-navigation-color,var(--swiper-theme-color))}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-next:after,.swiper-button-prev:after{font-family:swiper-icons;font-size:var(--swiper-navigation-size);text-transform:none!important;letter-spacing:0;text-transform:none;font-variant:initial;line-height:1}.swiper-button-prev,.swiper-rtl .swiper-button-next{left:10px;right:auto}.swiper-button-prev:after,.swiper-rtl .swiper-button-next:after{content:'prev'}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:10px;left:auto}.swiper-button-next:after,.swiper-rtl .swiper-button-prev:after{content:'next'}.swiper-button-lock{display:none}.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:10px;left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{transform:scale(.33)}.swiper-pagination-bullet{width:var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,8px));height:var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,8px));display:inline-block;border-radius:50%;background:var(--swiper-pagination-bullet-inactive-color,#000);opacity:var(--swiper-pagination-bullet-inactive-opacity, .2)}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-webkit-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet:only-child{display:none!important}.swiper-pagination-bullet-active{opacity:var(--swiper-pagination-bullet-opacity, 1);background:var(--swiper-pagination-color,var(--swiper-theme-color))}.swiper-pagination-vertical.swiper-pagination-bullets,.swiper-vertical>.swiper-pagination-bullets{right:10px;top:50%;transform:translate3d(0px,-50%,0)}.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:var(--swiper-pagination-bullet-vertical-gap,6px) 0;display:block}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s transform,.2s top}.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 var(--swiper-pagination-bullet-horizontal-gap,4px)}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left}.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}.swiper-pagination-progressbar{background:rgba(0,0,0,.25);position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color,var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}.swiper-horizontal>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-horizontal,.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:4px;left:0;top:0}.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-vertical,.swiper-vertical>.swiper-pagination-progressbar{width:4px;height:100%;left:0;top:0}.swiper-pagination-lock{display:none}.swiper-scrollbar{border-radius:10px;position:relative;-ms-touch-action:none;background:rgba(0,0,0,.1)}.swiper-horizontal>.swiper-scrollbar{position:absolute;left:1%;bottom:3px;z-index:50;height:5px;width:98%}.swiper-vertical>.swiper-scrollbar{position:absolute;right:3px;top:1%;z-index:50;width:5px;height:98%}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:rgba(0,0,0,.5);border-radius:10px;left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;object-fit:contain}.swiper-slide-zoomed{cursor:move}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;animation:swiper-preloader-spin 1s infinite linear;box-sizing:border-box;border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@keyframes swiper-preloader-spin{100%{transform:rotate(360deg)}}.swiper .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-free-mode>.swiper-wrapper{transition-timing-function:ease-out;margin:0 auto}.swiper-grid>.swiper-wrapper{flex-wrap:wrap}.swiper-grid-column>.swiper-wrapper{flex-wrap:wrap;flex-direction:column}.swiper-fade.swiper-free-mode .swiper-slide{transition-timing-function:ease-out}.swiper-fade .swiper-slide{pointer-events:none;transition-property:opacity}.swiper-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-fade .swiper-slide-active,.swiper-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-cube{overflow:visible}.swiper-cube .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1;visibility:hidden;transform-origin:0 0;width:100%;height:100%}.swiper-cube .swiper-slide .swiper-slide{pointer-events:none}.swiper-cube.swiper-rtl .swiper-slide{transform-origin:100% 0}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-next,.swiper-cube .swiper-slide-next+.swiper-slide,.swiper-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-cube .swiper-slide-shadow-bottom,.swiper-cube .swiper-slide-shadow-left,.swiper-cube .swiper-slide-shadow-right,.swiper-cube .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0px;width:100%;height:100%;opacity:.6;z-index:0}.swiper-cube .swiper-cube-shadow:before{content:'';background:#000;position:absolute;left:0;top:0;bottom:0;right:0;filter:blur(50px)}.swiper-flip{overflow:visible}.swiper-flip .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-flip .swiper-slide .swiper-slide{pointer-events:none}.swiper-flip .swiper-slide-active,.swiper-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-flip .swiper-slide-shadow-bottom,.swiper-flip .swiper-slide-shadow-left,.swiper-flip .swiper-slide-shadow-right,.swiper-flip .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-creative .swiper-slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden;transition-property:transform,opacity,height}.swiper-cards{overflow:visible}.swiper-cards .swiper-slide{transform-origin:center bottom;-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden}

static/email.html

@@ -0,0 +1,443 @@
+<html xmlns="http:www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
+
+  <head>
+    <meta charset="utf8">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="x-apple-disable-message-reformatting">
+    <!--[if gte mso 9]>
+    <xml>
+        <o:OfficeDocumentSettings>
+        <o:AllowPNG/>
+        <o:PixelsPerInch>96</o:PixelsPerInch>
+        </o:OfficeDocumentSettings>
+    </xml>
+<![endif]-->
+
+    <!--[if mso]>
+  <style type="text/css">
+    body,table tr,table td,a, span,table.MsoNormalTable{font-family:Helvetica,Arial,sans-serif !important;}
+  </style>
+  <![endif]-->
+    <style type="text/css">
+      .bg-linkedin {
+        background-color: #0077b5 !important;
+      }
+
+      .hover-bg-gray-200:hover {
+        background-color: #edf2f7 !important;
+      }
+
+      .hover-bg-gray-900:hover {
+        background-color: #1a202c !important;
+      }
+
+      .hover-bg-red-700:hover {
+        background-color: #c53030 !important;
+      }
+
+      .hover-bg-blue-700:hover {
+        background-color: #2b6cb0 !important;
+      }
+
+      .hover-bg-blue-800:hover {
+        background-color: #2c5282 !important;
+      }
+
+      .hover-bg-indigo-700:hover {
+        background-color: #4c51bf !important;
+      }
+
+      .hover-opacity-100:hover {
+        opacity: 1 !important;
+      }
+
+      .hover-text-white:hover {
+        color: #ffffff !important;
+      }
+
+      .hover-text-blue-400:hover {
+        color: #63b3ed !important;
+      }
+
+      .hover-no-underline:hover {
+        text-decoration: none !important;
+      }
+
+      @media screen {
+        img {
+          max-width: 100%;
+        }
+
+        td,
+        th {
+          box-sizing: border-box;
+        }
+
+        a[x-apple-data-detectors] {
+          color: inherit;
+          text-decoration: none;
+        }
+
+        .all-font-montserrat {
+          font-family: Montserrat, -apple-system, "Segoe UI", Helvetica, sans-serif !important;
+        }
+
+        .all-font-sans {
+          font-family: -apple-system, "Segoe UI", sans-serif !important;
+        }
+      }
+
+      @media (max-width: 600px) {
+        u~div .wrapper {
+          min-width: 100vw;
+        }
+
+        img {
+          height: auto !important;
+        }
+
+        .sm-rounded-none {
+          border-radius: 0 !important;
+        }
+
+        .sm-block {
+          display: block !important;
+        }
+
+        .sm-inline-block {
+          display: inline-block !important;
+        }
+
+        .sm-hidden {
+          display: none !important;
+        }
+
+        .sm-h-20 {
+          height: 20px !important;
+        }
+
+        .sm-h-24 {
+          height: 24px !important;
+        }
+
+        .sm-h-32 {
+          height: 32px !important;
+        }
+
+        .sm-mb-0 {
+          margin-bottom: 0 !important;
+        }
+
+        .sm-mb-16 {
+          margin-bottom: 16px !important;
+        }
+
+        .sm-opacity-100 {
+          opacity: 1 !important;
+        }
+
+        .sm-px-0 {
+          padding-left: 0 !important;
+          padding-right: 0 !important;
+        }
+
+        .sm-py-10 {
+          padding-top: 10px !important;
+          padding-bottom: 10px !important;
+        }
+
+        .sm-px-14 {
+          padding-left: 14px !important;
+          padding-right: 14px !important;
+        }
+
+        .sm-py-24 {
+          padding-top: 24px !important;
+          padding-bottom: 24px !important;
+        }
+
+        .sm-px-24 {
+          padding-left: 24px !important;
+          padding-right: 24px !important;
+        }
+
+        .sm-px-10 {
+          padding-left: 10px !important;
+          padding-right: 10px !important;
+        }
+
+        .sm-px-30 {
+          padding-left: 30px !important;
+          padding-right: 30px !important;
+        }
+
+        .sm-pt-0 {
+          padding-top: 0 !important;
+        }
+
+        .sm-pr-0 {
+          padding-right: 0 !important;
+        }
+
+        .sm-pb-0 {
+          padding-bottom: 0 !important;
+        }
+
+        .sm-pl-0 {
+          padding-left: 0 !important;
+        }
+
+        .sm-pt-4 {
+          padding-top: 4px !important;
+        }
+
+        .sm-pt-8 {
+          padding-top: 8px !important;
+        }
+
+        .sm-pb-8 {
+          padding-bottom: 8px !important;
+        }
+
+        .sm-pt-10 {
+          padding-top: 10px !important;
+        }
+
+        .sm-pb-10 {
+          padding-bottom: 10px !important;
+        }
+
+        .sm-pb-16 {
+          padding-bottom: 16px !important;
+        }
+
+        .sm-pl-10 {
+          padding-left: 10px !important;
+        }
+
+        .sm-pr-10 {
+          padding-left: 10px !important;
+        }
+
+        .sm-pl-16 {
+          padding-left: 16px !important;
+        }
+
+        .sm-pr-16 {
+          padding-left: 16px !important;
+        }
+
+        .sm-pt-20 {
+          padding-top: 20px !important;
+        }
+
+        .sm-pb-20 {
+          padding-bottom: 20px !important;
+        }
+
+        .sm-pl-20 {
+          padding-left: 20px !important;
+        }
+
+        .sm-pr-20 {
+          padding-left: 20px !important;
+        }
+
+        .sm-pt-24 {
+          padding-top: 24px !important;
+        }
+
+        .sm-pb-24 {
+          padding-bottom: 24px !important;
+        }
+
+        .sm-pb-32 {
+          padding-bottom: 32px !important;
+        }
+
+        .sm-pl-34 {
+          padding-left: 34px !important;
+        }
+
+        .sm-pl-40 {
+          padding-left: 40px !important;
+        }
+
+        .sm-pr-40 {
+          padding-right: 40px !important;
+        }
+
+        .sm-pb-40 {
+          padding-bottom: 40px !important;
+        }
+
+        .sm-text-left {
+          text-align: left !important;
+        }
+
+        .sm-text-center {
+          text-align: center !important;
+        }
+
+        .sm-w-1-2 {
+          width: 50% !important;
+        }
+
+        .sm-w-1-3 {
+          width: 33.33333% !important;
+        }
+
+        .sm-w-2-3 {
+          width: 66.66667% !important;
+        }
+
+        .sm-w-3-5 {
+          width: 60% !important;
+        }
+
+        .sm-w-full {
+          width: 100% !important;
+          max-width: 100% !important;
+        }
+      }
+    </style>
+    <title>Smile</title>
+    <style>
+      @media (max-width: 600px) {
+        img {
+          height: auto !important;
+          max-width: 100% !important;
+        }
+
+        body {
+          padding: 0;
+        }
+      }
+    </style>
+  </head>
+
+  <body style="box-sizing: border-box; margin: 0; padding: 0; width: 100%; word-break: break-word; -webkit-font-smoothing: antialiased;padding-bottom:20px; background-color: #f7f7f7" class="sm-px-10">
+
+    <table style="overflow: hidden;">
+      <tbody>
+        <tr>
+          <td style="display:none !important;visibility:hidden;mso-hide:all;font-size:1px;color:#ffffff;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">SmileCheck 😄</td>
+        </tr>
+      </tbody>
+    </table>
+
+    <table class="wrapper all-font-sans" width="100%" cellpadding="0" cellspacing="0" role="presentation" style="overflow: hidden;">
+      <tbody>
+        <tr>
+          <td align="center" width="100%">
+            <table class="sm-w-full" width="600" cellpadding="0" cellspacing="0" role="presentation" style="overflow: hidden;">
+            </table>
+            <table class="all-font-sans sm-w-full" cellspacing="0" cellpadding="0" style="overflow: hidden; margin-left: auto; margin-right: auto; width: 600px; background: rgb(255, 255, 255);" width="600" bgcolor="#ffffff">
+              <tbody>
+                <tr>
+                  <td align="center" style="padding-top: 40px; padding-bottom: 40px; padding-left: 48px; padding-right: 48px; width: 100%; border-radius: 0px" class="sm-px-24" width="100%">
+                    <table class="sm-w-full" cellspacing="0" cellpadding="0" style="overflow: hidden; width: 100%;" width="100%">
+                      <tbody>
+                        <tr>
+                          <td align="center" style="text-align: center; padding-bottom: 18px; border-radius: 0px" class="sm-px-0"><a href="#" target="_blank" rel="noopener noreferrer nofollow" style="color: -webkit-link;"><img src="https://i.postimg.cc/vTSj1jQz/smilecheck-logo.png" data-avatar="false" alt="Logo" style="width: 180px; vertical-align: middle; line-height: 100%; max-width: 100%; border: 0; outline: none;" width="180" height="46"></a></td>
+                        </tr>
+                        <tr>
+                          <td align="center" class="sm-px-0" style="border-radius: 0px"><a href target="_blank" rel="noopener noreferrer nofollow" style="color: -webkit-link;"><img src="https://letter-so.s3.us-west-1.amazonaws.com/uploads/exports/6410e03bdbcbc3164be07d14/32023/1678828931375twitter%2B%281%29%2B1.png" data-avatar="false" style="width: 16px; vertical-align: middle; line-height: 100%; max-width: 100%; border: 0; outline: none;" width="16" height="16"></a><span style="display: inline">&nbsp;&nbsp;</span><a href target="_blank" rel="noopener noreferrer nofollow" style="color: -webkit-link;"><img src="https://letter-so.s3.us-west-1.amazonaws.com/uploads/exports/6410e03bdbcbc3164be07d14/32023/1678828931375instagram%2B1.png" data-avatar="false" style="width: 16px; vertical-align: middle; line-height: 100%; max-width: 100%; border: 0; outline: none;" width="16" height="16"></a><span style="display: inline">&nbsp;&nbsp;</span><a href target="_blank" rel="noopener noreferrer nofollow" style="color: -webkit-link;"><img src="https://letter-so.s3.us-west-1.amazonaws.com/uploads/exports/6410e03bdbcbc3164be07d14/32023/1678828931375facebook%2B%281%29%2B1.png" data-avatar="false" style="width: 16px; vertical-align: middle; line-height: 100%; max-width: 100%; border: 0; outline: none;" width="16" height="16"></a></td>
+                        </tr>
+                      </tbody>
+                    </table>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+            <table class="sm-w-full all-font-sans" cellspacing="0" cellpadding="0" style="overflow: hidden; margin-left: auto; margin-right: auto; width: 600px; background: rgb(255, 255, 255);" width="600" bgcolor="#ffffff">
+              <tbody>
+                <tr>
+                  <td style="border-radius: 0px">
+                    <table cellspacing="0" cellpadding="0" style="overflow: hidden;">
+                      <tbody>
+                        <tr>
+                          <td style="padding-top: 40px; padding-bottom: 40px; padding-left: 48px; padding-right: 48px; width: 100%; border-radius: 0px" class="sm-px-24" width="100%">
+                            <table cellspacing="0" cellpadding="0" style="overflow: hidden; width: 100%;" width="100%">
+                              <tbody>
+                                <tr>
+                                  <td style="padding-bottom: 24px; border-radius: 0px" class="sm-px-0">
+                                    <h1 style="margin: 0 0 12px 0; line-height: 1.24; font-weight: bold; font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 36px; color: #222;">What's new this week?</h1>
+                                  </td>
+                                </tr>
+                                <tr>
+                                  <td style="padding-bottom: 24px; border-radius: 0px" class="sm-px-0"><a href target="_blank" rel="noopener noreferrer nofollow" style="color: -webkit-link;"><img src="https://letter-so.s3.us-west-1.amazonaws.com/uploads/exports/6410e03bdbcbc3164be07d14/32023/1678828931375%252Fprototypr%252Ftemp%252F1580579385905-1580579385905.png" data-avatar="false" alt="Photo frame" style="width: 504px; max-width: 100%; vertical-align: middle; line-height: 100%; border: 0; outline: none;" width="504" height="340"></a></td>
+                                </tr>
+                                <tr>
+                                  <td style="padding-bottom: 24px; border-radius: 0px" class="sm-px-0">
+                                    <div>
+                                      <script>
+                                        const urlParams = new URLSearchParams(window.location.search);
+                                        const name = urlParams.get('name');
+                                        const otp = urlParams.get('otp');
+                                        const userGreeting = document.getElementById('user-greeting');
+                                        userGreeting.textContent = `Hey ${name} ${otp},`;
+                                      </script>
+                                      <p id="user-greeting" style="margin: 0 0 12px 0; line-height: 1.6; margin-bottom: 24px; font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 18px; color: #222;">Hey ,</p>
+                                      <p style="margin: 0 0 12px 0; line-height: 1.6; font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 18px; color: #222;">This is Email Verification by SmileCheck. We are so excited that you are joining us in this journey. Please go to the below link to verify:</p>
+                                    </div>
+                                  </td>
+                                </tr>
+                                <tr>
+                                  <td align="center" class="sm-px-0" style="border-radius: 0px">
+                                    <table align="center" cellspacing="0" cellpadding="0" style="overflow: hidden; margin-left: auto; margin-right: auto;">
+                                      <tbody>
+                                        <tr>
+                                          <th colspan="1" rowspan="1" style="padding-left: 20px; padding-right: 20px; border-radius: 4px; background-color:#ffa200; mso-padding-alt:  12px 48px" bgcolor="#ffa200"><a style="display: inline-block; padding-top: 16px; padding-bottom: 16px; text-decoration: none; color: #333333; font-size: 16px;" href="#button" target="_blank">Check it out</a></th>
+                                        </tr>
+                                      </tbody>
+                                    </table>
+                                  </td>
+                                </tr>
+                              </tbody>
+                            </table>
+                          </td>
+                        </tr>
+                      </tbody>
+                    </table>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+            <table class="all-font-sans sm-w-full" cellspacing="0" cellpadding="0" style="overflow: hidden; margin-left: auto; margin-right: auto; width: 600px; background: rgb(255, 255, 255);" width="600" bgcolor="#ffffff">
+              <tbody>
+                <tr>
+                  <td style="padding-top: 40px; padding-bottom: 40px; padding-left: 48px; padding-right: 48px; width: 100%; border-radius: 0px" class="sm-px-24" width="100%">
+                    <table cellspacing="0" cellpadding="0" style="overflow: hidden; width: 100%;" width="100%">
+                      <tbody>
+                        <tr>
+                          <td align="center" style="text-align: center; padding-bottom: 8px; border-radius: 0px" class="sm-px-0"><a href="#" target="_blank" rel="noopener noreferrer nofollow" style="color: -webkit-link;"><img src="https://i.postimg.cc/vTSj1jQz/smilecheck-logo.png" data-avatar="false" alt="Letter" style="width: 180px; max-width: 100%; border: 0; outline: none;" width="180" height="46"></a></td>
+                        </tr>
+                        <tr>
+                          <td align="center" style="text-align: center; border-radius: 0px" class="sm-px-0">
+                            <p style="margin: 0 0 12px 0; line-height: 1.6; font-size: 12px; color: #1a1c25;"><em>49 Manish Nagar • Nagpur, India</em></p>
+                          </td>
+                        </tr>
+                        <tr>
+                          <td height="64" style="line-height: 64px; border-radius: 0px" class="sm-px-0">
+                            <p style="font-size: 16px; margin: 0 0 12px 0; line-height: 1.6; font-family: -apple-system, 'Segoe UI', sans-serif; color: #222;"></p>
+                          </td>
+                        </tr>
+                        <tr>
+                          <td align="center" style="text-align: center; border-radius: 0px" class="sm-px-0">
+                            <p style="font-size: 16px; margin: 0 0 12px 0; line-height: 1.6; font-family: -apple-system, 'Segoe UI', sans-serif; color: #222;"><a target="_blank" rel="noopener noreferrer nofollow" href="http://127.0.0.1:5000" style="font-size: 12px; text-decoration: none; color: #2d3042;"><span style="color: #787474">Unsubscribe from this list.</span></a></p>
+                          </td>
+                        </tr>
+                      </tbody>
+                    </table>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </body>
+</html>

static/js/main.js

@@ -0,0 +1,84 @@
+//Swiper slider
+var swiper = new Swiper(".bg-slider-thumbs", {
+    loop: true,
+    spaceBetween: 0,
+    slidesPerView: 0,
+});
+var swiper2 = new Swiper(".bg-slider", {
+    loop: true,
+    spaceBetween: 0,
+    thumbs: {
+        swiper: swiper,
+    },
+});
+
+//Navigation bar effects on scroll
+window.addEventListener("scroll", function(){
+	const header = document.querySelector("header");
+	header.classList.toggle("sticky", window.scrollY > 0);
+});
+
+//Responsive navigation menu toggle
+const menuBtn = document.querySelector(".nav-menu-btn");
+const closeBtn = document.querySelector(".nav-close-btn");
+const navigation = document.querySelector(".navigation");
+
+menuBtn.addEventListener("click", () => { 
+	navigation.classList.add("active"); 
+});
+
+closeBtn.addEventListener("click", () => { 
+	navigation.classList.remove("active");
+});
+
+//Transition Jump anchor links
+var jumpLink1 = document.getElementById("jump-link1");
+
+jumpLink1.addEventListener("click", function(e) {
+  e.preventDefault();
+  var target = document.querySelector(this.getAttribute("href"));
+  var targetOffset = target.offsetTop;
+  window.scrollTo({top: targetOffset, behavior: "smooth"});
+});
+
+var jumpLink2 = document.getElementById("jump-link2");
+
+jumpLink2.addEventListener("click", function(e) {
+  e.preventDefault();
+  var target = document.querySelector(this.getAttribute("href"));
+  var targetOffset = target.offsetTop;
+  window.scrollTo({top: targetOffset, behavior: "smooth"});
+});
+
+var jumpLink3 = document.getElementById("jump-link3");
+
+jumpLink3.addEventListener("click", function(e) {
+  e.preventDefault();
+  var target = document.querySelector(this.getAttribute("href"));
+  var targetOffset = target.offsetTop;
+  window.scrollTo({top: targetOffset, behavior: "smooth"});
+});
+
+var jumpLink4 = document.getElementById("jump-link4");
+
+jumpLink4.addEventListener("click", function(e) {
+  e.preventDefault();
+  var target = document.querySelector(this.getAttribute("href"));
+  var targetOffset = target.offsetTop;
+  window.scrollTo({top: targetOffset, behavior: "smooth"});
+});
+
+var inpt = document.getElementById("email-inpt");
+
+inpt.addEventListener("focus", function() {
+    document.getElementById("contain-pass").style.display = "none";
+    document.getElementById("contain-mail").style.display = "block";
+});
+
+var pass = document.getElementById("pass-inpt");
+
+pass.addEventListener("focus", function() {
+    document.getElementById("contain-pass").style.display = "block";
+    document.getElementById("contain-mail").style.display = "none";
+});
+

templates/admin.html

@@ -0,0 +1,951 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+    <meta charset="UTF-8">
+    <title>Admin Page</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="icon" type="image/x-icon" href="/static/favicon.png">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/swiper-bundle.min.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+    <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">
+    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css'>
+    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.16/css/dataTables.bootstrap4.css'>
+    <style>
+        /* The Modal (background) */
+        .modal {
+          display: none; /* Hidden by default */
+          position: fixed; /* Stay in place */
+          z-index: 999; /* Sit on top */
+          left: 0;
+          top: 0;
+          width: 100%; /* Full width */
+          height: 100%; /* Full height */
+          overflow: auto; /* Enable scroll if needed */
+          background-color: rgb(0,0,0); /* Fallback color */
+          background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+          -webkit-animation-name: fadeIn; /* Fade in the background */
+          -webkit-animation-duration: 0.4s;
+          animation-name: fadeIn;
+          animation-duration: 0.4s
+        }
+
+        /* Modal Content */
+        .modal-content {
+          position: fixed;
+          bottom: 0;
+          background-color: #fefefe;
+          width: 100%;
+          -webkit-animation-name: slideIn;
+          -webkit-animation-duration: 0.4s;
+          animation-name: slideIn;
+          animation-duration: 0.4s
+        }
+
+        /* The Close Button */
+        .close {
+          color: white;
+          float: right;
+          font-size: 28px;
+          font-weight: bold;
+        }
+
+        .close:hover,
+        .close:focus {
+          color: #000;
+          text-decoration: none;
+          cursor: pointer;
+        }
+
+        .modal-header {
+          padding: 2px 16px;
+          background-color: red;
+          color: white;
+        }
+
+        .modal-body {padding: 2px 16px;}
+
+        .modal-footer {
+          padding: 2px 16px;
+          background-color: #5cb85c;
+          color: white;
+        }
+
+        /* Add Animation */
+        @-webkit-keyframes slideIn {
+          from {bottom: -300px; opacity: 0}
+          to {bottom: 0; opacity: 1}
+        }
+
+        @keyframes slideIn {
+          from {bottom: -300px; opacity: 0}
+          to {bottom: 0; opacity: 1}
+        }
+
+        @-webkit-keyframes fadeIn {
+          from {opacity: 0}
+          to {opacity: 1}
+        }
+
+        @keyframes fadeIn {
+          from {opacity: 0}
+          to {opacity: 1}
+        }
+    </style>
+</head>
+<body>
+    <div class="loader" style="z-index:999">
+        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
+        <div class="box">
+            <div class="loader3" style="text-align: center;"></div>
+        </div>
+        <br>
+        <div style="text-align: center;">
+            <span id="variableValue">0%</span>
+        </div>
+    </div>
+    <script>
+			  var variable = 0;
+			  var intervalId = setInterval(function() {
+				  if (variable < 100) {
+					  variable++;
+					  document.getElementById("variableValue").innerHTML = "" + variable + "%";
+				  } else {
+					  clearInterval(intervalId);
+				  }
+			  }, 5);
+
+			  const loader = document.querySelector(".loader");
+			  setTimeout(() => {
+				  loader.classList.add("hide");
+				  setTimeout(() => {
+					  document.body.removeChild(loader);
+				  }, 500);
+			  }, 500);
+		</script>
+
+    <header style="display:flex">
+        <div class="nav-bar">
+            <a href="" class="logo"><img src="/static/smilelogo-transperent.png" width="260" height="85" style="padding-top: 15px;"></a>
+            <div class="navigation">
+                <div class="nav-items">
+                    <i class="uil uil-times nav-close-btn"></i>
+                    <a href="/home"><i class="uil uil-home"></i> <b>Home</b></a>
+                    {% if session['name'] %}
+                    <a href="/logout"><i class="uil uil-compass"></i> <b>Logout</b></a>
+                    {% else %}
+                    <a href="/login"><i class="uil uil-compass"></i> <b>Login</b></a>
+                    <a href="/register"><i class="uil uil-envelope"></i> <b>Register</b></a>
+                    {% endif %}
+                    <a href="#" class="profile"><div class="svgContainer">
+                        <div>
+                        <svg class="mySVG" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 200">
+                            <defs>
+                                <circle id="armMaskPath" cx="100" cy="100" r="100"></circle>
+                            </defs>
+
+                            <clipPath id="armMask">
+                                <use xlink:href="#armMaskPath" overflow="visible"></use>
+                            </clipPath>
+
+                            <circle cx="100" cy="100" r="100" fill="#ffce47"></circle>
+
+                            <g class="body">
+                                <path fill="#FFFFFF" d="M193.3,135.9c-5.8-8.4-15.5-13.9-26.5-13.9H151V72c0-27.6-22.4-50-50-50S51,44.4,51,72v50H32.1 c-10.6,0-20,5.1-25.8,13l0,78h187L193.3,135.9z"></path>
+                                <path fill="none" stroke="#3A5E77" stroke-width="2.5" stroke-linecap="round" stroke-linejoinn="round" d="M193.3,135.9 c-5.8-8.4-15.5-13.9-26.5-13.9H151V72c0-27.6-22.4-50-50-50S51,44.4,51,72v50H32.1c-10.6,0-20,5.1-25.8,13"></path>
+                                <path fill="#DDF1FA" d="M100,156.4c-22.9,0-43,11.1-54.1,27.7c15.6,10,34.2,15.9,54.1,15.9s38.5-5.8,54.1-15.9 C143,167.5,122.9,156.4,100,156.4z"></path>
+                            </g>
+
+                            <g class="earL">
+                                <g class="outerEar" fill="#ddf1fa" stroke="#3a5e77" stroke-width="2.5" data-svg-origin="35.5 71.5" transform="matrix(1,0,0,1,0,0)">
+                                    <circle cx="47" cy="83" r="11.5"></circle>
+                                    <path d="M46.3 78.9c-2.3 0-4.1 1.9-4.1 4.1 0 2.3 1.9 4.1 4.1 4.1" stroke-linecap="round" stroke-linejoin="round"></path>
+                                </g>
+
+                                <g class="earHair" data-svg-origin="42.79999923706055 62.79999923706055" transform="matrix(1,0,0,1,0,0)">
+                                    <rect x="51" y="64" fill="#FFFFFF" width="15" height="35"></rect>
+                                    <path d="M53.4 62.8C48.5 67.4 45 72.2 42.8 77c3.4-.1 6.8-.1 10.1.1-4 3.7-6.8 7.6-8.2 11.6 2.1 0 4.2 0 6.3.2-2.6 4.1-3.8 8.3-3.7 12.5 1.2-.7 3.4-1.4 5.2-1.9" fill="#fff" stroke="#3a5e77" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path>
+                                </g>
+                            </g>
+
+                            <g class="earR">
+                                <g class="outerEar" fill="#ddf1fa" stroke="#3a5e77" stroke-width="2.5" data-svg-origin="143.5 71.5" transform="matrix(1,0,0,1,0,0)">
+                                    <circle cx="155" cy="83" r="11.5"></circle>
+                                    <path d="M155.7 78.9c2.3 0 4.1 1.9 4.1 4.1 0 2.3-1.9 4.1-4.1 4.1" stroke-linecap="round" stroke-linejoin="round"></path>
+                                </g>
+                                <g class="earHair" data-svg-origin="131 62.79999923706055" transform="matrix(1,0,0,1,0,0)">
+                                    <rect x="131" y="64" fill="#FFFFFF" width="20" height="35"></rect>
+                                    <path d="M148.6 62.8c4.9 4.6 8.4 9.4 10.6 14.2-3.4-.1-6.8-.1-10.1.1 4 3.7 6.8 7.6 8.2 11.6-2.1 0-4.2 0-6.3.2 2.6 4.1 3.8 8.3 3.7 12.5-1.2-.7-3.4-1.4-5.2-1.9" fill="#fff" stroke="#3a5e77" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path>
+                                </g>
+                            </g>
+                            <path class="chin" d="M84.1 121.6c2.7 2.9 6.1 5.4 9.8 7.5l.9-4.5c2.9 2.5 6.3 4.8 10.2 6.5 0-1.9-.1-3.9-.2-5.8 3 1.2 6.2 2 9.7 2.5-.3-2.1-.7-4.1-1.2-6.1" fill="none" stroke="#3a5e77" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" data-svg-origin="84.0999984741211 121.5999984741211" transform="matrix(1,0,0,1,0,0)"></path>
+                            <path class="face" fill="#DDF1FA" d="M134.5,46v35.5c0,21.815-15.446,39.5-34.5,39.5s-34.5-17.685-34.5-39.5V46" data-svg-origin="100 46" transform="matrix(1,0,0,1,0,0)" style="transform-origin: 0px 0px 0px;"></path>
+                            <path class="hair" fill="#FFFFFF" stroke="#3A5E77" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" d="M81.457,27.929 c1.755-4.084,5.51-8.262,11.253-11.77c0.979,2.565,1.883,5.14,2.712,7.723c3.162-4.265,8.626-8.27,16.272-11.235 c-0.737,3.293-1.588,6.573-2.554,9.837c4.857-2.116,11.049-3.64,18.428-4.156c-2.403,3.23-5.021,6.391-7.852,9.474" data-svg-origin="104.51250076293945 27.929000854492188" transform="matrix(1,0,0,1,0,0)" style="transform-origin: 0px 0px 0px;"></path>
+
+                            <g class="eyebrow" data-svg-origin="100.85150527954102 43.33300018310547" transform="matrix(1,0,0,1,0,0)" style="transform-origin: 0px 0px 0px;">
+                                <path fill="#FFFFFF" d="M138.142,55.064c-4.93,1.259-9.874,2.118-14.787,2.599c-0.336,3.341-0.776,6.689-1.322,10.037 c-4.569-1.465-8.909-3.222-12.996-5.226c-0.98,3.075-2.07,6.137-3.267,9.179c-5.514-3.067-10.559-6.545-15.097-10.329 c-1.806,2.889-3.745,5.73-5.816,8.515c-7.916-4.124-15.053-9.114-21.296-14.738l1.107-11.768h73.475V55.064z"></path>
+                                <path fill="#FFFFFF" stroke="#3A5E77" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" d="M63.56,55.102 c6.243,5.624,13.38,10.614,21.296,14.738c2.071-2.785,4.01-5.626,5.816-8.515c4.537,3.785,9.583,7.263,15.097,10.329 c1.197-3.043,2.287-6.104,3.267-9.179c4.087,2.004,8.427,3.761,12.996,5.226c0.545-3.348,0.986-6.696,1.322-10.037 c4.913-0.481,9.857-1.34,14.787-2.599"></path>
+                            </g>
+
+                            <g class="eyeL" data-svg-origin="82 75" transform="matrix(1,0,0,1,0,0)">
+                                <circle cx="85.5" cy="78.5" r="3.5" fill="#3a5e77"></circle>
+                                <circle cx="84" cy="76" r="1" fill="#fff"></circle>
+                            </g>
+
+                            <g class="eyeR" data-svg-origin="111 75" transform="matrix(1,0,0,1,0,0)">
+                                <circle cx="114.5" cy="78.5" r="3.5" fill="#3a5e77"></circle>
+                                <circle cx="113" cy="76" r="1" fill="#fff"></circle>
+                            </g>
+
+                            <g class="mouth" data-svg-origin="100.2220687866211 104" transform="matrix(1,0,0,1,0,0)" style="transform-origin: 0px 0px 0px;">
+                                <path class="mouthBG" fill="#617E92" d="M100.2,101c-0.4,0-1.4,0-1.8,0c-2.7-0.3-5.3-1.1-8-2.5c-0.7-0.3-0.9-1.2-0.6-1.8 c0.2-0.5,0.7-0.7,1.2-0.7c0.2,0,0.5,0.1,0.6,0.2c3,1.5,5.8,2.3,8.6,2.3s5.7-0.7,8.6-2.3c0.2-0.1,0.4-0.2,0.6-0.2 c0.5,0,1,0.3,1.2,0.7c0.4,0.7,0.1,1.5-0.6,1.9c-2.6,1.4-5.3,2.2-7.9,2.5C101.7,101,100.5,101,100.2,101z"></path>
+                                <path style="display: none;" class="mouthSmallBG" fill="#617E92" d="M100.2,101c-0.4,0-1.4,0-1.8,0c-2.7-0.3-5.3-1.1-8-2.5c-0.7-0.3-0.9-1.2-0.6-1.8 c0.2-0.5,0.7-0.7,1.2-0.7c0.2,0,0.5,0.1,0.6,0.2c3,1.5,5.8,2.3,8.6,2.3s5.7-0.7,8.6-2.3c0.2-0.1,0.4-0.2,0.6-0.2 c0.5,0,1,0.3,1.2,0.7c0.4,0.7,0.1,1.5-0.6,1.9c-2.6,1.4-5.3,2.2-7.9,2.5C101.7,101,100.5,101,100.2,101z"></path>
+                                <path style="display: none;" class="mouthMediumBG" d="M95,104.2c-4.5,0-8.2-3.7-8.2-8.2v-2c0-1.2,1-2.2,2.2-2.2h22c1.2,0,2.2,1,2.2,2.2v2 c0,4.5-3.7,8.2-8.2,8.2H95z"></path>
+                                <path style="display: none;" class="mouthLargeBG" d="M100 110.2c-9 0-16.2-7.3-16.2-16.2 0-2.3 1.9-4.2 4.2-4.2h24c2.3 0 4.2 1.9 4.2 4.2 0 9-7.2 16.2-16.2 16.2z" fill="#617e92" stroke="#3a5e77" stroke-linejoin="round" stroke-width="2.5"></path>
+
+                                <defs>
+                                    <path id="mouthMaskPath" d="M100.2,101c-0.4,0-1.4,0-1.8,0c-2.7-0.3-5.3-1.1-8-2.5c-0.7-0.3-0.9-1.2-0.6-1.8 c0.2-0.5,0.7-0.7,1.2-0.7c0.2,0,0.5,0.1,0.6,0.2c3,1.5,5.8,2.3,8.6,2.3s5.7-0.7,8.6-2.3c0.2-0.1,0.4-0.2,0.6-0.2 c0.5,0,1,0.3,1.2,0.7c0.4,0.7,0.1,1.5-0.6,1.9c-2.6,1.4-5.3,2.2-7.9,2.5C101.7,101,100.5,101,100.2,101z"></path>
+                                </defs>
+
+                                <clipPath id="mouthMask">
+                                    <use xlink:href="#mouthMaskPath" overflow="visible"></use>
+                                </clipPath>
+
+                                <g clip-path="url(#mouthMask)">
+                                    <g class="tongue">
+                                        <circle cx="100" cy="107" r="8" fill="#cc4a6c"></circle>
+                                        <ellipse class="tongueHighlight" cx="100" cy="100.5" rx="3" ry="1.5" opacity=".1" fill="#fff"></ellipse>
+                                    </g>
+                                </g>
+
+                                <path clip-path="url(#mouthMask)" class="tooth" style="fill:#FFFFFF;" d="M106,97h-4c-1.1,0-2-0.9-2-2v-2h8v2C108,96.1,107.1,97,106,97z"></path>
+                                <path class="mouthOutline" fill="none" stroke="#3A5E77" stroke-width="2.5" stroke-linejoin="round" d="M100.2,101c-0.4,0-1.4,0-1.8,0c-2.7-0.3-5.3-1.1-8-2.5c-0.7-0.3-0.9-1.2-0.6-1.8 c0.2-0.5,0.7-0.7,1.2-0.7c0.2,0,0.5,0.1,0.6,0.2c3,1.5,5.8,2.3,8.6,2.3s5.7-0.7,8.6-2.3c0.2-0.1,0.4-0.2,0.6-0.2 c0.5,0,1,0.3,1.2,0.7c0.4,0.7,0.1,1.5-0.6,1.9c-2.6,1.4-5.3,2.2-7.9,2.5C101.7,101,100.5,101,100.2,101z"></path>
+                            </g>
+
+                            <path class="nose" d="M97.7 79.9h4.7c1.9 0 3 2.2 1.9 3.7l-2.3 3.3c-.9 1.3-2.9 1.3-3.8 0l-2.3-3.3c-1.3-1.6-.2-3.7 1.8-3.7z" fill="#3a5e77" data-svg-origin="100.0374870300293 83.88750076293945" transform="matrix(0.99801,0.06294,-0.06294,0.99801,5.478269809651323,-6.130086597558147)" style="transform-origin: 0px 0px 0px;"></path>
+
+                            <g class="arms" clip-path="url(#armMask)">
+                                <g class="armL" data-svg-origin="1.2000000476837158 46.20000076293945" transform="matrix(-0.25881,0.96592,-0.96592,-0.25881,-46.863643174353925,276.9983298065334)" style="transform-origin: 0px 0px 0px;">
+                                    <path fill="#ddf1fa" stroke="#3a5e77" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2.5" d="M121.3 97.4L111 58.7l38.8-10.4 20 36.1z"></path>
+                                    <path fill="#ddf1fa" stroke="#3a5e77" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2.5" d="M134.4 52.5l19.3-5.2c2.7-.7 5.4.9 6.1 3.5.7 2.7-.9 5.4-3.5 6.1L146 59.7M160.8 76.5l19.4-5.2c2.7-.7 5.4.9 6.1 3.5.7 2.7-.9 5.4-3.5 6.1l-18.3 4.9M158.3 66.8l23.1-6.2c2.7-.7 5.4.9 6.1 3.5.7 2.7-.9 5.4-3.5 6.1l-23.1 6.2M150.9 58.4l26-7c2.7-.7 5.4.9 6.1 3.5.7 2.7-.9 5.4-3.5 6.1l-21.3 5.7"></path>
+                                    <path fill="#a9ddf3" d="M178.8 74.7l2.2-.6c1.1-.3 2.2.3 2.4 1.4.3 1.1-.3 2.2-1.4 2.4l-2.2.6-1-3.8zM180.1 64l2.2-.6c1.1-.3 2.2.3 2.4 1.4.3 1.1-.3 2.2-1.4 2.4l-2.2.6-1-3.8zM175.5 54.9l2.2-.6c1.1-.3 2.2.3 2.4 1.4.3 1.1-.3 2.2-1.4 2.4l-2.2.6-1-3.8zM152.1 49.4l2.2-.6c1.1-.3 2.2.3 2.4 1.4.3 1.1-.3 2.2-1.4 2.4l-2.2.6-1-3.8z"></path>
+                                    <path fill="#fff" stroke="#3a5e77" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M123.5 96.8c-41.4 14.9-84.1 30.7-108.2 35.5L1.2 80c33.5-9.9 71.9-16.5 111.9-21.8"></path>
+                                    <path fill="#fff" stroke="#3a5e77" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M108.5 59.4c7.7-5.3 14.3-8.4 22.8-13.2-2.4 5.3-4.7 10.3-6.7 15.1 4.3.3 8.4.7 12.3 1.3-4.2 5-8.1 9.6-11.5 13.9 3.1 1.1 6 2.4 8.7 3.8-1.4 2.9-2.7 5.8-3.9 8.5 2.5 3.5 4.6 7.2 6.3 11-4.9-.8-9-.7-16.2-2.7M94.5 102.8c-.6 4-3.8 8.9-9.4 14.7-2.6-1.8-5-3.7-7.2-5.7-2.5 4.1-6.6 8.8-12.2 14-1.9-2.2-3.4-4.5-4.5-6.9-4.4 3.3-9.5 6.9-15.4 10.8-.2-3.4.1-7.1 1.1-10.9M97.5 62.9c-1.7-2.4-5.9-4.1-12.4-5.2-.9 2.2-1.8 4.3-2.5 6.5-3.8-1.8-9.4-3.1-17-3.8.5 2.3 1.2 4.5 1.9 6.8-5-.6-11.2-.9-18.4-1 2 2.9.9 3.5 3.9 6.2"></path>
+                                </g>
+
+                                <g class="armR" data-svg-origin="385.5 47.03531265258789" transform="matrix(-0.25881,-0.96592,0.96592,-0.25881,346.84211864830615,651.5733533938651)" style="transform-origin: 0px 0px 0px;">
+                                    <path fill="#ddf1fa" stroke="#3a5e77" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2.5" d="M265.4 97.3l10.4-38.6-38.9-10.5-20 36.1z"></path>
+                                    <path fill="#ddf1fa" stroke="#3a5e77" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2.5" d="M252.4 52.4L233 47.2c-2.7-.7-5.4.9-6.1 3.5-.7 2.7.9 5.4 3.5 6.1l10.3 2.8M226 76.4l-19.4-5.2c-2.7-.7-5.4.9-6.1 3.5-.7 2.7.9 5.4 3.5 6.1l18.3 4.9M228.4 66.7l-23.1-6.2c-2.7-.7-5.4.9-6.1 3.5-.7 2.7.9 5.4 3.5 6.1l23.1 6.2M235.8 58.3l-26-7c-2.7-.7-5.4.9-6.1 3.5-.7 2.7.9 5.4 3.5 6.1l21.3 5.7"></path>
+                                    <path fill="#a9ddf3" d="M207.9 74.7l-2.2-.6c-1.1-.3-2.2.3-2.4 1.4-.3 1.1.3 2.2 1.4 2.4l2.2.6 1-3.8zM206.7 64l-2.2-.6c-1.1-.3-2.2.3-2.4 1.4-.3 1.1.3 2.2 1.4 2.4l2.2.6 1-3.8zM211.2 54.8l-2.2-.6c-1.1-.3-2.2.3-2.4 1.4-.3 1.1.3 2.2 1.4 2.4l2.2.6 1-3.8zM234.6 49.4l-2.2-.6c-1.1-.3-2.2.3-2.4 1.4-.3 1.1.3 2.2 1.4 2.4l2.2.6 1-3.8z"></path>
+                                    <path fill="#fff" stroke="#3a5e77" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M263.3 96.7c41.4 14.9 84.1 30.7 108.2 35.5l14-52.3C352 70 313.6 63.5 273.6 58.1"></path>
+                                    <path fill="#fff" stroke="#3a5e77" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M278.2 59.3l-18.6-10 2.5 11.9-10.7 6.5 9.9 8.7-13.9 6.4 9.1 5.9-13.2 9.2 23.1-.9M284.5 100.1c-.4 4 1.8 8.9 6.7 14.8 3.5-1.8 6.7-3.6 9.7-5.5 1.8 4.2 5.1 8.9 10.1 14.1 2.7-2.1 5.1-4.4 7.1-6.8 4.1 3.4 9 7 14.7 11 1.2-3.4 1.8-7 1.7-10.9M314 66.7s5.4-5.7 12.6-7.4c1.7 2.9 3.3 5.7 4.9 8.6 3.8-2.5 9.8-4.4 18.2-5.7.1 3.1.1 6.1 0 9.2 5.5-1 12.5-1.6 20.8-1.9-1.4 3.9-2.5 8.4-2.5 8.4"></path>
+                                </g>
+                            </g>
+                        </svg>
+                        </div>
+                    </div></a>
+                        <div class="floating-div" style="display:none;">
+                            <div class="svgContainer">
+                        <div>
+                        <svg class="mySVG" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 200">
+                            <defs>
+                                <circle id="armMaskPath" cx="100" cy="100" r="100"></circle>
+                            </defs>
+
+                            <clipPath id="armMask">
+                                <use xlink:href="#armMaskPath" overflow="visible"></use>
+                            </clipPath>
+
+                            <circle cx="100" cy="100" r="100" fill="#ffce47"></circle>
+
+                            <g class="body">
+                                <path fill="#FFFFFF" d="M193.3,135.9c-5.8-8.4-15.5-13.9-26.5-13.9H151V72c0-27.6-22.4-50-50-50S51,44.4,51,72v50H32.1 c-10.6,0-20,5.1-25.8,13l0,78h187L193.3,135.9z"></path>
+                                <path fill="none" stroke="#3A5E77" stroke-width="2.5" stroke-linecap="round" stroke-linejoinn="round" d="M193.3,135.9 c-5.8-8.4-15.5-13.9-26.5-13.9H151V72c0-27.6-22.4-50-50-50S51,44.4,51,72v50H32.1c-10.6,0-20,5.1-25.8,13"></path>
+                                <path fill="#DDF1FA" d="M100,156.4c-22.9,0-43,11.1-54.1,27.7c15.6,10,34.2,15.9,54.1,15.9s38.5-5.8,54.1-15.9 C143,167.5,122.9,156.4,100,156.4z"></path>
+                            </g>
+
+                            <g class="earL">
+                                <g class="outerEar" fill="#ddf1fa" stroke="#3a5e77" stroke-width="2.5" data-svg-origin="35.5 71.5" transform="matrix(1,0,0,1,0,0)">
+                                    <circle cx="47" cy="83" r="11.5"></circle>
+                                    <path d="M46.3 78.9c-2.3 0-4.1 1.9-4.1 4.1 0 2.3 1.9 4.1 4.1 4.1" stroke-linecap="round" stroke-linejoin="round"></path>
+                                </g>
+
+                                <g class="earHair" data-svg-origin="42.79999923706055 62.79999923706055" transform="matrix(1,0,0,1,0,0)">
+                                    <rect x="51" y="64" fill="#FFFFFF" width="15" height="35"></rect>
+                                    <path d="M53.4 62.8C48.5 67.4 45 72.2 42.8 77c3.4-.1 6.8-.1 10.1.1-4 3.7-6.8 7.6-8.2 11.6 2.1 0 4.2 0 6.3.2-2.6 4.1-3.8 8.3-3.7 12.5 1.2-.7 3.4-1.4 5.2-1.9" fill="#fff" stroke="#3a5e77" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path>
+                                </g>
+                            </g>
+
+                            <g class="earR">
+                                <g class="outerEar" fill="#ddf1fa" stroke="#3a5e77" stroke-width="2.5" data-svg-origin="143.5 71.5" transform="matrix(1,0,0,1,0,0)">
+                                    <circle cx="155" cy="83" r="11.5"></circle>
+                                    <path d="M155.7 78.9c2.3 0 4.1 1.9 4.1 4.1 0 2.3-1.9 4.1-4.1 4.1" stroke-linecap="round" stroke-linejoin="round"></path>
+                                </g>
+                                <g class="earHair" data-svg-origin="131 62.79999923706055" transform="matrix(1,0,0,1,0,0)">
+                                    <rect x="131" y="64" fill="#FFFFFF" width="20" height="35"></rect>
+                                    <path d="M148.6 62.8c4.9 4.6 8.4 9.4 10.6 14.2-3.4-.1-6.8-.1-10.1.1 4 3.7 6.8 7.6 8.2 11.6-2.1 0-4.2 0-6.3.2 2.6 4.1 3.8 8.3 3.7 12.5-1.2-.7-3.4-1.4-5.2-1.9" fill="#fff" stroke="#3a5e77" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path>
+                                </g>
+                            </g>
+                            <path class="chin" d="M84.1 121.6c2.7 2.9 6.1 5.4 9.8 7.5l.9-4.5c2.9 2.5 6.3 4.8 10.2 6.5 0-1.9-.1-3.9-.2-5.8 3 1.2 6.2 2 9.7 2.5-.3-2.1-.7-4.1-1.2-6.1" fill="none" stroke="#3a5e77" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" data-svg-origin="84.0999984741211 121.5999984741211" transform="matrix(1,0,0,1,0,0)"></path>
+                            <path class="face" fill="#DDF1FA" d="M134.5,46v35.5c0,21.815-15.446,39.5-34.5,39.5s-34.5-17.685-34.5-39.5V46" data-svg-origin="100 46" transform="matrix(1,0,0,1,0,0)" style="transform-origin: 0px 0px 0px;"></path>
+                            <path class="hair" fill="#FFFFFF" stroke="#3A5E77" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" d="M81.457,27.929 c1.755-4.084,5.51-8.262,11.253-11.77c0.979,2.565,1.883,5.14,2.712,7.723c3.162-4.265,8.626-8.27,16.272-11.235 c-0.737,3.293-1.588,6.573-2.554,9.837c4.857-2.116,11.049-3.64,18.428-4.156c-2.403,3.23-5.021,6.391-7.852,9.474" data-svg-origin="104.51250076293945 27.929000854492188" transform="matrix(1,0,0,1,0,0)" style="transform-origin: 0px 0px 0px;"></path>
+
+                            <g class="eyebrow" data-svg-origin="100.85150527954102 43.33300018310547" transform="matrix(1,0,0,1,0,0)" style="transform-origin: 0px 0px 0px;">
+                                <path fill="#FFFFFF" d="M138.142,55.064c-4.93,1.259-9.874,2.118-14.787,2.599c-0.336,3.341-0.776,6.689-1.322,10.037 c-4.569-1.465-8.909-3.222-12.996-5.226c-0.98,3.075-2.07,6.137-3.267,9.179c-5.514-3.067-10.559-6.545-15.097-10.329 c-1.806,2.889-3.745,5.73-5.816,8.515c-7.916-4.124-15.053-9.114-21.296-14.738l1.107-11.768h73.475V55.064z"></path>
+                                <path fill="#FFFFFF" stroke="#3A5E77" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" d="M63.56,55.102 c6.243,5.624,13.38,10.614,21.296,14.738c2.071-2.785,4.01-5.626,5.816-8.515c4.537,3.785,9.583,7.263,15.097,10.329 c1.197-3.043,2.287-6.104,3.267-9.179c4.087,2.004,8.427,3.761,12.996,5.226c0.545-3.348,0.986-6.696,1.322-10.037 c4.913-0.481,9.857-1.34,14.787-2.599"></path>
+                            </g>
+
+                            <g class="eyeL" data-svg-origin="82 75" transform="matrix(1,0,0,1,0,0)">
+                                <circle cx="85.5" cy="78.5" r="3.5" fill="#3a5e77"></circle>
+                                <circle cx="84" cy="76" r="1" fill="#fff"></circle>
+                            </g>
+
+                            <g class="eyeR" data-svg-origin="111 75" transform="matrix(1,0,0,1,0,0)">
+                                <circle cx="114.5" cy="78.5" r="3.5" fill="#3a5e77"></circle>
+                                <circle cx="113" cy="76" r="1" fill="#fff"></circle>
+                            </g>
+
+                            <g class="mouth" data-svg-origin="100.2220687866211 104" transform="matrix(1,0,0,1,0,0)" style="transform-origin: 0px 0px 0px;">
+                                <path class="mouthBG" fill="#617E92" d="M100.2,101c-0.4,0-1.4,0-1.8,0c-2.7-0.3-5.3-1.1-8-2.5c-0.7-0.3-0.9-1.2-0.6-1.8 c0.2-0.5,0.7-0.7,1.2-0.7c0.2,0,0.5,0.1,0.6,0.2c3,1.5,5.8,2.3,8.6,2.3s5.7-0.7,8.6-2.3c0.2-0.1,0.4-0.2,0.6-0.2 c0.5,0,1,0.3,1.2,0.7c0.4,0.7,0.1,1.5-0.6,1.9c-2.6,1.4-5.3,2.2-7.9,2.5C101.7,101,100.5,101,100.2,101z"></path>
+                                <path style="display: none;" class="mouthSmallBG" fill="#617E92" d="M100.2,101c-0.4,0-1.4,0-1.8,0c-2.7-0.3-5.3-1.1-8-2.5c-0.7-0.3-0.9-1.2-0.6-1.8 c0.2-0.5,0.7-0.7,1.2-0.7c0.2,0,0.5,0.1,0.6,0.2c3,1.5,5.8,2.3,8.6,2.3s5.7-0.7,8.6-2.3c0.2-0.1,0.4-0.2,0.6-0.2 c0.5,0,1,0.3,1.2,0.7c0.4,0.7,0.1,1.5-0.6,1.9c-2.6,1.4-5.3,2.2-7.9,2.5C101.7,101,100.5,101,100.2,101z"></path>
+                                <path style="display: none;" class="mouthMediumBG" d="M95,104.2c-4.5,0-8.2-3.7-8.2-8.2v-2c0-1.2,1-2.2,2.2-2.2h22c1.2,0,2.2,1,2.2,2.2v2 c0,4.5-3.7,8.2-8.2,8.2H95z"></path>
+                                <path style="display: none;" class="mouthLargeBG" d="M100 110.2c-9 0-16.2-7.3-16.2-16.2 0-2.3 1.9-4.2 4.2-4.2h24c2.3 0 4.2 1.9 4.2 4.2 0 9-7.2 16.2-16.2 16.2z" fill="#617e92" stroke="#3a5e77" stroke-linejoin="round" stroke-width="2.5"></path>
+
+                                <defs>
+                                    <path id="mouthMaskPath" d="M100.2,101c-0.4,0-1.4,0-1.8,0c-2.7-0.3-5.3-1.1-8-2.5c-0.7-0.3-0.9-1.2-0.6-1.8 c0.2-0.5,0.7-0.7,1.2-0.7c0.2,0,0.5,0.1,0.6,0.2c3,1.5,5.8,2.3,8.6,2.3s5.7-0.7,8.6-2.3c0.2-0.1,0.4-0.2,0.6-0.2 c0.5,0,1,0.3,1.2,0.7c0.4,0.7,0.1,1.5-0.6,1.9c-2.6,1.4-5.3,2.2-7.9,2.5C101.7,101,100.5,101,100.2,101z"></path>
+                                </defs>
+
+                                <clipPath id="mouthMask">
+                                    <use xlink:href="#mouthMaskPath" overflow="visible"></use>
+                                </clipPath>
+
+                                <g clip-path="url(#mouthMask)">
+                                    <g class="tongue">
+                                        <circle cx="100" cy="107" r="8" fill="#cc4a6c"></circle>
+                                        <ellipse class="tongueHighlight" cx="100" cy="100.5" rx="3" ry="1.5" opacity=".1" fill="#fff"></ellipse>
+                                    </g>
+                                </g>
+
+                                <path clip-path="url(#mouthMask)" class="tooth" style="fill:#FFFFFF;" d="M106,97h-4c-1.1,0-2-0.9-2-2v-2h8v2C108,96.1,107.1,97,106,97z"></path>
+                                <path class="mouthOutline" fill="none" stroke="#3A5E77" stroke-width="2.5" stroke-linejoin="round" d="M100.2,101c-0.4,0-1.4,0-1.8,0c-2.7-0.3-5.3-1.1-8-2.5c-0.7-0.3-0.9-1.2-0.6-1.8 c0.2-0.5,0.7-0.7,1.2-0.7c0.2,0,0.5,0.1,0.6,0.2c3,1.5,5.8,2.3,8.6,2.3s5.7-0.7,8.6-2.3c0.2-0.1,0.4-0.2,0.6-0.2 c0.5,0,1,0.3,1.2,0.7c0.4,0.7,0.1,1.5-0.6,1.9c-2.6,1.4-5.3,2.2-7.9,2.5C101.7,101,100.5,101,100.2,101z"></path>
+                            </g>
+
+                            <path class="nose" d="M97.7 79.9h4.7c1.9 0 3 2.2 1.9 3.7l-2.3 3.3c-.9 1.3-2.9 1.3-3.8 0l-2.3-3.3c-1.3-1.6-.2-3.7 1.8-3.7z" fill="#3a5e77" data-svg-origin="100.0374870300293 83.88750076293945" transform="matrix(0.99801,0.06294,-0.06294,0.99801,5.478269809651323,-6.130086597558147)" style="transform-origin: 0px 0px 0px;"></path>
+
+                            <g class="arms" clip-path="url(#armMask)">
+                                <g class="armL" data-svg-origin="1.2000000476837158 46.20000076293945" transform="matrix(-0.25881,0.96592,-0.96592,-0.25881,-46.863643174353925,276.9983298065334)" style="transform-origin: 0px 0px 0px;">
+                                    <path fill="#ddf1fa" stroke="#3a5e77" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2.5" d="M121.3 97.4L111 58.7l38.8-10.4 20 36.1z"></path>
+                                    <path fill="#ddf1fa" stroke="#3a5e77" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2.5" d="M134.4 52.5l19.3-5.2c2.7-.7 5.4.9 6.1 3.5.7 2.7-.9 5.4-3.5 6.1L146 59.7M160.8 76.5l19.4-5.2c2.7-.7 5.4.9 6.1 3.5.7 2.7-.9 5.4-3.5 6.1l-18.3 4.9M158.3 66.8l23.1-6.2c2.7-.7 5.4.9 6.1 3.5.7 2.7-.9 5.4-3.5 6.1l-23.1 6.2M150.9 58.4l26-7c2.7-.7 5.4.9 6.1 3.5.7 2.7-.9 5.4-3.5 6.1l-21.3 5.7"></path>
+                                    <path fill="#a9ddf3" d="M178.8 74.7l2.2-.6c1.1-.3 2.2.3 2.4 1.4.3 1.1-.3 2.2-1.4 2.4l-2.2.6-1-3.8zM180.1 64l2.2-.6c1.1-.3 2.2.3 2.4 1.4.3 1.1-.3 2.2-1.4 2.4l-2.2.6-1-3.8zM175.5 54.9l2.2-.6c1.1-.3 2.2.3 2.4 1.4.3 1.1-.3 2.2-1.4 2.4l-2.2.6-1-3.8zM152.1 49.4l2.2-.6c1.1-.3 2.2.3 2.4 1.4.3 1.1-.3 2.2-1.4 2.4l-2.2.6-1-3.8z"></path>
+                                    <path fill="#fff" stroke="#3a5e77" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M123.5 96.8c-41.4 14.9-84.1 30.7-108.2 35.5L1.2 80c33.5-9.9 71.9-16.5 111.9-21.8"></path>
+                                    <path fill="#fff" stroke="#3a5e77" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M108.5 59.4c7.7-5.3 14.3-8.4 22.8-13.2-2.4 5.3-4.7 10.3-6.7 15.1 4.3.3 8.4.7 12.3 1.3-4.2 5-8.1 9.6-11.5 13.9 3.1 1.1 6 2.4 8.7 3.8-1.4 2.9-2.7 5.8-3.9 8.5 2.5 3.5 4.6 7.2 6.3 11-4.9-.8-9-.7-16.2-2.7M94.5 102.8c-.6 4-3.8 8.9-9.4 14.7-2.6-1.8-5-3.7-7.2-5.7-2.5 4.1-6.6 8.8-12.2 14-1.9-2.2-3.4-4.5-4.5-6.9-4.4 3.3-9.5 6.9-15.4 10.8-.2-3.4.1-7.1 1.1-10.9M97.5 62.9c-1.7-2.4-5.9-4.1-12.4-5.2-.9 2.2-1.8 4.3-2.5 6.5-3.8-1.8-9.4-3.1-17-3.8.5 2.3 1.2 4.5 1.9 6.8-5-.6-11.2-.9-18.4-1 2 2.9.9 3.5 3.9 6.2"></path>
+                                </g>
+
+                                <g class="armR" data-svg-origin="385.5 47.03531265258789" transform="matrix(-0.25881,-0.96592,0.96592,-0.25881,346.84211864830615,651.5733533938651)" style="transform-origin: 0px 0px 0px;">
+                                    <path fill="#ddf1fa" stroke="#3a5e77" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2.5" d="M265.4 97.3l10.4-38.6-38.9-10.5-20 36.1z"></path>
+                                    <path fill="#ddf1fa" stroke="#3a5e77" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2.5" d="M252.4 52.4L233 47.2c-2.7-.7-5.4.9-6.1 3.5-.7 2.7.9 5.4 3.5 6.1l10.3 2.8M226 76.4l-19.4-5.2c-2.7-.7-5.4.9-6.1 3.5-.7 2.7.9 5.4 3.5 6.1l18.3 4.9M228.4 66.7l-23.1-6.2c-2.7-.7-5.4.9-6.1 3.5-.7 2.7.9 5.4 3.5 6.1l23.1 6.2M235.8 58.3l-26-7c-2.7-.7-5.4.9-6.1 3.5-.7 2.7.9 5.4 3.5 6.1l21.3 5.7"></path>
+                                    <path fill="#a9ddf3" d="M207.9 74.7l-2.2-.6c-1.1-.3-2.2.3-2.4 1.4-.3 1.1.3 2.2 1.4 2.4l2.2.6 1-3.8zM206.7 64l-2.2-.6c-1.1-.3-2.2.3-2.4 1.4-.3 1.1.3 2.2 1.4 2.4l2.2.6 1-3.8zM211.2 54.8l-2.2-.6c-1.1-.3-2.2.3-2.4 1.4-.3 1.1.3 2.2 1.4 2.4l2.2.6 1-3.8zM234.6 49.4l-2.2-.6c-1.1-.3-2.2.3-2.4 1.4-.3 1.1.3 2.2 1.4 2.4l2.2.6 1-3.8z"></path>
+                                    <path fill="#fff" stroke="#3a5e77" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M263.3 96.7c41.4 14.9 84.1 30.7 108.2 35.5l14-52.3C352 70 313.6 63.5 273.6 58.1"></path>
+                                    <path fill="#fff" stroke="#3a5e77" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M278.2 59.3l-18.6-10 2.5 11.9-10.7 6.5 9.9 8.7-13.9 6.4 9.1 5.9-13.2 9.2 23.1-.9M284.5 100.1c-.4 4 1.8 8.9 6.7 14.8 3.5-1.8 6.7-3.6 9.7-5.5 1.8 4.2 5.1 8.9 10.1 14.1 2.7-2.1 5.1-4.4 7.1-6.8 4.1 3.4 9 7 14.7 11 1.2-3.4 1.8-7 1.7-10.9M314 66.7s5.4-5.7 12.6-7.4c1.7 2.9 3.3 5.7 4.9 8.6 3.8-2.5 9.8-4.4 18.2-5.7.1 3.1.1 6.1 0 9.2 5.5-1 12.5-1.6 20.8-1.9-1.4 3.9-2.5 8.4-2.5 8.4"></path>
+                                </g>
+                            </g>
+                        </svg>
+                        </div>
+                    </div>
+                                <h3 style="text-align:center;">{% if session['id'] %} <b>{{ session['name'] }}</b> {% else %} <a href="/login"><i class="uil uil-compass"></i> <b>Login</b></a> {% endif %} </h3>
+                        </div>
+                     <script>
+                        const profile = document.querySelector('.profile');
+                        const floatingDiv = document.querySelector('.floating-div');
+
+                        profile.addEventListener('click', function() {
+                          floatingDiv.style.display = 'block';
+                        });
+
+                        floatingDiv.addEventListener('mouseover', function() {
+                          floatingDiv.style.display = 'block';
+                        });
+
+                        floatingDiv.addEventListener('mouseout', function() {
+                          floatingDiv.style.display = 'none';
+                        });
+                        </script>
+                </div>
+            </div>
+            <i class="uil uil-apps nav-menu-btn"></i>
+        </div>
+    </header>
+
+	<br><br><br><br>
+    <div class="flexbox">
+
+        <div class="flexbox1">
+            <div class="forminfo-admin">
+                <div class="flex-div">
+                    <div class="svgContainer">
+                        <div>
+                        <svg class="mySVG" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 200">
+                            <defs>
+                                <circle id="armMaskPath" cx="100" cy="100" r="100"></circle>
+                            </defs>
+
+                            <clipPath id="armMask">
+                                <use xlink:href="#armMaskPath" overflow="visible"></use>
+                            </clipPath>
+
+                            <circle cx="100" cy="100" r="100" fill="#ffce47"></circle>
+
+                            <g class="body">
+                                <path fill="#FFFFFF" d="M193.3,135.9c-5.8-8.4-15.5-13.9-26.5-13.9H151V72c0-27.6-22.4-50-50-50S51,44.4,51,72v50H32.1 c-10.6,0-20,5.1-25.8,13l0,78h187L193.3,135.9z"></path>
+                                <path fill="none" stroke="#3A5E77" stroke-width="2.5" stroke-linecap="round" stroke-linejoinn="round" d="M193.3,135.9 c-5.8-8.4-15.5-13.9-26.5-13.9H151V72c0-27.6-22.4-50-50-50S51,44.4,51,72v50H32.1c-10.6,0-20,5.1-25.8,13"></path>
+                                <path fill="#DDF1FA" d="M100,156.4c-22.9,0-43,11.1-54.1,27.7c15.6,10,34.2,15.9,54.1,15.9s38.5-5.8,54.1-15.9 C143,167.5,122.9,156.4,100,156.4z"></path>
+                            </g>
+
+                            <g class="earL">
+                                <g class="outerEar" fill="#ddf1fa" stroke="#3a5e77" stroke-width="2.5" data-svg-origin="35.5 71.5" transform="matrix(1,0,0,1,0,0)">
+                                    <circle cx="47" cy="83" r="11.5"></circle>
+                                    <path d="M46.3 78.9c-2.3 0-4.1 1.9-4.1 4.1 0 2.3 1.9 4.1 4.1 4.1" stroke-linecap="round" stroke-linejoin="round"></path>
+                                </g>
+
+                                <g class="earHair" data-svg-origin="42.79999923706055 62.79999923706055" transform="matrix(1,0,0,1,0,0)">
+                                    <rect x="51" y="64" fill="#FFFFFF" width="15" height="35"></rect>
+                                    <path d="M53.4 62.8C48.5 67.4 45 72.2 42.8 77c3.4-.1 6.8-.1 10.1.1-4 3.7-6.8 7.6-8.2 11.6 2.1 0 4.2 0 6.3.2-2.6 4.1-3.8 8.3-3.7 12.5 1.2-.7 3.4-1.4 5.2-1.9" fill="#fff" stroke="#3a5e77" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path>
+                                </g>
+                            </g>
+
+                            <g class="earR">
+                                <g class="outerEar" fill="#ddf1fa" stroke="#3a5e77" stroke-width="2.5" data-svg-origin="143.5 71.5" transform="matrix(1,0,0,1,0,0)">
+                                    <circle cx="155" cy="83" r="11.5"></circle>
+                                    <path d="M155.7 78.9c2.3 0 4.1 1.9 4.1 4.1 0 2.3-1.9 4.1-4.1 4.1" stroke-linecap="round" stroke-linejoin="round"></path>
+                                </g>
+                                <g class="earHair" data-svg-origin="131 62.79999923706055" transform="matrix(1,0,0,1,0,0)">
+                                    <rect x="131" y="64" fill="#FFFFFF" width="20" height="35"></rect>
+                                    <path d="M148.6 62.8c4.9 4.6 8.4 9.4 10.6 14.2-3.4-.1-6.8-.1-10.1.1 4 3.7 6.8 7.6 8.2 11.6-2.1 0-4.2 0-6.3.2 2.6 4.1 3.8 8.3 3.7 12.5-1.2-.7-3.4-1.4-5.2-1.9" fill="#fff" stroke="#3a5e77" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path>
+                                </g>
+                            </g>
+                            <path class="chin" d="M84.1 121.6c2.7 2.9 6.1 5.4 9.8 7.5l.9-4.5c2.9 2.5 6.3 4.8 10.2 6.5 0-1.9-.1-3.9-.2-5.8 3 1.2 6.2 2 9.7 2.5-.3-2.1-.7-4.1-1.2-6.1" fill="none" stroke="#3a5e77" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" data-svg-origin="84.0999984741211 121.5999984741211" transform="matrix(1,0,0,1,0,0)"></path>
+                            <path class="face" fill="#DDF1FA" d="M134.5,46v35.5c0,21.815-15.446,39.5-34.5,39.5s-34.5-17.685-34.5-39.5V46" data-svg-origin="100 46" transform="matrix(1,0,0,1,0,0)" style="transform-origin: 0px 0px 0px;"></path>
+                            <path class="hair" fill="#FFFFFF" stroke="#3A5E77" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" d="M81.457,27.929 c1.755-4.084,5.51-8.262,11.253-11.77c0.979,2.565,1.883,5.14,2.712,7.723c3.162-4.265,8.626-8.27,16.272-11.235 c-0.737,3.293-1.588,6.573-2.554,9.837c4.857-2.116,11.049-3.64,18.428-4.156c-2.403,3.23-5.021,6.391-7.852,9.474" data-svg-origin="104.51250076293945 27.929000854492188" transform="matrix(1,0,0,1,0,0)" style="transform-origin: 0px 0px 0px;"></path>
+
+                            <g class="eyebrow" data-svg-origin="100.85150527954102 43.33300018310547" transform="matrix(1,0,0,1,0,0)" style="transform-origin: 0px 0px 0px;">
+                                <path fill="#FFFFFF" d="M138.142,55.064c-4.93,1.259-9.874,2.118-14.787,2.599c-0.336,3.341-0.776,6.689-1.322,10.037 c-4.569-1.465-8.909-3.222-12.996-5.226c-0.98,3.075-2.07,6.137-3.267,9.179c-5.514-3.067-10.559-6.545-15.097-10.329 c-1.806,2.889-3.745,5.73-5.816,8.515c-7.916-4.124-15.053-9.114-21.296-14.738l1.107-11.768h73.475V55.064z"></path>
+                                <path fill="#FFFFFF" stroke="#3A5E77" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" d="M63.56,55.102 c6.243,5.624,13.38,10.614,21.296,14.738c2.071-2.785,4.01-5.626,5.816-8.515c4.537,3.785,9.583,7.263,15.097,10.329 c1.197-3.043,2.287-6.104,3.267-9.179c4.087,2.004,8.427,3.761,12.996,5.226c0.545-3.348,0.986-6.696,1.322-10.037 c4.913-0.481,9.857-1.34,14.787-2.599"></path>
+                            </g>
+
+                            <g class="eyeL" data-svg-origin="82 75" transform="matrix(1,0,0,1,0,0)">
+                                <circle cx="85.5" cy="78.5" r="3.5" fill="#3a5e77"></circle>
+                                <circle cx="84" cy="76" r="1" fill="#fff"></circle>
+                            </g>
+
+                            <g class="eyeR" data-svg-origin="111 75" transform="matrix(1,0,0,1,0,0)">
+                                <circle cx="114.5" cy="78.5" r="3.5" fill="#3a5e77"></circle>
+                                <circle cx="113" cy="76" r="1" fill="#fff"></circle>
+                            </g>
+
+                            <g class="mouth" data-svg-origin="100.2220687866211 104" transform="matrix(1,0,0,1,0,0)" style="transform-origin: 0px 0px 0px;">
+                                <path class="mouthBG" fill="#617E92" d="M100.2,101c-0.4,0-1.4,0-1.8,0c-2.7-0.3-5.3-1.1-8-2.5c-0.7-0.3-0.9-1.2-0.6-1.8 c0.2-0.5,0.7-0.7,1.2-0.7c0.2,0,0.5,0.1,0.6,0.2c3,1.5,5.8,2.3,8.6,2.3s5.7-0.7,8.6-2.3c0.2-0.1,0.4-0.2,0.6-0.2 c0.5,0,1,0.3,1.2,0.7c0.4,0.7,0.1,1.5-0.6,1.9c-2.6,1.4-5.3,2.2-7.9,2.5C101.7,101,100.5,101,100.2,101z"></path>
+                                <path style="display: none;" class="mouthSmallBG" fill="#617E92" d="M100.2,101c-0.4,0-1.4,0-1.8,0c-2.7-0.3-5.3-1.1-8-2.5c-0.7-0.3-0.9-1.2-0.6-1.8 c0.2-0.5,0.7-0.7,1.2-0.7c0.2,0,0.5,0.1,0.6,0.2c3,1.5,5.8,2.3,8.6,2.3s5.7-0.7,8.6-2.3c0.2-0.1,0.4-0.2,0.6-0.2 c0.5,0,1,0.3,1.2,0.7c0.4,0.7,0.1,1.5-0.6,1.9c-2.6,1.4-5.3,2.2-7.9,2.5C101.7,101,100.5,101,100.2,101z"></path>
+                                <path style="display: none;" class="mouthMediumBG" d="M95,104.2c-4.5,0-8.2-3.7-8.2-8.2v-2c0-1.2,1-2.2,2.2-2.2h22c1.2,0,2.2,1,2.2,2.2v2 c0,4.5-3.7,8.2-8.2,8.2H95z"></path>
+                                <path style="display: none;" class="mouthLargeBG" d="M100 110.2c-9 0-16.2-7.3-16.2-16.2 0-2.3 1.9-4.2 4.2-4.2h24c2.3 0 4.2 1.9 4.2 4.2 0 9-7.2 16.2-16.2 16.2z" fill="#617e92" stroke="#3a5e77" stroke-linejoin="round" stroke-width="2.5"></path>
+
+                                <defs>
+                                    <path id="mouthMaskPath" d="M100.2,101c-0.4,0-1.4,0-1.8,0c-2.7-0.3-5.3-1.1-8-2.5c-0.7-0.3-0.9-1.2-0.6-1.8 c0.2-0.5,0.7-0.7,1.2-0.7c0.2,0,0.5,0.1,0.6,0.2c3,1.5,5.8,2.3,8.6,2.3s5.7-0.7,8.6-2.3c0.2-0.1,0.4-0.2,0.6-0.2 c0.5,0,1,0.3,1.2,0.7c0.4,0.7,0.1,1.5-0.6,1.9c-2.6,1.4-5.3,2.2-7.9,2.5C101.7,101,100.5,101,100.2,101z"></path>
+                                </defs>
+
+                                <clipPath id="mouthMask">
+                                    <use xlink:href="#mouthMaskPath" overflow="visible"></use>
+                                </clipPath>
+
+                                <g clip-path="url(#mouthMask)">
+                                    <g class="tongue">
+                                        <circle cx="100" cy="107" r="8" fill="#cc4a6c"></circle>
+                                        <ellipse class="tongueHighlight" cx="100" cy="100.5" rx="3" ry="1.5" opacity=".1" fill="#fff"></ellipse>
+                                    </g>
+                                </g>
+
+                                <path clip-path="url(#mouthMask)" class="tooth" style="fill:#FFFFFF;" d="M106,97h-4c-1.1,0-2-0.9-2-2v-2h8v2C108,96.1,107.1,97,106,97z"></path>
+                                <path class="mouthOutline" fill="none" stroke="#3A5E77" stroke-width="2.5" stroke-linejoin="round" d="M100.2,101c-0.4,0-1.4,0-1.8,0c-2.7-0.3-5.3-1.1-8-2.5c-0.7-0.3-0.9-1.2-0.6-1.8 c0.2-0.5,0.7-0.7,1.2-0.7c0.2,0,0.5,0.1,0.6,0.2c3,1.5,5.8,2.3,8.6,2.3s5.7-0.7,8.6-2.3c0.2-0.1,0.4-0.2,0.6-0.2 c0.5,0,1,0.3,1.2,0.7c0.4,0.7,0.1,1.5-0.6,1.9c-2.6,1.4-5.3,2.2-7.9,2.5C101.7,101,100.5,101,100.2,101z"></path>
+                            </g>
+
+                            <path class="nose" d="M97.7 79.9h4.7c1.9 0 3 2.2 1.9 3.7l-2.3 3.3c-.9 1.3-2.9 1.3-3.8 0l-2.3-3.3c-1.3-1.6-.2-3.7 1.8-3.7z" fill="#3a5e77" data-svg-origin="100.0374870300293 83.88750076293945" transform="matrix(0.99801,0.06294,-0.06294,0.99801,5.478269809651323,-6.130086597558147)" style="transform-origin: 0px 0px 0px;"></path>
+
+                            <g class="arms" clip-path="url(#armMask)">
+                                <g class="armL" data-svg-origin="1.2000000476837158 46.20000076293945" transform="matrix(-0.25881,0.96592,-0.96592,-0.25881,-46.863643174353925,276.9983298065334)" style="transform-origin: 0px 0px 0px;">
+                                    <path fill="#ddf1fa" stroke="#3a5e77" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2.5" d="M121.3 97.4L111 58.7l38.8-10.4 20 36.1z"></path>
+                                    <path fill="#ddf1fa" stroke="#3a5e77" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2.5" d="M134.4 52.5l19.3-5.2c2.7-.7 5.4.9 6.1 3.5.7 2.7-.9 5.4-3.5 6.1L146 59.7M160.8 76.5l19.4-5.2c2.7-.7 5.4.9 6.1 3.5.7 2.7-.9 5.4-3.5 6.1l-18.3 4.9M158.3 66.8l23.1-6.2c2.7-.7 5.4.9 6.1 3.5.7 2.7-.9 5.4-3.5 6.1l-23.1 6.2M150.9 58.4l26-7c2.7-.7 5.4.9 6.1 3.5.7 2.7-.9 5.4-3.5 6.1l-21.3 5.7"></path>
+                                    <path fill="#a9ddf3" d="M178.8 74.7l2.2-.6c1.1-.3 2.2.3 2.4 1.4.3 1.1-.3 2.2-1.4 2.4l-2.2.6-1-3.8zM180.1 64l2.2-.6c1.1-.3 2.2.3 2.4 1.4.3 1.1-.3 2.2-1.4 2.4l-2.2.6-1-3.8zM175.5 54.9l2.2-.6c1.1-.3 2.2.3 2.4 1.4.3 1.1-.3 2.2-1.4 2.4l-2.2.6-1-3.8zM152.1 49.4l2.2-.6c1.1-.3 2.2.3 2.4 1.4.3 1.1-.3 2.2-1.4 2.4l-2.2.6-1-3.8z"></path>
+                                    <path fill="#fff" stroke="#3a5e77" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M123.5 96.8c-41.4 14.9-84.1 30.7-108.2 35.5L1.2 80c33.5-9.9 71.9-16.5 111.9-21.8"></path>
+                                    <path fill="#fff" stroke="#3a5e77" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M108.5 59.4c7.7-5.3 14.3-8.4 22.8-13.2-2.4 5.3-4.7 10.3-6.7 15.1 4.3.3 8.4.7 12.3 1.3-4.2 5-8.1 9.6-11.5 13.9 3.1 1.1 6 2.4 8.7 3.8-1.4 2.9-2.7 5.8-3.9 8.5 2.5 3.5 4.6 7.2 6.3 11-4.9-.8-9-.7-16.2-2.7M94.5 102.8c-.6 4-3.8 8.9-9.4 14.7-2.6-1.8-5-3.7-7.2-5.7-2.5 4.1-6.6 8.8-12.2 14-1.9-2.2-3.4-4.5-4.5-6.9-4.4 3.3-9.5 6.9-15.4 10.8-.2-3.4.1-7.1 1.1-10.9M97.5 62.9c-1.7-2.4-5.9-4.1-12.4-5.2-.9 2.2-1.8 4.3-2.5 6.5-3.8-1.8-9.4-3.1-17-3.8.5 2.3 1.2 4.5 1.9 6.8-5-.6-11.2-.9-18.4-1 2 2.9.9 3.5 3.9 6.2"></path>
+                                </g>
+
+                                <g class="armR" data-svg-origin="385.5 47.03531265258789" transform="matrix(-0.25881,-0.96592,0.96592,-0.25881,346.84211864830615,651.5733533938651)" style="transform-origin: 0px 0px 0px;">
+                                    <path fill="#ddf1fa" stroke="#3a5e77" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2.5" d="M265.4 97.3l10.4-38.6-38.9-10.5-20 36.1z"></path>
+                                    <path fill="#ddf1fa" stroke="#3a5e77" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2.5" d="M252.4 52.4L233 47.2c-2.7-.7-5.4.9-6.1 3.5-.7 2.7.9 5.4 3.5 6.1l10.3 2.8M226 76.4l-19.4-5.2c-2.7-.7-5.4.9-6.1 3.5-.7 2.7.9 5.4 3.5 6.1l18.3 4.9M228.4 66.7l-23.1-6.2c-2.7-.7-5.4.9-6.1 3.5-.7 2.7.9 5.4 3.5 6.1l23.1 6.2M235.8 58.3l-26-7c-2.7-.7-5.4.9-6.1 3.5-.7 2.7.9 5.4 3.5 6.1l21.3 5.7"></path>
+                                    <path fill="#a9ddf3" d="M207.9 74.7l-2.2-.6c-1.1-.3-2.2.3-2.4 1.4-.3 1.1.3 2.2 1.4 2.4l2.2.6 1-3.8zM206.7 64l-2.2-.6c-1.1-.3-2.2.3-2.4 1.4-.3 1.1.3 2.2 1.4 2.4l2.2.6 1-3.8zM211.2 54.8l-2.2-.6c-1.1-.3-2.2.3-2.4 1.4-.3 1.1.3 2.2 1.4 2.4l2.2.6 1-3.8zM234.6 49.4l-2.2-.6c-1.1-.3-2.2.3-2.4 1.4-.3 1.1.3 2.2 1.4 2.4l2.2.6 1-3.8z"></path>
+                                    <path fill="#fff" stroke="#3a5e77" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M263.3 96.7c41.4 14.9 84.1 30.7 108.2 35.5l14-52.3C352 70 313.6 63.5 273.6 58.1"></path>
+                                    <path fill="#fff" stroke="#3a5e77" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M278.2 59.3l-18.6-10 2.5 11.9-10.7 6.5 9.9 8.7-13.9 6.4 9.1 5.9-13.2 9.2 23.1-.9M284.5 100.1c-.4 4 1.8 8.9 6.7 14.8 3.5-1.8 6.7-3.6 9.7-5.5 1.8 4.2 5.1 8.9 10.1 14.1 2.7-2.1 5.1-4.4 7.1-6.8 4.1 3.4 9 7 14.7 11 1.2-3.4 1.8-7 1.7-10.9M314 66.7s5.4-5.7 12.6-7.4c1.7 2.9 3.3 5.7 4.9 8.6 3.8-2.5 9.8-4.4 18.2-5.7.1 3.1.1 6.1 0 9.2 5.5-1 12.5-1.6 20.8-1.9-1.4 3.9-2.5 8.4-2.5 8.4"></path>
+                                </g>
+                            </g>
+                        </svg>
+                        </div>
+                    </div>
+                    <h3 style="text-align:center;">{% if session['id'] %} <b>{{ session['name'] }}</b> {% else %} <a href="/login"><i class="uil uil-compass"></i> <b>Login</b></a> {% endif %} </h3>
+                    <br>
+                    <hr style="height:2px;border-width:0;color:gray;background-color:black;width:100%;">
+                    <button class="but1" id="myButton"><img src="/static/check-mark.png" alt="check" width="25px;">Overview</button><br>
+                    <button class="but2" id="myButton1"><img src="/static/check-mark.png" alt="check" width="25px;">Manage Assessments</button><br>
+                    <button class="but3" id="myButton2"><img src="/static/check-mark.png" alt="check" width="25px;">Result Analysis</button><br>
+                    <button class="but4" id="myButton3"><img src="/static/check-mark.png" alt="check" width="25px;">Feedback</button><br>
+                    <a href="/custom"><button class="but4" onclick="" style="background-color: #ff9900;"> <center>Create Assessment &nbsp;<span class="arrow"><i class="uil uil-arrow-right"></i></span></center></button></a><br>
+                    <!--                    <button class="accordion"><a href="#previous-data" id="jump-link5" style="text-decoration: none !important;"><img src="/static/check-mark.png" alt="check" width="25px;">Previous Assessments</a></button>-->
+<!--                    <div class="panel">-->
+<!--                        <p>The assessments section allows you to manage assessments for your students.</p>-->
+<!--                    </div>-->
+
+<!--                    <button class="accordion"><a href="#operations" id="jump-link6" style="text-decoration: none !important;"><img src="/static/check-mark.png" alt="check" width="25px;"> Create survey!</a></button>-->
+<!--                    <div class="panel">-->
+<!--                        <p>The assessments section allows you to create and edit assessments for your students. You can create custom assessments, add or remove questions, and adjust the sentiment analysis parameters.</p>-->
+<!--                    </div>-->
+
+<!--                    <button class="accordion"><a href="#operations" id="jump-link7" style="text-decoration: none !important;"><img src="/static/check-mark.png" alt="check" width="25px;"> Check Results!</a></button>-->
+<!--                    <div class="panel">-->
+<!--                        <p>This section provides an overview of all the assessments that have been completed by your students. You can view the average happiness index score, identify trends, and track progress over time.</p>-->
+<!--                    </div>-->
+
+                </div>
+            </div>
+        </div>
+
+
+        <div id="overview" class="flexbox2" style="display:block;">
+            <hr style="height:2px;border-width:0;color:gray;background-color:lightgray;width:99%;">
+            <div>
+                <p style="font-size:2em; font-weight:700;">{% if session['name'] %} Welcome {{ session['name'] }}, {% endif %}</p>
+                <span>As an administrator, you have access to a range of features that will help you manage and support your students.</span>
+            </div>
+
+            <div class="flex-container">
+                <div class="flex-items">
+                    <p><b>Total Students</b></p>
+                    <span style="font-size:3em; font-weight: 700;">{{ ts }}</span>
+                </div>
+                <div class="flex-items">
+                    <p><b>Happiness Index</b></p>
+                    <span style="font-size:3em; font-weight: 700;">{{ ahi }}</span>
+                </div>
+                <div class="flex-items">
+                    <p><b>Total Assessments Submitted</b></p>
+                    <span style="font-size:2.5em; font-weight: 700;">{{ tas }} <span style="font-size:14px;"></span></span>
+                </div>
+            </div>
+            <br>
+            <button class="accordion"><a href="#previous-data" id="jump-link5" style="text-decoration: none !important;"><b>Other Assessments</b></a></button>
+                <div class="panel">
+                    <div class="flex-item1-previous">
+                        <div id="assessment-table" style="padding:30px;">
+                            <div class="card mb-3 my-div">
+                                <div class="card-header">
+                                    <i class="fa fa-table"></i>Assessments
+                                </div>
+                                <div class="card-body">
+                                    <div class="table-responsive">
+                                        <table class="table table-bordered" id="dataTablePre" width="100%" cellspacing="0">
+                                            <thead>
+                                                <tr>
+                                                    <th>ID</th>
+                                                    <th>Name</th>
+                                                    <th>Description</th>
+                                                    <th>Overall Score</th>
+                                                </tr>
+                                            </thead>
+                                            <tfoot>
+                                                <tr>
+                                                    <th>ID</th>
+                                                    <th>Name</th>
+                                                    <th>Description</th>
+                                                    <th>Overall Score</th>
+                                                </tr>
+                                            </tfoot>
+                                            <tbody> {% for row in assess %}
+                                                <tr>
+                                                    <td>{{ row.assessId }}</td>
+                                                    <td>{{ row.name }}</td>
+                                                    <td>{{ row.description[0:71] }}...</td>
+                                                    <td><b>{{ row.average }}</b></td>
+                                                </tr> {% endfor %}
+                                            </tbody>
+                                        </table>
+                                    </div>
+                                </div>
+                                <div class="card-footer small text-muted">Updated yesterday at 11:59 PM</div>
+                            </div>
+                        </div>
+                        <a href="/custom"><button class="create" style="background-color:#ff9900">New Assessment &nbsp; &nbsp; <span class="arrow"><i class="uil uil-arrow-right"></i></span></button></a>
+                    </div>
+                </div>
+            <hr style="height:2px;border-width:0;color:gray;background-color:lightgray;width:99%;">
+        </div>
+
+<!--            <div id="operations">-->
+<!--                <div class="flex-container-result">-->
+<!--                    <div class="flex-item1-result">-->
+<!--                        <h1><b>Create Survey!</b></h1><br>-->
+<!--&lt;!&ndash;                        <span>The assessments section allows you to create, edit, and manage assessments for your students. You can create custom assessments, add or remove questions, and adjust the sentiment analysis parameters.</span><br><br>&ndash;&gt;-->
+<!--                        <a href="/custom"><button class="create">Create &nbsp; &nbsp; <span class="arrow"><i class="uil uil-arrow-right"></i></span></button></a>-->
+<!--                    </div>-->
+<!--                    <div class="flex-item2-result">-->
+<!--                        <h1><b>Check Results!</b></h1><br>-->
+<!--&lt;!&ndash;                        <span>This section provides an overview of all the assessments that have been completed by your students. You can view the average happiness index score, identify trends, and track progress over time.</span><br><br>&ndash;&gt;-->
+<!--                        <a href="#response-table" id="response" onclick="getdata()"><button class="create">Check &nbsp; &nbsp; <span class="arrow"><i class="uil uil-arrow-right"></i></span></button></a>-->
+<!--                    </div>-->
+<!--                </div>-->
+<!--                &lt;!&ndash;<input type="button" value="Check Results!"  onclick="getdata()"></input>&ndash;&gt;-->
+<!--            </div>-->
+
+        <div id="prev-assess" class="flexbox2" style="display:none;">
+            <hr style="height:2px;border-width:0;color:gray;background-color:lightgray;width:99%;">
+            <div style="display:flex; flex-direction:row; justify-content:space-between;">
+                <div>
+                    <h3><b>Manage Assessments</b></h3>
+                    <p>The assessments section allows you to manage assessments for your students.</p>
+                </div>
+                <div style="text-align:left;">
+                    <div id="add" style="display:block; text-align: center;">
+                        <a href="/custom"><button class="add-btn"> + </button></a>
+                    </div>
+                </div>
+            </div>
+            <div id="previous-data">
+                    <div class="flex-item1-previous">
+                        <div id="assessment-table">
+                            <div class="card mb-3 my-div">
+                                <div class="card-header">
+                                    <i class="fa fa-table"></i>Assessments
+                                </div>
+                                <div class="card-body">
+                                    <div class="table-responsive">
+                                        <table class="table table-bordered" id="dataTablePre1" width="100%" cellspacing="0">
+                                            <thead>
+                                                <tr>
+                                                    <th>ID</th>
+                                                    <th>Name</th>
+                                                    <th>Description</th>
+                                                    <th>Questions</th>
+                                                    <th>Actions</th>
+                                                </tr>
+                                            </thead>
+                                            <tfoot>
+                                                <tr>
+                                                    <th>ID</th>
+                                                    <th>Name</th>
+                                                    <th>Description</th>
+                                                    <th>Questions</th>
+                                                    <th>Actions</th>
+                                                </tr>
+                                            </tfoot>
+                                            <tbody> {% for row in assess %}
+                                                <tr>
+                                                    <td>{{ row.assessId }}</td>
+                                                    <td>{{ row.name }}</td>
+                                                    <td>{{ row.description[0:71] }}...</td>
+                                                    <td><a href="#questions-table" id="question"><button class="btn btn-primary" onclick="showQuestions{{ row.assessId }}()"><img src="/static/eye.png" alt="delete" width="20px;"> See Questions </button></a>
+                                                        <script>
+                                                            function showQuestions{{ row.assessId }}() {
+                                                                {% set questions_list = row.Questions[2:-2].split('", "') %}
+                                                                document.getElementById('questions').innerHTML = "<div id='assessment-table' style='padding:30px;'><div class='card mb-3 my-div'><div class='card-header'><i class='fa fa-table'></i>Questions</div><div class='card-body'><div class='table-responsive'><table class='table table-bordered' id='dataTablePre2' width='100%' cellspacing='1'>{% for i in range(1, questions_list|count+1) %}<tr><td><b>Question {{ i }}:</b></td><td>{{ questions_list[i-1] }}</td></tr>{% endfor %}</table></div></div><div class='card-footer small text-muted'>Updated yesterday at 11:59 PM</div></div></div>";
+                                                            }
+                                                        </script>
+                                                    </td>
+                                                    <td>
+                                                        <button id="myBtn{{row.assessId}}" class="btn btn-primary" style="background-color:red; border:none;">
+                                                                            <img src="/static/bin.png" alt="delete" width="20px;"> Delete </button>
+                                                        <div id="myModal{{row.assessId}}" class="modal">
+                                                            <div class="modal-content">
+                                                                <div class="modal-header">
+                                                                    <span class="close">&times;</span>
+                                                                    <h2>Warning!</h2>
+                                                                </div>
+                                                                <div class="modal-body">
+                                                                    <p>{{ row.name }} will be permanently deleted.</p>
+                                                                    <p>There is no way to recover the assessment and the corresponding progress.</p>
+                                                                    <form method="POST">
+                                                                        <input name="delete" id="delete" value="{{row.assessId}}" type="hidden">
+                                                                        <button class="btn btn-primary" style="background-color:red; border:none;">
+                                                                            <img src="/static/bin.png" alt="delete" width="20px;"> Okay! </button>
+                                                                    </form>
+                                                                    <script>
+                                                                        // Get the modal
+                                                                        var modal = document.getElementById("myModal{{row.assessId}}");
+
+                                                                        // Get the button that opens the modal
+                                                                        var btn = document.getElementById("myBtn{{row.assessId}}");
+
+                                                                        // Get the <span> element that closes the modal
+                                                                        var span = document.getElementsByClassName("close")[0];
+
+                                                                        // When the user clicks the button, open the modal
+                                                                        btn.onclick = function() {
+                                                                          modal.style.display = "block";
+                                                                        }
+
+                                                                        // When the user clicks on <span> (x), close the modal
+                                                                        span.onclick = function() {
+                                                                          modal.style.display = "none";
+                                                                        }
+
+                                                                        // When the user clicks anywhere outside of the modal, close it
+                                                                        window.onclick = function(event) {
+                                                                          if (event.target == modal) {
+                                                                            modal.style.display = "none";
+                                                                          }
+                                                                        }
+                                                                    </script>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+
+                                                    </td>
+                                                </tr> {% endfor %}
+                                            </tbody>
+                                        </table>
+                                    </div>
+                                </div>
+                                <div class="card-footer small text-muted">Updated yesterday at 11:59 PM</div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="flex-item2-previous" style="font-size:14px; text-align:center;">
+                        <div style="width:100%; background-color:#f0f0f0; padding:6px;"><h4><b>Questions</b></h4></div>
+                        <div id="questions-table" style="padding:10px; background-color: white; border-radius:15px;">
+                            <div id="questions">Select a Assessment</div>
+                        </div>
+                    </div>
+
+                    <hr style="height:2px;border-width:0;color:gray;background-color:lightgray;width:99%;">
+            </div>
+        </div>
+
+        <div id="results" class="flexbox2" style="display:none;">
+            <hr style="height:2px;border-width:0;color:gray;background-color:lightgray;width:99%;">
+            <div>
+                <h3><b>Result Analysis</b></h3>
+                <p>The Result section allows you to monitor students performance.</p>
+            </div>
+            <div id="response-table" style="padding:30px;">
+                <div class="card mb-3 my-div">
+                    <div class="card-header">
+                        <i class="fa fa-table"></i>Students Responses
+                    </div>
+                    <div class="card-body">
+                        <div class="table-responsive">
+                            <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
+                                <thead>
+                                    <tr>
+                                        <th>Id</th>
+                                        <th>Name</th>
+                                        <th>Email</th>
+                                        <th>Responses</th>
+                                    </tr>
+                                </thead>
+                                <tfoot>
+                                    <tr>
+                                        <th>Id</th>
+                                        <th>Name</th>
+                                        <th>Email</th>
+                                        <th>Responses</th>
+                                    </tr>
+                                </tfoot>
+                                <tbody> {% for row in result %}
+                                    <tr>
+                                        <td>{{ row.id }}</td>
+                                        <td>{{ row.name }}</td>
+                                        <td>{{ row.email }}</td>
+                                        <td>{% if row.isdone==1 %} <form method="POST">
+                                                <input name="resid" id="resid" value="{{row.id}}" type="hidden">
+                                                <select name="type" id="type"> {% if session['name'] %} {% for types in abc %} {% if types.id == row.id %} <option value="{{types.type}}"> {{types.name}} {% endif %} </option> {% endfor %} {% endif %} </select>
+                                                <button class="btn btn-primary" style="display:block; margin:0 auto; background-color:#00db21;">Check results</button>
+                                            </form> {% else %} <p>Pending...</p> {% endif %} </td>
+                                    </tr> {% endfor %}
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="card-footer small text-muted">Updated yesterday at 11:59 PM</div>
+                </div>
+            </div>
+            <hr style="height:2px;border-width:0;color:gray;background-color:lightgray;width:99%;">
+        </div>
+
+        <div id="feedback" class="flexbox2" style="display:none;">
+            <hr style="height:2px;border-width:0;color:gray;background-color:lightgray;width:99%;">
+            <div>
+                <h3><b>Students Feedbacks</b></h3>
+                <p>The Feedback section allows you to access students feedbacks on the assessments.</p>
+            </div>
+            <div id="response-table" style="padding:30px;">
+                <div class="card mb-3 my-div">
+                    <div class="card-header">
+                        <i class="fa fa-table"></i>Students Feedbacks
+                    </div>
+                    <div class="card-body">
+                        <div class="table-responsive">
+                            <table class="table table-bordered" id="dataTablePre3" width="100%" cellspacing="0">
+                                <thead>
+                                    <tr>
+                                        <th>Sr. No.</th>
+                                        <th>Name</th>
+                                        <th>Email</th>
+                                        <th>Feedbacks</th>
+                                    </tr>
+                                </thead>
+                                <tfoot>
+                                    <tr>
+                                        <th>Sr. No.</th>
+                                        <th>Name</th>
+                                        <th>Email</th>
+                                        <th>Feedbacks</th>
+                                    </tr>
+                                </tfoot>
+                                <tbody> {% for row in feeds %}
+                                    <tr>
+                                        <td>{{ loop.index }}</td>
+                                        <td>{{ row.name }}</td>
+                                        <td>{{ row.email }}</td>
+                                        <td>{{ row.feedback }}</td>
+                                    </tr> {% endfor %}
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="card-footer small text-muted">Updated yesterday at 11:59 PM</div>
+                </div>
+            </div>
+            <hr style="height:2px;border-width:0;color:gray;background-color:lightgray;width:99%;">
+        </div>
+    </div>
+
+    <script>
+        var acc = document.getElementsByClassName("accordion");
+        var i;
+
+        for (i = 0; i < acc.length; i++) {
+          acc[i].addEventListener("click", function() {
+            this.classList.toggle("active");
+            var panel = this.nextElementSibling;
+            if (panel.style.maxHeight) {
+              panel.style.maxHeight = null;
+            } else {
+              panel.style.maxHeight = panel.scrollHeight + "px";
+            }
+          });
+        }
+
+        var jumpLink5 = document.getElementById("jump-link5");
+        jumpLink5.addEventListener("click", function(e) {
+          e.preventDefault();
+          var target = document.querySelector(this.getAttribute("href"));
+          var targetOffset = target.offsetTop;
+          window.scrollTo({top: targetOffset, behavior: "smooth"});
+        });
+        var jumpLink6 = document.getElementById("jump-link6");
+        jumpLink6.addEventListener("click", function(e) {
+          e.preventDefault();
+          var target = document.querySelector(this.getAttribute("href"));
+          var targetOffset = target.offsetTop;
+          window.scrollTo({top: targetOffset, behavior: "smooth"});
+        });
+        var jumpLink7 = document.getElementById("jump-link7");
+        jumpLink7.addEventListener("click", function(e) {
+          e.preventDefault();
+          var target = document.querySelector(this.getAttribute("href"));
+          var targetOffset = target.offsetTop;
+          window.scrollTo({top: targetOffset, behavior: "smooth"});
+        });
+    </script>
+    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script>
+    <script src='https://cdn.datatables.net/1.10.16/js/jquery.dataTables.js'></script>
+    <script src='https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.16/js/dataTables.bootstrap4.js'></script>
+    <script>
+        var jumpLink11 = document.getElementById("response");
+        jumpLink11.addEventListener("click", function(e) {
+            e.preventDefault();
+            var target = document.querySelector(this.getAttribute("href"));
+            var targetOffset = target.offsetTop;
+            window.scrollTo({top: targetOffset, behavior: "smooth"});
+        });
+
+        var jumpLink12 = document.getElementById("question");
+        jumpLink12.addEventListener("click", function(e) {
+            e.preventDefault();
+            var target = document.querySelector(this.getAttribute("href"));
+            var targetOffset = target.offsetTop;
+            window.scrollTo({top: targetOffset, behavior: "smooth"});
+        });
+
+        function getdata() {
+            document.getElementById("response-table").style.display = "block";
+        }
+    </script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
+    <script src="{{ url_for('static', filename='js/swiper-bundle.min.js') }}"></script>
+    <script src="{{ url_for('static', filename='js/main.js') }}"></script>
+    <script>
+        const myButton = document.getElementById("myButton");
+        const overviewDiv = document.getElementById("overview");
+        const displayPrevDiv = document.getElementById("prev-assess");
+        const resultsDiv = document.getElementById("results");
+        const feedbackDiv = document.getElementById("feedback");
+
+        myButton.addEventListener("click", () => {
+          feedbackDiv.style.display= "none";
+          resultsDiv.style.display= "none";
+          displayPrevDiv.style.display = "none";
+          overviewDiv.style.display = "block";
+        });
+
+        const myButton1 = document.getElementById("myButton1");
+        myButton1.addEventListener("click", () => {
+          overviewDiv.style.display = "none";
+          resultsDiv.style.display= "none";
+          feedbackDiv.style.display= "none";
+          displayPrevDiv.style.display = "block";
+        });
+
+        const myButton2 = document.getElementById("myButton2");
+        myButton2.addEventListener("click", () => {
+          overviewDiv.style.display = "none";
+          displayPrevDiv.style.display = "none";
+          feedbackDiv.style.display= "none";
+          resultsDiv.style.display= "block";
+        });
+
+        const myButton3 = document.getElementById("myButton3");
+        myButton3.addEventListener("click", () => {
+          overviewDiv.style.display = "none";
+          displayPrevDiv.style.display = "none";
+          resultsDiv.style.display= "none";
+          feedbackDiv.style.display= "block";
+        });
+
+        $(document).ready(function() {
+          $('#dataTablePre').DataTable();
+        });
+
+        $(document).ready(function() {
+          $('#dataTablePre1').DataTable();
+        });
+
+        $(document).ready(function() {
+          $('#dataTablePre2').DataTable();
+        });
+
+        $(document).ready(function() {
+          $('#dataTablePre3').DataTable();
+        });
+
+        $(document).ready(function() {
+          $('#dataTable').DataTable();
+        });
+    </script>
+</body>
+</html>

templates/change.html

@@ -0,0 +1,41 @@
+{% extends 'layout.html' %}
+{% block title %} Change Password {% endblock %}
+{% block content %}
+<br><br><br>
+    <div class="verify-pass">
+        <form action="/change" method="POST"  id="pass-form">
+            <label for="password">New Password:</label>
+            <input type="password" class="form-control" id="password" name="password" required><br><br>
+
+            <label for="repeat-password">Repeat New Password:</label>
+            <input type="password" class="form-control" id="repeat-password" required><br><br>
+
+            <div id="pass-error-group" class="form-group" style="display:none; text-align:center; text-weight:bold;">
+                <b><span id="pass-error" style="color:red;"></span></b>
+            </div>
+
+            <center><button type="submit" class="btn btn-primary verify">Change Password!</button></center>
+        </form>
+    </div>
+
+    <script>
+      function myFunction() {
+            var pass = document.getElementById("password").value;
+            var rep_pass = document.getElementById("repeat-password").value;
+            let value = pass.localeCompare(rep_pass);
+            if (value != 0) {
+                document.getElementById("pass-error-group").style.display = "block";
+                document.getElementById("pass-error").innerHTML = "&#x0021; &nbsp; &nbsp; Password does not Match.";
+                return false;
+            }
+            return true;
+        }
+
+        document.getElementById("pass-form").addEventListener("submit", function(event) {
+            if (!myFunction()) {
+              event.preventDefault(); // prevent the form from submitting
+            }
+        });
+    </script>
+
+{% endblock %}