Team:NYMU-Taipei

From 2008.igem.org

(Difference between revisions)
(New main page design!)
Line 1: Line 1:
-
[[Image:NYMU_banner 700px.png]]
 
-
 
-
<!--[[Image:MainCartoon.png|border|center|Bac2Kidney]]-->
 
-
 
<html>
<html>
 +
<script>
 +
function haxbackground(){
 +
document.getElementById('cartoonmap').style.backgroundImage='url(https://static.igem.org/mediawiki/2008/6/6e/NYMU_main_page_800bw.png)';
 +
}
 +
function unhaxbackground(){
 +
document.getElementById('cartoonmap').style.backgroundImage="url('https://static.igem.org/mediawiki/2008/b/be/NYMU_main_page_800.png')";
 +
}
 +
</script>
<style>
<style>
-
#cartoonmap{
+
dl#cartoonmap{
 +
background:url('https://static.igem.org/mediawiki/2008/b/be/NYMU_main_page_800.png') transparent top left no-repeat;
display:block;
display:block;
position:relative;
position:relative;
-
width:700px;
+
width:800px;
-
height:515px;
+
height:550px;
 +
margin:0px;
-
background:url(https://static.igem.org/mediawiki/2008/5/55/NYMU-Taipei.png) no-repeat;
 
border:1px solid gray;
border:1px solid gray;
 +
}
 +
dl#cartoonmap dt{
 +
display:none;
}
}
-
 
+
/* Common stuff between links */
-
/* place the divs */
+
dl#cartoonmap dd a{
-
#cartoonmap div{
+
position:absolute;
position:absolute;
-
padding:0;
 
-
margin:0;
 
-
}
 
-
#cartoonmap #sensor{
+
border:1px dashed silver;
-
left: 0px;
+
text-decoration: none;
-
top: 160px;
+
}
}
-
#cartoonmap #attachment{
+
dl#cartoonmap dd a span{
-
left: 140px;
+
display:none;
-
top: 360px;
+
-
}
+
-
#cartoonmap #urea{
+
-
left: 350px;
+
-
top: 155px;
+
-
}
+
-
#cartoonmap #phosphate{
+
-
left: 398px;
+
-
top: 155px;
+
-
}
+
-
#cartoonmap #guanidine{
+
-
left: 440px;
+
-
top: 155px;
+
-
}
+
-
#cartoonmap #timeregulation{
+
-
left: 530px;
+
-
top: 207px;
+
}
}
-
/* size-ify the positioned the anchors, also z-index them */
+
/* link positions (x,y,w,h) */
-
#cartoonmap a#asensor{
+
dl#cartoonmap dd#ph a{ left:0px; bottom:0px; width:135px; height:370px; }
-
display:block;
+
dl#cartoonmap dd#at a{ left:135px; bottom:0px; width:100px; height:185px; }
-
width: 300px;
+
dl#cartoonmap dd#u a{ left:235px; bottom:0px; width:85px; height:185px; }
-
height: 200px;
+
dl#cartoonmap dd#g a{ left:320px; bottom:0px; width:100px; height:185px; }
-
z-index:200;
+
dl#cartoonmap dd#p a{ left:420px; bottom:0px; width:110px; height:185px; }
-
}
+
dl#cartoonmap dd#time a{ left:530px; bottom:0px; width:270px; height:300px; }
-
#cartoonmap a#aattachment{
+
-
display:block;
+
-
width: 400px;
+
-
height: 145px;
+
-
z-index:200;
+
-
}
+
-
#cartoonmap a#aurea{
+
-
display:block;
+
-
width: 48px;
+
-
height: 185px;
+
-
z-index:200;
+
-
}
+
-
#cartoonmap a#aphosphate{
+
-
display:block;
+
-
width: 42px;
+
-
height: 185px;
+
-
z-index:200;
+
-
}
+
-
#cartoonmap a#aguanidine{
+
-
display:block;
+
-
width: 51px;
+
-
height: 185px;
+
-
z-index:200;
+
-
}
+
-
#cartoonmap a#atimeregulation{
+
-
display:block;
+
-
width: 160px;
+
-
height: 100px;
+
 +
/* link hover doings */
 +
dl#cartoonmap dd a:hover{
 +
border-style:solid;
 +
border-width:1px;
 +
