Difference between revisions of "Template:UCAS-China"

m
 
(34 intermediate revisions by 3 users not shown)
Line 1: Line 1:
 
<html>
 
<html>
−
<script>$(document).ready(function(){$("#HQ_page").attr("id","");highlight_current_page_menu();$(".menu_item").click(function(){$(".submenu_control_icon",this).toggleClass("open");$(this).next(".submenu").fadeToggle(400)});$(".igem_2018_team_mobile_bar").click(function(){$(this).next().toggleClass("displaying_menu")})});function highlight_current_page_menu(){var page_url="https://2018.igem.org/";page_url=page_url+wgPageName;$("a[href$='"+page_url+"']").children().addClass("current_page");if($(".current_page").hasClass("submenu_item")){$(".current_page").parent().parent().fadeToggle(400);$(".current_page").parent().parent().prev().addClass("current_page");$(".menu_item.current_page > .submenu_control_icon").toggleClass("open")}};</script>
+
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
 +
<script>
 +
    function hide_show_menu() {
 +
      if (window.location.href.indexOf("submit") >= 0) {
 +
        $(".igem_2017_menu_wrapper").hide();
 +
      }
  
 +
        if (document.getElementById('bars_item')) {
  
−
<style>
+
        $("#bars_item").click(function() {
−
#home_logo,#sideMenu{display:none}#sideMenu,#top_title,.patrollink{display:none}#content{margin-left:0;margin-top:-7px;padding:0;width:100%}body{background-color:white}#bodyContent h1,#bodyContent h2,#bodyContent h3,#bodyContent h4,#bodyContent h5{margin-bottom:0}.judges-will-not-evaluate{border:4px solid #e4dede;padding:2%!important;width:92%!important}.igem_2018_team_menu{background-color:#c4baba;border-left:1px solid #c4baba;display:block;float:right;height:100vh;max-width:270px;overflow-y:auto;overflow-x:hidden;padding:0;position:fixed;right:0;text-align:left;width:15%}.igem_2018_team_menu.displaying_menu{display:block}.igem_2018_team_menu a{color:#484848;text-decoration:none}.igem_2018_team_menu img{width:100%}.igem_2018_team_menu .menu_item{background-color:#c4baba;border-bottom:1px solid #928b8b;clear:both;color:#484848;cursor:pointer;float:left;font-size:120%;font-weight:bold;padding:15px 0 15px 5%;width:100%}.igem_2018_team_menu .menu_item.direct_link{color:#484848;padding-left:15%}.igem_2018_team_menu .menu_item:hover{background-color:#ecb656}.igem_2018_team_menu .menu_item .submenu_control_icon{color:#484848;float:left;width:10%}.igem_2018_team_menu .menu_item .submenu_control_icon::before{content:"+"}.igem_2018_team_menu .menu_item .submenu_control_icon.open::before{content:"-"}.igem_2018_team_menu .submenu{background-color:#e4dede;clear:both;display:none;float:left;width:100%}.igem_2018_team_menu .submenu .submenu_item{border-bottom:1px solid #c4baba;color:#635d5d;height:30px;float:left;font-size:110%;font-weight:bold;padding:12px 0 0 15%;width:100%}.igem_2018_team_menu .submenu .submenu_item:hover{background-color:#f3bd5d}.igem_2018_team_menu .submenu .submenu_item.current_page,.igem_2018_team_menu .menu_item.current_page,.igem_2018_team_menu .menu_item.direct_link.current_page{background-color:#7acbd8}.igem_2018_team_mobile_bar{background-color:#e4dede;border-bottom:1px solid #c4baba;cursor:pointer;display:none;float:left;margin-top:0;padding:5px 0;position:fixed;width:100%}.igem_logo_mobile img{width:70px}.igem_logo_mobile{float:left;padding-left:5%;width:30%}.igem_menu_control_mobile img{width:25px}.igem_menu_control_mobile{float:right;padding-right:5%;padding-top:5px;text-align:right;width:30%}.igem_2018_team_content{background-color:white;display:block;width:87%}.igem_2018_team_content .igem_2018_team_column_wrapper{margin:auto;max-width:1400px;width:90%}.igem_2018_team_content .igem_2018_team_column_wrapper h1{font-size:210%}.igem_2018_team_content .igem_2018_team_column_wrapper h2{font-size:190%}.igem_2018_team_content .igem_2018_team_column_wrapper h3{font-size:170%}.igem_2018_team_content .igem_2018_team_column_wrapper h4{font-size:150%}.igem_2018_team_content .igem_2018_team_column_wrapper h5{font-size:140%}.igem_2018_team_content .igem_2018_team_column_wrapper h6{font-size:130%}.igem_2018_team_content .igem_2018_team_column_wrapper h1,.igem_2018_team_content .igem_2018_team_column_wrapper h2{border-bottom:0;color:#635d5d;font-family:"Arial Black",Gadget,sans-serif;padding:10px 0}.igem_2018_team_content .igem_2018_team_column_wrapper h3,.igem_2018_team_content .igem_2018_team_column_wrapper h4,.igem_2018_team_content .igem_2018_team_column_wrapper h5,.igem_2018_team_content .igem_2018_team_column_wrapper h6{border-bottom:0;color:#928b8b;font-family:"Arial Black",Gadget,sans-serif;padding:5px 0}.igem_2018_team_content .igem_2018_team_column_wrapper p{font-size:130%;font-family:Arial,Helvetica,sans-serif;padding:5px 0;text-align:left;color:#484848}.igem_2018_team_content .igem_2018_team_column_wrapper a{color:#5bc7d8;font-weight:bold;text-decoration:underline;text-decoration-color:#5bc7d8;transition:all .4s ease;-webkit-transition:all .4s ease;-moz-transition:all .4s ease;-ms-transition:all .4s ease;-o-transition:all .4s ease}.igem_2018_team_content .igem_2018_team_column_wrapper a:hover{color:#f8b732;text-decoration:none}.igem_2018_team_content .igem_2018_team_column_wrapper table{border:1px solid #928b8b;border-collapse:collapse;font-size:130%;width:100%}.igem_2018_team_content .igem_2018_team_column_wrapper td{border:1px solid #c4baba;border-collapse:collapse;font-size:105%;padding:10px;vertical-align:text-top}.igem_2018_team_content .igem_2018_team_column_wrapper th{background-color:#c4baba;border:1px solid #928b8b;border-collapse:collapse;font-size:110%;padding:10px;vertical-align:text-top}.igem_2018_team_content .igem_2018_team_column_wrapper ul,.igem_2018_team_content .igem_2018_team_column_wrapper ol{font-size:130%;font-family:Arial,Helvetica,sans-serif;padding:0 20px}.igem_2018_team_content .igem_2018_team_column_wrapper ul ul li,.igem_2018_team_content .igem_2018_team_column_wrapper ul ul ul li,.igem_2018_team_content .igem_2018_team_column_wrapper ul ol li,.igem_2018_team_content .igem_2018_team_column_wrapper ul ul ol li,.igem_2018_team_content .igem_2018_team_column_wrapper ol ol li,.igem_2018_team_content .igem_2018_team_column_wrapper ul ol ul li,.igem_2018_team_content .igem_2018_team_column_wrapper ol ul li,.igem_2018_team_content .igem_2018_team_column_wrapper ul ol ol li,.igem_2018_team_content .igem_2018_team_column_wrapper ol ul ul li,.igem_2018_team_content .igem_2018_team_column_wrapper ol ol ul li,.igem_2018_team_content .igem_2018_team_column_wrapper ol ol ol li,.igem_2018_team_content .igem_2018_team_column_wrapper ol ul ol li{font-size:76%}
+
          $("#sideMenu").hide();
−
.igem_2018_team_content .igem_2018_team_column_wrapper .column{float:left;margin:1% 2%;padding:0}.igem_2018_team_content .igem_2018_team_column_wrapper .column.full_size{width:96%}.igem_2018_team_content .igem_2018_team_column_wrapper .column.two_thirds_size{width:62.6%}.igem_2018_team_content .igem_2018_team_column_wrapper .column.third_size{width:29.3%}.igem_2018_team_content .igem_2018_team_column_wrapper .column.full_size img,.igem_2018_team_content .igem_2018_team_column_wrapper .column.two_thirds_size img,.igem_2018_team_content .igem_2018_team_column_wrapper .column.third_size img{margin-bottom:15px;width:100%}.igem_2018_team_content .igem_2018_team_column_wrapper .clear{clear:both}.igem_2018_team_content .igem_2018_team_column_wrapper .clear.extra_space{height:30px}.igem_2018_team_content .igem_2018_team_column_wrapper .line_divider{border-top:1px solid #c4baba;margin:auto;width:98%}.igem_2018_team_content .igem_2018_team_column_wrapper .button_link{font-size:130%;margin:30px auto;text-align:center}.igem_2018_team_content .igem_2018_team_column_wrapper .button_link a{background-color:#5bc7d8;color:#635d5d!important;font-weight:bold;margin:auto;text-decoration:none!important;padding:10px 15px}.igem_2018_team_content .igem_2018_team_column_wrapper .button_link a:hover{background-color:#f8b732!important}.igem_2018_team_content .igem_2018_team_column_wrapper .highlight{padding:15px 20px}.igem_2018_team_content .igem_2018_team_column_wrapper .highlight p,.igem_2018_team_content .igem_2018_team_column_wrapper .highlight h1,.igem_2018_team_content .igem_2018_team_column_wrapper .highlight h2,.igem_2018_team_content .igem_2018_team_column_wrapper .highlight h3,.igem_2018_team_content .igem_2018_team_column_wrapper .highlight h4,.igem_2018_team_content .igem_2018_team_column_wrapper .highlight h5,.igem_2018_team_content .igem_2018_team_column_wrapper .highlight h6{padding:5px 15px}.igem_2018_team_content .igem_2018_team_column_wrapper .highlight.decoration_background{background-color:#e4dede}.igem_2018_team_content .igem_2018_team_column_wrapper .highlight.decoration_A_top{border-top:4px solid #5bc7d8}.igem_2018_team_content .igem_2018_team_column_wrapper .highlight.decoration_A_full{border:4px solid #5bc7d8}.igem_2018_team_content .igem_2018_team_column_wrapper .highlight.decoration_B_top{border-top:4px solid #f8b732}.igem_2018_team_content .igem_2018_team_column_wrapper .highlight.decoration_B_full{border:4px solid #f8b732}@media only screen and (max-width:1800px){.igem_2018_team_content{width:85%}.igem_2018_team_menu{display:block}}@media only screen and (max-width:1400px){.igem_2018_team_menu .menu_item{font-size:100%}.igem_2018_team_menu .submenu .submenu_item{font-size:90%}.igem_2018_team_menu{display:block}}@media only screen and (max-width:1001px){.igem_2018_team_menu{display:block}}@media only screen and (max-width:1000px){.igem_2018_team_content{width:100%;margin-left:0}.igem_2018_team_menu{display:none;margin-top:45px;min-width:50%;width:50%}.igem_2018_team_mobile_bar{display:block}.igem_2018_team_content .igem_2018_team_column_wrapper .column.full_size,.igem_2018_team_content .igem_2018_team_column_wrapper .column.two_thirds_size,.igem_2018_team_content .igem_2018_team_column_wrapper .column.third_size{width:96%}}@media only screen and (max-width:500px){.igem_2018_team_menu{min-width:100%;width:100%}}
+
 
−
</style>
+
          $(".igem_2017_menu_wrapper").fadeToggle("100");
 +
        });  
 +
        }  
 +
      else {
 +
            setTimeout(hide_show_menu, 15);
 +
      }
 +
    }
 +
</script>
  
 
<head>  
 
<head>  
−
<title>Team:UCAS-China &#60;Rose Forest&#62;</title>
+
 
−
<meta name="viewport" content="width=device-width, initial-scale=1">  
+
  <!-- This tells the browser that your page is responsive -->
 +
  <meta name="viewport" content="width=device-width, initial-scale=1">  
 +
        <!-- This is from CSS templates -->
 +
  <!--<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">-->
 +
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
 +
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 +
  <script type="text/javascript" async
 +
    src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-MML-AM_CHTML">
 +
  </script>
 +
 
 +
  <!-- Latest compiled and minified CSS -->
 +
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 +
  <style type="text/css">
 +
    /****************************** DEFAULT WIKI SETTINGS  ****************************/
 +
 
 +
 
 +
  body,h1,h2,h3,h4,h5,h6,p {font-family: "Raleway", sans-serif; line-height: 1.5}
 +
 
 +
        body, html {
 +
        height: 100%;
 +
        line-height: 2;
 +
        }
 +
 
 +
    #home_logo, #sideMenu { display:none; }
 +
    #sideMenu, #top_title, .patrollink  {display:none;}
 +
    #content { width:100%; padding:0px;  margin-top:-7px; margin-left:0px;}
 +
    body {background-color:#000000; }
 +
    #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5, #bodyContent p {
 +
        font-family: "Raleway", sans-serif;
 +
        line-height: 1.5;
 +
        margin-bottom: 0px;
 +
       
 +
    }
 +
 
 +
 
 +
 
 +
/**************************** NAVBAR *************************************/
 +
 
 +
/* Add a dark background color with a little bit see-through */
 +
.navbar {
 +
    left: -20px !important;
 +
    right: -20px !important;
 +
    top: -20px !important;
 +
    padding-top: 25px;
 +
    padding-bottom: 5px;
 +
    padding-left: 25px;
 +
    padding-right: 25px;
 +
    background-color: rgb(25, 55, 89);
 +
    border-color: transparent;
 +
    border: 0;
 +
    font-size: 13px !important;
 +
    letter-spacing: 1px;
 +
    /*opacity:0.95;*/
 +
    margin-top: 17px;
 +
    transition: background-color 0.5s ease-out;
 +
}
 +
 
 +
.navbar-nav {
 +
    margin-top: 2.1em !important;
 +
}
 +
 
 +
.navbar li {
 +
    margin: 0 2px;
 +
    border-radius: 5px;
 +
}
 +
 
 +
/* Add a gray color to all navbar links */
 +
.navbar li a, .navbar .navbar-brand {
 +
    color: #fff;
 +
    border-radius: 5px;
 +
}
 +
 
 +
/* the color of the single Link ('safety') on hover */
 +
.navbar-nav li a:hover {
 +
    color: #193759;//changed
 +
}
 +
 
 +
/* The active link this seems to be useless at the moment*/
 +
.navbar-nav li.active a {
 +
    color: #fff;
 +
    background-color:#29292c;
 +
}
 +
 
 +
/* Remove border color from the collapsible button */
 +
.navbar-default .navbar-toggle {
 +
    border-color: transparent;
 +
}
 +
 
 +
.navbar-default {
 +
    border-color:transparent;
 +
}
 +
 
 +
.navbar-collapse>ul:before {
 +
    content: "";
 +
    margin-top: 40px;
 +
}
 +
 
 +
@media (min-width: 768px){
 +
    .navbar-collapse>ul:before {
 +
        content: "";
 +
        margin-top: 0px;
 +
    }
 +
 
 +
    .navbar-right {
 +
        margin-right: 2% !important;
 +
    }
 +
 
 +
    .navbar-header {
 +
        margin-left: 2% !important;
 +
    }
 +
   
 +
    .navbar>li>a {
 +
        padding: 10px 15px;
 +
    }
 +
}
 +
@media (max-width: 761px){
 +
.dropdown-menu li a {
 +
    color: #ffffff;
 +
    letter-spacing: 1px;
 +
}
 +
}
 +
 
 +
/* the color of the Dropdown on click */
 +
.open .dropdown-toggle {
 +
    color: #193759;//changed
 +
    background-color: #fff;
 +
}
 +
 
 +
/* the color of the Dropdown links */
 +
.dropdown-menu li a {
 +
    color: #000;
 +
    letter-spacing: 1px;
 +
}
 +
 
 +
/* the color of the dropdown links on hover */
 +
.dropdown-menu li a:hover {
 +
    background-color: #fff;
 +
}
 +
 
 +
.navbar-toggle .icon-bar {
 +
    background: white;
 +
}
 +
 
 +
.navbar-header img {
 +
    height: 80px;
 +
}
 +
 
 +
#globalWrapper {
 +
    margin-bottom: 0px;
 +
    padding-bottom: 0px;
 +
}
 +
 
 +
