Difference between revisions of "Team:NUDT CHINA"

Line 1: Line 1:
−
{{NUDT_CHINA}}
+
<!doctype html>
−
<html>
+
<html lang="en">
 +
<head>
 +
    <meta charset="utf-8">
 +
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 +
    <title>Team:NUDT_CHINA</title>
 +
<style type="text/css">
 +
/* common start */
 +
li{ list-style:none;}
 +
/* common end */
 +
/* frame start */
 +
#list{ width:100%; position:absolute; top:0; left:0; transition:.5s top;}
 +
#list .liList{ width:2000px; position:relative; left:50%; margin-left:-1000px; overflow:hidden;}
 +
#lay-menu{ position:fixed; right:0; top:50%; z-index:20;}
 +
#lay-menu li{ width:10px; height:10px; border-radius:50%; margin:10px; border:1px white solid; cursor:pointer;}
 +
#lay-menu li.active{ background:white; cursor:default;}
 +
/* frame end */
  
 +
/* home start */
 +
#home{ background:url(img/bg1.jpg) no-repeat; overflow-x: hidden;top: 0px;height: 100%}
 +
#homeContent .homeContent1{ width:100%; height:100%; position:relative; perspective:800px; transform-style:preserve-3d; -webkit-perspective:800px; -webkit-transform-style:preserve-3d; transition:1s;}
 +
#homeContent .homeContent1 li{  width:100%; height:100%; position:absolute; left:0; top:0; background:black; visibility:hidden;}
 +
#homeContent .homeContent1 li:nth-of-type(1){background:#dc6c5f;}
 +
#homeContent .homeContent1 li:nth-of-type(2){background:#95dc84;}
 +
#homeContent .homeContent1 li:nth-of-type(3){background:#64b9d2;}
 +
#homeContent .homeContent1 li h1{ color:white; text-align:center; padding-top:200px;}
 +
#homeContent .homeContent1 li.active{ z-index:1; visibility:visible;}
  
−
<div class="column full_size" >
+
#homeContent .homeContent2{ position:absolute; bottom:0; z-index:2; text-align:center; width:100%; transition:1s;}
−
<img src="http://placehold.it/2000x300/d3d3d3/f2f2f2">
+
#homeContent .homeContent2 li{ width:20px; height:20px; border-radius:50%; background:rgba(255,255,255,0.5); display:inline-block; margin:2px; box-shadow:0 0 4px rgba(25,25,25,0.8); cursor:pointer;}
−
</div>
+
#homeContent .homeContent2 li.active{ background:white; cursor:default;}
  
 +
#homeContent .homeContent1 .leftShow{ animation:1s homeLeftShow; visibility:visible; z-index:3;-webkit-animation:1s homeLeftShow;}
 +
#homeContent .homeContent1 .rightHide{ animation:1s homeRightHide; visibility:hidden; -webkit-animation:1s homeRightHide;}
  
  
−
<div class="column full_size" >
+
#homeContent .homeContent1 .leftHide{ animation:1s homeLeftHide; visibility:hidden; -webkit-animation:1s homeLeftHide;}
−
<h1> Welcome to iGEM 2017! </h1>
+
#homeContent .homeContent1 .rightShow{ animation:1s homeRightShow; visibility:visible; z-index:3; -webkit-animation:1s homeRightShow;}
−
<p>Your team has been approved and you are ready to start the iGEM season! </p>
+
−
</div>
+
  
−
<div class="clear"></div>
+
@keyframes homeLeftHide{
 +
0%{ transform:translateZ(0px); visibility:visible;}
 +
40%{ transform:translate(-40%,0) scale(0.8) rotateY(20deg);}
 +
100%{ transform:translateZ(-200px);}
 +
}
 +
@keyframes homeRightShow{
 +
0%{ transform:translateZ(-200px);}
 +
40%{ transform:translate(40%,0) scale(0.8) rotateY(-20deg);}
 +
100%{ transform:translateZ(0px);}
 +
}
  
−
<div class="column half_size" >
+
@-webkit-keyframes homeLeftHide{
−
<h5>Before you start: </h5>
+
0%{ -webkit-transform:translateZ(0px); visibility:visible;}
−
<p> Please read the following pages:</p>
+
40%{ -webkit-transform:translate(-40%,0) scale(0.8) rotateY(20deg);}
−
<ul>
+
100%{ -webkit-transform:translateZ(-200px);}
−
<li>  <a href="https://2017.igem.org/Competition">Competition Hub</a> </li>
+
}
−
<li> <a href="https://2017.igem.org/Competition/Deliverables/Wiki">Wiki Requirements page</a></li>
+
@-webkit-keyframes homeRightShow{
−
<li> <a href="https://2017.igem.org/Resources/Template_Documentation">Template documentation</a></li>
+
0%{ -webkit-transform:translateZ(-200px);}
−
</ul>
+
40%{ -webkit-transform:translate(40%,0) scale(0.8) rotateY(-20deg);}
−
</div>
+
100%{ -webkit-transform:translateZ(0px);}
 +
}
  
