Difference between revisions of "Team:Munich"

 
(93 intermediate revisions by 4 users not shown)
Line 1: Line 1:
 +
<!-- #919191 Grau1 -->
 +
<!-- #787878 Grau2 -->
 +
<!-- #51A7f9 Blau1 -->
 +
<!-- #3c7cb9 Blau2 -->
 +
<!-- #ffffff weiss -->
 
<html>
 
<html>
 
<head>
 
<head>
−
    <style>
+
<link rel="stylesheet" type="text/css"
−
   
+
href="https://2017.igem.org/Template:Munich/CSS?action=raw&ctype=text/css" />
−
    #home_logo, #sideMenu { display:none; }
+
<link rel="stylesheet" type="text/css"
−
    #sideMenu, #top_title, .patrollink  {display:none;}
+
href="https://2017.igem.org/Template:Munich/Header?action=raw&ctype=text/css" />
−
    #content { width:100%; padding:0px;  margin-top:-7px; margin-left:0px;}
+
<style>
−
    body {background-color:white; }
+
body {line-height: initial;}
−
    #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
+
h1, h2,h3 {
 +
color: #51a7f9 !important;
 +
text-align: center !important;
 +
}
  
−
    </style>
+
/*Time for the CSS*/
 +
* {margin: 0; padding: 0;}
  
−
   
+
.slider{
−
<link rel="stylesheet" type="text/css" href="https://2017.igem.org/Template:Munich/CSS?action=raw&ctype=text/css" />
+
width: 900px; /*Same as width of the large image*/
 +
position: relative;
 +
/*Instead of height we will use padding*/
 +
padding-top: 600px; /*That helps bring the labels down*/
 +
 +
/*Lets add a shadow*/
 +
}
  
−
<script type="text/javascript" src="https://2017.igem.org/Template:Munich/Javascript?action=raw&ctype=text/javascript"></script>
 
  
−
    <style type="text/css">
+
/*Last thing remaining is to add transitions*/
−
       
+
.slider>img{
−
        .ui.menu .just.item{
+
position: absolute;
−
                color: rgb(255, 255, 255);
+
left: 0; top: 0;
−
                background: rgba(255, 255, 255, 1.00);
+
transition: all 0.5s;
−
                padding: 0;
+
}
−
        }
+
  
−
        .ui.tiny.image, .ui.tiny.images .image, .ui.tiny.images img, .ui.tiny.images svg{
+
.slider input[name='slide_switch'] {
−
            height: 55px;
+
display: none;
−
            width: auto;
+
}
−
            font-size: .95714286rem;
+
−
            padding: 0;
+
−
        }
+
−
    </style>
+
−
</head>
+
−
<body>
+
  
 +
.slider label {
 +
/*Lets add some spacing for the thumbnails*/
 +
margin: 30px 0 0 18px;
 +
 +
float: left;
 +
cursor: pointer;
 +
transition: all 0.5s;
 +
 +
/*Default style = low opacity*/
 +
opacity: 0.6;
 +
 +
        z-index: 99;
 +
}
  
 +
.slider label img{
 +
display: block;
 +
}
  
−
<div class='ui seven item secondary menu'>
+
/*Time to add the click effects*/
−
    <div class='ui just item'>
+
.slider input[name='slide_switch']:checked+label {
−
        <img class='ui tiny cascaid image' src="https://static.igem.org/mediawiki/2017/a/af/T--Munich--Logo_Final.svg">
+
border-color: #666;
−
    </div>
+
opacity: 1;
−
    <div class='ui dropdown item'>
+
}
−
        Project
+
/*Clicking any thumbnail now should change its opacity(style)*/
−
        <div class='ui menu'>
+
/*Time to work on the main images*/
−
            <a class="active item">Description</a>
+
.slider input[name='slide_switch'] ~ img {
−
            <a class="disabled item">Interlab</a>
+
opacity: 0;
−
        </div>
+
transform: scale(1.1);
−
    </div>
+
}
−
    <div class='ui disabled dropdown item'>
