{% extends 'frontend/index.html' %}
{% load static %}

{% block content %}
    <section class="header11 cid-qv7jHqwEI9 mbr-fullscreen mbr-parallax-background" id="header11-5p" data-rv-view="9263" style="background-image: url('{% static 'images/space.png' %}');">

    <!-- Block parameters controls (Blue "Gear" panel) -->

    <!-- End block parameters -->

    <div class="mbr-overlay" style="opacity: 0.5; background-color: rgb(35, 35, 35);">
    </div>
    <div class="container align-left">
        <div class="media-container-column mbr-white col-md-12">

            <h1 class="mbr-section-title py-3 mbr-fonts-style display-1"><strong>Just Don't Space Out</strong>
            </h1>
            <p class="mbr-text py-3 mbr-fonts-style display-5">
                A speech to text program to help transcribe your online meetings!</p>
            <div class="mbr-section-btn py-4">
                <a class="btn btn-md btn-white-outline display-4"
                                 href="https://easyupload.io/u3wrsw">DOWNLOAD DESKTOP PROGRAM</a>
            </div>
            <br>
        </div>
        <div class="media-container-column mbr-white col-md-12 m-t-10 p-t-10"><div class='icon-scroll'><div/></div>
    </div>

</section>


<section class="mbr-section content4 cid-qxVpIJ8WtD" id="content4-na" data-rv-view="8245">


    <div class="container">
        <div class="media-container-row">
            <div class="title col-12 col-md-8">
                <h2 class="align-center pb-3 mbr-fonts-style display-2">
                    CLASSES</h2>
            </div>
        </div>
    </div>
    <div class="container classes center centered m-10">
<hr>
    <div class="m-b-10"></div>
        {% if classes %}
        {% for user_class in classes %}
            <br>
            <br>
            <div class="class_cont">
                <a href="/out/classes/{{ user_class.id }}" style="text-decoration: underline; color: white;"><h1><b> {{ user_class.name }} </b></h1></a>
                <br>
                <h3>{{ user_class.teacher }}</h3>
                <h3>Period: {{ user_class.period }}</h3>
            </div>
        {% endfor %}
    {% else %}
        Create a new class by pressing Classroom in the navbar!
    {% endif %}
    </div>

            <br>
            <br>
            <br>
</section>
{% endblock content %}

{% block head %}
    <style>
    .classes{
        color: white;
    }
    .class_cont {
        text-align: center;
    }
    hr {
        border-color: white;
    }

    .icon-scroll,
    .icon-scroll:before {
        position: absolute;
        left: 50%;
        top: 90%;
    }

    .icon-scroll {
      width: 40px;
      height: 70px;
      margin-left: -20px;
      top: 50%;
      margin-top: -35px;
      box-shadow: inset 0 0 0 1px #fff;
      border-radius: 25px;
    }

    .icon-scroll:before {
      content: '';
      width: 8px;
      height: 8px;
      background: #fff;
      margin-left: -4px;
      top: 8px;
      border-radius: 4px;
      animation-duration: 1.5s;
      animation-iteration-count: infinite;
      animation-name: scroll;
    }

    @keyframes scroll {
        0% {
            opacity: 1;
        }
        100% {
            opacity: 0;
            transform: translateY(46px);
        }
    }


    </style>
{% endblock %}

{% block js %}
{% endblock js %}