−
<div class="column half_size" >
+
@keyframes homeLeftShow{
−
<div class="highlight">
+
0%{ transform:translateZ(-200px);}
−
<h5> Project description </h5>
+
40%{ transform:translate(-40%,0) scale(0.8) rotateY(20deg);}
−
<p>MicroRNAs (miRNAs) have been proven to play important roles on post-transcriptional regulation of the gene expression by direct base pairing to target sites within untranslated regions of messenger RNAs. However, the functions of most microRNAs remain to be discovered. Our project attempts to develop a novel sponge for miRNAs, which would knock down the abundance of target miRNA in the cells. Thus the sponge will be a miRNA inhibitor to be used to induce miRNA loss-of-function phenotypes or other further applications like small non-coding RNA-based diagnostic and therapeutic applications.</p>
+
100%{ transform:translateZ(0px);}
−
</div>
+
}
−
</div>
+
@keyframes homeRightHide{
 +
0%{ transform:translateZ(0px); visibility:visible;}
 +
40%{ transform:translate(40%,0) scale(0.8) rotateY(-20deg);}
 +
100%{ transform:translateZ(-200px);}
 +
}
 +
@-webkit-keyframes homeLeftShow{
 +
0%{ -webkit-transform:translateZ(-200px);}
 +
40%{ -webkit-transform:translate(-40%,0) scale(0.8) rotateY(20deg);}
 +
100%{ -webkit-transform:translateZ(0px);}
 +
}
 +
@-webkit-keyframes homeRightHide{
 +
0%{ -webkit-transform:translateZ(0px); visibility:visible;}
 +
40%{ -webkit-transform:translate(40%,0) scale(0.8) rotateY(-20deg);}
 +
100%{ -webkit-transform:translateZ(-200px);}
 +
}
 +
/* home end */
 +
</style>
  
−
<div class="column full_size" >
+
    <script type="text/javascript" >
−
<h5> Wiki template information </h5>
+
function Stating_pages(){
−
<p>We have created these wiki template pages to help you get started and to help you think about how your team will be evaluated. You can find a list of all the pages tied to awards here at the <a href="https://2017.igem.org/Judging/Pages_for_Awards">Pages for awards</a> link. You must edit these pages to be evaluated for medals and awards, but ultimately the design, layout, style and all other elements of your team wiki is up to you!</p>
+
var oContent = $('content');
 +
var oLoading = $('loading');
 +
var oList = $('list');
 +
var aLiList = getByClass( oList , 'liList' );
 +
var aDivList = getByClass( oList , 'divList' );
 +
var oHomeContent = $('homeContent');
 +
var oHomeContent1 = getByClass(oHomeContent , 'homeContent1')[0];
 +
var oHomeContent2 = getByClass(oHomeContent , 'homeContent2')[0];
 +
 +
var oMenu = $('lay-menu');
 +
var aLiMenu = oMenu.getElementsByTagName('li');
 +
 +
var iNow = 0;
 +
var prevIndex = 0;
 +
var iContentHeight = 0;
 +
showLoading();
 +
contentAuto();
 +
listContentAuto();
 +
bindNav();
 +
mouseWheel();
 +
homeContent();
 +
window.onresize = fnResize; 
  
−
</div>
+
function showLoading(){
 +
var oSpan = oLoading.getElementsByTagName('span')[0];
 +
var aDiv = oLoading.getElementsByTagName('div');
 +
oSpan.style.width = '100%';
 +
oSpan.addEventListener('webkitTransitionend',spanChange,false);
 +
oSpan.addEventListener('transitionend',spanChange,false);
 +
function spanChange(){
 +
if(oSpan.style.width == '100%'){
 +
oSpan.style.display = 'none';
 +
aDiv[0].style.height = 0;
 +
aDiv[1].style.height = 0;
 +
}
 +
}
 +
aDiv[0].addEventListener('webkitTransitionend',divChange,false);
 +
aDiv[0].addEventListener('transitionend',divChange,false);
 +
 +
function divChange(){
 +
oLoading.parentNode.removeChild(oLoading);
 +
}
 +
 +
}
  
 +
function bindNav(){
 +
for(var i=0;i<aLiMenu.length;i++){
 +
aLiMenu[i].index = i;
 +
aLiMenu[i].onclick = function(){
 +
prevIndex = iNow;
 +
iNow = this.index;
 +
toMove( this.index );
 +
};
 +
}
 +
}
 +
 +
function toMove(index){
 +
oList.style.top = - index * iContentHeight + 'px';
 +
for(var i=0;i<aLiMenu.length;i++){
 +
aLiMenu[i].className = '';
 +
}
 +
aLiMenu[index].className = 'active';
 +
 +
 +
 +
}
 +
 +
function contentAuto(){
 +
iContentHeight = viewHeight() ;
 +
oContent.style.height = iContentHeight + 'px';
 +
for(var i=0;i<aLiList.length;i++){
 +
aLiList[i].style.height = iContentHeight + 'px';
 +
}
 +
oList.style.top = - iNow * iContentHeight + 'px';
 +
}
 +
 +
function listContentAuto(){
 +
var mt = (iContentHeight - 520)/2;
 +
for(var i=0;i<aDivList.length;i++){
 +
aDivList[i].style.marginTop =  mt+'px';
 +
}
 +
}
 +
 +
function fnResize(){
 +
contentAuto();
 +
listContentAuto();
 +
}
 +
 +
function mouseWheel(){
 +
var bBtn = true;
 +
var timer = null;
 +
if(oContent.addEventListener){
 +
oContent.addEventListener('DOMMouseScroll',function(ev){
 +
var ev = ev || window.event;
 +
clearTimeout(timer);
 +
timer = setTimeout(function(){
 +
toChange(ev);
 +
},200);
 +
},false);
 +
}
 +
oContent.onmousewheel = function(ev){
 +
var ev = ev || window.event;
 +
clearTimeout(timer);
 +
timer = setTimeout(function(){
 +
toChange(ev);
 +
},200);
 +
};
 +
 +
function toChange(ev){
 +
if(ev.detail){
 +
bBtn = ev.detail > 0 ? true : false;
 +
}
 +
else{
 +
bBtn = ev.wheelDelta < 0 ? true : false;
 +
}
 +
 +
if( (iNow == 0 && !bBtn) || (iNow == aLiList.length-1 && bBtn) ){return;}
 +
 +
prevIndex = iNow;
 +
if(bBtn){  //↓
 +
if(iNow != aLiList.length-1){
 +
iNow++;
 +
}
 +
toMove(iNow);
 +
}
 +
else{  //↑
 +
if(iNow != 0){
 +
iNow--;
 +
}
 +
toMove(iNow);
 +
}
 +
 +
if(ev.preventDefault){
 +
ev.preventDefault();
 +
}
 +
else{
 +
return false;
 +
}
 +
}
 +
 +
}
 +
 +
function homeContent(){
 +
var aLi1 = oHomeContent1.getElementsByTagName('li');
 +
var aLi2 = oHomeContent2.getElementsByTagName('li');
 +
var oldIndex = 0;
 +
var iNowHome = 0;
 +
 +
var data = [
 +
{ text : 'one layer'},
 +
{ text : 'two layer'},
 +
{ text : 'three layer'},
 +
{ text : 'four layer'}
 +
];
 +
create();
 +
function create(){
 +
for(var i=0;i<data.length;i++){
 +
var oLi1 = document.createElement('li');
 +
oLi1.innerHTML = '<h1 class="commonTitle">'+(data[i].text)+'</h1>';
 +
var oLi2 = document.createElement('li');
 +
if(i == 0){
 +
oLi1.className = 'active';
 +
oLi2.className = 'active';
 +
}
 +
oHomeContent1.appendChild(oLi1);
 +
oHomeContent2.appendChild(oLi2);
 +
}
 +
 +
}
 +
 +
for(var i=0;i<aLi2.length;i++){
 +
aLi2[i].index = i;
 +
aLi2[i].onclick = function(){
 +
for(var i=0;i<aLi2.length;i++){
 +
aLi2[i].className = '';
 +
}
 +
this.className = 'active';
 +
 +
if( oldIndex < this.index ){  //从左向右
 +
aLi1[oldIndex].className = 'leftHide';
 +
aLi1[this.index].className = 'rightShow';
 +
}
 +
else if( oldIndex > this.index ){  //从右向走
 +
aLi1[oldIndex].className = 'rightHide';
 +
aLi1[this.index].className = 'leftShow';
 +
}
 +
oldIndex = this.index;
 +
iNowHome = this.index;
 +
};
 +
}
 +
 +
var timer = setInterval(change,3000);
 +
 +
oHomeContent.onmouseover = function(){
 +
clearInterval(timer);
 +
};
 +
 +
function change(){
 +
iNowHome++;
 +
 +
if(iNowHome == aLi2.length){
 +
iNowHome = 0;
 +
}
 +
 +
for(var i=0;i<aLi2.length;i++){
 +
aLi2[i].className = '';
 +
}
 +
aLi2[iNowHome].className = 'active';
 +
aLi1[oldIndex].className = 'leftHide';
 +
aLi1[iNowHome].className = 'rightShow';
 +
 +
oldIndex = iNowHome;
 +
 +
}
 +
}
 +
function $(id){
 +
return document.getElementById(id);
 +
}
 +
 +
function viewWidth(){
 +
return window.innerWidth || document.documentElement.clientWidth;
 +
}
 +
 +
function viewHeight(){
 +
return window.innerHeight || document.documentElement.clientHeight;
 +
}
 +
 +
function getByClass(oParent,sClass){
 +
var aElem = oParent.getElementsByTagName('*');
 +
var arr = [];
 +
for(var i=0;i<aElem.length;i++){
 +
if( aElem[i].className == sClass ){
 +
arr.push( aElem[i] );
 +
}
 +
}
 +
return arr;
 +
}
 +
};   
  
 +
    </script>
 +
