Team:CBNU-Korea/Project

From 2012.igem.org

(Difference between revisions)
 
(94 intermediate revisions not shown)
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'>
+
<style>
-
    <link href='http://fonts.googleapis.com/css?family=Francois+One' rel='stylesheet' type='text/css'>
+
.PROJECT {
 +
border-bottom-color: white !important;
 +
}
-
    <meta name="viewport" content="width=device-width, initial-scale=1.0 minimum-scale=1, maximum-scale=1, user-scalable=yes, target-densitydpi=medium-dpi" />
+
.OVERVIEW {
-
 
+
font-weight: 900;
-
    <style>
+
}
-
        /* ----------------Display:none---------------- */
+
-
 
+
-
        #p-logo {
+
-
            display: none;
+
-
        }
+
-
 
+
-
        #search-controls {
+
-
            display: none;
+
-
        }
+
-
 
+
-
        .firstHeading {
+
-
            display: none;
+
-
        }
+
-
 
+
-
        #catlinks {
+
-
            display: none;
+
-
        }
+
-
 
+
-
        #footer-box {
+
-
            display: none;
+
-
        }
+
-
 
+
-
        #contentSub {
+
-
            display: none;
+
-
        }
+
-
 
+
-
        /* ----------------Body---------------- */
+
-
 
+
-
        body {
+
-
            font-family: 'Droid Sans', sans-serif;
+
-
            background-color: white; /*per Page*/
+
-
        }
+
-
 
+
-
        #globalWrapper {
+
-
            padding-bottom: 0px;
+
-
        }
+
-
 
+
-
        /* ----------------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;
+
-
        }
+
-
 
+
-
        /* ----------------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 {
+
-
            height: 200px;
+
-
            background-color: #00B4CC;
+
-
            font-family: 'Francois One', sans-serif;
+
-
        }
+
-
 
+
-
        #CB_top_logo_cont {
+
-
            width: 90%;
+
-
            max-width: 1080px;
+
-
            margin: 0 auto;
+
-
            padding-top: 50px;
+
-
            line-height: 1em;
+
-
        }
+
-
 
+
-
        #CB_top_CBNU_logo {
+
-
            width: 70%;
+
-
            margin: 0 auto;
+
-
            color: white;
+
-
            font-size: 30px;
+
-
            float: left;
+
-
        }
+
-
 
+
-
        #CB_top_iGEM_logo {
+
-
            width: 30%;
+
-
            float: right;
+
-
            color: white;
+
-
            font-size: 30px;
+
-
            text-align: right;
+
-
        }
+
-
 
+
-
        /* ----------------CB_content---------------- */
+
-
 
+
-
 
+
-
        #CB_subcontent {
+
-
            width: 90%;
+
-
            max-width: 1080px;
+
-
            margin: 0 auto;
+
-
            margin-top: -9.5em;
+
-
            background: transparent;
+
-
        }
+
-
 
+
-
        #CB_content_imgbox {
+
-
        }
+
-
 
+
-
            #CB_content_imgbox img {
+
-
                border: 2px solid white;
+
-
                width: 100%;
+
-
            }
+
-
 
+
-
 
+
-
        /* ----------------CB_content---------------- */
+
-
 
+
-
        #CB_footer {
+
-
            height: 200px;
+
-
            background: #008C9E;
+
-
            margin-top: 10px;
+
-
        }
+
-
 
+
-
 
+
-
        /* ----------------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);
+
-
        }
+
-
 
+
-
 
+
-
 
+
-
 
+
-
        /***************************************************************/
+
-
 
+
-
        .group:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
+
-
* html .group { height: 1%; }
+
-
*:first-child+html .group { min-height: 1px; }
+
-
 
+
-
/* Mobile nav not visible by desktop browsers but only set to visiblity hidden so jQuery can still detect the height of it
+
-
-------------------------------------------------------------------------------------------------------------------------------------- */
+
-
#mobile { visibility: hidden; background: #21BBE1; position: fixed; z-index: 100; width: 100%; }
+
-
#mobile ul { margin: 0; } 
+
-
#mobile ul li { width: 50%; float: left; } 
+
-
#mobile a { color: #fff; padding: 15px 1.5em; display: block; border-bottom: 1px solid rgba(255, 255, 255, 0.25); text-decoration: none; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
+
-
#mobile li:nth-of-type(2n-1) a { border-right: 1px solid rgba(255, 255, 255, 0.25); }
+
-
/* ----------------------------------------------------------------------------------------------------------------------------------- */
+
-
 
