Team:ETH Zurich/project/overview

From 2014.igem.org

(Difference between revisions)
(Implementation in E. coli)
 
(53 intermediate revisions not shown)
Line 5: Line 5:
<center>
<center>
{{:Team:ETH Zurich/tpl/scrollbuttontworows|Our|Project|green}}
{{:Team:ETH Zurich/tpl/scrollbuttontworows|Our|Project|green}}
-
{{:Team:ETH Zurich/tpl/scrollbuttontworows|Genetic|Circuits|blue}}
+
{{:Team:ETH Zurich/tpl/scrollbuttontworows|Pattern|Emergence|blue}}
 +
{{:Team:ETH Zurich/tpl/scrollbuttontworows|Genetic|Circuits|red}}
</center>
</center>
<html>  
<html>  
-
<div id="Our" class="inner2"> <article class="Our complex" style='margin-bottom:0;'> </html>  
+
<div id="Our" style='background-color:#FFFFFF; padding:2%;'> <article class="Our complex" style='margin-bottom:0;'> </html>  
{{:Team:ETH Zurich/project/overview/summary}}
{{:Team:ETH Zurich/project/overview/summary}}
<html> </article> <article class="Our simple" style="display:none; margin-bottom:0;"> </html>  
<html> </article> <article class="Our simple" style="display:none; margin-bottom:0;"> </html>  
Line 15: Line 16:
<html> </article> </html>
<html> </article> </html>
{{:Team:ETH Zurich/tpl/simpbutton|Our|green}}
{{:Team:ETH Zurich/tpl/simpbutton|Our|green}}
 +
<html></div>
<br/>
<br/>
<br/>
<br/>
-
<center>
+
 
-
Every cell on the grid above is supposed to compute an XOR of the two signals coming from above. XOR means that if only one of signals (red or blue) is coming, the cell should turn ON (and show green fluorescence), whereas if none or both signals are coming, the cell should stay OFF.
+
<div id="Pattern" style='background-color:#FFFFFF; padding:2%;'> </html>  
-
</center>
+
-
<br/>
+
{{:Team:ETH_Zurich/project/overview/grid}}
{{:Team:ETH_Zurich/project/overview/grid}}
-
<br/>
 
