Difference between revisions of "Team:Freiburg/Testpage"

Line 1: Line 1:
 
{{Freiburg/CSS}}
 
{{Freiburg/CSS}}
 
{{Freiburg/Menubar}}
 
{{Freiburg/Menubar}}
−
 
 
{{Freiburg/wiki_content_start}}
 
{{Freiburg/wiki_content_start}}
 
<html>
 
<html>
  
 
<style>
 
<style>
−
 
 
/*========= BEGIN: style for navigation bar ==========*/
 
/*========= BEGIN: style for navigation bar ==========*/
−
#project {
+
#home {
−
     background: url(https://static.igem.org/mediawiki/2015/d/da/Freiburg_icon_project_active_yellow.png) no-repeat;
+
     background: url(https://static.igem.org/mediawiki/2015/d/d7/Freiburg_icon_home_active.png) no-repeat;
 
}
 
}
  
−
#project a {
+
#home a {
 
     color: #ecdc18;
 
     color: #ecdc18;
 
}
 
}
 +
/*========= END: style for navigation bar ==========*/
  
−
#runningchip {
+
a:link {
−
    left: 18.6%;
+
  text-decoration: none;
 +
  color: #888;
 
}
 
}
−
/*========= END: style for navigation bar ==========*/
 
−
 
  
−
/*========= BEGIN: Linkbutton in slider ============*/
 
 
.intro_button a:hover {
 
.intro_button a:hover {
 
     text-decoration: underline;
 
     text-decoration: underline;
−
}
 
−
 
−
.intro_button a {
 
−
    color: #FFF;
 
 
}
 
}
  
Line 34: Line 27:
 
     margin: 0px auto;
 
     margin: 0px auto;
 
     padding: 2px 5px 5px 10px;
 
     padding: 2px 5px 5px 10px;
−
     width: 180px;
+
     width: 150px;
 
     line-height: 16px;
 
     line-height: 16px;
 
     text-align: center;
 
     text-align: center;
 
     /*background-color: #326aab;*/
 
     /*background-color: #326aab;*/
−
     background-color: #0051A2;
+
     background-color: #C5162F;
 
     font-size: 14pt;
 
     font-size: 14pt;
 
     border-radius: 8px;
 
     border-radius: 8px;
Line 45: Line 38:
 
     color: #FFF;
 
     color: #FFF;
 
}
 
}
 +
  
 
.menu-arrow{
 
.menu-arrow{
Line 52: Line 46:
 
background-size: 10px 13px;
 
background-size: 10px 13px;
 
}
 
}
−
/*========= END: Linkbutton in slider ============*/
 
  
 +
/* =============== BEGIN: Circle of Elements ==================== */
 +
/*
 +
* Mixin to put items on a circle
 +
* [1] - Allows children to be absolutely positioned
 +
* [2] - Allows the mixin to be used on a list
 +
* [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: 1000px){
+
@media screen and (min-width: 1200px){
  
−
/* code adapted from http://www.smashingmagazine.com/2012/04/pure-css3-cycling-slideshow/*/
+
.circle-container {
−
 
+
−
#slider {
+
−
  height: 500px;
+
−
  width: 910px;
+
−
  overflow: visible;
+
 
   position: relative;
 
   position: relative;
 +
  /* [1] */
 +
  width: 480px;                      /* changes size of circle that elements are circling on */
 +
  height: 480px;
 +
  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: 499;
 +
}
 +
.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;
 
}
 
}
  
−
/* hides everything outside the slider box */
+
/* transformations needed for showing the pictures */
−
#mask {
+
.circle-container > *:nth-of-type(4) {
−
  overflow: hidden;
+
  -moz-transform: rotate(357deg) translate(304px) rotate(-357deg);
−
  height: 500px;
+
  -ms-transform: rotate(357deg) translate(304px) rotate(-357deg);
 +
  -webkit-transform: rotate(357deg) translate(304px) rotate(-357deg);
 +
  transform: rotate(357deg) translate(304px) rotate(-357deg);            /*change translate for defining position of elements*/
 +
}
 +
.circle-container > *:nth-of-type(5) {
 +
  -moz-transform: rotate(45deg) translate(304px) rotate(-45deg);
 +
  -ms-transform: rotate(45deg) translate(304px) rotate(-45deg);
 +
  -webkit-transform: rotate(45deg) translate(304px) rotate(-45deg);
 +
  transform: rotate(45deg) translate(304px) rotate(-45deg);
 +
}
 +
.circle-container > *:nth-of-type(6) {
 +
  -moz-transform: rotate(105deg) translate(288px) rotate(-105deg);
 +
  -ms-transform: rotate(105deg) translate(288px) rotate(-105deg);
 +
  -webkit-transform: rotate(105deg) translate(288px) rotate(-105deg);
 +
  transform: rotate(105deg) translate(288px) rotate(-105deg);
 +
}
 +
.circle-container > *:nth-of-type(7) {
 +
  -moz-transform: rotate(147deg) translate(432px) rotate(-147deg);
 +
  -ms-transform: rotate(147deg) translate(432px) rotate(-147deg);
 +
  -webkit-transform: rotate(147deg) translate(432px) rotate(-147deg);
 +
  transform: rotate(147deg) translate(432px) rotate(-147deg);
 +
}
 +
