Difference between revisions of "Team:UPMC-Paris"

 
(449 intermediate revisions by 4 users not shown)
Line 1: Line 1:
 
{{UPMC-Paris}}
 
{{UPMC-Paris}}
 
<html>
 
<html>
 +
<body>
 +
<div id="content">
  
−
<div id="homepageWrapper">
+
<div class="w3-content" style="max-width:50vw; height:30vw; position:relative;">
−
<div id="homepageContainer">
+
−
 
+
−
<div class="content" id="homeMainContainer" style="float:left;width:100%;height:50%;"><div class="contentInner" style="margin:1.25%;">
+
−
<div id="homeMainCaption"></div>
+
−
<div id="homepageImageContainer">
+
−
<img class="homeMainImage centered" id="homeImage0" src="https://static.igem.org/mediawiki/2016/0/0b/Groslogo.png">
+
−
<img class="homeMainImage centered" id="homeImage1" src="https://static.igem.org/mediawiki/2016/0/0b/Groslogo.png">
+
−
<img class="homeMainImage centered" id="homeImage2" src="https://static.igem.org/mediawiki/2016/0/0b/Groslogo.png">
+
−
<img class="homeMainImage centered" id="homeImage3" src="https://static.igem.org/mediawiki/2016/0/0b/Groslogo.png">
+
−
<img class="homeMainImage centered" id="homeimage4" src="https://static.igem.org/mediawiki/2016/0/0b/Groslogo.png">
+
−
<img class="homeMainImage centered" id="homeImage5" src="https://static.igem.org/mediawiki/2016/0/0b/Groslogo.png">
+
−
<a id="homeMainArrowPrev" href="#" onclick="changeState(-1); return false;">&#9668;</a>
+
−
<a id="homeMainArrowNext" href="#" onclick="changeState(1); return false;">&#9658;</a>
+
−
</div>
+
−
 
+
−
<style>
+
−
.homeMainImage {
+
−
    transition: opacity 0.5s ease-out;
+
−
    position:absolute !important;
+
−
    height:100%;
+
−
/*    top:0%;
+
−
    left:0%;*/
+
−
    opacity:0;
+
−
}
+
−
#homeImage0 {
+
−
    opacity:1;
+
−
}
+
−
 
+
−
</style>
+
−
<style id="mainState0">
+
−
#homeImage0 {opacity:1;}
+
−
</style>
+
−
 
+
−
<style id="mainState1">
+
−
#homeImage1 {opacity:1;}
+
−
 
+
−
 
+
−
</style>
+
−
 
+
−
<style id="mainState2">
+
−
#homeImage2 {opacity:1;}
+
−
 
+
−
 
+
−
</style>
+
−
<style id="mainState3">
+
−
#homeImage3 {opacity:1;}
+
−
 
+
−
 
+
−
</style>
+
−
<style id="mainState4">
+
−
#homeImage4 {opacity:1;}
+
−
 
+
−
</style>
+
−
<style id="mainState5">
+
−
#homeImage5 {opacity:1;}
+
−
 
+
  
−
</style>
+
<img class="mySlides1" src="https://static.igem.org/mediawiki/2016/5/57/T--UPMC-Paris--MainPage3.jpg" style="width:auto; height:auto;max-width:50vw;max-height:30vw; margin: auto; position: absolute; top: 0; bottom: 0; left: 0; right: 0;">
−
<style id="mainState6">
+
<img class="mySlides1" src="https://static.igem.org/mediawiki/2016/5/5c/T--UPMC-Paris--MainPage4.jpg" style="width:auto; height:auto;max-width:50vw;max-height:30vw; margin: auto; position: absolute; top: 0; bottom: 0; left: 0; right: 0;">
−
#homeImage6 {opacity:1;}
+
<img class="mySlides1" src="https://static.igem.org/mediawiki/2016/9/91/T--UPMC-Paris--MainPage5.jpg" style="width:auto; height:auto;max-width:50vw;max-height:30vw; margin: auto; position: absolute; top: 0; bottom: 0; left: 0; right: 0;">
−
</style>
+
<img class="mySlides1" src="https://static.igem.org/mediawiki/2016/9/96/T--UPMC-Paris--MainPage6.jpg" style="width:auto; height:auto;max-width:50vw;max-height:30vw; margin: auto; position: absolute; top: 0; bottom: 0; left: 0; right: 0;">
 +
<img class="mySlides1" src="https://static.igem.org/mediawiki/2016/0/05/T--UPMC-Paris--MainPage7.jpg" style="width:auto; height:auto;max-width:50vw;max-height:30vw; margin: auto; position: absolute; top: 0; bottom: 0; left: 0; right: 0;">
 +