+
/*That hides all main images at a 110% size
−
        <div class='text'>Design</div>
+
On click the images will be displayed at normal size to complete the effect
−
        <div class='ui menu'>
+
*/
−
            <a class="item">Overall</a>
+
.slider input[name='slide_switch']:checked+label+img {
−
            <a class="item">Parts</a>
+
opacity: 1;
−
            <a class="item">Hardware</a>
+
transform: scale(1);
−
            <a class="item">Software</a>
+
}
−
            <a class="item">Modeling</a>
+
/*Clicking on any thumbnail now should activate the image related to it*/
−
        </div>
+
−
    </div>
+
−
    <div class='ui disabled dropdown item'>
+
−
        <div class='text'>Lab</div>
+
−
        <div class='ui menu'>
+
−
            <a class="item">Lab journal</a>
+
−
            <a class="item">Experiments</a>
+
−
            <a class="item">Results</a>
+
−
            <a class="item">Safety</a>
+
−
        </div>
+
−
    </div>
+
  
−
    <div class='ui dropdown item'>
+
/*We are done :)*/
−
        <div class="text">Team</div>
+
</style>
−
        <div class='ui menu'>
+
</head></html>
−
            <a class="item" href="https://2017.igem.org/Team:Munich/Team">The Team</a>
+
{{Munich/Menu}}
−
            <a class="disabled item">Attributions</a>
+
<html>
−
            <a class="disabled item">Collaborations</a>
+
<body>
−
        </div>
+
<table width=100% height=100% cellpadding=0 cellspacing=0 border=0>
−
    </div>
+
<!-- Content -->
−
 
+
<tr><td width="100%" colspan=3>
−
    <div class='ui disabled dropdown item'>
+
<table width=100% height=100% cellpadding=0 cellspacing=0 border=0>
−
        <div class='text'>Human Practices</div>
+
<tr>
−
        <div class='ui menu'>
+
<td width="40%">
−
            <a class="item">Awards</a>
+
</td>
−
            <a class="item">Medals</a>
+
<td id="myContent" width="20%" valign=top align=center>
−
        </div>
+
<br>
−
    </div>
+
<!-- Head End -->
−
 
+
<!-- Content Begin -->
−
    <div class='ui disabled dropdown item'>
+
<video width="980" autoplay="autoplay" controls>
−
        <div class='text'>Awards</div>
+
<source src="https://static.igem.org/mediawiki/2017/4/44/T--Munich--FrontPageVideo.mp4" type="video/mp4">
−
        <div class='ui menu'>
+
Your browser does not support the video tag.
−
            <a class="item">Special prizes</a>
+
</video>
−
            <a class="item">Medals</a>
+
<table width="900" border=0 cellspacing=0 cellpadding=10>
−
        </div>
+
<tr>
−
    </div>
+
<td width=160></td>
 +
<td width=160></td>
 +
<td width=160></td>
 +
<td width=160></td>
 +
<td width=160></td>
 +
<td width=160></td>
 +
</tr>
 +
<tr><td colspan=6 align=left valign=center>
 +
<font size=7 ><b style="color: #51a7f9">Abstract</b></font>
 +
</td></tr>
 +
<tr><td align=center valign=center colspan=6>
 +
<p style="text-align:justify">
 +
<font size=3 color=#444444>
 +
The ongoing crisis of increasing antibiotic resistance demands innovative preventive strategies. Recently, the RNA-targeting protein CRISPR-Cas13a has been used for highly sensitive DNA and RNA detection, promising diverse applications in point-of-care diagnostics. We integrated Cas13a in the detection unit of CascAID, our GMO-free diagnostic platform. CascAID combines an automated microfluidic device for rapid lysis and extraction of nucleic acids with a paper-based readout system. We demonstrated the performance of our device by targeting the 16S rRNA from <i>E. coli</i>. We improved the detection limit of our platform, using simulations to optimize our amplification scheme and the final readout.
 +
