Difference between revisions of "Team:Oxford"

(Undo revision 507996 by Kmansatta (talk))
 
(205 intermediate revisions by 8 users not shown)
Line 2: Line 2:
 
<html>
 
<html>
 
<head>
 
<head>
−
 
+
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 
<style>
 
<style>
−
.center {
+
canvas {
−
     margin: auto;
+
     background-color: #e8d5d7;
−
     width: 90%;
+
     width:80%;
 +
}
 +
#canvas_happy{
 +
    background-color: #002147;
 
}
 
}
−
</style>
 
  
−
<script>
+
hr {
−
$(".cruzi-magnify").ready(function(){
+
    display: block;
 +
    height: 1px;
 +
    border: 0;
 +
    border-top: 1px solid black;
 +
    margin: 1em 0;
 +
    padding: 0;
 +
}
  
−
var native_width = 4000;
+
.btn-circle {
−
var native_height = 2500;
+
  width: 50px;
 +
  height: 50px;
 +
    padding: 10px 16px;
 +
    border-radius: 50%;
 +
    font-size: 24px;
 +
    line-height: 1.33;
 +
    background-color: rgba(95,155,175,0.9);
 +
}
  
−
//Now the mousemove function
+
.btn-circle-lg {
−
$(".cruzi-magnify").mousemove(function(e){
+
    width: 240px;
−
//When the user hovers on the image, the script will first calculate
+
    height: 240px;
−
//the native dimensions if they don't exist. Only after the native dimensions
+
    padding: 10px 16px;
−
//are available, the script will show the zoomed version.
+
    border-radius: 50%;
−
+
    font-size: 60px;
−
console.log("mousemove");
+
    line-height: 1.33;
−
+
}
−
//x/y coordinates of the mouse
+
−
//This is the position of .magnify with respect to the document.
+
−
var magnify_offset = $(this).offset();
+
−
//We will deduct the positions of .magnify from the mouse positions with
+
−
//respect to the document to get the mouse positions with respect to the
+
−
//container(.magnify)
+
−
var mx = e.pageX - magnify_offset.left;
+
−
var my = e.pageY - magnify_offset.top;
+
−
+
−
//Finally the code to fade out the glass if the mouse is outside the container
+
−
var moutside = false;
+
−
+
−
if (mx < $(this).width()) {
+
−
if (my < $(this).height()) {
+
−
if (mx > 0) {
+
−
if (my > 0) {
+
−
moustide = true;
+
−
console.log("inside");
+
−
}
+
−
}
+
−
}
+
−
}
+
−
+
−
//if (mx > $(this).width()) {
+
−
// if (my > $(this).height()) {
+
−
// if (mx < 0) {
+
−
// if (my < 0) {
+
−
// moustide = false;
+
−
// }
+
−
// }
+
−
// }
+
−
//}
+
  
−
if(moutside)
+
.videoWrapper {
−
{
+
position: relative;
−
//The background position of .cruzi-large will be changed according to the position
+
padding-bottom: 56.25%; /* 16:9 */
−
//of the mouse over the .cruzi-small image. So we will get the ratio of the pixel
+
padding-top: 25px;
−
//under the mouse pointer with respect to the image and use that to position the
+
height: 0;
−
//large image inside the magnifying glass
+
}
−
var rx = Math.round(mx/$(".cruzi-small").width()*native_width - $(".cruzi-large").width()/2)*-1;
+
.videoWrapper iframe {
−
var ry = Math.round(my/$(".cruzi-small").height()*native_height - $(".cruzi-large").height()/2)*-1;
+
position: absolute;
−
var bgp = rx + "px " + ry + "px";
+
top: 0;
−
+
left: 0;
−
//Time to move the magnifying glass with the mouse
+
width: 100%;
−
var px = mx - $(".cruzi-large").width()/2;
+
height: 100%;
−
var py = my - $(".cruzi-large").height()/2;
+
}
−
//Now the glass moves with the mouse
+
−
//The logic is to deduct half of the glass's width and height from the
+
−
//mouse coordinates to place it with its center at the mouse coordinates
+
−
+
−
//If you hover on the image now, you should see the magnifying glass in action
+
−
$(".cruzi-large").css({left: px, top: py, backgroundPosition: bgp});
+
−
}
+
−
if (mx > 563) {
+
−
if (mx < 582) {
+
−
if (my > 315) {
+
−
if (my < 336) {
+
−
$(".cruzi-message").fadeIn(1000);
+
−
}
+
−
}
+
−
}
+
−
}
+
−
})
+
−
})
+
−
</script>
+
  
