Difference between revisions of "Team:Munich"

Line 1: Line 1:
 
<html>
 
<html>
 +
    <style>
 +
   
 +
    #home_logo, #sideMenu { display:none; }
 +
    #sideMenu, #top_title, .patrollink  {display:none;}
 +
    #content { width:100%; padding:0px;  margin-top:-7px; margin-left:0px;}
 +
    body {background-color:white; }
 +
    #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
  
<head>
+
    </style>
<style>
+
  
* {margin: 0; padding: 0;
+
   
 
+
<link rel="stylesheet" type="text/css"
}
+
href="https://2017.igem.org/Template:Munich/CSS?action=raw&ctype=text/css" />
body{
+
  font-family: Helvetica;
+
  
}
+
<script type="text/javascript" src="https://2017.igem.org/Template:Munich/Javascript?
 +
action=raw&ctype=text/javascript"></script>
  
 +
    <style type="text/css">
 +
       
 +
        .ui.menu .just.item{
 +
                color: rgb(255, 255, 255);
 +
                background: rgba(255, 255, 255, 1.00);
 +
                padding: 0;
 +
        }
  
#container {
+
        .ui.tiny.image, .ui.tiny.images .image, .ui.tiny.images img, .ui.tiny.images svg{
width: 80%;
+
            height: 55px;
overflow: hidden;
+
            width: auto;
margin: 50px auto;
+
            font-size: .95714286rem;
}
+
            padding: 0;
 +
        }
 +
    </style>
  
h2{
+
<body>
  text-align: center;
+
}
+
  
