Difference between revisions of "Team:Munich"

 
(52 intermediate revisions by 5 users not shown)
Line 1: Line 1:
 
+
{{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;
 +
}
  
<div class="column full_size" >
+
.chevron:before,
<h1> PHACTORY </h1>
+
.chevron:after {
<h2> Project Description </h2>
+
content: ' ';
<p>We aim to revolutionize phage engineering by facilitating self assembly in an optimized synthetic cell extract. The increasing occurrence of pathogenic bacteria resistant to antibiotics is a major threat to human health. One promising alternative is the therapeutic use of bacteriophages, which is currently is restricted to the use of naturally occurring phages. Available methods for phage engineering are limited because expression of its genome remains difficult. First, we optimize the cell free transcription-translation system (TX-TL) by E. Coli genome engineering, optimization of a preparation protocol and extract lyophilization. We aim to establish a new platform of easier, pure and affordable phage genome engineering and to distribute our improved TX-TL across the scientific community. As a proof of concept, we engineer phages to kill bacteria without causing lysis. By preventing the sudden release of bacterial components, immune response like sepsis can be avoided.</p>
+
position: absolute;
 +
top: 0;
 +
height: 100%;
 +
width: 51%;
 +
background: #fff;
 +
}
  
<img src="https://static.igem.org/mediawiki/2018/b/ba/T--Munich--home_Team.jpg">
+
.chevron:before {
+
left: 0;
 +
transform: skew(0deg, 30deg);
 +
}
  
</div>
+
.chevron:after {
 +
right: 0;
 +
width: 50%;
 +
transform: skew(0deg, -30deg);
 +
}
  
 +
@keyframes move {
 +
25% {
 +
opacity: 1;
  
<div class="column full_size" >
+
}
 +
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);
 +
}
 +
}
  
<h3>Before you start</h3>
+
@keyframes pulse {
<p> Please read the following pages:</p>
+
to {
<ul>
+
opacity: 1;
<li>  <a href="https://2018.igem.org/Competition">Competition Hub</a> </li>
+
}
<li> <a href="https://2018.igem.org/Competition/Deliverables/Wiki">Wiki Requirements page</a></li>
+
}
<li> <a href="https://2018.igem.org/Resources/Template_Documentation">Template documentation</a></li>
+
</ul>
+
</div>
+
  
  
<div class="clear extra_space"></div>
 
<div class="line_divider"></div>
 
<div class="clear extra_space"></div>
 
  
 +
/* 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);
 +
}
  
  
<div class="column full_size" >
+
.timeline div {
<h3> Styling your wiki </h3>
+
padding: 0;
<p>You may style this page as you like or you can simply leave the style as it is. You can easily keep the styling and edit the content of these default wiki pages with your project information and completely fulfill the requirement to document your project.</p>
+
height: 40px;
<p>While you may not win Best Wiki with this styling, your team is still eligible for all other awards. This default wiki meets the requirements, it improves navigability and ease of use for visitors, and you should not feel it is necessary to style beyond what has been provided.</p>
+
}
 +
.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);
 +
}
  
</div>
+
/* 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;
 +
}
  
<div class="clear extra_space"></div>
+
#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;
 +
}
  
<div class="column third_size" >
 
  
<h3> Uploading pictures and files </h3>
 
<p> You must upload any pictures and files to the iGEM 2018 server. Remember to keep all your pictures and files within your team's namespace or at least include your team's name in the file name. </p>
 
  
 +
/* 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 */
  
<p>When you upload, set the "Destination Filename" to <b> T--YourOfficialTeamName--NameOfFile.jpg</b>. (If you don't do this, someone else might upload a different file with the same "Destination Filename", and your file would be erased!)</p>
+
.mobileTitle  {
 +
font-size: 3.5rem !important;
 +
}
 +
.readButton, .readButton:visited{ 
 +
color:#17a2b8;
 +
}
 +
.readButton:hover  { 
 +
color:white;
 +
}
 +
   
 +
.showCase .row{ 
 +
padding-left: 10vw;
 +
padding-right: 10vw;
 +
}
  
<div class="button_link">
+
@media only screen and (max-width: 767.98px) {
<a href="https://2018.igem.org/Special:Upload">
+
#videoBox #videoShow{
UPLOAD FILES
+
position: relative;
</a>
+
right: 120%;
</div>
+
}
 +
#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;
 +
}
  
</div>
+
.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;
 +
}
 +
}
  
<div class="column third_size" >
+
@media only screen and (max-width: 991.98px) {}
<h3> Wiki template information </h3>
+
<p>We have created these wiki template pages to help you get started and to help you think about how your team will be evaluated. You can find a list of all the pages tied to awards here at the <a href="https://2018.igem.org/Judging/Pages_for_Awards">Pages for awards</a> link. You must edit these pages to be evaluated for medals and awards, but ultimately the design, layout, style and all other elements of your team wiki is up to you!</p>
+
  
