Difference between revisions of "Team:Freiburg/Home"

Line 144: Line 144:
 
     -moz-box-shadow: 1px 1px 10px #888;
 
     -moz-box-shadow: 1px 1px 10px #888;
 
     border-radius: 15px;
 
     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;
 
}
 
}
  
Line 160: Line 175:
 
     width: 40%;
 
     width: 40%;
 
     height: 250px;
 
     height: 250px;
−
     top: -410px;
+
     top: -380px;
 
     text-align: center;
 
     text-align: center;
 
     left: 1%;
 
     left: 1%;
Line 168: Line 183:
  
  
−
/* =============== BEGIN: Circle of Elements - Hiding Animation ====================  
+
/* =============== BEGIN: Circle of Elements - Hiding Animation ==================== */
 
.cool_image_blink {
 
.cool_image_blink {
−
        /*width: 100%;*/
+
/*box-shadow:  
−
box-shadow:  
+
 
inset 0 0 0 0 rgba(200,95,66, 0.4),
 
inset 0 0 0 0 rgba(200,95,66, 0.4),
 
inset 0 0 0 16px rgba(255,255,255,0.6),
 
inset 0 0 0 16px rgba(255,255,255,0.6),
−
0 1px 2px rgba(0,0,0,0.1);
+
0 1px 2px rgba(0,0,0,0.1);*/
 +
        box-shadow: 1px 1px 2px 2px #000;
 
 
 
-webkit-transition: all 0.4s ease-in-out;
 
-webkit-transition: all 0.4s ease-in-out;
Line 181: Line 196:
 
-ms-transition: all 0.4s ease-in-out;
 
-ms-transition: all 0.4s ease-in-out;
 
transition: all 0.4s ease-in-out;
 
transition: all 0.4s ease-in-out;
−
         border-radius: 20%;
+
         border-radius: 15px;
−
}
+
−
 
+
−
.cool_text_blink {
+
−
/*width: 100%;*/
+
−
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; /*for a smooth font */
+
 
}
 
}
  
Line 210: Line 206:
 
}
 
}
  
−
.cool_image_blink:hover .cool_text_blink {
+
.cool_image_blink:hover .cool_content {
 
opacity: 1;
 
opacity: 1;
 
 
Line 219: Line 215:
 
transform: scale(1);
 
transform: scale(1);
 
}
 
}
−
/*
+
 
 
.element1 {
 
.element1 {
 
     background-image: url("https://static.igem.org/mediawiki/2015/b/b7/Freiburg_Own_Device_Foto.jpg");
 
     background-image: url("https://static.igem.org/mediawiki/2015/b/b7/Freiburg_Own_Device_Foto.jpg");
−
     background-size: 250px;
+
     background-size: 260px;
 +
    background-position: center;
 
}
 
}
  
 
.element2 {
 
.element2 {
−
     background-image: url("");
+
     background-image: url("https://static.igem.org/mediawiki/2015/4/49/Freiburg_2015_pOP.jpg");
 +
    background-size: 260px;
 +
    background-position: center;
 
}
 
}
  
 
.element3 {
 
.element3 {
−
     background-image: url("");
+
     background-image: url("https://static.igem.org/mediawiki/2015/1/1f/Freiburg_project-img_0301.jpg");
 +
    background-size: 260px;
 +
    background-position: center;
 
}
 
}
  
 
.element4 {
 
.element4 {
−
     background-image: url("");
+
     background-image: url("https://static.igem.org/mediawiki/2015/2/29/Freiburg_Modeling_Home.png");
 +
    background-size: 260px;
 +
    background-position: center;
 
}
 
}
  
 
.element5 {
 
.element5 {
−
     background-image: url("");
+
     background-image: url("https://static.igem.org/mediawiki/2015/7/71/Freiburg_tetanus_home.png");
 +
    background-size: 260px;
 +
    background-position: center;
 
}
 
}
  
 
.element6 {
 
.element6 {
 
     background-image: url("");
 
     background-image: url("");
 +
    background-size: 260px;
 +
    background-position: center;
 
}
 
}
  
 
.element7 {
 
.element7 {
−
     background-image: url("");
+
     background-image: url("https://static.igem.org/mediawiki/2015/c/c1/Freiburg_diachip_centcoin.png");
 +
    background-size: 260px;
 +
    background-position: center;
 
}
 
}
  
 
.element8 {
 
.element8 {
−
     background-image: url("");
+
     background-image: url("https://static.igem.org/mediawiki/2015/0/0f/Freiburg_homepage_chip_blood.png");
 +
    background-size: 260px;
 +
    background-position: center;
 
}
 
}
 
/* =============== END: Circle of Elements - Hiding Animation ==================== */
 
