Difference between revisions of "Team:Freiburg/Project/Overview"
Line 4: | Line 4: | ||
{{Freiburg/wiki_content_start}} | {{Freiburg/wiki_content_start}} | ||
<html> | <html> | ||
+ | |||
+ | <style> | ||
+ | /* STYLE FOR LIGHTBULB-SLIDER */ | ||
+ | |||
+ | #lightbulb{ | ||
+ | position: absolute; | ||
+ | transform: scale(0.5); | ||
+ | top: 230px; | ||
+ | left: 15px; | ||
+ | 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; | ||
+ | box-shadow: 1px 1px 5px rgba(0,0,0,0.7); | ||
+ | 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; | ||
+ | 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; | ||
+ | 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: 220px; | ||
+ | } | ||
+ | |||
+ | #buttonleft img, | ||
+ | #buttonright img{ | ||
+ | width: 100px; | ||
+ | } | ||
+ | |||
+ | #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> | ||
+ | |||
+ | |||
+ | <html> | ||
+ | |||
+ | <script> | ||
+ | $(document).ready(function(){ | ||
+ | |||
+ | var distance = 2; | ||
+ | |||
+ | $("#buttonleft").click(function(){ | ||
+ | console.log("Click "+distance); | ||
+ | |||
+ | if (distance == 1) { | ||
+ | console.log("Distance: "+distance); | ||
+ | $('#first').css({"transform": "translateX(0)"}); | ||
+ | $('#second').css({"z-index": "100"}); | ||
+ | $('#third').css({"z-index": "-100", "transform": "translateX(0)"}); | ||
+ | $('#fourth').css({"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)"}); | ||
+ | $('#second').css({"transform": "translateX(1000px)"}); | ||
+ | $('#third').css({"z-index": "100"}); | ||
+ | $('#fourth').css({"z-index": "-100", "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)"}); | ||
+ | $('#second').css({"transform": "translateX(2000px)"}); | ||
+ | $('#third').css({"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)"}); | ||
+ | $('#third').css({"transform": "translateX(2000px"}); | ||
+ | $('#fourth').css({"transform": "translateX(-1000px)"}); | ||
+ | $('#blue').css({"display": "inline"}); | ||
+ | $('#redsmall').css({"display": "none"}); | ||
+ | $('#blue_on').css({"display": "none"}); | ||
+ | $('#redsmall_on').css({"display": "inline"}); | ||
+ | distance = 1; | ||
+ | } | ||
+ | }); | ||
+ | |||
+ | $("#buttonright").click(function(){ | ||
+ | console.log("Click "+distance); | ||
+ | |||
+ | if (distance == 1) { | ||
+ | $('#first').css({"z-index": "-100"}); | ||
+ | $('#second').css({"transform": "translateX(2000px)"}); | ||
+ | $('#third').css({"z-index": "100","transform": "translateX(1000px)"}); | ||
+ | $('#fourth').css({"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)"}); | ||
+ | $('#second').css({"z-index": "-100"}); | ||
+ | $('#third').css({"transform": "translateX(2000px)"}); | ||
+ | $('#fourth').css({"z-index": "100","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)"}); | ||
+ | $('#second').css({"transform": "translateX(0)"}); | ||
+ | $('#third').css({"z-index": "-100"}); | ||
+ | $('#fourth').css({"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)"}); | ||
+ | $('#second').css({"z-index": "100","transform": "translateX(1000px)"}); | ||
+ | $('#third').css({"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; | ||
+ | } | ||
+ | }); | ||
+ | }); | ||
+ | </script> | ||
+ | |||
+ | |||
+ | |||
+ | <div class="container"> | ||
+ | <div id="buttonright"> | ||
+ | <img src="https://static.igem.org/mediawiki/2015/b/b3/Freiburg_lightbulb_slider_30.png"> | ||
+ | </div> | ||
+ | <div id="buttonleft"> | ||
+ | <img src="https://static.igem.org/mediawiki/2015/4/4d/Freiburg_lightbulb_slider_27.png"> | ||
+ | </div> | ||
+ | <div id="lightbulb"> | ||
+ | <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 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>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue.</p> | ||
+ | </div> | ||
+ | <div class="slidertext indent"> | ||
+ | <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. | ||
+ | </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>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue.</p> | ||
+ | </div> | ||
+ | <div class="slidertext indent"> | ||
+ | <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris.</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>Modelling cellfree expression</h1> | ||
+ | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue.</p> | ||
+ | </div> | ||
+ | <div class="slidertext indent"> | ||
+ | <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. </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>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue.</p> | ||
+ | </div> | ||
+ | <div class="slidertext indent"> | ||
+ | <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris.</p> | ||
+ | </div> | ||
+ | </div> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </div> <!-- End Mask --> | ||
+ | </div> <!-- End Slider Container --> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
<div class="content_box"> | <div class="content_box"> | ||
<!-- Labjournal content goes in here --> | <!-- Labjournal content goes in here --> | ||
Line 44: | Line 477: | ||
<!-- EDIT3 SECTION "Measuring" [1231-] --> | <!-- EDIT3 SECTION "Measuring" [1231-] --> | ||
</div> | </div> | ||
+ | |||
+ | |||
+ | |||
</html> | </html> | ||
<!-- Labjournal content ends here --> | <!-- Labjournal content ends here --> | ||
{{Freiburg/wiki_content_end}} | {{Freiburg/wiki_content_end}} |
Revision as of 14:02, 5 September 2015
![](https://static.igem.org/mediawiki/2015/8/85/Freiburg_wiki_background_2_parted_left.png)
![](https://static.igem.org/mediawiki/2015/f/f4/Freiburg_wiki_background_2_parted_right.png)
![](https://static.igem.org/mediawiki/2015/3/31/Freiburg_lightbulb_slider_03.png)
![](https://static.igem.org/mediawiki/2015/4/40/Freiburg_lightbulb_slider_09.png)
![](https://static.igem.org/mediawiki/2015/2/24/Freiburg_lightbulb_slider_08.png)
![](https://static.igem.org/mediawiki/2015/a/a7/Freiburg_lightbulb_slider_07.png)
![](https://static.igem.org/mediawiki/2015/c/ce/Freiburg_lightbulb_slider_06.png)
![](https://static.igem.org/mediawiki/2015/2/2a/Freiburg_lightbulb_slider_09_yellow.png)
![](https://static.igem.org/mediawiki/2015/0/0f/Freiburg_lightbulb_slider_08_yellow.png)
![](https://static.igem.org/mediawiki/2015/6/6b/Freiburg_lightbulb_slider_07_yellow.png)
![](https://static.igem.org/mediawiki/2015/9/91/Freiburg_lightbulb_slider_06_yellow.png)
Project overview: The DiaCHIP
![light bulb sketch](https://static.igem.org/mediawiki/2015/2/23/Freiburg_light_bulb_sketch.png)
The DiaCHIP is a new tool to simultaneously detect antibodies corresponding to different diseases in blood sera. It may greatly simplify broad band screenings, detection of autoimmune diseases and determination of vaccination status. Essential for our project idea is the combination of protein synthesis directly in the diagnostic device using a new and label-free detection system so simple that it can easily be rebuild 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 surfaces separated by a gap that can be flushed with liquids. On the one surface DNA molecules providing the information for the antigens are attached and can be transcribed and translated into protein when a cell-free expression mix is flushed through the chamber. 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 antigens and ready for detection.
Measuring
With the iRIf system it is possible to record small changes in layer thickness. The binding of an antibody from the blood serum flushed through the chamber to the according antigen increases the thickness of the protein surface so that interaction events can be measured label-free and in real-time.
But we didn't stop thinking about the device: We detected antibodies in our own blood!