Team:XMU-China

From 2012.igem.org

(Difference between revisions)
 
(29 intermediate revisions not shown)
Line 1: Line 1:
-
<html>
+
{{:Team:XMU-China/hidden}}
 +
{{:Team:XMU-China/titlebar}}
 +
 
 +
 
 +
{{:Team:XMU-China/photogallery}}
 +
 
 +
 
 +
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-
<style>
+
<title>homepage</title>
-
html {background:#000}
+
 
-
body, ul {margin:0;padding:0}
+
<style type="text/css">
-
li {list-style:none}
+
#device_description {
-
img {border:none;display:block}
+
margin:0px;
-
.slide-wp {
+
width:439px;
-
width: 900px;
+
height:361px;
-
height: 300px;
+
background:#FFF;
-
overflow: hidden;
+
position: relative;
position: relative;
-
left: 25px;
+
top: 0px;
-
top: 25px;
+
}
-
}
+
#description_content {
-
.nav-wp {
+
font-family:"Times New Roman", Times, serif;
position: absolute;
position: absolute;
-
top: 300px;
+
top:230px;
-
margin-top: 170px;
+
        left:260px;
-
left: 462px;
+
float:right;
-
margin-left: -100px;
+
z-index:8;
-
border-radius: 4px;
+
width:170px;
-
-moz-border-radius: 4px;
+
-
-webkit-border-radius: 4px;
+
-
padding: 0 20px 6px 10px;
+
-
_padding: 0 20px 2px 10px;
+
-
background-color: #0099cc;
+
}
}
-
.nav li {
+
#tablit {
-
float: left;
+
margin:0px;
 +
width:439px;
 +
height:361px;
 +
background:#FFF;
 +
position: relative;
 +
top: 0px;
 +
}
 +
#tablit dl{margin:0px;  width:439px; font-size:20px;}
 +
#tablit dl dt{ margin:0px;float:left; width:9px; height:41px; }
 +
#tablit dl dd{ margin:0px;float:left;width:215px;height:41px; text-align:center;}
 +
#tablit .on{ margin:0px; color:#FFF; background:url(https://static.igem.org/mediawiki/2012/a/ac/Tab_on.png); font:larger}
 +
#tablit .out{ margin:0px; color:#FFF;background:#FC49B6;}
 +
.tabcon{
 +
margin:0px;
 +
padding:10px;
 +
width:419px;
 +
height:330px;
 +
background: #0099CC;
 +
clear:both;
 +
font-size: 14px;
 +
color:#FFFBF0;
 +
line-height:17px;
 +
overflow: hidden;
 +
}.dis{ margin:0px; display:none;font-size:14px;line-height:17px;}
 +
 
 +
 
 +
body {
margin-left: 10px;
margin-left: 10px;
-
font-size: 20px;
+
margin-top: 10px;
-
font-weight: bold;
+
-
font-family: tahoma;
+
-
color: #004f7c;
+
-
cursor: pointer;
+
-
height: 22px;
+
}
}
-
.nav li.cur{
+
 
-
color: #fc49b6
+
#tablit .tabcon.dis a {
 +
color: #FFF;
 +
text-align: right;
 +
vertical-align: bottom;
}
}
-
.next {
+
#tablit .tabcon a {
-
position:absolute;
+
color: #FFF;
-
top: 0;
+
text-align: right;
-
left: 160px;
+
vertical-align: bottom;
-
padding: 4px 8px;
+
-
color: #fff;
+
-
height: 20px;
+
-
border-radius: 4px;
+
-
-moz-border-radius: 4px;
+
-
-webkit-border-radius: 4px;
+
-
cursor: pointer;
+
-
background-color: #0099cc;
+
-
font-weight: normal;
+
}
}
 +
 +
#bomtab{
 +
background-color:#f8daef;
 +
border:#00F;
 +
border:0px none #F9F;
 +
margin-left:25px;
 +
margin-top:20px;
 +
margin-bottom:auto;
 +
position: relative;
 +
        top: 55px;
 +
 +
}
 +
 +
 +
#bomtab tr #rb {
 +
border-top-width: 0px;
 +
border-right-width: 3px;
 +
border-bottom-width: 0px;
 +