</font>
 +
</p>
 +
<p style="text-align:justify; margin-bottom: 50px">
 +
<font size=3 color=#444444>
 +
Conceived as a distributable platform for rapid point-of-care diagnostics, CascAID can be used to distinguish between bacterial and viral infections, thus minimizing the widespread use of antibiotics.
 +
Furthermore, Cas13a allows the fast design of target sequences, making our system adaptive to the emergence of new viral outbreaks or fast mutating pathogens.
 +
</font>
 +
</p>
 +
</td></tr>
 +
<tr><td colspan=6 align=middle valign=center>
 +
<font size=10 ><b style="color: #51a7f9; font-size: 60px; margin-top: 20px">Awards & Achievements</b></font>
 +
</td></tr>
 +
<tr>
 +
<td colspan=6>
 +
<img src="https://static.igem.org/mediawiki/2017/e/e5/T--Munich--Banner_Awards.jpg" width=900>
 +
</td>
 +
</tr>
 +
<tr>
 +
<td align=center valign=center colspan=3>
 +
<div class="captionPicture">
 +
<h1>First Runner-up</h1>
 +
</div>
 +
</td>
 +
<td align=center valign=center colspan=3>
 +
<div class="captionPicture">
 +
<h1>Best Diagnostics Project</h1>
 +
</div>
 +
</td>
 +
</tr>
  
 +
<tr>
 +
<td align=center valign=center colspan=3>
 +
<div class="captionPicture">
 +
<h2>Best Model</h2>
 
</div>
 
</div>
 +
</td>
 +
<td align=center valign=center colspan=3>
 +
<div class="captionPicture">
 +
<h2>Best Applied Design</h2>
 +
</div>
 +
</td>
 +
</tr>
  
−
<div class="ui bottom fixed icon menu">
+
<tr>
−
  <a class="item" href="https://www.facebook.com/Munich.iGEM/">
+
<td align=center valign=center colspan=3>
−
    <i class="facebook icon"></i>
+
<div class="captionPicture">
−
  </a>
+
<h2>Best Hardware</h2>
−
  <a class="item" href="https://www.instagram.com/igem.munich.2017/">
+
−
    <i class="instagram icon"></i>
+
−
  </a>
+
−
  <a class="item" href="mailto:igem.munich@gmail.com">
+
−
    <i class="mail icon"></i>
+
−
  </a>
+
 
</div>
 
</div>
 +
</td>
 +
<td align=center valign=center colspan=3>
 +
<div class="captionPicture">
 +
<h2>Best Software</h2>
 +
</div>
 +
</td>
 +
</tr>
  
  
−
<div class='ui two column grid container'>
+
<tr>
 +
<td align=center valign=center colspan=2>
 +
<h3>Nominated for Best Wiki</h3>
 +
</td>
 +
<td align=center valign=center colspan=2>
 +
<h3>Nominated for Best Presentation</h3>
 +
</td>
 +
<td align=center valign=center colspan=2>
 +
<h3>Nominated for Best Poster</h3>
 +
</td>
 +
</tr>
  
−
        <div class="column">
+
<tr>
−
            <h1>Problem</h1>
+
<td align=center valign=center colspan=2>
−
            <div class='hidden horizontal divider'></div>
+
<h3>Nominated for Best Integrated Human Practices</h3>
−
            <p>Although there are many diagnostic tests available that can detect even the smallest traces of a pathogen, they usually require expensive lab-equipment or skilled labor. Usually, places most prone to diseases are also the ones most lacking such equipment or personal, and thus, where tests are least asequible. Many different diseases can present similar symptoms. But because the treatment for each of them can vary greatly (e.g. bacterial vs viral infetion), a quick and reliable diagnostic is important to start as soon as possible with the right treatment. On the other hand, wrongly recognizing the cause of a disease not only leads to prescription of the wrong medicine, but also can contribute to the spread of resistances.</p>
+
</td>
−
            <div class='hidden horizontal divider'></div>
