Difference between revisions of "Team:Grenoble-Alpes/Description"

 
(731 intermediate revisions by 3 users not shown)
Line 7: Line 7:
 
         <style>
 
         <style>
  
−
header {
+
        header
−
             background-image:url('https://static.igem.org/mediawiki/2017/7/75/IGEM_Grenoble_photo_couv_grenoble.jpeg');
+
        {
−
             
+
             background:url('https://static.igem.org/mediawiki/2017/e/e2/Projectphotoigemgrenoble.jpeg') fixed;
 +
                background-size:100% 100%;
 +
            -webkit-animation: begin 3s linear;
 +
            -moz-animation: begin 3s linear;
 
             }
 
             }
−
        /* Popup container - can be anything you want */
+
 
−
.popup {
+
@-webkit-keyframes begin {
−
    position: relative;
+
     0% {opacity:0;}
−
    display: inline-block;
+
     100% {opacity:1;}
−
    cursor: pointer;
+
−
    -webkit-user-select: none;
+
−
     -moz-user-select: none;
+
−
     -ms-user-select: none;
+
−
    user-select: none;
+
−
z-index:3;
+
 
}
 
}
−
#myPopup1 {
+
 
−
transform:translate(-290%,-230%);
+
@-moz-keyframes begin {
−
position:relative;
+
    0% {opacity:0;}
−
z_index:4;
+
    100% {opacity:1;}
−
margin-left: -50%;
+
 
}
 
}
  
