Difference between revisions of "Team:Worldshaper-XSHS/Demonstrate"
| (18 intermediate revisions by 4 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> | |
| − | + | <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">Demonstrate</strong><!-- 这里是大图的标题 --> | |
| − | + | <img src="https://static.igem.org/mediawiki/2018/e/e0/T--Worldshaper-XSHS--ti010.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">Experiment demonstration</a></li> | |
| − | + | <hr> | |
| − | + | <li class="mt-1"><a href="#OurSchool">Product demonstration</a></li> | |
| − | + | <hr> | |
| − | + | <li class="mt-1"><a href="#Others">Version one: Stationary Nicotine Detector</a></li> | |
| − | + | <hr> | |
| − | + | <li class="mt-1"><a href="#OurParts">Second version: Portable nicotine detector</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; " > | ||
| + | Experiment demonstration | ||
| + | </p> | ||
| + | <div style=" | ||
| + | width: 100%; | ||
| + | margin: 0 auto; | ||
| + | margin-top: -34px; | ||
| + | "> | ||
| + | <hr style=" | ||
| + | height: 3px; | ||
| + | background-color: #0c3d0c99!important; | ||
| + | margin-top: 40px; | ||
| + | "><div style="width:20px;"> | ||
| + | </div> | ||
| + | <p class="itemstyle">We constructed several parts <a href="https://2018.igem.org/Team:Worldshaper-XSHS/parts.html">（https://2018.igem.org/Team:Worldshaper-XSHS/parts.html ）</a>in the project, including parts related to nicotine detection (BBa_K2827005, BBa_K2827006). We tested and compared the two versions of detection systems, making sure that it could be used as the nicotine detector <a href="https://2018.igem.org/Team:Worldshaper-XSHS/result.html">（https://2018.igem.org/Team:Worldshaper-XSHS/result.html ）</a>. We also built mathematic models for the two detection systems, and calculated the optimal concentration and time of detection <a href="https://2018.igem.org/Team:Worldshaper-XSHS/Model">(https://2018.igem.org/Team:Worldshaper-XSHS/Model )</a>. Based on these findings, we designed two products for nicotine detecting.</p> | ||
</div> | </div> | ||
| − | + | <div class="xshs-box3"> | |
| − | <div class=" | + | <p class="v1" style="text-align: center; " id="OurSchool"> |
| − | < | + | Product demonstration |
| − | <div | + | </p> |
| − | + | <div style=" | |
| − | + | width: 100%; | |
| − | + | margin: 0 auto; | |
| − | + | margin-top: -34px; | |
| − | + | "> | |
| − | + | <hr style=" | |
| − | + | height: 3px; | |
| − | + | background-color: #0c3d0c99!important; | |
| − | + | margin-top: 40px; | |
| − | + | "><div style="width:20px;"> | |
| + | </div> | ||
| + | <p class="itemstyle">According to the results of the survey and interview, we designed two versions of products for nicotine detecting. Due to limited time, we only made physical model for the first version. The second version was improved upon the first version.</p> | ||
</div> | </div> | ||
| − | + | <div class="xshs-box3"> | |
| − | <div class=" | + | <p class="v1" style="text-align: center; " id="Others"> |
| − | < | + | Version one: Stationary Nicotine Detector |
| − | + | </p> | |
| − | + | <div style=" | |
| − | + | width: 100%; | |
| − | + | margin: 0 auto; | |
| − | + | margin-top: -34px; | |
| − | + | "> | |
| − | + | <hr style=" | |
| − | + | height: 3px; | |
| − | + | background-color: #0c3d0c99!important; | |
| − | + | margin-top: 40px; | |
| − | </ | + | "><div style="width:20px;"> |
| + | </div> | ||
| + | |||
| + | <p class="itemstyle">The first generation product was a stationary nicotine-testing device <a href="https://2018.igem.org/Team:Worldshaper-XSHS/Applied_Design">（for more details: https://2018.igem.org/Team:Worldshaper-XSHS/Applied_Design）</a>. The instrument is divided into three parts: an air inlet pipe, a chamber, and an air outlet pipe(Figure1-Figure3). When it works, the chamber is filled with bacteria transformed with BBa_K2827005 or BBa_K2827006. We will install an electric fan under the air outlet pipe to extract gas from the chamber to form a low-pressure area in the chamber. Then the air from outside will be pumped into the chamber through the inlet pipe by the atmospheric pressure. The air inlet pipe is bent down and close to the bottom of the device, so that the air can fully contact with the liquid in the chamber,and the nicotine in the air can dissolve sufficiently. After about 4 hours, the GFP expression of the bacteria is induced by nicotine.We collect the bacteria and measure the fluorescence intensity, and calculated the nicotine concentration.</p> | ||
| + | <p class="itemstyle">We used 3D printing technology to transform our product design into a physical model. The main body of the product model is a cuboid of 15cm in length, 7cm in width and 7cm in height (Figure1, Figure2, Figure3). The diameter of the inlet and outlet is 2 cm.</p> | ||
| + | <p class="itemstyle">As soon as we got this physical model, we ran a simulation experiment. We found that this device had many disadvantages such as imprecise measurement, poor safety, and insensitivity, so we made a further improvement. | ||
| + | </p> | ||
</div> | </div> | ||
| − | + | <div class="xshs-box2"> | |
| − | <div class=" | + | <p> |
| − | < | + | <img class="img-responsive" alt="" src="https://static.igem.org/mediawiki/2018/3/3f/T--Worldshaper-XSHS--de008.png" /> |
| − | < | + | </p> |
| − | + | <p> | |
| − | + | <img class="img-responsive" alt="" src="https://static.igem.org/mediawiki/2018/d/da/T--Worldshaper-XSHS--de006.png" /> | |
| − | + | </p> | |
| − | + | <p> | |
| − | + | <img class="img-responsive" alt="" src="https://static.igem.org/mediawiki/2018/4/45/T--Worldshaper-XSHS--de007.png" /> | |
| − | + | </p> | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | </ | + | |
</div> | </div> | ||
| − | + | <div class="xshs-box3"> | |
| − | <div class=" | + | <p class="v1" style="text-align: center; " id="OurParts"> |
| − | < | + | Second version: Portable nicotine detector |
| − | + | </p> | |
| − | + | <div style=" | |
| − | + | width: 100%; | |
| − | + | margin: 0 auto; | |
| − | + | margin-top: -34px; | |
| − | + | "> | |
| − | + | <hr style=" | |
| − | + | height: 3px; | |
| − | + | background-color: #0c3d0c99!important; | |
| − | + | margin-top: 40px; | |
| − | </ | + | "><div style="width:20px;"> |
| + | </div> | ||
| + | |||
| + | |||
| + | <div class="xshs-box3"> | ||
| + | <p class="itemstyle"> | ||
| + | Compared with the first version, the second version of the detector has a smaller size (Figure4, Figure5) <a href="https://2018.igem.org/Team:Worldshaper-XSHS/Applied_Design">( for more details : https://2018.igem.org/Team:Worldshaper-XSHS/Applied_Design )</a> The size of the model is 7cm×5cm×5cm. The actual internal bottom area was about 16cm squared, so less amount of bacteria is needed to work(Figure6, Figure7). The equipment also adopts the pump type piston pumping way, which enable filters device to reduce the possible bacteria leakage properly. Because the piston is used to pump air, the gas is 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> | ||
| + | <!-- <p class="itemstyle"> | ||
| + | The first generation product was a stationary nicotine testing device (see wiki). The instrument is divided into three parts: air inlet pipe, box body and air outlet pipe. The chamber is filled with bacteria liquid. A fan is used to extract the upper part of the gas to form a low-pressure area. The atmospheric pressure will pump the gas to be tested from the other side into the inlet pipe, which is bent down and connected to the bottom of the device, so that the gas can fully contact with the liquid and water-soluble nicotine can be transferred from the air into the bacteria liquid. After that, we got the bacterial fluid that expressed the fluorescent protein under the effect of nicotine, measured the fluorescence, and calculated the nicotine concentration. | ||
| + | </p> | ||
| + | <p class="itemstyle"> | ||
| + | We used 3D printing technology to construct our product design into a physical model. The main body of the product model is a cuboid of 15cm in length, 7cm in width and 7cm in height. (see below). The air inlet and outlet with diameter of 2cm are also provided. | ||
| + | </p> --> | ||
</div> | </div> | ||
| − | + | <div class="xshs-box2"> | |
| − | <div class=" | + | <p> |
| − | < | + | <img class="img-responsive" alt="" src="https://static.igem.org/mediawiki/2018/f/f8/T--Worldshaper-XSHS--de001.png" /> |
| − | < | + | </p> |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
</div> | </div> | ||
| − | <div class=" | + | <!-- <div class="xshs-box3"> |
| − | < | + | <div style=" |
| − | + | width: 5px; | |
| − | + | height: 24px; | |
| − | + | background-color: #0c3d0cd9; | |
| − | + | /* text-align: left!important; */ | |
| − | + | margin-left: 0px; | |
| − | + | border: none; | |
| − | + | margin-top: 50px; | |
| − | + | "></div> | |
| − | + | <p id="second" style="width: 800px;margin-left: 11px;margin-top: -23px;font-size: 22px;margin-bottom: 20px;">The Second generation product.</p> | |
| − | + | ||
| − | + | ||
</div> | </div> | ||
| − | <div class=" | + | <div class="xshs-box3"> |
| − | < | + | <p class="itemstyle"> |
| − | < | + | In the design of the second generation product (see Wiki), we reduced the device size (as shown in the figure below)-the actual internal bottom area was about 16cm squared-and the amount of bacterial liquid needed to work. The equipment also adopts the pump type piston pumping way, which enable filters device to reduce the possible escherichia coli leakage properly. Because the piston is used to pump air, the gas is 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 class="xshs-box2"> |
| − | + | <p> | |
| + | <img class="img-responsive" alt="" src="https://static.igem.org/mediawiki/2018/1/10/T--Worldshaper-XSHS--de004.png" /> | ||
| + | </p> | ||
| + | <p> | ||
| + | <img class="img-responsive" alt="" src="https://static.igem.org/mediawiki/2018/5/51/T--Worldshaper-XSHS--de002.png" /> | ||
| + | </p> | ||
| + | <p> | ||
| + | <img class="img-responsive" alt="" src="https://static.igem.org/mediawiki/2018/6/68/T--Worldshaper-XSHS--de003.png" /> | ||
| + | </p> | ||
| + | <p> | ||
| + | <img class="img-responsive" alt="" src="https://static.igem.org/mediawiki/2018/2/2a/T--Worldshaper-XSHS--de009.png" /> | ||
| + | </p> | ||
| + | <p> | ||
| + | <img class="img-responsive" alt="" src="https://static.igem.org/mediawiki/2018/3/32/T--Worldshaper-XSHS--de010.png" /> | ||
| + | </p> | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
</div> | </div> | ||
| + | |||
</div> | </div> | ||
| + | </div> | ||
| + | </div> | ||
| + | </section> | ||
| − | + | <footer class="footer" style="background: rgba(12, 61, 12, 0.8509803921568627)!important;"> | |
| + | <div class="container"> | ||
| + | <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> | </div> | ||
| − | + | </footer> | |
| − | </footer> | + | |
</html> | </html> | ||
Latest revision as of 18:38, 17 October 2018
Experiment demonstration
We constructed several parts （https://2018.igem.org/Team:Worldshaper-XSHS/parts.html ）in the project, including parts related to nicotine detection (BBa_K2827005, BBa_K2827006). We tested and compared the two versions of detection systems, making sure that it could be used as the nicotine detector （https://2018.igem.org/Team:Worldshaper-XSHS/result.html ）. We also built mathematic models for the two detection systems, and calculated the optimal concentration and time of detection (https://2018.igem.org/Team:Worldshaper-XSHS/Model ). Based on these findings, we designed two products for nicotine detecting.
Product demonstration
According to the results of the survey and interview, we designed two versions of products for nicotine detecting. Due to limited time, we only made physical model for the first version. The second version was improved upon the first version.
Version one: Stationary Nicotine Detector
The first generation product was a stationary nicotine-testing device （for more details: https://2018.igem.org/Team:Worldshaper-XSHS/Applied_Design）. The instrument is divided into three parts: an air inlet pipe, a chamber, and an air outlet pipe(Figure1-Figure3). When it works, the chamber is filled with bacteria transformed with BBa_K2827005 or BBa_K2827006. We will install an electric fan under the air outlet pipe to extract gas from the chamber to form a low-pressure area in the chamber. Then the air from outside will be pumped into the chamber through the inlet pipe by the atmospheric pressure. The air inlet pipe is bent down and close to the bottom of the device, so that the air can fully contact with the liquid in the chamber,and the nicotine in the air can dissolve sufficiently. After about 4 hours, the GFP expression of the bacteria is induced by nicotine.We collect the bacteria and measure the fluorescence intensity, and calculated the nicotine concentration. We used 3D printing technology to transform our product design into a physical model. The main body of the product model is a cuboid of 15cm in length, 7cm in width and 7cm in height (Figure1, Figure2, Figure3). The diameter of the inlet and outlet is 2 cm. As soon as we got this physical model, we ran a simulation experiment. We found that this device had many disadvantages such as imprecise measurement, poor safety, and insensitivity, so we made a further improvement.
Second version: Portable nicotine detector
Compared with the first version, the second version of the detector has a smaller size (Figure4, Figure5) ( for more details : https://2018.igem.org/Team:Worldshaper-XSHS/Applied_Design ) The size of the model is 7cm×5cm×5cm. The actual internal bottom area was about 16cm squared, so less amount of bacteria is needed to work(Figure6, Figure7). The equipment also adopts the pump type piston pumping way, which enable filters device to reduce the possible bacteria leakage properly. Because the piston is used to pump air, the gas is 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.
TO Top