{% extends "global/Page.html" %}
{% load otree static %}

{% block title %}
<div class="row align-items-center">
    <div class="col-9">
        &nbsp;
    </div>
    <div class="col-3 d-flex justify-content-center align-items-center">
        <div id="chosenColorText" style="font-size: 16px; font-weight: normal; margin:3%;">
            Your selected color:
        </div>
        <div id="selectedColor"
            style="background-color:{{player.participant.color}};
            height: 30px; width: 30px;margin:3%;">
        </div>
    </div>
</div>
{% endblock %}


{% block content %}
<div class="row"></div>
<div class="rounded border alert alert-info center text-center">
    <div class="col">
        <br></br>
        <h2>Thank you for reading the explanations.</h2>
        <br></br>
        <h2>Your task starts now.</h2>
        <br></br>
    </div>
</div>


<div class="col center center-align text-center" width="100%">
    <button id="next_page_btn" class="btn btn-primary px-3" >Start</button>
</div>

{% if testing %}
{{ formfield 'feedback_attentionScreen' }}
{% endif %}


{% endblock %}