Difference between revisions of "Team:TCFSH Taiwan"

 
Line 4: Line 4:
 
<head>
 
<head>
 
<meta charset="UTF-8">
 
<meta charset="UTF-8">
−
 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
 
<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">
+
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300" rel="stylesheet">
−
 
+
  
 
<style type="text/css">
 
<style type="text/css">
Line 15: Line 13:
 
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 
#top_menu_inside {margin-left: 20px; margin-bottom: 0px;}
 
#top_menu_inside {margin-left: 20px; margin-bottom: 0px;}
−
 
  
 
html, body, div, span, applet, object, iframe,
 
html, body, div, span, applet, object, iframe,
Line 32: Line 29:
  
 
}
 
}
−
 
  
 
* {
 
* {
 
   font-family: 'Open Sans', sans-serif;
 
   font-family: 'Open Sans', sans-serif;
 
     font-weight: 300;
 
     font-weight: 300;
 +
    font-style: normal;
 
}
 
}
 
body{
 
body{
−
     background-color:rgb(51,51,51) !important;
+
    margin:auto;
 +
     background:rgb(51,51,51);
 
     line-height:1;
 
     line-height:1;
 
}
 
}
−
 
 
h1{
 
h1{
 
background-image:url('https://static.igem.org/mediawiki/2017/a/a9/Tcfshtaiwan_background.jpeg');
 
background-image:url('https://static.igem.org/mediawiki/2017/a/a9/Tcfshtaiwan_background.jpeg');
Line 50: Line 47:
 
@media screen and (min-width: 768px) {
 
@media screen and (min-width: 768px) {
 
   .img-container{
 
   .img-container{
−
     height:auto ;
+
     height:100vh ;
 
     overflow:hidden ;
 
     overflow:hidden ;
 
     width:100%;
 
     width:100%;
−
    margin-top:10px;
 
 
   }
 
   }
−
  .main-img{
+
.bigphoto{
−
    top: 0;
+
      margin: auto;
−
    bottom: 0;
+
      margin-top: 60px;
−
    left: 0;
+
      display: block;
−
    right: 0;
+
−
    width: 100%;
+
−
    margin: auto;
+
−
    z-index:999;
+
−
    margin-top: 40px;
+
 
     }
 
     }
 
}
 
}
Line 81: Line 72:
 
         z-index:999;
 
         z-index:999;
 
     }
 
     }
−
}
 
−
/*scroll navigaiton*/
 
−
nav {
 
−
  padding: 18px;
 
−
  position: fixed;
 
−
  height: auto;
 
−
  left:0.5vw;
 
−
  width: auto;
 
−
  z-index: 9999;
 
−
  top:25%;
 
−
  margin: auto;
 
 
}
 
}
  
−
nav .wrapper {
+
/*box*/
−
  padding: 0;
+
.HP_image{
−
  width:100%;
+
    opacity:0.5;
−
  height: 785px;
+
 
}
 
}
−
 
+
.HP_image:hover{
−
nav .nodes {
+
    opacity:4;
−
  position: relative;
+
−
  margin-top: 1px;
+
−
  margin-left: 1px;
+
−
 
+
 
}
 
}
 +
.img-box1{
 +
    width:210px;
 +
    height:210px;
 +
    border:2px solid #F3F7F7;
 +
    border-radius:10px;
 +
    overflow:hidden;
 +
    margin-left:20%;
 +
    float:left;
 +
    color:white;
 +
    font-size:18pt;
 +
    font-weight:bold;
 +
    margin-top:3%;
 +
    margin-bottom:3%;
 +
    }
 +
.img-box1-1{
 +
    width:210px;
 +
    height:210px;
 +
    border:2px solid #F3F7F7;
 +
    border-radius:10px;
 +
    overflow:hidden;
 +
    margin-left:4%;
 +
    float:left;
 +
    color:white;
 +
    font-size:18pt;
 +
    font-weight:bold;
 +
    margin-top:3%;
 +
    margin-bottom:3%;
 +
    }
 +
