Difference between revisions of "Team:Freiburg/testpage"

Line 1: Line 1:
 
{{Freiburg/CSS}}
 
{{Freiburg/CSS}}
−
{{Freiburg/Menubar}}
+
<html>
 +
<!-- /////////////////////////////MENUBAR////////////////////////////////////////// -->
 +
 
 +
<!--doctype html-->
 +
<html>
 +
    <head>
 +
        <title>""</title>
 +
        <meta charset="utf-8">
 +
 
 +
        <style>
 +
/* ============= BEGIN: Stylesheet for navigation menu ============= */
 +
 
 +
/*Stylesheet for Navigation Bar*/
 +
 
 +
/* Begin General Settings */
 +
body {
 +
    margin: 0px;
 +
}
 +
 
 +
#header {
 +
    height: 113px;
 +
    background-color: #FCFCFC;
 +
    z-index: 600;
 +
}
 +
/* End General Settings */
 +
 
 +
 
 +
#naviconwrapper {
 +
    margin: 0px ;    /*auto centers wrapper*/
 +
    height: 60px;
 +
    width: 100%;
 +
    min-width: 900px;
 +
    padding-top: 16px;
 +
    z-index: -100;
 +
}
 +
 
 +
#naviconbar {
 +
    margin: 0px auto;
 +
    padding: 0px;
 +
    width: 100%;
 +
    min-width: 900px;
 +
    background-color: #0051A2;
 +
    border-top-color: #FFF;
 +
    border-top-width: 1px;
 +
    border-top-style: inset;
 +
    border-bottom-color: #FFF;
 +
    border-bottom-width: 1px;
 +
    border-bottom-style: outset;
 +
    z-index: -60;
 +
}
 +
   
 +
 
 +
/*Begin Settings Main Menu Icons*/
 +
#navicons {
 +
    margin: 0px auto;
 +
    padding: 0px;
 +
    width: 720px;
 +
    height: 60px;
 +
    background-color: #0051A2;
 +
    z-index: -20;    /*defines color behind icons */
 +
}
 +
 
 +
#navicons ul {
 +
    margin: 0px auto;
 +
    padding: 0px;
 +
    width: 720px;
 +
    position: relative;  /*makes chip go directly behind home from left corner*/
 +
}
 +
 
 +
#navicons ul li {
 +
    margin: 0px;
 +
    padding: 0px;
 +
    list-style: none;
 +
    /*display: block;*/
 +
    float: left;
 +
    position: relative;
 +
    line-height: 106px;
 +
    font-family: sans-serif;
 +
    font-size: 12px;
 +
    background-color: #FFF;
 +
    /*border: 1px solid #5781BD;*/
 +
    z-index: 100;
 +
}
 +
 
 +
#navicons ul li a {
 +
    height: 60px;
 +
    width: 120px;
 +
    display: block;
 +
    text-decoration: none;
 +
    /*color: #FFF;*/
 +
    text-align: center;
 +
    text-transform: uppercase;
 +
    z-index: 50;
 +
}
 +
 
 +
#navicons ul a:hover {
 +
}   
 +
/*End Settings Main Menu Icons*/
 +
 
 +
 
 +
/* classes for icons */
 +
#home {
 +
    background: url(https://static.igem.org/mediawiki/2015/8/81/Freiburg_icon_home.png) no-repeat;
 +
    height: 60px;;
 +
    background-position: center;
 +
}
 +
 
 +
#home a {
 +
    color: #FFF;
 +
}
 +
 
 +
#project {
 +
    background: url(https://static.igem.org/mediawiki/2015/6/67/Freiburg_icon_project.png) no-repeat;
 +
    height: 60px;
 +
    background-position: center;
 +
}
 +
 
 +
#project a {
 +
    color: #FFF;
 +
}
 +
 
 +
#team {
 +
    background: url(https://static.igem.org/mediawiki/2015/3/38/Freiburg_icon_team.png) no-repeat;
 +
    height: 60px;
 +
    background-position: center;
 +
}
 +
 
 +
#team a {
 +
    color: #FFF;
 +
}
 +
 
 +
#results {
 +
    background: url(https://static.igem.org/mediawiki/2015/2/2d/Freiburg_icon_results.png) no-repeat;
 +
    height: 60px;
 +
    background-position: center;
 +
}
 +
 
 +
#results a {
 +
    color: #FFF;
 +
}
 +
 
 +
#policy {
 +
    background: url(https://static.igem.org/mediawiki/2015/3/3c/Freiburg_icon_policy.png) no-repeat;
 +
    height: 60px;
 +
    background-position: center;
 +
}
 +
 
 +