background:url('https://static.igem.org/mediawiki/2008/b/be/NYMU_main_page_800.png') transparent top left no-repeat;
}
}
-
#cartoonmap a#asensor,
+
/* colored borders! */
-
#cartoonmap a#aattachment,
+
dl#cartoonmap dd#ph a:hover, dl#cartoonmap dd#ph a:hover span, dl#cartoonmap dd#ph a:hover span div.first{ border-color:violet; }
-
#cartoonmap a#aurea,
+
dl#cartoonmap dd#at a:hover, dl#cartoonmap dd#at a:hover span, dl#cartoonmap dd#at a:hover span div.first{ border-color:orange; }
-
#cartoonmap a#aguanidine,
+
dl#cartoonmap dd#u a:hover, dl#cartoonmap dd#u a:hover span, dl#cartoonmap dd#u a:hover span div.first{ border-color:red; }
-
#cartoonmap a#aphosphate,
+
dl#cartoonmap dd#g a:hover, dl#cartoonmap dd#g a:hover span, dl#cartoonmap dd#g a:hover span div.first{ border-color:gold; }
-
#cartoonmap a#atimeregulation{
+
dl#cartoonmap dd#p a:hover, dl#cartoonmap dd#p a:hover span, dl#cartoonmap dd#p a:hover span div.first{ border-color:green; }
-
border:1px dashed #c0c0c0;
+
dl#cartoonmap dd#time a:hover, dl#cartoonmap dd#time a:hover span, dl#cartoonmap dd#time a:hover span div.first{ border-color:lightblue; }
-
position:absolute;
+
-
left:0px;
+
-
top:0px;
+
-
z-index:200;
+
-
}
+
 +
dl#cartoonmap dd#ph a:hover span div.first {background:#ecf; color:#333;}
 +
dl#cartoonmap dd#at a:hover span div.first {background:#fc3; color:#333;}
 +
dl#cartoonmap dd#u a:hover span div.first {background:#fcc; color:#333;}
 +
dl#cartoonmap dd#g a:hover span div.first {background:#ffa; color:#333;}
 +
dl#cartoonmap dd#p a:hover span div.first {background:#cfc; color:#333;}
 +
dl#cartoonmap dd#time a:hover span div.first {background:lightblue; color:#333;}
 +
 +
/* subsequent hover positions (change when link positions change) (-left,h-imgH) */
 +
dl#cartoonmap dd#ph a:hover{ background-position:0px -180px; }
 +
dl#cartoonmap dd#at a:hover{ background-position:-135px -365px; }
 +
dl#cartoonmap dd#u a:hover{ background-position:-235px -365px; }
 +
dl#cartoonmap dd#g a:hover{ background-position:-320px -365px; }
 +
dl#cartoonmap dd#p a:hover{ background-position:-420px -365px; }
 +
dl#cartoonmap dd#time a:hover{ background-position:-530px -250px; }
/*
/*
-
position the hovered spans the same as one particular place (the title)
+
link hover spans place everything at (180,10)
-
calculation of hover positions:
+
put=new-old puttop=new-(imageheight-(bottom+height))
-
left = title.left-hover.parent.left
+
-
top = title.top-hover.parent.top
+
*/
*/
-
#cartoonmap #bactokidney{
+
dl#cartoonmap dd a:hover span{
 +
display:block;
position:absolute;
position:absolute;
-
display:block;
+
 
-
left:305px;
+
width:600px;
-
top:15px;
+
height:206px;
-
width:370px;
+
 
-
height:110px;
+
border-width:1px;
 +
border-style:solid;
 +
 
 +
color:black;
 +
background-color:white;
}
}
-
#cartoonmap a:hover span.descr{
+
dl#cartoonmap dd a:hover span div.first{
-
position:absolute;
+
display:block;
display:block;
-
width:380px;
+
font-size:120%;
-
height:120px;
+
font-weight:bold;
 +
padding:2px;
 +
text-align:center;
 +
border-bottom:1px dashed;
}
}
-
#cartoonmap a#asensor:hover span.descr{
+
dl#cartoonmap dd a:hover span div.rest{
-
left:300px;
+
font-size:12pt;
-
top:-150px;
+
font-face:Arial;
 +
margin-left:1em;
}
}
-
#cartoonmap a#aattachment:hover span.descr{
+
dl#cartoonmap dd#ph a:hover span{
-
left:160px;
+
left:180px;
-
top:-350px;
+
top:-170px;
}
}
-
#cartoonmap a#aurea:hover span.descr{
+
dl#cartoonmap dd#at a:hover span{
-
left:-50px;
+
left:45px;
-
top:-145px;
+
top:-355px;
}
}
-
#cartoonmap a#aphosphate:hover span.descr{
+
dl#cartoonmap dd#u a:hover span{
-
left:-98px;
+
left:-55px;
-
top:-145px;
+
top:-355px;
}
}
-
#cartoonmap a#aguanidine:hover span.descr{
+
dl#cartoonmap dd#g a:hover span{
left:-140px;
left:-140px;
-
top:-145px;
+
top:-355px;
}
}
-
#cartoonmap a#atimeregulation:hover span.descr{
+
dl#cartoonmap dd#p a:hover span{
-
left:-230px;
+
left:-240px;
-
top:-197px;
+
top:-355px;
 +
}
 +
