{{ block title }}{{ endblock }}
{{ block content }}
<link rel="stylesheet" href="{{ static 'matrix_game/page_shell.css' }}">
<style>
body { display:flex; min-height:100vh; align-items:center; background:white; font-size:20px; }
.otree-body { width:100%; }
.hand-position-image { display:block; width:min(85vw, 720px); max-height:405px; margin:1.25em auto 0.35em; object-fit:contain; }
.space-prompt { margin-top:2em; text-align:center; font-size:1.1em; }
@media (max-height:800px) {
    .hand-position-image { width:auto; max-width:85vw; max-height:330px; margin-top:0.6em; }
    .space-prompt { margin-top:0.75em; }
}
</style>

<div class="task-page-shell">
    <h2 class="task-page-heading">Practice instructions</h2>
    <p>Place your <strong>left index finger</strong> on the <strong>F</strong> key and your <strong>right index finger</strong> on the <strong>J</strong> key.</p>
    <p>Press <strong>F</strong> to choose Left and <strong>J</strong> to choose Right.</p>
    <p>Keep your fingers on these keys during the task so that you can respond without looking down at the keyboard.</p>
    <img class="hand-position-image" src="{{ static 'matrix_game/keyboard_f_j_space.png' }}" alt="Correct hand position on the F and J keys">
    <p class="space-prompt">Press <strong>SPACE</strong> to begin the practice trial.</p>
</div>

<script>
document.addEventListener('keydown', function (event) {
    if (!event.repeat && event.code === 'Space') {
        event.preventDefault();
        document.querySelector('form').requestSubmit();
    }
});
</script>
{{ endblock }}