#top_menu_14 {
 +
    height: 18px;
 +
}
 +
 
 +
#top_menu_14 #user_item {
 +
    margin-top: -3px;
 +
    padding-top: 0px;
 +
}
 +
 
 +
#top_menu_14 #bars_item img {
 +
    vertical-align: top;
 +
}
 +
 
 +
@media (max-width: 810px) {
 +
    #home-link {
 +
        display:none;
 +
    }
 +
}
 +
 
 +
.nav .open>a, .nav>li>a:hover, .nav .open:hover>a, .nav .dropdown:hover>a{
 +
    background-color: white;
 +
    border: none;
 +
    border-bottom-left-radius: 0px;
 +
    border-bottom-right-radius: 0px;
 +
    box-shadow: 0px 6px 12px rgba(0,0,0,.175);
 +
    color: #193759;//changed
 +
}
 +
 
 +
.nav .open .dropdown-menu, .nav .dropdown-menu {
 +
    border: none;
 +
    border-top-left-radius: 4px !important;
 +
}
 +
 
 +
.nav .open>a:hover, .nav a:focus {
 +
    background-color: white !important;
 +
}
 +
 
 +
@media (min-width: 979px) {
 +
  ul.nav li.dropdown:hover > ul.dropdown-menu {
 +
    display: block;
 +
  }
 +
}
 +
 
 +
