Difference between revisions of "Team:TCFSH Taiwan"

 
(100 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
{{TCFSH_Taiwan}}
 
{{TCFSH_Taiwan}}
 +
{{TCFSH_Taiwan/Navigation}}
 
<html>
 
<html>
 
<head>
 
<head>
 
<meta charset="UTF-8">
 
<meta charset="UTF-8">
−
<!-- IE -->
 
−
<link rel="shortcut icon" type="image/x-icon" href="https://static.igem.org/mediawiki/2016/b/bf/NCTU_icon.png" />
 
−
<!-- other browsers -->
 
−
<link rel="icon" type="image/x-icon" href="https://static.igem.org/mediawiki/2016/b/bf/NCTU_icon.png" />
 
−
<META NAME="Author" CONTENT="Chris Lin">
 
−
 
−
 
 
<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://2016.igem.org/Team:NCTU_Formosa/wiki_reset?action=raw&ctype=text/css" rel="stylesheet">
+
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300" rel="stylesheet">
−
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet">
+
  
 
<style type="text/css">
 
<style type="text/css">
−
    #sideMenu, #top_title {display:none;}
+
#sideMenu, #top_title {display:none;}
−
    #content { padding:0px; width:100%; margin-top:-7px; margin-left:0px;}
+
#content { padding:0px; width:100%; margin-top:-7px; margin-left:0px;}
−
    #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
+
body {background-color:white; }
−
    #top_menu_inside {margin-left: 20px; 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;}
  
−
/* Clear the default wiki settings */
+
html, body, div, span, applet, object, iframe,
−
+
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
−
#home_logo, #sideMenu { display:none; }
+
a, abbr, acronym, address, big, cite, code,
−
#sideMenu, #top_title, .patrollink  {display:none;}
+
del, dfn, em, font, img, ins, kbd, q, s, samp,
−
#content { width:100%; padding:0px;  margin-top:-7px; margin-left:0px;}
+
small, strike, strong, sub, tt, var,
−
body {background-color:white; }
+
b, u, i, center,
−
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
+
dl, dt, dd, ol, ul, li,
−
   
+
fieldset, form, label, legend,
−
    * {
+
table, caption, tbody, tfoot, thead, tr, th, td {
−
        font-family: 'Open Sans', sans-serif;
+
    margin: 0;
−
        font-weight: 300;
+
    padding: 0;
−
      }
+
    border: 0;
−
   
+
     outline: 0;
−
    body{
+
−
        margin:0;
+
−
        padding:0;
+
−
        background-color:rgb(51,51,51) !important;
+
−
        background-repeat: repeat-y;
+
−
        background-size:100%;
+
−
        }
+
−
.TCFSH_Taiwan{
+
−
                left:15px;
+
−
                position:relative;
+
−
                top: 5px;
+
−
     }
+
−
h1{
+
−
background-image:url('https://static.igem.org/mediawiki/2017/a/a9/Tcfshtaiwan_background.jpeg');
+
−
}
+
−
  .main-container{
+
−
                    background:rgb(230, 236, 255);
+
−
                    position:fixed;
+
−
                    width:100vw;
+
−
                    height:auto;
+
−
                    z-index:999;
+
−
                    }
+
  
−
 
−
    .dropbtn{
 
−
                  margin-top:5px;
 
 
}
 
}
  
−
     .dropdown:hover .dropdown-content{
+
* {
−
                  display: block;
+
  font-family: 'Open Sans', sans-serif;
 +
     font-weight: 300;
 +
    font-style: normal;
 +
}
 +
body{
 +
    margin:auto;
 +
    background:rgb(51,51,51);
 +
    line-height:1;
 +
}
 +
h1{
 +
background-image:url('https://static.igem.org/mediawiki/2017/a/a9/Tcfshtaiwan_background.jpeg');
 
}
 
}
  
−
 
+
/*大圖*/
−
   
+
@media screen and (min-width: 768px) {
−
    .dropbtn span:after{
+
   .img-container{
−
    width: 0;
+
    height:100vh ;
−
    height: 0;
+
    overflow:hidden ;
−
    border: 0.313em solid transparent;
+
    width:100%;
−
    border-bottom: none;
+
  }
−
    border-top-color:black;
+
.bigphoto{
−
    content: '';
+
−
    vertical-align: middle;
+
−
    display: inline-block;
+
−
    position: relative;
+
−
    right: -0.313em; /* 5 */
+
−
                text-decoration:none !important;
+
−
                list-style-type:none !important;           
+
−
              }
+
−
 
+
−
   .dropdown{
+
−
      float:left;
+
−
      text-decoration:none !important;
+
−
      list-style-type:none !important;
+
−
      }
+
−
    ul>.dropdown>a{
+
−
                color:black !important;
+
−
                list-style-type:none !important;
+
−
                text-decoration:none !important;
+
−
                text-align:left;
+
−
              }
+
−
    li .dropdown{
+
−
                display: inline-block;
+
−
                }
+
−
               
+
−
      .dropdown  a, .dropbtn {
+
−
                      display: inline-block;
+
−
                      text-align: center;
+
−
                      text-color: black;
+
−
                      padding-right: 10px;
+
−
                      margin-right: 10px;
+
−
                      text-decoration: none !important;   
+
−
                    }
+
−
.main-menu{
+
−
      position:relative;
+
−
      list-style-type: none !important;
+
−
      margin-right:1px;
+
−
      display:block;
+
−
      float:right !important;
+
−
      font-weight:400 !important;
+
−
      font-size:20px;
+
−
      font-family:"Open Sans",serif,sans-serif;
+
−
      }
+
−
 
+
−
 
+
−
                /*下拉式menu*/
+
−
 
+
−
    .dropdown a:hover, .dropdown:hover .dropbtn{
+
−
                                            color:red !important;
+
−
                                            }
+
−
 
+
−
 
+
−
    .dropdown-content{
+
−
                      display:none;
+
−
                      background: rgb(157, 136, 210);
+
−
                      position:absolute;
+
−
                      width:auto !important;
+
−
                     
+
−
                    }
+
−
    .dropdown-content a{
+
−
                        color: black;
+
−
                        padding:15px;
+
−
                        text-decoration: none;
+
−
                        display: block;
+
−
                        text-align:left !important;
+
−
                        size:1em;
+
−
                        }
+
−
                       
+
−
   
+
−
    .dropdown-content a:hover{
+
−
                              color: red;
+
−
                              }
+
−
    .text{
+
−
      background-color: rgb(77, 89, 127);
+
−
      color: #ffffff;
+
−
      font-size: 20px;
+
−
      font-family:
+
−
    }
+
−
    .text>h1 {
+
−
      text-align: center;
+
−
    }
+
−
    .bigphoto{
+
 
       margin: auto;
 
       margin: auto;
 +
      margin-top: 60px;
 
       display: block;
 
       display: block;
 
     }
 
     }
−
    .title{
 
−
    font-size:25pt !important;
 
−
    color:rgb(102, 0, 102);
 
−
    padding-left:600px; 
 
−
    margin-top:5px;
 
−
    margin-bottom:10px;
 
−
    font-weight:bold;
 
 
}
 
}
−
 
+
@media screen and (orientation: portrait) {
−
.abstract{
+
    .img-container{
−
    color:white;
+
        height:auto;
−
    text-align:justify;
+
        overflow:none;
−
    text-indent:2em;
+
        width:100%;
−
     padding-left:50px;
+
     }
−
     padding-right:50px;
+
     .main-img{
−
    padding-top:5px;
+
        top: 0;
−
    padding-bottom:10px;
+
        bottom: 0;
−
    font-size:20pt !important;
+
        left: 0;
−
    }         
+
        right: 0;
−
  #index_footer{
+
        width: 100%;
−
  color:#ccc;
+
        margin: auto;
−
  font-size:12px;
+
        z-index:999;
−
  position:relative;
+
    }
−
  z-index:2;
+
−
  background-color:#3c3e3f !important;
+
−
  display: block;
+
−
width:100%;
+
−
overflow:hidden;
+
 
}
 
}
  