#policy a {
 +
    color: #FFF;
 +
}
 +
 
 +
#notebook {
 +
    background: url(https://static.igem.org/mediawiki/2015/e/e6/Freiburg_icon_notebook.png) no-repeat;
 +
    height: 60px;
 +
    background-position: center;
 +
}
 +
 
 +
#notebook a {
 +
    color: #FFF;
 +
}
 +
/* End classes for icons */
 +
 
 +
 
 +
/*Begin running chip */
 +
/*Begin Chip Design*/
 +
#runningchip {
 +
    position: absolute;
 +
    width: 90px;
 +
    height: 60px;
 +
    top: -15px;
 +
    left: 2.1%;
 +
    -webkit-transition: all 300ms ease-out;
 +
    -moz-transition: all 300ms ease-out;
 +
    transition: all 300ms ease-out;
 +
    z-index: 0;
 +
}
 +
 
 +
#runningchip-back{ 
 +
  width:100%;
 +
  height: 85px;
 +
  position: absolute;
 +
  background:#C5162F;
 +
  border-radius:5px;
 +
  border-bottom: 2px solid rgba(0, 0, 0, 0.09);
 +
  border-top: 2px solid rgba(255,255,255,0.1);
 +
  border-color: #0051A2;
 +
}   
 +
 
 +
#top-arrow{  /* arrow like element above slider  */
 +
  position:absolute;
 +
  overflow:hidden;
 +
    color: #C5162F;
 +
  width:100%;
 +
  height:14px;
 +
  top: 2px;
 +
  left:0;
 +
  z-index:2;
 +
    background-color: #C5162F;
 +
    border-top-right-radius: 5px;
 +
    border-top-left-radius: 5px;
 +
}
 +
 
 +
#top-arrow:before{
 +
  content:"";
 +
  position:absolute;
 +
  width:80%;
 +
  height:10px;
 +
  top:-12px;
 +
  left:10%;
 +
  border-radius:20%;
 +
  box-shadow:0 0 10px black;
 +
}
 +
 
 +
#top-arrow:after{    /* little blue arrow */
 +
  content:"";
 +
  position:absolute;
 +
  width:0;
 +
  height:0px;
 +
  top:0px;
 +
  border-top:8px solid #C5162F;
 +
  border-left:6px solid transparent;
 +
  border-right:6px solid transparent;
 +
  margin-left:-6px;
 +
  left:50%;
 +
}
 +
 
 +
#bottom-arrow{        /* arrow like element beneath slider */
 +
  position:absolute;
 +
  overflow:hidden;
 +
  width:100%;
 +
  height:15px;
 +
  bottom: -30px;
 +
  left:0;
 +
  z-index:2;
 +
    background-color: #C5162F;
 +
    border-bottom-right-radius: 5px;
 +
    border-bottom-left-radius: 5px;
 +
}
 +
 
 +
#bottom-arrow:before{
 +
  content:"";
 +
  position:absolute;
 +
  width:80%;
 +
  height:10px;
 +
  bottom:-12px;
 +
  left:10%;
 +
  border-radius:20%;
 +
  box-shadow:0 0 10px black;
 +
}
 +
 
 +
#bottom-arrow:after{
 +
  content:"";
 +
  position:absolute;
 +
  width:0;
 +
  height:0;
 +
  bottom:0;
 +
  border-bottom:12px solid #C5162F;
 +
  border-left:8px solid transparent;
 +
  border-right:8px solid transparent;
 +
  margin-left:-8px;
 +
  left:50%;
 +
}
 +
/*End Chip Design*/
 +
 
 +
 
 +
/*Begin Chip Movement*/
 +
#home:hover ~ #runningchip {
 +
    left: 2.1%;
 +
}
 +
 
 +
#project:hover ~ #runningchip {
 +
    left: 18.6%;
 +
}
 +
 
 +
#team:hover ~ #runningchip {
 +
    left: 35.5%;
 +
}
 +
 
 +
#results:hover ~ #runningchip {
 +
    left: 52%;
 +
}
 +
 
 +
#policy:hover ~ #runningchip {
 +
    left: 68.9%;
 +
}
 +
 
 +
#notebook:hover ~ #runningchip {
 +
    left: 85.5%;
 +
}
 +
/*End Chip Movment*/
 +
/*End running chip*/
 +
 
 +
 
 +
/*Begin Settings Submenu Level 1*/
 +
#navtextwrapper {                /*define background box*/
 +
    margin: 0 auto;
 +
    padding: 0px;
 +
    top: -2px;
 +
    height: 24px;
 +
    width: 920px;
 +
    position: relative;
 +
    /*border: 2px solid #000;*/
 +
}
 +
 
 +
