Difference between revisions of "Team:UCAS-China/Team"

 
(3 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
<!-- #919191 Grau1 -->
+
{{UCAS-China}}
−
<!-- #787878 Grau2 -->
+
−
<!-- #51A7f9 Blau1 -->
+
−
<!-- #3c7cb9 Blau2 -->
+
−
<!-- #ffffff weiss -->
+
 
<html>
 
<html>
 
<head>
 
<head>
−
<link rel="stylesheet" type="text/css"
+
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
−
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>
 
<style>
−
body {line-height: initial;}
+
canvas {
−
h1, h2,h3 {
+
    background-color: #e8d5d7;
−
color: #51a7f9 !important;
+
    width:80%;
−
text-align: center !important;
+
}
 +
#canvas_happy{
 +
    background-color: #002147;
 
}
 
}
  
−
/*Time for the CSS*/
+
hr {
−
* {margin: 0; padding: 0;}
+
    display: block;
 +
    height: 1px;
 +
    border: 0;
 +
    border-top: 1px solid black;
 +
    margin: 1em 0;
 +
    padding: 0;  
 +
}
  
−
.slider{
+
.btn-circle {
−
width: 900px; /*Same as width of the large image*/
+
  width: 50px;
−
position: relative;
+
  height: 50px;
−
/*Instead of height we will use padding*/
+
    padding: 10px 16px;
−
padding-top: 600px; /*That helps bring the labels down*/
+
    border-radius: 50%;
−
+
    font-size: 24px;
−
/*Lets add a shadow*/
+
    line-height: 1.33;
 +
    background-color: rgba(95,155,175,0.9);
 
}
 
}
  
 +
.btn-circle-lg {
 +
    width: 240px;
 +
    height: 240px;
 +
    padding: 10px 16px;
 +
    border-radius: 50%;
 +
    font-size: 60px;
 +
    line-height: 1.33;
 +
}
  
−
/*Last thing remaining is to add transitions*/
+
.videoWrapper {
−
.slider>img{
+
position: relative;
 +
padding-bottom: 56.25%; /* 16:9 */
 +
padding-top: 25px;
 +
height: 0;
 +
}
 +
.videoWrapper iframe {
 
position: absolute;
 
position: absolute;
−
left: 0; top: 0;
+
top: 0;
−
transition: all 0.5s;
+
left: 0;
 +
width: 100%;
 +
height: 100%;
 
}
 
}
  
−
.slider input[name='slide_switch'] {
+
.carousel-caption a {
−
display: none;
+
    font-size: 50px;
 +
    font-weight: bolder;
 +
    text-shadow: 1px 3px 5px rgba(0,0,0,0.8);
 +
    color: white;
 
}
 
}
  
−
.slider label {
+
#button-span {
−
/*Lets add some spacing for the thumbnails*/
+
    font-weight: bold;
−
margin: 30px 0 0 18px;
+
    font-size: 20px;
−
+
    color: black;
−
float: left;
+
    line-height: 0.2;
−
cursor: pointer;
+
    text-align:center;
−
transition: all 0.5s;
+
    position: relative;
−
+
    left: 0px;
−
/*Default style = low opacity*/
+
    right: 0px;
−
opacity: 0.6;
+
    display: block;
−
+
−
        z-index: 99;
+
 
}
 
}
  
−
.slider label img{
+
#button-lg-span {
−
display: block;
+
    font-weight: bold;
 +
    font-size: 20px;
 +
    color: black;
 +
    line-height: 1;
 +
    text-align:center;
 +
    position: relative;
 +
    left: 0px;
 +
    right: 0px;
 +
    display: block;
 
}
 
}
−
 
+
#bodyContent .colourbox {
−
/*Time to add the click effects*/
+
  list-style-type: none;
−
.slider input[name='slide_switch']:checked+label {
+
  background-color: #DCE7EF;
−
border-color: #666;
+
  border-radius: 25px;
−
opacity: 1;
+
 
}
 
}
−
/*Clicking any thumbnail now should change its opacity(style)*/
+
#bodyContent ul{
−
/*Time to work on the main images*/
+
  list-style-type: none;