.circle-container > *:nth-of-type(8) {
 +
  -moz-transform: rotate(180deg) translate(448px) rotate(-180deg);
 +
  -ms-transform: rotate(180deg) translate(448px) rotate(-180deg);
 +
  -webkit-transform: rotate(180deg) translate(448px) rotate(-180deg);
 +
  transform: rotate(180deg) translate(448px) rotate(-180deg);
 +
}
 +
.circle-container > *:nth-of-type(1) {
 +
  -moz-transform: rotate(212deg) translate(432px) rotate(-212deg);
 +
  -ms-transform: rotate(212deg) translate(432px) rotate(-212deg);
 +
  -webkit-transform: rotate(212deg) translate(432px) rotate(-212deg);
 +
  transform: rotate(212deg) translate(432px) rotate(-212deg);
 +
}
 +
.circle-container > *:nth-of-type(2) {
 +
  -moz-transform: rotate(255deg) translate(320px) rotate(-255deg);
 +
  -ms-transform: rotate(255deg) translate(320px) rotate(-255deg);
 +
  -webkit-transform: rotate(255deg) translate(320px) rotate(-255deg);
 +
  transform: rotate(255deg) translate(320px) rotate(-255deg);
 +
}
 +
.circle-container > *:nth-of-type(3) {
 +
  -moz-transform: rotate(310deg) translate(320px) rotate(-310deg);
 +
  -ms-transform: rotate(310deg) translate(320px) rotate(-310deg);
 +
  -webkit-transform: rotate(310deg) translate(320px) rotate(-310deg);
 +
  transform: rotate(310deg) translate(320px) rotate(-310deg);
 
}
 
}
  
−
/* initialize position for positioning slides outside the slider */
+
.circle-container a {
−
#slider ul {
+
  padding: 1px 10px;
−
  margin: 0;
+
  font-size: 90%;
−
  padding: 0;
+
−
  position: relative;
+
 
}
 
}
  
−
/* define image properties and position them outside the slider mask */
+
.circle-container > div {
−
#slider li {
+
  display: block;
−
  width: 900px; /* Width slide */
+
  width: 100%;
−
  height: 500px; /* Height slide */
+
  border-radius: 10%;                       /* makes elements round or Rechteck */
−
  position: absolute;
+
  -webkit-filter: grayscale(100%);
−
  right: 0; /* Original Position - Outside of the Slider */
+
  filter: grayscale(100%);
−
  list-style: none;
+
}
 +
.circle-container img:hover {
 +
  -webkit-filter: grayscale(0);
 +
  filter: grayscale(0);
 
}
 
}
  
 +
#DiaCHIP_text{
 +
  font-size: 16px;
 +
  line-height: 28px;
 +
  margin-left: auto;
 +
  margin-right: auto;
 +
  max-width: 420px;
 +
  /* centers the text vertically */
 +
  position: relative;
 +
  top: 75%;
 +
  -moz-transform: translateY(-50%);
 +
  -ms-transform: translateY(-50%);
 +
  -webkit-transform: translateY(-50%);
 +
  transform: translateY(-50%);
 +
}
  
−
#first,
+
/* =============== END: Circle of Elements - Positioning ==================== */
−
#second,
+
 
−
#third,
+
/* =============== BEGIN: New Header =============================== */
−
#fourth,
+
#cool_centerimage_small{
−
#fifth,
+
   display: none;
−
#sixth,
+
−
#seventh,
+
−
#eightth {
+
−
  left: -1000px;
+
−
  -ms-transition: tranform 1s ease;
+
−
  -webkit-transition: transform 1s ease;
+
−
  transition: transform 1s ease;
+
−
   font-size: 100%;
+
 
}
 
}
 +
/* =============== END: New Header =============================== */
  
−
#first{left: 0;}
+
} /* end of media query! dont delete */
−
#third{z-index : -100;}
+
−
#sixth{z-index: -100;}
+
−
#fifth{z-index: -100;}
+
−
#fourth{z-index: -100}
+
−
#seventh{z-index: -100;}
+
−
#eightth{z-index: -100; left: 1000px}
+
  
−
.container{
+
 
−
     position: relative;
+
/* =============== BEGIN: Circle of Elements - Element Styling ==================== */
−
     height: 500px;
+
.cool_header {
−
     margin: 3% auto;
+
     text-align: center;
−
     width: 1000px;
+
     height: 20px;
 +
     margin-bottom: 3px;
 +
     z-index: 10;
 
}
 
}
  
−
#buttonleft {
+
.cool_header a {
−
   z-index: 200;
+
   /*display: block; */                        /* border around elements */
−
   position: absolute;
+
  border-radius: 8px;                     /* makes border around elements round or Rechteck */
−
   top: 190px;
+
   /*box-shadow: 0 0 0 5px #0051A2;*/
−
   left: 0;
+
        color: #FFF;
 +
   background-color: #0051A2;
 +
   padding: 1px 10px;
 +
  font-size: 110%;
 +
  border: 5px solid #0051A2;
 
}
 
}
  
−
#buttonright{
+
.cool_header a:hover {
−
   z-index: 200;
+
   text-decoration: underline;
−
  position: absolute;
+
−
  right: 0;
+
−
  top: 190px;
+
 
}
 
}
  