border-left-width: 0px;
 +
border-top-style: ridge;
 +
border-right-style: ridge;
 +
border-bottom-style: ridge;
 +
border-left-style: ridge;
 +
border-top-color: #FCF;
 +
border-right-color: #FFF;
 +
border-bottom-color: #FCF;
 +
border-left-color: #FCF;
 +
width:300px;
 +
}
 +
#bomtab tr #title {
 +
text-align:center;
 +
font-size: 20px;
 +
color: #09C;
 +
}
 +
</style>
</style>
 +
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
</head>
</head>
-
<body>
 
-
<table>
+
<body><table width="900" border="0" cellpadding="0" cellspacing="0" style="margin-left:25px">
-
<tr><td>
+
  <tr>
-
<div id="slider" class="slide-wp">
+
    <td height="361">
-
<ul>
+
  <div id="tablit">
-
<li><a href="http://www.cnblogs.com/hongru/" target="_blank"><img src="https://static.igem.org/mediawiki/2012/a/a0/Xmu_photo_001.jpg" width="900" height="300"></a></li>
+
    <dl>
-
<li><a href="http://www.cnblogs.com/hongru/" target="_blank"><img src="https://static.igem.org/mediawiki/2012/3/3e/IMG_0644.jpg" width="900" height="300"></a></li>
+
        <dd class="on">ABSTRACT</dd>
-
<li><a href="http://www.cnblogs.com/hongru/" target="_blank"><img src="https://static.igem.org/mediawiki/2012/c/c6/IMG_0675.jpg" width="900" height="300"></a></li>
+
        <dt></dt>
-
<li><a href="http://www.cnblogs.com/hongru/" target="_blank"><img src="https://static.igem.org/mediawiki/2012/c/c2/IMG_0680.jpg" width="900" height="300"></a></li>
+
        <dd class="out">PROGRESS</dd>
-
<li><a href="http://www.cnblogs.com/hongru/" target="_blank"><img src="https://static.igem.org/mediawiki/2012/4/49/IMG_0699.jpg" width="900" height="300"></a></li>
+
    </dl>
-
</ul>
+
<div class="tabcon">
 +
  <p>  XMU's 2012 iGEM team has constructed a fluorescent digital display device with synthetic logic gates, which is able to respond to signals by displaying and switching numbers. We put GFP equipped with degradation tags in downstream to illuminate our numbers and change them quickly as well. Considering our engineering background, we accordingly employ cell immobilization to build our device. Engineering bacteria have been embedded in intra-hallow calcium alginate microcapsules and in PDMDAAC-NaCS microcapsules, respectively. In addition, 3D CAD design is performed for a perfect device&#8230;
 +
  <hr><a href="https://2012.igem.org/Team:XMU-China/abstract">[see more]</a></div>
 +
 +
 +
<!--ABSTRACT END -->
 +
  <!--PROGRESS-->
 +
 +
    <div class="tabcon dis"><p style="font-size:16px"><strong>Asian iGEM Jamboree, 5-7 October, HKUST</strong></p> <br>
 +
XMU-China has won a GOLD medal and become one of the 17 out of 53 teams advancing to World Championship . We are looking forward to present our project to the whole world at MIT. You are warmly welcomed to attend.<br><br>
 +
<b>Venue: Room 32-123</b><br><br>
 +
<b>Date: 11:00 AM, Nov 3rd, Saturday</b><br><br>
 +
<hr>
 +
<a href="https://2012.igem.org/Team:XMU-China/wetlabjournal">[see more]</a>
</div>
</div>
-
<div class="nav-wp">
+
 
-
<ul id="nav" class="nav">
+
-
<li onClick="mySlider.pos(0)">●</li>
+
-
<li onClick="mySlider.pos(1)">●</li>
+
-
<li onClick="mySlider.pos(2)">●</li>
+
-
<li onClick="mySlider.pos(3)">●</li>
+
-
<li onClick="mySlider.pos(4)">●</li>
+
-
</ul>
+
-
<a class="next" onClick="mySlider.move()">next</a>
+
</div>
</div>
-
<br>
+
    </td>
