Difference between revisions of "Team:Freiburg/Testpage"

Line 1: Line 1:
 
{{Freiburg/CSS}}
 
{{Freiburg/CSS}}
−
{{Freiburg/MenubarTest}}
+
{{Freiburg/Menubar}}
−
 
+
 
{{Freiburg/wiki_content_start}}
 
{{Freiburg/wiki_content_start}}
 
<html>
 
<html>
  
 
<style>
 
<style>
−
/*======= BEGIN: General Styling ========*/
+
/*========= BEGIN: style for navigation bar ==========*/
−
body {
+
#home {
−
     color: #000;
+
     background: url(https://static.igem.org/mediawiki/2015/d/d7/Freiburg_icon_home_active.png) no-repeat;
 
}
 
}
  
−
.page_content {
+
#home a {
−
     margin-bottom: 0px;
+
     color: #ecdc18;
 
}
 
}
 +
/*========= END: style for navigation bar ==========*/
  
−
.content_box3 {
+
 
−
    /*box-shadow: none;*/
+
/* =============== BEGIN: Circle of Elements ==================== */
−
    overflow: hidden;
+
/*
−
    background-color: #FFF;
+
* Mixin to put items on a circle
−
    padding: 1% 2% 0% 2%;
+
* [1] - Allows children to be absolutely positioned
−
    border-radius: 30px 60px;
+
* [2] - Allows the mixin to be used on a list
−
    margin-top: 2em;
+
* [3] - In case box-sizing: border-box has been enabled
 +
* [4] - Allows any type of direct children to be targeted
 +
*/
 +
 
 +
@media screen and (min-width: 1200px){
 +
 
 +
.circle-container {
 +
  position: relative;
 +
  /* [1] */
 +
  width: 30em;                     /* changes size of circle that elements are circling on */
 +
  height: 30em;
 +
  padding: 0;
 +
  border-radius: 50%;               /* switch between circle and Rechteck */
 +
  list-style: none;
 +
  /* [2] */
 +
  -moz-box-sizing: content-box;
 +
  -webkit-box-sizing: content-box;
 +
  box-sizing: content-box;
 +
  /* [3] */
 +
  margin: 5em auto 0;
 +
  /*border: solid 5px #0051A2;*/
 +
  z-index: 500;
 
}
 
}
 +
.circle-container > * {
 +
  /* [4] */
 +
  display: block;
 +
  position: absolute;              /* set absolute to fix elements on circle */
 +
  top: 30%;
 +
  left: 40%;
 +
  width: 260px;                      /* define size of elements */
 +
  height: 200px;
 +
  margin: 0;   
 +
  font-size: 100%;
 +
  text-align: center;
 +
}
 +
 +
/* transformations needed for showing the pictures */
 +
.circle-container > *:nth-of-type(4) {
 +
  -moz-transform: rotate(357deg) translate(19em) rotate(-357deg);
 +
  -ms-transform: rotate(357deg) translate(19em) rotate(-357deg);
 +
  -webkit-transform: rotate(357deg) translate(19em) rotate(-357deg);
 +
  transform: rotate(357deg) translate(19em) rotate(-357deg);            /*change translate for defining position of elements*/
 +
}
 +
.circle-container > *:nth-of-type(5) {
 +
  -moz-transform: rotate(45deg) translate(19em) rotate(-45deg);
 +
  -ms-transform: rotate(45deg) translate(19em) rotate(-45deg);
 +
  -webkit-transform: rotate(45deg) translate(19em) rotate(-45deg);
 +
  transform: rotate(45deg) translate(19em) rotate(-45deg);
 +
}
 +
.circle-container > *:nth-of-type(6) {
 +
  -moz-transform: rotate(105deg) translate(18em) rotate(-105deg);
 +
  -ms-transform: rotate(105deg) translate(18em) rotate(-105deg);
 +
  -webkit-transform: rotate(105deg) translate(18em) rotate(-105deg);
 +
  transform: rotate(105deg) translate(18em) rotate(-105deg);
 +
}
 +
.circle-container > *:nth-of-type(7) {
 +
  -moz-transform: rotate(147deg) translate(27em) rotate(-147deg);
 +
  -ms-transform: rotate(147deg) translate(27em) rotate(-147deg);
 +
  -webkit-transform: rotate(147deg) translate(27em) rotate(-147deg);
 +
  transform: rotate(147deg) translate(27em) rotate(-147deg);
 +
}
 +
.circle-container > *:nth-of-type(8) {
 +
  -moz-transform: rotate(180deg) translate(28em) rotate(-180deg);
 +
  -ms-transform: rotate(180deg) translate(28em) rotate(-180deg);
 +
  -webkit-transform: rotate(180deg) translate(28em) rotate(-180deg);
 +
  transform: rotate(180deg) translate(28em) rotate(-180deg);
 +
}
 +
.circle-container > *:nth-of-type(1) {
 +
  -moz-transform: rotate(212deg) translate(27em) rotate(-212deg);
 +
  -ms-transform: rotate(212deg) translate(27em) rotate(-212deg);
 +
  -webkit-transform: rotate(212deg) translate(27em) rotate(-212deg);
 +
  transform: rotate(212deg) translate(27em) rotate(-212deg);
 +
}
 +
.circle-container > *:nth-of-type(2) {
 +
  -moz-transform: rotate(255deg) translate(20em) rotate(-255deg);
 +
  -ms-transform: rotate(255deg) translate(20em) rotate(-255deg);
 +
  -webkit-transform: rotate(255deg) translate(20em) rotate(-255deg);
 +
  transform: rotate(255deg) translate(20em) rotate(-255deg);
 +
}
 +
.circle-container > *:nth-of-type(3) {
 +
  -moz-transform: rotate(310deg) translate(20em) rotate(-310deg);
 +
  -ms-transform: rotate(310deg) translate(20em) rotate(-310deg);
 +
  -webkit-transform: rotate(310deg) translate(20em) rotate(-310deg);
 +
  transform: rotate(310deg) translate(20em) rotate(-310deg);
 +
}
 +
 +
.circle-container a {
 +
  /*display: block; */                        /* border around elements */
 +
  border-radius: 8px;                      /* makes border around elements round or Rechteck */
 +
  /*box-shadow: 0 0 0 5px #0051A2;*/
 +
        color: #FFF;
 +
  background-color: #0051A2;
 +
  padding: 1px 10px;
 +
  font-size: 110%;
 +
  border: 5px solid #0051A2;
 +
}
 +
.circle-container > div {
 +
  display: block;
 +
  width: 100%;
 +
  border-radius: 10%;                      /* makes elements round or Rechteck */
 +
  -webkit-filter: grayscale(100%);
 +
  filter: grayscale(100%);
 +
}
 +
.circle-container img:hover {
 +
  -webkit-filter: grayscale(0);
 +
  filter: grayscale(0);
 +
}
 +
 +
/* =============== END: Circle of Elements - Positioning ==================== */
 +
 +
/* =============== BEGIN: New Header =============================== */
 +
#cool_centerimage_small{
 +
  display: none;
 +
}
 +