<style type="text/css">
  
  
−
<div class="column half_size" >
+
#loading div{ width:100%; height:50%; position:absolute; left:0; background:#009ee0; z-index:50; transition:1s;}
−
<h5> Editing your wiki </h5>
+
#loading div:nth-of-type(1){ top:0;}
−
<p>On this page you can document your project, introduce your team members, document your progress and share your iGEM experience with the rest of the world! </p>
+
#loading div:nth-of-type(2){ bottom:0;}
−
<p> <a href="https://2017.igem.org/wiki/index.php?title=Team:Example&action=edit"> </a>Use WikiTools - Edit in the black menu bar to edit this page</p>
+
#loading span{ width:0%; height:4px; background:white; position:absolute; left:0; top:50%; margin-top:-2px; z-index:60; transition:.10s;}
 +
.pure-g{
 +
letter-spacing:-.31em;text-rendering:optimizespeed;
 +
font-family:FreeSans,Arimo,"Droid Sans",Helvetica,Arial,sans-serif;
 +
display:-webkit-box;
 +
display:-webkit-flex;
 +
display:-ms-flexbox;
 +
display:flex;-webkit-flex-flow:row wrap;-ms-flex-flow:row wrap;flex-flow:row wrap;-webkit-align-content:flex-start;-ms-flex-line-pack:start;
 +
align-content:flex-start}
 +
@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){table .pure-g{display:block}}
 +
.opera-only :-o-prefocus,.pure-g{word-spacing:-.43em}
 +
