{{ block title }}

{{ endblock }}
{{ block content }}

{{formfields}}



<div class="mycontainer"> 
        
        
    <div class="title">
        <div class="title_right"> <p> <b> Payment </b>  </p> </div>
    </div>
           
      <div class="scores">
          <div class="ex"> <p> <b> The game has finished. <br> Thanks for participating in our study. <br> here is yours and your co-player's final score:
      </p> </div>


        {{ if player.id_in_group == 1 }}

                    <div class="scores_left"> <p> <b> your trial score: {{ group.p1TotalScore }}  </b>  </p>

       {{endif}}
        {{ if player.id_in_group == 2 }}


                <div class="scores_left"> <p> <b> your trial score: {{ group.p2TotalScore }}  </b>  </p>

       {{endif}}

        </div>
        {{ if player.id_in_group == 1 }}
          <div class="scores_right"> <p> <b>Co-Player trial score: {{ group.p2TotalScore}} </b>  </p> </div>

          {{endif}}
          {{ if player.id_in_group == 2 }}
          <div class="scores_right"> <p> <b>Co-Player trial score: {{ group.p1TotalScore }} </b>  </p> </div>

          {{endif}}

      </div>

          <div class="end"> <p>   please wait for 30 Seconds to be redirected to the prolific page to get your payment.
          <br>  Jan Gläscher: glaescher@uke.de  , Sepideh Khoneiveh: s.khoneiveh@uke.de <br> Wish you all the bests.
          </p>
          </div>

    

    </div>
        
    <style>


.modal-content{
     background-color:rgb(163, 1, 1);
     color:white
}
.modal-content {
    overflow:hidden;
}
.modal-footer button {
    background-color: white;
    color: black;}
    .modal-footer button:hover {
    background-color: white;
    color: black;}


.otree-body{
    padding: 0;
    max-width: calc(100vw - 375px);
    max-height: calc(100vh - 16px);
}

.page-header {
    margin-top: 3px;
    margin-bottom: 0;
    padding-top: 0;
}


.mycontainer{
    width: 100%;
    height: 98vh;
    outline-style: solid;
    background-color:aliceblue;
}

.title{
    width: 100%;
    height: 20vh;
    border-bottom-style: solid;
}


.title_right{
    width: 100%;
    height: 20vh;
    float: right;
}

.title_right p {
    text-align: center;
    font-family: 'Oxygen', sans-serif;
    font-size: 4vh;
    padding-top: 50px;
}

.ex{
    width: 100%;
    height: 25vh;
    text-align: center;
    background-color:aliceblue;
    font-family: 'Oxygen', sans-serif;
    font-size: 3vh;
}

.scores{
    width: 100%;
    height: 35vh;
    background-color:aliceblue; 
}


.scores_left{
    width: 49%;
    height: 33vh;
    background-color:aliceblue; 
    position: relative;
    float: left;
}

.scores_left p{
    font-family: 'Oxygen', sans-serif;
    font-size: 3vh;
    margin-top:5vh;
    margin-left:20vh;
    color: blue;

}

.scores_right{
    width: 48%;
    height: 33vh;
    background-color:aliceblue;
    float: right;
}

.scores_right p{
    font-family: 'Oxygen', sans-serif;
    font-size: 3vh;
    margin-top:5vh;
    margin-left:15vh;
    color: orange;
}


.end{
    width: 100%;
    height: 15vh;
    background-color:aliceblue;

}

.end p{
    text-align: center;
    margin-top:1vh;
    font-family: 'Oxygen', sans-serif;
    font-size: 2vh;
}


@media screen and  (min-width: 1900px) and (max-width: 2200px) {
   
   .title_left img {
       height: 90%;
       width: 90%;
   }
   
   
   }
   
   @media screen and (min-width: 2200px) and (max-width: 2500px) {
      
   
   .title_left img {
       height: 85%;
       width: 85%;

   }
 
   }
   
   @media screen and  (min-width: 2500px) {
   
   
   .title_left img {
       height: 80%;
       width: 80%;
   }
   
   }

    </style>


<script>


    window.onload = () => {



    var counter=setInterval(timer, 30000); //1000 will  run it every 1 second


    function timer()
    {
        clearInterval(counter);
        document.getElementById('form').submit();

    }

}

</script>



{{ endblock }}