|
|
Line 1: |
Line 1: |
| + | {{Team:CBNU-Korea/css_new}} |
| <html> | | <html> |
| <head> | | <head> |
| | | |
- | <link href='http://fonts.googleapis.com/css?family=Droid+Sans'
| |
- | rel='stylesheet' type='text/css'>
| |
- | <link href='http://fonts.googleapis.com/css?family=Francois+One'
| |
- | rel='stylesheet' type='text/css'>
| |
- | <link href='http://fonts.googleapis.com/css?family=Lato:300,400,900'
| |
- | rel='stylesheet' type='text/css'>
| |
- |
| |
- | <!--[if lt IE 9]>
| |
- | <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
| |
- | <script src="http://scottjehl.github.com/Respond/respond.min.js"></script>
| |
- | <![endif]-->
| |
- |
| |
- |
| |
- | <meta name="viewport"
| |
- | content="width=device-width, initial-scale=1.0 minimum-scale=1, maximum-scale=1, user-scalable=yes, target-densitydpi=medium-dpi" />
| |
| | | |
| <style> | | <style> |
- | /******/
| |
- | header,footer,section,article,aside,nav,hgroup,details,menu,figure,figcaption
| |
- | {
| |
- | display: block;
| |
- | }
| |
- |
| |
- | /* ----------------Display:none---------------- */
| |
- | #p-logo {
| |
- | display: none;
| |
- | }
| |
- |
| |
- | #search-controls {
| |
- | display: none;
| |
- | }
| |
- |
| |
- | .firstHeading {
| |
- | display: none;
| |
- | }
| |
- |
| |
- | #catlinks {
| |
- | display: none;
| |
- | }
| |
- |
| |
- | #footer-box {
| |
- | display: none;
| |
- | }
| |
- |
| |
- | #contentSub {
| |
- | display: none;
| |
- | }
| |
- |
| |
- | /* ----------------TopSection---------------- */
| |
- | #top-section {
| |
- | height: 30px;
| |
- | width: 100%;
| |
- | background: none repeat scroll 0 0 #343838; /*per Page*/
| |
- | border-bottom: 1px solid #262B35; /*per Page*/
| |
- | border-left: medium none;
| |
- | border-right: medium none;
| |
- | }
| |
- |
| |
- | #menubar {
| |
- | top: 2px;
| |
- | font-family: 'Droid Sans', sans-serif;
| |
- | }
| |
- |
| |
- | /* ----------------Body---------------- */
| |
- | body {
| |
- | font-family: 'Lato' sans-serif;
| |
- | background: white;
| |
- | }
| |
- |
| |
- | #globalWrapper {
| |
- | padding-bottom: 0px;
| |
- | }
| |
- |
| |
- | /* ----------------TopSection_left-menu---------------- */
| |
- | .left-menu,.left-menu a {
| |
- | color: white;
| |
- | left: 0px;
| |
- | text-transform: capitalize;
| |
- | }
| |
- |
| |
- | .left-menu:hover {
| |
- | background-color: transparent;
| |
- | }
| |
- |
| |
- | .left-menu:hover a {
| |
- | color: white;
| |
- | text-decoration: none !important;
| |
- | }
| |
- |
| |
- | .left-menu li a:hover {
| |
- | color: #aaaaff;
| |
- | }
| |
- |
| |
- | /* ----------------TopSection_right-menu---------------- */
| |
- | .right-menu li {
| |
- | background-color: transparent;
| |
- | }
| |
- |
| |
- | .right-menu,.right-menu a {
| |
- | color: white;
| |
- | right: 0;
| |
- | text-align: right;
| |
- | }
| |
- |
| |
- | .right-menu:hover {
| |
- | background-color: transparent;
| |
- | }
| |
- |
| |
- | .right-menu:hover a {
| |
- | color: white;
| |
- | }
| |
- |
| |
- | .right-menu li a {
| |
- | background-color: transparent;
| |
- | color: white;
| |
- | padding: 0 15px 0 0;
| |
- | }
| |
- |
| |
- | .right-menu li a:hover {
| |
- | color: #aaaaff;
| |
- | }
| |
- |
| |
- | /* ----------------CB_top---------------- */
| |
- | #CB_top {
| |
- | background: url(https://static.igem.org/mediawiki/2012/f/fd/CBK_back_010.png);
| |
- | font-family: 'Francois One', sans-serif;
| |
- | overflow: auto;
| |
- | padding-bottom: 20px;
| |
- | }
| |
- |
| |
- | #CB_top_shadow {
| |
- | background: url(https://static.igem.org/mediawiki/2012/b/b0/CBK_back_011.png);
| |
- | height: 10px;
| |
- | margin-bottom: 12px;
| |
- | }
| |
- |
| |
- | #CB_top_logo_cont {
| |
- | width: 90%;
| |
- | max-width: 1080px;
| |
- | margin: 0 auto;
| |
- | line-height: 1em;
| |
- | }
| |
- |
| |
- | #CB_top_CBNU_logo {
| |
- | width: 55%;
| |
- | margin: 0 auto;
| |
- | color: white;
| |
- | font-size: 50px;
| |
- | float: left;
| |
- | padding-top: 25px;
| |
- | }
| |
- |
| |
- | #CB_top_CBNU_logo_img {
| |
- | background: url(https://static.igem.org/mediawiki/2012/2/2c/CBK_logo_003.png)
| |
- | no-repeat;
| |
- | width: 140px;
| |
- | height: 120px;
| |
- | float: left;
| |
- | }
| |
- |
| |
- | #CB_top_CBNU_logo_text_1 p {
| |
- | padding: 0;
| |
- | margin: 0;
| |
- | margin-top: 12px;
| |
- | font-size: 30px;
| |
- | }
| |
- |
| |
- | #CB_top_CBNU_logo_text_2 p {
| |
- | padding: 0;
| |
- | margin: 0;
| |
- | margin-top: -18px;
| |
- | }
| |
- |
| |
- | #CB_top_MENU {
| |
- | width: 45%;
| |
- | float: right;
| |
- | text-align: right;
| |
- | padding-top: 45px;
| |
- | }
| |
- |
| |
- | #CB_top_MENU ul {
| |
- | margin: 0;
| |
- | padding: 0;
| |
- | font-size: 18px;
| |
- | padding-bottom: 10px;
| |
- | }
| |
- |
| |
- | #CB_top_MENU li {
| |
- | display: inline-block;
| |
- | *display: inline;
| |
- | border-bottom: 5px solid #221B1B;
| |
- | height: 30px;
| |
- | padding: 0 15px;
| |
- | margin: 0 4px;
| |
- | }
| |
- |
| |
| .PROJECT { | | .PROJECT { |
| border-bottom-color: white !important; | | border-bottom-color: white !important; |
- | }
| |
- |
| |
- | #CB_top_MENU li:hover {
| |
- | background: white;
| |
- | border-bottom: 5px solid white;
| |
- | }
| |
- |
| |
- | #CB_top_MENU li:hover a {
| |
- | color: #24BED3;
| |
- | }
| |
- |
| |
- | #CB_top_MENU a {
| |
- | color: #0E0B0B;
| |
- | }
| |
- |
| |
- | /* ----------------CB_content---------------- */
| |
- | #CB_content a {
| |
- | color: black;
| |
- | }
| |
- |
| |
- | #CB_subcontent {
| |
- | width: 90%;
| |
- | max-width: 1080px;
| |
- | margin: 0 auto;
| |
- | background: transparent;
| |
- | overflow: auto;
| |
- | }
| |
- |
| |
- | #CB_subcontent h2 {
| |
- | background: white;
| |
- | color: black;
| |
- | font-size: 2.2em;
| |
- | font-weight: 900;
| |
- | border: 0;
| |
- | margin: 0;
| |
- | padding: 25px 10px 10px 2%;
| |
- | }
| |
- |
| |
- | #CB_subcontent h3 {
| |
- | font-weight: 400;
| |
- | border: 0;
| |
- | margin: 0;
| |
- | padding: 2% 0 1% 4.2%;
| |
- | font-size: 2em;
| |
- | line-height: 1.5em;
| |
- | }
| |
- |
| |
- | #CB_subcontent p {
| |
- | font-weight: 400;
| |
- | border: 0;
| |
- | margin: 0;
| |
- | padding: 1% 0 1% 4.5%;
| |
- | font-size: 1.4em;
| |
- | }
| |
- |
| |
- | #CB_sub_title {
| |
- | width: 100%;
| |
- | overflow: auto;
| |
- | margin-bottom: 30px;
| |
- | }
| |
- |
| |
- | #CB_subcontent h2 {
| |
- | background: white;
| |
- | color: black;
| |
- | font-size: 3.5em;
| |
- | font-weight: 900;
| |
- | border: 0;
| |
- | margin: 0;
| |
- | padding: 25px 10px 10px 2%;
| |
- | }
| |
- |
| |
- | #CB_sub_title h3 {
| |
- | font-weight: 400;
| |
- | border: 0;
| |
- | margin: 0;
| |
- | padding: 0 0 1% 4.2%;
| |
- | font-size: 2em;
| |
- | line-height: 1.5em;
| |
- | }
| |
- |
| |
- | #CB_sub_main {
| |
- | width: 70%;
| |
- | float: right;
| |
- | }
| |
- |
| |
- | #CB_sub_menu {
| |
- | width: 28%;
| |
- | float: left;
| |
- | border-top: 1px dotted #41C7BC;
| |
- | padding-top: 10px;
| |
- | }
| |
- |
| |
- | #CB_sub_menu ul {
| |
- | list-style-type: none;
| |
- | margin: 0;
| |
- | padding: 10px 0 0 0;
| |
- | margin-right: 20%;
| |
- | font-size: 16px;
| |
- | }
| |
- |
| |
- | #CB_sub_menu li {
| |
- | border-bottom: 1px dotted #41C7BC;
| |
- | }
| |
- |
| |
- | #li_sub {
| |
- | font-size: 14px;
| |
- | padding-left: 17%;
| |
| } | | } |
| | | |
Line 317: |
Line 17: |
| color: #A56BAA !important; | | color: #A56BAA !important; |
| padding-left: 10px; | | padding-left: 10px; |
- | }
| |
- |
| |
- | #CB_sub_main {
| |
- | border-top: 1px dotted #41C7BC;
| |
- | padding-top: 10px;
| |
- | }
| |
- |
| |
- | #CB_sub_main h1 {
| |
- | font-size: 2.4em;
| |
- | font-weight: 900;
| |
- | margin: 0;
| |
- | line-height: 1.2em;
| |
- | }
| |
- |
| |
- | #CB_sub_main h2 {
| |
- | font-size: 1.5em;
| |
- | font-weight: 900;
| |
- | margin: 0;
| |
- | line-height: 1.2em;
| |
- | border: 0;
| |
- | padding: 10px 0 5px 2%;
| |
- | }
| |
- |
| |
- | #CB_sub_main h3 {
| |
- |
| |
- | }
| |
- |
| |
- | #CB_sub_main p {
| |
- |
| |
| } | | } |
| | | |
| #CB_sub_img { | | #CB_sub_img { |
- | height: 140px;
| + | background-image: |
- | background: | + | |
| url(https://static.igem.org/mediawiki/2012/e/ed/CBK_sub_img_003.png); | | url(https://static.igem.org/mediawiki/2012/e/ed/CBK_sub_img_003.png); |
- | background-size: 100% 100%;
| |
- | }
| |
- |
| |
- | #CB_sub_img img {
| |
- | width: 100%;
| |
- | height: 100%;
| |
- | }
| |
- |
| |
- | #CB_sub_cont {
| |
- |
| |
- | }
| |
- |
| |
- | #scrolltotop {
| |
- | width: 100%;
| |
- | height: 20px;
| |
- | background: url(https://static.igem.org/mediawiki/2012/7/7e/CBK_STT.png)
| |
- | no-repeat right;
| |
- | cursor: pointer;
| |
- | }
| |
- | /* ----------------CB_footer---------------- */
| |
- | #CB_responsive {
| |
- | height: 200px;
| |
- | background: #DFD4E7;
| |
- | border-top: 1px solid #AAA6B6;
| |
- | }
| |
- |
| |
- | #CB_footer {
| |
- | height: 200px;
| |
- | background: #EBEBEB;
| |
- | border-top: 1px solid silver;
| |
- | }
| |
- |
| |
- | #CB_footer_logo {
| |
- |
| |
- | }
| |
- |
| |
- | #CB_footer_text {
| |
- |
| |
- | }
| |
- |
| |
- | /* ----------------Content---------------- */
| |
- | #content {
| |
- | background: transparent;
| |
- | padding: 0;
| |
- | width: 100%;
| |
- | border: 0px;
| |
- | }
| |
- |
| |
- | a {
| |
- | color: #0088cc;
| |
- | text-decoration: none;
| |
- | }
| |
- |
| |
- | a:hover {
| |
- | color: #005580;
| |
- | text-decoration: none !important;
| |
- | }
| |
- |
| |
- | p {
| |
- | margin: 0px;
| |
- | }
| |
- |
| |
- | hr {
| |
- | height: 1px;
| |
- | color: transparent;
| |
- | background-color: transparent;
| |
- | border: 0;
| |
- | background-image: -webkit-linear-gradient(left, transparent, rgba(0, 0, 0, 0.25),
| |
- | transparent );
| |
- | background-image: -moz-linear-gradient(left, transparent, rgba(0, 0, 0, 0.25),
| |
- | transparent );
| |
- | background-image: -ms-linear-gradient(left, transparent, rgba(0, 0, 0, 0.25),
| |
- | transparent );
| |
- | background-image: -o-linear-gradient(left, transparent, rgba(0, 0, 0, 0.25),
| |
- | transparent );
| |
- | }
| |
- |
| |
- | /* ----------------responsive---------------- */
| |
- |
| |
- | /* iPhone, etc portrait ---- */
| |
- | @media all and (min-width : 320px) and (max-width : 768px) {
| |
- | #menubar {
| |
- | display: none;
| |
- | }
| |
- | #CB_top {
| |
- | padding-bottom: 0px;
| |
- | }
| |
- | #CB_top_logo_cont {
| |
- | width: 100%;
| |
- | max-width: 1080px;
| |
- | margin: 0 auto;
| |
- | line-height: 1em;
| |
- | }
| |
- | #CB_top_CBNU_logo {
| |
- | width: 100%;
| |
- | margin: 0 auto;
| |
- | color: white;
| |
- | font-size: 30px;
| |
- | padding-top: 15px;
| |
- | text-align: center;
| |
- | }
| |
- | #CB_top_CBNU_logo_img {
| |
- | background: url(https://static.igem.org/mediawiki/2012/2/2c/CBK_logo_003.png)
| |
- | no-repeat;
| |
- | width: 120px;
| |
- | height: 120px;
| |
- | margin: 0 auto;
| |
- | float: none;
| |
- | }
| |
- | #CB_top_MENU {
| |
- | width: 100%;
| |
- | text-align: center;
| |
- | padding-top: 40px;
| |
- | }
| |
- | #CB_top_MENU ul {
| |
- | margin: 0;
| |
- | padding: 0;
| |
- | font-size: 12px;
| |
- | padding-bottom: 10px;
| |
- | }
| |
- | #CB_top_MENU li {
| |
- | display: inline-block;
| |
- | *display: inline;
| |
- | border-bottom: 5px solid #221B1B;
| |
- | height: 20px;
| |
- | padding: 0 15px;
| |
- | margin: 0 4px;
| |
- | }
| |
- | #CB_top_MENU li:hover {
| |
- | background: white;
| |
- | border-bottom: 5px solid white;
| |
- | }
| |
- | #CB_top_MENU li:hover a {
| |
- | color: #24BED3;
| |
- | }
| |
- | #CB_top_MENU a {
| |
- | color: #0E0B0B;
| |
- | }
| |
- | }
| |
- |
| |
- | /* iPad, tablets etc portrait ---- */
| |
- | @media all and (min-width : 769px) and (max-width : 1024px ) {
| |
- | #menubar {
| |
- | display: block;
| |
- | }
| |
- | #CB_top {
| |
- | padding-bottom: 0px;
| |
- | }
| |
- | #CB_top_CBNU_logo {
| |
- | width: 100%;
| |
- | margin: 0 auto;
| |
- | color: white;
| |
- | font-size: 45px;
| |
- | padding-top: 15px;
| |
- | text-align: center;
| |
- | }
| |
- | #CB_top_CBNU_logo_img {
| |
- | background: url(https://static.igem.org/mediawiki/2012/2/2c/CBK_logo_003.png)
| |
- | no-repeat;
| |
- | width: 120px;
| |
- | height: 120px;
| |
- | margin: 0 auto;
| |
- | float: none;
| |
- | }
| |
- | #CB_top_MENU {
| |
- | width: 100%;
| |
- | text-align: center;
| |
- | padding-top: 20px;
| |
- | }
| |
- | #CB_top_MENU ul {
| |
- | margin: 0;
| |
- | padding: 0;
| |
- | font-size: 16px;
| |
- | padding-bottom: 10px;
| |
- | }
| |
- | #CB_top_MENU li {
| |
- | display: inline-block;
| |
- | *display: inline;
| |
- | border-bottom: 5px solid #221B1B;
| |
- | height: 20px;
| |
- | padding: 0 15px;
| |
- | margin: 0 4px;
| |
- | }
| |
- | #CB_top_MENU li:hover {
| |
- | background: white;
| |
- | border-bottom: 5px solid white;
| |
- | }
| |
- | #CB_top_MENU li:hover a {
| |
- | color: #24BED3;
| |
- | }
| |
- | #CB_top_MENU a {
| |
- | color: #0E0B0B;
| |
- | }
| |
- | }
| |
- |
| |
- | /* Laptops, Desktops, etc ---- */
| |
- | /*@media all and (min-width: 1024px) {
| |
- | body {
| |
- | font-family: 'Droid Sans', sans-serif;
| |
- | background-color: green;
| |
- | }
| |
- |
| |
- | #menubar {
| |
- | display: block;
| |
- | }
| |
- | }*/
| |
- |
| |
- | /* large Desktops */
| |
- | @media all and (min-width: 1025px) {
| |
- | #menubar {
| |
- | display: block;
| |
- | }
| |
| } | | } |
| </style> | | </style> |
- |
| |
- | <script type="text/javascript">
| |
- | $(function() {
| |
- | $("*#scrolltotop").click(function() {
| |
- | $("html,body").animate({
| |
- | scrollTop : 0
| |
- | });
| |
- | });
| |
- | });
| |
- | </script>
| |
| | | |
| </head> | | </head> |
Line 595: |
Line 43: |
| <div id="CB_top_MENU"> | | <div id="CB_top_MENU"> |
| <ul> | | <ul> |
- | <li class="HOME"><a href="https://2012.igem.org/Team:CBNU-Korea">HOME</a></li> | + | <li class="HOME"><a |
- | <li class="TEAM"><a href="https://2012.igem.org/Team:CBNU-Korea/Team">TEAM</a></li> | + | href="https://2012.igem.org/Team:CBNU-Korea">HOME</a></li> |
| + | <li class="TEAM"><a |
| + | href="https://2012.igem.org/Team:CBNU-Korea/Team">TEAM</a></li> |
| <li class="PROJECT"><a href="#">PROJECT</a></li> | | <li class="PROJECT"><a href="#">PROJECT</a></li> |
- | <li class="NOTEBOOK"><a href="https://2012.igem.org/Team:CBNU-Korea/Notebook">NOTEBOOK</a></li> | + | <li class="NOTEBOOK"><a |
| + | href="https://2012.igem.org/Team:CBNU-Korea/Notebook">NOTEBOOK</a></li> |
| </ul> | | </ul> |
| <ul> | | <ul> |
- | <li class="SAFETY"><a href="https://2012.igem.org/Team:CBNU-Korea/Safety">SAFETY</a></li> | + | <li class="SAFETY"><a |
- | <li class="JUDGING"><a href="https://2012.igem.org/Team:CBNU-Korea/JG/judging">JUDGING</a></li> | + | href="https://2012.igem.org/Team:CBNU-Korea/Safety">SAFETY</a></li> |
- | <li class="iGEM"><a href="https://2012.igem.org/" target="_blank">iGEM</a></li> | + | <li class="JUDGING"><a |
| + | href="https://2012.igem.org/Team:CBNU-Korea/JG/judging">JUDGING</a></li> |
| + | <li class="iGEM"><a href="https://2012.igem.org/" |
| + | target="_blank">iGEM</a></li> |
| </ul> | | </ul> |
| </div> | | </div> |
Line 640: |
Line 94: |
| </div> | | </div> |
| <div id="CB_sub_main"> | | <div id="CB_sub_main"> |
- | <div id="CB_sub_img"><img | + | <div id="CB_sub_img"> |
- | src="https://static.igem.org/mediawiki/2012/6/6e/CBK_overlay_001.png"></div> | + | <img |
| + | src="https://static.igem.org/mediawiki/2012/6/6e/CBK_overlay_001.png"> |
| + | </div> |
| <div id="CB_sub_cont"> | | <div id="CB_sub_cont"> |
| <h1>1. Overview</h1> | | <h1>1. Overview</h1> |
Brick Designer
- Overview
1. Overview
- The importance of the transfer, saving and management of
bio-information is now closely related to the computers. Nowadays
bio-informatics are used in many fields from simple biological
models to complicated algorithm forecast and more. And in
synthetic biology, since designing a biological circuit by using
the computer became available, it has opened a new era. In the
past, synthetic biology used to find subjects like a genetic part
that is about a specific purpose and the connection between the
fastest designing process only by experiments. But now in the
future of synthetic biology, experiment and the computational
designing program must be in a mutual relationship. The purpose of
our project is to increase the efficiency of the experiment by
using the designing process of BioBrick prior to the experiment,
and improve the efficiency of the connection between the next
experiment conducted by the program user.
2. Feature
2-1. BioBrick Data Download
- The registered BioBrick information needed for designing
in this program, can be easily downloaded without being typed in.
2-2. Design
- The user can arrange the BioBrick in any sequence they
want. And if they want, the user can put a proper Prefix, Suffix
restriction enzyme site between the Bricks by the software.
- By selecting the Plasmid Backbone and the restriction
enzyme in sequence, the cloning will be done automatically.
2-3. Screen Shot
- The BioBrick that the user designed from the program is
saved in image files to be readily used in Wiki or documents.
2-4. Various Storage Formats
- The project in designing in progress can be saved or
imported. Also, by saving the informations as a SBOL, GenBank,
Fasta form, the user can use the information that they design in
other programs as well.
3. The process of the program designing
3-1. Problem Recognition
- In many common laboratories today, there is a limit that
the user themselves has to put in the BioBrick Data, and draw it
as an image after they finish the design. So we decided to develop
the designing a program that, based on BioBrick DataBase, directly
provide designing process with convenient additional functions as
well.
3-2. Requirement Checking
- We checked on other programs that many people are using
nowadays, and analyzed the steps that are needed in designing.
- For the connection within other programs that can be used
after the experiment, we checked on the needs of the saving
methods on GenBank, SBOL, Fasta.
3-2. Design
- Visual Studio 2010, 2012 (C#)
- Windows 7
- OleDB (MS OFFICE)
- * When running the program, Microsoft Runtime is required.
3-2. Discussion and Feedback
- Our team members repeated testing the program, finding the
errors and fixing the problems.
4. Future Work
Our program is now version 1.0.0, and will be updated and
offer better information and performance about the designing
process in next versions. First, simplification of the
registration process of the iGEM Part will be offered. The
registration of BioBrick is now available only in online. But by
co-working with iGEM, we will develop a better functioning
program, and make it possible to design and register the Brick at
the same time. Secondly, we are planning to add a communication
function between the users. This function will help the users to
share opinions, and discuss designing information about a specific
Brick. This discussion will help the users improve their
experiment or project. Third, the expression rate will be produced
in a numerical value. The expression rate value is a score that
will show the users how the expression of the BioBrick designed by
cloning is working in the experiment. To make it as a score,
theoretical background and algorithm based on a lot of data are
required. The last is the import of the files with various saving
forms. Nowadays we can only save the designed BioBrick data after
exporting it. But the next version of the program will be improved
to read the data modified and saved in other process, and reading,
processing and saving it will be available as well.