Difference between revisions of "Team:Munich/Testing"

Line 1: Line 1:
 
<html>
 
<html>
 
<head>
 
<head>
−
    <style>
+
−
   
+
  <script src = "https://2017.igem.org/Template:Munich/Javascript?action=raw&ctype=text/javascript"></script>
−
 
+
  <link rel="stylesheet" type="text/css" href="https://2017.igem.org/Template:Munich/CSS?action=raw&ctype=text/css">
  
−
    </style>
 
  
−
   
 
−
<link rel="stylesheet" type="text/css" href="https://2017.igem.org/Template:Munich/CSS?action=raw&ctype=text/css" />
 
  
−
<script type="text/javascript" src="https://2017.igem.org/Template:Munich/Javascript?action=raw&ctype=text/javascript"></script>
+
<style type="text/css">
  
−
     <style type="text/css">
+
     #home_logo, #sideMenu { display:none; }
−
       
+
    #sideMenu, #top_title, .patrollink  {display:none;}
−
        .ui.menu .just.item{
+
    #content { width:100%; padding:0px;  margin-top:-7px; margin-left:0px;}
−
                color: rgb(255, 255, 255);
+
    body {background-color:white; }
−
                background: rgba(255, 255, 255, 1.00);
+
    #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
−
                padding: 0;
+
−
        }
+
  
−
        .ui.tiny.image, .ui.tiny.images .image, .ui.tiny.images img, .ui.tiny.images svg{
+
p {
−
            height: 55px;
+
    font-family: Helvetica, Arial, sans-serif;
−
            width: auto;
+
    font-size: 17px;
−
            font-size: .95714286rem;
+
}
−
            padding: 0;
+
−
        }
+
−
    </style>
+
−
</head>
+
−
<body>
+
  
 +
.text-center{
 +
text-align: center;
 +
}
  
 +
.header-container{
 +
margin-left: 5% ;
 +
margin-right: 5% ;
 +
}
  
−
<div class='ui seven item secondary menu'>
+
h1{
−
    <div class='ui just item'>
+
margin: 2.5%;
−
        <img class='ui tiny cascaid image' src="https://static.igem.org/mediawiki/2017/a/af/T--Munich--Logo_Final.svg">
+
color: rgb(147,149,152);
−
    </div>
+
font-family: Helvetica, Arial, sans-serif;
−
    <div class='ui dropdown item'>
+
font-size: 25px;
−
        Project
+
text-align: justify !important;
−
        <div class='ui menu'>
+
}
−
            <a class="active item">Description</a>
+
−
            <a class="disabled item">Interlab</a>
+
−
        </div>
+
−
    </div>
+
−
    <div class='ui disabled dropdown item'>
+
−
        <div class='text'>Design</div>
+
−
        <div class='ui menu'>
+
−
            <a class="item">Overall</a>
+
−
            <a class="item">Parts</a>
+
−
            <a class="item">Hardware</a>
+
−
            <a class="item">Software</a>
+
−
            <a class="item">Modeling</a>
+
−
        </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'>
+
button{
−
        <div class="text">Team</div>
+
font-family: Helvetica, Arial, sans-serif;
−
        <div class='ui menu'>
+
}
−
            <a class="item" href="https://2017.igem.org/Team:Munich/Team">The Team</a>
+
−
            <a class="disabled item">Attributions</a>
+
−
            <a class="disabled item">Collaborations</a>
+
−
        </div>
+
−
    </div>
+
  
−
    <div class='ui disabled dropdown item'>
 
−
        <div class='text'>Human Practices</div>
 
−
        <div class='ui menu'>
 
−
            <a class="item">Awards</a>
 
−
            <a class="item">Medals</a>
 
−
        </div>
 
−
    </div>
 
  
−
    <div class='ui disabled dropdown item'>
+
line{
−
        <div class='text'>Awards</div>
+
stroke: rgb(147,149,152);
−
        <div class='ui menu'>
+
}
−
            <a class="item">Special prizes</a>
+
−
            <a class="item">Medals</a>
+
−
        </div>
+
−
    </div>
+
  
−
</div>
+
.skip-animation{
 +
background-color: rgb(0,144,239) !important;
 +
}
  
−
<div class="ui bottom fixed icon menu">
+
.button-container{
−
  <a class="item" href="https://www.facebook.com/Munich.iGEM/">
+
padding-left: 25%;
−
    <i class="facebook icon"></i>
+
−
  </a>
+
}
−
  <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>
+
  
 +
.explanation-text{
 +
 +
}
  
−
<div class='ui two column grid container'>
+
.explanation{
 +
/*border-width: 30px;
 +
    border-radius: 10%; For when there is svg canvas in the divs */
 +
    border-radius: 10px;
 +
    padding: 5%;
 +
    background-color: rgb(0,144,239);
 +
    width:80%;
 +
    color: white;
 +
   
 +
}
  
−
        <div class="column">
+
.explanation-left{
−
            <p style="font-family: Lato,'Helvetica Neue',Arial,Helvetica,sans-serif; font-weight: 700; font-size: 30px;">Problem</p>
+
float: right;
−
            <div class='hidden horizontal divider'></div>
+
transform: translate(0,10px);
−
            <p style="font-family: Lato,'Helvetica Neue',Arial,Helvetica,sans-serif; font-size: 14px;">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 accesible. Many different diseases can present similar symptoms. But because the treatment for each of them can vary greatly (e.g. bacterial vs viral infection), a quick and reliable diagnostic is important to start as soon as possible with the right treatment. On the other hand, wrongly recognising the cause of a disease not only leads to prescription of the wrong medicine, but also can contribute to the spread of resistances.</p>
+
}
−
            <div class='hidden horizontal divider'></div>
