Difference between revisions of "Team:Utrecht/"

Line 1: Line 1:
 +
 
<!DOCTYPE html>
 
<!DOCTYPE html>
 
<html>
 
<html>
Line 194: Line 195:
 
 
 
.menu-container.active {
 
.menu-container.active {
top: 360px;
+
top: 375px;
 
}
 
}
 
 
Line 268: Line 269:
 
<div>
 
<div>
 
<ul class="top-menu-links">
 
<ul class="top-menu-links">
<li data-key="home" class="active">Home</li>
+
<li data-key="home" class="active" data-url="home">Home</li>
 
<li data-key="exp">Experimental</li>
 
<li data-key="exp">Experimental</li>
 
<li data-key="hp">Human practices</li>
 
<li data-key="hp">Human practices</li>
Line 365: Line 366:
 
</div>
 
</div>
 
<div class="page-container">
 
<div class="page-container">
<div class="page-heading">The OUTCASST two-component system</div>
 
 
<div class="page-content">
 
<div class="page-content">
+
<div class="page-heading">The OUTCASST two-component system</div>
 
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.
 
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.
 
 
Line 429: Line 429:
 
<br>
 
<br>
 
</div>
 
</div>
 +
 +
</div>
 +
</div>
 +
 +
<script id="page-home" type="text/template">
 +
home
 +
</script>
 +
 +
<script id="page-secretion" type="text/template">
 +
<div class="page-heading">Secretion</div>
 +
ok
 +
</script>
 +
 +
<script id="page-mesa-replication" type="text/template">
 +
<div class="page-heading">MESA replication</div>
 +
abc
 +
</script>
 +
 +
<script id="page-outcasst" type="text/template">
 +
<div class="page-heading">OUTCASST</div>
 +
1
 +
</script>
 +
 +
<script id="page-modeling-and-mathematics" type="text/template">
 +
<div class="page-heading">Modeling and Mathematics</div>
 +
1
 +
</script>
 +
 +
<script id="page-interlab-study" type="text/template">
 +
<div class="page-heading">Interlab study</div>
 +
1
 +
</script>
 +
 +
<script src='https://cdn.jsdelivr.net/scrollreveal.js/3.3.1/scrollreveal.min.js'></script>
 +
 +
<script id="page-stakeholders" type="text/template">
 +
<!--
 +
We interviewed a panel of world-renowned experts, aliquip inermis deseruisse at sed, populo oporteat efficiantur vim eu, pro prompta salutandi at. Scripta bonorum denique ei usu, inermis nominavi nec ad. Vis ea ignota habemus, numquam veritus antiopam id per. Ne mei posidonium complectitur, pri eu sint epicuri phaedrum, eu solum nullam eos. Pericula intellegam sed an, errem volumus repudiare no cum, vel paulo populo et. Principes dissentiet eos ne.
 +
-->
 +
We interviewed a panel of world-renowned experts. By listening carefully, our project's direction was shaped and refined.
 +
<br>
 +
<div class="shuffle-container" style="position: relative; margin-top: 30px; margin-bottom: 50px; width: 900px; margin-left: -75px;">
 +
<div style="position: absolute; top: 200px; left: 350px; z-index: 1;">
 +
<a href="#" class="btn blue" id="goto-2" style="margin: 0; padding: 10px 25px; font-size: 18px;" onclick="jQuery('html, body').animate({scrollTop: jQuery('.timeline').offset().top - 100}, 500)">Follow our journey</a>
 +
</div>
 +
  <div class="js-grid my-shuffle shuffle" style="height: 520.262px; transition: height 250ms cubic-bezier(0.4, 0, 0.2, 1);">
 +
  <figure class="js-item column col-span shuffle-item shuffle-item--visible" style="position: absolute; top: 0px; left: 0px; visibility: visible; will-change: transform; opacity: 1; transition-duration: 250ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-property: transform, opacity; transform: translate(0px, 0px) scale(1);">
 +
      <div class="aspect aspect--32x9">
 +
        <div class="aspect__inner"><img src="Marit de Wit.jpg"></div>
 +
