Difference between revisions of "Team:SZU-China/IntegratedHP"

@@ Line 28: / Line 28: @@
 <style id="fontSet">
+    /*@font-face {*/
+    /*    font-family: "GalanoGrotesqueAltDEMO-Bold";*/
+    /*    src: url('../../wiki/images/e/ef/T--SZU-CHINA--attribution_font.otf') format("opentype");*/
+    /*}*/
+    /*@font-face {*/
+    /*    font-family: "LatoBold";*/
+    /*    src: url('../../wiki/images/5/54/T--SZU-CHINA--Lato-Bold.ttf') format("truetype");*/
+    /*}*/
+    /*@font-face {*/
+    /*    font-family: "LatoMe";*/
+    /*    src: url('../../wiki/images/5/5a/T--SZU-CHINA--Lato-medium.ttf') format("truetype");*/
+    /*}*/
      @font-face {
          font-family: "GalanoGrotesqueAltDEMO-Bold";
-         src: url('../../wiki/images/e/ef/T--SZU-CHINA--attribution_font.otf') format("opentype");
+         src: url('./fonts/Galano Grotesque Alt DEMO Bold.otf') format("opentype");
      }
      @font-face {
          font-family: "LatoBold";
-         src: url('../../wiki/images/5/54/T--SZU-CHINA--Lato-Bold.ttf') format("truetype");
+         src: url('./fonts/Lato-Bold.ttf') format("truetype");
      }
@@ Line 41: / Line 58: @@
      @font-face {
          font-family: "LatoMe";
-         src: url('../../wiki/images/5/5a/T--SZU-CHINA--Lato-medium.ttf') format("truetype");
+         src: url('./fonts/Lato-Medium.ttf') format("truetype");
      }
 </style>
