Team:SYSU-Software

From 2012.igem.org

(Difference between revisions)
 
(115 intermediate revisions not shown)
Line 1: Line 1:
-
<!DOCTYPE html>
+
<style type="text/css">
-
<html lang="en">
+
.style1 {
-
<head> <style>
+
color: #525252;
-
  /* Getting the new tags to behave */
+
-
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video{ display: block; }
+
-
mark, rp, rt, ruby, summary, time{ display: inline }
+
-
 
+
-
/* Global properties ======================================================== */
+
-
body {
+
-
background:#CCC;
+
-
font-family:Arial, Helvetica, sans-serif;
+
-
font-size:100%;
+
-
line-height:1.125em;
+
-
color:#24242424;
+
}
}
-
html {width:975px;
+
.style2 {
-
margin-left:187px;
+
font-size: xx-large;
}
}
-
html, body { height:100%;}
+
</style>
 +
{{:Team:SYSU-Software/menu}}
 +
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
 +
<head>
 +
<title>Team:SYSU-Software</title>
 +
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 +
<meta http-equiv="Content-Style-Type" content="text/css" />
 +
<link href="https://2012.igem.org/Team:SYSU-Software/style.css?action=raw&ctype=text/css" rel="stylesheet" type="text/css" ><link href="https://2012.igem.org/Team:SYSU-Software/layout.css?action=raw&ctype=text/css" rel="stylesheet" type="text/css" >
 +
<script src="https://2012.igem.org/Team:SYSU-Software/js/jquery-1.4.2.min.js?action=raw&ctype=text/javascript" type="text/javascript"></script>
 +
<script src="https://2012.igem.org/Team:SYSU-Software/js/jquery.faded.js?action=raw&ctype=text/javascript" type="text/javascript"></script>
 +
<script src="https://2012.igem.org/Team:SYSU-Software/js/tabs.js?action=raw&ctype=text/javascript" type="text/javascript"></script>
 +
<script src="https://2012.igem.org/Team:SYSU-Software/js/script.js?action=raw&ctype=text/javascript" type="text/javascript"></script>
 +
<!--[if lt IE 7]>
 +
<link href="./ie_style.css?action=raw&ctype=text/css" rel="stylesheet" type="text/css" />
 +
  <script type="text/javascript" src="./js/ie_png.js?action=raw&ctype=text/javascript"></script>
 +
  <script type="text/javascript">
 +
      ie_png.fix('.png, #header, #header .nav a, #faded strong, #faded .controls a');
 +
  </script>
 +
<![endif]-->
 +
</head>
 +
<body id="page1">
 +
  <div class="tail-top">
 +
    <div id="main">
 +
      <!-- header -->
 +
      <div id="header">
 +
        <div id="logopic"><font SIZE="3">
 +
<p>
 +
<img src= https://static.igem.org/mediawiki/igem.org/1/11/5556.png width="300" height="100"></p>
 +
</font>&nbsp;</div>
 +
        <!-- .nav -->
 +
        <ul class="nav">
 +
           
 +
          <li><a href="https://2012.igem.org/Team:SYSU-Software/Project" >Project<span>Software Project</span></a></li>
 +
          <li><a href="https://2012.igem.org/Team:SYSU-Software/Models">
 +
Models<span>Models &amp; Algorithm</span></a></li>
 +
          <li><a href="https://2012.igem.org/Team:SYSU-Software/Tutorial">Tutorial<span>Guidance book and videos</span></a></li>
 +
          <li><a href="https://2012.igem.org/Team:SYSU-Software/Team">Team<span>Instructor and members</span></a></li>
 +
         
 +
             
 +
                 
 +
          <li><a href="https://2012.igem.org/Team:SYSU-Software/WorldJamboree">
 +
For Special Awards <span>For World Jamboree awards</span></a><span lang="zh-cn"><span class="style1">
 +
</span></span></li>
 +
          <li><a href="https://2012.igem.org/Team:SYSU-Software/Practice">Tips<span>Human practice, safety...</span></a></li>
 +
        </ul>
 +
        <!-- /.nav -->
 +
        <!-- faded slider -->
 +
        <div id="faded">
 +
          <ul><li>
 +
            <a href="https://2012.igem.org/Team:SYSU-Software/WorldJamboree">
 +
            <img  src=  https://static.igem.org/mediawiki/2012/5/57/Golden-crystal-butterfly.png  alt="" width="494" height="444"  ></a>
 +
           
 +
            </li>
 +
         
 +
            <li>
 +
            <img src=  https://static.igem.org/mediawiki/igem.org/4/46/Sdgsfsdd3.png alt="" >
 +
              <strong>creative ideas</strong>
 +
              </li>
 +
           
-
/* Global Structure ============================================================= */
+
          </ul>
-
.container {
+
          <ul class="controls">
-
margin: 0 auto;
+
          <li><a href="#" class="prev"></a></li>
-
position: relative;
+
            <li><a href="#" class="next"></a></li>
-
width: 975px;
+
          </ul>
-
font-size:.8125em;
+
        </div>
-
}
+
        <!-- //faded slider -->
 +
      </div>
 +
      <!-- content -->
 +
      <div id="content2">
 +
      <!-- tabs -->
 +
        <div class="wrapper">
 +
          <div class="wrapper">
 +
            <ul class="tabs">
 +
            <li class="first"><a href="#tab0">Overview</a></li>