<div style="position: absolute; bottom: 5px; left: 5px; right: 5px; color: white; font-size: 13px; line-height: 100%;">
 +
Marit de Wit<br>
 +
<span style="font-style: italic;">Doctors without borders</span>
 +
</div>
 +
      </div>
 +
    </figure>
 +
    <figure class="js-item column shuffle-item shuffle-item--visible" style="position: absolute; top: 0px; left: 0px; visibility: visible; will-change: transform; opacity: 1; transform: translate(450px, 0px) scale(1); transition-duration: 250ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-property: transform, opacity;">
 +
      <div class="aspect aspect--9x80">
 +
        <div class="aspect__inner"><img src="Bert Gerrits van den Ende.jpg"></div>
 +
      </div>
 +
    </figure>
 +
<figure class="js-item column shuffle-item shuffle-item--visible" style="position: absolute; top: 0px; left: 0px; visibility: visible; will-change: transform; opacity: 1; transform: translate(675px, 0px) scale(1); transition-duration: 250ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-property: transform, opacity;">
 +
      <div class="aspect aspect--9x80">
 +
        <div class="aspect__inner"><img src="Hans Bos.jpg"></div>
 +
      </div>
 +
    </figure>
 +
<figure class="js-item column shuffle-item shuffle-item--visible" style="position: absolute; top: 0px; left: 0px; visibility: visible; will-change: transform; opacity: 1; transform: translate(225px, 129px) scale(1); transition-duration: 250ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-property: transform, opacity;">
 +
      <div class="aspect aspect--16x9">
 +
        <div class="aspect__inner"><img src="Jaap van Hellemond.jpg"></div>
 +
      </div>
 +
    </figure>
 +
<figure class="js-item column col-span shuffle-item shuffle-item--visible" style="position: absolute; top: 0px; left: 0px; visibility: visible; will-change: transform; opacity: 1; transform: translate(225px, 260px) scale(1); transition-duration: 250ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-property: transform, opacity;">
 +
      <div class="aspect aspect--32x9">
 +
        <div class="aspect__inner"><img src="Jet and Ruud.jpg"></div>
 +
      </div>
 +
    </figure>
 +
<figure class="js-item column col-span shuffle-item shuffle-item--visible" style="position: absolute; top: 0px; left: 0px; visibility: visible; will-change: transform; opacity: 1; transform: translate(0px, 389px) scale(1); transition-duration: 250ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-property: transform, opacity;">
 +
      <div class="aspect aspect--32x9">
 +
        <div class="aspect__inner"><img src="Patrick en Pieter-Jaap.jpg"></div>
 +
      </div>
 +
    </figure>
 +
<figure class="js-item column shuffle-item shuffle-item--visible" style="position: absolute; top: 0px; left: 0px; visibility: visible; will-change: transform; opacity: 1; transform: translate(0px, 129px) scale(1); transition-duration: 250ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-property: transform, opacity;">
 +
      <div class="aspect aspect--9x80">
 +
        <div class="aspect__inner"><img src="Hugo Snippert (2).jpg"></div>
 +
      </div>
 +
    </figure>
 +
<figure class="js-item column shuffle-item shuffle-item--visible" style="position: absolute; top: 0px; left: 0px; visibility: visible; will-change: transform; opacity: 1; transform: translate(675px, 260px) scale(1); transition-duration: 250ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-property: transform, opacity;">
 +
      <div class="aspect aspect--9x80">
 +
        <div class="aspect__inner"><img src="Titia Sijen.jpg"></div>
 +
      </div>
 +
    </figure>
 +
    <div class="column my-sizer-element"></div>
 +
  </div>
 +
</div>
 +
 +