.pure-u,.pure-u-1,.pure-u-1-1,.pure-u-1-12,.pure-u-1-2,.pure-u-1-24,.pure-u-1-3,.pure-u-1-4,.pure-u-1-5,.pure-u-1-6,.pure-u-1-8,.pure-u-10-24,.pure-u-11-12,.pure-u-11-24,.pure-u-12-24,.pure-u-13-24,.pure-u-14-24,.pure-u-15-24,.pure-u-16-24,.pure-u-17-24,.pure-u-18-24,.pure-u-19-24,.pure-u-2-24,.pure-u-2-3,.pure-u-2-5,.pure-u-20-24,.pure-u-21-24,.pure-u-22-24,.pure-u-23-24,.pure-u-24-24,.pure-u-3-24,.pure-u-3-4,.pure-u-3-5,.pure-u-3-8,.pure-u-4-24,.pure-u-4-5,.pure-u-5-12,.pure-u-5-24,.pure-u-5-5,.pure-u-5-6,.pure-u-5-8,.pure-u-6-24,.pure-u-7-12,.pure-u-7-24,.pure-u-7-8,.pure-u-8-24,.pure-u-9-24{display:inline-block;zoom:1;letter-spacing:normal;word-spacing:normal;vertical-align:top;text-rendering:auto}
 +
.pure-g [class*=pure-u]{font-family:sans-serif}
 +
.pure-u-1-24{width:4.1667%}
 +
.pure-u-1-12,.pure-u-2-24{width:8.3333%}
 +
.pure-u-1-8,.pure-u-3-24{width:12.5%}
 +
.pure-u-1-6,.pure-u-4-24{width:16.6667%}
 +
.pure-u-1-5{width:20%}
 +
.pure-u-5-24{width:20.8333%}
 +
.pure-u-1-4,.pure-u-6-24{width:25%}
 +
.pure-u-7-24{width:29.1667%}
 +
.pure-u-1-3,.pure-u-8-24{width:33.3333%}
 +
.pure-u-3-8,.pure-u-9-24{width:37.5%}
 +
.pure-u-2-5{width:40%}
 +
.pure-u-10-24,.pure-u-5-12{width:41.6667%}
 +
.pure-u-11-24{width:45.8333%}
 +
.pure-u-1-2,.pure-u-12-24{width:50%}
 +
.pure-u-13-24{width:54.1667%}
 +
.pure-u-14-24,.pure-u-7-12{width:58.3333%}
 +
.pure-u-3-5{width:60%}
 +
.pure-u-15-24,.pure-u-5-8{width:62.5%}
 +
.pure-u-16-24,.pure-u-2-3{width:66.6667%}
 +
.pure-u-17-24{width:70.8333%}
 +
.pure-u-18-24,.pure-u-3-4{width:75%}
 +
.pure-u-19-24{width:79.1667%}
 +
.pure-u-4-5{width:80%}
 +
.pure-u-20-24,.pure-u-5-6{width:83.3333%}
 +
.pure-u-21-24,.pure-u-7-8{width:87.5%}
 +
.pure-u-11-12,.pure-u-22-24{width:91.6667%}
 +
.pure-u-23-24{width:95.8333%}
 +
.pure-u-1,.pure-u-1-1,.pure-u-24-24,.pure-u-5-5{width:100%}
 +
@media screen and (min-width:0em){.pure-u-sm-1,.pure-u-sm-1-1,.pure-u-sm-1-12,.pure-u-sm-1-2,.pure-u-sm-1-24,.pure-u-sm-1-3,.pure-u-sm-1-4,.pure-u-sm-1-5,.pure-u-sm-1-6,.pure-u-sm-1-8,.pure-u-sm-10-24,.pure-u-sm-11-12,.pure-u-sm-11-24,.pure-u-sm-12-24,.pure-u-sm-13-24,.pure-u-sm-14-24,.pure-u-sm-15-24,.pure-u-sm-16-24,.pure-u-sm-17-24,.pure-u-sm-18-24,.pure-u-sm-19-24,.pure-u-sm-2-24,.pure-u-sm-2-3,.pure-u-sm-2-5,.pure-u-sm-20-24,.pure-u-sm-21-24,.pure-u-sm-22-24,.pure-u-sm-23-24,.pure-u-sm-24-24,.pure-u-sm-3-24,.pure-u-sm-3-4,.pure-u-sm-3-5,.pure-u-sm-3-8,.pure-u-sm-4-24,.pure-u-sm-4-5,.pure-u-sm-5-12,.pure-u-sm-5-24,.pure-u-sm-5-5,.pure-u-sm-5-6,.pure-u-sm-5-8,.pure-u-sm-6-24,.pure-u-sm-7-12,.pure-u-sm-7-24,.pure-u-sm-7-8,.pure-u-sm-8-24,.pure-u-sm-9-24{display:inline-block;zoom:1;letter-spacing:normal;word-spacing:normal;vertical-align:top;text-rendering:auto}
 +
.pure-u-sm-1-24{width:4.1667%}
 +
.pure-u-sm-1-12,.pure-u-sm-2-24{width:8.3333%}
 +
.pure-u-sm-1-8,.pure-u-sm-3-24{width:12.5%}
 +
.pure-u-sm-1-6,.pure-u-sm-4-24{width:16.6667%}
 +
.pure-u-sm-1-5{width:20%}
 +
.pure-u-sm-5-24{width:20.8333%}
 +
.pure-u-sm-1-4,.pure-u-sm-6-24{width:25%}
 +
.pure-u-sm-7-24{width:29.1667%}
 +
.pure-u-sm-1-3,.pure-u-sm-8-24{width:33.3333%}
 +
.pure-u-sm-3-8,.pure-u-sm-9-24{width:37.5%}
 +
.pure-u-sm-2-5{width:40%}
 +
.pure-u-sm-10-24,.pure-u-sm-5-12{width:41.6667%}
 +
.pure-u-sm-11-24{width:45.8333%}
 +
.pure-u-sm-1-2,.pure-u-sm-12-24{width:50%}
 +
.pure-u-sm-13-24{width:54.1667%}
 +
.pure-u-sm-14-24,.pure-u-sm-7-12{width:58.3333%}
 +
.pure-u-sm-3-5{width:60%}
 +
.pure-u-sm-15-24,.pure-u-sm-5-8{width:62.5%}
 +
.pure-u-sm-16-24,.pure-u-sm-2-3{width:66.6667%}
 +
.pure-u-sm-17-24{width:70.8333%}
 +
.pure-u-sm-18-24,.pure-u-sm-3-4{width:75%}
 +
.pure-u-sm-19-24{width:79.1667%}
 +
.pure-u-sm-4-5{width:80%}
 +
.pure-u-sm-20-24,.pure-u-sm-5-6{width:83.3333%}
 +
.pure-u-sm-21-24,.pure-u-sm-7-8{width:87.5%}
 +
.pure-u-sm-11-12,.pure-u-sm-22-24{width:91.6667%}
 +
.pure-u-sm-23-24{width:95.8333%}
 +
.pure-u-sm-1,.pure-u-sm-1-1,.pure-u-sm-24-24,.pure-u-sm-5-5{width:100%}}
  