-
/* Header */
+
              <li style="left: 0px; top: 0px" ><a href="#tab1">Browser</a></li>
-
header{
+
              <li><a href="#tab2">Biobrick</a></li>
-
+
              <li><a href="#tab3">Riboswitch</a></li>
-
height:50px;
+
-
overflow:hidden;
+
-
background:#FFFFFF/*repeat-x;*/
+
-
border-radius: 50px;
+
-
}
+
-
+
-
/*Gallery*/
+
-
#gallery {
+
-
height:250px;
+
-
overflow:hidden;
+
-
background:url(../images/gallerry-bg.gif) 0 0 ;/*repeat-x;*/
+
-
}
+
-
+
-
/* Content */
+
-
#content {
+
-
float: left;
+
-
width: 572px;
+
-
}
+
-
+
-
/* Sidebar */
+
-
aside{
+
-
float: left;
+
-
width: 302px;
+
-
margin-right:52px;
+
-
}
+
-
+
-
/* Footer */
+
-
footer{
+
-
padding:20px 0 22px 0;
+
-
border-top:5px solid #eee;
+
-
}
+
 +
<li><a href="#tab5">MetaNetwork</a></li>
 +
              <li><a href="#tab6">Simulator</a></li>
 +
              <li><a href="#tab7">G-Circle</a></li>
 +
              <li><a href="#tab8">Clotho</a></li>
-
/* Left & Right alignment */
+
            </ul>
 +
          </div>
 +
          <div class="tab_container">
 +
          <div id="tab0" class="tab_content">
 +
            <div class="wrapper">
 +
             
 +
                <div class="extra-wrap">
 +
                <p><img class="img-indent" src="https://static.igem.org/mediawiki/igem.org/7/7c/Cvvxx.png" alt="" width="300px" height="230px" style="float: left ;"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Synthetic Biology, depending on interdisciplinary knowledge and experience , cooperates wet and dry experiments to create artificial biological systems . Our team has developed a novel software system,
 +
<a href="https://2012.igem.org/Team:SYSU-Software/Project">BiArkit</a>, to facilitate the design and engineering of specially functional systems. For visualization of genomic data and expression level of functional genes, we develop
 +
<a href="https://2012.igem.org/Team:SYSU-Software/Project#r2"><FONT color="blue">GenomeBrowser</FONT></a> and
 +
<a href="https://2012.igem.org/Team:SYSU-Software/Project#r8"><FONT color="blue">G-Circle</FONT></a>  Besides,
 +
<a href="https://2012.igem.org/Team:SYSU-Software/Project#r3"><FONT color="blue">Biobrick</FONT></a> is localized and transformed into searching kit for users to get comprehensive information conveniently. Further,
 +
<a href="https://2012.igem.org/Team:SYSU-Software/Project#r4"><FONT color="blue">Riboswitch</FONT></a> and
 +
<a href="https://2012.igem.org/Team:SYSU-Software/Project#r5"><FONT color="blue">SiRNA</FONT></a> are designed to compute out potential regulatory parts for engineering systems. For processing data from system level,
 +
<a href="https://2012.igem.org/Team:SYSU-Software/Project#r6"><FONT color="blue">MetaNetwork</FONT></a> can illustrate information of various biological pathways on the graphical and user-friendly interface. And
 +
<a href="https://2012.igem.org/Team:SYSU-Software/Project#r7"><FONT color="blue">Simulator</FONT></a> is intended for modifying and simulating genome-scale metabolic models, which involves many kinds of analyses to predict possible results of conditional changes in experiments.All the functional modules have been successfully added to the
 +
<a href="https://2012.igem.org/Team:SYSU-Software/Clotho">Clotho</a> Frame.
 +
<a href="https://2012.igem.org/Team:SYSU-Software/Project" class="link1"  style="float: right ;""><b>read more</b></a></p>
 +
                 
 +
                  <div class="wrapper"></div>
 +
                </div>
 +
              </div>
 +
            </div>
-
.fleft { float:left;}
+
          <div id="tab1" class="tab_content">
-
.fright { float:right;}
+
            <div class="wrapper">
-
.clear { clear:both;}
+
              <img class="img-indent" src="https://static.igem.org/mediawiki/igem.org/3/3e/Genome.png" alt="" width="300px" height="230px"/>
 +
                <div class="extra-wrap">
 +
                <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; This
 +
is the section for sequences information. With this browser, researchers can
 +
surf for genomes from the typical model organisms. Users can locate the
 +
interested genes in terms of the input items, including name, product or
 +
coordinate. In addition, new genomes data will be saved on our website as
 +
