(Replaced content with "{{TCFSH_Taiwan}} {{TCFSH_Taiwan/Navigation}} {{TCFSH_Taiwan_footer}}") |
|||
Line 1: | Line 1: | ||
{{TCFSH_Taiwan}} | {{TCFSH_Taiwan}} | ||
{{TCFSH_Taiwan/Navigation}} | {{TCFSH_Taiwan/Navigation}} | ||
+ | <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" 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: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; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | |||
+ | /*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; | ||
+ | margin:0 auto; | ||
+ | width:70vw; | ||
+ | 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; | ||
+ | } | ||
+ | /*second title*/ | ||
+ | .content-1{ | ||
+ | font-size:20pt !important; | ||
+ | text-align:justify; | ||
+ | color:#44E287; | ||
+ | font-weight: bold !important; | ||
+ | padding-top:5px; | ||
+ | padding-bottom:10px | ||
+ | } | ||
+ | |||
+ | .content-image{ | ||
+ | text-align:center !important; | ||
+ | color:#F3F7F7 !important; | ||
+ | font-size:12pt !important; | ||
+ | padding-top:10px; | ||
+ | padding-bottom:50px; | ||
+ | } | ||
+ | |||
+ | |||
+ | .appear{ | ||
+ | display:none; | ||
+ | |||
+ | } | ||
+ | .list{ | ||
+ | font-size:15pt !important; | ||
+ | text-align:justify; | ||
+ | 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:10px; | ||
+ | padding-bottom:10px; | ||
+ | } | ||
+ | .picture{ | ||
+ | position:relative; | ||
+ | left:7vw; | ||
+ | width:80%; | ||
+ | } | ||
+ | |||
+ | .picture-1{ | ||
+ | position:relative; | ||
+ | left:15vw; | ||
+ | width:50%; | ||
+ | } | ||
+ | |||
+ | .biobrick{ | ||
+ | color:rgb(0, 206, 255)!important; | ||
+ | text-decoration:none !important; | ||
+ | |||
+ | } | ||
+ | </style> | ||
+ | </head> | ||
+ | <body> | ||
+ | |||
+ | |||
+ | <!--圖片--> | ||
+ | <div class="img-container"> | ||
+ | <img src="https://static.igem.org/mediawiki/2016/f/fd/Ptcbig.png" class="main-img" width="100%"> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
+ | <!--wiki content--> | ||
+ | <h1> | ||
+ | |||
+ | <p class="title">Notebook</p> | ||
+ | <p class="content">Members of TCFSH_Taiwan write down details of what they have done everyday in order to improve the efficiency.</p> | ||
+ | |||
+ | <section class="content_container"> | ||
+ | |||
+ | <div style="float:left;padding-left:15px;width:250px;height:200px;background-color:white;border-radius:15px;margin:20px;padding:8px;"> | ||
+ | <p style="font-size:18pt;font-weight:bold;text-align:center;">TCFSH_Taiwan<br>notebook</br></p> | ||
+ | <p style="padding-top:50px;text-align:center;"><a href="https://static.igem.org/mediawiki/2016/9/99/INSECT_TEST-PROTOCOL.pdf" style="font-size:18pt;text-align:center;" target="_blank">Download</a></p> | ||
+ | </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]-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> | ||
{{TCFSH_Taiwan_footer}} | {{TCFSH_Taiwan_footer}} |
Revision as of 13:02, 30 October 2017
Notebook
Members of TCFSH_Taiwan write down details of what they have done everyday in order to improve the efficiency.
TCFSH_Taiwan
notebook