Team:SJTU-Software2/test

From 2014.igem.org

(Difference between revisions)
Line 1: Line 1:
{{CSS/Main}}
{{CSS/Main}}
 +
 +
<html>
<html>
-
    <head>
+
 
-
         <title>Slide Down Box Menu with jQuery and CSS3</title>
+
<!--main content -->
 +
 
 +
<p>
 +
<style type="text/css">
 +
.firstHeading {
 +
width: 0px;
 +
         height: 0px;
 +
margin: -38px auto;
 +
padding-top: 0px;
 +
margin-bottom: 0px;
 +
font-family: Georgia, Times, "Times New Roman", serif;
 +
}
 +
 
 +
 
 +
</style>
 +
<title>Slide Down Box Menu with jQuery and CSS3</title>
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
         <meta name="description" content="Slide Down Box Menu with jQuery and CSS3" />
         <meta name="description" content="Slide Down Box Menu with jQuery and CSS3" />
Line 39: Line 56:
}
}
</style>
</style>
-
    </head>
+
</p>
-
     <body>
+
<script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
-
<div class="content">
+
<script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.2/js/bootstrap.min.js"></script>
 +
<link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.2/css/bootstrap.min.css"> 
 +
      
 +
 
 +
<!--<body style="background-image:url(https://static.igem.org/mediawiki/2014/6/67/Background2.jpg);background-position:center; background-repeat:repeat-y repeat-x">-->
 +
 
 +
 
 +
<table width="70%" align="center">
 +
 
 +
 
 +
<div class="container">
 +
<div class="row clearfix">
 +
<div class="col-md-12 column">
 +
<nav class="navbar navbar-default" role="navigation">
 +
<div class="navbar-header">
 +
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button> <a class="navbar-brand" href="https://2014.igem.org/Team:SJTU-Software">Home</a>
 +
</div>
 +
 +
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
 +
<ul class="nav navbar-nav">
 +
<li >
 +
<a href="https://2014.igem.org/Team:SJTU-Software/Team">Team</a>
 +
</li>
 +
<li>
 +
<a href="https://igem.org/Team.cgi?year=2014&team_name=SJTU-Software">Official Team Profile</a>
 +
</li>
 +
<li>
 +
<a href="https://2014.igem.org/Team:SJTU-Software/Project">Project</a>
 +
</li>
 +
<li>
 +
<a href="https://2014.igem.org/Team:SJTU-Software/Parts">Parts</a>
 +
</li>
 +
<li>
 +
<a href="https://2014.igem.org/Team:SJTU-Software/Modeling">Modeling</a>
 +
</li>
 +
<li>
 +
<a href="https://2014.igem.org/Team:SJTU-Software/Notebook">Notebook</a>
 +
</li>
 +
</li>
 +
<li>
 +
<a href="https://2014.igem.org/Team:SJTU-Software/Safety">Safety</a>
 +
</li>
 +
</li>
 +
<li>
 +
<a href="https://2014.igem.org/Team:SJTU-Software/Attributions">Attributions</a>
 +
</li>
 +
<li>
 +
<a href="https://2014.igem.org/wiki/index.php?title=Team:SJTU-Software&action=edit">edit</a>
 +
</li>
 +
<li class="dropdown">
 +
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown<strong class="caret"></strong></a>
 +
<ul class="dropdown-menu">
 +
<li>
 +
<a href="#">Action</a>
 +
</li>
 +
<li>
 +
<a href="#">Another action</a>
 +
</li>
 +
<li>
 +
<a href="#">Something else here</a>
 +
</li>
 +
<li class="divider">
 +
</li>
 +
<li>
 +
<a href="#">Separated link</a>
 +
</li>
 +
<li class="divider">
 +
</li>
 +
<li>
 +
<a href="#">One more separated link</a>
 +
</li>
 +
</ul>
 +
</li>
 +
</ul>
 +
 +
 +
</div>
 +
 +
</nav>
 +
</div>
 +
</div>
 +
</div>
 +
 
 +
 
 +
 
 +
 
 +
 
 +
<tr>
 +
 
 +
<!--navigation menu -->
 +
