Difference between revisions of "Team:HFUT-China/User guide"

 
(25 intermediate revisions by 3 users not shown)
Line 14: Line 14:
 
             background: #f7f5e6;
 
             background: #f7f5e6;
 
         }
 
         }
         .q{
+
 
 +
         .q {
 
             font-size: 20px;
 
             font-size: 20px;
 +
        }
 +
 +
        .image {
 +
            box-shadow: 0px 3px 19px #ddd;
 +
            margin-top: 60px;
 +
            margin-bottom: 20px;
 +
            border-radius: 20px;
 
         }
 
         }
 
     </style>
 
     </style>
Line 21: Line 29:
  
 
<center>
 
<center>
<div class="header" style="z-index:999;position:absolute">
+
    <div class="header" style="z-index:999; position:fixed;left:0px;top:16px;">
  <ul class="nav">
+
        <ul class="nav">
    <li><a href="https://2017.igem.org/Team:HFUT-China">&nbsp;&nbsp;Main page&nbsp;&nbsp;</a></li>
+
            <li>
    <li><a href="https://2017.igem.org/Team:HFUT-China/Description">&nbsp;&nbsp;Project&nbsp;<img src="https://static.igem.org/mediawiki/2017/5/53/Xia.png" width="12px";>&nbsp;&nbsp;</a>
+
                <a href="https://2017.igem.org/Team:HFUT-China">&nbsp;&nbsp;Main page&nbsp;&nbsp;</a>
            <ul>
+
            </li>
          <li class="selfnav hef"><a href="https://2017.igem.org/Team:HFUT-China/Description"><font class="hef">Description</font></a></li>
+
            <li>
          <li class="selfnav hef"><a href="https://2017.igem.org/Team:HFUT-China/Design"><font class="hef">Design</font></a></li>
+
                <a href="https://2017.igem.org/Team:HFUT-China/Description">&nbsp;&nbsp;Project&nbsp;
          <li class="selfnav hef"><a href="https://2017.igem.org/Team:HFUT-China/Contribution"><font class="hef">Contribution</font></a></li>
+
                    <img src="https://static.igem.org/mediawiki/2017/5/53/Xia.png" width="12px" ;>&nbsp;&nbsp;</a>
          <li class="selfnav hef"><a href="https://2017.igem.org/Team:HFUT-China/Demonstrate"><font class="hef">Demonstrate</font></a></li>
+
                <ul>
      </ul>
+
                    <li class="selfnav hef">
    </li>
+
                        <a href="https://2017.igem.org/Team:HFUT-China/Description">
    <li><a href="https://2017.igem.org/Team:HFUT-China/Software">&nbsp;&nbsp;Software&nbsp;<img src="https://static.igem.org/mediawiki/2017/5/53/Xia.png" width="12px";>&nbsp;&nbsp;</a>
+
                            <font class="hef">Description</font>
        <ul>
+
                        </a>
<li class="selfnav"><a href="https://2017.igem.org/Team:HFUT-China/Software"><font class="hef" color="#000">Software</font></a></li>
+
                    </li>
        <li class="selfnav"><a href="https://2017.igem.org/Team:HFUT-China/Model"><font class="hef" color="#000">Model</font></a></li>
+
                    <li class="selfnav hef">
        <li class="selfnav"><a href="https://2017.igem.org/Team:HFUT-China/Improve"><font class="hef" color="#000">Improve</font></a></li>
+
                        <a href="https://2017.igem.org/Team:HFUT-China/Design">
        </ul>
+
                            <font class="hef">Design</font>
    </li>
+
                        </a>
    <li><a href="https://2017.igem.org/Team:HFUT-China/Notebook">&nbsp;&nbsp;Documents&nbsp;<img src="https://static.igem.org/mediawiki/2017/5/53/Xia.png" width="12px";>&nbsp;&nbsp;</a>
+
                    </li>
        <ul>
+
                    <li class="selfnav hef">
        <li class="selfnav"><a href="https://2017.igem.org/Team:HFUT-China/Notebook"><font class="hef" color="#000">Notebook</font></a></li>
+
                        <a href="https://2017.igem.org/Team:HFUT-China/Contribution">
        <li class="selfnav"><a href="https://2017.igem.org/Team:HFUT-China/Medals"><font class="hef" color="#000">Medals</font></a></li>
+
                            <font class="hef">Contribution</font>
<li class="selfnav"><a href="https://2017.igem.org/Team:HFUT-China/Safety"><font class="hef" color="#000">Safety</font></a></li>
+
                        </a>
        <li class="selfnav"><a href="https://2017.igem.org/Team:HFUT-China/User_guide"><font class="hef" color="#000">User guide</font></a></li>
+
                    </li>
        </ul>
+
                    <li class="selfnav hef">
    </li>
