Difference between revisions of "Team:SYSU-Software/Project"

 
(6 intermediate revisions by the same user not shown)
Line 222: Line 222:
 
                 opacity: 0;
 
                 opacity: 0;
 
                 background-color: rgb(0,3,15);
 
                 background-color: rgb(0,3,15);
−
                margin-top: 5px;
 
 
             }
 
             }
 
             #menuContainer ul li:hover #Pro_div {
 
             #menuContainer ul li:hover #Pro_div {
Line 233: Line 232:
 
             .Pro_class {
 
             .Pro_class {
 
                 position: relative;
 
                 position: relative;
−
                 right:8px;
+
                 right:4px;
 
             }
 
             }
 
             .Pro_class:hover p {
 
             .Pro_class:hover p {
Line 244: Line 243:
 
             }
 
             }
 
             #menuContainer .bar1 {
 
             #menuContainer .bar1 {
−
                 margin-top: 6px;
+
                 width:6px;
−
                width:5px;
+
                 height:182px;
−
                 height:177px;
+
                 top:14px;
−
                 top:6px;
+
 
                 right:6px;
 
                 right:6px;
 
                 position: relative;
 
                 position: relative;
Line 279: Line 277:
 
                 opacity: 0;
 
                 opacity: 0;
 
                 background-color: rgb(0,3,15);
 
                 background-color: rgb(0,3,15);
−
                margin-top: 5px;
 
 
             }
 
             }
 
             #menuContainer ul li:hover #HP_div {
 
             #menuContainer ul li:hover #HP_div {
Line 290: Line 287:
 
             .HP_class {
 
             .HP_class {
 
                 position: relative;
 
                 position: relative;
−
                 right:8px;
+
                 right:4px;
 
             }
 
             }
 
             .HP_class:hover p {
 
             .HP_class:hover p {
Line 301: Line 298:
 
             #menuContainer .bar3 {
 
             #menuContainer .bar3 {
 
                 /* margin-top: 6px; */
 
                 /* margin-top: 6px; */
−
                 width:5px;
+
                 width:6px;
 
                 height: 148px;
 
                 height: 148px;
 
                 position: relative;
 
                 position: relative;
−
                 top:8px;
+
                 top:13px;
 
                 right:6px;
 
                 right:6px;
 
                 background-color: rgb(24,119,66);
 
                 background-color: rgb(24,119,66);
Line 371: Line 368:
 
                 opacity: 0;
 
                 opacity: 0;
 
                 background-color: rgb(0,3,15);
 
                 background-color: rgb(0,3,15);
−
                margin-top: 5px;
 
 
             }
 
             }
 
             #menuContainer ul li:hover #Team_div {
 
             #menuContainer ul li:hover #Team_div {
Line 393: Line 389:
 
             #menuContainer .bar8 {
 
             #menuContainer .bar8 {
 
                 /* margin-top: 6px; */
 
                 /* margin-top: 6px; */
−
                 width:5px;
+
                 width:6px;
 
                 position: relative;
 
                 position: relative;
 
                 right:6px;
 
                 right:6px;
−
                 height: 116px;
+
                 height: 120px;
−
                 top:7px;
+
                 top:14px;
 
                 background-color: rgb(154,166,134);
 
                 background-color: rgb(154,166,134);
 
             }
 
             }
Line 554: Line 550:
 
                 overflow: hidden;
 
                 overflow: hidden;
 
                 margin-top: 20px;
 
                 margin-top: 20px;
−
                 margin-left: 20%;
+
                 margin-left: 4%;
 
                 margin-bottom: 65px;
 
                 margin-bottom: 65px;
 +
                text-align: center;
 
             }
 
             }
 
             #myBody #overview_P li {
 
             #myBody #overview_P li {
−
                 float: left;
+
                 /* float: left; */
 
                 list-style-type:none;
 
                 list-style-type:none;
 
             }
 
             }
Line 587: Line 584:
 
                 bottom: 36px;
 
                 bottom: 36px;
 
             }
 
             }
−
             </style>
+
             #for_en #myBody #overview_P a:link {
−
        <script src="http://code.jquery.com/jquery-latest.js"></script>
+
                 color: rgb(225,135,47);
−
        <script type="text/javascript">
+
−
            $(function() {
+
−
                var removeObj = document.getElementById('sideMenu');
+
−
                removeObj.parentNode.removeChild(removeObj);
+
−
                var removeOb = document.getElementById('top_title');
+
−
                removeOb.parentNode.removeChild(removeOb);
+
−
                var remove1 = document.getElementById('top_menu_under');
+
−
                remove1.parentNode.removeChild(remove1);
+
−
                $(".mw-body").css("margin-left", "0px");
+
−
                $(".mw-body").css("width", "100%");
+
−
                $(".mw-body").css("padding", "0");
+
−
                /*var left_value = ($(window).width()-1280)/2+"px";*/
+
−
/*                $('#globalWrapper').css("left", "7%");*/
+
−
                $('#menuContainer').css("left", "0%");
+
−
                $('#globalWrapper').css("padding","0px");
+
−
              $(document).ready( function() {
+
−
 
+
−
                window.onscroll = function() {
+
−
                  var t = document.documentElement.scrollTop || document.body.scrollTop; 
+
−
                  var menu = $( "#menuContainer" );
+
−
                  if( t >= 220 ) {
+
−
                      menu.addClass("scroll");
+
−
                  } else {
+
−
                      menu.removeClass("scroll");
+
−
                  }
+
−
                }
+
−
 
+
−
              });
+
−
            });
