Difference between revisions of "Template:UCAS-China"

m
 
(31 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>
−
<style type="text/css">
 
−
#top-section{border:0 none;height:14px;z-index:100;top:0;position:fixed;width:975px;left:50%;margin-left:-487px}#globalWrapper,#content{width:100%;height:100%;border:0;background-color:transparent;margin:0;padding:0}html,body,.wrapper{margin:0;padding:0;width:100%;height:100%;background-color:transparent}body{background-color:black;overflow-x:hidden;overflow-y:hidden}@import url(http://fonts.font.im/css?family=Merriweather+Sans:400,700);#igemUCAS{display:none;margin:0;padding:0}#loader{position:absolute;top:0;left:0;width:100%;height:100%;background-color:black;z-index:-100;visibility:visible}#header{position:absolute;top:0;left:0;margin:0;padding:0;width:100%;height:90px;background-color:white}#iU_book{position:absolute;top:90px;left:0;width:100%;height:calc(100% - 150px)}#footer{position:absolute;top:calc(100% - 60px);left:0;margin:0;padding:0;width:100%;height:60px;background-color:white;z-index:0}.H1{font-family:'Merriweather Sans';font-weight:700;position:absolute;top:20px;display:inline;color:#6f6f6f;font-size:25px;position:inherit;z-index:1;margin-left:20px;margin-right:20px}.H1:hover{color:yellow}.H2{position:absolute;color:#6f6f6f;top:60px;visibility:inherit}.HiddenCatalog{visibility:hidden}.VisibleCatalog{visibility:visible;width:100%}.script{font-family:Georgia;font-size:25px;text-align:justify;color:white;padding-bottom:20px}.title{font-size:40px;color:white}.jump{text-decoration:none}.highlight{color:yellow}#strSponsors{position:relative;top:-20px;font-size:30px;margin-left:45px;margin-right:20px}.sponsor{height:60px}#logo{position:absolute;top:10px;left:40px;margin:0;padding:0;height:70px;border:0;border-radius:50%}.arrow{width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:10px solid #8f8f8f;font-size:0;line-height:0}
 
−
</style>
 
−
<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">
 
−
<img src="https://static.igem.org/mediawiki/2018/1/12/T--UCAS-China--HugeLogo.png">
 
−
<img src="https://static.igem.org/mediawiki/2017/2/25/T--UCAS--logo_institute_microbiology.png" href="http://www.im.cas.cn/">
 
−
<img src="https://static.igem.org/mediawiki/2017/6/6b/T--UCAS--logo_institute_biophysics.png" href="http://www.ibp.cas.cn/">
 
−
<img src="https://static.igem.org/mediawiki/2017/7/77/T--UCAS--ColledgeLogo.png" href="http://bio.ucas.ac.cn/">
 
−
<img src="https://static.igem.org/mediawiki/2017/9/9f/T--UCAS--UCASLogo.png" href="http://www.gucas.ac.cn/">
 
−
</div>
 
−
<img src="https://static.igem.org/mediawiki/2018/5/5d/T--UCAS-China--ProjectDesc1.png">
 
−
<p>One hundred years ago, there was a young boy who was seeking a unique rose for his beloved girl. It was a freezing winter night, all roes had died. After a long time searching in the withered rose bush, the young boy was desperate. Touched by his true love, a nightingale, who heard and understood his wish, sung all night under the cold moonlight. Just before dawn, a rose stained with the blood of the nightingale, bloomed, bright and fragrant.</p>
 
−
<p>The writer Oscar Wilde, created a red rose for true love out of the nightengale’s 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 iGEM team, the touching story should be passed down to our generation and explained in a scientific and creative way using the tools of synthetic biology. Furthermore, as Wilde conveyed in the story, the barrier and combination of art and science still remain worthy of discussion, so we also explored in depth the relationship of art and science in the <a jumpto="human practice">Human Practices section</a>.</p>
 
−
<p>Our project combines the four elements-music: (the song of the nightingale), light (the moonlight), color (the stained rose) and odor (the rose fragrance). In our project every iGEMer 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/b/b2/T--UCAS-China--ProjectDesc2.png">
 
−
<b>DESIGN</b>
 
−
<p>In our project,  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>
 
−
<img src="https://static.igem.org/mediawiki/2018/a/af/T--UCAS-China--ProjectDesc3.png">
 
−
<b>LIGHT TO COLOR</b>
 
−
<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, a 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>
 
−
<img src="https://static.igem.org/mediawiki/2018/c/c2/T--UCAS-China--ProjectDesc4.png">
 
−
<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>
 
−
<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> section. </p>
 
−
<p>The actuators we chose were three kinds of color protein: fluorescent protein, chromoprotein and enzyme which can produce colorful products. 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 takes much time and effort.</p>
 
−
<p>So how do we create more colors in a reasonable and convenient way? Here, we put forward a new concept—mixing color into 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>
 
−
<p>We built 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 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> section.</p>
 
−
<b>LIGHT TO ODOR</b>
 
−
<p>Our roses are colorful now, but only with added fragrance can the rose bloom  more vivid, appealing and with a soul as a real rose. So this is our second part, light to odor, making our roses more soulful 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/6/60/T--UCAS-China--ProjectDesc5.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. (The enzyme needs Co-factor: pyridoxal 5'-phosphate)</p>
 
−
<pre>L-tryptophan + H2O = indole + pyruvate + NH3</pre>
 
−
<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. See <a>Light and Odor</a> section for more information.</p>
 
  
 +
<!-- THIS IS WHERE THE HTML BEGINS -->
 +
 +
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="50">
 +
 +
<nav class= "navbar-fixed-top navbar">
 +
  <div class="container-fluid">
 +
    <div class="navbar-header">
 +
      <!-- 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>
 +
 +
 +
         
 +
          </ul>
 +
        </li>
 +
 +
 +
 +
        <!-- This is the people dropdown -->
 +
        <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>
 +
 +
        <!-- This is the search button -->
 +
      </ul>
 +
    </div>
 +
  </div>
 +
</nav>
 +
<script>
 +
//
 +
function checkScroll(){
 +
    var startY = 200; //The point where the navbar changes in px
 +
 +
    if($(window).scrollTop() > startY){
 +
        $('.navbar').addClass("scrolled");
 +
    }else{
 +
        $('.navbar').removeClass("scrolled");
 +
    }
 +
}
  
−
<img src="https://static.igem.org/mediawiki/2018/0/0f/T--UCAS-China--ProjectDesc6.png">
+
if($('.navbar').length > 0){
−
<b>SOUND TO LIGHT</b>
+
    $(window).on("scroll load resize", function(){
−
<p>We could paint a colorful and fragrant rose with light , but it was sound that brought a unique soul to the rose.  To create his/her rose with a unique soul, we developed an 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 color the pictures with random colorful dots. When the music was input, after a specified time, the sound waves will be read and the amplitude and frequency of the music will be extracted. The diameter and the color of the dots varied with the amplitude and frequency of the music, and the pictures thus they were painted with beautiful colors. (see <a>Sound to light</a>)</p>
+
        checkScroll();
−
<img src="https://static.igem.org/mediawiki/2018/9/96/T--UCAS-China--ProjectDesc7.png">
+
    });
−
<b>THE COMBINATION OF ART & SCIENCE!</b>
+
}
−
<p> As Wilde conveyed in his 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 is the stereotype of defining art as being too selfish and far from the public and science as only about reality with no emotion. We surveyed university students from science and art backgrounds, and to our surprise we found the unconventional idea that the integration of art and science has been well-accepted among the younger generation.</p>
+
</script>
−
</div>
+
−
<script src="https://2018.igem.org/wiki/index.php?title=Template:UCAS-China/igemUCAS.js&action=raw&ctype=text/javascript"></script>
+
−
</div>
+

Latest revision as of 06:48, 1 December 2018