Nils obrien (Talk | contribs) |
Nils obrien (Talk | contribs) |
||
(29 intermediate revisions by 4 users not shown) | |||
Line 1: | Line 1: | ||
− | {{Munich}} | + | {{Munich/Phactory}} |
+ | |||
<html> | <html> | ||
+ | <style> | ||
+ | /* Scroll Down Icon*/ | ||
+ | #goToBox { | ||
+ | position: relative; | ||
+ | width: 30px; | ||
+ | height: 28px; | ||
+ | left: calc(50% - 15px); | ||
+ | } | ||
+ | .chevron { | ||
+ | position: absolute; | ||
+ | width: 28px; | ||
+ | height: 8px; | ||
+ | opacity: 0; | ||
+ | transform: scale3d(0.5, 0.5, 0.5); | ||
+ | animation: move 3s ease-out infinite; | ||
+ | } | ||
+ | .chevron:first-child { | ||
+ | animation: move 3s ease-out 1s infinite; | ||
+ | } | ||
+ | .chevron:nth-child(2) { | ||
+ | animation: move 3s ease-out 2s infinite; | ||
+ | } | ||
− | + | .chevron:before, | |
− | + | .chevron:after { | |
− | + | content: ' '; | |
− | + | position: absolute; | |
− | + | top: 0; | |
− | + | height: 100%; | |
− | + | width: 51%; | |
− | + | background: #fff; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | .chevron:before { | |
− | + | left: 0; | |
+ | transform: skew(0deg, 30deg); | ||
+ | } | ||
− | + | .chevron:after { | |
− | + | right: 0; | |
− | + | width: 50%; | |
− | + | transform: skew(0deg, -30deg); | |
− | + | } | |
− | + | ||
− | + | ||
+ | @keyframes move { | ||
+ | 25% { | ||
+ | opacity: 1; | ||
+ | } | ||
+ | 33% { | ||
+ | opacity: 1; | ||
+ | transform: translateY(30px); | ||
+ | } | ||
+ | 67% { | ||
+ | opacity: 1; | ||
+ | transform: translateY(40px); | ||
+ | } | ||
+ | 100% { | ||
+ | opacity: 0; | ||
+ | transform: translateY(55px) scale3d(0.5, 0.5, 0.5); | ||
+ | } | ||
+ | } | ||
+ | @keyframes pulse { | ||
+ | to { | ||
+ | opacity: 1; | ||
+ | } | ||
+ | } | ||
− | |||
− | |||
− | |||
+ | /* FlowChart*/ | ||
+ | .circleO { | ||
+ | height: 60px; | ||
+ | width: 60px; | ||
+ | padding: auto; | ||
+ | border-radius: 50%; | ||
+ | background-color: rgba(230,230,230,1); | ||
+ | color: black; | ||
+ | z-index: 2; | ||
+ | } | ||
+ | .circleO img { | ||
+ | max-height: 40px; | ||
+ | width: auto; | ||
+ | } | ||
+ | .circleS { | ||
+ | height: 60px; | ||
+ | width: 60px; | ||
+ | padding: auto; | ||
+ | border-radius: 50%; | ||
+ | background-image: linear-gradient(rgba(1,101,224,1), rgba(0,203,177,1)); | ||
+ | color: black; | ||
+ | z-index: 2; | ||
+ | } | ||
+ | .circleS img { | ||
+ | max-height: 40px; | ||
+ | width: auto; | ||
+ | } | ||
+ | .circleM { | ||
+ | height: 100px; | ||
+ | width: 100px; | ||
+ | padding: auto; | ||
+ | border-radius: 50%; | ||
+ | background-image: linear-gradient(rgba(1,101,224,1), rgba(0,203,177,1)); | ||
+ | color: black; | ||
+ | z-index: 2; | ||
+ | 1,101,224 | ||
+ | } | ||
+ | .circleM img { | ||
+ | max-height: 80px; | ||
+ | width: auto; | ||
+ | } | ||
+ | .circleL { | ||
+ | height: 160px; | ||
+ | width: 160px; | ||
+ | padding: auto; | ||
+ | border-radius: 50%; | ||
+ | background-image: linear-gradient(rgba(1,101,224,1), rgba(0,203,177,1)); | ||
+ | color: black; | ||
+ | z-index: 2; | ||
+ | } | ||
+ | .circleL img { | ||
+ | max-height: 130px; | ||
+ | width: auto; | ||
+ | } | ||
+ | #conceptFlow h5{ | ||
+ | font-weight: bold; | ||
+ | font-size: 2rem; | ||
+ | margin-bottom: 30px; | ||
+ | color:#009ec6; | ||
+ | } | ||
+ | #conceptFlow span{ | ||
+ | font-size: 1.5rem; | ||
+ | } | ||
+ | /* height of each section*/ | ||
+ | .how-it-works.row{ | ||
+ | height: 50vh | ||
+ | } | ||
+ | .how-it-works.row .col-3 { | ||
+ | align-self: stretch; | ||
+ | } | ||
+ | .how-it-works.row .col-3::after { | ||
+ | content: ""; | ||
+ | position: absolute; | ||
+ | border-left: 3px solid rgba(82, 187, 199,1); | ||
+ | z-index: 1; | ||
+ | } | ||
+ | .diagnosis.row .col-3::after { | ||
+ | content: ""; | ||
+ | position: absolute; | ||
+ | border-left: 3px dotted rgba(82, 187, 199,1); | ||
+ | z-index: 1; | ||
+ | } | ||
+ | .how-it-works.row .col-3.bottom::after { | ||
+ | height: 50%; | ||
+ | left: 50%; | ||
+ | top: 50%; | ||
+ | } | ||
+ | .how-it-works.row .col-3.full::after { | ||
+ | height: 100%; | ||
+ | left: calc(50% - 3px); | ||
+ | } | ||
+ | .how-it-works.row .col-3.fullRight::after { | ||
+ | height: 100%; | ||
+ | left: 50%; | ||
+ | } | ||
+ | .how-it-works.row .col-3.top::after { | ||
+ | height: 50%; | ||
+ | left: calc(50% - 3px); | ||
+ | top: 0; | ||
+ | border: 2px dotted rgba(82, 187, 199,1); | ||
+ | } | ||
− | |||
− | + | .timeline div { | |
− | + | padding: 0; | |
− | + | height: 40px; | |
− | + | } | |
− | + | .timeline hr { | |
− | + | border-top: 3px solid rgba(82, 187, 199,1); | |
− | + | background-color: transparent; | |
− | + | margin: 0; | |
+ | top: 17px; | ||
+ | position: relative; | ||
+ | } | ||
+ | .timeline .col-3 { | ||
+ | display: flex; | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | .timeline .corner { | ||
+ | border: 3px solid rgba(82, 187, 199,1); | ||
+ | width: 100%; | ||
+ | position: relative; | ||
+ | border-radius: 15px; | ||
+ | } | ||
+ | .timeline .top-right { | ||
+ | left: 50%; | ||
+ | top: -50%; | ||
+ | } | ||
+ | .timeline .left-bottom { | ||
+ | left: -50%; | ||
+ | top: calc(50% - 3px); | ||
+ | } | ||
+ | .timeline .top-left { | ||
+ | left: -50%; | ||
+ | top: -50%; | ||
+ | } | ||
+ | .timeline .right-bottom { | ||
+ | left: 50%; | ||
+ | top: calc(50% - 3px); | ||
+ | } | ||
+ | /* Qoutes Part*/ | ||
+ | #warnPics { | ||
+ | height: auto; | ||
+ | min-height: 20vw; | ||
+ | font-weight: 100; | ||
+ | } | ||
− | + | #warnPics .qoutes span{ | |
− | + | font-size: 1.5rem; | |
− | + | } | |
+ | #warnPics .qoutes{ | ||
+ | } | ||
+ | #qoute1 { | ||
+ | background: linear-gradient(rgba(35, 35, 35, 1), rgba(35, 35, 35, .3), rgba(35, 35, 35, 1)), url("https://static.igem.org/mediawiki/2018/c/c9/T--Munich--death_background.png"); | ||
+ | background-repeat: no-repeat; | ||
+ | background-size: cover; | ||
+ | background-position: center; | ||
+ | color: #fff; | ||
+ | } | ||
+ | #qoute2 { | ||
+ | background: linear-gradient(rgba(35, 35, 35, 1), rgba(35, 35, 35, .3), rgba(35, 35, 35, 1)), url("https://static.igem.org/mediawiki/2018/4/4e/T--Munich--WarningPic1.jpg"); | ||
+ | background-repeat: no-repeat; | ||
+ | background-size: cover; | ||
+ | background-position: center; | ||
+ | color: #fff; | ||
+ | } | ||
+ | #qoute3 { | ||
+ | background: linear-gradient(rgba(35, 35, 35, 1), rgba(35, 35, 35, .3), rgba(35, 35, 35, 1)), url("https://static.igem.org/mediawiki/2018/6/66/T--Munich--PHAGE.jpg"); | ||
+ | background-repeat: no-repeat; | ||
+ | background-size: cover; | ||
+ | background-position: top; | ||
+ | color: #fff; | ||
+ | } | ||
− | + | #whyTitle { background:rgba(35, 35, 35, 1); } | |
− | + | .warningContent span { font-size:2.5rem; font-weight:bold;} | |
− | + | ||
− | + | .mobileText{ | |
+ | font-size:1.5rem !important; | ||
+ | margin-top: 3rem; | ||
+ | } | ||
− | |||
+ | |||
+ | #conceptFlowTitle { | ||
+ | font-size: 2.5rem; | ||
+ | font-weight: bold; | ||
+ | } | ||
− | + | /* START PopUp STYLES */ | |
+ | .labelBox{ | ||
+ | display: inline; | ||
+ | } | ||
+ | .reg { | ||
+ | background-color: white; | ||
+ | display: inline; | ||
+ | margin: 0 auto; | ||
+ | width: auto; | ||
+ | font-size: 16.996px; | ||
+ | line-height: 20px; | ||
+ | padding: 12px 18px 13px; | ||
+ | -webkit-border-radius: 6px; | ||
+ | -moz-border-radius: 6px; | ||
+ | -ms-border-radius: 6px; | ||
+ | -o-border-radius: 6px; | ||
+ | border-radius: 6px; | ||
+ | -webkit-transition: all 0.3s ease-in-out; | ||
+ | -moz-transition: all 0.3s ease-in-out; | ||
+ | transition: all 0.3s ease-in-out; | ||
+ | color: #009ec6; | ||
+ | cursor: pointer; | ||
+ | border: none; | ||
+ | text-decoration: underline; | ||
+ | } | ||
+ | .reg:hover { | ||
+ | opacity: 0.8; | ||
+ | -webkit-transition: all 0.3s ease-in-out; | ||
+ | -moz-transition: all 0.3s ease-in-out; | ||
+ | transition: all 0.3s ease-in-out; | ||
+ | } | ||
+ | .pop { | ||
+ | display: none; | ||
+ | position: absolute; | ||
+ | top: 75%; | ||
+ | max-width:100%; | ||
+ | height: auto; | ||
+ | -webkit-border-radius: 6px; | ||
+ | -moz-border-radius: 6px; | ||
+ | -ms-border-radius: 6px; | ||
+ | -o-border-radius: 6px; | ||
+ | border-radius: 6px; | ||
+ | z-index: 200; | ||
+ | padding: 10px; | ||
+ | background-color: rgba(240, 240, 240, 1); | ||
+ | box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); | ||
+ | } | ||
+ | .pop > h1 { | ||
+ | color: #009ec6; | ||
+ | font-size: 100%; | ||
+ | } | ||
+ | .pop > p { | ||
+ | font-size: 100%; | ||
+ | color: #777777; | ||
+ | } | ||
+ | .pop > span { | ||
+ | cursor: pointer; | ||
+ | position: absolute; | ||
+ | top: 10px; | ||
+ | right: 10px; | ||
+ | -webkit-border-radius: 100px; | ||
+ | -moz-border-radius: 100px; | ||
+ | color: #777777; | ||
+ | width: 30px; | ||
+ | height: 30px; | ||
+ | } | ||
+ | /* END PopUp STYLES */ | ||
+ | .mobileTitle { | ||
+ | font-size: 3.5rem !important; | ||
+ | } | ||
+ | .readButton, .readButton:visited{ | ||
+ | color:#17a2b8; | ||
+ | } | ||
+ | .readButton:hover { | ||
+ | color:white; | ||
+ | } | ||
+ | |||
+ | .showCase .row{ | ||
+ | padding-left: 10vw; | ||
+ | padding-right: 10vw; | ||
+ | } | ||
+ | @media only screen and (max-width: 767.98px) { | ||
+ | #videoBox #videoShow{ | ||
+ | position: relative; | ||
+ | right: 120%; | ||
+ | } | ||
+ | #PhactoryTitle { | ||
+ | font-size: 4rem; | ||
+ | } | ||
+ | #PhactoryText { | ||
+ | font-size: 1.5rem; | ||
+ | } | ||
+ | .warningContent span{ | ||
+ | font-size: 1.5rem; | ||
+ | } | ||
+ | #warnPics .qoutes{ | ||
+ | font-size: 1rem; | ||
+ | } | ||
+ | #compareBox img { | ||
+ | max-height: 20vh; width: auto; | ||
+ | } | ||
+ | .mobileTitle { | ||
+ | font-size: 3rem !important; | ||
+ | } | ||
+ | |||
+ | #conceptFlowTitle { | ||
+ | font-size: 2rem; | ||
+ | font-weight: bold; | ||
+ | } | ||
+ | #conceptFlow h5{ | ||
+ | font-size: 1.5rem; | ||
+ | } | ||
+ | #conceptFlow span{ | ||
+ | font-size: 1rem; | ||
+ | } | ||
− | + | .how-it-works.row{ | |
+ | height: auto; | ||
+ | } | ||
+ | |||
+ | /* FlowChart*/ | ||
+ | .circleO { | ||
+ | height: 40px; | ||
+ | width: 40px; | ||
+ | } | ||
+ | .circleO img { | ||
+ | max-height: 25px; | ||
+ | width: auto; | ||
+ | } | ||
+ | .circleS { | ||
+ | height: 40px; | ||
+ | width: 40px; | ||
+ | } | ||
+ | .circleS img { | ||
+ | max-height: 25px; | ||
+ | width: auto; | ||
+ | } | ||
+ | .circleM { | ||
+ | height: 50px; | ||
+ | width: 50px; | ||
+ | } | ||
+ | .circleM img { | ||
+ | max-height: 35px; | ||
+ | width: auto; | ||
+ | } | ||
+ | .circleL { | ||
+ | height: 60px; | ||
+ | width: 60px; | ||
+ | } | ||
+ | .circleL img { | ||
+ | max-height: 45px; | ||
+ | width: auto; | ||
+ | } | ||
+ | .reg { | ||
+ | padding:0; | ||
+ | } | ||
+ | .mobileText{ | ||
+ | font-size:1rem !important; | ||
+ | margin-top: 0; | ||
+ | } | ||
+ | .showCase .row{ | ||
+ | padding: 0; | ||
+ | } | ||
+ | } | ||
− | + | @media only screen and (max-width: 991.98px) {} | |
− | + | ||
+ | @media only screen and (max-width: 1199.98px) {} | ||
+ | </style> | ||
− | < | + | <script> |
+ | // Scroll Down Icon | ||
+ | $(document).ready(function() { | ||
+ | // Add smooth scrolling to all links | ||
+ | $("#goTo").on('click', function(event) { | ||
− | + | // Make sure this.hash has a value before overriding default behavior | |
− | + | if (this.hash !== "") { | |
− | + | // Prevent default anchor click behavior | |
− | + | event.preventDefault(); | |
− | + | ||
− | + | // Store hash | |
+ | var hash = this.hash; | ||
− | + | // Using jQuery's animate() method to add smooth page scroll | |
− | + | // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area | |
− | + | $('html, body').animate({ | |
+ | scrollTop: $(hash).offset().top | ||
+ | }, 800, function() { | ||
− | + | // Add hash (#) to URL when done scrolling (default click behavior) | |
+ | window.location.hash = hash; | ||
+ | }); | ||
+ | } // End if | ||
+ | }); | ||
+ | }); | ||
+ | $(document).ready(function () { | ||
+ | $(".reg").click(function () { | ||
+ | $(".pop").fadeOut(100); | ||
+ | $(this).next().fadeIn(300); | ||
+ | }); | ||
− | + | $(".pop > span, .pop").click(function () { | |
− | + | $(".pop").fadeOut(300); | |
− | + | }); | |
− | + | }); | |
− | + | ||
− | < | + | </script> |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
+ | <div id="videoBox" class="text-center" style="position: relative; height:100vh; width:100%; overflow: hidden;"> | ||
+ | <video id="videoShow" playsinline autoplay muted loop id="myVideo" style="min-height:100vh; min-width:100%;"> | ||
+ | <source src="https://static.igem.org/mediawiki/2018/b/bb/T--Munich--Cover_video.mp4" type="video/mp4"> | ||
+ | Your browser does not support HTML5 video. | ||
+ | </video> | ||
+ | <div class="text-light d-flex flex-column justify-content-center ml-auto mr-auto" style="position: absolute; bottom:30vh; width: 100%; padding: 50px;"> | ||
+ | <div id="PhactoryTitle" class="display-1 mb-3">Phactory</div> | ||
+ | <div id="PhactoryText" class="h1">Manufacturing Bacteriophages for Precision Medicine</div> | ||
+ | <div id="goToBox" class="mt-5"> | ||
+ | <a id="goTo" href="#whyTitle"> | ||
+ | <div class="chevron"></div> | ||
+ | <div class="chevron"></div> | ||
+ | <div class="chevron"></div> | ||
+ | </a> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
− | |||
− | |||
+ | <div id="whyTitle" class="container-fluid jumbotron jumbotron-fluid text-center mb-0 p-0 align-items-center text-light"> | ||
+ | <div id="warning" class="row px-4" style="padding-top: 100px; padding-bottom: 50px;"> | ||
+ | <div class="warningContent col-12"> | ||
+ | <!-- <img src="https://static.igem.org/mediawiki/2018/8/86/T--Munich--WarningCell.png" class="d-block m-auto" style="max-height: 200px; width:auto;"alt="warning">--> | ||
+ | <span class="align-middle border border-danger d-block p-5 mt-3" style="border-width:5px !important; border-radius: 25px;">Pathogenic Bacteria Turn Drug-Resistant at an Alarming Rate</span> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div id="warnPics" class="row"> | ||
+ | <div id="qoute1" class="qoutes col-12 col-md-4 p-3 py-5"><span class="font-italic" style="">By 2050, we project 10 million deaths per year caused by bacterial infections</span><br><br><a href="https://amr-review.org/sites/default/files/AMR%20Review%20Paper%20-%20Tackling%20a%20crisis%20for%20the%20health%20and%20wealth%20of%20nations_1.pdf" class="text-white">UK Government (2015) </a></div> | ||
+ | <div id="qoute2" class="qoutes col-12 col-md-4 p-3 py-5"><span class="font-italic" style="">New superbug breaks through last line of antibiotic defense</span><br><br><a href="https://www.nature.com/articles/s41564-018-0230-7" class="text-white">Nature Microbiology (2018) </a></div> | ||
+ | <div id="qoute3" class="qoutes col-12 col-md-4 p-3 py-5"><span class="font-italic" style="">An alternative should be quality-assured, safe and effective</span><br><br><a href="http://www.who.int/antimicrobial-resistance/publications/global-action-plan/en/" class="text-white">WHO (2015) </a></div> | ||
+ | </div> | ||
+ | |||
+ | <hr style="border-top:1px solid rgba(235,235,235,.5); margin: 3vw 3vw 0 3vw;"> | ||
+ | |||
+ | <div class="row pt-5 pb-3 "> | ||
+ | <div class="warningContent col-12 slide-in"> | ||
+ | <span class="align-middle">Phages Are the Natural Enemies of Bacteria</span> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="row p-5" style="padding-left: 10vw; padding-right: 10vw;"> | ||
+ | <div class="col-12 col-md-6 slide-in"> | ||
+ | <img class="img-fluid" src="https://static.igem.org/mediawiki/2018/3/3b/T--munich--phage_therapy.png" alt="meetUp" style="padding-left: 6vw;"> | ||
+ | </div> | ||
+ | <div class="col-12 col-md-6 slide-in pt-3" style="padding-right: 6vw;"> | ||
+ | <p class="text-justify text-phactory2 mobileText">Phages are capable of specifically and reliably infecting and killing bacteria but are harmless to human cells. They can therefore be administered to patients as a cure for bacterial infections. This process is called:</p> | ||
+ | <h2 class="text-phactory2 display-4 mobileTitle">Phage Therapy</h2> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | <div class="row pt-5 pb-3 "> | ||
+ | <div class="warningContent col-12 slide-in"> | ||
+ | <span class="align-middle">but...</span> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | <div class="row p-5" style="padding-left: 10vw; padding-right: 10vw;"> | ||
+ | <div class="col-12 col-md-6 slide-in"> | ||
+ | <img class="img-fluid" src="https://static.igem.org/mediawiki/2018/7/72/T--Munich--Home_traditional_new.png" alt="meetUp" style="padding-left: 6vw;"> | ||
+ | </div> | ||
− | <div class=" | + | <div class="col-12 col-md-6 slide-in pt-3" style="padding-right: 6vw;"> |
− | < | + | <h2 class="text-phactory2 display-4 mobileTitle">Traditional Methods</h2> |
− | < | + | <p class="text-justify text-phactory2 mobileText">...are unsafe for manufacturer and patient. Giant flasks of pathogenic bacteria are cultivated in order to isolate therapeutic bacteriophages.</p> |
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | <!-- | ||
+ | <div class="row bg-white text-dark pt-5 pb-3"> | ||
+ | <div class="warningContent col-12 slide-in"> | ||
+ | <span class="align-middle">so...we have cooler ideas!</span> | ||
+ | </div> | ||
+ | </div> | ||
+ | --> | ||
− | + | </div> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | </div> | + | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
+ | <div id="conceptFlow" class="text-dark bg-whites"> | ||
+ | <div class="container"> | ||
+ | <div id="conceptFlowTitle" class="pb-3 pt-5 mb-3 text-center slide-in">How does <span class="text-phactory1 display-2 mobileTitle h2">Phactory</span> work?</div> | ||
+ | |||
+ | <div class="row bg-white text-dark pb-5 align-items-center slide-in"> | ||
+ | <div class="col-12 text-center"> | ||
+ | <img class="img-fluid" src="https://static.igem.org/mediawiki/2018/6/6a/T--munich--newmethod_icon.png" alt="meetUp" style=""> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | <!--first section--> | ||
+ | <div class="row align-items-center how-it-works d-flex diagnosis"> | ||
+ | <div class="col-3 col-md-2 text-center bottom d-inline-flex justify-content-center align-items-center"> | ||
+ | <div class="circleO"><img src="https://static.igem.org/mediawiki/2018/0/0a/T--Munich--Diagnosis.png" class="mt-2" alt="logo"></div> | ||
+ | </div> | ||
+ | <div class="col-8 col-md-6 text-center"> | ||
+ | <h5>Diagnosis</h5> | ||
+ | <p class="text-justify">Next generation diagnostic systems like SHERLOCK can identify pathogens with high precision and accuracy. This enables rapid identification of an individualized therapeutic strategy even in the case of multiresistant superbugs. Using Phactory, we overcome the last remaining obstacles for efficient bacteriophage therapy.</p> | ||
+ | </div> | ||
+ | </div> | ||
+ | <!--path between 1-2--> | ||
+ | <div class="row timeline"> | ||
+ | <div class="col-3 col-md-2"> | ||
+ | <div class="corner top-right" style="border-style: dotted;"></div> | ||
+ | </div> | ||
+ | <div class="col-6 col-md-8"> | ||
+ | <hr / style="border-style: dotted;"> | ||
+ | </div> | ||
+ | <div class="col-3 col-md-2"> | ||
+ | <div class="corner left-bottom" style="border-style: dotted;"></div> | ||
+ | </div> | ||
+ | </div> | ||
+ | <!--second section--> | ||
+ | <div class="row align-items-center justify-content-end how-it-works d-flex"> | ||
+ | <div class="col-8 col-md-6 text-center"> | ||
+ | <h5>Modular Phage Assembly</h5> | ||
+ | <p class="text-justify">With a cell-free production system we utilize one of the most revolutionary concepts of synthetic biology to produce therapeutic bacteriophages. Based on personalized diagnostics, bacteriophage DNA is chosen from a library and subjected to extensive quality assessment procedures to ensure a safe and effective application.</p> | ||
+ | <div class="labelBox"> | ||
+ | <button class="reg">homogeneous</button> | ||
+ | <div class="pop text-left"> | ||
+ | <span>✖</span> | ||
+ | <h1>homogeneous</h1> | ||
+ | <p>Because our raw material is DNA, phage therapy based on well-defined phages is no longer a fantasy.</p> | ||
+ | </div> | ||
+ | </div> | ||
+ | <span> | </span> | ||
+ | <div class="labelBox"> | ||
+ | <button class="reg">software-aided</button> | ||
+ | <div class="pop text-left"> | ||
+ | <span>✖</span> | ||
+ | <h1>software-aided</h1> | ||
+ | <p>State of the art DNA sequencing tools are combined with bioinformatics to precisely determine the amount of contaminants in a sample.</p> | ||
+ | </div> | ||
+ | </div> | ||
+ | <span> | </span> | ||
+ | <div class="labelBox"> | ||
+ | <button class="reg">high quality</button> | ||
+ | <div class="pop text-left"> | ||
+ | <span>✖</span> | ||
+ | <h1>high quality</h1> | ||
+ | <p>The phage genome DNA is extensively purified, resulting in a high quality template with minimal contamination.</p> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="text-center my-4"> | ||
+ | <a href="https://2018.igem.org/Team:Munich/Description" class="readButton btn btn-outline-info mt-2">Read More</a> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="col-3 col-md-2 text-center full d-inline-flex justify-content-center align-items-center"> | ||
+ | <div class="circleL"><img src="https://static.igem.org/mediawiki/2018/5/54/T--Munich--PhageEngineering.png" class="mt-2" alt="logo"></div> | ||
+ | </div> | ||
+ | </div> | ||
+ | <!--path between 2-3--> | ||
+ | <div class="row timeline"> | ||
+ | <div class="col-3 col-md-2"> | ||
+ | <div class="corner right-bottom"></div> | ||
+ | </div> | ||
+ | <div class="col-6 col-md-8"> | ||
+ | <hr /> | ||
+ | </div> | ||
+ | <div class="col-3 col-md-2"> | ||
+ | <div class="corner top-left"></div> | ||
+ | </div> | ||
+ | </div> | ||
+ | <!--third section--> | ||
+ | <div class="row align-items-center how-it-works d-flex"> | ||
+ | <div class="col-3 col-md-2 text-center fullRight d-inline-flex justify-content-center align-items-center"> | ||
+ | <div class="circleL"><img src="https://static.igem.org/mediawiki/2018/1/13/T--Munich--PhageProduction.png" class="mt-2" alt="logo"></div> | ||
+ | </div> | ||
+ | <div class="col-8 col-md-6 text-center"> | ||
+ | <h5>Synthetic Phage Manufacturing</h5> | ||
+ | <p class="text-justify">Production of bacteriophages in a cell-free system ensures a fast and reliable application. Furthermore, working in a cell-free environment enables host independent production of phages in only 2.5% of the conventional production volume while demanding no biosafety regulations.</p> | ||
+ | <div class="labelBox"> | ||
+ | <button class="reg"> affordable </button> | ||
+ | <div class="pop text-left"> | ||
+ | <span>✖</span> | ||
+ | <h1>affordable</h1> | ||
+ | <p>At less than $10 per treatment, Phactory allows for a highly competitive production price.</p> | ||
+ | </div> | ||
+ | </div> | ||
+ | <span> | </span> | ||
+ | <div class="labelBox"> | ||
+ | <button class="reg"> scalable </button> | ||
+ | <div class="pop text-left"> | ||
+ | <span>✖</span> | ||
+ | <h1>scalable</h1> | ||
+ | <p>Manufacturing in Phactory can be scaled up for bulk production.</p> | ||
+ | </div> | ||
+ | </div> | ||
+ | <span> | </span> | ||
+ | <div class="labelBox"> | ||
+ | <button class="reg"> modular</button> | ||
+ | <div class="pop text-left"> | ||
+ | <span>✖</span> | ||
+ | <h1>modular</h1> | ||
+ | <p>Phactory is an open system. This allows for the incorporation of modified proteins while leaving the genome unmodified, thereby achieving modularity without genetic modifications.</p> | ||
+ | </div> | ||
+ | </div> | ||
+ | <span> | </span> | ||
+ | <div class="labelBox"> | ||
+ | <button class="reg">safe</button> | ||
+ | <div class="pop text-left"> | ||
+ | <span>✖</span> | ||
+ | <h1>safe</h1> | ||
+ | <p>Host independence eliminates the need to cultivate pathogens to produce bacteriophages.</p> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="text-center my-4"> | ||
+ | <a href="https://2018.igem.org/Team:Munich/Description" class="readButton btn btn-outline-info mt-2">Read More</a> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | <!--path between 3-4--> | ||
+ | <div class="row timeline"> | ||
+ | <div class="col-3 col-md-2"> | ||
+ | <div class="corner top-right"></div> | ||
+ | </div> | ||
+ | <div class="col-6 col-md-8"> | ||
+ | <hr /> | ||
+ | </div> | ||
+ | <div class="col-3 col-md-2"> | ||
+ | <div class="corner left-bottom"></div> | ||
+ | </div> | ||
+ | </div> | ||
+ | <!--4 section--> | ||
+ | <div class="row align-items-center justify-content-end how-it-works d-flex"> | ||
+ | <div class="col-8 col-md-6 text-center"> | ||
+ | <h5>Quality Control</h5> | ||
+ | <p class="text-justify">A thorough quality control structure assures that the produced bacteriophages are pure and effective. Risk of toxic contamination is eliminated.</p> | ||
+ | <div class="labelBox"> | ||
+ | <button class="reg">pure</button> | ||
+ | <div class="pop text-left"> | ||
+ | <span>✖</span> | ||
+ | <h1>pure</h1> | ||
+ | <p>Purity is essential for any therapeutic application. We use third generation sequencing to guarantee absence of DNA contamination in the manufacturing process.</p> | ||
+ | </div> | ||
+ | </div> | ||
+ | <span> | </span> | ||
+ | <div class="labelBox"> | ||
+ | <button class="reg">toxin-free</button> | ||
+ | <div class="pop text-left"> | ||
+ | <span>✖</span> | ||
+ | <h1>toxin-free</h1> | ||
+ | <p>Phactory assembles phages outside of living cells and is therefore free of most biological contaminants. We engineered the manufacturing system to reduce immunogenicity in humans by several orders of magnitude.</p> | ||
+ | </div> | ||
+ | </div> | ||
+ | <span> | </span> | ||
+ | <div class="labelBox"> | ||
+ | <button class="reg">GMO-free</button> | ||
+ | <div class="pop text-left"> | ||
+ | <span>✖</span> | ||
+ | <h1>GMO-free</h1> | ||
+ | <p>The phages assembled by Phactory are purified to remove any genetically modified material before leaving a controlled lab environment.</p> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="text-center my-4"> | ||
+ | <a href="https://2018.igem.org/Team:Munich/Description" class="readButton btn btn-outline-info mt-2">Read More</a> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="col-3 col-md-2 text-center full d-inline-flex justify-content-center align-items-center"> | ||
+ | <div class="circleM"><img src="https://static.igem.org/mediawiki/2018/c/c9/T--Munich--Quality_Control.png" class="mt-2" alt="logo"></div> | ||
+ | </div> | ||
+ | </div> | ||
+ | <!--path between 4-5--> | ||
+ | <div class="row timeline"> | ||
+ | <div class="col-3 col-md-2"> | ||
+ | <div class="corner right-bottom"></div> | ||
+ | </div> | ||
+ | <div class="col-6 col-md-8"> | ||
+ | <hr /> | ||
+ | </div> | ||
+ | <div class="col-3 col-md-2"> | ||
+ | <div class="corner top-left"></div> | ||
+ | </div> | ||
+ | </div> | ||
+ | <!--5 section--> | ||
+ | <div class="row align-items-center how-it-works d-flex"> | ||
+ | <div class="col-3 col-md-2 text-center fullRight d-inline-flex justify-content-center align-items-center"> | ||
+ | <div class="circleM"><img src="https://static.igem.org/mediawiki/2018/2/27/T--Munich--PackagingShipping.png" class="mt-2" alt="logo"></div> | ||
+ | </div> | ||
+ | <div class="col-8 col-md-6 text-center"> | ||
+ | <h5>Packaging</h5> | ||
+ | <p class="text-justify">Bacteriophage therapy covers a broad range of potential applications. We engineered custom hardware to package bacteriophages for oral treatment. Our packaging procedure is the last step of a personalized on-site manufacturing process.</p> | ||
+ | <div class="labelBox"> | ||
+ | <button class="reg">long shelf-life</button> | ||
+ | <div class="pop text-left"> | ||
+ | <span>✖</span> | ||
+ | <h1>long shelf-life</h1> | ||
+ | <p>Phactory and phages are fragile components. We combined various techniques to enable phage assembly outside of a lab.</p> | ||
+ | </div> | ||
+ | </div> | ||
+ | <span> | </span> | ||
+ | <div class="labelBox"> | ||
+ | <button class="reg">portable</button> | ||
+ | <div class="pop text-left"> | ||
+ | <span>✖</span> | ||
+ | <h1>portable</h1> | ||
+ | <p>We demonstrated lyophilization of Phactory components in order to enable long range transport.</p> | ||
+ | </div> | ||
+ | </div> | ||
+ | <span> | </span> | ||
+ | <div class="labelBox"> | ||
+ | <button class="reg">on-site</button> | ||
+ | <div class="pop text-left"> | ||
+ | <span>✖</span> | ||
+ | <h1>on-site</h1> | ||
+ | <p>Producing phages in Phactory is so simple that it allows any doctor to apply phage therapy on-site.</p> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="text-center my-4"> | ||
+ | <a href="https://2018.igem.org/Team:Munich/Hardware" class="readButton btn btn-outline-info mt-2">Read More</a> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | <!--path between 5-6--> | ||
+ | <div class="row timeline"> | ||
+ | <div class="col-3 col-md-2"> | ||
+ | <div class="corner top-right" style="border-style: dotted;"></div> | ||
+ | </div> | ||
+ | <div class="col-6 col-md-8"> | ||
+ | <hr / style="border-style: dotted;"> | ||
+ | </div> | ||
+ | <div class="col-3 col-md-2"> | ||
+ | <div class="corner left-bottom" style="border-style: dotted;"></div> | ||
+ | </div> | ||
+ | </div> | ||
+ | <!--6 section--> | ||
+ | <div class="row align-items-center justify-content-end how-it-works d-flex"> | ||
+ | <div class="col-8 col-md-6 text-center"> | ||
+ | <h5>Therapy</h5> | ||
+ | <p class="text-justify">Our bacteriophages are now ready for therapy. Phactory is fast and reliable enough to be an oral bedside application.</p> | ||
+ | <div class="labelBox"> | ||
+ | <button class="reg">cooperation</button> | ||
+ | <div class="pop text-left"> | ||
+ | <span>✖</span> | ||
+ | <h1>cooperation</h1> | ||
+ | <p>We were able to produce genetically modified phages we received from the iGEM Team in Grenoble.</p> | ||
+ | </div> | ||
+ | </div> | ||
+ | <span> | </span> | ||
+ | <div class="labelBox"> | ||
+ | <button class="reg">integrated human practices</button> | ||
+ | <div class="pop text-left"> | ||
+ | <span>✖</span> | ||
+ | <h1>integrated human practice</h1> | ||
+ | <p>We reached out to local doctors to demonstrate just how easy bacteriophage therapy using Phactory is and to gain valuable input for our project.</p> | ||
+ | </div> | ||
+ | </div> | ||
+ | <span> | </span> | ||
+ | <div class="labelBox"> | ||
+ | <button class="reg">ready</button> | ||
+ | <div class="pop text-left"> | ||
+ | <span>✖</span> | ||
+ | <h1>ready</h1> | ||
+ | <p>In cooperation with phage therapy pioneers in Belgium, we safely produced functional phages against EHEC – a deadly pathogen.</p> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="text-center my-4"> | ||
+ | <a href="https://2018.igem.org/Team:Munich/Human_Practices" class="readButton btn btn-outline-info mt-2">Read More</a> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="col-3 col-md-2 text-center top d-inline-flex justify-content-center align-items-center"> | ||
+ | <div class="circleO"><img src="https://static.igem.org/mediawiki/2018/c/c0/T--Munich--Optimization.png" class="mt-2" alt="logo"></div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | <div class="showCase container-fluid jumbotron jumbotron-fluid text-center bg-secondary align-items-center text-light mb-0"> | ||
+ | <div class="row" style=""> | ||
+ | <div class="col-12 col-md-6"> | ||
+ | <video controls poster="https://static.igem.org/mediawiki/2018/c/c8/T--Munich--Doctor_preview.jpg" style="width:100%;"> | ||
+ | <source src="https://static.igem.org/mediawiki/2018/f/ff/T--Munich--Intervie_RDI.mp4"> | ||
+ | Your browser does not support the video tag. | ||
+ | </video> | ||
+ | </div> | ||
+ | <div class="col-12 col-md-6 p-5"> | ||
+ | <h1>Human Practices</h1> | ||
+ | <span class="d-block mt-5"> | ||
+ | <p> | ||
+ | To get an overview of how serious antimicrobial resistance really is, we visited the hospital <i>Rechts der Isar</i> of the Technical University of Munich to meet Dr. Friedemann Gebhardt, the head of the hygiene department. Following his suggestions, we integrated storage protocols into Phactory. </p></span> | ||
+ | |||
+ | <a href="https://2018.igem.org/Team:Munich/Human_Practices" class="readButton btn btn-outline-info mt-5">Read More</a> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | <div class="row mt-4" style=""> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | <div class="showCase container-fluid jumbotron jumbotron-fluid text-center bg-dark align-items-center text-light mb-0"> | ||
+ | <div class="row" style=""> | ||
+ | <div class="col-12 col-md-6"> | ||
+ | <figure class="figure"> | ||
+ | <img src="https://static.igem.org/mediawiki/2018/c/c7/T--munich--afterigem.png" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure."> | ||
+ | </figure> | ||
+ | </div> | ||
+ | <div class="col-12 col-md-6 p-5"> | ||
+ | <h1>Entrepreneurship</h1> | ||
+ | <span class="d-block mt-5"> | ||
+ | <p> | ||
+ | We set a timeline including the steps that have to be taken to further advance our project. Taking the disruptive potential of Phactory into account, we evaluated the penetrable market of Phactory. Parts of our project are patent-pending.</p></span> | ||
+ | |||
+ | <a href="https://2018.igem.org/Team:Munich/Entrepreneurship" class="readButton btn btn-outline-info mt-5">Read More</a> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | <div class="row mt-4" style=""> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | <div class="showCase container-fluid jumbotron jumbotron-fluid text-center bg-secondary align-items-center text-light mb-0"> | ||
+ | <div class="row" style=""> | ||
+ | <div class="col-12 col-md-6"> | ||
+ | <figure class="figure"> | ||
+ | <img src="https://static.igem.org/mediawiki/2018/8/88/T--Munich--Software_Sequ-Into-white.png" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure."> | ||
+ | </figure> | ||
+ | |||
+ | </div> | ||
+ | <div class="col-12 col-md-6 p-5"> | ||
+ | <h1>Sequ-Into</h1> | ||
+ | <span class="d-block mt-5"> | ||
+ | <p> | ||
+ | Our application combines powerful bioinformatic algorithms with third generation sequencing techniques, allowing us to reach DNA purity levels of up to 96%.</p></span> | ||
+ | |||
+ | <a href="https://2018.igem.org/Team:Munich/Software" class="readButton btn btn-outline-info mt-5">Read More</a> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | <div class="row mt-4" style=""> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | <div class="showCase container-fluid jumbotron jumbotron-fluid text-center bg-dark align-items-center text-light mb-0"> | ||
+ | <div class="row" style=""> | ||
+ | <div class="col-12 col-md-6"> | ||
+ | <img class="img-fluid border rounded" src="https://static.igem.org/mediawiki/2018/b/ba/T--Munich--europeanmeetup_teaser.jpeg" alt="meetUp" style=""> | ||
+ | </div> | ||
+ | <div class="col-12 col-md-6 p-5"> | ||
+ | <h1>European Meetup</h1> | ||
+ | <h3>Munich 2018</h3> | ||
+ | <span class="d-block mt-5">One of the largest iGEM Events in Europe</span><br> | ||
+ | <a href="https://2018.igem.org/Team:Munich/European_Meetup" class="readButton btn btn-outline-info mt-5">Read More</a> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | <div class="row mt-4" style=""> | ||
+ | <div class="col-6 col-md-3 mt-3"> | ||
+ | <span style="font-size: 3rem; color:#009ec6;">37</span><br> | ||
+ | <span>Teams</span> | ||
+ | </div> | ||
+ | <div class="col-6 col-md-3 mt-3"> | ||
+ | <span style="font-size: 3rem; color:#009ec6;">244</span><br> | ||
+ | <span>Participants</span> | ||
+ | </div> | ||
+ | <div class="col-6 col-md-3 mt-3"> | ||
+ | <span style="font-size: 3rem; color:#009ec6;">9</span><br> | ||
+ | <span>International speakers</span> | ||
+ | </div> | ||
+ | <div class="col-6 col-md-3 mt-3"> | ||
+ | <span style="font-size: 3rem; color:#009ec6;">11</span><br> | ||
+ | <span>Workshops</span> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | </div> | ||
</html> | </html> | ||
+ | |||
+ | {{Munich/PhactoryFooter}} |
Latest revision as of 02:45, 18 October 2018
Diagnosis
Next generation diagnostic systems like SHERLOCK can identify pathogens with high precision and accuracy. This enables rapid identification of an individualized therapeutic strategy even in the case of multiresistant superbugs. Using Phactory, we overcome the last remaining obstacles for efficient bacteriophage therapy.
Modular Phage Assembly
With a cell-free production system we utilize one of the most revolutionary concepts of synthetic biology to produce therapeutic bacteriophages. Based on personalized diagnostics, bacteriophage DNA is chosen from a library and subjected to extensive quality assessment procedures to ensure a safe and effective application.
homogeneous
Because our raw material is DNA, phage therapy based on well-defined phages is no longer a fantasy.
software-aided
State of the art DNA sequencing tools are combined with bioinformatics to precisely determine the amount of contaminants in a sample.
high quality
The phage genome DNA is extensively purified, resulting in a high quality template with minimal contamination.
Synthetic Phage Manufacturing
Production of bacteriophages in a cell-free system ensures a fast and reliable application. Furthermore, working in a cell-free environment enables host independent production of phages in only 2.5% of the conventional production volume while demanding no biosafety regulations.
affordable
At less than $10 per treatment, Phactory allows for a highly competitive production price.
scalable
Manufacturing in Phactory can be scaled up for bulk production.
modular
Phactory is an open system. This allows for the incorporation of modified proteins while leaving the genome unmodified, thereby achieving modularity without genetic modifications.
safe
Host independence eliminates the need to cultivate pathogens to produce bacteriophages.
Quality Control
A thorough quality control structure assures that the produced bacteriophages are pure and effective. Risk of toxic contamination is eliminated.
pure
Purity is essential for any therapeutic application. We use third generation sequencing to guarantee absence of DNA contamination in the manufacturing process.
toxin-free
Phactory assembles phages outside of living cells and is therefore free of most biological contaminants. We engineered the manufacturing system to reduce immunogenicity in humans by several orders of magnitude.
GMO-free
The phages assembled by Phactory are purified to remove any genetically modified material before leaving a controlled lab environment.
Packaging
Bacteriophage therapy covers a broad range of potential applications. We engineered custom hardware to package bacteriophages for oral treatment. Our packaging procedure is the last step of a personalized on-site manufacturing process.
long shelf-life
Phactory and phages are fragile components. We combined various techniques to enable phage assembly outside of a lab.
portable
We demonstrated lyophilization of Phactory components in order to enable long range transport.
on-site
Producing phages in Phactory is so simple that it allows any doctor to apply phage therapy on-site.
Therapy
Our bacteriophages are now ready for therapy. Phactory is fast and reliable enough to be an oral bedside application.
cooperation
We were able to produce genetically modified phages we received from the iGEM Team in Grenoble.
integrated human practice
We reached out to local doctors to demonstrate just how easy bacteriophage therapy using Phactory is and to gain valuable input for our project.
ready
In cooperation with phage therapy pioneers in Belgium, we safely produced functional phages against EHEC – a deadly pathogen.
Human Practices
To get an overview of how serious antimicrobial resistance really is, we visited the hospital Rechts der Isar of the Technical University of Munich to meet Dr. Friedemann Gebhardt, the head of the hygiene department. Following his suggestions, we integrated storage protocols into Phactory.
Read MoreEntrepreneurship
We set a timeline including the steps that have to be taken to further advance our project. Taking the disruptive potential of Phactory into account, we evaluated the penetrable market of Phactory. Parts of our project are patent-pending.
Read MoreSequ-Into
Our application combines powerful bioinformatic algorithms with third generation sequencing techniques, allowing us to reach DNA purity levels of up to 96%.
Read MoreTeams
Participants
International speakers
Workshops