−
<style type="text/css">
+
.carousel-caption a {
−
/*Some CSS*/
+
    font-size: 50px;
−
* {margin: 0; padding: 0;}
+
    font-weight: bolder;
−
.cruzi-magnify {width: 800px; margin: 10px auto; position: relative; float: none}
+
    text-shadow: 1px 3px 5px rgba(0,0,0,0.8);
 +
    color: white;
 +
}
  
−
/*Lets create the magnifying glass*/
+
#button-span {
−
.cruzi-large {
+
    font-weight: bold;
−
width: 175px; height: 175px;
+
    font-size: 20px;
−
position: absolute;
+
    color: black;
−
border-radius: 100%;
+
    line-height: 0.2;
−
+
    text-align:center;
−
/*Multiple box shadows to achieve the glass effect*/
+
    position: relative;
−
box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85),
+
    left: 0px;
−
0 0 7px 7px rgba(0, 0, 0, 0.25),
+
    right: 0px;
−
inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
+
    display: block;
−
+
−
/*Lets load up the large image first*/
+
−
background: url('https://static.igem.org/mediawiki/2017/f/f8/T-Oxford-CruziGameLarge.png') no-repeat;
+
−
+
−
/*hide the glass by default*/
+
−
display: block;
+
−
+
 
}
 
}
  
−
.cruzi-message {
+
#button-lg-span {
−
width: 100%;
+
    font-weight: bold;
−
padding: 0 10%;
+
    font-size: 20px;
−
height: 175px;
+
    color: black;
−
border-radius: 100%;
+
    line-height: 1;
−
+
    text-align:center;
−
font: bold 8pt Arial, sans-serif;
+
    position: relative;
−
line-height: 175px;
+
    left: 0px;
−
text-align: center;
+
    right: 0px;
−
display: none;
+
    display: block;
−
+
}
−
background: rgba(0, 255, 0, 0.4);
+
#bodyContent .colourbox {
 +
  list-style-type: none;
 +
  background-color: #DCE7EF;
 +
  border-radius: 25px;
 +
}
 +
#bodyContent ul{
 +
  list-style-type: none;
 +
}
 +
#circles_home {
 +
        margin: 50px 50px 50px 80px;
 +
}
 +
#texthome{
 +
  width: 80%;
 
}
 
}
  
−
/*To solve overlap bug at the edges during magnification*/
 
−
.cruzi-small { display: block; }
 
 
</style>
 
</style>
−
 
 
</head>
 
</head>
−
<body>
+
<body onload="startStartScreen()">
−
 
+
−
<div class="container-fluid">
+
−
<div class="jumbotron"><h2 class="text-center">Work in Prgress</h2></div>
+
−
<div class="jumbotron">
+
−
<h1 class="text-center">Find the cruzi!</h1>
+
−
<p>
+
−
<div class="cruzi-magnify">
+
−
+
−
<!-- This is the magnifying glass which will contain the original/large version -->
+
−
<div class="cruzi-large">
+
−
<div class="cruzi-message">Yay! You've found it!</div>
+
−
</div>
+
−
+
−
<!-- This is the small image -->
+
−
<img class="cruzi-small" src="https://static.igem.org/mediawiki/2017/f/f6/T-Oxford-CruziGameSmall.png" width="800"/>
+
−
+
−
</div>
+
  
−
<!-- Lets load up prefixfree to handle CSS3 vendor prefixes -->
+
<div class="container">
−
<script src="http://thecodeplayer.com/uploads/js/prefixfree.js" type="text/javascript"></script>
+
<div style="margin-top: 60px"></div>
−
</p>
+
<div class="row">
−
</div>
+
     <h1 style="line-height:60px">OXFORD iGEM 2017<br/><small><i>See cruzi </i></small><br/></h1>
−
+
−
  <div class="jumbotron">
+
−
     <h1 class="text-center"><i>See. cruzi</i></h1>     
+
−
    <p><b>Developing a cell-free detection system for Chagas disease in the acute phase by detecting biomarkers in the blood</b></p>
+
−
    <p>The aim of our iGEM project is to design a cell-free diagnosis kit to detect the presence of biomarkers specific to the <i>Trypansosoma cruzi</i>, the protozoan parasite responsible for Chagas disease, a neglected tropical disease impacting 6-7 million people primarily in Latin America.</p>
