{{ extends "global/Page.html" }}

{{ block styles }}
    <link href="{% static 'global/css/checks.css' %}" rel="stylesheet">

{{ endblock }}

{{ block scripts }}
    <script src="{% static 'global/js/calibration.js' %}"></script> 
{{ endblock }}

{{ block PageContent }}
<input type="hidden" id="no-checks">

<div class="msgCal hidden-cal" id="Intro">
    Welcome! <br>
    Before we start, we will check everything works properly. 
    <div class="btn-wrapper">
        <button type="button" class="continue-btn" onclick="nextSlide()"> Ok </button>
    </div>
</div>

<div class="msgCal hidden-cal" id="Intro">
    Our experiment does not work properly in Safari, nor Brave. <br>
    If you are using any of these two browsers, please copy the following link and open it in another browser:
    <button type="button" id="copy-link" class="continue-btn"> Copy Link </button> <br>
    If you are using another browser (not Safari or Brave), press continue:
    <div class="btn-wrapper">
        <button type="button" class="continue-btn" onclick="nextSlide()"> Continue </button>
    </div>
</div>

<div class="msgCal hidden-cal" id="fs">
    In this experiment, we will require you to put your browser in fullscreen. <br>
    You can set fullscreen by:
    <div class="fs-instructions"></div>
</div>

<div class="msgCal hidden-cal" id="2long">
    It seems that you are having troubles setting up the Fullscreen. <br>
    You can set fullscreen by: 
    <div class="fs-instructions"></div>
    If it does not work, you will not be able to continue. <br>
    In that case, we kindly ask you to return your submission. <br>
    Apologies for the inconvenience. 
    <button type="button" class="continue-btn" onclick="returnExp()"> Return Experiment </button>
</div>

<div class="msgCal hidden-cal" id="success">
    Great! <br>
    We are all set! <br>
    Please press the button to continue with the experiment. <br>
    <button type="button" class="continue-btn" onclick="endPage()"> Continue </button>
</div>

<input type="hidden" name="sBrowser" id="sBrowser">
{{ endblock }}