<section class="timeline" style="width: 1000px; margin-left: -100px;">
 +
  <div class="timeline-container" style="width: 100%;">
 +
    <div class="timeline-item">
 +
 +
      <div class="timeline-img"></div>
 +
 +
      <div class="timeline-content timeline-card js--fadeInLeft">
 +
        <div class="timeline-img-header">
 +
          <h2>Westerdijk</h2>
 +
        </div>
 +
        <div class="date">10 OCT 2017</div>
 +
        <p>The first person we talked to came from the Westerdijk Fungal Biodiversity Institute in Utrecht. Here, they perform mycological research, wherein they focus on the determination and classification of fungi&hellip;</p>
 +
        <a class="bnt-more" href="javascript:void(0)">More</a>
 +
      </div>
 +
 +
    </div> 
 +
    <div class="timeline-item">
 +
 +
      <div class="timeline-img"></div>
 +
 +
      <div class="timeline-content timeline-card js--fadeInRight">
 +
        <div class="timeline-img-header">
 +
          <h2>UMCU</h2>
 +
        </div>
 +
        <div class="date">10 OCT 2017</div>
 +
        <p>We used this information and went to two DNA genome diagnostic labs, one in Utrecht and one in Amsterdam. At the University Medical Center of Utrecht we talked about the non-invasive prenatal testing and the use of our system to test for genetic conditions&hellip;</p>
 +
        <a class="bnt-more" href="javascript:void(0)">More</a>
 +
      </div>
 +
 +
    </div>   
 +
 +
  </div>
 +
</section>
 +
</script>
 +
 +
<style type="text/css">
 +
.shuffle-container .aspect:hover { opacity: 1; }
 +
 +
.timeline h1 {
 +
  font-size: 200%;
 +
  text-transform: uppercase;
 +
  letter-spacing: 3px;
 +
  font-weight: 400;
 +
}
 +
 +
.timeline header {
 +
  background: #3F51B5;
 +
  color: #FFFFFF;
 +
  padding: 150px 0;
 +
}
 +
.timeline header p {
 +
  font-family: 'Allura';
 +
  color: rgba(255, 255, 255, 0.2);
 +
  margin-bottom: 0;
 +
  font-size: 60px;
 +
  margin-top: -30px;
 +
}
 +
 +
.timeline {
 +
  position: relative;
 +
}
 +
.timeline::before {
 +
  content: '';
 +
  background: #C5CAE9;
 +
  width: 5px;
 +
  height: 95%;
 +
  position: absolute;
 +
  left: 50%;
 +
  transform: translateX(-50%);
 +
}
 +
 +
.timeline .timeline-item {
 +
  width: 100%;
 +
  margin-bottom: 70px;
 +
}
 +
.timeline .timeline-item:nth-child(even) .timeline-content {
 +
  float: right;
 +
  padding: 40px 30px 10px 30px;
 +
}
 +
.timeline .timeline-item:nth-child(even) .timeline-content .date {
 +
  right: auto;
 +
  left: 0;
 +
}
 +
.timeline .timeline-item:nth-child(even) .timeline-content::after {
 +
  content: '';
 +
  position: absolute;
 +
  border-style: solid;
 +
  width: 0;
 +
  height: 0;
 +
  top: 30px;
 +
  left: -15px;
 +
  border-width: 10px 15px 10px 0;
 +
  border-color: transparent #f5f5f5 transparent transparent;
 +
}
 +
.timeline .timeline-item::after {
 +
  content: '';
 +
  display: block;
 +
  clear: both;
 +
}
 +
 +
.timeline .timeline-content {
 +
  position: relative;
 +
  width: 45%;
 +
  padding: 10px 30px;
 +
  border-radius: 4px;
 +
  background: #f5f5f5;
 +
  box-shadow: 0 20px 25px -15px rgba(0, 0, 0, 0.3);
 +
}
 +
.timeline .timeline-content::after {
 +
  content: '';
 +
  position: absolute;
 +
  border-style: solid;
 +
  width: 0;
 +
  height: 0;
 +
  top: 30px;
 +
  right: -15px;
 +
  border-width: 10px 0 10px 15px;
 +
  border-color: transparent transparent transparent #f5f5f5;
 +
}
 +
 +
.timeline .timeline-img {
 +
  width: 30px;
 +
  height: 30px;
 +
  background: #3F51B5;
 +
  border-radius: 50%;
 +
  position: absolute;
 +
  left: 50%;
 +
  margin-top: 25px;
 +
  margin-left: -15px;
 +
}
 +
 +