<img class="mySlides1" src="https://static.igem.org/mediawiki/2016/e/e1/T--UPMC-Paris--MainPage8.jpg" style="width:auto; height:auto;max-width:50vw;max-height:30vw; margin: auto; position: absolute; top: 0; bottom: 0; left: 0; right: 0;">
  
 
<script>
 
<script>
−
var homeMainStates = [
+
var slideIndex = 0;
−
    document.getElementById('mainState0'),
+
carousel();
−
    document.getElementById('mainState1'),
+
−
    document.getElementById('mainState2'),
+
−
    document.getElementById('mainState3'),
+
−
    document.getElementById('mainState4'),
+
−
    document.getElementById('mainState5')
+
−
];
+
−
var homeMainCaptions = [
+
−
    "<h3>1</h3>",
+
−
    "<h3>2</h3>",
+
−
    "<h3>3</h3>",
+
−
    "<h3>4</h3>",
+
−
    "<h3>5</h3>",
+
−
    "<h3>6</h3>",
+
−
    "<h3>7</h3>"
+
−
];
+
−
var curMainState = 0;
+
−
var numMainStates = homeMainStates.length;
+
  
−
$(function() {
+
function carousel() {
−
     for (var i=1;i<numMainStates;i++) {
+
     var i;
−
        homeMainStates[i].disabled = true;
+
     var x = document.getElementsByClassName("mySlides1");
−
     }
+
     for (i = 0; i < x.length; i++) {
−
    document.getElementById('homeMainCaption').innerHTML = homeMainCaptions[0];
+
      x[i].style.display = "none";  
−
});
+
−
 
+
−
function changeState(dir) {
+
−
    if (document.getElementById('homeMainContainer').className == "content") {
+
−
    document.getElementById('homeMainContainer').className = "content running";
+
−
     if (dir==1) {
+
−
        if (curMainState == numMainStates-1) {
+
−
            curMainState = numMainStates;
+
−
            while (curMainState--) {
+
−
                homeMainStates[curMainState].disabled = true;
+
−
            }
+
−
        } else {
+
−
            homeMainStates[curMainState+1].disabled = false;
+
−
        }
+
−
    } else {
+
−
        if (curMainState) {
+
−
            homeMainStates[curMainState].disabled = true;
+
−
        } else {
+
−
            curMainState = 1;
+
−
        }
+
−
    }
+
−
    curMainState += dir;
+
−
    document.getElementById('homeMainCaption').innerHTML = homeMainCaptions[curMainState];
+
−
    setTimeout(function(){document.getElementById('homeMainContainer').className = "content";},700);
+
 
     }
 
     }
 +
    slideIndex++;
 +
    if (slideIndex > x.length) {slideIndex = 1}
 +
    x[slideIndex-1].style.display = "flex";
 +
    setTimeout(carousel, 2000);
 
}
 
}
 
</script>
 
</script>
 +
</div>
  
−
<style>
 
−
#homeMainArrowNext, #homeMainArrowPrev {
 
−
    position:absolute;
 
−
    top:50%;
 
−
    font-size:500%;
 
−
    display:none;
 
−
}
 
−
#homeMainArrowNext {
 
−
    right:0;
 
−
}
 
−
#homeMainArrowPrev {
 
−
    left:0;
 
−
}
 
−
#homeMainContainer:hover #homeMainArrowNext, #homeMainContainer:hover #homeMainArrowPrev {
 
−
    display:block;
 
−
}
 
−
</style>
 
−
</div></div>
 
  
 +
<div class="w3-content" style="max-width:50vw; height:30vw; position:relative;">
  
 +
<img class="mySlides" src="https://static.igem.org/mediawiki/2016/8/8a/T--UPMC-Paris--MainPageSlide1.jpg" style="width:auto; height:auto;max-width:50vw;max-height:30vw; margin: auto; position: absolute; top: 0; bottom: 0; left: 0; right: 0;">
 +
<img class="mySlides" src="https://static.igem.org/mediawiki/2016/3/36/T--UPMC-Paris--MainPageSlide2.jpg" style="width:auto; height:auto;max-width:50vw;max-height:30vw; margin: auto; position: absolute; top: 0; bottom: 0; left: 0; right: 0;">
 +
<img class="mySlides" src="https://static.igem.org/mediawiki/2016/e/e8/T--UPMC-Paris--MainPageSlide3.jpg" style="width:auto; height:auto;max-width:50vw;max-height:30vw; margin: auto; position: absolute; top: 0; bottom: 0; left: 0; right: 0;">
 +
