Difference between revisions of "Team:Munich"

(Prototype team page)
 
 
(124 intermediate revisions by 6 users not shown)
Line 1: Line 1:
−
{{Munich}}
+
<!-- #919191 Grau1 -->
 +
<!-- #787878 Grau2 -->
 +
<!-- #51A7f9 Blau1 -->
 +
<!-- #3c7cb9 Blau2 -->
 +
<!-- #ffffff weiss -->
 
<html>
 
<html>
 +
<head>
 +
<link rel="stylesheet" type="text/css"
 +
href="https://2017.igem.org/Template:Munich/CSS?action=raw&ctype=text/css" />
 +
<link rel="stylesheet" type="text/css"
 +
href="https://2017.igem.org/Template:Munich/Header?action=raw&ctype=text/css" />
 +
<style>
 +
body {line-height: initial;}
 +
h1, h2,h3 {
 +
color: #51a7f9 !important;
 +
text-align: center !important;
 +
}
  
 +
/*Time for the CSS*/
 +
* {margin: 0; padding: 0;}
  
−
<div class="column full_size" >
+
.slider{
−
<img src="http://placehold.it/2000x300/d3d3d3/f2f2f2">
+
width: 900px; /*Same as width of the large image*/
−
</div>
+
position: relative;
 +
/*Instead of height we will use padding*/
 +
padding-top: 600px; /*That helps bring the labels down*/
 +
 +
/*Lets add a shadow*/
 +
}
  
  
 +
/*Last thing remaining is to add transitions*/
 +
.slider>img{
 +
position: absolute;
 +
left: 0; top: 0;
 +
transition: all 0.5s;
 +
}
  
−
<div class="column full_size" >
+
.slider input[name='slide_switch'] {
−
<h1> Welcome to iGEM 2017! </h1>
+
display: none;
−
<p>Your team has been approved and you are ready to start the iGEM season! </p>
+
}
−
</div>
+
  
−
<div class="clear"></div>
+
.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;
 +
}
  
−
<div class="column half_size" >
+
.slider label img{
−
<h5>Before you start: </h5>
+
display: block;
−
<p> Please read the following pages:</p>
+
}
−
<ul>
+
 
−
<li> <a href="https://2017.igem.org/Competition">Competition Hub</a> </li>
+
/*Time to add the click effects*/
−
<li> <a href="https://2017.igem.org/Competition/Deliverables/Wiki">Wiki Requirements page</a></li>
+
.slider input[name='slide_switch']:checked+label {
−
<li> <a href="https://2017.igem.org/Resources/Template_Documentation">Template documentation</a></li>
+
border-color: #666;
−
</ul>
+
opacity: 1;
 +
}
 +
/*Clicking any thumbnail now should change its opacity(style)*/
 +
/*Time to work on the main images*/
 +
.slider input[name='slide_switch'] ~ img {
 +
opacity: 0;
 +
transform: scale(1.1);
 +
}
 +
/*That hides all main images at a 110% size
 +
On click the images will be displayed at normal size to complete the effect
 +
*/
 +
.slider input[name='slide_switch']:checked+label+img {
 +
opacity: 1;
 +
transform: scale(1);
 +
}
 +
/*Clicking on any thumbnail now should activate the image related to it*/
 +
 
 +
/*We are done :)*/
 +
</style>
 +
</head></html>
 +
{{Munich/Menu}}
 +
<html>
 +
<body>
 +
<table width=100% height=100% cellpadding=0 cellspacing=0 border=0>
 +
<!-- Content -->
 +
<tr><td width="100%" colspan=3>
 +
<table width=100% height=100% cellpadding=0 cellspacing=0 border=0>
 +
<tr>
 +
<td width="40%">
 +
</td>
 +
<td id="myContent" width="20%" valign=top align=center>
 +
<br>
 +
<!-- Head End -->
 +
<!-- Content Begin -->
 +
<video width="980" autoplay="autoplay" controls>
 +
<source src="https://static.igem.org/mediawiki/2017/4/44/T--Munich--FrontPageVideo.mp4" type="video/mp4">
 +
Your browser does not support the video tag.
 +
</video>
 +
<table width="900" border=0 cellspacing=0 cellpadding=10>
 +
<tr>
 +
<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>
 
</div>
 +
</td>
 +
</tr>
  
−
<div class="column half_size" >
+
<tr>
−
<div class="highlight">
+
<td align=center valign=center colspan=3>
−
<h5> Styling your wiki </h5>
+
<div class="captionPicture">
−
<p>You may style this page as you like or you can simply leave the style as it is. You can easily keep the styling and edit the content of these default wiki pages with your project information and completely fulfill the requirement to document your project.</p>
+
<h2>Best Model</h2>
−
<p>While you may not win Best Wiki with this styling, your team is still eligible for all other awards. This default wiki meets the requirements, it improves navigability and ease of use for visitors, and you should not feel it is necessary to style beyond what has been provided.</p>  
+
 
</div>
 
</div>
 +
</td>
 +
<td align=center valign=center colspan=3>
 +
<div class="captionPicture">
 +
<h2>Best Applied Design</h2>
 
</div>
 
</div>
 +
</td>
 +
</tr>
  
