Difference between revisions of "Team:XJTU-China"

m
 
(79 intermediate revisions by 3 users not shown)
Line 1: Line 1:
 
{{XJTU-China}}
 
{{XJTU-China}}
 +
{{XJTU-China/Header}}
 +
 
<html>
 
<html>
 
 
<head>
 
<head>
<meta charset="utf-8" />
+
  <link rel="stylesheet" type="text/css" href="https://2018.igem.org/wiki/index.php?title=Template:XJTU-China/home.css&action=raw&ctype=text/css" />
<style type="text/css">
+
  <!-- link rel="stylesheet" type="text/css" href="../home.css" -->
*{
+
</head>
margin: 0;
+
<body>
padding: 0;
+
<style>
}
+
  #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 
+
 
+
.box{
+
margin-top: 80px;
+
width: 100%;
+
height: 340px;
+
 
+
position: relative;
+
}
+
 
+
.list{
+
width: 1200px;
+
height: 300px;
+
overflow: hidden;
+
position: absolute;
+
left: 50%;
+
margin-left: -600px;
+
}
+
 
+
.btn{
+
position: absolute;
+
top: 50%;
+
margin-top: -50px;
+
width: 60px;
+
height: 100px;
+
line-height: 100px;
+
font-size: 30px;
+
color: white;
+
text-decoration: none;
+
text-align: center;
+
background: rgba(0,255,0,.5);
+
cursor: pointer;
+
}
+
.next{
+
right: 0;
+
}
+
 
+
li{
+
position: absolute;
+
top: 0;
+
left: 0;
+
list-style: none;
+
opacity: 0;
+
transition: all 0.3s ease-out;
+
}
+
img{
+
width: 751px;
+
height: 300px;
+
border:none;
+
float: left;
+
}
+
.p1{
+
transform:translate3d(-224px,0,0) scale(0.81);
+
}
+
.p2{
+
transform:translate3d(0px,0,0) scale(0.81);
+
transform-origin:0 50%;
+
opacity: 0.8;
+
z-index: 2;
+
}
+
.p3{
+
transform:translate3d(224px,0,0) scale(1);
+
z-index: 3;
+
opacity: 1;
+
}
+
.p4{
+
transform:translate3d(449px,0,0) scale(0.81);
+
transform-origin:100% 50%;
+
opacity: 0.8;
+
z-index: 2;
+
}
+
.p5{
+
transform:translate3d(672px,0,0) scale(0.81);
+
}
+
.p6{
+
transform:translate3d(896px,0,0) scale(0.81);
+
}
+
.p7{
+
transform:translate3d(1120px,0,0) scale(0.81);
+
}
+
 
+
.buttons{
+
position: absolute;
+
width: 1200px;
+
height: 30px;
+
bottom: 0;
+
left: 50%;
+
margin-left: -600px;
+
text-align: center;
+
padding-top: 10px;
+
}
+
.buttons a{
+
display: inline-block;
+
width: 35px;
+
height: 5px;
+
padding-top: 4px;
+
cursor: pointer;
+
}
+
span{
+
display: block;
+
width: 35px;
+
height: 1px;
+
background: red;
+
}
+
.blue{
+
background: blue;
+
}
+
 
</style>
 
</style>
</head>
+
<div id="universal-wrapper">
 +
  <div class="banner-pic-wrapper">
 +
    <img class="banner-up-arrow" src="https://static.igem.org/mediawiki/2018/6/61/T--XJTU-China--Ele-up-arrow.svg" />
 +
    <img class="banner-pic" id="banner-pic-2" src="https://static.igem.org/mediawiki/2018/6/67/T--XJTU-China--Banner-fluo.jpg" />
 +
    <img class="banner-pic" id="banner-pic-3" src="https://static.igem.org/mediawiki/2018/5/50/T--XJTU-China--Banner-bed.jpg" />
 +
    <!-- <img class="banner-pic" id="banner-pic-2" src="https://static.igem.org/mediawiki/2018/2/20/T--XJTU-China--Banner-group.jpg" /> -->
 +
    <img class="banner-pic" id="banner-pic-1" src="https://static.igem.org/mediawiki/2018/5/50/T--XJTU-China--Banner-bacteria.png" />
 +
    <img class="banner-pic active" id="banner-pic-0" src="https://static.igem.org/mediawiki/2018/e/ed/T--XJTU-China--Banner-fixed.png" />
 +
  </div>
 +
  <div class="banner-dummy">
 +
<!--
 +
    <h1 class="banner-text">
 +
      <span id="text-d">D</span><span id="text-e">E</span><span id="text-cose">cose</span>
 +
    </h1>
 +
    <h3 class="banner-sub-text">
 +
      A Biosensor-based Directed Evolution method in promoting D-Psicose productivity
 +
    </h3>
 +