downloadable contents.</p>
 +
                 
 +
                  <div class="wrapper"><a href="https://2012.igem.org/Team:SYSU-Software/Project#r2" class="link1"><b>read more</b></a></div>
 +
                </div>
 +
              </div>
 +
            </div>
 +
            <div id="tab2" class="tab_content">
 +
            <div class="wrapper">
 +
              <img class="img-indent" src="https://static.igem.org/mediawiki/igem.org/4/4f/Biobrick.png" alt="" width="300px" height="230px"/>
 +
                <div class="extra-wrap">
 +
                <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;This is the section for parts information. It can facilitate researchers to search features and functions of Biobricks documented in the Registry of Standard Biological Parts. All of the relevant operations can be completed without connecting with the Internet.</p>                 
 +
                  <div class="wrapper"><a href="https://2012.igem.org/Team:SYSU-Software/Project#r3" class="link1"><b>read more</b></a></div>
 +
                </div>
 +
              </div>
 +
            </div>
 +
            <div id="tab3" class="tab_content">
 +
            <div class="wrapper">
 +
              <img class="img-indent" src="https://static.igem.org/mediawiki/igem.org/a/ad/Riboswitch.png" alt="" width="300px" height="230px" />
 +
                <div class="extra-wrap">
 +
                <p><span lang="zh-cn">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span>
 +
<span lang="EN-US">This is the section for generating parts
 +
information. It can assist researchers to design the
 +
sequences and structures of potential riboswitches according
 +
to their inputs and choices of aptamers. Both of the
 +
up-regulation and down-regulation riboswiches can be
 +
provided by this kit.</span></p>
 +
                                    <div class="wrapper"><a href="https://2012.igem.org/Team:SYSU-Software/Project#r4" class="link1"><b>read more</b></a></div>
 +
                </div>
 +
              </div>
 +
            </div>
 +
            <div id="tab4" class="tab_content">
 +
            <div class="wrapper">
 +
              <img class="img-indent" src="https://static.igem.org/mediawiki/igem.org/f/f9/Sirna.png" alt="" width="300px" height="230px" />
 +
                <div class="extra-wrap">
 +
                <p><span lang="zh-cn">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span>
 +
<span lang="EN-US">This is the section for generating parts
 +
information. It can design another regulator in engineering
 +
biological systems – siRNA. According to the input
 +
sequences, it can figure out the potential siRNA
 +
automatically.</span></p>
 +
                                    <div class="wrapper"><a href="https://2012.igem.org/Team:SYSU-Software/Project#r5" class="link1"><b>read more</b></a></div>
 +
                </div>
 +
              </div>
 +
            </div>
 +
            <div id="tab5" class="tab_content">
 +
            <div class="wrapper">
 +
              <img class="img-indent" src="https://static.igem.org/mediawiki/igem.org/b/b2/Designer.png" alt="" width="300px" height="230px" />
 +
                <div class="extra-wrap">
 +
                <p><span lang="zh-cn">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span>
 +
<span lang="EN-US">This is the section for system information. Given the friendly interface, researchers can explore and acquire their interested gene’s relevant pathways and networks in one map. Users can even drag every graphic element in the maps to check the information conveniently and effectively.</span></p>
 +
                                    <div class="wrapper"><a href="https://2012.igem.org/Team:SYSU-Software/Project#r6" class="link1"><b>read more</b></a></div>
 +
                </div>
 +
              </div>
 +
            </div>
 +
            <div id="tab6" class="tab_content">
 +
            <div class="wrapper">
 +
             
 +
                <div class="extra-wrap"><img class="img-indent" src="https://static.igem.org/mediawiki/igem.org/6/6b/Simulator.png" alt="" width="300px" height="230px" style="float: left ;"/>
 +
                <p><span lang="zh-cn">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span>
 +
<span lang="EN-US">This is the section for generating system
 +
information. Based on the reconstruction of genome-scale
 +
models, researcher can use this kit to edit the existent
 +
models according to their needs. Then, they can choose
 +
different combination of analysis to predict effect from a
 +
intended loss-of –function mutation, find necessary and
 +
basic genes maintaining the whole system, predict phenotypic
 +
behavior under the given environmental conditions and
 +
interpret the coupled reaction activities.</span></p>
 +
                                    <div class="wrapper"><a href="https://2012.igem.org/Team:SYSU-Software/Project#r7" class="link1"><b>read more</b></a></div>
 +
                </div>
 +
              </div>
 +
            </div>
 +
<div id="tab8" class="tab_content">
 +
            <div class="wrapper">
 +
             
 +
                <div class="extra-wrap">
 +
<img class="img-indent" src="http://www.autodeskresearch.com/img/header_projects_clotho.jpg" alt="" width="256" height="230px"  style="float: left ;">
 +
                <p><span lang="zh-cn">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Clotho assists researchers to engineer synthetic biological systems and manage the data which is used to create them. It has been developed as the App environment that anyone can create and share new tools in it. These tools facilitate synthetic biologists to arrange their researches under the computer-based and automated- designed environment.
 +
Thus, to advanced develop the Clotho frame, we have successfully transfer the seven parts of our software, BiArkit, into Apps. Users can choose to employ our software through the Clotho media.</span></p>
 +
                                    <div class="wrapper"><a href="https://2012.igem.org/Team:SYSU-Software/Clotho" class="link1"><b>read more</b></a></div>
 +
                </div>
 +
              </div>
 +
            </div>
-
.col-1, .col-2, .col-3 { float:left;}
 