+
-
@media only screen and (min-width: 320px) and (max-width: 480px) {
+
-
 
+
-
/* Hide the main nav for mobile widths */
+
-
+
-
+
-
/* Make the mobile nav visible for mobile widths */
+
-
#mobile { visibility: visible; }
+
 +
.OVERVIEW a {
 +
font-weight: 900;
 +
color: #A56BAA !important;
 +
padding-left: 10px;
}
}
-
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
+
#CB_sub_img {
-
 
+
background-image:
-
/* Add the "Pull Down for Navigation" bar, all controlled via CSS including the text */
+
url(https://static.igem.org/mediawiki/2012/9/96/CBK_sub_img_004.png);
-
#CB_main:before { width: 100%; display: block; content: "Pull Down for Navigation"; padding: 0.75em 1.5em; margin: -1em -1.5em 1em; color: #878787; text-shadow: 0 1px 1px rgba(255, 255, 255, 1); border-bottom: 1px solid #a6a6a6; background-origin: content-box; text-indent: 22px;
+
-
background-color: #e3e3e3;
+
-
background-image: url(images/pull.png), url(images/down.png);
+
-
background-position: right center, left center;
+
-
background-repeat: no-repeat;
+
-
}
+
-
 
+
}
}
 +
</style>
-
    </style>
+
</head>
-
    <script type="text/javascript" charset="utf-8">
 
-
    function checkWidth () {
+
<body>
-
    var mobileNavHeight = $('#mobile').height();
+
 +
<div id="CB_top">
 +
<div id="CB_top_logo_cont">
 +
<div id="CB_top_CBNU_logo">
 +
<div id="CB_top_CBNU_logo_img"></div>
 +
<div id="CB_top_CBNU_logo_text_1">
 +
<p>2012 iGEM</p>
 +
</div>
 +
<div id="CB_top_CBNU_logo_text_2">
 +
<p>CBNU-Korea</p>
 +
</div>
 +
</div>
 +
<div id="CB_top_MENU">
 +
<ul>
 +
<li class="HOME"><a
 +
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="NOTEBOOK"><a
 +
href="https://2012.igem.org/Team:CBNU-Korea/Notebook">NOTEBOOK</a></li>
 +
</ul>
 +
<ul>
 +
<li class="SAFETY"><a
 +
href="https://2012.igem.org/Team:CBNU-Korea/Safety">SAFETY</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>
 +
</div>
 +
</div>
 +
</div>
 +
<div id="CB_top_shadow"></div>
-
    if ($(window).width() < 481) {
+
<div id="CB_content">
-
        $('#CB_main').css({
+
<div id="CB_subcontent">
-
        // Change the CSS top value of #site to whatever mobileNavHeight outputs
+
<div id="CB_sub_title">
-
      top: mobileNavHeight + 'px !important'
+
<h2>PROJECT</h2>
-
    });
+
<h3>- Overview</h3>
-
    // Scroll the window the height of mobileNavHeight [animation set at 0 to hide the navigation immediately]
+
</div>
-
    $('html, body').stop().animate({
+
<div id="CB_sub_menu">
-
        'scrollTop': $('#CB_main').offset().top
+
<div id="CB_sub_mobile_menu"> + MENU </div>
-
}, 0, 'swing', function () {
+
<ul class="CB_ul">
-
window.location.hash = '#CB_main';
+
<li class="OVERVIEW"><a href="#">01 + Overview</a></li>
-
});
+
<li class="BD"><a
-
    }
+
href="https://2012.igem.org/Team:CBNU-Korea/Project/BD/Overview">02
-
    else if ($(window).width() > 480) {
+
+ Brick Designer</a></li>
-
        $('#CB_main').css({
+
<li class="MGD"><a
-
        // Make sure the top value of #site is 0 so we don't see the space for the mobile nav
+
href="https://2012.igem.org/Team:CBNU-Korea/Project/GD/Overview">03
-
      top: 0 + 'px'
+
+ Minimal Genome Designer</a></li>
-
    });
+
<li class="DOWNLOAD"><a
-
    // Scroll to the absolute top of the page
+
href="https://2012.igem.org/Team:CBNU-Korea/Project/Download">04
-
    $(window).scrollTop(0); //no need for $.animate, on desktop browser it works just fine
+
+ Download</a></li>
-
    }
+
<li class="TUTORIAL"><a
-
    }
