Difference between revisions of "Team:Mingdao/Applied Design"

 
(36 intermediate revisions by 2 users not shown)
Line 6: Line 6:
 
     <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet'>
 
     <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet'>
 
     <title>Prototype</title>
 
     <title>Prototype</title>
−
  </head>
+
 
 
   <style type="text/css">
 
   <style type="text/css">
  
Line 19: Line 19:
 
   padding: 0;
 
   padding: 0;
 
   font-family: 'Ubuntu' !important; }
 
   font-family: 'Ubuntu' !important; }
−
 
  
 
.bg-container {
 
.bg-container {
Line 43: Line 42:
 
   padding: 50px;
 
   padding: 50px;
 
   min-height: 180vh;
 
   min-height: 180vh;
−
   z-index: 0; }
+
   z-index: 0;  
 +
margin-top:600px
 +
}
  
 
.text-area {
 
.text-area {
Line 55: Line 56:
 
     font-size: 22px;
 
     font-size: 22px;
 
     font-weight: 500; }
 
     font-weight: 500; }
 +
.m-block img {
 +
  width: 100%; }
 +
 +
.path-btns {
 +
z-index:0;
 +
  position: fixed;
 +
  width: 250px;
 +
  top: 200px;
 +
  left: 225px; }
 +
 +
.path-btns .path-dot {
 +
    width: 25px;
 +
    height: 25px;
 +
    border-radius: 50%;
 +
    position: absolute;
 +
    background-color: #fff;
 +
    top: 5px;
 +
    left: 27px;
 +
    border: 5px solid #385e66;
 +
    cursor: pointer; }
 +
    .path-btns .path-dot.active {
 +
      background-color: #385e66; }
 +
    .path-btns .path-dot:hover {
 +
      transition: all .3s;
 +
      transform: scale(1.2); }
 +
 +
.path {
 +
  height: 100px;
 +
  display: flex; }
 +
 +
.path .pathSvg {
 +
    display: block; }
 +
 +
  .path .pathWord {
 +
    padding-right: 10%; }
 +
 +
  .path .path-btn {
 +
    cursor: pointer;
 +
    fill: #fff; }
 +
 +
    .path .path-btn.path-active {
 +
      fill: #385e66; }
 +
 +
  .path .path-word-sm {
 +
    font-size: 12px; }
 +
 +
#HQ_page .path .pathWord p {
 +
      font-weight: 700;
 +
      text-align: left !important;
 +
      font-size: 16px;
 +
      color: #bf4e4e;
 +
}
 +
 +
#HQ_page .text-area p {
 +
  font-size: 22px;
 +
  font-family: 'Ubuntu';
 +
  font-weight: 500; }
 +
  
 
.pdfbtn {
 
.pdfbtn {
Line 119: Line 178:
 
       padding-left: 10px; }
 
       padding-left: 10px; }
  
−
#HQ_page .text-area p {
+
 
−
  font-size: 22px;
+
−
  font-family: 'Ubuntu';
+
−
  font-weight: 500; }
+
 
