Difference between revisions of "Template:Fudan-CHINA"

(Replaced content with "{{Fudan-CHINA/initialize}} {{Fudan-CHINA/mainNav}}")
 
Line 1: Line 1:
−
<html>
+
{{Fudan-CHINA/initialize}}
−
+
{{Fudan-CHINA/mainNav}}
−
<!--start---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
+
−
+
−
   
+
−
<!--get jQuery and wiki settings------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
+
−
<style>
+
−
#top_menu_under,#home_logo, #sideMenu,#top,.logo_2018,#firstHeading ,#top_title, .patrollink { display:none; }
+
−
.mediawiki,#globalWrapper,#content,#HQ_page,#bodyContent,#mw-content-text { width:100%; padding:0px;  margin:0px; }
+
−
+
−
#top_menu_14{position: fixed;top:0;}
+
−
#mw-content-text>p{padding: 0; margin: 0;width: 100%;}
+
−
a, button, input, textarea {
+
−
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+
−
    -moz-transition: all .5s ease;
+
−
    -webkit-transition: all .5s ease;
+
−
    transition: all .5s ease;
+
−
}
+
−
</style>
+
−
 
+
−
 
+
−
 
+
−
+
−
<script type="text/javascript" src="https://2018.igem.org/wiki/index.php?title=Template:Fudan-CHINA/jQuery&amp;action=raw&amp;ctype=text/javascript">
+
−
//jQuery
+
−
</script>
+
−
<script type="text/javascript" src="https://2018.igem.org/wiki/index.php?title=Template:Fudan-CHINA/jQueryUi&amp;action=raw&amp;ctype=text/javascript">
+
−
//jQueryUi
+
−
</script>
+
−
<script type="text/javascript" src="https://2018.igem.org/wiki/index.php?title=Template:Fudan-CHINA/jQueryAnimateColors&amp;action=raw&amp;ctype=text/javascript">
+
−
//jQuery_AnimateColors
+
−
</script>
+
−
 
+
−
<link href="https://2018.igem.org/wiki/index.php?title=Template:Fudan-CHINA/font_awesome&amp;action=raw&amp;ctype=text/css" rel="stylesheet">
+
−
 
+
−
<!--
+
−
<script type="text/javascript" src="https://2018.igem.org/wiki/index.php?title=Template:Fudan-CHINA/bookstrapJs &amp;action=raw&amp;ctype=text/javascript">
+
−
//bootstrap
+
−
</script>
+
−
 
+
−
<link rel="stylesheet" type="text/css" href="https://2018.igem.org/wiki/index.php?title=Template:Fudan-CHINA/bookstrapCss&action=raw&ctype=text/css" />
+
−
-->
+
−
+
−
 
+
−
 
+
−
+
−
 
+
−
<!---------------------------------------------------------------------------------------------------------------------------------------------------->
+
−
+
−
<!--get fonts----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
+
−
<style>
+
−
@font-face
+
−
{
+
−
  font-family:_Quicksand;
+
−
src: url('https://static.igem.org/mediawiki/2018/8/8a/T--Fudan-CHINA--Quicksand.ttf');
+
−
}
+
−
@font-face
+
−
{
+
−
  font-family:_LucidaCalligraphy;/*for fullname of STEP*/
+
−
src: url('https://static.igem.org/mediawiki/2018/a/a8/T--Fudan-CHINA--LucidaCalligraphy.ttf');
+
−
}
+
−
@font-face
+
−
{
+
−
  font-family:_CalistoMT;
+
−
src: url('https://static.igem.org/mediawiki/2018/b/be/T--Fudan-CHINA--CalistoMT.ttf');
+
−
}
+
−
@font-face
+
−
{
+
−
  font-family:_Algerian;
+
−
src: url('https://static.igem.org/mediawiki/2018/5/56/T--Fudan-CHINA--Algerian.ttf');
+
−
}
+
−
@font-face
+
−
{
+
−
  font-family:_ZELDA;/*for team name*/
+
−
src: url('https://static.igem.org/mediawiki/2018/d/df/T--Fudan-CHINA--ZELDA.ttf'),
+
−
  url('https://static.igem.org/mediawiki/2018/6/63/T--Fudan-CHINA--ZELDA.eot');
+
−
}
+
−
@font-face
+
−
{
+
−
  font-family:_Butler;
+
−
src: url('https://static.igem.org/mediawiki/2018/e/e1/T--Fudan-CHINA--Butler.ttf'),
+
−
  url('https://static.igem.org/mediawiki/2018/c/c9/T--Fudan-CHINA--Butler.eot');/*IE 9+*/
+
−
}
+
−
+
−
</style>
+
−
 
