Difference between revisions of "Team:INSA-UPS France/test/description"

Line 93: Line 93:
  
  
 +
<style>
  
 +
 +
.interface_container{
 +
  width:80%;
 +
  margin:0px auto;
 +
  background-color: white;
 +
  height:100%;
 +
  padding:20px;
 +
  text-align: center;
 +
}
 +
 +
  input[type=range] {
 +
  height: 35px;
 +
  -webkit-appearance: none;
 +
  margin: 10px 0;
 +
  width: 100%;
 +
  text-align: center;
 +
}
 +
input[type=range]:focus {
 +
  outline: none;
 +
}
 +
input[type=range]::-webkit-slider-runnable-track {
 +
  width: 100%;
 +
  height: 13px;
 +
  cursor: pointer;
 +
  animate: 0.2s;
 +
  box-shadow: 1px 1px 1px #50555C;
 +
  background: #50555C;
 +
  border-radius: 14px;
 +
  border: 0px solid #000000;
 +
}
 +
input[type=range]::-webkit-slider-thumb {
 +
  box-shadow: 0px 0px 0px #000000;
 +
  border: 0px solid #000000;
 +
  height: 29px;
 +
  width: 29px;
 +
  border-radius: 12px;
 +
  background: #529DE1;
 +
  cursor: pointer;
 +
  -webkit-appearance: none;
 +
  margin-top: -8px;
 +
}
 +
input[type=range]:focus::-webkit-slider-runnable-track {
 +
  background: #50555C;
 +
}
 +
input[type=range]::-moz-range-track {
 +
  width: 100%;
 +
  height: 13px;
 +
  cursor: pointer;
 +
  animate: 0.2s;
 +
  box-shadow: 1px 1px 1px #50555C;
 +
  background: #50555C;
 +
  border-radius: 14px;
 +
  border: 0px solid #000000;
 +
}
 +
input[type=range]::-moz-range-thumb {
 +
  box-shadow: 0px 0px 0px #000000;
 +
  border: 0px solid #000000;
 +
  height: 29px;
 +
  width: 29px;
 +
  border-radius: 12px;
 +
  background: #529DE1;
 +
  cursor: pointer;
 +
}
 +
input[type=range]::-ms-track {
 +
  width: 100%;
 +
  height: 13px;
 +
  cursor: pointer;
 +
  animate: 0.2s;
 +
  background: transparent;
 +
  border-color: transparent;
 +
  color: transparent;
 +
}
 +
input[type=range]::-ms-fill-lower {
 +
  background: #50555C;
 +
  border: 0px solid #000000;
 +
  border-radius: 28px;
 +
  box-shadow: 1px 1px 1px #50555C;
 +
}
 +
input[type=range]::-ms-fill-upper {
 +
  background: #50555C;
 +
  border: 0px solid #000000;
 +
  border-radius: 28px;
 +
  box-shadow: 1px 1px 1px #50555C;
 +
}
 +
input[type=range]::-ms-thumb {
 +
  margin-top: 1px;
 +
  box-shadow: 0px 0px 0px #000000;
 +
  border: 0px solid #000000;
 +
  height: 29px;
 +
  width: 29px;
 +
  border-radius: 12px;
 +
  background: #529DE1;
 +
  cursor: pointer;
 +
}
 +
input[type=range]:focus::-ms-fill-lower {
 +
  background: #50555C;
 +
}
 +
input[type=range]:focus::-ms-fill-upper {
 +
  background: #50555C;
 +
}
 +
 +
/* Sliders */
 +
 +
.sliders_container{
 +
  border:solid white 1px;
 +
  width:200px;
 +
  height:300px;
 +
}
 +
 +
.sliders{
 +
padding:10px;
 +
}
 +
 +
.sliders > div{
 +
  margin:40px 0px 0px 0px;
 +
}
 +
 +
/* Curve */
 +
 +
.Vc_time_curve{
 +
  width:500px;
 +
  height:300px;
 +
  float:right;
 +
}
 +
 +
/* Graphical display */
 +
 +
.graphical_display{
 +
  height:400px;
 +
  margin-top:20px;
 +
 +
}
 +
 +
.graphical_display .water_tank{
 +
  width:60%;
 +
  height:300px;
 +
  float:left;
 +
}
 +
.graphical_display .water_tank{
 +
  display:inline;
 +
}
 +
.water_tank svg.microorg_hidden{
 +
  opacity:0;
 +
}
 +
.water_tank svg{
 +
  transition: all 0.8s ease;
 +
}
 +
 +
.graphical_display .time_before_drinking{
 +
  width:35%;
 +
  height:100%;
 +
  float:right;
 +
}
 +
 +
#curve_to_draw{
 +
  height:100%;
 +
  width:100%;
 +
}
 +
 
 +