.banner > img{
 
  margin-left:50px;
 
}
 
  
.banner {
 
  width:5000px;
 
  overflow: hidden;
 
  height: 233px;
 
}
 
  
/*keyframe animations*/
+
<div class='ui seven item secondary menu'>
.first {
+
    <div class='ui just item'>
-webkit-animation: bannermove 20s linear infinite;
+
        <img class='ui tiny cascaid image' src="https://static.igem.org/mediawiki/2017/a/af/T--Munich--Logo_Final.svg">
  -moz-animation: bannermove 20s linear infinite;
+
    </div>
    -ms-animation: bannermove 20s linear infinite;
+
    <div class='ui dropdown item'>
    -o-animation: bannermove 20s linear infinite;
+
        Project
        animation: bannermove 20s linear infinite;
+
        <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>
  
@keyframes "bannermove" {
+
    <div class='ui dropdown item'>
0% {
+
        <div class="text">Team</div>
    margin-left: 0px;
+
        <div class='ui menu'>
}
+
            <a class="item" href="https://2017.igem.org/Team:Munich/Team">The Team</a>
100% {
+
            <a class="disabled item">Attributions</a>
    margin-left: -2000px;
+
            <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>
  
@-moz-keyframes bannermove {
+
    <div class='ui disabled dropdown item'>
0% {
+
        <div class='text'>Awards</div>
  margin-left: 0px;
+
        <div class='ui menu'>
}
+
            <a class="item">Special prizes</a>
100% {
+
            <a class="item">Medals</a>
  margin-left: -2000px;
+
        </div>
}
+
    </div>
  
}
+
</div>
  
@-webkit-keyframes "bannermove" {
+
<div class="ui bottom fixed icon menu">
0% {
+
  <a class="item" href="https://www.facebook.com/Munich.iGEM/">
  margin-left: 0px;
+
    <i class="facebook icon"></i>
}
+
  </a>
100% {
+
  <a class="item" href="https://www.instagram.com/igem.munich.2017/">
  margin-left: -2000px;
+
    <i class="instagram icon"></i>
}
+
  </a>
 +
  <a class="item" href="mailto:igem.munich@gmail.com">
 +
    <i class="mail icon"></i>
 +
  </a>
 +
</div>
  
}
 
  
@-ms-keyframes "bannermove" {
+
<div class='ui two column grid container'>
0% {
+
  margin-left: 0px;
+
}
+
100% {
+
  margin-left: -2000px;
+
}
+
  
}
+
        <div class="column">
 +
            <h1>Problem</h1>
 +
            <div class='hidden horizontal divider'></div>
 +
            <p>Although there are many diagnose 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 diagnose 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>
 +
            <div class='hidden horizontal divider'></div>
 +
            <p>   
 +
            New diagnose 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> 
 +
        </div>
 +
        <div class="column">
 +
            <h1>Solution</h1>
 +
            <div class='hidden horizontal divider'></div>
 +
            <p>We are working at a diagnose 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>
  
@-o-keyframes "bannermove" {
 
0% {
 
  margin-left: 0px;
 
}
 
100% {
 
  margin-left: -2000px;
 
}
 
  
}
+
   
  
 
h1{
 
  text-align: center;
 
  color: black;
 
  font-size: 50px;
 
  border-radius:12px;
 
  background-color: #92D4EF;
 
 
  margin: 20px;
 
}
 
 
h2{
 
text-align: center;
 
margin-bottom: 10px;
 
}
 
 
#hola{
 
 
}
 
 
h3{
 
  text-align: center;
 
  margin: 10px;
 
}
 
 
.problem, .solution{
 
  padding-left: 50px;
 
  padding-right: 50px;
 
  padding-top: 20px;
 
  padding-bottom: 20px;
 
  border-radius:50px;
 
}
 
 
 
.problem{
 
  margin-right:500px;
 
}
 
table{
 
  margin:auto;
 
  border-spacing: 2.5vw 0;
 
  margin-top: 30px;
 
  margin-bottom: 30px;
 
}
 
 
 
.footer{
 
  background-color: #92D4EF;
 
  text-align: center;
 
  margin-bottom: 0;
 
  padding-top: 5px;
 
 
 
}
 
 
h5{
 
  text-align: center;
 
 
  margin-bottom: 10px;
 
 
 
}
 
 
td{
 
  width: 50%;
 
  vertical-align: top;
 
}
 
 
a{
 
  text-decoration: none;
 
  padding-left:7px;
 
 
 
}
 
 
 
 
</style>
 
 
 
</head>
 
 
 
<body>
 
 
<div id="container"> <!-- Apparently, the freaking space lines between the elements are important, so for the animation to loop seamlessly, the img elements can't have them inbetween. -->
 
 
  <div class="banner first"><img id="picture" src="https://static.igem.org/mediawiki/2017/9/92/T--Munich--logo.png" alt="" style="width:350px;height:233px;"/><img src="https://static.igem.org/mediawiki/2017/3/36/T--Munich--scientist.jpg" alt="" style="width:350px;height:233px" /><img src="https://static.igem.org/mediawiki/2017/f/fa/T--Munich--Explaning_MakeMunich.jpg" alt="" style="width:350px;height:233px;"/><img src="https://static.igem.org/mediawiki/2017/4/40/T--Munich--Wetlab_work.jpg" alt="" style="width:350px;height:233px;"/><img src="https://static.igem.org/mediawiki/2017/c/cd/Groupphoto_170504.jpeg" alt="" style="width:350px;height:233px;"/><img class="hola" src="https://static.igem.org/mediawiki/2017/9/92/T--Munich--logo.png" alt="" style="width:350px;height:233px;"/><img class ="hola" src="https://static.igem.org/mediawiki/2017/3/36/T--Munich--scientist.jpg" alt="" style="width:350px;height:233px" /><img src="https://static.igem.org/mediawiki/2017/f/fa/T--Munich--Explaning_MakeMunich.jpg" alt="" style="width:350px;height:233px;"/><img src="https://static.igem.org/mediawiki/2017/4/40/T--Munich--Wetlab_work.jpg" alt="" style="width:350px;height:233px;"/><img src="https://static.igem.org/mediawiki/2017/c/cd/Groupphoto_170504.jpeg" alt="" style="width:350px;height:233px;"/>
 
    </div>
 
  </div>
 
                                                         
 
 
<div class ="projectName">
 
  <h1> CascAID </h1>
 
</div>
 
 
 
 
 
<div class="part2">
 
  <table style="width:100%; text-align:justify" >
 
  <tr>
 
    <td bgcolor="white" class = "problem"> <h3 id="hola">Problem</h3>
 
      <p> Although there are many diagnose 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 diagnose 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. <br><br>
 
New diagnose 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> </td>
+
<script type="text/javascript">
    <td bgcolor="white" class ="solution"><h3>Solution</h3>
+
     $('.dropdown').dropdown({on:'hover'});
     <p> We are working at a diagnose 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. <br><br>
+
</script>
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>
+
        
     </td>
+
     <div class='ui clearing basic segment'></div>
  </tr>
+
</table>
+
  
 +
    </div> 
 
</div>
 
</div>
  <br>
+
</body>
 
+
 
+
<div class="footer">
+
    <h5>Follow our progress or contact us on:</h5>
+
<div class="logos"> <a href="https://www.facebook.com/Munich.iGEM/">
+
<img border="0" src="https://image.flaticon.com/icons/svg/33/33702.svg" width="30px" height="30px" align="center"> </a>
+
  <a  href="https://www.instagram.com/igem.munich.2017/">
+
<img border="0" src="https://image.flaticon.com/icons/svg/87/87390.svg" width="30px" height="30px" align="center"> </a>
+
<a  href="mailto:igem.munich@gmail.com"> <img  src= "https://static.igem.org/mediawiki/2017/9/97/T--Munich--mail_symbol.svg" width="30px" height="30px" align="center"> </a> </div>
+
 
+
 
+
  <br>
+
 
+
</div>
+
 
+
    </body>
+
 
+
 
</html>
 
</html>

Revision as of 21:41, 30 June 2017

Problem

Although there are many diagnose 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 diagnose 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.

New diagnose 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.

Solution

We are working at a diagnose 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.

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.