Difference between revisions of "Team:USTC"

 
(38 intermediate revisions by 3 users not shown)
Line 1: Line 1:
 
<html>
 
<html>
<link rel="stylesheet" type="text/css" href="https://2015.igem.org/Team:USTC/css/reset.css?action=raw&ctype=text/css">
+
<link rel="stylesheet" type="text/css" href="https://2015.igem.org/Template:USTC/css/reset?action=raw&ctype=text/css">
<link rel="stylesheet" type="text/css" href="https://2015.igem.org/Template:USTC/css/materialize.min.css?action=raw&ctype=text/css">
+
<link rel="stylesheet" type="text/css" href="https://2015.igem.org/Template:USTC/css/materialize?action=raw&ctype=text/css">
<link rel="stylesheet" type="text/css" href="https://2015.igem.org/Team:USTC/css/indexstyle.css?action=raw&ctype=text/css">
+
<link rel="stylesheet" type="text/css" href="https://2015.igem.org/Template:USTC/css/indexstyle?action=raw&ctype=text/css">
<link rel="stylesheet" type="text/css" href="https://2015.igem.org/Team:USTC/css/fullpage.css?action=raw&ctype=text/css">
+
<link rel="stylesheet" type="text/css" href="https://2015.igem.org/Template:USTC/css/fullpage?action=raw&ctype=text/css">
<script type="text/javascript" src="https://2015.igem.org/Template:USTC/js/jquery-2.1.1.min.js?action=raw&ctype=text/javascript"></script>
+
<script type="text/javascript" src="https://2015.igem.org/Template:USTC/js/jquery?action=raw&ctype=text/javascript"></script>
<script type="text/javascript" src="https://2015.igem.org/Team:USTC/js/easing.min.js?action=raw&ctype=text/javascript" ></script>
+
<script type="text/javascript" src="https://2015.igem.org/Template:USTC/js/easing?action=raw&ctype=text/javascript"></script>
<script type="text/javascript" src="https://2015.igem.org/Team:USTC/js/fullpage.min.js?action=raw&ctype=text/javascript" ></script>
+
<script type="text/javascript" src="https://2015.igem.org/Template:USTC/js/slimscroll?action=raw&ctype=text/javascript"></script>
<script type="text/javascript" src="https://2015.igem.org/Template:USTC/js/materialize.min.js?action=raw&ctype=text/javascript"></script>
+
<script type="text/javascript" src="https://2015.igem.org/Template:USTC/js/fullpage?action=raw&ctype=text/javascript" ></script>
 +
<script type="text/javascript" src="https://2015.igem.org/Template:USTC/js/materialize?action=raw&ctype=text/javascript"></script>
 
<script type="text/javascript" >
 
<script type="text/javascript" >
 