+
<td align=center valign=center colspan=2>
−
            <p>  
+
<h3>Nominated for Best Education & Public Engagement</h3>
−
            New diagnostic tool must take these points into consideration and be designed with affordability, availability, simplicity and reliability in mind, and, where possible, be flexible enough to cover a wide array of diseases in order to present the user with a single, powerful product.
+
</td>
−
            </p>  
+
<td align=center valign=center colspan=2>
−
        </div>
+
<h3>Nominated for Best Measurement</h3>
−
        <div class="column">
+
</td>
−
            <h1>Solution</h1>
+
</tr>
−
            <div class='hidden horizontal divider'></div>
+
−
            <p>We are working at a diagnostic tool that combines the power of high sensible methods with the affordability needed for a wide application field. Our project, named CascAID, utilizes a CRISPR/Cas effector protein to quickly and reliably test for different pathogens based on their RNA. By cleverly designing a short RNA sequence, it is possible to guide this protein to cleave RNA molecules. If the sample contained pathogen, then digested RNA will be found, where as a negative sample won't produce digestion fragments.</p>
+
−
            <div class='hidden horizontal divider'></div>
+
−
            <p>   
+
−
            In additon, we are trying to make CascAID an affordable but single use product thus reducing the risk of cross-contamination without increasing the production cost.
+
−
            </p>
+
−
        </div>
+
−
</div>  
+
  
  
−
   
+
<tr>
 +
<td align=center valign=center colspan=1></td>
 +
<td align=center valign=center colspan=2>
 +
<h3 style="margin-bottom: 50px">Nominated for Best Composite Part</h3>
 +
</td>
 +
<td align=center valign=center colspan=2>
 +
<h3 style="margin-bottom: 50px">Nominated for Best Part Collection</h3>
 +
</td>
 +
<td align=center valign=center colspan=1></td>
 +
</tr>
 +
 
 +
<tr><td colspan=6 align=middle valign=center>
 +
<font size=10 ><b style="color: #51a7f9; font-size: 60px; margin-top: 20px">Gallery</b></font>
 +
</td></tr>
 +
 
 +
<tr> <td colspan=6 align=middle valing=center>
 +
<!--
 +
We will make a slider with stylized thumbnails using CSS3
 +
The markup is very simple:
 +
Radio Inputs
 +
Labels with thumbnails to detect click event
 +
Main Image
 +
-->
 +
<div class="slider">
 +
 +
<input type="radio" name="slide_switch" id="id3" checked="checked"/>
 +
<label for="id3">
 +
<img src="https://static.igem.org/mediawiki/2017/9/99/T--Munich--Review2017_77.jpeg" width="100"/>
 +
</label>
 +
<img src="https://static.igem.org/mediawiki/2017/9/99/T--Munich--Review2017_77.jpeg" width=900/>
 +
<!--Lets show the second image by default on page load-->
 +
<input type="radio" name="slide_switch" id="id2" />
 +
<label for="id2">
 +
<img src="https://static.igem.org/mediawiki/2017/d/dd/T--Munich--Review2017_14.jpeg" width="100"/>
 +
</label>
 +
<img src="https://static.igem.org/mediawiki/2017/d/dd/T--Munich--Review2017_14.jpeg" width=900/>
 +
 
 +
<input type="radio" name="slide_switch" id="id1"/>
 +
<label for="id1">
 +
<img src="https://static.igem.org/mediawiki/2017/b/b8/T--Munich--Review2017_5.jpeg" width="100"/>
 +
</label>
 +
<img src="https://static.igem.org/mediawiki/2017/b/b8/T--Munich--Review2017_5.jpeg" width= 900/>
 +
 +
 +
<input type="radio" name="slide_switch" id="id4"/>
 +
<label for="id4">
 +
<img src="https://static.igem.org/mediawiki/2017/f/f0/T--Munich--Review2017_21.jpeg" width="100"/>
 +
</label>
 +