+
−
           
+
−
        </script>
+
−
        <link rel="shortcut icon" href="http://www.cs.washington.edu/education/courses/cse190m/09sp/homework/2/rotten.gif" type="image/gif">
+
−
        <link rel="icon" href="http://www.cs.washington.edu/education/courses/cse190m/09sp/homework/2/rotten.gif" type="image/gif">
+
−
        <title>SYSU-Software:Project</title>
+
−
    </head>
+
−
 
+
−
 
+
−
    <body>
+
−
        <div id = "for_en">
+
−
            <div id="myBody">
+
−
                 <div id = "navigator">
+
−
                    <div id="menuContainer">
+
−
                        <div id="oplayer"></div>
+
−
                        <!-- <a href="http://www.baidu.com"><span id="igem_logo"></span></a> -->
+
−
                        <a href='http://craft.sysusoftware.info/' class="img-container"><img id='logo' class='logo' src='https://static.igem.org/mediawiki/2016/6/6c/SYSU-Software-Navigator-craft_logo.png'/></a>
+
−
                        <div id="menu">
+
−
                          <ul>
+
−
                            <a href="https://2016.igem.org/Team:SYSU-Software/Project">
+
−
                                <li>
+
−
                                    <div class = "interlab_Project">Project</div>
+
−
                                    <div id = "Pro_div">
+
−
                                        <div style="display:inline-block" class='bar1'></div>
+
−
                                        <div style="display:inline-block">
+
−
                                            <div class = "Pro_class" class style="display:block"><a href="https://2016.igem.org/Team:SYSU-Software/Project"><p>Abstract</p></a></div>
+
−
                                            <div class = "Pro_class" class style="display:block"><a href="https://2016.igem.org/Team:SYSU-Software/Description"><p>Description</p></a></div>
+
−
                                            <div class = "Pro_class" style="display:block"><a href="https://2016.igem.org/Team:SYSU-Software/Design"><p>Design</p></a></div>
+
−
                                            <div class = "Pro_class" style="display:block"><a href="https://2016.igem.org/Team:SYSU-Software/Feature"><p>Feature</p></a></div>
+
−
                                            <div class = "Pro_class" style="display:block"><a href="https://2016.igem.org/Team:SYSU-Software/Proof"><p>Proof</p></a></div>
+
−
                                            <div class = "Pro_class" style="display:block"><a href="https://2016.igem.org/Team:SYSU-Software/Demonstrate"><p>Demonstrate</p></a></div>
+
−
                                        </div>
+
−
                                    </div>
+
−
                                </li>
+
−
                            </a>
+
−
                            <a href="https://2016.igem.org/Team:SYSU-Software/Model">
+
−
                                <li>
+
−
                                    <div class = "interlab_Modeling">Modeling</div>
+
−
                                    <div class='bar2'></div>
+
−
                                </li>
+
−
                            </a>
+
−
                            <a href="https://2016.igem.org/Team:SYSU-Software/Human_Practices">
+
−
                                <li>
+
−
                                    <div class = "interlab_Human">Human Practice</div>
+
−
                                    <div id = "HP_div">
+
−
                                        <div style="display:inline-block" class='bar3'></div>
+
−
                                        <div style="display:inline-block">
+
−
                                            <div class = "HP_class" class style="display:block"><a href="https://2016.igem.org/Team:SYSU-Software/Human_Practices"><p>Overview</p></a></div>
+
−
                                            <div class = "HP_class" style="display:block"><a href="https://2016.igem.org/Team:SYSU-Software/HP/Silver"><p>Silver</p></a></div>
+
−
                                            <div class = "HP_class" style="display:block"><a href="https://2016.igem.org/Team:SYSU-Software/HP/Gold"><p>Gold</p></a></div>
+
−
                                            <div class = "HP_class" style="display:block"><a href="https://2016.igem.org/Team:SYSU-Software/Integrated_Practices"><p>Integrated Practices</p></a></div>
+
−
                                            <div class = "HP_class" style="display:block"><a href="https://2016.igem.org/Team:SYSU-Software/Engagement"><p>Engagement</p></a></div>
+
−
                                        </div>
+
−
                                    </div>
+
−
                                </li>
+
−
                            </a>
+
−
                            <a href="https://2016.igem.org/Team:SYSU-Software/Collaborations">
+
−
                                <li>
+
−
                                    <div class = "interlab_Colla">Collaborations</div>
+
−
                                    <div class='bar4'></div>
+
−
                                </li>
+
−
                            </a>
+
−
                            <a href="https://2016.igem.org/Team:SYSU-Software/Safety">
+
−
                                <li>
+
−
                                    <div class = "interlab_Safety">Safety</div>
+
−
                                    <div class='bar5'></div>
+
−
                                </li>
+
−
                            </a>
+
−
                            <a href="https://2016.igem.org/Team:SYSU-Software/Attributions">
+
−
                                <li>
+
−
                                    <div class = "interlab_Attr">Attribution</div>
+
−
                                    <div class='bar6'></div>
+
−
                                </li>
+
−
                            </a>