−
#index_footer  .conent{
+
/*box*/
−
  width:100vw;
+
.HP_image{
−
  position:relative;
+
    opacity:0.5;
−
        margin-left:0vw;
+
−
  bottom:0;
+
−
        display: block;
+
−
  z-index:1;
+
−
  margin-bottom:15px;
+
 
}
 
}
−
#index_foot_list {
+
.HP_image:hover{
−
  width:auto;
+
    opacity:4;
−
  height:170px;
+
−
  padding:30px 0 0 0;
+
−
  margin-left:5%;
+
−
  display:block;
+
 
}
 
}
−
/*li width*/
+
.img-box1{
−
#index_foot_list  li{
+
    width:210px;
−
        float:left;
+
    height:210px;
−
  text-align:left;
+
     border:2px solid #F3F7F7;
−
        margin-left:29px;
+
     border-radius:10px;
−
  width:117px;
+
     overflow:hidden;
−
        line-height:18px;
+
     margin-left:20%;
−
        display:block;
+
     float:left;
−
        color:#FFF;
+
     color:white;
−
        font-size:16px;
+
     font-size:18pt;
−
    text-decoration: none;
+
     font-weight:bold;  
−
}
+
     margin-top:3%;
−
 
+
     margin-bottom:3%;
−
 
+
−
#index_foot_list  li a {
+
−
  text-decoration: none;
