Difference between revisions of "Team:NUDT CHINA"

 
(242 intermediate revisions by 2 users not shown)
Line 1: Line 1:
<html>
+
{{NUDT_CHINA}}
 +
<html lang="en">
 
<head>
 
<head>
<title><title>
+
    <meta charset="utf-8">
<style>
+
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
      .custom-menu-wrapper {
+
    <title>Team:NUDT_CHINA</title>
          background-color: #808080;
+
<script type="text/javascript" >
          margin-bottom: 2.5em;
+
window.onload=function(){
          white-space: nowrap;
+
var oContent = $('content');
          position: relative;
+
var oLoading = $('loading');
      }
+
var oList = $('Qidilist');
     
+
var aLiList = getByClass( oList , 'liList' );
      .custom-menu {
+
var oMenu = $('lay-menu');
          display: inline-block;
+
  var oNextBtn=$('next-button');
          width: auto;
+
var aLiMenu = oMenu.getElementsByTagName('li');
          vertical-align: middle;
+
var iNow = 0;
          -webkit-font-smoothing: antialiased;
+
var prevIndex = 0;
      }
+
var iContentHeight = 0;
     
+
var btn1 = $('btn1');
      .custom-menu .pure-menu-link,
+
var btn2 = $('btn2');
      .custom-menu .pure-menu-heading {
+
var btn3 = $('btn3');
          color: white;
+
var btn4 = $('btn4');
      }
+
contentAuto();
     
+
mouseWheel();
      .custom-menu .pure-menu-link:hover,
+
bindNav();
      .custom-menu .pure-menu-heading:hover {
+
add1();
          background-color: transparent;
+
add2();
      }
+
window.onresize = fnResize; 
     
+
function add1() {
      .custom-menu-top {
+
oNextBtn.onclick=function () {
          position: relative;
+
showLoading();
          padding-top: .5em;
+
};
          padding-bottom: .5em;
+
}
      }
+
function add2() {
     
+
btn1.onclick=function () {
      .custom-menu-brand {
+
toMove(1);
          display: block;
+
iNow=1;
          text-align: center;
+
}
          position: relative;
+
btn2.onclick=function () {
      }
+
toMove(2);
     
+
iNow=2;
      .custom-menu-toggle {
+
}
          width: 44px;
+
btn3.onclick=function () {
          height: 44px;
+
toMove(3);
          display: block;
+
iNow=3;
          position: absolute;
+
}
          top: 3px;
+
btn4.onclick=function () {
          right: 0;
+
toMove(0);
          display: none;
+
iNow=0;
      }
+
}
     
+
}
      .custom-menu-toggle .bar {
+
function mouseWheel(){
          background-color: white;
+
var bBtn = true;
          display: block;
+
var timer = null;
          width: 20px;
+
if(oContent.addEventListener){
          height: 2px;
+
oContent.addEventListener('DOMMouseScroll',function(ev){
          border-radius: 100px;
+
var ev = ev || window.event;
          position: absolute;
+
clearTimeout(timer);
          top: 22px;
+
timer = setTimeout(function(){
          right: 12px;
+
toChange(ev);
          -webkit-transition: all 0.5s;
+
},200);
          -moz-transition: all 0.5s;
+
},false);
          -ms-transition: all 0.5s;
+
}
          transition: all 0.5s;
+
oContent.onmousewheel = function(ev){
      }
+
var ev = ev || window.event;
     
+
clearTimeout(timer);
      .custom-menu-toggle .bar:first-child {
+
timer = setTimeout(function(){
          -webkit-transform: translateY(-6px);
+
toChange(ev);
          -moz-transform: translateY(-6px);
+
},200);
          -ms-transform: translateY(-6px);
+
};
          transform: translateY(-6px);
+
      }
+
function toChange(ev){
     
+
if(ev.detail){
      .custom-menu-toggle.x .bar {
+
bBtn = ev.detail > 0 ? true : false;
          -webkit-transform: rotate(45deg);
+
}
          -moz-transform: rotate(45deg);
+
else{
          -ms-transform: rotate(45deg);
+
bBtn = ev.wheelDelta < 0 ? true : false;
          transform: rotate(45deg);
+
}
      }
+
     
+
if(  iNow == aLiList.length-1){if(bBtn!=0){return;};}
      .custom-menu-toggle.x .bar:first-child {
+
if( iNow == 0 ){if(bBtn==0){return;};}
          -webkit-transform: rotate(-45deg);
+
          -moz-transform: rotate(-45deg);
+
prevIndex = iNow;
          -ms-transform: rotate(-45deg);
+
if(bBtn){  //↓
          transform: rotate(-45deg);
+
if(iNow != aLiList.length-1){
      }
+
iNow++;
     
+
}
      .custom-menu-screen {
+
toMove(iNow);
          background-color: rgba(0, 0, 0, 0.5);
+
}
          -webkit-transition: all 0.5s;
+
else{  //↑
          -moz-transition: all 0.5s;
+
if(iNow != 0){
          -ms-transition: all 0.5s;
+
iNow--;
          transition: all 0.5s;
+
}
          height: 3em;
+
toMove(iNow);
          width: 70em;
+
}
          position: absolute;
+
          top: 0;
+
if(ev.preventDefault){
          z-index: -1;
+
ev.preventDefault();
      }
+
}
     
+
else{
      .custom-menu-tucked .custom-menu-screen {
+
return false;
          -webkit-transform: translateY(-44px);
+
}
          -moz-transform: translateY(-44px);
+
}
          -ms-transform: translateY(-44px);
+
          transform: translateY(-44px);
+
}
      }
+
function showLoading(){
        
+
var oSpan = oLoading.getElementsByTagName('span')[0];
      @media (max-width: 62em) {
+
var aDiv = oLoading.getElementsByTagName('div');
     
+
oSpan.style.width = '100%';
          .custom-menu {
+
oSpan.addEventListener('webkitTransitionend',spanChange,false);
              display: block;
+
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 fnResize(){
 +
contentAuto();
 +
}
 +
 +
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">
 +
.button-next{   font-weight: bold;
 +
    font-family: "Lucida Console","Lucida Sans Typewriter",monaco,"Bitstream Vera Sans Mono",monospace;
 +
    position: absolute;
 +
    min-width: 180px;
 +
    min-height: 40px;
 +
  height: 7%;
 +
  width: 13%;
 +
  bottom: 1%;
 +
  background: #fff;
 +
  border: 1px solid #fff;
 +
  border-radius: 2px;
 +
  color: #222;
 +
  text-align: center;
 +
  cursor: pointer;
 +
  transition: .2s ease-in-out;
 +
  transform: translate(-50%, -50%);font-size: large;
 +
}
 +
.button-next:hover {
 +
  background: transparent;
 +
  color: #fff;
 +
}
 +
.myheader{height: 100%; text-align: center; background-color: rgba(255,255,255,0);margin:0 auto;position: relative;}
 +
.content{width:100%;}
 +
li{ list-style:none;}
 +
#Qidilist{ width:100%; position:absolute; top:0; left:0; transition:.5s top;}
 +
#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 black solid; cursor:pointer;}
 +
#lay-menu li.active{ background:black; cursor:default;}
 +
 
 +
.myheader img{width:100%; margin: 0;position: absolute;  top: 50%;transform: translate(0, -50%); left: 0;max-height: 80%;}
 +
.myheader h1{width:100%; margin: 0;position: absolute;  top: 40%;transform: translate(0, -50%); left: 0;max-height: 80%;font-size:78px; font-family:"Comic Sans MS",cursive;border-bottom: none;padding-bottom:40px;line-height:normal;}
 +
.myheader h3{width:100%; margin: 0;position: absolute;  top: 60%;transform: translate(0, -50%); left: 0;max-height: 80%;font-size:30px;border-bottom: none;font-weight:initial;font-family: "Big Caslon","Book Antiqua","Palatino Linotype",Georgia,serif;line-height:normal;}
 +
#loading div{ width:100%; height:50%; position:absolute; left:0; background:#009ee0; z-index:50; transition:1s;text-align: center;}
 +
#loading div:nth-of-type(1){ top:0;}
 +
#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;}
 +
body {
 +
    color: #777;
 +
}
 +
#Qidilist .liList{ width:100%; position:relative;  overflow:hidden;text-align: center;left:-30px;}
 +
.big-bg{position:absolute; top:0;left:0;height:100%;width:100%; z-index:9;}
 +
@media (min-width: 92em) {
 +
  .myheader {
 +
        width: 85%;}
 +
}
 +
@media (max-width: 92em) {
 +
  .myheader {
 +
        width: 85%;}
 +
}
 +
@media (max-width: 45em) {
 +
  .myheader {
 +
        width: 100%;}
 +
}
 +
 
 +
.next-button {z-index:10;position:absolute;font-weight: bold;
 +
    font-family: "Lucida Console","Lucida Sans Typewriter",monaco,"Bitstream Vera Sans Mono",monospace;
 +
  top: 40%;
 +
  left: 50%;font-size:29px;font-weight:10px;
 +
  z-index: 10;
 +
  padding: 1em 2.5em;
 +
  background: #fff;
 +
  border: 1px solid #fff;
 +
  border-radius: 4px;
 +
  color: #222;
 +
  font-size: large;
 +
  text-align: center;
 +
  cursor: pointer;
 +
  transition: .2s ease-in-out;
 +
  transform: translate(-50%, -50%);}
 +
.next-button:hover {
 +
  background: transparent;
 +
  color: #fff;
 +
}
 +
.under-bg{z-index: 0.5;opacity: 1; position: fixed; top: 0; left: 0; width: 100%; height: 100%;}
 +
</style>
 +
 
 +
</head>
 +
<img class="under-bg" src="https://static.igem.org/mediawiki/2017/c/cc/T-NUDT_CHINA-MainPage1.jpg" alt="">
 +
<div id="loading">
 +
    <div><img src="https://static.igem.org/mediawiki/2017/1/17/T-NUDT_CHINA-loadingBg3.jpg" alt="" class="big-bg"></div>
 +
        <div><img src="https://static.igem.org/mediawiki/2017/a/ab/T-NUDT_CHINA-loadingBg4.jpg" alt="" class="big-bg">
 +
            <a class="next-button" id="next-button">Get Started!</a>
 +
        </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="https://static.igem.org/mediawiki/2017/4/4f/T-NUDT_CHINA-icon01.png" width=240px height=190px alt="">
 +
          <ul class="pure-menu-list">
 +
            <li class="pure-menu-item"><a  class="pure-menu-heading" href="https://2017.igem.org/Team:NUDT_CHINA" class="pure-menu-link">HOME</a></li>             
 +
         
 +
            <li class="pure-menu-item pure-menu-has-children">
 +
              <a  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="https://2017.igem.org/Team:NUDT_CHINA/Team" class="pure-menu-link">Team</a></li>
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Collaborations" class="pure-menu-link">Collaborations</a></li>
 +
            </ul>
 +
            </li>
 +
            <li class="pure-menu-item pure-menu-has-children">
 +
              <a  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="https://2017.igem.org/Team:NUDT_CHINA/Description" class="pure-menu-link">Description</a></li>
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Design" class="pure-menu-link">Design</a></li>
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Experiments" class="pure-menu-link">Experiment</a></li>
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Notebook" class="pure-menu-link">Notebook</a></li>
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Results" class="pure-menu-link">Results</a></li>
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Demonstrate" class="pure-menu-link">Demonstrate</a></li>
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Improve" class="pure-menu-link">Improve</a></li>
 +
            </ul>
 +
            </li>
 +
            <li class="pure-menu-item pure-menu-has-children">
 +
              <a  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="https://2017.igem.org/Team:NUDT_CHINA/Parts" class="pure-menu-link">Parts</a></li>
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Basic_Part" class="pure-menu-link">Basic Parts</a></li>
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Composite_Part" class="pure-menu-link">Composite Parts</a></li>
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Part_Collection" class="pure-menu-link">Part Collection</a></li>
 +
            </ul>
 +
            </li>
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Attributions" class="pure-menu-link">Attributions</a></li>
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/InterLab" class="pure-menu-link">InterLab</a></li>
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Model" class="pure-menu-link">Model</a></li>
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Safety" class="pure-menu-link">SAFETY</a></li>
 +
            <li class="pure-menu-item pure-menu-has-children">
 +
              <a  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="https://2017.igem.org/Team:NUDT_CHINA/HP/Silver" class="pure-menu-link">Silver HP</a></li>
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/HP/Gold_Integrated" class="pure-menu-link">Integrated & Gold</a></li>
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Engagement" class="pure-menu-link">Public Engagement</a></li>
 +
            </ul>
 +
            </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="Qidilist">
 +
      <li id="abstract" class="liList">
 +
            <div class="myheader"id="main"><h1>MiRNA &nbsp;&nbsp;Locker</h1><h3>A Modularized DNA Assembly As miRNA Inhibitors</h3><button id="btn1" class="button-next">How it works?</button></div>
 +
            </li>
 +
      <li id="abstract" class="liList">
 +
            <div class="myheader"id="main"><img class="strory-telling1" src="https://static.igem.org/mediawiki/2017/a/ad/T-NUDT_CHINA-story1.png" no-repeat; ><button id="btn2" class="button-next">Next</button></div>
 +
            </li>
 +
      <li id="abstract" class="liList">
 +
            <div class="myheader"id="main"><img class="strory-telling2" src="https://static.igem.org/mediawiki/2017/3/35/T-NUDT_CHINA-story2.png" no-repeat; ><button id="btn3" class="button-next">Next</button></div>
 +
            </li>
 +
       <li id="abstract" class="liList">
 +
            <div class="myheader"id="main"><img class="strory-telling3" src="https://static.igem.org/mediawiki/2017/1/1e/T-NUDT_CHINA-story3.png" no-repeat; ><button id="btn4" class="button-next">Back</button></div>
 +
            </li>
 +
   
 +
        </ul>
 +
        </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('main');
 +
 
 +
    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;
 
           }
 
           }
     
+
        }
          .custom-menu-toggle {
+
        // The className is not found
              display: block;
+
        if (length === classes.length) {
              display: none\9;
+
            classes.push(className);
          }
+
        }
     
+
 
          .custom-menu-bottom {
+
        element.className = classes.join(' ');
              position: absolute;
+
    }
              width: 100%;
+
 
              border-top: 1px solid #eee;
+
    function toggleAll(e) {
              background-color: #808080\9;
+
        var active = 'active';
              z-index: 100;
+
 
          }
+
        e.preventDefault();
     
+
        toggleClass(layout, active);
          .custom-menu-bottom .pure-menu-link {
+
        toggleClass(menu, active);
              opacity: 1;
+
        toggleClass(menuLink, active);
              -webkit-transform: translateX(0);
+
    }
              -moz-transform: translateX(0);
+
 
              -ms-transform: translateX(0);
+
    menuLink.onclick = function (e) {
              transform: translateX(0);
+
        toggleAll(e);
              -webkit-transition: all 0.5s;
+
    };
              -moz-transition: all 0.5s;
+
 
              -ms-transition: all 0.5s;
+
    content.onclick = function(e) {
              transition: all 0.5s;
+
        if (menu.className.indexOf('active') !== -1) {
          }
+
            toggleAll(e);
     
+
        }
          .custom-menu-bottom.custom-menu-tucked .pure-menu-link {
+
    };
              -webkit-transform: translateX(-140px);
+
 
              -moz-transform: translateX(-140px);
+
}(this, this.document));
              -ms-transform: translateX(-140px);