-
.alignright { text-align:right;}
+
            <div id="tab7" class="tab_content">
-
.aligncenter { text-align:center;}
+
            <div class="wrapper">
 +
            <img class="img-indent" src="https://static.igem.org/mediawiki/igem.org/4/43/G-circle.png" alt="" width="300px" height="230px" />
 +
              <div class="extra-wrap">
 +
              <p><span lang="zh-cn">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span>
 +
<span lang="EN-US">This is the section for sequence information.
 +
It can illustrate the given genome and the expression level of
 +
genes within it under different environment in one graph. In
 +
addition, we have developed it as one app and integrated it into
 +
<i>Clotho</i>.</span></p>
 +
                <p class="wrapper"><a href="https://2012.igem.org/Team:SYSU-Software/Project#r8" class="link1"><b>read more</b></a></p>
 +
                </div>
-
.wrapper {
+
              </div>
-
width:100%;
+
            </div>
-
overflow:hidden;
+
          </div>
-
}
+
        </div>
-
/* The inside class provides consistent padding. To be used often! */
 
-
.inside{ padding: 32px 37px 50px 37px; }
 
 +
            <div id="tab8" class="tab_content">
 +
            </div>
 +
        <!-- .box -->
 +
        <div class="box">
 +
        <div class="right-bot-corner">
 +
          <div class="left-bot-corner">
 +
            <div class="inner">
 +
              <div class="">
 +
                  <div class="wrapper ">
 +
                   
 +
                    <div >
 +
                      <ul >
 +
                        <li  style="text-align: center ;"><h2> <span lang="zh-cn">&nbsp;&nbsp; </span>
 +
<span class="style2">video</span></h2>
 +
<table>
 +
<tr>
 +
<td>Version 1.00 <span lang="zh-cn">Sept.2012</span></td><td>Version 1.05<span lang="zh-cn">
 +
Oct.2012</span></td>
 +
</tr>
 +
<tr>
 +
<td><iframe width="380" height="320" src="http://www.youtube.com/embed/en_OuQ8Ur_8" frameborder="0" allowfullscreen style="float: left ;margin-right: 10px;"></iframe></td>
 +
<td><iframe width="380" height="320" src="http://www.youtube.com/embed/vgP_uKks2Cg" frameborder="0" allowfullscreen style="float: left "></iframe></td>
 +
</tr>
-
/*----- form defaults -----*/
+
</table>
-
input, select, textarea {
+
                                                  </li>
-
font-family:Arial, Helvetica, sans-serif;
+
                      </ul>
-
font-size:1em;
+
                    </div>
-
vertical-align:middle;
+
                   
-
font-weight:normal;
+
                  </div>
-
}
+
                </div>
-
 
+
              </div>
-
/*----- other -----*/
+
            </div>
-
figure { margin-bottom:18px;}
+
          </div>
-
 
+
         </div>
-
.img-indent {
+
         <!-- /.box -->
-
margin:0 20px 0 0;
+
        <!-- .banners -->
-
float:left;
+
        <ul class="banners">
-
}
+
        <li>
-
.img-box {
+
<img src= "https://static.igem.org/mediawiki/2012/c/ca/Xinke.png"  alt="" width="160" height="164" ></a></li>
-
width:100%;
+
          <li >
-
overflow:hidden;
+
<img src=  "https://static.igem.org/mediawiki/2012/4/45/Shengke.png" alt="" width="160" height="163" ></a></li>
-
padding-bottom:15px;
+
          <li>
-
}
+
<img src= "https://static.igem.org/mediawiki/2012/0/0c/Shuji.png" alt="" width="152" height="156" ></a></li>
-
.img-box figure {
+
          <li class="last">
-
float:left;
+
<img src="https://static.igem.org/mediawiki/2012/b/b4/Ruanjian.png" alt="" width="167" height="64" style=" margin-top:50px;/></a><a href="#"> </li>
-
margin:0 20px 0 0;
+
-
padding:0;
+
-
}
+
-
 
+
-
.extra-wrap {
+
-
overflow:hidden;
+
-
}
+
-
 
+
-
p {margin-bottom:18px;}
+
-
.p1 { margin-bottom:9px;}
+
-
.p2 { margin-bottom:18px;}
+
-
.p3 { margin-bottom:27px;
+
-
}
+
-
 
+
-
 
+
-
/*----- txt, links, lines, titles -----*/
+
-
a {
+
-
color:#f27f02;
+
-
outline:none;
+
-
}
+
-
a:hover{
+
-
text-decoration:none;
+
-
font-size: 12%;
+
-
}
+
-
 
