SUSTC-SZ-B 2013iGEM

From 2013.igem.org

(Difference between revisions)
 
(134 intermediate revisions not shown)
Line 1: Line 1:
<html>
<html>
-
<style>
+
  <head>
-
/* Remove Items (origin items) */
+
    <meta charset="utf-8" />
-
            #top-section, #footer-box, #catlinks, #top, h1.firstHeading, #siteSub, #contenSub
+
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
-
{
+
-
            display: none;
+
-
}
+
-
+
-
/* Modify Items (origin items) */
+
-
        body{
+
-
background-color: #0b3b41;
+
-
        }
+
-
#globalWrapper{
+
-
margin: 0;
+
-
padding: 0;
+
-
background-color: #0b3b41;
+
-
font-size: small;
+
-
font-family:  Helvetica, Geneva, Verdana, Arial, sans-serif;
+
-
        }
+
-
#content
+
-
{
+
-
            width: auto;
+
-
            margin: 0;
+
-
padding: 0;
+
-
background-color: transparent;
+
-
border-style: none;
+
-
                        line-height: normal;
+
-
color: #ffffe0;
+
-
}
+
-
+
-
+
-
+
-
#ititle1{
+
-
margin-top: 80px;
+
-
text-align: center;
+
-
font-size: 2.2em;
+
-
                border: none;
+
-
                color: #ffffe0;
+
-
}
+
-
#icontent{
+
    <meta name="description" content="" />
-
padding: 50px 50px;
+
    <meta name="author" content="SUSTC-ShenZhen-B" />
-
padding-bottom: 0px;
+
-
width: 500px;
+
-
background-color: white;
+
-
color: black;
+
-
margin: 60px auto;
+
-
box-shadow:10px 10px 10px #000;
+
-
}
+
-
#itag{
+
    <title>SUSTC-ShenZhen-B</title>
-
font-size: 1.3em;
+
-
background: #8e388e;
+
-
position: relative;
+
-
left: -80px;
+
-
top: -30px;
+
-
padding: 7px 10px;
+
-
width: 92px;
+
-
font-weight: bold;
+
-
color: white;
+
-
margin-bottom: 10px;
+
-
}
+
-
#ititle2{
+
    <style type="text/css">
-
                border: none;
+
      #globalWrapper {width: 100%;font-size: 100%;}
-
font-weight: normal;
+
      #top-section {width: 100%; height:100%; border:none;}
-
font-size: 1.8em;
+
      #p-logo {display:none;}
-
position: relative;
+
      #search-controls {display:none;}
-
left: 120px;
+
      .printfooter {display:none;}
-
top: -80px;
+
      #footer-box {border:none;}
-
}
+
      .firstHeading {display:none;}
 +
      #content { border:none !important; width:1024px !important; background: url('') !important;}
 +
      #bodyContent {border:none;}
 +
      #catlinks {display:none;}
 +
      #footer-box {display:none;}
 +
      #menubar {display:none;}
 +
      body {
 +
        padding: 0;
 +
      }
-
#itext{
+
      .caret {
-
position: relative;
+
        display: inline-block;
-
top: -80px;
+
        width: 0;
-
}
+
        height: 0;
 +
        margin-left: 2px;
 +
        vertical-align: middle;
 +
        border-top: 4px solid #000000;
 +
        border-right: 4px solid transparent;
 +
        border-bottom: 0 dotted;
 +
        border-left: 4px solid transparent;
 +
        content: "";
 +
      }
 +
      .icon.caret {
 +
        opacity: 0.75;
 +
      }
 +
      .white.caret {
 +
        border-top-color: #FFFFFF;
 +
      }
 +
      .main.menu {
 +
        top: 0;
 +
      }
 +
      .script.image {
 +
        display: none;
 +
      }
 +
      .logo img {
 +
        width: 100%;
 +
      }
 +
