home.html

<!-- {% extends "index.html" %}
{% block title %} Home {% endblock title %}
{% block css %} -->

<!-- Bootstrap CDN -->
<link rel="stylesheet" type = "text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css"    href="{{ url_for('static', filename='home.css') }}">
<link rel="stylesheet" type="text/css"   href="{{ url_for('static', filename='btn.css') }}">
<link rel="stylesheet" type="text/css"   href="{{ url_for('static', filename='buttnn.css') }}">
<link rel="stylesheet" type="text/css"    href="{{ url_for('static', filename='success.css') }}">
<!--Local Styles-->
<link rel="stylesheet" href="styles/home/home.css">  
<link rel="stylesheet" href="styles/home/btn.css">
<link rel="stylesheet" href="styles/mq/home/home.css">
 <link rel="stylesheet" href="styles/home/buttnn.css"> 
<!-- {% endblock css %} -->

<!-- <style type="text/css" >     
    @import url('https://fonts.googleapis.com/css2?family=Arial+sans-serif&display=swap');


.h_con{
 padding: 15vh 3% 0;
 min-height: 90vh;
 font-family: 'Arial', sans-serif;
 color: #69051e;
}


.intro_con{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
#ic1{
    font-size: 4.5rem;
    margin-bottom: 9vh;
    font-weight: bold;
    text-shadow: hsl(210deg 40% 52% / 40%) 1px 1px 5px;
}

.image{
    position: absolute;
    right:0;
    width: 50vw;
    bottom: 0;
}

form{
    width: 25vw;
}
label{
    font-size: 1.7rem;
}
input{
    box-shadow: hsl(210deg 40% 52% / 40%) 1px 1px 10px;
}

svg {
  position: absolute;
  top: -4000px;
  left: -4000px;
}

#gooey-button {
  padding: 9px 15px;
  font-size: 1.8rem;
  border: none;
  font-weight: bold;
  color: #fff;
  filter: url("#gooey");
  position: relative;
  background-color: #02CCC0;
  margin-top: 3vh;
}
#gooey-button:focus {
  outline: none;
}
#gooey-button .bubbles {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
#gooey-button .bubbles .bubble {
  background-color: #02CCC0;
  border-radius: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  z-index: -1;
}
#gooey-button .bubbles .bubble:nth-child(1) {
  left: 20px;
  width: 25px;
  height: 25px;
  -webkit-animation: move-1 3.02s infinite;
          animation: move-1 3.02s infinite;
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}
#gooey-button .bubbles .bubble:nth-child(2) {
  left: 16px;
  width: 25px;
  height: 25px;
  -webkit-animation: move-2 3.04s infinite;
          animation: move-2 3.04s infinite;
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}
#gooey-button .bubbles .bubble:nth-child(3) {
  left: 58px;
  width: 25px;
  height: 25px;
  -webkit-animation: move-3 3.06s infinite;
          animation: move-3 3.06s infinite;
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}
#gooey-button .bubbles .bubble:nth-child(4) {
  left: 14px;
  width: 25px;
  height: 25px;
  -webkit-animation: move-4 3.08s infinite;
          animation: move-4 3.08s infinite;
  -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
}
#gooey-button .bubbles .bubble:nth-child(5) {
  left: 25px;
  width: 25px;
  height: 25px;
  -webkit-animation: move-5 3.1s infinite;
          animation: move-5 3.1s infinite;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}
#gooey-button .bubbles .bubble:nth-child(6) {
  left: 48px;
  width: 25px;
  height: 25px;
  -webkit-animation: move-6 3.12s infinite;
          animation: move-6 3.12s infinite;
  -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s;
}
#gooey-button .bubbles .bubble:nth-child(7) {
  left: 75px;
  width: 25px;
  height: 25px;
  -webkit-animation: move-7 3.14s infinite;
          animation: move-7 3.14s infinite;
  -webkit-animation-delay: 1.4s;
          animation-delay: 1.4s;
}
#gooey-button .bubbles .bubble:nth-child(8) {
  left: 65px;
  width: 25px;
  height: 25px;
  -webkit-animation: move-8 3.16s infinite;
          animation: move-8 3.16s infinite;
  -webkit-animation-delay: 1.6s;
          animation-delay: 1.6s;
}
#gooey-button .bubbles .bubble:nth-child(9) {
  left: 63px;
  width: 25px;
  height: 25px;
  -webkit-animation: move-9 3.18s infinite;
          animation: move-9 3.18s infinite;
  -webkit-animation-delay: 1.8s;
          animation-delay: 1.8s;
}
#gooey-button .bubbles .bubble:nth-child(10) {
  left: 15px;
  width: 25px;
  height: 25px;
  -webkit-animation: move-10 3.2s infinite;
          animation: move-10 3.2s infinite;
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}