dl#cartoonmap dd#time a:hover span{
 +
left:-350px;
 +
top:-240px;
}
}
 +
/* Others that don't fit into a pattern */
 +
dl#cartoonmap dd#banner span img{
 +
position:absolute;
 +
left:183px;
 +
top:13px;
 +
width:600px;
 +
height:200px;
-
/* hide stuff */
+
/* For preloading purposes only */
-
#cartoonmap a span.descr, #cartoonmap a:visited span.descr{
+
background:url('https://static.igem.org/mediawiki/2008/6/6e/NYMU_main_page_800bw.png') transparent no-repeat;
-
display:none;
+
background-position:-800px -800px;
}
}
 +
</style>
 +
<dl id="cartoonmap">
 +
<dt>Banner</dt>
 +
<dd id="banner">
 +
<span><img src="https://static.igem.org/mediawiki/2008/9/92/NYMU_banner_600.png" width="600" alt="BacToKidney - A better quality of life"></span>
 +
</dd>
-
/* style stuff */
+
<dt>pH Sensor</dt>
-
#cartoonmap a{
+
<dd id="ph"><a href="./Team:NYMU-Taipei/Project/pH_Sensor" onmouseover="haxbackground();" onmouseout="unhaxbackground();">
-
text-decoration:none;
+
<span><div class="first">pH Sensor</div>
-
}
+
<div class="rest">A sensor of proton concentration (pH). Activates in a high pH environment.</div></span>
-
#cartoonmap span.n{
+
</a></dd>
-
color:gray;
+
 
-
font-size:24pt;
+
<dt>Attachment</dt>
-
position:absolute;
+
<dd id="at"><a href="./Team:NYMU-Taipei/Project/Attachment" onmouseover="haxbackground();" onmouseout="unhaxbackground();">
-
bottom:5px;
+
<span><div class="first">Attachment</div>
-
left:5px;
+
<div class="rest">Attachment to the small intestine.</div></span>
-
}
+
</a></dd>
-
#cartoonmap a:hover{
+
 
-
border:1px solid black;
+
<dt>Urea</dt>
-
}
+
<dd id="u"><a href="./Team:NYMU-Taipei/Project/Urea" onmouseover="haxbackground();" onmouseout="unhaxbackground();">
-
#cartoonmap #bactokidney, #cartoonmap a:hover span.descr{
+
<span><div class="first">Clearance of Urea</div>
-
background:#f3f3f3;
+
<div class="rest">A Urea clearance device.</div></span>
-
border:1px solid gray;
+
</a></dd>
-
color:black;
+
 
-
padding:5px;
+
<dt>Guanidine</dt>
-
text-align:center;
+
<dd id="g"><a href="./Team:NYMU-Taipei/Project/Guanidine" onmouseover="haxbackground();" onmouseout="unhaxbackground();">
-
}
+
<span><div class="first">Clearance of Guanidine</div>
-
#cartoonmap a:hover span.n{
+
<div class="rest">The device managing the clearance of guanidino compounds.</div></span>
-
color:red;
+
</a></dd>
-
}
+
-
#cartoonmap a span.descr:first-line{
+
-
font-weight:bold;
+
-
}
+
-
#cartoonmap #bactokidney:first-line{
+
-
font-size:24pt;
+
-
font-weight:bold;
+
-
}
+
-
</style>
+
 +
<dt>Phosphate</dt>
 +
<dd id="p"><a href="./Team:NYMU-Taipei/Project/Phosphate" onmouseover="haxbackground();" onmouseout="unhaxbackground();">
 +
<span><div class="first">Clearance of Phosphate</div>
 +
<div class="rest">A Phosphate clearance and balance device.</div></span>
 +