+
                        <a href="https://2017.igem.org/Team:HFUT-China/Demonstrate">
    <li><a href="https://2017.igem.org/Team:HFUT-China/Team">Team&nbsp;<img src="https://static.igem.org/mediawiki/2017/5/53/Xia.png" width="12px";></a>
+
                            <font class="hef">Demonstrate</font>
        <ul>
+
                        </a>
        <li class="selfnav"><a href="https://2017.igem.org/Team:HFUT-China/Team"><font class="hef" color="#000">Members</font></a></li>
+
                    </li>
<li class="selfnav"><a href="https://2017.igem.org/Team:HFUT-China/Attributions"><font class="hef" color="#000">Attributions</font></a></li>
+
                </ul>
        <li class="selfnav"><a href="https://2017.igem.org/Team:HFUT-China/Collaborations"><font class="hef" color="#000">Collaborations</font></a></li>
+
            </li>
     
+
            <li>
        </ul>
+
                <a href="https://2017.igem.org/Team:HFUT-China/Software">&nbsp;&nbsp;Software&nbsp;
    </li>
+
                    <img src="https://static.igem.org/mediawiki/2017/5/53/Xia.png" width="12px" ;>&nbsp;&nbsp;</a>
    <li><a href="#">&nbsp;&nbsp;Human practice&nbsp;<img src="https://static.igem.org/mediawiki/2017/5/53/Xia.png" width="12px";>&nbsp;&nbsp;</a>
+
                <ul>
<ul>
+
                    <li class="selfnav">
        <li class="selfnav"><a href="https://2017.igem.org/Team:HFUT-China/HP/Silver"><font class="hef" color="#000">Silver HP</font></a></li>
+
                        <a href="https://2017.igem.org/Team:HFUT-China/Software">
        <li class="selfnav"><a href="https://2017.igem.org/Team:HFUT-China/HP/Gold_Integrated"><font class="hef" color="#000">Integrated<br>and Gold</font></a></li>
+
                            <font class="hef" color="#000">Software</font>
        </ul>
+
                        </a>
    </li>
+
                    </li>
  </ul>
+
                    <li class="selfnav">
</div>
+
                        <a href="https://2017.igem.org/Team:HFUT-China/Model">
 +
                            <font class="hef" color="#000">Model</font>
 +
                        </a>
 +
                    </li>
 +
                    <li class="selfnav">
 +
                        <a href="https://2017.igem.org/Team:HFUT-China/Improve">
 +
                            <font class="hef" color="#000">Improve</font>
 +
                        </a>
 +
                    </li>
 +
                    <li class="selfnav">
 +
                        <a href="https://2017.igem.org/Team:HFUT-China/Unit_Test">
 +
                            <font class="hef" color="#000">Unit Test</font>
 +
                        </a>
 +
                    </li>
 +
                </ul>
 +
            </li>
 +
            <li>
 +
                <a href="https://2017.igem.org/Team:HFUT-China/Notebook">&nbsp;&nbsp;Documents&nbsp;
 +
                    <img src="https://static.igem.org/mediawiki/2017/5/53/Xia.png" width="12px" ;>&nbsp;&nbsp;</a>
 +
                <ul>
 +
                    <li class="selfnav">
 +
                        <a href="https://2017.igem.org/Team:HFUT-China/Notebook">
 +
                            <font class="hef" color="#000">Notebook</font>
 +
                        </a>
 +
                    </li>
 +
                    <li class="selfnav">
 +
                        <a href="https://2017.igem.org/Team:HFUT-China/Medals">
 +
                            <font class="hef" color="#000">Medals</font>
 +
                        </a>
 +
                    </li>
 +
                    <li class="selfnav">
 +
                        <a href="https://2017.igem.org/Team:HFUT-China/Safety">
 +
                            <font class="hef" color="#000">Safety</font>
 +
                        </a>
 +
                    </li>
 +
                    <li class="selfnav">
 +
                        <a href="https://2017.igem.org/Team:HFUT-China/User_guide">
 +
                            <font class="hef" color="#000">User guide</font>
 +
                        </a>
 +
                    </li>
 +
                </ul>
 +
            </li>
 +
            <li>
 +
                <a href="https://2017.igem.org/Team:HFUT-China/Team">Team&nbsp;
 +
                    <img src="https://static.igem.org/mediawiki/2017/5/53/Xia.png" width="12px" ;>
 +
                </a>
 +
                <ul>
 +
                    <li class="selfnav">
 +
                        <a href="https://2017.igem.org/Team:HFUT-China/Team">
 +
                            <font class="hef" color="#000">Members</font>
 +
                        </a>
 +
                    </li>
 +
                    <li class="selfnav">
 +
                        <a href="https://2017.igem.org/Team:HFUT-China/Attributions">
 +
                            <font class="hef" color="#000">Attributions</font>
 +
                        </a>
 +
                    </li>
 +
                    <li class="selfnav">
 +
                        <a href="https://2017.igem.org/Team:HFUT-China/Collaborations">
 +
                            <font class="hef" color="#000">Collaborations</font>
 +
                        </a>
 +
                    </li>
 +
 
 +
                </ul>
 +
            </li>
 +
            <li>
 +
                <a href="https://2017.igem.org/Team:HFUT-China/HP/Silver">&nbsp;&nbsp;Human practice&nbsp;
 +
                    <img src="https://static.igem.org/mediawiki/2017/5/53/Xia.png" width="12px" ;>&nbsp;&nbsp;</a>
 +
                <ul>
 +
                    <li class="selfnav">
 +
                        <a href="https://2017.igem.org/Team:HFUT-China/HP/Silver">
 +
                            <font class="hef" color="#000">Silver HP</font>
 +
                        </a>
 +
                    </li>
 +
                    <li class="selfnav">
 +
                        <a href="https://2017.igem.org/Team:HFUT-China/HP/Gold_Integrated">
 +
                            <font class="hef" color="#000">Integrated
 +
                                <br>and Gold</font>
 +
                        </a>
 +
                    </li>
 +
                </ul>
 +
            </li>
 +
            <li>
 +
                <a href="https://igem.org/2017_Judging_Form?id=2466" target="blank">&nbsp;&nbsp;Judging Form&nbsp;&nbsp;</a>
 +
            </li>
 +
        </ul>
 +
    </div>
 
     <div style="height:160px"></div>
 
     <div style="height:160px"></div>
 
     <div class="title">
 
     <div class="title">
 
         <b>
 
         <b>
             <font color="#555555">User</font>&nbsp;