+
</script>
              transform: translateX(-140px);
+
 
              opacity: 0;
+
<script type="text/javascript" >
              opacity: 1\9;
+
    function Show(tagId) {
          }
+
    if (document.getElementById(tagId).style.display=="none") {
     
+
    document.getElementById(tagId).style.display="block";
          .pure-menu-horizontal.custom-menu-tucked {
+
   
              z-index: -1;
+
    }
              top: 45px;
+
    else {
              position: absolute;
+
    document.getElementById(tagId).style.display="none";
              overflow: hidden;
+
    }
          }
+
    }
     
+
</script>
      }
+
</body>
      </style></head>
+
</html>
<body>
+
      <div class="custom-menu-wrapper">
+
          <div class="pure-menu custom-menu custom-menu-top">
+
              <a href="#" class="pure-menu-heading custom-menu-brand">Brand</a>
+
              <a href="#" class="custom-menu-toggle" id="toggle"><s class="bar"></s><s class="bar"></s></a>
+
          </div>
+
          <div class="pure-menu pure-menu-horizontal pure-menu-scrollable custom-menu custom-menu-bottom custom-menu-tucked" id="tuckedMenu">
+
              <div class="custom-menu-screen"></div>
+
              <ul class="pure-menu-list">
+
                  <li class="pure-menu-item"><a href="#" class="pure-menu-link">Home</a></li>