-
<br>
+
    <!--tab end-->
 +
   
 +
    <!--device description-->
 +
    <td height="auto" >
 +
    <div id="device_description" >
 +
      <p style=" font-size:22px; color:#A10066; line-height:24px"  >
 +
        DEVICE DEMONSTRATION</p>
 +
      <span style=" font-size:28px; color:#004f7c; line-height:24px">E.LUMOLI DISPLAYER</span></p>
 +
 
 +
        <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="439" height="329" align="left" id="FlashID" title="device">
 +
          <param name="movie" value="https://static.igem.org/mediawiki/2012/3/3c/2Ddevice.swf">
 +
          <param name="quality" value="high">
 +
          <param name="wmode" value="opaque">
 +
          <param name="swfversion" value="6.0.65.0">
 +
          <!-- 此 param 标签提示使用 Flash Player 6.0 r65 和更高版本的用户下载最新版本的 Flash Player。如果您不想让用户看到该提示，请将其删除。 -->
 +
          <param name="expressinstall" value="Scripts/expressInstall.swf">
 +
          <param name="PLAY" value="false">
 +
          <param name="SCALE" value="exactfit">
 +
          <!-- 下一个对象标签用于非 IE 浏览器。所以使用 IECC 将其从 IE 隐藏。 -->
 +
          <!--[if !IE]>-->
 +
          <object data="flash/2Ddevice.swf" type="application/x-shockwave-flash" width="439" height="329" align="left">
 +
            <!--<![endif]-->
 +
            <param name="quality" value="high">
 +
            <param name="wmode" value="opaque">
 +
            <param name="swfversion" value="6.0.65.0">
 +
            <param name="expressinstall" value="Scripts/expressInstall.swf">
 +
            <param name="PLAY" value="false">
 +
            <param name="SCALE" value="exactfit">
 +
            <!-- 浏览器将以下替代内容显示给使用 Flash Player 6.0 和更低版本的用户。 -->
 +
         
 +
            <!--[if !IE]>-->
 +
          </object>
 +
          <!--<![endif]-->
 +
        </object>
 +
        <br>
 +
     
 +
      <div id="description_content">By adding different inducers, cells in tubes can respond to different signals by display and switching numbers.
 +
</div>
 +
      <p style=" font-size:28px; color:#004f7c">&nbsp;</p>
 +
     
 +
    <!--device description end-->
 +
    </td>
 +
  </tr>
 +
</table>
 +
<p></p>
 +
<p><table id="bomtab" width="900" height="176">
 +
<tr ><td id="title" width="300">Digital Display</td>
 +
<td id="title" width="300">Immobilization</td>
 +
<td id="title" width="300">Time delay</td></tr>
 +
<tr><td id="rb">Synthetic circuits with genetic logic gates, which compute extracellular and intracellular signals and elicit response differently.<a id="more" href="https://2012.igem.org/Team:XMU-China/digitaldisplay">[see more]</a></td>
 +
<td id="rb">Immobilization of fluorescent <I>E.coli</I> cells. Design a bioreactor for numeric display.<a id="more" href="https://2012.igem.org/Team:XMU-China/cellimmobilization">[see more]</a></td>
 +
<td><p>Testing the delay of time for GFP expression when we use different strength of RBS.<a id="more" href="https://2012.igem.org/Team:XMU-China/timedelay">[see more]</a></p></td></tr>
 +
 
 +
</table></p>
 +
<br><br><br>
<script type="text/javascript">
<script type="text/javascript">
-
var HR = {
+
swfobject.registerObject("FlashID");
-
$ : function(i) {return document.getElementById(i)},
+
</script>
-
$$ : function(c, p) {return p.getElementsByTagName(c)},
+
</body>
-
ce : function(i, t) {
+
 
-
  var o = document.createElement(i);
+
<script type="text/javascript">
-
  t.appendChild(o);
+
 
-
  return o;
+
var mDD = document.getElementById("tablit").getElementsByTagName("dd");
-
}
+
var mDIV= document.getElementById("tablit").getElementsByTagName("div");
-
};
+
 