function checkInview(index, nextIndex, direction) {
 
function checkInview(index, nextIndex, direction) {
    $('.inview').css("-webkit-transition-delay", '0ms').css("-o-transition-delay", '0ms').css("transition-delay", '0ms');
+
  $('.inview').css("-webkit-transition-delay", '0ms').css("-o-transition-delay", '0ms').css("transition-delay", '0ms');
    $('.inview').removeClass('inview');
+
  $('.inview').removeClass('inview');
    var $section = $('#fullpage .fullpagesection').eq(nextIndex - 1);
+
  var $section = $('#fullpage .fullpagesection').eq(nextIndex - 1);
    $section.find('.check-inview').each(function(i) {
+
  $section.find('.check-inview').each(function(i) {  
        var delay = 800 + 30 * (i + 1);
+
    var delay = 800 + 30 * (i + 1);
        $(this).css("-webkit-transition-delay", delay + 'ms').css("-o-transition-delay", delay + 'ms').css("transition-delay", delay + 'ms');
+
    $(this).css("-webkit-transition-delay", delay + 'ms').css("-o-transition-delay", delay + 'ms').css("transition-delay", delay + 'ms');
         $(this).addClass('inview');
+
    $(this).addClass('inview');
 +
  });
 +
  // here is the navigationPage's transition.
 +
  $("#navi .col.s3").css("-webkit-transition-delay", '0ms').css("-o-transition-delay", '0ms').css("transition-delay", '0ms');
 +
  $("#navi .col.s3").removeClass('inview');
 +
  if (nextIndex == 5) {
 +
    $("#navi .col.s3").each(function(i) {
 +
      var delay;
 +
      if (i < 4) {
 +
         delay = 800 + 30 * 2 * i;
 +
      } else {
 +
        delay = 800 + 30 * (2 * i - 7);
 +
      }
 +
      $(this).css("-webkit-transition-delay", delay + 'ms').css("-o-transition-delay", delay + 'ms').css("transition-delay", delay + 'ms');
 +
      $(this).addClass('inview');
 
     });
 
     });
    // here is the navigationPage's transition.
+
  }
    $("#navi .col.s3").css("-webkit-transition-delay", '0ms').css("-o-transition-delay", '0ms').css("transition-delay", '0ms');
+
  // here is the constitutionPage's transition.
    $("#navi .col.s3").removeClass('inview');
+
  $("#constitution .container .row div").css("-webkit-transition-delay", '0ms').css("-o-transition-delay", '0ms').css("transition-delay", '0ms');
    if (nextIndex == 3) {
+
  $("#constitution .container .row div").css("opacity","0");
        $("#navi .col.s3").each(function(i) {
+
  $("#constitution .container .row:eq(1) div").eq(2).css("opacity","1");
            var delay;
+
  $("#constitution .container .row:eq(1) div").each(function(i) {
            if (i < 4) {
+
    switch (i){
                delay = 800 + 30 * 2 * i;
+
      case 0:$(this).css("-webkit-transform","translateX(100%)").css("-moz-transform","translateX(100%)").css("-ms-transform","translateX(100%)").css("-o-transform","translateX(100%)").css("transform","translateX(100%)");break;
            } else {
+
      case 1:$(this).css("-webkit-transform","translateX(50%)").css("-moz-transform","translateX(50%)").css("-ms-transform","translateX(50%)").css("-o-transform","translateX(50%)").css("transform","translateX(50%)");break;
                delay = 800 + 30 * (2 * i - 7);
+
      case 2:$(this).css("-webkit-transform","translateX(0)").css("-moz-transform","translateX(0)").css("-ms-transform","translateX(0)").css("-o-transform","translateX(0)").css("transform","translateX(0)");break;
            }
+
      case 3:$(this).css("-webkit-transform","translateX(-50%)").css("-moz-transform","translateX(-50%)").css("-ms-transform","translateX(-50%)").css("-o-transform","translateX(-50%)").css("transform","translateX(-50%)");break;
            $(this).css("-webkit-transition-delay", delay + 'ms').css("-o-transition-delay", delay + 'ms').css("transition-delay", delay + 'ms');
+
      case 4:$(this).css("-webkit-transform","translateX(-100%)").css("-moz-transform","translateX(-100%)").css("-ms-transform","translateX(-100%)").css("-o-transform","translateX(-100%)").css("transform","translateX(-100%)");break;
            $(this).addClass('inview');
+
        });
+
 
     }
 
     }
}
+
  });
window.onload = function() {
+
  $("#constitution .container .row:eq(2) div").each(function(i) {
     $('.slider').slider({
+
     switch (i){
        full_width: true
+
      case 0:$(this).css("-webkit-transform","translateX(100%)").css("-moz-transform","translateX(100%)").css("-ms-transform","translateX(100%)").css("-o-transform","translateX(100%)").css("transform","translateX(100%)");break;
 +
      case 1:$(this).css("-webkit-transform","translateX(50%)").css("-moz-transform","translateX(50%)").css("-ms-transform","translateX(50%)").css("-o-transform","translateX(50%)").css("transform","translateX(50%)");break;
 +
      case 2:$(this).css("-webkit-transform","translateX(0)").css("-moz-transform","translateX(0)").css("-ms-transform","translateX(0)").css("-o-transform","translateX(0)").css("transform","translateX(0)");break;
 +
      case 3:$(this).css("-webkit-transform","translateX(-50%)").css("-moz-transform","translateX(-50%)").css("-ms-transform","translateX(-50%)").css("-o-transform","translateX(-50%)").css("transform","translateX(-50%)");break;
 +
      case 4:$(this).css("-webkit-transform","translateX(-100%)").css("-moz-transform","translateX(-100%)").css("-ms-transform","translateX(-100%)").css("-o-transform","translateX(-100%)").css("transform","translateX(-100%)");break;
 +
    }
 +
  });
 +
  if(nextIndex==3){
 +
    $("#constitution .container .row:eq(0) div").css("opacity","1");
 +
    $("#constitution .container .row:eq(1) div").each(function(i) {
 +
      $(this).css("-webkit-transition-delay", 500 + 'ms').css("-o-transition-delay", 500 + 'ms').css("transition-delay", 500 + 'ms');
 +
      $(this).css("-webkit-transform","translateX(0)").css("-moz-transform","translateX(0)").css("-ms-transform","translateX(0)").css("-o-transform","translateX(0)").css("transform","translateX(0)").css("opacity","1");
 
     });
 
     });
     $('#fullpage').fullpage({
+
     $("#constitution .container .row:eq(2) div").each(function(i) {
        anchors: ['welcomePage', 'introPage', 'navigationsPage'],
+
      $(this).css("-webkit-transition-delay", 500 + 'ms').css("-o-transition-delay", 500 + 'ms').css("transition-delay", 500 + 'ms');
        menu: '#menu',
+
      $(this).css("-webkit-transform","translateX(0)").css("-moz-transform","translateX(0)").css("-ms-transform","translateX(0)").css("-o-transform","translateX(0)").css("transform","translateX(0)").css("opacity","1");
        sectionSelector: '.fullpagesection',
+
        onLeave: checkInview
+
 
     });
 
     });
     $(window).resize();
+
  }
    checkInview(0, 1, 'down');
+
}
    $(".loading").fadeOut();
+
window.onload = function() {
    $("#fullpage").fadeIn();
+
  $('.slider').slider({
    $("#menu").fadeIn();
+
     full_width: true
 +
  });
 +
  $('#fullpage').fullpage({
 +
    anchors: ['welcomePage', 'introPage', 'constitutionPage', 'tutorialPage', 'navigationsPage'],
 +
    menu: '#menu',
 +
    sectionSelector: '.fullpagesection',
 +
    onLeave: checkInview,
 +
    scrollOverflow: true
 +
  });
 +
  $(window).resize();
 +
  checkInview(0, 1, 'down');
 +
  $(".loading").fadeOut();
 +
  $("#fullpage").fadeIn();
 +
  $("#menu").fadeIn();
 
};
 
};
 
