Difference between revisions of "Team:USTC"

 
(25 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?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?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?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?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?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?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/slimscroll?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/Team:USTC/js/fullpage?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" src="https://2015.igem.org/Template:USTC/js/materialize?action=raw&ctype=text/javascript"></script>
 
<script type="text/javascript" >
 
<script type="text/javascript" >
Line 14: Line 14:
 
   $('.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');
Line 37: Line 37:
 
   $("#constitution .container .row div").css("-webkit-transition-delay", '0ms').css("-o-transition-delay", '0ms').css("transition-delay", '0ms');
 
   $("#constitution .container .row div").css("-webkit-transition-delay", '0ms').css("-o-transition-delay", '0ms').css("transition-delay", '0ms');
 
   $("#constitution .container .row div").css("opacity","0");
 
   $("#constitution .container .row div").css("opacity","0");
   $("#constitution .container .row:eq(0) div").eq(2).css("opacity","1");
+
   $("#constitution .container .row:eq(1) div").eq(2).css("opacity","1");
   $("#constitution .container .row:eq(0) div").each(function(i) {
+
   $("#constitution .container .row:eq(1) div").each(function(i) {
 
     switch (i){
 
     switch (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;
 
       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;
Line 47: Line 47:
 
     }
 
     }
 
   });
 
   });
   $("#constitution .container .row:eq(1) div").each(function(i) {
+
   $("#constitution .container .row:eq(2) div").each(function(i) {
 
     switch (i){
 
     switch (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;
 
       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;
Line 57: Line 57:
 
   });
 
   });
 
   if(nextIndex==3){
 
   if(nextIndex==3){
     $("#constitution .container .row:eq(0) div").each(function(i) {
+
     $("#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-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");
 
       $(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");
 
     });
 
     });
     $("#constitution .container .row:eq(1) div").each(function(i) {
+
     $("#constitution .container .row:eq(2) 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-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");
 
       $(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");
Line 138: Line 139:
 
     <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="constitutionPage"><a href="#constitutionPage">Constitution</a></li>
+
     <li data-menuanchor="constitutionPage"><a href="#constitutionPage">Constitutions</a></li>
     <li data-menuanchor="tutorialPage"><a href="#tutorialPage">Tutorial</a></li>
+
     <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>
 
     <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>
 
   </ul>
 
</div>
 
</div>
 
<ul class="dropdown-content" id="navi-dropdown">
 
<ul class="dropdown-content" id="navi-dropdown">
  <li><a href="https://2015.igem.org/Team:USTC" class="waves-effect waves-light">Home</a></li>
 
 
   <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/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/Modeling" class="waves-effect waves-light">Modeling</a></li>
   <li><a href="https://2015.igem.org/Team:USTC/Achievements" class="waves-effect waves-light">Achivements</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/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/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/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/Practices" class="waves-effect waves-light">Policy&Practices</a></li>
  <li><a href="https://2015.igem.org/Team:USTC/Collaborations" class="waves-effect waves-light">Collaborations</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/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>
 
   <li><a href="https://2015.igem.org/Team:USTC/Attributions" class="waves-effect waves-light">Attributions</a></li>
 
</ul>
 
</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">
Line 170: Line 174:
 
         <h1 class="white-text"><b>Nanomachine Detecting Microbiotics</b></h1> </div>
 
         <h1 class="white-text"><b>Nanomachine Detecting Microbiotics</b></h1> </div>
 
       <div class="check-inview fadeup">
 
       <div class="check-inview fadeup">
         <h2>History once tells antibiotics were invincible knights, until a fierce dragon befalled.</h2>
+
         <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>
       <div class="check-inview fadeup center">
+
       <div class="check-inview fadeup center" style="text-align:center;">
 
         <a href="#introPage">
 
         <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>
 
           <h2 class="white-text">Continue</h2><img src="https://static.igem.org/mediawiki/2015/1/1d/USTC-index-Down.png" style="width: 60px;" /></a>
Line 178: Line 182:
 
     </div>
 
     </div>
 
   </div>
 
   </div>
   <div class="fullpagesection indigo" data-anchor="introPage" data-delay="500" id="intro">
+
   <div class="fullpagesection blue darken-2" data-anchor="introPage" data-delay="500" id="intro">
 
     <div class="container">
 
     <div class="container">
 
       <div class="row check-inview fadeup" style="margin-bottom: 0;">
 
       <div class="row check-inview fadeup" style="margin-bottom: 0;">
Line 187: Line 191:
 
       <div class="row">
 
       <div class="row">
 
         <div class="col s4 check-inview fadeup">
 
         <div class="col s4 check-inview fadeup">
           <div class="card hoverable">
+
           <figure><img src="https://static.igem.org/mediawiki/2015/b/b1/USTC-index-fast.png"></figure>
            <div class="card-content">
+
          <div>
               <h4>Rapid</h4>
+
               <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>
 
               <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>
 
         </div>
 
         </div>
 
         <div class="col s4 check-inview fadeup">
 
         <div class="col s4 check-inview fadeup">
           <div class="card hoverable">
+
           <figure><img src="https://static.igem.org/mediawiki/2015/1/18/USTC-index-toolbox.png"></figure>
            <div class="card-content">
+
          <div>
              <h4>Convenient</h4>
+
              <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 people who requires!</p>
+
               <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>
 
         </div>
 
         </div>
 
         <div class="col s4 check-inview fadeup">
 
         <div class="col s4 check-inview fadeup">
           <div class="card hoverable">
+
           <figure><img src="https://static.igem.org/mediawiki/2015/c/cd/USTC-index-gear.png"></figure>
            <div class="card-image">
+
          <div>
              <img>
+
               <h5>Compatible</h5>
            </div>
+
               <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 class="card-content">
+
               <h4>Editable</h4>
+
               <p>The principle of genetic bacteria construction provided a brand new way for everyone to modify bacteria in device level. ‘M’ in NDM means much more than microbiotics!</p>
+
            </div>
+
 
           </div>
 
           </div>
 
         </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>
 
   </div>
 
   </div>
   <div class="fullpagesection indigo darken-2" data-anchor="constitutionPage" id="constitution">
+
   <div class="fullpagesection light-blue darken-3" data-anchor="constitutionPage" id="constitution">
 
     <div class="container">
 
     <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="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/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"><img src="https://static.igem.org/mediawiki/2015/1/1d/USTC-index-film.png"></div>
         <div class="col s2"><img src="https://static.igem.org/mediawiki/2015/c/c4/USTC-index-hako.png" style="z-index: 5;"></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/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 class="col s2"><img src="https://static.igem.org/mediawiki/2015/d/da/USTC-index-gui.png"></div>
 
       </div>
 
       </div>
 
       <div class="row">
 
       <div class="row">
         <div class="col s2"><span>Modified bacteria</span></div>
+
         <div class="col s2"><h5>CACCI</h5><p>Programmed bacteria to detect chemicals whatever you want</p></div>
         <div class="col s2"><span>Film</span></div>
+
         <div class="col s2"><h5>Film</h5><p>Change the movement of bacterial to deformation of film.</p></div>
         <div class="col s2"><span>SPRING</span></div>
+
         <div class="col s2"><h5>SPRING</h5><p>The main body NDM, platform provided for experiment.</p></div>
         <div class="col s2"><span>Optical path</span></div>
+
         <div class="col s2"><h5>Optical path</h5><p>Detect the deformation by Michelson Interference.</p></div>
         <div class="col s2"><span>GUI</span></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>
 
   </div>
 
   </div>
   <div class="fullpagesection indigo darken-4" data-anchor="tutorialPage" id="tutorial">
+
   <div class="fullpagesection blue darken-3" data-anchor="tutorialPage" id="tutorial">
 
     <div class="container">
 
     <div class="container">
 
       <div class="row check-inview fadeup">
 
       <div class="row check-inview fadeup">
 
         <div class="col s12">
 
         <div class="col s12">
           <h5 class="white-text">Tutorials</h5>
+
           <h4 class="white-text">Tutorials: Study NDM Right Now!</h4>
 
         </div>
 
         </div>
 
       </div>
 
       </div>
       <div class="row">
+
       <div class="row check-inview fadeup">
 
         <div class="col s4 check-inview fadeup">
 
         <div class="col s4 check-inview fadeup">
           <div class="card hoverable">
+
           <figure>
            <div class="card-content">
+
            <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>
              <h4>Instructional Video</h4>
+
          </figure>
               <p>Here is Instructional Video</p>
+
          <div>
            </div>
+
               <h5>Video</h5>
 +
              <p>Want to know how to operate NDM? Watch it at here!</p>
 
           </div>
 
           </div>
 
         </div>
 
         </div>
 
         <div class="col s4 check-inview fadeup">
 
         <div class="col s4 check-inview fadeup">
           <div class="card hoverable">
+
           <figure>
            <div class="card-content">
+
            <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>
               <h4>Instruction manual</h4>
+
          </figure>
               <p>Here is Instruction manual</p>
+
          <div>
            </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>
 
         </div>
 
         <div class="col s4 check-inview fadeup">
 
         <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">
 
           <div class="card hoverable">
            <div class="card-content">
+
               <h5>DIY</h5>
               <h4>Make Your Own</h4>
+
               <p>Want to make your own NDM? Come and join us at here!</p>
               <p>Let's Make Your Own</p>
+
            </div>
+
 
           </div>
 
           </div>
 
         </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>
Line 293: Line 311:
 
           <div class="card hoverable">
 
           <div class="card hoverable">
 
             <div class="card-image">
 
             <div class="card-image">
               <a href="https://2015.igem.org/Team:USTC/Achievements">
+
               <a href="https://2015.igem.org/Team:USTC/Results">
 
                 <img src="https://static.igem.org/mediawiki/2015/4/42/USTC-index-Achievements.png">
 
                 <img src="https://static.igem.org/mediawiki/2015/4/42/USTC-index-Achievements.png">
                 <span class="white-text">Achievements</span></a>
+
                 <span class="white-text">Results</span></a>
 
             </div>
 
             </div>
 
           </div>
 
           </div>
Line 333: Line 351:
 
               <a href="https://2015.igem.org/Team:USTC/Collaborations">
 
               <a href="https://2015.igem.org/Team:USTC/Collaborations">
 
                 <img src="https://static.igem.org/mediawiki/2015/8/8b/USTC-index-Collaboration.png">
 
                 <img src="https://static.igem.org/mediawiki/2015/8/8b/USTC-index-Collaboration.png">
                 <span class="white-text">Collaboration</span></a>
+
                 <span class="white-text">Collaborations</span></a>
 
             </div>
 
             </div>
 
           </div>
 
           </div>
Line 351: Line 369:
 
       <div class="container">
 
       <div class="container">
 
         <div class="row">
 
         <div class="row">
           <div class="col s8">
+
           <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>
 
             <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>

Latest revision as of 02:58, 19 September 2015