Difference between revisions of "Team:NCTU Formosa"

 
(290 intermediate revisions by 3 users not shown)
Line 3: Line 3:
 
<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://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">
Line 16: Line 23:
 
         font-family: 'Open Sans', sans-serif;
 
         font-family: 'Open Sans', sans-serif;
 
         font-weight: 300;
 
         font-weight: 300;
−
       }
+
       }
 
      
 
      
 
     body{
 
     body{
Line 23: Line 30:
 
         background-color:rgb(51,51,51) !important;
 
         background-color:rgb(51,51,51) !important;
 
         background-repeat: repeat-y;
 
         background-repeat: repeat-y;
−
         background-size:100%;*/
+
         background-size:100%;
 
         }
 
         }
−
      
+
@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{
 
     .animate-box{
 
                 position:relative;
 
                 position:relative;
Line 33: Line 49:
 
     }
 
     }
  
 +
}
 
     video {  
 
     video {  
−
            position:relative;
+
            position:relative;
−
            left: 0;
+
             width: 78%;
−
             width: 100%;
+
 
             height:auto;
 
             height:auto;
−
             overflow:hidden;
+
             margin-top:60px;
 +
            margin-left:10vw;
 +
            margin-right:10vw;
 
           }  
 
           }  
 
      
 
      
Line 46: Line 64:
 
         display:block;
 
         display:block;
 
         width:auto;
 
         width:auto;
−
         height:auto;
+
         height:720px;
 +
        margin-top:15vh !important;
 
         text-decoration:none;
 
         text-decoration:none;
−
        background-repeat: repeat-y;
+
 
−
        background-size:100%;
+
 
     }
 
     }
 
      
 
      
−
/*image*/
+
/*-----------image-------------------*/
 
     .img-box{
 
     .img-box{
 
         position:relative;
 
         position:relative;
 
         margin-left:30vw;
 
         margin-left:30vw;
−
        margin-top:50px;
 
 
         display:block;
 
         display:block;
 +
        padding-top:70px;
 +
        padding-left:10px;
 
     }
 
     }
  
Line 71: Line 90:
 
             text-decoration:none;
 
             text-decoration:none;
 
         }
 
         }
−
/*pantide iot device*/
+
/*---------------PANTIDE iot device--------------*/
  
−
.text-pantide{
+
.text-PANTIDE{
 
       text-decoration:none;
 
       text-decoration:none;
 
       font-size:2em !important;
 
       font-size:2em !important;
 
       text-align:center;
 
       text-align:center;
−
       padding-left:15px;
+
       padding-left:10px;
 
}
 
}
  
Line 96: Line 115:
 
             text-decoration:none;
 
             text-decoration:none;
 
             width:100px;
 
             width:100px;
−
             top:13%;
+
             top:31%;
−
             left:-13%;
+
             left:-14%;
 
             background:rgba(243,247,247,0.9);
 
             background:rgba(243,247,247,0.9);
 
             border:3px solid #FBB03B;
 
             border:3px solid #FBB03B;
 
             text-align:center;           
 
             text-align:center;           
 +
            cursor:pointer;
 
         }
 
         }
 
         .text1:hover{
 
         .text1:hover{
Line 109: Line 129:
 
             text-decoration:none;
 
             text-decoration:none;
 
             width:100px;
 
             width:100px;
−
             top:80%;
+
             top:83%;
−
             left:-13%;
+
             left:-14%;
 
             background:rgba(243,247,247,0.9);
 
             background:rgba(243,247,247,0.9);
 
             border:3px solid #FBB03B;       
 
             border:3px solid #FBB03B;       
−
             text-align:center;        
+
             text-align:center;  
 +
            cursor:pointer;     
 
         }
 
         }
 
         .text2:hover{
 
         .text2:hover{
Line 121: Line 142:
 
             position:absolute;
 
             position:absolute;
 
             width:100px;
 
             width:100px;
−
             top:-4%;
+
             top:34%;
−
             left:62%;
+
             left:57%;
 
             background:rgba(243,247,247,0.9);
 
             background:rgba(243,247,247,0.9);
 
             border:3px solid #FBB03B;         
 
             border:3px solid #FBB03B;         
 
             text-align:center;
 
             text-align:center;
 +
            cursor:pointer;
 
         }
 
         }
 
         .text3:hover{
 
         .text3:hover{
Line 131: Line 153:
 
         }
 
         }
  
 +