.cp-logo {
 +
      max-width: 100%;
 +
    }
 +
    .cp-logo img.cl {
 +
      position: absolute;
 +
      /* transform: rotate(-90deg); */
 +
    }
 +
    .cp-logo img.background {
 +
      width: 1200px;
 +
    }
 +
    .cp-logo img.big {
 +
      top: 31px;
 +
      left: 46px;
 +
      width: 290px;
 +
    }
 +
    .cp-logo img.software {
 +
      top: 225px;
 +
      left: 277px;
 +
      width: 164px;
 +
    }
 +
    .cp-logo img.mindmap {
 +
      top: 245px;
 +
      left: 441px;
 +
      width: 142px;
 +
    }
 +
    .cp-logo img.lgd {
 +
      top: 276px;
 +
      left: 571px;
 +
      width: 102px;
 +
    }
 +
    .cp-logo img.labmanager {
 +
      top: 245px;
 +
      left: 667px;
 +
      width: 121px;
 +
    }
 +
    .cp-logo img.technistandard {
 +
      top: 230px;
 +
      left: 781px;
 +
      width: 164px;
 +
    }
 +
    .cp-logo img.clotho {
 +
      top: 257px;
 +
      left: 940px;
 +
      width: 75px;
 +
    }
 +
    .cp-logo img.humanpractice {
 +
      top: 265px;
 +
      left: 1010px;
 +
      width: 94px;
 +
    }
 +
    </style>
 +
    <link rel="stylesheet" type="text/css" href="/SUSTC-SZ-B_2013iGEM/CSS/wiki-all.min.css?action=raw&amp;ctype=text/css" />
 +
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700|Open+Sans:300italic,400,300,700" />
-
#inavigator {
+
  </head>
-
font-weight: thicker;
+
  <body id="example">
-
margin-top: 50px;
+
    <div class="ui fixed transparent inverted main menu">
-
text-align: center;
+
      <div class="container">
-
font-size: 1.3em;
+
        <a href="#" class="brand">SUSTC-ShenZhen-B</a>
-
}
+
        <div class="right menu">
-
#ihome{
+
          <a href="http://circuitplus.org" class="item">Visit Circuit+</a>
-
background: #ffff00;
+
        </div>
-
box-shadow:10px 10px 10px #000;
+
        <div href="/" class="ui dropdown link active item">
-
}
+
          iGEM
-
#iproject{
+
          <span class="icon white caret"></span>
-
background: #3cb371;
+
          <div class="menu">
-
box-shadow:10px 10px 10px #000;
+
            <a href="https://2013.igem.org/Main_Page" class="item">iGEM homepage</a>
-
}
+
            <a href="/Team:SUSTC-Shenzhen-B" class="item">wiki homepage</a>
-
#iteam{
+
            <a href="https://igem.org/User_Information" class="item">My Account</a>
-
background: #ff0000;
+
            <a href="https://2013.igem.org/wiki/index.php?title=SUSTC-SZ-B_2013iGEM&action=edit" class="item">Edit</a>
-
box-shadow:10px 10px 10px #000;
+
          </div>
-
}
+
        </div>
-
#inavigator a:link, #navigator a:visited{
+
        <a href="https://2013.igem.org/Team:SUSTC-Shenzhen-B/project.html" class="item">Overview</a>
-
color: #000000;
+
        <a href="https://2013.igem.org/Team:SUSTC-Shenzhen-B/standard.html" class="item">Standard and database</a>
-
text-decoration: none;
+
        <div href="/" class="ui dropdown link item">
-
padding: 10px 20px;
+
          Software
-
margin: 30px;
+
          <span class="white caret"></span>
-
}
+
          <div class="menu">
-
#inavigator a:hover{
+
            <a href="https://2013.igem.org/Team:SUSTC-Shenzhen-B/circuitplus.html" class="item">Circuit+</a>
-
color: #4eee94;
+
            <a href="https://2013.igem.org/Team:SUSTC-Shenzhen-B/tutorial.html" class="item">Tutorial</a>