+
             <font color="#555555">User</font>&nbsp;<font color="#0089a7">Guide</font>
            <font color="#0089a7">Guide</font>
+
 
             <div class="subtitle">
 
             <div class="subtitle">
 
                 <a href="http://bio.measurex.top" target="blank" style=" text-decoration:none;">
 
                 <a href="http://bio.measurex.top" target="blank" style=" text-decoration:none;">
Line 73: Line 166:
 
                         <br>
 
                         <br>
 
                         <br>
 
                         <br>
                         <br>Click
+
                         <br>Click&nbsp;<span style="border-radius:6px;border: 2px solid #0089a7;padding:4px 10px 0 10px; margin:0 8px; color:#0089a7; text-align: center">here</span>&nbsp;to use our software ~ :p</font>
                        &nbsp;<font color="#0089a7" style="background:#f7f5e6;border-radius:6px;border: 2px solid #0089a7;padding:2px;">
+
                            here
+
                        </font> &nbsp;to use our software ~ :p</font>
+
 
                 </a>
 
                 </a>
 
             </div>
 
             </div>
 +
            <div class="subtitle">We made a video to show users how to operate in our system. This video can be found in <a href="https://2017.igem.org/Team:HFUT-China/Demonstrate">"Demonstrate"</a> page</div>
 
             <div class="p">
 
             <div class="p">
 
                 <div class="q" style="line-height: 2.5;">
 
                 <div class="q" style="line-height: 2.5;">
                 
+
 
                  <center> <br>Open your browser and input address <a href="http://bio.measurex.top " style="color:#0089a7"><b>http://bio.measurex.top</b></a> and you will be redirected to our website. </center>
+
                    <center>
 +
                        <br>Open your browser and input address
 +
                        <a href="http://bio.measurex.top " style="color:#0089a7">
 +
                            <b>http://bio.measurex.top</b>
 +
                        </a> and you will be redirected to our website. </center>
 
                     <br>
 
                     <br>
                 
 
 
                     <center>
 
                     <center>
                         <img src="https://static.igem.org/mediawiki/2017/0/08/User_guide_img01.png">
+
                         <img class="image" src="https://static.igem.org/mediawiki/2017/0/08/User_guide_img01.png" width="60%">
 
                     </center>
 
                     </center>
 
                     <br>
 
                     <br>
 
                     <br>You can find links to pages which have functions mentioned above.
 
                     <br>You can find links to pages which have functions mentioned above.
                     <br><br>If you want to go back to the main page, “BioDesigner Dolphin” button on the top-left of the page will
+
                     <br>
 +
                    <br>If you want to go back to the main page, “BioDesigner Dolphin” button on the top-left of the page will
 
                     lead you to it.
 
                     lead you to it.
                     <br><br>You can find buttons on the top-right which lead to the functions aforementioned along with the login
+
                     <br>
 +
                    <br>You can find buttons on the top-right which lead to the functions aforementioned along with the login
 
                     and sign up buttons.
 
                     and sign up buttons.
                     <br><br>A page like the following one will jump out by clicking on the login button. You can login with your