.navbar.scrolled {
 +
    background-color: rgba(0,33,71,0.9);
 +
}
 +
 
 +
@media (min-width: 1200px) {
 +
    .container {
 +
        width: 1000px;
 +
    }
 +
}
 +
 
 +
 
 +
/**** PAGE CONTENT ****/
 +
 
 +
#bodyContent {
 +
    background-color: #000000;
 +
}
 +
 
 +
#bodyContent h1 {
 +
    text-align: center;
 +
    font-size: 48pt;
 +
    font-weight: lighter;
 +
    color: #fff;
 +
 
 +
}
 +
 
 +
#bodyContent h2 {
 +
    text-align: center;
 +
    font-size: 24pt;
 +
    font-weight: bold;
 +
    margin-top: calc(8vh);
 +
    margin-bottom: calc(5vh);
 +
color: #fff;
 +
}
 +
 
 +
#bodyContent h3 {
 +
    text-align: left;
 +
    font-size: 14pt;
 +
    font-weight: bold;
 +
color: #fff;
 +
}
 +
 
 +
#bodyContent h4 {
 +
    text-align: left;
 +
    font-size: 14pt;
 +
color: #fff;
 +
}
 +
 
 +
#bodyContent h5 {
 +
    text-align: center;
 +
    font-size: 12pt;
 +
    color: #ccc;
 +
}
 +
 
 +