−
</div>
+
@media screen and (min-width:48em){.pure-u-md-1,.pure-u-md-1-1,.pure-u-md-1-12,.pure-u-md-1-2,.pure-u-md-1-24,.pure-u-md-1-3,.pure-u-md-1-4,.pure-u-md-1-5,.pure-u-md-1-6,.pure-u-md-1-8,.pure-u-md-10-24,.pure-u-md-11-12,.pure-u-md-11-24,.pure-u-md-12-24,.pure-u-md-13-24,.pure-u-md-14-24,.pure-u-md-15-24,.pure-u-md-16-24,.pure-u-md-17-24,.pure-u-md-18-24,.pure-u-md-19-24,.pure-u-md-2-24,.pure-u-md-2-3,.pure-u-md-2-5,.pure-u-md-20-24,.pure-u-md-21-24,.pure-u-md-22-24,.pure-u-md-23-24,.pure-u-md-24-24,.pure-u-md-3-24,.pure-u-md-3-4,.pure-u-md-3-5,.pure-u-md-3-8,.pure-u-md-4-24,.pure-u-md-4-5,.pure-u-md-5-12,.pure-u-md-5-24,.pure-u-md-5-5,.pure-u-md-5-6,.pure-u-md-5-8,.pure-u-md-6-24,.pure-u-md-7-12,.pure-u-md-7-24,.pure-u-md-7-8,.pure-u-md-8-24,.pure-u-md-9-24{display:inline-block;zoom:1;letter-spacing:normal;word-spacing:normal;vertical-align:top;text-rendering:auto}.pure-u-md-1-24{width:4.1667%}
 +
.pure-u-md-1-12,.pure-u-md-2-24{width:8.3333%}
 +
.pure-u-md-1-8,.pure-u-md-3-24{width:12.5%}
 +
.pure-u-md-1-6,.pure-u-md-4-24{width:16.6667%}
 +
.pure-u-md-1-5{width:20%}
 +
.pure-u-md-5-24{width:20.8333%}
 +
.pure-u-md-1-4,.pure-u-md-6-24{width:25%}
 +
.pure-u-md-7-24{width:29.1667%}
 +
.pure-u-md-1-3,.pure-u-md-8-24{width:33.3333%}
 +
.pure-u-md-3-8,.pure-u-md-9-24{width:37.5%}
 +
.pure-u-md-2-5{width:40%}
 +
.pure-u-md-10-24,.pure-u-md-5-12{width:41.6667%}
 +
.pure-u-md-11-24{width:45.8333%}
 +
.pure-u-md-1-2,.pure-u-md-12-24{width:50%}
 +
.pure-u-md-13-24{width:54.1667%}
 +
.pure-u-md-14-24,.pure-u-md-7-12{width:58.3333%}
 +
.pure-u-md-3-5{width:60%}
 +
.pure-u-md-15-24,.pure-u-md-5-8{width:62.5%}
 +
.pure-u-md-16-24,.pure-u-md-2-3{width:66.6667%}
 +
.pure-u-md-17-24{width:70.8333%}.pure-u-md-18-24,.pure-u-md-3-4{width:75%}.pure-u-md-19-24{width:79.1667%}.pure-u-md-4-5{width:80%}.pure-u-md-20-24,.pure-u-md-5-6{width:83.3333%}.pure-u-md-21-24,.pure-u-md-7-8{width:87.5%}.pure-u-md-11-12,.pure-u-md-22-24{width:91.6667%}.pure-u-md-23-24{width:95.8333%}.pure-u-md-1,.pure-u-md-1-1,.pure-u-md-24-24,.pure-u-md-5-5{width:100%}}
  
 +
</style>
 +
<!-- for the menu and all-->
 +
    <style type="text/css"><!--
  
