Difference between revisions of "Team:Freiburg/Testpage3"

Line 20: Line 20:
 
     background-color: #FFF;
 
     background-color: #FFF;
 
     padding: 1% 2% 0% 2%;
 
     padding: 1% 2% 0% 2%;
−
     border-radius: 15px 30px;
+
     border-radius: 30px 60px;
 
     margin-top: 2em;
 
     margin-top: 2em;
 
}
 
}
Line 29: Line 29:
  
 
.header_box {
 
.header_box {
 +
  display: none;
 
     overflow: hidden;
 
     overflow: hidden;
 
     padding: 2% 0%;
 
     padding: 2% 0%;
 
     margin: auto;
 
     margin: auto;
−
     width: 60%;
+
     width: 70%;
 
     text-align: left;
 
     text-align: left;
−
     background-color: #FFF;
+
     /*background-color: #FFF;
 
     border-radius: 30px 60px;
 
     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;*/
 
}
 
}
  
Line 63: Line 64:
 
}
 
}
 
/*========= END: style for navigation bar ==========*/
 
/*========= END: style for navigation bar ==========*/
 +
 +
 +
/*========= BEGIN: Linkbutton in slider ============*/
 +
.intro_button a:hover {
 +
    text-decoration: underline;
 +
}
 +
 +
.intro_button a {
 +
    color: #FFF;
 +
}
 +
 +
.intro_button {
 +
    margin: 0px auto;
 +
    padding: 2px 5px 5px 10px;
 +
    width: 180px;
 +
    line-height: 16px;
 +
    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;
 +
}
 +
 +
.menu-arrow{
 +
background-image: url("https://static.igem.org/mediawiki/2015/f/ff/Freiburg_submenu_arrow.png");
 +
background-repeat: no-repeat;
 +
background-position: 5% 50%;
 +
background-size: 10px 13px;
 +
}
 +
/*========= END: Linkbutton in slider ============*/
 +
  
 
/* 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/*/
Line 103: Line 138:
 
#sixth,
 
#sixth,
 
#seventh,
 
#seventh,
−
#eighth {
+
#eightth {
 
   left: -1000px;
 
   left: -1000px;
 
   -ms-transition: tranform 1s ease;
 
   -ms-transition: tranform 1s ease;
Line 113: Line 148:
 
#first{left: 0;}
 
#first{left: 0;}
 
#third{z-index : -100;}
 
#third{z-index : -100;}
−
#fourth{z-index: -100; left: 1000px;}  
+
#sixth{z-index: -100;}
 +
#fifth{z-index: -100;}
 +
#fourth{z-index: -100}
 +
#seventh{z-index: -100;}
 +
#eightth{z-index: -100; left: 1000px}
  
 
.container{
 
.container{
Line 163: Line 202:
 
     border-radius: 60px;
 
     border-radius: 60px;
 
     background-color: #FCFCFC;
 
     background-color: #FCFCFC;
−
box-shadow: 1px 1px 10px rgb(136, 136, 136);
+
  box-shadow: 1px 1px 10px rgb(136, 136, 136);
−
margin: 5px;
+
  margin: 5px;
−
border: 2px solid rgb(0, 81, 162);
+
  border: 2px solid rgb(0, 81, 162);
 
  }
 
  }
  
Line 183: Line 222:
  
 
.slidertext h1{
 
.slidertext h1{
−
  text-align: left;
+
 
 
}
 
}
  
 
.slidertext p{
 
.slidertext p{
−
margin-bottom: 0;
+
  margin-bottom: 0;
 
}
 
}
  
Line 214: Line 253:
 
     // see: http://atomicrobotdesign.com/blog/web-development/how-to-disable-a-button-until-a-jquery-animation-has-finished/ //
 
     // 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 //
 
     // bind the button to the function, so it can be unbound in the code and the button isnt clickable any more //
−
     $("#buttonleft").bind("click", moveright);
+
     $("#buttonleft").bind("click", moveleft);