-->
 +
  </div>
  
<div class="column full_size" >
+
  <div class="content-wrapper">
<h1>XJTU-China 2018</h1>
+
    <div class="content-block" id="content-block-1">
<h2>A Standard Framework for Directed Evolution</h2>
+
      <div class="content-text-wrapper">
<p style="text-align:center;"><img style="display:inline-block;width:580px;height:400px;" src="https://static.igem.org/mediawiki/2018/f/f4/T--XJTU-China--teamLogo2.png" /></p>
+
        <h2 class="content-title">Sugar of the Future</h2>
</div>  
+
        <p class="content-text">
 +
          <strong>D-psicose</strong> gives us a glimpse of what sugar in the future would be like. Completely safe and as tasty, but provides barely no energy. On the contrary, it even benefits diabetes and obesity and more!
 +
        </p>
 +
        <p class="content-text">
 +
          It provides only <strong>0.3%</strong> energy of sucrose, but is <strong>70%</strong> as sweet.
 +
        </p>
 +
      </div>
 +
      <div class="content-pic-wrapper">
 +
        <video src="https://static.igem.org/mediawiki/2018/9/98/T--XJTU-China--home-video.mp4" controls="controls" style="margin-left:-20%;">
 +
          Your browser does not support video tag
 +
        </video>
 +
      </div>
 +
    </div>
 +
    <div class="content-block" id="content-block-2">
 +
      <div class="content-text-wrapper">
 +
        <h2 class="content-title">Power of Evolution</h2>
 +
        <p class="content-text">
 +
          <strong>Directed evolution (DE)</strong> is a Nobel Prize method in seeking for better enzymes. But screening manully is not even close to the real power of evolution.
 +
        </p>
 +
        <p class="content-text">
 +
          We unleashed the power of antibiotic resistance as a quantitative reporter, and used Biosensors as a bridge to evolutional pressure. This is our secret in achieving extra <strong>high throughput</strong>!
 +
        </p>
 +
      </div>
 +
      <img src="https://static.igem.org/mediawiki/2018/c/cc/T--XJTU-China--Home-evo.png" />
 +
    </div>
 +
    <div class="content-block" id="content-block-3">
 +
      <div class="content-text-wrapper">
 +
        <h2 class="content-title">Cascade of precision</h2>
 +
        <p class="content-text">
 +
          Worrying about antibiotics are too toxic, or the threshold is not matched? Here we present our <strong>Tl-Cp cassete</strong> as a tunable resistance, which pull the evolutionary pressure to a suitable level.
 +
        </p>
 +
        <p class="content-text">
 +
          Precision is never achieved without modelling! Come and see the math behind each level of regulation which eventually made the system possible.
 +
        </p>
 +
      </div>
 +
      <img src="https://static.igem.org/mediawiki/2018/b/b2/T--XJTU-China--Home-cascades.png" />
 +
    </div>
 +
    <div class="content-block" id="content-block-4">
 +
      <h2 class="content-title">Team</h2>
 +
      <p class="content-text">Meet our team members!</p>
 +
    </div>
 +
    <div class="content-block" id="content-block-dummy">
 +
    </div>
 +
    <div class="content-block" id="content-block-4-pic">
 +
      <!-- <img id="content-pic-team" src="https://static.igem.org/mediawiki/2018/1/1a/T--XJTU-China--Banner-lie.png" /> -->
 +
      <img id="content-pic-team" src="https://static.igem.org/mediawiki/2018/2/20/T--XJTU-China--Banner-group.jpg" />
 +
    </div>
 +
    <div class="content-block" id="content-block-5">
 +
      <h3 class="content-title">Sponsors</h3>
 +
      <img class="sponsor-img" src="https://static.igem.org/mediawiki/2018/6/68/T--XJTU-China--Sponsor-bse.png" />
 +
      <img class="sponsor-img" src="https://static.igem.org/mediawiki/2018/0/02/T--XJTU-China--Sponsor-XJTU%28small%29.jpg" />
 +
      <img class="sponsor-img" src="https://static.igem.org/mediawiki/2018/8/8b/T--XJTU-China--Sponsor-qianyuan.png" />
 +
      <!--img class="sponsor-img" src="https://static.igem.org/mediawiki/2018/3/3d/T--XJTU-China--Sponsor-genewiz.jpg" />
 +
      <img class="sponsor-img" src="https://static.igem.org/mediawiki/2018/9/95/T--XJTU-China--Sponsor-genscript.png" />
 +
      <img class="sponsor-img" src="https://static.igem.org/mediawiki/2018/1/10/T--XJTU-China--Sponsor-tsingke.jpg" />
 +
      <img class="sponsor-img" src="https://static.igem.org/mediawiki/2018/d/d2/T--XJTU-China--Sponsor-mathworks.png" /-->
 +
    </div>
  