−
<div class="column half_size" >
+
.pure-menu {
−
<h5>Tips</h5>
+
    box-sizing: border-box;
−
<p>This wiki will be your team’s first interaction with the rest of the world, so here are a few tips to help you get started: </p>
+
}
−
<ul>
+
.pure-menu-fixed {
−
<li>State your accomplishments! Tell people what you have achieved from the start. </li>
+
    position: fixed;
−
<li>Be clear about what you are doing and how you plan to do this.</li>
+
    left: 0;
−
<li>You have a global audience! Consider the different backgrounds that your users come from.</li>
+
    top: 0;
−
<li>Make sure information is easy to find; nothing should be more than 3 clicks away.  </li>
+
    z-index: 3;
−
<li>Avoid using very small fonts and low contrast colors; information should be easy to read.  </li>
+
}
−
<li>Start documenting your project as early as possible; don’t leave anything to the last minute before the Wiki Freeze. For a complete list of deadlines visit the <a href="https://2017.igem.org/Calendar">iGEM 2017 calendar</a> </li>
+
.pure-menu-list,
−
<li>Have lots of fun! </li>
+
.pure-menu-item {
−
</ul>
+
    position: relative;
−
</div>
+
}
  
 +
.pure-menu-list {
 +
    list-style: none;
 +
    margin: 0;
 +
    padding: 0;
 +
}
  
−
<div class="column half_size" >
+
.pure-menu-item {
−
<h5>Inspiration</h5>
+
    padding: 0;
−
<p> You can also view other team wikis for inspiration! Here are some examples:</p>
+
    margin: 0;
−
<ul>
+
    height: 100%;
−
<li> <a href="https://2014.igem.org/Team:SDU-Denmark/"> 2014 SDU Denmark </a> </li>
+
}
−
<li> <a href="https://2014.igem.org/Team:Aalto-Helsinki">2014 Aalto-Helsinki</a> </li>
+
−
<li> <a href="https://2014.igem.org/Team:LMU-Munich">2014 LMU-Munich</a> </li>
+
−
<li> <a href="https://2014.igem.org/Team:Michigan"> 2014 Michigan</a></li>
+
−
<li> <a href="https://2014.igem.org/Team:ITESM-Guadalajara">2014 ITESM-Guadalajara </a></li>
+
−
<li> <a href="https://2014.igem.org/Team:SCU-China"> 2014 SCU-China </a></li>
+
−
</ul>
+
−
</div>
+
  
−
<div class="column half_size" >
+
.pure-menu-link,
−
<h5> Uploading pictures and files </h5>
+
.pure-menu-heading {
−
<p> You can upload your pictures and files to the iGEM 2017 server. Remember to keep all your pictures and files within your team's namespace or at least include your team's name in the file name. <br />
+
    display: block;
−
When you upload, set the "Destination Filename" to <br><code>T--YourOfficialTeamName--NameOfFile.jpg</code>. (If you don't do this, someone else might upload a different file with the same "Destination Filename", and your file would be erased!)<br><br>
+
    text-decoration: none;
 +
    white-space: nowrap;
 +
}
 +
.pure-menu-item .pure-menu-item {
 +
    display: block;
 +
}
 +
.pure-menu-heading {
 +
    text-transform: uppercase;
 +
    color: #565d64;
 +
}
 +
.pure-menu-link, {
 +
    color: #777;
 +
}
  
−
<a href="https://2017.igem.org/Special:Upload">
+
.pure-menu-link,
−
UPLOAD FILES
+
.pure-menu-heading {
−
</a>
+
    padding: .5em 1em;
−
</p>
+
}
 +
.pure-menu-active > .pure-menu-link,
 +
.pure-menu-link:hover,
 +
.pure-menu-link:focus {
 +
    background-color: #eee;
 +
}
 +
.pure-menu-selected .pure-menu-link,
 +
.pure-menu-selected .pure-menu-link:visited {
 +
    color: #000;
 +
}
 +
 
 +
body {
 +
    color: #777;
 +
}
 +
 
 +
.pure-img-responsive {
 +
    max-width: 100%;
 +
    height: auto;
 +
}
 +
 
 +
#layout,
 +
#menu,
 +
.menu-link {
 +
    -webkit-transition: all 0.2s ease-out;
 +
    -moz-transition: all 0.2s ease-out;
 +
    -ms-transition: all 0.2s ease-out;
 +
    -o-transition: all 0.2s ease-out;
 +
    transition: all 0.2s ease-out;
 +
}
 +
 
 +
#layout {
 +
    position: relative;
 +
    left: 0;
 +
    padding-left: 0;
 +
}
 +
    #layout.active #menu {
 +
        left: 175px;
 +
        width: 175px;
 +
    }
 +
 
 +
    #layout.active .menu-link {
 +
        left: 175px;
 +
    }
 +
 
 +
.content {
 +
    margin: 0 auto;
 +
    padding: 0 2em;
 +
    max-width: 800px;
 +
    margin-bottom: 50px;
 +
    line-height: 1.6em;
 +
}
 +
 
 +
.header {
 +
    margin: 0;
 +
    color: #333;
 +
    text-align: center;
 +
    padding: 2.5em 2em 0;
 +
    border-bottom: 1px solid #eee;
 +
}
 +
    .header h1 {
 +
        margin: 0.2em 0;
 +
        font-size: 3em;
 +
        font-weight: 300;
 +
    }
 +
    .header h2 {
 +
        font-weight: 300;
 +
        color: #ccc;
 +
        padding: 0;
 +
        margin-top: 0;
 +
    }
 +
 
 +
