<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles.css')}}"" /> <!--  styles.css  {{ url_for('static', filename='styles.css')}}-->
    <link rel=" shortcut icon" href="{{ url_for('static', filename='icons/favicon.ico') }}">
    <title>DGS Avatar Study</title>
</head>

<body>
    <div class="container">
        <h2>SLAEFORMS Gebärdensprachavatar Studie</h2>

        <video controls>
            <source src="{{ url_for('static', filename='videos/GLEISvariations.mp4') }}" type="video/mp4">
        </video>
        <div class="spacer" aria-hidden="true" style="height:20px"></div>
        <div class="textblock">

            <p style="font-size: 22px;">
                Bei allen Aufgaben in dieser Studie gibt es ein Erklärungsvideo, in dem die Aufgabe und die Antwortmöglichkeiten in Gebärdensprache erklärt werden.
                Falls sie Fragen haben oder eine Aufgabe nicht verstehen, können sie den "Gebärdensprache" Button auf der rechten Seite des Bildschirms klicken, um das Video und den Erklärungstext zu sehen.
                Sie können den Button nochmal anklicken um wieder zur Aufgabe zurückzukommen.
            </p>
            <div style="margin: auto; display: block; max-width: 90px;">
                <button style="margin: auto; max-width: ;"><img class="infoButtonIcon" id="buttonInfoIcon"
                    src="{{ url_for('static', filename='icons/sl-icon.png')}}" alt="sign-language-icon"></button>
            </div>
            <p style="font-size: 22px; text-align: center;">
                Der Gebärdensprache Button.
            </p>

        </div>
        <form class="dsgvoform" action="{{ url_for('startpage') }}" method="post">
            <div class="button-container">
                <input id="submitbutton" type="submit" value="Starten" />
            </div>
        </form>
    </div>
</body>

</html>