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

{% block title %}
    Task         {% if player.participant.first_task_order == 0%}
        1
        {% elif player.participant.first_task_order == 1%}
        2
        {% endif %}: <br>Coin Flipping
{% endblock %}

{% block content %}

<br>
<br>

<div style="text-align: left; margin-left:11%; margin-right: 11%">
        You will now begin the Coin Flipping Task.<Br>

<br>

Recall that every 6 seconds, the computer will flip a virtual coin for you. <br><br>

    This will happen for a total of 10 times.  <br>

        <br>
Each heads flipped by the computer will be worth 3 ECUs.<br>
        <br>





            Your earnings in ECUs =
                <div style="        text-align: center;">
                <strong><em>No. of heads flipped × 3</em>
                </div>
    </div>

<br>
<br>
<br>


<div style = " display: flex; justify-content: right; align-items: right;  ">
        <button class="btn btn-danger">Begin Task</button>
    </div>

<style>


    h2 {
        color: #2c3e50;
        text-align: center;
        margin-bottom: 25px;
    }

    .instructions-text {
        line-height: 1.6;
        font-size: 18px;
    }

    .key-points {
        background-color: #e8f4fc;
        padding: 15px;
        border-left: 4px solid #3498db;
        margin: 20px 0;
    }

    .earnings-formula {
        margin: 30px 0;
        text-align: center;
    }

    .formula {
        font-size: 20px;
        color: #2c3e50;
        margin-top: 10px;
    }

    .btn-next {
        display: block;
        width: 200px;
        margin: 30px auto 0;
        padding: 10px;
        background-color: #3498db;
        color: white;
        border: none;
        border-radius: 5px;
        font-size: 18px;
        cursor: pointer;
        text-align: center;
    }

    .btn-next:hover {
        background-color: #2980b9;
    }
</style>



{% endblock %}