+
                     <br>
 +
                    <br>A page like the following one will jump out by clicking on the login button. You can login with your
 
                     own login name and password. If you haven’t registered before, click the “Create account” to create an
 
                     own login name and password. If you haven’t registered before, click the “Create account” to create an
 
                     account for yourself.
 
                     account for yourself.
                     <br><br>
+
                     <br>
 
                     <center>
 
                     <center>
                    <img src="https://static.igem.org/mediawiki/2017/2/20/User_guide_img02.png">
+
                        <img class="image" src="https://static.igem.org/mediawiki/2017/2/20/User_guide_img02.png" width="60%">
 
                     </center>
 
                     </center>
                    <br><br>
 
 
                     <center>
 
                     <center>
                    <img src="https://static.igem.org/mediawiki/2017/1/15/User_guide_img03.png">
+
                        <img class="image" src="https://static.igem.org/mediawiki/2017/1/15/User_guide_img03.png" width="60%">
 
                     </center>
 
                     </center>
                     <br><br>The page will change to this as soon as you login:
+
                     <br>The page will change to this as soon as you login:
                    <br><br>
+
 
                     <center>
 
                     <center>
                         <img src="https://static.igem.org/mediawiki/2017/2/28/User_guide_img04.png" alt="">
+
                         <img class="image" src="https://static.igem.org/mediawiki/2017/2/28/User_guide_img04.png" width="30%" alt="">
 
                     </center>
 
                     </center>
                     <br><br>When you want to change password or log out, click the “user” button on the top-right.
+
                     <br>When you want to change password or log out, click the “user” button on the top-right.
 
                     <center>
 
                     <center>
                         <img src="https://static.igem.org/mediawiki/2017/a/a8/User_guide_img05.png" alt="">
+
                         <img class="image" src="https://static.igem.org/mediawiki/2017/a/a8/User_guide_img05.png" width="60%" alt="">
 
                     </center>
 
                     </center>
                    <br><br>
 
 
                     <center>
 
                     <center>
                         <img src="https://static.igem.org/mediawiki/2017/8/88/HFUT_user_guide_img06.png" alt="">
+
                         <img class="image" src="https://static.igem.org/mediawiki/2017/8/88/HFUT_user_guide_img06.png" width="60%" alt="">
 
                     </center>
 
                     </center>
                     <br><br>You can type in keywords in the search box on the main page. You can also select multiple tracks under
+
                     <br>
 +
                    <br>You can type in keywords in the search box on the main page. You can also select multiple tracks under
 
                     the box, which means the system will only search for best matches under these certain tracks. Selecting
 
                     the box, which means the system will only search for best matches under these certain tracks. Selecting
 
                     no tracks means searching under all tracks. You will be redirected to another page when the search button
 
                     no tracks means searching under all tracks. You will be redirected to another page when the search button
 
                     is clicked, and results will be listed on it.
 
                     is clicked, and results will be listed on it.
                     <br><br>
+
                     <br>
 
                     <center>
 
                     <center>
                         <img src="https://static.igem.org/mediawiki/2017/4/47/User_guide_img07.png" alt="">
+
                         <img class="image" src="https://static.igem.org/mediawiki/2017/4/47/User_guide_img07.png" width="60%" alt="">
 
                     </center>
 
                     </center>
                    <br><br>
 
 
                 </div>
 
                 </div>
                <!-- <img src="https://static.igem.org/mediawiki/2017/a/ae/Index.png" width="79%" style="box-shadow: 0px 3px 19px #ddd;margin-top:30px;border-radius:20px;"> -->
 
 
             </div>
 
             </div>
  
  
             <div style="margin-top: 90px;font-family: Light;">
+
             <div style="margin-top: 90px;font-family: good;">
 
                 <b>
 
                 <b>
                     <font color="#333" size="6px">
+
                     <font color="#6f7c91" size="6px">
 
                         <br>Search</font>
 
                         <br>Search</font>
 
                 </b>
 
                 </b>
Line 141: Line 234:
 
             <div class="p">
 
             <div class="p">
 
                 <div class="q" style="line-height: 2.5;">
 
                 <div class="q" style="line-height: 2.5;">
                     <br><br>You can find the search function on the main page. You don’t have to login when using this searching.
+
                     <br>
 +
                    <br>You can find the search function on the main page. You don’t have to login when using this searching.
 
                     Now, take the page below as an example:
 
                     Now, take the page below as an example:
                     <br><br>
+
                     <br>
 
                     <center>
 
                     <center>
                         <img src="https://static.igem.org/mediawiki/2017/6/62/User_guide_img08.png" alt="">
+
                         <img class="image" src="https://static.igem.org/mediawiki/2017/6/62/User_guide_img08.png" width="60%" alt="">
 
                     </center>
 
                     </center>
                    <!-- <center><img src="https://static.igem.org/mediawiki/2017/0/07/Gene.png" width="79%" style="box-shadow: 0px 3px 19px #ddd;margin-top:60px;border-radius:20px;"></center>  -->