-<style>
+<style id="littleMeunuCss">
      .littleMenu{
          left: 5%;
@@ Line 101: / Line 121: @@
      .littleMenu .btn:hover .fa {
          color: rgba(255, 255, 255, 0.7);
+    }
+    .littleMenu .btn .fa a{
+        display: block;
+        text-decoration: none;
      }
      .littleMenu .btn.trigger {
@@ Line 261: / Line 285: @@
 <style>
+    a{
+        outline: none;
+    }
+    area{
+        outline: none;
+    }
+    area:hover{
+        cursor: pointer;
+    }
      .IHPheadBar{
          width: 100%;
@@ Line 268: / Line 301: @@
          background-color: white;
      }
+    .modal.fade.in{top:80px;}
      .modal-content{
          z-index: 1111;
      }
      .modal-title{
-         font-size: 25px;
+         font-size: 35px;
-         line-height: 25px;
+         line-height: 35px;
          font-family:GalanoGrotesqueAltDEMO-Bold ;
-         color: #333333;
+         color: #0b8544;
      }
      .modal-body h3{
          font-size: 25px;
-         line-height: 25px;
+         line-height: 30px;
          font-family:GalanoGrotesqueAltDEMO-Bold ;
          margin-bottom: 20px;
@@ Line 287: / Line 321: @@
      .modal-body p{
          font-size: 18px;
-         line-height: 20px;
+         line-height: 25px;
          font-family:LatoMe ;
          margin-bottom: 20px;
@@ Line 294: / Line 328: @@
      }
+    .modal-body h4{
+        font-size: 22px;
+        line-height: 25px;
+        font-family:GalanoGrotesqueAltDEMO-Bold ;
+        margin-bottom: 20px;
+        color: #333333;
+        text-align: justify;
+    }
+    .CilckMore{
+        color: #333333;
+        font-family: GalanoGrotesqueAltDEMO-Bold;
+        font-size: 38px;
+        line-height: 120%;
+        text-align: center;
+        display: block;
+        margin: 0 auto;
+        padding-top: 30px;
+    }
 </style>
@@ Line 879: / Line 930: @@
      }
+    .cardbody{
+        width: 80%;
+        margin: 0 auto 0 auto;
+        margin-top: 100px;
+        text-align: center;
+        padding-bottom: 30px;
+    }
+    .cardtext{
+        width: 80%;
+        text-align: center;
+        font-family: "LatoBold",Helvetica;
+        font-size: 16px;
+        color: rgba(55, 55, 55, 1.0);
+        margin: 0 auto;
+        position: relative;
+        display: block;
+        margin-top: 20px;
+        margin-bottom: 60px;
+    }
+    .cardheadline{
+        text-align: center;
+        font-family: "GalanoGrotesqueAltDEMO-Bold", Helvetica, Arial, serif;
+        font-size: 30px;
+        color: #11843F;
+        margin-top: 20px;
+        line-height: 150%;
+    }
+    .longbuttonh1{
+        text-align: left;
+        font-family: "GalanoGrotesqueAltDEMO-Bold", Helvetica, Arial, serif;
+        font-size: 30px;
+        color: white;
+        margin-top: 10px;
+        margin-left: 20px;
+    }
+    .longbuttonh2{
+        text-align: left;
+        font-family: "GalanoGrotesqueAltDEMO-Bold", Helvetica, Arial, serif;
+        color: white;
+        margin-left: 20px;
+    }
+    .cardimg{
+        width: 40%;
+        height: auto;
+        margin: 0 auto;
+        margin-top: 30px;
+        position: relative;
+        display: block;
+    }
+    /*.card img {
+        width: 45%;
+        height: auto;
+        margin: 0 auto 0 auto;
+    }*/
+    .card{
+        /*height: 300px;*/
+        /*width: 260px;*/
+        height: 350px;
+        width: 20%;
+        background-color: white;
+        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
+        border-radius: 4px;
+        display: inline-block;
+        margin-left: 18px;
+        vertical-align: top;
+        line-height: 24px;
+    }
+    .card:hover{
+        box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
+    }
 </style>
@@ Line 893: / Line 1,023: @@
              </div>
          </div>
-         <h2 class="bigtitle">IHP</h2>
+         <h2 class="bigtitle" style="font-size: 120px;text-align: center;">Integrated <br>Human Practices</h2>
      </div>
@@ Line 900: / Line 1,030: @@
      <div id="mainbody">
-        <img class="leftsideimg2" src="https://2019.igem.org/wiki/images/c/c0/T--SZU-CHINA--img-02.png" style="top: 1200px;">
+<!--        <img class="leftsideimg2" src="https://2019.igem.org/wiki/images/c/c0/T&#45;&#45;SZU-CHINA&#45;&#45;img-02.png" style="top: 1200px;">-->
          <img class="leftsideimg2" src="https://2019.igem.org/wiki/images/c/c0/T--SZU-CHINA--img-02.png" style="top: 2700px;">
@@ Line 912: / Line 1,042: @@
+        <div style="height: 300px"></div>
+        <div class="cardbody">
+            <div class="card">
+                <img  class="cardimg" src="https://2019.igem.org/wiki/images/a/a3/T--SZU-CHINA--hplogo2.png" alt=""/>
+                <div>
+                    <h3 class="cardheadline">Background research</h3>
+<!--                    <span class="cardtext">Come and see how we made possible the manufacturing of Micrancide as well as the Application</span>-->
+                </div>
+            </div>
+            <div class="card">
+                <img  class="cardimg" src="https://2019.igem.org/wiki/images/5/53/T--SZU-CHINA--gplog3.png" alt=""/>
+                <div>
+                    <h3 class="cardheadline" style="margin-top: 50px;">Community</h3>
+<!--                    <span class="cardtext">Here is the siRNA sifting program for other researchers to select RNAi molecules for their specific purpose.</span>-->
+                </div>
+            </div>
+            <div class="card">
+                <img  class="cardimg" src="https://2019.igem.org/wiki/images/d/db/T--SZU-CHINA--holgo4.png" alt=""/>
+                <div>
+                    <h3 class="cardheadline" style="margin-top: 50px;">Expert</h3>
+<!--                    <span class="cardtext">Find out how we decided to use the third generation as the final RNAi-based herbicide</span>-->
+                </div>
+            </div>
+            <div class="card">
+                <img  class="cardimg" src="https://2019.igem.org/wiki/images/b/b8/T--SZU-CHINA--hplog5.png" alt=""/>
+                <h3 class="cardheadline">Companies & partner</h3>
+<!--                <span class="cardtext">Do you want to see how fast M. micrantha grows without control and how efficient Micrancide is?</span>-->
+            </div>
+        </div>
+    </div>
+    <div style="height: 300px"></div>
+        <h1 class="CilckMore">Click on the different sections of the image to learn more</h1>
          <div class="littleMenu">
@@ Line 921: / Line 1,096: @@
                      <div class="btn btn-icon">
                          <!--<i class="fa fa-codepen"></i>-->
-                         <a href="" class="fa">Bg</a>
+                         <a href="" class="fa">Test</a>
                      </div>
                  </div>
@@ Line 927: / Line 1,102: @@
                      <div class="btn btn-icon">
                          <!--<i class="fa fa-facebook"></i>-->
-                         <a href="bg1.html" class="fa">Exa</a>
+                         <a href="https://2019.igem.org/Team:SZU-China/IHP/bgPage" class="fa">Bg</a>
                      </div>
                  </div>
@@ Line 951: / Line 1,126: @@
              </div>
          </div>
-            <!--<div style="width: 100%; margin: 0 auto">-->
+        <!--<div style="width: 100%; margin: 0 auto">-->
-                <img id="mapImg" src="https://2019.igem.org/wiki/images/1/1e/T--SZU-CHINA--hpPage2.jpg" alt="" usemap="#testArea"  style="margin: 0 auto; display: block; max-width: 1200px; width: 1166px;height: auto; border: 10px #48D289;" border="1" />
+        <img id="mapImg" src="https://2019.igem.org/wiki/images/0/06/T--SZU-CHINA--hp222.jpg" alt="" hidefocus="true" usemap="#testArea"  style="margin: 0 auto; display: block; max-width: 1200px; width: 80%;height: auto; border: 10px #48D289;" border="1" />
-                <map name="testArea" id="testArea">
+        <map name="testArea" id="testArea">
-                    <area  alt="" title="" data-target="#myModal1"  data-toggle="modal" shape="rect" style="outline:none;" target="_self"     />
+            <area  alt="" title="" data-target="#myModal1"  data-toggle="modal" shape="rect" style="outline:none;" target="_self"  onfocus="blur(this)" />
-                    <area  alt="" title="" data-target="#myModal2" data-toggle="modal" shape="rect" style="outline:none;" target="_self"     />
+            <area  alt="" title="" data-target="#myModal2" data-toggle="modal" shape="rect" style="outline:none;" target="_self"     />
-                    <area  alt="" title="" data-target="#myModal3" data-toggle="modal" shape="rect" style="outline:none;" target="_self"     />
+            <area  alt="" title="" data-target="#myModal3" data-toggle="modal" shape="rect" style="outline:none;" target="_self"     />
-                    <area  alt="" title="" data-target="#myModal4" data-toggle="modal" shape="rect" style="outline:none;" target="_self"     />
+            <area  alt="" title="" data-target="#myModal4" data-toggle="modal" shape="rect" style="outline:none;" target="_self"     />
-                    <area  alt="" title="" data-target="#myModal5" data-toggle="modal" shape="rect" style="outline:none;" target="_self"     />
+            <area  alt="" title="" data-target="#myModal5" data-toggle="modal" shape="rect" style="outline:none;" target="_self"     />
-                    <area  alt="" title="" data-target="#myModal6" data-toggle="modal" shape="rect" style="outline:none;" target="_self"     />
+            <area  alt="" title="" data-target="#myModal6" data-toggle="modal" shape="rect" style="outline:none;" target="_self"     />
-                    <area  alt="" title="" data-target="#myModal7" data-toggle="modal" shape="rect" style="outline:none;" target="_self"     />
+            <area  alt="" title="" data-target="#myModalFirst" data-toggle="modal" shape="rect" style="outline:none;" target="_self"     />
-                    <area  alt="" title="" data-target="#myModal8" data-toggle="modal" shape="rect" style="outline:none;" target="_self"     />
-                    <area  alt="" title="" data-target="#myModal9" data-toggle="modal" shape="rect" style="outline:none;" target="_self"     />
-                    <area  alt="" title="" data-target="#myModal10" data-toggle="modal" shape="rect" style="outline:none;" target="_self"     />
-                    <area  alt="" title="" data-target="#myModal11" data-toggle="modal" shape="rect" style="outline:none;" target="_self"     />
-                    <area  alt="" title="" data-target="#myModal12" data-toggle="modal" shape="rect" style="outline:none;" target="_self"     />
-                    <area  alt="" title="" data-target="#myModal13" data-toggle="modal" shape="rect" style="outline:none;" target="_self"     />
-                    <area  alt="" title="" data-target="#myModal14" data-toggle="modal" shape="rect" style="outline:none;" target="_self"     />
-                    <area  alt="" title="" data-target="#myModal15" data-toggle="modal" shape="rect" style="outline:none;" target="_self"     />
-                    <area  alt="" title="" data-target="#myModal16" data-toggle="modal" shape="rect" style="outline:none;" target="_self"     />
-                    <area  alt="" title="" data-target="#myModal17" data-toggle="modal" shape="rect" style="outline:none;" target="_self"     />
-                    <area  alt="" title="" data-target="#myModal18" data-toggle="modal" shape="rect" style="outline:none;" target="_self"     />
-                    <area  alt="" title="" data-target="#myModal19" data-toggle="modal" shape="rect" style="outline:none;" target="_self"     />
-                    <area  alt="" title="" data-target="#myModal20" data-toggle="modal" shape="rect" style="outline:none;" target="_self"     />
-                    <area  alt="" title="" data-target="#myModal21" data-toggle="modal" shape="rect" style="outline:none;" target="_self"     />
-                </map>
+            <area  alt="" title="" data-target="#myModal7" data-toggle="modal" shape="rect" style="outline:none;" target="_self"     />
+            <area  alt="" title="" data-target="#myModal8" data-toggle="modal" shape="rect" style="outline:none;" target="_self"     />
+            <area  alt="" title="" data-target="#myModal9" data-toggle="modal" shape="rect" style="outline:none;" target="_self"     />
+            <area  alt="" title="" data-target="#myModal10" data-toggle="modal" shape="rect" style="outline:none;" target="_self"     />
+            <area  alt="" title="" data-target="#myModal11" data-toggle="modal" shape="rect" style="outline:none;" target="_self"     />
+            <area  alt="" title="" data-target="#myModal12" data-toggle="modal" shape="rect" style="outline:none;" target="_self"     />
+            <area  alt="" title="" data-target="#myModal13" data-toggle="modal" shape="rect" style="outline:none;" target="_self"     />
+            <area  alt="" title="" data-target="#myModal14" data-toggle="modal" shape="rect" style="outline:none;" target="_self"     />
+            <area  alt="" title="" data-target="#myModalSecond" data-toggle="modal" shape="rect" style="outline:none;" target="_self"     />
+            <area  alt="" title="" data-target="#myModal15" data-toggle="modal" shape="rect" style="outline:none;" target="_self"     />
+            <area  alt="" title="" data-target="#myModal16" data-toggle="modal" shape="rect" style="outline:none;" target="_self"     />
+            <area  alt="" title="" data-target="#myModal17" data-toggle="modal" shape="rect" style="outline:none;" target="_self"     />
+            <area  alt="" title="" data-target="#myModal18" data-toggle="modal" shape="rect" style="outline:none;" target="_self"     />
+            <area  alt="" title="" data-target="#myModal19" data-toggle="modal" shape="rect" style="outline:none;" target="_self"     />
+            <area  alt="" title="" data-target="#myModal20" data-toggle="modal" shape="rect" style="outline:none;" target="_self"     />
+            <area  alt="" title="" data-target="#myModal21" data-toggle="modal" shape="rect" style="outline:none;" target="_self"     />
-            </div>
+        </map>
-        </div>
+    </div>
+</div>
 <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
@@ Line 996: / Line 1,175: @@
              </div>
              <div class="modal-body">
                  <div >
                      <h3>Description:</h3>
@@ Line 1,007: / Line 1,186: @@
                  </div>
-                <div>
-                    <img style="width: 100%" src="https://2019.igem.org/wiki/images/b/bd/T--SZU-CHINA--attribution-banner-small.png" alt="" data-action="zoom">
-                </div>
              </div>
@@ Line 1,035: / Line 1,211: @@
              </div>
              <div class="modal-body">
                  <div >
                      <h3>Description:</h3>
@@ Line 1,048: / Line 1,224: @@
                  </div>
-                <div>
-                    <img style="width: 100%" src="./img/attribution-banner-small.jpg" alt="" data-action="zoom">
-                </div>
              </div>
@@ Line 1,076: / Line 1,249: @@
              </div>
              <div class="modal-body">
                  <div >
                      <h3>Description:</h3>
@@ Line 1,088: / Line 1,261: @@
                  </div>
-                <div>
-                    <img style="width: 100%" src="./img/attribution-banner-small.jpg" alt="" data-action="zoom">
-                </div>
              </div>
@@ Line 1,116: / Line 1,286: @@
              </div>
              <div class="modal-body">
                  <div >
                      <h3>Description:</h3>
@@ Line 1,131: / Line 1,301: @@
                  <div>
-                     <img style="width: 100%" src="./img/attribution-banner-small.jpg" alt="" data-action="zoom">
+                     <img style="width: 100%" src="https://2019.igem.org/wiki/images/2/29/T--SZU-CHINA--IHP_a1.jpg" alt="" data-action="zoom">
                  </div>
@@ Line 1,158: / Line 1,328: @@
              </div>
              <div class="modal-body">
                  <div >
                      <h3>Description:</h3>
@@ Line 1,172: / Line 1,342: @@
                  <div>
-                     <img style="width: 100%" src="./img/attribution-banner-small.jpg" alt="" data-action="zoom">
+                     <img style="width: 100%;" src="https://2019.igem.org/wiki/images/4/4e/T--SZU-CHINA--IHP_2.jpg" alt="" data-action="zoom">
+                    <img style="width: 100%;" src="https://2019.igem.org/wiki/images/a/aa/T--SZU-CHINA--IHP_3.jpg" alt="" data-action="zoom">
                  </div>
@@ Line 1,199: / Line 1,371: @@
              </div>
              <div class="modal-body">
                  <div >
                      <h3>Description:</h3>
@@ Line 1,212: / Line 1,384: @@
                      <p>Obtained some information of chemical herbicide to facilitate comparison experiments
                          We decided to add detergent to our product</p>
-                    <h4>The first generation：dsRNA</h4>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-default"
+                        data-dismiss="modal">Close
+                </button>
+            </div>
+        </div><!-- /.modal-content -->
+    </div><!-- /.modal-dialog -->
+</div><!-- /.modal -->
+<div class="modal fade" id="myModalFirst" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal"
+                        aria-hidden="true">×
+                </button>
+                <h3 class="modal-title" >
+                    The first generation：dsRNA
+                </h3>
+            </div>
+            <div class="modal-body">
+                <div >
                      <p>We screened several genes from the transcriptome of Mikania micrantha obtained from the Genomics Institute and designed them into dsRNA sequences.</p>
                      <p>However, in subsequent experiments we found that there are many problems with dsRNA. dsRNA is low in specificity and poorly effective</p>
                      <p>We are trying to improve dsRNA and also start looking for alternatives.</p>
-                </div>
-                <div>
-                    <img style="width: 100%" src="./img/attribution-banner-small.jpg" alt="" data-action="zoom">
                  </div>
@@ Line 1,234: / Line 1,430: @@
 </div><!-- /.modal -->
 <div class="modal fade" id="myModal7" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
@@ Line 1,247: / Line 1,444: @@
              </div>
              <div class="modal-body">
                  <div >
                      <h3>Description:</h3>
@@ Line 1,269: / Line 1,466: @@
                  </div>
-                <div>
-                    <img style="width: 100%" src="./img/attribution-banner-small.jpg" alt="" data-action="zoom">
-                </div>
              </div>
@@ Line 1,298: / Line 1,491: @@
              </div>
              <div class="modal-body">
                  <div >
                      <h3>Description:</h3>
@@ Line 1,311: / Line 1,504: @@
                  </div>
-                <div>
-                    <img style="width: 100%" src="./img/attribution-banner-small.jpg" alt="" data-action="zoom">
-                </div>
              </div>
@@ Line 1,340: / Line 1,529: @@
              </div>
              <div class="modal-body">
                  <div >
                      <h3>Description:</h3>
@@ Line 1,376: / Line 1,565: @@
              </div>
              <div class="modal-body">
                  <div >
                      <h3>Description:</h3>
@@ Line 1,411: / Line 1,600: @@
              </div>
              <div class="modal-body">
                  <div >
                      <h3>Description:</h3>
@@ Line 1,425: / Line 1,614: @@
                  <div>
-                     <img style="width: 100%" src="./img/attribution-banner-small.jpg" alt="" data-action="zoom">
+                     <img style="width: 100%" src="https://2019.igem.org/wiki/images/b/be/T--SZU-CHINA--IHP_4.jpg" alt="" data-action="zoom">
                  </div>
@@ Line 1,452: / Line 1,641: @@
              </div>
              <div class="modal-body">
                  <div >
                      <h3>Description:</h3>
@@ Line 1,490: / Line 1,679: @@
              </div>
              <div class="modal-body">
                  <div >
                      <h3>Description:</h3>
@@ Line 1,502: / Line 1,691: @@
                  <div>
-                     <img style="width: 100%" src="./img/attribution-banner-small.jpg" alt="" data-action="zoom">
+                     <img style="width: 100%" src="https://2019.igem.org/wiki/images/1/18/T--SZU-CHINA--IHP_4_2.jpg" alt="" data-action="zoom">
                  </div>
@@ Line 1,529: / Line 1,718: @@
              </div>
              <div class="modal-body">
                  <div >
                      <h3>Description:</h3>
@@ Line 1,543: / Line 1,732: @@
                      <p>We re-screened the essential metabolism related gene from the transcript of M. micrantha.
                          For a detailed interview, please see:</p>
-                    <h4>The second generation：RNAi nanoparticle</h4>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-default"
+                        data-dismiss="modal">Close
+                </button>
+            </div>
+        </div><!-- /.modal-content -->
+    </div><!-- /.modal-dialog -->
+</div><!-- /.modal -->
+<div class="modal fade" id="myModalSecond" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal"
+                        aria-hidden="true">×
+                </button>
+                <h3 class="modal-title" >
+                    The second generation：RNAi nanoparticle
+                </h3>
+            </div>
+            <div class="modal-body">
+                <div >
                      <p>We developed a second-generation product, RNAi nanoparticle, based on the target genes we selected of the first generation. This self-assembled nanoparticle consisting of about half-million small fragment siRNA can be transcribed outside the organism and mass produced. It seems that this time we have found an excellent solution.</p>
                      <p>However, during the CCIC meetup, our product was pointed out to have a fatal flaw: price. Due to the need of expensive T7 RNA polymerase during the rolling circle transcription, the final price of our products remains unacceptable high and there is no market competitiveness.</p>
                      <p>Because of this, we decided to transfer the production of RNAi molecules to genetically modified E. coli.</p>
                  </div>
@@ Line 1,576: / Line 1,797: @@
              </div>
              <div class="modal-body">
                  <div >
                      <h3>Description:</h3>
@@ Line 1,611: / Line 1,832: @@
              </div>
              <div class="modal-body">
                  <div >
                      <h3>Description:</h3>
@@ Line 1,627: / Line 1,848: @@
                  <div>
-                     <img style="width: 100%" src="./img/attribution-banner-small.jpg" alt="" data-action="zoom">
+                     <img style="width: 100%" src="https://2019.igem.org/wiki/images/6/6e/T--SZU-CHINA--IHP_5.jpg" alt="" data-action="zoom">
                  </div>
@@ Line 1,654: / Line 1,875: @@
              </div>
              <div class="modal-body">
                  <div >
                      <h3>Description:</h3>
@@ Line 1,669: / Line 1,890: @@
                  <div>
-                     <img style="width: 100%" src="./img/attribution-banner-small.jpg" alt="" data-action="zoom">
+                     <img style="width: 100%" src="https://2019.igem.org/wiki/images/1/13/T--SZU-CHINA--IHP_6.jpg" alt="" data-action="zoom">
                  </div>
@@ Line 1,696: / Line 1,917: @@
              </div>
              <div class="modal-body">
                  <div >
                      <h3>Description:</h3>
@@ Line 1,712: / Line 1,933: @@
                  <div>
-                     <img style="width: 100%" src="./img/attribution-banner-small.jpg" alt="" data-action="zoom">
+                     <img style="width: 100%" src="https://2019.igem.org/wiki/images/8/89/T--SZU-CHINA--IHP_7.jpg" alt="" data-action="zoom">
+                    <img style="width: 100%" src="https://2019.igem.org/wiki/images/9/91/T--SZU-CHINA--IHP_8.jpg" alt="" data-action="zoom">
                  </div>
@@ Line 1,739: / Line 1,961: @@
              </div>
              <div class="modal-body">
                  <div >
                      <h3>Description:</h3>
@@ Line 1,753: / Line 1,975: @@
                  <div>
-                     <img style="width: 100%" src="./img/attribution-banner-small.jpg" alt="" data-action="zoom">
+                     <img style="width: 100%" src="https://2019.igem.org/wiki/images/2/21/T--SZU-CHINA--IHP_9.jpg" alt="" data-action="zoom">
+                    <img style="width: 100%" src="https://2019.igem.org/wiki/images/f/f1/T--SZU-CHINA--IHP_10.jpg" alt="" data-action="zoom">
                  </div>
@@ Line 1,780: / Line 2,003: @@
              </div>
              <div class="modal-body">
                  <div >
                      <h3>Description:</h3>
@@ Line 1,817: / Line 2,040: @@
              </div>
              <div class="modal-body">
                  <div >
                      <h3>Description:</h3>
@@ Line 1,828: / Line 2,051: @@
                      <p>We conducted drone tests based on the distribution diagram they provided.</p>
                  </div>
+                <div>
+                    <img style="width: 100%" src="https://2019.igem.org/wiki/images/7/77/T--SZU-CHINA--IHP_11.jpg" alt="" data-action="zoom">
+                    <img style="width: 100%" src="https://2019.igem.org/wiki/images/f/f1/T--SZU-CHINA--IHP_12.jpg" alt="" data-action="zoom">
+                    <img style="width: 100%" src="https://2019.igem.org/wiki/images/1/1e/T--SZU-CHINA--IHP_13.jpg" alt="" data-action="zoom">
+                </div>
@@ Line 2,031: / Line 2,258: @@
      });
 </script>