−
.slider input[name='slide_switch'] ~ img {
+
−
opacity: 0;
+
−
transform: scale(1.1);
+
 
}
 
}
−
/*That hides all main images at a 110% size
+
#circles_home {
−
On click the images will be displayed at normal size to complete the effect
+
        margin: 50px 50px 50px 80px;
−
*/
+
}
−
.slider input[name='slide_switch']:checked+label+img {
+
#texthome{
−
opacity: 1;
+
  width: 80%;
−
transform: scale(1);
+
 
}
 
}
−
/*Clicking on any thumbnail now should activate the image related to it*/
 
  
−
/*We are done :)*/
 
 
</style>
 
</style>
−
</head></html>
+
</head>
−
{{Munich/Menu}}
+
<body onload="startStartScreen()">
−
<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>
+
−
</td>
+
−
</tr>
+
  
−
<tr>
+
<div class="container">
−
<td align=center valign=center colspan=3>
+
<div style="margin-top: 60px"></div>
−
<div class="captionPicture">
+
<div class="row">
−
<h2>Best Model</h2>
+
    <h1 style="line-height:60px">OXFORD iGEM 2017<br/><small><i>See cruzi </i></small><br/></h1>
−
</div>
+
−
</td>
+
−
<td align=center valign=center colspan=3>
+
−
<div class="captionPicture">
+
−
<h2>Best Applied Design</h2>
+
 
</div>
 
</div>
−
</td>
 
−
</tr>
 
  
−
<tr>
+
  <div class="row">
−
<td align=center valign=center colspan=3>
+
      <div id="myCarousel" class="carousel slide" data-ride="carousel">
−
<div class="captionPicture">
+
  <!-- Indicators -->
−
<h2>Best Hardware</h2>
+
  <ol class="carousel-indicators">
−
</div>
+
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
−
</td>
+
    <li data-target="#myCarousel" data-slide-to="1"></li>
−
<td align=center valign=center colspan=3>
+
    <li data-target="#myCarousel" data-slide-to="2"></li>
−
<div class="captionPicture">
+
    <li data-target="#myCarousel" data-slide-to="3"></li>
−
<h2>Best Software</h2>
+
    <li data-target="#myCarousel" data-slide-to="4"></li>
−
</div>
+
  </ol>
−
</td>
+
−
</tr>
+
  
 +
  <!-- Wrapper for slides -->
 +
  <div class="carousel-inner">
  
−
<tr>
+
    <div class="item active">
−
<td align=center valign=center colspan=2>
+
    <img src="https://static.igem.org/mediawiki/2017/9/92/T--Oxford--NewHome--awardresize.jpg" alt="Award">
−
<h3>Nominated for Best Wiki</h3>
+
<div class="carousel-caption">
−
</td>
+
    <a href="https://2017.igem.org/Team:Oxford/Team">
−
<td align=center valign=center colspan=2>
+
    <h2> MEET THE TEAM! </h2>
−
<h3>Nominated for Best Presentation</h3>
+
    </a>
−
</td>
+
    </div>
−
<td align=center valign=center colspan=2>
+
    </div>
−
<h3>Nominated for Best Poster</h3>
+
−
</td>
+
−
</tr>
+
  
−
<tr>
+
    <div class="item">
−
<td align=center valign=center colspan=2>
+
<img src="https://static.igem.org/mediawiki/2017/1/18/T--Oxford--NewHome--Posterresize.jpg" alt="Poster">
−
<h3>Nominated for Best Integrated Human Practices</h3>
+
    <div class="carousel-caption">
−
</td>
+
    <a href="https://2017.igem.org/Team:Oxford/Team">
−
<td align=center valign=center colspan=2>
+
    <h2> MEET THE TEAM! </h2>
−
<h3>Nominated for Best Education & Public Engagement</h3>
+
    </a>
−
</td>
+
    </div>
−
<td align=center valign=center colspan=2>
+
    </div>