/* =============== END: Circle of Elements - Hiding Animation ==================== */
Line 279: Line 290:
 
     <ul class='circle-container'>
 
     <ul class='circle-container'>
 
         <li><!--1-->
 
         <li><!--1-->
 +
            <div class="cool_header"><a href='#'>Own Device</a></div>
 
           <div class="cool_image_blink element1">
 
           <div class="cool_image_blink element1">
−
            <div class="cool_header cool_text_blink"><a href='#'>Own Device</a></div>
 
 
             <div class="cool_content cool_text_blink">Want to use our detection device in your next iGEM project? We built our own simplified and affordable setup. Here you can find a detailed description of how to build and use it.</div>
 
             <div class="cool_content cool_text_blink">Want to use our detection device in your next iGEM project? We built our own simplified and affordable setup. Here you can find a detailed description of how to build and use it.</div>
 
           </div>
 
           </div>
 
         </li>
 
         </li>
 
         <li><!--2-->
 
         <li><!--2-->
−
          <div class="cool_image_blink">
+
 
−
           <div class="cool_header cool_text_blink"><a href='#'>New iGEM Backbone</a></div>
+
           <div class="cool_header"><a href='#'>New iGEM Backbone</a></div>
 +
          <div class="cool_image_blink element2">
 
           <div class="cool_content cool_text_blink">In need for expressing tons of protein? We provided a new backbone for protein overexpression meeting all the iGEM standards. We also expanded the iGEM Registry with our </div>
 
           <div class="cool_content cool_text_blink">In need for expressing tons of protein? We provided a new backbone for protein overexpression meeting all the iGEM standards. We also expanded the iGEM Registry with our </div>
 
           </div>
 
           </div>
Line 292: Line 304:
  
 
         <li><!--3-->
 
         <li><!--3-->
−
          <div class="cool_image_blink">
+
 
−
           <div class="cool_header cool_text_blink"><a href='#'>Human Practice</a></div>
+
           <div class="cool_header"><a href='#'>Human Practice</a></div>
 +
          <div class="cool_image_blink element3">
 
           <div class="cool_content cool_text_blink">What does the public think about the DiaCHIP and systems based on synthetic biology? Would people want to use it? Check out the results of our survey.</div>
 
           <div class="cool_content cool_text_blink">What does the public think about the DiaCHIP and systems based on synthetic biology? Would people want to use it? Check out the results of our survey.</div>
 
           </div>
 
           </div>
Line 299: Line 312:
  
 
         <li><!--4-->
 
         <li><!--4-->
−
          <div class="cool_image_blink">
+
 
−
           <div class="cool_header cool_text_blink"><a href='#'>Modeling</a></div>
+
           <div class="cool_header"><a href='#'>Modeling</a></div>
 +
          <div class="cool_image_blink element4">
 
           <div class="cool_content cool_text_blink">Numerous complex processes take place during cell-free expression. Modeling the generation of proteins as well as their diffusion in our system helped us obtaining better results. Get more information here.</div>
 
           <div class="cool_content cool_text_blink">Numerous complex processes take place during cell-free expression. Modeling the generation of proteins as well as their diffusion in our system helped us obtaining better results. Get more information here.</div>
 
           </div>
 
           </div>
Line 306: Line 320:
  
 
         <li><!--5-->
 
         <li><!--5-->
−
          <div class="cool_image_blink">
+
 
−
             <div class="cool_header cool_text_blink"><a href='#'>Blood Serum Analysis</a></div>
+
             <div class="cool_header"><a href='#'>Blood Serum Analysis</a></div>
 +
          <div class="cool_image_blink element5">
 
             <div class="cool_content cool_text_blink">We obtained great results during summer! Our successful measurements of tetanus antibodies in human serum and GFP antibodies binding to cell-free expressed GFP can be found on our results page.</div>
 
             <div class="cool_content cool_text_blink">We obtained great results during summer! Our successful measurements of tetanus antibodies in human serum and GFP antibodies binding to cell-free expressed GFP can be found on our results page.</div>
 
           </div>
 
           </div>
