{% 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 'RCT_add/Wheel.css' %}" rel="stylesheet">

{% endblock %}

{% block content %}
<p>
           뽑힌 공의 core 색깔은 1/3 확률로 <span style="color: red; font-weight: bold;">Red</span>이고 2/3 확률로 <span style="color: blue; font-weight: bold;">Blue</span>입니다.
       </p>

       <p>다음 두 spinning wheel을 통해 어떤 메시지를 보낼 것인가에 대한 결정을 내려 주십시오.</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="recom2_0" min="0" max="100" value="0" 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>Shell이 <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="recom2_1" min="0" max="100" value="0" 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>Shell이 <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 'RCT_add/Wheel.js' %}"></script>

{% endblock %}