#bodyContent p {
 +
    font-size: 14pt;
 +
    margin-top: 10px;
 +
color: #fff;
 +
}
 +
 
 +
#bodyContent .table {
 +
    font-size: 12pt;
 +
   
 +
}
 +
.img-center {
 +
    margin: 6pt auto;
 +
}
 +
 
 +
.img-reponsive {
 +
    margin-top: 6pt;
 +
    margin-bottom: 6pt;
 +
 
 +
}
 +
#bodyContent .imager{
 +
float: right;
 +
/*width: 200px;*/
 +
text-align: center;
 +
font-size: 12px;
 +
padding-left: 20px;
 +
 
 +
}
 +
 
 +
#bodyContent strong{
 +
    text-align: justify;
 +
    padding: calc(4vh);
 +
    font-size: 25px;
 +
line-height; 2.5;
 +
    color: white;
 +
}
 +
#bodyContent b{
 +
    color: white;
 +
    text-align: justify;
 +
    padding-top: 10px;
 +
    padding-bottom: 10px;
 +
}
 +
 
 +
#bodyContent .imagel{
 +
float: left;
 +
/*width: 200px;*/
 +
text-align: center;
 +
font-size: 12px;
 +
padding-right: 20px;
 +
 
 +
}
 +
 
 +
#side {
 +
    float: left;
 +
