<!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>

        <div class="textblock">

            <p style="font-size: 22px;">
                Bei allen Aufgaben in dieser Studie gibt es Texte, in denen die Aufgaben und die Antwortmöglichkeiten erklärt werden.
                Falls Sie Fragen haben oder eine Aufgabe nicht verstehen, können Sie den "Info"-Button auf der rechten Seite des Bildschirms klicken, um den Erklärtext 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: 90px;"><img class="infoButtonIcon" id="buttonInfoIcon"
                    src="{{ url_for('static', filename='icons/info-icon.png')}}" alt="info-icon"></button>
            </div>
            <p style="font-size: 22px; text-align: center;">
                Das ist der Info-Button.
            </p>

        </div>
        <form class="dsgvoform" action="{{ url_for('sendpage') }}" method="post">
            <div class="button-container">
                <button id="submitbutton" type="submit">Starten</button>
            </div>
        </form>
        <div class="spacer" aria-hidden="true" style="height:80px"></div>
    </div>
</body>
<footer>
    <div class="container" style="font-size: 19px;">
    <a href="{{ url_for('startpage') }}" target="_blank">Startseite</a>
    <a href="{{ url_for('impressum') }}" target="_blank">Impressum</a>
    <a href="{{ url_for('datenschutz') }}" target="_blank">Datenschutz</a>
    </div>
</footer> 

</html>