{{ extends "global/Page.html" }}
{{ block title }} <center>Mobile check 1/2</center>{{ endblock }}

{{ block content }}

<p>
    Touch the screen
</p>
<p>
    If you do not see a button to move on to the next page, then your device is not compatible with the study
</p>
<center>
    <button id="mobileokbutton" class="otree-btn-next btn btn-primary">Next</button>
</center>

<br><br>
{{ if pilot == 1 }}
    <button class="otree-btn-next btn btn-primary">(pilot)</button>
{{ endif }}


{{ endblock }}

{{ block scripts }}
<script>
document.addEventListener("DOMContentLoaded", function () {
  document.querySelectorAll(".powered-by-otree")
  	.forEach(el => el.remove());
});

document.body.style.background = '#91D8FF';

// https://codeburst.io/the-only-way-to-detect-touch-with-javascript-7791a3346685
document.addEventListener('touchstart', function() {
  	document.getElementById('mobileokbutton').style.visibility = 'visible';
});

</script>
{{ endblock }}