+
−
                            <a href="https://2016.igem.org/Team:SYSU-Software/Interlab">
+
−
                                <li>
+
−
                                    <div class = "interlab_Interlab">Interlab</div>
+
−
                                    <div class='bar7'></div>
+
−
                                </li>
+
−
                            </a>
+
−
                            <a href="https://2016.igem.org/Team:SYSU-Software/Team">
+
−
                                <li>
+
−
                                    <div class = "interlab_Team">Team</div>
+
−
                                    <div id = "Team_div">
+
−
                                        <div style="display:inline-block" class='bar8'></div>
+
−
                                        <div style="display:inline-block">
+
−
                                            <div class = "Team_class" class style="display:block"><a href="https://2016.igem.org/Team:SYSU-Software/Team"><p>Overview</p></a></div>
+
−
                                            <div class = "Team_class" class style="display:block"><a href="https://2016.igem.org/Team:SYSU-Software/Team/Members"><p>Team Members</p></a></div>
+
−
                                            <div class = "Team_class" style="display:block"><a href="https://2016.igem.org/Team:SYSU-Software/Team/Instructors"><p>Instructor and Advisor</p></a></div>
+
−
                                            <div class = "Team_class" style="display:block"><a href="https://2016.igem.org/Team:SYSU-Software/Team/Notebook"><p>Notebook</p></a></div>
+
−
                                        </div>
+
−
                                    </div>
+
−
                                </li>
+
−
                            </a>
+
−
                            <a href="https://2016.igem.org/Team:SYSU-Software/Medals">
+
−
                                <li>
+
−
                                    <div class = "interlab_Medals">Medals</div>
+
−
                                    <div class='bar9'></div>
+
−
                                </li>
+
−
                            </a>
+
−
                            <a href="https://github.com/igemsoftware2016/SYSU-Software-2016/releases">
+
−
                                <li>
+
−
                                    <img src="https://static.igem.org/mediawiki/2016/b/b0/SYSU-Software-Hp-github.png">
+
−
                                </li>
+
−
                            </a>
+
−
                            </ul>
+
−
                        </div>
+
−
                    </div>
+
−
                </div>
+
−
                <div id = 'mybanner1'>
+
−
                    <div class='banner'>
+
−
                    <img src="https://static.igem.org/mediawiki/2016/8/82/SYSU-Software-Project-banner.png">
+
−
                    </div>
+
−
                    <div id = "mybackimg">
+
−
 
+
−
                        <div id = "overview_DE">
+
−
                            <div id = 'overview_bar1'></div>
+
−
                            <div><p>ABSTRACT</p></div>
+
−
                            <!-- style="display:inline" -->
+
−
                            <div id = 'overview_bar2'></div>
+
−
                        </div>
+
−
                        <!-- <div id = "h1seg"><img src="https://static.igem.org/mediawiki/2016/a/a6/SYSU-Software-P-h1_seg.png"></div> -->
+
−
                        <div id = "overview_P">
+
−
                            <ul>
+
−
                                <li><p>CRFAT (Community-based Retro-synthetic Analysis Functional plaTform) is an integrated software for crafting </p></li>
+
−
                                <li><p>synthetic biological system from design, validation to share. CRAFT has three functional parts: CRAFT Designer, </p></li>
+
−
                                <li><p>CRAFT Square and Satellite. CRAFT Designer follows the concept of evolution simulating natural selection </p></li>
+
−
                                <li><p>in which users can customize their synthetic biological system based on their requirements including background</p></li>
+
−
                                <li><p>environment. CRAFT Designer also provides users with standard protocols; it refers to the concept of "Design</p></li>
+
−
                                <li><p>and Redesign” in synthetic biology and applies it to protocol design: fill the standard protocol frameworks </p></li>
+
−
                                <li><p>with messages corresponding to users’ designed systems. CRAFT Square is a communication platform where </li></p>
+
−
                                <li><p>users can share and exchange their ideas, or modify other designs to suit their own demands. Satellite serves</li></p>
+
−
                                <li><p>as the distributed computing plug-in in CRAFT, undertaking nearly all calculations in the whole platform.</li></p>
+
−
                            </ul>
+
−
                        </div>
+
−
 
+
−
                    </div>
+
−
                    <br><br><br><br><br><br><br><br>
+
−
                </div>
+
−
                <div id = "Intro_P"></div>
+
−
                   
+
−
            </div>
+
−
            <div id = "myfooter"></div>
+
−
        </div>
+
−
    </body>
+
−
</html>
+
−
<html>
+
−
    <head>
+
−
        <meta charset="utf-8" />
+
−
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
−
        <style type="text/css">
+
−
            @font-face {
+
−
                font-family: gill_sans_light;
+
−
                src: url('https://static.igem.org/mediawiki/2016/7/77/SYSU-Software-Gill_sans_light.otf');
+
 
             }
 
             }
−
             @font-face {
+
             #for_en #myBody #overview_P a:visited {
−
                 font-family: generica_regular;
+
                 color: rgb(225,135,47);
−
                src: url('https://static.igem.org/mediawiki/2016/0/09/SYSU-Software-Generica_regular.otf');
+
 
             }
 
             }
−
             #for_en #myBody {
+
             #for_en #myBody #overview_P a:hover {
−
                background-color:rgb(230,230,230);