−
#myPopup2 {
+
@keyframes begin {
−
transform:translate(150px,50px);
+
    0% {opacity:0;}
 +
    100% {opacity:1;}
 +
}   
 +
        /*********** TITLE ****************/
 +
 
 +
          #couvlogogeo {
 +
            width:50%;
 +
            opacity:0.5;
 +
            transform:translate(3850%,-150%);
 +
            z-index:5;
 +
          }
 +
 
 +
        /*********** Popup container - can be anything you want ****************/
 +
 
 +
        .popup
 +
        {
 +
            position: relative;
 +
            display: float;
 +
            cursor: pointer;
 +
            -webkit-user-select: none;
 +
            -moz-user-select: none;
 +
            -ms-user-select: none;
 +
            user-select: none;
 +
            z-index:2;
 +
            width:5%;
 +
        }
 +
 
 +
        /*************** Parameters of the different popups ***********/
 +
        /*************** 1 popup has to be defined for each number on the diagram  ************/
 +
        /*************** Place the number first, then the popup **************/
 +
 
 +
        #myPopup1
 +
        {
 +
            position:absolute;
 +
            z-index:-100;
 +
            padding: 1% 1% 1% 1%;
 +
            top:10%;
 +
            left:-200%;
 +
            width:650%;
 +
        }
 +
 
 +
        #myPopup2  
 +
        {
 +
            position:absolute;
 +
            z-index:-100;
 +
            padding: 1% 1% 1% 1%;
 +
            top:-150%;
 +
            left:-10%;
 +
            width:700%;
 +
        }
 +
 
 +
        #myPopup3
 +
        {
 +
 
 +
        }
 +
 
 +
        #Popup_geo
 +
        {
 +
        position:absolute;
 +
        padding: 1% 1% 1% 1%;
 +
        top: -200%;
 +
        left: 1600%;
 +
        width: 300%;
 +
        z-index: 2;
 +
        }
 +
 
 +
        /*************** The actual popup ****************/
 +
 
 +
        .popup .popuptext
 +
        {
 +
            visibility: hidden;
 +
            width: 10%;
 +
            background-color: #364A5E;
 +
            color: #fff;
 +
            text-align: center;
 +
            border-radius: 5%;
 +
            padding: 10% 10% 10% 10%;
 +
            position: relative;
 +
            z-index:1;
 +
 
 +
        }
 +
 
 +
        /*************** Popup arrow ************/
 +
 
 +
        .popup .popuptext::after
 +
        {
 +
            content: "";
 +
            top: 100%;
 +
            left: 50%;
 +
            margin-left: -5px;
 +
            border-width: 5px;
 +
            border-style: solid;
 +
            border-color: #555 transparent transparent transparent;
 +
            z-index:1;
 +
        }
 +
 
 +
        /***************** Parameters of the numbers in the diagram **************/
 +
        /***************** They have to be placed bedore popups ******************/
 +
 
 +
        #numbr1
 +
        {
 +
            transform:translate(-270%,-170%);
 +
            width:100%;
 +
            opacity:0.5;
 +
            z-index:-100;
 +
        }
 +
 
 +
        #numbr2
 +
        {
 +
            transform:translate(150%,-280%);
 +
            width:100%;
 +
            opacity:0.5;
 +
            z-index:-100;
 +
        }
 +
 
 +
        #numbr3
 +
        {
 +
 
 +
        }
 +
 
 +
        /*************** Diagram in the background ****************/
 +
 
 +
        .fond_1
 +
        {
 +
            padding:20%;
 +
            background-image: url("https://static.igem.org/mediawiki/2017/9/9b/Step_1_fond_blanc_.png");
 +
            background-repeat:no-repeat;
 +
            background-position : center center;
 +
            position:relative;
 +
            background-size: 62% 100% ;
 +
        }
 +
 
 +
        .fond_2
 +
        {
 +
            padding:20%;
 +
            background-image: url("https://static.igem.org/mediawiki/2017/7/7c/Step_2_fond_blanc.png");
 +
            background-repeat:no-repeat;
 +
            background-position : center center;
 +
            position:relative;
 +
            background-size: 62% 100% ;
 +
        }
 +
 
 +
        .fond_3
 +
        {
 +
            padding:20%;
 +
            margin-bottom:2%;
 +
            background-image: url("https://static.igem.org/mediawiki/2017/2/24/Step_3_fond_blanc.png");
 +
            background-repeat:no-repeat;
 +
            background-position : center center;
 +
            position:relative;
 +
            background-size: 62% 100% ;
 +
        }
 +
 
 +
        /**************** Background of the logos Lab, Engineer and App ***************/
 +
 
 +
        .fond_logo
 +
        {
 +
            background-color:#F49C20;
 +
            width:100%;
 +
            text-align:center;
 +
            padding:1% 0%;
 +
            position:relative;
 +
        }
 +
 
 +
        /************** Parameters of the logos ****************/
 +
 
 +
        .logo_lab
 +
        {
 +
            width:100%;
 +
        }
 +
 
 +
        .fond_logo_lab
 +
        {
 +
            width:25%;
 +
            float:left;
 +
            display:inline;
 +
            padding:0% 3%;
 +
            z-index:2;
 +
            position:relative;
 +
        }
 +
   
 +
        .bulle1_logo_lab
 +
        {
 +
          position:absolute;
 +
          width:5%;
 +
          z-index:3;
 +
          left: 48%;
 +
          top: 25%;
 +
        }
 +
 
 +
        .bulle2_logo_lab
 +
        {
 +
          position:absolute;
 +
          width:4%;
 +
          z-index:3;
 +
          left: 48%;
 +
          top: 25%;
 +
        }
 +
 
 +
        .bulle3_logo_lab
 +
        {
 +
          position:absolute;
 +
          width:3%;
 +
          z-index:3;
 +
          left: 48%;
 +
          top: 25%;
 +
        }
 +
 
 +
 
 +
        .logo_eng
 +
        {
 +
            width:100%;
 +
            position:relative;
 +
        }
 +
 
 +
        .fond_logo_eng
 +
        {
 +
            width:25%;
 +
            float:left;
 +
            display:inline;
 +
            padding:0% 6%;
 +
            z-index:2;
 +
            position:relative;
 +
        }
 +
 
 +
        .engrenage1_logo_eng
 +
        {
 +
          position:absolute;
 +
          width:15%;
 +
          z-index:3;
 +
          left:35%;
 +
          top: 10%;
 +
 
 +
        }
 +
 
 +
        .engrenage2_logo_eng
 +
        {
 +
          position:absolute;
 +
          width:25%;
 +
          z-index:3;
 +
          left:45%;
 +
          top: 20%;
 +
        }
 +
 
 +
        .engrenage3_logo_eng
 +
        {
 +
          position:absolute;
 +
          width:10%;
 +
          z-index:3;
 +
          left:40% ;
 +
          top:48%;
 +
        }
 +
 
 +
 
 +
        .logo_app
 +
        {
 +
            width:100%;
 +
        }
 +
 
 +
 
 +
        .fond_logo_app
 +
        {
 +
            width:25%;
 +
            float:right;
 +
            display:inline;
 +
            padding:0% 3%;
 +
            z-index:2;
 +
            position:relative;
 +
        }
 +
 
 +
        .tel_logo_app
 +
        {
 +
          position:absolute;
 +
          width:25%;
 +
          z-index:3;
 +
          left: 37%;
 +
          top: 15%;
 +
        }
 +
 
 +
        /****** Use schema_img_right or left to put an img on the side you want. It matches with any <p>. ********/
 +
        /*********** In the code, use <img> before <p> *************/
 +
 
 +
        .schema_img_right
 +
        {
 +
            width:20%;
 +
            display: inline;
 +
            float:right;
 +
            right:-50%;
 +
            padding:2%;
 +
        }
 +
 
 +
        .schema_img_left
 +
        {
 +
            width:20%;
 +
            display: inline;
 +
            float:left;
 +
            left:3%;
 +
            padding:2%;
 +
        }
 +
 
 +