<div class="clear extra_space"></div>
+
  </div>
<div class="line_divider"></div>
+
<div class="clear extra_space"></div>
+
 
+
<div class="column full_size" >
+
<h3>Know more about us</h3>
+
<p> Our Twitter mainpage: </p>
+
        <p> Wechat official public account: </p>
+
        <p style="text-align:center"><img style="display:inline-block;width:200px;height:200px;" src="https://static.igem.org/mediawiki/2018/5/56/T--XJTU-China--QRCode.jpg" /></p>
+
        <p> E-mail address: <a href="mailto:xjtuigem@outlook.com" >XJTU-China</a> </p>
+
<p> A <a href="http://parts.randolph.top">mirror</a> for synthetic biology hub (for mianland China users) </p>
+
 
</div>
 
</div>
  
<div class="clear extra_space"></div>
+
<!-- JS and external CSS -->
<div class="line_divider"></div>
+
<script type='text/javascript' src="https://2018.igem.org/wiki/index.php?title=Template:XJTU-China/home.js&action=raw&ctype=text/javascript"></script>
<div class="clear extra_space"></div>
+
<!-- script type="text/javascript" src="home.js"></script -->
  
<div class="column full_size" >
+
</body>
<h3> Description</h3>
+
<p>One may say that our project, the project of XJTU-China 2018, is established from two distinct point-of-view. The design philosophy of synthetic biology: top-down and bottom-up meets and thus is how we come up with this idea. </p>
+
<p>The first idea comes from the dillema for those who want to lose weight, or especilly for those who suffer from diabetes: health and taste. Sugar are delightful but the energy it provides may lead to trouble. That's the reason why a variety of sugar substitutes emerges, but none without a clear record of health concerns. That's the reason here we introduce psicose, a rare sugar, the C-3 epimer of fructose, which is the ultimate solution of saccrose substitute: a balance between sweetness and low energy (about 3% of that in saccrose).</p>
+
<p>Chemical manufacturing of psicose is laborous and poses trouble in chiral separation. Biomanufacturing is promising but suffers severely from low enzymatic activity. The goal of our team is to find a reliable, robust and high throughput method in screening for enzymes with high activity.</p>
+
<p>The second idea emerges from the concerns about the instability of traditional continuous-culture-based directed evolution. Why a accelerated Darwinian evolution is never achieved with simple tools of pressure-introducing such as toxic proteins or antibiotics? We would manage to build up a Standard Framework for Directed Evolution with detailed data and standarized procedures.</p>
+
<p>We are applying this exciting new method in searching for a more optimized enzyme for the biomanufacturing of psicose.</p>
+
</div>
+
  
<div class="column full_size" >
+
</html>
<h3>Gallery</h3>
+
<p style="text-align:center"><img style="display:inline-block;width:60%;" src="https://static.igem.org/mediawiki/2018/thumb/9/96/T--XJTU-China--labPhotoForSafetyForm-1.jpeg/800px-T--XJTU-China--labPhotoForSafetyForm-1.jpeg" />
+
<p style="text-align:center"> Lab overview 1 </p>
+
<div class="line_divider"></div>
+
<br />
+
</div>
+
  
<div class="box">
+
{{XJTU-China/Footer}}
 
+
<div class="list">
+
<ul>
+
<li class="p7"><a href="#"><img src="img/1.png" alt="" /></a></li>
+
<li class="p6"><a href="#"><img src="img/2.png" alt="" /></a></li>
+
<li class="p5"><a href="#"><img src="img/3.png" alt="" /></a></li>
+
<li class="p4"><a href="#"><img src="img/44.jpg" alt="" /></a></li>
+
<li class="p3"><a href="#"><img src="img/55.jpg" alt="" /></a></li>
+
<li class="p2"><a href="#"><img src="img/66.jpg" alt="" /></a></li>
+
<li class="p1"><a href="#"><img src="img/77.jpg" alt="" /></a></li>
+
</ul>
+
</div>
+
+
<a href="javascript:;" class="prev btn"><</a>
+
<a href="javascript:;" class="next btn">></a>
+
 
+
<div class="buttons">
+
<a href="javascript:;"><span class="blue"></span></a>
+
<a href="javascript:;"><span></span></a>
+
<a href="javascript:;"><span></span></a>
+
<a href="javascript:;"><span></span></a>
+
<a href="javascript:;"><span></span></a>
+
<a href="javascript:;"><span></span></a>
+
<a href="javascript:;"><span></span></a>
+
</div>
+
</div>
+
 
