Difference between revisions of "Team:TCFSH Taiwan/Demonstrate"

(Prototype team page)
 
 
(9 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
{{TCFSH_Taiwan}}
 
{{TCFSH_Taiwan}}
−
 
+
{{TCFSH_Taiwan/Navigation}}
 
<html>
 
<html>
 +
<head>
 +
<meta charset="UTF-8">
 +
 +
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
 +
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet">
 +
 +
<style type="text/css">
 +
#sideMenu, #top_title {display:none;}
 +
#content { padding:0px; width:100%; margin-top:-7px; margin-left:0px;}
 +
body {background-color:white; }
 +
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 +
#top_menu_inside {margin-left: 20px; margin-bottom: 0px;}
 +
 +
 +
html, body, div, span, applet, object, iframe,
 +
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 +
a, abbr, acronym, address, big, cite, code,
 +
del, dfn, em, font, img, ins, kbd, q, s, samp,
 +
small, strike, strong, sub, tt, var,
 +
b, u, i, center,
 +
dl, dt, dd, ol,
 +
fieldset, form, label, legend,
 +
table, caption, tbody, tfoot, thead, tr, th, td {
 +
    margin: 0;
 +
    padding: 0;
 +
    border: 0;
 +
    outline: 0;
 +
 +
}
 +
 +
 +
* {
 +
  font-family: 'Open Sans', sans-serif;
 +
    font-weight: 300;
 +
}
 +
body{
 +
    background-color:rgb(51,51,51) !important;
 +
    line-height:1;
 +
}
 +
h1{
 +
background-image:url('https://static.igem.org/mediawiki/2017/a/a9/Tcfshtaiwan_background.jpeg');
 +
}
 +
/*大圖*/
 +
@media screen and (min-width: 768px) {
 +
  .img-container{
 +
    height:auto ;
 +
    overflow:hidden ;
 +
    width:100%;
 +
  }
 +
  .main-img{
 +
    top: 0;
 +
    bottom: 0;
 +
    left: 0;
 +
    right: 0;
 +
    width: 100%;
 +
    margin: auto;
 +
    margin-top: 40px;
 +
    z-index:999;
 +
    }
 +
}
 +
@media screen and (orientation: portrait) {
 +
    .img-container{
 +
        height:auto;
 +
        overflow:none;
 +
        width:100%;
 +
    }
 +
    .main-img{
 +
        top: 0;
 +
        bottom: 0;
 +
        left: 0;
 +
        right: 0;
 +
        width: 100%;
 +
        margin: auto;
 +
        z-index:999;
 +
    }
 +
}
 +
 +
/*scroll navigaiton*/
 +
nav {
 +
  padding: 18px;
 +
  position: fixed;
 +
  height: auto;
 +
  left:0.5vw;
 +
  width: auto;
 +
  z-index: 9999;
 +
  top:15%;
 +
  margin: auto;
 +
}
 +
 +
nav .wrapper {
 +
  padding: 0;
 +
  width:47%;
 +
  height: 785px;
 +
}
 +
 +
nav .nodes {
 +
  position: relative;
 +
  margin-top: 1px;
 +
  margin-left: 1px;
 +
 +
}
 +
 +
.line {
 +
  position: absolute;
 +
  width:1px;
 +
  height:440px;
 +
  top: 13px;
 +
}
 +
.line .red {
 +
  width:1px;    /*調line長度*/
 +
  height:50%; /*line寬度*/
 +
  position:relative;
 +
 +
}
 +
 +
.line .blue {
 +
  width: 1px;  /*line寬度*/
 +
  height: 35.5%;  /*調line長度*/
 +
  position:relative;
 +
  left:51px;
 +
 +
}
 +
.line .red-container {
 +
  position:relative;
 +
  width: 4px;
 +
}
 +
.line .red {
 +
  background-color:#00D6FF;/*cover line color*/
 +
  *zoom: 1;
 +
  background-size: 100%;
 +
}
 +
.line .blue {
 +
  background-color: white;/*line color*/
 +
  *zoom: 1;
 +
  background-size: 100%;
 +
 +
}
 +
 +
.node {
 +
  margin-left: 40px;/*調node間距*/
 +
  width: 20px;
 +
  height: 20px;
 +
  margin-top: 30px;
 +
  position: relative;
 +
}
 +
.node .splash {
 +
  box-shadow: 0px 0px 8px 2px rgba(69, 174, 233, 0.53);
 +
  transform: translateZ(0px) scale(1);
 +
  position: absolute;
 +
  width: 20px;
 +
  height: 20px;
 +
  border-radius: 100%;
 +
  pointer-events: none;
 +
  opacity: 1;
 +
}
 +
.node.active .active-circle {
 +
  transform: scale(1);
 +
  opacity: 1;
 +
  background:white;/*active circle color*/
 +
  left:1.6px; 
 +
}
 +
.node.active .splash {
 +
  transition: transform 1200ms, opacity 1500ms;
 +
  transform: translateZ(0px) scale(2.5);
 +
  opacity: 0 !important;
 +
 +
}
 +
.node.active .inactive-circle {
 +
  transition: opacity 200ms;
 +
  opacity: 0;
 +
}
 +
.node .active-circle {
 +
  transition: all 300ms cubic-bezier(0.63, 0.62, 0.48, 1.84);
 +
  transform: scale(0.7);
 +
  position: absolute;
 +
  opacity: 0;
 +
  width: 20px;
 +
  height: 20px;
 +
  border-radius: 100%;
 +
  background-color: #4b1202;
 +
  *zoom: 1;
 +
  background-size: 100%;
 +
 +
}
 +
.node .active-circle .cover {
 +
  transform: translateZ(0px);
 +
  width: 16px;
 +
  height: 16px;
 +
  background:red;/*active circle color */
 +
  border-radius: 100%;
 +
  position: absolute;
 +
  top: 2px;
 +
  left: 2px;
 +
}
 +
 +
.node .inactive-circle {
 +
  transition: all 300ms cubic-bezier(0.63, 0.62, 0.48, 1.84);
 +
  width: 14px;
 +
  height: 14px;
 +
  display: block;
 +
  background: #000;
 +
  position: absolute;
 +
  border-radius: 100%;
 +
  border: 2px solid white;
 +
  top: 3px;
 +
  left: 3px;
 +
}
 +
.node:hover {
 +
  cursor: pointer;
 +
}
 +
.node:hover .active-circle {
 +
  transition: all 200ms cubic-bezier(0.63, 0.62, 0.48, 1.84);
 +
  transform: scale(0.84);
 +
}
 +
 +
.node:hover .inactive-circle {
 +
  transition: all 200ms cubic-bezier(0.63, 0.62, 0.48, 1.84);
 +
  transform: scale(0.85);
 +
}
 +
 +
/*left-topic*/
 +
 +
.topic{
 +
    position:relative;
 +
    margin-top:0vh !important;
 +
    width:200px;
 +
    height:auto;
 +
    left:210px;
 +
    float:right;
 +
    color:#F3F7F7;
 +
}
 +
.text_color{
 +
    color:#F3F7F7;
 +
    font-size:12pt !important;
 +
}
 +
/*content*/
 +
.content_container{
 +
    position:relative;
 +
    left:6.5vw;
 +
    right:6.5vw;
 +
    margin:0 auto;
 +
    width:60vw;
 +
    height:auto;
 +
}
 +
 +
.reference-content{
 +
    font-size:13pt !important;
 +
    text-align:justify;
 +
    color:#F3F7F7;
 +
    padding-top:15px;
 +
    padding-bottom:15px;
 +
}
 +
.title{
 +
    font-size:25pt !important;
 +
    color:#ffd11a;
 +
    text-shadow:1px 1px 10px rgb(153, 153, 255);
 +
    border-left:3px solid rgb(153, 153, 255);
 +
    padding-left:10px !important; 
 +
    margin-top:20px;
 +
    margin-bottom:10px;
 +
    font-weight:bold;
 +
}
 +
.content{
 +
    font-size:15pt !important;
 +
    text-align:justify;
 +
    text-indent:2em;
 +
    color:#F3F7F7;
 +
    padding-left:40px;
 +
    padding-top:15px;
 +
    padding-bottom:15px;
 +
}
 +
 +
 +
/*second title*/
 +
.content-1{
 +
    font-size:19pt !important;
 +
    text-align:justify;
 +
    color:#F3F7F7;
 +
    font-weight: bold !important;
 +
    padding-top:30px;
 +
    padding-bottom:10px
 +
    font-weight:400 !important;
 +
}
 +
 +
.content-image{
 +
    text-align:center !important;
 +
    color:#F3F7F7 !important;
 +
    font-size:12pt !important;
 +
    padding-top:10px;
 +
    padding-bottom:50px;
 +
}
 +
 +
 +
.appear{
 +
    display:none;
 +
   
 +
}
 +
.list{
 +
    font-size:15pt !important;
 +
    text-align:justify;
 +
    color:#F3F7F7;
 +
    padding-top:15px;
 +
    padding-bottom:15px;
 +
    margin-left:10px !important;
 +
    position:relative;
 +
}
 +
.quote{
 +
    font-size:17pt !important;
 +
    text-align:justify;
 +
    color:#F3F7F7;
 +
    text-indent:2em !important;
 +
    padding-left:40px;
 +
    padding-top:15px;
 +
    padding-bottom:15px;
 +
}
 +
 +
 +
/*image*/
 +
.web{
 +
    position:fixed !important;
 +
    left:0%;
 +
    bottom:0%;
 +
    display:block;
 +
    margin: auto;
 +
}
 +
.right{
 +
    position:fixed !important;
 +
    bottom:-15px;
 +
    right:0vw;
 +
    margin: auto;
 +
}
 +
 +
 +
 +
 +
.img-position{
 +
    position:absolute;
 +
    z-index:-1;
 +
}
 +
.box{
 +
    width:auto;
 +
    padding-top:10px;
 +
    padding-bottom:10px;
 +
}
 +
.picture{
 +
    position:relative;
 +
    left:7vw;
 +
    width:80%;
 +
}
 +
 +
.picture-1{
 +
    position:relative;
 +
    left:15vw;
 +
    width:50%;
 +
}
 +
.bigphoto{
 +
      margin: auto;
 +
      display: block;
 +
    }
 +
 +
</style>
 +
</head>
 +
<body>
 +
<nav id="scroll">
 +
    <div class="wrapper">
 +
     
 +
  <div class="nodes">
 +
            <div class="line">
 +
                <div class="blue">
 +
                    <div class="red-container">
 +
                        <div class="red"></div>
 +
                    </div>
 +
                </div>
 +
          </div>
 +
 
 +
          <div class="node">
 +
          <div class="topic"><p class="text_color">Introduction</p></div>
 +
            <div class="active-circle">
 +
              <div class="splash"></div>
 +
              <div class="cover">   
 +
              </div>
 +
            </div>
 +
            <div class="inactive-circle">
 +
              <div class="small-cover">
 +
              </div>
 +
            </div>
 +
          </div>
 +
 
 +
          <div class="node">
 +
          <div class="topic"><p class="text_color">Device</p></div>
 +
            <div class="active-circle">
 +
              <div class="splash"></div>
 +
              <div class="cover">   
 +
              </div>
 +
            </div>
 +
            <div class="inactive-circle">
 +
              <div class="small-cover">
 +
              </div>
 +
            </div>
 +
          </div>
 +
 
 +
          <div class="node">
 +
          <div class="topic"><p class="text_color">Steps</p></div>
 +
            <div class="active-circle">
 +
              <div class="splash"></div>
 +
              <div class="cover">
 +
              </div>
 +
            </div>
 +
            <div class="inactive-circle">
 +
              <div class="small-cover">
 +
              </div>
 +
            </div>
 +
          </div>
 +
 +
 +
          <div class="node">
 +
          <div class="topic"><p class="text_color">Safety</p></div>
 +
            <div class="active-circle">
 +
              <div class="splash"></div>
 +
              <div class="cover">
 +
              </div>
 +
            </div>
 +
            <div class="inactive-circle">
 +
              <div class="small-cover">
 +
              </div>
 +
            </div>
 +
          </div>
 +
 +
 +
</nav>
 +
 +
 +
 +
<h1>
 +
<!--圖片-->
 +
  <div class="img-container">
 +
        <img src="https://static.igem.org/mediawiki/2017/2/27/Devicetcfshnew.jpeg" class="main-img" width="100%">
 +
  </div>
 +
 +
 +
<!--wiki content-->
  
 +
<section class="content_container">
  
 +
  <div>
 +
    <p class="title">Introduction</p>
 +
    <p class="content">We designed a device to detect harmful UV lights and high temperature, and we are able to confirm if it is working. The original color of our device is light green, but when it is exposed to excess UV light, its color will turn red. On the other hand, if the device is left in an environment of high temperature for too long, it will turn blue. It should be noted that if the device is not effective at all, it will be colorless, namely, white. Our design of the device will prevent <span style="font-style:italic;">E. coli</span> from leaking out, and the <span style="font-style:italic;">E. coli</span> in it will be annihilated after use. In the end, it can be freely disposed of without causing any potential health concern.</p>
 +
  </div>
 +
  <div >
 +
    <p class="title">Device<p>
 +
    <img src="https://static.igem.org/mediawiki/2017/d/d8/Devicetcfsh.png" class="bigphoto" width="70%">
 +
    <p class="content">The device is a non-recyclable sticker, with a plastic wrap containing LB (<span style="font-style:italic;">E. coli</span>’s food) and two kinds of bubbles. One is the “activating bubble,” which is filled with dried <span style="font-style:italic;">E. coli</span> The other is the “terminating bubble,” which contains antiseptics to kill the <span style="font-style:italic;">E. coli</span> after use. Under the plastic is a layer of viscose, making it possible for the device to stick to the surface of another object.</p>
 +
  </div>
  
−
<div class="column full_size judges-will-not-evaluate">
+
  <div>
−
<h3>★  ALERT! </h3>
+
    <p class="title">Steps</p>
−
<p>This page is used by the judges to evaluate your team for the <a href="https://2017.igem.org/Judging/Medals">medal criterion</a> or <a href="https://2017.igem.org/Judging/Awards"> award listed above</a>. </p>
+
    <p class="content">The following steps are the correct way to use our product. First, crush the “activating bubble,” and stick the sticker on the cargo. Second, when the cargo arrives at its destination, check the color of the sticker. Finally, crush the “terminating bubble,” and simply dispose of it.</p>
−
<p> Delete this box in order to be evaluated for this medal criterion and/or award. See more information at <a href="https://2017.igem.org/Judging/Pages_for_Awards"> Instructions for Pages for awards</a>.</p>
+
  </div>
−
</div>
+
  <div>
−
<div class="clear"></div>
+
    <p class="title">Safety</p>
 +
    <p class="content">Many may have the concern about the safety issue of our device. They are afraid that the bacteria in our device will leak out and cause damage to the human body or the environment. Rest assured because the device actually comes with a triple protection design.(See more safety in <a href="https://2017.igem.org/Team:TCFSH_Taiwan/Safety"><font style="color: red">Safety</font></a>)</p>
 +
  </div>
  
 +
  <div>
 +
    <p class="title">Further consideration</p>
 +
    <p class="content">We plan to disign a software as the follow picture shows</p>
 +
    <img src="https://static.igem.org/mediawiki/2017/d/da/Device_modeling.png" class="'bigphoto" width="70%">
 +
    <p class="content">    </p>
 +
  </div>
 +
</section>
 +
</h1>
  
−
<div class="column full_size">
 
−
<h1>Demonstrate</h1>
 
−
<h3>Gold Medal Criterion #4</h3>
 
  
−
<p>
 
−
Teams that can show their system working under real world conditions are usually good at impressing the judges in iGEM. To achieve gold medal criterion #4, convince the judges that your project works. There are many ways in which your project working could be demonstrated, so there is more than one way to meet this requirement. This gold medal criterion was introduced in 2016, so check our what 2016 teams did to achieve a their gold medals!
 
−
</p>
 
  
−
<p>
+
<!--JS-->
−
Please see the <a href="https://2017.igem.org/Judging/Medals">2017 Medals Page</a> for more information.
+
−
</p>
+
  
 +
<script>
  
−
</div>
+
var $document = $( document.body );
 +
var $revealBar = $( '.red-container' );
 +
var wrapperHeight = $document.height();
 +
var stepDistance = 101;
 +
var documentHeight = window.innerHeight;
 +
var positions = [];
 +
var heights = [];
 +
var elements = $( '.title:not(".main")' );
  
 +
// Cache heights and positions
 +
for( var i = 0; i < elements.length; i++ ) {
 +
  var $element = $(elements[i]);
 +
  var height = $element.offset().top + documentHeight;
 +
  if (height > wrapperHeight) {
 +
    height = wrapperHeight;
 +
  }
 +
  positions.push(height);
 +
  heights.push($element.height());
 +
}
  
−
<div class="column half_size">
+
var $nodes = $( '.node' );
  
−
<h4> What should we do for our demonstration?</h4>
+
// Should totally be debounced /w animation frame. I know,
 +
// this whole thing is slightly inefficient.
 +
// And magic numbers too!
 +
$( document ).scroll( function() {
  
−
<h5> Standard teams </h5>
+
  nodeTop = $document.scrollTop() + documentHeight + 1;
 +
  var current = 0;
 +
 
 +
  // Active/non active states
 +
  for( var i = 0; i < positions.length; i++ ) {
 +
    if(nodeTop >= positions[i]-80) {
 +
      current = i;
 +
      $nodes.eq( i ).addClass( 'active' );
 +
    } else {
 +
      $nodes.eq( i ).removeClass( 'active' );
 +
    }
 +
  }
 +
 
 +
 
 +
  if ( current < elements.length ) {
 +
    var nextStep = (nodeTop - positions[current]) / (positions[current + 1] - positions[current]);
 +
    var totalWidth = ( current * stepDistance ) + (nextStep * stepDistance);
 +
$revealBar.height( totalWidth+10 );
 +
  }
  
−
<p>
+
})
−
If you have built a proof of concept system, you can demonstrate it working under real world conditions. If you have built a biological device that is intended to be a sensor, can you show it detecting whatever it is intended to sense. If it is intended to work in the field, you can show how this might work using a simulated version in the lab, or a simulation of your device in the field.<strong> Please note biological materials must not be taken out of the lab</strong>.
+
−
</p>
+
−
</div>
+
  
−
<div class="column half_size">
+
// Clicking the nodes... again, nothing special ;)
 +
$nodes.each( function( index ) {
 +
  var $node = $( this );
 +
  $node.click( function() {
 +
    $('html, body').animate({ scrollTop: (positions[ index ] - documentHeight)-80}, 1000 );
 +
  });
 +
})
 +
//scroll_relocate
 +
function sticky_relocate() {
 +
    var window_top = $(window).scrollTop();
 +
    var div_top = $('.main-img').offset().top;;
 +
    if (window_top > div_top+500) {
 +
        $('#scroll').removeClass('appear');
 +
    } else {
 +
        $('#scroll').addClass('appear');
 +
    };
 +
    if(window_top > div_top+500) {
 +
        $('#web').fadeIn(200);
 +
        $('#right').fadeIn(200);
 +
    } else {
 +
        $('#web').fadeOut(200);
 +
        $('#right').fadeOut(200);
 +
    }
 +
}
  
−
<br>
+
$(function () {
−
<h5> Special track teams </h5>
+
    $(window).scroll(sticky_relocate);
 +
    sticky_relocate();
 +
});
  
−
<p>
 
−
Special track teams can achieve this medal criterion by bringing their work to the Jamboree and showcasing it in the track event. Art & Design, Measurement, Hardware and Software tracks will all have showcase events at the Giant Jamboree.<strong> Please note biological materials must not be taken out of the lab</strong>.
 
−
</p>
 
  
  
−
</div>
+
$(document).ready(function(
  
 +
){})
  
  
 +
</script>
 +
</body>
 
</html>
 
</html>
 +
{{TCFSH_Taiwan_footer}}

Latest revision as of 04:00, 2 November 2017

HOME
TEAM
PROJECT
Description
Design
Experiments
Notebook
InterLab
Contribution
Model
Results
Demonstrate
Improve
Attributions
PARTS
Parts
Basic Parts
Composite Parts
Part Collection
SAFETY
HUMAN PRACTICES
Silver HP
Integrated and Gold
Public Engagement
AWARDS
Applied Design
Entrepreneurship
Hardware
Measurement
Model
Plant
Software
JUDGING FORM

Introduction

We designed a device to detect harmful UV lights and high temperature, and we are able to confirm if it is working. The original color of our device is light green, but when it is exposed to excess UV light, its color will turn red. On the other hand, if the device is left in an environment of high temperature for too long, it will turn blue. It should be noted that if the device is not effective at all, it will be colorless, namely, white. Our design of the device will prevent E. coli from leaking out, and the E. coli in it will be annihilated after use. In the end, it can be freely disposed of without causing any potential health concern.

Device

The device is a non-recyclable sticker, with a plastic wrap containing LB (E. coli’s food) and two kinds of bubbles. One is the “activating bubble,” which is filled with dried E. coli The other is the “terminating bubble,” which contains antiseptics to kill the E. coli after use. Under the plastic is a layer of viscose, making it possible for the device to stick to the surface of another object.

Steps

The following steps are the correct way to use our product. First, crush the “activating bubble,” and stick the sticker on the cargo. Second, when the cargo arrives at its destination, check the color of the sticker. Finally, crush the “terminating bubble,” and simply dispose of it.

Safety

Many may have the concern about the safety issue of our device. They are afraid that the bacteria in our device will leak out and cause damage to the human body or the environment. Rest assured because the device actually comes with a triple protection design.(See more safety in Safety)

Further consideration

We plan to disign a software as the follow picture shows