/* ****************** ANIMATIONS ***************** */
 +
.fond_logo_lab:hover .bulle1_logo_lab {
 +
    -webkit-animation: bulle 3s linear infinite;
 +
    -moz-animation: bulle 3s linear infinite;
 +
    animation: bulle 3s linear infinite;
 
}
 
}
  
−
#myPopup3 {
+
.fond_logo_lab:hover .bulle2_logo_lab {
−
transform:translate(300px,50px);
+
    -webkit-animation: bulle 2s linear infinite;
 +
    -moz-animation: bulle 2s linear infinite;
 +
    animation: bulle 2s linear infinite;
 
}
 
}
  
−
/* The actual popup */
+
.fond_logo_lab:hover .bulle3_logo_lab {
−
.popup .popuptext {
+
     -webkit-animation: bulle 1s linear infinite;
−
     visibility: hidden;
+
     -moz-animation: bulle 1s linear infinite;
−
    width: 10%;
+
     animation: bulle 1s linear infinite;
−
    background-color: #555;
+
−
    color: #fff;
+
−
    text-align: center;
+
−
     border-radius: 5%;
+
−
    padding: 10% 10%;
+
−
    position: relative;
+
−
    bottom: -150%;
+
−
     left: 50%;
+
 
}
 
}
  
−
/* Popup arrow */
+
.fond_logo_eng:hover .engrenage1_logo_eng {
−
.popup .popuptext::after {
+
     -webkit-animation: turn_engrenage 3s linear infinite;
−
     content: "";
+
     -moz-animation: turn_engrenage 3s linear infinite;
−
    top: 100%;
+
     animation: turn_engrenage 3s linear infinite;
−
    left: 50%;
+
−
    margin-left: -5px;
+
−
    border-width: 5px;
+
−
     border-style: solid;
+
−
     border-color: #555 transparent transparent transparent;
+
 
}
 
}
  
−
#numbr1
+
.fond_logo_eng:hover .engrenage2_logo_eng {
−
{
+
    -webkit-animation: turn_engrenage 6s linear infinite;
−
transform:translate(-290%,-230%);
+
    -moz-animation: turn_engrenage 6s linear infinite;
−
width:5%;
+
    animation: turn_engrenage 6s linear infinite;
−
opacity:0.5;
+
    animation-direction: reverse;
−
z_index:3;
+
 
}
 
}
  