padding-right: 20px;
 +
padding-top: 15px;
 +
}
 +
#sider {
 +
    float: right;
 +
padding-left: 20px;
 +
padding-top: 15px;
 +
}
 +
 
 +
.container a{
 +
  color: #71C671;
 +
}
 +
 
 +
.container table, .container td, .contain .tr{
 +
    border: 0;
 +
    border-color: transparent;
 +
}
 +
  </style>
 +
 
 +
  <!-- Latest compiled JavaScript -->
 +
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 +
 
 +
  <!-- Google Analytics -->
 +
  <script>
 +
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
 +
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
 +
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
 +
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
 +
 
 +
  ga('create', 'UA-102136418-1', 'auto');
 +
  ga('send', 'pageview');
 +
 
 +
  </script>
 +
 
 +
 
 
</head>
 
</head>
−
<div class="igem_2018_team_content">
 
−
<div id="igemUCAS">
 
−
<div>
 
−
<img src="https://static.igem.org/mediawiki/2018/c/cb/T--UCAS-China--_Logo_1_PNG.png">
 
−
<a href="http://www.im.cas.cn/"><img src="https://static.igem.org/mediawiki/2017/2/25/T--UCAS--logo_institute_microbiology.png"></a>
 
−
<a href="http://www.ibp.cas.cn/"><img src="https://static.igem.org/mediawiki/2017/6/6b/T--UCAS--logo_institute_biophysics.png"></a>
 
−
<a href="http://bio.ucas.ac.cn/"><img src="https://static.igem.org/mediawiki/2017/7/77/T--UCAS--ColledgeLogo.png"></a>
 
−
<a href="http://www.gucas.ac.cn/"><img src="https://static.igem.org/mediawiki/2017/9/9f/T--UCAS--UCASLogo.png"></a>
 
−
</div>
 
−
<div>
 
−
<b>DESCRIPTION</b>
 
−
<p>One hundred years ago, there was a young boy who was seeking a unique rose for his behaved girl. That was freezing winter night, all roes had died. After a long time searching in the withered rose bushed fruitlessly, the young boy was almost desperate. Touched by his true love, a nightingale, who understood his wish, sung all night under the cold moonlight. Just before dawn, a rose stained with blood of the nightingale, bloomed, bright and fragrant.</p>
 
−
<img src="https://static.igem.org/mediawiki/2018/3/3c/T--UCAS-China--Description1.png">
 
−
<p>The nightingale, created by Oscar Wilde, built a red rose for true love out of her song under moonlight. To Wilde, the unique rose stained with blood of the nightingale is the symbol of love and true art. To us UCAS-China team, the touching story should be passed down to our generation and explained in a more scientific and interesting way with the tools of synthetic biology. Furthermore, as Wilde conveyed in the story, the barrier and combination of art and science still remain worth discussing, so we also explored in depth the relationship of art and science in the Human Practices section.</p>    
 
