| Line 1: | Line 1: | ||
| − | {{Team: | + | {{Team:NCTU_Formosa}} |
| − | <html | + | <html> |
| − | + | ||
<head> | <head> | ||
| − | + | <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> | |
| − | + | <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,400" rel="stylesheet"> | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | < | + | <style type="text/css"> |
| − | + | #sideMenu, #top_title {display:none;} | |
| − | + | #content { padding:0px; width:100%; margin-top:-7px; margin-left: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; | ||
| + | font-weight: 300; | ||
| + | } | ||
| + | |||
| + | body{ | ||
| + | margin:0; | ||
| + | padding:0; | ||
| + | background-color:rgb(51,51,51) !important; | ||
| + | background-repeat: repeat-y; | ||
| + | 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{ | ||
| + | position:relative; | ||
| + | height:100%; | ||
| + | backgroind:balck; | ||
| + | overflow:hidden; | ||
| + | } | ||
| + | } | ||
| + | video { | ||
| + | position:relative; | ||
| + | width: 78%; | ||
| + | height:auto; | ||
| + | margin-top:60px; | ||
| + | margin-left:10vw; | ||
| + | margin-right:10vw; | ||
| + | } | ||
| + | |||
| + | .box-container{ | ||
| + | position:relative; | ||
| + | display:block; | ||
| + | width:auto; | ||
| + | height:720px; | ||
| + | margin-top:15vh !important; | ||
| + | text-decoration:none; | ||
| − | + | } | |
| − | + | ||
| − | + | /*-----------image-------------------*/ | |
| − | + | .img-box{ | |
| − | + | position:relative; | |
| − | + | margin-left:30vw; | |
| − | + | display:block; | |
| − | + | padding-top:70px; | |
| − | + | padding-left:10px; | |
| − | + | } | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | .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-decoration:none; | |
| − | + | font-size:2em !important; | |
| − | + | text-align:center; | |
| − | + | padding-left:10px; | |
| − | + | } | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | .text-iot{ | |
| − | + | text-decoration:none; | |
| − | + | font-size:2em !important; | |
| − | + | text-align:center; | |
| − | + | padding-left:35px; | |
| − | + | } | |
| − | + | .text-device{ | |
| − | + | text-decoration:none; | |
| − | + | font-size:2em !important; | |
| − | + | text-align:center; | |
| − | + | padding-left:15px; | |
| − | + | } | |
| − | + | .text1{ | |
| + | position:absolute; | ||
| + | text-decoration:none; | ||
| + | width:100px; | ||
| + | top:31%; | ||
| + | left:-14%; | ||
| + | background:rgba(243,247,247,0.9); | ||
| + | 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; | ||
| − | + | } | |
| − | + | } | |
| − | + | ||
| − | + | @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; | |
| − | + | } | |
| − | + | ||
| − | + | /*-----------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; | |
| − | + | 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; | ||
| + | } | ||
| + | .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; | ||
| + | } | ||
| + | .position{ | ||
| + | cursor:pointer; | ||
| + | position:absolute; | ||
| + | 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> | |
| − | + | </head> | |
| − | + | ||
| − | + | <body> | |
| − | + | ||
| − | + | <div> | |
| − | + | <video playinline autoplay controls="true"> | |
| − | + | <source src="https://static.igem.org/mediawiki/2016/b/b3/NCTU_HOMEPAGE_FINAL.mp4" type="video/mp4" > | |
| − | + | </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 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> | ||
| + | </div> | ||
| + | |||
| + | <!------part 2------> | ||
| + | |||
| + | <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"> | ||
| + | <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"> | ||
| + | <p class="text-PANTIDE">Pantide</p> | ||
</div> | </div> | ||
| − | + | </a> | |
| − | + | ||
| − | + | <a href="#iot" class="connect" style="text-decoration:none;" > | |
| − | + | <div class="text2"> | |
| − | + | <p class="text-iot">IoT</p> | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | < | + | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
</div> | </div> | ||
| − | + | </a> | |
| − | + | ||
| − | + | <a href="#device" class="connect" style="text-decoration:none;" > | |
| − | + | <div class="text3"> | |
| − | + | <p class="text-device">Device</p> | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | < | + | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | < | + | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
</div> | </div> | ||
| − | + | </a> | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| + | </div> | ||
| + | <div class="text-container"> | ||
| − | + | <article id="PANTIDE" class="item item-active"> | |
| − | + | <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> |
| − | + | <a href="https://2016.igem.org/Team:NCTU_Formosa/Design#pantide" style="text-decoration:none;color:black;"> | |
| − | + | <div class="buttom"> | |
| − | + | more | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
</div> | </div> | ||
| − | < | + | </a> |
| − | + | </article> | |
| − | + | ||
| − | + | <article id="iot" class="item"> | |
| − | + | <p style="text-align:center;font-size:24pt;padding-top:10px;">IoT</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="https://2016.igem.org/Team:NCTU_Formosa/Demonstrate#IoT" style="text-decoration:none;color:black;"> | |
| − | + | <div class="buttom"> | |
| − | + | more | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
</div> | </div> | ||
| − | < | + | </a> |
| − | + | </article> | |
| − | + | ||
| − | + | <article id="device" class="item"> | |
| − | + | <p style="text-align:center;font-size:24pt;padding-top:10px;">Device</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="https://2016.igem.org/Team:NCTU_Formosa/Demonstrate" style="text-decoration:none;color:black;"> | |
| − | + | <div class="buttom"> | |
| − | + | more | |
| − | + | ||
</div> | </div> | ||
| + | </a> | ||
| + | </article> | ||
</div> | </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> | ||
| + | {{Team:NCTU_Formosa/footer}} | ||
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
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.
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.
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.