+
−
                margin:0;
+
−
                padding: 0;
+
−
                text-align: center;
+
−
                font-style: bold;
+
−
                /* min-width: 100%; */
+
−
                position: relative;
+
−
/*                left: -15px;
+
−
bottom: -21px; */
+
−
            }
+
−
            #for_en #myBody p {
+
−
                font-family: gill_sans_light !important;
+
−
            }
+
−
            #for_en #myBody #mybackimg {
+
−
                width:1150px;
+
−
                min-width: 1150px;
+
−
                margin:0 auto;
+
−
                height: 373px;
+
−
                position: relative;
+
−
                bottom: 195px;
+
−
                /* background-image: url('https://static.igem.org/mediawiki/2016/f/f6/SYSU-Software-Shortcut.png'); */
+
−
            }
+
−
            #for_en #myBody #mybackimg p {
+
−
                color:white !important;
+
−
            }
+
−
            #myBody ul {
+
−
                padding: 0;
+
−
                margin: 0;
+
−
                list-style: none;
+
−
            }
+
−
 
+
−
            #myfooter {
+
−
                background-image: url('https://static.igem.org/mediawiki/2016/6/65/SYSU-Software-footer-overview.png');
+
−
                width:100%;
+
−
                height:131px;
+
−
                background-size: cover;
+
−
                /* height:131px; */
+
−
            }
+
−
            #navigator {
+
−
                text-align: left;
+
−
            }
+
−
 
+
−
            #menuContainer .logo {
+
−
                /*float: left;*/
+
−
                display: inline-block;
+
−
                margin: 10px 5px;
+
−
                transition: all 0.1s;
+
−
                -moz-transition: all 0.1s; /* Firefox 4 */
+
−
                -webkit-transition: all 0.1s; /* Safari 和 Chrome */
+
−
                -o-transition: all 0.1s;
+
−
                /*position:relative;*/
+
−
                /*top:4px;*/
+
−
            }
+
−
 
+
−
 
+
−
            #menuContainer.scroll {
+
−
                opacity: 0.7;
+
−
                height: inherit;
+
−
            }
+
−
            #menuContainer.scroll .bar2, #menuContainer.scroll .bar4, #menuContainer.scroll .bar5, #menuContainer.scroll .bar6, #menuContainer.scroll .bar7, #menuContainer.scroll .bar9 {
+
−
                opacity: 0;
+
−
            }
+
−
            #menuContainer.scroll .logo {
+
−
                /*float: left;*/
+
−
                display: inline-block;
+
−
                margin: 0px 5px;
+
−
            }
+
−
            #menuContainer.scroll #menu {
+
−
                position: relative;
+
−
                top: 15px;
+
−
                margin-top: 0px;
+
−
            }
+
−
 
+
−
            #menuContainer ul li {
+
−
              box-sizing:content-box;
+
−
            }
+
−
            #sideMenu {
+
−
                position: absolute;
+
−
 
+
−
            }
+
−
            #menuContainer .img-container {
+
−
                float: left;
+
−
                display: block;
+
−
            }
+
−
 
+
−
            #menuContainer a {
+
−
                text-decoration: none;
+
−
                outline-style: none;
+
−
                color: #6c78ef;
+
−
            }
+
−
 
+
−
 
+
−
            #menuContainer a:active {
+
−
                text-decoration: none;
+
−
                outline-style: none;
+
−
                /* color: rgba(43, 210, 174, 1); */
+
−
            }
+
−
 
+
−
            #menuContainer a:hover {
+
−
                text-decoration: none;
+
−
                outline-style: none;
+
−
                /* color: rgba(43, 210, 174, 1); */ 
+
−
            }
+
−
            /* #menuContainer #interlab_Interlab {
+
−
                color:rgb(40,148,169);
+
−
            } */
+
−
            /* Creates a container that will wrap all of the content inside your wiki pages. */
+
−
 
+
−
            /* Creates the container for the menu */
+
−
            /*MENU STYLING */
+
−
            /*Styling for the links in the menu */
+
−
 
+
−
            #menuContainer  {
+
−
                font-family: gill_sans_light;
+
−
                font-size: 15px;
+
−
                width: 100%;
+
−
                height: 88px;
+
−
                top:17px;
+
−
                position: fixed;
+
−
                /*text-align: center;*/
+
−
                z-index:100;
+
−
                background-color: #000;
+
−
                /* width: 100%; */
+
−
                margin-bottom: 15px;
+
−
                /* overflow:hidden; */
+
−
            /*    background-color: rgb(229,229,229); */
+
−
                /*opacity: 0.7;*/
+
−
                transition: all 1s;
+
−
                -moz-transition: all 1s; /* Firefox 4 */
+
−
                -webkit-transition: all 1s; /* Safari 和 Chrome */
+
−
                -o-transition: all 1s;
+
−
            }
+
−
 
+
−
            #menuContainer #oplayer {
+
−
                opacity: 0.7;
+
−
                position: fixed;
+
−
                width: 100%;
+
−
                /*height: 40px;*/
+
−
                background-color: #000;
+
−
                z-index: -1;
+
−
            }
+
−
 
+
−
            #menuContainer #igem_logo {
+
−
                margin-left: 80px;
+
−
                height: 60px;
+
−
                width: 100px;