−
#buttonleft img,
+
.cool_content {
−
#buttonright img{
+
    padding: 16px;
−
   width: 50px;
+
    height: 150px;
 +
    background-color: #FFFFFF;
 +
    text-align: left;
 +
    box-shadow: 1px 1px 10px #888;
 +
    -webkit-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;
 
}
 
}
  
−
#content-slider{
+
.cool_container {
−
  position: absolute;
+
    width: 100%;
−
  top:0;
+
    padding-top: 180px;
−
  left:50px
+
    margin-bottom: -50px;
 
}
 
}
  
 +
/* =============== END: Circle of Elements - Element Styling ==================== */
  
−
#buttonright:hover,
+
 
−
#buttonleft:hover{
+
/* =============== BEGIN: Circle of Elements - Center Image ==================== */
−
  cursor: pointer;
+
.cool_centerimage {
−
  cursor: hand;
+
    margin: 0 auto;
 +
    position: relative;
 +
    width: 40%;
 +
    height: 250px;
 +
    top: -420px;
 +
    text-align: center;
 +
    left: 1%;
 +
    /*border: 1px solid #000;*/
 +
    color: #000;
 +
    z-index: 500;
 
}
 
}
  
−
.artboard{
+
#DiaCHIP_logo{
−
    box-sizing: border-box;
+
  position: absolute;
−
    height: 470px;
+
  transform: translate(30%, 50%);
−
    border-radius: 60px;
+
  -ms-transform: translate(30%, 50%);
−
    background-color: #FCFCFC;
+
   -o-transform: translate(30%, 50%);
−
   box-shadow: 1px 1px 10px rgb(136, 136, 136);
+
   -webkit-transform: translate(30%, 50%);
−
   margin: 5px;
+
−
  border: 2px solid rgb(0, 81, 162);
+
−
}
+
  
−
.slidertext p{
 
−
  margin-bottom: 0;
 
 
}
 
}
 +
/* =============== END: Circle of Elements - Center Image ==================== */
  
−
.slidertext.indent{
 
−
  clear: both;
 
−
  margin-left: 15%;
 
−
  margin-top: 0;
 
−
  width: 290px;
 
−
}
 
  
−
.dummy-image{
+
/* =============== BEGIN: Circle of Elements - Hiding Animation ==================== */
−
   background-color: black;
+
.cool_image_blink {
−
   height: 400px;
+
   /*box-shadow:  
−
   width: 350px;
+
    inset 0 0 0 0 rgba(200,95,66, 0.4),
 +
    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;
 
}
 
}
  
−
/* ============= BEGIN: Styling for tree-like structure =============== */
+
.cool_image_blink:hover {
 +
  /*box-shadow:
 +
    inset 0 0 0 110px #0051A2/*rgba(200,95,66, 0.4)*/,
 +
    inset 0 0 0 16px #0051A2/*rgba(255,255,255,0.8)*/,
 +
    0 1px 2px #0051A2/*rgba(0,0,0,0.1)*/;*/
 +
}
  
−
.floatcontainer{
+
.cool_image_blink:hover .cool_content {
−
   float: left;
+
   opacity: 1;
 +
 
 +
  -webkit-transform: scale(1);
 +
  -moz-transform: scale(1);
 +
  -o-transform: scale(1);
 +
  -ms-transform: scale(1);
 +
  transform: scale(1);
 
}
 
}
  
−
.container{
+
.element1 {
−
  clear: both;
+
    background-image: url("https://static.igem.org/mediawiki/2015/0/05/Freiburg_Home_Julias_Hand.jpg");
 +
    background-size: cover;
 +
    background-position: center;
 
}
 
}
  
−
.transparent_container{
+
.element2 {
−
  overflow: hidden
+
    background-image: url("https://static.igem.org/mediawiki/2015/8/8e/Freiburg_diachip_centcoin_home.png");
 +
    background-size: cover;
 +
    background-position: center;
 
}
 
}
  
−
#content_box1{
+
.element3 {
−
  margin-left: 15%;
+
    background-image: url("https://static.igem.org/mediawiki/2015/5/5c/Freiburg_iRiF_home.jpg");
 +
    background-size: cover;
 +
    background-position: center;
 
}
 
}
  
−
#content_box2{
+
.element4 {
−
  margin-right: 15%
+
    background-image: url("https://static.igem.org/mediawiki/2015/d/d0/Freiburg_Own_Device_Foto_home.jpg");
 +
    background-size: cover;
 +
    background-position: center;
 
}
 
}
  
−
#content_box3{
+
.element5 {
−
  margin-left: 15%;
+
    background-image: url("https://static.igem.org/mediawiki/2015/3/3a/Freiburg_pOP_home_scaled.png");
 +
    background-size: cover;
 +
    background-position: center;
 
}
 
}
  
−
#leftimage img{
+
.element6 {
−
  width: 450px;
+
    background-image: url("https://static.igem.org/mediawiki/2015/a/a3/Freiburg_project-img_0301_home.jpg");
 +
    background-size: cover;
 +
    background-position: center;
 
}
 
}
  