+
−
<!---------------------------------------------------------------------------------------------------------------------------------------------------->
+
−
+
−
+
−
+
−
+
−
<!--loading page------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
+
−
<style>
+
−
.chromeframe {
+
−
    margin: 0.2em 0;
+
−
    background: #ccc;
+
−
    color: #000;
+
−
    padding: 0.2em 0;
+
−
}
+
−
#loader-wrapper {
+
−
    position: fixed;
+
−
    top: 0;
+
−
    left: 0;
+
−
    width: 100%;
+
−
    height: 100%;
+
−
    z-index:999999;
+
−
}
+
−
#loader {
+
−
    display: block;
+
−
    position: relative;
+
−
    left: 50%;
+
−
    top: 50%;
+
−
    width: 150px;
+
−
    height: 150px;
+
−
    margin: -75px 0 0 -75px;
+
−
    border-radius: 50%;
+
−
    border: 3px solid transparent;
+
−
    /* COLOR 1 */
+
−
    border-top-color: rgba(255,0,255,1);
+
−
    -webkit-animation: spin 2s linear infinite;
+
−
    -ms-animation: spin 2s linear infinite;
+
−
    -moz-animation: spin 2s linear infinite;
+
−
    -o-animation: spin 2s linear infinite; 
+
−
        animation: spin 2s linear infinite;
+
−
    z-index:1001;
+
−
}
+
−
#loader:before {
+
−
        content: "";
+
−
        position: absolute;
+
−
        top: 5px;
+
−
        left: 5px;
+
−
        right: 5px;
+
−
        bottom: 5px;
+
−
        border-radius: 50%;
+
−
        border: 3px solid transparent;
+
−
        /* COLOR 2 */     
+
−
        border-top-color: rgba(255,255,0,1);
+
−
        -webkit-animation: spin 3s linear infinite;
+
−
        -moz-animation: spin 3s linear infinite;
+
−
        -o-animation: spin 3s linear infinite;
+
−
        -ms-animation: spin 3s linear infinite;         
+
−
        animation: spin 3s linear infinite;
+
−
}
+
−
#loader:after {
+
−
        content: "";
+
−
        position: absolute;
+
−
        top: 15px;
+
−
        left: 15px;
+
−
        right: 15px;
+
−
        bottom: 15px;
+
−
        border-radius: 50%;
+
−
        border: 3px solid transparent;
+
−
        border-top-color: rgba(0,255,255,1);
+
−
        /* COLOR 3 */     
+
−
        -moz-animation: spin 1.5s linear infinite;
+
−
        -o-animation: spin 1.5s linear infinite;
+
−
        -ms-animation: spin 1.5s linear infinite;       
+
−
        -webkit-animation: spin 1.5s linear infinite;
+
−
          animation: spin 1.5s linear infinite;
+
−
}
+
−
 
+
−
 
+
−
@-webkit-keyframes spin {
+
−
        0%{
+
−
            -webkit-transform: rotate(0deg); 
+
−
            -ms-transform: rotate(0deg); 
+
−
            transform: rotate(0deg); 
+
−
        }100%{
+
−
            -webkit-transform: rotate(360deg); 
+
−
            -ms-transform: rotate(360deg); 
+
−
            transform: rotate(360deg); }
+
−
}
+
−
 
+
−
@keyframes spin {
+
−
        0%{
+
−
            -webkit-transform: rotate(0deg); 
+
−
            -ms-transform: rotate(0deg);
+
−
            transform: rotate(0deg); 
+
−
        }100%{
+
−
            -webkit-transform: rotate(360deg);
+
−
            -ms-transform: rotate(360deg); 
+
−
            transform: rotate(360deg);  }
+
−
}
+
−
 
+
−
 
+
−
#loader-wrapper .loader-section {
+
−
        position: fixed;