+
  
−
            <p style="font-family: Lato,'Helvetica Neue',Arial,Helvetica,sans-serif; font-size: 14px;">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.</p>
+
.pretty-picture{
−
             
+
width: 80%;
−
        </div>
+
height: 200px;
−
        <div class="column">
+
}
−
            <p style="font-family: Lato,'Helvetica Neue',Arial,Helvetica,sans-serif; font-weight: 700; font-size: 30px;">Solution</p>
+
−
            <div class='hidden horizontal divider'></div>
+
−
            <p style="font-family: Lato,'Helvetica Neue',Arial,Helvetica,sans-serif; font-size: 14px;">We are developing 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 style="font-family: Lato,'Helvetica Neue',Arial,Helvetica,sans-serif; font-size: 14px;">
+
.pretty-picture-container{
−
            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.
+
text-align: center;
−
            </p>
+
−
        </div>
+
−
</div>
+
  
 +
}
  
−
   
 
  
−
       
+
.column{
−
<script type="text/javascript">
+
padding: 0 !important;
−
    $('.dropdown').dropdown({on:'hover'});
+
}
−
</script>
+
 
−
     
+
#canvas-container{
 +
padding: 0;
 +
}
 +
 
 +
.invisible{
 +
opacity: 0;
 +
}
 +
 
 +
.appear{
 +
-webkit-animation: appear 1s linear;
 +
}
 +
 
 +
@keyframes appear {
 +
0%{
 +
opacity: 0;
 +
}
 +
 
 +
100%{
 +
opacity: 1;
 +
}
 +
}
 +
.white{
 +
-webkit-animation: white 1s linear;
 +
-webkit-animation-fill-mode: forwards;
 +
}
 +
 
 +
@keyframes white{
 +
0%{
 +
fill: rgb(255,149,152);
 +
}
 +
100%{
 +
fill: white;
 +
}
 +
}
 +
 
 +
 
 +
.colorPositive{
 +
-webkit-animation: colorPositive 2s linear;
 +
-webkit-animation-fill-mode: forwards;
 +
}
 +
 
 +
@keyframes colorPositive{
 +
0%{
 +
fill:white;
 +
}
 +
 
 +
100%{
 +
fill: rgb(100,255,0);
 +
}
 +
}
 +
 
 +
.visible{
 +
-webkit-animation: visible 1s linear;
 +
-webkit-animation-fill-mode: forwards;
 +
}
 +
 
 +
@keyframes visible{
 +
0%{
 +
opacity: 0;
 +
}
 +
100%{
 +
opacity: 1;
 +
}
 +
}
 +
 
 +
.colorNegative{
 +
-webkit-animation: colorNegative 2s linear;
 +
-webkit-animation-fill-mode: forwards;
 +
}
 +
 
 +
@keyframes colorNegative{
 +
0%{
 +
fill: white;
 +
}
 +
 
 +
100%{
 +
fill: rgb(0,144,239);
 +
}
 +
} /* Because CSS is such a wonderful language, it is imperative to have the colorNegative definitions AFTER the visible one; otherwise the visible overwrites the colorNegative and the circles expand at the end, but don't change color.*/
 +
 
 +
 
 +
 
 +
</style>
 +
 
 +
</head>
 +
<div class="text-center">
 +
  <img src = "https://static.igem.org/mediawiki/2017/thumb/a/af/T--Munich--Logo_Final.svg/739px-T--Munich--Logo_Final.svg.png" alt="CascAID">
 +
  </div>
 +
  <div class="header-container"><h1 class="text-center text">
 
        
 
        
−
    <div class='ui clearing basic segment'></div>
+
CascAID stands for Cas13a Controlled Assay for Infectious Diseases. Our goal this year is to create a novel paper-based microfluidic device for the detection of specific RNA sequences. <br> <br>
 +
Nowadays, there is a trend among medical practitioners to prescribe antibiotics when bacterial infections are suspected without a laboratory confirmation as a way for speeding up recovery. This has led to an increase in antibiotic-resistant bacteria that makes it difficult to treat infected patients. <br> <br>
 +
Nucleic acid-based detection methods could allow for faster diagnosis. Therefore, we seek to develop a method that allows to report the presence of a specific pathogen within hours. For this reason, we will use the CRISPR effector Cas13a, which is able to target specific single-stranded RNA. This system allows for the simple and fast design of new sequence targets, being an ideal tool for detecting fast mutating pathogens. In the long term, we see our device as an easy-to-use and fast diagnostic tool in developing countries as well as an instrument in developed countries for discerning between bacterial and viral infections, that could help reducing antibiotics prescription.
 +
  </h1> </div>
  
−
    </div> 
 
−
</div>
 
−
</body>
 
 
</html>
 
</html>

Revision as of 07:59, 8 July 2017

CascAID

CascAID stands for Cas13a Controlled Assay for Infectious Diseases. Our goal this year is to create a novel paper-based microfluidic device for the detection of specific RNA sequences.

Nowadays, there is a trend among medical practitioners to prescribe antibiotics when bacterial infections are suspected without a laboratory confirmation as a way for speeding up recovery. This has led to an increase in antibiotic-resistant bacteria that makes it difficult to treat infected patients.

Nucleic acid-based detection methods could allow for faster diagnosis. Therefore, we seek to develop a method that allows to report the presence of a specific pathogen within hours. For this reason, we will use the CRISPR effector Cas13a, which is able to target specific single-stranded RNA. This system allows for the simple and fast design of new sequence targets, being an ideal tool for detecting fast mutating pathogens. In the long term, we see our device as an easy-to-use and fast diagnostic tool in developing countries as well as an instrument in developed countries for discerning between bacterial and viral infections, that could help reducing antibiotics prescription.