+
href="https://2012.igem.org/Team:CBNU-Korea/Project/Tutorial">05
 +
+ Tutorial</a></li>
 +
</ul>
-
    $(document).ready(function(){
+
</div>
-
    checkWidth();
+
<div id="CB_sub_main">
-
    });
+
<div id="CB_sub_img">
 +
<img
 +
src="https://static.igem.org/mediawiki/2012/6/6e/CBK_overlay_001.png">
 +
</div>
 +
<div id="CB_sub_cont">
 +
<h1>BUGS - Brick & Unique minimal Genome Software</h1>
 +
<p>
 +
We have developed two distinct software tools. <br> <br>
 +
The first tool is Brick Designer. With this, users can design new
 +
bio-bricks. It is also able to synthesize bio-bricks by using the
 +
bricks whitch are registered in partsregistry. Users can also
 +
utilize bricks he just designed. We tried to enhance software
 +
potability by enabling the designed bricks to save as Genbank and
 +
SBOL format. Brick also can be saved as picture file so that it is
 +
helpful in the Wiki implementation.<br> <br> Second
 +
tool, Minimal Genome Designer is functionally divided into two
 +
program, Designer and Viewer. The Viewer shows a lot of
 +
information of genomes and genes. For example, Location of
 +
essential genes and the function of genes. It also provides
 +
information of genomes in both linear and circular form. Using
 +
this, it will be easier for users to understand the characteristic
 +
of genomes. By the designer, user can design minimal genomes by
 +
essential genes which are predicted by our team in this year. It
 +
shows the information of essential genes that can exist in eash
 +
section like frequency of location on 82 species, function and
 +
etc. When it is done to design minimal genome, it can be viewed on
 +
Viewer.
-
 
+
</p>
-
    </script>
+
-
 
+
-
</head>
+
-
 
+
-
 
+
-
<body>
+
-
<div id="CB_main">
+
-
    <div id="CB_top">
+
-
        <div id="CB_top_logo_cont">
+
-
            <div id="CB_top_CBNU_logo">
+
-
                Team:CBNU-Korea
+
-
            </div>
+
-
            <div id="CB_top_iGEM_logo">
+
-
                <a href="https://2012.igem.org">iGEM_logo</a>
+
-
            </div>
+
-
        </div>
+
-
    </div>
+
-
    <div id="CB_content">
+
</div>
-
        <div id="CB_subcontent">
+
</div>
-
            <div id="CB_content_imgbox">
+
</div>
-
                <img src="https://static.igem.org/mediawiki/2012/7/77/CBK_menu_safety.png">
+
</div>
-
            </div>
+
-
            <hr>
+
-
            <div id="test">
+
-
            </div>
+
-
        </div>
+
-
    </div>
+
-
    <div id="CB_footer">
+
<div id="CB_footer">
-
    </div>
+
<div id="CB_footer_logo"></div>
 +
<div id="CB_footer_text"></div>
</div>
</div>
</body>
</body>
</html>
</html>

Latest revision as of 23:48, 26 September 2012

PROJECT

- Overview

BUGS - Brick & Unique minimal Genome Software

We have developed two distinct software tools.

The first tool is Brick Designer. With this, users can design new bio-bricks. It is also able to synthesize bio-bricks by using the bricks whitch are registered in partsregistry. Users can also utilize bricks he just designed. We tried to enhance software potability by enabling the designed bricks to save as Genbank and SBOL format. Brick also can be saved as picture file so that it is helpful in the Wiki implementation.

Second tool, Minimal Genome Designer is functionally divided into two program, Designer and Viewer. The Viewer shows a lot of information of genomes and genes. For example, Location of essential genes and the function of genes. It also provides information of genomes in both linear and circular form. Using this, it will be easier for users to understand the characteristic of genomes. By the designer, user can design minimal genomes by essential genes which are predicted by our team in this year. It shows the information of essential genes that can exist in eash section like frequency of location on 82 species, function and etc. When it is done to design minimal genome, it can be viewed on Viewer.