@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{
 
.text-container{
 
         position:relative;
 
         position:relative;
 
         width:70vw;
 
         width:70vw;
−
         height:230px;
+
         height:210px;
 
         margin-left:15%;
 
         margin-left:15%;
−
         margin-top:5vw;
+
         margin-top:6vw;
−
         margin-bottom:3vw;
+
         margin-bottom:1vw;
 
         background-color:rgba(243,247,247,0.7);
 
         background-color:rgba(243,247,247,0.7);
 
         border-radius:10px;
 
         border-radius:10px;
Line 144: Line 181:
  
 
}
 
}
 +
}
 +
 +
 
     .item{
 
     .item{
 
         display:none;
 
         display:none;
Line 154: Line 194:
 
         padding-left:20px;
 
         padding-left:20px;
 
         padding-right:20px;
 
         padding-right:20px;
−
         font-size:14pt !important;
+
         font-size:13.5pt !important;
 
         text-indent:2em;
 
         text-indent:2em;
 
         font-family: 'Open Sans' !important;
 
         font-family: 'Open Sans' !important;
 
     }
 
     }
  
−
/*buttom*/
+
/*-----------buttom----------------*/
 
.buttom{
 
.buttom{
 
         position:absolute;
 
         position:absolute;
Line 176: Line 216:
 
         bottom:5px;
 
         bottom:5px;
 
}
 
}
−
/*overview*/
+
 
 +
 
 +
 
 +
/*-------------overview-------------------*/
 +
 
 +
 
 +
@media screen and (min-width:768px){
 +
  .over-container{
 +
            width:75%;
 +
            height:60vh;
 +
            margin:auto;
 +
            margin-top:25vh;
 +
            margin-bottom:15%;
 +
            position:relative;
 +
            } 
 
h1{
 
h1{
 
     text-align:center;
 
     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-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;
 +
            }
 +
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;
 
}
 
}
Line 187: Line 276:
 
     text-indent:2em;
 
     text-indent:2em;
 
     padding-left:20px;
 
     padding-left:20px;
−
     padding-left:20px;
+
     padding-right:20px;
 
     padding-top:10px;
 
     padding-top:10px;
 
     padding-bottom:10px;
 
     padding-bottom:10px;
Line 193: Line 282:
 
}
 
}
 
.position{
 
.position{
 +
    cursor:pointer;
 
     position:absolute;
 
     position:absolute;
−
     margin-left:48%;
+
     margin-left:32vw;
 +
    margin-top:5%;
 +
   
 +
}
 +
}
 +
 
 +
 
 +
.position:hover{
 +
    transform:scale(1.1)
 +
 
 +
}
 +
/*------------frame-------------*/
 +
.leftup{
 +
      float:left;
 +
      margin-top:4%;
 +
      position:relative;
 +
      margin-left:3%;
 +
}
 +
.rightup{
 +
      float:right;
 +
      margin-top:4%;
 +
      position:relative;
 +
      margin-right:3%;
 
}
 
}
 
</style>
 
</style>
 
</head>
 
</head>
 +
 
<body>
 
<body>
−
<div class="animate-box">
+
 
 
     <div>
 
     <div>
−
         <video poster="https://static.igem.org/mediawiki/2016/8/85/New_home.PNG" playsinline autoplay muted>
+
         <video playinline autoplay  controls="true">
−
             <source src="https://static.igem.org/mediawiki/2016/b/b3/Wiki_home.mp4" type="video/mp4">
+
             <source src="https://static.igem.org/mediawiki/2016/b/b3/NCTU_HOMEPAGE_FINAL.mp4" type="video/mp4" >
 
         </video>
 
         </video>
 
     </div>
 
     </div>
 +
 +
 +
<div class="leftup">
 +
<img src="https://static.igem.org/mediawiki/2016/thumb/5/5f/Left-up.png/129px-Left-up.png">
 +
</div>
 +
<div class="rightup">
 +
<img src="https://static.igem.org/mediawiki/2016/thumb/9/96/Rightup.png/129px-Rightup.png">
 
</div>
 
</div>
 +