+
-
h1 {
+
-
font-size:34px;
+
-
line-height:1.2em;
+
-
color:#fff;
+
-
font-weight:normal;
+
-
/*background:url(../images/logo.jpg) no-repeat 0 0;*/
+
-
padding:6px 0 8px 69px;
+
-
position:absolute;
+
-
left:48px;
+
-
top:5px;
+
-
width: 80px;
+
-
height: 21px;
+
-
}
+
-
h1 a {
+
-
color:#333;
+
-
text-decoration:none;
+
-
}
+
-
h2 {
+
-
font-size:20px;
+
-
line-height:1.2em;
+
-
font-weight:normal;
+
-
color:#212222;
+
-
margin-bottom:22px;
+
-
}
+
-
h2 span {
+
-
color:#8a8a8a;
+
-
}
+
-
h3 {
+
-
font-size:1em;
+
-
margin-bottom:6px;
+
-
}
+
-
h3 a { color:#242424; }
+
-
h3 a:hover {
+
-
text-shadow: 1px 1px 1px #888;
+
-
}
+
-
 
+
-
 
+
-
 
+
-
 
+
-
/*==================boxes====================*/
+
-
.main-box {
+
-
border-top:5px solid #eaeaea;
+
-
background:#fff;
+
-
width:100%;
+
-
}
+
-
 
+
-
 
+
-
.contacts {
+
-
padding-bottom:20px;
+
-
}
+
-
.contacts li {
+
-
width:100%;
+
-
overflow:hidden;
+
-
}
+
-
.contacts li strong {
+
-
float:left;
+
-
width:95px;
+
-
}
+
-
 
+
-
 
+
-
.list1 {
+
-
margin-left:12px;
+
-
padding-bottom:18px;
+
-
}
+
-
.list1 li {
+
-
background:url(../images/arrow1.gif) no-repeat 0 6px;
+
-
padding:0 0 0 12px;
+
-
}
+
-
 
+
-
 
+
-
 
+
-
/*===== header =====*/
+
-
header nav {
+
-
float:right;
+
-
}
+
-
header nav ul li {
+
-
float:left;
+
-
}
+
-
header nav ul li a {
+
-
border-radius: 20px;
+
-
font-size:22px;
+
-
color:#000;
+
-
height:67px;
+
-
line-height:67px;
+
-
text-decoration:none;
+
-
width:101px;
+
-
text-align:center;
+
-
float:left;
+
-
/*background:#7cbc19;
+
-
background-image: gradient(top, #383282, #484095); /* FF3.6 */
+
-
background-image: -moz-linear-gradient(top, #383282, #484095); /* FF3.6 */
+
-
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #383282),color-stop(1, #484095)); /* Saf4+, Chrome */
+
-
         filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#383282', EndColorStr='#484095'); /* IE6,IE7 */
+
-
         -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#383282', EndColorStr='#484095')"; /* IE8 */*/
+
-
background:#7cbc19;
+
-
background-image: -moz-linear-gradient(top, #73b515, #86c31d); /* FF3.6 */
+
-
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #73b515),color-stop(1, #86c31d)); /* Saf4+, Chrome */
+
-
filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#73b515', EndColorStr='#86c31d'); /* IE6,IE7 */
+
-
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#73b515', EndColorStr='#86c31d')"; /* IE8 */
+
-
}
+
-
header nav ul li a.current, header nav ul li a:hover {
+
-
padding-bottom:5px;
+
-
}
+
-
+
-
header nav ul li:nth-of-type(2) a {
+
-
background-image: -moz-linear-gradient(top, #017bc8, #018ed3); /* FF3.6 */
+
-
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #017bc8),color-stop(1, #018ed3)); /* Saf4+, Chrome */
+
-
filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#017bc8', EndColorStr='#018ed3'); /* IE6,IE7 */
+
-
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#017bc8', EndColorStr='#018ed3')"; /* IE8 */
+
-
background:#FFFFFF;
+
-
}
+
-
header nav ul li:nth-of-type(3) a {
+
-
background:#7cbc19;
+
-
background-image: -moz-linear-gradient(top, #73b515, #86c31d); /* FF3.6 */
+
-
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #73b515),color-stop(1, #86c31d)); /* Saf4+, Chrome */
+
-
filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#73b515', EndColorStr='#86c31d'); /* IE6,IE7 */
+
-
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#73b515', EndColorStr='#86c31d')"; /* IE8 */
+
-
}
+
-
header nav ul li:nth-of-type(4) a {
+
-
background-image: -moz-linear-gradient(top, #017bc8, #018ed3); /* FF3.6 */
+
-
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #017bc8),color-stop(1, #018ed3)); /* Saf4+, Chrome */
+
-
filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#017bc8', EndColorStr='#018ed3'); /* IE6,IE7 */
+
-
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#017bc8', EndColorStr='#018ed3')"; /* IE8 */
+
-
background:#FFFFFF;
+
-
}
+
-
header nav ul li:nth-of-type(5) a {
+
-
background:#7cbc19;
+
-
background-image: -moz-linear-gradient(top, #73b515, #86c31d); /* FF3.6 */
+
-
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #73b515),color-stop(1, #86c31d)); /* Saf4+, Chrome */
+
-
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#73b515', EndColorStr='#86c31d'); /* IE6,IE7 */
+
-
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#73b515', EndColorStr='#86c31d')"; /* IE8 */
+
-
}
+
-
header nav ul li:nth-of-type(6) a {
+
-
background-image: -moz-linear-gradient(top, #017bc8, #018ed3); /* FF3.6 */
+
-
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #017bc8),color-stop(1, #018ed3)); /* Saf4+, Chrome */
+
-
filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#017bc8', EndColorStr='#018ed3'); /* IE6,IE7 */
+
-
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#017bc8', EndColorStr='#018ed3')"; /* IE8 */
+
-
background:#FFFFFF;
+
-
}
+
-
 
+
-
 
+
-
 
+
-
 
+
-
/*===== gallery =====*/
+
-
.roundabout-holder  {
+
-
width:650px;
+
-
height:250px;
+
-
margin:0 auto;
+
-
}
+
-
.roundabout-moveable-item {
+
-
  width: 446px;
+
-
  height: 200px;
+
-
  cursor: pointer;
+
-
border:3px solid #ccc;
+
-
border:3px solid rgba(0, 0, 0, 0.08);
+
-
  border-radius:4px;
+
-
-moz-border-radius:4px;
+
-
-webkit-border-radius:4px;
+
-
}
+
-
.roundabout-moveable-item img{
+
-
width:100%;
+
-
}
+
-
.roundabout-in-focus {
+
-
border:3px solid rgba(0, 0, 0, 0.2);
+
-
}
+
-
 
+
-
 
+
-
/*===== content =====*/
+
-
#content {
+
-
+
-
}
+
-
#content img, aside img {
+
-
border:3px solid #ebebeb;
+
-
border-radius:4px;
+
-
-moz-border-radius:4px;
+
-
-webkit-border-radius:4px;
+
-
}
+
-
#content img:hover {
+
-
border-color:#bbb;
+
-
}
+
-
+
-
 
+
-
/*--- news list styles ---*/
+
-
.news li {
+
-
overflow:hidden;
+
-
position:relative;
+
-
padding:0 0 26px 84px;
+
-
}
+
-
.news li:last-child {
+
-
padding-bottom:0;
+
-
}
+
-
+
-
.news li figure {
+
-
width:59px;
+
-
height:59px;
+
-
background:url(../images/date-bg1.gif) no-repeat 0 0;
+
-
position:absolute;
+
-
left:0;
+
-
top:0;
+
-
text-align:center;
+
-
border:3px solid #ebebeb;
+
-
border-radius:4px;
+
-
-moz-border-radius:4px;
+
-
-webkit-border-radius:4px;
+
-
font-size:10px;
+
-
color:#fff;
+
-
text-transform:uppercase;
+
-
}
+
-
.news li figure strong {
+
-
display:block;
+
-
font-size:30px;
+
-
line-height:1.2em;
+
-
margin-bottom:-7px;
+
-
padding-top:4px;
+
-
}
+
-
+
-
.news li:nth-of-type(4n+2) figure {
+
-
background:url(../images/date-bg2.gif) no-repeat 0 0;
+
-
}
+
-
.news li:nth-of-type(4n+3) figure {
+
-
background:url(../images/date-bg3.gif) no-repeat 0 0;
+
-
}
+
-
.news li:nth-of-type(4n+4) figure {
+
-
background:url(../images/date-bg4.gif) no-repeat 0 0;
+
-
}
+
-
 
+
-
 
+
-
 
+
-
 
+
-
.team-list li {
+
-
width:100%;
+
-
overflow:hidden;
+
-
padding-bottom:43px;
+
-
}
+
-
.team-list li:last-child {
+
-
padding-bottom:0;
+
-
}
+
-
.team-list li figure {
+
-
float:left;
+
-
margin:0 20px 0 0;
+
-
padding:0;
+
-
}
+
-
 
+
-
 
+
-
/*--- loopedSlider styles ---*/
+
-
/*
+
-
  * Required
+
-
*/
+
-
#loopedSlider .wrap { width:295px; height:295px; overflow:hidden; position:relative;}
+
-
#loopedSlider .slides { position:absolute; top:0; left:0; }
+
-
#loopedSlider .slides div { position:absolute; top:0; width:295px; display:none; }
+
-
/*
+
-
* Optional
+
-
*/
+
-
#loopedSlider { width:295px; position:relative; clear:both; }
+
-
#loopedSlider .nav-controls {
+
-
width:100%;
+
-
overflow:hidden;
+
-
padding-top:10px;
+
-
}
+
-
#loopedSlider li {
+
-
display:inline;
+
-
}
+
-
#loopedSlider li a.previous {
+
-
float:left;
+
-
}
+
-
#loopedSlider li a.next {
+
-
float:right;
+
-
}
+
-
 
+
-
 
+
-
 
+
-
 
+
-
/*===== footer =====*/
+
-
footer {
+
-
color:#fff;
+
-
}
+
-
footer .fleft {
+
-
padding-left:40px;
+
-
}
+
-
footer .fright {
+
-
padding-right:40px;
+
-
}
+
-
 
+
-
 
+
-
/*----- forms -----*/
+
-
#contacts-form {
+
-
clear:right;
+
-
width:100%;
+
-
overflow:hidden;
+
-
}
+
-
#contacts-form fieldset {
+
-
border:none;
+
-
float:left;
+
-
}
+
-
#contacts-form .field {
+
-
clear:both;
+
-
}
+
-
#contacts-form label {
+
-
float:left;
+
-
width:110px;
+
-
line-height:18px;
+
-
padding-bottom:6px;
+
-
font-weight:bold;
+
-
}
+
-
#contacts-form input {
+
-
width:205px;
+
-
padding:1px 0 1px 3px;
+
-
background:none;
+
-
border:1px solid #e5e5e5;
+
-
color:#616161;
+
-
float:left
+
-
}
+
-
#contacts-form input:invalid {
+
-
border-color:red;
+
-
}
+
-
#contacts-form textarea {
+
-
width:450px;
+
-
height:215px;
+
-
padding:1px 0 1px 3px;
+
-
background:none;
+
-
border:1px solid #e5e5e5;
+
-
color:#616161;
+
-
margin-bottom:12px;
+
-
overflow:auto;
+
-
float:left;
+
-
}
+
-
#contacts-form div:last-child {
+
-
padding-left:110px;
+
-
}
+
-
 