/* =============== END: New Header =============================== */
 +
 +
} /* end of media query! dont delete */
 +
  
−
h1 {
+
/* =============== BEGIN: Circle of Elements - Element Styling ==================== */
 +
.cool_header {
 
     text-align: center;
 
     text-align: center;
−
     color: #888;
+
     height: 20px;
−
     font-size: 300%;
+
     margin-bottom: 3px;
−
     text-shadow:
+
     z-index: 10;
−
        1px 0px 1px #ccc, 0px 1px 1px #eee,
+
−
        2px 1px 1px #ccc, 1px 2px 1px #eee,
+
−
        3px 2px 1px #ccc, 2px 3px 1px #eee,
+
−
        4px 3px 1px #ccc, 3px 4px 1px #eee,
+
−
        5px 4px 1px #ccc, 4px 5px 1px #eee,
+
−
        6px 5px 1px #ccc, 5px 6px 1px #eee,
+
−
        7px 6px 1px #ccc;
+
 
}
 
}
  
−
.header_box {
+
.cool_content {
−
    overflow: hidden;
+
     padding: 1em;
−
     padding: 2% 0%;
+
     height: 150px;
−
     margin: auto;
+
     background-color: #FFFFFF;
−
     width: 70%;
+
 
     text-align: left;
 
     text-align: left;
−
    /*background-color: #FFF;
 
−
    border-radius: 30px 60px;
 
 
     box-shadow: 1px 1px 10px #888;
 
     box-shadow: 1px 1px 10px #888;
 
     -webkit-box-shadow: 1px 1px 10px #888;
 
     -webkit-box-shadow: 1px 1px 10px #888;
−
     -moz-box-shadow: 1px 1px 10px #888;*/
+
     -moz-box-shadow: 1px 1px 10px #888;
 +
    border-radius: 15px;
 +
opacity: 0;
 +
 +
-webkit-transition: all 0.4s ease-in-out;
 +
-moz-transition: all 0.4s ease-in-out;
 +
-o-transition: all 0.4s ease-in-out;
 +
-ms-transition: all 0.4s ease-in-out;
 +
transition: all 0.4s ease-in-out;
 +
 +
-webkit-transform: scale(0);
 +
-moz-transform: scale(0);
 +
-o-transform: scale(0);
 +
-ms-transform: scale(0);
 +
transform: scale(0);
 +
 +
-webkit-backface-visibility: hidden;
 
}
 
}
  
−
.image_box {
+
.cool_container {
−
     margin-bottom 10%;
+
     width: 100%;
−
    margin-left: -8%;
+
     padding-top: 180px;
−
     margin-top: -10%;
+
     margin-bottom: -50px;
−
     margin-right: -10%;
+
 
}
 
}
−
/*======= END: General Styling ========*/
 
  
 +
/* =============== END: Circle of Elements - Element Styling ==================== */
  
−
/*========= BEGIN: style for navigation bar ==========*/
 
−
#project {
 
−
    background: url(https://static.igem.org/mediawiki/2015/d/da/Freiburg_icon_project_active_yellow.png) no-repeat;
 
−
}
 
  
−
#project a {
+
/* =============== BEGIN: Circle of Elements - Center Image ==================== */
−
     color: #ecdc18;
+
.cool_centerimage {
 +
    margin: 0 auto;
 +
    position: relative;
 +
    width: 40%;
 +
    height: 250px;
 +
    top: -410px;
 +
    text-align: center;
 +
    left: 1%;
 +
    /*border: 1px solid #000;*/
 +
     color: #000;
 
}
 
}
  
−
#runningchip {
+
#DiaCHIP_logo{
−
    left: 18.6%;
+
  position: absolute;
 +
  transform: translate(30%, 50%);
 +
  -ms-transform: translate(30%, 50%);
 +
  -o-transform: translate(30%, 50%);
 +
  -webkit-transform: translate(30%, 50%);
 +
 
 
}
 
}
−
/*========= END: style for navigation bar ==========*/
+
/* =============== END: Circle of Elements - Center Image ==================== */
  
−
/* code adapted from http://www.smashingmagazine.com/2012/04/pure-css3-cycling-slideshow/*/
 
  
−
#slider {
+
/* =============== BEGIN: Circle of Elements - Hiding Animation ==================== */
−
  height: 500px;
+
.cool_image_blink {
−
  width: 910px;
+
/*box-shadow:
−
  overflow: visible;
+
inset 0 0 0 0 rgba(200,95,66, 0.4),
−
  position: relative;
+
inset 0 0 0 16px rgba(255,255,255,0.6),
 +
0 1px 2px rgba(0,0,0,0.1);*/
 +
        box-shadow: 1px 1px 2px 2px #000;
 +
 +
-webkit-transition: all 0.4s ease-in-out;
 +
-moz-transition: all 0.4s ease-in-out;
 +
-o-transition: all 0.4s ease-in-out;
 +
-ms-transition: all 0.4s ease-in-out;
 +
transition: all 0.4s ease-in-out;
 +
        border-radius: 15px;
 
}
 
}
  
−
/* hides everything outside the slider box */
+
.cool_image_blink:hover {
−
#mask {
+
/*box-shadow:
−
  overflow: hidden;
+
inset 0 0 0 110px #0051A2/*rgba(200,95,66, 0.4)*/,
−
  height: 500px;
+
inset 0 0 0 16px #0051A2/*rgba(255,255,255,0.8)*/,
 +
0 1px 2px #0051A2/*rgba(0,0,0,0.1)*/;*/
 
}
 
}
  