+
−
  font-size:16px;
+
−
  color:#FFF;
+
−
}
+
−
#index_foot_list  li span {
+
−
  text-decoration: none;
+
−
  font-size:16px;
+
−
  color:#FFF;
+
−
}
+
−
#index_foot_list  li ul li{
+
−
        float:left;
+
−
 
+
−
}
+
−
#index_foot_list  li ul li a {
+
−
  font-size:13px;
+
−
  color:#a1a1a1;
+
−
  line-height:20px;
+
−
  text-decoration:none;
+
−
}
+
−
#index_foot_list li ul li a:hover {
+
−
  color:#fff;
+
−
}
+
−
.footer_logo{
+
−
  color:#fff;
+
−
  display:block;
+
−
  font-size:10pt !important;
+
−
        line-height:18px;
+
−
        z-index:3;
+
−
        width: 70vw;
+
−
        margin: 0 auto;
+
−
} 
+
−
.over-container{
+
−
            width:75%;
+
−
            height:60vh;
+
−
            margin:auto;
+
−
            margin-top:25vh;
+
−
            margin-bottom:15%;
+
−
            position:relative;
+
−
            } 
+
−
.leftup{
+
−
      float:left;
+
−
      margin-top:10%;
+
−
      position:relative;
+
−
      margin-left:3%;
+
−
}
+
−
.rightup{
+
−
      float:right;
+
−
      margin-top:10%;
+
−
      position:relative;
+
−
      margin-right:3%;
+
−
}
+
−
.overview{
+
−
     color:#F3F7F7;
+
−
     text-align:justify;
+
−
     text-indent:2em;
+
−
     padding-left:20px;
+
−
     padding-right:20px;
+
−
     padding-top:10px;
+
−
     padding-bottom:10px;
+
−
     font-size:15pt !important;
+
−
}
+
−
 
