|
|
| (2 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| − | {{Pasteur_Paris_Design}}
| |
| − | <html></div></div></div></div></div>
| |
| | | | |
| − | <html lang="en-US">
| |
| − |
| |
| − | <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
| |
| − | <style type="text/css">
| |
| − | <link rel="stylesheet" href="css/gallery.theme.css">
| |
| − | <link rel="stylesheet" href="css/gallery.min.css">
| |
| − | body {
| |
| − | color:black;
| |
| − | background-color:white;
| |
| − | background-image:url("https://2016.igem.org/File:Fond_blanc.png");
| |
| − | background-attachment:fixed;
| |
| − | }
| |
| − |
| |
| − | h1{
| |
| − | font-family: 'Oswald', Arial, sans-serif;
| |
| − | margin-top:0;
| |
| − | padding:0px 30px 30px 30px;
| |
| − | font-size:40px;
| |
| − | color:#333;
| |
| − | text-align: center;
| |
| − | }
| |
| − |
| |
| − | h2{
| |
| − | font-family: 'Oswald', Arial, sans-serif;
| |
| − | margin-top:7%;
| |
| − | padding:0px 30px 30px 30px;
| |
| − | font-size:30px;
| |
| − | color:#17A3B5 ;
| |
| − | text-align: center;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | #introduction1 {
| |
| − | position: relative; /* on positionne le conteneur */
| |
| − | margin-left: 22%;
| |
| − | margin-right: auto;
| |
| − | text-align: left;
| |
| − | width:60%;
| |
| − | text-align : justify;
| |
| − | margin-top:1%;
| |
| − | font-size: 16px
| |
| − | }
| |
| − |
| |
| − | #introduction2 {
| |
| − | position: relative; /* on positionne le conteneur */
| |
| − | margin-left: 22%;
| |
| − | margin-right: auto;
| |
| − | width:60%;
| |
| − | text-align : justify;
| |
| − | font-size: 16px
| |
| − | }
| |
| − |
| |
| − | #introduction3 {
| |
| − | position: relative; /* on positionne le conteneur */
| |
| − | margin-left: 22%;
| |
| − | margin-right: auto;
| |
| − | width:60%;
| |
| − | text-align : justify;
| |
| − | font-size: 16px
| |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − | #text3 {
| |
| − | position: relative; /* on positionne le conteneur */
| |
| − | margin-left: 22%;
| |
| − | margin-right: auto;
| |
| − | text-align: left;
| |
| − | width:60%;
| |
| − | text-align : justify;
| |
| − | font-size:16px
| |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| − | /*slide gallery APPLICATION PART*/
| |
| − | * {
| |
| − | box-sizing: border-box; }
| |
| − |
| |
| − | .app1{
| |
| − | display: flex;
| |
| − | flex-wrap: wrap;
| |
| − | position:relative;
| |
| − | width: 70%;
| |
| − | height: auto;
| |
| − | border: #FFFFFF solid;
| |
| − | margin:0px 10px 0px 0px;
| |
| − | -moz-border-radius:10px 10px;
| |
| − | -webkit-border-radius:10px 10px;
| |
| − | border-radius:10px 10px;
| |
| − | display: -webkit-flex;
| |
| − | display: -ms-flexbox;
| |
| − | display: flex;
| |
| − | -webkit-flex-wrap: wrap;
| |
| − | -ms-flex-wrap: wrap;
| |
| − | flex-wrap: wrap;
| |
| − | }
| |
| − |
| |
| − | a {
| |
| − | text-decoration: none;
| |
| − | color: inherit; }
| |
| − |
| |
| − | .gallery {
| |
| − | position: relative;
| |
| − | height: 550px;
| |
| − | margin-left:15%;
| |
| − | margin-top:0%;
| |
| − | text-align : justify;
| |
| − |
| |
| − | }
| |
| − | .gallery .item {
| |
| − | position: absolute;
| |
| − | top: 0;
| |
| − | left: 0;
| |
| − | width: 80%;
| |
| − | height: 550px;
| |
| − | background: #FFFFFF ;
| |
| − | opacity: 0;
| |
| − | transition: opacity 0.25s; }
| |
| − |
| |
| − | .gallery .item:first-of-type {
| |
| − | opacity: 1;
| |
| − | }
| |
| − |
| |
| − | .gallery .controls {
| |
| − | color: whiteSmoke;
| |
| − | color: #A8D5D8;
| |
| − | left: 1%;
| |
| − | position: absolute;
| |
| − | bottom: 0;
| |
| − | width: 80%;
| |
| − | font-size: 3.5em;
| |
| − | text-align: center;
| |
| − | }
| |
| − |
| |
| − | .gallery .controls a {
| |
| − | transition: color 0.25s;
| |
| − | }
| |
| − |
| |
| − | .gallery .controls a:hover {
| |
| − | color: #17A3B5 ;
| |
| − | color: #17A3B5 ;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | @keyframes galleryAnimation {
| |
| − | 0% {
| |
| − | opacity: 0; }
| |
| − |
| |
| − | 9.5%, 33% {
| |
| − | opacity: 1; }
| |
| − |
| |
| − | 42.9%, 100% {
| |
| − | opacity: 0; } }
| |
| − |
| |
| − | @keyframes controlAnimation {
| |
| − | 0% {
| |
| − | color: whiteSmoke;
| |
| − | color: #A8D5D8; }
| |
| − |
| |
| − | 9.5%, 33% {
| |
| − | color: #17A3B5 ;
| |
| − | color: #17A3B5 ; }
| |
| − |
| |
| − | 42.9%, 100% {
| |
| − | color: whiteSmoke;
| |
| − | color: #A8D5D8; } }
| |
| − |
| |
| − |
| |
| − | .gallery .control-operator {
| |
| − | display: none;
| |
| − | }
| |
| − | .gallery .control-operator:target ~ .item {
| |
| − | animation: none;
| |
| − | }
| |
| − | .gallery .control-operator:target ~ .controls .control-item {
| |
| − | color: whiteSmoke;
| |
| − | color: #A8D5D8;
| |
| − | animation: none;
| |
| − | }
| |
| − | .gallery .control-operator:nth-of-type(1):target ~ .item:nth-of-type(1) {
| |
| − | opacity: 1;
| |
| − | }
| |
| − | .gallery .control-operator:nth-of-type(1):target ~ .controls .control-item:nth-of-type(1) {
| |
| − | color: #17A3B5 ;
| |
| − | color: #17A3B5 ;
| |
| − | }
| |
| − |
| |
| − | .gallery .control-operator:nth-of-type(2):target ~ .item:nth-of-type(2) {
| |
| − | opacity: 1;
| |
| − | }
| |
| − | .gallery .control-operator:nth-of-type(2):target ~ .controls .control-item:nth-of-type(2) {
| |
| − | color: #17A3B5 ;
| |
| − | color: #17A3B5 ;
| |
| − | }
| |
| − |
| |
| − | .gallery .control-operator:nth-of-type(3):target ~ .item:nth-of-type(3) {
| |
| − | opacity: 1;
| |
| − | }
| |
| − | .gallery .control-operator:nth-of-type(3):target ~ .controls .control-item:nth-of-type(3) {
| |
| − | color: #17A3B5 ;
| |
| − | color: #17A3B5 ;
| |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − | .multi-column3{
| |
| − | width:60%;
| |
| − | margin-top:3%;
| |
| − | margin-left:22%;
| |
| − | text-align : justify;
| |
| − | -moz-column-count:2;
| |
| − | -webkit-column-count:2;
| |
| − | -o-column-count:2;
| |
| − | column-count:2;
| |
| − | -moz-column-gap:25px;
| |
| − | -webkit-column-gap:25px;
| |
| − | -o-column-gap:25px;
| |
| − | column-gap:25px;
| |
| − | -webkit-column-rule-width:3px;
| |
| − | -moz-column-rule-width:3px;
| |
| − | -o-column-rule-width:3px;
| |
| − | column-rule-width:3px;
| |
| − |
| |
| − | }
| |
| − |
| |
| − |
| |
| − | </style>
| |
| − |
| |
| − | <body>
| |
| − | <div id="Devices page">
| |
| − | <h1><B>MOS(KIT)O devices</B></h1>
| |
| − |
| |
| − | <div id="introduction1"><p>
| |
| − | <center><img src="https://static.igem.org/mediawiki/2016/6/68/Device_1_pasteur.png" width="95%" alt=""/></center></br></br></br>
| |
| − | The patch is the core of our project, but it is only one part of a three part system that includes : a mosquito trap, a safe analysis tool and a database. It was very important for us to design all three parts of this system in a way that is user-friendly so no scientific background is needed to use it. Additionally, it had to be a safe system.</br></br></p></div>
| |
| − |
| |
| − |
| |
| − |
| |
| − | <h2><B>TRAP</B></h2>
| |
| − | <p>
| |
| − | <div id="video" style="margin-left:5%">
| |
| − | <video width=66% height=61% controls>
| |
| − | <source src="https://static.igem.org/mediawiki/2016/d/d3/Mosquito_trap_user_guide_pasteur.mp4" type="video/mp4">
| |
| − | </video>
| |
| − | </div></center></figure></div>
| |
| − | </p>
| |
| − | <div id="introduction2">
| |
| − | <p>The trap was designed in collaboration with experts such as entomologists and targets specifically Mosquitoes. Mosquitoes are attracted to the trap thanks to human pheromone emission and stagnant water contained in the base of the trap.</br></br></br></p></div>
| |
| − | </div>
| |
| − |
| |
| − | <div id="text3"><p><B>How does the trap works ?</B></br>First of all fill the base with water. Then clip the upper part to the base. Now insert the bag that emits pheromones (produced by Biogent). Once the bag is placed, introduce what we will call the mosquito filter. As you can see, a QR code is located on the top of the filter, when you scan it, it automatically records the installation date, the filter number as well as the GPS location of the trap. Once this procedure is completed, close the trap and wait for mosquitoes ! A few days later, it’s time to pick up the mosquitoes ! Scan the QR code again in order to record the current date and bring back only the filter to analyze the mosquitoes sample. Once the filter is removed, bring it back to the local administration that will proceed to the analysis.</br></br></br></p></div>
| |
| − | </div>
| |
| − |
| |
| − | <p>
| |
| − | <B>Explanation video:</B>
| |
| − | <div id="video" style="margin-left:5%">
| |
| − | <video width=66% height=61% controls>
| |
| − | <source src="https://static.igem.org/mediawiki/2016/c/ce/TRAP_SCENARIO_PASTEUR.mp4" type="video/mp4">
| |
| − | </video>
| |
| − | </div></center></figure>
| |
| − | </p>
| |
| − |
| |
| − | <h2><B>ANALYSIS KIT</B></h2>
| |
| − | <p>
| |
| − | <div id="video" style="margin-left:5%">
| |
| − | <video width=66% height=61% controls>
| |
| − | <source src="https://static.igem.org/mediawiki/2016/c/ce/Device_3bis_pasteur.mp4" type="video/mp4">
| |
| − | Your browser does not support the video tag.
| |
| − | </video>
| |
| − | </div></center></figure>
| |
| − | </p>
| |
| − |
| |
| − | <div id="introduction3"><p>Our device is designed in a way that it only requires one operator with minimum training and the device itself. In order to make it as safe as possible, all the liquids that will be used will be stored at the tip of the pump where an absorbent material turns liquids into Gel, acting almost like a diaper. This part can be easily thrown away and replaced.</br></br></br></p></div>
| |
| − | </div>
| |
| − |
| |
| − | <div id="introduction3"><p>
| |
| − | <B>How does the analysis tool works ?</B>
| |
| − | </br> First put the pump into the device. Then insert the patches into the four dedicated slots. Each patch corresponds to a different disease. Clip the “patch-holder” onto the device. Then put the filter containing the mosquitoes inside the device. After that, crush the mosquitoes with the dedicated cap. Thanks to this cap you can put the lysis solution without opening the filter ! When you pull the pump , a network of pipes allows the liquids to flow through the object safely in order to immerse the patch into the lysate solution mixed with the mosquito « juice » . Then you put the washing solution, and pull the pump again to wash the patches As i mentioned earlier all the liquids are stored into the gelified material and can easily and safely be thrown away. After this procedure, with the analysis kit in front of you, you can report each color change of patches as well as the symbol corresponding to each disease into the database. In order to avoid fear or panic, each disease is coded by a symbol. After a verification step, the result are submitted and the map is updated almost in real time !</br></br></br>
| |
| − | </p></div>
| |
| − | </div>
| |
| − |
| |
| − |
| |
| − | <p>
| |
| − | <B>Explanation video:</B>
| |
| − | <div id="video" style="margin-left:5%">
| |
| − | <video width=66% height=61% controls>
| |
| − | <source src="https://static.igem.org/mediawiki/2016/2/21/Video_stopmotion_syst_analyse_pasteur.mp4" type="video/mp4">
| |
| − | Your browser does not support the video tag.
| |
| − | </video>
| |
| − | </div></center></figure>
| |
| − | </p>
| |
| − |
| |
| − |
| |
| − | <h2><B>APPLICATION</B></h2>
| |
| − | <div class="gallery">
| |
| − | <div id="class="control-item" " class="control-operator"></div>
| |
| − | <div id="item-2" class="control-operator"></div>
| |
| − | <div id="item-3" class="control-operator"></div>
| |
| − |
| |
| − |
| |
| − | <figure class="item">
| |
| − | <p><div><center><a href="#"><img class="app1" src="https://static.igem.org/mediawiki/2016/6/68/Ordi_iphone_1_pasteur.png" alt="" /></a></center></div>
| |
| − | </p>
| |
| − | </figure>
| |
| − |
| |
| − | <figure class="item">
| |
| − | <p><div><center><a href="#"><img class="app1" src="https://static.igem.org/mediawiki/2016/e/ea/Ordi_iphone_2_pasteur.png" alt="" /></a></center></div>
| |
| − | </figure>
| |
| − |
| |
| − | <figure class="item">
| |
| − | <p><div><center><a href="#"><img class="app1" src="https://static.igem.org/mediawiki/2016/5/55/IMAC_Pasteur_application_design.png" alt="" /></a></center></div>
| |
| − | </figure>
| |
| − |
| |
| − | <div class="controls">
| |
| − | <a class="control-item" href="#item-1">•</a>
| |
| − | <a class="control-item" href="#item-2">•</a>
| |
| − | <a class="control-item" href="#item-3">•</a>
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − |
| |
| − | <div id="introduction3"><p>
| |
| − | Once the analysis is done, the result is entered in a database that automatically generates a mapping of the results. It allows a clear visualization of the location of infected mosquitoes.The website is composed of a public area where everybody can consult the maps and be given prevention advice.</br></br>
| |
| − |
| |
| − | The other part is accessible only with a personal account by the local administrators to enter the results and communicate with collaborators.
| |
| − |
| |
| − | If you want, you can see the prototype of our website here :
| |
| − | http://moskit.esy.es
| |
| − |
| |
| − | </p></div>
| |
| − |
| |
| − |
| |
| − |
| |
| − | </div>
| |
| − | </body>
| |
| − | <p style="display:none">
| |
| − | </html>
| |