-
}
+
            <a href="https://2013.igem.org/Team:SUSTC-Shenzhen-B/safety.html" class="item">Safety</a>
 +
            <a href="https://2013.igem.org/Team:SUSTC-Shenzhen-B/feedback.html" class="item">Feedback</a>
 +
            <a href="https://2013.igem.org/Team:SUSTC-Shenzhen-B/future.html" class="item">Future</a>
 +
            <a href="/Team:SUSTC-Shenzhen-B/lab.html" class="item">Lab Manager</a>
 +
            <a href="/Team:SUSTC-Shenzhen-B/clotho.html" class="item">Clotho</a>
 +
          </div>
 +
        </div>
 +
        <div href="/" class="ui dropdown link item">
 +
          Human practice
 +
          <span class="white caret"></span>
 +
          <div class="menu">
 +
            <a href="https://2013.igem.org/Team:SUSTC-Shenzhen-B/workshop.html" class="item">Workshop meeting</a>
 +
            <a href="https://2013.igem.org/Team:SUSTC-Shenzhen-B/publicity.html" class="item">Publicity</a>
 +
          </div>
 +
        </div>
 +
        <a href="https://2013.igem.org/Team:SUSTC-Shenzhen-B/achievement.html" class="item">Achievement</a>
 +
        <div href="/" class="ui dropdown link item">
 +
          Team
 +
          <span class="white caret"></span>
 +
          <div class="menu">
 +
            <a href="https://2013.igem.org/Team:SUSTC-Shenzhen-B/about.html" class="item">About us</a>
 +
            <a href="https://2013.igem.org/Team:SUSTC-Shenzhen-B/notebook.html" class="item">Notebook</a>
 +
            <a href="https://2013.igem.org/Team:SUSTC-Shenzhen-B/acknowledgement.html" class="item">Acknoledgement</a>
 +
          </div>
 +
        </div>
 +
      </div>
 +
    </div>
 +
    <div class="header">
 +
      <div class="segment">
 +
        <div id="overview" class="container">
 +
    <div class="cp-logo">
 +
      <!-- <img class="background" src="/wiki/images/2/26/Background.png" /> -->
 +
      <a href="http://circuitplus.org"><img class="cl odd big" src="/wiki/images/c/c9/Logo.png" /></a>
 +
      <img class="cl even software" src="/wiki/images/f/fd/Software.png" />
 +
      <img class="cl odd mindmap" src="/wiki/images/4/4b/Mind_map.png" />
 +
      <img class="cl even lgd" src="/wiki/images/f/f9/LGD.png" />
 +
      <img class="cl odd labmanager" src="/wiki/images/4/4b/Lab_manager.png" />
 +
      <img class="cl even technistandard" src="/wiki/images/5/53/Technistandard.png" />
 +
      <img class="cl odd clotho" src="/wiki/images/9/94/Clotho.png" />
 +
      <img class="cl even humanpractice" src="/wiki/images/4/4f/Human_practice.png" />
 +
    </div>
 +
        </div>
 +
      </div>
 +
    </div>
 +
    <div class="main container page index">
 +
      <p>Welcome to our wiki! This is SUSTC-Shenzhen-B.</p>
 +
      <p>This year, we have developed Circuit+. Circuit+ is an online registry of standard gene circuits.</p>
 +
      <p>Detail information of software can be found in software part of this wiki.</p>
 +
      <p>We also have developed Circuit List and TTEC on Clotho, and Lab Manager. See <a href="https://2013.igem.org/Team:SUSTC-Shenzhen-B/clotho.html">Clotho</a> and <a href="https://2013.igem.org/Team:SUSTC-Shenzhen-B/lab.html">Lab Manager</a> for details.</p>
 +
    </div>
-
.shadow{
+
    <div class="footer">
-
box-shadow:8px 8px 10px #000;
+
      <div class="ui divider">
-
}
+
      </div>
-
+
      <div class="ui divided horizontal footer link list">
-
#ifooter{
+
        <div class="item">
-
padding-top: 1px;
+
          &copy; SUSTC-ShenZhen-B
-
padding-bottom: 5px;
+
        </div>
-
margin-top: 40px;
+
      </div>
-
margin-bottom: 0px;
+
    </div>
-
text-align: center;
+
-
background: #000000;
+
-
}
+
-
</style>
+
    <script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