.top {
 
.top {
 
   position: fixed;
 
   position: fixed;
Line 132: Line 188:
 
   .top img {
 
   .top img {
 
     width: 100%; }
 
     width: 100%; }
−
h2 {
+
.top-picture{
−
text-align: center;
+
z-index:2;
 +
width:100%;
 +
  position: absolute;
 +
}
 +
 
 +
.text-area h2{
 +
    text-align: center;
 +
    margin-bottom: 2rem !important;
 +
    margin-top: 2rem;
 +
    color: white !important;
 +
    font-size: 40px;
 +
    font-weight:bold;
 +
    font-family:serif;
 +
}
 +
 
 +
h4{
 +
    text-align: center;
 
     margin-bottom: 2rem !important;
 
     margin-bottom: 2rem !important;
 
     margin-top: 2rem;
 
     margin-top: 2rem;
Line 159: Line 231:
  
 
</style>
 
</style>
 +
</head>
  
−
  <body>
+
<body>
 
     <div class="bg-container">
 
     <div class="bg-container">
 
<img class="top-picture" src="https://static.igem.org/mediawiki/2018/2/21/T--Mingdao--Phil13-1.png" style="width:100%">
 
<img class="top-picture" src="https://static.igem.org/mediawiki/2018/2/21/T--Mingdao--Phil13-1.png" style="width:100%">
Line 167: Line 240:
 
           <div class="text-area">
 
           <div class="text-area">
 
             <!-- <h1>Prototype</h1> -->
 
             <!-- <h1>Prototype</h1> -->
−
         
+
<h4 id="d-ge"></h4>
 
<div class="col-md-12 col-sm-12">
 
<div class="col-md-12 col-sm-12">
 
                        <img src="https://static.igem.org/mediawiki/2018/d/d5/T--Mingdao--phil13N1.png" width="100%" height="auto" style="display: block; margin: auto; margin-top: 2rem; margin-bottom: 2rem">
 
                        <img src="https://static.igem.org/mediawiki/2018/d/d5/T--Mingdao--phil13N1.png" width="100%" height="auto" style="display: block; margin: auto; margin-top: 2rem; margin-bottom: 2rem">
Line 174: Line 247:
  
  
−
<!-- <h2>GE Mosquitoes</h2> -->  
+
<!-- <h4>GE Mosquitoes</h4> -->  
  
 
<p style="text-indent:2em">
 
<p style="text-indent:2em">
Line 200: Line 273:
 
<br />
 
<br />
  
−
 
+
<h4 id="d-p-d"></h4>
 
<div class="col-md-12 col-sm-12">
 
<div class="col-md-12 col-sm-12">
 
<img src="https://static.igem.org/mediawiki/2018/b/b5/T--Mingdao--phil13N3.png" width="100%" height="auto" style="display: block; margin: auto; margin-top: 2rem; margin-bottom: 2rem">
 
<img src="https://static.igem.org/mediawiki/2018/b/b5/T--Mingdao--phil13N3.png" width="100%" height="auto" style="display: block; margin: auto; margin-top: 2rem; margin-bottom: 2rem">
Line 206: Line 279:
  
  
−
<!-- <h2>Product Design</h2> -->
+
<!-- <h4>Product Design</h4> -->
 
<p style="text-indent:2em">
 
<p style="text-indent:2em">
 
To make GE mosquito GFP reporter system come to the world, some may be considered: product packaging, result reading device and protocol, safety, as well as product marketing. </p>
 
To make GE mosquito GFP reporter system come to the world, some may be considered: product packaging, result reading device and protocol, safety, as well as product marketing. </p>
Line 213: Line 286:
 
We developed two products as one set for our reporter and reading system:<br />
 
We developed two products as one set for our reporter and reading system:<br />
 
<p>
 
<p>
−
1. KISSING BOX<sup>TM</sup>: the GE mosquito kept in the box for sucking blood<br />
+
1. KISSING BOX<sup>TM</sup>: GE mosquitoes kept in the box for sucking blood<br />
 
<p>
 
<p>
 
2. BLUE LED BOX: a scanner box equipped with blue led for observing the green fluorescence signal.<br />
 
2. BLUE LED BOX: a scanner box equipped with blue led for observing the green fluorescence signal.<br />
Line 229: Line 302:
 
<br />
 
<br />
 
<p style="text-indent:2em">
 
<p style="text-indent:2em">
−
We made a matchbox-size KISSING BOXTM with a clear acrylic sheet on the top and fine metal mesh in the bottom. The box can carry as many as 20 mosquitoes which can suck blood through the mesh.
+
We made a matchbox-size KISSING BOX<sup>TM</sup> with a clear acrylic sheet (as a transparent window) on the top and a cover of fine metal mesh in the bottom. The box can carry as many as 20 mosquitoes which can suck blood through the mesh.
 
  </p>
 
  </p>
 
<!-- <h4>BLUE LED SCANNER BOX</h4> -->
 
<!-- <h4>BLUE LED SCANNER BOX</h4> -->
Line 243: Line 316:
 
<center><img class="center" src="https://static.igem.org/mediawiki/2018/c/cc/T--Mingdao--phil13N8.png" alt="" style="width: 60%; margin-bottom: 20px;"></center>
 
<center><img class="center" src="https://static.igem.org/mediawiki/2018/c/cc/T--Mingdao--phil13N8.png" alt="" style="width: 60%; margin-bottom: 20px;"></center>
 
<p style="text-indent:2em">
 
<p style="text-indent:2em">
−
<center>The SCANNER can load a KISSING BOXTM inside. </center>
+
<center>The SCANNER can load a KISSING BOX<sup>TM</sup> inside. </center>
 
  </p><br /><br />
 
  </p><br /><br />
 
<center><img class="center" src="https://static.igem.org/mediawiki/2018/e/eb/T--Mingdao--phil13N10.png" alt="" style="width: 80%; margin-bottom: 20px;"></center>
 
<center><img class="center" src="https://static.igem.org/mediawiki/2018/e/eb/T--Mingdao--phil13N10.png" alt="" style="width: 80%; margin-bottom: 20px;"></center>
 
<br />
 
<br />
 
<p style="text-indent:2em">
 
<p style="text-indent:2em">
−
The SCANNER equipped with blue led which can excite the green fluorescence of GFP as shown here with fluorescein in a PCR tube.  
+
The SCANNER equipped with blue LED which can excite the green fluorescence of GFP as shown here with fluorescein in a PCR tube.  
 
  </p><br />
 
  </p><br />
  
−
<center><img class="center" src="https://static.igem.org/mediawiki/2018/0/06/T--Mingdao--sammsa100.png" alt="" style="width: 80%; margin-bottom: 20px;"></center>
 
−
<br />
 
  
 
<div class="col-md-12 col-sm-12">
 
<div class="col-md-12 col-sm-12">
 
<img src="https://static.igem.org/mediawiki/2018/f/f5/T--Mingdao--phil13N12.png" width="50%" height="auto" style="display: block; margin: auto; margin-top: 2rem; margin-bottom: 2rem">
 
<img src="https://static.igem.org/mediawiki/2018/f/f5/T--Mingdao--phil13N12.png" width="50%" height="auto" style="display: block; margin: auto; margin-top: 2rem; margin-bottom: 2rem">
−
</div>
+
</div><br />
 +
<center><img class="center" src="https://static.igem.org/mediawiki/2018/9/91/T--Mingdao--sam201-1.png" alt="" style="width: 80%; margin-bottom: 20px;"></center>
 +
<br />
 +
<center>
 +
        <video playinline controls="true" style="width: 75%">
 +
  <source src="https://static.igem.org/mediawiki/2018/2/2e/T--Mingdao--sam200-6.mp4" type="video/mp4" >
 +
    </video>
 +
  <center><br />
 +
 
 +
You can see glowing mosquitoes sucking fluorescein through the transparent window in KISSING BOX<sup>TM</sup>.
 +
 
 +
<br /><br />
 
<center>
 
<center>
 
         <video playinline controls="true" style="width: 75%">
 
         <video playinline controls="true" style="width: 75%">
Line 267: Line 349:
  
 
<p style="text-indent:2em">
 
<p style="text-indent:2em">
−
The SCANNER BOX with KISSING BOXTM is light and portable which can be hold with one hand. The operation is simple and easy-to-use without any profession instructions. Our product is suitable for point-of-care use including poor-educated and limited-resource countries.
+
The SCANNER BOX with KISSING BOX<sup>TM</sup> is light and portable which can be held with one hand. The operation is simple and easy-to-use without any profession instructions. Our product is suitable for point-of-care use including poor-educated and limited-resource countries.
 
  </p><br />
 
  </p><br />
  
Line 291: Line 373:
 
<br /><br />
 
<br /><br />
 
<p style="text-indent:2em">
 
<p style="text-indent:2em">
−
Compared to other current methods, the KISSING BOXTM provides a novel way solving difficulties of accuracy, windows period of virus infection, measuring time and place. The KISSING BOXTM is developed for point-of-care use and affordable to the public. </p>
+
Compared to other current methods, the KISSING BOX<sup>TM</sup> provides a novel way solving difficulties of accuracy, windows period of virus infection, measuring time and place. The KISSING BOX<sup>TM</sup> is developed for point-of-care use and affordable to the public. </p>
 
<br /><br /><br /><br /><br />
 
<br /><br /><br /><br /><br />
  
Line 298: Line 380:
  
  
−
<!-- <h2>Product Safety</h2> -->
+
<!-- <h4>Product Safety</h4> -->
−
 
+
  
 +
<h4 id="d-p-s"></h4>
 
<div class="col-md-12 col-sm-12">
 
<div class="col-md-12 col-sm-12">
 
<img src="https://static.igem.org/mediawiki/2018/8/8b/T--Mingdao--phil13N18.png" width="100%" height="auto" style="display: block; margin: auto; margin-top: 2rem; margin-bottom: 2rem">
 
<img src="https://static.igem.org/mediawiki/2018/8/8b/T--Mingdao--phil13N18.png" width="100%" height="auto" style="display: block; margin: auto; margin-top: 2rem; margin-bottom: 2rem">
Line 313: Line 395:
  
  
−
<!-- <h2> Product DM </h2> -->
+
<h4 id="d-p-c"></h4>
  
 
<div class="col-md-12 col-sm-12">
 
<div class="col-md-12 col-sm-12">
Line 334: Line 416:
 
       </div>
 
       </div>
 
     </div>
 
     </div>
 +
 +
<!--  <script type="text/javascript">
 +
  $('#interlab-btn-1').on('click', function(){
 +
  $('#interlab-1').css('height','250vh')
 +
  $('#interlab-1').slideToggle("slow");
 +
  $('.bg-container').css('max-height','500vh')
 +
  $('.main-content').css('min-height','200vh')
 +
  });
 +
  $('#interlab-btn-2').on('click', function(){
 +
    $('#interlab-2').slideToggle("slow");
 +
      $('.bg-container').css('max-height','500vh')
 +
      $('.main-content').css('min-height','200vh')
 +
  });
 +
  $('.top').on('click', function(){
 +
    $('html, body').animate({scrollTop: '0px'}, 500);
 +
    });
 +
</script>-->
 +
 +
 +
    <div class="path-btns" style="left:0;">
 +
      <div class="path">
 +
        <div class="pathSvg">
 +
          <svg width="80" height = "100">
 +
            <rect x ="36" y="20" width="6" height="80" style="fill:#385e66"/>
 +
          </svg>
 +
        </div>
 +
        <div id="ge-btn" class="path-dot"></div>
 +
        <div class="pathWord path-word-sm">
 +
          <p>GE Mosquitoes</p>
 +
        </div>
 +
      </div>
 +
 +
      <div class="path">
 +
        <div class="pathSvg">
 +
          <svg width="80" height = "100">
 +
            <rect x ="36" y="20" width="6" height="80" style="fill:#385e66"/>
 +
          </svg>
 +
        </div>
 +
        <div id="p-d-btn" class="path-dot" style="top: 100px"></div>
 +
        <div class="pathWord path-word-sm">
 +
          <p>Product Design</p>
 +
        </div>
 +
      </div>
 +
 +
      <div class="path">
 +
        <div class="pathSvg">
 +
          <svg width="80" height = "100">
 +
            <rect x ="36" y="20" width="6" height="80" style="fill:#385e66"/>
 +
          </svg>
 +
        </div>
 +
        <div id="p-s-btn" class="path-dot" style="top: 200px"></div>
 +
        <div class="pathWord path-word-sm">
 +
          <p>Product Safety</p>
 +
        </div>
 +
      </div>
 +
 +
        <div class="path">
 +
        <div class="pathSvg">
 +
          <svg width="80" height = "100">
 +
            <rect x ="36" y="20" width="0" height="80" style="fill:#385e66"/>
 +
          </svg>
 +
        </div>
 +
        <div id="p-c-btn" class="path-dot" style="top: 300px"></div>
 +
        <div class="pathWord path-word-sm">
 +
          <p>Product Catalog</p>
 +
        </div>
 +
      </div>
 +
 +
    </div>
 +
 
     <div class="top">
 
     <div class="top">
−
       <img src="https://static.igem.org/mediawiki/2017/5/52/T--CSMU_NCHU_Taiwan--top.png" alt="">
+
       <img class="center" src="https://static.igem.org/mediawiki/2018/5/58/T--Mingdao--go_to_top.jpg" alt="">
 
     </div>
 
     </div>
 
   </body>
 
   </body>
 +
 
   <script type="text/javascript">
 
   <script type="text/javascript">
−
     $('#interlab-btn-1').on('click', function(){
+
     $("#ge-btn").click(function() {
−
       $('#interlab-1').css('height','250vh')
+
       $('html, body').animate({
−
      $('#interlab-1').slideToggle("slow");
+
          scrollTop: $("#d-ge").offset().top
−
      $('.bg-container').css('max-height','500vh')
+
       }, 500);
−
       $('.main-content').css('min-height','200vh')
+
 
     });
 
     });
−
     $('#interlab-btn-2').on('click', function(){
+
     $("#p-d-btn").click(function() {
−
       $('#interlab-2').slideToggle("slow");
+
       $('html, body').animate({
−
      $('.bg-container').css('max-height','500vh')
+
          scrollTop: $("#d-p-d").offset().top
−
       $('.main-content').css('min-height','200vh')
+
       }, 500);
 
     });
 
     });
−
     $('.top').on('click', function(){
+
     $("#p-s-btn").click(function() {
−
       $('html, body').animate({scrollTop: '0px'}, 500);
+
      $('html, body').animate({
 +
          scrollTop: $("#d-p-s").offset().top
 +
      }, 500);
 +
    });
 +
    $("#p-c-btn").click(function() {
 +
       $('html, body').animate({
 +
          scrollTop: $("#d-p-c").offset().top
 +
      }, 500);
 
     });
 
     });
−
</script>
 
−
</html>
 
  
 +
    $(document).ready(function(){
 +
      $('.top').on('click', function(){
 +
        $('html, body').animate({scrollTop: '0px'}, 500);
 +
      });
 +
        $("#ge-btn").css('background-color', '#385e66');
 +
        var scroll_pos = 0;
 +
        $(document).scroll(function() {
 +
            scroll_pos = $(this).scrollTop();
 +
 +
            d_ge_pos = $("#d-ge").offset().top -100
 +
            d_pd_pos = $("#d-p-d").offset().top -100
 +
            d_ps_pos= $("#d-p-s").offset().top -100
 +
            d_pc_pos = $("#d-p-c").offset().top -100
 +
 +
            // introduction
 +
            if(scroll_pos < d_pd_pos) {
 +
                $(".path-dot").css('background-color', '#fff')
 +
                $("#ge-btn").css('background-color', '#385e66');
 +
            // model1
 +
            } else if(scroll_pos < d_ps_pos){
 +
              if(scroll_pos >= d_pd_pos){
 +
                $(".path-dot").css('background-color', '#fff')
 +
                $("#p-d-btn").css('background-color', '#385e66');}
 +
 +
            // model2
 +
            } else if(scroll_pos < d_pc_pos){
 +
              if(scroll_pos >= d_ps_pos){
 +
                $(".path-dot").css('background-color', '#fff')
 +
                $("#p-s-btn").css('background-color', '#385e66');}
 +
            }
 +
 +
           
 +
            // conclusion
 +
            else if( scroll_pos >= d_pc_pos) {
 +
                $(".path-dot").css('background-color', '#fff')
 +
                $("#p-c-btn").css('background-color', '#385e66');
 +
            }
 +
        });
 +
    });
 +
 +
  </script>
 +
</html>
 
{{:Team:Mingdao/test6}}
 
{{:Team:Mingdao/test6}}

Latest revision as of 03:02, 18 October 2018

HOME
Prototype

To demonstrate our pathogen blood testing system on a real adult mosquito, we collaborated with NCHU_Taichung iGEM Team 2018 from Taiwan and conducted an experiment of DNA microinjection into adult female mosquito, Aedes aegypti.


In addition to this experiment, we also visited the Mosquito Lab of Prof. Wu-Chun Tu in National Chung Hsing University, Taiwan. We presented our idea and got the valuable feedback from him. Moreover, we learned the physiology and behavior of mosquitoes when sucking and attracted by human blood from Dr. Hau-you Tzeng. The knowledge we learned was turned into our prototype design.

EXPERIMENT at NCHU

↓ Make microinjection needles by pulling glass capillary tubes
↓ Anesthetize the adult mosquitoes on ice
↓ Fill the needle with the DNAs in Cellfectin II reagent with E. coli or not
↓ Inject the DNA by inserting into the thorax of the mosquito.
↓ Recover the mosquito for 2 days


RESULT

The mosquito injected with DNA plus E. coli showed fluorescence signal in Gel Imaging System and Blue LED Box after 2 days of DNA microinjection. This result further proved our concept into a reality.



To make GE mosquito GFP reporter system come to the world, some may be considered: product packaging, result reading device and protocol, safety, as well as product marketing.


We developed two products as one set for our reporter and reading system:

1. KISSING BOXTM: GE mosquitoes kept in the box for sucking blood

2. BLUE LED BOX: a scanner box equipped with blue led for observing the green fluorescence signal.





We made a matchbox-size KISSING BOXTM with a clear acrylic sheet (as a transparent window) on the top and a cover of fine metal mesh in the bottom. The box can carry as many as 20 mosquitoes which can suck blood through the mesh.

The SCANNER can load a KISSING BOXTM inside.




The SCANNER equipped with blue LED which can excite the green fluorescence of GFP as shown here with fluorescein in a PCR tube.





You can see glowing mosquitoes sucking fluorescein through the transparent window in KISSING BOXTM.



The SCANNER BOX with KISSING BOXTM is light and portable which can be held with one hand. The operation is simple and easy-to-use without any profession instructions. Our product is suitable for point-of-care use including poor-educated and limited-resource countries.










Compared to other current methods, the KISSING BOXTM provides a novel way solving difficulties of accuracy, windows period of virus infection, measuring time and place. The KISSING BOXTM is developed for point-of-care use and affordable to the public.







Safety is more than everything. The product will bring to you with wingless GE mosquitoes either with wings cut manually or genetically modified by knocking out a wing development gene, vestigial.










GE Mosquitoes

Product Design

Product Safety

Product Catalog