.content-subhead {
 +
    margin: 50px 0 20px 0;
 +
    font-weight: 300;
 +
    color: #888;
 +
}
 +
 
 +
 
 +
#menu {
 +
    margin-left: -175px; /* "#menu" width */
 +
    width: 175px;
 +
    position: fixed;
 +
    top: 18px;
 +
    left: 0;
 +
    bottom: 0;
 +
    z-index: 1000; /* so the menu or its navicon stays above all content */
 +
    background: #000000;
 +
    overflow-y: auto;
 +
    -webkit-overflow-scrolling: touch;
 +
}
 +
    #menu a {
 +
        color: #999;
 +
        border: none;
 +
        padding: 0.6em 0 0.6em 0.6em;
 +
    }
 +
 
 +
    /*
 +
    Remove all background/borders, since we are applying them to #menu.
 +
    */
 +
    #menu .pure-menu,
 +
    #menu .pure-menu ul {
 +
        border: none;
 +
        background: transparent;
 +
    }
 +
 
 +
    #menu .pure-menu ul,
 +
    #menu .pure-menu .menu-item-divided {
 +
        border-top: 1px solid #333;
 +
    }
 +
        /*
 +
        Change color of the anchor links on hover/focus.
 +
        */
 +
        #menu .pure-menu li a:hover,
 +
        #menu .pure-menu li a:focus {
 +
            background: #333;
 +
        }
 +
       
 +
    #menu .pure-menu-selected,
 +
    #menu .pure-menu-heading {
 +
        background: #1f8dd6;
 +
    }
 +
        #menu .pure-menu-selected a {
 +
            color: #fff;
 +
        }
 +
 
 +
    #menu .pure-menu-heading {
 +
        font-size: 110%;
 +
        color: #fff;
 +
        margin: 0;
 +
    }
 +
 
 +
.menu-link {
 +
    position: fixed;
 +
    display: block; /* show this only on small screens */
 +
    top: 18px;
 +
    left: 0; /* "#menu width" */
 +
    background: #000;
 +
    background: rgba(0,0,0,0.7);
 +
    font-size: 10px; /* change this value to increase/decrease button size */
 +
    z-index: 10;
 +
    width: 2em;
 +
    height: auto;
 +
    padding: 2.1em 1.6em;
 +
}
 +
 
 +
    .menu-link:hover,
 +
    .menu-link:focus {
 +
        background: #000;
 +
    }
 +
 
 +
    .menu-link span {
 +
        position: relative;
 +
        display: block;
 +
    }
 +
 
 +
    .menu-link span,
 +
    .menu-link span:before,
 +
    .menu-link span:after {
 +
        background-color: #fff;
 +
        width: 100%;
 +
        height: 0.2em;
 +
    }
 +
 
 +
        .menu-link span:before,
 +
        .menu-link span:after {
 +
            position: absolute;
 +
            margin-top: -0.6em;
 +
            content: " ";
 +
        }
 +
 
 +
        .menu-link span:after {
 +
            margin-top: 0.6em;
 +
        }
 +
@media (min-width: 88em) {
 +
 
 +
    .header,
 +
    .content {
 +
        padding-left: 2em;
 +
        padding-right: 2em;
 +
    }
 +
 
 +
    #layout {
 +
        padding-left: 175px; /* left col width "#menu" */
 +
        left: 0;
 +
    }
 +
    #menu {
 +
        left: 175px;
 +
    }
 +
 
 +
    .menu-link {
 +
        position: fixed;
 +
        left: 175px;
 +
        display: none;
 +
    }
 +
 
 +
    #layout.active .menu-link {
 +
        left: 175px;
 +
    }
 +
    #list .divList{ width:1100px; height:520px; margin:0px auto; position:relative;}
 +
}
 +
 
 +
@media (max-width: 88em) {
 +
    #layout.active {
 +
        position: relative;
 +
        left: 175px;
 +
    }
 +
    #list .divList{ width:900px; height:500px; margin:0px auto; position:relative;}
 +
}
 +
