Difference between revisions of "Team:TCFSH Taiwan"

Line 3: Line 3:
 
<html>
 
<html>
 
<head>
 
<head>
 +
<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">
−
    #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;}
−
     * {
+
 
−
        font-family: 'Open Sans', sans-serif;
+
html, body, div, span, applet, object, iframe,
−
        font-weight: 300;
+
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, ul, li,
 +
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;
 +
    font-style: normal;
 +
}
 
body{
 
body{
−
        margin:0;
+
    margin:0;
−
        padding:0;
+
    background:rgb(51,51,51);
−
        background-color:rgb(51,51,51) !important;
+
    line-height:1;
−
        background-repeat: repeat-y;
+
}
−
        background-size:100%;
+
/*大圖*/
−
        }
+
@media screen and (min-width: 768px) {
−
@media screen and (min-width:768px){  
+
  .img-container{
−
     .animate-box{
+
    height:100vh ;
−
                position:relative;
+
    overflow:hidden ;
−
                height:100vh;
+
    width:100%;
−
                width:100%;
+
  }
−
                backgroind:balck;
+
  .main-img{
−
                overflow:hidden;
+
    top: 0;
 +
    bottom: 0;
 +
    left: 0;
 +
    right: 0;
 +
    width: 100%;
 +
    margin: auto;
 +
    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;
 +
    }
 +
}
  
 +
/*box*/
 +
.HP_image{
 +
    opacity:0.5;
 
}
 
}
−
@media screen and (orientation: portrait){  
+
.HP_image:hover{
−
     .animate-box{
+
     opacity:4;
−
                position:relative;
+
}
−
                height:100%;
+
.img-box1{
−
                backgroind:balck;
+
    width:210px;
−
                overflow:hidden;
+
    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;
 
     }
 
     }
  
−
     }  
+
 
 +
.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{
 +
    position:absolute;
 +
    margin-top:80px;
 +
    margin-left:60px;
 +
    font-family: 'Open Sans', sans-serif;
 +
    text-shadow:2px 2px black;
 +
    z-index:500;
 +
}
 +
.text2{
 +
    position:absolute;
 +
    margin-top:80px;
 +
    margin-left:60px;
 +
    font-family: 'Open Sans', sans-serif;
 +
    text-shadow:2px 2px black;
 +
    z-index:500;
 +
}
 +
.text3{
 +
    position:absolute;
 +
    margin-top:80px;
 +
    margin-left:60px;
 +
    font-family: 'Open Sans', sans-serif;
 +
    text-shadow:2px 2px black;
 +
    z-index:500;
 +
}
 +
.text4{
 +
    position:absolute;
 +
    margin-top:80px;
 +
    margin-left:53px;
 +
    font-family: 'Open Sans', sans-serif;
 +
    text-shadow:2px 2px black;
 +
    z-index:500;
 +
}
 +
.text5{
 +
    position:absolute;
 +
    margin-top:80px;
 +
    margin-left:65px;
 +
    font-family: 'Open Sans', sans-serif;
 +
    text-shadow:2px 2px black;
 +
    z-index:500;
 +
}
 +
 
 +
/*overview*/
 
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');
 
}
 
}
−
    .box-container{
 
−
        position:relative;
 
−
        display:block;
 
−
        width:auto;
 
−
        height:720px;
 
−
        margin-top:15vh !important;
 
−
        text-decoration:none;
 
  
−
     }
+
.overviewHP{
 +
     color:#F3F7F7;
 +
    text-align:justify;
 +
    text-indent:2em;
 +
    padding:10px;
 +
    font-size:15pt !important;
 +
}
 +
 
 
.title{
 
.title{
 
     font-size:25pt !important;
 
     font-size:25pt !important;
Line 71: Line 234:
 
     padding-bottom:15px;
 
     padding-bottom:15px;
 
}
 
}
−
 
−
@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;
 
−
 
−
}
 
−
}
 
−
 
−
@media screen and (orientation: portrait){
 
−
.text-container{
 
−
        position:relative;
 
−
        width:70vw;
 
−
        height:210px;
 
−
        margin-left:15%;
 
−
        margin-top:6vw;
 
−
        margin-bottom:1vw;
 
−
        background-color:rgba(243,247,247,0.7);
 
−
        border-radius:10px;
 
−
        display:block;
 
−
 
−
}
 
−
}
 
−
 
−
 
−
    .item{
 
−
        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;
 
−
    }
 
−
 
−
 
−
 
−
 
−
/*-------------overview-------------------*/
 
−
 
−
 