+
−
                float: left;
+
−
                background-image: url("https://static.igem.org/mediawiki/2016/6/6c/SYSU-Software-Navigator-craft_logo.png");
+
−
                background-position: center;
+
−
                background-size: 40px 40px;
+
−
                text-align: center;
+
−
            }
+
−
 
+
−
            #menuContainer a {
+
−
                color: #fff;
+
−
                text-decoration:none;
+
−
                font-weight: bold;
+
−
            }
+
−
 
+
−
            #menuContainer  #menu {
+
−
                /*float: left;*/
+
−
                /*margin-left: 34px;*/
+
−
                /*width:85%;*/
+
−
                /*display: inline-block;*/
+
−
                margin-left: 180px;
+
−
                margin-top: 30px;
+
−
            }
+
−
 
+
−
            /* Sets the style for lists inside menuContainer  */
+
−
            #menuContainer  #menu ul {
+
−
                height: 40px;
+
−
                width: 100%;
+
−
                /*width: 1100px;*/ /*this is going to be modified*/
+
−
                list-style: none;
+
−
                font-size: 19px;
+
−
                /*clear: both;*/
+
−
                margin: 0 auto;
+
−
            }
+
−
 
+
−
            /*Styles the list items to become menu buttons */
+
−
            #menuContainer ul li {
+
−
                height: 30px;
+
−
                padding-top: 25px;
+
−
                padding-left: 1.5%;
+
−
                padding-right: 1.5%;
+
−
                display: block;
+
−
                float: left;
+
−
                /*line-height: 114px;*/
+
−
                /*position: relative;*/
+
−
                /*right:5%;*/
+
−
                /* margin-top:-4px;*/
+
−
            }
+
−
           
+
−
            #menuContainer ul li div {
+
−
                line-height: 20px;
+
−
            }
+
−
            #menuContainer:hover {
+
−
                opacity: 1;
+
−
            }
+
−
           
+
−
 
+
−
            #menuContainer ul li p {
+
−
                font-size: 16px;
+
−
                line-height: 24px;
+
−
            }
+
−
            #Pro_div {
+
−
                position: absolute;
+
−
                opacity: 0;
+
−
                background-color: rgb(0,3,15);
+
−
                margin-top: 5px;
+
−
            }
+
−
            #menuContainer ul li:hover #Pro_div {
+
−
                opacity: 1;
+
−
                transition: all 2s;
+
−
                -moz-transition: all 2s; /* Firefox 4 */
+
−
                -webkit-transition: all 2s; /* Safari 和 Chrome */
+
−
                -o-transition: all 2s;
+
−
            }
+
−
            .Pro_class {
+
−
                position: relative;
+
−
                right:8px;
+
−
            }
+
−
            .Pro_class:hover p {
+
−
                opacity: 1;
+
 
                 color: rgb(225,135,47);
 
                 color: rgb(225,135,47);
−
                transition: all 1s;
 
−
                -moz-transition: all 1s; /* Firefox 4 */
 
−
                -webkit-transition: all 1s; /* Safari 和 Chrome */
 
−
                -o-transition: all 1s;
 
 
             }
 
             }
−
             #menuContainer .bar1 {
+
             #for_en #myBody #overview_P a:active {
−
                margin-top: 6px;
+
−
                width:5px;
+
−
                height:177px;
+
−
                top:6px;
+
−
                right:6px;
+
−
                position: relative;
+
−
                background-color: rgb(225,135,47);
+
−
            }
+
−
            #menuContainer .interlab_Project {
+
 
                 color: rgb(225,135,47);
 
                 color: rgb(225,135,47);
−
                transition: all 1s;
 
−
                -moz-transition: all 1s; /* Firefox 4 */
 
−
                -webkit-transition: all 1s; /* Safari 和 Chrome */
 
−
                -o-transition: all 1s;
 
−
            }
 
−
 
−
 
−
 
−
            #menuContainer ul li:hover .bar2 {
 
−
                margin-top: 6px;
 
−
                height: 8px;
 
−
                background-color: rgb(203,83,94);
 
−
            }
 
−
            #menuContainer ul li:hover .interlab_Modeling {
 
−
                color: rgb(203,83,94);
 
−
                transition: all 1s;
 
−
                -moz-transition: all 1s; /* Firefox 4 */
 
−
                -webkit-transition: all 1s; /* Safari 和 Chrome */
 
−
                -o-transition: all 1s;
 
−
            }
 
−
 
−
            #HP_div {
 
−
                position: absolute;
 
−
                opacity: 0;
 
−
                background-color: rgb(0,3,15);
 
−
                margin-top: 5px;
 
−
            }
 
−
            #menuContainer ul li:hover #HP_div {
 
−
                opacity: 1;
 
−
                transition: all 2s;
 
−
                -moz-transition: all 2s; /* Firefox 4 */
 
−
                -webkit-transition: all 2s; /* Safari 和 Chrome */
 
−
                -o-transition: all 2s;
 
−
            }
 
−
            .HP_class {
 
−
                position: relative;
 
−
                right:8px;
 
−
            }
 
−
            .HP_class:hover p {
 
−
                color: rgb(24,119,66);
 
−
                transition: all 1s;
 
−
                -moz-transition: all 1s; /* Firefox 4 */
 
−
                -webkit-transition: all 1s; /* Safari 和 Chrome */
 
−
                -o-transition: all 1s;
 
−
            }
 