</script>
 
</script>
  
 
<div class="loading">
 
<div class="loading">
    <div class="preloader-wrapper big active">
+
  <div class="preloader-wrapper big active">
        <div class="spinner-layer spinner-blue">
+
    <div class="spinner-layer spinner-blue">
            <div class="circle-clipper left">
+
      <div class="circle-clipper left">
                <div class="circle"></div>
+
        <div class="circle"></div>
            </div>
+
      </div>
            <div class="gap-patch">
+
      <div class="gap-patch">
                <div class="circle"></div>
+
        <div class="circle"></div>
            </div>
+
      </div>
            <div class="circle-clipper right">
+
      <div class="circle-clipper right">
                <div class="circle"></div>
+
        <div class="circle"></div>
            </div>
+
      </div>
        </div>
+
    </div>
        <div class="spinner-layer spinner-red">
+
    <div class="spinner-layer spinner-red">
            <div class="circle-clipper left">
+
      <div class="circle-clipper left">
                <div class="circle"></div>
+
        <div class="circle"></div>
            </div>
+
      </div>
            <div class="gap-patch">
+
      <div class="gap-patch">
                <div class="circle"></div>
+
        <div class="circle"></div>
            </div>
+
      </div>
            <div class="circle-clipper right">
+
      <div class="circle-clipper right">
                <div class="circle"></div>
+
        <div class="circle"></div>
            </div>
+
      </div>
        </div>
+
    </div>
        <div class="spinner-layer spinner-yellow">
+
    <div class="spinner-layer spinner-yellow">
            <div class="circle-clipper left">
+
      <div class="circle-clipper left">
                <div class="circle"></div>
+
        <div class="circle"></div>
            </div>
+
      </div>
            <div class="gap-patch">
+
      <div class="gap-patch">
                <div class="circle"></div>
+
        <div class="circle"></div>
            </div>
+
      </div>
            <div class="circle-clipper right">
+
      <div class="circle-clipper right">
                <div class="circle"></div>
+
        <div class="circle"></div>
            </div>
+
      </div>
        </div>
+
    </div>
        <div class="spinner-layer spinner-green">
+
    <div class="spinner-layer spinner-green">
            <div class="circle-clipper left">
+
      <div class="circle-clipper left">
                <div class="circle"></div>
+
        <div class="circle"></div>
            </div>
+
      </div>
            <div class="gap-patch">
+
      <div class="gap-patch">
                <div class="circle"></div>
+
        <div class="circle"></div>
            </div>
+
      </div>
            <div class="circle-clipper right">
+
      <div class="circle-clipper right">
                <div class="circle"></div>
+
        <div class="circle"></div>
            </div>
+
      </div>
        </div>
+
 
     </div>
 
     </div>
 +
  </div>
 
</div>
 
</div>
 
<div class="right">
 
<div class="right">
    <ul id="menu" hidden>
+
  <ul id="menu" hidden>
        <li data-menuanchor="welcomePage" class="active"><a href="#welcomePage">Welcome</a></li>
+
    <li data-menuanchor="welcomePage" class="active"><a href="#welcomePage">Welcome</a></li>
        <li data-menuanchor="introPage"><a href="#introPage">Brief Intro</a></li>
+
    <li data-menuanchor="introPage"><a href="#introPage">Brief Intro</a></li>
        <li data-menuanchor="navigationsPage"><a href="#navigationsPage">Navigations</a></li>
+
    <li data-menuanchor="constitutionPage"><a href="#constitutionPage">Constitutions</a></li>
    </ul>
+
    <li data-menuanchor="tutorialPage"><a href="#tutorialPage">Tutorials</a></li>
 +
    <li data-menuanchor="navigationsPage" data-hover="true" data-activates="navi-dropdown" data-gutter="-16" data-beloworigin="true" class="dropdown-button"><a href="#navigationsPage">Navigations</a></li>
 +
  </ul>
 