−
@media screen and (min-width:768px){
 
−
  .over-container{
 
−
            width:75%;
 
−
            height:60vh;
 
−
            margin:auto;
 
−
            margin-top:25vh;
 
−
            margin-bottom:15%;
 
−
            position:relative;
 
−
            } 
 
−
.overview{
 
−
    color:#F3F7F7;
 
−
    text-align:justify;
 
−
    text-indent:2em;
 
−
    padding-left:20px;
 
−
    padding-left:20px;
 
−
    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){
 
−
  .over-container{
 
−
            width:80%;
 
−
            height:100%;
 
−
            margin:auto;
 
−
            margin-bottom:40%;
 
−
            margin-top:18%;
 
−
            position:relative;
 
−
            display:block;
 
−
            }
 
−
 
−
.position{
 
−
    cursor:pointer;
 
−
    position:absolute;
 
−
    margin-left:32vw;
 
−
    margin-top:5%;
 
−
   
 
−
}
 
−
}
 
−
 
−
 
−
.position:hover{
 
−
    transform:scale(1.1)
 
−
 
−
}
 
−
 
−
 
−
.bigphoto{
 
−
      margin: auto;
 
−
      display: block;
 
−
    }
 
 
</style>
 
</style>
 
</head>
 
</head>
  
−
 
−
<!-----wiki content--->
 
 
<body>
 
<body>
−
<section>
+
    <div class="img-container">
−
    <h1>
+
         <img src="https://static.igem.org/mediawiki/2017/2/28/Bigphoto.png" class="main-img" width="100%">
−
         <img src="https://static.igem.org/mediawiki/2017/2/28/Bigphoto.png" class="bigphoto" width="60%">
+
    </div>
  
−
<div class="over-container">
+
<div style="width:80%;margin:auto;margin-bottom:3%;">
−
  <div>
+
<h1>
 +
 
 +
<div>
 
       <p class="title">Abstract</p>
 
       <p class="title">Abstract</p>
−
       <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 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? 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. However, 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, Thus, we decided to apply our product mainly to foods, cosmetics and medicines. The target temperature we’ve set is 37 degrees Celsius, the temperature at which bacteria reproduce most rapidly.</p>
−
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. However, 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, Thus, we decided to apply our product mainly to foods, cosmetics and medicines. The target temperature we’ve set is 37 degrees Celsius, the temperature at which bacteria reproduce most rapidly.</p>    
+
</div>
−
</h1>
+
−
</section>
+
  
 +
</div>
  
−
<script>
+
    <a href="https://2016.igem.org/Team:NCTU_Formosa/Description">
−
$(function() {
+
        <div class="img-box1">
−
 
+
            <div class="text">Description</div>
−
// Menu Tabular
+
            <img src="https://static.igem.org/mediawiki/2016/f/f1/NCTU_descirption_main_project_page.jpg" width="100%" height="100%" class="HP_image">
−
var $text = $('.connect');
+
         </div>
−
$text.on('click', function(e) {
+
    </a>
−
e.preventDefault();
+
   
−
$text.removeClass('text-active');
+
    <a href="https://2016.igem.org/Team:NCTU_Formosa/Design">
−
$(this).addClass('text-active');
+
        <div class="img-box1-1">     
−
 
+
            <div class="text1">Design</div>
−
$('.item').fadeOut(300);
+
            <img src="https://static.igem.org/mediawiki/2016/a/ab/NCRU_Desigm_project_main_page.jpg" width="100%" height="100%" class="HP_image">
−
$(this.hash).delay(300).fadeIn();
+
        </div>
−
          
+
    </a>
−
});
+
−
 
+
−
});
+
−
 
+
−
</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' )
+
  
 +
   
 +
    <a href="https://2016.igem.org/Team:NCTU_Formosa/Demonstrate">
 +
        <div class="img-box1-2">
 +
            <div class="text2">Device</div>
 +
            <img src="https://static.igem.org/mediawiki/2016/7/75/NCTU_MAIN_PAGE_DEVICE.JPG" width="100%" height="100%" class="HP_image">
 +
        </div>
 +
    </a>
 +
   
 +
    <a href="https://2016.igem.org/Team:NCTU_Formosa/Proof">
 +
        <div class="img-box1">
 +
            <div class="text3">Results</div>
 +
            <img src="https://static.igem.org/mediawiki/2016/9/96/NCTU_Result_project_main_page.jpg" width="100%" height="100%" class="HP_image">
 +
        </div>
 +
    </a>
 +
   
 +
    <a href="https://2016.igem.org/Team:NCTU_Formosa/Model">
 +
        <div class="img-box1-1">
 +
            <div class="text4">Modeling</div>
 +
            <img src="https://static.igem.org/mediawiki/2016/4/42/NCTU_Modeling_project_main_page.jpg" width="100%" height="100%" class="HP_image">
 +
        </div>
 +
    </a>
 +
   
 +
<a href="https://2016.igem.org/Team:NCTU_Formosa/Safety">
 +
        <div class="img-box1-2">
 +
            <div class="text5">Safety</div>
 +
            <img src="https://static.igem.org/mediawiki/2016/9/9e/NCTU_safety_main_project_page.jpg" width="100%" height="100%" class="HP_image">
 +
        </div>
 +
    </a>
  
−
$nodes.each( function( index ) {
+
    </h1>
−
  var $node = $( this );
+
−
  $node.click( function() {
+
−
    $('html, body').animate({ scrollTop: $('.text-container').offset().top - 380}, 1000 );
+
−
  });
+
−
})
+
−
</script>
+
 
</body>
 
</body>
 
</html>
 
</html>
 
{{TCFSH_Taiwan_footer}}
 
{{TCFSH_Taiwan_footer}}

Revision as of 02:36, 27 October 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

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. However, 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, Thus, we decided to apply our product mainly to foods, cosmetics and medicines. The target temperature we’ve set is 37 degrees Celsius, the temperature at which bacteria reproduce most rapidly.

Description
Design
Device
Results
Modeling
Safety