−
            #menuContainer .bar3 {
 
−
                /* margin-top: 6px; */
 
−
                width:5px;
 
−
                height: 148px;
 
−
                position: relative;
 
−
                top:8px;
 
−
                right:6px;
 
−
                background-color: rgb(24,119,66);
 
−
            }
 
−
            #menuContainer .interlab_Human:hover {
 
−
                color: rgb(24,119,66);
 
−
                transition: all 1s;
 
−
                -moz-transition: all 1s; /* Firefox 4 */
 
−
                -webkit-transition: all 1s; /* Safari 和 Chrome */
 
−
                -o-transition: all 1s;
 
−
            }
 
−
 
−
 
−
            #menuContainer ul li:hover .bar4 {
 
−
                margin-top: 6px;
 
−
                height: 8px;
 
−
                background-color: rgb(182,199,171);
 
−
            }
 
−
            #menuContainer ul li:hover .interlab_Colla {
 
−
                color: rgb(182,199,171);
 
−
                transition: all 1s;
 
−
                -moz-transition: all 1s; /* Firefox 4 */
 
−
                -webkit-transition: all 1s; /* Safari 和 Chrome */
 
−
                -o-transition: all 1s;
 
−
            }
 
−
            #menuContainer ul li:hover .bar5 {
 
−
                margin-top: 6px;
 
−
                height: 8px;
 
−
                background-color: rgb(151,40,40);
 
−
            }
 
−
            #menuContainer ul li:hover .interlab_Safety {
 
−
                color: rgb(151,40,40);
 
−
                transition: all 1s;
 
−
                -moz-transition: all 1s; /* Firefox 4 */
 
−
                -webkit-transition: all 1s; /* Safari 和 Chrome */
 
−
                -o-transition: all 1s;
 
−
            }
 
−
            #menuContainer ul li:hover .bar6 {
 
−
                margin-top: 6px;
 
−
                height: 8px;
 
−
                background-color: rgb(124,114,161);
 
−
            }
 
−
            #menuContainer ul li:hover .interlab_Attr {
 
−
                color: rgb(124,114,161);
 
−
                transition: all 1s;
 
−
                -moz-transition: all 1s; /* Firefox 4 */
 
−
                -webkit-transition: all 1s; /* Safari 和 Chrome */
 
−
                -o-transition: all 1s;
 
−
            }
 
−
            #menuContainer ul li:hover .bar7 {
 
−
                margin-top: 6px;
 
−
                height: 8px;
 
−
                background-color: rgb(40,148,169);
 
−
            }
 
−
            #menuContainer ul li:hover .interlab_Interlab {
 
−
                color: rgb(40,148,169);
 
−
                transition: all 1s;
 
−
                -moz-transition: all 1s; /* Firefox 4 */
 
−
                -webkit-transition: all 1s; /* Safari 和 Chrome */
 
−
                -o-transition: all 1s;
 
−
            }
 
−
 
−
 
−
            #Team_div {
 
−
                position: absolute;
 
−
                opacity: 0;
 
−
                background-color: rgb(0,3,15);
 
−
                margin-top: 5px;
 
−
            }
 
−
            #menuContainer ul li:hover #Team_div {
 
−
                opacity: 1;
 
−
                transition: all 2s;
 
−
                -moz-transition: all 2s; /* Firefox 4 */
 
−
                -webkit-transition: all 2s; /* Safari 和 Chrome */
 
−
                -o-transition: all 2s;
 
−
            }
 
−
            .Team_class {
 
−
                position: relative;
 
−
                right: 8px;
 
−
            }
 
−
            .Team_class:hover p {
 
−
                color: rgb(154,166,134);
 
−
                transition: all 1s;
 
−
                -moz-transition: all 1s; /* Firefox 4 */
 
−
                -webkit-transition: all 1s; /* Safari 和 Chrome */
 
−
                -o-transition: all 1s;
 
−
            }
 
−
            #menuContainer .bar8 {
 
−
                /* margin-top: 6px; */
 
−
                width:5px;
 
−
                position: relative;
 
−
                right:6px;
 
−
                height: 116px;
 
−
                top:7px;
 
−
                background-color: rgb(154,166,134);
 
−
            }
 
−
            #menuContainer .interlab_Team:hover {
 
−
                color: rgb(154,166,134);
 
−
                transition: all 1s;
 
−
                -moz-transition: all 1s; /* Firefox 4 */
 
−
                -webkit-transition: all 1s; /* Safari 和 Chrome */
 
−
                -o-transition: all 1s;
 
−
            }
 
−
 
−
 
−
            #menuContainer ul li:hover .bar9 {
 
−
                margin-top: 6px;
 
−
                height: 8px;
 
−
                background-color: rgb(185,156,85);
 
−
            }
 
−
            #menuContainer ul li:hover .interlab_Medals {
 
−
                color: rgb(185,156,85);
 
−
                transition: all 1s;
 
−
                -moz-transition: all 1s; /* Firefox 4 */
 
−
                -webkit-transition: all 1s; /* Safari 和 Chrome */
 
−
                -o-transition: all 1s;
 
−
            }
 
−
 
−
 
−
            /*For the menu buttons, changes the color when hovering*/
 