.timeline a {
 +
  background: #3F51B5;
 +
  color: #FFFFFF;
 +
  padding: 8px 20px;
 +
  text-transform: uppercase;
 +
  font-size: 14px;
 +
  margin-bottom: 20px;
 +
  margin-top: 10px;
 +
  display: inline-block;
 +
  border-radius: 2px;
 +
  box-shadow: 0 1px 3px -1px rgba(0, 0, 0, 0.6);
 +
}
 +
.timeline a:hover, a:active, a:focus {
 +
  background: #32408f;
 +
  color: #FFFFFF;
 +
  text-decoration: none;
 +
}
 +
 +
.timeline-card {
 +
  padding: 0 !important;
 +
}
 +
.timeline-card p {
 +
  padding: 0 20px;
 +
}
 +
.timeline-card a {
 +
  margin-left: 20px;
 +
}
 +
 +
.timeline-item .timeline-img-header {
 +
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.4)), url("https://hd.unsplash.com/photo-1458530970867-aaa3700e966d") center center no-repeat;
 +
  background-size: cover;
 +
}
 +
.timeline-item:nth-child(5) .timeline-img-header {
 +
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.4)), url("https://hd.unsplash.com/photo-1444093826349-9ce8c622f4f3") center center no-repeat;
 +
  background-size: cover;
 +
}
 +
.timeline-item:nth-child(6) .timeline-img-header {
 +
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.4)), url("https://hd.unsplash.com/photo-1471479917193-f00955256257") center center no-repeat;
 +
  background-size: cover;
 +
}
 +
.timeline-item:nth-child(8) .timeline-img-header {
 +
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.4)), url("https://hd.unsplash.com/photo-1466840787022-48e0ec048c8a") center center no-repeat;
 +
  background-size: cover;
 +
}
 +
.timeline-item:nth-child(10) .timeline-img-header {
 +
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.4)), url("https://hd.unsplash.com/photo-1447639703758-f525f36456bf") center center no-repeat;
 +
  background-size: cover;
 +
}
 +
.timeline-item:nth-child(11) .timeline-img-header {
 +
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.4)), url("https://hd.unsplash.com/photo-1469429978400-082eec725ad5") center center no-repeat;
 +
  background-size: cover;
 +
}
 +
 +
.timeline-img-header {
 +
  height: 200px;
 +
  position: relative;
 +
  margin-bottom: 20px;
 +
}
 +
.timeline-img-header h2 {
 +
  color: #FFFFFF;
 +
  position: absolute;
 +
  bottom: 5px;
 +
  left: 20px;
 +
}
 +
 +
blockquote {
 +
  margin-top: 30px;
 +
  color: #757575;
 +
  border-left-color: #3F51B5;
 +
  padding: 0 20px;
 +
}
 +
 +
.date {
 +
  background: #FF4081;
 +
  display: inline-block;
 +
  color: #FFFFFF;
 +
  padding: 10px;
 +
  position: absolute;
 +
  top: 0;
 +
  right: 0;
 +
}
 +
 +
@media screen and (max-width: 768px) {
 +
  .timeline::before {
 +
    left: 50px;
 +
  }
 +
  .timeline .timeline-img {
 +
    left: 50px;
 +
  }
 +
  .timeline .timeline-content {
 +
    max-width: 100%;
 +
    width: auto;
 +
    margin-left: 70px;
 +
  }
 +
  .timeline .timeline-item:nth-child(even) .timeline-content {
 +
    float: none;
 +
  }
 +
  .timeline .timeline-item:nth-child(odd) .timeline-content::after {
 +
    content: '';
 +
    position: absolute;
 +
    border-style: solid;
 +
    width: 0;
 +
    height: 0;
 +
    top: 30px;
 +
    left: -15px;
 +
    border-width: 10px 15px 10px 0;
 +
    border-color: transparent #f5f5f5 transparent transparent;
 +
  }
 +
}
 +
</style>
 +
 +
<script id="page-safety" type="text/template">
 +
<div class="page-heading">Safety</div>
 +
well important init
 +
</script>
 +
 +
<script id="page-product-design" type="text/template">
 +
<div class="page-heading">Product design</div>
 +
1
 +
</script>
 +
 +
