Upload 63 files

Dockerfile.txt

@@ -0,0 +1,17 @@
+# Menggunakan base image Python 3.9
+FROM python:3.9
+
+# Mengatur direktori kerja ke /code
+WORKDIR /code
+
+# Menyalin requirements.txt ke /code
+COPY ./requirements.txt /code/requirements.txt
+
+# Menginstal dependensi dari requirements.txt
+RUN pip install --no-cache-dir --upgrade -r requirements.txt
+
+# Menyalin seluruh konten proyek Anda ke /code
+COPY . /code
+
+# CMD untuk menjalankan Gunicorn
+CMD ["gunicorn", "server:app", "-b", "0.0.0.0:7860"]

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,920 @@
+<!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>
+                </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="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.decode('utf-8')[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 %}

templates/custom.html

@@ -0,0 +1,195 @@
+{% extends 'layout.html' %}
+{% block title %} Custom Form {% endblock %}
+{% block content %}
+<h1>{{data}} {{comp}} {{len}}{{types}}</h1>
+        <form id="myForm" method="POST" class="form">
+            <div class="container">
+                <div class="forminfo">
+                    <h2 style="padding:20px; text-align:center;">Create New Assessment</h2>
+                    <hr style="height:2px;border-width:0;color:gray;background-color:grey;width:85%;margin:0 auto;padding:1px;">
+                    <div class="namearea">
+                        <label for="name" style="font-size:16px; font-weight:bold;">Name of form :</label>
+                        <input name="name" id="name" type="text" required style="margin:20px auto; background-color:white !important;"><br>
+                    </div>
+                    <div class="labelarea">
+                        <label for="describ" style="font-size:16px; font-weight:bold;">Description of form :</label><br>
+                        <textarea name="describ" id="describ" type="text" required style="height:200px; width:400px; border-radius:10px;"></textarea><br>
+                    </div>
+                </div>
+                <div class="form-ques">
+                    <div class="form-group">
+                        <div id="inputContainer"></div>
+                    </div>
+                    <hr style="height:2px;border-width:0;color:gray;background-color:grey;width:50%;margin:0 auto;padding:1px;">
+
+                    <div id="add" style="display:block; text-align: center; margin:20px auto;">
+                        <button type="button" onclick="addInputs();" class="add-btn"> + </button>
+                    </div>
+
+                    <div id="error" style="text-align:center; font-weight:bold; color:red;"></div>
+
+                    <div id="action" style="display:block; text-align: center; margin:20px auto;">
+                        <button type="submit" name="submit" id="btn" class="sub-btn">Create &nbsp; <span class="arrow"><i class="uil uil-arrow-right"></i></span></button>
+                        <button type="reset" class="rst-btn">Reset &nbsp; <span class="arrow"><i class="uil uil-redo"></i></span></button>
+                        <button type="reset" onclick="window.location.reload();" class="rel-btn">Start New &nbsp; <span class="arrow"><i class="uil uil-refresh"></i></span></button>
+                    </div>
+                    <hr style="height:2px;border-width:0;color:gray;background-color:grey;width:90%;margin:0 auto;padding:1px;">
+
+                </div>
+            </div>
+        </form>
+
+    <script>
+		window.onload = addInputs;
+		var count = 0;
+
+		function addInputs() {
+		    document.getElementById("error").textContent = '';
+			var container = document.getElementById("inputContainer");
+			const dragElement = document.createElement('div');
+			dragElement.classList.add('drag');
+			dragElement.setAttribute('draggable', true);
+
+			const label = document.createElement('label');
+			label.setAttribute('for', `inpt${count+1}`);
+			label.setAttribute('id', `label${count+1}`);
+			label.innerHTML = "<b>"+`Question ${count+1} : `+"</b>";
+			dragElement.appendChild(label);
+
+			const select = document.createElement('select');
+            select.setAttribute('name', `select${count+1}`);
+            select.setAttribute('id', `select${count+1}`);
+
+            const option1 = document.createElement('option');
+            option1.setAttribute('value', '1101');
+            option1.innerText = 'Psychological well-being';
+            select.appendChild(option1);
+
+            const option2 = document.createElement('option');
+            option2.setAttribute('value', '1102');
+            option2.innerText = 'Health aspects';
+            select.appendChild(option2);
+
+            const option3 = document.createElement('option');
+            option3.setAttribute('value', '1103');
+            option3.innerText = 'Time management';
+            select.appendChild(option3);
+
+            const option4 = document.createElement('option');
+            option4.setAttribute('value', '1104');
+            option4.innerText = 'Educational standards';
+            select.appendChild(option4);
+
+            const option5 = document.createElement('option');
+            option5.setAttribute('value', '1105');
+            option5.innerText = 'Cultural diversity';
+            select.appendChild(option5);
+
+            const option6 = document.createElement('option');
+            option6.setAttribute('value', '1106');
+            option6.innerText = 'Social well-being';
+            select.appendChild(option6);
+
+            const option7 = document.createElement('option');
+            option7.setAttribute('value', '1107');
+            option7.innerText = 'Good governance';
+            select.appendChild(option7);
+
+            const option8 = document.createElement('option');
+            option8.setAttribute('value', '1108');
+            option8.innerText = 'Community vitality';
+            select.appendChild(option8);
+
+            dragElement.appendChild(select);
+
+            const textarea = document.createElement('textarea');
+            textarea.setAttribute('id', `inpt${count+1}`);
+            textarea.setAttribute('name', `inpt${count+1}`);
+            textarea.setAttribute('rows', '4');// Set the initial number of rows to 4
+            textarea.setAttribute('placeholder', 'Enter question');
+            textarea.setAttribute('required', '');
+            dragElement.appendChild(textarea);
+
+			const removeButton = document.createElement('button');
+			removeButton.setAttribute('class', 'remove-button');
+			removeButton.innerText = 'Remove';
+			dragElement.appendChild(removeButton);
+
+			dragElement.classList.add('drag-enter');
+
+			container.appendChild(dragElement);
+
+            void dragElement.offsetWidth;
+            dragElement.classList.remove('drag-enter');
+
+			removeButton.addEventListener('click', () => {
+				if (count == 1) {
+					document.getElementById("error").textContent = '! Atleast 1 Question is needed.';
+				}
+				else {
+				    dragElement.classList.add('drag-leave');
+                    // Wait for the animation to finish before removing the item from the DOM
+                    setTimeout(() => {
+                        dragElement.classList.add('zoom-out');
+                    }, 50);
+                    setTimeout(() => {
+                        container.removeChild(dragElement);
+					    updateIdsAndNames()
+                    }, 300);
+
+					count--;
+
+					if (count < 20) {
+						document.getElementById("add").style.display = "block";
+					}
+				}
+			});
+
+			count++;
+			if (count >= 20) {
+				document.getElementById("add").style.display = "none";
+			}
+        }
+
+		const container = document.getElementById('inputContainer');
+		let draggingElement;
+
+		container.addEventListener('dragstart', (event) => {
+		  draggingElement = event.target;
+		  draggingElement.classList.add('dragging');
+		});
+
+		container.addEventListener('dragend', (event) => {
+		  draggingElement.classList.remove('dragging');
+		});
+
+		container.addEventListener('dragover', (event) => {
+		  event.preventDefault();
+		  const targetElement = event.target.closest('.drag');
+		  if (targetElement && targetElement !== draggingElement) {
+			const containerRect = container.getBoundingClientRect();
+			const targetRect = targetElement.getBoundingClientRect();
+			if (event.clientY > (targetRect.top + targetRect.height / 2)) {
+			  container.insertBefore(draggingElement, targetElement.nextElementSibling);
+			} else {
+			  container.insertBefore(draggingElement, targetElement);
+			  }
+			updateIdsAndNames();
+		  }
+		});
+
+		function updateIdsAndNames() {
+		  const dragElements = container.querySelectorAll('.drag');
+		  dragElements.forEach((element, index) => {
+			const label = element.querySelector('label');
+			const input = element.querySelector('textarea');
+			label.setAttribute('for', `inpt${index + 1}`);
+			label.setAttribute('id', `label${index + 1}`);
+			label.innerHTML= "<b>"+`Question ${index + 1}`+" :</b>";
+			input.setAttribute('id', `inpt${index + 1}`);
+			input.setAttribute('name', `inpt${index + 1}`);
+		  });
+		}
+	</script>
+
+{% endblock %}