−
function moveright(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({});
−
    distance = 2;
+
        $('#fifth').css({});
−
}
+
        $('#sixth').css({});
 +
        $('#seventh').css({"z-index": "-100", "transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /* 4 seventh */
 +
        $('#eightth').css({"transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /* 3 eightth */
 +
        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({});
−
    distance = 3;
+
        $('#fifth').css({});
−
}
+
        $('#sixth').css({});
 +
        $('#seventh').css({});
 +
        $('#eightth').css({"z-index": "-100", "transform": "translateX(-2000px)", "-webkit-transform": "translateX(-2000px)", "-ms-transform": "translateX(-2000px)"}); /* 4 eightth */
 +
        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 */
−
    distance = 4;
+
        $('#fifth').css({});
−
}
+
        $('#sixth').css({});
 +
        $('#seventh').css({});
 +
        $('#eightth').css({});
 +
        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 */
−
    distance = 1;
+
        $('#fifth').css({"z-index": "100"}); /* begin fifth */
−
}
+
        $('#sixth').css({});
 +
        $('#seventh').css({});
 +
        $('#eightth').css({});
 +
        distance = 5;
 +
    }
  
−
else if (distance ==5) {
+
    else if (distance ==5) {
−
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({});
−
    $('#third').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"});
+
        $('#third').css({"z-index": "-100", "transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /* 4 third */
−
    $('#fourth').css({"transform": "translateX(-1000px)", "-webkit-transform": "translateX(-1000px)", "-ms-transform": "translateX(-1000px)"});
+
        $('#fourth').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"}); /* 3 fourth */
−
    distance = 1;
+
        $('#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) {
+
    else if (distance == 6) {
−
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({});
−
    $('#third').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"});
+
        $('#third').css({});
−
    $('#fourth').css({"transform": "translateX(-1000px)", "-webkit-transform": "translateX(-1000px)", "-ms-transform": "translateX(-1000px)"});
+
        $('#fourth').css({"z-index" : "-100", "transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /* 4 fourth */
−
    distance = 1;
+
        $('#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) {
+
    else if (distance == 7) {
−
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({});
−
    $('#third').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"});
+
        $('#third').css({});
−
    $('#fourth').css({"transform": "translateX(-1000px)", "-webkit-transform": "translateX(-1000px)", "-ms-transform": "translateX(-1000px)"});
+
        $('#fourth').css({});
−
    distance = 1;
+
        $('#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) {
+
    else if (distance == 8) {
−
console.log("Distance: "+distance);
+
      console.log("Distance: "+distance);
−
$('#first').css({"z-index": "100"});
+
      $('#first').css({"z-index": "100"}); /* begin first */
−
    $('#second').css({"z-index": "-100", "transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"});
+
        $('#second').css({});
−
    $('#third').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"});
+
        $('#third').css({});
−
    $('#fourth').css({"transform": "translateX(-1000px)", "-webkit-transform": "translateX(-1000px)", "-ms-transform": "translateX(-1000px)"});
+
        $('#fourth').css({});
−
    distance = 1;
+
        $('#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 //
+
    // 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 //
+
    // wait until css-animation has finished. time is specified in css-transition property //
−
setTimeout(function(){
+
    setTimeout(function(){
−
$("#buttonleft").bind("click", moveright);
+
      $("#buttonleft").bind("click", moveleft);
−
}, 1000);
+
    }, 1000);
−
}
+
  }
  
  
−
     $("#buttonright").bind("click", moveleft);
+
     $("#buttonright").bind("click", moveright);
−
function moveleft(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({"z-index": "100", "transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"});
+
        $('#second').css({});
−
    $('#third').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"});
+
        $('#third').css({});
−
    $('#fourth').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"});
+
        $('#fourth').css({});
−
    distance = 2;
+
        $('#fifth').css({});
−
}
+
        $('#sixth').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"}); /* 6 third */
 +
        $('#seventh').css({"z-index": "100","transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"}); /* 7 third */
 +
        $('#eightth').css({"transform": "translateX(-2000px)", "-webkit-transform": "translateX(-2000px)", "-ms-transform": "translateX(-2000px)"}); /* 8 first */
 +
        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({});
−
    distance = 3;
+
        $('#fifth').css({});
−
}
+
        $('#sixth').css({});
 +
        $('#seventh').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"}); /* 7 third */
 +
        $('#eightth').css({"z-index": "100","transform": "translateX(-1000px)", "-webkit-transform": "translateX(-1000px)", "-ms-transform": "translateX(-1000px)"}); /* 8 fourth */
 +
        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({});
−
    distance = 4;
+
        $('#fifth').css({});
−
}
+
        $('#sixth').css({});
 +
        $('#seventh').css({});
 +
        $('#eightth').css({"transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /* 8 third */
 +
        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*/
−
    distance = 5;
+
        $('#fifth').css({});
−
}
+
        $('#sixth').css({});
 +
        $('#seventh').css({});
 +
        $('#eightth').css({});
 +
        distance = 3;
 +
    }
  
−
else if (distance ==5) {
+
    else if (distance ==5) {
−
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({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"}); /* 2 third */
−
    $('#third').css({"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)"}); /* 3 fourth */
−
    $('#fourth').css({"transform": "translateX(-1000px)", "-webkit-transform": "translateX(-1000px)", "-ms-transform": "translateX(-1000px)"});
+
        $('#fourth').css({"transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /* 4 first */
−
    distance = 6;
+
        $('#fifth').css({"z-index": "-100"}); /* 5 second */
−
}
+
        $('#sixth').css({});
 +
        $('#seventh').css({});
 +
        $('#eightth').css({});
 +
        distance = 4;
 +
    }
  
−
else if (distance ==6) {
+
    else if (distance == 6) {
−
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({});
−
    $('#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({"z-index": "100","transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"}); /* 4 fourth */
−
    distance = 7;
+
        $('#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) {
+
    else if (distance == 7) {
−
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({});
−
    $('#third').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"});
+
        $('#third').css({});
−
    $('#fourth').css({"transform": "translateX(-1000px)", "-webkit-transform": "translateX(-1000px)", "-ms-transform": "translateX(-1000px)"});
+
        $('#fourth').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"}); /* 4 third */
−
    distance = 8;
+
        $('#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) {
+
    else if (distance == 8) {
−
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({});
−
    $('#third').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"});
+
        $('#third').css({});
−
    $('#fourth').css({"transform": "translateX(-1000px)", "-webkit-transform": "translateX(-1000px)", "-ms-transform": "translateX(-1000px)"});
+
        $('#fourth').css({});
−
    distance = 1;
+
        $('#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(){
+
    setTimeout(function(){
−
$("#buttonright").bind("click", moveleft);
+
      $("#buttonright").bind("click", moveright);
−
}, 1000);
+
    }, 1000);
−
}
+
  }
 
});
 
});
 
</script>
 
</script>
  
−
<div class="header_box">
+
<div class="todo_box">
 +
expand text s.t. it leads to system overview <br>
 +
write appropriate content for slider: should present main subpoints of project in short sentence and link to them
 +
</div>
 +
 
 +
<div class="header_box">  
 
<h1>The DiaCHIP - A Versatile Detection System</h1>
 
<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%">
 
<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">
+
  <img align="left" alt="DiaCHIP_Sabi" src="https://static.igem.org/mediawiki/2015/a/af/Freiburg_DiaCHIP_Sabi.png" height="1430px">
 
</div>
 
</div>
  
−
<div style="width:120%;margin-bottom:18%">
+
<div style="width:120%;margin-bottom:22%">
−
<div class="content_box3" style="margin-right:25%">
+
<div class="content_box3" style="margin-right:20%;margin-left:30%">
 
<h2>Project Motivation</h2>
 
<h2>Project Motivation</h2>
 
<p>
 
<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?  
+
         Serological tests are a key element in modern medicine. Especially for detection and identification of infectious diseases, performing several blood tests is inevitable. Testing for more than one disease at a time or diagnosing a patient with diffuse symptoms usually requires more than one serological test. Every single test that is performed increases the time of waiting for a result as well as the bill. In case of dangerous infectious diseases every minute until the onset of the appropriate treatment is important for life. What if there was a possibility to combine all this testing in one single chip which is affordable for everyone?  
 
</p>
 
</p>
 
</div>
 
</div>
  
−
<div class="content_box3" style="margin-left:35%;margin-right:15%">
+
<div class="content_box3" style="margin-left:38%;margin-right:12%">
 
<h2>Detecting Antigen-Antibody Interactions</h2>
 
<h2>Detecting Antigen-Antibody Interactions</h2>
 
<p>
 
<p>
−
The DiaCHIP is an innovative tool to screen for a broad range of antibodies present in serum. <br>
+
  The DiaCHIP is an innovative tool to screen for a broad range of antibodies present in serum. Antibodies serve as indicator for an immune response towards an infectious diseases 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  <a href="https://2015.igem.org/Team:Freiburg/Design" title="diagnostics_today">modern diagnostics</a>. <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>
+
Based on the very same principle, the DiaCHIP enables to simultaneously screen for multiple diseases at time, thereby reducing time and cost of a diagnosis. Especially the ability to differentiate between life threatening diseases and mild infections within a short time bears the potential to save lives. 
−
        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>
 
</p>
 
</div>
 
</div>
Line 415: Line 519:
 
<h2>The Concept</h2>
 
<h2>The Concept</h2>
 
<p>
 
<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.
+
  The key feature of the DiaCHIP concept is the combination of on-demand protein synthesis of disease related antigens 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. 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>
 
</p>
 
</div>
 
</div>
  
 
</div>
 
</div>
 +
 +
 +
  
 
<!---------------BEGIN SLIDER------------------>
 
<!---------------BEGIN SLIDER------------------>
 
<div class="container">
 
<div class="container">
−
<div id="buttonright">
+
  <div id="buttonright">
−
<img src="https://static.igem.org/mediawiki/2015/b/b3/Freiburg_lightbulb_slider_30.png">
+
    <img src="https://static.igem.org/mediawiki/2015/b/b3/Freiburg_lightbulb_slider_30.png">
−
</div>
+
  </div>
−
<div id="buttonleft">
+
  <div id="buttonleft">
−
<img src="https://static.igem.org/mediawiki/2015/4/4d/Freiburg_lightbulb_slider_27.png">
+
    <img src="https://static.igem.org/mediawiki/2015/4/4d/Freiburg_lightbulb_slider_27.png">
−
</div>
+
  </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">
+
            <li id="first" class="firstanimation">  <!-- ID for tooltip and class for animation -->
−
        <div class="sliderimage">
+
              <div class="artboard">
−
        <img src="#">
+
              <div class="sliderimage" style="margin-top:10%">
−
        </div>
+
                <img src="https://static.igem.org/mediawiki/2015/6/6a/Freiburg_DiaCHIP_overview_scaled.jpg" width="350px">
−
        <div class="slidertext">
+
              </div>
−
        <h1>Diagnostics Today</h1>
+
              <div class="slidertext">
−
        <p>
+
                <h1>The DiaCHIP - System Overview</h1>
−
                                        </p>
+
                <p>The core of our new diagnostic device are two slides that form a microfluidic chamber. Therein an antigen array can be generated on demand on the bottom slide. By flushing the chamber with a blood sample, binding of antibodies present in the sample is detected with the optical detection method iRIf in real-time.</p>
−
        </div>
+
                <p style="margin-top:30px">
−
        <div class="slidertext indent">
+
              <div class="intro_button menu-arrow">        
−
        <p> Want to read <a href="https://2015.igem.org/Team:Freiburg/OwnDevice"> more?</a>
+
                <a href="https://2015.igem.org/Team:Freiburg/Project/System" title="System Overview">Step by Step Overview</a>
−
        </p>
+
              </div>
−
        </div>
+
                </p>
−
        </div>
+
 
−
        </li>
+
              </div>
−
        <li id="second" class="secondanimation">
+
              </div>
−
        <div class="artboard">
+
            </li>
−
        <div class="sliderimage">
+
 
−
        <img src="#">
+
 
−
        </div>
+
            <li id="second" class="secondanimation">
−
        <div class="slidertext">
+
              <div class="artboard">
−
                <h1>The DiaCHIP System</h1>
+
              <div class="sliderimage">
−
        <p>
+
                <img src="" width="350px">
−
                                        </p>
+
              </div>
−
        </div>
+
              <div class="slidertext">
−
        <div class="slidertext indent">
+
                <h1>Outlook</h1>
−
        <p> Want to read <a href="https://2015.igem.org/Team:Freiburg/Practices"> more?</a></p>
+
                <p></p>
−
        </div>
+
              </div>
−
        </div>
+
              <div class="slidertext indent">
−
        </li>
+
                <p> Want to read <a href="https://2015.igem.org/Team:Freiburg/Practices">more</a>?</p>
−
        <li id="third" class="thirdanimation">
+
              </div>
−
        <div class="artboard">
+
              </div>
−
        <div class="sliderimage">
+
            </li>
−
        <img src="#">
+
 
−
        </div>
+
 
−
        <div class="slidertext">  
+
            <li id="third" class="thirdanimation">
−
        <h1>iRIf: The Detection System</h1>
+
              <div class="artboard">
−
        <p>
+
              <div class="sliderimage" style="margin:6% auto">
−
                                        </p>
+
                <img src="https://static.igem.org/mediawiki/2015/d/db/Freiburg_iRiF_slider.png" width="70%">
−
        </div>
+
              </div>
−
        <div class="slidertext indent">
+
              <div class="slidertext">  
−
        <p> Want to read <a href="https://2015.igem.org/Team:Freiburg/Modeling">more?</a> </p>
+
                <h1>Optical Detection: iRIf</h1>
−
        </div>
+
                <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.
−
        </div>
+
                </p>
−
        </li>
+
 
−
        <li id="fourth" class="fourthanimation">
+
                <p style="margin-top:30px">
−
        <div class="artboard">
+
              <div class="intro_button menu-arrow">        
−
        <div class="sliderimage">
+
                <a href="https://2015.igem.org/Team:Freiburg/Project/iRIf" title="Optical Detection">iRIf Principle and Physics</a>
−
        <img src="https://static.igem.org/mediawiki/2015/e/e4/Freiburg_Slider-Eigenblut.png" width="350px">
+
              </div>
−
        </div>
+
                </p>
−
        <div class="slidertext">  
+
 
−
        <h1>Cloning</h1>
+
              </div>
−
        <p>
+
              </div>
−
                                        </p>
+
            </li>
−
        </div>
+
 
−
        <div class="slidertext indent">
+
 
−
        <p> Want to read <a href="https://2015.igem.org/Team:Freiburg/Results">more?</a></p>
+
            <li id="fourth" class="fourthanimation">
−
        </div>
+
              <div class="artboard">
−
        </div>
+
              <div class="sliderimage" style="margin:8% auto">
−
        </li>
+
                <img src="https://static.igem.org/mediawiki/2015/0/03/Freiburg_specific_surface_RJ_preview.jpg" width="230px">
−
        <li id="fith" class="fithanimation">  <!-- ID for tooltip and class for animation -->
+
              </div>
−
        <div class="artboard">
+
              <div class="slidertext">  
−
        <div class="sliderimage">
+
                <h1>Surface Chemistry</h1>
−
        <img src="#">
+
                <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 needs to be established in order to reduce the proportion of unspecific binding of non-target proteins to a minimum.
−
        </div>
+
                  Read more about the different layer compositions we tested on our way to high specificity.
−
        <div class="slidertext">
+
                </p>
−
        <h1>Protein Purification</h1>
+
 
−
        <p>
+
                <p style="margin-top:30px">
−
                                        </p>
+
              <div class="intro_button menu-arrow">        
−
        </div>
+
                <a href="https://2015.igem.org/Team:Freiburg/Project/Surface_Chemistry" title="Surface Chemistry">Establishing a Specific Surface</a>
−
        <div class="slidertext indent">
+
              </div>
−
        <p> Want to read <a href="https://2015.igem.org/Team:Freiburg/OwnDevice"> more?</a>
+
                </p>
−
        </p>
+
 
−
        </div>
+
              </div>
−
        </div>
+
              </div>
−
        </li>
+
            </li>
−
        <li id="sixth" class="sixthanimation">
+
 
−
        <div class="artboard">
+
 
−
        <div class="sliderimage">
+
            <li id="fifth" class="fifthanimation">
−
        <img src="#">
+
              <div class="artboard">
−
        </div>
+
              <div class="sliderimage">
−
        <div class="slidertext">
+
                <img src="" width="350px">
−
        <h1>Cell-free Expression</h1>
+
              </div>
−
        <p>
+
              <div class="slidertext">  
−
                                        </p>
+
                <h1>Protein Purification</h1>
−
        </div>
+
                <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>
−
        <div class="slidertext indent">
+
Read more about the overexpression and purification of several antigenic peptides. 
−
        <p> Want to read <a href="https://2015.igem.org/Team:Freiburg/Practices"> more?</a></p>
+
                </p>
−
        </div>
+
 
−
        </div>
+
                <p style="margin-top:30px">
−
        </li>
+
              <div class="intro_button menu-arrow">        
−
        <li id="seventh" class="seventhanimation">
+
                <a href="https://2015.igem.org/Team:Freiburg/Project/Protein_Purification" title="Protein Purification">Purification of Antigens</a>
−
        <div class="artboard">
+
              </div>
−
        <div class="sliderimage">
+
                </p>
−
        <img src="">
+
 
−
        </div>
+
              </div>
−
        <div class="slidertext">  
+
              </div>
−
        <h1>Surface Chemistry</h1>
+
            </li>
−
        <p>
+
 
−
                                        </p>
+
 
−
        </div>
+
            <li id="sixth" class="sixthanimation">
−
        <div class="slidertext indent">
+
              <div class="artboard">
−
        <p> Want to read <a href="https://2015.igem.org/Team:Freiburg/Modeling">more?</a> </p>
+
              <div class="sliderimage">
−
        </div>
+
                <img src="" width="350px">
−
        </div>
+
              </div>
−
        </li>
+
              <div class="slidertext">  
−
        <li id="eighth" class="eighthanimation">
+
                <h1>Cell-Free Expression</h1>
−
        <div class="artboard">
+
                <p> A key feature of the DiaCHIP is the capability to produce protein arrays on demand via cell-free expression.
−
        <div class="sliderimage">
+
</p>
−
        <img src="https://static.igem.org/mediawiki/2015/e/e4/Freiburg_Slider-Eigenblut.png" width="350px">
+
              </div>
−
        </div>
+
              <div class="slidertext indent">
−
        <div class="slidertext">  
+
                <p> Want to read <a href="https://2015.igem.org/Team:Freiburg/Results">more?</a></p>
−
        <h1>Outlook</h1>
+
              </div>
−
        <p>
+
              </div>
−
                                        </p>
+
            </li>
−
        </div>
+
 
−
        <div class="slidertext indent">
+
 
−
        <p> Want to read <a href="https://2015.igem.org/Team:Freiburg/Results">more?</a></p>
+
            <li id="seventh" class="seventhanimation">
−
        </div>
+
              <div class="artboard">
−
        </div>
+
              <div class="sliderimage">
−
        </li>
+
                <img src="<!--https://static.igem.org/mediawiki/2015/3/3a/Freiburg_pOP_home_scaled.png-->" width="350px">
−
    </ul>
+
              </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 combining different cloning methods to reduce efforts in <a href="https://2015.igem.org/Team:Freiburg/Methods/Cloning" class="wikilink1">DNA Engineering.</a>
 +
</p>
 +
 
 +
                <p style="margin-top:10%">
 +
              <div class="intro_button menu-arrow">        
 +
                <a href="https://2015.igem.org/Team:Freiburg/Methods/Cloning" title="DNA Engineering">DNA Engineering</a>
 +
              </div>
 +
                </p>
 +
 
 +
              </div>
 +
              </div>
 +
            </li>
 +
 
 +
 
 +
            <li id="eightth" class="eightthanimation">
 +
              <div class="artboard">
 +
              <div class="sliderimage">
 +
                <img src="" 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 can be life-saving for some patient groups. The necessity of performing several tests in order to check for more than one disease at once 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 Mask -->
 
       </div>  <!-- End Slider Container -->
 
       </div>  <!-- End Slider Container -->

Revision as of 18:39, 17 September 2015

""

expand text s.t. it leads to system overview
write appropriate content for slider: should present main subpoints of project in short sentence and link to them

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, performing several blood tests is inevitable. Testing for more than one disease at a time or diagnosing a patient with diffuse symptoms usually requires more than one serological test. Every single test that is performed increases the time of waiting for a result as well as the bill. In case of dangerous infectious diseases every minute until the onset of the appropriate treatment is important for life. What if there was a possibility to combine all this testing in one single chip which is affordable for everyone?

Detecting Antigen-Antibody Interactions

The DiaCHIP is an innovative tool to screen for a broad range of antibodies present in serum. Antibodies serve as indicator for an immune response towards an infectious diseases 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 simultaneously screen for multiple diseases at time, thereby reducing time and cost of a diagnosis. Especially the ability to differentiate between life threatening diseases and mild infections within a short time bears the potential to save lives.

The Concept

The key feature of the DiaCHIP concept is the combination of on-demand protein synthesis of disease related antigens 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. 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.

  • The DiaCHIP - System Overview

    The core of our new diagnostic device are two slides that form a microfluidic chamber. Therein an antigen array can be generated on demand on the bottom slide. By flushing the chamber with a blood sample, binding of antibodies present in the sample is detected with the optical detection method iRIf in real-time.

    Step by Step Overview

  • Outlook

    Want to read more?

  • 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 needs to be established in order 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 the 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.

    Want to read more?

  • 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 combining different cloning methods to reduce efforts in DNA Engineering.

    DNA Engineering

  • Diagnostics Today

    Currently used serological tests are available for a broad range of infectious diseases. However, they meet limitations that can be life-saving for some patient groups. The necessity of performing several tests in order to check for more than one disease at once 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