.img-box1-2{
 +
    width:210px;
 +
    height:210px;
 +
    border:2px solid #F3F7F7;
 +
    border-radius:10px;
 +
    overflow:hidden;
 +
    margin-left:4%;
 +
    float:left;
 +
    color:white;
 +
    font-size:18pt;
 +
    font-weight:bold;
 +
    margin-top:3%;
 +
    margin-bottom:3%;
 +
    } 
 +
   
 +
.img-box2{
 +
    width:210px;
 +
    height:210px;
 +
    border:2px solid #F3F7F7;
 +
    border-radius:10px;
 +
    overflow:hidden;
 +
    margin-left:29%;
 +
    margin-top:7vh;
 +
    float:left;
 +
    color:white;
 +
    font-size:18pt;
 +
    font-weight:bold;
 +
    margin-bottom:30px;
 +
    }
 +
.img-box3{
 +
    width:210px;
 +
    height:210px;
 +
    border:2px solid #F3F7F7;
 +
    border-radius:10px;
 +
    overflow:hidden;
 +
    margin-left:9%;
 +
    margin-top:7vh;
 +
    float:left;
 +
    color:white;
 +
    font-size:18pt;
 +
    font-weight:bold;
 +
    margin-bottom:30px;
 +
    }
  
−
.line {
 
−
  position: absolute;
 
−
  width:1px;
 
−
  height:705px;
 
−
  top: 13px;
 
−
}
 
−
.line .red {
 
−
  width:1px;    /*調line長度*/
 
−
  height:47%; /*line寬度*/
 
−
  position:relative;
 
  
 +
.text{
 +
    position:absolute;
 +
    margin-top:80px;
 +
    margin-left:40px;
 +
    font-family: 'Open Sans', sans-serif;
 +
    opacity:none !important;
 +
    text-shadow:2px 2px black;
 +
    z-index:500;
 
}
 
}
−
 
+
.text1{
−
.line .blue {
+
    position:absolute;
−
  width: 1px;   /*line寬度*/
+
    margin-top:80px;
−
  height: 15%;   /*調line長度*/
+
    margin-left:60px;
−
  position:relative;
+
    font-family: 'Open Sans', sans-serif;
−
  left:51px;
+
    text-shadow:2px 2px black;
−
 
+
    z-index:500;
 
}
 
}
−
.line .red-container {
+
.text2{
−
  position:relative;
+
    position:absolute;
−
  width: 4px;
+
    margin-top:80px;
 +
    margin-left:60px;
 +
    font-family: 'Open Sans', sans-serif;
 +
    text-shadow:2px 2px black;
 +
    z-index:500;
 
}
 
}
−
.line .red {
+
.text3{
−
  background-color:#00D6FF;/*cover line color*/
+
    position:absolute;
−
  *zoom: 1;
+
    margin-top:80px;
−
  background-size: 100%;
+
    margin-left:60px;
 +
    font-family: 'Open Sans', sans-serif;
 +
    text-shadow:2px 2px black;
 +
    z-index:500;
 
}
 
}
−
.line .blue {
+
.text4{
−
  background-color: white;/*line color*/
+
    position:absolute;
−
  *zoom: 1;
+
    margin-top:80px;
−
  background-size: 100%;
+
    margin-left:53px;
−
+
    font-family: 'Open Sans', sans-serif;
 +
    text-shadow:2px 2px black;
 +
    z-index:500;
 
}
 
}
−
 
+
.text5{
−
.node {
+
    position:absolute;
−
  margin-left: 40px;/*調node間距*/
+
    margin-top:80px;
−
  width: 20px;
+
    margin-left:65px;
−
  height: 20px;
+
    font-family: 'Open Sans', sans-serif;
−
  margin-top: 30px;
+
    text-shadow:2px 2px black;
−
  position: relative;
+
    z-index:500;
−
}
+
−
.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;
 
  
−
}
+
/*overview*/
−
.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%;
+
  