+
                     <br>Clicking on the search button or pressing “Enter” lead to a redirection to the searching results page.
                     <br><br>Clicking on the search button or pressing “Enter” lead to a redirection to the searching results page.
+
 
                     This page have the same functions as the main page does. You are free to conduct a second search.
 
                     This page have the same functions as the main page does. You are free to conduct a second search.
                     <br><br>We listed teams which best match the keywords along with their team name, type, keywords, awards, biobricks
+
                     <br>
 +
                    <br>We listed teams which best match the keywords along with their team name, type, keywords, awards, biobricks
 
                     and summarized information. If you are looking for detailed information about a team, you can click on
 
                     and summarized information. If you are looking for detailed information about a team, you can click on
 
                     the team and the information will be shown.
 
                     the team and the information will be shown.
                     <br><br>We split the searching results into many pages in consideration of convenience. What’s more, a list of
+
                     <br>
 +
                    <br>We split the searching results into many pages in consideration of convenience. What’s more, a list of
 
                     recommended keywords for the next search is provided, and you search for it by clicking on it.
 
                     recommended keywords for the next search is provided, and you search for it by clicking on it.
                     <br><br>
+
                     <br>
 
                     <center>
 
                     <center>
                         <img src="https://static.igem.org/mediawiki/2017/d/d9/User_guide_img09.jpeg" alt="">
+
                         <img class="image" src="https://static.igem.org/mediawiki/2017/d/d9/User_guide_img09.jpeg" width="60%" alt="">
 
                     </center>
 
                     </center>
                    <br><br>
 
 
                     <center>
 
                     <center>
                         <img src="https://static.igem.org/mediawiki/2017/b/b3/User_guide_img10.png" alt="">
+
                         <img class="image" src="https://static.igem.org/mediawiki/2017/b/b3/User_guide_img10.png" width="60%" alt="">
 
                     </center>
 
                     </center>
                     <br><br>After clicking on a team, you will go to a page like this:
+
                     <br>After clicking on a team, you will go to a page like this:
                    <br><br>
+
 
                     <center>
 
                     <center>
                         <img src="https://static.igem.org/mediawiki/2017/c/ce/User_guide_img11.png" alt="">
+
                         <img class="image" src="https://static.igem.org/mediawiki/2017/c/ce/User_guide_img11.png" width="60%" alt="">
 
                     </center>
 
                     </center>
                     <br><br>In this page, detailed information are listed.
+
                     <br>In this page, detailed information are listed.
                     <br><br>On the left side of this page, we set an information guide list to provide a direct link to the information
+
                     <br>
 +
                    <br>On the left side of this page, we set an information guide list to provide a direct link to the information
 
                     you want.
 
                     you want.
                     <br><br>
+
                     <br>
 +
                    <br>
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
  
             <div style="margin-top: 90px;font-family: Light;">
+
             <div style="margin-top: 90px;font-family: good;">
 
                 <b>
 
                 <b>
                     <font color="#333" size="6px">Project</font>
+
                     <font color="#6f7c91" size="6px">Project</font>
 
                 </b>
 
                 </b>
 
             </div>
 
             </div>
Line 185: Line 280:
 
                 <div class="q" style="line-height: 2.5;">
 
                 <div class="q" style="line-height: 2.5;">
 
                     <br>Click on the "Project" button, and you will go to this page:
 
                     <br>Click on the "Project" button, and you will go to this page:
                    <br><br>
 
 
                     <center>
 
                     <center>
                         <img src="https://static.igem.org/mediawiki/2017/7/7b/User_guide_img12.png" alt="">
+
                         <img src="https://static.igem.org/mediawiki/2017/7/7b/User_guide_img12.png" width="60%" alt="">
 
                     </center>
 
                     </center>
                     <br><br> 1. Click on the “+” under “Project Editor” to create a project.
+
                     <br> 1. Click on the “+” under “Project Editor” to create a project.
                    <br><br>
+
 
                     <center>
 
                     <center>
                         <img src="https://static.igem.org/mediawiki/2017/f/fb/User_guide_img13.png" alt="">
+
                         <img class="image" src="https://static.igem.org/mediawiki/2017/f/fb/User_guide_img13.png" width="60%" alt="">
 
                     </center>
 
                     </center>
                     <br><br>2. After creating your project, the name of the project will appear on the top-left on the page.
+
                     <br>2. After creating your project, the name of the project will appear on the top-left on the page.
                    <br><br>
+
 
                     <center>
 
                     <center>
                         <img src="https://static.igem.org/mediawiki/2017/3/37/User_guide_img14.jpeg" alt="">