<img src="https://static.igem.org/mediawiki/2017/f/f0/T--Munich--Review2017_21.jpeg" width=900/>
 +
 +
<input type="radio" name="slide_switch" id="id5"/>
 +
<label for="id5">
 +
<img src="https://static.igem.org/mediawiki/2017/0/09/T--Munich--Review2017_4.jpeg" width="100"/>
 +
</label>
 +
<img src="https://static.igem.org/mediawiki/2017/0/09/T--Munich--Review2017_4.jpeg" width=900/>
 +
 
 +
<input type="radio" name="slide_switch" id="id6"/>
 +
<label for="id6">
 +
<img src="https://static.igem.org/mediawiki/2017/f/f9/T--Munich--Review2017_13.jpeg" width="100"/>
 +
</label>
 +
 
 +
<img src="https://static.igem.org/mediawiki/2017/f/f9/T--Munich--Review2017_13.jpeg" width=900/>
 +
<input type="radio" name="slide_switch" id="id7"/>
 +
<label for="id7">
 +
<img src="https://static.igem.org/mediawiki/2017/6/60/T--Munich--Review2017_17.jpeg" width="100"/>
 +
</label>
 +
<img src="https://static.igem.org/mediawiki/2017/6/60/T--Munich--Review2017_17.jpeg" width=900/>
  
−
       
 
−
<script type="text/javascript">
 
−
    $('.dropdown').dropdown({on:'hover'});
 
−
</script>
 
−
     
 
−
     
 
−
    <div class='ui clearing basic segment'></div>
 
  
−
    </div> 
 
 
</div>
 
</div>
−
</body>
+
</td>
 +
</tr>
 +
 
 +
<tr>
 +
<td colspan=6>
 +
<h3> <a style="color: #51a7f9 !important" href="/Team:Munich/Gallery">See the rest of our gallery...</a></h3>
 +
</td>
 +
</tr>
 +
 
 +
<tr><td class="no-padding" colspan=6 align=right valign=center height=10>
 +
<br><br><br><center><hr></center>
 +
</td></tr>
 +
</table>
 +
<!-- Content End -->
 
</html>
 
</html>
 +
{{Munich/Footer}}

Latest revision as of 20:49, 15 December 2017

Description

Design

Demonstrate

Measurement

Applied Design

Final Results

Achievements

Protocols

Notebook

Safety

Parts

Improved Part

Part Collection

InterLab

Model

Software

Collaboration

Detector

Quake Valve

Paperstrips

Sample Processing

Silver

Gold

Engagement

Collaborations

Team members

Sponsors

Attributions

Gallery

Abstract

The ongoing crisis of increasing antibiotic resistance demands innovative preventive strategies. Recently, the RNA-targeting protein CRISPR-Cas13a has been used for highly sensitive DNA and RNA detection, promising diverse applications in point-of-care diagnostics. We integrated Cas13a in the detection unit of CascAID, our GMO-free diagnostic platform. CascAID combines an automated microfluidic device for rapid lysis and extraction of nucleic acids with a paper-based readout system. We demonstrated the performance of our device by targeting the 16S rRNA from E. coli. We improved the detection limit of our platform, using simulations to optimize our amplification scheme and the final readout.

Conceived as a distributable platform for rapid point-of-care diagnostics, CascAID can be used to distinguish between bacterial and viral infections, thus minimizing the widespread use of antibiotics. Furthermore, Cas13a allows the fast design of target sequences, making our system adaptive to the emergence of new viral outbreaks or fast mutating pathogens.

Awards & Achievements

First Runner-up

Best Diagnostics Project

Best Model

Best Applied Design

Best Hardware

Best Software

Nominated for Best Wiki

Nominated for Best Presentation

Nominated for Best Poster

Nominated for Best Integrated Human Practices

Nominated for Best Education & Public Engagement

Nominated for Best Measurement

Nominated for Best Composite Part

Nominated for Best Part Collection
Gallery

See the rest of our gallery...