−
} /* end of media query */
+
.element7 {
−
 
+
    background-image: url("https://static.igem.org/mediawiki/2015/f/ff/Freiburg_Modeling_Home2.png");
−
.sliderimage{
+
    background-size: cover;
−
  float: right;
+
    background-position: center;
−
  margin: 3% 70px 3% 25px;
+
−
  width: 350px
+
 
}
 
}
  
−
.slidertext{
+
.element8 {
−
  margin: 3% 25px 0 65px;
+
    background-image: url("https://static.igem.org/mediawiki/2015/5/56/Freiburg_tetanus_home2.png");
−
  width: 350px;
+
    background-size: cover;
−
  text-align: justify;
+
    background-position: center;
−
  line-height: 1;
+
−
  float: left;
+
 
}
 
}
 +
/* =============== END: Circle of Elements - Hiding Animation ==================== */
  
  
−
/* ============= END: Styling for tree-like structure =============== */
+
/* =============== BEGIN: Resetting General CSS ==================== */
 +
.mw-content-ltr ul {
 +
    padding: 0;
 +
    margin: 0 auto;
 +
}
  
−
</style>
+
/*ul {
 +
    line-height: 1em;
 +
}*/
  
 +
.content_box {
 +
    box-shadow: none;
 +
    padding: 2% 4%;
 +
    margin: 0px;
 +
}
 +
/* =============== END: Resetting General CSS ==================== */
  
−
<script>
 