+
−
    <p>Currently, the acute (early) phase of Chagas disease is difficult to diagnose, due to it being asymptomatic and methods using DNA amplification or immunoassays being both expensive and inaccessible to the majority of those affected by Chagas disease. Current treatments using benznidazole and nifurtimox are almost 100% effective if given shortly after the onset of the acute phase. However, lack of diagnosis in the acute phase leads to the onset of the chronic phase, which causes irreversible pathological consequences to the heart, digestive system, and nervous system.</p>
+
−
    <p>The final diagnostic kit would allow Chagas disease to be diagnosed in the acute phase by preventing the clotting of a blood sample, by releasing hirudin (a peptide from leeches) upon cleavage by the protease cruzipain (a cysteine protease specific to <i>T. cruzi</i>). Our system would ultimately be completely cell-free, with the components freeze-dried and competent after rehydration, allowing it to be used in the field without the need for expensive equipment or highly trained professionals - all it will require is 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.</p>
+
−
    <p>We are developing two methods to detect the presence of cruzipain, both being modelled in <i>E. coli</i>. The first is DNA based, and involves the cleavage of a repressor protein to lead to expression of hirudin (modelled using fluorescent proteins and using  TEV instead of cruzipain). The second involves tagging hirudin (again modelled with a fluorophore) to outer membrane vesicles, where the peptide could be cleaved and released from OmpA by cruzipain (modelled with TEV). Our systems would ultimately be completely cell-free, with the components freeze-dried and competent after rehydration.</p>
+
−
    <p>Chagas disease claims over 12000 lives per year. We believe that the death toll could be significantly reduced by a synthetic biology solution, which is cost effective, accessible, and accurate in the swift diagnosis of Chagas disease; a solution that our project aims to provide.</p>
+
−
    <p>If you want to collaborate with us, please send us an email:<u>oxfordigem@bioch.ox.ac.uk</u></p>
+
−
    <p> Please also support us by liking our facebook page &rarr; <a href="https://www.facebook.com/oxfordigem/"><img src="https://static.igem.org/mediawiki/2017/e/e4/T--oxford--fbicon.png" alt="Facebook Page" width="20" height=“20"> </a> </p>
+
−
    <div class="center" > <img class="img-responsive" src="https://static.igem.org/mediawiki/2017/1/10/Oxford_banner.png"> </div>
+
−
    </div>
+
−
  <p>This is some text.</p>        
+
 
</div>
 
</div>
  
 +
  <div class="row">
 +
      <div id="myCarousel" class="carousel slide" data-ride="carousel">
 +
  <!-- Indicators -->
 +
  <ol class="carousel-indicators">
 +
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
 +
    <li data-target="#myCarousel" data-slide-to="1"></li>
 +
    <li data-target="#myCarousel" data-slide-to="2"></li>
 +
    <li data-target="#myCarousel" data-slide-to="3"></li>
 +
    <li data-target="#myCarousel" data-slide-to="4"></li>
 +
  </ol>
  
 +
  <!-- Wrapper for slides -->
 +
  <div class="carousel-inner">
  
−
<div class="clear"></div>
+
    <div class="item active">
 +
    <img src="https://static.igem.org/mediawiki/2017/9/92/T--Oxford--NewHome--awardresize.jpg" alt="Award">
 +
<div class="carousel-caption">
 +
    <a href="https://2017.igem.org/Team:Oxford/Team">
 +
    <h2> MEET THE TEAM! </h2>
 +
    </a>
 +
    </div>
 +
    </div>
  
−
<div class="column half_size" >
+
    <div class="item">
−
<h5>Before you start: </h5>
+
<img src="https://static.igem.org/mediawiki/2017/1/18/T--Oxford--NewHome--Posterresize.jpg" alt="Poster">
−
<p> Please read the following pages:</p>
+
    <div class="carousel-caption">
−
<ul>
+
    <a href="https://2017.igem.org/Team:Oxford/Team">
−
<li>  <a href="https://2017.igem.org/Competition">Competition Hub</a> </li>
+
    <h2> MEET THE TEAM! </h2>
−
<li> <a href="https://2017.igem.org/Competition/Deliverables/Wiki">Wiki Requirements page</a></li>
+
    </a>
−
<li> <a href="https://2017.igem.org/Resources/Template_Documentation">Template documentation</a></li>
+
    </div>
−
</ul>
+
    </div>
−
</div>
+
  
−
<div class="column half_size" >
+
    <div class="item">
−
<div class="highlight">
+
      <img src="https://static.igem.org/mediawiki/2017/8/81/T--Oxford--NewHome--Meetingresize.jpg" alt="Meeting">
