<!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">
    <script>
        function start_quiz(x) {
            window.open("/quiz/?q="+x, "_blank", "fullscreen=yes");
        }
    </script>
    <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-color: #f0f6f1;
        }
        .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_ongoingquizzes {
            background-color: #00fff0;
            transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, width 0.2s ease, height 0.2s ease;
        }
        #menucard_ongoingquizzes:hover {
            background-color: #2595d6;
            color: white;
        }

        #menucard_prevquiz {
            background-color: #f0dcc8;
            transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, width 0.2s ease, height 0.2s ease;
        }
        #menucard_prevquiz:hover {
            background-color: #ce9a66;
            color: white;
        }

        #menucard_logout {
            background-color: #ffeada;
            transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, width 0.2s ease, height 0.2s ease;
        }
        #menucard_logout:hover {
            background-color: #d4b59e;
        }

        @media only screen and (min-width: 800px) {
            .profile {
                text-align: center;
                color: white;
            }
            .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: fadeincust 1s 1;
            }
            @keyframes fadeincust {
                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: 100%;
                background: url("{% static 'img/study.jpg' %}");
                position: absolute;
                top:0px;
                left:0px;
                z-index: -100;  
                animation: appear 0.5s 1;
            }
            @keyframes appear {
                0% {
                    height: 0px;
                }
                100% {
                    height: 100%;
                }
            }
        }
    </style>
</head>
<body>
    <section class="profile">
        <h3>Welcome,</h3>
        <h1>Student {{user}}</h1>
    </section>

    <div class="backdrop"></div>
    <section class="cards">
    <a class="menu_card" id="menucard_ongoingquizzes" href="/ongoing_quiz/">
            <div class="menu_card_wrapper">
            <div class="img_wrapper"><img height="100px" src="{% static 'img/ongoing_quiz.svg' %}"></div>
            <div class="menu_card_content">
                <h1>Ongoing Quizzes</h1>
                <p>Ready for Quiz? You can start any one quiz from the list of ongoing quizzes.</p>
            </div>
            </div>
        </a>
    <a class="menu_card" id="menucard_prevquiz" href="/submissions/">
            <div class="menu_card_wrapper">
            <div class="img_wrapper"><img height="100px" src="{% static 'img/previous_quiz.svg' %}"></div>
            <div class="menu_card_content">
                <h1>Previous Quizzes</h1>
                <p>See your result of all previous attempted 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>

        <!--{%for quiz in quizId%}
        <br><h1><a onclick="start_quiz({{quiz.0}})">Start Quiz Code:{{quiz.1}}</a></h1>
        {%endfor%}
    <br><h1><a href="/submissions/">View Previous Quizzes</a></h1> -->
</body>
</html>
