<!DOCTYPE html>
<head>
    {% load static %}
    <title>Pariksha</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,300;0,400;0,700;1,400&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Slabo+13px&display=swap" rel="stylesheet">
    <style>
        .cards {
            display: block;
            min-height: 500px;
        }
            .menu_card_wrapper {
                width: 100%;
                margin-top: 20px;
                display: flex;
                flex-direction: row;
            }
            .menu_card {
                text-decoration: none;
                width: 100%;
                min-height: 150px;
                display: flex;
                align-self: center;
                justify-content: center;
            }
            .img_wrapper {
                min-width: 200px;
                display:block;
                text-align: center;
            }
            .backdrop {
                display: none;
            }
        * {
            font-family: 'Source Sans Pro', sans-serif;
        }
        body {
            margin: 0px;
            background: white;
        }
        .menu_card_content > h1 {
            margin-top: 0px;
            margin-bottom: 0px;
        }
        .menu_card_content > p {
            margin-right: 30px;
        }
        .profile {
            margin: 50px;
        }
        .profile h3 {
            margin-top: 0px;
            margin-bottom: 0px;
        }
        .profile h1 {
                z-index: 10000;
            margin-top: 0px;
            margin-bottom: 0px;
            font-size: 2.5em;
            font-family: 'Slabo 13px', serif;
        }
        

        #menucard_createquiz {
            background-color: #c6cceb;
            transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, width 0.2s ease, height 0.2s ease;
            color: black;
        }
        #menucard_createquiz:hover {
            background-color: #6877ca;
            color: white;
        }

        #menucard_dashboard {
            background-color: #e9ccaf;
            transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, width 0.2s ease, height 0.2s ease;
            color: black;
        }
        #menucard_dashboard:hover {
            background-color: #c88037;
            color: white;
        }

        #menucard_monitor {
            background-color: #fffc99;
            transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, width 0.2s ease, height 0.2s ease;
            color: black;
        }
        #menucard_monitor:hover {
            background-color: #ccc500;
            color: white;
        }

        #menucard_logout {
            background-color: #ffc599;
            transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, width 0.2s ease, height 0.2s ease;
            color: black;
        }
        #menucard_logout:hover {
            background-color: #ff6f00;
        }
        @media only screen and (min-width: 800px) {
            .profile {
                text-align: center;
            }
            .cards {
                display: flex;
                flex-direction: row;
                justify-content: center;
                flex-wrap: wrap;
            }
            .menu_card_wrapper {
                margin: 50px;
                width: 280px;
                flex-direction: column;
            }
            .menu_card {
                text-decoration: none;
                width: 280px;
                height: 400px; 
                margin: 10px;
                box-shadow: 1px 1px 5px rgb(158, 158, 158);
                animation: grow 1s 1;
                position: relative;
            }
            .menu_card * {
                animation: fadein 1s 1;
            }
            @keyframes fadein {
                0% {
                    opacity: 0;
                }
                
                50% {
                    opacity: 0;
                }
                100% {
                    opacity: 1;
                }
            }
            @keyframes grow {
                0% {
                    top: -300px;
                    width: 0px;
                    height: 0px; 
                }
                100% {
                    top: 0px;
                    width: 280px;
                    height: 400px; 
                }
            }
            .menu_card:hover {
                box-shadow: 1px 1px 5px rgb(87, 87, 87);
                width: 330px;
                height: 430px; 

            }
            .img_wrapper {
                min-width: 200px;
                display:block;
                text-align: center;
                margin-bottom: 20px;
            }
            
            .backdrop {
                display: block;
                width: 100%;
                height: 350px;
                background: url("{% static 'img/skulls/skulls/skulls.png' %}");
                position: absolute;
                top:0px;
                left:0px;
                z-index: -100;  
                animation: appear 0.5s 1;
            }
            @keyframes appear {
                0% {
                    height: 0px;
                }
                100% {
                    height: 350px;
                }
            }
        }
    </style>
</head>
<body>
    <section class="profile">
        <h3>Welcome,</h3>
        <h1>Professor {{user}}</h1>
    </section>
    <!-- <br><h1><a href="/create_quiz/">Create New Quiz</a></h1>
    {%for quiz in quizId%}
    <br><h1><a href="/instructor?quiz_id={{quiz.0}}">Instructor Graphs for quizCode:{{quiz.1}}</a></h1></center>
    
    {%endfor%} -->
    <div class="backdrop"></div>
    <section class="cards">
        <a class="menu_card" id="menucard_createquiz" href="/create_quiz/">
            <div class="menu_card_wrapper">
            <div class="img_wrapper"><img height="100px" src="{% static 'img/add_file.svg' %}"></div>
            <div class="menu_card_content">
                <h1>Create Quiz</h1>
                <p>Schedule a new and customized quiz in minutes, with questions of your liking and set marks for each questions.</p>
            </div>
            </div>
        </a>
        <a class="menu_card" id="menucard_dashboard" href="/instructor">
            <div class="menu_card_wrapper">
            <div class="img_wrapper"><img height="100px" src="{% static 'img/menu_dashboard.svg' %}"></div>
            <div class="menu_card_content">
                <h1>Dashboard</h1>
                <p>View how your students have performed by an extensive analysis provided by the power of Matplotlib!</p>
            </div>
            </div>
        </a>
        <a class="menu_card" id="menucard_monitor" href="/monitor">
            <div class="menu_card_wrapper">
            <div class="img_wrapper"><img height="100px" src="{% static 'img/menu_monitor.svg' %}"></div>
            <div class="menu_card_content">
                <h1>Monitor</h1>
                <p>Monitor your students in your currently ongoing quizzes! You have currently 0 ongoing quizzes.</p>
            </div>
            </div>
        </a>
        <a class="menu_card" id="menucard_logout" href='{% url "logout" %}?next=/'>
            <div class="menu_card_wrapper">
            <div class="img_wrapper"><img height="90px" src="{% static 'img/menu_logout.svg' %}"></div>
            <div class="menu_card_content">
                <h1>Logout</h1>
                <p></p>
            </div>
            </div>
        </a>
    </section>
</body>
</html>