+
                         <img class="image" src="https://static.igem.org/mediawiki/2017/3/37/User_guide_img14.jpeg" width="60%" alt="">
 
                     </center>
 
                     </center>
                     <br><br>3. Then click on the “pencil” button under “Project Editor” can let you operate the project. Here create
+
                     <br>3. Then click on the “pencil” button under “Project Editor” can let you operate the project. Here create
 
                     two devices for example. Click on the “pencil” again can disable the modification function.
 
                     two devices for example. Click on the “pencil” again can disable the modification function.
                     <br><br>
+
                     <br>
 
                     <center>
 
                     <center>
                         <img src="https://static.igem.org/mediawiki/2017/8/8e/User_guide_img15.png" alt="">
+
                         <img class="image" src="https://static.igem.org/mediawiki/2017/8/8e/User_guide_img15.png" width="60%" alt="">
 
                     </center>
 
                     </center>
                    <br><br>
 
 
                     <center>
 
                     <center>
                         <img src="https://static.igem.org/mediawiki/2017/2/2b/User_guide_img16.png" alt="">
+
                         <img class="image" src="https://static.igem.org/mediawiki/2017/2/2b/User_guide_img16.png" width="60%" alt="">
 
                     </center>
 
                     </center>
                     <br><br>4. Choose “1” under “project_1”, and click on the “Design” button, then you will be redirected to the
+
                     <br>4. Choose “1” under “project_1”, and click on the “Design” button, then you will be redirected to the
 
                     design page.
 
                     design page.
                     <br><br>
+
                     <br>
 
                     <center>
 
                     <center>
                         <img src="https://static.igem.org/mediawiki/2017/8/85/User_guide_img17.png" alt="">
+
                         <img class="image" src="https://static.igem.org/mediawiki/2017/8/85/User_guide_img17.png" width="60%" alt="">
 
                     </center>
 
                     </center>
                     <br><br>You can drag biobricks from the left and drop them on the gene chain to assemble a gene chain. You can
+
                     <br>You can drag biobricks from the left and drop them on the gene chain to assemble a gene chain. You can
 
                     also search for biobricks using the search function located in the top-left of the page.
 
                     also search for biobricks using the search function located in the top-left of the page.
                     <br><br>
+
                     <br>
 
                     <center>
 
                     <center>
                         <img src="https://static.igem.org/mediawiki/2017/3/3b/User_guide_img18.jpeg" alt="">
+
                         <img class="image" src="https://static.igem.org/mediawiki/2017/3/3b/User_guide_img18.jpeg" width="60%" alt="">
 
                     </center>
 
                     </center>
                     <br><br>You can click the left button of your mouse to see the detailed information of biobricks, and the right
+
                     <br>You can click the left button of your mouse to see the detailed information of biobricks, and the right
 
                     button to choose to delete the biobrick (or drag the biobrick to the garbage can on the bottom-right
 
                     button to choose to delete the biobrick (or drag the biobrick to the garbage can on the bottom-right
 
                     of the page).
 
                     of the page).
                     <br><br>
+
                     <br>
 
                     <center>
 
                     <center>
                         <img src="https://static.igem.org/mediawiki/2017/9/91/User_guide_img19.png" alt="">
+
                         <img class="image" src="https://static.igem.org/mediawiki/2017/9/91/User_guide_img19.png" width="60%" alt="">
 
                     </center>
 
                     </center>
                     <br><br>5. After designing, click on the “Project” button again, and choose “1” under “project_1”, and you can
+
                     <br>5. After designing, click on the “Project” button again, and choose “1” under “project_1”, and you can
 
                     see the gene chain you just designed.
 
                     see the gene chain you just designed.
                     <br><br>
+
                     <br>
 
                     <center>
 
                     <center>
                         <img src="https://static.igem.org/mediawiki/2017/3/33/User_guide_img00.png" alt="">
+
                         <img class="image" src="https://static.igem.org/mediawiki/2017/3/33/User_guide_img00.png" width="60%" alt="">
 
                     </center>
 
                     </center>
                     <br><br>
+
                     <br>
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
  
             <div style="margin-top: 90px;font-family: Light;">
+
             <div style="margin-top: 90px;font-family: good;">
 
                 <b>
 
                 <b>
                     <font color="#333" size="6px">Gene Relationship</font>
+
                     <font color="#6f7c91" size="6px">Gene Relationship</font>
 
                 </b>
 
                 </b>
 
             </div>
 
             </div>
Line 246: Line 337:
 
             <div class="p">
 
             <div class="p">
 
                 <div class="q" style="line-height: 2.5;">
 
                 <div class="q" style="line-height: 2.5;">
                     <br><br>1. Click on the “Gene Relationship” button and you will see the page with gene relationships on it. System