−
#numbr2
+
.fond_logo_eng:hover .engrenage3_logo_eng {
−
{
+
    -webkit-animation: turn_engrenage 2s linear infinite;
−
transform:translate(30%,100%)
+
    -moz-animation: turn_engrenage 2s linear infinite;
−
width:50%;
+
    animation: turn_engrenage 2s linear infinite;
−
opacity:0.5;
+
 
−
z_index:3;
+
 
 
}
 
}
  
−
#numbr3
+
.fond_logo_app:hover .tel_logo_app {
−
{
+
    -webkit-animation: turn_tel 0.1s linear infinite;
−
transform:translate(30%,30%);
+
    -moz-animation: turn_tel 0.1s linear infinite;
−
width:10%;
+
    animation: turn_tel 0.1s linear infinite;  
−
opacity:0.5;
+
−
z_index:3;
+
 
}
 
}
  
−
.fond
+
@-moz-keyframes turn_tel {
−
{
+
    0% {transform: rotate(0deg)}
−
padding:20%;
+
    25% {transform: rotate(10deg)}
−
background-image: url("https://static.igem.org/mediawiki/2017/0/07/Boite.png");
+
    75% {transform: rotate(-10deg)}
−
background-repeat:no-repeat;
+
    100% {transform: rotate(0deg)}
−
background-position : center center;
+
−
position:relative;
+
−
background-size: 80% 90% ;
+
 
}
 
}
  
−
/* Toggle this class - hide and show the popup */
+
@keyframes turn_tel {
−
.popup .show {
+
    0% {transform: rotate(0deg)}
−
     visibility: visible;
+
     25% {transform: rotate(10deg)}
−
     -webkit-animation: fadeIn 1s;
+
     75% {transform: rotate(-10deg)}
−
     animation: fadeIn 1s;
+
     100% {transform: rotate(0deg)}
 
}
 
}
  
−
/* Add animation (fade in the popup) */
+
@-webkit-keyframes turn_tel {
−
@-webkit-keyframes fadeIn {
+
     0% {transform:rotate(0deg)}
−
     from {opacity: 0;}  
+
     25% {transform: rotate(10deg)}
−
     to {opacity: 1;}
+
    75% {transform: rotate(-10deg)}
 +
    100% {transform: rotate(0deg)}
 
}
 
}
  