−
            #menuContainer ul li {
 
−
                transition: all 1s;
 
−
                -moz-transition: all 1s; /* Firefox 4 */
 
−
                -webkit-transition: all 1s; /* Safari 和 Chrome */
 
−
                -o-transition: all 1s;
 
−
            }
 
−
 
−
 
−
            /*Submenus are not displayed as default*/
 
−
            /* #menuContainer li ul {
 
−
                width: 100%;
 
−
                position: fixed;
 
−
                top: 56px;
 
−
                left: 0px;
 
−
                padding-left: 150px;
 
−
                visibility: hidden;
 
−
                opacity: 0;
 
−
            } */
 
−
 
−
            /*Submenus are displayed when hovering the menu button */
 
−
            /* #menuContainer li:hover ul {
 
−
                display: inline-block;
 
−
                visibility: visible;
 
−
                opacity: 1;
 
−
                height: 30px;
 
−
                position: fixed;
 
−
                top: 56px;
 
−
                float:left;
 
−
            } */
 
−
 
−
            #menuContainer li:hover #sub_oplayer {
 
−
                visibility: visible;
 
−
                opacity: 0.3;
 
−
            }
 
−
 
−
            /*Style the submenu buttons*/
 
−
/*            #menuContainer li ul li{
 
−
    color: #313131;
 
−
    padding-top: 5px;
 
−
    padding-bottom: 0px;
 
−
    padding-left: 20px;
 
−
    padding-right: 20px;
 
−
    height: 30px;
 
−
    overflow: hidden;
 
−
    width: auto;
 
−
    display: block;
 
−
    float: left;
 
−
    text-align: center;
 
−
    opacity: 1;
 
−
} */
 
−
 
−
 
−
            #menuContainer #team {
 
−
              left:50%;
 
−
            }
 
−
 
−
 
−
            #myBody #Intro_P {
 
−
                position: relative;
 
−
                bottom:283px;
 
−
                font-family: generica_regular !important;
 
−
            }
 
−
            #myBody #Intro_P li {
 
−
                text-align: center;
 
−
                font-size:16px;
 
−
                list-style-type:none;
 
−
                color: white;
 
−
                font-style:bold;
 
−
            }
 
−
            #myBody #Intro_P li p {
 
−
                text-align: center;
 
−
                font-family:gill_sans_light;
 
−
            }
 
−
 
−
            #mybanner1 {
 
−
                background-color: rgb(0,9,38);
 
−
            }
 
−
 
−
            .banner {
 
−
                width:1150px;
 
−
                min-width: 1150px;
 
−
                margin:0 auto;
 
−
                /* max-width: 100%; */
 
−
                /* background-size: cover; */
 
−
                /* background-position: center; */
 
−
                height: 600px;
 
−
                position:relative;
 
−
                top:40px;
 
−
            }
 
−
            .banner img {
 
−
                width:100%;
 
−
                height:595px;
 
−
                color:black;
 
−
            }
 
−
 
−
            #overview_bar1 {
 
−
                width:8px;
 
−
                height: 18px;
 
−
                background-color: rgb(225,135,47);
 
−
                margin-left: 453px;
 
−
                position: relative;
 
−
                top: 45px;
 
−
            }
 
−
            #overview_bar2 {
 
−
                width:8px;
 
−
                height: 18px;
 
−
                background-color: rgb(225,135,47);
 
−
                margin-left: 682px;
 
−
                position: relative;
 
−
                bottom: 52px;
 
−
            }
 
−
 
−
            #myBody #overview_DE img {
 
−
                position: relative;
 
−
                top:-8px;
 
−
            }
 
−
            #myBody #overview_DE p {
 
−
                text-align: center;
 
−
                font-size: 33px;
 
−
            }
 
−
            #myBody #overview_P p {
 
−
                line-height: 40px;
 
−
            }
 
−
 
−
            #myBody #overview_P {
 
−
                color: rgb(25,25,25);
 
−
            }
 
−
            #myBody #overview_P ul {
 
−
                overflow: hidden;
 
−
                margin-top: 20px;
 
−
                margin-left: 20%;
 
−
                margin-bottom: 65px;
 
−
            }
 
−
            #myBody #overview_P li {
 
−
                float: left;
 
−
                list-style-type:none;
 
−
            }
 
−
            #myBody #overview_P p {
 
−
                display: table;
 
−
                margin:0 auto;
 
−
                font-size: 17px;
 
−
            }
 
−
            #myBody #overview_DE {
 
−
                font-size: 32px;
 
−
                color: rgb(153,153,153);
 
−
                overflow: hidden;
 
−
                margin-left: auto;
 
−
                padding-left: 8px;
 
−
                position: relative;
 
−
                left:8px;
 
−
                margin-right: auto;
 
−
                margin-bottom: 25px;
 
−
                font-style: bold;
 
−
                padding-top: 85px;
 
−
            }
 
−
            #h1seg {
 
−
                padding-left:14px;
 
−
            }
 
−
            #menuContainer ul li img {
 
−
                height: 200%;
 
−
                position: relative;
 
−
                bottom: 36px;
 
 
             }
 
             }
 
             </style>
 
             </style>