Line 313: Line 328:
  
 
         <li><!--6-->
 
         <li><!--6-->
−
          <div class="cool_image_blink">
+
 
−
             <div class="cool_header cool_text_blink"><a href='#'>Enlightening Diagnostics</a></div>
+
             <div class="cool_header"><a href='#'>Enlightening Diagnostics</a></div>
 +
          <div class="cool_image_blink element6">
 
             <div class="cool_content cool_text_blink">Modern everyday life is fast...too fast for medical diagnosis relying on huge amounts of time-consuming and costly serological tests.
 
             <div class="cool_content cool_text_blink">Modern everyday life is fast...too fast for medical diagnosis relying on huge amounts of time-consuming and costly serological tests.
 
     This is why we thought about a fast, universally accessible and affordable diagnostic device.</div>
 
     This is why we thought about a fast, universally accessible and affordable diagnostic device.</div>
Line 321: Line 337:
  
 
         <li><!--7-->
 
         <li><!--7-->
−
           <div class="cool_image_blink">
+
            
−
             <div class="cool_header cool_text_blink"><a href='#'>The DiaCHIP</a></div>
+
             <div class="cool_header"><a href='#'>The DiaCHIP</a></div>
−
             <div class="cool_content cool_text_blink">Simultaneously screening for hundreds of diseases within a few hours? See how the DiaCHIP achieves this by the revolutionary combination of cell-free expression with an emerging optical method allowing label-free antibody detection.
+
          <div class="cool_image_blink element7">
−
    </div>
+
             <div class="cool_content cool_text_blink">Simultaneously screening for hundreds of diseases within a few hours? See how the DiaCHIP achieves this by the revolutionary combination of cell-free expression with an emerging optical method allowing label-free antibody detection.</div>
−
           </div>
+
           </div>  
 
         </li>
 
         </li>
  
 
         <li><!--8-->
 
         <li><!--8-->
−
           <div class="cool_image_blink">
+
            
−
             <div class="cool_header cool_text_blink"><a href='#'>Our System</a></div>
+
             <div class="cool_header"><a href='#'>Our System</a></div>
 +
          <div class="cool_image_blink element8">
 
             <div class="cool_content cool_text_blink">Generating a protein array on demand and detecting antigen-antibody interactions in real-time: Find out about our own cell-free expression mix and our specific surface binding system.</div>
 
             <div class="cool_content cool_text_blink">Generating a protein array on demand and detecting antigen-antibody interactions in real-time: Find out about our own cell-free expression mix and our specific surface binding system.</div>
 
           </div>
 
           </div>
Line 336: Line 353:
 
     </ul>
 
     </ul>
  
−
     <div class="cool_centerimage"><img src="https://static.igem.org/mediawiki/2015/9/91/Freiburg_homepage_Dia_chip.png" width="370px">
+
     <div class="cool_centerimage"><img src="https://static.igem.org/mediawiki/2015/9/91/Freiburg_homepage_Dia_chip.png" width="250px">
 
     </div>
 
     </div>
  
 
</div>
 
</div>
  
−
<div class="kommentar">
 
−
<p> Die Texte in den Boxen sind noch ziemlich klein und ziemlich Textwand. Da müssten kürzere, prägnantere Texte mit größerer Schrift und/oder Bild rein. (jb 20150912)</p>
 
−
<p> Texte sind zum Überarbeiten. Bilder müssen auch ausgetauscht werden. Länge von 6-7 Zeilen ist optisch am besten. Unter https://2015.igem.org/Team:Freiburg/Testpage3 gibt es eine Variante mit Bildern. Was gefällt euch besser? (sb 20150912)</p>
 
−
<p> find ich gut soweit, bin gespannt wie es fertig aussieht (NG)
 
−
aber kann amn die bilder noch kleiner machen (datei-größen mäßig? Damit sie auch akzeptabeln schnell laden?
 
−
Aber schick aussehen tuts schonmal (ps)</p>
 
−
</div>
 
  
 
<div class="content_box">
 
<div class="content_box">
  
−
<h1 class="sectionedit1">Abstract</h1>
+
<h1 class="sectionedit1">DiaCHIP - Enlightening Diagnostics</h1>
 
<div class="level1">
 
<div class="level1">
 
<p>
 
<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)which is based on a laser detecting the interference of reflecting light from our chip. Offering simultaneous screening for several diseases, our DiaCHIP has strong potential to improve future 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.  
 