+
-
/*==========================================*/
+
-
</style>
+
-
 
+
-
  <title>Team:SYSU-Guang Zhou</title>
+
-
  <meta charset="utf-8">
+
-
  <link rel="stylesheet" href="css/reset.css" type="text/css" media="all">
+
-
  <link rel="stylesheet" href="css/style.css" type="text/css" media="all">
+
-
  <script type="text/javascript" src="js/jquery-1.4.2.min.js" ></script>
+
-
  <script type="text/javascript" src="js/cufon-yui.js"></script>
+
-
  <script type="text/javascript" src="js/Humanst521_BT_400.font.js"></script>
+
-
  <script type="text/javascript" src="js/Humanst521_Lt_BT_400.font.js"></script>
+
-
<script type="text/javascript" src="js/roundabout.js"></script>
+
-
  <script type="text/javascript" src="js/roundabout_shapes.js"></script>
+
-
  <script type="text/javascript" src="js/gallery_init.js"></script>
+
-
  <script type="text/javascript" src="js/cufon-replace.js"></script>
+
-
  <!--[if lt IE 7]>
+
-
  <link rel="stylesheet" href="css/ie/ie6.css" type="text/css" media="all">
+
-
  <![endif]-->
+
-
  <!--[if lt IE 9]>
+
-
  <script type="text/javascript" src="js/html5.js"></script>
