Difference between revisions of "Team:Freiburg/Project/Overview"

 
(96 intermediate revisions by 13 users not shown)
Line 2: Line 2:
 
{{Freiburg/Menubar}}
 
{{Freiburg/Menubar}}
  
−
{{Freiburg/wiki_content_start}}
+
{{Team:Freiburg/wiki_content_start_bubble}}
 
<html>
 
<html>
  
 
<style>
 
<style>
 +
 
/*========= BEGIN: style for navigation bar ==========*/
 
/*========= BEGIN: style for navigation bar ==========*/
 
#project {
 
#project {
Line 21: Line 22:
  
  
−
/* STYLE FOR LIGHTBULB-SLIDER */
+
/*========= BEGIN: Linkbutton in slider ============*/
−
 
+
.intro_button a:hover {
−
#lightbulb{
+
    text-decoration: underline;
−
  position: absolute;
+
−
  -webkit-transform: scale(0.5);
+
−
  transform: scale(0.5);
+
−
  top: 230px;
+
−
  left: -55px;
+
−
  z-index: 200;
+
 
}
 
}
  
−
#red,
+
.intro_button a {  
−
#redsmall,
+
    color: #FFF;
−
#blue,
+
−
#green{
+
−
  position: absolute;
+
−
  bottom: -500px;
+
 
}
 
}
  
−
#red{
+
.intro_button {
−
  top: 25px;
+
    margin: 0px auto;
−
  left:120px;
+
    padding: 2px 5px 5px 10px;
−
  position: absolute;
+
    width: 180px;
 +
    line-height: 22px;
 +
    text-align: center;
 +
    /*background-color: #326aab;*/
 +
    background-color: #0051A2;
 +
    font-size: 14pt;
 +
    border-radius: 8px;
 +
    /*box-shadow: 1px -1px 1px 0px #888;*/
 +
    /*border: 1px solid #F9F9F9;*/
 +
    color: #FFF;
 
}
 
}
  
−
#blue{
+
.menu-arrow{
−
  bottom: 160px;
+
background-image: url("https://static.igem.org/mediawiki/2015/f/ff/Freiburg_submenu_arrow.png");
−
  left: 25px;
+
background-repeat: no-repeat;
−
  position: absolute;
+
background-position: 5% 50%;
 +
background-size: 10px 13px;
 
}
 
}
  
−
#redsmall{
+
/*========= END: Linkbutton in slider ============*/
−
  bottom: 115px;
+
 
−
  left: 110px;
+
.link_button {
−
  position: absolute;
+
margin: 0px auto;
 +
padding: 0px 5px 0px 10px;
 +
width: 200px;
 +
line-height: 16px;
 +
text-align: center;
 +
background-color: #888;
 +
font-size: 14pt;
 +
border-radius: 2px;
 +
color: #FFF;
 +
opacity: 0.8;
 +
box-shadow: 1px 1px 1px 2px #777;
 
}
 
}
  
−
#green{
+
.link_button a:hover {
−
  top: 10px;
+
    text-decoration: underline;
−
  left: 10px;
+
−
  position: absolute;
+
 
}
 
}
  
−
#red_on{
+
.link_button a {  
−
  top: 25px;
+
    color: #FFF;
−
  left:120px;
+
−
  position: absolute;
+
−
  display: none;
+
 
}
 
}
  
−
#blue_on{
+
.link_button_arrow{
−
  bottom: 160px;
+
background-image: url("https://static.igem.org/mediawiki/2015/f/ff/Freiburg_submenu_arrow.png");
−
  left: 25px;
+
background-repeat: no-repeat;
−
  position: absolute;
+
background-position: 3% 50%;
−
  display: none;
+
background-size: 10px 13px;
 
}
 
}
  
−
#redsmall_on{
+
/*=========BEGIN: General Styles ==========*/
−
   bottom: 115px;
+
.header_box h1{
−
   left: 110px;
+
   color: #C5162F;
−
   position: absolute;
+
  font-size: 40px;
−
   display: none;
+
  margin-bottom: 28px;
 +
   margin-top: 20px;
 +
  line-height: 45px;
 +
  font-weight: 200;
 +
  padding-top: 0px;
 +
  padding-bottom: 0px;
 +
   overflow: visible;
 +
   text-align: center;
 
}
 
}
 +
/*=========END: General Styles===========*/
 +
  
−
#green_on{
 
−
  top: 10px;
 
−
  left: 10px;
 
−
  position: absolute;
 
−
  display: none;
 
−
}
 
  
 +
@media screen and (min-width: 1000px){
  
 
/* code adapted from http://www.smashingmagazine.com/2012/04/pure-css3-cycling-slideshow/*/
 
/* code adapted from http://www.smashingmagazine.com/2012/04/pure-css3-cycling-slideshow/*/
  
 
#slider {
 
#slider {
−
  background: #FCFCFC;
 
 
   height: 500px;
 
   height: 500px;
−
   width: 900px;
+
   width: 910px;
 
   overflow: visible;
 
   overflow: visible;
 
   position: relative;
 
   position: relative;
Line 129: Line 138:
 
#second,
 
#second,
 
#third,
 
#third,
−
#fourth{
+
#fourth,
 +
#fifth,
 +
#sixth,
 +
#seventh,
 +
#eightth {
 
   left: -1000px;
 
   left: -1000px;
 
   -ms-transition: tranform 1s ease;
 
   -ms-transition: tranform 1s ease;
Line 139: Line 152:
 
#first{left: 0;}
 
#first{left: 0;}
 
#third{z-index : -100;}
 
#third{z-index : -100;}
−
#fourth{z-index: -100; left: 1000px;}  
+
#sixth{z-index: -100;}
−
#green{display: none;}
+
#fifth{z-index: -100;}
−
#green_on{display: inline}
+
#fourth{z-index: -100}
 +
#seventh{z-index: -100;}
 +
#eightth{z-index: -100; left: 1000px}
  
 
.container{
 
.container{
 
     position: relative;
 
     position: relative;
 
     height: 500px;
 
     height: 500px;
−
     margin: 3% 0;
+
     margin: 3% auto;
 
     width: 1000px;
 
     width: 1000px;
 
}
 
}
Line 180: Line 195:
 
   cursor: pointer;
 
   cursor: pointer;
 
   cursor: hand;
 
   cursor: hand;
−
}
 