−
<h3>Nominated for Best Measurement</h3>
+
−
</td>
+
−
</tr>
+
  
 +
    <div class="item">
 +
      <img src="https://static.igem.org/mediawiki/2017/8/81/T--Oxford--NewHome--Meetingresize.jpg" alt="Meeting">
 +
<div class="carousel-caption">
 +
    <a href="https://2017.igem.org/Team:Oxford/Team">
 +
    <h2> MEET THE TEAM! </h2>
 +
    </a>
 +
    </div>
 +
    </div>
  
−
<tr>
+
<div class="item">
−
<td align=center valign=center colspan=1></td>
+
      <img src="https://static.igem.org/mediawiki/2017/0/0a/T--Oxford--NewHome--Jokesresize.jpg" alt="Jokes">
−
<td align=center valign=center colspan=2>
+
<div class="carousel-caption">
−
<h3 style="margin-bottom: 50px">Nominated for Best Composite Part</h3>
+
    <a href="https://2017.igem.org/Team:Oxford/Team">
−
</td>
+
    <h2> MEET THE TEAM! </h2>
−
<td align=center valign=center colspan=2>
+
    </a>
−
<h3 style="margin-bottom: 50px">Nominated for Best Part Collection</h3>
+
    </div>
−
</td>
+
    </div>
−
<td align=center valign=center colspan=1></td>
+
−
</tr>
+
  
−
<tr><td colspan=6 align=middle valign=center>
+
    <div class="item">
−
<font size=10 ><b style="color: #51a7f9; font-size: 60px; margin-top: 20px">Gallery</b></font>
+
      <img src="https://static.igem.org/mediawiki/2017/2/2c/T--Oxford--NewHome--Ladiesresize.jpg" alt="Ladies">
−
</td></tr>
+
<div class="carousel-caption">
 +
    <a href="https://2017.igem.org/Team:Oxford/Team">
 +
    <h2> MEET THE TEAM! </h2>
 +
    </a>
 +
    </div>
 +
    </div>
 +
  </div>
  
−
<tr> <td colspan=6 align=middle valing=center>
+
  <!-- Left and right controls -->
−
<!--
+
  <a class="left carousel-control" href="#myCarousel" data-slide="prev">
−
We will make a slider with stylized thumbnails using CSS3
+
    <span class="glyphicon glyphicon-chevron-left"></span>
−
The markup is very simple:
+
    <span class="sr-only">Previous</span>
−
Radio Inputs
+
  </a>
−
Labels with thumbnails to detect click event
+
  <a class="right carousel-control" href="#myCarousel" data-slide="next">
−
Main Image
+
    <span class="glyphicon glyphicon-chevron-right"></span>
−
-->
+
    <span class="sr-only">Next</span>
−
<div class="slider">
+
  </a>
−
+
</div>
−
<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"/>
+
<div class="row">
−
<label for="id1">
+
      <div class="col-sm-6">
−
<img src="https://static.igem.org/mediawiki/2017/b/b8/T--Munich--Review2017_5.jpeg" width="100"/>
+
        <a href="https://2017.igem.org/Team:Oxford/Awards">
−
</label>
+
        <img class="img-responsive img-center" style="width:100%" src="https://static.igem.org/mediawiki/2017/f/f4/T--Oxford--NewHome--Prizesbox.png">
−
<img src="https://static.igem.org/mediawiki/2017/b/b8/T--Munich--Review2017_5.jpeg" width= 900/>
+
        </a>
−
+
      </div>
−
+
      <div class="col-sm-6">
−
<input type="radio" name="slide_switch" id="id4"/>
+
        <a class="twitter-timeline" data-width="100%" data-height="500" href="https://twitter.com/OxfordiGEM?ref_src=twsrc%5Etfw">Tweets by OxfordiGEM</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
−
<label for="id4">
+
      </div>
−
<img src="https://static.igem.org/mediawiki/2017/f/f0/T--Munich--Review2017_21.jpeg" width="100"/>
+
  </div>