+
-
    <script type="text/javascript" src="js/IE9.js"></script>
+
-
  <![endif]-->
+
-
</head>
+
-
 
+
-
<body>
+
-
  <!-- header -->
+
-
  <header>
+
-
    <div class="container">
+
-
    <h1><a href="index.html">SYSU</a></h1>
+
-
      <nav>
+
-
        <ul>
+
-
        <li><a href="index.html" class="current">Home</a></li>
+
-
          <li><a href="about.html">About</a></li>
+
-
          <li><a href="privacy.html">Privacy</a></li>
+
-
          <li><a href="gallery.html">Gallery</a></li>
+
-
          <li><a href="contacts.html">Contact</a></li>
+
-
          <li><a href="sitemap.html">Sitemap</a></li>
+
         </ul>
         </ul>
-
      </nav>
+
         <!-- /.banners -->
-
    </div>
+
-
</header>
+
-
  <!-- #gallery -->
+
-
  <section id="gallery">
+
-
  <div class="container">
+
-
    <ul id="myRoundabout">
+
-
      <li><img src="images/slide3.jpg" alt=""></li>
+
-
         <li><img src="images/slide2.jpg" alt=""></li>
+
-
        <li><img src="images/slide5.jpg" alt=""></li>
+
-
        <li><img src="images/slide1.jpg" alt=""></li>
+
-
        <li><img src="images/slide4.jpg" alt=""></li>
+
-
      </ul>
+
-
  </div>
+
-
  </section>
+
-
  <!-- /#gallery -->
+
-
  <div class="main-box">
+
-
    <div class="container">
+
-
      <div class="inside">
+
-
        <div class="wrapper">
+
-
        <!-- aside -->
+
-
          <aside>
+
-
            <h2>Recent <span>News</span></h2>
+
-
            <!-- .news -->
+
-
            <ul class="news">
+
-
            <li>
+
-
              <figure><strong>22</strong>June</figure>
+
-
                <h3><a href="#">Sed ut perspiciatis unde</a></h3>
+
-
                Domnis iste natus error sit voluptam accusa doloremque <a href="#">...</a>
+
-
              </li>
+
-
              <li>
+
-
              <figure><strong>09</strong>June</figure>
+
-
                <h3><a href="#">Totam rem aperiam</a></h3>
+
-
                Eaqueipsa quae abillo inventoretis et quasi architecto beatae <a href="#">...</a>
+
-
              </li>
+
-
              <li>
+
-
              <figure><strong>31</strong>May</figure>
+
-
                <h3><a href="#">Inventore veritatis et quasi</a></h3>
+
-
                Architecto beatae vitae dicta sunt explicabo <a href="#">...</a>
+
-
              </li>
+
-
              <li>
+
-
              <figure><strong>25</strong>May</figure>
+
-
                <h3><a href="#">Nemo enim ipsam</a></h3>
+
-
                Voluptatem quia voluptas sit asper natur aut odit aut fugit <a href="#">...</a>
+
-
              </li>
+
-
            </ul>
+
-
            <!-- /.news -->