</p>
 
</p>
 
</div>
 
</div>
Line 362: Line 372:
 
</html>
 
</html>
 
{{Freiburg/wiki_content_end}}
 
{{Freiburg/wiki_content_end}}
−
 
−
 
−
 
−
<!----------------------- Old Page -------------------------
 
−
 
−
{{Freiburg/CSS}}
 
−
{{Freiburg/Menubar}}
 
−
 
−
{{Freiburg/wiki_content_start}}
 
−
<html>
 
−
 
−
<style>
 
−
/*========= BEGIN: style for navigation bar ==========*/
 
−
#home {
 
−
    background: url(https://static.igem.org/mediawiki/2015/d/d7/Freiburg_icon_home_active.png) no-repeat;
 
−
}
 
−
 
−
#home a {
 
−
    color: #ecdc18;
 
−
}
 
−
/*========= END: style for navigation bar ==========*/
 
−
 
−
.content_box{
 
−
clear:both;
 
−
}
 
−
.homepage_headline{
 
−
    text-align: center;
 
−
    color: #000000;
 
−
    font: "Roboto";
 
−
  font-weight: 400;
 
−
font-size: 25px;
 
−
}
 
−
 
−
.homepage_text{
 
−
padding-top:20px;
 
−
    color:#000000;
 
−
    font-weight: thin;
 
−
    text-align: center;
 
−
}
 
−
 
−
#what_box, #how_box, #why_box, #video_box{
 
−
    box-sizing:border-box;
 
−
    clear:both;
 
−
    position: relative;
 
−
    width: auto;
 
−
}
 
−
 
−
.floatbox{
 
−
    margin-bottom: 3em;
 
−
}
 
−
 
−
/* usefull information on centering things: www.w3.org/Style/Examples/007/center.en.html*/
 
−
 
−
 
−
#what_left, #how_left, #why_left{
 
−
 
 
−
}
 
−
 
−
/* WHAT */
 
−
 
−
#what_box{
 
−
 
−
}
 
−
#what_left{
 
−
 
 
−
}
 
−
#what_diachip_logo img{
 
−
    display: block;
 
−
    margin: 0 auto;
 
−
    width: 80%;
 
−
    max-width: 230px; /* avoids overscaling*/
 
−
}
 
−
#what_right{}
 
−
#what_box{}
 
−
#what_text{}
 
−
 
−
/* HOW */
 
−
 
−
#how_box {
 
−
 
−
}
 
−
 
−
#how_left{
 
−
}
 
−
#how_right{
 
−
}
 
−
 
−
#how_image{}
 
−
#how_image img{
 
−
    display: block;
 
−
    margin: 0 auto;
 
−
    width: 80%;
 
−
    max-width: 470px; /* avoids overscaling*/
 
−
}
 
−
 
−
 
−
/* WHY */
 
−
 
−
#why_box{
 
−
}
 
−
#why_left{}
 
−
 
−
#why_right {
 
−
 
−
}
 
−
 
−
#why_image img{ 
 
−
    display: block;
 
−
    margin: 0 auto;
 
−
    width: 80%;
 
−
    max-width: 339px; /* avoids overscaling*/
 
−
}
 
−
 
−
/* VIDEO */
 
−
 
−
#video_box{
 
−
}
 
−
 
−
#video_left{
 
−
    padding: 6% 0;
 
−
}
 
−
#video_right{
 
−
}
 
−
#video{
 
−
    display: block;
 
−
    margin: 0 auto;
 
−
    width: 80%;
 
−
    height: 230px;
 
−
    background-color: black;
 
−
}
 
−
</style>
 
−
 
−
<div class="content_box">
 
−
 
−
<div id="what_box" class="floatbox">
 
−
    <div id="what_left" class="floatbox left">
 
−
        <div class="homepage_headline">What are we doing?</div>
 
−
        <div id="what_text" class="homepage_text">
 
−
            We are building a system that detects many different diseases simultaneously with just a few drops of blood - we’re calling this system the <strong>DiaCHIP</strong>. Our method ist cheap, fast and label-free! <a href="https://2015.igem.org/Team:Freiburg/Project/Overview"> Tell me more!</a>
 
−
        </div>
 
−
    </div>
 
−
 