−
<h5> Styling your wiki </h5>
+
<div class="carousel-caption">
−
<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>
+
    <a href="https://2017.igem.org/Team:Oxford/Team">
−
<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>  
+
    <h2> MEET THE TEAM! </h2>
−
</div>
+
    </a>
−
</div>
+
    </div>
 +
    </div>
  
−
<div class="column full_size" >
+
<div class="item">
−
<h5> Wiki template information </h5>
+
      <img src="https://static.igem.org/mediawiki/2017/0/0a/T--Oxford--NewHome--Jokesresize.jpg" alt="Jokes">
−
<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="carousel-caption">
 +
    <a href="https://2017.igem.org/Team:Oxford/Team">
 +
    <h2> MEET THE TEAM! </h2>
 +
    </a>
 +
    </div>
 +
    </div>
  
−
</div>  
+
    <div class="item">
 +
      <img src="https://static.igem.org/mediawiki/2017/2/2c/T--Oxford--NewHome--Ladiesresize.jpg" alt="Ladies">
 +
<div class="carousel-caption">
 +
    <a href="https://2017.igem.org/Team:Oxford/Team">
 +
    <h2> MEET THE TEAM! </h2>
 +
    </a>
 +
    </div>
 +
    </div>
 +
  </div>
  
 +
  <!-- Left and right controls -->
 +
  <a class="left carousel-control" href="#myCarousel" data-slide="prev">
 +
    <span class="glyphicon glyphicon-chevron-left"></span>
 +
    <span class="sr-only">Previous</span>
 +
  </a>
 +
  <a class="right carousel-control" href="#myCarousel" data-slide="next">
 +
    <span class="glyphicon glyphicon-chevron-right"></span>
 +
    <span class="sr-only">Next</span>
 +
  </a>
 +
</div>
  
 +
<div class="row">
 +
      <div class="col-sm-6">
 +
        <a href="https://2017.igem.org/Team:Oxford/Awards">
 +
        <img class="img-responsive img-center" style="width:100%" src="https://static.igem.org/mediawiki/2017/f/f4/T--Oxford--NewHome--Prizesbox.png">
 +
        </a>
 +
      </div>
 +
      <div class="col-sm-6">
 +
        <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>
 +
      </div>
 +
  </div>
  
−
 
+
<div class="row">
−
<div class="column half_size" >
+
<div class="col-sm-12">
−
<h5> Editing your wiki </h5>
+
<div class="embed-responsive embed-responsive-16by9">
−
<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>  
+
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/4heo3c2qvWo" allowfullscreen></iframe>
−
<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>
+
</div>
−
 
+
</div>
 
</div>
 
</div>
  
 +
</div>
  
−
<div class="column half_size" >
+
<div class="container">
−
<h5>Tips</h5>
+
<div style="margin-top: 60px"></div>
−
<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>
+
<div class="row">
−
<ul>
+
<h2> Our Project </h2><br/>
−
<li>State your accomplishments! Tell people what you have achieved from the start. </li>
+
−
<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>
+
−
<li>Avoid using very small fonts and low contrast colors; information should be easy to read.  </li>
+
−
<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>
+
−
<li>Have lots of fun! </li>
+
−
</ul>  
+
 
</div>
 
</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>
  
−
<div class="column half_size" >
+
<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.  
−
<h5>Inspiration</h5>
+
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> You can also view other team wikis for inspiration! Here are some examples:</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>
−
<ul>
+
  </div>
−
<li> <a href="https://2014.igem.org/Team:SDU-Denmark/"> 2014 SDU Denmark </a> </li>
+
−
<li> <a href="https://2014.igem.org/Team:Aalto-Helsinki">2014 Aalto-Helsinki</a> </li>
+
−
<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>
 +
</div>
  
−
<div class="column half_size" >
+
<div class="container">
−
<h5> Uploading pictures and files </h5>
+
<div style="margin-top: 60px"></div>
−
<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 />
+
<div class="row">
−
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>
+
    <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>
  
−
<a href="https://2017.igem.org/Special:Upload">
+
    <div class="col-sm-3">
−
UPLOAD FILES
+
    <form action="https://2017.igem.org/Team:Oxford/Model">
−
</a>
+
    <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>
−
</p>
+
    </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>
  
 +
</body>
  
−
 
−
 
−
 
−
 
−
</body>
 
 
</html>
 
</html>
 +
{{Oxford/footer}}

Latest revision as of 23:37, 15 December 2017

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.