−
  <p>In our project which combining the four elements-music (the song of the nightingale), light (the moonlight), color (the stained rose) and odor (the rose fragrance), everyone is able to create his/her own with unique soul, together forming our rose forest in the junction of art and science!</p>
 
−
  <img src="https://static.igem.org/mediawiki/2018/1/14/T--UCAS-China--Description2.png">
 
  
−
<b>DESIGN</b>
 
−
<img src="https://static.igem.org/mediawiki/2018/8/8f/T--UCAS-China--Description3.png">
 
−
<p>In our work, the E. coli needed light and sound as inputs to produce color and odor as outputs. The process was mainly divided into three parts: sound to light, light to color, and light to odor. The light-color and light-odor conversions were achieved with the RGB system which was based on the phage RNAP system as a resource allocator. As for the sound-light conversion, we developed a software that allowed users to upload their own music to generate their unique dynamic pictures, with which people could color and ensoul their own roses.</p>
 
  
−
<b>LIGHT TO COLOR</b>
+
<!-- THIS IS WHERE THE HTML BEGINS -->
−
<img src="https://static.igem.org/mediawiki/2018/e/e5/T--UCAS-China--Description4.png">
+
 
−
<p>Firstly, we introduced the RGB system to stain our rose using light. The RGB system mainly consists of four modules, a sensor array, circuits, an resource allocator and  actuators. The sensor array combines 3 light sensors, Cph8*, YF1 and CcasR, which can respond to lights of different wavelengths. CcasR can sense and be switched on by green (535nm) light. Cph8* is switched off by red (650nm) light, while YF1 is switched off by blue (470nm) light. </p>
+
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="50">
−
<img src="https://static.igem.org/mediawiki/2018/c/c3/T--UCAS-China--Description5.png">
+
 
−
 
+
<nav class= "navbar-fixed-top navbar">
−
<p>To activate gene expression, the signals from the red- and blue- light sensors need to be inverted, which is done by connecting them to NOT gates in circuits.</p>
+
  <div class="container-fluid">
−
 
+
    <div class="navbar-header">
−
<p>The resource allocator which connects the circuits and actuators, is based on a split-RNA polymerase system, in which the sigma fragments activated by light sensors can combine with the constitutive expressed non-active ‘core’ fragment to form complete RNA polymerases, then activated the expression of actuators accordingly. For more information on the circuit design, see <a>light to color</a>. </p>
+
      <!-- This allows the navigation bar to be replaced by a button in the top right corner when screen is to small -->
 +
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
 +
        <span class="icon-bar"></span>
 +
        <span class="icon-bar"></span>
 +
        <span class="icon-bar"></span>
 +
      </button>
 +
 
 +
      <!-- This is the logo -->
 +
    <a href="https://2018.igem.org/Team:UCAS-China" class="navbar-left"><img src="https://static.igem.org/mediawiki/2018/c/cb/T--UCAS-China--_Logo_1_PNG.png"></a>
 +
 
 +
    </div>
 +
    <div class="collapse navbar-collapse" id="myNavbar">
 +
      <ul class="nav navbar-nav navbar-right">
 +
       
 +
        <li id="home-link"><a href="https://2018.igem.org/Team:UCAS-China">HOME</a></li>
 +
       
 +
        <!-- This is the project dropdown -->
 +
        <li class="dropdown">
 +
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">PROJECT
 +
            <span class="caret"></span>
 +
          </a>
 +
          <ul class="dropdown-menu">
 +
            <li><a href="https://2018.igem.org/Team:UCAS-China/Description">DESCRIPTION</a></li>
 +
            <li><a href="https://2018.igem.org/Team:UCAS-China/LightToColor">LIGHT TO COLOR</a></li>
 +
            <li><a href="https://2018.igem.org/Team:UCAS-China/LightToOdor">LIGHT TO ODOR</a></li>
 +
            <li><a href="https://2018.igem.org/Team:UCAS-China/SoundToLight">SOUND TO LIGHT</a></li>
 +
           
 +
          </ul>
 +
        </li>
 +
 
 +
        <!-- This is the results button -->
 +
        <li class="dropdown">
 +
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">RESULTS
 +
            <span class="caret"></span>
 +
          </a>
 +
          <ul class="dropdown-menu">
 +
            <li><a href="https://2018.igem.org/Team:UCAS-China/Validated_contribution">PROOF OF CONCEPT</a></li>
 +
            <li><a href="https://2018.igem.org/Team:UCAS-China/Demonstrate">DEMONSTRATE</a></li>
 +
            <li><a href="https://2018.igem.org/Team:UCAS-China/Software">SOFTWARE</a></li>
 +
            <li><a href="https://2018.igem.org/Team:UCAS-China/Hardware">HARDWARE</a></li>
 +
            <li><a href="https://2018.igem.org/Team:UCAS-China/Model">MODEL</a></li>
 +
            <li><a href="https://2018.igem.org/Team:UCAS-China/Improve">IMPROVE</a></li>
 +
         
 +
           
 +
           
 +
          </ul>
 +
        </li>
 +