-    <script id="mapPage">
+<script id="mapPage">
-        $( document ).ready( function() {
+    $( document ).ready( function() {
-            //全图状态下定位
+        //position on 1166px
-            var defaultMaps = [
+        var defaultMaps = [
-                [661,248,1026,353],
+            [661,248,1026,353],
-                [257,356,484,443],
+            [257,356,484,443],
-                [653,460,898,558],
+            [653,460,898,558],
-                [256,559,488,668],
+            [256,559,488,668],
-                [666,712,980,793],
+            [666,712,980,793],
-                [86,811,491,926],
+            [86,811,491,926],
-                [664,1345,978,1465],
+            [177,953,998,1327],
-                [204,1458,490,1552],
+            [664,1345,978,1465],
-                [658,1549,924,1656],
+            [204,1458,490,1552],
-                [123,1652,488,1754],
+            [658,1549,924,1656],
-                [660,1750,978,1863],
+            [123,1652,488,1754],
-                [116,1860,489,1959],
+            [660,1750,978,1863],
-                [657,1937,1096,2046],
+            [116,1860,489,1959],
-                [154,2090,489,2192],
+            [657,1937,1096,2046],
-                [647,2622,924,2724],
-                [168,2756,478,2860],
-                [640,2855,932,2967],
-                [240,3021,477,3112],
-                [641,3175,869,3276],
-                [157,3295,476,3393],
-                [638,3410,1090,3524],
-                // 163,3299,479,3391
+            [154,2090,489,2192],
-                //
+            [197,2234,965,2583],
-                // 648,3414,1088,3521
+            [647,2622,924,2724],
-                // 412,2176,692,2249
+            [168,2756,478,2860],
-                // 641,3406,1085,3532
+            [640,2855,932,2967],
-             ];
+            [240,3021,477,3112],
+            [641,3175,869,3276],
+             [157,3295,476,3393],
+            [638,3410,1090,3524],
-             var areas = document.querySelectorAll('area');
+             // 163,3299,479,3391
-             for (var m = 0; m < areas.length; m++) {
+             //
-                areas[m]
+             // 648,3414,1088,3521
-             }
+             // 412,2176,692,2249
-             console.log(areas[0].coords);
+             // 641,3406,1085,3532
-            console.log(areas.length);
+        ];
-             // 图片地址
-            var img_url = '关于.png'
-             // 创建对象
+        var areas = document.querySelectorAll('area');
-            var img = new Image()
+        for (var m = 0; m < areas.length; m++) {
+             areas[m]
+        }
+        console.log(areas[0].coords);
+        console.log(areas.length);
+        // 图片地址
+        var img_url = '关于.png'
-            // 改变图片的src
+        // 创建对象
-            img.src = 'https://2019.igem.org/wiki/images/1/1e/T--SZU-CHINA--hpPage2.jpg'
+        var img = new Image()
-            // 加载完成执行
+        // 改变图片的src
-            img.onload = function(){
+        img.src = 'https://2019.igem.org/wiki/images/1/1e/T--SZU-CHINA--hpPage2.jpg'
-                // 打印
-                var cuWidth = parseInt($('#mapImg').css('width')) ;
+        // 加载完成执行
-                console.log("cp:"+cuWidth);
+        img.onload = function(){
-                var cp = cuWidth / 1166 ;
+            // 打印
-                console.log("cp:"+cp);
+            var cuWidth = parseInt($('#mapImg').css('width')) ;
-                console.log( img.width );
+            console.log("cp:"+cuWidth);
-                for (var i = 0; i < defaultMaps.length; i++) {
+            var cp = cuWidth / 1166 ;
-                    for (var n = 0; n < defaultMaps[i].length; n++) {
+            console.log("cp:"+cp);
-                        console.log(defaultMaps[i][n]);
+            console.log( img.width );
-                        defaultMaps[i][n] = defaultMaps[i][n] * cp;
+            for (var i = 0; i < defaultMaps.length; i++) {
-                        console.log(defaultMaps[i][n]);
+                for (var n = 0; n < defaultMaps[i].length; n++) {
+                    console.log(defaultMaps[i][n]);
+                    defaultMaps[i][n] = defaultMaps[i][n] * cp;
+                    console.log(defaultMaps[i][n]);
-                    }
-                    areas[i].setAttribute('coords',defaultMaps[i]);
                  }
+                areas[i].setAttribute('coords',defaultMaps[i]);
+            }
-            };
+        };
-        })
+    })
-    </script>
+</script>
 <script src='https://2019.igem.org/Template:SZU-China/TweenMaxminjs?action=raw&ctype=text/javascript'></script>
@@ Line 2,105: / Line 2,335: @@
 <script src='https://2019.igem.org/Template:SZU-China/debugaddIndicatorsminjs?action=raw&ctype=text/javascript'></script>
 <script src='https://2019.igem.org/Template:SZU-China/animationgsapminjs?action=raw&ctype=text/javascript'></script>
-    <!--<script src="js/jquery-2.2.4.min.js"></script>-->
+<!--<script src="js/jquery-2.2.4.min.js"></script>-->
-    <!--<script src="js/bootstrap.min.js"></script>-->
+<!--<script src="js/bootstrap.min.js"></script>-->
-    <!--<script type="text/javascript" src="js/zooming.js"></script>-->
+<!--<script type="text/javascript" src="js/zooming.js"></script>-->
 </div>
 </body>
 </html>

Latest revision as of 10:22, 19 October 2019

TEAM

PROJECT

PARTS

HUMAN PRACTICES

Education & Engagement

AWARDS

Team
Project
- Description
- Demonstration
- Software
- Measurement
- Product
- Application
- Safety
- Prospect
Experiment
- Design
- Experiment
- Results
- Iteration
- Parts
- Notebook
Models
Human Pratices
Applet
Awards

template

Integrated
Human Practices

Background research

Community

Expert

Companies & partner

Click on the different sections of the image to learn more

Test

Exam

Test

Back

Kick off presentation （March）

Description:

We held the Kick off presentation at the beginning of March, and each team member shared their ideas on this year's iGEM competition. Among them, the idea of using synthetic biology to eliminate the famous invasive species - Mikania micrantha in Shenzhen has attracted everyone's attention.

Input:

We had a lot of discussions on environment protection and ecology restoration.

After sharing knowledge about invasive species, we were saddened by the destruction of the invasive species to the ecosystem.

Alteration:

We decided to develop a bioherbicide for Mikania micrantha

Brainstorm I（March）

Description:

We have arranged a brainstorm with our advisers, delved into the possibilities of developing bioherbicides and began looking for a solution to this problem from a professional perspective.

Input:

We learned about small RNA and RNAi interference from the instructor Prof. Beixin Mo. The RNAi can specifically silence target genes, and have the potential to develop into a biological herbicide

Alteration:

We decided to use the most common RNAi molecule- dsRNA, to silence target genes of Mikania micrantha in order to achieve our goal of killing Mikania micrantha specifically.

Agricultural Genomics Institute at Shenzhen, CAAS (April)

Description:

The Agricultural Genomics Institute at Shenzhen, Chinese Academy of Agricultural Science（AGIS-CAAS）established in 2014，is a national institute specializing in agricultural genomics research in China.

We contacted Dr. Fan Wei, a researcher at AGIS-CAAS. He has long been engaged in genomics and bioinformatics research, and has deep knowledge in the field of bioinformatics algorithm development such as genome assembly, gene annotation, and mutation detection. Dr. Fan Wei was very interested in our project and decided to help us.

Input:

Fan Wei and the institute provided us with the whole genome of Mikania micrantha. These data are currently not publicly available.

Alteration:

The whole genome of Mikania micrantha allows us to conduct more comprehensive genetic screening.

The whole genome includes genomes of different organs of Mikania micrantha, such as the genome of its leaves. Then we learnt how to find the specific gene that can be used as a target gene to silence.

Dr. Bo Song（April）

Description:

Dr. Song Bo, Dr. Song Bo, researcher, working at AGIS-CAAS, engaged in genomics research, rich in plant genomics research experience.

Input:

Suggest that we look for genes based on the way we apply Recommended us select multiple genes with higher expression levels in the transcriptome for mixed application.

Gives a more efficient genetic screening program

Alteration:

We will look for the target gene of the leaves in the transcriptome, as we will spray the leaves of Mikania micrantha with our herbicide.

we used transcriptome analysis with reference genome method to select our target gene from transcriptome data

Test field of CAAS, Shenzhen and BGI（April)

