Difference between revisions of "Team:Freiburg/Testpage3"
| Line 1: | Line 1: | ||
{{Freiburg/CSS}} | {{Freiburg/CSS}} | ||
{{Freiburg/Menubar}} | {{Freiburg/Menubar}} | ||
| + | |||
{{Freiburg/wiki_content_start}} | {{Freiburg/wiki_content_start}} | ||
<html> | <html> | ||
<style> | <style> | ||
| − | /* | + | /*======= BEGIN: General Styling ========*/ |
| − | + | body { | |
| − | + | color: #000; | |
} | } | ||
| − | + | .page_content { | |
| − | + | margin-bottom: 0px; | |
} | } | ||
| − | |||
| − | + | .content_box3 { | |
| − | /* | + | /*box-shadow: none;*/ |
| − | + | overflow: hidden; | |
| − | + | background-color: #FFF; | |
| − | + | padding: 1% 2% 0% 2%; | |
| − | + | border-radius: 15px 30px; | |
| − | + | margin-top: 2em; | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | + | h1 { | |
| − | + | ||
text-align: center; | text-align: center; | ||
| − | |||
| − | |||
| − | |||
} | } | ||
| − | . | + | .header_box { |
| − | padding: | + | overflow: hidden; |
| − | background-color: # | + | padding: 2% 0%; |
| − | + | margin: auto; | |
| + | width: 60%; | ||
| + | text-align: left; | ||
| + | background-color: #FFF; | ||
| + | border-radius: 30px 60px; | ||
box-shadow: 1px 1px 10px #888; | box-shadow: 1px 1px 10px #888; | ||
-webkit-box-shadow: 1px 1px 10px #888; | -webkit-box-shadow: 1px 1px 10px #888; | ||
-moz-box-shadow: 1px 1px 10px #888; | -moz-box-shadow: 1px 1px 10px #888; | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
} | } | ||
| − | . | + | .image_box { |
| − | + | margin-bottom 10%; | |
| − | + | margin-left: -8%; | |
| − | margin- | + | margin-top: -10%; |
| + | margin-right: -10%; | ||
} | } | ||
| − | /* | + | /*======= END: General Styling ========*/ |
| − | /* | + | /*========= BEGIN: style for navigation bar ==========*/ |
| − | + | #project { | |
| − | + | background: url(https://static.igem.org/mediawiki/2015/d/da/Freiburg_icon_project_active_yellow.png) no-repeat; | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| − | |||
| − | + | #project a { | |
| − | + | color: #ecdc18; | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| − | + | #runningchip { | |
| − | + | left: 18.6%; | |
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| + | /*========= END: style for navigation bar ==========*/ | ||
| − | + | /* code adapted from http://www.smashingmagazine.com/2012/04/pure-css3-cycling-slideshow/*/ | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | #slider { | |
| − | + | height: 500px; | |
| − | + | width: 910px; | |
| − | + | 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;} | |
| − | + | ||
| + | .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: 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; | |
| − | + | height: 470px; | |
| − | + | border-radius: 60px; | |
| − | + | background-color: #FCFCFC; | |
| − | color: # | + | box-shadow: 1px 1px 10px rgb(136, 136, 136); |
| − | + | margin: 5px; | |
| − | + | border: 2px solid rgb(0, 81, 162); | |
| − | + | } | |
| − | } | + | |
| − | . | + | .sliderimage{ |
| − | + | float: right; | |
| − | + | margin: 3% 70px 3% 25px; | |
| − | + | width: 350px | |
| − | + | ||
} | } | ||
| − | + | .slidertext{ | |
| − | + | margin: 3% 25px 0 65px; | |
| − | + | width: 350px; | |
| − | + | text-align: justify; | |
| − | + | line-height: 1; | |
| + | float: left; | ||
} | } | ||
| − | . | + | .slidertext h1{ |
| − | + | text-align: left; | |
} | } | ||
| − | + | .slidertext p{ | |
| − | + | margin-bottom: 0; | |
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| − | + | .slidertext.indent{ | |
| − | + | clear: both; | |
| − | + | 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; |
| − | + | // 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)"}); | ||
| + | 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)"}); | ||
| + | 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"}); |
| + | 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)"}); | ||
| + | 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)"}); | |
| + | 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)"}); | ||
| + | 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)"}); | ||
| + | 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"}); | ||
| + | distance = 3; | ||
| + | } | ||
| − | + | setTimeout(function(){ | |
| − | + | $("#buttonright").bind("click", moveright); | |
| − | + | }, 1000); | |
| − | + | } | |
| − | + | }); | |
| − | + | </script> | |
| − | + | <div class="header_box"> | |
| − | + | <h1>The DiaCHIP - A Versatile Detection System</h1> | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
</div> | </div> | ||
| + | <div class="image_box left" style="margin-bottom:10%;margin-left:-8%;margin-top:-10%;margin-right:-10%"> | ||
| + | <img align="left" alt="DiaCHIP_Sabi" src="https://static.igem.org/mediawiki/2015/a/af/Freiburg_DiaCHIP_Sabi.png" height="1430px"> | ||
| + | </div> | ||
| + | <div style="width:120%;margin-bottom:18%"> | ||
| + | <div class="content_box3" style="margin-right:25%"> | ||
| + | <h2>Project Motivation</h2> | ||
| + | <p> | ||
| + | Serological tests are a key element in modern medicine. Especially, when it comes to the detection and identification of infectious diseases performing different blood tests is inevitable. Regardless if a patient has diffuse symptoms or if he is tested for a defined number of diseases, more than one serological test has to be performed each time. Many tests, many days of waiting and an increasing bill: with some infectious diseases every minute counts and not everyone can afford a long series of testing. Wouldn't it be great if there was a possibility to combine all tests in one single affordable device? | ||
| + | </p> | ||
| + | </div> | ||
| − | <div | + | <div class="content_box3" style="margin-left:35%;margin-right:15%"> |
| − | + | <h2>Detecting Antigen-Antibody Interactions</h2> | |
| − | + | <p> | |
| + | The DiaCHIP is an innovative tool to screen for a broad range of antibodies present in serum. <br> | ||
| + | Antibodies can be an indicator for an immune response towards an infection or a successful vaccination. <br> Antibodies also play a role in the diagnosis of autoimmune diseases. <br> | ||
| + | Especially the ability to differentiate between life threatening diseases and a mild infection within a short time bears the potential to save lives. | ||
| + | </p> | ||
| + | <p> | ||
| + | Spotting diseases by detecting correspondent antibodies in a patient's serum is an established method in <a href="https://2015.igem.org/Team:Freiburg/Diagnostics" title="diagnostics_today">modern diagnostics</a>. The DiaCHIP makes it possible to screen for multiple specific antibodies simply using a drop of blood. | ||
| + | </p> | ||
| + | </div> | ||
| − | + | <div class="content_box3" style="margin-right:25%"> | |
| − | + | <h2>The Concept</h2> | |
| − | + | <p> | |
| − | + | The key feature of the DiaCHIP concept is the combination of on-demand protein synthesis and a novel method for label-free detection packed into one device. The idea is to overcome challenges commonly found in protein array production and preservation. In addition, results can be obtained in a time- and cost-efficient manner; with a device simple enough to be rebuilt by future iGEM teams. | |
| − | + | </p> | |
| − | + | </div> | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
</div> | </div> | ||
| − | + | <!---------------BEGIN SLIDER------------------> | |
| − | + | <div class="container"> | |
| − | + | <div id="buttonright"> | |
| − | <div id=" | + | <img src="https://static.igem.org/mediawiki/2015/b/b3/Freiburg_lightbulb_slider_30.png"> |
| − | <div id=" | + | </div> |
| − | + | <div id="buttonleft"> | |
| − | + | <img src="https://static.igem.org/mediawiki/2015/4/4d/Freiburg_lightbulb_slider_27.png"> | |
| − | + | </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> | + | <div class="sliderimage"> |
| + | <img src="#"> | ||
| + | </div> | ||
| + | <div class="slidertext"> | ||
| + | <h1>Diagnostics Today</h1> | ||
| + | <p> | ||
| + | </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"> | ||
| + | <img src="#"> | ||
| + | </div> | ||
| + | <div class="slidertext"> | ||
| + | <h1>The DiaCHIP System</h1> | ||
| + | <p> | ||
| + | </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"> | ||
| + | <img src="#"> | ||
| + | </div> | ||
| + | <div class="slidertext"> | ||
| + | <h1>iRIf: The Detection System</h1> | ||
| + | <p> | ||
| + | </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"> | ||
| + | <img src="https://static.igem.org/mediawiki/2015/e/e4/Freiburg_Slider-Eigenblut.png" width="350px"> | ||
| + | </div> | ||
| + | <div class="slidertext"> | ||
| + | <h1>Cloning</h1> | ||
| + | <p> | ||
| + | </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> | ||
| + | <li id="fith" class="fithanimation"> <!-- ID for tooltip and class for animation --> | ||
| + | <div class="artboard"> | ||
| + | <div class="sliderimage"> | ||
| + | <img src="https://static.igem.org/mediawiki/2015/8/89/Freiburg_Slider-DIY_scaled.png" width="350px"> | ||
| + | </div> | ||
| + | <div class="slidertext"> | ||
| + | <h1>Building our own device</h1> | ||
| + | <p>The device originally used, in collaboration with AG Roth, is a expensive machine based on rather simple physics. Therefore, we decided to build our own apparatus in a cost-efficient manner. We were able to produce reliable results with it and provide a construction plan [LINK]. This plan will make it possible for future iGEM generations to built and use their own label-free protein array analysis tool.</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"> | ||
| + | <img src="https://static.igem.org/mediawiki/2015/b/b8/Freiburg_Slider-HumanPractice_scaled.png" width="350px"> | ||
| + | </div> | ||
| + | <div class="slidertext"> | ||
| + | <h1>Communicating science</h1> | ||
| + | <p>Diagnosing diseases fast and reliable is not only an issue among medical staff, it is also subject to public interest. This has lead us to ask for people's opinions regarding the DiaCHIP. Although the method is based on synthetic biology, which is a problematic definition for the broad public according to a survey initiated by the Leopoldina (National academy of science), we received lots 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"> | ||
| + | <img src="https://static.igem.org/mediawiki/2015/1/14/Freiburg_Slide-Modelling_scaled.png" width="350px"> | ||
| + | </div> | ||
| + | <div class="slidertext"> | ||
| + | <h1>Modeling cellfree expression</h1> | ||
| + | <p>In order to optimize the DiaCHIP for future applications, we optimized 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"> | ||
| + | <img src="https://static.igem.org/mediawiki/2015/e/e4/Freiburg_Slider-Eigenblut.png" width="350px"> | ||
| + | </div> | ||
| + | <div class="slidertext"> | ||
| + | <h1>Measuring our own blood</h1> | ||
| + | <p>One of the most promising results came from the detection of anti-tetanus antibodies in human blood serum. The DiaCHIP analysis made it possible for us to distinguish serum samples from an individual before and after vaccination. Samples taken three weeks after vaccination produced positive signals, compared to negative results prior to antigen exposure. </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> | ||
| − | </ | + | </html> |
| + | <!-- Labjournal content ends here --> | ||
| + | {{Freiburg/wiki_content_end}} | ||
Revision as of 13:22, 14 September 2015
The DiaCHIP - A Versatile Detection System
Project Motivation
Serological tests are a key element in modern medicine. Especially, when it comes to the detection and identification of infectious diseases performing different blood tests is inevitable. Regardless if a patient has diffuse symptoms or if he is tested for a defined number of diseases, more than one serological test has to be performed each time. Many tests, many days of waiting and an increasing bill: with some infectious diseases every minute counts and not everyone can afford a long series of testing. Wouldn't it be great if there was a possibility to combine all tests in one single affordable device?
Detecting Antigen-Antibody Interactions
The DiaCHIP is an innovative tool to screen for a broad range of antibodies present in serum.
Antibodies can be an indicator for an immune response towards an infection or a successful vaccination.
Antibodies also play a role in the diagnosis of autoimmune diseases.
Especially the ability to differentiate between life threatening diseases and a mild infection within a short time bears the potential to save lives.
Spotting diseases by detecting correspondent antibodies in a patient's serum is an established method in modern diagnostics. The DiaCHIP makes it possible to screen for multiple specific antibodies simply using a drop of blood.
The Concept
The key feature of the DiaCHIP concept is the combination of on-demand protein synthesis and a novel method for label-free detection packed into one device. The idea is to overcome challenges commonly found in protein array production and preservation. In addition, results can be obtained in a time- and cost-efficient manner; with a device simple enough to be rebuilt by future iGEM teams.