<!-- This is the PARTS button -->
 +
        <li class="dropdown">
 +
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">PARTS
 +
            <span class="caret"></span>
 +
          </a>
 +
          <ul class="dropdown-menu">
 +
            <li><a href="https://2018.igem.org/Team:UCAS-China/Composite_Part">BASIC & COMPOSITE PARTS</a></li>
 +
            <li><a href="https://2018.igem.org/Team:UCAS-China/Part_Collection">PART COLLECTION</a></li>     
 +
          </ul>
 +
        </li>
 +
 
 +
 
 +
 
 +
          <!-- This is the human practices dropdown -->
 +
        <li class="dropdown">
 +
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">HUMAN PRACTICE
 +
            <span class="caret"></span>
 +
          </a>
 +
          <ul class="dropdown-menu">
 +
            <li><a href="https://2018.igem.org/Team:UCAS-China/Human_Practices">OVERVIEW</a></li>
 +
            <li><a href="https://2018.igem.org/Team:UCAS-China/Human_Practices/Gold_overview">GOLD—OVERVIEW</a></li>
 +
            <li><a href="https://2018.igem.org/Team:UCAS-China/Human_Practices/Gold_art-and-science">GOLD—ART X SCIENCE</a></li>
 +
            <li><a href="https://2018.igem.org/Team:UCAS-China/Human_Practices/orpheus">GOLD—ORPHEUS</a></li>
 +
            <li><a href="https://2018.igem.org/Team:UCAS-China/Human_Practices/gifts_for_the_world">GOLD—GIFTS FOR THE WORLD!</a></li>
 +
            <li><a href="https://2018.igem.org/Team:UCAS-China/Human_Practices/silver_overview">SILVER—OVERVIEW</a></li>
 +
            <li><a href="https://2018.igem.org/Team:UCAS-China/Collaborations">SILVER—COLLABORATIONS</a></li>
 +
            <li><a href="https://2018.igem.org/Team:UCAS-China/Human_Practices/silver_education">SILVER—EDUCATION</a></li>
 +
            <li><a href="https://2018.igem.org/Team:UCAS-China/Human_Practices/silver_interview">SILVER—INTERVIEW</a></li>
 +
            <li><a href="https://2018.igem.org/Team:UCAS-China/Public_Engagement">SILVER—PUBLIC ENGAGEMENT</a></li>
 +
            <li><a href="https://2018.igem.org/Team:UCAS-China/HP_safety">SILVER—SAFETY & SECURITY</a></li>
  
−
<p>The actuators we chose are three kinds of color protein: fluorescent protein, chromoprotein and enzyme which can produce colorful substance. Although more and more fluorescent proteins and chromoproteins are edited to generate more and more colors, the number of colors produced by organisms is still limited by the number of the kinds of proteins. Once a new color is needed, researchers have to modify the chromophores of the proteins, which costs much time and effort. So how to create more colors in a reasonable and convenient way? Here we put forward a new concept—mixing color in bacterial cells! Unlike the mix of different bacterial cells which produce different colors as the previous iGEM teams have done, we used tandem expression and RGB system to control the ratios of the expression of different colors in bacterial cells, to achieve mixing color in bacterial cells, and stain our roses with more bright colors.</p>
 
−
<img src="https://static.igem.org/mediawiki/2018/8/8f/T--UCAS-China--Description6.png">
 
  
−
<p>We built a hardware to generate lights with smooth distribution on the plates and controlled intensity, to activate our system to produce predictable colors. Our final hardware is designed and built to connect the computers with our bacteria on the plates, with the help of a projector, to achieve the interaction between users and our E.coli. More information see <a>Hardware</a></p>
+
         
 +
          </ul>
 +
        </li>
  
−
<b>LIGHT TO ODOR</b>
 
−
<p>Our roses are colorful now, but only fragrance that makes them vivid, appealing and with the soul as a real rose. So there came our second part, light to odor, making our roses more perfect and real. We first tried to use CRISPR/Cas9 gene-editing system to knock off the original gene of E. coli producing smell to prevent E. coli from giving off a nasty and unpleasant smell. Then based on the light-control system, we changed the actuators with genes which could produce various kinds of odors.</p>
 
−
<img src="https://static.igem.org/mediawiki/2018/f/fc/T--UCAS-China--Description7.png">
 
  
−
<p>The inherent unpleasant odor of E. coli comes from indole produced naturally in the cells’ metabolic process. In the L-tryptophan degradation pathway, Tryptophanase, encoded by tnaA gene, degraded L-tryptophan of indole, which produces the odor in high concentration.</p>
 