.pure-menu-item .pure-menu-item{display:block;background-color:#cccccc}
 +
.pure-menu-children{display:none;position:relative;top:0;margin:0;padding:0;z-index:3}
 +
.pure-menu-active>.pure-menu-children,.pure-menu-allow-hover:hover>.pure-menu-children{display:block;position:relative}
 +
.pure-menu-has-children>.pure-menu-link:after{padding-left:.5em;content:"\25B8";font-size:small}
 +
 
 +
.pure-button {
 +
    background-color: #1f8dd6;
 +
    padding: 0.5em 2em;
 +
    border-radius: 5px;
 +
    background: white;
 +
    color: #1f8dd6;
 +
    border-radius: 5px;
 +
    font-size: 120%;
 +
    display:inline-block;zoom:1;
 +
white-space:nowrap;
 +
cursor:pointer;
 +
list-style:none;
 +
text-decoration:none;
 +
}
 +
-->
 +
    </style>
 +
 
 +
</head>
 +
<body>
 +
 
 +
  <div id="loading">
 +
    <div></div>
 +
        <div>
 +
        <div align="center">
 +
            <a href='#' class="pure-button "onclick="Stating_pages()">Get Started</a>
 +
        </div>
 +
        </div>
 +
        <span></span>
 +
    </div>
 +
  <div id="layout">
 +
        <a href="#menu" id="menuLink" class="menu-link">
 +
            <span></span>
 +
        </a>
 +
        <div id="menu">
 +
        <div class="pure-menu"><img src="icon1.jpg" width=150px height=120px alt="">
 +
          <ul class="pure-menu-list">
 +
            <li class="pure-menu-item"><a class="pure-menu-heading" href="#" class="pure-menu-link">Home</a></li>             
 +
         
 +
            <li class="pure-menu-item pure-menu-has-children">
 +
              <a href="#"  class="pure-menu-link"onclick="Show('team_show')">TEAM</a>
 +
              <ul class="pure-menu-children" id="team_show">
 +
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Team</a></li>
 +
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Collaborations</a></li>
 +
            </ul>
 +
            </li>
 +
            <li class="pure-menu-item pure-menu-has-children">
 +
              <a href="#"  class="pure-menu-link"onclick="Show('project_show')">PROJECT</a>
 +
              <ul class="pure-menu-children" id="project_show">
 +
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Description</a></li>
 +
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Design</a></li>
 +
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Experiment</a></li>
 +
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Notebook</a></li>
 +
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">InterLab</a></li>
 +
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Contribution</a></li>
 +
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Model</a></li>
 +
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Results</a></li>
 +
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Demonstrate</a></li>
 +
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Improve</a></li>
 +
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Attributions</a></li>
 +
            </ul>
 +
            </li>
 +
            <li class="pure-menu-item pure-menu-has-children">
 +
              <a href="#"  class="pure-menu-link"onclick="Show('part_show')">PARTS</a>
 +
              <ul class="pure-menu-children" id="part_show">
 +
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Parts</a></li>
 +
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Basic Parts</a></li>
 +
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Composite Parts</a></li>
 +
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Part Collection</a></li>
 +
            </ul>
 +
            </li>
 +
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">SAFETY</a></li>
 +
            <li class="pure-menu-item pure-menu-has-children">
 +
              <a href="#"  class="pure-menu-link"onclick="Show('HP_show')">HP</a>
 +
              <ul class="pure-menu-children" id="HP_show">
 +
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Sliver HP</a></li>
 +
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Integrated and Gold</a></li>
 +
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Public Engagement</a></li>
 +
            </ul>
 +
            </li>
 +
            <li class="pure-menu-item pure-menu-has-children">
 +
              <a href="#"  class="pure-menu-link"onclick="Show('award_show')">AWARDS</a>
 +
              <ul class="pure-menu-children" id="award_show">
 +
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Applied Design</a></li>
 +
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Enterpreneurship</a></li>
 +
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Hardware</a></li>
 +
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Measurement</a></li>
 +
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Model</a></li>
 +
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Plant</a></li>
 +
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Software</a></li>
 +
            </ul>
 +
            </li>
 +
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">JUDGINF FORM</a></li>
 +
         
 +
            </ul>
 +
        </div> 
 +
        </div>
 +
 
 +
 
 +
   
 +
<div id="content"class="content">
 +
    <ul id="lay-menu">
 +
        <li class="active"></li>
 +
            <li></li>
 +
            <li></li>
 +
            <li></li>
 +
        </ul>
 +
    <ul id="list">
 +
    <li id="abstract" class="liList">
 +
           
 +
                <div class="header">
 +
            <h1>NUDT_CHINA</h1>
 +
            <h2>The abstract of our work</h2>
 +
              </div>
 +
             
 +
            </li>
 +
        <li id="home" class="liList">
 +
            <div id="homeContent" class="divList">
 +
                <ul class="homeContent1">
 +
                    </ul>
 +
                    <ul class="homeContent2">
 +
                    </ul>
 +
                </div>
 +
            </li>
 +
        </ul>
 +
        </div>
 +
       
 
</div>
 
</div>
 +
<script type="text/javascript">
 +
(function (window, document) {
 +
 +
    var layout  = document.getElementById('layout'),
 +
        menu    = document.getElementById('menu'),
 +
        menuLink = document.getElementById('menuLink'),
 +
        content  = document.getElementById('content');
 +
   
 +
 +
    function toggleClass(element, className) {
 +
        var classes = element.className.split(/\s+/),
 +
            length = classes.length,
 +
            i = 0;
 +
 +
        for(; i < length; i++) {
 +
          if (classes[i] === className) {
 +
            classes.splice(i, 1);
 +
            break;
 +
          }
 +
        }
 +
        // The className is not found
 +
        if (length === classes.length) {
 +
            classes.push(className);
 +
        }
 +
 +
        element.className = classes.join(' ');
 +
    }
  
 +
    function toggleAll(e) {
 +
        var active = 'active';
  
 +
        e.preventDefault();
 +
        toggleClass(layout, active);
 +
        toggleClass(menu, active);
 +
        toggleClass(menuLink, active);
 +
    }
  
 +
    menuLink.onclick = function (e) {
 +
        toggleAll(e);
 +
    };
 +
    content.onclick = function(e) {
 +
        if (menu.className.indexOf('active') !== -1) {
 +
            toggleAll(e);
 +
        }
 +
    };
  
  
  
 +
}(this, this.document));
 +
</script>
  
 +
<script type="text/javascript" >
 +
    function Show(tagId) {
 +
    if (document.getElementById(tagId).style.display=="none") {
 +
    document.getElementById(tagId).style.display="block";
 +
   
 +
    }
 +
    else {
 +
    document.getElementById(tagId).style.display="none";
 +
    }
 +
    }
 +
</script>
 +
 +
</body>
 
</html>
 
</html>

Revision as of 02:49, 15 October 2017

<!doctype html> Team:NUDT_CHINA