(Prototype team page) |
|||
(36 intermediate revisions by 6 users not shown) | |||
Line 1: | Line 1: | ||
− | {{NCTU_Formosa}} | + | {{Team:NCTU_Formosa}} |
<html> | <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; | ||
− | + | } | |
− | + | ||
− | <p> | + | .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; | ||
+ | text-shadow:1px 1px 10px rgb(0, 206, 255); | ||
+ | border-left:3px solid rgb(0, 206, 255); | ||
+ | padding-left:10px !important; | ||
+ | color:rgb(0, 206, 255); | ||
+ | margin-top:20px; | ||
+ | margin-bottom:10px; | ||
+ | font-weight:400; | ||
+ | } | ||
+ | .content{ | ||
+ | font-size:15pt !important; | ||
+ | text-align:justify; | ||
+ | text-indent:2em; | ||
+ | color:#F3F7F7; | ||
+ | padding-left:40px; | ||
+ | padding-top:15px; | ||
+ | padding-bottom:15px; | ||
+ | } | ||
+ | .content-2{ | ||
+ | font-size:15pt !important; | ||
+ | text-align:justify; | ||
+ | text-indent:2em; | ||
+ | color:#F3F7F7; | ||
+ | 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; | ||
+ | line-height:1.5; | ||
+ | padding-bottom:10px; | ||
+ | |||
+ | } | ||
+ | .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">Safety</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">Laboratory Safety</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">Safety of Pantide</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/e/e2/NCTU_SAFETY_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">Safety<p> | ||
+ | <p class="content-2">The safety of our project consists of two aspects. One is the laboratory safety; the other is the safety of spraying Pantide into the environment.</p> | ||
+ | </div> | ||
+ | |||
+ | <div> | ||
+ | <p class="title">Laboratory Safety</p> | ||
+ | <p class="content-1">Safety Training</p> | ||
+ | |||
+ | <p class="content-2">Before entering the laboratory, all the members in NCTU_Formosa must receive several training courses and evaluate exams offered by Environmental Protection and Safety Center. The content of the training courses consists of four parts.</p> | ||
+ | <ul style="list-style-image:none;list-style-type:disc;"> | ||
+ | <li class="list">For the basic laboratory safety instruction, we learned the safety level of laboratories and personal protective equipment.</li> | ||
+ | <li class="list">For the laboratory emergency response, we learned of how to react to several emergency situations and certain procedure dealing with specific chemicals.</li> | ||
+ | <li class="list">For the toxic chemical operation and management, we learned the content of the material safety data sheet (MSDS).</li> | ||
+ | <li class="list">For biosafety, we learned biological hazard, including levels of biohazard and instructions of dealing with biological trash.</li> | ||
+ | </ul> | ||
+ | <p class="content-2">The four training courses contain an evaluating exam. After taking the courses and passing the exam, we all get certificates for each training.</p> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | <div> | ||
+ | <p class="title">Safety of Pantide</p> | ||
+ | <p class="content-1">Processing Procedure in the Lab</p> | ||
+ | <p class="content-2">In the future, we plan to spray Pantide onto the environment. Therefore, we should guarantee that Pantide is safe to humans and harmless to the environment. As a result, we design a processing standard in the laboratory. </p> | ||
+ | |||
+ | <ul style="list-style-image:none;list-style-type:decimal;" > | ||
+ | <li class="list">Free of <i>E. coli</i> | ||
+ | <br> The product we spray into the environment should not contain any genetically-modified organisms. So, after we expressed Pantide with <i>E. coli</i>, the LB broth containing <i>E.coli</i> should be first sonicated by the sonicator to let Pantide be soluble in the LB broth. In this step, most of the living <i>E.coli</i> will be eliminated. In order to guarantee the sonicated LB broth lysate is free of <i>E. coli</i>, we boil the lysate for 1 hour. However, boiling the solution may induce Pantide degradation. We want to know the degradation time of boiling the lysate. Pantide are retained and we run SDS-PAGE to evaluate the amount of Pantide residue. (Figure. 1) | ||
+ | <div> | ||
+ | <img src="https://static.igem.org/mediawiki/2016/6/66/NCTU_SAFETY1.jpeg" class="picture"> | ||
+ | <p class="content-image">Figure1. SDS-PAGE gel and the concentrations of boiling test to native Hv1a-lectin (17.1 kDa). The marked band shows that there is a significant decrease in Hv1a-lectin after 2 hours.</p> | ||
</div> | </div> | ||
+ | </li> | ||
+ | <li class="list">Degradation of Pantide | ||
+ | <br> To ensure that Pantide will degrade into amino acids when it is released into the environment, we have done an experiment to prove that Pantide does degrade in the ultraviolet light. (See the <a href="https://2016.igem.org/Team:NCTU_Formosa/Model#title3" style="color:#44E287;">experiment</a>) Once we have known that Pantide will degrade in the ultraviolet light, we may conclude that Pantide will degrade in the natural light over time. With the degradation modeling simulation (See the <a href="https://2016.igem.org/Team:NCTU_Formosa/Model#title3" style="color:#44E287;">Modelling</a>), we may also apply the degradation rate into the automatic spraying device. | ||
+ | </li> | ||
+ | </ul> | ||
+ | |||
+ | |||
+ | </div> | ||
+ | |||
+ | <div> | ||
+ | <p class="content-2">For humans, Pantide will not have any negative effect on human health. When the customer gets the agricultural produce from the market, most of the Pantide is thought to have degraded into amino acids and even there is some residue of Pantide on the surface of the product. Pantide is also harmless to humans. The three toxins we choose have been proved to be ineffective to mammals due to the structural difference between the voltage-gated ion channels between mammals and insects. It has been validated through references doing experiments on mice.</p> | ||
+ | <p class="content-2">For the environment, Pantide is made of amino acids. So it is harmless for the environment. Instead, it can be as the fertilizer. When it is washed into the soil or in water resources, Pantide is ineffective to the microbiomes and the vertebrate in the ecosystem. Furthermore, Pantide is species-specific, so it will not harm the beneficial pollinator, Bees.</p> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | |||
+ | </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]-70) { | ||
+ | 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+10 ); | ||
+ | } | ||
+ | |||
+ | }) | ||
+ | |||
+ | // 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+420) { | ||
+ | $('#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> | </html> | ||
+ | {{Team:NCTU_Formosa/footer}} |
Latest revision as of 03:08, 4 November 2016