+
−
        top: 0;
+
−
        width: 51%;
+
−
        height: 100%;
+
−
        background: rgba(2,28,53,1); /* loading background color!!!*/
+
−
        z-index: 1000;
+
−
        -webkit-transform: translateX(0); 
+
−
        -ms-transform: translateX(0); 
+
−
        transform: translateX(0);
+
−
}
+
−
#loader-wrapper .loader-section.section-left {left: 0;}
+
−
#loader-wrapper .loader-section.section-right {right: 0;}
+
−
 
+
−
/* Loaded */
+
−
.loaded #loader-wrapper .loader-section.section-left {
+
−
        -webkit-transform: translateX(-100%); 
+
−
            -ms-transform: translateX(-100%); 
+
−
                transform: translateX(-100%); 
+
−
        -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); 
+
−
                transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
+
−
}
+
−
.loaded #loader-wrapper .loader-section.section-right {
+
−
        -webkit-transform: translateX(100%); 
+
−
            -ms-transform: translateX(100%); 
+
−
                transform: translateX(100%); 
+
−
        -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); 
+
−
        transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
+
−
}
+
−
.loaded #loader {
+
−
        opacity: 0;
+
−
        -webkit-transition: all 0.3s ease-out; 
+
−
                transition: all 0.3s ease-out;
+
−
}
+
−
.loaded #loader-wrapper {
+
−
        visibility: hidden;
+
−
        -webkit-transform: translateY(-100%); 
+
−
            -ms-transform: translateY(-100%); 
+
−
                transform: translateY(-100%); 
+
−
        -webkit-transition: all 0.3s 1s ease-out; 
+
−
                transition: all 0.3s 1s ease-out;