−
 
−
.container{
 
−
  position: relative;
 
 
}
 
}
  
 
.artboard{
 
.artboard{
 
     box-sizing: border-box;
 
     box-sizing: border-box;
 +
    height: 470px;
 +
    border-radius: 60px;
 +
    background-color: #FCFCFC;
 +
  box-shadow: 1px 1px 10px rgb(136, 136, 136);
 +
  margin: 5px;
 +
  border: 2px solid rgb(0, 81, 162);
 
  }
 
  }
  
−
.sliderimage{
+
.slidertext p{
−
  float: right;
+
   margin-bottom: 0;
−
   margin: 3% 75px 3% 25px;
+
−
  width: 350px
+
 
}
 
}
  
−
.slidertext{
+
.slidertext h1 {
−
  margin: 3% 25px 0 75px;
+
    text-align: center;
−
  width: 350px;
+
−
  text-align: justify;
+
−
  line-height: 1;
+
−
  float: left;
+
−
}
+
−
 
+
−
.slidertext h1{
+
−
  text-align: left;
+
−
}
+
−
 
+
−
.slidertext p{
+
−
margin-bottom: 0;
+
 
}
 
}
  
 
.slidertext.indent{
 
.slidertext.indent{
 +
  clear: both;
 
   margin-left: 15%;
 
   margin-left: 15%;
 
   margin-top: 0;
 
   margin-top: 0;
Line 223: Line 227:
 
   width: 350px;
 
   width: 350px;
 
}
 
}
 +
 +
/* ============= BEGIN: Styling for tree-like structure =============== */
 +
 +
.floatcontainer{
 +
  float: left;
 +
}
 +
 +
.container{
 +
  clear: both;
 +
}
 +
 +
.transparent_container{
 +
  overflow: hidden
 +
}
 +
 +
#content_box1{
 +
  margin-left: 15%;
 +
}
 +
 +
#content_box2{
 +
  margin-right: 15%
 +
}
 +
 +
#content_box3{
 +
  margin-left: 15%;
 +
}
 +
 +
#leftimage img{
 +
  width: 450px;
 +
}
 +
 +
} /* end of media query */
 +
 +
.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;
 +
}
 +
 +
 +
/* ============= END: Styling for tree-like structure =============== */
  
 
</style>
 
</style>
  
 +
<script type="text/javascript">
 +
//===================BEGIN:Amazing Bubble Sidebar==========================
  
−
<html>
+
$(document).ready(function(){
 +
  // CHANGE THE FOLLOWING ATTRIBUTES //
 +
  var href_text1='https://2015.igem.org/Team:Freiburg/Project/Overview',
 +
  // Text2 needs no href as it is the actual page //
 +
  img_url='https://static.igem.org/mediawiki/2015/7/76/Freiburg_icon_project_white_03.png',
 +
  href_text3='https://2015.igem.org/Team:Freiburg/Project/System',
 +
  // Text1 needs no text as it is a pic //
 +
  text2='Project Introduction';
 +
  // Text3 needs no text as its always 'next' //
 +
  // HOLD ON CHANGING THINGS --JABBERWOCK  //
 +
 
 +
  $('#bubble1').attr('href',href_text1);
 +
  $('#bubble1_img').attr('src', img_url);
 +
  $('#bubble3').attr('href',href_text3);
 +
 
 +
  $('#bubble2').text(text2);
 +
});
 +
 
 +
//===================END:Amazing Bubble Sidebar==========================
 +
</script>
  
 
<script>
 
<script>
Line 236: Line 310:
 
     // bind the button to the function, so it can be unbound in the code and the button isnt clickable any more //
 
     // 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);
 
     $("#buttonleft").bind("click", moveleft);