Description:

The AGIS-CAAS and Beijing Genomics Institute (BGI); established the largest experimental field in Yantian, Shenzhen, for selection of crops. We believe that their experimental fields have great reference value for our future experiment.

Input:

Show us the agricultural drone from DJI and how it works Let us know the safety regulations of the experimental field to ensure that foreign genes are not leaked.

Alteration:

We decided to develop an agricultural drone with special function by ourselves.

We have improved the design of the experimental field.

Shenzhen Clear Mikania micrantha Co.,Ltd.

Description:

Shenzhen Clear Mikania micrantha Co.,Ltd. Is the developer of the only chemical herbicide on the market for Mikania micrantha. Their product is called Mieweijing, and the active ingredient is 2,4-D. It is a commonly used plant growth regulator.

They are very interested in our idea of using the RNAi mechanism to eliminate Mikania micrantha and provided us many useful advises.

Input:

Provided us the effect report of their product.

They shared some experiences related to herbicide development with us.

Introduced us detergent which can increase the surface area of the herbicide attached to the plant to increase the effect.

Alteration:

Obtained some information of chemical herbicide to facilitate comparison experiments We decided to add detergent to our product

The first generation：dsRNA

We screened several genes from the transcriptome of Mikania micrantha obtained from the Genomics Institute and designed them into dsRNA sequences.