</div>
 
</div>
 +
<ul class="dropdown-content" id="navi-dropdown">
 +
  <li><a href="https://2015.igem.org/Team:USTC/Description" class="waves-effect waves-light">Project</a></li>
 +
  <li><a href="https://2015.igem.org/Team:USTC/Modeling" class="waves-effect waves-light">Modeling</a></li>
 +
  <li><a href="https://2015.igem.org/Team:USTC/Results" class="waves-effect waves-light">Results</a></li>
 +
  <li><a href="https://2015.igem.org/Team:USTC/Achievements" class="waves-effect waves-light">Achievements</a></li>
 +
  <li><a href="https://2015.igem.org/Team:USTC/Measurement" class="waves-effect waves-light">Measurement</a></li>
 +
  <li><a href="https://2015.igem.org/Team:USTC/Software" class="waves-effect waves-light">Software</a></li>
 +
  <li><a href="https://2015.igem.org/Team:USTC/Parts" class="waves-effect waves-light">Parts</a></li>
 +
  <li><a href="https://2015.igem.org/Team:USTC/Tutorials" class="waves-effect waves-light">Tutorials</a></li>
 +
  <li><a href="https://2015.igem.org/Team:USTC/Notebook" class="waves-effect waves-light">Notebook</a></li>
 +
  <li><a href="https://2015.igem.org/Team:USTC/Safety" class="waves-effect waves-light">Safety</a></li>
 +
  <li><a href="https://2015.igem.org/Team:USTC/Practices" class="waves-effect waves-light">Policy&Practices</a></li>
 +
  <li><a href="https://2015.igem.org/Team:USTC/Team" class="waves-effect waves-light">Team</a></li>
 +
  <li><a href="https://2015.igem.org/Team:USTC/Attributions" class="waves-effect waves-light">Attributions</a></li>
 +
</ul>
 +
 
<div id="fullpage" hidden>
 
<div id="fullpage" hidden>
    <div class="fullpagesection black" data-anchor="welcomePage" id="welcome">
+
  <div class="fullpagesection black" data-anchor="welcomePage" id="welcome">
        <div class="slider fullscreen">
+
    <div class="slider fullscreen">
            <ul class="slides">
+
      <ul class="slides">
                <li> <img src="https://static.igem.org/mediawiki/2015/2/22/USTC-index-background-1.jpg"> </li>
+
        <li> <img src="https://static.igem.org/mediawiki/2015/2/22/USTC-index-background-1.jpg"> </li>
                <li> <img src="https://static.igem.org/mediawiki/2015/6/6e/USTC-index-background-2.jpg"> </li>
+
        <li> <img src="https://static.igem.org/mediawiki/2015/6/6e/USTC-index-background-2.jpg"> </li>
                <li> <img src="https://static.igem.org/mediawiki/2015/a/a5/USTC-index-background-3.jpg"> </li>
+
        <li> <img src="https://static.igem.org/mediawiki/2015/a/a5/USTC-index-background-3.jpg"> </li>
                <li> <img src="https://static.igem.org/mediawiki/2015/6/67/USTC-index-background-4.jpg"> </li>
+
        <li> <img src="https://static.igem.org/mediawiki/2015/6/67/USTC-index-background-4.jpg"> </li>
            </ul>
+
      </ul>
 +
    </div>
 +
    <div class="container">
 +
      <div class="check-inview fadeup">
 +
        <h1 class="white-text"><b>Nanomachine Detecting Microbiotics</b></h1> </div>
 +
      <div class="check-inview fadeup">
 +
        <h2>In the beginning, we extracted antibiotics, assuming it to be Perseus and it was so. Time going, we found antibiotics turned out to be Ares.</h2>
 +
      </div>
 +
      <div class="check-inview fadeup center" style="text-align:center;">
 +
        <a href="#introPage">
 +
          <h2 class="white-text">Continue</h2><img src="https://static.igem.org/mediawiki/2015/1/1d/USTC-index-Down.png" style="width: 60px;" /></a>
 +
      </div>
 +
    </div>
 +
  </div>
 +
  <div class="fullpagesection blue darken-2" data-anchor="introPage" data-delay="500" id="intro">
 +
    <div class="container">
 +
      <div class="row check-inview fadeup" style="margin-bottom: 0;">
 +
        <div class="col s12">
 +
          <h5 class="white-text">In natural environment, many antibiotic substances are emitted into river in their active state, which caused tremendously challenges on human health and environment. Thus, this year we USTC develop NDM, a hardware trying to detect those molecules and hold back this situation.  Advantages of NDM including:  </h5>
 
         </div>
 
         </div>
         <div class="container">
+
      </div>
            <div class="check-inview fadeup">