<td align="center" colspan="3">
 +
 
 +
<table  width="100%">
 +
<tr heigth="15px"></tr>
 +
<tr heigth="75px">
 +
 
 +
 
 +
 
 +
 
 +
<td align ="center"> <a href="https://2014.igem.org/Main_Page"> <img src="https://static.igem.org/mediawiki/igem.org/6/60/Igemlogo_300px.png" width="55px"></a> </td>
 +
</tr>
 +
</table>
 +
 
 +
<!--end navigation menu -->
 +
</tr>
 +
 
 +
 
 +
</tr>
 +
 +
<div class="container">
 +
<div class="row clearfix">
 +
<div class="col-md-12 column">
 +
<div class="carousel slide" id="carousel-405627">
 +
<ol class="carousel-indicators">
 +
<li class="active" data-slide-to="0" data-target="#carousel-405627">
 +
</li>
 +
<li data-slide-to="1" data-target="#carousel-405627">
 +
</li>
 +
<li data-slide-to="2" data-target="#carousel-405627">
 +
</li>
 +
</ol>
 +
<div class="carousel-inner">
 +
<div class="item active">
 +
<img alt="" src="https://static.igem.org/mediawiki/2014/7/7b/Mainpage2.png" />
 +
<div class="carousel-caption">
 +
<h4>
 +
 +
</h4>
 +
<p>
 +
 +
</p>
 +
</div>
 +
</div>
 +
<div class="item">
 +
<img alt="" src="https://static.igem.org/mediawiki/2014/0/06/Mainpage1.png" />
 +
<div class="carousel-caption">
 +
<h4>
 +
 +
</h4>
 +
<p>
 +
 +
</p>
 +
</div>
 +
</div>
 +
<div class="item">
 +
<img alt="" src="https://static.igem.org/mediawiki/2014/c/c8/Mainpage3.png" />
 +
<div class="carousel-caption">
 +
<h4>
 +
 +
</h4>
 +
<p>
 +
 +
</p>
 +
</div>
 +
</div>
 +
</div> <a class="left carousel-control" href="#carousel-405627" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> <a class="right carousel-control" href="#carousel-405627" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
 
 +
<div class="container">
 +
<div class="row clearfix">
 +
<div class="col-md-12 column">
 +
<div class="jumbotron">
 +
<h2>
 +
<font color="blue" size="4">An EASY Biobrick Blueprint’s pacKage</font>
 +
</h2>
 +
<p>
 +
<font size="2.5" face="Verdana">Digging into the current biobrick database maintained by the iGEM foundation, we have found the database is organized in a confusing manner, which made it difficult for all the teams to interpret and find the high-rated biobricks. In addition, different types of biobricks which were presented in the previously-designed biosystems varied from each other so greatly that even the most experienced synthetic biologists might find it troublesome to interpret the biosystem the teams had created.</br>
 +
 
 +
Given the above-mentioned reasons, we have worked on an EASY Biobrick Blueprint’s pacKage with an entrenched relationship with the current biobrick database to solve the problems, the functions of which are listed as follows:</font>
 +
 +
</p>
 +
<h2>
 +
<font color="blue" size="3">1: WHAT DO YOU WANT? (An EASY Search Engine)</font>
 +
</h2>
 +
<p>
 +
<font size="2.5" face="Verdana">The searching engine is based on a database covering more than 20000 biobricks, the information of which were collected from Registry of Biological Parts. With an input of the keywords you are interested in, the biobricks related to this keyword will be listed, sorted by a score given by our assessment model. After picking out the user-interested types and status, users will attain more precise results only satisfying their requirements. The results can also be sorted by the score of popularity and user reviews. </br>
 +
Besides, users can search for the biobricks containing similar sequences on the basis of the given sequence. The output will be sorted by the score calculated by our BLAST algorithm.  </font>
 +
 
 +
</p>
 +
<h2>
 +
<font color="blue" size="3">2: HOW IS YOUR BIOBRICK? (An EASY Uploader)</font>
 +
</h2>
 +
<p>
 +
