Difference between revisions of "Team:Freiburg/testpage"
| Line 1: | Line 1: | ||
| + | {{Freiburg/CSS}} | ||
| + | {{Freiburg/Menubar}} | ||
| + | |||
| + | {{Freiburg/wiki_content_start}} | ||
<html> | <html> | ||
| + | |||
<style> | <style> | ||
| − | /* ========= | + | /*========= BEGIN: style for navigation bar ==========*/ |
| − | + | #project { | |
| − | + | background: url(https://static.igem.org/mediawiki/2015/d/da/Freiburg_icon_project_active_yellow.png) no-repeat; | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | background | + | |
| − | + | ||
} | } | ||
| − | a { | + | #project a { |
| − | color: # | + | color: #ecdc18; |
| − | + | ||
| − | + | ||
} | } | ||
| − | + | #runningchip { | |
| − | + | left: 18.6%; | |
| − | + | ||
} | } | ||
| + | /*========= END: style for navigation bar ==========*/ | ||
| + | |||
| + | |||
| + | /* STYLE FOR LIGHTBULB-SLIDER */ | ||
| − | # | + | #lightbulb{ |
| − | + | position: absolute; | |
| − | + | -webkit-transform: scale(0.5); | |
| − | + | transform: scale(0.5); | |
| − | + | top: 230px; | |
| − | + | left: -55px; | |
| + | z-index: 200; | ||
} | } | ||
| − | # | + | #red, |
| − | + | #redsmall, | |
| − | + | #blue, | |
| + | #green{ | ||
| + | position: absolute; | ||
| + | bottom: -500px; | ||
} | } | ||
| − | # | + | #red{ |
| − | + | top: 25px; | |
| − | + | left:120px; | |
| − | + | position: absolute; | |
| − | + | ||
} | } | ||
| − | # | + | #blue{ |
| − | + | bottom: 160px; | |
| − | + | left: 25px; | |
| − | + | position: absolute; | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| + | #redsmall{ | ||
| + | bottom: 115px; | ||
| + | left: 110px; | ||
| + | position: absolute; | ||
| + | } | ||
| − | # | + | #green{ |
| − | + | top: 10px; | |
| − | + | left: 10px; | |
| − | + | position: absolute; | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| − | + | #red_on{ | |
| − | + | top: 25px; | |
| − | # | + | left:120px; |
| − | + | position: absolute; | |
| − | + | display: none; | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| − | + | #blue_on{ | |
| − | + | bottom: 160px; | |
| + | left: 25px; | ||
| + | position: absolute; | ||
| + | display: none; | ||
} | } | ||
| − | + | #redsmall_on{ | |
| − | + | bottom: 115px; | |
| − | + | left: 110px; | |
| − | + | position: absolute; | |
| − | + | display: none; | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| − | + | #green_on{ | |
| − | + | top: 10px; | |
| − | + | left: 10px; | |
| − | + | position: absolute; | |
| − | + | display: none; | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| − | |||
| + | /* code adapted from http://www.smashingmagazine.com/2012/04/pure-css3-cycling-slideshow/*/ | ||
| − | + | #slider { | |
| − | + | background: #f9f9f9; | |
| − | + | height: 500px; | |
| − | # | + | width: 900px; |
| − | + | overflow: visible; | |
| − | + | position: relative; | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| − | /* | + | /* hides everything outside the slider box */ |
| − | # | + | #mask { |
| − | + | overflow: hidden; | |
| − | + | height: 500px; | |
| − | + | ||
} | } | ||
| − | |||
| − | |||
| − | + | /* initialize position for positioning slides outside the slider */ | |
| − | + | #slider ul { | |
| − | + | margin: 0; | |
| − | + | padding: 0; | |
| − | + | position: relative; | |
} | } | ||
| − | # | + | /* define image properties and position them outside the slider mask */ |
| − | + | #slider li { | |
| − | + | width: 900px; /* Width slide */ | |
| − | + | height: 500px; /* Height slide */ | |
| − | + | position: absolute; | |
| − | + | right: 0; /* Original Position - Outside of the Slider */ | |
| − | + | list-style: none; | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | # | + | #first, |
| − | + | #second, | |
| − | + | #third, | |
| − | + | #fourth{ | |
| − | + | left: -1000px; | |
| + | -ms-transition: tranform 1s ease; | ||
| + | -webkit-transition: transform 1s ease; | ||
| + | transition: transform 1s ease; | ||
| + | font-size: 100%; | ||
} | } | ||
| − | # | + | #first{left: 0;} |
| − | + | #third{z-index : -100;} | |
| − | + | #fourth{z-index: -100; left: 1000px;} | |
| − | + | #green{display: none;} | |
| − | + | #green_on{display: inline} | |
| − | } | + | |
| − | # | + | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | } | + | |
| − | # | + | |
| − | + | ||
| − | } | + | |
| − | + | .container{ | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | . | + | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
position: relative; | position: relative; | ||
| − | + | height: 500px; | |
| + | margin: 3% 0; | ||
| + | width: 1000px; | ||
} | } | ||
| − | + | #buttonleft { | |
| − | + | z-index: 200; | |
| − | + | position: absolute; | |
| − | + | top: 190px; | |
| − | + | left: 0; | |
} | } | ||
| − | + | #buttonright{ | |
| − | + | z-index: 200; | |
| − | + | position: absolute; | |
| − | + | right: 0; | |
| − | + | top: 190px; | |
| − | + | } | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | #buttonleft img, | |
| − | + | #buttonright img{ | |
| − | + | width: 50px; | |
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| − | + | #content-slider{ | |
| − | + | position: absolute; | |
| − | + | top:0; | |
| + | left:50px | ||
} | } | ||
| − | + | #buttonright:hover, | |
| − | + | #buttonleft:hover{ | |
| − | # | + | cursor: pointer; |
| − | + | cursor: hand; | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| − | + | .container{ | |
| − | + | position: relative; | |
| − | + | ||
| − | + | ||
| − | . | + | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| − | . | + | .artboard{ |
| − | + | box-sizing: border-box; | |
| − | + | } | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | } | + | |
| − | . | + | .sliderimage{ |
| − | + | float: right; | |
| + | margin: 3% 75px 3% 25px; | ||
| + | width: 350px | ||
} | } | ||
| − | . | + | .slidertext{ |
| − | + | margin: 3% 25px 0 75px; | |
| − | + | width: 350px; | |
| − | + | text-align: justify; | |
| − | + | line-height: 1; | |
| − | + | float: left; | |
| − | + | ||
| − | + | ||
} | } | ||
| − | . | + | .slidertext h1{ |
| − | + | text-align: left; | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| − | . | + | .slidertext p{ |
| − | + | margin-bottom: 0; | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| − | . | + | .slidertext.indent{ |
| − | + | margin-left: 15%; | |
| − | + | margin-top: 0; | |
| − | + | width: 290px; | |
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| − | . | + | .dummy-image{ |
| − | + | background-color: black; | |
| − | + | height: 400px; | |
| + | width: 350px; | ||
} | } | ||
| − | |||
| − | |||
| − | |||
| − | |||
</style> | </style> | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
<html> | <html> | ||
| − | |||
| − | + | <script> | |
| − | + | $(document).ready(function(){ | |
| − | + | var distance = 2; | |
| − | + | // see: http://atomicrobotdesign.com/blog/web-development/how-to-disable-a-button-until-a-jquery-animation-has-finished/ // | |
| − | + | // bind the button to the function, so it can be unbound in the code and the button isnt clickable any more // | |
| − | + | $("#buttonleft").bind("click", moveleft); | |
| − | + | function moveleft(e) { | |
| − | + | // unbind the button // | |
| − | + | $("#buttonleft").unbind(); | |
| − | + | console.log("Click "+distance); | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | if (distance == 1) { | |
| − | + | console.log("Distance: "+distance); | |
| + | $('#first').css({"transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); | ||
| + | $('#second').css({"z-index": "100"}); | ||
| + | $('#third').css({"z-index": "-100", "transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); | ||
| + | $('#fourth').css({"transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); | ||
| + | $('#redsmall').css({"display": "inline"}); | ||
| + | $('#green').css({"display": "none"}); | ||
| + | $('#redsmall_on').css({"display": "none"}); | ||
| + | $('#green_on').css({"display": "inline"}); | ||
| + | distance = 2; | ||
| + | } | ||
| − | + | else if (distance ==2) { | |
| − | + | console.log("Distance: "+distance); | |
| − | + | $('#first').css({"transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"}); | |
| − | + | $('#second').css({"transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"}); | |
| − | + | $('#third').css({"z-index": "100"}); | |
| + | $('#fourth').css({"z-index": "-100", "transform": "translateX(-2000px)", "-webkit-transform": "translateX(-2000px)", "-ms-transform": "translateX(-2000px)", "-webkit-transform": "translateX(-2000px)", "-ms-transform": "translateX(-2000px)"}); | ||
| + | $('#green').css({"display": "inline"}); | ||
| + | $('#red').css({"display": "none"}); | ||
| + | $('#green_on').css({"display": "none"}); | ||
| + | $('#red_on').css({"display": "inline"}); | ||
| + | distance = 3; | ||
| + | } | ||
| − | + | else if (distance ==3) { | |
| − | + | console.log("Distance: "+distance); | |
| − | + | $('#first').css({"z-index": "-100", "transform": "translateX(-1000px)", "-webkit-transform": "translateX(-1000px)", "-ms-transform": "translateX(-1000px)", "-webkit-transform": "translateX(-1000px)", "-ms-transform": "translateX(-1000px)"}); | |
| − | + | $('#second').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"}); | |
| − | + | $('#third').css({"transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"}); | |
| − | + | $('#fourth').css({"z-index": "100"}); | |
| + | $('#red').css({"display": "inline"}); | ||
| + | $('#blue').css({"display": "none"}); | ||
| + | $('#red_on').css({"display": "none"}); | ||
| + | $('#blue_on').css({"display": "inline"}); | ||
| + | distance = 4; | ||
| + | } | ||
| + | else if (distance ==4) { | ||
| + | console.log("Distance: "+distance); | ||
| + | $('#first').css({"z-index": "100"}); | ||
| + | $('#second').css({"z-index": "-100", "transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); | ||
| + | $('#third').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"}); | ||
| + | $('#fourth').css({"transform": "translateX(-1000px)", "-webkit-transform": "translateX(-1000px)", "-ms-transform": "translateX(-1000px)"}); | ||
| + | $('#blue').css({"display": "inline"}); | ||
| + | $('#redsmall').css({"display": "none"}); | ||
| + | $('#blue_on').css({"display": "none"}); | ||
| + | $('#redsmall_on').css({"display": "inline"}); | ||
| + | distance = 1; | ||
| + | } | ||
| − | + | // see: http://stackoverflow.com/questions/1836105/how-to-wait-5-seconds-with-jquery // | |
| − | + | // wait until css-animation has finished. time is specified in css-transition property // | |
| + | setTimeout(function(){ | ||
| + | $("#buttonleft").bind("click", moveleft); | ||
| + | }, 1000); | ||
| + | } | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | + | $("#buttonright").bind("click", moveright); | |
| − | + | function moveright(e) { | |
| − | + | $("#buttonright").unbind(); | |
| − | + | console.log("Click "+distance); | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | if (distance == 1) { | |
| − | + | $('#first').css({"z-index": "-100"}); | |
| − | + | $('#second').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"}); | |
| − | + | $('#third').css({"z-index": "100","transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"}); | |
| − | + | $('#fourth').css({"transform": "translateX(-2000px)", "-webkit-transform": "translateX(-2000px)", "-ms-transform": "translateX(-2000px)"}); | |
| − | + | $('#redsmall').css({"display": "inline"}); | |
| − | + | $('#blue').css({"display": "none"}); | |
| − | + | $('#redsmall_on').css({"display": "none"}); | |
| + | $('#blue_on').css({"display": "inline"}); | ||
| + | distance = 4; | ||
| + | } | ||
| − | + | else if (distance ==2) { | |
| − | + | console.log("Distance: "+distance); | |
| − | + | $('#first').css({"transform": "translateX(-1000px)", "-webkit-transform": "translateX(-1000px)", "-ms-transform": "translateX(-1000px)"}); | |
| + | $('#second').css({"z-index": "-100"}); | ||
| + | $('#third').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"}); | ||
| + | $('#fourth').css({"z-index": "100","transform": "translateX(-1000px)", "-webkit-transform": "translateX(-1000px)", "-ms-transform": "translateX(-1000px)"}); | ||
| + | $('#green').css({"display": "inline"}); | ||
| + | $('#redsmall').css({"display": "none"}); | ||
| + | $('#green_on').css({"display": "none"}); | ||
| + | $('#redsmall_on').css({"display": "inline"}); | ||
| + | distance = 1; | ||
| + | } | ||
| + | else if (distance ==3) { | ||
| + | console.log("Distance: "+distance); | ||
| + | $('#first').css({"z-index": "100","transform": "translateX(0px)", "-webkit-transform": "translateX(0px)", "-ms-transform": "translateX(0px)"}); | ||
| + | $('#second').css({"transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); | ||
| + | $('#third').css({"z-index": "-100"}); | ||
| + | $('#fourth').css({"transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); | ||
| + | $('#red').css({"display": "inline"}); | ||
| + | $('#green').css({"display": "none"}); | ||
| + | $('#red_on').css({"display": "none"}); | ||
| + | $('#green_on').css({"display": "inline"}); | ||
| + | distance = 2; | ||
| + | } | ||
| + | else if (distance ==4) { | ||
| + | console.log("Distance: "+distance); | ||
| + | $('#first').css({"transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"}); | ||
| + | $('#second').css({"z-index": "100","transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"}); | ||
| + | $('#third').css({"transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); | ||
| + | $('#fourth').css({"z-index": "-100"}); | ||
| + | $('#blue').css({"display": "inline"}); | ||
| + | $('#red').css({"display": "none"}); | ||
| + | $('#blue_on').css({"display": "none"}); | ||
| + | $('#red_on').css({"display": "inline"}); | ||
| + | distance = 3; | ||
| + | } | ||
| + | setTimeout(function(){ | ||
| + | $("#buttonright").bind("click", moveright); | ||
| + | }, 1000); | ||
| + | } | ||
| + | }); | ||
| + | </script> | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | + | <div class="container"> | |
| − | + | <div id="buttonright"> | |
| − | <div | + | <img src="https://static.igem.org/mediawiki/2015/b/b3/Freiburg_lightbulb_slider_30.png"> |
| − | + | ||
| − | + | ||
| − | + | ||
</div> | </div> | ||
| + | <div id="buttonleft"> | ||
| + | <img src="https://static.igem.org/mediawiki/2015/4/4d/Freiburg_lightbulb_slider_27.png"> | ||
</div> | </div> | ||
| − | + | <div id="lightbulb"> | |
| − | <div | + | <div id="main"> |
| − | + | <img src="https://static.igem.org/mediawiki/2015/3/31/Freiburg_lightbulb_slider_03.png"> | |
| − | + | </div> | |
| − | + | <div id="red"> | |
| − | + | <img src="https://static.igem.org/mediawiki/2015/4/40/Freiburg_lightbulb_slider_09.png"> | |
| − | + | </div> | |
| − | + | <div id="green"> | |
| − | + | <img src="https://static.igem.org/mediawiki/2015/2/24/Freiburg_lightbulb_slider_08.png"> | |
| − | + | </div> | |
| − | + | <div id="blue"> | |
| − | + | <img src="https://static.igem.org/mediawiki/2015/a/a7/Freiburg_lightbulb_slider_07.png"> | |
| − | + | </div> | |
| − | + | <div id="redsmall"> | |
| − | + | <img src="https://static.igem.org/mediawiki/2015/c/ce/Freiburg_lightbulb_slider_06.png"> | |
| − | + | </div> | |
| − | + | <div id="red_on"> | |
| − | + | <img src="https://static.igem.org/mediawiki/2015/2/2a/Freiburg_lightbulb_slider_09_yellow.png"> | |
| − | + | </div> | |
| − | + | <div id="green_on"> | |
| − | + | <img src="https://static.igem.org/mediawiki/2015/0/0f/Freiburg_lightbulb_slider_08_yellow.png"> | |
| − | + | </div> | |
| − | + | <div id="blue_on"> | |
| − | + | <img src="https://static.igem.org/mediawiki/2015/6/6b/Freiburg_lightbulb_slider_07_yellow.png"> | |
| − | + | </div> | |
| − | + | <div id="redsmall_on"> | |
| − | + | <img src="https://static.igem.org/mediawiki/2015/9/91/Freiburg_lightbulb_slider_06_yellow.png"> | |
| − | + | </div> | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
</div> | </div> | ||
| + | <div id="content-slider"> | ||
| + | <div id="slider"> <!-- Slider container --> | ||
| + | <div id="mask"> <!-- Mask --> | ||
| + | <ul> | ||
| + | <li id="first" class="firstanimation"> <!-- ID for tooltip and class for animation --> | ||
| + | <div class="artboard"> | ||
| + | <div class="sliderimage"> | ||
| + | <div class="dummy-image"></div> | ||
| + | </div> | ||
| + | <div class="slidertext"> | ||
| + | <h1>Building our own device</h1> | ||
| + | <p>The original measuring device we were using in collaboration with AG Roth is a really expensive machine based on rather simple physics. Therefore, we decided to build our own device in a cost-efficient variant. We performed reliable measurements with it and provide a building plan making label-free proteinarray analysis available for every future iGEM team. </p> | ||
| + | </div> | ||
| + | <div class="slidertext indent"> | ||
| + | <p> Want to read <a href="https://2015.igem.org/Team:Freiburg/OwnDevice"> more?</a> | ||
| + | </p> | ||
| + | </div> | ||
| + | </div> | ||
| + | </li> | ||
| + | <li id="second" class="secondanimation"> | ||
| + | <div class="artboard"> | ||
| + | <div class="sliderimage"> | ||
| + | <div class="dummy-image"></div> | ||
| + | </div> | ||
| + | <div class="slidertext"> | ||
| + | <h1>Communicating science</h1> | ||
| + | <p>Fast and reliable disease diagnostic is a problem of public interest. For this reason we wanted to know what people think about the idea of the DiaCHIP. Although the DiaCHIP is concerned to synthetic biology, which makes people feel rather uncomfortable according to a survey by Leopoldina (national academy of science), we obtained a lot of positive feedback. </p> | ||
| + | </div> | ||
| + | <div class="slidertext indent"> | ||
| + | <p> Want to read <a href="https://2015.igem.org/Team:Freiburg/Practices"> more?</a></p> | ||
| + | </div> | ||
| + | </div> | ||
| + | </li> | ||
| + | <li id="third" class="thirdanimation"> | ||
| + | <div class="artboard"> | ||
| + | <div class="sliderimage"> | ||
| + | <div class="dummy-image"></div> | ||
| + | </div> | ||
| + | <div class="slidertext"> | ||
| + | <h1>Modeling cellfree expression</h1> | ||
| + | <p>In order to optimize the DiaCHIP for future applications, we modelled the process of cell-free expression and diffusion over time. Making use of xxx parameters and xxx ordinary differential equations, we computed the size of the resulting antigen spots and identified the factors limiting cell-free expression in the DiaCHIP. </p> | ||
| + | </div> | ||
| + | <div class="slidertext indent"> | ||
| + | <p> Want to read <a href="https://2015.igem.org/Team:Freiburg/Modeling">more?</a> </p> | ||
| + | </div> | ||
| + | </div> | ||
| + | </li> | ||
| + | <li id="fourth" class="fourthanimation"> | ||
| + | <div class="artboard"> | ||
| + | <div class="sliderimage"> | ||
| + | <div class="dummy-image"></div> | ||
| + | </div> | ||
| + | <div class="slidertext"> | ||
| + | <h1>Measuring our own blood</h1> | ||
| + | <p>One of the most notable results we obtained was the detection of anti-tetanus antibodies in human blood serum. Using the DiaCHIP, we were able to distinguish serum samples of a person taken before vaccination and three weeks later. As expected, antibody binding events were shown after vaccination, whereas there was no signal before. </p> | ||
| + | </div> | ||
| + | <div class="slidertext indent"> | ||
| + | <p> Want to read <a href="https://2015.igem.org/Team:Freiburg/Results">more?</a></p> | ||
| + | </div> | ||
| + | </div> | ||
| + | </li> | ||
| + | </ul> | ||
| + | </div> <!-- End Mask --> | ||
| + | </div> <!-- End Slider Container --> | ||
| + | </div> | ||
</div> | </div> | ||
| − | <div class=" | + | <div class="content_box"> |
| − | + | <!-- Labjournal content goes in here --> | |
| − | + | ||
| − | + | <h1 class="sectionedit1">Project overview: The DiaCHIP</h1> | |
| − | + | <div class="level1"> | |
| − | + | <div class="image_box left"> | |
| − | + | <img align="left" alt="light bulb sketch" src="https://static.igem.org/mediawiki/2015/2/23/Freiburg_light_bulb_sketch.png" width="100px"> | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
</div> | </div> | ||
| − | + | <p> | |
| − | + | <!--korrigiert von Philipp05/09/15--> | |
| − | + | The DiaCHIP is an innovative tool to simultaneously differentially detect antibodies present in blood sera that correspond to infectious diseases. It may greatly simplify broad band screenings, detection of autoimmune diseases and the determination of vaccination status. Essential for our project idea is the combination of on-demand protein synthesis directly in the diagnostic device, that is using a novel and label-free detection system, so simple that it can easily be rebuild and utilized by future iGEM teams. | |
| − | < | + | </p> |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
</div> | </div> | ||
| − | + | <!-- EDIT1 SECTION "Project overview: The DiaCHIP" [1-351] --> | |
| − | + | <div class="floatbox left"> | |
| − | + | <h2 class="sectionedit2">Preparing the DiaCHIP</h2> | |
| − | < | + | <div class="level2"> |
| − | + | <p> | |
| − | + | <!--korrigiert von Philipp05/09/15--> | |
| − | + | As the DiaCHIP relies on antibody-antigen interactions, the antigens first have to be synthesized and immobilized inside the device. Given that the whole device is a microfluidic system, it was most convenient to do this directly in the flow-chamber, where detection will finally take place. | |
| − | + | The flow-chamber consists of two glass surfaces separated by a gap that can be flushed with liquids. On the one surface DNA molecules, which code for the respective antigens. By flushing a cell-free expression mix into the chamber, the respective antigens are transcribed and translated on-demand. Proteins then diffuse until reaching the second surface that specifically captures the proteins encoded by the immobilized DNA. After several washing steps to remove remaining expression-mix the flow-chamber is coated with the immobilized antigens and ready for detection. | |
| − | + | </p> | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
</div> | </div> | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
</div> | </div> | ||
| − | + | <!-- EDIT2 SECTION "Preparing the DiaCHIP" [352-1230] --> | |
| − | + | <div class="floatbox right"> | |
| − | + | <h2 class="sectionedit3">Measuring</h2> | |
| − | < | + | <div class="level2"> |
| − | + | <p> | |
| − | + | <!--korrigiert von Philipp05/09/15--> | |
| − | + | With the iRIf (Abkürzung) system it is possible to record small changes in layer thickness. The binding of an antibody, present in the blood serum flushed through the chamber, to the according antigen increases the local thickness of the protein surface so that interaction events can be measured label-free and in real-time via the change of the optical properties at this spot. | |
| − | + | </p> | |
| − | + | <p> | |
| − | + | But we didn't stop thinking about the device: <a href="https://2015.igem.org/Team:Freiburg/Results">We detected antibodies in our own blood!</a> | |
| − | + | </p> | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
</div> | </div> | ||
| − | + | <div class="tags"><span> | |
| + | <a class="wikilink1" href="/igem2015/doku.php?id=tag:info&do=showtag&tag=info" rel="tag" title="tag:info">info</a> | ||
| + | </span></div> | ||
</div> | </div> | ||
| + | <!-- EDIT3 SECTION "Measuring" [1231-] --> | ||
</div> | </div> | ||
| − | + | ||
| + | |||
</html> | </html> | ||
| + | <!-- Labjournal content ends here --> | ||
| + | {{Freiburg/wiki_content_end}} | ||
Revision as of 15:05, 8 September 2015
Project overview: The DiaCHIP
The DiaCHIP is an innovative tool to simultaneously differentially detect antibodies present in blood sera that correspond to infectious diseases. It may greatly simplify broad band screenings, detection of autoimmune diseases and the determination of vaccination status. Essential for our project idea is the combination of on-demand protein synthesis directly in the diagnostic device, that is using a novel and label-free detection system, so simple that it can easily be rebuild and utilized by future iGEM teams.
Preparing the DiaCHIP
As the DiaCHIP relies on antibody-antigen interactions, the antigens first have to be synthesized and immobilized inside the device. Given that the whole device is a microfluidic system, it was most convenient to do this directly in the flow-chamber, where detection will finally take place. The flow-chamber consists of two glass surfaces separated by a gap that can be flushed with liquids. On the one surface DNA molecules, which code for the respective antigens. By flushing a cell-free expression mix into the chamber, the respective antigens are transcribed and translated on-demand. Proteins then diffuse until reaching the second surface that specifically captures the proteins encoded by the immobilized DNA. After several washing steps to remove remaining expression-mix the flow-chamber is coated with the immobilized antigens and ready for detection.
Measuring
With the iRIf (Abkürzung) system it is possible to record small changes in layer thickness. The binding of an antibody, present in the blood serum flushed through the chamber, to the according antigen increases the local thickness of the protein surface so that interaction events can be measured label-free and in real-time via the change of the optical properties at this spot.
But we didn't stop thinking about the device: We detected antibodies in our own blood!