+
      <div class="row">
                <h1 class="white-text"><b>Nanomachine Detecting Microbiotics</b></h1> </div>
+
         <div class="col s4 check-inview fadeup">
             <div class="check-inview fadeup">
+
          <figure><img src="https://static.igem.org/mediawiki/2015/b/b1/USTC-index-fast.png"></figure>
                <h2>History once tells antibiotics were invincible knights, until a fierce dragon befalled.</h2>
+
          <div>
 +
              <h5>Rapid</h5>
 +
              <p>Detection won’t be based on fluorescence signal,  however a brand new way! Then, how much time does a detection assay cost? 1 day? 100 min? Answer is 100 SECONDS!</p>
 +
          </div>
 +
        </div>
 +
        <div class="col s4 check-inview fadeup">
 +
          <figure><img src="https://static.igem.org/mediawiki/2015/1/18/USTC-index-toolbox.png"></figure>
 +
          <div>
 +
              <h5>Convenient</h5>
 +
              <p>NDM is portable for people to operate it, and we developed a friendly GUI for better experience. Moreover, we will package bacteria into powder for iGEMers!</p>
 +
          </div>
 +
        </div>
 +
        <div class="col s4 check-inview fadeup">
 +
          <figure><img src="https://static.igem.org/mediawiki/2015/c/cd/USTC-index-gear.png"></figure>
 +
          <div>
 +
              <h5>Compatible</h5>
 +
              <p>NDM is compatible for everyone to engineer. We hope genetic modification on device level would expand.  After all, ‘M’ in NDM means much more than microbiotics!</p>
 +
          </div>
 +
        </div>
 +
      </div>
 +
      <div class="check-inview fadeup center" style="text-align:center;">
 +
        <a href="#constitutionPage">
 +
          <img src="https://static.igem.org/mediawiki/2015/1/1d/USTC-index-Down.png" style="width: 60px;" /></a>
 +
      </div>
 +
    </div>
 +
  </div>
 +
  <div class="fullpagesection light-blue darken-3" data-anchor="constitutionPage" id="constitution">
 +
    <div class="container">
 +
      <div class="row" style="margin-bottom: 0;">
 +
        <div class="col s12">
 +
          <h4 class="white-text">Constitutions of NDM</h4>
 +
        </div>
 +
      </div>
 +
      <div class="row">
 +
        <div class="col s2"><img src="https://static.igem.org/mediawiki/2015/c/c6/USTC-index-mod-bact.png"></div>
 +
        <div class="col s2"><img src="https://static.igem.org/mediawiki/2015/1/1d/USTC-index-film.png"></div>
 +
        <div class="col s2"><br/><img src="https://static.igem.org/mediawiki/2015/c/c4/USTC-index-hako.png" style="z-index: 5;"></div>
 +
        <div class="col s2"><img src="https://static.igem.org/mediawiki/2015/9/9c/USTC-index-optical-path.png"></div>
 +
        <div class="col s2"><img src="https://static.igem.org/mediawiki/2015/d/da/USTC-index-gui.png"></div>
 +
      </div>
 +
      <div class="row">
 +
        <div class="col s2"><h5>CACCI</h5><p>Programmed bacteria to detect chemicals whatever you want</p></div>
 +
        <div class="col s2"><h5>Film</h5><p>Change the movement of bacterial to deformation of film.</p></div>
 +
        <div class="col s2"><h5>SPRING</h5><p>The main body NDM, platform provided for experiment.</p></div>
 +
        <div class="col s2"><h5>Optical path</h5><p>Detect the deformation by Michelson Interference.</p></div>
 +
        <div class="col s2"><h5>GUI</h5><p>Provide a better experience for users.</p></div>
 +
      </div>
 +
      <div style="text-align:center;">
 +
        <a href="#tutorialPage">
 +
          <img src="https://static.igem.org/mediawiki/2015/1/1d/USTC-index-Down.png" style="width: 60px;" /></a>
 +
      </div>
 +
    </div>
 +
  </div>
 +
  <div class="fullpagesection blue darken-3" data-anchor="tutorialPage" id="tutorial">
 +
    <div class="container">
 +
      <div class="row check-inview fadeup">
 +
        <div class="col s12">
 +
          <h4 class="white-text">Tutorials: Study NDM Right Now!</h4>
 +
        </div>
 +
      </div>
 +
      <div class="row check-inview fadeup">
 +
        <div class="col s4 check-inview fadeup">
 +
          <figure>
 +
            <a href="https://2015.igem.org/Team:USTC/Tutorials#Instructional-Video"><img src="https://static.igem.org/mediawiki/2015/3/31/USTC-index-video.png"></a>
 +
          </figure>
 +
          <div>
 +
              <h5>Video</h5>
 +
              <p>Want to know how to operate NDM? Watch it at here!</p>
 +
          </div>
 +
        </div>
 +
        <div class="col s4 check-inview fadeup">
 +
          <figure>
 +
             <a href="https://2015.igem.org/Team:USTC/Tutorials#Instruction-manual"><img src="https://static.igem.org/mediawiki/2015/7/79/USTC-index-ins.png"></a>
 +
          </figure>
 +
          <div>
 +
              <h5>Manual</h5>
 +
              <p>This manual is a convenient guidebook for you when operating NDM in field! Download it at here!</p>
 +
          </div>
 +
        </div>
 +
        <div class="col s4 check-inview fadeup">
 +
          <figure>
 +
            <a href="https://2015.igem.org/Team:USTC/Tutorials#Make-Your-Own"><img src="https://static.igem.org/mediawiki/2015/5/54/USTC-index-DIY.png"></a>
 +
          </figure>
 +
          <div class="card hoverable">
 +
              <h5>DIY</h5>
 +
              <p>Want to make your own NDM? Come and join us at here!</p>
 +
          </div>
 +
        </div>
 +
      </div>
 +
      <div class="check-inview fadeup center" style="text-align:center;">
 +
        <a href="#navigationsPage">
 +
          <img src="https://static.igem.org/mediawiki/2015/1/1d/USTC-index-Down.png" style="width: 60px;" /></a>
 +
      </div>
 +
    </div>
 +
  </div>
 +
  <div class="fullpagesection" data-anchor="navigationsPage" data-delay="500" id="navi">
 +
    <div class="container">
 +
      <div class="row">
 +
        <div class="col s3 navi-inview fadeup" id="nav1">
 +
          <div class="card hoverable">
 +
            <div class="card-image">
 +
              <a href="https://2015.igem.org/Team:USTC/Description">
 +
                <img src="https://static.igem.org/mediawiki/2015/f/f1/USTC-index-Project.png" onclick>
 +
                <span class="white-text">Project</span></a>
 
             </div>
 
             </div>
            <div class="check-inview fadeup center">
