Difference between revisions of "Team:Grenoble-Alpes"

 
(549 intermediate revisions by 5 users not shown)
Line 1: Line 1:
−
{{Grenoble-Alpes/menu}}
 
 
{{Grenoble-Alpes/CSS}}
 
{{Grenoble-Alpes/CSS}}
 +
{{Grenoble-Alpes/JS-CSS-Quote}}
 +
{{Grenoble-Alpes/menu}}
  
 
<html>
 
<html>
 
<head>
 
<head>
 
<style>
 
<style>
−
          header {
+
/* ****************** TITLE HOME PAGE ***************** */
−
                font-family:  'Molenga', Georgia, Times, serif;
+
−
                margin: 0px;
+
−
                padding: 0px;
+
−
                z-index: -100; /*pour que le menu soit toujours au dessus*/
+
  
−
                 width:100%;
+
.titlehomepage {      /* titre pour haut de page */
−
                 height:700px;
+
                 font-family: 'Poiret One' , cursive;
−
                 background-image:url('https://static.igem.org/mediawiki/2017/7/75/IGEM_Grenoble_photo_couv_grenoble.jpeg');
+
                 text-align: center;
−
                 background-size: 100% 100% ;
+
                 font-weight: 100;
−
                 background-position: center top;
+
                font-size: 8vw;
−
                 position:relative;
+
                color: #ecf0f1;
 +
                padding-top:22.5%;
 +
                 padding-bottom:22.5%;
 +
                 -webkit-animation: begin 4s linear;
 +
                 -moz-animation: begin 4s linear;
 +
                animation: begin 4s linear;
 +
                text-transform: uppercase;
 
             }
 
             }
 +
 +
.titlesnaplab {
 +
                font-family: 'Poiret One' , cursive;
 +
                text-align: center;
 +
                font-weight: 100;
 +
                font-size: 4vw;
 +
                color: #ecf0f1;
 +
                transform: translateY(-800%);
 +
          }
 +
 +
 +
 +
/* ****************** ENTETE ***************** */
 +
 +
          header {
 +
                background:url('https://static.igem.org/mediawiki/2017/5/5a/GrenobleAlpesHOME.png') fixed;
 +
                background-size:100% 100%;
 +
                -webkit-animation: begin 3s linear;
 +
                -moz-animation: begin 3s linear;
 +
                animation: begin 3s linear;
 +
            }
 +
 +
@-webkit-keyframes begin {
 +
    0% {opacity:0;}
 +
    100% {opacity:1;}
 +
}
 +
 +
@-moz-keyframes begin {
 +
    0% {opacity:0;}
 +
    100% {opacity:1;}
 +
}
 +
 +
@keyframes begin {
 +
    0% {opacity:0;}
 +
    100% {opacity:1;}
 +
}
 +
/* ****************** ANIMATIONS ***************** */
 +
#logo-app:hover {
 +
    -webkit-animation: turn 0.1s linear infinite;
 +
    -moz-animation: turn 0.1s linear infinite;
 +
    animation: turn 0.1s linear infinite;
 +
}
 +
 +
#logo-app {
 +
    width: 50%;
 +
    }
 +
 +
 +
@-webkit-keyframes turn {
 +
    0% {transform:rotate(0deg);}
 +
    100% {transform:rotate(10deg);}
 +
}
 +
 +
@-moz-keyframes turn {
 +
    0% {transform:rotate(0deg);}
 +
    100% {transform:rotate(10deg);}
 +
}
 +
 +
@keyframes turn {
 +
    0% {transform:rotate(0deg);}
 +
    100% {transform:rotate(10deg);}
 +
}
 +
 +
/* ****************** QUOTE ***************** */
 
.myquote {
 
.myquote {
−
   background-color:#000;
+
   background-color:#3498db;
−
  text-align: center;
+
−
  color:#fff;
+
−
  padding-top:10em;
+
 
}
 
}
−
.typewrite {
+
 
−
  text-align: center;
+
/****************** TITLE **************/
−
  color:#fff;
+
.couvlogogeo {
 +
              width: 2.5%;
 +
              padding: 1%  2% 1% 96%;
 +
        }
 +
 
 +
/* ****************** LOGO GEOLOCALISATION ***************** */
 +
.logogeo {
 +
  width:5%;
 
}
 
}
 +
 +
 +
 
</style>
 
</style>
 +
 
</head>
 
</head>
  
−
<body>
+
<!-- ************************** CORPS DE LA PAGE ************************** -->
 +
 
 +
<body style="background-color:#364A5E;">
  
 
<header>  
 
<header>  
−
<h1>HOME</h1>
+
<div class="titlehomepage">iGEM Grenoble-Alpes</div>
 +
<div class="titlesnaplab">SnapLab, our portable kit that will detect cholera</div>
 
</header>
 
</header>
  
−
<div class="column full_size" style="background-color:#ECF0F1;">
 
