Team:XMU-China

From 2012.igem.org

(Difference between revisions)
Line 1: Line 1:
-
{{Team:XMU-China/hidden}}
+
<html>
-
{{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" />
-
<title>homepage</title>
+
<style>
-
 
+
html {background:#000}
-
<style type="text/css">
+
body, ul {margin:0;padding:0}
-
#device_description {
+
li {list-style:none}
-
margin:0px;
+
img {border:none;display:block}
-
width:439px;
+
.slide-wp {
-
height:361px;
+
width: 900px;
-
background:#FFF;
+
height: 300px;
 +
overflow: hidden;
position: relative;
position: relative;
-
top: 200px;
+
left: 25px;
 +
top: 25px;
}
}
-
#tablit {
+
.nav-wp {
-
margin:0px;
+
position: absolute;
-
width:439px;
+
top: 300px;
-
height:361px;
+
margin-top: 170px;
-
background:#FFF;
+
left: 462px;
-
position: relative;
+
margin-left: -100px;
-
top: 200px;
+
border-radius: 4px;
 +
-moz-border-radius: 4px;
 +
-webkit-border-radius: 4px;
 +
padding: 0 20px 6px 10px;
 +
_padding: 0 20px 2px 10px;
 +
background-color: #0099cc;
}
}
-
#tablit dl{margin:0px;  width:439px; font-size:20px;}
+
.nav li {
-
#tablit dl dt{ margin:0px;float:left; width:9px; height:41px; }
+
float: left;
-
#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;
-
margin-top: 10px;
+
font-size: 20px;
 +
font-weight: bold;
 +
font-family: tahoma;
 +
color: #004f7c;
 +
cursor: pointer;
 +
height: 22px;
}
}
-
 
+
.nav li.cur{
-
#tablit .tabcon.dis a {
+
color: #fc49b6
-
color: #FFF;
+
-
text-align: right;
+
-
vertical-align: bottom;
+
}
}
-
#tablit .tabcon a {
+
.next {
-
color: #FFF;
+
position:absolute;
-
text-align: right;
+
top: 0;
-
vertical-align: bottom;
+
left: 160px;
 +
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;
 
-
position: relative;
 
-
        top: 225px;
 
-
}
 
-
 
-
 
-
#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>
</head>
</head>
 +
<body>
-
<body><table width="900" border="0" cellspacing="0" cellpadding="0" style="margin-left:25px">
+
<table>
-
  <tr>
+
<tr><td>
-
    <td height="361">
+
<div id="slider" class="slide-wp">
-
  <div id="tablit">
+
<ul>
-
    <dl>
+
<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>
-
        <dd class="on">ABSTRACT</dd>
+
<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>
-
        <dt></dt>
+
<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>
-
        <dd class="out">PROGRESS</dd>
+
<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>
-
    </dl>
+
<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>
-
<div class="tabcon">
+
</ul>
-
  <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/Template:Team:XMU-China/abstract">[see more]</a></div>
+
-
+
-
+
-
<!--ABSTRACT END -->
+
-
  <!--PROGRESS-->
+
-
+
-
    <div class="tabcon dis">Sunday, August 26th<br>
+
-
Digital Display:
+
-
Ligated 18AI and RETPcPb and put the ligation product in 16ºC overnight for the transformation in the next day.<hr>
+
-
+
-
Time Delay:
+
-
Goal: To do the ligation of pBAD-RBS0.6 and pBAD-RBS0.07.
+
-
Isolate plasmids and ran on a gel. The result for analysis was correct. Cause the bands of pBAD hardly to be seem, we increased the volume of pBAD when ligation. <hr>
+
-
+
-
Fluorescence Test:
+
-
We changed the abrabinose concentration from high levels to lower ones according to last fluorescence measurements of PBADRLT. Besides, we took some kinetic curves in all concentration levels we had taken before for comparison. The analysis of these data will help us improve our efficiency in the coming fluorescence measurements<hr>
+
-
+
-
Design:
+
-
We did some card design and drew some drafts.<hr>
+
-
<a href="https://2012.igem.org/Template: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>
-
    </td>
+
<br>
-
    <!--tab end-->
+
<br>
-
   
+
-
    <!--device description-->
+
-
    <td height="361" >
+
-
    <div id="device_description" >
+
-
      <p style=" font-size:24px; color:#A10066;"  >
+
-
        DEVICE DESCRIPTION</p>
+
-
      <p style=" font-size:28px; color:#004f7c">E.LUMOLI DISPLAYER</p>
+
-
      <p style=" font-size:18px;"><img src="https://static.igem.org/mediawiki/2012/a/a4/Device.png
+
-
" width="133" height="141" style="float:right; "/>how to use balabala how 
+
-
        to use balabala how to
+
-
        use balabala how to use
+
-
        balabala how to how to
+
-
        use balabala how to use
+
-
        balabala how to use
+
-
    balabala how to use balabala how to use how to use balabala how to use how to use balabala </p></div>
+
-
    <!--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.</td>
+
-
<td id="rb">Immobilization of Fluorescent <I>E.coli</I> cells .Design A Bioreactor for Numeric Display</td>
+
-
<td>Testing the delay of time for GFP expression when we use different strength of RBS</td></tr>
+
-
 
+
-
</table></p>
+
-
</body>
+
-
 
+
<script type="text/javascript">
<script type="text/javascript">
-
 
+
var HR = {
-
var mDD = document.getElementById("tablit").getElementsByTagName("dd");
+
$ : function(i) {return document.getElementById(i)},
-
var mDIV= document.getElementById("tablit").getElementsByTagName("div");
+
$$ : function(c, p) {return p.getElementsByTagName(c)},
-
 
+
ce : function(i, t) {
-
 
+
  var o = document.createElement(i);
-
for (var i=0;i<mDD.length;i++){
+
  t.appendChild(o);
-
  (function(index) {
+
  return o;
-
   mDD[index].onmouseover = function() {
+
}
-
  if (mDD[index].className == 'out') {
+
};
-
    for (var j = 0; j < mDD.length; j++) {
+
HR.slider3D = function () {
-
    mDD[j].className = 'out';
+
  var init = function (o) {
-
    mDIV[j].style.display = 'none';
+
   this.o = o;
-
    }
+
  var wp = HR.$(o.id), ul = HR.$$('ul', wp)[0], li = this.li = HR.$$('li', ul);
-
    mDD[index].className = 'on';
+
  this.l = li.length;
-
     mDIV[index].style.display = 'block';
+
  this.w = wp.offsetWidth;
 +
  this.h = wp.offsetHeight;
 +
  this.at = o.auto? o.auto : 4;
 +
  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';
 +
  ul.style['display'] = 'none'; 
 +
  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>
-
})(i);
+
</body>
-
}
+
-
 
+
-
</script>
+
-
 
+
</html>
</html>

Revision as of 08:38, 23 September 2012




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