(15 intermediate revisions by 2 users not shown) | |||
Line 12: | Line 12: | ||
<style> | <style> | ||
body {line-height: initial;} | body {line-height: initial;} | ||
+ | h1, h2,h3 { | ||
+ | color: #51a7f9 !important; | ||
+ | text-align: center !important; | ||
+ | } | ||
+ | |||
+ | /*Time for the CSS*/ | ||
+ | * {margin: 0; padding: 0;} | ||
+ | |||
+ | .slider{ | ||
+ | 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*/ | ||
+ | } | ||
+ | |||
+ | |||
+ | /*Last thing remaining is to add transitions*/ | ||
+ | .slider>img{ | ||
+ | position: absolute; | ||
+ | left: 0; top: 0; | ||
+ | transition: all 0.5s; | ||
+ | } | ||
+ | |||
+ | .slider input[name='slide_switch'] { | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | .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; | ||
+ | } | ||
+ | |||
+ | /*Time to add the click effects*/ | ||
+ | .slider input[name='slide_switch']:checked+label { | ||
+ | border-color: #666; | ||
+ | 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> | </style> | ||
</head></html> | </head></html> | ||
Line 28: | Line 96: | ||
<!-- Head End --> | <!-- Head End --> | ||
<!-- Content Begin --> | <!-- Content Begin --> | ||
− | <video | + | <video width="980" autoplay="autoplay" controls> |
<source src="https://static.igem.org/mediawiki/2017/4/44/T--Munich--FrontPageVideo.mp4" type="video/mp4"> | <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. | Your browser does not support the video tag. | ||
</video> | </video> | ||
<table width="900" border=0 cellspacing=0 cellpadding=10> | <table width="900" border=0 cellspacing=0 cellpadding=10> | ||
− | <tr><td colspan= | + | <tr> |
− | <font size=7 | + | <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> | </td></tr> | ||
− | <tr><td align=center valign=center> | + | <tr><td align=center valign=center colspan=6> |
<p style="text-align:justify"> | <p style="text-align:justify"> | ||
<font size=3 color=#444444> | <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 | + | 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> | </font> | ||
</p> | </p> | ||
− | + | <p style="text-align:justify; margin-bottom: 50px"> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | <p style="text-align:justify"> | + | |
<font size=3 color=#444444> | <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. | 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. | 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> | </font> | ||
</p> | </p> | ||
</td></tr> | </td></tr> | ||
− | <tr><td | + | <tr><td colspan=6 align=middle valign=center> |
− | <font size= | + | <font size=10 ><b style="color: #51a7f9; font-size: 60px; margin-top: 20px">Awards & Achievements</b></font> |
</td></tr> | </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> | ||
+ | </td> | ||
+ | <td align=center valign=center colspan=3> | ||
+ | <div class="captionPicture"> | ||
+ | <h2>Best Applied Design</h2> | ||
+ | </div> | ||
+ | </td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td align=center valign=center colspan=3> | ||
+ | <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> | ||
− | + | <tr> | |
− | + | <td align=center valign=center colspan=2> | |
− | + | <h3>Nominated for Best Wiki</h3> | |
− | + | ||
− | + | ||
− | + | ||
− | <td align=center valign=center | + | |
− | + | ||
− | < | + | |
− | </ | + | |
</td> | </td> | ||
− | + | <td align=center valign=center colspan=2> | |
− | <td align=center valign=center | + | <h3>Nominated for Best Presentation</h3> |
− | + | ||
− | < | + | |
− | </ | + | |
</td> | </td> | ||
− | + | <td align=center valign=center colspan=2> | |
− | <td align=center valign=center | + | <h3>Nominated for Best Poster</h3> |
− | + | ||
− | < | + | |
− | </ | + | |
</td> | </td> | ||
+ | </tr> | ||
− | <td align=center valign=center | + | <tr> |
− | + | <td align=center valign=center colspan=2> | |
− | < | + | <h3>Nominated for Best Integrated Human Practices</h3> |
− | </ | + | |
</td> | </td> | ||
− | + | <td align=center valign=center colspan=2> | |
− | <td align=center valign=center | + | <h3>Nominated for Best Education & Public Engagement</h3> |
− | + | ||
− | < | + | |
− | </ | + | |
</td> | </td> | ||
− | + | <td align=center valign=center colspan=2> | |
− | <td align=center valign=center | + | <h3>Nominated for Best Measurement</h3> |
− | + | ||
− | < | + | |
− | </ | + | |
</td> | </td> | ||
+ | </tr> | ||
− | |||
− | <td align=center valign=center> | + | <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> | ||
− | + | <td align=center valign=center colspan=2> | |
− | <td align=center valign=center | + | <h3 style="margin-bottom: 50px">Nominated for Best Part Collection</h3> |
− | + | ||
− | < | + | |
− | </ | + | |
</td> | </td> | ||
+ | <td align=center valign=center colspan=1></td> | ||
+ | </tr> | ||
− | <td align= | + | <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> |
− | </ | + | |
− | </ | + | |
− | <td align= | + | <tr> <td colspan=6 align=middle valing=center> |
− | <a | + | <!-- |
− | <img src="https://static.igem.org/mediawiki/2017/ | + | 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/ | + | <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/> | ||
+ | |||
+ | |||
+ | </div> | ||
</td> | </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> | </td> | ||
</tr> | </tr> | ||
− | < | + | |
− | </ | + | <tr><td class="no-padding" colspan=6 align=right valign=center height=10> |
+ | <br><br><br><center><hr></center> | ||
</td></tr> | </td></tr> | ||
− | + | </table> | |
− | + | <!-- Content End --> | |
− | + | </html> | |
− | {Munich/Footer} | + | {{Munich/Footer}} |
Latest revision as of 20:49, 15 December 2017
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|