+
−
}
+
−
/* JavaScript Turned Off */
+
−
.no-js #loader-wrapper {display: none;}
+
−
.no-js h1 {color: #222222;}
+
−
+
−
 
+
−
 
+
−
</style>
+
−
+
−
 
+
−
<div id="loader-wrapper">
+
−
    <div id="loader"></div>
+
−
    <div class="loader-section section-left"></div>
+
−
    <div class="loader-section section-right"></div>
+
−
</div>
+
−
+
−
<script>
+
−
$(function(){
+
−
var myBgVideo=document.getElementById("bgVideo");
+
−
myBgVideo.addEventListener('canplaythrough',function(){
+
−
setTimeout(function(){ $('body').addClass('loaded');
+
−
        $('#loader-wrapper .load_title').remove(); },500);
+
−
});
+
−
});
+
−
$(function(){
+
−
var myBgVideo=document.getElementById("bgVideo");
+
−
setTimeout(function(){ $('body').addClass('loaded');
+
−
        $('#loader-wrapper .load_title').remove(); }, 1000);
+
−
});
+
−
+
−
  function slideInTop(obj,obj2,delayTime){
+
−
var targetHeight = obj.offset().top-50;
+
−
var scrollTop = $(document).scrollTop();
+
−
var winHeight=$(window).height();
+
−
var imgHeight=obj2.height();
+
−
if(scrollTop+winHeight-0.3*imgHeight>targetHeight){
+
−
setTimeout(function(){  obj.animate({top:'0px',opacity:1},800,"easeInOutCubic"); }, delayTime);
+
−
}
+
−
};
+
−
function slideInLeft(obj,obj2,delayTime){
+
−
var targetHeight = obj.offset().top;
+
−
var scrollTop = $(document).scrollTop();
+
−
var winHeight=$(window).height();
+
−
var imgHeight=obj2.height();
+
−
if(scrollTop+winHeight-0.3*imgHeight>targetHeight){
+
−
setTimeout(function(){  obj.animate({left:'0px',opacity:1},800,"easeInOutCubic"); }, delayTime);
+
−
}
+
−
};
+
−
</script> 
+
−
<!--------------------------------------------------------------------------------------------------------------------------------------------------->
+
−
+
−
+
−
 
+
−
<!--navigation bar-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
+
−
<ul id="navUl" style="z-index: 888;">
+
−
<li class="navLi navImg" style="display: inline-block;float: left;width: 5%;"></li>
+
−
<li class="navLi navImg" style="float: left;"><a href="https://2018.igem.org/Team:Fudan-CHINA"><img class="navA teamImg"  src="https://static.igem.org/mediawiki/2018/1/1d/T--Fudan-CHINA--step_white.png" /></a></li>
+
−
<li class="navLi navImg" style="float: left;position: relative;"><a class="navA activeA teamName" href="https://2018.igem.org/Team:Fudan-CHINA" style="color: white;">Fudan-CHINA</a></li>
+
−
+
−
<li class="navLi" style="display: inline-block;width: 5%;"></li>
+
−
  <li class="navLi"><a class="navA" href="#7">Team</a>
+
−
<ul class="ul2" style="padding: 0;margin: 0;">
+
−
<li class="li2"><a class="navA2" href="#14">Team</a></li>
+
−
<li class="li2"><a class="navA2" href="#15">Attributions</a></li>
+
−
</ul>
+
−
</li>
+
−
<li class="navLi"><a class="navA" href="#6">Awards</a></li>
+
−
<li class="navLi"><a class="navA" href="#5">Practices</a>
+
−
<ul class="ul2" style="padding: 0;margin: 0;">
+
−
<li class="li2"><a class="navA2" href="#16">Overview</a></li>
+
−
<li class="li2"><a class="navA2" href="#17">Silver HP</a></li>
+
−
<li class="li2"><a class="navA2" href="#18">Integrated HP</a></li>
+
−
<li class="li2"><a class="navA2" href="#19">Collaborations</a></li>
+
−
<li class="li2"><a class="navA2" href="#20">Safety</a></li>
+
−
</ul>
+
−
</li>
+
−
+
−
<li class="navLi"><a class="navA" href="#4">Modeling</a></li>
+
−
<li class="navLi"><a class="navA" href="#2">Project</a>
+
−
<ul class="ul2" style="padding: 0;margin: 0;">
+
−
<li class="li2"><a class="navA2" href="#21">Background</a></li>
+
−
<li class="li2"><a class="navA2" href="#22">Design</a></li>
+
−
<li class="li2"><a class="navA2" href="#23">Result</a></li>
+
−
<li class="li2"><a class="navA2" href="#24">Parts</a></li>
+
−
<li class="li2"><a class="navA2" href="#25">Demonstrate</a></li>
+
−
<li class="li2"><a class="navA2" href="#26">Notebook</a></li>
+
−
<li class="li2"><a class="navA2" href="#27">Interlab</a></li>
+
−
</ul>
+
−
</li>
+
−
</ul>
+
−
<style>
+
−
#navUl{
+
−
list-style: none;
+
−
margin: 0;
+
−
padding: 0;
+
−
overflow: visible;
+
−
position:fixed;
+
−
width: 100%;
+
−
}
+
−
.ul2{
+
−
list-style: none;
+
−
text-align: center;
+
−
box-shadow: 0 0px 4px rgba(0,0,0,1);
+
−
position: absolute;
+
−
left:50%;
+
−
transform: translateX(-50%);
+
−
background-color:rgba(255,255,255,1);
+
−
display: none;
+
−
}
+
−
.li2{
+
−
font-size: 0;
+
−
+
−
}
+
−
.navLi:not(.navImg){
+
−
float: right;
+
−
position: relative;
+
−
}
+
−
.navA{
+
−
display: block;
+
−
font-family:Butler,_Butler;
+
−
font-weight: 400;
+
−
text-align: center;
+
−
}
+
−
.navA2{
+
−
display: block;
+
−
font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
+
−
color: rgba(36,36,36,1);
+
−
border-bottom: 0.3px solid rgba(35,35,35,0.2);
+
−
border-top: 0.3px solid rgba(35,35,35,0.2);
+
−
overflow: visible;
+
−
}
+
−
.navA:not(.teamName){
+
−
color:white;
+
−
}
+
−
.teamName{
+
−
font-family:Zelda,_Zelda;
+
−
font-weight: 400;
+
−
}
+
−
.navA:link,.navA2:link{
+
−
text-decoration: none;
+
−
}
+
−
 