</style>
 +
 +
 +
 +
  <div class="interface_container">
 +
  <div class="model_interface">
 +
 +
        <div class="Vc_time_curve">
 +
          <!--<img src="Vc_time.png" alt="" style="height:100%;">-->
 +
          <canvas id="curve_to_draw">
 +
           
 +
          </canvas>
 +
        </div>
 +
 +
        <div class="sliders_container">
 +
        <div class="sliders">
 +
          <div id="sliderVc">
 +
            <div class="label_slider">
 +
              <i>V. cholerae</i> concentration:
 +
              <div>
 +
                10<sup>7</sup>
 +
              </div>
 +
            </div>
 +
            <input type="range" min="0" max="2" step="1" name="Vc">
 +
          </div>
 +
          <div id="sliderPp">
 +
            <div class="label_slider">
 +
              <i>P. pastoris</i> concentration:
 +
              <div>
 +
                10<sup>9</sup>
 +
              </div>
 +
            </div>
 +
            <input type="range" min="0" max="4" step="1" name="Pp">
 +
          </div>
 +
        </div>
 +
        </div>
 +
 +
 +
        <div class="graphical_display">
 +
          <div class="water_tank">
 +
           
 +
            <svg width="50" height="50" class="Vc_2">
 +
              <rect width="50" height="50" style="fill:rgb(255,0,0);"></rect>
 +
            </svg>
 +
            <svg width="50" height="50" class="Vc_2">
 +
              <rect width="50" height="50" style="fill:rgb(255,0,0);"></rect>
 +
            </svg>
 +
            <svg width="50" height="50" class="Vc_4">
 +
              <rect width="50" height="50" style="fill:rgb(255,0,0);"></rect>
 +
            </svg>
 +
            <svg width="50" height="50" class="Vc_4">
 +
              <rect width="50" height="50" style="fill:rgb(255,0,0);"></rect>
 +
            </svg>
 +
            <svg width="50" height="50" class="Vc_6 microorg_hidden">
 +
              <rect width="50" height="50" style="fill:rgb(255,0,0);"></rect>
 +
            </svg>
 +
            <svg width="50" height="50" class="Vc_6 microorg_hidden">
 +
              <rect width="50" height="50" style="fill:rgb(255,0,0);"></rect>
 +
            </svg>
 +
 +
            <br />
 +
 +
            <svg width="50" height="50" class="Pp_1">
 +
              <rect width="50" height="50" style="fill:rgb(0,255,0);"></rect>
 +
            </svg>
 +
            <svg width="50" height="50" class="Pp_2">
 +
              <rect width="50" height="50" style="fill:rgb(0,255,0);"></rect>
 +
            </svg>
 +
            <svg width="50" height="50" class="Pp_3">
 +
              <rect width="50" height="50" style="fill:rgb(0,255,0);"></rect>
 +
            </svg>
 +
            <svg width="50" height="50" class="Pp_4 microorg_hidden">
 +
              <rect width="50" height="50" style="fill:rgb(0,255,0);"></rect>
 +
            </svg>
 +
            <svg width="50" height="50" class="Pp_5 microorg_hidden">
 +
              <rect width="50" height="50" style="fill:rgb(0,255,0);"></rect>
 +
            </svg>
 +
 +
          </div>
 +
          <div class="time_before_drinking">
 +
           
 +
          </div>
 +
        </div>
 +
 +
       
 +
  </div>
 +
  </div>
  
  

Revision as of 15:52, 15 October 2017

Croc'n Cholera
iGEM UPS-INSA Toulouse 2017

Model Interface

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam, ea? Ex animi rerum deserunt necessitatibus commodi, illum tempora soluta officia quam voluptatibus nostrum quos, ea debitis incidunt ad laborum perspiciatis aliquid est porro corrupti ducimus minima sed vel fugiat! Itaque, earum, dolorum. Consequuntur iste magni, atque! Inventore cum expedita quo ipsam quam, accusamus, neque adipisci. Consequatur itaque possimus porro nemo similique debitis nostrum. Impedit pariatur minus voluptate corporis aperiam delectus minima recusandae facilis, quod! Voluptates iure reiciendis, earum veritatis eveniet architecto alias nobis, magnam possimus veniam quisquam asperiores ullam vitae impedit dolor dolorem, officiis. Ipsa labore placeat culpa facilis temporibus.

V. cholerae concentration:
107
P. pastoris concentration:
109

Officia repellendus ut harum totam quibusdam a minus in tempora voluptatum vero perferendis quae explicabo aut veritatis repudiandae non, necessitatibus magni ipsa quas doloribus suscipit, maxime. Atque repudiandae labore eius veritatis sit, illum officia. Error sit, nesciunt nulla! Molestiae nesciunt tempora similique voluptatum aperiam unde cumque necessitatibus quisquam modi dolorem est eligendi veritatis minus, ut non veniam praesentium adipisci voluptatem perspiciatis. Repudiandae temporibus eius saepe reprehenderit excepturi autem velit, eaque nostrum officiis iusto quisquam quod vero. Eum voluptate optio iure, alias vel ratione consectetur nostrum placeat, odit perspiciatis cum accusantium dignissimos illum sapiente quibusdam explicabo in eius similique? Architecto, a?