Difference between revisions of "Team:Worldshaper-XSHS/Applied Design"
| (17 intermediate revisions by 3 users not shown) | |||
| Line 1: | Line 1: | ||
<html> | <html> | ||
| − | <style type="text/css"> | + | <style type="text/css"> |
| + | |||
| + | html body{ | ||
| + | font-family:purista !important; | ||
| + | } | ||
| + | section>p{ | ||
| + | font-family: arial!important; | ||
| + | font-weight:600!important; | ||
| + | width: 1100px!important; | ||
| + | } | ||
.dropdown .dropdown-menu > ul { | .dropdown .dropdown-menu > ul { | ||
| − | background-color: | + | background-color: rgba(132,176,110,0.6)!important |
} | } | ||
| − | + | .myheader{ | |
| − | + | box-shadow:none !important; | |
| − | + | background:rgba(132,176,110,0.6) !important; | |
| − | + | border:none !important; | |
| − | + | } | |
| − | + | .positiontitle{ | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | .positiontitle { | + | |
position: relative; | position: relative; | ||
| − | top: 500px; | + | top:500px; |
font-size: 68px; | font-size: 68px; | ||
| − | color: #fff; | + | color:#fff; |
z-index: 100; | z-index: 100; | ||
letter-spacing: 0.0588235em; | letter-spacing: 0.0588235em; | ||
} | } | ||
| − | + | .colul .colactive a{ | |
| − | .colul .colactive a { | + | font-size:22px; |
| − | font-size: 22px; | + | |
color: #00746b !important; | color: #00746b !important; | ||
} | } | ||
| − | + | .v1{ | |
| − | .v1 { | + | font-family: purista !important; |
| − | font-family: | + | |
font-weight: 600 !important; | font-weight: 600 !important; | ||
font-style: normal !important; | font-style: normal !important; | ||
| Line 43: | Line 40: | ||
color: #4a4a4a !important; | color: #4a4a4a !important; | ||
} | } | ||
| − | + | #top_menu_14{ | |
| − | #top_menu_14 { | + | height:auto !important; |
| − | height: auto !important; | + | |
} | } | ||
| + | .colul a:hover{ | ||
| − | + | color: #00746b !important; | |
| − | + | ||
| − | color: #00746b !important; | + | |
} | } | ||
| − | + | .colul li a{ | |
| − | .colul li a { | + | font-family: arial !important; |
| − | font-family: | + | |
font-weight: 400; | font-weight: 400; | ||
font-style: normal; | font-style: normal; | ||
| Line 62: | Line 56: | ||
text-decoration: none; | text-decoration: none; | ||
line-height: 1.2em; | line-height: 1.2em; | ||
| − | color: rgba(26, 26, 26, .7); | + | color: rgba(26,26,26,.7); |
margin-bottom: .5em; | margin-bottom: .5em; | ||
| − | + | ||
} | } | ||
| − | |||
.ulfixed { | .ulfixed { | ||
position: fixed !important; | position: fixed !important; | ||
| + | |||
top: 90px; | top: 90px; | ||
} | } | ||
| − | + | .myheader{ | |
| − | .myheader { | + | box-shadow:none !important; |
| − | box-shadow: none !important; | + | background:rgba(132,176,110,0.4) !important; |
| − | background: rgba( | + | border:none !important; |
| − | border: none !important; | + | |
} | } | ||
| − | + | .itemstyle{ | |
| − | .itemstyle { | + | font-family: arial !important; |
| − | font-family: | + | font-weight: 600 !important; |
| − | font-weight: | + | |
font-style: normal !important; | font-style: normal !important; | ||
| − | |||
letter-spacing: 0px !important; | letter-spacing: 0px !important; | ||
line-height: 1.6em !important; | line-height: 1.6em !important; | ||
| − | color: rgba(26, 26, 26, .7) !important; | + | color: rgba(26,26,26,.7) !important; |
| + | text-align: left;!important; | ||
} | } | ||
| − | .footer { | + | } |
| − | background: rgba( | + | .footer{ |
| + | background:rgba(12, 61, 12, 0.8509803921568627) !important; | ||
} | } | ||
#back-to-top{ | #back-to-top{ | ||
| − | + | position:fixed; | |
| − | + | } | |
| − | + | #back-to-top a{ | |
| − | + | text-align:center; | |
| − | + | text-decoration:none; | |
| − | + | color:#d1d1d1; | |
| − | + | display:block; | |
| − | + | width:80px; | |
| − | + | /*使用CSS3中的transition属性给跳转链接中的文字添加渐变效果*/ | |
| − | + | -moz-transition:color 1s; | |
| − | + | -webkit-transition:color 1s; | |
| − | + | -o-transition:color 1s; | |
| − | + | } | |
| − | + | #back-to-top a img{ | |
| − | + | background:#d1d1d1; | |
| − | + | border-radius:6px; | |
| − | + | display:block; | |
| − | + | height:80px; | |
| − | + | width:80px; | |
| − | + | margin-bottom:5px; | |
| − | + | -moz-transition:background 1s; | |
| − | + | -webkit-transition:background 1s; | |
| − | + | -o-transition:background 1s; | |
| − | + | } | |
| − | + | @font-face | |
| − | + | { | |
| − | + | font-family: purista; | |
| − | </style> | + | src: url('https://static.igem.org/mediawiki/2018/4/44/T--worldshaper-XSHS--semibold.otf'), |
| − | <link rel="stylesheet" type="text/css" href="http://igem2017.worldshaper.cn/XSHS/css/wiki_edit.css"> | + | url('https://static.igem.org/mediawiki/2018/4/44/T--worldshaper-XSHS--semibold.otf'); |
| − | <link rel="stylesheet" type="text/css" href="http://igem2017.worldshaper.cn/XSHS/css/bootstrap.min.css"> | + | } |
| − | <link rel="stylesheet" type="text/css" href="http://igem2017.worldshaper.cn/XSHS/css/ionicons.min.css"> | + | </style><!-- style --> |
| − | <link rel="stylesheet" type="text/css" href="http://igem2017.worldshaper.cn/XSHS/css/animate.css"> | + | <link rel="stylesheet" type="text/css" href="http://igem2017.worldshaper.cn/XSHS/css/wiki_edit.css"> |
| − | <link rel="stylesheet" type="text/css" href="http://igem2017.worldshaper.cn/XSHS/css/slider.css"> | + | <link rel="stylesheet" type="text/css" href="http://igem2017.worldshaper.cn/XSHS/css/bootstrap.min.css"> |
| − | <link rel="stylesheet" type="text/css" href="http://igem2017.worldshaper.cn/XSHS/css/owl.carousel.css"> | + | <link rel="stylesheet" type="text/css" href="http://igem2017.worldshaper.cn/XSHS/css/ionicons.min.css"> |
| − | <link rel="stylesheet" type="text/css" href="http://igem2017.worldshaper.cn/XSHS/css/owl.theme.css"> | + | <link rel="stylesheet" type="text/css" href="http://igem2017.worldshaper.cn/XSHS/css/animate.css"> |
| − | <link rel="stylesheet" type="text/css" href="http://igem2017.worldshaper.cn/XSHS/css/jquery.fancybox.css"> | + | <link rel="stylesheet" type="text/css" href="http://igem2017.worldshaper.cn/XSHS/css/slider.css"> |
| − | <link rel="stylesheet" type="text/css" href="http://igem2017.worldshaper.cn/XSHS/css/main.css"> | + | <link rel="stylesheet" type="text/css" href="http://igem2017.worldshaper.cn/XSHS/css/owl.carousel.css"> |
| − | <link rel="stylesheet" type="text/css" href="http://igem2017.worldshaper.cn/XSHS/css/responsive.css"> | + | <link rel="stylesheet" type="text/css" href="http://igem2017.worldshaper.cn/XSHS/css/owl.theme.css"> |
| − | <script src="http://igem2017.worldshaper.cn/XSHS/js/vendor/modernizr-2.6.2.min.js"></script> | + | <link rel="stylesheet" type="text/css" href="http://igem2017.worldshaper.cn/XSHS/css/jquery.fancybox.css"> |
| − | <script src="http://igem2017.worldshaper.cn/XSHS/js/jquery.min.js"></script> | + | <link rel="stylesheet" type="text/css" href="http://igem2017.worldshaper.cn/XSHS/css/main.css"> |
| − | <script src="http://igem2017.worldshaper.cn/XSHS/js/owl.carousel.min.js"></script> | + | <link rel="stylesheet" type="text/css" href="http://igem2017.worldshaper.cn/XSHS/css/responsive.css"> |
| − | <script src="http://igem2017.worldshaper.cn/XSHS/js/bootstrap.min.js"></script> | + | <script src="http://igem2017.worldshaper.cn/XSHS/js/vendor/modernizr-2.6.2.min.js"></script> |
| − | <script src="http://igem2017.worldshaper.cn/XSHS/js/wow.min.js"></script> | + | <script src="http://igem2017.worldshaper.cn/XSHS/js/jquery.min.js"></script> |
| − | <script src="http://igem2017.worldshaper.cn/XSHS/js/slider.js"></script> | + | <script src="http://igem2017.worldshaper.cn/XSHS/js/owl.carousel.min.js"></script> |
| − | <script src="http://igem2017.worldshaper.cn/XSHS/js/jquery.fancybox.js"></script> | + | <script src="http://igem2017.worldshaper.cn/XSHS/js/bootstrap.min.js"></script> |
| − | <script src="http://igem2017.worldshaper.cn/XSHS/js/main.js"></script> | + | <script src="http://igem2017.worldshaper.cn/XSHS/js/wow.min.js"></script> |
| + | <script src="http://igem2017.worldshaper.cn/XSHS/js/slider.js"></script> | ||
| + | <script src="http://igem2017.worldshaper.cn/XSHS/js/jquery.fancybox.js"></script> | ||
| + | <script src="http://igem2017.worldshaper.cn/XSHS/js/main.js"></script> | ||
<script type="text/javascript"> | <script type="text/javascript"> | ||
$(function () { | $(function () { | ||
| Line 144: | Line 140: | ||
window.onscroll = function () { | window.onscroll = function () { | ||
var t = document.documentElement.scrollTop || document.body.scrollTop; //获取距离页面顶部的距离 | var t = document.documentElement.scrollTop || document.body.scrollTop; //获取距离页面顶部的距离 | ||
| − | var $x = $('# | + | var $x = $('#Ourteam').offset().top |
if (t >= $x - 80) { | if (t >= $x - 80) { | ||
console.log(t, $x) | console.log(t, $x) | ||
| Line 163: | Line 159: | ||
}) | }) | ||
}) | }) | ||
| − | </script> | + | </script><!-- css and js --> |
| − | < | + | <header id="top-bar" class="navbar-fixed-top animated-header navbar navbar-default myheader" > |
| − | + | <div class="container"> | |
| − | + | <div class="navbar-header" > | |
| − | + | <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> | |
| − | + | <span class="sr-only">Toggle navigation</span> | |
| − | + | <span class="icon-bar"></span> | |
| − | <header id="top-bar" class="navbar-fixed-top animated-header navbar navbar-default myheader"> | + | <span class="icon-bar"></span> |
| − | + | <span class="icon-bar"></span> | |
| − | + | </button> | |
| − | + | <div class="navbar-brand " style="display:block;color:#fff;margin-left:15px;font-size:20px"> | |
| − | + | <a href="https://2018.igem.org/Team:Worldshaper-XSHS"> | |
| − | + | Worldshaper- <b>XSHS</b> | |
| − | + | </a> | |
| − | + | </div> | |
| − | + | </div> | |
| − | + | <nav class="collapse navbar-collapse navbar-right" role="navigation"> | |
| − | + | <div class="main-menu"> | |
| − | + | <ul class="nav navbar-nav navbar-right"> | |
| − | + | ||
| − | + | <li class="dropdown"> | |
| − | + | <a class="dropdown-toggle" data-toggle="dropdown"> | |
| − | + | Team | |
| − | + | <span class="caret"></span> | |
| − | + | </a> | |
| − | + | <div class="dropdown-menu"> | |
| − | + | <ul> | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | <li> | |
| − | + | <a href="https://2018.igem.org/Team:Worldshaper-XSHS/aboutus.html">about us</a> | |
| − | + | </li> | |
| − | + | <li> | |
| − | + | <a href="https://2018.igem.org/Team:Worldshaper-XSHS/Team">Members</a> | |
| − | + | </li> | |
| − | + | ||
| − | + | </ul> | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | < | + | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
</div> | </div> | ||
| − | + | </li> | |
| − | + | <li> | |
| − | < | + | <a href="https://2018.igem.org/Team:Worldshaper-XSHS/Collaborations">Collaborations</a> |
| − | + | </li> | |
| − | + | <li class="dropdown"> | |
| − | + | <a class="dropdown-toggle" data-toggle="dropdown"> | |
| − | + | Project | |
| − | + | <span class="caret"></span> | |
| − | + | </a> | |
| + | <div class="dropdown-menu"> | ||
| + | <ul> | ||
| + | <li> | ||
| + | <a href="https://2018.igem.org/Team:Worldshaper-XSHS/Background.html">Background</a> | ||
| + | </li> | ||
| + | <li> | ||
| + | <a href="https://2018.igem.org/Team:Worldshaper-XSHS/design.html">Design</a> | ||
| + | </li> | ||
| + | <li> | ||
| + | <a href="https://2018.igem.org/Team:Worldshaper-XSHS/Protocols-methods.html">Protocols and methods</a> | ||
| + | </li> | ||
| + | <li> | ||
| + | <a href="https://2018.igem.org/Team:Worldshaper-XSHS/result.html">Results</a> | ||
| + | </li> | ||
| + | <li> | ||
| + | <a href="https://2018.igem.org/Team:Worldshaper-XSHS/Future-plans.html">Future plans</a> | ||
| + | </li> | ||
| + | |||
| + | <li> | ||
| + | <a href="https://2018.igem.org/Team:Worldshaper-XSHS/InterLab">Interlab</a> | ||
| + | </li> | ||
| + | <li> | ||
| + | <a href="https://2018.igem.org/Team:Worldshaper-XSHS/Model">Model</a> | ||
| + | </li> | ||
| + | <li> | ||
| + | <a href="https://2018.igem.org/Team:Worldshaper-XSHS/Demonstrate">Demonstrate</a> | ||
| + | </li> | ||
| − | + | </ul> | |
| − | + | ||
| − | + | ||
| − | < | + | |
</div> | </div> | ||
| − | + | </li> | |
| − | + | <li> | |
| − | + | <a href="https://2018.igem.org/Team:Worldshaper-XSHS/parts.html">Parts</a> | |
| − | + | </li> | |
| − | + | <li class="dropdown"> | |
| − | + | <a class="dropdown-toggle" data-toggle="dropdown"> | |
| − | </ | + | HP |
| − | + | <span class="caret"></span> | |
| − | + | </a> | |
| − | + | <div class="dropdown-menu"> | |
| − | + | <ul> | |
| − | <div class=" | + | <li> |
| − | < | + | <a href="https://2018.igem.org/Team:Worldshaper-XSHS/HP/Silver">Silver</a> |
| + | </li> | ||
| + | <li> | ||
| + | <a href="https://2018.igem.org/Team:Worldshaper-XSHS/HP/Gold_Integrated">Integrated and Gold</a> | ||
| + | </li> | ||
| + | <li> | ||
| + | <a href="https://2018.igem.org/Team:Worldshaper-XSHS/Engagement">Engagement</a> | ||
| + | </li> | ||
| + | </ul> | ||
</div> | </div> | ||
| − | + | </li> | |
| − | + | <li> | |
| − | + | <a href="https://2018.igem.org/Team:Worldshaper-XSHS/Applied_Design">Applied Design</a> | |
| − | + | </li> | |
| − | + | <li class="dropdown"> | |
| − | + | <a class="dropdown-toggle" data-toggle="dropdown"> | |
| − | </ | + | Achievement |
| − | + | <span class="caret"></span> | |
| − | + | </a> | |
| − | + | <div class="dropdown-menu"> | |
| − | + | <ul> | |
| − | <div class=" | + | <li> |
| − | < | + | <a href="https://2018.igem.org/Team:Worldshaper-XSHS/Medal-requirements.html">Medal requirements</a> |
| + | </li> | ||
| + | </ul> | ||
</div> | </div> | ||
| − | + | </li> | |
| − | + | <li> | |
| − | + | <a href="https://2018.igem.org/Team:Worldshaper-XSHS/safety.html">Safety</a> | |
| − | + | </li> | |
| − | + | <li> | |
| − | + | <a href="https://2018.igem.org/Team:Worldshaper-XSHS/Attributions">Attributions</a> | |
| − | + | </li> | |
| − | + | </ul> | |
| − | + | ||
| − | + | ||
| − | </ | + | |
</div> | </div> | ||
| − | + | </nav> | |
| − | + | </div> | |
| − | + | </header><!-- header --> | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | <section class="visual wow fadeInLeft text-center animated" data-wow-duration="500ms" data-wow-delay="200ms" style="visibility: visible; animation-duration: 500ms; animation-delay: 200ms; animation-name: fadeInLeft;"> | |
| − | + | <strong class="positiontitle">Applied Design</strong><!-- 这里是大图的标题 --> | |
| − | + | <img src="https://static.igem.org/mediawiki/2018/9/95/T--Worldshaper-XSHS--s002.jpg" alt="" class="bg-stretch" style="width:100%"> | |
| − | + | <!-- 这里是大图的图片链接 --> | |
| − | + | </section> | |
| − | + | ||
| − | + | <section class="pageInHere"> | |
| − | + | <div class="container"> | |
| − | < | + | <div class="row"> |
| − | <img src="https://static.igem.org/mediawiki/2018/ | + | |
| + | <div class="col-xs-2 xshs-box3 "> | ||
| + | <ul class="colul text-left"style="width: 180px;font-size: 15px!important"> | ||
| + | <li class="colactive mt-1"><a href="#Ourteam">Principle </a></li> | ||
| + | <hr> | ||
| + | <li class="mt-1"><a href="#OurSchool">Design method</a></li> | ||
| + | <hr> | ||
| + | <li class="mt-1"><a href="#Others">Two version devices apply the same experiment principles</a></li> | ||
| + | <!-- 这里是页面定位锚点 href 对应代码的 “id属性 例如 id='xxx' ”--> | ||
| + | <li> | ||
| + | <p id="back-to-top" style="margin-top: 50px;"> | ||
| + | <a href="#top"> | ||
| + | <img src="https://static.igem.org/mediawiki/2018/e/e5/T--worldshaper-XSHS--back.png"> | ||
| + | TO Top | ||
| + | </a> | ||
| + | </p> | ||
| + | </li> | ||
| + | </ul> | ||
| + | </div> | ||
| + | |||
| + | <div class="col-xs-10 "> | ||
| + | <div class="xshs-box3"> | ||
| + | <p class="v1" id="Ourteam" style="text-align: center!important "> | ||
| + | Worldshaper-XSHS applied design | ||
| + | </p> | ||
| + | <div style=" | ||
| + | width: 100%; | ||
| + | margin-left: 0; | ||
| + | margin-top: 0px; | ||
| + | margin-bottom: -20px; | ||
| + | "> | ||
| + | <hr style=" | ||
| + | height: 3px; | ||
| + | background-color: #0c3d0c99!important; | ||
| + | width: 100%; | ||
| + | "> | ||
| + | <p style=" | ||
| + | margin-top: -18px; | ||
| + | font-size: 13px; | ||
| + | line-height: 20px; | ||
| + | font-family: ration cans; | ||
| + | " align="left">Applications of Nic-E.coli in life (like in a smoking room)</p> | ||
</div> | </div> | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
</div> | </div> | ||
| − | + | <div class="xshs-box3"> | |
| − | <div class=" | + | <div style=" |
| − | < | + | width: 5px; |
| − | + | height: 24px; | |
| − | + | background-color: #0c3d0cd9; | |
| − | + | /* text-align: left!important; */ | |
| − | + | margin-left: 0px; | |
| − | + | border: none; | |
| − | + | margin-top: 50px; | |
| − | + | "></div> | |
| − | + | <p style="width: 800px;margin-left: 11px;margin-top: -23px;font-size: 22px;margin-bottom: 20px;"id="Ourteam">Principle</p> | |
| − | + | </div> | |
| − | + | ||
| − | + | <p class="itemstyle"> | |
| + | Concentration of Nic-E.coli growth was related to the concentration of nicotine (see Figure 1 and Figure 2 below), so we decided to use the second version E.coli with the fluorescent expression to design a test equipment, which could be used to detect whether the nicotine content in the air reached a dangerous level. | ||
| + | </p> | ||
| + | |||
</div> | </div> | ||
| − | + | <div class="xshs-box2"> | |
| − | <div class=" | + | <p> |
| − | < | + | <img class="img-responsive" alt="" src="https://static.igem.org/mediawiki/2018/9/97/T--Worldshaper-XSHS--ad001.png" /> |
| − | < | + | </p> |
| − | + | <p> | |
| − | + | <img class="img-responsive" alt="" src="https://static.igem.org/mediawiki/2018/5/55/T--Worldshaper-XSHS--ad002.png" /> | |
| − | + | </p> | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | </ | + | |
</div> | </div> | ||
| − | + | <div class="xshs-box3"> | |
| − | + | <div style=" | |
| − | < | + | width: 5px; |
| − | + | height: 24px; | |
| − | + | background-color: #0c3d0cd9; | |
| − | + | /* text-align: left!important; */ | |
| − | + | margin-left: 201px; | |
| − | + | border: none; | |
| − | + | margin-top: 50px; | |
| − | + | "></div> | |
| − | + | <p style="width: 800px;margin-left: 212px;margin-top: -23px;font-size: 22px;margin-bottom: 20px;"id="OurSchool">Design method</p> | |
| − | + | ||
| − | + | ||
| − | + | ||
</div> | </div> | ||
| − | + | <!-- <div class="xshs-box2"> | |
| − | <div class=" | + | <p> |
| − | < | + | <img class="img-responsive" alt="" src="https://static.igem.org/mediawiki/2018/3/35/T--worldshaper-XSHS--c002.png" /> |
| − | < | + | </p> |
| − | + | </div> --> | |
| − | + | <div class="xshs-box3"> | |
| − | + | <b style="margin-left: 201px">1.The first version product</b> | |
| − | + | <p class="itemstyle" style="margin-left: 201px"> | |
| − | + | We used 3D printing technology to construct our product design into a physical model. The main body of the product model was a cuboid of 15cm in length, 7cm in width and 7cm in height. | |
| − | + | </p> | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | </ | + | |
</div> | </div> | ||
| − | + | <div class="xshs-box2"> | |
| − | <div class=" | + | <p> |
| − | < | + | <img class="img-responsive" alt="" src="https://static.igem.org/mediawiki/2018/1/1b/T--Worldshaper-XSHS--ad005.png" /> |
| − | < | + | </p> |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
</div> | </div> | ||
| − | <div class=" | + | <!-- <div class="xshs-box3"> |
| − | < | + | <p class="v1" id="OurSchool"style="text-align: center; "> Collaborations with other teams</p> |
| − | + | <div style=" | |
| − | + | width: 100%; | |
| − | </div> | + | margin: 0 auto; |
| − | < | + | margin-top: -34px; |
| − | + | "> | |
| + | <hr style=" | ||
| + | height: 3px; | ||
| + | background-color: #0c3d0c99!important; | ||
| + | margin-top: 40px; | ||
| + | "> | ||
| + | </div> | ||
| + | |||
| + | <div style=" | ||
| + | width: 5px; | ||
| + | height: 24px; | ||
| + | background-color: #0c3d0cd9; | ||
| + | /* text-align: left!important; */ | ||
| + | margin-left: 0px; | ||
| + | border: none; | ||
| + | margin-top: 50px; | ||
| + | "></div> | ||
| + | <p style="width: 800px;margin-left: 11px;margin-top: -23px;font-size: 22px;margin-bottom: 20px;">Collaboration with ZJU-China team.</p> | ||
| − | + | <p class="itemstyle"> | |
| − | + | The aspect about experimental problem: Because of the invalid homemade E. coli receptive state, we did experiments in the ZJU-China team’s laboratories by utilizing its commercial E. coli receptive state. This attempt provided enough opportunities for us to discuss the difference between the experiments, which exerted great advantage to solve such problems in the nest phase. | |
| − | + | </p> | |
| − | + | </div> --> | |
| − | + | <div class="xshs-box3"> | |
| − | </div> | + | <p class="itemstyle" style="margin-left: 201px"> |
| − | + | The chamber was filled with bacteria liquid. A fan was used to extract the upper part of the gas to form a low-pressure area. The atmospheric pressure would pump the gas to be tested from the other side into the inlet pipe, which was bent down and connected to the bottom of the device, so that the gas could fully contact with the liquid and water-soluble nicotine could be transferred from the air into the bacteria liquid. After that, we got the bacterial fluid, whose protein expressed fluorescence with the effect of nicotine by measuring the fluorescence and comparing with existing datas to calculate the nicotine concentration. This was our primary hypothesis. However, through simulation experiments, we found the defects and deficiencies of the existing device : | |
| − | <div class=" | + | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | </p> | |
| − | + | <p class="itemstyle" style="margin-left: 201px">1.The bottom area of 15cm x 7cm means that there was nearly half liter of bacteria liquid in the device when operating, which was not reasonable from the perspective of convenience or safety. </p> | |
| − | + | <p class="itemstyle" style="margin-left: 201px">2.The first version device which used fan to extract caused the air outlet pipe diameter become larger. Also, bacterial fluid-air inside the device-outside air formed the interconnected system so that the fan’s working efficiency would greatly reduce if we used gauze or mesh. </p> | |
| − | + | <p class="itemstyle" style="margin-left: 201px">3.The fan was unable to extract equal volume every time, so it was not conducive to get the nicotine concentration after detecting fluorescence. Based on this,We improved the second version device. | |
| − | </ | + | </p> |
</div> | </div> | ||
| − | + | <!-- <div class="xshs-box2"> | |
| − | <div class=" | + | <p> |
| − | < | + | <img class="img-responsive" alt="" src="https://static.igem.org/mediawiki/2018/1/19/T--Worldshaper-XSHS--mo003.png" /> |
| − | < | + | </p> |
| − | + | </div> --> | |
| − | + | <div class="xshs-box3"> | |
| − | + | <b style="margin-left: 201px">2.The second version product</b> | |
| − | + | <p class="itemstyle" style="margin-left: 201px"> | |
| − | + | In the design of the second version product, we reduced the device size-the actual internal bottom area was about 16cm squared-reduced the amount of bacterial liquid that needed for work. The equipment also adopted the piston pumping way likes inflator, which enabled filters device to reduce the possible Ecoli leakage properly. Because the piston way was used to pump air, the gas was a fixed column of air volume when the piston pumps back and forth, bringing great convenience for us to exactly extract the volume we want. | |
| − | + | </p> | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | </ | + | |
</div> | </div> | ||
| − | + | <div class="xshs-box2"> | |
| − | + | <p> | |
| − | + | <img class="img-responsive" alt="" src="https://static.igem.org/mediawiki/2018/2/22/T--Worldshaper-XSHS--ad006.png" /> | |
| − | + | </p> | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | <div class=" | + | |
| − | < | + | |
| − | < | + | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
</div> | </div> | ||
| − | + | <div class="xshs-box3"> | |
| − | + | <p class="itemstyle" style="margin-left: 201px"> | |
| − | < | + | We added a certain amount of second-version Nic-E.coli in the container and introduced the nicotine-containing gas into the test chamber through piston pulling air. (According to the optimum concentration obtained by the experiment, we can calculate appropriate volume of the gas that be added) After a steady period of time, for example, putting the second version E-coli at the concentration of 0.0001 g/L, the fluorescence is most obvious at 3 hours), ultraviolet light stimulated the fluorescent protein. Fluorescence intensity detected by light sensor was measured and the amount of nicotine in the previously gas was calculated the nicotine content. Having a higher nicotine level in the air, the measured value of the light perception would be higher. Thus, warning device would remind people to open the window, reducing the total nicotine in the room. |
| − | + | </p> | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | </ | + | |
</div> | </div> | ||
| − | + | <div class="xshs-box2"> | |
| − | + | <p> | |
| − | < | + | <img class="img-responsive" alt="" src="https://static.igem.org/mediawiki/2018/1/10/T--Worldshaper-XSHS--de004.png" /> |
| − | < | + | </p> |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
</div> | </div> | ||
| − | + | <div class="xshs-box3"> | |
| − | + | <p style="width: 800px;margin-left: 201px;margin-top: -23px;font-size: 22px;margin-bottom: 20px;"id="Others">Our two version devices apply the same experiment principles, It had been proven in the laboratory. | |
| − | < | + | </p> |
| − | + | ||
| − | + | </div> | |
| − | + | ||
| − | + | <div class="xshs-box3"> | |
| − | + | <b style="margin-left: 201px">1.Safety:</b> | |
| − | + | <p class="itemstyle" style="margin-left: 201px"> | |
| − | + | The internal bacteria solution of the device was working in a sealed state, so it would not react with the outside environment. | |
| − | + | </p> | |
| − | + | <b style="margin-left: 201px">2. Feasibility:</b> | |
| − | </ | + | <p class="itemstyle" style="margin-left: 201px"> |
| + | According to the experiment record, at the concentration of 0.0001 g/L nicotine, the second-version detection system had a stable fluorescence expression within 1~3h. When we used a 2-by-5cm piston pump, we should slowly pumped the gas every five seconds to ensure that the nicotine is fully dissolved into the bacterial fluid. From starting detecting to the one hour when we can observed the fluorescence expression, we were able to obtain 100 to 200 times more the amount of nicotine in the air, at which time the nicotine concentration was in the proper range for the second-version monitoring system. We sat different swept volume to adapt to different occasions. For instance, in the smoking room, the device warns when nicotine harms to human health; in other public places like office, the equipment only reminds people to ventilate – Installing the nicotine concentration second version device in the 60 square meters of closed classroom, we are able to see the alarm when someone smokes. | ||
| + | </p> | ||
</div> | </div> | ||
| − | + | <!-- <div class="xshs-box2"> | |
| − | <div class=" | + | <p> |
| − | < | + | <img class="img-responsive" alt="" src="https://static.igem.org/mediawiki/2018/9/9f/T--Worldshaper-XSHS--mo007.png" /> |
| − | + | </p> | |
| − | + | </div> --> | |
| − | + | <div class="xshs-box3"> | |
| − | < | + | <p class="itemstyle" style="margin-left: 201px"> |
| − | + | Indisputably, the detection is feasible and effective. | |
| − | + | </p> | |
| − | + | </div> | |
| − | + | <!-- <div class="xshs-box2"> | |
| − | + | <p> | |
| − | </ | + | <img class="img-responsive" alt="" src="https://static.igem.org/mediawiki/2018/9/93/T--Worldshaper-XSHS--mo008.png" /> |
| − | </ | + | </p> |
| + | </div> --> | ||
| + | <div class="xshs-box3"> | ||
| + | <p class="itemstyle" style="margin-left: 201px"> | ||
| + | Note 1: (The piston pumping and pumping air device is shown below.) We utilized different pressure between the gas inside and atmosphere outside to lead air containing nicotine to nutrient solution. Push-pull could let more nicotine mix with water, so confirming that nicotine content can be used for detecting the fluorescence expression of Nic-E.coli. | ||
| + | </p> | ||
| + | </div> | ||
| + | <!-- <div class="xshs-box2"> | ||
| + | <p> | ||
| + | <img class="img-responsive" alt="" src="https://static.igem.org/mediawiki/2018/5/52/T--Worldshaper-XSHS--mo009.png" /> | ||
| + | </p> | ||
| + | </div> | ||
| + | <div class="xshs-box3"> | ||
| + | <p class="itemstyle" style="margin-left: 201px"> | ||
| + | (5) We analyzed the correlation between k (bacterial growth coefficient) and the concentration of nicotine, the results of which showed that k and pC (-lg c) had a significant positive correlation. The higher the concentration of nicotine, the smaller k will result in, that is, the stronger the inhibition of growth. The fitted function is as follows: | ||
| + | </p> | ||
| + | </div> | ||
| + | <div class="xshs-box2"> | ||
| + | <p> | ||
| + | <img class="img-responsive" alt="" src="https://static.igem.org/mediawiki/2018/0/0c/T--Worldshaper-XSHS--mo010.png" /> | ||
| + | </p> | ||
| + | </div> | ||
| + | <div class="xshs-box3"> | ||
| + | <p class="itemstyle" style="margin-left: 201px"> | ||
| + | When the concentration of nicotine is around 〖10〗^(-1.5) g/L (approximately 0.032 g/L), the growth of bacteria begins to be inhibited. As the concentration increases, the inhibition increases. When it changes to 〖10〗^(-1) g/L (0.1 g/L), the bacteria growth is inhibited to a certain degree, where k is calculated to be -3.62038186 based on the formula. When the concentration increases to 〖10〗^(-0.5) g/L (around 0.32 g/L), the inhibition is significant, and k is calculated as -17.56950279. | ||
| + | </p> | ||
| + | </div> | ||
| + | <div class="xshs-box2"> | ||
| + | <p> | ||
| + | <img class="img-responsive" alt="" src="https://static.igem.org/mediawiki/2018/2/2f/T--Worldshaper-XSHS--mo011.png" /> | ||
| + | </p> | ||
</div> | </div> | ||
| − | + | <div class="xshs-box3"> | |
| − | <div class=" | + | <p class="itemstyle" style="margin-left: 201px"> |
| − | < | + | (6) Conclusion: Nicotine exhibits two properties for the strain. On the one hand, it can activate the promoter and induce the expression of fluorescence; on the other, nicotine has a toxic effect on the bacteria. Under the combined effect of these two properties, our detection system detected a great variety of fluorescence intensities. Based on the above models, we analyzed that the inhibition effect is not significant when the concentration of nicotine is less than 0.03g/L, and the fluorescence intensity increases with time. When the concentration is greater than 0.3 g/L, the inhibition effect is significant. And if the concentration is too high, the inhibitory effect of nicotine on bacteria will be overwhelming, resulting in a significant decrease in fluorescence expression. |
| − | <div class=" | + | </p> |
| − | + | </div> | |
| − | + | <div class="xshs-box3"> | |
| − | + | <div style=" | |
| − | + | width: 5px; | |
| − | + | height: 24px; | |
| − | + | background-color: #0c3d0cd9; | |
| − | + | /* text-align: left!important; */ | |
| − | </ | + | margin-left: 201px; |
| + | border: none; | ||
| + | margin-top: 50px; | ||
| + | "></div> | ||
| + | <p style="width: 800px;margin-left: 212px;margin-top: -23px;font-size: 22px;margin-bottom: 20px;"id="OurSchool">Ⅱ. The Growth Curves under Different Nicotine Concentrations by the First Generation Detection System</p> | ||
| + | </div> | ||
| + | <p class="itemstyle" style="margin-left: 201px"> | ||
| + | To better explore the relationship between nicotine concentrations and bacterial growth, we prepared 10 different concentrations of nicotine solutions for testing, i.e. 0.02 g/L, 0.04 g/L, 0.08 g/L, 0.16 g/L, 0.32 g/L, 0.64 g/L, 1.28 g/L, 2.56 g/L, 5.12 g/L and 10.24g/ L. During the data analysis, we performed the following substitution of the concentration: | ||
| + | </p> | ||
</div> | </div> | ||
| − | + | <div class="xshs-box2"> | |
| + | <p> | ||
| + | <img class="img-responsive" alt="" src="https://static.igem.org/mediawiki/2018/f/f8/T--Worldshaper-XSHS--mo013.png" /> | ||
| + | </p> | ||
| + | </div> | ||
| + | <div class="xshs-box3"> | ||
| + | <p class="itemstyle"style="margin-left: 201px"> | ||
| + | in order to better discover its relationship with OD600. For the X-axis, 1, 2, 3 until 10 respectively represent the 10 different concentrations of nicotine, i.e. 0.02 g/L, 0.04 g/L, 0.08 g/L, 0.16 g/L, 0.32 g/L, 0.64 g/L, 1.28 g/L, 2.56 g/L, 5.12 g/L and 10.24g/L. We can see that the OD values at 0h in different groups are all 0.05, which means that all the groups share the same starting point. At 2h, the OD values detected at various concentration groups are basically the same, and have not increased much since 0h. At 4h, the OD values of the low concentration groups increased significantly. And for the groups larger than 5 (that is, 0.32 g/L), there is a downward trend, that is, the toxicity of nicotine has begun to manifest. The critical value, the concentration of 0.32 g/L, is basically consistent with our conjecture based on the models in the first part. As time goes on, the toxicity of nicotine becomes more and more significant. At 12h, when the concentrations are greater than 0.32 g/L, the number of bacteria decreases significantly. And as the concentration increases, the inhibiting effect also increases. Based on this model, we speculate that the effect of nicotine on bacterial growth is related to time and nicotine concentration. When the exposure time is less than 4 hours and the concentration is lower than 0.32 g/L, the inhibition is not significant. While with the increase of time and nicotine concentration, its inhibitory effect gradually increases. | ||
| + | </p> | ||
| + | </div> | ||
| + | <div class="xshs-box2"> | ||
| + | <p> | ||
| + | <img class="img-responsive" alt="" src="https://static.igem.org/mediawiki/2018/3/3a/T--Worldshaper-XSHS--mo014.png" /> | ||
| + | </p> | ||
| + | </div> | ||
| + | <div class="xshs-box3"> | ||
| + | <div style=" | ||
| + | width: 5px; | ||
| + | height: 24px; | ||
| + | background-color: #0c3d0cd9; | ||
| + | /* text-align: left!important; */ | ||
| + | margin-left: 201px; | ||
| + | border: none; | ||
| + | margin-top: 50px; | ||
| + | "></div> | ||
| + | <p style="width: 800px;margin-left: 212px;margin-top: -23px;font-size: 22px;margin-bottom: 20px;"id="Others">Ⅲ. Sensitivities of the First and the Second Generation Detection Systems</p> | ||
| + | </div> | ||
| + | <p class="itemstyle" style="margin-left: 201px"> | ||
| + | Based on the structure of plasmids, we predict that the sensitivity of the second generation detection system should be higher than that of the first generation. In order to better test their sensitivities, we have chosen a very low nicotine concentration that can still induce fluorescence to do the experiment. The concentration is 0.0001 g/L. By analyzing the experiment data, we get the following models: | ||
| + | </p> | ||
| + | </div> | ||
| + | <div class="xshs-box2"> | ||
| + | <p> | ||
| + | <img class="img-responsive" alt="" src="https://static.igem.org/mediawiki/2018/1/14/T--Worldshaper-XSHS--mo015.png" /> | ||
| + | </p> | ||
| + | </div> | ||
| + | <div class="xshs-box3"> | ||
| + | <p class="itemstyle" style="margin-left: 330px"> | ||
| + | We can see that the detected fluorescence of the second generation detection system is higher than the first generation detection system. The difference is most significant at 3h. However, the fluorescence intensity detected by the second-generation system was significantly decreased at 4h. We conjecture that this may be related to the toxic effect of nicotine on the bacteria. Although the first generation of detection system can detect fluorescence, it is not as sensitive as the second generation system. | ||
| + | </p> | ||
| + | <p class="itemstyle" style="margin-left: 330px"> | ||
| + | In conclusion, we should choose the second generation detection system to detect the nicotine concentration and the best detection time is at 3h. However, if the first generation system is selected, the detection is better done after 4 hours, with the optimal detection concentration of less than 0.32 g/L. | ||
| + | </p> --> | ||
</div> | </div> | ||
| − | |||
| − | |||
</div> | </div> | ||
| − | </ | + | </div> |
| − | + | </section> | |
| − | </section> | + | |
| − | + | <footer class="footer" style="background: rgba(12, 61, 12, 0.8509803921568627)!important;"> | |
| − | + | <div class="container"> | |
| − | <footer class="footer"> | + | <div class="foot-box"> |
| − | + | <ul class="clearfix"> | |
| − | + | <li class="foot-box-c1"> | |
| − | + | <img src="https://static.igem.org/mediawiki/2017/7/71/T-worldshaper-XSHS-logoxshs.jpeg" alt=""> | |
| − | + | </li> | |
| − | + | <li class="foot-box-c2"> | |
| − | + | <img src="https://static.igem.org/mediawiki/2017/c/ce/T-worldshaper-igemlogo.jpeg" alt=""> | |
| − | + | </li> | |
| − | + | <li class="foot-box-c3"> | |
| − | + | <p>Worldshaper-XSHS, Xiaoshan High School</p> | |
| − | + | <p>Adress: No.538,Gongxiu Road,Xiaoshan District,Hangzhou,Zhejiang Province,China</p> | |
| − | + | </li> | |
| − | + | <li class="foot-box-c4"> | |
| − | + | <img src="https://static.igem.org/mediawiki/2018/9/96/T--worldshaper-XSHS--wechat.png" alt=""> | |
| − | + | </li> | |
| − | + | </ul> | |
| − | + | </div> | |
| − | + | ||
| − | + | ||
| − | + | ||
</div> | </div> | ||
| − | + | </footer> | |
| − | </footer> | + | |
</html> | </html> | ||
Latest revision as of 16:06, 17 October 2018
Worldshaper-XSHS applied design
Applications of Nic-E.coli in life (like in a smoking room) Principle
Concentration of Nic-E.coli growth was related to the concentration of nicotine (see Figure 1 and Figure 2 below), so we decided to use the second version E.coli with the fluorescent expression to design a test equipment, which could be used to detect whether the nicotine content in the air reached a dangerous level.
Design method
We used 3D printing technology to construct our product design into a physical model. The main body of the product model was a cuboid of 15cm in length, 7cm in width and 7cm in height.
The chamber was filled with bacteria liquid. A fan was used to extract the upper part of the gas to form a low-pressure area. The atmospheric pressure would pump the gas to be tested from the other side into the inlet pipe, which was bent down and connected to the bottom of the device, so that the gas could fully contact with the liquid and water-soluble nicotine could be transferred from the air into the bacteria liquid. After that, we got the bacterial fluid, whose protein expressed fluorescence with the effect of nicotine by measuring the fluorescence and comparing with existing datas to calculate the nicotine concentration. This was our primary hypothesis. However, through simulation experiments, we found the defects and deficiencies of the existing device :
1.The bottom area of 15cm x 7cm means that there was nearly half liter of bacteria liquid in the device when operating, which was not reasonable from the perspective of convenience or safety. 2.The first version device which used fan to extract caused the air outlet pipe diameter become larger. Also, bacterial fluid-air inside the device-outside air formed the interconnected system so that the fan’s working efficiency would greatly reduce if we used gauze or mesh. 3.The fan was unable to extract equal volume every time, so it was not conducive to get the nicotine concentration after detecting fluorescence. Based on this,We improved the second version device.
In the design of the second version product, we reduced the device size-the actual internal bottom area was about 16cm squared-reduced the amount of bacterial liquid that needed for work. The equipment also adopted the piston pumping way likes inflator, which enabled filters device to reduce the possible Ecoli leakage properly. Because the piston way was used to pump air, the gas was a fixed column of air volume when the piston pumps back and forth, bringing great convenience for us to exactly extract the volume we want.
We added a certain amount of second-version Nic-E.coli in the container and introduced the nicotine-containing gas into the test chamber through piston pulling air. (According to the optimum concentration obtained by the experiment, we can calculate appropriate volume of the gas that be added) After a steady period of time, for example, putting the second version E-coli at the concentration of 0.0001 g/L, the fluorescence is most obvious at 3 hours), ultraviolet light stimulated the fluorescent protein. Fluorescence intensity detected by light sensor was measured and the amount of nicotine in the previously gas was calculated the nicotine content. Having a higher nicotine level in the air, the measured value of the light perception would be higher. Thus, warning device would remind people to open the window, reducing the total nicotine in the room.
Our two version devices apply the same experiment principles, It had been proven in the laboratory.
The internal bacteria solution of the device was working in a sealed state, so it would not react with the outside environment.
According to the experiment record, at the concentration of 0.0001 g/L nicotine, the second-version detection system had a stable fluorescence expression within 1~3h. When we used a 2-by-5cm piston pump, we should slowly pumped the gas every five seconds to ensure that the nicotine is fully dissolved into the bacterial fluid. From starting detecting to the one hour when we can observed the fluorescence expression, we were able to obtain 100 to 200 times more the amount of nicotine in the air, at which time the nicotine concentration was in the proper range for the second-version monitoring system. We sat different swept volume to adapt to different occasions. For instance, in the smoking room, the device warns when nicotine harms to human health; in other public places like office, the equipment only reminds people to ventilate – Installing the nicotine concentration second version device in the 60 square meters of closed classroom, we are able to see the alarm when someone smokes.
Indisputably, the detection is feasible and effective.
Note 1: (The piston pumping and pumping air device is shown below.) We utilized different pressure between the gas inside and atmosphere outside to lead air containing nicotine to nutrient solution. Push-pull could let more nicotine mix with water, so confirming that nicotine content can be used for detecting the fluorescence expression of Nic-E.coli.
1.The first version product
2.The second version product
1.Safety:
TO Top