<div class="over-container">
 +
  <div>
 +
      <h1>Overview</h1>
 +
      <p class="overview">Spiders have evolved genuinely sophisticated predatory skills whereas NCTU_Formosa has created a brand new system that will revolutionize conventional agriculture. It is high time for upgrading the working styles of farming with the combination of synthetic Biology, Informatics and Engineering corresponding to Pantide, device and Internet of things in our project.</p>
 +
          <img src="https://static.igem.org/mediawiki/2016/e/e0/--.png" width="6%"class="position">
  
−
<div style="width:80%;margin:auto;margin-bottom:10%;margin-top:3%; position:relative;">
+
  </div>
−
<h1>Overview</h1>
+
−
<p class="overview">
+
−
Spiders have evolved genuinely sophisticated predatory skills whereas NCTU_Formosa has created a brand new system that will revolutionize conventional agriculture. It is high time for upgrading the working styles of farming with the combination of synthetic Biology, Informatics and Engineering corresponding to Pantide, Device and Internet of things in our project.
+
−
</p>
+
−
<img src="https://static.igem.org/mediawiki/2016/e/e0/--.png" width="5%" class="position">
+
 
</div>
 
</div>
  
−
 
+
                                  <!------part 2------>
  
 
<div class="box-container" id="home-spider">
 
<div class="box-container" id="home-spider">
 +
 +
                <!------------框------------->
 +
 +
    <div style="position:absolute;z-index:-500;left:30px;right:30px;">
 +
          <img src="https://static.igem.org/mediawiki/2016/e/e4/%E6%A1%86.png" width="100%" height="650px">
 +
    </div>
 +
 +
              <!--------------spider------------>
 +
 
     <div class="img-box">     
 
     <div class="img-box">     
−
         <img src="https://static.igem.org/mediawiki/2016/8/84/Spider.png" width="60%" >
+
         <img src="https://static.igem.org/mediawiki/2016/6/62/%E8%9C%98%E8%9B%9B_1.png" width="55%" >
 +
 
 +
<a href="#PANTIDE" class="connect text-active" style="text-decoration:none;" >
 
         <div class="text1">
 
         <div class="text1">
−
             <p class="text-pantide"><a href="#pantide" class="connect text-active" style="text-decoration:none;">Pantide</a></p>
+
             <p class="text-PANTIDE">Pantide</p>
 
         </div>
 
         </div>
 +
</a>
 +
 +
<a href="#iot" class="connect" style="text-decoration:none;" >
 
         <div class="text2">
 
         <div class="text2">
−
             <p class="text-iot"><a href="#iot" class="connect" style="text-decoration:none;">IoT</p>
+
             <p class="text-iot">IoT</p>
 
         </div>
 
         </div>
 +
</a>
 +
 +
<a href="#device" class="connect" style="text-decoration:none;" >
 
         <div class="text3">
 
         <div class="text3">
−
             <p class="text-device"><a href="#device" class="connect" style="text-decoration:none;">Device</a></p>
+
             <p class="text-device">Device</p>
 
         </div>
 
         </div>
−
    </div>
+
</a>
−
   
+
 
 +
</div>
 +
 
 
     <div class="text-container">
 
     <div class="text-container">
  
−
         <article id="pantide" class="item item-active">
+
         <article id="PANTIDE" class="item item-active">
 
         <p style="text-align:center;font-size:24pt;padding-top:10px;">Pantide</p>
 
         <p style="text-align:center;font-size:24pt;padding-top:10px;">Pantide</p>
 
         <p class="description">Utilizing the powerful toxicity of spider venom for pest control, NCTU_Formosa designed “Pantide” out of the repertoire of toxin peptides. By expressing a collection of Pantide with <i>E. coli</i>, we provided farmers a new alternative for chemical pesticide with fascinating advantages.</p>
 
         <p class="description">Utilizing the powerful toxicity of spider venom for pest control, NCTU_Formosa designed “Pantide” out of the repertoire of toxin peptides. By expressing a collection of Pantide with <i>E. coli</i>, we provided farmers a new alternative for chemical pesticide with fascinating advantages.</p>
−
         <a href="##">
+
         <a href="https://2016.igem.org/Team:NCTU_Formosa/Design#pantide" style="text-decoration:none;color:black;">
 
         <div class="buttom">
 
         <div class="buttom">
−
              see more
+
              more
 
         </div>
 
         </div>
 
         </a>
 
         </a>
