Difference between revisions of "Team:USTC"
(31 intermediate revisions by 3 users not shown) | |||
Line 1: | Line 1: | ||
<html> | <html> | ||
− | <link rel="stylesheet" type="text/css" href="https://2015.igem.org/ | + | <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/ | + | <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/ | + | <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/ | + | <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/ | + | <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/ | + | <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( | + | $("#constitution .container .row:eq(1) div").eq(2).css("opacity","1"); |
− | $("#constitution .container .row:eq( | + | $("#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( | + | $("#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( | + | $("#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="# | + | <li data-menuanchor="constitutionPage"><a href="#constitutionPage">Constitutions</a></li> |
− | <li data-menuanchor="tutorialPage"><a href="#tutorialPage"> | + | <li data-menuanchor="tutorialPage"><a href="#tutorialPage">Tutorials</a></li> |
− | <li data-menuanchor="navigationsPage" data-hover="true" data-activates="navi-dropdown" data-gutter=" | + | <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= | + | <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/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"> | + | <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"> | + | <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/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> | + | <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 | + | <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"> | + | <div class="row check-inview fadeup" style="margin-bottom: 0;"> |
<div class="col s12"> | <div class="col s12"> | ||
− | <h5 class="white-text"> | + | <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> | </div> | ||
<div class="row"> | <div class="row"> | ||
<div class="col s4 check-inview fadeup"> | <div class="col s4 check-inview fadeup"> | ||
− | < | + | <figure><img src="https://static.igem.org/mediawiki/2015/b/b1/USTC-index-fast.png"></figure> |
− | + | <div> | |
− | < | + | <h5>Rapid</h5> |
− | <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 class="col s4 check-inview fadeup"> | <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> | + | <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 class="col s4 check-inview fadeup"> | <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> | |
− | + | ||
− | < | + | |
− | <p> | + | |
− | + | ||
</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 | + | <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">< | + | <div class="col s2"><h5>CACCI</h5><p>Programmed bacteria to detect chemicals whatever you want</p></div> |
− | <div class="col s2">< | + | <div class="col s2"><h5>Film</h5><p>Change the movement of bacterial to deformation of film.</p></div> |
− | <div class="col s2">< | + | <div class="col s2"><h5>SPRING</h5><p>The main body NDM, platform provided for experiment.</p></div> |
− | <div class="col s2">< | + | <div class="col s2"><h5>Optical path</h5><p>Detect the deformation by Michelson Interference.</p></div> |
− | <div class="col s2">< | + | <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 | + | <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"> | ||
− | < | + | <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"> | ||
− | < | + | <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> | </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#Instruction-manual"><img src="https://static.igem.org/mediawiki/2015/7/79/USTC-index-ins.png"></a> | |
− | < | + | </figure> |
− | <p> | + | <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"> | ||
− | + | <h5>DIY</h5> | |
− | < | + | <p>Want to make your own NDM? Come and join us at here!</p> |
− | <p> | + | |
− | + | ||
</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/ | + | <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"> | + | <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"> | + | <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 | + | <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
Nanomachine Detecting Microbiotics
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.
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:
Rapid
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!
Convenient
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!
Compatible
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!
Constitutions of NDM
CACCI
Programmed bacteria to detect chemicals whatever you want
Film
Change the movement of bacterial to deformation of film.
SPRING
The main body NDM, platform provided for experiment.
Optical path
Detect the deformation by Michelson Interference.
GUI
Provide a better experience for users.