+
                  <li class="pure-menu-item"><a href="#" class="pure-menu-link">About</a></li>
+
                  <li class="pure-menu-item"><a href="#" class="pure-menu-link">Contact</a></li>
+
                  <li class="pure-menu-item"><a href="#" class="pure-menu-link">Blog</a></li>
+
                  <li class="pure-menu-item"><a href="#" class="pure-menu-link">GitHub</a></li>
+
                  <li class="pure-menu-item"><a href="#" class="pure-menu-link">Twitter</a></li>
+
                  <li class="pure-menu-item"><a href="#" class="pure-menu-link">Apple</a></li>
+
                  <li class="pure-menu-item"><a href="#" class="pure-menu-link">Google</a></li>
+
                  <li class="pure-menu-item"><a href="#" class="pure-menu-link">Wang</a></li>
+
                  <li class="pure-menu-item"><a href="#" class="pure-menu-link">Yahoo</a></li>
+
                  <li class="pure-menu-item"><a href="#" class="pure-menu-link">W3C</a></li>
+
              </ul>
+
          </div>
+
      </div>
+
      <script>
+
      (function (window, document) {
+
      document.getElementById('toggle').addEventListener('click', function (e) {
+
          document.getElementById('tuckedMenu').classList.toggle('custom-menu-tucked');
+
          document.getElementById('toggle').classList.toggle('x');
+
      });
+
      })(this, this.document);
+
      </script>
+
</body></html>
+

Latest revision as of 02:17, 2 November 2017

Team:NUDT_CHINA