−
L-tryptophan + H2O = indole + pyruvate + NH3.
 
−
(The enzyme needs Co-factor: pyridoxal 5'-phosphate)
 
−
<p>We first tried to knock out the tnaA gene in the genome of E. coli, then we replaced the actuators in the RGB system with genes which can produce various kinds of fragrance. We devoted our effort to introducing diversified odor to make our roses not only vivid ones with traditional flower fragrance, but unique ones with more kinds of odor like lemon and rain. Thus we can use light to control the fragrance of E.coli, and the function of our system was tested by qPCR and HPLC. (more information see Light To ODOR)</p>
 
  
−
<b>SOUND TO LIGHT</b>
+
        <!-- This is the people dropdown -->
−
<img src="https://static.igem.org/mediawiki/2018/b/b9/T--UCAS-China--Description8.png">
+
        <li class="dropdown">
 +
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">PEOPLE
 +
            <span class="caret"></span>
 +
          </a>
 +
          <ul class="dropdown-menu">
 +
            <li><a href="https://2018.igem.org/Team:UCAS-China/People/Meet_the_Team">MEET THE TEAM!</a></li>
 +
            <li><a href="https://2018.igem.org/Team:UCAS-China/Attributions">ATTRIBUTIONS</a></li>
 +
            <li><a href="https://2018.igem.org/Team:UCAS-China/People/Medal_Achievements">ACHIEVEMENTS</a></li>
 +
            <li><a href="https://2018.igem.org/Team:UCAS-China/People/Notebook">NOTEBOOK</a></li>
 +
            <li><a href="https://2018.igem.org/Team:UCAS-China/Contributions">CONTRIBUTIONS</a></li>
 +
            <li><a href="https://2018.igem.org/Team:UCAS-China/People/safety">SAFETY & SECURITY</a></li>
 +
            <li><a href="https://2018.igem.org/Team:UCAS-China/People/acknowledgement">ACKNOWLEDGEMENT</a></li>
 +
          </ul>
 +
        </li>
  
−
<p>We could paint a colorful and fragrant rose through light , but it was sound that brought unique soul to the rose. To make everyone able to create his/her rose with unique soul, we developed a online software to convert music into unique colorful pictures. The users could choose their music or their own voice, and the pictures that they want to ensoul, to stain the pictures with the random colorful dots. When the music was input, the wave of sound will be read and amplitude and frequency of the music in a period of time will be extracted. The diameter and the color of the dots varied with the amplitude and frequency of the music, and the pictures thus were painted with beautiful colors. </p>
+
        <!-- This is the search button -->
−
<img src="https://static.igem.org/mediawiki/2018/e/ed/T--UCAS-China--Description9.png">
+
      </ul>
 +
    </div>
 +
  </div>
 +
</nav>
 +
<script>
 +
//
 +
function checkScroll(){
 +
    var startY = 200; //The point where the navbar changes in px
  
−
<b>THE COMBINATION OF ART & SCIENCE!</b>
+
    if($(window).scrollTop() > startY){
−
<p>As Wilde conveyed in the story, the barrier and combination of art and science still remain worth discussing, so we explored in depth the relationship of art and science in the Human Practices section. One prime barrier of outstanding art and science work is the stereotype of defining art as being too selfish and far from the public and science as all reality but no emotion. We did survey on the opinions of students from science and art background, and to our surprise we found the unconventional idea of combination of art and science has been well-accepted among the young generation.</p>
+
        $('.navbar').addClass("scrolled");
−
<p>Encouraged by the public need, we interviewed many professors who is experienced in popularization of both art and science, and also communicated with artists in the AS Research Center. During this process we gradually got motivated and had a clear idea of our story to explore the junction of art and science.(more information see HP)</p>
+
    }else{
 +
        $('.navbar').removeClass("scrolled");
 +
    }
 +
}
  
−
<p>More than a hundred years ago, In Wilde’s story, the rose was thrown into the gutter. But today, we UCAS-China iGEMers pick the rose back again, also offer everyone the chance to create their own roses. Inspired by idealism and stirring by imagination, facilitated by scientific gene circuit and develop a practical kit, we expect our work would inaugurate a new era of art and science!</p>
+
if($('.navbar').length > 0){
−
</div>
+
    $(window).on("scroll load resize", function(){
−
</div>
+
        checkScroll();
−
<script src="https://2018.igem.org/wiki/index.php?title=Template:UCAS-China/igemUCAS.js&action=raw&ctype=text/javascript"></script>
+
    });
−
+
}
−
</div>
+
</script>

Latest revision as of 06:48, 1 December 2018