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

{% block title %}
    <div class=" alert alert-warning" align="center">Runde {{player.round_number}} von {{Constants.num_rounds}}</div>
{% endblock %}

{% block content %}

<div class="card bg-light m-3">
    <div class="card-body">
<br><br><br><br>
        {% if player.id_in_group == 1 %}
<p align="center">Als nächstes sehen Sie ein Bild für 6 Sekunden. <br>Ihre Aufgabe ist es, die Anzahl der auf dem Bild gezeigten Objekte zu schätzen.<br><br>
    Ihr zugewiesener Prüfer wird dasselbe Bild 30 Sekunden lang betrachten.</p><br>
        {% elif player.id_in_group == 2 %}
<p align="center">Als nächstes betrachten Sie ein Bild für 30 Sekunden.<br>
    Ihre Aufgabe ist es zu entscheiden, ob die Schätzung des <br>Schätzers gut genug ist, um ein Preisgeld von
    20 Talern zu verdienen.<br><br>
    Ihr zugewiesener Schätzer wird dasselbe Bild 6 Sekunden lang sehen.</p><br>
        {% else %}
<p align="center">empty<br><br>
</p><br>
        {% endif %}
<br>
<br>
<button type="submit" id="iii" class="btn btn-primary btn-large">Start</button>

<br><br><br><br>
 </div>
</div>

<br>




<br>
<br>
<br>
<br>




<style>

.input-group {

    margin-left: auto;
    margin-right: auto;
    //width: 200px
    //margin-left: 25px;
}

.form-control  {
    //color: #3e93e8;
    margin-left: 25px;
    //margin-right: 300px;
    //min-width: 150px;
}

//.otree-form {
//    width: 80%;
//    padding-left: 200px
//}


  .otree-form  {
       text-align: center;
  }

  .otree-timer {
    color: #3e3a3a;
    background-color: #c3c3c300;
    // background-color: #c3c3c39e;
    border-color: #c3c3c300;
    // border-color: #c3c3c39e;
    text-align: center;
    //position: absolute;
    //bottom: 100%;

  }



 .otree-timer {
 display: none;
%order: -1;
}

.debug-info {
//  display: none;
order: 3;
}
</style>

{% endblock %}