#navtext {
 +
    text-align: center;
 +
    font-family: Roboto,sans-serif;
 +
    font-size: 16px;
 +
    z-index: 600;
 +
}
 +
 
 +
#navtext ul {
 +
    margin: 0px auto;
 +
    top: -8px;
 +
    padding: 0px;
 +
    position: absolute;
 +
    z-index: 600;
 +
}
 +
 
 +
#navtext li {
 +
    margin: 0px auto;        /*centers text*/
 +
    list-style: none;
 +
    display: block;        /*makes items go horizontal and centers them*/
 +
    /*float: left;*/                /*makes items go horizontal*/
 +
    position: relative;
 +
    z-index: 600;
 +
}   
 +
 
 +
#navtext ul li a {
 +
    margin-top: 2px;
 +
    height: 24px;
 +
    padding-left: 10px;
 +
    padding-right: 10px;
 +
    text-decoration: none;
 +
    color: #FFF;
 +
    display: block;
 +
    text-align: center;
 +
    border-radius: 8px;
 +
    z-index: 600;
 +
}
 +
 
 +
#navtext ul li:hover > a {
 +
  /* background-color: #6696c7;  /*makes a link stay in a certain color when hovering over it and then looking throught its subitems */
 +
    color: #ecdc18;
 +
}
 +
 
 +
#project-sub {
 +
    display: none;
 +
    left: 22.6%;
 +
}
 +
 
 +
#team-sub {
 +
    /*background-color: #ac34fe;*/
 +
    display: none;
 +
    left: 35.2%;
 +
}
 +
 
 +
#results-sub{
 +
    display: none;
 +
    left: 50.1%;
 +
}
 +
 
 +
#policy-sub{
 +
    display: none;
 +
    left: 62.8%;
 +
}
 +
 
 +
#notebook-sub{
 +
    display: none;
 +
    left: 77.6%;
 +
}
 +
 
 +
.chip_gap {
 +
    content: none;
 +
}
 +
 
 +
.navsub1 {
 +
    background-color: #0051A2;
 +
}
 +
   
 +
/*End Settings Submenu Level 1*/
 +
 
 +
/* ============= BEGIN: Stylesheet for navigation menu ============= */ 
 +
    </style>
 +
 
 +
 
 +
<!------------- BEGIN: jQuery ------------->
 +
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 +
        <script type="text/javascript">
 +
            $(function() {
 +
                $("document").ready(function(){
 +
// make submenus appear //
 +
                    $("#home").hover(function(){
 +
                        $("#team-sub") .hide();
 +
                        $("#project-sub") .hide();
 +
                        $("#results-sub") .hide();
 +
                        $("#policy-sub") .hide();
 +
                        $("#notebook-sub") .hide();
 +
                    });
 +
                    $("#project").hover(function(){
 +
                        $("#project-sub") .show();
 +
                        $("#team-sub") .hide();
 +
                        $("#results-sub") .hide();
 +
                        $("#policy-sub") .hide();
 +
                        $("#notebook-sub") .hide();
 +
                    },
 +
                                            function(){
 +
                        $("#project-sub") .hide();
 +
                    });
 +
                   
 +
                    $("#team").hover(function(){
 +
                        $("#team-sub") .show();
 +
                        $("#project-sub") .hide();
 +
                        $("#results-sub") .hide();
 +
                        $("#policy-sub") .hide();
 +
                        $("#notebook-sub") .hide();
 +
                    },
 +
                                            function(){
 +
                        $("#team-sub") .hide();
 +
                    });
 +
                   
 +
                    $("#results").hover(function(){
 +
                        $("#results-sub") .show();
 +
                        $("#project-sub") .hide();
 +
                        $("#team-sub") .hide();
 +
                        $("#policy-sub") .hide();
 +
                        $("#notebook-sub") .hide();
 +
                    });
 +
                   
 +
                    $("#policy").hover(function(){
 +
                        $("#policy-sub") .show();
 +
                        $("#project-sub") .hide();
 +
                        $("#team-sub") .hide();
 +
                        $("#results-sub") .hide();
 +
                        $("#notebook-sub") .hide();
 +
                    },
 +
                                            function(){
 +
                        $("#policy-sub") .hide();
 +
                    });
 +
                   
 +
                    $("#notebook").hover(function(){
 +
                        $("#notebook-sub") .show();
 +
                        $("#project-sub") .hide();
 +
                        $("#team-sub") .hide();
 +
                        $("#results-sub") .hide();
 +
                        $("#policy-sub") .hide();
 +
                    },
 +
                                            function(){
 +
                        $("#notebook-sub") .hide();
 +
                    });
 +
// make chip stay over main menu point when its submenu appears and makes the submenu stay visible//
 +
                    $("#project-sub") .hover(function(){
 +
                        $("#runningchip") .css('left','18.6%');
 +
                        $("#project-sub") .show();
 +
                    },
 +
                                            function(){
 +
                        $("#runningchip") .css('left','');
 +
                        $("#project-sub") .hide();
 +
                    });
 +
                    $("#team-sub") .hover(function(){
 +
                        $("#runningchip") .css('left','35.5%');
 +
                        $("#team-sub") .show();
 +
                    },
 +
                                            function(){
 +
                        $("#runningchip") .css('left','');
 +
                        $("#team-sub") .hide();
 +
                    });
 +
                    $("#results-sub") .hover(function(){
 +
                        $("#runningchip") .css('left','52%');
 +
                        $("#results-sub") .show();
 +
                    },
 +
                                            function(){
 +
                        $("#runningchip") .css('left','');
 +
                        $("#results-sub") .hide();
 +
                    });
 +
                    $("#policy-sub") .hover(function(){
 +
                        $("#runningchip") .css('left','68.9%');
 +
                        $("#policy-sub") .show();
 +
                    },
 +
                                            function(){
 +
                        $("#runningchip") .css('left','');
 +
                        $("#policy-sub") .hide();
 +
                    });
 +
                    $("#notebook-sub") .hover(function(){
 +
                        $("#runningchip") .css('left','85.5%');
 +
                        $("#notebook-sub") .show();
 +
                    },
 +
                                            function(){
 +
                        $("#runningchip") .css('left','');
 +
                        $("#notebook-sub") .hide();
 +
                    });
 +
                });
 +
            })
 +
        </script>
 +
 
 +