<html> </div>  
<html> </div>  
<br/>
<br/>
<br/>
<br/>
-
<div id="Genetic" class="inner2"></html>
+
<div id="Genetic" style='background-color:#FFFFFF; padding:2%;'></html>
-
== Implementation in ''E. Coli'' ==
+
== Implementation in ''E. coli'' ==
-
<center>  
+
<center>
-
<br/>
+
Here you can see our circuit in action. More details on how it works are <html> <a class="circled scrolly" href="#implementation"> just below</a></html>. For a comprehensive inventory of all parts used, you can check our [https://2014.igem.org/Team:ETH_Zurich/data Data page].
-
<br/>
+
<html>
-
How does it work ?
+
<style>
-
<br/>
+
@media
-
<br/>
+
only screen and (max-width: 760px),
-
</center>
+
(min-device-width: 768px) and (max-device-width: 1024px)  {
-
<center>
+
/* Force table to not be like tables anymore */
-
<html><h3 style='font-weight:800; text-align:center'> Choose the cell type :</h3></html>
+
table, thead, tbody, th, td, tr {
 +
display: block;
 +
}
 +
 +
/* Hide table headers (but not display: none;, for accessibility) */
 +
thead tr {
 +
border:none;
 +
position: absolute;
 +
top: -9999px;
 +
left: -9999px;
 +
}
 +
 +
 +
td {
 +
/* Behave  like a "row" */
 +
border: none;;
 +
position: relative;
 +
}
 +
 +
td:before {
 +
/* Now like a table header */
 +
position: absolute;
 +
/* Top/left values mimic padding */
 +
top: 6px;
 +
left: 6px;
 +
width: 45%;
 +
padding-right: 10px;
 +
white-space: nowrap;
 +
}
 +
 +
}
 +
</style>
 +
</br>
 +
</br>
 +
<table style='width:100%; z-index:1;'>
 +
<tr style='border:2px solid black;'>
 +
<td>
 +
<div id="bloc1" style='margin-left:3em;'><h3 style='font-weight:800;'> Choose the cell type and the inputs:</h3></html>
<br/>
<br/>
{{:Team:ETH_Zurich/tpl/animbuttonblue}}
{{:Team:ETH_Zurich/tpl/animbuttonblue}}
{{:Team:ETH_Zurich/tpl/animbuttonred}}
{{:Team:ETH_Zurich/tpl/animbuttonred}}
-
</center>
 
-
<html><h3 style='font-weight:800; text-align:center'> Choose the inputs :</h3></html>
 
<br/>
<br/>
-
<center>
 
{{:Team:ETH Zurich/tpl/animbuttonnoneblue|<html>width='160px' height='152.78px'</html>}}
{{:Team:ETH Zurich/tpl/animbuttonnoneblue|<html>width='160px' height='152.78px'</html>}}
{{:Team:ETH Zurich/tpl/animbuttonlasblue|<html>width='160px' height='152.78px'</html>}}
{{:Team:ETH Zurich/tpl/animbuttonlasblue|<html>width='160px' height='152.78px'</html>}}
 +
<br/>
{{:Team:ETH Zurich/tpl/animbuttonluxblue|<html>width='160px' height='152.78px'</html>}}
{{:Team:ETH Zurich/tpl/animbuttonluxblue|<html>width='160px' height='152.78px'</html>}}
{{:Team:ETH Zurich/tpl/animbuttonbothblue|<html>width='160px' height='152.78px'</html>}}
{{:Team:ETH Zurich/tpl/animbuttonbothblue|<html>width='160px' height='152.78px'</html>}}
-
</center>
 
-
<center>
 
{{:Team:ETH Zurich/tpl/animbuttonnonered|<html>width='160px' height='152.78px'</html>}}
{{:Team:ETH Zurich/tpl/animbuttonnonered|<html>width='160px' height='152.78px'</html>}}
{{:Team:ETH Zurich/tpl/animbuttonlasred|<html>width='160px' height='152.78px'</html>}}
{{:Team:ETH Zurich/tpl/animbuttonlasred|<html>width='160px' height='152.78px'</html>}}
 +
<br/>
{{:Team:ETH Zurich/tpl/animbuttonluxred|<html>width='160px' height='152.78px'</html>}}
{{:Team:ETH Zurich/tpl/animbuttonluxred|<html>width='160px' height='152.78px'</html>}}
{{:Team:ETH Zurich/tpl/animbuttonbothred|<html>width='160px' height='152.78px'</html>}}
{{:Team:ETH Zurich/tpl/animbuttonbothred|<html>width='160px' height='152.78px'</html>}}
</center>
</center>
<br/>
<br/>
-
<html><h3 style='text-align:center; font-weight:800;'>See how the information is processed to get the right output : </h3>
+
<html></div>
 +
</td>
 +
<td>
 +
<div id="bloc2">
 +
<h3 style='text-align:center; font-weight:800;'>See how the information is processed to get the right output : </h3>
<center>
<center>
<img  class='animation' id='luxred' src='https://static.igem.org/mediawiki/2014/7/73/ETH_Zurich_Animation_luxred.gif'>
<img  class='animation' id='luxred' src='https://static.igem.org/mediawiki/2014/7/73/ETH_Zurich_Animation_luxred.gif'>
Line 70: Line 107:
<img class='animation' id='luxblue' src='https://static.igem.org/mediawiki/2014/c/c4/ETH_Zurich_Animation_luxblue.gif'>
<img class='animation' id='luxblue' src='https://static.igem.org/mediawiki/2014/c/c4/ETH_Zurich_Animation_luxblue.gif'>
<img class='animation' id='lasblue' src='https://static.igem.org/mediawiki/2014/6/64/ETH_Zurich_Animation_lasblue.gif'>
<img class='animation' id='lasblue' src='https://static.igem.org/mediawiki/2014/6/64/ETH_Zurich_Animation_lasblue.gif'>
-
</center>
+
</center></div>
-
<html></div>
+
</td>
 +
</tr>
 +
</table> 
 +
</div>
-
<div id="implementation" class="inner2" style='margin-top:-17%; text-align:left;'>
+
<div id="implementation" style='background-color:#FFFFFF; padding:2%; text-align:left;'>
<article class="implementation simple" style="display:none; margin-bottom:0;  padding-top:0;"> </html>  
<article class="implementation simple" style="display:none; margin-bottom:0;  padding-top:0;"> </html>  
{{:Team:ETH Zurich/project/overview/implementationsimple}}  
{{:Team:ETH Zurich/project/overview/implementationsimple}}  

Latest revision as of 01:33, 18 October 2014

iGEM ETH Zurich 2014