</div>  
+
@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();
  
<div class="column third_size" >
+
            // Store hash
<div class="highlight decoration_B_full">
+
            var hash = this.hash;
<h3> Editing your wiki </h3>
+
<p>On this page you can document your project, introduce your team members, document your progress and share your iGEM experience with the rest of the world! </p>
+
<p>Use WikiTools - Edit in the black menu bar to edit this page</p>
+
  
<div class="button_link">
+
            // Using jQuery's animate() method to add smooth page scroll
<a href="https://2018.igem.org/wiki/index.php?title=Team:Munich&action=edit">
+
            // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
EDIT PAGE
+
            $('html, body').animate({
</a>
+
                scrollTop: $(hash).offset().top
</div>
+
            }, 800, function() {
  
 +
                // Add hash (#) to URL when done scrolling (default click behavior)
 +
                window.location.hash = hash;
 +
            });
 +
        } // End if
 +
    });
 +
});
  
</div>
 
</div>
 
  
 +
$(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 class="clear extra_space"></div>
 
<div class="line_divider"></div>
 
<div class="clear extra_space"></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 class="column two_thirds_size" >
+
        <div id="warnPics" class="row">
<h3>Tips</h3>
+
            <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>
<p>This wiki will be your team’s first interaction with the rest of the world, so here are a few tips to help you get started: </p>
+
            <div 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>  
<ul>
+
            <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>
<li>State your accomplishments! Tell people what you have achieved from the start. </li>
+
        </div>
<li>Be clear about what you are doing and how you plan to do this.</li>
+
       
<li>You have a global audience! Consider the different backgrounds that your users come from.</li>
+
        <hr style="border-top:1px solid rgba(235,235,235,.5); margin: 3vw 3vw 0 3vw;">
<li>Make sure information is easy to find; nothing should be more than 3 clicks away.  </li>
+
       
<li>Avoid using very small fonts and low contrast colors; information should be easy to read.  </li>
+
        <div class="row pt-5 pb-3 ">
<li>Start documenting your project as early as possible; don’t leave anything to the last minute before the Wiki Freeze. For a complete list of deadlines visit the <a href="https://2018.igem.org/Calendar">iGEM 2018 calendar</a> </li>
+
        <div class="warningContent col-12 slide-in">
<li>Have lots of fun! </li>
+
        <span class="align-middle">Phages Are the Natural Enemies of Bacteria</span>
</ul>  
+
        </div>
</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="column third_size">
+
            <div class="col-12 col-md-6 slide-in pt-3" style="padding-right: 6vw;">
<div class="highlight decoration_A_full">
+
<h2 class="text-phactory2 display-4 mobileTitle">Traditional Methods</h2>
<h3>Inspiration</h3>
+
                <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>  
<p> You can also view other team wikis for inspiration! Here are some examples:</p>
+
            </div>
<ul>
+
        </div>
<li> <a href="https://2014.igem.org/Team:SDU-Denmark/"> 2014 SDU Denmark </a> </li>
+
   
<li> <a href="https://2014.igem.org/Team:Aalto-Helsinki">2014 Aalto-Helsinki</a> </li>
+
<li> <a href="https://2014.igem.org/Team:LMU-Munich">2014 LMU-Munich</a> </li>
+
<li> <a href="https://2014.igem.org/Team:Michigan"> 2014 Michigan</a></li>
+
<li> <a href="https://2014.igem.org/Team:ITESM-Guadalajara">2014 ITESM-Guadalajara </a></li>
+
<li> <a href="https://2014.igem.org/Team:SCU-China"> 2014 SCU-China </a></li>
+
</ul>
+
</div>
+
</div>
+
  
 +
<!--
 +
        <div 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 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

Phactory

Phactory
Manufacturing Bacteriophages for Precision Medicine
Pathogenic Bacteria Turn Drug-Resistant at an Alarming Rate
By 2050, we project 10 million deaths per year caused by bacterial infections

UK Government (2015)
New superbug breaks through last line of antibiotic defense

Nature Microbiology (2018)
An alternative should be quality-assured, safe and effective

WHO (2015)

Phages Are the Natural Enemies of Bacteria
meetUp

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:

Phage Therapy

but...
meetUp

Traditional Methods

...are unsafe for manufacturer and patient. Giant flasks of pathogenic bacteria are cultivated in order to isolate therapeutic bacteriophages.

How does Phactory work?
meetUp
logo
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.

logo

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

logo

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

logo

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 More
A generic square placeholder image with rounded corners in a figure.

Entrepreneurship

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 More
A generic square placeholder image with rounded corners in a figure.

Sequ-Into

Our application combines powerful bioinformatic algorithms with third generation sequencing techniques, allowing us to reach DNA purity levels of up to 96%.

Read More
meetUp

European Meetup

Munich 2018

One of the largest iGEM Events in Europe
Read More
37
Teams
244
Participants
9
International speakers
11
Workshops