<!------------- END: jQuery ------------->
 +
 
 +
    </head>
 +
 
 +
 
 +
<!------------- BEGIN: Body content =------------->
 +
    <body>
 +
      <div id="header">
 +
<!-- Begin navigation menu icons -->
 +
            <div id="naviconwrapper">  <!-- hier könnte man noch ein Logo in einer Seitenecke platzieren -->
 +
                <div id="naviconbar">
 +
                <div id="navicons"> <!-- only icons -->
 +
                    <ul>
 +
                        <li id="home" ><a href="https://2015.igem.org/Team:Freiburg/Home">Home</a>
 +
                        </li>
 +
                        <li id="project"><a href="https://2015.igem.org/Team:Freiburg/Project/Overview">Project</a>
 +
                        </li>
 +
                        <li id="team"><a href="https://2015.igem.org/Team:Freiburg/Team">Team</a>
 +
                        </li>
 +
                        <li id="results"><a href="https://2015.igem.org/Team:Freiburg/Results">Results</a>
 +
                        </li>
 +
                        <li id="policy" style="font-size:11px"><a href="https://2015.igem.org/Team:Freiburg/Practices">Human Practice</a>
 +
                        </li>
 +
                        <li id="notebook"><a href="https://2015.igem.org/Team:Freiburg/Notebook">Notebook</a>
 +
                        </li>
 +
                    <div id="runningchip">
 +
                                <div id="top-arrow"></div>
 +
                                <div id="runningchip-back"></div>
 +
                                <div id="bottom-arrow"></div>
 +
                    </div>
 +
                    </ul>
 +
                </div>
 +
                </div>
 +
            </div>
 +
<!-- End navigation menu icons -->
 +
 
 +
           
 +
