{{ 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%; }
.practice-end { text-align:center; }
.hand-position-image { display:block; width:min(85vw, 720px); max-height:405px; margin:1.25em auto 0.35em; object-fit:contain; }
.start-prompt { margin-top:2em; font-size:1.1em; }
.payment-warning { color:darkred; }
@media (max-height:800px) {
    .hand-position-image { width:auto; max-width:85vw; max-height:330px; margin-top:0.6em; }
    .start-prompt { margin-top:0.75em; }
}
</style>

<div class="task-page-shell practice-end">
    <h2 class="task-page-heading">Practice complete</h2>
    <p>The practice is now complete.</p>
    <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>
    <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="start-prompt">Press <strong>SPACE</strong> to start the task.</p>
    <p class="payment-warning">From the next trial onward, your choices will count toward your payment.</p>
</div>

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