-
<h1 id="ititle1">SUSTC<br />Shenzhen-B</h1>
+
    <script type="text/javascript" src="https://2013.igem.org/SUSTC-SZ-B_2013iGEM/JS/wiki-all.min.js?action=raw&amp;ctype=text/javascript"></script>
-
<div id="icontent">
+
 
-
<p id="itag">
+
    <script type="text/javascript">
-
Description
+
      function png2text(pngurl, id, callback) {
-
</p>
+
        var canvas = document.createElement("canvas"),
-
<h2 id="ititle2">
+
        ctx = canvas.getContext("2d");
-
3Miao
+
        img = new Image();
-
</h2>
+
   
-
<div id="itext">
+
        img.id = 'pt-' + id;
-
        <p>
+
        img.className = 'script image';
-
        We want to establish a user-friendly web2.0 platform which can function as both a handy tool kit and a community. There are mainly 3 reasons that we choose a webpage instead of a native application. First, current software need to users don’t need to download our software. Second, a webpage is not limited with the system, which means users can log in our webpage wherever they can reach the internet. And the last, all the information can be stored by the cloud, so users don’t have to worry about their information being lost.
+
        img.style.position = "absolute";
-
        </p>
+
        img.style.left = "-10000px";
-
                        <p>
+
        document.body.appendChild(img);
-
                        We need 3 steps to achieve our goal. The first step is to build up a modest platform and finish the SB Mapping and the Logical Genetic Designer, LGD for short. SB means synthetic biology of course. The SB Mapping is a net structural mind map that can help users know what we have done with synthetic biology and guide them to come up with what else we can do with synthetic biology. At the end of every branch, users can see the detail of an accomplished project. Those projects come from either the past iGem projects or scientific paper. In the information of every project, user can see a big cell with genetic circuits in it. If user clicks the cell, the circuit will be enlarged and the whole page will jump into the editing interface, the LGD. The LGD is a genetic circuit designer. User can edit the genetic circuit by drag the element library, and the software will present the information of this bacterium and the logical relationship between related parts.
+
 
-
                        </p>
+
        img.onload = function() {
-
<p>
+
          var
-
The second step has 2 parts. One is to build a fake E.coli that has the smallest genome and the complete basic metabolic pathway. These pathways are the ???? for the computer to decide the result of user’s genetic circuit. The other is to write a synthetic biological experiment approach generator. This generator can automatically generate a standard experiment approach that suits most experiments.
+
            w = this.width,
-
</p>
+
            h = this.height;
-
<p>
+
 
-
The final step is quite different; it is to make the platform more like a community. In this community user can learn the basic knowledge of synthetic biology, go through the break news of synthetic biology, post their own ideas, comment on others’ work, discuss with other people and so on. Users can also upload handy tools in to the tools kit, which means our community can function as a third-party tools package as well. The SB Mapping, LGD, the experiment approach generator and the terminator efficiency, which is the last year’s project of SUSTC, are all in this kit. What’s more, our community idea is the key to popularize synthetic biology because people can learn knowledge and post their ideas, and then the professional users can take the idea and make it come true.
+
          canvas.width = w;
-
</p>
+
          canvas.height = h;
-
</div>
+
          canvas.style.width = w+"px";
-
</div>
+
          canvas.style.height = h+"px";
-
<div id="inavigator">
+
 
-
<a id="ihome" class="shadow" href="home.html">HOME</a>
+
          ctx.drawImage(this, 0, 0);
-
<a id="iproject" class="shadow" href="project.html">PROJECT</a>
+
 
-
<a id="iteam" class="shadow" href="team.html">TEAM</a>
+
          var data = ctx.getImageData(0, 0, w, h).data,
-
</div>
+
            a = [],
-
<div id="ifooter">
+
            len = data.length,
-
<p>
+
            p = -1;
-
SUSTC-Shenzhen-B
+
         
-
</p>
+
          for (var i=0; i < len; i += 4) {
-
<p>
+
            if (data[i] > 0)
-
igem2013@sustc.edu.cn
+
              a[++p] = String.fromCharCode(data[i]);
-
</p>
+
          };
-
<script type="text/javascript" charset="UTF-8">
+
 
-
(function(){
+
          canvas = undefined;
-
var _w = 24 , _h = 24;
+
          try {
-
var param = {
+
            //document.body.removeChild(img);
-
url:location.href,
+
            $('#pt-' + id).remove();
-
type:'2',
+
          } catch (e) {
-
count:'', /**是否显示分享数，1显示(可选)*/
+
          }
-
appkey:'', /**您申请的应用appkey,显示分享来源(可选)*/
+
 
-
title:'#iGEM#我刚刚浏览了SUSTC-Shenzhen-B的Wiki。真的是太赞了！', /**分享的文字内容(可选，默认为所在页面的title)*/
+
          if (callback) callback(a.join(""));
-
pic:'', /**分享图片的路径(可选)*/
+
        };
-
ralateUid:'', /**关联用户的UID，分享微博会@该用户(可选)*/
+
 
-
language:'zh_cn', /**设置语言，zh_cn|zh_tw(可选)*/
+
        img.src = pngurl;
-
dpc:1
+
      }
-
}
+
 
-
var temp = [];
+
      function baseRemove() {
-
for( var p in param ){
+
        $('#top-section').remove();
-
temp.push(p + '=' + encodeURIComponent( param[p] || '' ) )
+
        $('#content').attr('id', '');
-
}
+
        $('#bodyContent').attr('id', '');
-
document.write('<iframe allowTransparency="true" frameborder="0" scrolling="no" src="http://service.weibo.com/staticjs/weiboshare.html?' + temp.join('&') + '" width="'+ _w+'" height="'+_h+'"></iframe>')
+
        $('#globalWrapper').attr('id', '');
-
})()
+
 
-
</script>
+
        $('.main.container.page').parent().attr('id', 'example');
-
</div>
+
      }
 +
 
 +
      function loadJavascript() {
 +
        /* $.get("https://2013.igem.org/SUSTC-SZ-B_2013iGEM/JS/wiki-all.min.js?action=raw&ctype=text/javascript", function (data) {
 +
          eval(data);
 +
        }); */
 +
        /* png2text('https://static.igem.org/mediawiki/2013/4/43/Wiki-all-min-js.png', 'wiki-all', function (text) {
 +
          eval(text);
 +
        }); */
 +
      }
 +
 
 +
      function logoFun() {
 +
        var r = 0;
 +
        setInterval(function () {
 +
          $('img.cl.odd').attr('style', '-webkit-transform: rotate(' + r + 'deg); -moz-transform: rotate(' + r + 'deg); transform: rotate(' + r + 'deg);');
 +
          $('img.cl.even').attr('style', '-webkit-transform: rotate(-' + r + 'deg); -moz-transform: rotate(' + r + 'deg); transform: rotate(' + r + 'deg);');
 +
          r += 2;
 +
          if (r >= 360) r = 0;
 +
        }, 100);
 +
      }
 +
 
 +
      $(document).ready(function () {
 +
        baseRemove();
 +
        loadJavascript();
 +
        logoFun();
 +
      });
 +
    </script>
 +
  </body>
</html>
</html>

Latest revision as of 04:00, 29 October 2013

SUSTC-ShenZhen-B

SUSTC-ShenZhen-B
Visit Circuit+
iGEM
iGEM homepage wiki homepage My Account Edit
Overview Standard and database
Software
Circuit+ Tutorial Safety Feedback Future Lab Manager Clotho
Human practice
Workshop meeting Publicity
Achievement
Team
About us Notebook Acknoledgement

Welcome to our wiki! This is SUSTC-Shenzhen-B.

This year, we have developed Circuit+. Circuit+ is an online registry of standard gene circuits.

Detail information of software can be found in software part of this wiki.

We also have developed Circuit List and TTEC on Clotho, and Lab Manager. See Clotho and Lab Manager for details.

© SUSTC-ShenZhen-B

Retrieved from "http://2013.igem.org/SUSTC-SZ-B_2013iGEM"