+
                     <br>
 +
                    <br>1. Click on the “Gene Relationship” button and you will see the page with gene relationships on it. System
 
                     will allocate a gene to you randomly, and show its related genes. Click on any gene circles, and the
 
                     will allocate a gene to you randomly, and show its related genes. Click on any gene circles, and the
 
                     related genes will be shown.
 
                     related genes will be shown.
                     <br><br>
+
                     <br>
 
                     <center>
 
                     <center>
                         <img src="https://static.igem.org/mediawiki/2017/8/8d/User_guide_img20.png" alt="">
+
                         <img class="image" src="https://static.igem.org/mediawiki/2017/8/8d/User_guide_img20.png" width="60%" alt="">
 
                     </center>
 
                     </center>
                     <br><br> 2. Click the left button of the mouse on the line between two genes, and the relationship between them
+
                     <br> 2. Click the left button of the mouse on the line between two genes, and the relationship between them
 
                     will be shown. You also can see literatures or papers which contain this gene. Furthermore, you can get
 
                     will be shown. You also can see literatures or papers which contain this gene. Furthermore, you can get
 
                     papers about this gene at NCBI.
 
                     papers about this gene at NCBI.
                     <br><br>
+
                     <br>
 
                     <center>
 
                     <center>
                         <img src="https://static.igem.org/mediawiki/2017/6/6e/User_guide_img21.jpeg" alt="">
+
                         <img class="image" src="https://static.igem.org/mediawiki/2017/6/6e/User_guide_img21.jpeg" width="60%" alt="">
 
                     </center>
 
                     </center>
                    <br><br>
 
 
                     <center>
 
                     <center>
                         <img src="https://static.igem.org/mediawiki/2017/4/4d/User_guide_img22.jpeg" alt="">
+
                         <img class="image" src="https://static.igem.org/mediawiki/2017/4/4d/User_guide_img22.jpeg" width="60%" alt="">
 
                     </center>
 
                     </center>
                     <br><br>
+
                     <br>
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
  
             <div style="margin-top: 90px;font-family: Light;">
+
             <div style="margin-top: 90px;font-family: good;">
 
                 <b>
 
                 <b>
                     <font color="#333" size="6px">System</font>
+
                     <font color="#6f7c91" size="6px">System</font>
 
                 </b>
 
                 </b>
 
             </div>
 
             </div>
Line 276: Line 367:
 
             <div class="p">
 
             <div class="p">
 
                 <div class="q" style="line-height: 2.5;">
 
                 <div class="q" style="line-height: 2.5;">
                     <br><br>1. Click on the “System” and you will see the system recommendation page. You can input keywords about
+
                     <br>
 +
                    <br>1. Click on the “System” and you will see the system recommendation page. You can input keywords about
 
                     chemical compounds at the search box on the top-left. Then you can click “+” at compounds that you are
 
                     chemical compounds at the search box on the top-left. Then you can click “+” at compounds that you are
 
                     interested in.
 
                     interested in.
                     <br><br>
+
                     <br>
 
                     <center>
 
                     <center>
                         <img src="https://static.igem.org/mediawiki/2017/1/1c/User_guide_img23.png" alt="">
+
                         <img class="image" src="https://static.igem.org/mediawiki/2017/1/1c/User_guide_img23.png" width="60%" alt="">
 
                     </center>
 
                     </center>
                     <br><br> 2. Click on “You Tags”, you will see the compounds you just added. And click the “Run” button, you can
+
                     <br> 2. Click on “You Tags”, you will see the compounds you just added. And click the “Run” button, you can
 
                     see a relation graph between them.
 
                     see a relation graph between them.
                     <br><br>
+
                     <br>
 
                     <center>
 
                     <center>
                         <img src="https://static.igem.org/mediawiki/2017/1/1f/User_guide_img24.png" alt="">
+
                         <img class="image" src="https://static.igem.org/mediawiki/2017/1/1f/User_guide_img24.png" width="60%" alt="">
 
                     </center>
 
                     </center>
                    <br><br>
 
 
                     <center>
 
                     <center>
                         <img src="https://static.igem.org/mediawiki/2017/f/f5/User_guide_img25.png" alt="">
+
                         <img class="image" src="https://static.igem.org/mediawiki/2017/f/f5/User_guide_img25.png" width="60%" alt="">
 
                     </center>
 
                     </center>
                     <br><br>Click on the nodes on the canvas, and the corresponding information of genes or compounds will be shown
+
                     <br>Click on the nodes on the canvas, and the corresponding information of genes or compounds will be shown
 
                     on the right. If you want to delete all of the compounds, you can click on “Tag” and then “Delete All”.
 
                     on the right. If you want to delete all of the compounds, you can click on “Tag” and then “Delete All”.
                     <br><br>
+
                     <br>
 +
                    <br>
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
 
     </div>
 
     </div>
 
     <div style="height:20%;"></div>
 
     <div style="height:20%;"></div>
     <div class="footer">