−
@keyframes fadeIn {
+
@-moz-keyframes turn_engrenage {
−
     from {opacity: 0;}
+
     0% {transform: rotate(0deg)}
−
     to {opacity:1 ;}
+
     100% {transform: rotate(360deg)}
 +
}
  
−
        </style>
+
@keyframes turn_engrenage {
 +
    0% {transform: rotate(0deg)}
 +
    100% {transform:rotate(360deg)}
 +
}
  
−
</head>
+
@-webkit-keyframes turn_engrenage {
 +
    0% {transform:rotate(0deg)}
 +
    100% {transform:rotate(360deg)}
 +
}
 +
 
 +
 
 +
@-webkit-keyframes bulle {
 +
    0% {transform:translate(0%,0%)}
 +
    20% {transform:translate(-7%,-100%)}
 +
    40% {transform:translate(0%,-200%)}
 +
    60% {transform:translate(7%,-300%)}
 +
    80% {transform:translate(0%,-400%)}
 +
    100% {transform:translate(-7%,-500%)}
 +
}
 +
 
 +
@-moz-keyframes bulle {
 +
    0% {transform:translate(0%,0%)}
 +
    20% {transform:translate(-7%,-100%)}
 +
    40% {transform:translate(0%,-200%)}
 +
    60% {transform:translate(7%,-300%)}
 +
    80% {transform:translate(0%,-400%)}
 +
    100% {transform:translate(-7%,-500%)}
 +
}
 +
 
 +
@keyframes bulle {
 +
    0% {transform:translate(0%,0%)}
 +
    20% {transform:translate(-7%,-100%)}
 +
    40% {transform:translate(0%,-200%)}
 +
    60% {transform:translate(7%,-300%)}
 +
    80% {transform:translate(0%,-400%)}
 +
    100% {transform:translate(-7%,-500%)}
 +
}
 +
 
 +
        /*************** Toggle this class - hide and show the popup **************/
 +
        .popup .show {
 +
            visibility: visible;
 +
            -webkit-animation: fadeIn 1s;
 +
            animation: fadeIn 1s;
 +
        }
 +
        .popup .hide {
 +
            visibility: hidden;
 +
            -webkit-animation: fadeIn 1s;
 +
            animation: fadeIn 1s;
 +
        }
 +
 
 +
        /******** Add animation (fade in the popup) ************/
 +
        @-webkit-keyframes fadeIn {
 +
            from {opacity: 0;}
 +
            to {opacity: 1;}
 +
        }
 +
 
 +
        @keyframes fadeIn {
 +
            from {opacity: 0;}
 +
            to {opacity:1 ;}
 +
        }
 +
 
 +
        </style>
 +
 
 +
    </head>
 
      
 
      
 +
 +
 
     <body>
 
     <body>
 +
 
         <header>
 
         <header>
−
         <h1> PROJECT </h1>
+
         <h3> Description </h3>
 +
 
 
         </header>
 
         </header>
−
        <h2> Project Description :</h2>
+
 
−
        <p> Et olim licet otiosae sint tribus pacataeque centuriae et nulla suffragiorum certamina set Pompiliani redierit securitas temporis, per omnes tamen quotquot sunt partes terrarum, ut domina suscipitur et regina et ubique patrum reverenda cum auctoritate canities populique Romani nomen circumspectum et verecundum.</p>
+
             <div class="popup_geoloc" onclick="Function_geo()"><img class="couvlogogeo" src="https://static.igem.org/mediawiki/2017/c/c9/LogolocalisationiGEMGrenoble.png">
−
        <div class="fond">
+
                  <span class="popuptext" id="Popup_geo"> The Aiguilles d’Arves are not only the apex the Maurienne valley, they are also its emblem. <br> Credits: Estelle Vincent
−
             <div class="popup" onclick="myFunction1()"><img id="numbr1" src="https://static.igem.org/mediawiki/2017/a/a9/B1.jpeg">
+
                  </span>
−
            <span class="popuptext" id="myPopup1">Et olim licet otiosae sint tribus pacataeque centuriae et nulla suffragiorum certamina set Pompiliani redierit securitas temporis, per omnes tamen quotquot sunt partes terrarum, ut domina suscipitur et regina et ubique patrum reverenda cum auctoritate canities populique Romani nomen circumspectum et verecundum.</span>
+
 
             </div>
 
             </div>
 +
<div style="transform:translate(0,-1.09%);" >
 +
<!-- ************************** DESCRIPTION ************************** -->
 +
<h2 style="padding-top:2%; padding-bottom:2%; color:#F49C20; font-size:2.5vw;"> Project description </h2>
 +
 +
            <h5> <I>Vibrio Cholerae</I> is the bacteria responsible for cholera. The tricky thing is that there are only two serogroups of <I>Vibrio Cholerae</I> O1 and O139 that are responsible for epidemics of cholera while the others provoke diarrheas, abscess or septicemia. </h5>
 +
<h5> This is why we are going to design a pathogen sensitive detector: SnapLab, our portable kit that will detect cholera. After extracting DNA from the feces and performing the analysis, a nucleic acid sequence will be detected if the patient is infected with cholera. Once these sequences are introduced into the bacteria, fluorescence will be emitted and captured by the camera of a smartphone. The application that we will design will not only perform the analysis but it will also do the image processing. </h5>
 +
<h5>The greatest advantage of this device will be its capability to communicate the results to its user and to map the cases of cholera. </h5>
 +
<h5 style="padding-bottom:2%;">Going forward, this kind of device will be replicable for different pathogens, thus allowing to widen the spectrum of this kit’s use. </h5>
 +
 +
       
 +
        <!== **In div class="fond", add div for each number, with picture, and description you want in the span**==>
 +
 +
        <div class="fond_1">
 +
 +
      <!-- **    <div class="popup" onclick="myFunction1()"><img id="numbr1" src="https://static.igem.org/mediawiki/2017/a/a9/B1.jpeg">
 +
                  <span class="popuptext" id="myPopup1">Here is a small description of the basic medium. Here is a small description of the basic medium. Here is a small description of the basic medium.
 +
                  </span>
 +
            </div>
 +
           
 +
            <div class="popup" onclick="myFunction2()"><img id="numbr2" src="https://static.igem.org/mediawiki/2017/c/c0/B2.jpeg">
 +
                  <span class="popuptext" id="myPopup2">Here is where the DNA sequence is exctracted...Here is where the DNA sequence is exctracted...Here is where the DNA sequence is exctracted...
 +
                  </span>
 +
            </div> **-->
 +
        </div>
 +
 +
<div class="fond_2">
 +
 +
         
 +
        </div>
 +
 +
<div class="fond_3">
 +
 +
 +
        </div>
 +
 +
</div>
 +
 +
<h5 style="padding-bottom:4%;">Now the project has been briefly explained, you can have further information on the realisation of our project by clicking on any of the three circles or you can directly go to the <a style="text-decoration:none; color:#F49C20;" href="https://2017.igem.org/Team:Grenoble-Alpes/Demonstrate">results</a>.</h5>
 +
 +
 +
 +
 +
<!-- ************************** LOGO BANNER ************************** -->
 +
        <div class="fond_logo">
 +
 +
<p style="color:#F49C20;">test</p>
 +
           
 +
            <div class="fond_logo_lab">
 +
            <a href="https://2017.igem.org/Team:Grenoble-Alpes/LabBook">
 +
            <img class="logo_lab" src="https://static.igem.org/mediawiki/2017/0/06/Lab_2.png">
 +
            <img class ="bulle1_logo_lab" src="https://static.igem.org/mediawiki/2017/c/ce/Bulle.png">
 +
            <img class ="bulle2_logo_lab" src="https://static.igem.org/mediawiki/2017/c/ce/Bulle.png">
 +
            <img class ="bulle3_logo_lab" src="https://static.igem.org/mediawiki/2017/c/ce/Bulle.png">
 +
            </a>
 +
            </div>
 +
 +
            <div class="fond_logo_eng">
 +
            <a href="https://2017.igem.org/Team:Grenoble-Alpes/Engineering">
 +
            <img class="logo_eng" src="https://static.igem.org/mediawiki/2017/0/0a/Fond_eng.png">
 +
            <img class="engrenage1_logo_eng" src="https://static.igem.org/mediawiki/2017/c/c1/Engrenage.png">
 +
            <img class="engrenage2_logo_eng" src="https://static.igem.org/mediawiki/2017/c/c1/Engrenage.png">
 +
            <img class="engrenage3_logo_eng" src="https://static.igem.org/mediawiki/2017/c/c1/Engrenage.png">
 +
            </a>
 +
 +
            </div>
 +
       
 +
            <div class="fond_logo_app">
 +
            <a href="https://2017.igem.org/Team:Grenoble-Alpes/Software">
 +
            <img class="logo_app" src="https://static.igem.org/mediawiki/2017/7/7b/Fond_app.png">
 +
            <img class="tel_logo_app" src="https://static.igem.org/mediawiki/2017/f/f8/Tel.png">
 +
            </a>
 +
            </div>
 +
           
 +
<p style="color:#F49C20;">test</p>
 +
 
         </div>
 
         </div>
 +
       
 
         </body>
 
         </body>
−
  <script>
 
−
        // When the user clicks on div, open the popup
 
−
        function myFunction1() {
 
−
        var popup = document.getElementById("myPopup1");
 
−
        popup.classList.toggle("show");
 
−
        }
 
−
        function myFunction2() {
 
−
        var popup = document.getElementById("myPopup2");
 
−
        popup.classList.toggle("show");
 
−
        }
 
  
−
         function myFunction3() {
+
 
−
        var popup = document.getElementById("myPopup3");
+
         <script>      // ********* Javascript to use popup - 1 function for each popup *********
−
        popup.classList.toggle("show");
+
 
−
        }
+
            var compteur=0;
−
</script>
+
 
 +
 
 +
            // ******* When the user clicks on div, open the popup ***********
 +
 
 +
            function myFunction1()  
 +
            {
 +
              if (compteur==0)
 +
              {
 +
                  var popup = document.getElementById("myPopup1");
 +
                  popup.classList.toggle("show");
 +
                  compteur=1;
 +
                  return false;
 +
 
 +
              }
 +
              if (compteur==1)
 +
              {
 +
                  var popup = document.getElementById("myPopup1");
 +
                  popup.classList.toggle("show");
 +
                  compteur=0;
 +
                  return false;
 +
                 
 +
              }
 +
              if (compteur==2)
 +
              {
 +
                  var popup = document.getElementById("myPopup2");
 +
                  popup.classList.toggle("show");
 +
                  var popup = document.getElementById("myPopup1");
 +
                  popup.classList.toggle("show");
 +
                  compteur=1;
 +
                  return false;
 +
 
 +
              }
 +
            }
 +
 
 +
            function myFunction2()
 +
            {
 +
              if (compteur==0)
 +
              {
 +
                  var popup = document.getElementById("myPopup2");
 +
                  popup.classList.toggle("show");
 +
                  compteur=2;
 +
                  return false;
 +
 
 +
              }
 +
              if (compteur==2)
 +
              {
 +
                  var popup = document.getElementById("myPopup2");
 +
                  popup.classList.toggle("show");
 +
                  compteur=0;
 +
                  return false
 +
              }
 +
              if (compteur==1)
 +
              {
 +
                  var popup = document.getElementById("myPopup1");
 +
                  popup.classList.toggle("show");
 +
                  var popup = document.getElementById("myPopup2");
 +
                  popup.classList.toggle("show");
 +
                  compteur=2;
 +
                  return false;
 +
 
 +
              }
 +
            }
 +
 
 +
            function Function_geo()
 +
            {
 +
            var popup = document.getElementById("Popup_geo");
 +
            popup.classList.toggle("show");
 +
            }
 +
 
 +
        </script>
 +
 
 
</html>
 
</html>
 +
{{Grenoble-Alpes/footer}}

Latest revision as of 16:57, 30 October 2017

TEAM

Description

The Aiguilles d’Arves are not only the apex the Maurienne valley, they are also its emblem.
Credits: Estelle Vincent

Project description

Vibrio Cholerae is the bacteria responsible for cholera. The tricky thing is that there are only two serogroups of Vibrio Cholerae O1 and O139 that are responsible for epidemics of cholera while the others provoke diarrheas, abscess or septicemia.
This is why we are going to design a pathogen sensitive detector: SnapLab, our portable kit that will detect cholera. After extracting DNA from the feces and performing the analysis, a nucleic acid sequence will be detected if the patient is infected with cholera. Once these sequences are introduced into the bacteria, fluorescence will be emitted and captured by the camera of a smartphone. The application that we will design will not only perform the analysis but it will also do the image processing.
The greatest advantage of this device will be its capability to communicate the results to its user and to map the cases of cholera.
Going forward, this kind of device will be replicable for different pathogens, thus allowing to widen the spectrum of this kit’s use.
Now the project has been briefly explained, you can have further information on the realisation of our project by clicking on any of the three circles or you can directly go to the results.

Designed by iGEM Grenoble-Alpes 2017 team | Site Map