−
/* initialize position for positioning slides outside the slider */
+
.cool_image_blink:hover .cool_content {
−
#slider ul {
+
opacity: 1;
−
  margin: 0;
+
−
  padding: 0;
+
-webkit-transform: scale(1);
−
  position: relative;
+
-moz-transform: scale(1);
 +
-o-transform: scale(1);
 +
-ms-transform: scale(1);
 +
transform: scale(1);
 
}
 
}
  
−
/* define image properties and position them outside the slider mask */
+
.element1 {
−
#slider li {
+
    background-image: url("");
−
  width: 900px; /* Width slide */
+
    background-size: cover;
−
  height: 500px; /* Height slide */
+
    background-position: center;
−
  position: absolute;
+
−
  right: 0; /* Original Position - Outside of the Slider */
+
−
  list-style: none;
+
 
}
 
}
  
 +
.element2 {
 +
    background-image: url("https://static.igem.org/mediawiki/2015/8/8e/Freiburg_diachip_centcoin_home.png");
 +
    background-size: cover;
 +
    background-position: center;
 +
}
  
−
#first,
+
.element3 {
−
#second,
+
    background-image: url("https://static.igem.org/mediawiki/2015/0/0f/Freiburg_homepage_chip_blood.png");
−
#third,
+
    background-size: cover;
−
#fourth,
+
    background-position: center;
−
#fifth,
+
−
#sixth,
+
−
#seventh,
+
−
#eightth {
+
−
  left: -1000px;
+
−
  -ms-transition: tranform 1s ease;
+
−
  -webkit-transition: transform 1s ease;
+
−
  transition: transform 1s ease;
+
−
  font-size: 100%;
+
 
}
 
}
  
−
#first{left: 0;}
+
.element4 {
−
#third{z-index : -100;}
+
    background-image: url("https://static.igem.org/mediawiki/2015/d/d0/Freiburg_Own_Device_Foto_home.jpg");
−
#sixth{z-index: -100;}
+
    background-size: cover;
−
#fifth{z-index: -100;}
+
    background-position: center;
−
#fourth{z-index: -100}
+
−
#seventh{z-index: -100;}
+
−
#eightth{z-index: -100; left: 1000px}
+
−
 
+
−
.container{
+
−
    position: relative;
+
−
    height: 500px;
+
−
    margin: 3% 0;
+
−
    width: 1000px;
+
 
}
 
}
  
−
#buttonleft {
+
.element5 {
−
  z-index: 200;
+
    background-image: url("https://static.igem.org/mediawiki/2015/4/49/Freiburg_2015_pOP.jpg");
−
  position: absolute;
+
    background-size: cover;
−
  top: 190px;
+
    background-position: center;
−
  left: 0;
+
 
}
 
}
  
−
#buttonright{
+
.element6 {
−
  z-index: 200;
+
    background-image: url("https://static.igem.org/mediawiki/2015/a/a3/Freiburg_project-img_0301_home.jpg");
−
  position: absolute;
+
    background-size: cover;
−
  right: 0;
+
    background-position: center;
−
  top: 190px;
+
 
}
 
}
  
−
#buttonleft img,
+
.element7 {
−
#buttonright img{
+
    background-image: url("https://static.igem.org/mediawiki/2015/f/ff/Freiburg_Modeling_Home2.png");
−
  width: 50px;
+
    background-size: cover;
 +
    background-position: center;
 
}
 
}
  
−
#content-slider{
+
.element8 {
−
  position: absolute;
+
    background-image: url("https://static.igem.org/mediawiki/2015/5/56/Freiburg_tetanus_home2.png");
−
  top:0;
+
    background-size: cover;
−
  left:50px
+
    background-position: center;
 
}
 
}
 +
/* =============== END: Circle of Elements - Hiding Animation ==================== */
  
  
−
#buttonright:hover,
+
/* =============== BEGIN: Resetting General CSS ==================== */
−
#buttonleft:hover{
+
.mw-content-ltr ul {
−
  cursor: pointer;
+
    padding: 0;
−
  cursor: hand;
+
    margin: 0 auto;
 
}
 
}
  
−
.container{
+
/*ul {
−
  position: relative;
+
    line-height: 1em;
 +
}*/
 +
 
 +
.content_box {
 +
    box-shadow: none;
 +
    padding: 2% 4%;
 +
    margin: 0px;
 
}
 
}
 +
/* =============== END: Resetting General CSS ==================== */
  