<img class="mySlides" src="https://static.igem.org/mediawiki/2016/0/0a/T--UPMC-Paris--MainPageSlide4.jpg" style="width:auto; height:auto;max-width:50vw;max-height:30vw; margin: auto; position: absolute; top: 0; bottom: 0; left: 0; right: 0;">
 +
<img class="mySlides" src="https://static.igem.org/mediawiki/2016/8/80/T--UPMC-Paris--MainPageSlide5.jpg" style="width:auto; height:auto;max-width:50vw;max-height:30vw; margin: auto; position: absolute; top: 0; bottom: 0; left: 0; right: 0;">
 +
<img class="mySlides" src="https://static.igem.org/mediawiki/2016/5/50/T--UPMC-Paris--MainPageSlide6.jpg" style="width:auto; height:auto;max-width:50vw;max-height:30vw; margin: auto; position: absolute; top: 0; bottom: 0; left: 0; right: 0;">
  
 +
<div class="w3-center w3-section w3-large w3-text-white w3-display-bottomleft" style="width:100%;">
  
 +
    <div class="w3-left w3-padding-left w3-hover-text-deep-purple" onclick="plusDivs(-1)">&#10094;</div>
 +
    <div class="w3-right w3-padding-right w3-hover-text-deep-purple" onclick="plusDivs(1)">&#10095;</div>
  
−
.mediabutton {
+
     <span class="w3-badge demo w3-border w3-transparent w3-hover-deep-purple" onclick="currentDiv(1)"></span>
−
     width:48px;
+
     <span class="w3-badge demo w3-border w3-transparent w3-hover-deep-purple" onclick="currentDiv(2)"></span>
−
     margin:3px;
+
     <span class="w3-badge demo w3-border w3-transparent w3-hover-deep-purple" onclick="currentDiv(3)"></span>
−
     border-radius: 50%;
+
     <span class="w3-badge demo w3-border w3-transparent w3-hover-deep-purple" onclick="currentDiv(4)"></span>
−
     display:inline-block;
+
     <span class="w3-badge demo w3-border w3-transparent w3-hover-deep-purple" onclick="currentDiv(5)"></span>
−
}
+
     <span class="w3-badge demo w3-border w3-transparent w3-hover-deep-purple" onclick="currentDiv(6)"></span>
−
@media screen and (max-device-width:480px) {
+
−
.mediabutton {
+
−
     width:120px;
+
−
     height:120px;
+
−
}
+
−
}
+
  
 +
</div>
 +
</div>
 +
<script type="text/javascript">
 +
var slideIndex = 1;
 +
showDivs(slideIndex);
  
−
@media only screen and (max-device-width: 480px) {
+
function plusDivs(n) {
−
.hideMenu {
+
  showDivs(slideIndex += n);
−
    text-align: left;
+
−
    height:auto;
+
−
    float:none;
+
−
    margin: .3em 0 0 2em;
+
−
    background-color:#383838;
+
−
    position:absolute;
+
−
    width:100%;
+
−
 
+
−
 
+
−
<script>
+
−
 
+
−
#mainContainer p {
+
−
    font-size: 15px;
+
−
    padding-top: 5px;
+
−
    padding-bottom: 5px;
+
−
    text-align:justify;
+
−
    margin:0 1% 0 1%;
+
−
}
+
−
#mainContainer p.caption {
+
−
    display:block;
+
−
    margin:auto;
+
−
    text-align:center;
+
 
}
 
}
  
−
#mainContainer h1,#mainContainer h2,#mainContainer h3,#mainContainer h4,#mainContainer h5,#mainContainer h6 {
+
function currentDiv(n) {
−
    color: #000000;
+
  showDivs(slideIndex = n);
−
    border-bottom: none;
+
−
    font-weight: bold;
+
−
    line-height:normal;
+
−
}
+
−
#mainContainer h1 p,#mainContainer h2 p,#mainContainer h3 p,#mainContainer h4 p,#mainContainer h5 p,#mainContainer h6 p {
+
−
    font-weight:normal;
+
−
    text-align:left;
+
 
}
 
}
  