<font size="2.5" face="Verdana">Here, users could not only upload their self-created biobricks to our database, but also an evaluation will be conducted to examine the quality of the uploading biobricks. The sequence of the self-created biobrick will be aligned with the sequences of the existing biobricks to find a similar biobrick, if exist, and a reference score for the quality of the self-created biobrick will be given according to the score given to the similar biobrick judging by our assessment model.  </font>
 +
 
 +
</p>
 +
<h2>
 +
<font color="blue" size="3">3: WHAT IS YOUR BIOSYSTEM? (An EASY tool for presentation)</font>
 +
</h2>
 +
<p>
 +
<font size="2.5" face="Verdana">Users could draw their biosystem and look into the detailed information about the biobricks in the biosystem. With standardized biobrick icons according to the iGEM Registry, a standardized picture of a biosystem could be plotted using our tool. The tool can automatically check the basic reliability of the system based on the property of the biobricks. The result can be exported to a picture file or an SBOL file, which could be used for the presentation in the publications or later design. </font>
 +
 
 +
</p>
 +
<p>
 +
<a class="btn btn-primary btn-large" href="#">See the Video</a>
 +
</p>
 +
 +
</div>
 +
 +
</div>
 +
</div>
 +
</div>
 +
 
 +
 
 +
</td>
 +
 
 +
<tr> <td colspan="3"  height="15px"> </td></tr>
 +
<tr><td bgColor="#e7e7e7" colspan="3" height="1px"> </tr>
 +
<tr> <td colspan="3"  height="5px"> </td></tr>
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
<tr> <td colspan="3"  height="15px"> </td></tr>
 +
<tr><td bgColor="#e7e7e7" colspan="3" height="1"> </tr>
 +
 
 +
<div class="content">
<ul id="sdt_menu" class="sdt_menu">
<ul id="sdt_menu" class="sdt_menu">
Line 178: Line 416:
             });
             });
         </script>
         </script>
-
    </body>
+
 
-
</html>
+
</table>

Revision as of 12:19, 2 October 2014


Slide Down Box Menu with jQuery and CSS3

An EASY Biobrick Blueprint’s pacKage

Digging into the current biobrick database maintained by the iGEM foundation, we have found the database is organized in a confusing manner, which made it difficult for all the teams to interpret and find the high-rated biobricks. In addition, different types of biobricks which were presented in the previously-designed biosystems varied from each other so greatly that even the most experienced synthetic biologists might find it troublesome to interpret the biosystem the teams had created.
Given the above-mentioned reasons, we have worked on an EASY Biobrick Blueprint’s pacKage with an entrenched relationship with the current biobrick database to solve the problems, the functions of which are listed as follows:

1: WHAT DO YOU WANT? (An EASY Search Engine)

The searching engine is based on a database covering more than 20000 biobricks, the information of which were collected from Registry of Biological Parts. With an input of the keywords you are interested in, the biobricks related to this keyword will be listed, sorted by a score given by our assessment model. After picking out the user-interested types and status, users will attain more precise results only satisfying their requirements. The results can also be sorted by the score of popularity and user reviews.
Besides, users can search for the biobricks containing similar sequences on the basis of the given sequence. The output will be sorted by the score calculated by our BLAST algorithm.

2: HOW IS YOUR BIOBRICK? (An EASY Uploader)

Here, users could not only upload their self-created biobricks to our database, but also an evaluation will be conducted to examine the quality of the uploading biobricks. The sequence of the self-created biobrick will be aligned with the sequences of the existing biobricks to find a similar biobrick, if exist, and a reference score for the quality of the self-created biobrick will be given according to the score given to the similar biobrick judging by our assessment model.

3: WHAT IS YOUR BIOSYSTEM? (An EASY tool for presentation)

Users could draw their biosystem and look into the detailed information about the biobricks in the biosystem. With standardized biobrick icons according to the iGEM Registry, a standardized picture of a biosystem could be plotted using our tool. The tool can automatically check the basic reliability of the system based on the property of the biobricks. The result can be exported to a picture file or an SBOL file, which could be used for the presentation in the publications or later design.

See the Video

Retrieved from "http://2014.igem.org/Team:SJTU-Software2/test"