(Prototype team page) |
|||
(10 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
{{TCFSH_Taiwan}} | {{TCFSH_Taiwan}} | ||
+ | {{TCFSH_Taiwan/Navigation}} | ||
<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://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; | ||
+ | } | ||
+ | h1{ | ||
+ | background-image:url('https://static.igem.org/mediawiki/2017/a/a9/Tcfshtaiwan_background.jpeg'); | ||
+ | } | ||
+ | /*大圖*/ | ||
+ | @media screen and (min-width: 768px) { | ||
+ | .img-container{ | ||
+ | height:auto; | ||
+ | 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:red;/*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:#ffd11a; | ||
+ | text-shadow:1px 1px 10px rgb(153, 153, 255); | ||
+ | border-left:3px solid rgb(153, 153, 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; | ||
+ | } | ||
+ | .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 Detecoli</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/2017/a/ac/Safetytcfsh.jpeg" class="main-img" width="100%"> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | <!--wiki content--> | ||
+ | |||
+ | <h1> | ||
+ | <section class="content_container"> | ||
+ | <div> | ||
+ | <p class="title">Safety<p> | ||
+ | <p class="content-2">Safety is very important while we use <span style="font-style:italic;">E. coli</span> in our experiment and project. Our safety part includes laboratory safety and safety of Detecoli.</p> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | <div> | ||
+ | <p class="title">Laboratory Safety</p> | ||
+ | <p class="content">Every member of TCFSH_Taiwan has finished required training courses offered by Environmental Protection and Safety Center before entering the laboratory. These courses includes basic laboratory safety instruction, laboratory emergency response, toxic chemical operation, toxic chemical management and biological hazard. After taking the courses, we have to pass the exam in order to get in the laboratory.</p> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
+ | <!--detecoli--> | ||
+ | <div> | ||
+ | <p class="title">Safety of Detecoli</p> | ||
+ | <p class="content">The external plastic wrap offers the first layer of protection. The plastic bag is thick enough to withstand pulling or crushing to a reasonable degree. According to experiments, a 0.1 mm thick PE plastic is strong enough to bear a bag of coins in it dropping from 1 meter to floor for more than 10 times. Thus, under normal usage, the possibility for the <span style="font-style:italic;">E. coli</span> to escape is extremely low. Also, if the firm, thick plastic wrap were broken, we can legitimately infer that the terminating bubble inside would have been broken too, and thus will release the disinfectant. | ||
+ | </p> | ||
+ | |||
+ | <p class="content">Second, the antiseptic offers extra protection. The antiseptic we use is hydrogen peroxide, a.k.a H<sub>2</sub>O<sub>2</sub>. According to the APIC (Association for Professionals in Infection Control and Epidemiology), a mere 6% hydrogen peroxide is an effective disinfectant, and can kill most of the bacteria in 20 minutes. To help users confirm that they do crush the terminating bubble, we put black ink in the H<sub>2</sub>O<sub>2</sub>. | ||
+ | </p> | ||
+ | |||
+ | <p class="content">Third, the <span style="font-style:italic;">E. coli</span> itself is a safeguard against the hazard. Even if some tragedy happens and the <span style="font-style:italic;">E. coli</span> leaks without being disinfected first, it’ll still die very soon due to the fact that we have transplant an alien gene in it, making it more vulnerable and easier to be killed when exposed to the outside environment. Also, the possibility for bacteria to mutate or transform is low enough to ignore.</p> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | |||
+ | </div> | ||
+ | </section> | ||
+ | </h1> | ||
+ | |||
+ | |||
+ | <!--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> | ||
+ | {{TCFSH_Taiwan_footer}} |
Latest revision as of 08:22, 1 November 2017