−
#mainContainer h1 {
+
function showDivs(n) {
−
    text-align: center;
+
  var i;
−
    color:#00964B;
+
  var x = document.getElementsByClassName("mySlides");
−
    font-size:36px;
+
  var dots = document.getElementsByClassName("demo");
−
    padding-top:0px;
+
  if (n > x.length) {slideIndex = 1}   
−
    clear:both;
+
  if (n < 1) {slideIndex = x.length}
−
/*    margin-bottom: 0px;*/
+
  for (i = 0; i < x.length; i++) {
 +
    x[i].style.display = "none"; 
 +
  }
 +
  for (i = 0; i < dots.length; i++) {
 +
    dots[i].className = dots[i].className.replace(" w3-deep-purple", "");
 +
  }
 +
  x[slideIndex-1].style.display = "flex";
 +
  dots[slideIndex-1].className += " w3-deep-purple";
 
}
 
}
 +
</script>
  
−
#mainContainer h2 {
 
−
    font-size:24px;
 
−
    padding-top: 40px;
 
−
    border-bottom:1px solid black;
 
−
    clear:both;
 
−
}
 
  
−
#mainContainer h2:first-child {
+
<div class="gauche">
−
    padding-top: 0px;
+
<a href="https://2016.igem.org/Team:UPMC-Paris/Project/overview" display="flex"><nav class="textG" id="text1"><h1>Project</h1></nav></a>
−
}
+
</div>
  
−
#mainContainer h3 {
 
−
    font-size:20px;
 
−
    clear:both;
 
−
}
 
  
−
#mainContainer li,td,th {
+
<div class="droite">
−
    font-size:15px;
+
<a href="https://2016.igem.org/Team:UPMC-Paris/La_Paillasse" display="flex"><nav class="textD" id="text4"><h1>Lab<br>Life</h1></nav></a>
−
}
+
</div>
  
−
.expContainer a {
+
<div class="gauche">
−
    font-weight: bold;
+
<a href="https://2016.igem.org/Team:UPMC-Paris/Basic_Part" display="flex" width="100%" height="100%"><nav class="textG" id="text2"><h1>Parts</h1></nav></a>
−
    color: #00964B;
+
</div>
−
}
+
  
−
.expContainer a:hover {
 
−
    color: #59bf92;
 
−
}
 
  
−
.expContainer ul {
+
<div class="droite">
−
    margin: .3em 0 0 2.5em;
+
<a href="https://2016.igem.org/Team:UPMC-Paris/HP/Silver" display="flex" width="100%" height="100%"><nav class="textD" id="text5"><h1> Human<br>Practice</h1></nav></a>
−
}
+
</div>
  
−
/*Change the styling of tables */
 
−
#mainContainer table {
 
−
    border: 3px solid #565656;
 
−
    border-collapse: collapse;
 
−
    margin: auto;
 
−
    margin-bottom:20px;
 
−
}
 
  
−
/*Change the styling of table cells*/
+
<div class="gauche">
−
#mainContainer td,th {
+
<a href="https://2016.igem.org/Team:UPMC-Paris/Collaborations" display="flex" width="100%" height="100%"><nav class="textG" id="text3"><h1>Team<br>Work</h1></nav></a>
−
    padding: 10px;
+
</div>
−
    vertical-align:middle;
+
−
    border: 3px solid #565656;
+
−
    max-width:100%;
+
−
}
+
  
−
/*Change the styling of table headers */
 
−
#mainContainer th {
 
−
    background-color: #93c6ac;
 
−
}
 
  
−
#mainContainer .imgBox {
+
<div class="droite">
−
    padding:3px;
+
<a href="https://2016.igem.org/Team:UPMC-Paris/Team" display="flex" width="100%" height="100%"><nav class="textD" id="text6"><h1>About<br>   Us</h1></nav></a>
−
    height:auto;
+
−
    border: 1px solid #ccc;
+
−
    font-family: "Trebuchet MS", Helvetica, sans-serif;
+
−
    margin: 20px 0 20px 0;
+
−
    background-color:#f9f9f9;
+
−
}
+
−
#mainContainer .imgBox a {
+
−
    display:block;
+
−
}
+
−
#mainContainer .imgBox > :not(p) {
+
−
    background-color:#fff;
+
−
}
+
−
#mainContainer .imgBox #mag {
+
−
    width:15px;
+
−
    height:11px;
+
−
    float:right;
+
−
    margin: 3px;
+
−
}
+
−
#mainContainer .imgBox #mag img {
+
−
    border:none !important;
+
−
}
+
−
#mainContainer .imgBox p {
+
−
    font-size: 10pt;
+
−
    padding:3px;
+
−
    margin: 0px;
+
−
    text-align:left;
+
−
}
+
−
 
+
−
#mainContainer .imgBox object,.imgBox img {
+
−
    width:100%;
+
−
    border: 1px solid #ccc;