Line 1,409: Line 654:
 
                                             <div class = "Pro_class" class style="display:block"><a href="https://2016.igem.org/Team:SYSU-Software/Description"><p>Description</p></a></div>
 
                                             <div class = "Pro_class" class style="display:block"><a href="https://2016.igem.org/Team:SYSU-Software/Description"><p>Description</p></a></div>
 
                                             <div class = "Pro_class" style="display:block"><a href="https://2016.igem.org/Team:SYSU-Software/Design"><p>Design</p></a></div>
 
                                             <div class = "Pro_class" style="display:block"><a href="https://2016.igem.org/Team:SYSU-Software/Design"><p>Design</p></a></div>
−
                                             <div class = "Pro_class" style="display:block"><a href="https://2016.igem.org/Team:SYSU-Software/Feature"><p>Feature</p></a></div>
+
                                             <div class = "Pro_class" style="display:block"><a href="https://2016.igem.org/Team:SYSU-Software/Feature"><p>Features</p></a></div>
 
                                             <div class = "Pro_class" style="display:block"><a href="https://2016.igem.org/Team:SYSU-Software/Proof"><p>Proof</p></a></div>
 
                                             <div class = "Pro_class" style="display:block"><a href="https://2016.igem.org/Team:SYSU-Software/Proof"><p>Proof</p></a></div>
 
                                             <div class = "Pro_class" style="display:block"><a href="https://2016.igem.org/Team:SYSU-Software/Demonstrate"><p>Demonstrate</p></a></div>
 
                                             <div class = "Pro_class" style="display:block"><a href="https://2016.igem.org/Team:SYSU-Software/Demonstrate"><p>Demonstrate</p></a></div>
Line 1,505: Line 750:
 
                         <div id = "overview_P">
 
                         <div id = "overview_P">
 
                             <ul>
 
                             <ul>
−
                                 <li><p>CRFAT (Community-based Retro-synthetic Analysis Functional plaTform) is an integrated software for crafting </p></li>
+
                                 <li><p><a href="http://craft.sysusoftware.info">CRAFT</a>(Community-based Retro-synthetic Analysis Functional plaTform) is an integrated software for</p></li>
−
                                 <li><p>synthetic biological system from design, validation to share. CRAFT has three functional parts: CRAFT Designer, </p></li>
+
                                 <li><p>crafting synthetic biological system from design, validation to share. CRAFT aims at constructing</p></li>
−
                                 <li><p>CRAFT Square and Satellite. CRAFT Designer follows the concept of evolution simulating natural selection </p></li>  
+
                                 <li><p><a href="https://2016.igem.org/Team:SYSU-Software/Description">community-level</a> synthetic biological systems in specific environments. We are inspired by evolution theory</p></li>
−
                                 <li><p>in which users can customize their synthetic biological system based on their requirements including background</p></li>
+
                                 <li><p>and <a href="https://2016.igem.org/Team:SYSU-Software/Design">“Design and Redesign”</a> principle in synthetic biology, regarding customized restrictions as selection</p></li>
−
                                 <li><p>environment. CRAFT Designer also provides users with standard protocols; it refers to the concept of "Design</p></li>
+
                                 <li><p>pressure, and exporting protocols as standardized protocol. CRAFT can be divided into three parts, <a href="https://2016.igem.org/Team:SYSU-Software/Design#jumpforcon">CRAFT Designer</a>,</p></li>
−
                                 <li><p>and Redesign” in synthetic biology and applies it to protocol design: fill the standard protocol frameworks </p></li>
+
                                 <li><p> system crafting engine; <a href="https://2016.igem.org/Team:SYSU-Software/Design#jump_1">CRAFT Square</a>, a platform for user a synthetic biological communication and</p></li>
−
                                 <li><p>with messages corresponding to users’ designed systems. CRAFT Square is a communication platform where </li></p>
+
                                 <li><p>mutual assistance; <a href="https://2016.igem.org/Team:SYSU-Software/Design#jump_2">Satellite</a>, a distributed computing plug-in. We have developed five <a href="https://2016.igem.org/Team:SYSU-Software/Model">models</a></p></li>
−
                                <li><p>users can share and exchange their ideas, or modify other designs to suit their own demands. Satellite serves</li></p>
+
                                 <li><p>to support CRAFT, and validated its concept and function with <a href="https://2016.igem.org/Team:SYSU-Software/Proof">wet-lab experiment</a>.</p></li>
−
                                 <li><p>as the distributed computing plug-in in CRAFT, undertaking nearly all calculations in the whole platform.</li></p>
+
 
                             </ul>
 
                             </ul>
 
                         </div>
 
                         </div>

Latest revision as of 02:23, 20 October 2016

SYSU-Software:Project

ABSTRACT

  • CRAFT(Community-based Retro-synthetic Analysis Functional plaTform) is an integrated software for

  • crafting synthetic biological system from design, validation to share. CRAFT aims at constructing

  • community-level synthetic biological systems in specific environments. We are inspired by evolution theory

  • and “Design and Redesign” principle in synthetic biology, regarding customized restrictions as selection

  • pressure, and exporting protocols as standardized protocol. CRAFT can be divided into three parts, CRAFT Designer,

  • system crafting engine; CRAFT Square, a platform for user a synthetic biological communication and

  • mutual assistance; Satellite, a distributed computing plug-in. We have developed five models

  • to support CRAFT, and validated its concept and function with wet-lab experiment.