−
$(document).ready(function(){
 
  
−
    var distance = 2;
+
/* ============== Animate boxes on start ===========================*/
−
    // 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) {
+
/* from https://daneden.github.io/animate.css/ */
−
      console.log("Distance: "+distance);
+
−
      $('#first').css({"transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /* 2 first */
+
−
        $('#second').css({"z-index": "100"}); /* begin second */
+
−
        $('#third').css({});
+
−
        $('#fourth').css({});
+
−
        $('#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) {
+
@-webkit-keyframes zoomIn {
−
      console.log("Distance: "+distance);
+
  from {
−
      $('#first').css({"transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"}); /* 3 first */
+
    opacity: 0;
−
        $('#second').css({"transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"}); /* 2 second */
+
    -webkit-transform: scale3d(.3, .3, .3);
−
        $('#third').css({"z-index": "100"}); /* begin third */
+
    transform: scale3d(.3, .3, .3);
−
        $('#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) {
+
  50% {
−
      console.log("Distance: "+distance);
+
    opacity: 1;
−
      $('#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)"}); /* 3 second */
+
}
−
        $('#third').css({"transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"}); /* 2 third */
+
−
        $('#fourth').css({"z-index": "100"}); /* begin fourth */
+
−
        $('#fifth').css({});
+
−
        $('#sixth').css({});
+
−
        $('#seventh').css({});
+
−
        $('#eightth').css({});
+
−
        distance = 4;
+
−
    }
+
  
−
    else if (distance ==4) {
+
@-webkit-keyframes zoomIn-Pics {
−
      console.log("Distance: "+distance);
+
  from {
−
      $('#first').css({});
+
    opacity: 0;
−
        $('#second').css({"z-index": "-100", "transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /* 4 second */
+
    -webkit-transform: scale3d(.3, .3, .3);
−
        $('#third').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"}); /* 3 third */
+
    transform: scale3d(.3, .3, .3);
−
        $('#fourth').css({"transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"}); /* 2 fourth */
+
  }
−
        $('#fifth').css({"z-index": "100"}); /* begin fifth */
+
−
        $('#sixth').css({});
+
−
        $('#seventh').css({});
+
−
        $('#eightth').css({});
+
−
        distance = 5;
+
−
    }
+
  
−
    else if (distance ==5) {
+
  40% {
−
      console.log("Distance: "+distance);
+
    -webkit-transform: scale3d(1.1,1.1,1.1);
−
      $('#first').css({});
+
    transform: scale3d(1.1,1.1,1.1);  
−
        $('#second').css({});
+
  }
−
        $('#third').css({"z-index": "-100", "transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /* 4 third */
+
−
        $('#fourth').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"}); /* 3 fourth */
+
−
        $('#fifth').css({"transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"}); /* 2 fifth */
+
−
        $('#sixth').css({"z-index": "100"}); /* begin sixth */
+
−
        $('#seventh').css({});
+
−
        $('#eightth').css({});
+
−
        distance = 6;
+
−
    }
+
  
−
    else if (distance == 6) {
+
  50% {
−
      console.log("Distance: "+distance);
+
    opacity: 1;
−
      $('#first').css({});
+
  }
−
        $('#second').css({});
+
}
−
        $('#third').css({});
+
−
        $('#fourth').css({"z-index" : "-100", "transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /* 4 fourth */
+
−
        $('#fifth').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"}); /* 3 fifth */
+
−
        $('#sixth').css({"transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"}); /* 2 sixth */
+
−
        $('#seventh').css({"z-index": "100"}); /* begin seventh */
+
−
        $('#eightth').css({});
+
−
        distance = 7;
+
−
    }
+
  
−
    else if (distance == 7) {
+
@keyframes zoomIn {
−
      console.log("Distance: "+distance);
+
  from {
−
      $('#first').css({});
+
    opacity: 0;
−
        $('#second').css({});
+
    -webkit-transform: scale3d(.3, .3, .3);
−
        $('#third').css({});
+
    transform: scale3d(.3, .3, .3);
−
        $('#fourth').css({});
+
  }
−
        $('#fifth').css({"z-index": "-100", "transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /* 4 fifth */
+
−
        $('#sixth').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"}); /* 3 sixth */
+
−
        $('#seventh').css({"transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"}); /* 2 seventh */
+
−
        $('#eightth').css({"z-index": "100"}); /* begin eightth */
+
−
        distance = 8;
+
−
    }
+
  
−
    else if (distance == 8) {
+
  50% {
−
      console.log("Distance: "+distance);
+
    opacity: 1;
−
      $('#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 //
+
@keyframes zoomIn-Pics {
−
     // wait until css-animation has finished. time is specified in css-transition property //
+
  from {
−
    setTimeout(function(){
+
     opacity: 0;
−
      $("#buttonleft").bind("click", moveleft);
+
     -webkit-transform: scale3d(.3, .3, .3);
−
     }, 1000);
+
     transform: scale3d(.3, .3, .3);
 
   }
 
   }
  
 +
  40% {
 +
    -webkit-transform: scale3d(1.1,1.1,1.1);
 +
    transform: scale3d(1.1,1.1,1.1);
 +
  }
  
−
    $("#buttonright").bind("click", moveright);
+
   50% {
−
   function moveright(e) {
+
     opacity: 1;
−
 
+
−
     $("#buttonright").unbind();
+
−
    console.log("Click "+distance);
+
−
 
+
−
    if (distance == 1) {
+
−
      $('#first').css({"z-index": "-100"}); /* 1 second */
+
−
        $('#second').css({});
+
−
        $('#third').css({});
+
−
        $('#fourth').css({});
+
−
        $('#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) {
+
−
      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) {
+
−
      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) {
+
−
      console.log("Distance: "+distance);
+
−
      $('#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)"}); /* 2 fourth */
+
−
        $('#third').css({"transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /*3 first */
+
−
        $('#fourth').css({"z-index": "-100"}); /* 4 second*/
+
−
        $('#fifth').css({});
+
−
        $('#sixth').css({});
+
−
        $('#seventh').css({});
+
−
        $('#eightth').css({});
+
−
        distance = 3;
+
−
    }
+
−
 
+
−
    else if (distance ==5) {
+
−
      console.log("Distance: "+distance);
+
−
      $('#first').css({});
+
−
        $('#second').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"}); /* 2 third */
+
−
        $('#third').css({"z-index": "100","transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"}); /* 3 fourth */
+
−
        $('#fourth').css({"transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /* 4 first */
+
−
        $('#fifth').css({"z-index": "-100"}); /* 5 second */
+
−
        $('#sixth').css({});
+
−
        $('#seventh').css({});
+
−
        $('#eightth').css({});
+
−
        distance = 4;
+
−
    }
+
−
 
+
−
    else if (distance == 6) {
+
−
      console.log("Distance: "+distance);
+
−
      $('#first').css({});
+
−
        $('#second').css({});
+
−
        $('#third').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"}); /* 3 third */
+
−
        $('#fourth').css({"z-index": "100","transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"}); /* 4 fourth */
+
−
        $('#fifth').css({"transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /* 5 first */
+
−
        $('#sixth').css({"z-index": "-100"}); /* 6 second */
+
−
        $('#seventh').css({});
+
−
        $('#eightth').css({});
+
−
        distance =  5;
+
−
    }
+
−
 
+
−
    else if (distance == 7) {
+
−
      console.log("Distance: "+distance);
+
−
      $('#first').css({});
+
−
        $('#second').css({});
+
−
        $('#third').css({});
+
−
        $('#fourth').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"}); /* 4 third */
+
−
        $('#fifth').css({"z-index": "100","transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"}); /* 5 fourth */
+
−
        $('#sixth').css({"transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /* 6 first */
+
−
        $('#seventh').css({"z-index": "-100"}); /* 7 second */
+
−
        $('#eightth').css({});
+
−
        distance = 6;
+
−
    }
+
−
 
+
−
    else if (distance == 8) {
+
−
      console.log("Distance: "+distance);
+
−
      $('#first').css({});
+
−
        $('#second').css({});
+
−
        $('#third').css({});
+
−
        $('#fourth').css({});
+
−
        $('#fifth').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"}); /* 5 third */
+
−
        $('#sixth').css({"z-index": "100","transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"}); /* 6 fourth */
+
−
        $('#seventh').css({"transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /* 7 first */
+
−
        $('#eightth').css({"z-index": "-100"}); /* 8 second */
+
−
        distance = 7;
+
−
    }
+
−
 
+
−
    setTimeout(function(){
+
−
      $("#buttonright").bind("click", moveright);
+
−
    }, 1000);
+
 
   }
 
   }
−
});
+
}
−
</script>
+
  
−
<!-- BEGIN Responsive Layout -->
+
.zoomIn {
 +
  -webkit-animation-name: zoomIn;
 +
  animation-name: zoomIn;
 +
}
  
−
<style type="text/css">
+
@-webkit-keyframes zoomOut {
−
 
+
   from {
−
@media screen and (max-width: 1000px){
+
     opacity: 1;
−
   #leftimage{
+
−
     display: none;
+
 
   }
 
   }
  
−
   #buttonleft,
+
   50% {
−
  #buttonright{
+
     opacity: 0;
−
     display: none;
+
    -webkit-transform: scale3d(.3, .3, .3);
 +
    transform: scale3d(.3, .3, .3);
 
   }
 
   }
  
−
   .slidertext,
+
   to {
−
  .sliderimage{
+
     opacity: 0;
−
     width: 46%;
+
−
    margin: auto 2% auto 2%;
+
 
   }
 
   }
 +
}
  
−
  #mask ul{
+
@keyframes zoomOut {
−
    margin-left: 0;
+
   from {
−
   }
+
    opacity: 1;
−
  #content_box1,
+
−
  #content_box2,
+
−
  #content_box3{
+
−
      margin-right: 10px;
+
−
      margin-left: 10px;   
+
 
   }
 
   }
  
−
   .transparent_container{
+
   50% {
−
     overflow: visible;
+
     opacity: 0;
 +
    -webkit-transform: scale3d(.3, .3, .3);
 +
    transform: scale3d(.3, .3, .3);
 
   }
 
   }
  
−
   #first,
+
   to {
−
  #second,
+
     opacity: 0;
−
  #third,
+
−
  #fourth,
+
−
  #fifth,
+
−
  #sixth,
+
−
  #seventh,
+
−
  #eightth {
+
−
     left: 0;
+
−
    font-size: 100%;
+
−
    z-index: 0;
+
 
   }
 
   }
 +
}
  
 +
.zoomOut {
 +
  -webkit-animation-name: zoomOut;
 +
  animation-name: zoomOut;
 
}
 
}
  
−
@media screen and (max-width: 600px){
 
  
−
  .sliderimage img{
+
#DiaCHIP_logo {
−
    display: none;
+
  opacity: 0;
−
  }
+
}
  
−
  .slidertext {
+
@media screen and (max-width: 1199px) {
−
    width: 96%;
+
 
−
    margin: auto 2% auto 2%;
+
.topicboxes{
−
   }
+
  display: block;
 +
  width: 230px;                       /* define size of elements */
 +
  height: 200px;
 +
  margin: 20px;   
 +
  font-size: 100%;
 +
   text-align: center;
 
}
 
}
  
−
</style>
+
.circle-container li {
 +
  display: inline-block;
 +
}
 +
 
 +
.circle-container{
 +
  display: flex;
 +
  flex-wrap: wrap;
 +
  justify-content: space-around;
 +
  margin-bottom: 32px;
 +
}
  
−
<script type="text/javascript">
+
.cool_container{
 +
  display: block;
 +
  padding-top: 0;
 +
  margin: 0;
 +
}
 +
 
 +
.cool_centerimage{
 +
  display: none;
 +
}
  
−
$(document).ready(changesliderclass);
+
#cool_centerimage_small{
−
$(window).resize(changesliderclass);
+
  display: block;
 +
  margin: 20px;
 +
  font-weight: 500;
 +
}
  
−
function changesliderclass() {
+
.circle-container a {
−
   if ($(window).width() < 1000) {
+
   padding: 1px 5px;
−
    console.log('changesliderclass');
+
   font-size: 80%;
−
    $('#first').attr('class', 'content_box');
+
−
    $('#second').attr('class', 'content_box');
+
−
    $('#third').attr('class', 'content_box');
+
−
    $('#fourth').attr('class', 'content_box');
+
−
    $('#fifth').attr('class', 'content_box');
+
−
    $('#sixth').attr('class', 'content_box');
+
−
    $('#seventh').attr('class', 'content_box');
+
−
    $('#eightth').attr('class', 'content_box');
+
−
   } else {
+
−
    console.log('dont changesliderclass');
+
−
    $('#first').removeAttr('class');
+
−
    $('#second').removeAttr('class');
+
−
    $('#third').removeAttr('class');
+
−
    $('#fourth').removeAttr('class');
+
−
    $('#fifth').removeAttr('class');
+
−
    $('#sixth').removeAttr('class');
+
−
    $('#seventh').removeAttr('class');
+
−
    $('#eightth').removeAttr('class');
+
−
  }
+
 
}
 
}
  
−
</script>
+
}
  
 +
</style>
  
 
<div class="todo_box">
 
<div class="todo_box">
−
expand text s.t. it leads to system overview <br>
+
  <p>
−
write appropriate content for slider: should present main subpoints of project in short sentence and link to them
+
    insert the remaining three images, dont forget Home_Intro
 +
  </p>
 
</div>
 
</div>
 +
<div id="cool_centerimage_small">
 +
    <!--<img src="https://static.igem.org/mediawiki/2015/9/91/Freiburg_homepage_Dia_chip.png" width="250px">-->
 +
    <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?
 +
    <br>
 +
    This is the reason why we thought about a universally accessible, cost and time efficient diagnostic device and developed the DiaCHIP!
 +
    </p>
 +
    <div class="intro_button menu-arrow"><a href="https://2015.igem.org/Team:Freiburg/Project/Overview" title="Introduction" style="color:#FFF">Introduction</a></div>
  
−
<div class="header_box">   
 
−
<h1>The DiaCHIP - A Versatile Detection System</h1>
 
 
</div>
 
</div>
  
−
<div class="float_barrier"></div>
 
  
−
<div class="floatcontainer">
+
<div class="cool_container">
  
−
<div id='leftimage'>
+
    <ul class='circle-container'>
−
  <img align="left" alt="DiaCHIP_Sabi" src="https://static.igem.org/mediawiki/2015/a/af/Freiburg_DiaCHIP_Sabi.png" height="1430px">
+
        <li><!--6-->
−
</div>
+
        <div id="box1" class="topicboxes">
 +
          <div class="cool_header"><a href='https://2015.igem.org/Team:Freiburg/Design'>Diagnostics today</a></div>
 +
            <div class="cool_image_blink element1">
 +
              <a class="cool_content cool_text_blink" href='https://2015.igem.org/Team:Freiburg/Design' title="Diagnostics today" style="color:#666">
 +
                Nowadays, medical diagnoses are mainly based on huge amounts of time-consuming and cost intensive serological tests. Read more about the issues we tackled!
 +
              </a>
 +
            </div>
 +
          </div>
 +
        </div>
 +
        </li>
  
−
<div class="transparent_container">
+
        <li><!--7-->
−
<div id="content_box1" class="content_box">
+
        <div id="box2" class="topicboxes">
−
<h2>Project Motivation</h2>
+
          <div class="cool_header"><a href='https://2015.igem.org/Team:Freiburg/Project/Overview'>The DiaCHIP</a></div>
−
<p>
+
          <div class="cool_image_blink element2">
−
    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?  
+
          <div class="cool_content cool_text_blink">
−
</p>
+
            <a href="https://2015.igem.org/Team:Freiburg/Project/Overview" title="The DiaCHIP" style="color:#666">Simultaneous screening for hundreds of diseases within a few hours? <br> Find out about the DiaCHIP's potential to enlighten future diagnostics!
−
</div>
+
            </a>
−
</div>
+
          </div>
 +
          </div>
 +
        </div>
 +
        </li>
  
 +
        <li><!--8-->
 +
        <div id="box3" class="topicboxes">
 +
          <div class="cool_header"><a href='https://2015.igem.org/Team:Freiburg/Project/System'>Our System</a></div>
 +
          <div class="cool_image_blink element3">
 +
          <div class="cool_content cool_text_blink">
 +
              <a href='https://2015.igem.org/Team:Freiburg/Project/System' title="Our system" style="color:#666">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!
 +
              </a>
 +
          </div>
 +
          </div>
 +
        </div>
 +
        </li>
  
−
<div class="transparent_container">
+
        <li><!--1-->
−
<div id="content_box2" class="content_box">
+
            <div id="box4" class="topicboxes">
−
<h2>Detecting Antigen-Antibody Interactions</h2>
+
              <div class="cool_header"><a href='https://2015.igem.org/Team:Freiburg/Results/Own_Device'>Our Device</a></div>
−
<p>
+
              <div class="cool_image_blink element4">
−
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>
+
              <div class="cool_content cool_text_blink">
−
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. 
+
              <a href='https://2015.igem.org/Team:Freiburg/Results/Own_Device' title="Our Device" style="color:#666">We built our simplified and affordable detection device. Check out the step by step instructions!
−
</p>
+
              </a>
−
</div>
+
              </div>
−
</div>
+
            </div>
 +
          </div>
 +
        </li>
  
−
<div class="transparent_container">
+
        <li><!--2-->
−
<div id="content_box3" class="content_box">
+
          <div id="box5" class="topicboxes">
−
<h2>The Concept</h2>
+
            <div class="cool_header"><a href='https://2015.igem.org/Team:Freiburg/Description'>Improved iGEM Backbone</a></div>
−
<p>
+
            <div class="cool_image_blink element5">
−
  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.
+
            <div class="cool_content cool_text_blink">
−
</p>
+
            <a href='https://2015.igem.org/Team:Freiburg/Description' title="pOP-vector" style="color:#666">We provided an improved backbone for protein overexpression meeting all the iGEM standards. <br> See how we expanded the iGEM Registry!
−
</div>
+
            </a>
−
</div>
+
            </div>
 +
            </div>
 +
          </div>
 +
        </li>
 +
 
 +
        <li><!--3-->
 +
          <div id="box6" class="topicboxes">
 +
            <div class="cool_header"><a href='https://2015.igem.org/Team:Freiburg/Practices'>Human Practice</a></div>
 +
            <div class="cool_image_blink element6">
 +
            <div class="cool_content cool_text_blink">
 +
            <a href='https://2015.igem.org/Team:Freiburg/Practices' title="Human Practice" style="color:#666">What do people think about the DiaCHIP and systems based on synthetic biology? <br> Check out the results of our survey and discussions!
 +
            </a>
 +
            </div>
 +
            </div>
 +
          </div>
 +
        </li>
 +
 
 +
        <li><!--4-->
 +
        <div id="box7" class="topicboxes">
 +
          <div class="cool_header"><a href='https://2015.igem.org/Team:Freiburg/Results/Modeling'>Modeling</a></div>
 +
          <div class="cool_image_blink element7">
 +
          <div class="cool_content cool_text_blink">
 +
          <a href='https://2015.igem.org/Team:Freiburg/Results/Modeling' title="Modeling" style="color:#666">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.
 +
          </a>
 +
          </div>
 +
          </div>
 +
        </div>
 +
        </li>
 +
 
 +
        <li><!--5-->
 +
          <div id="box8" class="topicboxes">
 +
            <div class="cool_header"><a href='https://2015.igem.org/Team:Freiburg/Results'>Blood Serum Analysis</a></div>
 +
            <div class="cool_image_blink element8">
 +
            <div class="cool_content cool_text_blink">           
 +
                <a href='https://2015.igem.org/Team:Freiburg/Results' title="Results" style="color:#666">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!
 +
                </a>
 +
            </div>
 +
            </div>
 +
          </div>
 +
        </li>
 +
    </ul>
 +
 
 +
    <div class="cool_centerimage">
 +
        <div id="DiaCHIP_logo">
 +
          <img  src="https://static.igem.org/mediawiki/2015/9/91/Freiburg_homepage_Dia_chip.png" width="250px">
 +
        </div>
 +
        <div id="DiaCHIP_text">
 +
          <p style="margin-bottom:4%">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?
 +
          <br>
 +
          This is the reason why we thought about a universally accessible, cost and time efficient diagnostic device and developed the DiaCHIP!
 +
          </p>
 +
          <div class="intro_button menu-arrow"><a href="https://2015.igem.org/Team:Freiburg/Project/Overview" title="Introduction" style="color:#FFF">Introduction</a></div>
 +
        </div>
 +
    </div>
  
 
</div>
 
</div>
  
−
<div class="float_barrier"></div>
 
  
  
  
−
<!---------------BEGIN SLIDER------------------>
+
<div class="content_box">
−
<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>The DiaCHIP - System Overview</h1>
 
−
                <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>
 
−
                <p style="margin-top:30px">
 
−
              <div class="intro_button menu-arrow">         
 
−
                <a href="https://2015.igem.org/Team:Freiburg/Project/System" title="System Overview">Step by Step Overview</a>
 
−
              </div>
 
−
                </p>
 
  
−
              </div>
+
<h1 class="sectionedit1">DiaCHIP - Enlightening Diagnostics</h1>
−
              </div>
+
<div class="level1">
−
            </li>
+
<p>
 +
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>
 +
</div>
  
−
            <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>(2)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 term for the broad public according to a survey initiated by the Leopoldina (National academy of science), we received a lot of positive feedback. </p>
 
−
              </div>
 
−
              <div class="slidertext indent">
 
−
                <p> Want to read <a href="https://2015.igem.org/Team:Freiburg/Practices">more</a>?</p>
 
−
              </div>
 
−
              </div>
 
−
            </li>
 
−
            <li id="third" class="thirdanimation">
 
−
              <div class="artboard">
 
−
              <div class="sliderimage">
 
−
                <img src="https://static.igem.org/mediawiki/2015/1/14/Freiburg_Slide-Modelling_scaled.png" width="350px">
 
−
              </div>
 
−
              <div class="slidertext">
 
−
                <h1>(3)Modeling cell-free 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 on the protein array 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>(4)Measuring our blood</h1>
 
−
                <p>One of the most promising results was obtained from the detection of anti-tetanus antibodies in human blood serum. The DiaCHIP analysis made it possible for us to distinguish serum samples from a team member before and after vaccination. Samples taken two weeks after vaccination produced higher signals, compared to those 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>(5)DNA Engineering</h1>
 
−
                <p>Genetic fusion of different antigens and tags is a really basic requirement of our project. To enable many people to work on our DNA constructs in parallel we designed a cloning strategy easy to follow and additionally easy to expand for further needs.
 
−
                                <br>
 
−
Read more about how we combined different cloning methods to reduce our efforts in <a href="https://2015.igem.org/Team:Freiburg/Methods/Cloning" class="wikilink1">DNA Engineering.</a>
 
−
                                </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>(6)Protein purification</h1>
 
−
                <p>Protein expression in the DiaCHIP is mediated by cell-free expression. As this is an advanced method dependent on the optimization of many parameters, we got back to conventional protein purification in <i>E. coli</i> for being able to compare the results of both techniques. <br>
 
−
<a class="wikilink1" href="https://2015.igem.org/Team:Freiburg/Project/Protein_Purification">Read more</a> about the overexpression and purification of several antigenic peptides. 
 
−
</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>(7)Surface chemistry</h1>
 
−
                <p>The production of a protein microarray in the DiaCHIP is based on specific immobilization of antigenic peptides on a glass slide. Therefore, we optimized a protocol for a specific surface chemistry until the proportion of unspecific binding of non-target proteins was reduced to a minimum.<br>
 
−
<a class="wikilink1" href="https://2015.igem.org/Team:Freiburg/Project/Surface_Chemistry">Read more</a> about the different systems we tested on our way to high specificity.
 
−
</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>(8)Optical detection</h1>
 
−
                <p>One disadvantage of currently available diagnostic test 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. <br>
 
−
<a class=”wikilink1” href=”https://2015.igem.org/Team:Freiburg/Project/iRIf>Read more</a> about this innovative tool and the physics behind it.
 
−
</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 19:32, 17 September 2015

""

insert the remaining three images, dont forget Home_Intro

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!

Introduction

    • 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!

    Introduction

    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.