−
}
+
.overviewHP{
−
.node .active-circle .cover {
+
    color:#F3F7F7;
−
  transform: translateZ(0px);
+
    text-align:justify;
−
  width: 16px;
+
    text-indent:2em;
−
  height: 16px;
+
    padding:10px;
−
  background:red;/*active circle color */
+
    font-size:15pt !important;
−
  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;
 
−
}
 
 
.title{
 
.title{
 
     font-size:25pt !important;
 
     font-size:25pt !important;
 
     color:#ffd11a;
 
     color:#ffd11a;
 
     text-shadow:1px 1px 10px rgb(153, 153, 255);
 
     text-shadow:1px 1px 10px rgb(153, 153, 255);
−
     border-left:3px solid rgb(153, 153, 255);
+
     border-left:3px ;
−
     padding-left:10px !important;   
+
     padding-left:450px !important;   
−
     margin-top:20px;
+
     margin-top:0px;
 
     margin-bottom:10px;
 
     margin-bottom:10px;
 
     font-weight:bold;
 
     font-weight:bold;
Line 262: Line 227:
 
     font-size:15pt !important;
 
     font-size:15pt !important;
 
     text-align:justify;
 
     text-align:justify;
−
    text-indent:2em;
+
     color:white !important;
−
     color:#F3F7F7;
+
 
     padding-left:40px;
 
     padding-left:40px;
−
     padding-top:15px;
+
     padding-top:0px;
 
     padding-bottom: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
 
−
}
 
−
 
−
.content-image{
 
−
    color:#F3F7F7 !important;
 
−
    font-size:11pt !important;
 
−
    padding-top:10px;
 
−
    padding-bottom:50px;
 
−
    width:50vw;
 
−
    margin:auto;
 
−
    padding-left:60px;
 
−
}
 
−
 
−
.appear{
 
−
    display:none;
 
−
   
 
−
}
 
−
.list{
 
−
    font-size:15pt !important;
 
−
    text-align:justify;
 
−
    color:#F3F7F7;
 
−
}
 
−
.quote{
 
−
    font-size:17pt !important;
 
−
    text-align:justify;
 
−
    color:#F3F7F7;
 
−
    text-indent:2em !important;
 
−
   
 
−
}
 
−
 
−
 
−
/*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:20px;
 
−
    padding-bottom:20px;
 
−
}
 
−
.picture{
 
−
    position:relative;
 
−
    left:8vw;
 
−
    width:80%;
 
−
    padding-bottom:10px;
 
−
}
 
−
 
−
.picture-1{
 
−
    position:relative;
 
−
    left:17vw;
 
−
    width:50%;
 
−
    padding-bottom:10px;
 
−
}
 
−
 
−
.bigphoto{
 
−
      margin: auto;
 
−
      display: block;
 
−
    }
 
−
 
 
</style>
 
</style>
 
</head>
 
</head>
 +
 
<body>
 
<body>
 
<h1>
 
<h1>
−
<nav id="scroll">
+
     <div class="img-container">
−
     <div class="wrapper">
+
         <img src="https://static.igem.org/mediawiki/2017/2/28/Bigphoto.png" class="bigphoto" width="60%">
−
     
+
    </div>
−
      <div class="nodes">
+
<div style="width:80%;margin:auto;margin-bottom:5%;">
−
            <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">Motivation</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">Background</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">Description</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>
+
−
+
−
 
+
−
 
+
−
<!--圖片-->
+
−
  <div class="img-container">
+
−
         <img src="https://static.igem.org/mediawiki/2017/b/b0/Descriptionnew.jpeg" class="main-img" width="75%">
+
−
  </div>
+
−
 
+
−
 
+
−
 
+
−
<!--wiki content-->
+
−
 
+
 
<div>
 
<div>
−
<section class="content_container">
+
      <p class="title">Abstract</p>
−
 
+
      <p class="content">DETECOLI—a word we created by combining “detection” and “<span style="font-style:italic;">E. coli</span>”—changes color in environments of excess sunlight or high temperatures. The detection should be visualized by discriminating the alteration of three chromoproteins (cjBlue, RFP, BFP) expressed by <span style="font-style:italic;">E. coli</span> with the regulatory circuit of temperature and UV light. We aim to build up a quantitative experiment for observing the color of <span style="font-style:italic;">E. coli</span>. For the practical application we aim to place <span style="font-style:italic;">E. coli</span> on stickers and attach the stickers on the product before delivery, thus able to monitor the whole process of transportation. DETECOLI alerts consumers to possible deterioration or contamination by changing color, and serves as a guarantee of quality.</p> 
−
    <p class="title">Motivation</p>
+
</div>
−
    <p class="content">A bottle of cold drink is a fantastic idea on a scorching summer day, but what if the drink is contaminated with plasticizers? Many people know that plastic bottles will release harmful plasticizers into the drink at high temperatures, so they sensibly avoid leaving bottled drinks or water in hot places, like their cars. However, what if the drink has been contaminated during transportation from the factory to the retail store?</p>
+
−
    <p class="content">Besides bottled beverages, many other products, such as cosmetics or medicine, may pose potential threats to human health if they are stored at inadequate temperatures or exposed to sunlight for too long during the delivery process.</p>
+
−
    <p class="content">The danger is real and immediate, but it is humanly impossible to monitor every delivery procedure. Therefore, we plan to invent a biosensor which can help monitor and ensure the cargo quality in transit.</p>
+
  
−
    <p class="title">Background</p>
+
</div>
−
    <p class="content">The popularity of the Internet has been increasing considerably in the 21st century, and purchasing in virtual shops has thus become the mainstream consumer pattern. By investigating through our online <a href="https://static.igem.org/mediawiki/2017/e/ee/Igem_survey.pdf" style="color: orange">questionnaire</a>, we’ve found that at least 95.5% of customers do care about what happens with the items they have ordered during the delivery process. As such, we started to think of a way to ensure that the goods are placed in an optimal and safe environment during the whole process of delivery and transportation.</p>
+
−
    <p class="content">Our idea was to design a sticker that changes color when exposed to inadequate temperature. The sticker can be attached to the boxes or products right before they are about to get transported, and when the sticker changes color, it means that the environment of the transportation is not adequate and therefore needs to be improved.</p>
+
−
    <p class="content">Though we were inspired by the release of plasticizer from the bottle into the drinking water, we soon found that there is not much difference between the amount of plasticizer released at 25 degrees Celsius and that released at 35 degrees Celsius (or a bit higher). Thus, we decided to apply our product mainly to foods, especially drinks, as well as cosmetics and medicines. The target temperature we’ve set is 37 degrees Celsius, the temperature at which bacteria reproduce most rapidly.</p>
+
−
    <p class="content">In order to have a better idea about the proper storage temperature of drinks, we went to interview a few superintendents of VEDAN Company, a leading food company in Taiwan, which makes drinks and instant noodles. We then learned that room temperature foods don’t need our product. So we decided to switch our focus to research on cosmetics, nutrients supplements, and medicines. Nevertheless, we also learned that UV will cause the loss of the nutrition in vitamin drinks. It leads us to think of adding another sensor, which is a UV sensor.</p>
+
  
 +
    <a href="https://2017.igem.org/Team:TCFSH_Taiwan/Description">
 +
        <div class="img-box1">
 +
            <div class="text">Description</div>
 +
            <img src="https://static.igem.org/mediawiki/2017/b/b2/Project_design.jpeg" width="100%" height="100%" class="HP_image">
 +
        </div>
 +
    </a>
 
      
 
      
−
     <p class="title">Project Description</p>
+
     <a href="https://2017.igem.org/Team:TCFSH_Taiwan/HP/Silver">
−
    <p class="content">After interviewing VEDAN, we learned that UV light will cause the loss of nutrition of the vitamin drinks. Therefore, we decided to invent a sticker to sense both temperature and UV light. We implant a modified gene into e-coli, and after drying them up, we put these e-coli into a specialized sticker, and this completes our device for long-term quality monitoring. The sticker monitors the temperature and UV light in the whole delivery process, and will change color if it detects excessive amounts of the above two factors. By simply taking a glance at it, the customer can directly confirm the condition of the merchandise.</p>
+
        <div class="img-box1-1">      
−
     <p class="content"> In normal conditions, the color of the sticker will be light green, which indicates “safe.” Nonetheless, if the products are exposed to sunlight or a temperature higher than 37 degrees Celsius, the color will change gradually into red or blue, which indicates “not safe.” The longer the sticker is exposed to these less than ideal conditions, the darker its color will become. The cause of both colors is the synthesis of chromoprotein. Chromoproteins are very stable, which means that the color can last for a long period of time.</p>
+
            <div class="text1">Human<br>Practice</br></div>
−
    </div>
+
            <img src="https://static.igem.org/mediawiki/2017/e/e3/JasonHP.jpeg" width="100%" height="100%" class="HP_image">
−
</section>
+
        </div>
 +
     </a>
 +
 
 +
   
 +
    <a href="https://2017.igem.org/Team:TCFSH_Taiwan/Basic_Part">
 +
        <div class="img-box1-2">
 +
            <div class="text2">Parts</div>
 +
            <img src="https://static.igem.org/mediawiki/2017/f/fa/Parts_home.jpeg" width="100%" height="100%" class="HP_image">
 +
        </div>
 +
    </a>
 
</h1>
 
</h1>
−
 
−
 
−
 
−
<!--JS-->
 
−
 
−
<script>
 
−
 
−
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' );
 
−
 
−
// 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());
 
−
}
 
−
 
−
var $nodes =  $( '.node' );
 
−
 
−
// Should totally be debounced /w animation frame. I know,
 
−
// this whole thing is slightly inefficient.
 
−
// And magic numbers too!
 
−
$( document ).scroll( function() {
 
−
 
−
  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+25 );
 
−
  }
 
−
 
−
})
 
−
 
−
// Clicking the nodes... again, nothing special ;)
 
−
$nodes.each( function( index ) {
 
−
  var $node = $( this );
 
−
  $node.click( function() {
 
−
    $('html, body').animate({ scrollTop: (positions[ index ]-documentHeight)-70}, 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);
 
−
    }
 
−
}
 
−
 
−
$(function () {
 
−
    $(window).scroll(sticky_relocate);
 
−
    sticky_relocate();
 
−
});
 
−
 
−
 
−
 
−
$(document).ready(function(
 
−
 
−
){})
 
−
 
−
</script>
 
 
</body>
 
</body>
 
</html>
 
</html>
 
{{TCFSH_Taiwan_footer}}
 
{{TCFSH_Taiwan_footer}}

Latest revision as of 05:13, 15 December 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

Abstract

DETECOLI—a word we created by combining “detection” and “E. coli”—changes color in environments of excess sunlight or high temperatures. The detection should be visualized by discriminating the alteration of three chromoproteins (cjBlue, RFP, BFP) expressed by E. coli with the regulatory circuit of temperature and UV light. We aim to build up a quantitative experiment for observing the color of E. coli. For the practical application we aim to place E. coli on stickers and attach the stickers on the product before delivery, thus able to monitor the whole process of transportation. DETECOLI alerts consumers to possible deterioration or contamination by changing color, and serves as a guarantee of quality.

Description
Human
Practice
Parts