+
-
          </aside>
+
-
          <!-- content -->
+
-
          <section id="content">
+
-
            <article>
+
-
            <h2>Welcome to <span>Our SYSU!</span></h2>
+
-
              <p>SYSU is a free web template created by TemplateMonster.com team. This website template is optimized for 1024X768 screen resolution. It is also HTML5 &amp; CSS3 valid.</p>
+
-
              <figure><a href="#"><img src="images/banner1.jpg" alt=""></a></figure>
+
-
              <p>This website template has several pages: <a href="index.html">Home</a>, <a href="about.html">About us</a>, <a href="privacy.html">Privacy Policy</a>, <a href="gallery.html">Gallery</a>, <a href="contacts.html">Contact us</a> (note that contact us form 鈥?doesn鈥檛 work), <a href="sitemap">Site Map</a>.</p>
+
-
              This website template can be delivered in two packages - with PSD source files included and without them. If you need PSD source files, please go to the template download page at TemplateMonster to leave the e-mail address that you want the template ZIP package to be delivered to.
+
-
            </article>
+
-
          </section>
+
-
        </div>
+
       </div>
       </div>
 +
      <!-- footer -->
 +
     
     </div>
     </div>
   </div>
   </div>
-
   <!-- footer -->
+
   <script type="text/javascript">
-
  <footer>
+
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
-
    <div class="container">
+
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
-
    <div class="wrapper">
+
</script>
-
        <div class="fleft">Copyright - Type in your name here</div>
+
<script type="text/javascript">
-
        <div class="fright"><a href="http://www.templatemonster.com/" target="_blank">Website template</a> designed by TemplateMonster.com&nbsp; &nbsp; |&nbsp; &nbsp; <a href="http://templates.com/product/3d-models/" target="_blank">3D Models</a> provided by Templates.com</div>
+
try {
-
      </div>
+
var pageTracker = _gat._getTracker("UA-7078796-1");
-
    </div>
+
pageTracker._trackPageview();
-
  </footer>
+
} catch(err) {}</script>
-
  <script type="text/javascript"> Cufon.now(); </script>
+
</body>
</body>
</html>
</html>

Latest revision as of 04:03, 27 October 2012

<style type="text/css"> .style1 { color: #525252; } .style2 { font-size: xx-large; } </style>

Team:SYSU-Software

      Synthetic Biology, depending on interdisciplinary knowledge and experience , cooperates wet and dry experiments to create artificial biological systems . Our team has developed a novel software system, BiArkit, to facilitate the design and engineering of specially functional systems. For visualization of genomic data and expression level of functional genes, we develop GenomeBrowser and G-Circle Besides, Biobrick is localized and transformed into searching kit for users to get comprehensive information conveniently. Further, Riboswitch and SiRNA are designed to compute out potential regulatory parts for engineering systems. For processing data from system level, MetaNetwork can illustrate information of various biological pathways on the graphical and user-friendly interface. And Simulator is intended for modifying and simulating genome-scale metabolic models, which involves many kinds of analyses to predict possible results of conditional changes in experiments.All the functional modules have been successfully added to the Clotho Frame. read more

      This is the section for sequences information. With this browser, researchers can surf for genomes from the typical model organisms. Users can locate the interested genes in terms of the input items, including name, product or coordinate. In addition, new genomes data will be saved on our website as downloadable contents.

read more

     This is the section for parts information. It can facilitate researchers to search features and functions of Biobricks documented in the Registry of Standard Biological Parts. All of the relevant operations can be completed without connecting with the Internet.

read more

      This is the section for generating parts information. It can assist researchers to design the sequences and structures of potential riboswitches according to their inputs and choices of aptamers. Both of the up-regulation and down-regulation riboswiches can be provided by this kit.

read more

      This is the section for generating parts information. It can design another regulator in engineering biological systems – siRNA. According to the input sequences, it can figure out the potential siRNA automatically.

read more

      This is the section for system information. Given the friendly interface, researchers can explore and acquire their interested gene’s relevant pathways and networks in one map. Users can even drag every graphic element in the maps to check the information conveniently and effectively.

read more

      This is the section for generating system information. Based on the reconstruction of genome-scale models, researcher can use this kit to edit the existent models according to their needs. Then, they can choose different combination of analysis to predict effect from a intended loss-of –function mutation, find necessary and basic genes maintaining the whole system, predict phenotypic behavior under the given environmental conditions and interpret the coupled reaction activities.

read more

      Clotho assists researchers to engineer synthetic biological systems and manage the data which is used to create them. It has been developed as the App environment that anyone can create and share new tools in it. These tools facilitate synthetic biologists to arrange their researches under the computer-based and automated- designed environment. Thus, to advanced develop the Clotho frame, we have successfully transfer the seven parts of our software, BiArkit, into Apps. Users can choose to employ our software through the Clotho media.

read more

      This is the section for sequence information. It can illustrate the given genome and the expression level of genes within it under different environment in one graph. In addition, we have developed it as one app and integrated it into Clotho.

read more

  •    video

    Version 1.00 Sept.2012Version 1.05 Oct.2012

Retrieved from "http://2012.igem.org/Team:SYSU-Software"