<!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')}}-->
    <title>DGS Avatar Study</title>
</head>

<body>
    <div class="container">
    <h2>Hello! Thank you for participating in our study!</h2>

    <dialog>

        <button class="dialogBtn" autofocus><img class="infoButtonIcon" id="buttonClose" src="{{ url_for('static', filename='icons/x-icon.png')}}"
            alt="Delete Icon"></button>
        <div class="iframe-container">
            <iframe class="center" src="https://www.youtube-nocookie.com/embed/F_w50c5Us3Y?si=-H07MmQ4lYOC2Bwh" title="YouTube video player" frameborder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                allowfullscreen></iframe>
        </div>
        <div class="dialogTextContainer">
        <p>Here is the text with the content of the explanation video. 
            Here participants can read the full text that is beeing shown in the video above in sign language.
            From Feedback with a deaf sign language expert, we concluded that giving the whole text as additional resource
            would be a good idea, since this would help if a participants looses track of the vide, can not understand the DGS dialect,
            or just wants to read, because maybe that is what they prefer. This is especially relevant is the participant can not see very well.</p>
        </div>
        </dialog>
      <button class="dialogBtn"><img class="infoButtonIcon" id="buttonInfoIcon" src="{{ url_for('static', filename='icons/info-icon.png')}}"
        alt="Info Icon"></button>
      
    <div class="textblock">
    <p>This is a placeholder EULA and Terms and Condition Text, this should obviously be replaced with some real Text later.
        For now, be aware that this is a prototype for a sign language avatar study.
        The Data that you input in this form, will be saved on our servers, but in an annonimized ways, so we can not infer who sent this data.
        The Video recordings pose a special case. Any videos that are recorded, will be reviewed by sign language experts in our team,
        the meaning will be transcribed in text form, then the video will be deleted.
        If you have further questions, please send an email to testemail@notarealemail.deee
    </p>
    </div>
    <form class="dsgvoform" action="{{ url_for('startpage') }}" method="post">
    <label for="terms-and-conditions">
        <input class="inline" id="terms-and-conditions" type="checkbox" required name="terms-and-conditions" /> I accept the +terms and conditions
    </label>
    <div class="button-container">
        <input id="submitbutton" type = "submit" value = "submit" />
    </div>    
    </form>
</div>
<script>
    const dialog = document.querySelector("dialog");
    const showButton = document.querySelector("dialog + button");
    const closeButton = document.querySelector("dialog button");
    
    // "Show the dialog" button opens the dialog modally
    showButton.addEventListener("click", () => {
      dialog.showModal();
    });
    
    // "Close" button closes the dialog
    closeButton.addEventListener("click", () => {
      dialog.close();
    });

    </script>
</body>
</html>