+
          </div>
                <a href="#introPage">
+
        </div>
                    <h2 class="white-text">Continue</h2><img src="https://static.igem.org/mediawiki/2015/1/1d/USTC-index-Down.png" style="width: 60px;" /></a>
+
        <div class="col s3 navi-inview fadeup" id="nav2">
 +
          <div class="card hoverable">
 +
            <div class="card-image">
 +
              <a href="https://2015.igem.org/Team:USTC/Modeling">
 +
                <img src="https://static.igem.org/mediawiki/2015/b/b4/USTC-index-Modeling.png">
 +
                <span class="white-text">Modeling</span></a>
 
             </div>
 
             </div>
 +
          </div>
 
         </div>
 
         </div>
    </div>
+
        <div class="col s3 navi-inview fadeup" id="nav3">
    <div class="fullpagesection indigo" data-anchor="introPage" data-delay="500" id="intro">
+
          <div class="card hoverable">
        <div class="container">
+
             <div class="card-image">
             <div class="row check-inview fadeup">
+
              <a href="https://2015.igem.org/Team:USTC/Results">
                 <div class="col s12">
+
                 <img src="https://static.igem.org/mediawiki/2015/4/42/USTC-index-Achievements.png">
                    <h5 class="white-text">The dragon named RESISTANCE is the answer for the knights' enemy. The formerly mighty knights cannot defeat their enemy, their ghosts now potentially bring crisis to the world. Thus, this year, the team USTC invented new heroes trying to save the antibiotics contamination caused by the war.  </h5>
+
                <span class="white-text">Results</span></a>
                </div>
+
 
             </div>
 
             </div>
            <div class="row">
+
          </div>
                <div class="col s4 check-inview fadeup">
+
        </div>
                    <div class="card hoverable">
+
        <div class="col s3 navi-inview fadeup" id="nav4">
                        <div class="card-content">
+
          <div class="card hoverable">
                            <h4>CACCI</h4>
+
            <div class="card-image">
                            <p>To solve the resistance problem, we recruit CACCI to aid our knights. CACCI's engineered bacteria that are attached to a membrane have the chemotaxis ability, which means CACCI's fantastic membrane have the ability to perform a deformation corresponding to the contribution of the antibiotics. Then it's time for CACCI's optics magic. Using the interference, the knights' amount can be certained.Then we are able to redeploy our knights, making them efficiently kill the enemy rather than strengthen them. </p>
+
              <a href="https://2015.igem.org/Team:USTC/Tutorials">
                        </div>
+
                 <img src="https://static.igem.org/mediawiki/2015/d/d5/USTC-index-Tutorials.png">
                    </div>
+
                <span class="white-text">Tutorials</span></a>
                 </div>
+
                <div class="col s4 check-inview fadeup">
+
                    <div class="card hoverable">
+
                        <div class="card-content">
+
                          <h4>SPRING</h4>