@-webkit-keyframes move-1 {
  0% {
    transform: translate(0, 0);
  }
  99% {
    transform: translate(0, -111px);
  }
  100% {
    transform: translate(0, 0);
    opacity: 0;
  }
}

@keyframes move-1 {
  0% {
    transform: translate(0, 0);
  }
  99% {
    transform: translate(0, -111px);
  }
  100% {
    transform: translate(0, 0);
    opacity: 0;
  }
}
@-webkit-keyframes move-2 {
  0% {
    transform: translate(0, 0);
  }
  99% {
    transform: translate(0, -110px);
  }
  100% {
    transform: translate(0, 0);
    opacity: 0;
  }
}
@keyframes move-2 {
  0% {
    transform: translate(0, 0);
  }
  99% {
    transform: translate(0, -110px);
  }
  100% {
    transform: translate(0, 0);
    opacity: 0;
  }
}
@-webkit-keyframes move-3 {
  0% {
    transform: translate(0, 0);
  }
  99% {
    transform: translate(0, -96px);
  }
  100% {
    transform: translate(0, 0);
    opacity: 0;
  }
}
@keyframes move-3 {
  0% {
    transform: translate(0, 0);
  }
  99% {
    transform: translate(0, -96px);
  }
  100% {
    transform: translate(0, 0);
    opacity: 0;
  }
}
@-webkit-keyframes move-4 {
  0% {
    transform: translate(0, 0);
  }
  99% {
    transform: translate(0, -130px);
  }
  100% {
    transform: translate(0, 0);
    opacity: 0;
  }
}
@keyframes move-4 {
  0% {
    transform: translate(0, 0);
  }
  99% {
    transform: translate(0, -130px);
  }
  100% {
    transform: translate(0, 0);
    opacity: 0;
  }
}
@-webkit-keyframes move-5 {
  0% {
    transform: translate(0, 0);
  }
  99% {
    transform: translate(0, -117px);
  }
  100% {
    transform: translate(0, 0);
    opacity: 0;
  }
}
@keyframes move-5 {
  0% {
    transform: translate(0, 0);
  }
  99% {
    transform: translate(0, -117px);
  }
  100% {
    transform: translate(0, 0);
    opacity: 0;
  }
}
@-webkit-keyframes move-6 {
  0% {
    transform: translate(0, 0);
  }
  99% {
    transform: translate(0, -83px);
  }
  100% {
    transform: translate(0, 0);
    opacity: 0;
  }
}
@keyframes move-6 {
  0% {
    transform: translate(0, 0);
  }
  99% {
    transform: translate(0, -83px);
  }
  100% {
    transform: translate(0, 0);
    opacity: 0;
  }
}
@-webkit-keyframes move-7 {
  0% {
    transform: translate(0, 0);
  }
  99% {
    transform: translate(0, -92px);
  }
  100% {
    transform: translate(0, 0);
    opacity: 0;
  }
}
@keyframes move-7 {
  0% {
    transform: translate(0, 0);
  }
  99% {
    transform: translate(0, -92px);
  }
  100% {
    transform: translate(0, 0);
    opacity: 0;
  }
}
@-webkit-keyframes move-8 {
  0% {
    transform: translate(0, 0);
  }
  99% {
    transform: translate(0, -110px);
  }
  100% {
    transform: translate(0, 0);
    opacity: 0;
  }
}
@keyframes move-8 {
  0% {
    transform: translate(0, 0);
  }
  99% {
    transform: translate(0, -110px);
  }
  100% {
    transform: translate(0, 0);
    opacity: 0;
  }
}
@-webkit-keyframes move-9 {
  0% {
    transform: translate(0, 0);
  }
  99% {
    transform: translate(0, -128px);
  }
  100% {
    transform: translate(0, 0);
    opacity: 0;
  }
}
@keyframes move-9 {
  0% {
    transform: translate(0, 0);
  }
  99% {
    transform: translate(0, -128px);
  }
  100% {
    transform: translate(0, 0);
    opacity: 0;
  }
}
@-webkit-keyframes move-10 {
  0% {
    transform: translate(0, 0);
  }
  99% {
    transform: translate(0, -62px);
  }
  100% {
    transform: translate(0, 0);
    opacity: 0;
  }
}
@keyframes move-10 {
  0% {
    transform: translate(0, 0);
  }
  99% {
    transform: translate(0, -62px);
  }
  100% {
    transform: translate(0, 0);
    opacity: 0;
  }
}
@media screen and (max-width: 1140px){
    form{
        width: 30vw;
    }
    .image{
        width: 55vw;
    }
}
@media screen and (max-width: 780px){
    form{
        width: 50vw;
    }
    .image{
        display: none;
    }
}
@media screen and (max-width: 615px){
    .h_con{
        padding-top: 8vh;
    }
    #ic1{
        font-size: 3rem;
        margin-bottom: 5vh;
    }
    form{
        width: 70vw;
    }
    label{
        font-size: 1.3rem;
    }
}
@media screen and (max-width: 370px){
    #ic1{
        font-size: 2.7rem;
    }
    form{
        width: 90vw;
    }
    .image{
        width: 100vw;
    }
}
.glow-on-hover {
    width: 220px;
    height: 50px;
    border: none;
    outline: solid;
    color: #fff;
    top: 15px;
    background: rgb(179, 10, 10);
    cursor: pointer;
    position: relative;
    z-index: 0;
    border-radius: 10px;
}