However, in subsequent experiments we found that there are many problems with dsRNA. dsRNA is low in specificity and poorly effective

We are trying to improve dsRNA and also start looking for alternatives.

Neilingding Island Nature Reserve（MAY）

Description:

In order to learn more about the harm of Mikania micrantha, we went to the Neilingding Island Nature Reserve for an investigation.

Neilingding Island Nature Reserve is one of the smallest national nature reserves in China. It is located on the west side of Shenzhen, on a small island on the Pearl River Estuary, Preserved an intact south Asian subtropical evergreen broad-leaved forest.

There are many kinds of plants on the island, including 619 kinds of vascular plants. Among them, white cassia and wild lychee are the national key protected plants. Wildlife resources are also very rich. There are as many as 900 macaques on the island, as well as key protected animals such as otters, pangolins, black kite, pythons and tiger frogs.

But in the middle and late last century, for the unknown reasons, Mikania micrantha was introduced into Neilingding Island and spread rapidly on the island. Mikania micrantha entwined tall trees, sheltering low bushes, and killed the main food of the island's macaques- plantains, which caused a sharp decline in the number of wild animals such as macaques on the island. It can be said that the invasion of Mikania micrantha completely changed the harmonious ecosystem on the island.

For this reason, we chose Neilingding Island as a typical Mikania invasive site for background investigation, hoping to get inspiration from it.