−
<div class="column full_size" >
+
<tr>
−
<h5> Wiki template information </h5>
+
<td align=center valign=center colspan=3>
−
<p>We have created these wiki template pages to help you get started and to help you think about how your team will be evaluated. You can find a list of all the pages tied to awards here at the <a href="https://2017.igem.org/Judging/Pages_for_Awards">Pages for awards</a> link. You must edit these pages to be evaluated for medals and awards, but ultimately the design, layout, style and all other elements of your team wiki is up to you!</p>
+
<div class="captionPicture">
 +
<h2>Best Hardware</h2>
 +
</div>
 +
</td>
 +
<td align=center valign=center colspan=3>
 +
<div class="captionPicture">
 +
<h2>Best Software</h2>
 +
</div>
 +
</td>
 +
</tr>
  
−
</div>
 
  
 +
<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>
  
 +
<tr>
 +
<td align=center valign=center colspan=2>
 +
<h3>Nominated for Best Integrated Human Practices</h3>
 +
</td>
 +
<td align=center valign=center colspan=2>
 +
<h3>Nominated for Best Education & Public Engagement</h3>
 +
</td>
 +
<td align=center valign=center colspan=2>
 +
<h3>Nominated for Best Measurement</h3>
 +
</td>
 +
</tr>
  
  
−
<div class="column half_size" >
+
<tr>
−
<h5> Editing your wiki </h5>
+
<td align=center valign=center colspan=1></td>
−
<p>On this page you can document your project, introduce your team members, document your progress and share your iGEM experience with the rest of the world! </p>  
+
<td align=center valign=center colspan=2>
−
<p> <a href="https://2017.igem.org/wiki/index.php?title=Team:Example&action=edit"> </a>Use WikiTools - Edit in the black menu bar to edit this page</p>
+
<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>
  
−
</div>
+
<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/>
  
−
<div class="column half_size" >
+
<input type="radio" name="slide_switch" id="id1"/>
−
<h5>Tips</h5>
+
<label for="id1">
−
<p>This wiki will be your team’s first interaction with the rest of the world, so here are a few tips to help you get started: </p>
+
<img src="https://static.igem.org/mediawiki/2017/b/b8/T--Munich--Review2017_5.jpeg" width="100"/>
−
<ul>
+
</label>
−
<li>State your accomplishments! Tell people what you have achieved from the start. </li>
+
<img src="https://static.igem.org/mediawiki/2017/b/b8/T--Munich--Review2017_5.jpeg" width= 900/>
−
<li>Be clear about what you are doing and how you plan to do this.</li>
+
−
<li>You have a global audience! Consider the different backgrounds that your users come from.</li>
+
−
<li>Make sure information is easy to find; nothing should be more than 3 clicks away.  </li>
+
<input type="radio" name="slide_switch" id="id4"/>
−
<li>Avoid using very small fonts and low contrast colors; information should be easy to read.  </li>
+
<label for="id4">
−
<li>Start documenting your project as early as possible; don’t leave anything to the last minute before the Wiki Freeze. For a complete list of deadlines visit the <a href="https://2017.igem.org/Calendar">iGEM 2017 calendar</a> </li>
+
<img src="https://static.igem.org/mediawiki/2017/f/f0/T--Munich--Review2017_21.jpeg" width="100"/>
−
<li>Have lots of fun! </li>
+
</label>
−
</ul>  
+
<img src="https://static.igem.org/mediawiki/2017/f/f0/T--Munich--Review2017_21.jpeg" width=900/>
−
</div>
+
 +
<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>
  
−
<div class="column half_size" >
+
<img src="https://static.igem.org/mediawiki/2017/f/f9/T--Munich--Review2017_13.jpeg" width=900/>
−
<h5>Inspiration</h5>
+
<input type="radio" name="slide_switch" id="id7"/>
−
<p> You can also view other team wikis for inspiration! Here are some examples:</p>
+
<label for="id7">
−
<ul>
+
<img src="https://static.igem.org/mediawiki/2017/6/60/T--Munich--Review2017_17.jpeg" width="100"/>
−
<li> <a href="https://2014.igem.org/Team:SDU-Denmark/"> 2014 SDU Denmark </a> </li>
+
</label>
−
<li> <a href="https://2014.igem.org/Team:Aalto-Helsinki">2014 Aalto-Helsinki</a> </li>
+
<img src="https://static.igem.org/mediawiki/2017/6/60/T--Munich--Review2017_17.jpeg" width=900/>
−
<li> <a href="https://2014.igem.org/Team:LMU-Munich">2014 LMU-Munich</a> </li>
+
−
<li> <a href="https://2014.igem.org/Team:Michigan"> 2014 Michigan</a></li>
+
−
<li> <a href="https://2014.igem.org/Team:ITESM-Guadalajara">2014 ITESM-Guadalajara </a></li>
+
−
<li> <a href="https://2014.igem.org/Team:SCU-China"> 2014 SCU-China </a></li>
+
−
</ul>
+
−
</div>
+
  
−
<div class="column half_size" >
 
−
<h5> Uploading pictures and files </h5>
 
−
<p> You can upload your pictures and files to the iGEM 2017 server. Remember to keep all your pictures and files within your team's namespace or at least include your team's name in the file name. <br />
 
−
When you upload, set the "Destination Filename" to <br><code>T--YourOfficialTeamName--NameOfFile.jpg</code>. (If you don't do this, someone else might upload a different file with the same "Destination Filename", and your file would be erased!)<br><br>
 
  
−
<a href="https://2017.igem.org/Special:Upload">
 
−
UPLOAD FILES
 
−
</a>
 
−
</p>
 
 
</div>
 
</div>
 +
</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...