−
 
−
<h2>About SnapLab </h2>
 
−
<p>Health inequalities are still striking the poorest of us, causing many deaths. Poor sanitary conditions allow epidemics such as cholera to spread quite easily through infected fluids. By observing the current situation in Yemen, where a child is infected with cholera every 35 seconds, this infection is definitely an urgent matter to which too little attention is paid. </p>
 
−
<p>Different kinds of medical diagnosis exist but their specificity is far from being optimum. In fact, 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. </p>
 
−
<p>This is why we are going to design a pathogen sensitive detector, allowing an easier and more specific diagnostic : SnapLab, our portable kit that will detect cholera. </p>
 
−
<p>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. Plus, the temperature will continuously be monitored within the kit and this exact same test will be possible with water to differentiate infected water from non infected water. </p>
 
−
<p>The greatest advantage of this device will be its capability to communicate the results to its user and to map the cases of cholera. That way, we will be able to know which area is the most affected by the epidemic. </p>
 
−
<p>Going forward, this kind of device will be replicable for different pathogens, thus allowing to widen the spectrum of this kit’s use. </p>
 
−
</div>
 
−
</body>
 
  
  
 +
<!-- ************************** CHOLERA EXPLANATIONS ************************** -->
 +
 +
<h5 style="color:#000; padding-top: 4%; margin-bottom: 4%; ">
 +
By observing the current situation in Yemen, where a child is infected with <font face="Fredericka the Great" size="5vw">cholera</font> every 35 seconds, this infection is definitely an <font face="Fredericka the Great" size="5vw">urgent matter</font> to which too little attention is paid. <br> <I><font face="Fredericka the Great" size="5vw">Vibrio Cholerae</font></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. <br>
 +
This is why we are going to design a pathogen sensitive detector: <font face="Fredericka the Great" size="5vw">SnapLab,</font> our portable kit that will detect cholera. 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.
 +
</h5>
 +
 +
<div style="background:url('https://static.igem.org/mediawiki/2017/f/f0/Grenobleteamhomepresentation2.jpeg') fixed no-repeat; background-size:100% auto;">
 +
<div style="margin-right:50%; padding-top: 5%; margin-bottom: 5%;">
 +
<div style="text-align: center; font-family:  'Open Sans', sans-serif; font-size:30px; color:white;"><center> We estimate
 +
<div style="margin:3%;"> <font face="Fredericka the Great" size="10vw"> 1,3 to 4 million</font></div>
 +
cases of cholera worldwide.
 +
</center></div>
 +
</div>
 +
<center><img style="width:70%;" src="https://static.igem.org/mediawiki/2017/9/9a/Maptrans.png"></center>
 +
<div style="margin-left:50%; padding-top: 5%; padding-bottom: 5%;">
 +
<div style="text-align: center; font-family:  'Open Sans', sans-serif; font-size:30px; color:white;"><center> It causes
 +
<div style="margin:3%;"> <font face="Fredericka the Great" size="10vw">21000 to 143000 </font></div>
 +
deaths in a year.
 +
</center></div>
 +
</div>
 +
</div>
 +
 +
<!--
 +
 +
<img style="margin-left:50%; style=width:100%;" src="https://static.igem.org/mediawiki/2017/2/23/Fond_bleu.png">
 +
<img style="width:100%" src="https://static.igem.org/mediawiki/2017/8/8c/Fondorange.png">
 +
 +
-->
 +
 +
<!-- ************************** PROJECT ************************** -->
 +
<img style="width:100%" src="https://static.igem.org/mediawiki/2017/0/0f/Logosnaplab3.png">
 +
 +
 +
<!-- ************************** QUOTE ************************** -->
 
<div class="myquote">
 
<div class="myquote">
−
   <a class="typewrite" data-period="2000" data-type='[ "Hi, I'm NPI du SALE.", "I am a GENIUS.", "I Love BIG BOOBS.", "I Love to Develop." ]'>
+
   <a class="typewrite" style="text-decoration:none;" data-period="2000" data-type='[ "Ensemble, utilisons les techniques de demain pour r&eacute;soudre les probl&egrave;mes d&apos;aujourd&apos;hui.","Together, let&apos;s use tomorrow&apos;s groundbreaking techniques to solve today&apos;s challenges."]'>
 
     <span class="wrap"></span>
 
     <span class="wrap"></span>
 
   </a>
 
   </a>
 +
</div>
 
</div>
 
</div>
  
−
<script>
+
<!-- ************************** GPS BANNER ************************** -->
−
var TxtType = function(el, toRotate, period) {
+
<div style="overflow: auto; width: 100%; padding: 1% 0%;">
−
        this.toRotate = toRotate;
+
−
        this.el = el;
+
−
        this.loopNum = 0;
+
−
        this.period = parseInt(period, 10) || 2000;
+
−
        this.txt = '';
+
−
        this.tick();
+
−
        this.isDeleting = false;
+
−
    };