Input:

Collected the local plants sample of the island

Understood the harm of Mikania micrantha to wild animals

Understood the destruction of Mikania micrantha on the ecosystem

Alteration:

Expanded our background knowledge

The tragic status of other creatures on the island inspired us determined to develop Micrancide

Provided a data foundation for our simulation experiments

For more details of Neilingding Island, please see our documentary.

Dr. Pingping Wei （May

Description:

Dr. Wei Pingping is a Ph.D. student at Shenzhen University, majoring in ecology. She was studying at Neilingding Island and she was quite familiar with the situation of plants on the island.

Input:

Provided the distribution diagram of Mikania micrantha on Neilingding Island

Explain the principle of biological control method for preventing Mikania micrantha

Alteration:

Expanded our background knowledge

Understood the harm of Mikania micrantha

For a detailed interview, please see:

Brainstorm II (June)

Description:

We discussed the existing issues of dsRNA. In the discussion of poor application of dsRNA, one of the team members proposed using nanomaterials to assist dsRNA into plants. This idea gave us some new inspiration.

Input:

We looked for some papers on nanomaterials and RNAi, and finally got one: a self-assembled RNAi nanoparticle can carry a large amount of siRNA and is easily absorbed by cells.

Alteration:

We began to synthesize our self-designed RNAi nanoparticles.

