Tommyrpg1010 (Talk | contribs) |
|||
(31 intermediate revisions by 6 users not shown) | |||
Line 5: | Line 5: | ||
<meta charset="UTF-8"> | <meta charset="UTF-8"> | ||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | ||
− | |||
− | |||
− | |||
<link rel="stylesheet" type="text/css" href="https://2018.igem.org/wiki/index.php?title=Template:NTHU_Formosa/CSS&action=raw&ctype=text/css"> | <link rel="stylesheet" type="text/css" href="https://2018.igem.org/wiki/index.php?title=Template:NTHU_Formosa/CSS&action=raw&ctype=text/css"> | ||
<style> | <style> | ||
+ | /*! | ||
+ | * fullPage 3.0.2 | ||
+ | * https://github.com/alvarotrigo/fullPage.js | ||
+ | * | ||
+ | * @license GPLv3 for open source use only | ||
+ | * or Fullpage Commercial License for commercial use | ||
+ | * http://alvarotrigo.com/fullPage/pricing/ | ||
+ | * | ||
+ | * Copyright (C) 2018 http://alvarotrigo.com/fullPage - A project by Alvaro Trigo | ||
+ | */ | ||
+ | |||
+ | html.fp-enabled, | ||
+ | .fp-enabled body { | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | overflow: hidden; | ||
+ | |||
+ | /*Avoid flicker on slides transitions for mobile phones #336 */ | ||
+ | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); | ||
+ | } | ||
+ | |||
+ | .fp-section { | ||
+ | position: relative; | ||
+ | -webkit-box-sizing: border-box; | ||
+ | /* Safari<=5 Android<=3 */ | ||
+ | -moz-box-sizing: border-box; | ||
+ | /* <=28 */ | ||
+ | box-sizing: border-box; | ||
+ | } | ||
+ | |||
+ | .fp-slide { | ||
+ | float: left; | ||
+ | } | ||
+ | |||
+ | .fp-slide, | ||
+ | .fp-slidesContainer { | ||
+ | height: 100%; | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | .fp-slides { | ||
+ | z-index: 1; | ||
+ | height: 100%; | ||
+ | overflow: hidden; | ||
+ | position: relative; | ||
+ | -webkit-transition: all 0.3s ease-out; | ||
+ | /* Safari<=6 Android<=4.3 */ | ||
+ | transition: all 0.3s ease-out; | ||
+ | } | ||
+ | |||
+ | .fp-section.fp-table, | ||
+ | .fp-slide.fp-table { | ||
+ | display: table; | ||
+ | table-layout: fixed; | ||
+ | width: 100%; | ||
+ | } | ||
+ | |||
+ | .fp-tableCell { | ||
+ | display: table-cell; | ||
+ | vertical-align: middle; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | } | ||
+ | |||
+ | .fp-slidesContainer { | ||
+ | float: left; | ||
+ | position: relative; | ||
+ | } | ||
+ | |||
+ | .fp-controlArrow { | ||
+ | -webkit-user-select: none; | ||
+ | /* webkit (safari, chrome) browsers */ | ||
+ | -moz-user-select: none; | ||
+ | /* mozilla browsers */ | ||
+ | -khtml-user-select: none; | ||
+ | /* webkit (konqueror) browsers */ | ||
+ | -ms-user-select: none; | ||
+ | /* IE10+ */ | ||
+ | position: absolute; | ||
+ | z-index: 4; | ||
+ | top: 50%; | ||
+ | cursor: pointer; | ||
+ | width: 0; | ||
+ | height: 0; | ||
+ | border-style: solid; | ||
+ | margin-top: -38px; | ||
+ | -webkit-transform: translate3d(0, 0, 0); | ||
+ | -ms-transform: translate3d(0, 0, 0); | ||
+ | transform: translate3d(0, 0, 0); | ||
+ | } | ||
+ | |||
+ | .fp-controlArrow.fp-prev { | ||
+ | left: 15px; | ||
+ | width: 0; | ||
+ | border-width: 38.5px 34px 38.5px 0; | ||
+ | border-color: transparent #fff transparent transparent; | ||
+ | } | ||
+ | |||
+ | .fp-controlArrow.fp-next { | ||
+ | right: 15px; | ||
+ | border-width: 38.5px 0 38.5px 34px; | ||
+ | border-color: transparent transparent transparent #fff; | ||
+ | } | ||
+ | |||
+ | .fp-scrollable { | ||
+ | overflow: hidden; | ||
+ | position: relative; | ||
+ | } | ||
+ | |||
+ | .fp-scroller { | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | |||
+ | .iScrollIndicator { | ||
+ | border: 0 !important; | ||
+ | } | ||
+ | |||
+ | .fp-notransition { | ||
+ | -webkit-transition: none !important; | ||
+ | transition: none !important; | ||
+ | } | ||
+ | |||
+ | #fp-nav { | ||
+ | position: fixed; | ||
+ | z-index: 100; | ||
+ | margin-top: -32px; | ||
+ | top: 50%; | ||
+ | opacity: 1; | ||
+ | -webkit-transform: translate3d(0, 0, 0); | ||
+ | } | ||
+ | |||
+ | #fp-nav.fp-right { | ||
+ | right: 17px; | ||
+ | } | ||
+ | |||
+ | #fp-nav.fp-left { | ||
+ | left: 17px; | ||
+ | } | ||
+ | |||
+ | .fp-slidesNav { | ||
+ | position: absolute; | ||
+ | z-index: 4; | ||
+ | opacity: 1; | ||
+ | -webkit-transform: translate3d(0, 0, 0); | ||
+ | -ms-transform: translate3d(0, 0, 0); | ||
+ | transform: translate3d(0, 0, 0); | ||
+ | left: 0 !important; | ||
+ | right: 0; | ||
+ | margin: 0 auto !important; | ||
+ | } | ||
+ | |||
+ | .fp-slidesNav.fp-bottom { | ||
+ | bottom: 17px; | ||
+ | } | ||
+ | |||
+ | .fp-slidesNav.fp-top { | ||
+ | top: 17px; | ||
+ | } | ||
+ | |||
+ | #fp-nav ul, | ||
+ | .fp-slidesNav ul { | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | } | ||
+ | |||
+ | #fp-nav ul li, | ||
+ | .fp-slidesNav ul li { | ||
+ | display: block; | ||
+ | width: 14px; | ||
+ | height: 13px; | ||
+ | margin: 7px; | ||
+ | position: relative; | ||
+ | } | ||
+ | |||
+ | .fp-slidesNav ul li { | ||
+ | display: inline-block; | ||
+ | } | ||
+ | |||
+ | #fp-nav ul li a, | ||
+ | .fp-slidesNav ul li a { | ||
+ | display: block; | ||
+ | position: relative; | ||
+ | z-index: 1; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | cursor: pointer; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | |||
+ | #fp-nav ul li a.active span, | ||
+ | .fp-slidesNav ul li a.active span, | ||
+ | #fp-nav ul li:hover a.active span, | ||
+ | .fp-slidesNav ul li:hover a.active span { | ||
+ | height: 12px; | ||
+ | width: 12px; | ||
+ | margin: -6px 0 0 -6px; | ||
+ | border-radius: 100%; | ||
+ | } | ||
+ | |||
+ | #fp-nav ul li a span, | ||
+ | .fp-slidesNav ul li a span { | ||
+ | border-radius: 50%; | ||
+ | position: absolute; | ||
+ | z-index: 1; | ||
+ | height: 4px; | ||
+ | width: 4px; | ||
+ | border: 0; | ||
+ | background: #333; | ||
+ | left: 50%; | ||
+ | top: 50%; | ||
+ | margin: -2px 0 0 -2px; | ||
+ | -webkit-transition: all 0.1s ease-in-out; | ||
+ | -moz-transition: all 0.1s ease-in-out; | ||
+ | -o-transition: all 0.1s ease-in-out; | ||
+ | transition: all 0.1s ease-in-out; | ||
+ | } | ||
+ | |||
+ | #fp-nav ul li:hover a span, | ||
+ | .fp-slidesNav ul li:hover a span { | ||
+ | width: 10px; | ||
+ | height: 10px; | ||
+ | margin: -5px 0px 0px -5px; | ||
+ | } | ||
+ | |||
+ | #fp-nav ul li .fp-tooltip { | ||
+ | position: absolute; | ||
+ | top: -2px; | ||
+ | color: #fff; | ||
+ | font-size: 14px; | ||
+ | font-family: arial, helvetica, sans-serif; | ||
+ | white-space: nowrap; | ||
+ | max-width: 220px; | ||
+ | overflow: hidden; | ||
+ | display: block; | ||
+ | opacity: 0; | ||
+ | width: 0; | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | |||
+ | #fp-nav ul li:hover .fp-tooltip, | ||
+ | #fp-nav.fp-show-active a.active+.fp-tooltip { | ||
+ | -webkit-transition: opacity 0.2s ease-in; | ||
+ | transition: opacity 0.2s ease-in; | ||
+ | width: auto; | ||
+ | opacity: 1; | ||
+ | } | ||
+ | |||
+ | #fp-nav ul li .fp-tooltip.fp-right { | ||
+ | right: 20px; | ||
+ | } | ||
+ | |||
+ | #fp-nav ul li .fp-tooltip.fp-left { | ||
+ | left: 20px; | ||
+ | } | ||
+ | |||
+ | .fp-auto-height.fp-section, | ||
+ | .fp-auto-height .fp-slide, | ||
+ | .fp-auto-height .fp-tableCell { | ||
+ | height: auto !important; | ||
+ | } | ||
+ | |||
+ | .fp-responsive .fp-auto-height-responsive.fp-section, | ||
+ | .fp-responsive .fp-auto-height-responsive .fp-slide, | ||
+ | .fp-responsive .fp-auto-height-responsive .fp-tableCell { | ||
+ | height: auto !important; | ||
+ | } | ||
+ | |||
/* Fixed header and footer. | /* Fixed header and footer. | ||
* --------------------------------------- */ | * --------------------------------------- */ | ||
Line 73: | Line 337: | ||
#section0 { | #section0 { | ||
− | background-image: url(https://static.igem.org/mediawiki/2018/ | + | color: white; |
− | background-size: | + | background-color: white; |
+ | background-image: url(https://static.igem.org/mediawiki/2018/6/66/T--NTHU_Formosa--cell0.png); | ||
+ | background-repeat: no-repeat; | ||
+ | background-position: center; | ||
+ | background-size: 70% 70%; | ||
} | } | ||
Line 93: | Line 361: | ||
#section4 { | #section4 { | ||
− | background-image: url(https://static.igem.org/mediawiki/2018/ | + | background-image: url(https://static.igem.org/mediawiki/2018/4/4f/T--NTHU_Formosa--HP.png); |
background-size: cover; | background-size: cover; | ||
} | } | ||
#section5 { | #section5 { | ||
− | background-image: url(https://static.igem.org/mediawiki/2018/ | + | background-image: url(https://static.igem.org/mediawiki/2018/8/84/T--NTHU_Formosa--%E6%9C%AA%E5%91%BD%E5%90%8D-3.png); |
background-size: cover; | background-size: cover; | ||
} | } | ||
Line 159: | Line 427: | ||
position: fixed; | position: fixed; | ||
/* Initial Width */ | /* Initial Width */ | ||
− | width: | + | width: 100px; |
top: 0; | top: 0; | ||
bottom: 0; | bottom: 0; | ||
Line 264: | Line 532: | ||
.side-button.facebook:after { | .side-button.facebook:after { | ||
− | background: url("https://cdn3.iconfinder.com/data/icons/social-media-2026/60/Socialmedia_icons_Facebook-128.png") no-repeat center; | + | background: url("https://cdn3.iconfinder.com/data/icons/social-media-2026/60/Socialmedia_icons_Facebook-128.png") no-repeat center; margin-left:auto;margin-right:auto;width:10%;" |
} | } | ||
+ | |||
+ | |||
+ | |||
+ | .side-button.Biomarker::before { | ||
+ | content: "Biomarker"; | ||
+ | } | ||
+ | |||
+ | .side-button.Biomarker:after { | ||
+ | background: url("https://static.igem.org/mediawiki/2018/8/86/T--NTHU_Formosa--icon_biomar.png") no-repeat center; | ||
+ | } | ||
+ | .side-button.Nanobody::before { | ||
+ | content: "Nanobody"; | ||
+ | } | ||
+ | |||
+ | .side-button.Nanobody:after { | ||
+ | background: url("https://static.igem.org/mediawiki/2018/0/0e/T--NTHU_Formosa--icon_nanobody.png") no-repeat center; | ||
+ | } | ||
+ | .side-button.TEV::before { | ||
+ | content: "TEV protease"; | ||
+ | } | ||
+ | |||
+ | .side-button.TEV:after { | ||
+ | background: url("https://static.igem.org/mediawiki/2018/6/6f/T--NTHU_Formosa--icon_TEV.png") no-repeat center; | ||
+ | } | ||
+ | .side-button.Bioluminescence::before { | ||
+ | content: "Bioluminescence"; | ||
+ | } | ||
+ | |||
+ | .side-button.Bioluminescence:after { | ||
+ | background: url("https://static.igem.org/mediawiki/2018/e/e5/T--NTHU_Formosa--icon_biolu.png") no-repeat center; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
.side-button.Introduction::before { | .side-button.Introduction::before { | ||
Line 272: | Line 578: | ||
.side-button.Introduction:after { | .side-button.Introduction:after { | ||
− | background: url("https:// | + | background: url("https://static.igem.org/mediawiki/2018/f/f4/T--NTHU_Formosa--icon_introduction.png") no-repeat center; |
} | } | ||
Line 280: | Line 586: | ||
.side-button.Design:after { | .side-button.Design:after { | ||
− | background: url("https:// | + | background: url("https://static.igem.org/mediawiki/2018/e/e8/T--NTHU_Formosa--icon_design.png") no-repeat center; |
} | } | ||
Line 288: | Line 594: | ||
.side-button.Biosafety:after { | .side-button.Biosafety:after { | ||
− | background: url("https:// | + | background: url("https://static.igem.org/mediawiki/2018/e/e0/T--NTHU_Formosa--icon_biosafety.png") no-repeat center; |
} | } | ||
Line 296: | Line 602: | ||
.side-button.Applied_Design:after { | .side-button.Applied_Design:after { | ||
− | background: url("https:// | + | background: url("https://static.igem.org/mediawiki/2018/8/85/T--NTHU_Formosa--icon_applied_design.png") no-repeat center; |
} | } | ||
Line 304: | Line 610: | ||
.side-button.Results:after { | .side-button.Results:after { | ||
− | background: url("https:// | + | background: url("https://static.igem.org/mediawiki/2018/7/7f/T--NTHU_Formosa--icon_result.png") no-repeat center; |
} | } | ||
Line 312: | Line 618: | ||
.side-button.Parts:after { | .side-button.Parts:after { | ||
− | background: url("https:// | + | background: url("https://static.igem.org/mediawiki/2018/f/fc/T--NTHU_Formosa--icon_part.png") no-repeat center; |
} | } | ||
Line 320: | Line 626: | ||
.side-button.Notebook:after { | .side-button.Notebook:after { | ||
− | background: url("https:// | + | background: url("https://static.igem.org/mediawiki/2018/c/ca/T--NTHU_Formosa--notebook.png") no-repeat center; |
} | } | ||
Line 328: | Line 634: | ||
.side-button.InterLab:after { | .side-button.InterLab:after { | ||
− | background: url("https:// | + | background: url("https://static.igem.org/mediawiki/2018/f/ff/T--NTHU_Formosa--icon_interlab.png") no-repeat center; |
+ | } | ||
+ | |||
+ | .side-button.Collaborations::before { | ||
+ | content: "Collaborations"; | ||
} | } | ||
− | .side-button. | + | .side-button.Collaborations:after { |
− | + | background: url("https://static.igem.org/mediawiki/2018/9/99/T--NTHU_Formosa--icon_collaboration.png") no-repeat center; | |
} | } | ||
− | .side-button. | + | .side-button.Public_Engagement::before { |
− | + | content: "Public Engagement"; | |
} | } | ||
+ | |||
+ | .side-button.Public_Engagement:after { | ||
+ | background: url("https://static.igem.org/mediawiki/2018/e/e4/T--NTHU_Formosa--public_engagement.png") no-repeat center; | ||
+ | } | ||
+ | |||
+ | .side-button.Integrated_Human_Practice::before { | ||
+ | content: "Integrated Human Practice"; | ||
+ | } | ||
+ | |||
+ | .side-button.Integrated_Human_Practice:after { | ||
+ | background: url("https://static.igem.org/mediawiki/2018/7/7a/T--NTHU_Formosa--icon_integrated.png") no-repeat center; | ||
+ | } | ||
+ | |||
.side-button.Team::before { | .side-button.Team::before { | ||
Line 344: | Line 667: | ||
.side-button.Team:after { | .side-button.Team:after { | ||
− | background: url("https:// | + | background: url("https://static.igem.org/mediawiki/2018/b/bc/T--NTHU_Formosa--aboutus.png") no-repeat center; |
} | } | ||
Line 352: | Line 675: | ||
.side-button.Sponsor:after { | .side-button.Sponsor:after { | ||
− | background: url("https:// | + | background: url("https://static.igem.org/mediawiki/2018/8/8c/T--NTHU_Formosa--icon-sponsor.png") no-repeat center; |
} | } | ||
Line 360: | Line 683: | ||
.side-button.Attributions:after { | .side-button.Attributions:after { | ||
− | background: url("https:// | + | background: url("https://static.igem.org/mediawiki/2018/2/29/T--NTHU_Formosa--attribution.png") no-repeat center; |
} | } | ||
Line 368: | Line 691: | ||
.side-button.Judging:after { | .side-button.Judging:after { | ||
− | background: url("https:// | + | background: url("https://static.igem.org/mediawiki/2018/a/a9/T--NTHU_Formosa--medal.png") no-repeat center; |
} | } | ||
</style> | </style> | ||
Line 408: | Line 731: | ||
// Add the corresponding class | // Add the corresponding class | ||
switch (anchor) { | switch (anchor) { | ||
− | case "0": // Interactice cell | + | |
+ | case "0": //Interactice cell | ||
+ | side[0].classList.add("Biomarker"); | ||
+ | side[0].onclick = function() { | ||
+ | location.href = "https://2018.igem.org/Team:NTHU_Formosa/Biomarker"; | ||
+ | }; | ||
+ | side[1].classList.add("Nanobody"); | ||
+ | side[1].onclick = function() { | ||
+ | location.href = "https://2018.igem.org/Team:NTHU_Formosa/Nanobody"; | ||
+ | }; | ||
+ | side[2].classList.add("TEV"); | ||
+ | side[2].onclick = function() { | ||
+ | location.href = "https://2018.igem.org/Team:NTHU_Formosa/TEV_protease"; | ||
+ | }; | ||
+ | side[3].classList.add("Bioluminescence"); | ||
+ | side[3].onclick = function() { | ||
+ | location.href = "https://2018.igem.org/Team:NTHU_Formosa/Bioluminescence"; | ||
+ | }; | ||
break; | break; | ||
case "1": //Project | case "1": //Project | ||
Line 446: | Line 786: | ||
}; | }; | ||
break; | break; | ||
− | case "3 | + | |
− | + | case "3": //Human Practices | |
− | + | ||
− | + | side[0].classList.add("Collaborations"); | |
− | + | ||
− | + | ||
− | + | ||
− | side[0].classList.add(" | + | |
side[0].onclick = function() { | side[0].onclick = function() { | ||
+ | location.href = "https://2018.igem.org/Team:NTHU_Formosa/Collaborations"; | ||
+ | }; | ||
+ | side[1].classList.add("Public_Engagement"); | ||
+ | side[1].onclick = function() { | ||
+ | location.href = "https://2018.igem.org/Team:NTHU_Formosa/Public_Engagement"; | ||
+ | }; | ||
+ | side[2].classList.add("Integrated_Human_Practice"); | ||
+ | side[2].onclick = function() { | ||
location.href = "https://2018.igem.org/Team:NTHU_Formosa/Human_Practices"; | location.href = "https://2018.igem.org/Team:NTHU_Formosa/Human_Practices"; | ||
}; | }; | ||
− | + | side[3].classList.add(""); | |
− | side[ | + | side[3].onclick = function() { |
− | + | location.href = ""; | |
+ | }; | ||
+ | |||
break; | break; | ||
− | case " | + | case "4": //About us |
side[0].classList.add("Team"); | side[0].classList.add("Team"); | ||
side[0].onclick = function() { | side[0].onclick = function() { | ||
Line 497: | Line 843: | ||
function changeImage() { | function changeImage() { | ||
− | var BackgroundImg["https://static.igem.org/mediawiki/2018/6/66/T--NTHU_Formosa--cell0.png", | + | var BackgroundImg = ["https://static.igem.org/mediawiki/2018/6/66/T--NTHU_Formosa--cell0.png", |
"https://static.igem.org/mediawiki/2018/3/39/T--NTHU_Formosa--cell1.png", | "https://static.igem.org/mediawiki/2018/3/39/T--NTHU_Formosa--cell1.png", | ||
"https://static.igem.org/mediawiki/2018/8/88/T--NTHU_Formosa--cell2.png", | "https://static.igem.org/mediawiki/2018/8/88/T--NTHU_Formosa--cell2.png", | ||
"https://static.igem.org/mediawiki/2018/b/be/T--NTHU_Formosa--cell3.png", | "https://static.igem.org/mediawiki/2018/b/be/T--NTHU_Formosa--cell3.png", | ||
− | "https://static.igem.org/mediawiki/2018/ | + | "https://static.igem.org/mediawiki/2018/0/0f/T--NTHU_Formosa--%E7%B4%B0%E8%83%9E5.png" |
]; | ]; | ||
//document.getElementById("section0").style.property = background-image: | //document.getElementById("section0").style.property = background-image: | ||
+ | console.log(i); | ||
document.getElementById("section0").style.backgroundImage = 'url("' + BackgroundImg[i] + '")'; | document.getElementById("section0").style.backgroundImage = 'url("' + BackgroundImg[i] + '")'; | ||
− | if (i == | + | if (i == 4) i = 0; |
else i = i + 1; | else i = i + 1; | ||
} | } | ||
Line 512: | Line 859: | ||
} | } | ||
</script> | </script> | ||
+ | |||
+ | |||
+ | |||
+ | |||
<!-- Section 1 --> | <!-- Section 1 --> | ||
Line 522: | Line 873: | ||
<!-- Section 3 --> | <!-- Section 3 --> | ||
− | + | ||
− | + | ||
<!-- Section 4 --> | <!-- Section 4 --> | ||
Line 537: | Line 887: | ||
<!-- fullpage.js, DO NOT MODIFT! --> | <!-- fullpage.js, DO NOT MODIFT! --> | ||
− | <script type="text/javascript" src="https:// | + | <script type="text/javascript" src="https://2018.igem.org/wiki/index.php?title=Template:NTHU_Formosa/Javascript&action=raw&ctype=text/javascript"></script> |
− | + | ||
<script type="text/javascript"> | <script type="text/javascript"> | ||
var myFullpage = new fullpage('#fullpage', { | var myFullpage = new fullpage('#fullpage', { | ||
anchors: ['0', '1', '2', '3', '4', '5'], | anchors: ['0', '1', '2', '3', '4', '5'], | ||
− | sectionsColor: ['# | + | sectionsColor: ['#000000', '#1BBC9B', '#7E8F7C'], |
css3: true, | css3: true, | ||
licenseKey: "OPEN-SOURCE-GPLV3-LICENSE", | licenseKey: "OPEN-SOURCE-GPLV3-LICENSE", | ||
− | scrollBar: true | + | scrollBar: true, |
+ | lazyLoading: false | ||
}); | }); | ||
</script> | </script> |
Latest revision as of 00:36, 18 October 2018