+
−
}
+
−
#mainContainer .imgBox > table, #mainContainer .imgBox > table td,#mainContainer .imgBox > table th {
+
−
    border: 0;
+
−
}
+
−
#mainContainer .imgBox > table table, #mainContainer .imgBox > table table td, #mainContainer .imgBox > table table th {
+
−
    border: 3px solid black;
+
−
}
+
−
 
+
−
 
+
−
.expContainer img,.expContainer object.svg {
+
−
    display:block;
+
−
    margin:auto;
+
−
    text-align:center;
+
−
}
+
−
.expContainer ul {
+
−
    list-style: square;
+
−
}
+
−
a.expander img {
+
−
    background: url("https://static.igem.org/mediawiki/2015/b/b1/Updownarrows.png") no-repeat;
+
−
    outline : none;
+
−
    height:100%;
+
−
    background-size:100%;
+
−
/*    background-position: 0 100%;*/
+
−
}
+
−
.open-info a.expander img {
+
−
    background-position: 0 100%;
+
−
}
+
−
/*.closed-info a.expander img {
+
−
    background-position: 0 0;
+
−
}*/
+
−
.expContainer b.TODO {
+
−
    color: #F660AB;
+
−
}
+
−
 
+
−
@media screen and (max-device-width: 480px) {
+
−
    a.expander {
+
−
        height: 10em;
+
−
    }
+
−
    .info {
+
−
        padding-bottom:20em;
+
−
    }
+
−
    .open-info {
+
−
        padding-bottom:20em;
+
−
    }
+
−
    .info {
+
−
        max-height:10em;
+
−
    }
+
−
/*    .closed-info {
+
−
        max-height:10em;
+
−
        height:10em;
+
−
    }*/
+
−
}
+
−
 
+
−
 
+
−
</script>
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
<body>
+
−
<div align="center">
+
−
<img src="https://static.igem.org/mediawiki/2016/0/0b/Groslogo.png" width="300" align="center"/></div><div><br><br>
+
−
Bees and humans live close together for over 20,000 years. We need them, not only for their honey and wax, but also because they are responsible for 85% of the pollination worldwide. Without them many variety of fruits and vegetables could no longer grow, which could lead to famine.<br><br>
+
−
For some years, beekeepers are facing a problem affecting their hives. Bees leave them when the seasons change and do not come back. This phenomenon is known under the name of Colony Collapse Disorder (CCD) and resulted in lower honey production and could eventually lead to reduced harvests. The CCD is multifactorial, that is what makes its study so complicated. The main causes are pesticides, parasites and pathogens. These factors are not found every time, so you have to study them together.<br><br>
+
−
</div>
+
−
<div>
+
−
In our project we thought about a quick and easy method for bee health problems detection. The detection of pesticides by methods using bacteria are not precise and specific enough to be used. So we focused on the detection of a pathogenic bacterium, Paenibacillus larvae. We designed a system for the detection of the bacillibactine, a siderophore produced by many organisms to chelate the iron present outside the cell. Usually this protein is produced in a poor medium iron, as in the digestive tract of bees. We should therefore be able to detect the presence of P. larvae using an endogenous bacterium bees (B. subtilis).<br><br>
+
−
</div>
+
−
<div>
+
−
Our "Bee subtilis" will be KO for three genes: ABC transporter (ABC), siderophore binding protein (SBP) and bacillibactin (BB). We then add to this bacterium the P. larvae SBP and ABC genes to allow entry of iron only in the presence of the P. larvae BB (plBB). In addition we designed a plasmid carrying LacI gene under control of a promoter containing a Fur box. There is also on this plasmid a blue pigment gene under control of a promoter LacO. In the presence of iron, and therefore P. larvae, the Fur protein moves to the Fur box and so turn off the expression of LacI. Without LacI, the expression of the pigment can be done and our bacteria become blue.<br><br>
+
−
</div>
+
−
<div>
+
−
On the same principle we designed plasmids bearing only the pigment under the control of different promoters operators whose expression is permitted in the presence of certain substances. This will allow us to detect bees contamination or nutrient absorption problems. <br><br>
+
 
</div>
 
</div>
−
<div>
 
−
Our system may be usefull in order to have a quick and easy method to study multiple factors that may be involved in CCD. It may be used by beekeepers in order to have an easy way to measure beehives health state and by researchers as a tool for correlation studies to better understand and fight CCD.<br><br><br><br><br><br><br>
 
 
</div>
 
</div>
 
</body>
 
</body>
 
</html>
 
</html>

Latest revision as of 10:46, 19 October 2016