</a></dd>
-
<div id="cartoonmap" style="text-align:left;">
+
<dt>Time Regulation</dt>
-
<span id="bactokidney">BacToKidney!<br>
+
<dd id="time"><a href="./Team:NYMU-Taipei/Project/Time_Regulation" onmouseover="haxbackground();" onmouseout="unhaxbackground();">
-
Move your mouse on the image below to navigate.
+
<span><div class="first">Time Regulation</div>
-
</span>
+
<div class="rest">Using oscillators to measure time, it enables detachment from the small intestine after a certain amount of time.</div></span>
-
<div class="info">
+
</a></dd>
-
<div id="sensor"><a id="asensor" href="./Team:NYMU-Taipei/Project/pH_Sensor" title="pH Sensor">
+
</dl>
-
<span class="n">1.</span>
+
-
<span class="descr">pH Sensor
+
-
<br>A sensor of pH's.
+
-
</span>
+
-
</a></div>
+
-
<div id="attachment"><a id="aattachment" href="./Team:NYMU-Taipei/Project/Attachment" title="Attachment">
+
-
<span class="n">2.</span>
+
-
<span class="descr">Attachment
+
-
<br>Attachment to the small intestine.
+
-
</span>
+
-
</a></div>
+
-
<div id="urea"><a id="aurea" href="./Team:NYMU-Taipei/Project/Urea" title="Urea">
+
-
<span class="n">3a.</span>
+
-
<span class="descr">Urea
+
-
<br>Clearance of Urea.
+
-
</span>
+
-
</a></div>
+
-
<div id="phosphate"><a id="aphosphate" href="./Team:NYMU-Taipei/Project/Phosphate" title="Phosphate">
+
-
<span class="n">3b.</span>
+
-
<span class="descr">Phosphate
+
-
<br>Clearance of Phosphate.
+
-
</span>
+
-
</a></div>
+
-
<div id="guanidine"><a id="aguanidine" href="./Team:NYMU-Taipei/Project/Guanidine" title="Guanidine">
+
-
<span class="n">3c.</span>
+
-
<span class="descr">Guanidine
+
-
<br>Clearance of Guanidine.
+
-
</span>
+
-
</a></div>
+
-
<div id="timeregulation"><a id="atimeregulation" href="./Team:NYMU-Taipei/Project/Time_Regulation" title="Time Regulation">
+
-
<span class="n">4.</span>
+
-
<span class="descr">Time Regulation
+
-
<br>Detachment after a specified period of time.
+
-
</span>
+
-
</a></div>
+
-
</div>
+
-
</div>
+
</html>
</html>
{{:Team:NYMU-Taipei/Links}}
{{:Team:NYMU-Taipei/Links}}
Line 234: Line 188:
-
{| style="width:700px;border:1px solid gray;"
+
{| style="width:800px;border:1px solid gray;"
|-
|-
| style="vertical-align:top;width:50%;border-right:1px solid gray;" |  <font size="4"><b>'''BacToKidney'''</b></font> - ''Hope through Research''.
| style="vertical-align:top;width:50%;border-right:1px solid gray;" |  <font size="4"><b>'''BacToKidney'''</b></font> - ''Hope through Research''.

Revision as of 18:03, 6 August 2008

Banner
pH Sensor
pH Sensor
A sensor of proton concentration (pH). Activates in a high pH environment.
Attachment
Attachment
Attachment to the small intestine.
Urea
Clearance of Urea
A Urea clearance device.
Guanidine
Clearance of Guanidine
The device managing the clearance of guanidino compounds.
Phosphate
Clearance of Phosphate
A Phosphate clearance and balance device.
Time Regulation
Time Regulation
Using oscillators to measure time, it enables detachment from the small intestine after a certain amount of time.



BacToKidney - Hope through Research.


Goal:

  • Use designer bacteria to replace a hemodialysis machine to remove (filter out) toxic waste for treating kidney failure.


Why is it an interesting problem?

  • Approximately 1.3 million people globally have chronic kidney failure that requires either renal transplantation or dialysis - for such patients, the established treatment is hemodialysis
  • The mortality rate of patients undergoing maintenance hemodialysis remains unacceptably high.
  • An extremely high morbidity and a relatively low quality of life (due in part to a high level of dependence and unemployment) and high cost have also been observed.


Our Design:

  • After ingesting our BacToKidney capsule, it passes the through stomach without taking any action, nor being digested, and proceeds to the small intestine. Once in the small intestine, the pH Sensor detects the change in pH and activates the clearance processes of Urea, Phosphate, and Guanidine from the body. To allow itself more time to perform its tasks, the pH Sensor also activates the Attachment process, making the capsule attach itself to the small intestine. After a pre-selected amount of time has passed (controlled by the time regulating oscillators), the capsule detaches itself from the small intestine and exits the body.


The parts our project is made up of:

News and Updates.
  • 2008-10-28: Gradually migrating the wiki pages to here.
  • 2008-08-12: The team page now displays us.
  • 2008-08-06: New Wikipage design put up!
  • 2008-08-01: Wikipage Online!

Retrieved from "http://2008.igem.org/Team:NYMU-Taipei"