+
−
@media screen and (min-width:768px){   
+
−
     .animate-box{
+
−
                position:relative;
+
−
                height:100vh;
+
−
                width:100%;
+
−
                backgroind:balck;
+
−
                overflow:hidden;
+
−
 
+
−
}
+
−
@media screen and (orientation: portrait){   
+
−
     .animate-box{
+
−
                position:relative;
+
−
                height:100%;
+
−
                backgroind:balck;
+
−
                overflow:hidden;
+
 
     }
 
     }
−
}
+
.img-box1-1{
−
 
+
    width:210px;
−
 
+
    height:210px;
−
     .box-container{
+
     border:2px solid #F3F7F7;
−
        position:relative;
+
    border-radius:10px;
−
        display:block;
+
    overflow:hidden;
−
        width:auto;
+
    margin-left:4%;
−
        height:720px;
+
    float:left;
−
        margin-top:15vh !important;
+
    color:white;
−
        text-decoration:none;
+
    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%;
 +
    } 
 
      
 
      
−
/*-----------image-------------------*/
+
.img-box2{
−
     .img-box{
+
    width:210px;
−
        position:relative;
+
    height:210px;
−
        margin-left:30vw;
+
    border:2px solid #F3F7F7;
−
        display:block;
+
    border-radius:10px;
−
        padding-top:70px;
+
    overflow:hidden;
−
        padding-left:10px;
+
    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;
 
     }
 
     }
  
−
        .connect{
 
−
            color:black !important;           
 
−
        }
 
−
        .text-active{
 
−
            color:red !important;
 
−
            text-decoration:none;
 
−
        }
 
−
        .connect:hover{
 
−
            color:red !important;
 
−
            text-decoration:none;
 
−
        }
 
−
/*---------------PANTIDE iot device--------------*/
 
  
−
.text-PANTIDE{
+
.text{
−
      text-decoration:none;
+
    position:absolute;
−
      font-size:2em !important;
+
    margin-top:80px;
−
      text-align:center;
+
    margin-left:40px;
−
      padding-left:10px;
+
    font-family: 'Open Sans', sans-serif;
 +
    opacity:none !important;
 +
    text-shadow:2px 2px black;
 +
    z-index:500;
 
}
 
}
−
 
+
.text1{
−
.text-iot{
+
    position:absolute;
−
      text-decoration:none;
+
    margin-top:80px;
−
      font-size:2em !important;
+
    margin-left:60px;
−
      text-align:center;
+
    font-family: 'Open Sans', sans-serif;
−
      padding-left:35px;
+
    text-shadow:2px 2px black;
 +
    z-index:500;
 
}
 
}
−
.text-device{
+
.text2{
−
      text-decoration:none;
+
    position:absolute;
−
      font-size:2em !important;
+
    margin-top:80px;
−
      text-align:center;
+
    margin-left:60px;
−
      padding-left:15px;
+
    font-family: 'Open Sans', sans-serif;
 +
    text-shadow:2px 2px black;
 +
    z-index:500;
 
}
 
}
−
        .text1{
+
.text3{
−
            position:absolute;
+
    position:absolute;
−
            text-decoration:none;
+
    margin-top:80px;
−
            width:100px;
+
    margin-left:60px;
−
            top:31%;
+
    font-family: 'Open Sans', sans-serif;
−
            left:-14%;
+
    text-shadow:2px 2px black;
−
            background:rgba(243,247,247,0.9);
+
    z-index:500;
−
            border:3px solid #FBB03B;
+
−
            text-align:center;         
+
−
            cursor:pointer;
+
−
        }
+
−
        .text1:hover{
+
−
            transform:scale(1.1);
+
−
        }
+
−
        .text2{
+
−
            position:absolute;
+
−
            text-decoration:none;
+
−
            width:100px;
+
−
            top:83%;
+
−
            left:-14%;
+
−
            background:rgba(243,247,247,0.9);
+
−
            border:3px solid #FBB03B;     
+
−
            text-align:center; 
+
−
            cursor:pointer;     
+
−
        }
+
−
        .text2:hover{
+
−
            transform:scale(1.1);
+
−
        }
+
−
        .text3{
+
−
            position:absolute;
+
−
            width:100px;
+
−
            top:34%;
+
−
            left:57%;
+
−
            background:rgba(243,247,247,0.9);
+
−
            border:3px solid #FBB03B;       
+
−
            text-align:center;
+
−
            cursor:pointer;
+
−
        }
+
−
        .text3:hover{
+
−
            transform:scale(1.1);
+
−
        }
+
−
 
+
−
@media screen and (min-width:768px){   
+
−
.text-container{
+
−
        position:relative;
+
−
        width:70vw;
+
−
        height:210px;
+
−
        margin-left:15%;
+
−
        margin-top:3vw;
+
−
        margin-bottom:1vw;
+
−
        background-color:rgba(243,247,247,0.7);
+
−
        border-radius:10px;
+
−
        display:block;
+
−
 
+
 
}
 
}
 +
.text4{
 +
    position:absolute;
 +
    margin-top:80px;
 +
    margin-left:53px;
 +
    font-family: 'Open Sans', sans-serif;
 +
    text-shadow:2px 2px black;
 +
    z-index:500;
 
}
 
}
−
 
+
.text5{
−
@media screen and (orientation: portrait){
+
    position:absolute;
−
.text-container{
+
    margin-top:80px;
−
        position:relative;
+
    margin-left:65px;
−
        width:70vw;
+
    font-family: 'Open Sans', sans-serif;
−
        height:210px;
+
    text-shadow:2px 2px black;
−
        margin-left:15%;
+
    z-index:500;
−
        margin-top:6vw;
+
−
        margin-bottom:1vw;
+
−
        background-color:rgba(243,247,247,0.7);
+
−
        border-radius:10px;
+
−
        display:block;
+
−
 
+
−
}
+
 
}
 
}
  
 +
/*overview*/
  
−
    .item{
+
.overviewHP{
−
        display:none;
+
−
    }
+
−
    .item-active{
+
−
        display:block;
+
−
    }
+
−
 
+
−
    .description{
+
−
        padding-left:20px;
+
−
        padding-right:20px;
+
−
        font-size:13.5pt !important;
+
−
        text-indent:2em;
+
−
        font-family: 'Open Sans' !important;
+
−
    }
+
−
 
+
−
/*-----------buttom----------------*/
+
−
.buttom{
+
−
        position:absolute;
+
−
        bottom:8px;
+
−
        right:10px;
+
−
        background-color:#ACE0F5;
+
−
        font-size:14pt !important;
+
−
        font-family: 'Open Sans' !important;
+
−
        border-radius:10px;
+
−
        color:black;
+
−
        text-decoration:none;
+
−
        padding:3px;
+
−
        padding-bottom:8px;
+
−
}
+
−
.buttom:active{
+
−
        bottom:5px;
+
−
}
+
−
 
+
−
 
+
−
 
+
−
/*-------------overview-------------------*/
+
−
 
+
−
 
+
−
@media screen and (min-width:768px){
+
−
  .over-container{
+
−
            width:75%;
+
−
            height:60vh;
+
−
            margin:auto;
+
−
            margin-top:25vh;
+
−
            margin-bottom:15%;
+
−
            position:relative;
+
−
            } 
+
−
h1{
+
−
    text-align:center;
+
−
    color:rgb(0, 206, 255);
+
−
    text-shadow:1px 1px 10px rgb(0, 206, 255);
+
−
    font-size:30pt !important;
+
−
}
+
−
.overview{
+
 
     color:#F3F7F7;
 
     color:#F3F7F7;
 
     text-align:justify;
 
     text-align:justify;
 
     text-indent:2em;
 
     text-indent:2em;
−
     padding-left:20px;
+
     padding:10px;
−
    padding-left:20px;
+
     font-size:15pt !important;
−
    padding-top:10px;
+
−
    padding-bottom:10px;
+
−
     font-size:18pt !important;
+
−
}
+
−
.position{
+
−
    cursor:pointer;
+
−
    position:absolute;
+
−
    margin-left:46.5%;
+
−
    margin-top:5%;
+
−
}
+
 
}
 
}
  
−
@media screen and (orientation: portrait){
+
.title{
−
  .over-container{
+
−
            width:80%;
+
−
            height:100%;
+
−
            margin:auto;
+
−
            margin-bottom:40%;
+
−
            margin-top:18%;
+
−
            position:relative;
+
−
            display:block;
+
−
            }
+
−
h1{
+
−
    text-align:center;
+
−
    color:rgb(0, 206, 255);
+
−
    text-shadow:1px 1px 10px rgb(0, 206, 255);
+
 
     font-size:25pt !important;
 
     font-size:25pt !important;
 +
    color:#ffd11a;
 +
    text-shadow:1px 1px 10px rgb(153, 153, 255);
 +
    border-left:3px ;
 +
    padding-left:450px !important; 
 +
    margin-top:0px;
 +
    margin-bottom:10px;
 +
    font-weight:bold;
 
}
 
}
−
.overview{
+
.content{
−
     color:#F3F7F7;
+
     font-size:15pt !important;
 
     text-align:justify;
 
     text-align:justify;
−
     text-indent:2em;
+
     color:white !important;
−
     padding-left:20px;
+
     padding-left:40px;
−
    padding-right:20px;
+
     padding-top:0px;
−
     padding-top:10px;
+
     padding-bottom:15px;
−
     padding-bottom:10px;
+
−
    font-size:15pt !important;
+
 
}
 
}
−
.position{
 
−
    cursor:pointer;
 
−
    position:absolute;
 
−
    margin-left:32vw;
 
−
    margin-top:5%;
 
−
   
 
−
}
 
−
}
 
−
 
−
 
−
.position:hover{
 
−
    transform:scale(1.1)
 
−
}
 
−
 
 
</style>
 
</style>
 
</head>
 
</head>
−
 
−
 
−
<!-----wiki content--->
 
  
 
<body>
 
<body>
−
 
+
<h1>
−
<div class="main-container">
+
    <div class="img-container">
−
    <a href="https://2017.igem.org/Team:TCFSH_Taiwan">
+
        <img src="https://static.igem.org/mediawiki/2017/2/28/Bigphoto.png" class="bigphoto" width="60%">
−
  <img src="https://static.igem.org/mediawiki/2017/5/53/TEAM_name_logo_Tcfsh_new.png" class="TCFSH_Taiwan" width="20%">
+
    </div>
−
  </a>
+
<div style="width:80%;margin:auto;margin-bottom:5%;">
−
      <ul class="main-menu" id="menu"  style="list-style-image: none;">
+
<div>
−
        <li class="dropdown"><a href="https://2017.igem.org/Team:TCFSH_Taiwan"  class="dropbtn">Home</a></li>
+
      <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>
−
        <li class="dropdown">
+
−
            <a href="https://2017.igem.org/Team:TCFSH_Taiwan/Project" class="dropbtn"><span class="menu_sign">Project</span></a>
+
−
                  <div class="dropdown-content">
+
−
                      <div><a href="https://2017.igem.org/Team:TCFSH_Taiwan/Description">Description</a></div>
+
−
                      <div><a href="https://2017.igem.org/Team:TCFSH_Taiwan/Design">Design</a></div>
+
−
                      <div><a href="https://2017.igem.org/Team:TCFSH_Taiwan/Demonstrate">Device</a></div>
+
−
                      <div><a href="https://2017.igem.org/Team:TCFSH_Taiwan/Results">Results</a></div>
+
−
 
+
−
                      <div><a href="https://2017.igem.org/Team:TCFSH_Taiwan/Model">Modeling</a></div>
+
−
                                         
+
−
                  </div>
+
−
        </li>
+
−
 
+
−
                 
+
−
        <li class="dropdown">
+
−
            <a href="#" class="dropbtn"><span class="menu_sign">Awards</span></a>
+
−
                  <div class="dropdown-content">
+
−
                      <div><a href="https://2017.igem.org/Team:TCFSH_Taiwan/Applied_Design">Applied Design</a></div>
+
−
                      <div><a href="https://2017.igem.org/Team:TCFSH_Taiwan/Entrepreneurship">Entrepreneurship</a></div>
+
−
                      <div><a href="https://2017.igem.org/Team:TCFSH_Taiwan/Measurement">Measurement</a></div>
+
−
                      <div><a href="https://2017.igem.org/Team:TCFSH_Taiwan/Plant">Plant</a></div>
+
−
                  </div>
+
−
        </li>
+
−
 
+
−
 
+
−
        <li class="dropdown">
+
−
            <a href="#" class="dropbtn"><span class="menu_sign">Human Practices</span></a>
+
−
                  <div class="dropdown-content">
+
−
                      <div><a href="https://2017.igem.org/Team:TCFSH_Taiwan/HP/Silver">Silver HP</a></div>
+
−
                      <div><a href="https://2017.igem.org/Team:TCFSH_Taiwan/HP/Gold_Integrated">Integrated and Gold</a></div>
+
−
                      <div><a href="https://2017.igem.org/Team:TCFSH_Taiwan/Engagement">Public Engagement</a></div>
+
−
                  </div>
+
−
        </li>
+
−
 
+
−
       
+
−
        <li class="dropdown">
+
−
            <a href="https://2017.igem.org/Team:TCFSH_Taiwan/Parts" class="dropbtn"><span class="menu_sign">Parts</span></a>
+
−
                  <div class="dropdown-content">
+
−
                      <div><a href="https://2017.igem.org/Team:TCFSH_Taiwan/Basic_Part">Basic Parts</a></div>
+
−
                      <div><a href="https://2017.igem.org/Team:TCFSH_Taiwan/Composite_Part">Composite Parts</a></div>
+
−
                  </div>
+
−
        </li>
+
−
 
+
−
       
+
−
        <li class="dropdown">
+
−
            <a href="https://2017.igem.org/Team:TCFSH_Taiwan/Attributions" class="dropbtn"><span class="menu_sign">Team</span></a>
+
−
                  <div class="dropdown-content">
+
−
                      <div><a href="https://2017.igem.org/Team:TCFSH_Taiwan/Team">Team</a></div>
+
−
                      <div><a href="https://2017.igem.org/Team:TCFSH_Taiwan/Collaborations">Collaborations</a></div>                     
+
−
                  </div>
+
−
        </li>
+
−
 
+
−
      <li class="dropdown">
+
−
            <a href="https://2017.igem.org/Team:TCFSH_Taiwan/Safety" class="dropbtn">Safety</a>             
+
−
        </li>
+
−
       
+
−
    </ul>
+
 
</div>
 
</div>
  
−
 
−
 
−
<h1>
 
−
    <img src="https://static.igem.org/mediawiki/2017/5/59/Big_Logo_overview_tcfsh_new.jpeg" class="bigphoto" width="75%">
 
−
    </img>
 
−
 
−
 
−
      <h>Abstract</h>
 
−
      <p class="overview">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? 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. 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>
 
−
  </div>
 
 
</div>
 
</div>
−
</h1>
 
  
−
 
+
     <a href="https://2017.igem.org/Team:TCFSH_Taiwan/Description">
−
<div id="index_footer"><div class="conent">
+
        <div class="img-box1">
−
  <ul id="index_foot_list" style="list-style-image: none;list-style-type:none;">
+
            <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">
−
     <li>
+
        </div>
−
      <ul style="list-style-image: none;">
+
     </a>
−
        <li><a href="https://2017.igem.org/Team:TCFSH_Taiwan" style="font-size:16px;color:#FFF;"><b>Home</b></a></li>
+
−
      </ul>
+
−
    </li>
+
−
 
+
−
    <li >
+
−
    <ul style="list-style-image: none;">
+
−
      <li> <a href="#" style="font-size:16px;color:#FFF;"><b>Project</b></a></li>
+
−
        <li><a href="https://2017.igem.org/Team:TCFSH_Taiwan/Description">Description</a></li>
+
−
        <li><a href="https://2017.igem.org/Team:TCFSH_Taiwan/Design">Design</a></li>
+
−
        <li><a href="https://2017.igem.org/Team:TCFSH_Taiwan/Demonstrate">Device</a></li>
+
−
        <li><a href="https://2017.igem.org/Team:TCFSH_Taiwan/Results">Results</a></li>
+
−
        <li><a href="https://2017.igem.org/Team:TCFSH_Taiwan/Model">Modeling</a></li>
+
−
      </ul>
+
−
     </li>
+
 
      
 
      
 +
    <a href="https://2017.igem.org/Team:TCFSH_Taiwan/HP/Silver">
 +
        <div class="img-box1-1">     
 +
            <div class="text1">Human<br>Practice</br></div>
 +
            <img src="https://static.igem.org/mediawiki/2017/e/e3/JasonHP.jpeg" width="100%" height="100%" class="HP_image">
 +
        </div>
 +
    </a>
  
−
 
−
    <li>
 
−
      <ul style="list-style-image: none;">
 
−
        <li>
 
−
          <a href="https://2016.igem.org/Team:NCTU_Formosa/Achievement" style="font-size:16px;color:#FFF;"><b>Awards</b></a>
 
−
        <li><a href="https://2017.igem.org/Team:TCFSH_Taiwan/Applied_Design">Applied design</a></li>
 
−
        <li><a href="https://2017.igem.org/Team:TCFSH_Taiwan/Entrepreneurship">Entrepreneurship</a></li>
 
−
        <li><a href="https://2017.igem.org/Team:TCFSH_Taiwan/Measurement">Measurement</a></li>
 
−
        <li><a href="https://2017.igem.org/Team:TCFSH_Taiwan/Plant">Plant</a></li>
 
−
        </li>
 
−
    </ul>
 
−
    </li>
 
−
 
−
 
−
 
−
    <li>
 
−
      <ul style="list-style-image: none;">
 
−
      <li> <a href="#" style="font-size:16px;color:#FFF;"><b>Human<br> Practices</b></a></li>
 
−
        <li><a href="https://2017.igem.org/Team:TCFSH_Taiwan/HP/Silver">Silver HP</a></li>
 
−
        <li><a href="https://2017.igem.org/Team:TCFSH_Taiwan/HP/Gold_Integrated">Integrated and Gold</a></li>
 
−
        <li><a href="https://2017.igem.org/Team:TCFSH_Taiwan/Engagement">Public Engagement</a></li>
 
−
      </ul>
 
−
    </li>
 
 
      
 
      
−
      
+
     <a href="https://2017.igem.org/Team:TCFSH_Taiwan/Basic_Part">
−
    <li>
+
         <div class="img-box1-2">
−
    <ul style="list-style-image: none;">
+
            <div class="text2">Parts</div>
−
        <li><b>Parts</b></li>
+
            <img src="https://static.igem.org/mediawiki/2017/f/fa/Parts_home.jpeg" width="100%" height="100%" class="HP_image">
−
        <li><a href="https://2017.igem.org/Team:TCFSH_Taiwan/Basic_Part">Basic Parts</a></li>
+
        </div>
−
         <li><a href="https://2017.igem.org/Team:TCFSH_Taiwan/Composite_Part">Composite Parts</a></li>
+
     </a>
−
    </ul>
+
</h1>
−
    </li>
+
−
   
+
−
   
+
−
   
+
−
    <li>
+
−
      <ul style="list-style-image: none;">
+
−
        <li>
+
−
          <a href="#" style="font-size:16px;color:#FFF;"><b>Team</b></a>
+
−
          <li><a href="https://2017.igem.org/Team:TCFSH_Taiwan/Team">Team</a></li>
+
−
          <li><a href="https://2017.igem.org/Team:TCFSH_Taiwan/Collaborations">Collaborations</a></li>
+
−
        </li>
+
−
      </ul>
+
−
    </li>
+
−
 
+
−
    <li>
+
−
    <ul style="list-style-image: none;">
+
−
        <li><b>Safety</b></li>
+
−
        <li><a href="https://2017.igem.org/Team:TCFSH_Taiwan/Safety">Safety</a></li>
+
−
       
+
−
    </ul>
+
−
    </li>
+
−
   
+
−
 
+
−
</ul>
+
−
 
+
−
  </div>
+
−
<div class="footer_logo">
+
−
 
+
−
<a href="http://www.tcfsh.tc.edu.tw/" target="_blank">
+
−
<img style="margin:10px;FLOAT:LEFT;top:10px;position:relative;" src="https://static.igem.org/mediawiki/2017/a/a1/Tcfsh_school_logo.png" width="100px">
+
−
</a>
+
−
 
+
−
 
+
−
 
+
−
  <img STYLE="margin:10px;FLOAT: LEFT;" src="https://static.igem.org/mediawiki/2017/8/82/Team_Logo%28No_background%29TCFSH_Taiwan.png" width="100px">
+
−
  <br>TCFSH_Taiwan
+
−
      <a href="https://www.facebook.com/igem2017tcfshtaiwan/?fref=ts" target="_blank">
+
−
          <img src="https://static.igem.org/mediawiki/2016/a/ab/NCTU_FORMOSA_Facebook_LINK.png" width="21vw"></a><br>
+
−
      <a href="http://www.tcfsh.tc.edu.tw/" style="text-decoration:none;color:#999;" target="_blank">Taichung First Senior High School</a><br>
+
−
      </div>
+
−
</div>
+
−
 
+
−
<script>
+
−
$(function() {
+
−
 
+
−
// Menu Tabular
+
−
var $text = $('.connect');
+
−
$text.on('click', function(e) {
+
−
e.preventDefault();
+
−
$text.removeClass('text-active');
+
−
$(this).addClass('text-active');
+
−
 
+
−
$('.item').fadeOut(300);
+
−
$(this.hash).delay(300).fadeIn();
+
−
       
+
−
});
+
−
 
+
−
});
+
−
 
+
−
</script>
+
−
 
+
−
 
+
−
<script>
+
−
var $imgs =  $( '.position' );
+
−
 
+
−
$imgs.each( function( index ) {
+
−
  var $img = $( this );
+
−
  $img.click( function() {
+
−
     $('html, body').animate({ scrollTop: $('.box-container').offset().top - 70}, 1000 );
+
−
  });
+
−
})
+
−
</script>
+
−
 
+
−
 
+
−
<script>
+
−
var $nodes =  $( '.connect' )
+
−
 
+
−
 
+
−
$nodes.each( function( index ) {
+
−
  var $node = $( this );
+
−
  $node.click( function() {
+
−
    $('html, body').animate({ scrollTop: $('.text-container').offset().top - 380}, 1000 );
+
−
  });
+
−
})
+
−
</script>
+
 
</body>
 
</body>
 
</html>
 
</html>
 +
{{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