<script id="page-team" type="text/template">
 +
<div class="page-heading">Team</div>
 +
1
 +
</script>
 +
 +
<script id="page-sponsors" type="text/template">
 +
<div class="page-heading">Sponsors</div>
 +
1
 +
</script>
 +
 +
<script id="page-achievements" type="text/template">
 +
<div class="page-heading">Achievements</div>
 +
1
 +
</script>
 
 
 
<style type="text/css">
 
<style type="text/css">
Line 436: Line 796:
 
body {
 
body {
 
   font-family: 'Open Sans', 'sans-serif';
 
   font-family: 'Open Sans', 'sans-serif';
 +
  overflow: scroll;
 
}
 
}
  
Line 487: Line 848:
 
var pos = getPos(v);
 
var pos = getPos(v);
 
 
if(document.body.scrollTop + 200 >= pos.y)
+
if(jQuery(window).scrollTop() + 200 >= pos.y)
 
{
 
{
 
sel_subhead = key;
 
sel_subhead = key;
 
}
 
}
else if(document.body.scrollTop + document.body.getHeight() == document.body.scrollHeight)
+
else if(Math.ceil(jQuery(window).scrollTop() + jQuery(window).height()) >= jQuery(document).height())
 
{
 
{
 
if(key == 3)
 
if(key == 3)
Line 583: Line 944:
 
});
 
});
 
});
 
});
</script>
+
</script>
 
+
</div>
+
</div>
+
  
 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.2.0/prototype.js"></script>
 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.2.0/prototype.js"></script>
Line 592: Line 950:
  
 
<script type="text/javascript">
 
<script type="text/javascript">
 +
var page_menus = {
 +
"home" : {
 +
1: "Intro",
 +
2: "The problem",
 +
3: "The system",
 +
},
 +
"secretion" : {
 +
1: "Secretion",
 +
2: "Hmmmm"
 +
},
 +
"mesa-replication" : {
 +
1: "MESA replication",
 +
2: "Hmmmm"
 +
},
 +
"outcasst" : {
 +
1: "OUTCASST",
 +
2: "Hmmmm"
 +
},
 +
"modeling-and-mathematics" : {
 +
1: "Modeling and Mathematics",
 +
2: "Hmmmm"
 +
},
 +
"interlab-study" : {
 +
1: "Interlab study",
 +
2: "Hmmmm"
 +
},
 +
"stakeholders" : {},
 +
"safety" : {
 +
1: "Safety",
 +
2: "Hmmmm"
 +
},
 +
"product-design" : {
 +
1: "Product design",
 +
2: "Hmmmm"
 +
},
 +
"team" : {
 +
1: "Team",
 +
2: "Hmmmm"
 +
},
 +
"sponsors" : {
 +
1: "Sponsors",
 +
2: "Hmmmm"
 +
},
 +
"achievements" : {
 +
1: "Achievements",
 +
2: "Hmmmm"
 +
}
 +
};
 +
 
function move_underline(element)
 
function move_underline(element)
 
{
 
{
Line 603: Line 1,010:
 
line.style.left = offset.left + "px";
 
line.style.left = offset.left + "px";
 
line.style.width = width + "px";
 
line.style.width = width + "px";
 +
}
 +
 +
function change_page(page)
 +
{
 +
if(typeof page_menus[page] !== "undefined")
 +
{
 +
var menu = page_menus[page];
 +
 +
var menu_container = $$(".menu-container")[0];
 +
 +
var new_html = "";
 +
 +
if(Object.keys(menu).length > 0)
 +
{
 +
new_html = new_html + "<div style='position: absolute; left: 13px; top: 10px; height: " + (35 * (Object.keys(menu).length - 1)) + "px; width: 2px; background: #0096ff; z-index: -1;'></div>";
 +
 +
$H(menu).each(function(pair)
 +
{
 +
new_html = new_html + "<div class='item' data-key='" + pair.key + "'><div class='marker'><div></div></div><div class='text'>" + pair.value + "</div></div>";
 +
});
 +
}
 +
 +
menu_container.update(new_html);
 +
}
 +
 +
var page_container = $$(".page-content")[0];
 +
var page_content = $("page-" + page);
 +
 +
page_container.update(page_content.innerHTML);
 +
 +
$$(".top-menu")[0].removeClassName("active");
 +
$$(".menu-container")[0].removeClassName("active");
 
}
 
}
  