<!-- Begin navigation submenu -->
 +
            <div id="navtextwrapper"> <!-- only names of elements -->
 +
                <div id="navtext">
 +
                    <ul id="project-sub">
 +
                        <li class="chip_gap"><a></a></li>
 +
                        <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Project/Overview">Overview</a></li>
 +
                        <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Diagnostics">Diagnostics today</a></li>
 +
                        <li><a class="navsub1" href="#">Techniques</a></li>
 +
                        <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Project/Diseases">Diseases</a></li>
 +
                        <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Project/Future_Directions">Future</a></li>
 +
                    </ul>
 +
                    <ul id="team-sub">
 +
                        <li class="chip_gap"><a></a></li>
 +
                        <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Team">Members</a></li>
 +
                        <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Attributions">Acknowledgements</a></li>
 +
                        <li><a class="navsub1" href="#">Partners</a></li>
 +
                        <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Collaborations">Collaborations</a></li>
 +
                    </ul>
 +
                    <ul id="results-sub">
 +
                        <li class="chip_gap"><a></a></li>
 +
                        <li><a class="navsub1" href="#">The DiaCHIP</a></li>
 +
                        <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Modeling">Modeling</a></li>
 +
                        <li><a class="navsub1" href="#">Own Device</a></li>
 +
                        <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Parts">Biobricks</a></li>
 +
                        <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/InterLab_Study">Interlab Study</a></li>
 +
                    </ul>
 +
                    <ul id="policy-sub">
 +
                        <li class="chip_gap"><a></a></li>
 +
                        <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/PaP/ScienceFair">Science Fair</a></li>
 +
                        <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/PaP/TheatreProject">Theater Project</a></li>
 +
                        <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Practices/Survey">Public Opinion</a></li>
 +
                        <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/PaP/LAS">College</a></li>
 +
                        <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Practices/Ethics">Ethics</a></li>
 +
                    </ul>
 +
                    <ul id="notebook-sub">
 +
                        <li class="chip_gap"><a></a></li>
 +
                        <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Labjournals">Labjournal</a>
 +
                        </li>
 +
                        <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Protocols">Protocols</a></li>
 +
                        <!--<li><a class="navsub1" href="">Materials</a></li>-->
 +
                        <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Safety">Safety</a></li>
 +
                        <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Wikimigration">Wiki-Tricks</a></li>
 +
                            </ul>
 +
                        </li>
 +
                    </ul>
 +
                </div>
 +
            </div> 
 +
<!-- End of navigation submenu -->
 +
        </div>
 +
 
 +
<!-- End of header -->   
 +
 
 +
    </body>
 +
</html>
 +
 
 +
 
 +
 
 +
<!-- //////////////////////////////MENUBAR///////////////////////////////////////// -->
 +
 
 +
</html>
  
 
{{Freiburg/wiki_content_start}}
 
{{Freiburg/wiki_content_start}}

Revision as of 15:07, 8 September 2015

""



</html>

  • Building our own device

    The original measuring device we were using in collaboration with AG Roth is a really expensive machine based on rather simple physics. Therefore, we decided to build our own device in a cost-efficient variant. We performed reliable measurements with it and provide a building plan making label-free proteinarray analysis available for every future iGEM team.

    Want to read more?

  • Communicating science

    Fast and reliable disease diagnostic is a problem of public interest. For this reason we wanted to know what people think about the idea of the DiaCHIP. Although the DiaCHIP is concerned to synthetic biology, which makes people feel rather uncomfortable according to a survey by Leopoldina (national academy of science), we obtained a lot of positive feedback.

    Want to read more?

  • Modeling cellfree expression

    In order to optimize the DiaCHIP for future applications, we modelled the process of cell-free expression and diffusion over time. Making use of xxx parameters and xxx ordinary differential equations, we computed the size of the resulting antigen spots and identified the factors limiting cell-free expression in the DiaCHIP.

    Want to read more?

  • Measuring our own blood

    One of the most notable results we obtained was the detection of anti-tetanus antibodies in human blood serum. Using the DiaCHIP, we were able to distinguish serum samples of a person taken before vaccination and three weeks later. As expected, antibody binding events were shown after vaccination, whereas there was no signal before.

    Want to read more?

Project overview: The DiaCHIP

light bulb sketch

The DiaCHIP is an innovative tool to simultaneously differentially detect antibodies present in blood sera that correspond to infectious diseases. It may greatly simplify broad band screenings, detection of autoimmune diseases and the determination of vaccination status. Essential for our project idea is the combination of on-demand protein synthesis directly in the diagnostic device, that is using a novel and label-free detection system, so simple that it can easily be rebuild and utilized by future iGEM teams.

Preparing the DiaCHIP

As the DiaCHIP relies on antibody-antigen interactions, the antigens first have to be synthesized and immobilized inside the device. Given that the whole device is a microfluidic system, it was most convenient to do this directly in the flow-chamber, where detection will finally take place. The flow-chamber consists of two glass surfaces separated by a gap that can be flushed with liquids. On the one surface DNA molecules, which code for the respective antigens. By flushing a cell-free expression mix into the chamber, the respective antigens are transcribed and translated on-demand. Proteins then diffuse until reaching the second surface that specifically captures the proteins encoded by the immobilized DNA. After several washing steps to remove remaining expression-mix the flow-chamber is coated with the immobilized antigens and ready for detection.

Measuring

With the iRIf (Abkürzung) system it is possible to record small changes in layer thickness. The binding of an antibody, present in the blood serum flushed through the chamber, to the according antigen increases the local thickness of the protein surface so that interaction events can be measured label-free and in real-time via the change of the optical properties at this spot.

But we didn't stop thinking about the device: We detected antibodies in our own blood!