+
−
.navA:visited{
+
−
color: white;
+
−
}
+
−
.navA2:visited,.navA2:active{
+
−
text-decoration: none;
+
−
color: rgba(36,36,36,1);
+
−
}
+
−
+
−
.navA:hover:not(.activeA){
+
−
color: rgba(0,189,234,1);
+
−
}
+
−
.navA2:hover{
+
−
background-color:rgba(0,200,160,1);
+
−
color: white;
+
−
border-bottom: 0.3px solid rgba(35,35,35,0);
+
−
border-top: 0.3px solid rgba(35,35,35,0);
+
−
}
+
−
.jqhover {
+
−
        color:rgba(0,201,161,1)  !important;
+
−
    }
+
−
.navA:hover{
+
−
text-decoration:none;
+
−
}
+
−
 
+
−
    .navA:active{
+
−
text-decoration:none;
+
−
color: white;
+
−
}
+
−
</style>
+
−
<script>
+
−
function navFun(){
+
−
var winWidth=$(window).width();
+
−
var navWidth=$('#navUl').width();
+
−
var winHeight=$(window).height();
+
−
$("#navUl").css("top",0.1*winHeight);
+
−
if (winWidth/winHeight>2){
+
−
$("#navUl").css("height","9vh");
+
−
$(".navA").css("height","9vh");
+
−
$(".navA").css("line-height","9vh");
+
−
$(".navA").css("font-size","3.5vh");
+
−
+
−
$(".navA2").css("padding","0 6vh");
+
−
$(".navA2").css("height","6vh");
+
−
$(".navA2").css("line-height","6vh");
+
−
$(".navA2").css("font-size","2.6vh");
+
−
 
+
−
$(".navA:not(img)").css("padding","0 3vh");
+
−
$(".teamImg").css("width","9vh");
+
−
$(".teamImg").css("height","9vh");
+
−
$(".teamImg").css("padding","0 0");
+
−
}
+
−
else{
+
−
$("#navUl").css("height","4.5vw");
+
−
$(".navA").css("height","4.5vw");
+
−
$(".navA").css("line-height","4.5vw");
+
−
$(".navA").css("font-size","1.75vw");
+
−
+
−
$(".navA2").css("padding","0 3vw");
+
−
$(".navA2").css("height","3vw");
+
−
$(".navA2").css("line-height","3vw");
+
−
$(".navA2").css("font-size","1.3vw");
+
−
+
−
$(".navA:not(img)").css("padding","0 1.5vw");
+
−
$(".teamImg").css("width","4.5vw");
+
−
$(".teamImg").css("height","4.5vw");
+
−
$(".teamImg").css("padding","0 0");
+
−
}
+
−
};
+
−
 
+
−
navFun();
+
−
+
−
$(window).resize(function(){
+
−
navFun();
+
−
});
+
−
 
+
−
    $(window).scroll(function(){
+
−
var winHeight=$(window).height();
+
−
        var topDis = $(window).scrollTop();
+
−
var barHeight=$("#top_menu_14").height();
+
−
if(topDis >0.2*winHeight){
+
−
$("#navUl").stop().animate({top:barHeight,backgroundColor:"rgba(25,25,35,1)",boxShadow:"0px 0px 5px"},"fast");
+
−
    $(".navA:not(.activeA)").hover(function () {
+
−
                $(this).addClass("jqhover");
+
−
            }).mouseout(function () {
+
−
$(this).removeClass("jqhover");
+
−
            });
+
−
}
+
−
else{
+
−
$("#navUl").stop().animate({top:0.1*winHeight,backgroundColor:"transparent"},"fast");
+
−
$(".navA:not(.activeA)").hover(function () {
+
−
                $(this).removeClass("jqhover");
+
−
            });
+
−
+
−
};
+
−
    });
+
−
+
−
    $(document).ready(function(){
+
−
  $(".navLi").mouseenter(function(){
+
−
    $(this).find(".ul2").stop().fadeIn(300);
+
−
  });
+
−
$(".navLi").mouseleave(function(){
+
−
    $(this).find(".ul2").stop().fadeOut(300);
+
−
  });
+
−
});
+
−
</script>
+
−
+
−
+
−
+
−
<!---------------------------------------------------------------------------------------------------------------------------------------------------->
+
−
 
+
−
 
+
−
 
+
−
</html>
+

Latest revision as of 08:58, 17 October 2018