(Prototype team page) |
|||
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, | ||
+ | fieldset, form, label, legend, | ||
+ | table, caption, tbody, tfoot, thead, tr, th, td { | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | border: 0; | ||
+ | outline: 0; | ||
− | <div class=" | + | } |
− | < | + | |
+ | |||
+ | * { | ||
+ | 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; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | /*scroll navigaiton*/ | ||
+ | nav { | ||
+ | padding: 18px; | ||
+ | position: fixed; | ||
+ | height: auto; | ||
+ | left:0.5vw; | ||
+ | width: auto; | ||
+ | z-index: 9999; | ||
+ | top:15%; | ||
+ | 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:60%; /*line寬度*/ | ||
+ | position:relative; | ||
+ | |||
+ | } | ||
+ | |||
+ | .line .blue { | ||
+ | width: 1px; /*line寬度*/ | ||
+ | height: 43%; /*調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:230px; | ||
+ | height:auto; | ||
+ | left:240px; | ||
+ | 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: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; | ||
+ | font-weight:400 !important; | ||
+ | } | ||
+ | |||
+ | |||
+ | .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; | ||
+ | line-height:1.5; | ||
+ | padding-bottom:5px; | ||
+ | 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%; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | .bigphoto{ | ||
+ | margin: auto; | ||
+ | display: block; | ||
+ | } | ||
+ | </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">Collaborations</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">TaiwanPP_FTP</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">Characterization of Biobricks</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">Distribution Kit</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">Mentoring a New Team</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">Newsletter</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">Survey Collaboration</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/4/4c/Integrated.jpeg" class="main-img" width="100%"> | ||
+ | </div> | ||
+ | |||
+ | <!--wiki content--> | ||
+ | |||
+ | <h1> | ||
+ | <section class="content_container"> | ||
+ | <div> | ||
+ | <p class="title">Preface<p> | ||
+ | <p class="content">As we all know, human practice plays one of the most significant part in iGEM. Being the first-year-participating iGEM team, we feel the enthusiasm from many other teams. We have received various of meetup and interaction invitations. | ||
+ | </p> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
+ | <div style="width:1px;height:60px;"id="TaiwanPP_FTP"> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | <div > | ||
+ | <p class="title">Study</p> | ||
+ | <p class="content-1">Interview</p> | ||
+ | <p class="content">We focus on some sorts of merchandises, which have little tolerance under sunlight and high temperature. One of them is cosmetic. On a weekend day, our teammates interviewed the cosmetic counters of several department stores. A few counters kindly answered our questions and shared their experience with us. We appreciate to the counters below. </p> | ||
+ | |||
+ | <img src="" class="bigphoto" width="50%";> | ||
+ | |||
+ | <p class="content-1">Entrepreneur</p> | ||
+ | <p class="content">Taiwan has the highest density of convenient store in the world. In other hand, convenient stores have been one of the main clients of the logistic industry. Hence, we contacted with a superintendent of a well-known chain convenient store and made a visit. There, we discuss the relationship between convenient store and logistic industry.</p> | ||
+ | |||
+ | <p class="content-1">Survey/p> | ||
+ | <p class="content">Transportation litigations and disputes have long been a problem in the society which logistics and international transportation plays an essential role in commerce. We aimed to solving this problem despite we didn’t know the issue very well. Therefore, with an eye to knowing the problem detailly, we designed a series of questionnaires and release them on the internet. We have received nearly 1,000 replies from the public. Some reminded us the problems we might come across, and others even introduced new orientations to us.<br># 95% of the sample think it is helpful to use our product.</br><br>Besides, we interviewed an international ship entrepreneur via internet, which is also helpful in understanding the international transportation.</br></p> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | <div> | ||
+ | <p class="title">Meetup</p> | ||
+ | <p class="content">The interaction between teams is usually the most important role in iGEM. We have exchange with many other teams by skype meetups, participating Asia meetup, and so on.</p> | ||
+ | <p class="content-1">Peshawar</p> | ||
+ | <p class="content">In the late June, we have a Skype meetup with Team Peshawar.</p> | ||
+ | |||
+ | <img src="" class="bigphoto" width="50%";> | ||
+ | |||
+ | <p class="content-1">Missouri S&T</p> | ||
+ | <p class="content">We were glad to have met Mr. and Mrs. Westenberg from Team Missouri S&T in July at our school. Sharing topics to each other, we got to know iGEM with a new prospect.</p> | ||
+ | |||
+ | <img src="https://static.igem.org/mediawiki/2017/e/e2/Meet_up.jpeg" class="bigphoto" width="50%";> | ||
+ | |||
+ | <p class="content-1">iGEM Asia Pacific Conference</p> | ||
+ | <p class="content">Participating the Asia iGEM meetup held by NCTU_Formosa, it was our first time to present our project to so many iGEMers. We were also staff members that assisted NCTU_Formosa during the event. Three of our members did the presentation. Nonetheless, we have altered our project slightly, and details should be released on giant jamboree.</p> | ||
+ | |||
+ | <img src="https://static.igem.org/mediawiki/2017/b/b7/Pasific_conference.jpeg" class="bigphoto" width="50%";> | ||
+ | <img src="" class="bigphoto" width="50%"> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
</div> | </div> | ||
− | <div class=" | + | |
− | < | + | |
− | < | + | |
− | + | <div> | |
− | + | <p class="title">Education</p> | |
− | + | <p class="content">We provided NTHU_Taiwan iGEM team with BBa_B0012. <br>(go to the wiki of <a href="https://2016.igem.org/Team:NTHU_Taiwan/Parts" style="color:#44E287;"> NTHU_Taiwan</a>)</p> | |
− | < | + | |
− | < | + | </section> |
− | < | + | </div> |
− | </ | + | </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:not(".main")' ); | ||
+ | |||
+ | // 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+10 ); | ||
+ | } | ||
+ | |||
+ | }) | ||
+ | |||
+ | // Clicking the nodes... again, nothing special ;) | ||
+ | $nodes.each( function( index ) { | ||
+ | var $node = $( this ); | ||
+ | $node.click( function() { | ||
+ | $('html, body').animate({ scrollTop: (positions[ index ] - documentHeight)-80}, 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}} |
Revision as of 15:22, 26 October 2017