-
HR.slider3D = function () {
+
 
-
var init = function (o) {
+
for (var i=0;i<mDD.length;i++){
-
  this.o = o;
+
(function(index) {
-
  var wp = HR.$(o.id), ul = HR.$$('ul', wp)[0], li = this.li = HR.$$('li', ul);
+
   mDD[index].onmouseover = function() {
-
  this.l = li.length;
+
   if (mDD[index].className == 'out') {
-
  this.w = wp.offsetWidth;
+
    for (var j = 0; j < mDD.length; j++) {
-
  this.h = wp.offsetHeight;
+
    mDD[j].className = 'out';
-
  this.at = o.auto? o.auto : 4;
+
    mDIV[j].style.display = 'none';
-
  var con = this.con = HR.ce('div', wp);
+
     }
-
  con.style.cssText = 'position:absolute;left:0;top:0;width:'+this.w+'px;height:'+this.h+'px';
+
     mDD[index].className = 'on';
-
  ul.style['display'] = 'none'; 
+
     mDIV[index].style.display = 'block';
-
  this.a1 = HR.ce('a', con); 
+
-
  this.a1.style.cssText = 'position:absolute;left:0;top:0;overflow:hidden'; 
+
-
  this.a2 = HR.ce('a', con);
+
-
  this.a2.style.cssText = 'position:absolute;top:0;right:0;overflow:hidden';
+
-
  this.a1.innerHTML = this.a2.innerHTML = '<img alt="" />';
+
-
  this.img = HR.$$('img', ul);
+
-
  this.s = o.maskSize ? o.maskSize : 5;
+
-
 
+
-
  this.mask11 = HR.ce('span', this.a1);
+
-
  this.mask12 = HR.ce('span', this.a1);
+
-
  this.mask21 = HR.ce('span', this.a2);
+
-
   this.mask22 = HR.ce('span', this.a2);
+
-
 
+
-
  this.pos(0);
+
-
}
+
-
init.prototype = {
+
-
  pos : function (i) {
+
-
   clearInterval(this.li[i].a); clearInterval(this.au); this.au = 0; this.cur = i;
+
-
  var navli = HR.$$('li', HR.$(this.o.navId));
+
-
  for (var j=0; j<navli.length; j++) {
+
-
    navli[j].className = i == j ? 'cur' : '';
+
-
  }
+
-
  var img1 = HR.$$('img', this.a1)[0], img2 = HR.$$('img', this.a2)[0], _this = this;
+
-
  img1.src = i==0 ? this.img[this.l-1].src : this.img[i-1].src;
+
-
  img1.width = this.w;
+
-
  img2.src = this.img[i].src;
+
-
  img2.width = 0;
+
-
  img1.height = img2.height = this.h;
+
-
  this.mask11.style.cssText = 'position:absolute;left:0;top:0;font-size:0;overflow:hidden;width:0;height:0;border-color:black transparent transparent black;border-style:solid dashed dashed solid;border-width:0 '+this.w/2+'px';
+
-
  this.mask12.style.cssText = 'position:absolute;left:0;bottom:0;font-size:0;overflow:hidden;width:0;height:0;border-color:transparent transparent black black;border-style:dashed dashed solid solid;border-width:0 '+this.w/2+'px';
+
-
  this.mask21.style.cssText = 'position:absolute;right:0;top:0;font-size:0;overflow:hidden;width:0;height:0;border-color:black black transparent transparent;border-style:solid solid dashed dashed;border-width:0px';
+
-
  this.mask22.style.cssText = 'position:absolute;right:0;bottom:0;font-size:0;overflow:hidden;width:0;height:0;border-color:transparent black black transparent;border-style:dashed solid solid dashed;border-width:0px';
+
-
  this.li[i].a = setInterval(function(){_this.anim(i)}, 20);
+
-
  },
+
-
  anim : function (i) {
+
-
  var w1 = HR.$$('img', this.a1)[0].width, w2  = HR.$$('img', this.a2)[0].width;
+
-
  if (w2 == this.w) {
+
-
     clearInterval(this.li[i].a);
+
-
    HR.$$('img', this.a1)[0].width = 0;
+
-
    HR.$$('img', this.a2)[0].width = this.w;
+
-
    this.mask11.style.borderLeftWidth = this.mask11.style.borderRightWidth = this.mask12.style.borderLeftWidth = this.mask12.style.borderRightWidth = '0px';
+
-
    this.mask11.style.borderTopWidth = this.mask11.style.borderBottomWidth = this.mask12.style.borderTopWidth = this.mask12.style.borderBottomWidth = this.h/this.s + 'px';
+
-
    this.mask21.style.borderLeftWidth = this.mask21.style.borderRightWidth = this.mask22.style.borderLeftWidth = this.mask22.style.borderRightWidth = this.w/2 + 'px';
+
-
    this.mask21.style.borderTopWidth = this.mask21.style.borderBottomWidth = this.mask22.style.borderTopWidth = this.mask22.style.borderBottomWidth = '0px';
+
-
  }else {
+
-
     HR.$$('img', this.a1)[0].width -= Math.ceil((this.w-w2)*.13);
+
-
    HR.$$('img', this.a2)[0].width += Math.ceil((this.w-w2)*.13);
+
-
     this.mask11.style.borderLeftWidth = this.mask11.style.borderRightWidth = this.mask12.style.borderLeftWidth = this.mask12.style.borderRightWidth = HR.$$('img', this.a1)[0].width/2 + 'px';
+
-
    this.mask11.style.borderTopWidth = this.mask11.style.borderBottomWidth = this.mask12.style.borderTopWidth = this.mask12.style.borderBottomWidth = HR.$$('img', this.a2)[0].width*this.h/(this.s*this.w) + 'px';
+
-
    this.mask21.style.borderLeftWidth = this.mask21.style.borderRightWidth = this.mask22.style.borderLeftWidth = this.mask22.style.borderRightWidth = HR.$$('img', this.a2)[0].width/2 + 'px';
+
-
    this.mask21.style.borderTopWidth = this.mask21.style.borderBottomWidth = this.mask22.style.borderTopWidth = this.mask22.style.borderBottomWidth = this.h/this.s - HR.$$('img', this.a2)[0].width*this.h/(this.s*this.w) + 'px';
+
-
    if (!this.au) this.auto();
+
   }
   }
-
  },
 
-
  auto : function () {
 
-
  var _this = this;
 
-
  this.au = setInterval(function(){_this.move()}, this.at*1000);
 
-
  },
 
-
  move : function () {
 
-
  var n = this.cur==this.l-1 ? 0 : this.cur+1;
 
-
  this.pos(n);
 
   }
   }
-
}
 
-
return init;
 
-
}();
 
-
var mySlider = new HR.slider3D({
 
-
id: 'slider',
 
-
maskSize: 6,
 
-
navId: 'nav',
 
-
auto: 4
 
-
})</script><br>
 
-
<p></p>
 
-
</td></tr></table>
 
-
</body>
+
})(i);
 +
}
 +
 
 +