+
  
−
    TxtType.prototype.tick = function() {
+
<center><img class="logogeo" src="https://static.igem.org/mediawiki/2017/c/c9/LogolocalisationiGEMGrenoble.png"></center>
−
        var i = this.loopNum % this.toRotate.length;
+
−
        var fullTxt = this.toRotate[i];
+
  
−
        if (this.isDeleting) {
+
<h2 style="text-align: center; color:#3498db;"> Our geolocalisation concept </h2>
−
        this.txt = fullTxt.substring(0, this.txt.length - 1);
+
−
        } else {
+
−
        this.txt = fullTxt.substring(0, this.txt.length + 1);
+
−
        }
+
  
−
        this.el.innerHTML = '<span class="wrap">'+this.txt+'</span>';
+
<h5 style="color:#000;">
 +
Making you discover Grenoble and its surrounding areas is something we have at heart.
 +
Through our website, you will have the chance to sense the magnificent landscapes Grenoble region has to offer.
 +
Some of these photos were taken after several hours of hiking in the Alps and others were hidden in the depths of Grenoble’s streets. Indeed,  each photo has its secret, and you are very welcome to look it up by clicking on this logo at the right-bottom corner of the photographs.  
 +
</h5>
  
−
        var that = this;
+
</div>
−
        var delta = 200 - Math.random() * 100;
+
  
−
        if (this.isDeleting) { delta /= 2; }
+
<!-- ************************** VIDEO ************************** -->
 +
<h2 style="text-align: center; color:#3498db; padding-top:5%;"> Coming soon, our finale presentation... </h2>
 +
<div style="text-align:center; padding-bottom:2.5%; padding-top:1%;">
 +
<video src="https://static.igem.org/mediawiki/2017/e/e4/GrenobleAlpesteaserpresentation.mp4" poster="https://static.igem.org/mediawiki/2017/e/e5/Homephotoigemgrenoble.jpeg" controls width=50%>
 +
            Your browner cannot show this video.
 +
            </video>
 +
</div>
  
−
        if ((!this.isDeleting)) {
+
<!-- ************************** SITE MAP ************************** -->
−
          if (this.txt === fullTxt) {
+
<img style="width:100%;" src="https://static.igem.org/mediawiki/2017/b/be/Fichier_13.png">
−
        delta = this.period;
+
</div>
−
        this.isDeleting = true;
+
</body>
−
        }
+
−
        }else if (this.isDeleting) {
+
−
          if ( this.txt === '') {
+
−
        this.isDeleting = false;
+
−
        this.loopNum++;
+
−
        delta = 500;
+
−
        }
+
−
        }
+
  
−
        setTimeout(function() {
+
<!-- *********** JAVA POUR LES POPUPS ************-->
−
        that.tick();
+
−
        }, delta);
+
−
    };
+
  
−
    window.onload = function() {
+
         <script>
−
         var elements = document.getElementsByClassName('typewrite');
+
 
−
        for (var i=0; i<elements.length; i++) {
+
             function Function_geo()  
−
             var toRotate = elements[i].getAttribute('data-type');
+
            {
−
             var period = elements[i].getAttribute('data-period');
+
             var popup = document.getElementById("Popup_geo");
−
             if (toRotate) {
+
             popup.classList.toggle("show");
−
              new TxtType(elements[i], JSON.parse(toRotate), period);
+
 
             }
 
             }
−
        }
 
−
        // INJECT CSS
 
−
        var css = document.createElement("style");
 
−
        css.type = "text/css";
 
−
        css.innerHTML = ".typewrite > .wrap { border-right: 0.08em solid #fff}";
 
−
        document.body.appendChild(css);
 
−
    };
 
−
</script>
 
  
 +
        </script>
  
 +
     
 +
</html>
  
−
 
+
{{Grenoble-Alpes/footer}}
−
 
+
−
</html>
+

Latest revision as of 09:35, 16 December 2017

iGEM Grenoble-Alpes
SnapLab, our portable kit that will detect cholera
By observing the current situation in Yemen, where a child is infected with cholera every 35 seconds, this infection is definitely an urgent matter to which too little attention is paid.
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. 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.
We estimate
1,3 to 4 million
cases of cholera worldwide.
It causes
21000 to 143000
deaths in a year.

Our geolocalisation concept

Making you discover Grenoble and its surrounding areas is something we have at heart. Through our website, you will have the chance to sense the magnificent landscapes Grenoble region has to offer. Some of these photos were taken after several hours of hiking in the Alps and others were hidden in the depths of Grenoble’s streets. Indeed, each photo has its secret, and you are very welcome to look it up by clicking on this logo at the right-bottom corner of the photographs.

Coming soon, our finale presentation...

Designed by iGEM Grenoble-Alpes 2017 team | Site Map