|
|
(233 intermediate revisions not shown) |
Line 1: |
Line 1: |
- | {{:Team:ETH Zurich/tpl/head|Project Overview}} | + | {{:Team:ETH Zurich/tpl/head|Overview of Mosai''coli''}} |
- | {{:Team:ETH Zurich/tpl/head/overview}} | + | {{:Team:ETH Zurich/tpl/head/simplify}} |
| + | {{:Team:ETH Zurich/tpl/head/animbuttons}} |
| | | |
- | <html> | + | <center> |
- | | + | {{:Team:ETH Zurich/tpl/scrollbuttontworows|Our|Project|green}} |
- | <script>
| + | {{:Team:ETH Zurich/tpl/scrollbuttontworows|Pattern|Emergence|blue}} |
- | | + | {{:Team:ETH Zurich/tpl/scrollbuttontworows|Genetic|Circuits|red}} |
- | $(document).ready(function() {
| + | </center> |
- | | + | |
- | $("text").on("click", function(){
| + | |
- | var ID = $(this).attr("name");
| + | |
- | $(this).text(function(i, text){
| + | |
- | return text === "Complexify" ? "Simplify" : "Complexify";
| + | |
- | })
| + | |
- | $("article."+ID+".complex").toggle();
| + | |
- | $("article."+ID+".simple").toggle();
| + | |
- | });
| + | |
- | | + | |
- | $("rect").on("click", function(){
| + | |
- | var ID = $(this).next().attr("name");
| + | |
- | $(this).next().text(function(i, text){
| + | |
- | return text === "Complexify" ? "Simplify" : "Complexify";
| + | |
- | })
| + | |
- | $("article."+ID+".complex").toggle();
| + | |
- | $("article."+ID+".simple").toggle();
| + | |
- | });
| + | |
- | });
| + | |
- | | + | |
- | </script> | + | |
- | | + | |
- | <div id="summary">
| + | |
| | | |
- | <article class="summary complex">
| + | <html> |
- | </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>
| + | <html> </article> <article class="Our simple" style="display:none; margin-bottom:0;"> </html> |
- | </article>
| + | |
- | | + | |
- | <article class="summary simple" style="display:none;">
| + | |
- | </html>
| + | |
| {{:Team:ETH Zurich/project/overview/summarysimple}} | | {{:Team:ETH Zurich/project/overview/summarysimple}} |
- | <html>
| + | <html> </article> </html> |
- | </article>
| + | {{:Team:ETH Zurich/tpl/simpbutton|Our|green}} |
- | </div> | + | <html></div> |
| + | <br/> |
| + | <br/> |
| | | |
- | <a href="#summary" id="bupdates"> | + | <div id="Pattern" style='background-color:#FFFFFF; padding:2%;'> </html> |
- | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="50%" y="0px" width="200" height="200" viewBox="200 0 1000 1000" enable-background="new 200 0 1000 1000" xml:space="preserve">
| + | {{:Team:ETH_Zurich/project/overview/grid}} |
- | <rect style="cursor: pointer" x="450" width="500" height="500"/>
| + | <html> </div> |
- | <text name="summary" x="520" y="280" style="cursor: pointer" fill="#FFFFFF" font-size="80"> Simplify </text>
| + | <br/> |
- | </svg>
| + | <br/> |
- | </a> | + | |
| | | |
| + | <div id="Genetic" style='background-color:#FFFFFF; padding:2%;'></html> |
| + | == Implementation in ''E. coli'' == |
| + | <center> |
| + | 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]. |
| + | <html> |
| + | <style> |
| + | @media |
| + | only screen and (max-width: 760px), |
| + | (min-device-width: 768px) and (max-device-width: 1024px) { |
| + | |
| + | /* Force table to not be like tables anymore */ |
| + | 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> |
| </br> | | </br> |
- | </br> | + | <table style='width:100%; z-index:1;'> |
- | </br> | + | <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/> |
| + | {{:Team:ETH_Zurich/tpl/animbuttonblue}} |
| + | {{:Team:ETH_Zurich/tpl/animbuttonred}} |
| + | <br/> |
| + | {{:Team:ETH Zurich/tpl/animbuttonnoneblue|<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/animbuttonbothblue|<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>}} |
| + | <br/> |
| + | {{:Team:ETH Zurich/tpl/animbuttonluxred|<html>width='160px' height='152.78px'</html>}} |
| + | {{:Team:ETH Zurich/tpl/animbuttonbothred|<html>width='160px' height='152.78px'</html>}} |
| + | </center> |
| + | <br/> |
| + | <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> |
| + | <img class='animation' id='luxred' src='https://static.igem.org/mediawiki/2014/7/73/ETH_Zurich_Animation_luxred.gif'> |
| + | <img class='animation' id='lasred' src='https://static.igem.org/mediawiki/2014/5/5e/ETH_Zurich_Animation_lasred.gif'> |
| + | <img class='animation' id='bothred' src='https://static.igem.org/mediawiki/2014/1/15/ETH_Zurich_Animation_bothred.gif'> |
| + | <img class='animation' id='nonered' src='https://static.igem.org/mediawiki/2014/b/b0/ETH_Zurich_Animation_nonered.gif'> |
| + | </center> |
| + | <center> |
| + | <img class='animation' id='bothblue' src='https://static.igem.org/mediawiki/2014/4/4e/ETH_Zurich_Animation_bothblue.gif'> |
| + | <img class='animation' id='noneblue' src='https://static.igem.org/mediawiki/2014/6/6e/ETH_Zurich_Animation_noneblue.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'> |
| + | </center></div> |
| + | </td> |
| + | </tr> |
| + | </table> |
| + | </div> |
| | | |
- | <div id="implementation"> | + | <div id="implementation" style='background-color:#FFFFFF; padding:2%; text-align:left;'> |
- | <article class="implementation simple" style="display:none;">
| + | <article class="implementation simple" style="display:none; margin-bottom:0; padding-top:0;"> </html> |
- | </html>
| + | |
| {{:Team:ETH Zurich/project/overview/implementationsimple}} | | {{:Team:ETH Zurich/project/overview/implementationsimple}} |
- | <html>
| + | <html> </article><article class="implementation complex" style='margin-bottom:0; padding-top:0;'> </html> |
- | </article>
| + | |
- | | + | |
- | <article class="implementation complex">
| + | |
- | </html>
| + | |
| {{:Team:ETH Zurich/project/overview/implementation}} | | {{:Team:ETH Zurich/project/overview/implementation}} |
- | <html>
| + | <html> </article> </html> |
- | </article>
| + | {{:Team:ETH Zurich/tpl/simpbutton2|implementation|blue}} |
- | </div> | + | <html></div> </html> |
- | | + | |
- | <a href="#implementation">
| + | |
- | <button name="implementation" class="button"> Simplify </button>
| + | |
- | </a>
| + | |
- | | + | |
- | </html> | + | |
| | | |
| {{:Team:ETH Zurich/tpl/foot}} | | {{:Team:ETH Zurich/tpl/foot}} |