+
     <div class="footer ">
         <div class="foot-icon">
+
         <div class="foot-icon ">
             <a href=" ">
+
             <a href="http://bio.measurex.top " target="blank "  style="width:66px;">
                 <img src="https://static.igem.org/mediawiki/2017/5/51/Fb.png " class="icon ">
+
                 <img src="https://static.igem.org/mediawiki/2017/f/fb/Bio.png
 +
                " class="icon ">
 
             </a>
 
             </a>
             <a href=" ">
+
             <!--<a href=" ">
                 <img src="https://static.igem.org/mediawiki/2017/d/da/Emial.png " class="icon ">
+
                 <img src="https://static.igem.org/mediawiki/2017/5/51/Fb.png " class="icon " style="width:66px;">
 +
            </a>-->
 +
            <a href="mailto:591689118@qq.com" target="blank ">
 +
                <img src="https://static.igem.org/mediawiki/2017/b/ba/Hfutdeemail.png" class="icon " style="width:66px;">
 
             </a>
 
             </a>
             <a href=" ">
+
             <a href="https://github.com/APTX-4869-MDZZ/HFUT-China" target="blank " style="width:66px;">
                 <img src="https://static.igem.org/mediawiki/2017/5/51/Git.png " class="icon ">
+
                 <img src="https://static.igem.org/mediawiki/2017/b/bf/Hfutdegit.png " class="icon ">
 
             </a>
 
             </a>
 
         </div>
 
         </div>

Latest revision as of 02:38, 2 November 2017

Team:HFUT-China

User Guide
We made a video to show users how to operate in our system. This video can be found in "Demonstrate" page

Open your browser and input address http://bio.measurex.top and you will be redirected to our website.



You can find links to pages which have functions mentioned above.

If you want to go back to the main page, “BioDesigner Dolphin” button on the top-left of the page will lead you to it.

You can find buttons on the top-right which lead to the functions aforementioned along with the login and sign up buttons.

A page like the following one will jump out by clicking on the login button. You can login with your own login name and password. If you haven’t registered before, click the “Create account” to create an account for yourself.

The page will change to this as soon as you login:

When you want to change password or log out, click the “user” button on the top-right.


You can type in keywords in the search box on the main page. You can also select multiple tracks under the box, which means the system will only search for best matches under these certain tracks. Selecting no tracks means searching under all tracks. You will be redirected to another page when the search button is clicked, and results will be listed on it.

Search


You can find the search function on the main page. You don’t have to login when using this searching. Now, take the page below as an example:

Clicking on the search button or pressing “Enter” lead to a redirection to the searching results page. This page have the same functions as the main page does. You are free to conduct a second search.

We listed teams which best match the keywords along with their team name, type, keywords, awards, biobricks and summarized information. If you are looking for detailed information about a team, you can click on the team and the information will be shown.

We split the searching results into many pages in consideration of convenience. What’s more, a list of recommended keywords for the next search is provided, and you search for it by clicking on it.

After clicking on a team, you will go to a page like this:

In this page, detailed information are listed.

On the left side of this page, we set an information guide list to provide a direct link to the information you want.

Project

Click on the "Project" button, and you will go to this page:

1. Click on the “+” under “Project Editor” to create a project.

2. After creating your project, the name of the project will appear on the top-left on the page.

3. Then click on the “pencil” button under “Project Editor” can let you operate the project. Here create two devices for example. Click on the “pencil” again can disable the modification function.

4. Choose “1” under “project_1”, and click on the “Design” button, then you will be redirected to the design page.

You can drag biobricks from the left and drop them on the gene chain to assemble a gene chain. You can also search for biobricks using the search function located in the top-left of the page.

You can click the left button of your mouse to see the detailed information of biobricks, and the right button to choose to delete the biobrick (or drag the biobrick to the garbage can on the bottom-right of the page).

5. After designing, click on the “Project” button again, and choose “1” under “project_1”, and you can see the gene chain you just designed.

Gene Relationship


1. Click on the “Gene Relationship” button and you will see the page with gene relationships on it. System will allocate a gene to you randomly, and show its related genes. Click on any gene circles, and the related genes will be shown.

2. Click the left button of the mouse on the line between two genes, and the relationship between them will be shown. You also can see literatures or papers which contain this gene. Furthermore, you can get papers about this gene at NCBI.

System


1. Click on the “System” and you will see the system recommendation page. You can input keywords about chemical compounds at the search box on the top-left. Then you can click “+” at compounds that you are interested in.

2. Click on “You Tags”, you will see the compounds you just added. And click the “Run” button, you can see a relation graph between them.

Click on the nodes on the canvas, and the corresponding information of genes or compounds will be shown on the right. If you want to delete all of the compounds, you can click on “Tag” and then “Delete All”.