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

{% block title %}
    <u>{{ title_text }}</u>
{% endblock %}


{% block styles %}

    <style>
    body{
       text-align: center;
       align-items: center;
       justify-content: center;
    }

.button {
    font-size:30px; padding:15px 60px; margin:auto; display: block;
    }

    p{
    font-size: 22px;
    text-indent:0;
}
li{
    font-size: 22px;
}
ul{
    font-size: 22px;
}
h2{
    text-align: center;
}

    </style>

<link href="{% static 'repeated_CT/Wheel.css' %}" rel="stylesheet">

{% endblock %}

{% block content %}
<p>
           The chosen ball has a <span style="color: red; font-weight: bold;">Red</span> core one out of three times and a <span style="color: blue; font-weight: bold;">Blue</span> core twp out of three times.
       </p>

       <p>Please make your decision on what message to send, using the following two spinning wheels.</p>

<input type="hidden" name="check_slider_one" value="" id="check_slider_one">
<div class="range" style="float: left; margin-left: 80px;">
  <input type="range" name="recom_0" min="0" max="100" value="" class="count">
  <div class="slice left">
    <div class="blocker"></div>
  </div>
  <div class="slice right">
    <div class="blocker"></div>
  </div>
  <div class="dial" tabindex="0"></div>
<span class="info">
      <span class="count">0</span>
  % red
    <span class="count2">100</span>
    % blue
  </span>
             <div class="notice"><p>When the color of the shell is <span style="color: blue; font-weight: bold;">Blue</span></p></div>
</div>


<input type="hidden" name="check_slider_two" value="" id="check_slider_two">
<div class="range2" style="float: right; margin-right: 100px;">
  <input type="range" name="recom_1" min="0" max="100" value="" class="count3">
  <div class="slice2 left">
    <div class="blocker2"></div>
  </div>
  <div class="slice2 right">
    <div class="blocker2"></div>
  </div>
  <div class="dial2" tabindex="0"></div>
<span class="info2">
    <span class="count4">100</span>
    % red
      <span class="count3">0</span>
    % blue
  </span>
    <div class="notice2"><p>When the color of the shell is <span style="color: red; font-weight: bold;">Red</span></p></div>
</div><div style="clear:both;"></div>

       <br>
<br>
<br>
<br>
<br>
        <button class="button">Submit</button>



{% endblock %}


{% block scripts %}

<script src="{% static 'repeated_CT/Wheel.js' %}"></script>

{% endblock %}