+
                            <p>Spring, which is named after its inventer, is  CACCI's sidekick. He helps CACCI in three aspects, which are the optical aspect, the hardware aspect and the software aspect. Using Michelson Interferometer,the optical part, Spring transforms the shape change of CACCI's membrane into the change of interference fringe. Spring's hardware, based on Raspberry–Pi, allows spring to take photos or videos of the fringe. At last, the software can analyse them and transmit the results to PC. CACCI depends on Spring.</p>
+
                        </div>
+
                    </div>
+
                </div>
+
                <div class="col s4 check-inview fadeup">
+
                    <div class="card hoverable">
+
                        <div class="card-image">
+
                            <img>
+
                        </div>
+
                        <div class="card-content">
+
                          <h4>ROSE</h4>
+
                            <p>Meanwhile, we recruit ROSE to ensure our success. Two kinds of engineered bacteria make ROSE a wonderful director. Her mind is sufficiently logical, just like those three circuits we bulit for her,which allow her to know how many antibiotics are out of there,even when there are just trace of them. With the data provided by ROSE, the same mission as CACCI's can be done. Although ROSE may be a little slower than CACCI, but her traditional way becomes our insurance.</p>
+
                        </div>
+
                    </div>
+
                </div>
+
 
             </div>
 
             </div>
 +
          </div>
 
         </div>
 
         </div>
    </div>
+
      </div>
    <div class="fullpagesection" data-anchor="navigationsPage" data-delay="500" id="navi">
+
      <div class="row">
         <div class="container">
+
         <div class="col s3 navi-inview fadeup" id="nav5">
            <div class="row">
+
          <div class="card hoverable">
                <div class="col s3 navi-inview fadeup" id="nav1">
+
            <div class="card-image">
                    <div class="card hoverable">
+
              <a href="https://2015.igem.org/Team:USTC/Notebook">
                        <div class="card-image">
+
                 <img src="https://static.igem.org/mediawiki/2015/b/b0/USTC-index-Notebook.png">
                            <a href="https://2015.igem.org/Team:USTC/Project">
+
                 <span class="white-text">Notebook</span></a>
                                <img src="https://static.igem.org/mediawiki/2015/f/f1/USTC-index-Project.png" onclick>
+
                                <span class="white-text">Project</span></a>
+
                        </div>
+
                    </div>
+
                 </div>
+
                <div class="col s3 navi-inview fadeup" id="nav2">
+
                    <div class="card hoverable">
+
                        <div class="card-image">
+
                            <a href="https://2015.igem.org/Team:USTC/Modeling">
+
                                <img src="https://static.igem.org/mediawiki/2015/b/b4/USTC-index-Modeling.png">
+
                                <span class="white-text">Modeling</span></a>
+
                        </div>
+
                    </div>
+
                 </div>
+
                <div class="col s3 navi-inview fadeup" id="nav3">
+
                    <div class="card hoverable">
+
                        <div class="card-image">
+
                            <a href="https://2015.igem.org/Team:USTC/Achievements">
+
                                <img src="https://static.igem.org/mediawiki/2015/4/42/USTC-index-Achievements.png">
+
                                <span class="white-text">Achievements</span></a>
+
                        </div>
+
                    </div>
+
                </div>
+
                <div class="col s3 navi-inview fadeup" id="nav4">
+
                    <div class="card hoverable">
+
                        <div class="card-image">
+
                            <a href="https://2015.igem.org/Team:USTC/Tutorials">
+
                                <img src="https://static.igem.org/mediawiki/2015/d/d5/USTC-index-Tutorials.png">
+
                                <span class="white-text">Tutorials</span></a>
+
                        </div>
+
                    </div>
+
                </div>
+
 
             </div>
 
             </div>
            <div class="row">
+
          </div>
                <div class="col s3 navi-inview fadeup" id="nav5">
+
        </div>
                    <div class="card hoverable">
+
        <div class="col s3 navi-inview fadeup" id="nav6">
                        <div class="card-image">
+
          <div class="card hoverable">
                            <a href="https://2015.igem.org/Team:USTC/Notebook">
+
            <div class="card-image">
                                <img src="https://static.igem.org/mediawiki/2015/b/b0/USTC-index-Notebook.png">
+
              <a href="https://2015.igem.org/Team:USTC/Practices">
                                <span class="white-text">Notebook</span></a>
+
                <img src="https://static.igem.org/mediawiki/2015/3/3d/USTC-index-HumanPractice.png">
                        </div>
+
                <span class="white-text">Human<br/>Practice</span></a>
                    </div>
+
                </div>
+
                <div class="col s3 navi-inview fadeup" id="nav6">
+
                    <div class="card hoverable">
+
                        <div class="card-image">
+
                            <a href="https://2015.igem.org/Team:USTC/HumanPractice">
+
                                <img src="https://static.igem.org/mediawiki/2015/3/3d/USTC-index-HumanPractice.png">