Line 245: Line 384:
 
         <article id="iot" class="item">
 
         <article id="iot" class="item">
 
         <p style="text-align:center;font-size:24pt;padding-top:10px;">IoT</p>
 
         <p style="text-align:center;font-size:24pt;padding-top:10px;">IoT</p>
−
         <p class="description">The laborious farm works always exhaust farmers. Here we provide farmers a device with multiple detectors and an automatic sprinkler. Real-time control of the status in the farmland is no longer a fantasy.</p>
+
         <p class="description">Spiderweb is sensitive enough to be a medium for spiders reacting to the vibration transmitted. Effective pest control must be achieved with accurate information in the farmland and an effective operating system that link the device and users with mutual interactions when encountering changes.</p>
−
         <a href="##">
+
         <a href="https://2016.igem.org/Team:NCTU_Formosa/Demonstrate#IoT" style="text-decoration:none;color:black;">
 
         <div class="buttom">
 
         <div class="buttom">
−
              see more
+
              more
 
         </div>
 
         </div>
 
         </a>
 
         </a>
Line 255: Line 394:
 
         <article id="device" class="item">
 
         <article id="device" class="item">
 
         <p style="text-align:center;font-size:24pt;padding-top:10px;">Device</p>
 
         <p style="text-align:center;font-size:24pt;padding-top:10px;">Device</p>
−
         <p class="description">Spiderweb is sensitive enough to be a medium for spiders reacting to the vibration transmitted. Effective pest control must be achieved with accurate information in the farmland and an effective operating system that link the device and users with mutual interactions when encountering changes.</p>
+
         <p class="description">The laborious farm works always exhaust farmers. Here we provide farmers a device with multiple detectors and an automatic sprinkler. Real-time control of the status in the farmland is no longer a fantasy.</p>
−
         <a href="##">
+
         <a href="https://2016.igem.org/Team:NCTU_Formosa/Demonstrate" style="text-decoration:none;color:black;">
 
         <div class="buttom">
 
         <div class="buttom">
−
              see more
+
              more
 
         </div>
 
         </div>
 
         </a>
 
         </a>
Line 269: Line 408:
  
 
// Menu Tabular
 
// Menu Tabular
−
var $text = $('div p a');  
+
var $text = $('.connect');  
 
$text.on('click', function(e) {
 
$text.on('click', function(e) {
 
e.preventDefault();
 
e.preventDefault();
Line 288: Line 427:
 
var $imgs =  $( '.position' );
 
var $imgs =  $( '.position' );
  
−
var $spider=$('.box-container').offsetTop;
 
 
$imgs.each( function( index ) {
 
$imgs.each( function( index ) {
 
   var $img = $( this );
 
   var $img = $( this );
 
   $img.click( function() {
 
   $img.click( function() {
−
     $('html, body').animate({ scrollTop: ($spider)}, 1000 );
+
     $('html, body').animate({ scrollTop: $('.box-container').offset().top - 70}, 1000 );
 
   });
 
   });
 
})
 
})
Line 305: Line 443:
 
   var $node = $( this );
 
   var $node = $( this );
 
   $node.click( function() {
 
   $node.click( function() {
−
    $('html, body').animate({ scrollTop: 1150}, 1000 );
+
    $('html, body').animate({ scrollTop: $('.text-container').offset().top - 380}, 1000 );
 
   });
 
   });
 
})
 
})

Latest revision as of 03:22, 4 November 2016

Overview

Spiders have evolved genuinely sophisticated predatory skills whereas NCTU_Formosa has created a brand new system that will revolutionize conventional agriculture. It is high time for upgrading the working styles of farming with the combination of synthetic Biology, Informatics and Engineering corresponding to Pantide, device and Internet of things in our project.

Pantide

IoT

Device

Pantide

Utilizing the powerful toxicity of spider venom for pest control, NCTU_Formosa designed “Pantide” out of the repertoire of toxin peptides. By expressing a collection of Pantide with E. coli, we provided farmers a new alternative for chemical pesticide with fascinating advantages.

more

IoT

Spiderweb is sensitive enough to be a medium for spiders reacting to the vibration transmitted. Effective pest control must be achieved with accurate information in the farmland and an effective operating system that link the device and users with mutual interactions when encountering changes.

more

Device

The laborious farm works always exhaust farmers. Here we provide farmers a device with multiple detectors and an automatic sprinkler. Real-time control of the status in the farmland is no longer a fantasy.

more