(Prototype team page) |
|||
(23 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://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; | ||
+ | } | ||
− | + | h1{ | |
− | + | background-image:url('https://static.igem.org/mediawiki/2017/a/a9/Tcfshtaiwan_background.jpeg'); | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
+ | .bigphoto{ | ||
+ | margin: auto; | ||
+ | display: block; | ||
+ | } | ||
+ | /*大圖*/ | ||
+ | @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:370px; | ||
+ | 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; | ||
+ | } | ||
+ | /*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">Professor Cheng-Ming Chang</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">Professor Chien-Chih Yu</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> | ||
+ | |||
+ | |||
+ | <h1> | ||
+ | <!--圖片--> | ||
+ | <div class="img-container"> | ||
+ | <img src="https://static.igem.org/mediawiki/2017/6/60/Silverjptcfsh.jpeg" class="main-img" width="100%"> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | <!--wiki content--> | ||
+ | <section class="content_container"> | ||
+ | <div> | ||
+ | <p class="title">Professor Cheng-Ming Chang<p> | ||
+ | <p class="content">In order to know about the transportation process for frozen food, we had an interview with Professor Cheng-Ming Chang at National Taiwan Ocean University an expert in this field.</p> | ||
+ | |||
+ | <img src="https://static.igem.org/mediawiki/2017/e/e3/JasonHP.jpeg" class="bigphoto" width=70%> | ||
+ | |||
+ | <p class="content">During the interview, we learned two important pieces of information. The first is that our product is not applicable for the foods that need to be preserved in the fridge. Since the highest temperature that those foods can tolerate is 15 degrees Celsius, our product, whose tolerance is 37 degrees Celsius, won’t be useful for them. The second piece of information is that the technology of temperature measuring at low temperatures is already perfect. There are both cheap and expensive products, and the accuracy also varies with the price. However, it’s good that we aim the target temperature at 37 degrees Celsius, since no one has ever attempted this temperature before. (Click <a href="https://static.igem.org/mediawiki/2017/c/cb/Changchengminginterviewnew.pdf" style="color: orange">here</a> to see more)</p> | ||
+ | |||
+ | <p class="title">Professor Chien-Chih Yu</p> | ||
+ | <p class="content">To know more about the transportation process of drug, we interviewed Professor Chien-Chih Yu, a professor of Pharmacy at China Medical University.</p> | ||
+ | |||
+ | <img src="https://static.igem.org/mediawiki/2017/3/3e/Professorwu.jpeg" class="bigphoto" width="70%";> | ||
+ | |||
+ | <p class="content">The feedbacks we received are, first, there might be little application of our stickers on drugs; second, the professor suggested we aim at the R&D drugs, which are less resistant to temperature change. (See more <a href="https://static.igem.org/mediawiki/2017/0/03/Hp1tcfsh.pdf" style="color: orange">here</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> | </html> | ||
+ | {{TCFSH_Taiwan_footer}} |
Latest revision as of 03:42, 2 November 2017