|
|
| Line 1: |
Line 1: |
| − | {{Team:NCTU_Formosa}}
| |
| − | <html>
| |
| − | <head>
| |
| − | <meta charset="UTF-8">
| |
| | | | |
| − | <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;}
| |
| − | body {background-color:white; }
| |
| − | #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
| |
| − | #top_menu_inside {margin-left: 20px; margin-bottom: 0px;}
| |
| − |
| |
| − |
| |
| − | html, body, div, span, applet, object, iframe,
| |
| − | 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;
| |
| − | }
| |
| − | body{
| |
| − | background-color:rgb(51,51,51) !important;
| |
| − | line-height:1;
| |
| − | }
| |
| − | /*大圖*/
| |
| − | @media screen and (min-width: 768px) {
| |
| − | .img-container{
| |
| − | height:100vh ;
| |
| − | overflow:hidden ;
| |
| − | width:100%;
| |
| − | }
| |
| − | .main-img{
| |
| − | 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;
| |
| − | }
| |
| − | }
| |
| − | /*scroll navigaiton*/
| |
| − | nav {
| |
| − | padding: 18px;
| |
| − | position: fixed;
| |
| − | height: auto;
| |
| − | left:0.5vw;
| |
| − | width: auto;
| |
| − | z-index: 9999;
| |
| − | top:25%;
| |
| − | margin: auto;
| |
| − | }
| |
| − |
| |
| − | nav .wrapper {
| |
| − | padding: 0;
| |
| − | width:100%;
| |
| − | height: 785px;
| |
| − | }
| |
| − |
| |
| − | nav .nodes {
| |
| − | position: relative;
| |
| − | margin-top: 1px;
| |
| − | margin-left: 1px;
| |
| − |
| |
| − | }
| |
| − |
| |
| − | .line {
| |
| − | position: absolute;
| |
| − | width:1px;
| |
| − | height:705px;
| |
| − | top: 13px;
| |
| − | }
| |
| − | .line .red {
| |
| − | width:1px; /*調line長度*/
| |
| − | height:47%; /*line寬度*/
| |
| − | position:relative;
| |
| − |
| |
| − | }
| |
| − |
| |
| − | .line .blue {
| |
| − | width: 1px; /*line寬度*/
| |
| − | height: 15%; /*調line長度*/
| |
| − | position:relative;
| |
| − | left:51px;
| |
| − |
| |
| − | }
| |
| − | .line .red-container {
| |
| − | position:relative;
| |
| − | width: 4px;
| |
| − | }
| |
| − | .line .red {
| |
| − | background-color:#00D6FF;/*cover line color*/
| |
| − | *zoom: 1;
| |
| − | background-size: 100%;
| |
| − | }
| |
| − | .line .blue {
| |
| − | background-color: white;/*line color*/
| |
| − | *zoom: 1;
| |
| − | background-size: 100%;
| |
| − |
| |
| − | }
| |
| − |
| |
| − | .node {
| |
| − | margin-left: 40px;/*調node間距*/
| |
| − | width: 20px;
| |
| − | height: 20px;
| |
| − | margin-top: 30px;
| |
| − | position: relative;
| |
| − | }
| |
| − | .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;
| |
| − |
| |
| − | }
| |
| − | .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%;
| |
| − |
| |
| − | }
| |
| − | .node .active-circle .cover {
| |
| − | transform: translateZ(0px);
| |
| − | width: 16px;
| |
| − | height: 16px;
| |
| − | background:#00D6FF;/*active circle color */
| |
| − | 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{
| |
| − | font-size:25pt !important;
| |
| − | color:rgb(0, 206, 255);
| |
| − | text-shadow:1px 1px 10px rgb(0, 206, 255);
| |
| − | border-left:3px solid rgb(0, 206, 255);
| |
| − | padding-left:10px !important;
| |
| − | margin-top:20px;
| |
| − | margin-bottom:10px;
| |
| − | font-weight:bold;
| |
| − | }
| |
| − | .content{
| |
| − | font-size:15pt !important;
| |
| − | text-align:justify;
| |
| − | text-indent:2em;
| |
| − | color:#F3F7F7;
| |
| − | padding-left:40px;
| |
| − | padding-top: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;
| |
| − | }
| |
| − |
| |
| − | </style>
| |
| − | </head>
| |
| − | <body>
| |
| − | <nav id="scroll">
| |
| − | <div class="wrapper">
| |
| − |
| |
| − | <div class="nodes">
| |
| − | <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">The Problem & Solution</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">Overview</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">Improvement of Previoius BioBrick</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/2016/3/30/NCTU_DESCRIPTION_BIG_PICTURE.png" class="main-img" width="100%">
| |
| − | </div>
| |
| − | <div>
| |
| − | <img src='https://static.igem.org/mediawiki/2016/f/f8/Web.png' class="web img-position" height="200px" id="web">
| |
| − | </div>
| |
| − | <div>
| |
| − | <img src="https://static.igem.org/mediawiki/2016/6/65/Right_%281%29.png" class="right img-position" id="right" height="600px">
| |
| − | </div>
| |
| − |
| |
| − |
| |
| − |
| |
| − | <!--wiki content-->
| |
| − |
| |
| − |
| |
| − | <section class="content_container">
| |
| − | <div>
| |
| − | <p class="title">The Problem & Solution<p>
| |
| − | <p class="content">Effective pest control has long been a pivotal issue in modern agriculture. With the escalating growth of world population and the change in diet, high levels of agricultural production are required to meet the demand for food production. To date, a vast majority of farmers uses chemical pesticide to kill the pest worldwide<sup>[1]</sup>, it is by far the most convenient and effective way of pesticide control. However, the increased production chemical pesticides brought entails multiple negative costs that are usually overlooked, sacrificing human health and the environment. Thus, problems of chemical pesticide involving food safety, farmers’ health, soil & water pollution, and the existence of drug-resistant insects are looming. An alternative solution of pest control is urgently needed, necessitating the nascence of our project.</p>
| |
| − |
| |
| − |
| |
| − |
| |
| − | <p class="title">Overview</p>
| |
| − | <p class="content">We designed a nature-inspired system to offer farmers a safe, environmentally-friendly, accurate, and automatic style of farming. Inspired by the spiders using web and venom to achieve the predation, the system also contains two concept-resembling parts—“Device and PANTIDE.” As engineering, internet of things (IoT), and synthetic biology collide, the transference of knowledge to state-of-the-art system helps farmers no longer need to do laborious farm works and spray hazardous chemical poisons. It is a revolutionary system that not only guarantees the safety of the farmers and customers worldwide but also safeguards the sustainability of the environment and ecosystem. (see <a href="https://2016.igem.org/Team:NCTU_Formosa/Design" style="color:#44E287;">Design</a> & <a href="https://2016.igem.org/Team:NCTU_Formosa/Demonstrate" style="color:#44E287;">Device</a>)</p>
| |
| − |
| |
| − |
| |
| − | <p class="title">Improvement of Previous BioBrick</p>
| |
| − | <p class="content">This year, we have designed fusion proteins of spider toxin in conjunction with snowdrop lectin by the three-alanine linker. Through the reference searching, we found that the previous research all used the three-alanine linker. In the experiment, we hypothesized that an elongated linker would enhance the function of the fusion protein for the original linker is too short for the proper folding of the two domains. So we went to the linker library in iGEM part registry website to search for a longer linker. At first, we planned to use the Flexible Peptide GS Linker(<a href="http://parts.igem.org/Part:BBa_K416001" style="color:#44E287;">BBa_K416001</a>) from 2010 NYU iGEM team. However, we found no result in the previous history using this linker. Therefore, we modified the sequence and added three more amino acids into the linker in case it was still too short for proper protein folding. In the experiment(See the <a href="https://2016.igem.org/Team:NCTU_Formosa/Proof#GS_Linker" style="color:#44E287;">Link</a>), the fusion protein with the elongated GS linker did show the enhanced repellent effect. Observed from the phenomenon, we did prove the enhanced function of the fusion proteins, so we speculate that the fusion protein has a better secondary structure than the original ones. As a result, we have submitted a basic part for the improved elongated GS linker.(See the <a href="http://parts.igem.org/wiki/index.php?title=Part:BBa_K1974030" style="color:#44E287;">Link</a>)</p>
| |
| − | </div>
| |
| − | </section>
| |
| − |
| |
| − |
| |
| − | <!--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>-->
| |
| − | </html>
| |
| − | {{Team:NCTU_Formosa/footer}}
| |