−
</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"/>
+
<div class="row">
−
<label for="id6">
+
<div class="col-sm-12">
−
<img src="https://static.igem.org/mediawiki/2017/f/f9/T--Munich--Review2017_13.jpeg" width="100"/>
+
<div class="embed-responsive embed-responsive-16by9">
−
</label>
+
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/4heo3c2qvWo" allowfullscreen></iframe>
 +
</div>
 +
</div>
 +
</div>
  
−
<img src="https://static.igem.org/mediawiki/2017/f/f9/T--Munich--Review2017_13.jpeg" width=900/>
+
</div>
−
<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 class="container"> 
 +
<div style="margin-top: 60px"></div>
 +
<div class="row">
 +
<h2> Our Project </h2><br/>
 +
</div>
 +
<div class="row" align="centre">
  
 +
<a href="https://2017.igem.org/Team:Oxford/Game"> <img class="img-responsive img-center" src="https://static.igem.org/mediawiki/2017/thumb/a/a6/T--oxford--play2.png/320px-T--oxford--play2.png"> </a>
 +
 +
<p><br/>The aim of our project was to develop a cell-free detection system for congenital Chagas disease in the acute phase by detecting the cruzipain in the blood.
 +
Congenital Chagas disease is a growing global concern and at present, the acute phase of Chagas disease is difficult to diagnose as it is asymptomatic and current diagnostics are both expensive and inaccessible to the majority of those affected. Our final diagnostic kit would allow Chagas disease to be detected by preventing the clotting of a blood sample. </p>
 +
<p> We imagine that this system would be adaptable for other parasites and pathogens which have similar difficulties in detection, both in the input for the system and the options for output.</p>
 +
  </div>
 +
</div>
 +
</div>
 +
 +
<div class="container"> 
 +
<div style="margin-top: 60px"></div>
 +
<div class="row">
 +
    <div class="col-sm-3">
 +
    <form action="https://2017.igem.org/Team:Oxford/Description">
 +
  <button type="submit" class="btn btn-default btn-circle-lg" style="background-color: rgb(72,145,220)"><span id="button-lg-span">Project<br>Description</span></button>
 +
    </form>
 +
    </div>
 +
   
 +
    <div class="col-sm-3">
 +
    <form action="https://2017.igem.org/Team:Oxford/Overview_Wet_Lab">
 +
    <button type="submit" class="btn btn-default btn-circle-lg" style="background-color: rgb(234,139,68)"><span id="button-lg-span">Wet Lab<br>Overview</span></button>
 +
    </form>
 +
    </div>
 +
 +
    <div class="col-sm-3">
 +
    <form action="https://2017.igem.org/Team:Oxford/Model">
 +
    <button type="submit" class="btn btn-default btn-circle-lg" style="background-color: rgb(185, 207, 150)"><span id="button-lg-span">Dry Lab<br>Overview</span></button>
 +
    </form>
 +
    </div>
 +
   
 +
    <div class="col-sm-3">
 +
    <form action="https://2017.igem.org/Team:Oxford/Applied_Design">
 +
    <button type="submit" class="btn btn-default btn-circle-lg" style="background-color: rgb(95, 155, 175)"><span id="button-lg-span">Applied<br>Design</span></button>
 +
    </form>
 +
    </div>
 +
   
 +
</div>
 
</div>
 
</div>
−
</td>
 
−
</tr>
 
  
−
<tr>
+
</body>
−
<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}}
+
{{UCAS-China/footer}}

Latest revision as of 10:25, 4 October 2018

OXFORD iGEM 2017
See cruzi

Our Project



The aim of our project was to develop a cell-free detection system for congenital Chagas disease in the acute phase by detecting the cruzipain in the blood. Congenital Chagas disease is a growing global concern and at present, the acute phase of Chagas disease is difficult to diagnose as it is asymptomatic and current diagnostics are both expensive and inaccessible to the majority of those affected. Our final diagnostic kit would allow Chagas disease to be detected by preventing the clotting of a blood sample.

We imagine that this system would be adaptable for other parasites and pathogens which have similar difficulties in detection, both in the input for the system and the options for output.