</script>
 +
 
</html>
</html>

Latest revision as of 03:05, 27 October 2012

XMU



homepage

ABSTRACT
PROGRESS

XMU's 2012 iGEM team has constructed a fluorescent digital display device with synthetic logic gates, which is able to respond to signals by displaying and switching numbers. We put GFP equipped with degradation tags in downstream to illuminate our numbers and change them quickly as well. Considering our engineering background, we accordingly employ cell immobilization to build our device. Engineering bacteria have been embedded in intra-hallow calcium alginate microcapsules and in PDMDAAC-NaCS microcapsules, respectively. In addition, 3D CAD design is performed for a perfect device…

[see more]

Asian iGEM Jamboree, 5-7 October, HKUST


XMU-China has won a GOLD medal and become one of the 17 out of 53 teams advancing to World Championship . We are looking forward to present our project to the whole world at MIT. You are warmly welcomed to attend.

Venue: Room 32-123

Date: 11:00 AM, Nov 3rd, Saturday

[see more]

DEVICE DEMONSTRATION

E.LUMOLI DISPLAYER


By adding different inducers, cells in tubes can respond to different signals by display and switching numbers.

 

Digital Display Immobilization Time delay
Synthetic circuits with genetic logic gates, which compute extracellular and intracellular signals and elicit response differently.[see more] Immobilization of fluorescent E.coli cells. Design a bioreactor for numeric display.[see more]

Testing the delay of time for GFP expression when we use different strength of RBS.[see more]




Retrieved from "http://2012.igem.org/Team:XMU-China"