Difference between revisions of "Team:Utrecht/Placeholder"

(Created page with "{{Utrecht}} <html> <div class="column full_size" > <img src="http://placehold.it/2000x300/d3d3d3/f2f2f2"> </div> <div class="column full_size" > <h1> Welcome to PLACEHOLDE...")
 
 
(60 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
{{Utrecht}}
+
<!DOCTYPE html>
 
<html>
 
<html>
 +
<head>
 +
<link href="https://fonts.googleapis.com/css?family=Nunito+Sans" rel="stylesheet">
 +
 +
<link rel='stylesheet prefetch' href='https://cdn3.devexpress.com/jslib/17.1.3/css/dx.spa.css'>
 +
<link rel='stylesheet prefetch' href='https://cdn3.devexpress.com/jslib/17.1.3/css/dx.common.css'>
 +
<link rel='stylesheet prefetch' href='https://cdn3.devexpress.com/jslib/17.1.3/css/dx.light.css'>
 +
 +
<style>
 +
#top_title { display: none !important; }
 +
/*Override default CSS*/
 +
#sideMenu, #top_title {display:none;}
 +
#content { padding:0px; width:100%; margin-top:-7px; margin-left:0px; background-color: transparent;}
  
  
−
<div class="column full_size" >
+
/* set all basic objects to neutral formatting*/
−
<img src="http://placehold.it/2000x300/d3d3d3/f2f2f2">
+
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption {
−
</div>
+
    margin: 0;
 +
    padding: 0;
 +
    border: 0;
 +
    outline: 0;
 +
    font-size: 100%;
 +
    vertical-align: baseline;
 +
    background: transparent;
 +
}
  
−
<div class="column full_size" >
+
#globalWrapper {
−
<h1> Welcome to PLACEHOLDER UTRECHT</h1>
+
    margin: 0;
−
<p>Your team has been approved and you are ready to start the iGEM season! </p>
+
    padding: 0;
−
</div>
+
    border: 0;
 +
    outline: 0;
 +
    font-size: 100%;
 +
    vertical-align: baseline;
 +
    background: transparent;
 +
}
  
−
<div class="clear"></div>
 
  
−
<div class="column half_size" >
+
/* set page to fill window*/
−
<h5>Before you start: </h5>
+
html{
−
<p> Please read the following pages:</p>
+
  height: 100%;
−
<ul>
+
}
−
<li>  <a href="https://2017.igem.org/Competition">Competition Hub</a> </li>
+
body {
−
<li> <a href="https://2017.igem.org/Competition/Deliverables/Wiki">Wiki Requirements page</a></li>
+
  min-height: 100%;
−
<li> <a href="https://2017.igem.org/Resources/Template_Documentation">Template documentation</a></li>
+
}
−
</ul>
+
  </style>
−
</div>
+
 
 +
<style type="text/css">
 +
body, html {
 +
  height: 100%;
 +
  background: #fff;
 +
}
  
−
<div class="column half_size" >
+
.container {
−
<div class="highlight">
+
  width: 60px;
−
<h5> Styling your wiki </h5>
+
  height: 60px;
−
<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>
+
  margin: 0 auto 0;
−
<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>
+
  -webkit-perspective: 1000;
−
</div>
+
  -webkit-backface-visibility: hidden;
−
</div>
+
  background: #fff;
 +
}
  
−
<div class="column full_size" >
+
.tutorial_button {
−
<h5> Wiki template information </h5>
+
position: relative;
−
<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>
+
    display: block;
 +
    width: 60px;
 +
    height: 60px;
 +
    font-size: 2.5em;
 +
    font-weight: light;
 +
    font-family: 'Trebuchet MS', sans-serif;
 +
    text-transform: uppercase;
 +
    text-align: center;
 +
    line-height: 60px;
 +
    letter-spacing: -1px;
 +
    color: white;
 +
    border: none;
 +
    border-radius: 50%;
 +
    background: #ff8d00;
 +
    cursor: pointer;
 +
border: 5px solid #ffb252;
 +
filter: grayscale(100%);
 +
transition: all 0.5s ease;
 +
}
  
−
</div>
+
.tutorial_button.selected {
 +
filter: grayscale(0%);
 +
}
  
 +
.tutorial_button.pulsing {
 +
    box-shadow: 0 0 0 0 rgba(255, 212, 0, 0.8);
 +
    -webkit-animation: pulse 2s infinite;
 +
}
  
 +
/*.tutorial_button.pulsing:hover {
 +
  -webkit-animation: none;
 +
}*/
  
 +
@-webkit-keyframes pulse {
 +
  70% {
 +
    box-shadow: 0 0 0 50px rgba(90, 153, 212, 0);
 +
  }
 +
  100% {
 +
    box-shadow: 0 0 0 0 rgba(90, 153, 212, 0);
 +
  }
 +
}
  
−
<div class="column half_size" >
+
</style>
−
<h5> Editing your wiki </h5>
+
−
<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>
+
<style type="text/css">
−
<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>
+
body {
 +
color: white;
 +
font-family: 'Nunito Sans', sans-serif;
 +
margin: 0;
 +
padding: 0;
 +
}
 +
 +
* {
 +
transition: all 0.5s ease;
 +
}
 +
 +
.top-menu {
 +
position: fixed;
 +
top: 18px;
 +
left: 0;
 +
width: 100%;
 +
height: 50px;
 +
background: #0096ff;
 +
overflow: hidden;
 +
z-index: 2;
 +
line-height: 100%;
 +
}
 +
 +
.top-menu .menu-underline { position: absolute; height: 3px; background: white; transition: all 0.3s ease; }
 +
 +
.top-menu .quote { opacity: 0; }
 +
.top-menu .sections { opacity: 0; pointer-events: none; }
 +
 +
.top-menu.active {
 +
height: 345px;
 +
background: #005b9b;
 +
}
 +
 +
.top-menu.active .quote { opacity: 1; }
 +
/*.top-menu.active .sections { opacity: 1; display: block; }*/
 +
 +
.top-menu .sections { position: absolute;
 +
left: 0;
 +
margin: 0;
 +
margin-left: 25px;
 +
margin-top: 75px;
 +
width: 100%;
 +
text-align: center;
 +
}
 +
 +
.top-menu .section { width: 200px; display: inline-block; padding: 15px; vertical-align: top; }
 +
/*.top-menu .section:last-of-type { margin-right: 0; }*/
 +
.top-menu .section .thumb { width: 100%; height: 100px; background: #00487a; }
 +
.top-menu .section .text { width: 100%; text-align: center; margin-top: 10px; color: white; }
 +
.top-menu .section .desc { width: 100%; text-align: center; margin-top: 10px; font-size: 12px; color: white; }
 +
 +
.top-menu .section.active { background: #0075c8; }
 +
 +
.top-menu[data-key='home'] .sections[data-key='home'] { opacity: 1; pointer-events: all; }
 +
.top-menu[data-key='exp'] .sections[data-key='exp'] { opacity: 1; pointer-events: all; }
 +
.top-menu[data-key='hp'] .sections[data-key='hp'] { opacity: 1; pointer-events: all; }
 +
.top-menu[data-key='team'] .sections[data-key='team'] { opacity: 1; pointer-events: all; }
 +
 +
.top-menu ul {
 +
position: absolute;
 +
left: calc(50% - 290px);
 +
margin: 0;
 +
margin-top: 15px;
 +
list-style-image: none;
 +
color: white;
 +
}
 +
 +
.top-menu li {
 +
list-style-type: none;
 +
float: left;
 +
margin-right: 50px;
 +
cursor: pointer;
 +
}
 +
 +
.top-menu ul::after  {
 +
clear: both;
 +
}
 +
 +
.menu-container {
 +
position: fixed;
 +
top: 125px;
 +
left: 25px;
 +
line-height: 100%;
 +
}
 +
 +
.menu-container.active {
 +
top: 360px;
 +
}
 +
 +
.menu-container>div {
 +
height: 25px;
 +
margin-bottom: 10px;
 +
color: #a2a2a2;
 +
font-size: 16px;
 +
}
 +
 +
.menu-container .active {
 +
color: #005b9b;
 +
}
 +
 +
.menu-container .text {
 +
float: left;
 +
padding-left: 10px;
 +
height: 100%;
 +
}
 +
 +
.menu-container .marker {
 +
float: left;
 +
width: 27px;
 +
height: 100%;
 +
text-align: center;
 +
}
 +
 +
.menu-container .marker div {
 +
display: inline-block;
 +
background: #0096ff;
 +
width: 10px;
 +
height: 10px;
 +
border-radius: 50%;
 +
vertical-align: middle;
 +
}
 +
 +
.menu-container .active .marker div {
 +
background: #005b9b;
 +
width: 15px;
 +
height: 15px;
 +
}
 +
 +
.page-container {
 +
position: absolute;
 +
top: 120px;
 +
left: 400px;
 +
line-height: 100%;
 +
}
 +
 +
.page-container .page-heading {
 +
font-size: 25px;
 +
color: #005b9b;
 +
margin-bottom: 25px;
 +
}
 +
 +
.page-container .page-content {
 +
color: black;
 +
width: 750px;
 +
text-align: justify;
 +
line-height: 150%;
 +
}
 +
 +
/*body[data-key='home'] .menu-container { display: none; }*/
 +
 +
.tutorial { height: 511px; }
 +
 +
h2 { font-size: 20px; color: #005b9b; margin-bottom: 10px; }
 +
</style>
 +
</head>
 +
<body data-key="home">
  
 +
<div class="top-menu" data-key="home">
 +
<div>
 +
<ul class="top-menu-links">
 +
<li data-key="home" class="active">Home</li>
 +
<li data-key="exp">Experimental</li>
 +
<li data-key="hp">Human practices</li>
 +
<li data-key="team">Team & Sponsors</li>
 +
</ul>
 +
 +
<div class="menu-underline"></div>
 +
 +
<div class="quote"></div>
 +
 +
<div class="sections" data-key="home">
 +
<br />
 +
<br />
 +
 +
</div>
 +
 +
<div class="sections" data-key="exp">
 +
<div class="section">
 +
<div class="thumb"></div>
 +
<div class="text">Cas9 & Cpf1 secretion<br/>and activity</div>
 +
<div class="desc">Comparison of endonuclease activity for Cas9 and Cpf1 that has been produced in, and excreted by, HEK293 cells.</div>
 +
</div>
 +
<div class="section">
 +
<div class="thumb"><img height="100" src="https://static.igem.org/mediawiki/2017/b/bc/MESA.png"></div>
 +
<div class="text">MESA two-component system replication</div>
 +
<div class="desc">Details on the MESA two-component system, explanation of its relation to our design and the results of its reproduction.</div>
 +
</div>
 +
<div class="section">
 +
<div class="thumb"></div>
 +
<div class="text">OUTCASST system production</div>
 +
<div class="desc">Detailed explanation of the OUTCASST mechanism, experimental progress and technical prospects.</div>
 +
</div>
 +
<div class="section">
 +
<div class="thumb"><img height="100" src="https://static.igem.org/mediawiki/2017/6/6b/Modelling.png"></div>
 +
<div class="text">Modeling and<br />mathematics</div>
 +
<div class="desc">Ordinary differential equations, cellular automaton and an object based model for optimal linker-length estimation.</div>
 +
</div>
 +
<div class="section">
 +
<div class="thumb"><img height="100" src="https://static.igem.org/mediawiki/2017/6/63/Interlab1.png"></div>
 +
<div class="text">Interlab study participation</div>
 +
<div class="desc">Results and details of our measurements for the iGEM 2017 Interlab Study.</div>
 +
</div>
 +
</div>
 +
 +
<div class="sections" data-key="hp">
 +
<div class="section">
 +
<div class="thumb"></div>
 +
<div class="text">Stakeholders & opinions</div>
 +
<div class="desc">Interviews and dialogues with stakeholders, potential users, third parties and experts relating to pathogen detection or DNA-based diagnostics.</div>
 +
</div>
 +
<div class="section">
 +
<div class="thumb"><img height="100" src="https://static.igem.org/mediawiki/2017/8/8d/Igemutrecht_safety.png"></div>
 +
<div class="text">Risks & safety-issues</div>
 +
<div class="desc">Implications and design considerations relating to safety in the usage and implementation of OUTCASST as a diagnostics tool.</div>
 +
</div>
 +
<div class="section">
 +
<div class="thumb"></div>
 +
<div class="text">Design & integration</div>
 +
<div class="desc">OUTCASST toolkit and product design with factors such as bio-safety and user-friendliness taken into account.</div>
 +
</div>
 +
</div>
 +
 +
<div class="sections" data-key="team">
 +
<div class="section">
 +
<div class="thumb"><img height="100" src="https://static.igem.org/mediawiki/2017/5/5e/Team_comp.png"></div>
 +
<div class="text">Meet our team</div>
 +
<div class="desc">About us, our interests and roles in the team and our supervisors.</div>
 +
</div>
 +
<div class="section">
 +
<div class="thumb"></div>
 +
<div class="text">Sponsors</div>
 +
<div class="desc">A listing of our sponsors, how they assisted us and our gratitude for their assistance.</div>
 +
</div>
 +
<div class="section">
 +
<div class="thumb"><img height="100" src="https://static.igem.org/mediawiki/2017/6/64/Achievements.png"></div>
 +
<div class="text">Achievements</div>
 +
<div class="desc">A short description of all that we have achieved during our participation in the iGEM.</div>
 +
</div>
 +
</div>
 +
</div>
 
</div>
 
</div>
−
 
+
<div class="menu-container">
−
 
+
<div style="position: absolute; left: 13px; top: 10px; height: 110px; width: 2px; background: #0096ff; z-index: -1;"></div>
−
<div class="column half_size" >
+
<div class="item active">
−
<h5>Tips</h5>
+
<div class="marker"><div></div></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="text">The problem</div>
−
<ul>
+
</div>
−
<li>State your accomplishments! Tell people what you have achieved from the start. </li>
+
<div class="item">
−
<li>Be clear about what you are doing and how you plan to do this.</li>
+
<div class="marker"><div></div></div>
−
<li>You have a global audience! Consider the different backgrounds that your users come from.</li>
+
<div class="text">The system</div>
−
<li>Make sure information is easy to find; nothing should be more than 3 clicks away.  </li>
+
</div>
−
<li>Avoid using very small fonts and low contrast colors; information should be easy to read.  </li>
+
<div class="item">
−
<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>
+
<div class="marker"><div></div></div>
−
<li>Have lots of fun! </li>
+
<div class="text">Subheading 3</div>
−
</ul>  
+
</div>
 +
<div class="item">
 +
<div class="marker"><div></div></div>
 +
<div class="text">Subheading 4</div>
 +
</div>
 
</div>
 
</div>
 +
<div class="page-container">
 +
<div class="page-heading">The OUTCASST two-component system</div>
 +
<div class="page-content">
 +
 +
This year, Utrecht University participates in the iGEM for the first time. We aim to create a cheap DNA detection kit for disease diagnosis that is easy to use and does not rely on complicated sequencing technologies.
 +
 +
<br />
 +
<br />
 +
<h2>The problem</h2>
 +
Disease diagnosis is of great importance for healthcare. In developing countries, diagnoses often have to be made based on limited information, even though accurate disease determination based on pathogen specific DNA sequences is possible through sequencing technologies. These technologies, however, require specialised equipment and expertise that simply is not available everywhere. The OUTCASST two-component system and detection kit hopes to alleviate this problem.
  
 +
<center>
 +
<div class="tutorial" style="position: relative; width: 560px; display: inline-block;">
 +
<img id="figure-1" style="position: absolute; top: 0; left: 125px; " src="https://static.igem.org/mediawiki/2017/e/e1/Tutorial_1.png">
 +
<img id="figure-2" style="position: absolute; top: 0; left: 125px; display: none;" src="https://static.igem.org/mediawiki/2017/5/5b/Tutorial_2.png">
 +
<img id="figure-3" style="position: absolute; top: 0; left: 125px; display: none;" src="https://static.igem.org/mediawiki/2017/e/e3/Tutorial_3.png">
 +
<img id="figure-4" style="position: absolute; top: 0; left: 125px; display: none;" src="https://static.igem.org/mediawiki/2017/e/ec/Tutorial_4.png">
 +
 +
<div class="container" style="position: absolute; top: 50px; left: 0; width: 75px;">
 +
<span id="link-1" class="tutorial_button selected pulsing" style="font-size: 17px; width: 75px; height: 75px; line-height: 75px;">Start</span>
 +
</div>
 +
 +
<div class="container" style="position: absolute; top: 50px; left: 500px;">
 +
<span id="link-2" class="tutorial_button">2</span>
 +
</div>
 +
 +
<div class="container" style="position: absolute; top: 300px; left: 0;">
 +
<span id="link-3" class="tutorial_button">3</span>
 +
</div>
 +
 +
<div class="container" style="position: absolute; top: 300px; left: 500px;">
 +
<span id="link-4" class="tutorial_button">4</span>
 +
</div>
 +
</div>
 +
</center>
 +
 +
<h2>The system</h2>
 +
The OUTCASST two-component system consists of two proteins, expressed to the membrane of a dryable cell. One of the proteins is a Cas9-fusion and the other contains Cpf1. Both proteins can be given a guide RNA that makes it bind to a specific, user-chosen, complementary sequence. When both proteins bind a DNA fragment from a sample, they co-localize, so that a transcription factor is released intracellularly which then induces an intracellular reporter mechanism such as a dye or fluorescent signal.
 +
 +
<div id="popover-1">
 +
Binding of components with search-specific gRNA sequences.
 +
<br>
 +
<br>
 +
<a href="#" class="btn blue" id="goto-2" style="margin: 0; padding: 10px 25px; font-size: 18px;">Next</a>
 +
</div>
 +
 +
<div id="popover-2">
 +
DNA sample fragment binds to one of the components.
 +
<br>
 +
<br>
 +
<a href="#" class="btn blue" id="goto-3" style="margin: 0; padding: 10px 25px; font-size: 18px;">Next</a>
 +
</div>
 +
 +
<div id="popover-3">
 +
Fragment binding with both components induces co-localization.
 +
<br>
 +
<br>
 +
<a href="#" class="btn blue" id="goto-4" style="margin: 0; padding: 10px 25px; font-size: 18px;">Next</a>
 +
</div>
 +
 +
<div id="popover-4">
 +
Protease cleaves, transcription factor is released from complex.
 +
<br>
 +
<br>
 +
</div>
 +
 +
<style type="text/css">
 +
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
  
−
<div class="column half_size" >
+
/* set global font to Open Sans */
−
<h5>Inspiration</h5>
+
body {
−
<p> You can also view other team wikis for inspiration! Here are some examples:</p>
+
  font-family: 'Open Sans', 'sans-serif';
−
<ul>
+
}
−
<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 class="column half_size" >
+
.btn {
−
<h5> Uploading pictures and files </h5>
+
  border-radius: 5px;
−
<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 />
+
  padding: 15px 25px;
−
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>
+
  font-size: 22px;
 +
  text-decoration: none;
 +
  margin: 20px;
 +
  color: #fff;
 +
  position: relative;
 +
  display: inline-block;
 +
}
  
−
<a href="https://2017.igem.org/Special:Upload">
+
.btn:active {
−
UPLOAD FILES
+
  transform: translate(0px, 5px);
−
</a>
+
  -webkit-transform: translate(0px, 5px);
−
</p>
+
  box-shadow: 0px 1px 0px 0px;
−
</div>
+
}
  
 +
.blue {
 +
  background-color: #55acee;
 +
  box-shadow: 0px 5px 0px 0px #3C93D5;
 +
}
  
 +
.blue:hover {
 +
  background-color: #6FC6FF;
 +
}
 +
</style>
 +
 +
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 +
<script src='https://cdn3.devexpress.com/jslib/17.1.3/js/dx.all.js'></script>
 +
<script type="text/javascript">
 +
$.noConflict();
 +
 +
jQuery(function(){
 +
for(var i = 1; i <= 4; i++)
 +
{
 +
var position = "left";
 +
var showEvent = "";
 +
 +
if(i == 2 || i == 4)
 +
{
 +
position = "right";
 +
showEvent = "";
 +
}
 +
 +
var title;
 +
 +
if(i == 1)
 +
title = "Guide RNA";
 +
else if(i == 2)
 +
title = "DNA binding";
 +
else if(i == 3)
 +
title = "Signal transduction";
 +
else if(i == 4)
 +
title = "Signal transduction";
 +
 +
jQuery("#popover-" + i).dxPopover({
 +
target: "#link-" + i,
 +
showEvent: showEvent,
 +
hideEvent: "",
 +
position: position,
 +
width: 300,
 +
showTitle: true,
 +
title: title
 +
}).dxPopover("instance");
 +
}
 +
 +
jQuery("#link-1").click(function()
 +
{
 +
jQuery("#popover-1").dxPopover("show");
 +
jQuery("#link-1").removeClass("pulsing");
 +
});
 +
 +
jQuery('body').on('click', 'a', function(event) {
 +
var id = event.target.id;
 +
 +
if(id == "goto-2")
 +
{
 +
jQuery("#link-1").removeClass("selected");
 +
jQuery("#popover-1").dxPopover("hide");
 +
jQuery("#popover-2").dxPopover("show");
 +
jQuery("#link-2").addClass("selected");
 +
jQuery("#figure-1").fadeOut("5");
 +
jQuery("#figure-2").fadeIn("5");
 +
}
 +
else if(id == "goto-3")
 +
{
 +
jQuery("#link-2").removeClass("selected");
 +
jQuery("#popover-2").dxPopover("hide");
 +
jQuery("#popover-3").dxPopover("show");
 +
jQuery("#link-3").addClass("selected");
 +
jQuery("#figure-2").fadeOut("5");
 +
jQuery("#figure-3").fadeIn("5");
 +
}
 +
else if(id == "goto-4")
 +
{
 +
jQuery("#link-3").removeClass("selected");
 +
jQuery("#popover-3").dxPopover("hide");
 +
jQuery("#popover-4").dxPopover("show");
 +
jQuery("#link-4").addClass("selected");
 +
jQuery("#figure-3").fadeOut("5");
 +
jQuery("#figure-4").fadeIn("5");
 +
}
 +
});
 +
});
 +
</script>
  
 +
</div>
 +
</div>
  
 +
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.2.0/prototype.js"></script>
 +
<script src="https://ajax.googleapis.com/ajax/libs/scriptaculous/1.9.0/scriptaculous.js"></script>
  
 +
<script type="text/javascript">
 +
function move_underline(element)
 +
{
 +
var width = element.getWidth();
 +
var height = element.getHeight();
 +
var offset = element.cumulativeOffset();
 +
 +
var line = $$(".menu-underline")[0];
 +
 +
line.style.top = (offset.top + height - 19) + "px";
 +
line.style.left = offset.left + "px";
 +
line.style.width = width + "px";
 +
}
  
 +
document.observe("dom:loaded", function()
 +
{
 +
move_underline($$(".top-menu-links li")[0]);
 +
 +
$$(".top-menu")[0].observe("mouseover", function()
 +
{
 +
this.addClassName("active");
 +
$$(".menu-container")[0].addClassName("active");
 +
});
 +
 +
$$(".top-menu")[0].observe("mouseout", function()
 +
{
 +
this.removeClassName("active");
 +
$$(".menu-container")[0].removeClassName("active");
 +
});
 +
 +
$$(".top-menu")[0].on("mouseover", ".section", function(event, element)
 +
{
 +
element.addClassName("active");
 +
});
 +
 +
$$(".top-menu")[0].on("mouseout", ".section", function(event, element)
 +
{
 +
element.removeClassName("active");
 +
});
 +
 +
$$(".top-menu-links")[0].on("mouseover", "li", function(event, element)
 +
{
 +
move_underline(element);
 +
 +
$$(".top-menu")[0].setAttribute("data-key", element.getAttribute("data-key"));
 +
});
 +
 +
$$(".menu-container")[0].on("mouseover", ".item", function(event, element)
 +
{
 +
element.addClassName("active");
 +
});
 +
 +
$$(".menu-container")[0].on("mouseout", ".item", function(event, element)
 +
{
 +
element.removeClassName("active");
 +
});
 +
 +
Event.observe(window, "scroll", function()
 +
{
 +
var pos_y = 125 - window.scrollY;
 +
 +
if(pos_y < 75)
 +
pos_y = 75;
 +
 +
//$$(".menu-container")[0].style.top = pos_y + "px";
 +
});
 +
});
 +
</script>
  
 +
</body>
 
</html>
 
</html>

Latest revision as of 12:23, 31 August 2017

<!DOCTYPE html>

  • Home
  • Experimental
  • Human practices
  • Team & Sponsors


Cas9 & Cpf1 secretion
and activity
Comparison of endonuclease activity for Cas9 and Cpf1 that has been produced in, and excreted by, HEK293 cells.
MESA two-component system replication
Details on the MESA two-component system, explanation of its relation to our design and the results of its reproduction.
OUTCASST system production
Detailed explanation of the OUTCASST mechanism, experimental progress and technical prospects.
Modeling and
mathematics
Ordinary differential equations, cellular automaton and an object based model for optimal linker-length estimation.
Interlab study participation
Results and details of our measurements for the iGEM 2017 Interlab Study.
Stakeholders & opinions
Interviews and dialogues with stakeholders, potential users, third parties and experts relating to pathogen detection or DNA-based diagnostics.
Risks & safety-issues
Implications and design considerations relating to safety in the usage and implementation of OUTCASST as a diagnostics tool.
Design & integration
OUTCASST toolkit and product design with factors such as bio-safety and user-friendliness taken into account.
Meet our team
About us, our interests and roles in the team and our supervisors.
Sponsors
A listing of our sponsors, how they assisted us and our gratitude for their assistance.
Achievements
A short description of all that we have achieved during our participation in the iGEM.
The problem
The system
Subheading 3
Subheading 4
The OUTCASST two-component system
This year, Utrecht University participates in the iGEM for the first time. We aim to create a cheap DNA detection kit for disease diagnosis that is easy to use and does not rely on complicated sequencing technologies.

The problem

Disease diagnosis is of great importance for healthcare. In developing countries, diagnoses often have to be made based on limited information, even though accurate disease determination based on pathogen specific DNA sequences is possible through sequencing technologies. These technologies, however, require specialised equipment and expertise that simply is not available everywhere. The OUTCASST two-component system and detection kit hopes to alleviate this problem.
Start
2
3
4

The system

The OUTCASST two-component system consists of two proteins, expressed to the membrane of a dryable cell. One of the proteins is a Cas9-fusion and the other contains Cpf1. Both proteins can be given a guide RNA that makes it bind to a specific, user-chosen, complementary sequence. When both proteins bind a DNA fragment from a sample, they co-localize, so that a transcription factor is released intracellularly which then induces an intracellular reporter mechanism such as a dye or fluorescent signal.
Binding of components with search-specific gRNA sequences.

Next
DNA sample fragment binds to one of the components.

Next
Fragment binding with both components induces co-localization.

Next
Protease cleaves, transcription factor is released from complex.