Line 626: Line 1,065:
 
var page = element.getAttribute("data-url");
 
var page = element.getAttribute("data-url");
 
 
history.pushState({}, title, page);
+
//history.pushState({}, title, page);
 +
 +
change_page(page);
 
});
 
});
 
 
Line 637: Line 1,078:
 
{
 
{
 
element.removeClassName("active");
 
element.removeClassName("active");
 +
});
 +
 +
$$(".top-menu-links")[0].on("click", "li", function(event, element)
 +
{
 +
var page = element.getAttribute("data-url");
 +
 +
if(page != "")
 +
{
 +
var title = page;
 +
 +
change_page(page);
 +
 +
if(page == "home")
 +
page = "/";
 +
 +
//history.pushState({}, title, page);
 +
}
 
});
 
});
 
 
Line 666: Line 1,124:
 
});
 
});
 
});
 
});
 +
</script>
 +
 +
<style class="cp-pen-styles">/* quick grid */
 +
.shuffle-container {
 +
  width: 93%;
 +
  margin: auto;
 +
}
 +
 +
/* Bootstrap-style columns */
 +
.shuffle-container .column {
 +
  position: relative;
 +
  float: left;
 +
  min-height: 1px;
 +
  width: 25%;
 +
  padding-left: 4px;
 +
  padding-right: 4px;
 +
 
 +
  /* Space between tiles */
 +
  margin-top: 8px;
 +
}
 +
 +
.shuffle-container .col-span {
 +
  width: 50%;
 +
}
 +
 +
.shuffle-container .my-sizer-element {
 +
  width: 8.33333%;
 +
}
 +
 +
/* default styles so shuffle doesn't have to set them (it will if they're missing) */
 +
.shuffle-container .my-shuffle {
 +
  position: relative;
 +
  overflow: hidden;
 +
}
 +
 +
/* Ensure images take up the same space when they load */
 +
/* https://vestride.github.io/Shuffle/images */
 +
.shuffle-container .aspect {
 +
  position: relative;
 +
  width: 100%;
 +
  height: 0;
 +
  padding-bottom: 100%;
 +
  overflow: hidden;
 +
  opacity: 0.5;
 +
}
 +
 +
.shuffle-container .aspect__inner {
 +
  position: absolute;
 +
  top: 0;
 +
  right: 0;
 +
  bottom: 0;
 +
  left: 0;
 +
}
 +
 +
.shuffle-container .aspect--16x9 {
 +
  padding-bottom: 56.25%;
 +
}
 +
 +
.shuffle-container .aspect--9x80 {
 +
  padding-bottom: calc(112.5% + 8px);
 +
}
 +
 +
.shuffle-container .aspect--32x9 {
 +
  padding-bottom: calc(28.125% - 3px);
 +
}
 +
 +
.shuffle-container img {
 +
  display: block;
 +
  width: 100%;
 +
 
 +
  max-width: none;
 +
  height: 100%;
 +
  -o-object-fit: cover;
 +
    object-fit: cover;
 +
}
 +
 +
/* Small reset */
 +
.shuffle-container *,
 +
.shuffle-container ::before,
 +
.shuffle-container ::after {
 +
  box-sizing: border-box;
 +
}
 +
 +
.shuffle-container figure {
 +
  margin: 0;
 +
  padding: 0;
 +
}</style>
 +
 +
 +
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Shuffle/5.0.2/shuffle.min.js"></script>
 +
<script type="text/javascript">
 +
/*var Shuffle = window.Shuffle;
 +
 +
var myShuffle = new Shuffle(document.querySelector('.my-shuffle'), {
 +
  itemSelector: '.js-item',
 +
  sizer: '.my-sizer-element',
 +
  buffer: 1,
 +
});*/
 
</script>
 
</script>
  
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 15:02, 9 October 2017

<!DOCTYPE html>



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 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.