+
<script type="text/javascript">
+
var $a=$(".buttons a");
+
var $s=$(".buttons span");
+
var cArr=["p7","p6","p5","p4","p3","p2","p1"];
+
var index=0;
+
$(".next").click(
+
function(){
+
nextimg();
+
}
+
)
+
$(".prev").click(
+
function(){
+
previmg();
+
}
+
)
+
//上一张
+
function previmg(){
+
cArr.unshift(cArr[6]);
+
cArr.pop();
+
//i是元素的索引,从0开始
+
//e为当前处理的元素
+
//each循环,当前处理的元素移除所有的class,然后添加数组索引i的class
+
$("li").each(function(i,e){
+
$(e).removeClass().addClass(cArr[i]);
+
})
+
index--;
+
if (index<0) {
+
index=6;
+
}
+
show();
+
}
+
 
+
//下一张
+
function nextimg(){
+
cArr.push(cArr[0]);
+
cArr.shift();
+
$("li").each(function(i,e){
+
$(e).removeClass().addClass(cArr[i]);
+
})
+
index++;
+
if (index>6) {
+
index=0;
+
}
+
show();
+
}
+
 
+
//通过底下按钮点击切换
+
$a.each(function(){
+
$(this).click(function(){
+
var myindex=$(this).index();
+
var b=myindex-index;
+
if(b==0){
+
return;
+
}
+
else if(b>0) {
+
/*
+
* splice(0,b)的意思是从索引0开始,取出数量为b的数组
+
* 因为每次点击之后数组都被改变了,所以当前显示的这个照片的索引才是0
+
* 所以取出从索引0到b的数组,就是从原本的这个照片到需要点击的照片的数组
+
* 这时候原本的数组也将这部分数组进行移除了
+
* 再把移除的数组添加的原本的数组的后面
+
*/
+
var newarr=cArr.splice(0,b);
+
cArr=$.merge(cArr,newarr);
+
$("li").each(function(i,e){
+
$(e).removeClass().addClass(cArr[i]);
+
})
+
index=myindex;
+
show();
+
}
+
else if(b<0){
+
/*
+
* 因为b<0,所以取数组的时候是倒序来取的,也就是说我们可以先把数组的顺序颠倒一下
+
* 而b现在是负值,所以取出索引0到-b即为需要取出的数组
+
* 也就是从原本的照片到需要点击的照片的数组
+
* 然后将原本的数组跟取出的数组进行拼接
+
* 再次倒序,使原本的倒序变为正序
+
*/
+
cArr.reverse();
+
var oldarr=cArr.splice(0,-b)
+
cArr=$.merge(cArr,oldarr);
+
cArr.reverse();
+
$("li").each(function(i,e){
+
$(e).removeClass().addClass(cArr[i]);
+
})
+
index=myindex;
+
show();
+
}
+
})
+
})
+
 
+
//改变底下按钮的背景色
+
function show(){
+
$($s).eq(index).addClass("blue").parent().siblings().children().removeClass("blue");
+
}
+
 
+
//点击class为p2的元素触发上一张照片的函数
+
$(document).on("click",".p2",function(){
+
previmg();
+
return false;//返回一个false值,让a标签不跳转
+
});
+
 
+
//点击class为p4的元素触发下一张照片的函数
+
$(document).on("click",".p4",function(){
+
nextimg();
+
return false;
+
});
+
 
+
// 鼠标移入box时清除定时器
+
$(".box").mouseover(function(){
+
clearInterval(timer);
+
})
+
 
+
// 鼠标移出box时开始定时器
+
$(".box").mouseleave(function(){
+
timer=setInterval(nextimg,4000);
+
})
+
 
+
// 进入页面自动开始定时器
+
timer=setInterval(nextimg,4000);
+
</script>
+
 
+
<div style="text-align:center;clear:both">
+
<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
+
<script src="/follow.js" type="text/javascript"></script>
+
</div>
+
 
+
</body>
+
</html>
+

Latest revision as of 22:36, 17 October 2018

Sugar of the Future

D-psicose gives us a glimpse of what sugar in the future would be like. Completely safe and as tasty, but provides barely no energy. On the contrary, it even benefits diabetes and obesity and more!

It provides only 0.3% energy of sucrose, but is 70% as sweet.

Power of Evolution

Directed evolution (DE) is a Nobel Prize method in seeking for better enzymes. But screening manully is not even close to the real power of evolution.

We unleashed the power of antibiotic resistance as a quantitative reporter, and used Biosensors as a bridge to evolutional pressure. This is our secret in achieving extra high throughput!

Cascade of precision

Worrying about antibiotics are too toxic, or the threshold is not matched? Here we present our Tl-Cp cassete as a tunable resistance, which pull the evolutionary pressure to a suitable level.

Precision is never achieved without modelling! Come and see the math behind each level of regulation which eventually made the system possible.

Team

Meet our team members!

Sponsors