.glow-on-hover:before {
    content: '';
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    position: absolute;
    top: -2px;
    left:-2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing 20s linear infinite;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    border-radius: 10px;
}

.glow-on-hover:active {
    color: #000
}

.glow-on-hover:active:after {
    background: transparent;
}

.glow-on-hover:hover:before {
    opacity: 1;
}

.glow-on-hover:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #111;
    left: 0;
    top: 0;
    border-radius: 10px;
}

@keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}

</style> -->


<body>
   <!--  {% block body %} -->
    <div class="h_con">
        <div class="intro_con">
            <p id="ic1">Classes made easy through AI</p>
            <form class="" action="/" method="post" enctype=multipart/form-data>
                <div class="form-group">
                    <label for="name">Name:</label>
                    <input type="text" class="form-control" name="name" required>
                </div>
                <div class="form-group">
                    <label for="email">Email:</label>
                    <input type="email" class="form-control" name="email" required>
                </div>
                <div class="form-group">
                    <label for="file">Choose file:</label>
                    <input type="file" class="form-control" name="file">
                </div>

                <svg>
                    <defs>
                        <filter id="gooey">
                            <feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur" />
                            <feColorMatrix in="blur" type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="highContrastGraphic" />
                            <feComposite in="SourceGraphic" in2="highContrastGraphic" operator="atop" />
                        </filter>
                    </defs>
                </svg>

                <!-- <button id="gooey-button" type="submit" name="button">
                    Create Room
                    <span class="bubbles">
                        <span class="bubble"></span>
                        <span class="bubble"></span>
                        <span class="bubble"></span>
                        <span class="bubble"></span>
                        <span class="bubble"></span>
                        <span class="bubble"></span>
                        <span class="bubble"></span>
                        <span class="bubble"></span>
                        <span class="bubble"></span>
                        <span class="bubble"></span>
                    </span>
                </button> -->

               



                <button class="glow-on-hover" type="submit" id="submitBtn" name= "Create classroom"  onclick="myFunction()">
                    Create ClassRoom
                </button>

                <button class="glow-on-hover" type="submit" id="Studentbutton" name= "Student classroom"  onclick="myFunction()">
                    Student Classroom
                </button>


            </form>
        </div>
        <img class="image" src="images/home.jpg" alt="OpenRoom AI">
    </div>
<!--     <script src="../static/scripts/home/alert.js"></script> -->
 <!--    {% endblock body %} -->

 <script>
    document.getElementById("submitBtn").addEventListener("click", myFunction);  
    function myFunction() {  
      window.location.href="success.html";  
    }
   </script>

<script>
    document.getElementById("Studentbutton").addEventListener("click", myFunction);  
    function myFunction() {  
      window.location.href="join.html";  
    }
   </script>



</body>