Professor Shengli Tian (June)

Description:

Director of the Department of Biotechnology, Shenzhen University, master's tutor. He has extensive research experience in molecular biology and genetic engineering.

Input:

It is recommended to add positively charged ions or a DNA strand modified with cholesterol to attenuate the repulsive force of plant cell membranes on RNAi nanoparticles.；

Alteration:

We decided to use Ca2+ to neutralize the strong negative charge of the RNAi molecule.

Prof. Xuemei Chen (July)

Description:

Biologist, a member of the US National Academy of Sciences, Professor of the University of California, Riverside. The main research contents are microRNA and floral organ development, including the use of microRNA to analyze plant developmental mechanisms, and Arabidopsis as a model to study stem cell regulation mechanisms.

Input:

She suggested adjusting the concentration ratio of circular DNA to T7 RNA polymerase to increase the synthesis efficiency of RNAi nanoparticles

Corrected our misunderstanding of the RNAi mechanism

Alteration:

We set different concentration of T7 RNA polymerase to find out the best synthesis method. Expanded our knowledge of RNAi mechanism

Shenzhen Wildlife Protection and Management Office（July）

Description:

Shenzhen Wildlife Protection and Management Office is a department directly under the Shenzhen Urban Administration. It is responsible for the protection and management of forestry resources and forestry environment, and organizes the investigation, monitoring and evaluation of forestry ecological environmental protection. It is also the department responsible for organizing and implementing the prevention, quarantine and forecasting of forestry pests in Shenzhen.

Input:

Provided the distribution diagram of Mikania micrantha in Shenzhen

Provided the infested area of Mikania micrantha in Shenzhen

Show us how to monitor the infested area of Mikania micrantha by satellite remote sensing technology

Alteration:

Make us have a more intuitive understanding of the disaster situation of mikania micrantha in shenzhen

