Difference between revisions of "Team:NUDT CHINA"

Line 1: Line 1:
  
 
{{NUDT_CHINA}}
 
{{NUDT_CHINA}}
 +
<!doctype 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>
 +
<script type="text/javascript" >
 +
function StatingPages(tag){
 +
var oContent = $('content');
 +
var oLoading = $('loading');
 +
var oList = $('Qidilist');
 +
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; 
  
 +
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);
 +
}
 +
 +
}
  
<html>
+
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 == aLiList.length-1){if(bBtn!=0){return;};}
 +
if( iNow == 0 ){if(bBtn==0){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">
 +
<!--li{ list-style:none;}
 +
#Qidilist{ width:100%; position:absolute; top:0; left:0; transition:.5s top;}
 +
#Qidilist .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;}
 +
#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;}
  
 +
#homeContent .homeContent2{ position:absolute; bottom:0; z-index:2; text-align:center; width:100%; transition:1s;}
 +
#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;}
 +
#homeContent .homeContent2 li.active{ background:white; cursor:default;}
  
<div class="column full_size" >
+
#homeContent .homeContent1 .leftShow{ animation:1s homeLeftShow; visibility:visible; z-index:3;-webkit-animation:1s homeLeftShow;}
<img src="http://placehold.it/2000x300/d3d3d3/f2f2f2">
+
#homeContent .homeContent1 .rightHide{ animation:1s homeRightHide; visibility:hidden; -webkit-animation:1s homeRightHide;}
</div>
+
  
  
 +
#homeContent .homeContent1 .leftHide{ animation:1s homeLeftHide; visibility:hidden; -webkit-animation:1s homeLeftHide;}
 +
#homeContent .homeContent1 .rightShow{ animation:1s homeRightShow; visibility:visible; z-index:3; -webkit-animation:1s homeRightShow;}
 +
</style>
 +
<style type="text/css">
 +
@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 full_size" >
+
@-webkit-keyframes homeLeftHide{
<h1> Welcome to iGEM 2017! </h1>
+
0%{ -webkit-transform:translateZ(0px); visibility:visible;}
<p>Your team has been approved and you are ready to start the iGEM season! </p>
+
40%{ -webkit-transform:translate(-40%,0) scale(0.8) rotateY(20deg);}
</div>
+
100%{ -webkit-transform:translateZ(-200px);}
 +
}
 +
@-webkit-keyframes homeRightShow{
 +
0%{ -webkit-transform:translateZ(-200px);}
 +
40%{ -webkit-transform:translate(40%,0) scale(0.8) rotateY(-20deg);}
 +
100%{ -webkit-transform:translateZ(0px);}
 +
}
  
<div class="clear"></div>
+
@keyframes homeLeftShow{
 +
0%{ transform:translateZ(-200px);}
 +
40%{ transform:translate(-40%,0) scale(0.8) rotateY(20deg);}
 +
100%{ transform:translateZ(0px);}
 +
}
 +
@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 half_size" >
+
<style type="text/css">
<h5>Before you start: </h5>
+
<p> Please read the following pages:</p>
+
<ul>
+
<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>
+
<li> <a href="https://2017.igem.org/Resources/Template_Documentation">Template documentation</a></li>
+
</ul>
+
</div>
+
  
<div class="column half_size" >
 
<div class="highlight">
 
<h5> Project description </h5>
 
<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>
 
</div>
 
</div>
 
  
<div class="column full_size" >
+
#loading div{ width:100%; height:50%; position:absolute; left:0; background:#009ee0; z-index:50; transition:1s;}
<h5> Wiki template information </h5>
+
#loading div:nth-of-type(1){ top:0;}
<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>
+
#loading div:nth-of-type(2){ bottom:0;}
 +
#loading span{ width:0%; height:4px; background:white; position:absolute; left:0; top:50%; margin-top:-2px; z-index:60; transition:.10s;}
  
</div>  
+
.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="StatingPages('True')">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 class="column half_size" >
+
<div id="content"class="content">
<h5> Editing your wiki </h5>
+
    <ul id="lay-menu">
<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>  
+
        <li class="active"></li>
<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>
+
            <li></li>
 
+
            <li></li>
 +
            <li></li>
 +
        </ul>
 +
    <ul id="Qidilist">
 +
    <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>
  
 
+
</body>
<div class="column half_size" >
+
<h5>Tips</h5>
+
<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>
+
<li>State your accomplishments! Tell people what you have achieved from the start. </li>
+
<li>Be clear about what you are doing and how you plan to do this.</li>
+
<li>You have a global audience! Consider the different backgrounds that your users come from.</li>
+
<li>Make sure information is easy to find; nothing should be more than 3 clicks away.  </li>
+
<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>
+
<li>Have lots of fun! </li>
+
</ul>
+
</div>
+
 
+
 
+
<div class="column half_size" >
+
<h5>Inspiration</h5>
+
<p> You can also view other team wikis for inspiration! Here are some examples:</p>
+
<ul>
+
<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" >
+
<h5> Uploading pictures and files </h5>
+
<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 />
+
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>
+
 
+
<a href="https://2017.igem.org/Special:Upload">
+
UPLOAD FILES
+
</a>
+
</p>
+
</div>
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
</html>
 
</html>

Revision as of 14:19, 16 October 2017

<!doctype html> Team:NUDT_CHINA