−
.artboard{
 
−
    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{
+
/* ============== Animate boxes on start ===========================*/
−
   float: right;
+
 
−
  margin: 3% 70px 3% 25px;
+
/* from https://daneden.github.io/animate.css/ */
−
   width: 350px
+
 
 +
@-webkit-keyframes zoomIn {
 +
   from {
 +
    opacity: 0;
 +
    -webkit-transform: scale3d(.3, .3, .3);
 +
    transform: scale3d(.3, .3, .3);
 +
   }
 +
 
 +
  50% {
 +
    opacity: 1;
 +
  }
 
}
 
}
  
−
.slidertext{
+
@-webkit-keyframes zoomIn-Pics {
−
   margin: 3% 25px 0 65px;
+
   from {
−
  width: 350px;
+
    opacity: 0;
−
  text-align: justify;
+
    -webkit-transform: scale3d(.3, .3, .3);
−
   line-height: 1;
+
    transform: scale3d(.3, .3, .3);
−
   float: left;
+
   }
 +
 
 +
  40% {
 +
    -webkit-transform: scale3d(1.1,1.1,1.1);
 +
    transform: scale3d(1.1,1.1,1.1);  
 +
   }
 +
 
 +
  50% {
 +
    opacity: 1;
 +
  }
 
}
 
}
  
−
.slidertext h1{
+
@keyframes zoomIn {
−
   text-align: left;
+
   from {
 +
    opacity: 0;
 +
    -webkit-transform: scale3d(.3, .3, .3);
 +
    transform: scale3d(.3, .3, .3);
 +
  }
 +
 
 +
  50% {
 +
    opacity: 1;
 +
  }
 
}
 
}
  
−
.slidertext p{
+
@keyframes zoomIn-Pics {
−
margin-bottom: 0;
+
  from {
 +
    opacity: 0;
 +
    -webkit-transform: scale3d(.3, .3, .3);
 +
    transform: scale3d(.3, .3, .3);
 +
  }
 +
 
 +
  40% {
 +
    -webkit-transform: scale3d(1.1,1.1,1.1);
 +
    transform: scale3d(1.1,1.1,1.1);
 +
  }
 +
 
 +
  50% {
 +
    opacity: 1;
 +
  }
 
}
 
}
  
−
.slidertext.indent{
+
.zoomIn {
−
   clear: both;
+
   -webkit-animation-name: zoomIn;
−
  margin-left: 15%;
+
   animation-name: zoomIn;
−
   margin-top: 0;
+
−
  width: 290px;
+
 
}
 
}
  
−
.dummy-image{
+
@-webkit-keyframes zoomOut {
−
   background-color: black;
+
   from {
−
   height: 400px;
+
    opacity: 1;
−
   width: 350px;
+
   }
 +
 
 +
  50% {
 +
    opacity: 0;
 +
    -webkit-transform: scale3d(.3, .3, .3);
 +
    transform: scale3d(.3, .3, .3);
 +
   }
 +
 
 +
  to {
 +
    opacity: 0;
 +
  }
 
}
 
}
  
−
</style>
+
@keyframes zoomOut {
 +
  from {
 +
    opacity: 1;
 +
  }
  
 +
  50% {
 +
    opacity: 0;
 +
    -webkit-transform: scale3d(.3, .3, .3);
 +
    transform: scale3d(.3, .3, .3);
 +
  }
  
−
<html>
+
  to {
 +
    opacity: 0;
 +
  }
 +
}
  
−
<script>
+
.zoomOut {
−
$(document).ready(function(){
+
  -webkit-animation-name: zoomOut;
 +
  animation-name: zoomOut;
 +
}
  
−
    var distance = 2;
 
−
    // see: http://atomicrobotdesign.com/blog/web-development/how-to-disable-a-button-until-a-jquery-animation-has-finished/ //
 
−
    // bind the button to the function, so it can be unbound in the code and the button isnt clickable any more //
 
−
    $("#buttonleft").bind("click", moveleft);
 
−
function moveleft(e) {
 
−
// unbind the button //
 
−
$("#buttonleft").unbind();
 
−
console.log("Click "+distance);
 
  
−
if (distance == 1) {
+
#box1,
−
console.log("Distance: "+distance);
+
#box2,
−
$('#first').css({"transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /* 2 first */
+
#box3,
−
    $('#second').css({"z-index": "100"}); /* begin second */
+
#box4,
−
    $('#third').css({});
+
#box5,
−
    $('#fourth').css({});
+
#box6,
−
    $('#fifth').css({});
+
#box7,
−
    $('#sixth').css({});
+
#box8,
−
    $('#seventh').css({"z-index": "-100", "transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /* 4 seventh */
+
#DiaCHIP_logo,
−
    $('#eightth').css({"transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /* 3 eightth */
+
#DiaCHIP_text {
−
    distance = 2;
+
  opacity: 0;
−
}
+
}
  
−
else if (distance ==2) {
+
@media screen and (max-width: 1199px) {
−
console.log("Distance: "+distance);
+
−
$('#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)"}); /* 2 second */
+
−
    $('#third').css({"z-index": "100"}); /* begin third */
+
−
    $('#fourth').css({});
+
−
    $('#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) {
+
.topicboxes{
−
console.log("Distance: "+distance);
+
  display: block;
−
$('#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 */
+
  width: 230px;                       /* define size of elements */
−
    $('#second').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"}); /* 3 second */
+
  height: 200px;
−
    $('#third').css({"transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"}); /* 2 third */
+
  margin: 20px;  
−
    $('#fourth').css({"z-index": "100"}); /* begin fourth */
+
  font-size: 100%;
−
    $('#fifth').css({});
+
  text-align: center;
−
    $('#sixth').css({});
+
}
−
    $('#seventh').css({});
+
−
    $('#eightth').css({});
+
−
    distance = 4;
+
−
}
+
  
−
else if (distance ==4) {
+
.circle-container li {
−
console.log("Distance: "+distance);
+
  display: inline-block;
−
$('#first').css({});
+
}
−
    $('#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)"}); /* 3 third */
+
.circle-container{
−
    $('#fourth').css({"transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"}); /* 2 fourth */
+
  display: flex;
−
    $('#fifth').css({"z-index": "100"}); /* begin fifth */
+
  flex-wrap: wrap;
−
    $('#sixth').css({});
+
  justify-content: space-around;
−
    $('#seventh').css({});
+
  margin-bottom: 2em;
−
    $('#eightth').css({});
+
}
−
    distance = 5;
+
−
}
+
  
−
else if (distance ==5) {
+
.cool_container{
−
console.log("Distance: "+distance);
+
  display: block;
−
$('#first').css({});
+
  padding-top: 0;
−
    $('#second').css({});
+
  margin: 0;
−
    $('#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 */
+
.cool_centerimage{
−
    $('#sixth').css({"z-index": "100"}); /* begin sixth */
+
  display: none;
−
    $('#seventh').css({});
+
}
−
    $('#eightth').css({});
+
−
    distance = 6;
+
−
}
+
  
−
else if (distance == 6) {
+
#cool_centerimage_small{
−
console.log("Distance: "+distance);
+
  display: block;
−
$('#first').css({});
+
  margin: 20px;
−
    $('#second').css({});
+
  font-weight: 500;
−
    $('#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) {
+
.circle-container a {
−
console.log("Distance: "+distance);
+
  border-radius: 8px;
−
$('#first').css({});
+
  color: #FFF;
−
    $('#second').css({});
+
  background-color: #0051A2;
−
    $('#third').css({});
+
  padding: 1px 10px;
−
    $('#fourth').css({});
+
  font-size: 100%;
−
    $('#fifth').css({"z-index": "-100", "transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /* 4 fifth */
+
  border: 5px solid #0051A2;
−
    $('#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 //
+
</style>
−
// wait until css-animation has finished. time is specified in css-transition property //
+
−
setTimeout(function(){
+
−
$("#buttonleft").bind("click", moveleft);
+
−
}, 1000);
+
−
}
+
  
 +
<script type="text/javascript">
 +
 
 +
// perform the animation
  
−
     $("#buttonright").bind("click", moveright);
+
$(document).ready(function() {
−
function moveright(e) {
+
     $('#DiaCHIP_logo').delay(1000).queue(function (next) {$(this).css({"animation-name": "zoomIn", "animation-duration": "1s"}).css({"opacity":"1"}); next(); }); 
 +
    $('#box1').delay(2000).queue(function (next) {$(this).css({"animation-name": "zoomIn-Pics", "animation-duration": "1s"}).css({"opacity":"1"}); next(); });
 +
    $('#box2').delay(2500).queue(function (next) {$(this).css({"animation-name": "zoomIn-Pics", "animation-duration": "1s"}).css({"opacity":"1"}); next(); });
 +
    $('#box3').delay(3000).queue(function (next) {$(this).css({"animation-name": "zoomIn-Pics", "animation-duration": "1s"}).css({"opacity":"1"}); next(); });
 +
    $('#box4').delay(3500).queue(function (next) {$(this).css({"animation-name": "zoomIn-Pics", "animation-duration": "1s"}).css({"opacity":"1"}); next(); });
 +
    $('#box5').delay(4000).queue(function (next) {$(this).css({"animation-name": "zoomIn-Pics", "animation-duration": "1s"}).css({"opacity":"1"}); next(); });
 +
    $('#box6').delay(4500).queue(function (next) {$(this).css({"animation-name": "zoomIn-Pics", "animation-duration": "1s"}).css({"opacity":"1"}); next(); });
 +
    $('#box7').delay(5000).queue(function (next) {$(this).css({"animation-name": "zoomIn-Pics", "animation-duration": "1s"}).css({"opacity":"1"}); next(); });
 +
    $('#box8').delay(5500).queue(function (next) {$(this).css({"animation-name": "zoomIn-Pics", "animation-duration": "1s"}).css({"opacity":"1"}); next(); });
 +
    $('#DiaCHIP_logo').delay(6000).queue(function (next) {$(this).css({"animation-name": "zoomOut", "animation-duration": "1s"}).css({"opacity":"0"}); next(); });
 +
    $('#DiaCHIP_text').delay(7500).queue(function (next) {$(this).css({"animation-name": "zoomIn", "animation-duration": "1s"}).css({"opacity":"1"}); next(); }); 
 +
});
  
−
$("#buttonright").unbind();
+
</script>
−
console.log("Click "+distance);
+
  
−
if (distance == 1) {
+
<div id="cool_centerimage_small">
−
$('#first').css({"z-index": "-100"}); /* 1 second */
+
    <!--<img src="https://static.igem.org/mediawiki/2015/9/91/Freiburg_homepage_Dia_chip.png" width="250px">-->
−
    $('#second').css({});
+
    <p>Modern everyday life is fast...<br>...too fast for spending unnecessary time at the doctor’s and waiting weeks for your test results. <br> Not to mention spending lots of money on numerous serological tests for your diagnosis. Wouldn't life be easier if a single test was sufficient?
−
    $('#third').css({});
+
    </p>
−
    $('#fourth').css({});
+
    <p>
−
    $('#fifth').css({});
+
This is the reason why we thought about a universally accessible, cost and time efficient diagnostic device and developed the DiaCHIP!
−
    $('#sixth').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"}); /* 6 third */
+
    </p>
−
    $('#seventh').css({"z-index": "100","transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"}); /* 7 third */
+
</div>
−
    $('#eightth').css({"transform": "translateX(-2000px)", "-webkit-transform": "translateX(-2000px)", "-ms-transform": "translateX(-2000px)"}); /* 8 first */
+
−
    distance = 8;
+
−
}
+
  
−
else if (distance ==2) {
 
−
console.log("Distance: "+distance);
 
−
$('#first').css({"transform": "translateX(-1000px)", "-webkit-transform": "translateX(-1000px)", "-ms-transform": "translateX(-1000px)"}); /* 1 first */
 
−
    $('#second').css({"z-index": "-100"}); /* 2 second */
 
−
    $('#third').css({});
 
−
    $('#fourth').css({});
 
−
    $('#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) {
+
<div class="cool_container">
−
console.log("Distance: "+distance);
+
−
$('#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)"}); /* 2 first */
+
−
    $('#third').css({"z-index": "-100"}); /* 3 second */
+
−
    $('#fourth').css({});
+
−
    $('#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) {
+
    <ul class='circle-container'>
−
console.log("Distance: "+distance);
+
        <li><!--6-->
−
$('#first').css({"transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"}); /* 1 third */
+
        <div id="box1" class="topicboxes">
−
    $('#second').css({"z-index": "100","transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"}); /* 2 fourth */
+
          <div class="cool_header"><a href='#'>Diagnostics today</a></div>
−
    $('#third').css({"transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /*3 first */
+
          <div class="cool_image_blink element1">
−
    $('#fourth').css({"z-index": "-100"}); /* 4 second*/
+
          <div class="cool_content cool_text_blink">Nowadays, medical diagnoses are mainly based on huge amounts of time-consuming and cost intensive serological tests. Read more about the issues we tackled!</div>
−
    $('#fifth').css({});
+
          </div>
−
    $('#sixth').css({});
+
        </div>
−
    $('#seventh').css({});
+
        </li>
−
    $('#eightth').css({});
+
−
    distance = 3;
+
−
}
+
  
−
else if (distance ==5) {
+
        <li><!--7-->
−
console.log("Distance: "+distance);
+
        <div id="box2" class="topicboxes">
−
$('#first').css({});
+
          <div class="cool_header"><a href='#'>The DiaCHIP</a></div>
−
    $('#second').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"}); /* 2 third */
+
          <div class="cool_image_blink element2">
−
    $('#third').css({"z-index": "100","transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"}); /* 3 fourth */
+
          <div class="cool_content cool_text_blink">Simultaneous screening for hundreds of diseases within a few hours? <br> Find out about the DiaCHIP's potential to enlighten future diagnostics!</div>
−
    $('#fourth').css({"transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /* 4 first */
+
          </div>
−
    $('#fifth').css({"z-index": "-100"}); /* 5 second */
+
        </div>
−
    $('#sixth').css({});
+
        </li>
−
    $('#seventh').css({});
+
−
    $('#eightth').css({});
+
−
    distance = 4;
+
−
}
+
  
−
else if (distance == 6) {
+
        <li><!--8-->
−
console.log("Distance: "+distance);
+
        <div id="box3" class="topicboxes">
−
$('#first').css({});
+
          <div class="cool_header"><a href='#'>Our System</a></div>
−
    $('#second').css({});
+
          <div class="cool_image_blink element3">
−
    $('#third').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"}); /* 3 third */
+
          <div class="cool_content cool_text_blink">Generating a protein array on demand via cell-free expression and detecting antigen-antibody interactions label-free and in real-time: The principle behind the DiaCHIP!</div>
−
    $('#fourth').css({"z-index": "100","transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"}); /* 4 fourth */
+
          </div>
−
    $('#fifth').css({"transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /* 5 first */
+
        </div>
−
    $('#sixth').css({"z-index": "-100"}); /* 6 second */
+
        </li>
−
    $('#seventh').css({});
+
−
    $('#eightth').css({});
+
−
    distance =  5;
+
−
}
+
  
−
else if (distance == 7) {
+
        <li><!--1-->
−
console.log("Distance: "+distance);
+
            <div id="box4" class="topicboxes">
−
$('#first').css({});
+
              <div class="cool_header"><a href='#'>Own Device</a></div>
−
    $('#second').css({});
+
              <div class="cool_image_blink element4">
−
    $('#third').css({});
+
              <div class="cool_content cool_text_blink">We built our own simplified and affordable detection device. Check out the step by step instructions!</div>
−
    $('#fourth').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"}); /* 4 third */
+
            </div>
−
    $('#fifth').css({"z-index": "100","transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"}); /* 5 fourth */
+
          </div>
−
    $('#sixth').css({"transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /* 6 first */
+
        </li>
−
    $('#seventh').css({"z-index": "-100"}); /* 7 second */
+
        <li><!--2-->
−
    $('#eightth').css({});
+
          <div id="box5" class="topicboxes">
−
    distance = 6;
+
            <div class="cool_header"><a href='#'>Improved iGEM Backbone</a></div>
−
}
+
            <div class="cool_image_blink element5">
 +
            <div class="cool_content cool_text_blink">We provided an improved backbone for protein overexpression meeting all the iGEM standards. <br> See how we expanded the iGEM Registry!</div>
 +
            </div>
 +
          </div>
 +
        </li>
  
−
else if (distance == 8) {
+
        <li><!--3-->
−
console.log("Distance: "+distance);
+
          <div id="box6" class="topicboxes">
−
$('#first').css({});
+
            <div class="cool_header"><a href='#'>Human Practice</a></div>
−
    $('#second').css({});
+
            <div class="cool_image_blink element6">
−
    $('#third').css({});
+
            <div class="cool_content cool_text_blink">What do people think about the DiaCHIP and systems based on synthetic biology? <br> Check out the results of our survey and discussions!</div>
−
    $('#fourth').css({});
+
            </div>
−
    $('#fifth').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"}); /* 5 third */
+
          </div>
−
    $('#sixth').css({"z-index": "100","transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"}); /* 6 fourth */
+
        </li>
−
    $('#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(){
+
        <li><!--4-->
−
$("#buttonright").bind("click", moveright);
+
        <div id="box7" class="topicboxes">
−
}, 1000);
+
          <div class="cool_header"><a href='#'>Modeling</a></div>
−
}
+
          <div class="cool_image_blink element7">
−
});
+
          <div class="cool_content cool_text_blink">Modeling the generation of proteins during cell-free expression as well as their diffusion in our system helped us obtaining better results. Get more information here.</div>
−
</script>
+
          </div>
 +
        </div>
 +
        </li>
  
−
<div class="header_box">
+
        <li><!--5-->
−
<h1>The DiaCHIP - A Versatile Detection System</h1>
+
          <div id="box8" class="topicboxes">
−
</div>
+
            <div class="cool_header"><a href='#'>Blood Serum Analysis</a></div>
 +
            <div class="cool_image_blink element8">
 +
            <div class="cool_content cool_text_blink">We successfully detected tetanus antibodies in human blood serum and measured binding of GFP antibodies to cell-free expressed GFP. <br> Visit our results page!</div>
 +
            </div>
 +
          </div>
 +
        </li>
 +
    </ul>
  
−
<div class="image_box left" style="margin-bottom:10%;margin-left:-8%;margin-top:-10%;margin-right:-10%">
+
    <div class="cool_centerimage">
−
<img align="left" alt="DiaCHIP_Sabi" src="https://static.igem.org/mediawiki/2015/a/af/Freiburg_DiaCHIP_Sabi.png" height="1430px">
+
        <div id="DiaCHIP_logo">
−
</div>
+
          <img src="https://static.igem.org/mediawiki/2015/9/91/Freiburg_homepage_Dia_chip.png" width="250px">
 +
        </div>
 +
        <div id="DiaCHIP_text">
 +
          <p>Modern everyday life is fast...<br>...too fast for spending unnecessary time at the doctor’s and waiting weeks for your test results. <br> Not to mention spending lots of money on numerous serological tests for your diagnosis. Wouldn't life be easier if a single test was sufficient?
 +
          </p>
 +
          <p>
 +
          This is the reason why we thought about a universally accessible, cost and time efficient diagnostic device and developed the DiaCHIP!
 +
          </p>
 +
        </div>
 +
    </div>
  
−
<div style="width:120%;margin-bottom:22%">
 
−
<div class="content_box3" style="margin-right:20%;margin-left:30%">
 
−
<h2>Project Motivation</h2>
 
−
<p>
 
−
        Serological tests are a key element in modern medicine. Especially, when it comes to the detection and identification of infectious diseases performing different blood tests is inevitable. Regardless if a patient has diffuse symptoms or if he is tested for a defined number of diseases, more than one serological test has to be performed each time. Many tests, many days of waiting and an increasing bill: With some infectious diseases every minutes counts and not everyone can afford a long series of testing. What if there was a possibility to combine all tests in one single affordable device?
 
−
</p>
 
 
</div>
 
</div>
  
−
<div class="content_box3" style="margin-left:38%;margin-right:12%">
 
−
<h2>Detecting Antigen-Antibody Interactions</h2>
 
−
<p>
 
−
The DiaCHIP is an innovative tool to screen for a broad range of antibodies present in serum. <br>
 
−
        Antibodies can be an indicator for an immune response towards an infection or a successful vaccination. <br>    Antibodies also play a role in the diagnosis of autoimmune diseases. <br>
 
−
        Especially the ability to differentiate between life threatening diseases and a mild infection within a short time bears the potential to save lives. 
 
−
</p>
 
−
<p>
 
−
Spotting diseases by detecting correspondent antibodies in a patient's serum is an established method in  <a href="https://2015.igem.org/Team:Freiburg/Diagnostics" title="diagnostics_today">modern diagnostics</a>. The DiaCHIP makes it possible to screen for multiple specific antibodies simply using a drop of blood.
 
−
</p>
 
−
</div>
 
  
−
<div class="content_box3" style="margin-right:25%">
+
<div class="content_box">
−
<h2>The Concept</h2>
+
 
 +
 
 +
<h1 class="sectionedit1">DiaCHIP - Enlightening Diagnostics</h1>
 +
<div class="level1">
 
<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.
+
In modern medicine, fast detection and differentiation of diseases is a crucial and fundamental task. Typical ELISA-based assays are time-consuming and expensive. We propose an advanced procedure for the simultaneous detection of various diseases in a fast and inexpensive manner, the DiaCHIP. Our approach is based on the interaction of antibodies with their respective antigens. Different antigens are immobilized on a protein array generated by cell-free protein expression, using the corresponding DNA array as a template. Placed in a microfluidic chamber, the protein array is incubated with a patient’s blood sample. The interaction between an antibody in the sample and the corresponding immobilized antigen results in a local change of the optical thickness of the surface. This change can be detected using a label-free and real-time measurement technology called iRIf (imaging Reflectometric Interference). Offering simultaneous screening for several diseases, our DiaCHIP has strong potential to improve future diagnostics.  
 
</p>
 
</p>
 
</div>
 
</div>
  
−
</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="slider">  <!-- Slider container -->
 
−
        <div id="mask">  <!-- Mask -->
 
−
        <ul>
 
−
        <li id="first" class="firstanimation">  <!-- ID for tooltip and class for animation -->
 
−
        <div class="artboard">
 
−
        <div class="sliderimage">
 
−
        <img src="https://static.igem.org/mediawiki/2015/8/89/Freiburg_Slider-DIY_scaled.png" width="350px">
 
−
        </div>
 
−
        <div class="slidertext">
 
−
        <h1>Building our own device</h1>
 
−
        <p>The device originally used, in collaboration with AG Roth, is a expensive machine based on rather simple physics. Therefore, we decided to build our own apparatus in a cost-efficient manner. We were able to produce reliable results with it and provide a construction plan [LINK]. This plan will make it possible for future iGEM generations to built and use their own label-free protein array analysis tool.</p>
 
−
        </div>
 
−
        <div class="slidertext indent">
 
−
        <p> Want to read <a href="https://2015.igem.org/Team:Freiburg/OwnDevice"> more?</a>
 
−
        </p>
 
−
        </div>
 
−
        </div>
 
−
        </li>
 
−
        <li id="second" class="secondanimation">
 
−
        <div class="artboard">
 
−
        <div class="sliderimage">
 
−
        <img src="https://static.igem.org/mediawiki/2015/b/b8/Freiburg_Slider-HumanPractice_scaled.png" width="350px">
 
−
        </div>
 
−
        <div class="slidertext">
 
−
        <h1>Communicating science</h1>
 
−
        <p>Diagnosing diseases fast and reliable is not only an issue among medical staff, it is also subject to public interest. This has lead us to ask for people's opinions regarding the DiaCHIP. Although the method is based on synthetic biology, which is a problematic definition for the broad public according to a survey initiated by the Leopoldina (National academy of science), we received lots of positive feedback. </p>
 
−
        </div>
 
−
        <div class="slidertext indent">
 
−
        <p> Want to read <a href="https://2015.igem.org/Team:Freiburg/Practices"> more?</a></p>
 
−
        </div>
 
−
        </div>
 
−
        </li>
 
−
        <li id="third" class="thirdanimation">
 
−
        <div class="artboard">
 
−
        <div class="sliderimage">
 
−
        <img src="https://static.igem.org/mediawiki/2015/1/14/Freiburg_Slide-Modelling_scaled.png" width="350px">
 
−
        </div>
 
−
        <div class="slidertext">
 
−
        <h1>Modeling cellfree expression</h1>
 
−
        <p>In order to optimize the DiaCHIP for future applications, we optimized the process of cell-free expression and diffusion over time. Making use of xxx parameters and xxx ordinary differential equations, we computed the size of the resulting antigen spots and identified the factors limiting cell-free expression in the DiaCHIP. </p>
 
−
        </div>
 
−
        <div class="slidertext indent">
 
−
        <p> Want to read <a href="https://2015.igem.org/Team:Freiburg/Modeling">more?</a> </p>
 
−
        </div>
 
−
        </div>
 
−
        </li>
 
−
        <li id="fourth" class="fourthanimation">
 
−
        <div class="artboard">
 
−
        <div class="sliderimage">
 
−
        <img src="https://static.igem.org/mediawiki/2015/e/e4/Freiburg_Slider-Eigenblut.png" width="350px">
 
−
        </div>
 
−
        <div class="slidertext">
 
−
        <h1>Measuring our own blood</h1>
 
−
        <p>One of the most promising results came from the detection of anti-tetanus antibodies in human blood serum. The DiaCHIP analysis made it possible for us to distinguish serum samples from an individual before and after vaccination. Samples taken three weeks after vaccination produced positive signals, compared to negative results prior to antigen exposure. </p>
 
−
        </div>
 
−
        <div class="slidertext indent">
 
−
        <p> Want to read <a href="https://2015.igem.org/Team:Freiburg/Results">more?</a></p>
 
−
        </div>
 
−
        </div>
 
−
        </li>
 
−
        <li id="fifth" class="fifthanimation">
 
−
        <div class="artboard">
 
−
        <div class="sliderimage">
 
−
        <img src="https://static.igem.org/mediawiki/2015/e/e4/Freiburg_Slider-Eigenblut.png" width="350px">
 
−
        </div>
 
−
        <div class="slidertext">
 
−
        <h1>Measuring our own blood</h1>
 
−
        <p>One of the most promising results came from the detection of anti-tetanus antibodies in human blood serum. The DiaCHIP analysis made it possible for us to distinguish serum samples from an individual before and after vaccination. Samples taken three weeks after vaccination produced positive signals, compared to negative results prior to antigen exposure. </p>
 
−
        </div>
 
−
        <div class="slidertext indent">
 
−
        <p> Want to read <a href="https://2015.igem.org/Team:Freiburg/Results">more?</a></p>
 
−
        </div>
 
−
        </div>
 
−
        </li>
 
−
        <li id="sixth" class="sixthanimation">
 
−
        <div class="artboard">
 
−
        <div class="sliderimage">
 
−
        <img src="https://static.igem.org/mediawiki/2015/e/e4/Freiburg_Slider-Eigenblut.png" width="350px">
 
−
        </div>
 
−
        <div class="slidertext">
 
−
        <h1>Measuring our own blood</h1>
 
−
        <p>One of the most promising results came from the detection of anti-tetanus antibodies in human blood serum. The DiaCHIP analysis made it possible for us to distinguish serum samples from an individual before and after vaccination. Samples taken three weeks after vaccination produced positive signals, compared to negative results prior to antigen exposure. </p>
 
−
        </div>
 
−
        <div class="slidertext indent">
 
−
        <p> Want to read <a href="https://2015.igem.org/Team:Freiburg/Results">more?</a></p>
 
−
        </div>
 
−
        </div>
 
−
        </li>
 
−
        <li id="seventh" class="seventhanimation">
 
−
        <div class="artboard">
 
−
        <div class="sliderimage">
 
−
        <img src="https://static.igem.org/mediawiki/2015/e/e4/Freiburg_Slider-Eigenblut.png" width="350px">
 
−
        </div>
 
−
        <div class="slidertext">
 
−
        <h1>Measuring our own blood</h1>
 
−
        <p>One of the most promising results came from the detection of anti-tetanus antibodies in human blood serum. The DiaCHIP analysis made it possible for us to distinguish serum samples from an individual before and after vaccination. Samples taken three weeks after vaccination produced positive signals, compared to negative results prior to antigen exposure. </p>
 
−
        </div>
 
−
        <div class="slidertext indent">
 
−
        <p> Want to read <a href="https://2015.igem.org/Team:Freiburg/Results">more?</a></p>
 
−
        </div>
 
−
        </div>
 
−
        </li>
 
−
        <li id="eightth" class="eightthanimation">
 
−
        <div class="artboard">
 
−
        <div class="sliderimage">
 
−
        <img src="https://static.igem.org/mediawiki/2015/e/e4/Freiburg_Slider-Eigenblut.png" width="350px">
 
−
        </div>
 
−
        <div class="slidertext">
 
−
        <h1>Measuring our own blood</h1>
 
−
        <p>One of the most promising results came from the detection of anti-tetanus antibodies in human blood serum. The DiaCHIP analysis made it possible for us to distinguish serum samples from an individual before and after vaccination. Samples taken three weeks after vaccination produced positive signals, compared to negative results prior to antigen exposure. </p>
 
−
        </div>
 
−
        <div class="slidertext indent">
 
−
        <p> Want to read <a href="https://2015.igem.org/Team:Freiburg/Results">more?</a></p>
 
−
        </div>
 
−
        </div>
 
−
        </li>
 
−
    </ul>
 
−
        </div>  <!-- End Mask -->
 
−
      </div>  <!-- End Slider Container -->
 
−
  </div>
 
 
</div>
 
</div>
  
 
</html>
 
</html>
−
<!-- Labjournal content ends here -->
 
 
{{Freiburg/wiki_content_end}}
 
{{Freiburg/wiki_content_end}}

Revision as of 13:32, 16 September 2015

""

Modern everyday life is fast...
...too fast for spending unnecessary time at the doctor’s and waiting weeks for your test results.
Not to mention spending lots of money on numerous serological tests for your diagnosis. Wouldn't life be easier if a single test was sufficient?

This is the reason why we thought about a universally accessible, cost and time efficient diagnostic device and developed the DiaCHIP!

  • Diagnostics today
    Nowadays, medical diagnoses are mainly based on huge amounts of time-consuming and cost intensive serological tests. Read more about the issues we tackled!
  • The DiaCHIP
    Simultaneous screening for hundreds of diseases within a few hours?
    Find out about the DiaCHIP's potential to enlighten future diagnostics!
  • Our System
    Generating a protein array on demand via cell-free expression and detecting antigen-antibody interactions label-free and in real-time: The principle behind the DiaCHIP!
  • Own Device
    We built our own simplified and affordable detection device. Check out the step by step instructions!
  • Improved iGEM Backbone
    We provided an improved backbone for protein overexpression meeting all the iGEM standards.
    See how we expanded the iGEM Registry!
  • Human Practice
    What do people think about the DiaCHIP and systems based on synthetic biology?
    Check out the results of our survey and discussions!
  • Modeling
    Modeling the generation of proteins during cell-free expression as well as their diffusion in our system helped us obtaining better results. Get more information here.
  • Blood Serum Analysis
    We successfully detected tetanus antibodies in human blood serum and measured binding of GFP antibodies to cell-free expressed GFP.
    Visit our results page!

Modern everyday life is fast...
...too fast for spending unnecessary time at the doctor’s and waiting weeks for your test results.
Not to mention spending lots of money on numerous serological tests for your diagnosis. Wouldn't life be easier if a single test was sufficient?

This is the reason why we thought about a universally accessible, cost and time efficient diagnostic device and developed the DiaCHIP!

DiaCHIP - Enlightening Diagnostics

In modern medicine, fast detection and differentiation of diseases is a crucial and fundamental task. Typical ELISA-based assays are time-consuming and expensive. We propose an advanced procedure for the simultaneous detection of various diseases in a fast and inexpensive manner, the DiaCHIP. Our approach is based on the interaction of antibodies with their respective antigens. Different antigens are immobilized on a protein array generated by cell-free protein expression, using the corresponding DNA array as a template. Placed in a microfluidic chamber, the protein array is incubated with a patient’s blood sample. The interaction between an antibody in the sample and the corresponding immobilized antigen results in a local change of the optical thickness of the surface. This change can be detected using a label-free and real-time measurement technology called iRIf (imaging Reflectometric Interference). Offering simultaneous screening for several diseases, our DiaCHIP has strong potential to improve future diagnostics.