−
function moveleft(e) {
+
  function moveleft(e) {
−
// unbind the button //
+
    // unbind the button //
−
$("#buttonleft").unbind();
+
    $("#buttonleft").unbind();
−
console.log("Click "+distance);
+
    console.log("Click "+distance);
  
−
if (distance == 1) {
+
    if (distance == 1) {
−
console.log("Distance: "+distance);
+
      console.log("Distance: "+distance);
−
$('#first').css({"transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"});
+
      $('#first').css({"transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /* 2 first */
−
    $('#second').css({"z-index": "100"});
+
        $('#second').css({"z-index": "100"}); /* begin second */
−
    $('#third').css({"z-index": "-100", "transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"});
+
        $('#third').css({});
−
    $('#fourth').css({"transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"});
+
        $('#fourth').css({});
−
    $('#redsmall').css({"display": "inline"});
+
        $('#fifth').css({});
−
    $('#green').css({"display": "none"});
+
        $('#sixth').css({});
−
    $('#redsmall_on').css({"display": "none"});
+
        $('#seventh').css({"z-index": "-100", "transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /* 4 seventh */
−
    $('#green_on').css({"display": "inline"});
+
        $('#eightth').css({"transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /* 3 eightth */
−
    distance = 2;
+
        distance = 2;
−
}
+
    }
  
−
else if (distance ==2) {
+
    else if (distance ==2) {
−
console.log("Distance: "+distance);
+
      console.log("Distance: "+distance);
−
$('#first').css({"transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"});
+
      $('#first').css({"transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"}); /* 3 first */
−
    $('#second').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)"}); /* 2 second */
−
    $('#third').css({"z-index": "100"});
+
        $('#third').css({"z-index": "100"}); /* begin third */
−
    $('#fourth').css({"z-index": "-100", "transform": "translateX(-2000px)", "-webkit-transform": "translateX(-2000px)", "-ms-transform": "translateX(-2000px)", "-webkit-transform": "translateX(-2000px)", "-ms-transform": "translateX(-2000px)"});
+
        $('#fourth').css({});
−
    $('#green').css({"display": "inline"});
+
        $('#fifth').css({});
−
    $('#red').css({"display": "none"});
+
        $('#sixth').css({});
−
    $('#green_on').css({"display": "none"});
+
        $('#seventh').css({});
−
    $('#red_on').css({"display": "inline"});
+
        $('#eightth').css({"z-index": "-100", "transform": "translateX(-2000px)", "-webkit-transform": "translateX(-2000px)", "-ms-transform": "translateX(-2000px)"}); /* 4 eightth */
−
    distance = 3;
+
        distance = 3;
−
}
+
    }
  
−
else if (distance ==3) {
+
    else if (distance ==3) {
−
console.log("Distance: "+distance);
+
      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)"});
+
      $('#first').css({"z-index": "-100", "transform": "translateX(-1000px)", "-webkit-transform": "translateX(-1000px)", "-ms-transform": "translateX(-1000px)", "-webkit-transform": "translateX(-1000px)", "-ms-transform": "translateX(-1000px)"}); /* 4 first */
−
    $('#second').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"});
+
        $('#second').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"}); /* 3 second */
−
    $('#third').css({"transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"});
+
        $('#third').css({"transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"}); /* 2 third */
−
    $('#fourth').css({"z-index": "100"});
+
        $('#fourth').css({"z-index": "100"}); /* begin fourth */
−
    $('#red').css({"display": "inline"});
+
        $('#fifth').css({});
−
    $('#blue').css({"display": "none"});
+
        $('#sixth').css({});
−
    $('#red_on').css({"display": "none"});
+
        $('#seventh').css({});
−
    $('#blue_on').css({"display": "inline"});
+
        $('#eightth').css({});
−
    distance = 4;
+
        distance = 4;
−
}
+
    }
  
−
else if (distance ==4) {
+
    else if (distance ==4) {
−
console.log("Distance: "+distance);
+
      console.log("Distance: "+distance);
−
$('#first').css({"z-index": "100"});
+
      $('#first').css({});
−
    $('#second').css({"z-index": "-100", "transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"});
+
        $('#second').css({"z-index": "-100", "transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /* 4 second */
−
    $('#third').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"});
+
        $('#third').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"}); /* 3 third */
−
    $('#fourth').css({"transform": "translateX(-1000px)", "-webkit-transform": "translateX(-1000px)", "-ms-transform": "translateX(-1000px)"});
+
        $('#fourth').css({"transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"}); /* 2 fourth */
−
    $('#blue').css({"display": "inline"});
+
        $('#fifth').css({"z-index": "100"}); /* begin fifth */
−
    $('#redsmall').css({"display": "none"});
+
        $('#sixth').css({});
−
    $('#blue_on').css({"display": "none"});
+
        $('#seventh').css({});
−
    $('#redsmall_on').css({"display": "inline"});
+
        $('#eightth').css({});
−
    distance = 1;
+
        distance = 5;
−
}
+
    }
  
−
// see: http://stackoverflow.com/questions/1836105/how-to-wait-5-seconds-with-jquery //
+
    else if (distance ==5) {
−
// wait until css-animation has finished. time is specified in css-transition property //
+
      console.log("Distance: "+distance);
−
setTimeout(function(){
+
      $('#first').css({});
−
$("#buttonleft").bind("click", moveleft);
+
        $('#second').css({});
−
}, 1000);
+
        $('#third').css({"z-index": "-100", "transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /* 4 third */
−
}
+
        $('#fourth').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"}); /* 3 fourth */
 +
        $('#fifth').css({"transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"}); /* 2 fifth */
 +
        $('#sixth').css({"z-index": "100"}); /* begin sixth */
 +
        $('#seventh').css({});
 +
        $('#eightth').css({});
 +
        distance = 6;
 +
    }
 +
 
 +
    else if (distance == 6) {
 +
      console.log("Distance: "+distance);
 +
      $('#first').css({});
 +
        $('#second').css({});
 +
        $('#third').css({});
 +
        $('#fourth').css({"z-index" : "-100", "transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /* 4 fourth */
 +
        $('#fifth').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"}); /* 3 fifth */
 +
        $('#sixth').css({"transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"}); /* 2 sixth */
 +
        $('#seventh').css({"z-index": "100"}); /* begin seventh */
 +
        $('#eightth').css({});
 +
        distance = 7;
 +
    }
 +
 
 +
    else if (distance == 7) {
 +
      console.log("Distance: "+distance);
 +
      $('#first').css({});
 +
        $('#second').css({});
 +
        $('#third').css({});
 +
        $('#fourth').css({});
 +
        $('#fifth').css({"z-index": "-100", "transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /* 4 fifth */
 +
        $('#sixth').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"}); /* 3 sixth */
 +
        $('#seventh').css({"transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"}); /* 2 seventh */
 +
        $('#eightth').css({"z-index": "100"}); /* begin eightth */
 +
        distance = 8;
 +
    }
 +
 
 +
    else if (distance == 8) {
 +
      console.log("Distance: "+distance);
 +
      $('#first').css({"z-index": "100"}); /* begin first */
 +
        $('#second').css({});
 +
        $('#third').css({});
 +
        $('#fourth').css({});
 +
        $('#fifth').css({});
 +
        $('#sixth').css({"z-index": "-100", "transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /* 4 sixth */
 +
        $('#seventh').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"}); /* 3 seventh */
 +
        $('#eightth').css({"transform": "translateX(-1000px)", "-webkit-transform": "translateX(-1000px)", "-ms-transform": "translateX(-1000px)"}); /* 2 eightth */
 +
        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);
 
     $("#buttonright").bind("click", moveright);
−
function moveright(e) {
+
  function moveright(e) {
  
−
$("#buttonright").unbind();
+
    $("#buttonright").unbind();
−
console.log("Click "+distance);
+
    console.log("Click "+distance);
  
−
if (distance == 1) {
+
    if (distance == 1) {
−
$('#first').css({"z-index": "-100"});
+
      $('#first').css({"z-index": "-100"}); /* 1 second */
−
    $('#second').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"});
+
        $('#second').css({});
−
    $('#third').css({"z-index": "100","transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"});
+
        $('#third').css({});
−
    $('#fourth').css({"transform": "translateX(-2000px)", "-webkit-transform": "translateX(-2000px)", "-ms-transform": "translateX(-2000px)"});
+
        $('#fourth').css({});
−
    $('#redsmall').css({"display": "inline"});
+
        $('#fifth').css({});
−
    $('#blue').css({"display": "none"});
+
        $('#sixth').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"}); /* 6 third */
−
    $('#redsmall_on').css({"display": "none"});
+
        $('#seventh').css({"z-index": "100","transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"}); /* 7 third */
−
    $('#blue_on').css({"display": "inline"});
+
        $('#eightth').css({"transform": "translateX(-2000px)", "-webkit-transform": "translateX(-2000px)", "-ms-transform": "translateX(-2000px)"}); /* 8 first */
−
    distance = 4;
+
        distance = 8;
−
}
+
    }
  
−
else if (distance ==2) {
+
    else if (distance ==2) {
−
console.log("Distance: "+distance);
+
      console.log("Distance: "+distance);
−
$('#first').css({"transform": "translateX(-1000px)", "-webkit-transform": "translateX(-1000px)", "-ms-transform": "translateX(-1000px)"});
+
      $('#first').css({"transform": "translateX(-1000px)", "-webkit-transform": "translateX(-1000px)", "-ms-transform": "translateX(-1000px)"}); /* 1 first */
−
    $('#second').css({"z-index": "-100"});
+
        $('#second').css({"z-index": "-100"}); /* 2 second */
−
    $('#third').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"});
+
        $('#third').css({});
−
    $('#fourth').css({"z-index": "100","transform": "translateX(-1000px)", "-webkit-transform": "translateX(-1000px)", "-ms-transform": "translateX(-1000px)"});
+
        $('#fourth').css({});
−
    $('#green').css({"display": "inline"});
+
        $('#fifth').css({});
−
    $('#redsmall').css({"display": "none"});
+
        $('#sixth').css({});
−
    $('#green_on').css({"display": "none"});
+
        $('#seventh').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"}); /* 7 third */
−
    $('#redsmall_on').css({"display": "inline"});
+
        $('#eightth').css({"z-index": "100","transform": "translateX(-1000px)", "-webkit-transform": "translateX(-1000px)", "-ms-transform": "translateX(-1000px)"}); /* 8 fourth */
−
    distance = 1;
+
        distance = 1;
−
}
+
    }
  
−
else if (distance ==3) {
+
    else if (distance ==3) {
−
console.log("Distance: "+distance);
+
      console.log("Distance: "+distance);
−
$('#first').css({"z-index": "100","transform": "translateX(0px)", "-webkit-transform": "translateX(0px)", "-ms-transform": "translateX(0px)"});
+
      $('#first').css({"z-index": "100","transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /* 1 fourth */
−
    $('#second').css({"transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"});
+
        $('#second').css({"transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /* 2 first */
−
    $('#third').css({"z-index": "-100"});
+
        $('#third').css({"z-index": "-100"}); /* 3 second */
−
    $('#fourth').css({"transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"});
+
        $('#fourth').css({});
−
    $('#red').css({"display": "inline"});
+
        $('#fifth').css({});
−
    $('#green').css({"display": "none"});
+
        $('#sixth').css({});
−
    $('#red_on').css({"display": "none"});
+
        $('#seventh').css({});
−
    $('#green_on').css({"display": "inline"});
+
        $('#eightth').css({"transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /* 8 third */
−
    distance = 2;
+
        distance = 2;
−
}
+
    }
  
−
else if (distance ==4) {
+
    else if (distance ==4) {
−
console.log("Distance: "+distance);
+
      console.log("Distance: "+distance);
−
$('#first').css({"transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"});
+
      $('#first').css({"transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"}); /* 1 third */
−
    $('#second').css({"z-index": "100","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)"}); /* 2 fourth */
−
    $('#third').css({"transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"});
+
        $('#third').css({"transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /*3 first */
−
    $('#fourth').css({"z-index": "-100"});
+
        $('#fourth').css({"z-index": "-100"}); /* 4 second*/
−
    $('#blue').css({"display": "inline"});
+
        $('#fifth').css({});
−
    $('#red').css({"display": "none"});
+
        $('#sixth').css({});
−
    $('#blue_on').css({"display": "none"});
+
        $('#seventh').css({});
−
    $('#red_on').css({"display": "inline"});
+
        $('#eightth').css({});
−
    distance = 3;
+
        distance = 3;
−
}
+
    }
  
−
setTimeout(function(){
+
    else if (distance ==5) {
−
$("#buttonright").bind("click", moveright);
+
      console.log("Distance: "+distance);
−
}, 1000);
+
      $('#first').css({});
−
}
+
        $('#second').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"}); /* 2 third */
 +
        $('#third').css({"z-index": "100","transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"}); /* 3 fourth */
 +
        $('#fourth').css({"transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /* 4 first */
 +
        $('#fifth').css({"z-index": "-100"}); /* 5 second */
 +
        $('#sixth').css({});
 +
        $('#seventh').css({});
 +
        $('#eightth').css({});
 +
        distance = 4;
 +
    }
 +
 
 +
    else if (distance == 6) {
 +
      console.log("Distance: "+distance);
 +
      $('#first').css({});
 +
        $('#second').css({});
 +
        $('#third').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"}); /* 3 third */
 +
        $('#fourth').css({"z-index": "100","transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"}); /* 4 fourth */
 +
        $('#fifth').css({"transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /* 5 first */
 +
        $('#sixth').css({"z-index": "-100"}); /* 6 second */
 +
        $('#seventh').css({});
 +
        $('#eightth').css({});
 +
        distance =  5;
 +
    }
 +
 
 +
    else if (distance == 7) {
 +
      console.log("Distance: "+distance);
 +
      $('#first').css({});
 +
        $('#second').css({});
 +
        $('#third').css({});
 +
        $('#fourth').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"}); /* 4 third */
 +
        $('#fifth').css({"z-index": "100","transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"}); /* 5 fourth */
 +
        $('#sixth').css({"transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /* 6 first */
 +
        $('#seventh').css({"z-index": "-100"}); /* 7 second */
 +
        $('#eightth').css({});
 +
        distance = 6;
 +
    }
 +
 
 +
    else if (distance == 8) {
 +
      console.log("Distance: "+distance);
 +
      $('#first').css({});
 +
        $('#second').css({});
 +
        $('#third').css({});
 +
        $('#fourth').css({});
 +
        $('#fifth').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"}); /* 5 third */
 +
        $('#sixth').css({"z-index": "100","transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"}); /* 6 fourth */
 +
        $('#seventh').css({"transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /* 7 first */
 +
        $('#eightth').css({"z-index": "-100"}); /* 8 second */
 +
        distance = 7;
 +
    }
 +
 
 +
    setTimeout(function(){
 +
      $("#buttonright").bind("click", moveright);
 +
    }, 1000);
 +
  }
 
});
 
});
 
</script>
 
</script>
  
 +
<!-- BEGIN Responsive Layout -->
  
 +
<style type="text/css">
  
−
<div class="container">
+
@media screen and (max-width: 1000px){
−
<div id="buttonright">
+
  #leftimage{
−
<img src="https://static.igem.org/mediawiki/2015/b/b3/Freiburg_lightbulb_slider_30.png">
+
    display: none;
 +
  }
 +
 
 +
  #buttonleft,
 +
  #buttonright{
 +
    display: none;
 +
  }
 +
 
 +
  .slidertext,
 +
  .sliderimage{
 +
    width: 46%;
 +
    margin: auto 2% auto 2%;
 +
  }
 +
 
 +
  #mask ul{
 +
    margin-left: 0;
 +
  }
 +
  #content_box1,
 +
  #content_box2,
 +
  #content_box3{
 +
      margin-right: 10px;
 +
      margin-left: 10px;   
 +
  }
 +
 
 +
  .transparent_container{
 +
    overflow: visible;
 +
  }
 +
 
 +
  #first,
 +
  #second,
 +
  #third,
 +
  #fourth,
 +
  #fifth,
 +
  #sixth,
 +
  #seventh,
 +
  #eightth {
 +
    left: 0;
 +
    font-size: 100%;
 +
    z-index: 0;
 +
  }
 +
 
 +
}
 +
 
 +
@media screen and (max-width: 600px){
 +
 
 +
  .sliderimage img{
 +
    display: none;
 +
  }
 +
 
 +
  .slidertext {
 +
    width: 96%;
 +
    margin: auto 2% auto 2%;
 +
  }
 +
}
 +
 
 +
</style>
 +
 
 +
<script type="text/javascript">
 +
 
 +
$(document).ready(changesliderclass);
 +
$(window).resize(changesliderclass);
 +
 
 +
function changesliderclass() {
 +
  if ($(window).width() < 1000) {
 +
    console.log('changesliderclass');
 +
    $('#first').attr('class', 'content_box');
 +
    $('#second').attr('class', 'content_box');
 +
    $('#third').attr('class', 'content_box');
 +
    $('#fourth').attr('class', 'content_box');
 +
    $('#fifth').attr('class', 'content_box');
 +
    $('#sixth').attr('class', 'content_box');
 +
    $('#seventh').attr('class', 'content_box');
 +
    $('#eightth').attr('class', 'content_box');
 +
  } else {
 +
    console.log('dont changesliderclass');
 +
    $('#first').removeAttr('class');
 +
    $('#second').removeAttr('class');
 +
    $('#third').removeAttr('class');
 +
    $('#fourth').removeAttr('class');
 +
    $('#fifth').removeAttr('class');
 +
    $('#sixth').removeAttr('class');
 +
    $('#seventh').removeAttr('class');
 +
    $('#eightth').removeAttr('class');
 +
  }
 +
}
 +
 
 +
</script>
 +
 
 +
 
 +
 
 +
<div class="header_box">  
 +
<h1 class="headerbox">The DiaCHIP - A Versatile Detection System</h1>
 +
</div>
 +
 
 +
<div class="float_barrier"></div>
 +
 
 +
<div class="floatcontainer">
 +
 
 +
<div id='leftimage'>
 +
  <img align="left" alt="DiaCHIP_Sabi" src="https://static.igem.org/mediawiki/2015/a/af/Freiburg_DiaCHIP_Sabi.png" height="1430px">
 
</div>
 
</div>
−
<div id="buttonleft">
+
 
−
<img src="https://static.igem.org/mediawiki/2015/4/4d/Freiburg_lightbulb_slider_27.png">
+
<div class="transparent_container">
 +
<div id="content_box1" class="content_box">
 +
<h2>Project Motivation</h2>
 +
<p>
 +
    Serological tests are a key element in modern medicine. Especially for detection and identification of infectious diseases, the performance of several blood tests is inevitable. Testing for more than one disease at once or diagnosing a patient with uncertain symptoms usually requires far more than one test. Every single test that is required increases the time of waiting for a precise diagnosis. In case of dangerous infectious diseases every minute until the onset of an appropriate treatment is crucial for the patient's survival. What if there was a possibility to combine all these tests in one single chip which offers a fast diagnosis and is affordable for everyone?
 +
</p>
 
</div>
 
</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>
 +
 +
 +
<div class="transparent_container">
 +
<div id="content_box2" class="content_box">
 +
<h2 style="text-align:left">Detecting Antigen-Antibody Interactions</h2>
 +
<p>
 +
The DiaCHIP is an innovative tool to screen for a broad range of antibodies in serum. Their presence serves as an indicator for an immune response towards an infectious disease or a successful vaccination. They also play an important role in the diagnosis of autoimmune diseases. Identifying diseases by detecting disease associated antibodies in a patient's serum is an established method in modern diagnostics. <br>
 +
Based on the very same principle, the DiaCHIP enables to screen for multiple diseases simultaneously, thereby reducing time and costs of a diagnosis. Especially the ability to differentiate between life threatening diseases and mild infections within a short time bears the potential to save lifes. 
 +
</p>
 +
</div>
 +
</div>
 +
 +
<div class="transparent_container">
 +
<div id="content_box3" class="content_box">
 +
<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 - all this packed into one device. The idea is to overcome challenges commonly found in protein array production and preservation. By cell-free expression of disease-related antigens, the protein array can be produced right when it is needed. In addition, results can be obtained in a time- and cost-efficient manner using a device simple enough to be rebuilt by future iGEM teams.
 +
</p>
 +
              <div class="link_button link_button_arrow">
 +
                <p><a href="https://2015.igem.org/Team:Freiburg/Project/System" title="System Overview">Step by Step Overview</a></p>
 +
              </div>
 +
</div>
 +
</div>
 +
 +
</div>
 +
 +
<div class="float_barrier"></div>
 +
 +
 +
 +
<!---------------BEGIN SLIDER------------------>
 +
<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="content-slider">
 
   <div id="content-slider">
 
       <div id="slider">  <!-- Slider container -->
 
       <div id="slider">  <!-- Slider container -->
 
         <div id="mask">  <!-- Mask -->
 
         <div id="mask">  <!-- Mask -->
−
        <ul>
+
          <ul>
−
        <li id="first" class="firstanimation">  <!-- ID for tooltip and class for animation -->
+
−
        <div class="artboard">
+
−
        <div class="sliderimage">
+
−
        <img src="https://static.igem.org/mediawiki/2015/thumb/4/48/Freiburg_Slider-DIY.jpg/600px-Freiburg_Slider-DIY.jpg" width="350px">
+
−
        </div>
+
−
        <div class="slidertext">
+
−
        <h1>Building our own device</h1>
+
−
        <p>The original measuring device we were using in collaboration with AG Roth was a pricy machine based on rather simple physics. Therefore, we decided to build our own device in a cost-efficient manner. We performed reliable measurements with it and provided a construction plan -making label-free protein array analysis available for every iGEM team in the future. </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">
+
−
        <img src="https://static.igem.org/mediawiki/2015/thumb/b/b3/Freiburg_Slider-Eigenblut.jpg/600px-Freiburg_Slider-Eigenblut.jpg" width="350px">
+
−
        </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>
+
  
 +
            <li id="first" class="firstanimation">  <!-- ID for tooltip and class for animation -->
 +
              <div class="artboard">
 +
              <div class="sliderimage" style="margin-top:10%">
 +
                <img src="https://static.igem.org/mediawiki/2015/6/6a/Freiburg_DiaCHIP_overview_scaled.jpg" width="350px">
 +
              </div>
 +
              <div class="slidertext">
 +
                <h1>The DiaCHIP - System Overview</h1>
 +
                <p>The core of our new diagnostic device consists of two slides that form a microfluidic chamber. Therein, an antigen array can be generated on demand by cell-free copying of a DNA template array. By flushing the chamber with a blood sample, antibodies present in the sample bind to corresponding antigens. This interaction is detected in real-time using the optical detection method iRIf.</p>
 +
                <p style="margin-top:10px">
 +
              <div class="intro_button menu-arrow">         
 +
                <a href="https://2015.igem.org/Team:Freiburg/Project/System" title="System Overview">Step by Step Overview</a>
 +
              </div>
 +
                </p>
  
 +
              </div>
 +
              </div>
 +
            </li>
  
−
<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="DiaCHIP_Sabi" src="https://static.igem.org/mediawiki/2015/a/af/Freiburg_DiaCHIP_Sabi.png" width="420px">
 
−
</div>
 
−
<p>
 
−
<!--korrigiert von Philipp05/09/15-->
 
−
<!--neu von Ramona08/09/15-->
 
−
The DiaCHIP is an innovative tool to simultaneously and differentially detect antibodies present in blood sera in response to an infectious disease. It bears the potential to greatly simplify broad band screenings, detection of autoimmune diseases and the determination of vaccination statuses. Especially in case of threatening infections accompanied by similar symptoms fast and reliable differentiation could save lives.
 
−
</br>
 
−
Identifying diseases by detecting correspondent antibodies in a patient's blood serum is an established method in  <a class="wikilink1" href="https://2015.igem.org/Team:Freiburg/Diagnostics" title="diagnostics_today">modern diagnostics</a>. Thus, a simple blood sample is sufficient to perform reliable diagnostics with the DiaCHIP.
 
−
</br>
 
−
The key feature in the concept of the DiaCHIP is the combination of on-demand protein synthesis and an innovative, label-free detection method in one device. This enables to overcome challenges in storage and handling that occur with currently available tests. Additionally, diagnoses can be received faster and in a more cost-efficient way than until nowadays. Nonetheless, the whole device is so simple that it can easily be rebuilt and utilized by future iGEM teams (LINK – new device).
 
  
 +
            <li id="second" class="secondanimation">
 +
              <div class="artboard">
 +
              <div class="sliderimage" style="margin-top:12%">
 +
                <img src="https://static.igem.org/mediawiki/2015/9/94/Freiburg_furture_slider.png" width="350px">
 +
              </div>
 +
              <div class="slidertext">
 +
                <h1>Outlook</h1>
 +
                <p>Our results provide a proof of concept that the functional principle of the DiaCHIP is suitable for antibody detection in complex samples. Although further improvements have to be done in terms of reliablitiy and quantification, various additional applications are conceivable. Representing a way to reduce time and cost required for diagnosing a single patient, the DiaCHIP holds the potential to enhance and enlighten future diagnostics.
 
</p>
 
</p>
 +
            <p>
 +
              <div class="intro_button menu-arrow">         
 +
                <a href="https://2015.igem.org/Team:Freiburg/Project/Future_Directions" title="Future_Directions">DiaCHIP in the <br>Future</a>
 +
              </div>
 +
                </p>
 +
            </li>
  
  
−
<p>
+
            <li id="third" class="thirdanimation">
−
<b>Step 1: Preparing the DiaCHIP by protein synthesis</b>
+
              <div class="artboard">
−
</br>
+
              <div class="sliderimage" style="margin:6% auto">
−
<!--korrigiert von Philipp05/09/15-->
+
                <img src="https://static.igem.org/mediawiki/2015/d/db/Freiburg_iRiF_slider.png" width="70%">
−
<!--neu von Ramona08/09/15-->
+
              </div>
−
Before being able to screen for antibody-antigen interactions, the antigens have to be synthesized and immobilized in a microarray arrangement. This is obtained by a copying mechanism converting a DNA template into a protein microarray by cell-free protein expression. This expression system based on a bacterial lysate prevents the need for genetically engineered organisms to produce every single antigen.
+
              <div class="slidertext">  
−
</br>
+
                <h1>Optical Detection: iRIf</h1>
−
To obtain the DNA template, the respective sequences containing transcriptional and translational initiation sites, the antigen coding sequence and terminating regions have to be constructed and labeled with an amino group. An activated PDMS slide provides the basis for immobilization of the DNA by covalent binding of the amino group. Spotting the antigen coding sequences in a distinct pattern enables to retrace a detected binding event to a certain disease.
+
                <p>One disadvantage of currently available serological tests is the need for secondary labels that allow the detection of disease markers. Making use of an optical method based on the interference of light, the DiaCHIP can detect specific binding events on a protein microarray without further labeling. Read more about this innovative tool and the physics behind it.  
−
The template slide is placed in close proximity to the future protein array enabling the expressed proteins to reach this other surface by diffusion. Complex chemistry ensures that target proteins are specifically immobilized on this surface, while components of the expression mix can be washed away before sample analysis.
+
                </p>
  
−
</p>
+
                <p style="margin-top:15px">
 +
              <div class="intro_button menu-arrow">         
 +
                <a href="https://2015.igem.org/Team:Freiburg/Project/iRIf" title="Optical Detection">iRIf Principle and Physics</a>
 +
              </div>
 +
                </p>
  
−
<p>
+
              </div>
−
<b>Step 2: Measuring serum samples by iRIf</b>
+
              </div>
−
</br>
+
            </li>
−
<!--korrigiert von Philipp05/09/15-->
+
 
−
<!--neu von Ramona08/09/15-->
+
 
−
After preparation of the DiaCHIP, a patient’s serum sample can be flushed over the protein array. The binding of antibodies to the protein surface causes a minimal change in the thickness of the slide right at the corresponding antigen spot. This change can be measured without the need for a further label with an emerging method called iRIf (imaging reflectometric interference). Based on the interference of light beams reflected on different thin layers, binding events can be recorded in real-time.  
+
            <li id="fourth" class="fourthanimation">
 +
              <div class="artboard">
 +
              <div class="sliderimage" style="margin:8% auto">
 +
                <img src="https://static.igem.org/mediawiki/2015/0/03/Freiburg_specific_surface_RJ_preview.jpg" width="230px">
 +
              </div>
 +
              <div class="slidertext">
 +
                <h1>Surface Chemistry</h1>
 +
                <p>The production of a customized protein microarray in the DiaCHIP is based on selective immobilization of antigens on a glass slide. Therefore, a specific surface chemistry was established to reduce the proportion of unspecific binding of non-target proteins to a minimum.
 +
                  Read more about the different layer compositions we tested on our way to high specificity.
 +
                </p>
 +
 
 +
                <p style="margin-top:15px">
 +
              <div class="intro_button menu-arrow">         
 +
                <a href="https://2015.igem.org/Team:Freiburg/Project/Surface_Chemistry" title="Surface Chemistry">Establishing a Specific Surface</a>
 +
              </div>
 +
                </p>
 +
 
 +
              </div>
 +
              </div>
 +
            </li>
 +
 
 +
 
 +
            <li id="fifth" class="fifthanimation">
 +
              <div class="artboard">
 +
              <div class="sliderimage" style="margin-top:10%">
 +
                <img src="https://static.igem.org/mediawiki/2015/f/f8/Freiburg_ProtPur_slider.png" width="350px">
 +
              </div>
 +
              <div class="slidertext">
 +
                <h1>Protein Purification</h1>
 +
                <p>Protein expression in the DiaCHIP is mediated by cell-free expression. As this is an advanced method dependent on the optimization of many parameters, we got back to conventional protein purification in <i>E. coli</i> for being able to compare the results of both techniques. <br>
 +
Read more about overexpression and purification of several antigenic peptides. 
 +
                </p>
 +
 
 +
                <p style="margin-top:30px">
 +
              <div class="intro_button menu-arrow">         
 +
                <a href="https://2015.igem.org/Team:Freiburg/Project/Protein_Purification" title="Protein Purification">Purification of Antigens</a>
 +
              </div>
 +
                </p>
 +
 
 +
              </div>
 +
              </div>
 +
            </li>
 +
 
 +
 
 +
            <li id="sixth" class="sixthanimation">
 +
              <div class="artboard">
 +
              <div class="sliderimage" style="margin-top:12%">
 +
                <img src="https://static.igem.org/mediawiki/2015/e/eb/Freiburg_cellfreeexpressioninchamber.jpeg" width="350px">
 +
              </div>
 +
              <div class="slidertext">
 +
                <h1>Cell-Free Expression</h1>
 +
                <p> A key feature of the DiaCHIP is the capability to produce protein arrays on demand via cell-free expression. To reduce the cost of a DiaCHIP measurement, we produced a cell-free expression system based on an <i>E. coli</i> lysate ourselves. This system is also capable of expressing immobilized DNA sequences. See how this sensitive system was established and optimized.  
 
</p>
 
</p>
−
<p>
+
            <p style="margin-top:30px">
−
After weeks of opimizing the different components of the DiaCHIP, we reveal our great results. The highlight of our project was reached with the successful <a href="https://2015.igem.org/Team:Freiburg/Results">detection of antibodies in our own blood!</a>
+
              <div class="intro_button menu-arrow">         
 +
                <a href="https://2015.igem.org/Team:Freiburg/Project/Cellfree_Expression" title="Cell-Free expression">Cell-free Antigen Expression</a>
 +
              </div>
 +
                </p>
 +
            </li>
 +
 
 +
 
 +
            <li id="seventh" class="seventhanimation">
 +
              <div class="artboard">
 +
              <div class="sliderimage" style="margin:10% 60px 3% 25px">
 +
                <img src="https://static.igem.org/mediawiki/2015/b/b2/Freiburg_DNAengineering_slider.png" width="350px">
 +
              </div>
 +
              <div class="slidertext">
 +
                <h1>DNA Engineering</h1>
 +
                <p>Genetic fusion of different antigens and tags is a basic requirement of our project. In order to enable several people to work in parallel we designed a cloning strategy easy to follow and additionally easy to expand for further needs.
 +
Read more about the combination of different cloning methods to reduce efforts in DNA Engineering and the design of an expression vector meeting iGEM requirements.
 
</p>
 
</p>
−
</div>
 
−
<div class="tags"><span>
 
−
<a class="wikilink1" href="/igem2015/doku.php?id=tag:info&amp;do=showtag&amp;tag=info" rel="tag" title="tag:info">info</a>
 
−
</span></div>
 
−
</div>
 
−
<!-- EDIT3 SECTION "Measuring" [1231-] -->
 
−
</div>
 
  
 +
                <p style="margin-top:30px">
 +
              <div class="intro_button menu-arrow">         
 +
                <a href="https://2015.igem.org/Team:Freiburg/Methods/Cloning" title="DNA Engineering">DNA <br>Engineering</a>
 +
              </div>
 +
                </p>
  
 +
              </div>
 +
              </div>
 +
            </li>
  
 +
 +
            <li id="eightth" class="eightthanimation">
 +
              <div class="artboard">
 +
              <div class="sliderimage" style="margin:10% 60px 3% 25px">
 +
                <img src="https://static.igem.org/mediawiki/2015/0/0b/Freiburg_ELISA_slider.png" width="350px">
 +
              </div>
 +
              <div class="slidertext">
 +
                <h1>Diagnostics Today</h1>
 +
                <p>Currently used serological tests are available for a broad range of infectious diseases. However, they meet limitations that restrict an early onset of appropriate treatments which could be life-saving. The necessity of performing several tests to check for more than one disease is not only time-consuming but also costly. The DiaCHIP tackles these issues by providing a fast and affordable method for simultaneous testing.
 +
                </p>
 +
 +
                <p style="margin-top:30px">
 +
              <div class="intro_button menu-arrow">         
 +
                <a href="https://2015.igem.org/Team:Freiburg/Design" title="Diagnostics today">Limitations and Solutions</a>
 +
              </div>
 +
                </p>
 +
 +
              </div>
 +
            </li>
 +
 +
        </ul>
 +
        </div>  <!-- End Mask -->
 +
      </div>  <!-- End Slider Container -->
 +
  </div>
 +
</div>
 
</html>
 
</html>
 
<!-- Labjournal content ends here -->
 
<!-- Labjournal content ends here -->
 
{{Freiburg/wiki_content_end}}
 
{{Freiburg/wiki_content_end}}

Latest revision as of 21:42, 18 September 2015

""

The DiaCHIP - A Versatile Detection System

DiaCHIP_Sabi

Project Motivation

Serological tests are a key element in modern medicine. Especially for detection and identification of infectious diseases, the performance of several blood tests is inevitable. Testing for more than one disease at once or diagnosing a patient with uncertain symptoms usually requires far more than one test. Every single test that is required increases the time of waiting for a precise diagnosis. In case of dangerous infectious diseases every minute until the onset of an appropriate treatment is crucial for the patient's survival. What if there was a possibility to combine all these tests in one single chip which offers a fast diagnosis and is affordable for everyone?

Detecting Antigen-Antibody Interactions

The DiaCHIP is an innovative tool to screen for a broad range of antibodies in serum. Their presence serves as an indicator for an immune response towards an infectious disease or a successful vaccination. They also play an important role in the diagnosis of autoimmune diseases. Identifying diseases by detecting disease associated antibodies in a patient's serum is an established method in modern diagnostics.
Based on the very same principle, the DiaCHIP enables to screen for multiple diseases simultaneously, thereby reducing time and costs of a diagnosis. Especially the ability to differentiate between life threatening diseases and mild infections within a short time bears the potential to save lifes.

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 - all this packed into one device. The idea is to overcome challenges commonly found in protein array production and preservation. By cell-free expression of disease-related antigens, the protein array can be produced right when it is needed. In addition, results can be obtained in a time- and cost-efficient manner using a device simple enough to be rebuilt by future iGEM teams.

Step by Step Overview

  • The DiaCHIP - System Overview

    The core of our new diagnostic device consists of two slides that form a microfluidic chamber. Therein, an antigen array can be generated on demand by cell-free copying of a DNA template array. By flushing the chamber with a blood sample, antibodies present in the sample bind to corresponding antigens. This interaction is detected in real-time using the optical detection method iRIf.

    Step by Step Overview

  • Outlook

    Our results provide a proof of concept that the functional principle of the DiaCHIP is suitable for antibody detection in complex samples. Although further improvements have to be done in terms of reliablitiy and quantification, various additional applications are conceivable. Representing a way to reduce time and cost required for diagnosing a single patient, the DiaCHIP holds the potential to enhance and enlighten future diagnostics.

    DiaCHIP in the
    Future

  • Optical Detection: iRIf

    One disadvantage of currently available serological tests is the need for secondary labels that allow the detection of disease markers. Making use of an optical method based on the interference of light, the DiaCHIP can detect specific binding events on a protein microarray without further labeling. Read more about this innovative tool and the physics behind it.

    iRIf Principle and Physics

  • Surface Chemistry

    The production of a customized protein microarray in the DiaCHIP is based on selective immobilization of antigens on a glass slide. Therefore, a specific surface chemistry was established to reduce the proportion of unspecific binding of non-target proteins to a minimum. Read more about the different layer compositions we tested on our way to high specificity.

    Establishing a Specific Surface

  • Protein Purification

    Protein expression in the DiaCHIP is mediated by cell-free expression. As this is an advanced method dependent on the optimization of many parameters, we got back to conventional protein purification in E. coli for being able to compare the results of both techniques.
    Read more about overexpression and purification of several antigenic peptides.

    Purification of Antigens

  • Cell-Free Expression

    A key feature of the DiaCHIP is the capability to produce protein arrays on demand via cell-free expression. To reduce the cost of a DiaCHIP measurement, we produced a cell-free expression system based on an E. coli lysate ourselves. This system is also capable of expressing immobilized DNA sequences. See how this sensitive system was established and optimized.

    Cell-free Antigen Expression

  • DNA Engineering

    Genetic fusion of different antigens and tags is a basic requirement of our project. In order to enable several people to work in parallel we designed a cloning strategy easy to follow and additionally easy to expand for further needs. Read more about the combination of different cloning methods to reduce efforts in DNA Engineering and the design of an expression vector meeting iGEM requirements.

    DNA
    Engineering

  • Diagnostics Today

    Currently used serological tests are available for a broad range of infectious diseases. However, they meet limitations that restrict an early onset of appropriate treatments which could be life-saving. The necessity of performing several tests to check for more than one disease is not only time-consuming but also costly. The DiaCHIP tackles these issues by providing a fast and affordable method for simultaneous testing.

    Limitations and Solutions