The use of GPS positioning and satellite remote sensing to create a distribution map of Mikania micrantha has attracted our interest. We intend to add this function to our drones.

Fairylake Botanical Garden （August）

Description:

Established in 1983, Fairylake Botanical Garden is located in Luohu, Shenzhen. It is a multi-functional landscape garden integrating plant scientific research, rare species preservation, education and sightseeing. The Botanical Garden is also the only professional institution in Shenzhen that conducts basic research in botany and conducts research on the conservation and utilization of plant diversity.

Input:

Promised us a test field for future experiment

Alteration:

Got the information of the existing chemical herbicides, so that we can compare the effects of the products.

Dr. Shouzhou Zhang （August）

Description:

Botanist, deputy director of Fairylake Botanical Garden, secretary of the institute academic committee. He has a very deep understanding of the invasion of Mikania micrantha in Shenzhen, and has repeatedly presided over the removel of Mikania micrantha in the Botanical Garden.

Input:

The history of Mikania micrantha invading Shenzhen, including invasive land, invasion time, diffusion speed, and historical maximum diffusion area

Provided the botanical characteristics of Mikania micrantha

Provided the damage of Mikania micrantha on the green space in Shenzhen (especially the destruction of the botanical garden)

He suggested that we should develop our herbicide target to its rapid growth.

Alteration:

Expanded our knowledge of Mikania micrantha

Provided a lot of useful information about the expansion of Mikania

We re-screened the essential metabolism related gene from the transcript of M. micrantha. For a detailed interview, please see:

The second generation：RNAi nanoparticle

We developed a second-generation product, RNAi nanoparticle, based on the target genes we selected of the first generation. This self-assembled nanoparticle consisting of about half-million small fragment siRNA can be transcribed outside the organism and mass produced. It seems that this time we have found an excellent solution.

However, during the CCIC meetup, our product was pointed out to have a fatal flaw: price. Due to the need of expensive T7 RNA polymerase during the rolling circle transcription, the final price of our products remains unacceptable high and there is no market competitiveness.

Because of this, we decided to transfer the production of RNAi molecules to genetically modified E. coli.

Dr. Fangfang Xu (August)

Description:

Dr. Fangfang Xu is a microbiology teacher at Shenzhen University, studies algae and microbes.

Input:

She suggested that we could synthesize the RNAi nanoparticles in vivo by inducing the bacteria to produce T4 DNA ligase and T7 RNA polymerase.

Alteration:

The efficiency of synthesize RNAi nanoparticle in E. coli was unpredictable, but this idea inspired us to carry out further synthesis experiments on engineering bacteria.

Dr. Boxiang Wang （August）

Description:

Biologist, PI of iGEM team Great Bay China, has many years of experience in synthetic biology research and development. We had a discussion with him on small RNA and biological data modeling.

Input:

Introduced the synergy between different RNAi molecules

Suggested us to construct the model of the leaves etiolation to characterize the gene expression level.

He mentioned some studies have shown that small RNA molecules can be more stable to exist and easy to be absorbed

Alteration:

Applying multiple different RNAi molecules to Mikania micrantha (inspired by Cocktail therapy)

Designed the related program on scanning the etiolation of leaves, as well as the basic plan on building the related model.

Mr. Zhiqiang Xie （August）

Description:

CEO of Cloudroom Technology Co., Ltd. The company specializes in real-time video conferencing and visual recognition. They have extensive experience in SDK development and visual identification.

Input:

Introduced us the software development kit (SDK)

He recommended that we use SDK for drone development and helped us understand the functions of the various parts of the drone

Improved our recognition program

Alteration:

We decided to use the SDK to embed our recognition program on the existing drone instead of designing new drone

Started looking for potential partners to help us develop drones

RobotPilot （August）

Description:

The RobotPilots Robot Club of Shenzhen University is the first technical club of Shenzhen University to participate in robotics events. The club has won numerous awards in the China National Robotics Competition (RoboMaster). They have a lot of experience in the development of robots and drones, and also very interested in our project. Therefore, we worked together to develop the drone.

Input:

Provided DIY herbicide spray peripherals

Taught us to plant our identification and positioning program into the micro-computer of the drone.

Help us convert the signal of the recognition program into a spray instruction

Guide us to conduct flight tests of the drones

Alteration:

Guided us to complete the development of the drone

We decided our flight guidelines

Dr. Bin Jia （September）

Description:

Dr. Bin Jia is an assistant professor at Shenzhen University, responsible for teaching fermentation engineering. He has extensive experience in microbial fermentation.

Input:

Shown us the production line of fermentation engineering

Introduced us about the principles and procedure of microbial fermentation

Introduced us about the separation method of nucleic acid products

Alteration:

Help us complete the design of the production line

Prof. Lijun Zhang （September）

Description:

Professor of Shenzhen Polytechnic College, engaged in teaching and research of molecular biology. She is also the PI of SZPT-China.

Input:

suggested us to use Northern Blot to detect the siRNA inside the plants.

Alteration:

We decided to use a variety of methods to detect siRNA in plants.

Fight GREEN for More Green （September）

Description:

In order to help students on our school and citizens to better understand Mikania micrantha, we held a volunteer activity called “Fight GREEN for More Green ” on the Moon Ridge of Shenzhen University's Xili Campus. We led the spontaneous environmental volunteers to remove Mikania micrantha from the seriously affected orchard and taught them to use our applet to identify Mikania micrantha.

Input:

Left a lot of comments on our little program

Provided us with the effect of manually removing Mikania micrantha

Alteration:

They identified and located a large number of Mikania micrantha on campus, and created the Mikania micrantha distribution diagram on campus through the applet.

We conducted drone tests based on the distribution diagram they provided.

Difference between revisions of "Team:SZU-China/IntegratedHP"

Latest revision as of 10:22, 19 October 2019

Integrated Human Practices

Background research

Community

Expert

Companies & partner

Click on the different sections of the image to learn more

Integrated
Human Practices