−
    <div id="what_right" class="floatbox right">
 
−
        <div id="what_diachip_logo">
 
−
            <img src="https://static.igem.org/mediawiki/2015/9/91/Freiburg_homepage_Dia_chip.png"></img>
 
−
        </div>
 
−
    </div>
 
−
 
−
</div>
 
−
 
−
 
−
 
−
<div id="how_box" class="floatbox">
 
−
    <div id="how_left" class="floatbox left">
 
−
        <div id="how_image">
 
−
            <img src="https://static.igem.org/mediawiki/2015/0/0f/Freiburg_homepage_chip_blood.png"></img>
 
−
        </div>
 
−
    </div>
 
−
 
−
    <div id="how_right" class="floatbox right">
 
−
        <div class="homepage_headline">How are we doing it?</div>
 
−
        <div id="how_text" class="homepage_text">
 
−
            We produce protein arrays from a DNA-microarray template using cell-free expression. The DNA codes for antigens from many different pathogens. We then run blood serum over the protein array and measure whether antibodies bind to the antigens. We can observe that with a label-free optical measurement called iRIf. <a href="https://2015.igem.org/Team:Freiburg/Project/Overview"> Tell me more!</a>
 
−
        </div>
 
−
    </div>
 
−
</div>
 
−
 
−
 
−
 
−
<div id="why_box" class="floatbox">
 
−
    <div id="why_left" class="floatbox left">
 
−
        <div class="homepage_headline">Why are we doing it?</div>
 
−
 
−
          <div id="why_text" class="homepage_text">
 
−
            Protein arrays are a powerful way to screen for diseases, but they are very cumbersome to produce, which makes them quite expensive. More important, they denature quickly and have to be handled very carefully. Our DiaCHIP produces fresh protein arrays right before every measurement - and our DNA array allows us to xerox as many protein arrays as we want! <a href="https://2015.igem.org/Team:Freiburg/Project/Overview">Tell me more!</a>
 
−
          </div>
 
−
    </div>
 
−
 
−
 
−
    <div id="why_right" class="floatbox right">
 
−
          <div id="why_image">
 
−
            <img src="https://static.igem.org/mediawiki/2015/b/b6/Freiburg_homepage_chip_denature.png"></img>
 
−
          </div>
 
−
    </div>
 
−
 
−
</div>
 
−
 
−
 
−
 
−
 
−
<div id="video_box" class="floatbox">
 
−
      <div id="video_left" class="floatbox left">
 
−
          <div class="homepage_headline">Want to see how it works?
 
−
          </div>
 
−
          <div id="video_text" class="homepage_text">
 
−
              Take a look at this short video clip, which will give you a general overview of what our project is about.
 
−
          </div>
 
−
      </div>
 
−
      <div id="video_right" class="floatbox right">
 
−
            <div id="video">
 
−
            </div>
 
−
      </div>
 
−
</div>
 
−
 
−
</div> <!--- from content_box --->
 

Revision as of 09:48, 13 September 2015

""

  • Own Device
    Want to use our detection device in your next iGEM project? We built our own simplified and affordable setup. Here you can find a detailed description of how to build and use it.
  • New iGEM Backbone
    In need for expressing tons of protein? We provided a new backbone for protein overexpression meeting all the iGEM standards. We also expanded the iGEM Registry with our
  • Human Practice
    What does the public think about the DiaCHIP and systems based on synthetic biology? Would people want to use it? Check out the results of our survey.
  • Modeling
    Numerous complex processes take place during cell-free expression. Modeling the generation of proteins as well as their diffusion in our system helped us obtaining better results. Get more information here.
  • Blood Serum Analysis
    We obtained great results during summer! Our successful measurements of tetanus antibodies in human serum and GFP antibodies binding to cell-free expressed GFP can be found on our results page.
  • Enlightening Diagnostics
    Modern everyday life is fast...too fast for medical diagnosis relying on huge amounts of time-consuming and costly serological tests. This is why we thought about a fast, universally accessible and affordable diagnostic device.
  • The DiaCHIP
    Simultaneously screening for hundreds of diseases within a few hours? See how the DiaCHIP achieves this by the revolutionary combination of cell-free expression with an emerging optical method allowing label-free antibody detection.
  • Our System
    Generating a protein array on demand and detecting antigen-antibody interactions in real-time: Find out about our own cell-free expression mix and our specific surface binding system.

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.