|
|
(28 intermediate revisions not shown) |
Line 1: |
Line 1: |
| {{ETHZ_Basel10}} | | {{ETHZ_Basel10}} |
- | {{ETHZ_Basel10_Start}} | + | {{ETHZ_Basel10_Introduction}} |
- | = Welcome to the wiki of the ETH Zurich iGEM team = | + | = E. lemming - a remotely controlled living robot by ETH Zurich = |
- | | + | {{ETHZ_Basel10_Teaser}} |
- | <html>
| + | |
- | <head>
| + | |
- | <style type="text/css">
| + | |
- | #teaser {
| + | |
- | margin: 0; padding: 0;
| + | |
- | font: 10px normal "Verdana", Helvetica, sans-serif;
| + | |
- | }
| + | |
- | .container { | + | |
- | overflow: hidden;
| + | |
- | width: 900px;
| + | |
- | margin: 0 auto;
| + | |
- | }
| + | |
- | #main {
| + | |
- | padding: 10px;
| + | |
- | background: #f0f0f0;
| + | |
- | border: 1px solid #ccc;
| + | |
- | }
| + | |
- | | + | |
- | /*--Main Image Preview--*/
| + | |
- | .main_image {
| + | |
- | width: 598px; height: 456px;
| + | |
- | float: left;
| + | |
- | background: #333;
| + | |
- | border: 1px solid #ccc;
| + | |
- | position: relative;
| + | |
- | overflow: hidden;
| + | |
- | color: #fff;
| + | |
- | }
| + | |
- | .main_image h2 {
| + | |
- | color: #fff;
| + | |
- | font-size: 2em;
| + | |
- | font-weight: bold;
| + | |
- | margin: 0 0 5px; padding: 10px;
| + | |
- | }
| + | |
- | .main_image p {
| + | |
- | font-size: 12px;
| + | |
- | padding: 10px; margin: 0;
| + | |
- | line-height: 1.6em;
| + | |
- | }
| + | |
- | .block small {
| + | |
- | font-size: 12px;
| + | |
- | }
| + | |
- | .main_image .block small {margin-left: 10px;}
| + | |
- | .main_image .desc{
| + | |
- | position: absolute;
| + | |
- | bottom: 0; left: 0;
| + | |
- | width: 100%;
| + | |
- | display: none;
| + | |
- | }
| + | |
- | .main_image .block{
| + | |
- | width: 100%;
| + | |
- | background: #111;
| + | |
- | border-top: 1px solid #000;
| + | |
- | }
| + | |
- | .main_image a.collapse {
| + | |
- | background: url(btn_collapse.gif) no-repeat left top;
| + | |
- | height: 27px; width: 93px;
| + | |
- | text-indent: -99999px;
| + | |
- | position: absolute;
| + | |
- | top: -27px; right: 20px;
| + | |
- | }
| + | |
- | .main_image a.show {background-position: left bottom;}
| + | |
- | | + | |
- | | + | |
- | .image_thumb {
| + | |
- | float: left;
| + | |
- | width: 299px;
| + | |
- | background: #f0f0f0;
| + | |
- | border-right: 1px solid #fff;
| + | |
- | border-top: 1px solid #ccc;
| + | |
- | }
| + | |
- | .image_thumb img {
| + | |
- | border: 1px solid #ccc;
| + | |
- | padding: 5px;
| + | |
- | background: #fff;
| + | |
- | float: left;
| + | |
- | }
| + | |
- | .image_thumb ul {
| + | |
- | margin: 0; padding: 0;
| + | |
- | list-style: none;
| + | |
- | }
| + | |
- | .image_thumb ul li{
| + | |
- | margin: 0; padding: 10px 10px;
| + | |
- | background: #f0f0f0 url(nav_a.gif) repeat-x;
| + | |
- | width: 279px;
| + | |
- | float: left;
| + | |
- | border-bottom: 1px solid #ccc;
| + | |
- | border-top: 1px solid #fff;
| + | |
- | border-right: 1px solid #ccc;
| + | |
- | }
| + | |
- | .image_thumb ul li.hover {
| + | |
- | background: #ddd;
| + | |
- | cursor: pointer;
| + | |
- | }
| + | |
- | .image_thumb ul li.active {
| + | |
- | background: #fff;
| + | |
- | cursor: default;
| + | |
- | }
| + | |
- | html .image_thumb ul li h2 {
| + | |
- | font-size: 12px;
| + | |
- | margin: 5px 0; padding: 0;
| + | |
- | }
| + | |
- | .image_thumb ul li .block {
| + | |
- | float: left;
| + | |
- | margin-left: 10px;
| + | |
- | padding: 0;
| + | |
- | width: 170px;
| + | |
- | }
| + | |
- | .image_thumb ul li p{display: none;}
| + | |
- | | + | |
- | | + | |
- | | + | |
- | </style>
| + | |
- | <!--Call jQuery-->
| + | |
- | <script type="text/javascript" src="./jquery-1.3.2.min.js"></script>
| + | |
- | <script type="text/javascript">
| + | |
- | $(document).ready(function() {
| + | |
- | | + | |
- | //Show Banner
| + | |
- | $(".main_image .desc").show(); //Show Banner
| + | |
- | $(".main_image .block").animate({ opacity: 0.85 }, 1 ); //Set Opacity
| + | |
- | | + | |
- | //Click and Hover events for thumbnail list
| + | |
- | $(".image_thumb ul li:first").addClass('active');
| + | |
- | $(".image_thumb ul li").click(function(){
| + | |
- | //Set Variables
| + | |
- | var imgAlt = $(this).find('img').attr("alt"); //Get Alt Tag of Image
| + | |
- | var imgTitle = $(this).find('a').attr("href"); //Get Main Image URL
| + | |
- | var imgDesc = $(this).find('.block').html(); //Get HTML of block
| + | |
- | var imgDescHeight = $(".main_image").find('.block').height(); //Calculate height of block
| + | |
- |
| + | |
- | if ($(this).is(".active")) { //If it's already active, then...
| + | |
- | return false; // Don't click through
| + | |
- | } else {
| + | |
- | //Animate the Teaser
| + | |
- | $(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() {
| + | |
- | $(".main_image .block").html(imgDesc).animate({ opacity: 0.85, marginBottom: "0" }, 250 );
| + | |
- | $(".main_image img").attr({ src: imgTitle , alt: imgAlt});
| + | |
- | });
| + | |
- | }
| + | |
- |
| + | |
- | $(".image_thumb ul li").removeClass('active'); //Remove class of 'active' on all lists
| + | |
- | $(this).addClass('active'); //add class of 'active' on this list only
| + | |
- | return false;
| + | |
- |
| + | |
- | }) .hover(function(){
| + | |
- | $(this).addClass('hover');
| + | |
- | }, function() {
| + | |
- | $(this).removeClass('hover');
| + | |
- | });
| + | |
- |
| + | |
- | //Toggle Teaser
| + | |
- | $("a.collapse").click(function(){
| + | |
- | $(".main_image .block").slideToggle();
| + | |
- | $("a.collapse").toggleClass("show");
| + | |
- | });
| + | |
- |
| + | |
- | });//Close Function
| + | |
- | </script>
| + | |
- | </head>
| + | |
- | | + | |
- | <div id="teaser">
| + | |
- | <div id="main" class="container">
| + | |
- | <div class="main_image">
| + | |
- | <img src="https://static.igem.org/mediawiki/2010/8/84/ETHZ_Basel_teaser_project.png">
| + | |
- | <div class="desc" style="display: block; ">
| + | |
- | <div class="block" style="display: block; opacity: 0.85; margin-bottom: 0px; ">
| + | |
- | <h2>Project</h2>
| + | |
- | <small>What is E. lemming?</small>
| + | |
- |
| + | |
- |
| + | |
- | <p><a href="https://2010.igem.org/Team:ETHZ_Basel/Project">Click here to learn more.</a> </p>
| + | |
- | </div>
| + | |
- | </div>
| + | |
- | </div>
| + | |
- | <div class="image_thumb">
| + | |
- | <ul>
| + | |
- | <li class="">
| + | |
- | <a href="https://static.igem.org/mediawiki/2010/8/84/ETHZ_Basel_teaser_project.png"><img src="https://static.igem.org/mediawiki/2010/b/bd/ETHZ_Basel_teaser_project_thumb.png"></a>
| + | |
- | <div class="block">
| + | |
- | <h2>Project</h2>
| + | |
- | <small>What is E. lemming?</small>
| + | |
- |
| + | |
- |
| + | |
- | <p><a href="https://2010.igem.org/Team:ETHZ_Basel/Project">Click here to learn more.</a> </p>
| + | |
- | </div>
| + | |
- | </li>
| + | |
- | <li class="">
| + | |
- | <a href="https://static.igem.org/mediawiki/2010/b/b8/ETHZ_Basel_teaser_molecular_mechanism.png"><img src="https://static.igem.org/mediawiki/2010/7/7a/ETHZ_Basel_teaser_molecular_mechanism_thumb.png"></a>
| + | |
- | <div class="block">
| + | |
- | <h2>Molecular Mechanism</h2>
| + | |
- | <small>How does it work?</small>
| + | |
- |
| + | |
- | <p><a href="https://2010.igem.org/Team:ETHZ_Basel/Project/Molecular_Mechanism">Click here to learn more.</a> </p>
| + | |
- | </div>
| + | |
- | </li>
| + | |
- | <li class="">
| + | |
- | <a href="https://static.igem.org/mediawiki/2010/d/de/ETHZ_Basel_teaser_info_proc.png"><img src="https://static.igem.org/mediawiki/2010/0/0e/ETHZ_Basel_teaser_info_proc_thumb.png"></a>
| + | |
- | <div class="block">
| + | |
- | <h2>Controlling</h2>
| + | |
- | <small>How is it controlled?</small>
| + | |
- |
| + | |
- | <p><a href="https://2010.igem.org/Team:ETHZ_Basel/Project/Information_Processing">Click here to learn more.</a> </p>
| + | |
- | </div>
| + | |
- | </li>
| + | |
- | <li class="">
| + | |
- | <a href="https://static.igem.org/mediawiki/2010/3/3f/ETHZ_Basel_teaser_biology.png"><img src="https://static.igem.org/mediawiki/2010/f/f9/ETHZ_Basel_teaser_biology_thumb.png"></a>
| + | |
- | <div class="block">
| + | |
- | <h2>Biology & Wet Laboratory</h2>
| + | |
- | <small>How is it implemented?</small>
| + | |
- |
| + | |
- | <p><a href="https://2010.igem.org/Team:ETHZ_Basel/Biology">Click here to learn more.</a> </p>
| + | |
- | </div>
| + | |
- | </li>
| + | |
- | <li class="">
| + | |
- | <a href="https://static.igem.org/mediawiki/2010/1/16/ETHZ_Basel_teaser_molecular_models.png"><img src="https://static.igem.org/mediawiki/2010/1/1f/ETHZ_Basel_teaser_molecular_models_thumb.png"></a>
| + | |
- | <div class="block">
| + | |
- | <h2>Molecular Modeling</h2>
| + | |
- | <small>How does modeling help?</small>
| + | |
- |
| + | |
- | <p><a href="https://2010.igem.org/Team:ETHZ_Basel/Modeling">Click here to learn more.</a> </p>
| + | |
- | </div>
| + | |
- | </li>
| + | |
- | <li class="">
| + | |
- | <a href="https://static.igem.org/mediawiki/2010/2/21/ETHZ_Basel_teaser_information_processing.png"><img src="https://static.igem.org/mediawiki/2010/5/52/ETHZ_Basel_teaser_information_processing_thumb.png"></a>
| + | |
- | <div class="block">
| + | |
- | <h2>Information Processing</h2>
| + | |
- | <small>How is it controlled in detail?</small>
| + | |
- |
| + | |
- | <p><a href="https://2010.igem.org/Team:ETHZ_Basel/InformationProcessing">Click here to learn more.</a> </p>
| + | |
- | </div>
| + | |
- | </li>
| + | |
- | </ul>
| + | |
- | </div>
| + | |
- | </div>
| + | |
- | </div>
| + | |
- | </html>
| + | |
- | | + | |
- | The core idea of our project is to control chemotaxis of ''E. coli'' by means of light! We'll realize this by hijacking and perturbing the tumbling / directed flagellar movement apparatus. By coupling directed flagellar movement regulating proteins to a '''novel synthetic light-sensitive spatial localization system''', their activity can be controlled reversibly. A light-sensitive dimerizing complex fused to this regulating proteins at a spatially fixed location is induced by light pulses and therefore localization of the two molecules can be manipulated. Tumbling / directed flagellar movement rates are monitored by image processing algorithms, which are linked to the light-pulse generator. This means that ''E. coli'' tumbling is induced or suppressed simply by pressing a light switch! This synthetic network enables control of single E. coli cells: '''We'll make them move like mindless "Lemmings"''' in the direction they are forced to go!
| + | |
| | | |
| == Sponsors == | | == Sponsors == |
- | [[Image:ETHZ_Basel_sponsors.jpg|none|center|800px|]]
| + | {| border="0" align="center" |
| + | |<html><img src="https://static.igem.org/mediawiki/2010/6/65/ETHZ_Basel_sponsors.jpg"></html> |
| + | |} |