+
                                <span class="white-text">Human<br/>Practice</span></a>
+
                        </div>
+
                    </div>
+
                </div>
+
                <div class="col s3 navi-inview fadeup" id="nav7">
+
                    <div class="card hoverable">
+
                        <div class="card-image">
+
                            <a href="https://2015.igem.org/Team:USTC/Collaboration">
+
                                <img src="https://static.igem.org/mediawiki/2015/8/8b/USTC-index-Collaboration.png">
+
                                <span class="white-text">Collaboration</span></a>
+
                        </div>
+
                    </div>
+
                </div>
+
                <div class="col s3 navi-inview fadeup" id="nav8">
+
                    <div class="card hoverable">
+
                        <div class="card-image">
+
                            <a href="https://2015.igem.org/Team:USTC/Team">
+
                                <img src="https://static.igem.org/mediawiki/2015/a/a8/USTC-index-Team.png">
+
                                <span class="white-text">Team</span></a>
+
                        </div>
+
                    </div>
+
                </div>
+
 
             </div>
 
             </div>
 +
          </div>
 
         </div>
 
         </div>
         <div class="Footer grey lighten-1">
+
         <div class="col s3 navi-inview fadeup" id="nav7">
            <div class="container">
+
          <div class="card hoverable">
                <div class="row">
+
            <div class="card-image">
                    <div class="col s8">
+
              <a href="https://2015.igem.org/Team:USTC/Collaborations">
                        <h5 style="margin-bottom: 2px;">Sponsored by <br/><img src="https://static.igem.org/mediawiki/2015/4/4c/Deutsche-bank-logo.png"></h5>
+
                <img src="https://static.igem.org/mediawiki/2015/8/8b/USTC-index-Collaboration.png">
                    </div>
+
                <span class="white-text">Collaborations</span></a>
                    <div class="col s4">
+
                        <h5 style="margin-bottom: 0;">Links</h5>
+
                        <p style="margin:0;">
+
                            <a href="mailto:ustc.igem.2015@gmail.com"><img src="https://static.igem.org/mediawiki/2015/9/9d/USTC-Mail.png"></a>
+
                            <a href="http://weibo.com/3929719655/fans?topnav=1&wvr=6&mod=message&need_filter=1"><img src="https://static.igem.org/mediawiki/2015/6/60/USTC-Weibo.png"></a>
+
                            <a href="https://github.com/Cintau/2015USTCiGEM"><img src="https://static.igem.org/mediawiki/2015/3/36/USTC-GitHub.png"></a>
+
                            <a href="https://www.facebook.com/2014ustcchinaigem?ref=bookmarks"><img src="https://static.igem.org/mediawiki/2015/6/6e/USTC-Facebook.png"></a>
+
                        </p>
+
                    </div>
+
                </div>
+
 
             </div>
 
             </div>
 +
          </div>
 +
        </div>
 +
        <div class="col s3 navi-inview fadeup" id="nav8">
 +
          <div class="card hoverable">
 +
            <div class="card-image">
 +
              <a href="https://2015.igem.org/Team:USTC/Team">
 +
                <img src="https://static.igem.org/mediawiki/2015/a/a8/USTC-index-Team.png">
 +
                <span class="white-text">Team</span></a>
 +
            </div>
 +
          </div>
 +
        </div>
 +
      </div>
 +
    </div>
 +
    <div class="Footer grey lighten-1">
 +
      <div class="container">
 +
        <div class="row">
 +
          <div class="col s4 offset-s2">
 +
            <h5 style="margin-bottom: 2px;">Sponsored by <br/><img src="https://static.igem.org/mediawiki/2015/4/4c/Deutsche-bank-logo.png"></h5>
 +
          </div>
 +
          <div class="col s4">
 +
            <h5 style="margin-bottom: 0;">Links</h5>
 +
            <p style="margin:0;">
 +
              <a href="mailto:ustc.igem.2015@gmail.com"><img src="https://static.igem.org/mediawiki/2015/9/9d/USTC-Mail.png"></a>
 +
              <a href="http://weibo.com/3929719655/fans?topnav=1&wvr=6&mod=message&need_filter=1"><img src="https://static.igem.org/mediawiki/2015/6/60/USTC-Weibo.png"></a>
 +
              <a href="https://github.com/Cintau/2015USTCiGEM"><img src="https://static.igem.org/mediawiki/2015/3/36/USTC-GitHub.png"></a>
 +
              <a href="https://www.facebook.com/2014ustcchinaigem?ref=bookmarks"><img src="https://static.igem.org/mediawiki/2015/6/6e/USTC-Facebook.png"></a>
 +
            </p>
 +
          </div>
 
         </div>
 
         </div>
 +
      </div>
 
     </div>
 
     </div>
 +
  </div>
 
</div>
 
</div>
  
 
</html>
 
</html>

Latest revision as of 02:58, 19 September 2015