|
|
| (19 intermediate revisions by 2 users not shown) |
| Line 1: |
Line 1: |
| | + | <!DOCTYPE html> |
| | <html> | | <html> |
| − | | + | <head> |
| − | <head>
| + | <link href="https://fonts.googleapis.com/css?family=Nunito+Sans" rel="stylesheet"> |
| − | <meta name="author" content="GAMulder">
| + | |
| − | <title>iGEM UTRECHT Placeholder Page</title>
| + | <link rel='stylesheet prefetch' href='https://cdn3.devexpress.com/jslib/17.1.3/css/dx.spa.css'> |
| − | <link href="https://fonts.googleapis.com/css?family=Signika" rel="stylesheet"> | + | <link rel='stylesheet prefetch' href='https://cdn3.devexpress.com/jslib/17.1.3/css/dx.common.css'> |
| − | <link href="https://fonts.googleapis.com/css?family=Acme" rel="stylesheet"> | + | <link rel='stylesheet prefetch' href='https://cdn3.devexpress.com/jslib/17.1.3/css/dx.light.css'> |
| − | <link href="https://fonts.googleapis.com/css?family=Acme|Pontano+Sans" rel="stylesheet"> | + | |
| − |
| + | <style> |
| − | <style>
| + | |
| | #top_title { display: none !important; } | | #top_title { display: none !important; } |
| | /*Override default CSS*/ | | /*Override default CSS*/ |
| | #sideMenu, #top_title {display:none;} | | #sideMenu, #top_title {display:none;} |
| − | #content { padding:0px; width:100%; margin-top:-7px; margin-left:0px; background-color: none;} | + | #content { padding:0px; width:100%; margin-top:-7px; margin-left:0px; background-color: transparent;} |
| | | | |
| | | | |
| Line 43: |
Line 43: |
| | body { | | body { |
| | min-height: 100%; | | min-height: 100%; |
| − | background-color: #16a085; | + | } |
| | + | </style> |
| | + | |
| | + | <style type="text/css"> |
| | + | body, html { |
| | + | height: 100%; |
| | + | background: #fff; |
| | } | | } |
| | | | |
| | + | .container { |
| | + | width: 60px; |
| | + | height: 60px; |
| | + | margin: 0 auto 0; |
| | + | -webkit-perspective: 1000; |
| | + | -webkit-backface-visibility: hidden; |
| | + | background: #fff; |
| | + | } |
| | | | |
| − | #content_wrapper {
| + | .tutorial_button { |
| − | position: relative;
| + | position: relative; |
| − | top: 0px;
| + | display: block; |
| − | left: 0px;
| + | width: 60px; |
| − | margin: 0px;
| + | height: 60px; |
| − | width: 100%; | + | font-size: 2.5em; |
| − | height: 100%; | + | font-weight: light; |
| − | text-align:center;
| + | font-family: 'Trebuchet MS', sans-serif; |
| − | background-color: #85c8ff; | + | 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; |
| | } | | } |
| | | | |
| − | #content_wrapper p {
| + | .tutorial_button.selected { |
| − | font-family: Tahoma, Geneva, sans-serif;
| + | filter: grayscale(0%); |
| | } | | } |
| | | | |
| − | #content_wrapper a {
| + | .tutorial_button.pulsing { |
| − | color:#004789; | + | box-shadow: 0 0 0 0 rgba(255, 212, 0, 0.8); |
| | + | -webkit-animation: pulse 2s infinite; |
| | } | | } |
| | | | |
| | + | /*.tutorial_button.pulsing:hover { |
| | + | -webkit-animation: none; |
| | + | }*/ |
| | | | |
| − | #footer {
| + | @-webkit-keyframes pulse { |
| − | position:absolute;
| + | 70% { |
| − | bottom: 0px; | + | box-shadow: 0 0 0 50px rgba(90, 153, 212, 0); |
| − | left: 0px;
| + | } |
| − | width: 100%;
| + | 100% { |
| − | margin-top: 0px; | + | box-shadow: 0 0 0 0 rgba(90, 153, 212, 0); |
| − | margin-bottom: 20px;
| + | } |
| − | background-color: #FFFFFF;
| + | |
| − | text-align: center;
| + | |
| | } | | } |
| − | img.makefit{max-width:100%; max-height:max-width}
| |
| − | bodyblock{background-color: #00CCBC }
| |
| − | page_title{font-family:'Signika',sans-serif; font-size: 40px; padding:1px}
| |
| − | project_title{font-family:'Acme',sans-serif; font-size: 70px; padding:1px}
| |
| − | project_subtitle{font-family:'Acme',sans-sefif; font-size: 18px; padding:5px}
| |
| − | main_text{font-family:'Pontano Sans',sans-serif; font-size:14px; padding:5px}
| |
| − | div.sec0{float:left; width:100%;font-family:'Pontano Sans',sans-serif; font-size:16px ; text-align: justify; padding:10px}
| |
| − | div.sec1{float:left; width:25%; box-sizing: border-box;font-family: 'Pontano Sans',sans-serif; font-size:14px ; text-align: justify; padding: 7px}
| |
| − | div.sectitle{font-family:'Acme',sans-serif; font-size:16px ; text-align: center; padding: 10px}
| |
| − | div.sec2{float:left; width:33.3%; box-sizing: border-box;font-family: 'Pontano Sans',sans-serif; font-size:14px ; text-align: justify; padding-top: 10px; padding-bottom:10px; padding-left:10px; padding-right:10px}
| |
| | | | |
| − | </style>
| + | </style> |
| − |
| + | |
| − | </head>
| + | <style type="text/css"> |
| − |
| + | body { |
| − | <bodyblock>
| + | color: white; |
| − |
| + | font-family: 'Nunito Sans', sans-serif; |
| − | <section style="max-width:900px; margin: auto"><br>
| + | margin: 0; |
| − | <div style="text-align:center; box-sizing: content-box; width:100%; height:150px"> | + | padding: 0; |
| − | <div style="float: left; width:25%"> | + | } |
| − | <img src="https://static.igem.org/mediawiki/2017/ 7/ 7f/ IGEM_Utrecht_logo_svg. svg" style=" vertical- align: middle; height: 200"/> | + | |
| | + | * { |
| | + | 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> |
| − | <page_title style="vertical-align:middle; padding:20px"> Utrecht 2017<br></page_title>
| + | <div class="menu-container"> |
| − | <project_title style="vertical-align:middle; horizontal-align:bottom"><br><br>OUTCASST</project_title>
| + | <div style="position: absolute; left: 13px; top: 10px; height: 110px; width: 2px; background: #0096ff; z-index: -1;"></div> |
| | + | <div class="item active"> |
| | + | <div class="marker"><div></div></div> |
| | + | <div class="text">The problem</div> |
| | </div> | | </div> |
| | + | <div class="item"> |
| | + | <div class="marker"><div></div></div> |
| | + | <div class="text">The system</div> |
| | </div> | | </div> |
| − | <div clear="all"></div> | + | <div class="item"> |
| | + | <div class="marker"><div></div></div> |
| | + | <div class="text">Subheading 3</div> |
| | + | </div> |
| | + | <div class="item"> |
| | + | <div class="marker"><div></div></div> |
| | + | <div class="text">Subheading 4</div> |
| | + | </div> |
| | + | </div> |
| | + | <div class="page-container"> |
| | + | <div class="page-heading">The OUTCASST two-component system</div> |
| | + | <div class="page-content"> |
| | | | |
| − | <div style="text-align:center; color:#0000ff; font-size: 16px; box-sizing: border-box">Important note: This is a placeholder page and will be replaced in due time!</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. |
| − | <div style="text-align:center">
| + | |
| − | <project_subtitle><br>OUT-of-cell CRISPR Activated Sequence-specific Signal Transducer</project_subtitle>
| + | |
| − | <div class="sec0">
| + | |
| − | This year, Utrecht University participates for the first time and we aim to build a biological DNA sensor that can recognise sequences of the user's choice. Further down, we propose some
| + | |
| − | applications but first we will give a description of how our sensor will work.
| + | |
| − | <br><br>The OUTCASST sensor consist of two proteins, both expressed to the membrane of a mammalian HEK 293 cell.
| + | |
| − | The first protein connects dCas9, a catalytically dead Cas9 variant, to a transmembrane domain and an intracellular transcription factor.
| + | |
| − | The second protein connects dCpf1 to an intracellular protease. When provided with appropriate guide RNA's, the two proteins can bind to a DNA sequence.
| + | |
| − | When one sequence brings the two proteins together, the transcription factor is released into the cytoplasm, and can activate a reporter cascade.
| + | |
| − | See the scheme below for details.
| + | |
| − | </div>
| + | |
| − | <img class=makefit src="https://static.igem.org/mediawiki/2017/3/3b/Figure2-v3.png" align="middle" />
| + | |
| − | </div>
| + | |
| | | | |
| | + | <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> |
| | | | |
| − | <section style="position: relative; width: 100%; margin-top:5px; margin-bottom:20px; padding: 0;"> | + | <h2>The system</h2> |
| − | <div class="sec1">
| + | 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 class="sectitle"><b>1. Guide RNA binding:</b></div>
| + | |
| − | The two proteins float around freely in the membrane. Two types of guide RNA (gRNA) can be added to the cells.
| + | |
| − | Due to the different recognition sequences for the two proteins, the gRNA can bind specifically to the appropriate protein.
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="sec1">
| + | |
| − | <div class="sectitle"><b>2. DNA sample addition:</b></div>
| + | |
| − | Now that the guide RNA's have been bound, both proteins are primed to bind to a specific sequence of a DNA strand.
| + | |
| − | A DNA sample from any source can be added and will then be bound by the protein with the guide RNA that is complementary to one of the DNA strands.
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="sec1">
| + | |
| − | <div class="sectitle"><b>3. Sequence recognition:</b></div>
| + | |
| − | One of the proteins has bound a DNA stretch in the sample.
| + | |
| − | If the other protein is bound to a guide RNA that is complementary to a sequence on the same stretch, it too will bind.
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="sec1">
| + | |
| − | <div class="sectitle"><b>4. Co-localization & cleavage:</b></div>
| + | |
| − | If the second protein also binds the DNA, close enough to the other protein, the protease at the end of one will be able to cleave the transcription factor from the other protein.
| + | |
| − | The transcription factor is then free to induce a reporter mechanism. In our case, this will be a fluorescent marker.
| + | |
| − | </div>
| + | |
| − | <div style="clear: both;"></div>
| + | |
| − |
| + | |
| − | <div style="text-align:center">
| + | |
| − | <project_subtitle><br>Applications of the OUTCASST system:</project_subtitle>
| + | |
| − | <div class="sec0">
| + | |
| − | So far, our team has not yet decided on a specific application of the system as there are many different fields wherein
| + | |
| − | sequence-specific detection is of use. Right now, most DNA detection is done by Polymerase Chain Reaction (PCR) and sequencing
| + | |
| − | techniques. These techniques rely on materials and machinery that are not available to everyone. The OUTCASST system, being
| + | |
| − | cell-based, culturable and thus renewable, could provide a quick and easy detection tool that does not require an expensive
| + | |
| − | lab-setup. It only requires medium to culture the cells and the gRNA that is specific to the sequence that you want to detect.
| + | |
| − | Right now, we are interviewing potential end-users to figure out what type of applications they see for our concept and to
| + | |
| − | assess what features they wish to see in our design. So far, we have identified four possible applications for our tool:
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| | | | |
| | + | <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> |
| | | | |
| − | <section style="position: relative; width: 100%; margin-top:5px; margin-bottom:20px; padding: 0;"> | + | <div id="popover-2"> |
| − | <div class="sec2">
| + | DNA sample fragment binds to one of the components. |
| − | <img src="https://2017.igem.org/wiki/images/1/1d/Baby_icon.svg" height=100px style="display:block; margin: auto">
| + | <br> |
| − | <div class="sectitle"><b>Prenatal Genotyping:</b></div>
| + | <br> |
| − | Small quantities of cell-free embryo DNA is present in the maternal peripheral blood, already early in pregnancy
| + | <a href=" #" class=" btn blue" id=" goto- 3" style=" margin: 0; padding: 10px 25px; font- size: 18px;"> Next</a> |
| − | <a target="_tab" href="http://www.sciencedirect.com/science/article/pii/S0140673689919697">(Lo et al., 1989)</a>.
| + | </div> |
| − | The detection of child-mutations by taking a serum sample from its mother reduces the risk to the unborn child. Such
| + | |
| − | mutation calling is currently done by sequencing, which faces technological limitations when confronted with low sample
| + | |
| − | concentrations, and subsequent genotyping using bioinformatics pipelines, a process that takes days, if not weeks. We aim to create
| + | |
| − | the possibility to detect specific mutations in a matter of hours, cheaply.
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="sec2">
| + | |
| − | <img src="https://static.igem.org/mediawiki/2017/c/cb/Adenovirus_svg.svg" height=100px style="display:block; margin: auto">
| + | |
| − | <div class="sectitle"><b>Pathogen Detection:</b></div>
| + | |
| − | Cell-free pathogen DNA can also be sampled from a patient's serum
| + | |
| − | <a target="_tab" href="https://academic.oup.com/jid/article-abstract/170/2/436/893837">(Gan et al., 1994).</a> Again,
| + | |
| − | the aim of our design is to speed up the process of diagnosis. With one batch of our organism, multiple tests can be
| + | |
| − | done. By adding a small sample of our organism to each well in a 96-well plate and then adding a different subset of
| + | |
| − | gRNA sequences to each well, you could test for 96 separate pathogens. Such tests could speed up the diagnostics time
| + | |
| − | in medical labs. The sensor could even be shipped to general practitioners themselves, making more precise diagnoses
| + | |
| − | in the doctor's office possible.
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="sec2">
| + | |
| − | <img src="https://2017.igem.org/wiki/images/2/2c/Cancer_ribbon_igem_uu.svg" height=100px style="display:block; margin: auto">
| + | |
| − | <div class="sectitle"><b>Cancer Screening</b></div>
| + | |
| − | Early and accurate detection of cancer is very important for proper treatment. Luckily, it too produces cell-free DNA that can be found in the
| + | |
| − | serum of a patient
| + | |
| − | <a target="_tab" href="http://cancerres.aacrjournals.org/content/61/4/1659.short">(Schwarzenbach et al., 2011)</a>.
| + | |
| − | By designing gRNA, complementary to known oncogene mutations, the detection of these sequences in the serum sample thus means that the
| + | |
| − | harmful mutation is present in the patient. Our system can be modified such that signal intensity depends on the amount of dimerization and thus on the cell-free DNA concentration. Since the concentration of cell-free DNA depends on the growth
| + | |
| − | of the tumor, this concentration could be used for monitoring of the disease.
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="sec0" style="text-align:center">
| + | |
| − | This is a placeholder-page. In coming days, it will be replaced. <br>For now, you can follow us on facebook and twitter:
| + | |
| − | <div style="position:absolute; width:200px; left:50%; margin-left:-100px; padding:20px">
| + | |
| − | <a target="_tab" href="https://www.twitter.com/iGEM_Utrecht">
| + | |
| − | <img width=75 src="https://static.igem.org/mediawiki/2017/1/1a/Twitter_logo.png" onmouseover="this.src='https://static.igem.org/mediawiki/2017/6/64/Twitter_logo_2.png'" onmouseout="this.src='https://static.igem.org/mediawiki/2017/1/1a/Twitter_logo.png'">
| + | |
| − | </a>
| + | |
| − | <a target="_tab" href="https://www.facebook.com/igem.utrecht">
| + | |
| − | <img width=75 src="https://static.igem.org/mediawiki/2017/0/07/Facebook_logo.png" onmouseout="this.src='https://static.igem.org/mediawiki/2017/0/07/Facebook_logo.png'" onmouseover="this.src='https://static.igem.org/mediawiki/2017/0/0e/Facebook_logo_2.png'">
| + | |
| − | </a>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| | | | |
| − | </section> | + | <div id="popover-3"> |
| − | </section> | + | Fragment binding with both components induces co-localization. |
| − | | + | <br> |
| − | </bodyblock> | + | <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); |
| | + | |
| | + | /* set global font to Open Sans */ |
| | + | body { |
| | + | font-family: 'Open Sans', 'sans-serif'; |
| | + | } |
| | + | |
| | + | .btn { |
| | + | border-radius: 5px; |
| | + | padding: 15px 25px; |
| | + | font-size: 22px; |
| | + | text-decoration: none; |
| | + | margin: 20px; |
| | + | color: #fff; |
| | + | position: relative; |
| | + | display: inline-block; |
| | + | } |
| | + | |
| | + | .btn:active { |
| | + | transform: translate(0px, 5px); |
| | + | -webkit-transform: translate(0px, 5px); |
| | + | box-shadow: 0px 1px 0px 0px; |
| | + | } |
| | + | |
| | + | .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> |
