|
|
| Line 603: |
Line 603: |
| | <!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Content begins ---------------------------------------------------------------------------------------------------------------------------------> | | <!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Content begins ---------------------------------------------------------------------------------------------------------------------------------> |
| | <!----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------> | | <!----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------> |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − | <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
| |
| − | <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
| |
| − |
| |
| − |
| |
| − | <link rel="stylesheet" href="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/materialize.css&action=raw&ctype=text/css">
| |
| − |
| |
| − | <style>
| |
| − |
| |
| − | body{
| |
| − | margin:0;
| |
| − | padding:0;
| |
| − | background-color:#08273a;
| |
| − | }
| |
| − | a{
| |
| − | text-decoration:none;
| |
| − | }
| |
| − | #global_wrapper{
| |
| − | width:100%;
| |
| − | height:auto;
| |
| − | margin:0;
| |
| − | position:absolute;
| |
| − | }
| |
| − | #navUl{
| |
| − | width:100%;
| |
| − | height:110px;
| |
| − | padding:40px 0 0 0;
| |
| − | overflow:visible;
| |
| − | position:fixed;
| |
| − | list-style:none;
| |
| − | z-index:999;
| |
| − | background-color:#08273a;
| |
| − | margin:0;
| |
| − | top:0;
| |
| − | }
| |
| − | #mobileNav{
| |
| − | width:100%;
| |
| − | height:80px;
| |
| − | padding:20px 0 0 0;
| |
| − | top:0;
| |
| − | background-color:#001d2a;
| |
| − | position:fixed;
| |
| − | display:none;
| |
| − | text-align:center;
| |
| − | z-index:999;
| |
| − | }
| |
| − | #mobileNav img{
| |
| − | display:none;
| |
| − | margin:0;
| |
| − | padding:0;
| |
| − | }
| |
| − | #mobileLogo{
| |
| − | display:inline-block;
| |
| − | }
| |
| − | #mobileControl{
| |
| − | float:right;
| |
| − | display:inline-block;
| |
| − | margin-right:15px;
| |
| − | margin-top:3px;
| |
| − | }
| |
| − | #mobileCtrl{
| |
| − | height:25px;
| |
| − | }
| |
| − | #mobileTeamName{
| |
| − | display:inline-block;
| |
| − | }
| |
| − | #navImg{
| |
| − | display:inline-block;
| |
| − | float:left;
| |
| − | height:70px;
| |
| − | width:auto;
| |
| − | position:relative;
| |
| − | margin-left:4%;
| |
| − | margin-top:0;
| |
| − | }
| |
| − | .logo{
| |
| − | height:55px;
| |
| − | width:auto;
| |
| − | margin-top:1.3%;
| |
| − | }
| |
| − | .teamname{
| |
| − | height:28px;
| |
| − | }
| |
| − |
| |
| − | #navBar{
| |
| − | float:right;
| |
| − | position:relative;
| |
| − | width:auto;
| |
| − | display:inline-block;
| |
| − | margin-right:4%;
| |
| − | }
| |
| − | .navLi{
| |
| − | float:left;
| |
| − | display:inline-block;
| |
| − | margin-top:3%;
| |
| − | color:white;
| |
| − | font-size:20px;
| |
| − | position:relative;
| |
| − | margin-left:18px;
| |
| − | text-align:center;
| |
| − | font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
| |
| − | text-decoration:none;
| |
| − | }
| |
| − | .navA{
| |
| − | display:block;
| |
| − | text-align:center;
| |
| − | color:white;
| |
| − | text-decoration:none;
| |
| − | }
| |
| − | .navA2{
| |
| − | display:block;
| |
| − | overflow:visible;
| |
| − | color:white;
| |
| − | height:auto;
| |
| − | }
| |
| − | .ul2{
| |
| − | list-style:none;
| |
| − | position:absolute;
| |
| − | display:none;
| |
| − | overflow:hidden;
| |
| − | padding:10px 0 0 0 !important;
| |
| − | margin:0 !important;
| |
| − | font-size:17px;
| |
| − | left:50%;
| |
| − | transform:translateX(-50%);
| |
| − | border-bottom-left-radius: 10px;
| |
| − | border-bottom-right-radius: 10px;
| |
| − | background:linear-gradient(#08273a,rgba(0,138,201,1));
| |
| − | }
| |
| − | .li2{
| |
| − | padding:0;
| |
| − | margin:10px 20px;
| |
| − | text-align:center;
| |
| − | display:block;
| |
| − | }
| |
| − | .navA:link,.navA2:link{
| |
| − | text-decoration:none;
| |
| − | }
| |
| − | .navA:visited{
| |
| − | color:white;
| |
| − | }
| |
| − | .navA2:visited,.navA2:active{
| |
| − | color:white;
| |
| − | }
| |
| − | .navA:hover{
| |
| − | color:#7dded4;
| |
| − | }
| |
| − | .navA2:hover{
| |
| − | color:#7dded4;
| |
| − | }
| |
| − | .jqhover{
| |
| − | color:#7dded4;
| |
| − | }
| |
| − | .navA:hover{
| |
| − | text-decoration:none;
| |
| − | }
| |
| − | .navA:active{
| |
| − | text-decoration:none;
| |
| − | color:white;
| |
| − | }
| |
| − |
| |
| − | </style>
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − | <style>
| |
| − |
| |
| − | #pageContent{
| |
| − | margin:100px 0 0 0;
| |
| − | text-align:center;
| |
| − | }
| |
| − |
| |
| − | .row{
| |
| − | clear:both!important;
| |
| − | }
| |
| − |
| |
| − | .title1{
| |
| − | font-size:2.3rem;
| |
| − | text-align:center;
| |
| − | color:white;
| |
| − | display:block;
| |
| − | margin-top:10%;
| |
| − | margin-bottom:7%;
| |
| − | line-height:110%;
| |
| − | }
| |
| − | .title2{
| |
| − | color:white;
| |
| − | text-align:left;
| |
| − | font-size:2rem;
| |
| − | line-height:130%;
| |
| − | display:block;
| |
| − | width:100%;
| |
| − | }
| |
| − | .title3{
| |
| − | font-size:1.4rem;
| |
| − | color:white;
| |
| − | text-align:left !important;
| |
| − | display:block;
| |
| − | width:100%;
| |
| − | line-height:110%;
| |
| − | padding-left:2%;
| |
| − | }
| |
| − | .para1{
| |
| − | color:white;
| |
| − | text-align:justify !important;
| |
| − | align-items:flex-start;
| |
| − | line-height:140%;
| |
| − | font-size:1.3rem;
| |
| − | margin-bottom:50px !important;
| |
| − | width:100%;
| |
| − | margin:auto 0;
| |
| − | }
| |
| − | .para1 a{
| |
| − | text-decoration:underline !important;
| |
| − | color:white;
| |
| − | }
| |
| − | .para1 a:visited, .para1 a:active{
| |
| − | color:white;
| |
| − | }
| |
| − | .para1 a:hover{
| |
| − | color:rgba(96,255,249,1.00)!important;
| |
| − | }
| |
| − | .content1{
| |
| − | margin:7% auto;
| |
| − | }
| |
| − | .pic2{
| |
| − | width:150%;
| |
| − | }
| |
| − | .reverseDiv{
| |
| − | position:relative !important;
| |
| − | float:right !important;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | .paraUl{
| |
| − | list-style-type:decimal !important;
| |
| − | list-style-position:outside;
| |
| − | padding-left:auto;
| |
| − | font-size:1rem;
| |
| − | }
| |
| − | .paraUl li{
| |
| − | padding-right:4% ;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | #containerWithLeftNav{
| |
| − | display:block;
| |
| − | margin-left:25%;
| |
| − | }
| |
| − | .legend{
| |
| − | color:white;
| |
| − | text-align:center;
| |
| − | }
| |
| − | .legend>div{
| |
| − | width:100%;
| |
| − | text-align:justify!important;
| |
| − | font-size:1.1rem;
| |
| − | }
| |
| − | .legends{
| |
| − | margin:auto 15%;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | </style>
| |
| − |
| |
| − | <style>
| |
| − |
| |
| − | @media only screen and (max-width:1200px){
| |
| − | #mobileBar{
| |
| − | margin-left:4%;
| |
| − | }
| |
| − | .navLi{
| |
| − | font-size:18px;
| |
| − | margin-top:3.5%;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − |
| |
| − | @media only screen and (max-width:1100px){
| |
| − |
| |
| − | #navUl{
| |
| − | display:block;
| |
| − | float:right;
| |
| − | margin-top:0;
| |
| − | top:80px;
| |
| − | right:0;
| |
| − | background-color:rgba(0,0,0,0);
| |
| − | padding:0;
| |
| − | }
| |
| − |
| |
| − | #mobileNav{
| |
| − | display:block;
| |
| − | }
| |
| − |
| |
| − | #navImg{
| |
| − | display:none;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | #navBar{
| |
| − | margin:0 1% 0 0;
| |
| − | padding-right:2%;
| |
| − | padding-left:1%;
| |
| − | position:relative;
| |
| − | display:none;
| |
| − | }
| |
| − |
| |
| − | #mobileNav img{
| |
| − | display:inline-block;
| |
| − | margin:5px 0;
| |
| − | padding:0;
| |
| − | }
| |
| − | #mobileControl{
| |
| − | margin-top:8px;
| |
| − | }
| |
| − |
| |
| − | .logo{
| |
| − | height:45px;
| |
| − | margin-top:7px;
| |
| − | }
| |
| − | .navLi{
| |
| − | display:block;
| |
| − | position:relative;
| |
| − | float:right;
| |
| − | clear:both;
| |
| − | white-space:nowrap;
| |
| − | text-align:right;
| |
| − | margin:0;
| |
| − | height:60px;
| |
| − | width:100%;
| |
| − | background-color:#00324a;
| |
| − | }
| |
| − | .navA{
| |
| − | display:block;
| |
| − | text-align:right;
| |
| − | position:relative;
| |
| − | float:right;
| |
| − | padding:20px 20px !important;
| |
| − | }
| |
| − | .n2{
| |
| − | display:none;
| |
| − | width:0;
| |
| − | position:relative;
| |
| − | float:left;
| |
| − | text-align:right;
| |
| − | }
| |
| − | .ul2{
| |
| − | background:none;
| |
| − | padding-top:0;
| |
| − | background-color:#00557b;
| |
| − | text-align:right;
| |
| − | display:block;
| |
| − | position:relative;
| |
| − | float:right;
| |
| − | right:100%;
| |
| − | transform:translateX(0%);
| |
| − | top:0;
| |
| − | transform:translateY(1%);
| |
| − | border-radius:0 0 0 10px;
| |
| − | }
| |
| − | .open{
| |
| − | display:block;
| |
| − | }
| |
| − |
| |
| − | .title2{
| |
| − | font-size:1.8rem;
| |
| − | line-height:140%;
| |
| − | }
| |
| − | .para1{
| |
| − | font-size:1.3rem;
| |
| − | }
| |
| − | .pic2{
| |
| − | width:120%;
| |
| − | }
| |
| − |
| |
| − | .highlightIcon{
| |
| − | margin:20% auto 10% auto;
| |
| − | }
| |
| − | .highlightTitle{
| |
| − | margin-bottom:15%;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | }
| |
| − |
| |
| − |
| |
| − | @media only screen and (max-width:992px){
| |
| − |
| |
| − | #navUl{
| |
| − | display:block;
| |
| − | float:right;
| |
| − | margin:0;
| |
| − | top:80px;
| |
| − | right:0;
| |
| − | }
| |
| − |
| |
| − | #mobileNav{
| |
| − | display:block;
| |
| − | }
| |
| − |
| |
| − | #navImg{
| |
| − | display:none;
| |
| − | }
| |
| − |
| |
| − | #navTeamName{
| |
| − | display:none;
| |
| − | }
| |
| − |
| |
| − | #navBar{
| |
| − | margin:0 1% 0 0 ;
| |
| − | margin-right:2%;
| |
| − | padding-right:1%;
| |
| − | padding-left:1%;
| |
| − | position:relative;
| |
| − | display:none;
| |
| − | }
| |
| − | #mobileControl{
| |
| − | margin-top:10px;
| |
| − | }
| |
| − | #mobileNav img{
| |
| − | display:inline-block;
| |
| − | margin:5px 0;
| |
| − | padding:0;
| |
| − | }
| |
| − | .logo{
| |
| − | height:40px;
| |
| − | }
| |
| − | .navLi{
| |
| − | display:block;
| |
| − | position:relative;
| |
| − | float:right;
| |
| − | clear:both;
| |
| − | white-space:nowrap;
| |
| − | text-align:right;
| |
| − | height:60px;
| |
| − | width:100%;
| |
| − | }
| |
| − | .navA{
| |
| − | display:block;
| |
| − | text-align:right;
| |
| − | position:relative;
| |
| − | float:right;
| |
| − | font-size:15px;
| |
| − | }
| |
| − | .n2{
| |
| − | display:none;
| |
| − | width:0;
| |
| − | position:relative;
| |
| − | float:left;
| |
| − | }
| |
| − | .ul2{
| |
| − | font-size:13px;
| |
| − | }
| |
| − | .open{
| |
| − | display:block;
| |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| − | #animation_container{
| |
| − | display:none;
| |
| − | }
| |
| − | #teamLogo{
| |
| − | display:block;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | .title2{
| |
| − | font-size:1.5rem;
| |
| − | }
| |
| − | .para1{
| |
| − | font-size:1.2rem;
| |
| − | }
| |
| − | .pic2{
| |
| − | width:100%;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | }
| |
| − |
| |
| − |
| |
| − | @media only screen and (max-width:768px){
| |
| − | .col-md-4{
| |
| − | clear:both;
| |
| − | }
| |
| − | .col-md-8{
| |
| − | clear:both;
| |
| − | }
| |
| − | .pic2{
| |
| − | margin-bottom:10%;
| |
| − | width:80%;
| |
| − | }
| |
| − | .title2{
| |
| − | font-size:1.2rem;
| |
| − | }
| |
| − | .para1{
| |
| − | font-size:1rem;
| |
| − | }
| |
| − | .pic2{
| |
| − | width:80%;
| |
| − | }
| |
| − | #sponser img {
| |
| − | width:60%;
| |
| − | }
| |
| − |
| |
| − | #containerWithLeftNav{
| |
| − | margin-left:auto;
| |
| − | }
| |
| − |
| |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| − | </style>
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − | <style>
| |
| − | #footContainer{
| |
| − | width:90%;
| |
| − | }
| |
| − | #FudanFooter{
| |
| − | margin:auto 0;
| |
| − | width:100%;
| |
| − | padding:3% 0;
| |
| − | }
| |
| − | #FudanFooter #usefulLinks {
| |
| − | color: #cacaca;
| |
| − | padding-left: 1rem;
| |
| − | }
| |
| − |
| |
| − | #FudanFooter #usefulLinks ul {
| |
| − | font-size: 13px;
| |
| − | line-height: 14px;
| |
| − | border-top: solid 2px;
| |
| − | color: inherit;
| |
| − | text-decoration: none;
| |
| − | padding-top: 5px;
| |
| − | margin:0;
| |
| − | }
| |
| − |
| |
| − | #FudanFooter #usefulLinks div {
| |
| − | color: #cacaca;
| |
| − | }
| |
| − |
| |
| − | #FudanFooter #usefulLinks div:hover {
| |
| − | color: white;
| |
| − | }
| |
| − |
| |
| − | #FudanFooter #usefulLinks a {
| |
| − | color: inherit;
| |
| − | }
| |
| − |
| |
| − | #FudanFooter #usefulLinks a:hover {
| |
| − | text-decoration: underline;
| |
| − | }
| |
| − |
| |
| − | #FudanFooter #usefulLinks div.active,
| |
| − | #FudanFooter #usefulLinks div.active a {
| |
| − | color: white;
| |
| − | }
| |
| − |
| |
| − | #FudanFooter #usefulLinks div.active ul {
| |
| − | border-top: solid white 2px;
| |
| − | }
| |
| − |
| |
| − | #FudanFooter #usefulLinks li {
| |
| − | padding: 3px 0 6px 3px;
| |
| − | list-style:none;
| |
| − | }
| |
| − |
| |
| − | #usefulLinks span {
| |
| − | font-size: 20px;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | #FudanFooter div.footer-copyright {
| |
| − | font-size: 13px;
| |
| − | line-height: 15px;
| |
| − | }
| |
| − | .footerUl{
| |
| − | margin:2% 4%;
| |
| − | }
| |
| − | </style>
| |
| − |
| |
| − | <script>
| |
| − |
| |
| − | $(document).ready(function(){
| |
| − |
| |
| − |
| |
| − | var winWidth=$(window).width();
| |
| − |
| |
| − | if (winWidth>1100){
| |
| − | $(".navA").mouseenter(function(){
| |
| − | $(this).parent().find(".ul2").stop().fadeIn(400);
| |
| − | });
| |
| − | $(".navLi").mouseleave(function(){
| |
| − | $(this).find(".ul2").stop().fadeOut(400);
| |
| − | });
| |
| − |
| |
| − |
| |
| − | }
| |
| − | else{
| |
| − | $(".navA:not(.noSubmenu)").removeAttr("href");
| |
| − | $("#mobileNav").click(function(){
| |
| − | $("#navBar").toggle();
| |
| − | });
| |
| − | $(document).click(function(event){
| |
| − | var m = $("#mobileNav,#navBar");
| |
| − | if (!m.is(event.target)){
| |
| − | if (m.has(event.target).length===0){
| |
| − | $("#navBar").hide();
| |
| − | $(".open").parent().find(".navA").css("color","white");
| |
| − | $(".open").removeClass("open");
| |
| − | }
| |
| − |
| |
| − | }
| |
| − | });
| |
| − | $(".navLi").click(function(){
| |
| − | if ($(this).find(".n2").hasClass("open")){
| |
| − | $(".open").parent().find(".navA").css("color","white");
| |
| − | $(this).find(".n2").removeClass("open");
| |
| − | }
| |
| − | else{
| |
| − | $(".open").parent().find(".navA").css("color","white");
| |
| − | $(".open").removeClass("open");
| |
| − | $(this).find(".n2").addClass("open");
| |
| − | $(this).find(".navA").css("color","#7dded4");
| |
| − | }
| |
| − | });
| |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − | });
| |
| − |
| |
| − |
| |
| − | </script>
| |
| − |
| |
| − |
| |
| − |
| |
| − | <div id="global_wrapper">
| |
| − | <div id="mobileNav">
| |
| − |
| |
| − | <div id="mobileLogo"><img src="https://static.igem.org/mediawiki/2019/d/d3/T--Fudan-TSI--HomepageLogo.gif" class="logo"></div>
| |
| − | <div id="mobileControl"><img src="https://static.igem.org/mediawiki/2019/thumb/a/ae/T--Fudan-TSI--mobileCtrl.gif/683px-T--Fudan-TSI--mobileCtrl.gif" id="mobileCtrl"></div>
| |
| − |
| |
| − | </div>
| |
| − |
| |
| − | <ul id="navUl">
| |
| − |
| |
| − | <li id="navImg">
| |
| − | <img src="https://static.igem.org/mediawiki/2019/d/d3/T--Fudan-TSI--HomepageLogo.gif" class="logo">
| |
| − |
| |
| − | </li>
| |
| − |
| |
| − |
| |
| − | <ul id="navBar">
| |
| − |
| |
| − | <li class="navLi"><a class="navA noSubmenu" href="https://2019.igem.org/Team:Fudan-TSI">Home</a></li>
| |
| − |
| |
| − | <li class="navLi">
| |
| − | <a class="navA" href="https://2019.igem.org/Team:Fudan-TSI/Description">Project</a>
| |
| − | <div class="n2">
| |
| − | <ul class="ul2">
| |
| − | <li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Description">Description</a></li>
| |
| − | <li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Design">Design</a></li>
| |
| − | <li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Design" style="white-space:nowrap">Applied Design</a></li>
| |
| − | <li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Experiment">Experiment</a></li>
| |
| − | </ul>
| |
| − | </div>
| |
| − | </li>
| |
| − |
| |
| − | <li class="navLi">
| |
| − | <a class="navA" href="https://2019.igem.org/Team:Fudan-TSI/Results">Results</a>
| |
| − | <div class="n2">
| |
| − | <ul class="ul2">
| |
| − | <li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Results/Reverse_Transcription">Reverse Transcription</a></li>
| |
| − | <li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Results/Recombination">Recombination</a></li>
| |
| − | <li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Demonstrate">Demonstration</a></li>
| |
| − | <li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Measurement">Measurement</a></li>
| |
| − | <li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Notebook">Notebook</a></li>
| |
| − | </ul>
| |
| − | </div>
| |
| − | </li>
| |
| − |
| |
| − | <li class="navLi">
| |
| − | <a class="navA" href="https://2019.igem.org/Team:Fudan-TSI/Model_Software">Model</a>
| |
| − | <div class="n2">
| |
| − | <ul class="ul2">
| |
| − | <li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Model">Modeling</a></li>
| |
| − | <li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Software">Software</a></li>
| |
| − | </ul>
| |
| − | </div>
| |
| − | </li>
| |
| − |
| |
| − | <li class="navLi">
| |
| − | <a class="navA" href="https://2019.igem.org/Team:Fudan-TSI/Parts">Parts</a>
| |
| − | <div class="n2">
| |
| − | <ul class="ul2">
| |
| − | <li class="li2"><a class="navA2" style="white-space:nowrap;" href="https://2019.igem.org/Team:Fudan-TSI/Basic_Part">Basic Parts</a></li>
| |
| − | <li class="li2"><a class="navA2" style="white-space:nowrap;" href="https://2019.igem.org/Team:Fudan-TSI/Composite_Part">Composite Parts</a></li>
| |
| − | <li class="li2"><a class="navA2" style="white-space:nowrap;" href="https://2019.igem.org/Team:Fudan-TSI/Improve">Improved Parts</a></li>
| |
| − | <li class="li2"><a class="navA2" style="white-space:nowrap;" href="https://2019.igem.org/Team:Fudan-TSI/Part_Collection">Part Collection</a></li>
| |
| − | </ul>
| |
| − | </div>
| |
| − | </li>
| |
| − |
| |
| − | <li class="navLi">
| |
| − | <a class="navA" href="https://2019.igem.org/Team:Fudan-TSI/Human_Practices">Human Practices</a>
| |
| − | <div class="n2">
| |
| − | <ul class="ul2">
| |
| − | <li class="li2"><a class="navA2" style="white-space:nowrap;" href="https://2019.igem.org/Team:Fudan-TSI/Public_Engagement">Education & <br />Public Engagement</a></li>
| |
| − | <li class="li2"><a class="navA2" style="white-space:nowrap;" href="https://2019.igem.org/Team:Fudan-TSI/Integrated_Human_Practice">Integrated <br />Human Practice</a></li>
| |
| − | <li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Collaborations">Collaboration</a></li>
| |
| − | <li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Safety">Safety</a></li>
| |
| − | </ul>
| |
| − | </div>
| |
| − | </li>
| |
| − |
| |
| − | <li class="navLi">
| |
| − | <a class="navA" href="https://2019.igem.org/Team:Fudan-TSI/Team">Team</a>
| |
| − | <div class="n2">
| |
| − | <ul class="ul2">
| |
| − | <li class="li2"><a class="navA2" style="white-space:nowrap;" href="https://2019.igem.org/Team:Fudan-TSI/Team">Team Members</a></li>
| |
| − | <li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Team/Attribution">Attribution</a></li>
| |
| − | </ul>
| |
| − | </div>
| |
| − | </li>
| |
| − |
| |
| − | <li class="navLi"><a class="navA noSubmenu" href="https://igem.org/2019_Judging_Form?id=3257">Judging</a></li>
| |
| − |
| |
| − | </ul>
| |
| − |
| |
| − |
| |
| − | </ul>
| |
| − |
| |
| − | <!----------------------------------------------------------------------------------------------------------------------------------------->
| |
| − | <!---- Cover ---->
| |
| − | <!----------------------------------------------------------------------------------------------------------------------------------------->
| |
| − |
| |
| − | <div id="pageCover">
| |
| − |
| |
| − | <script type="text/javascript" src="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/bkg&action=raw&ctype=text/javascript"></script>
| |
| − | <script>
| |
| − | $(document).ready(function($){
| |
| − | var $root = $('html, body');
| |
| − | $('a[href^="#"]').click(function() {
| |
| − | var href = $.attr(this, 'href');
| |
| − | $root.animate({
| |
| − | scrollTop: $(href).offset().top
| |
| − | }, 1000, function () {
| |
| − | window.location.hash = href;
| |
| − | });
| |
| − | return false;
| |
| − | });
| |
| − | })
| |
| − | </script>
| |
| − |
| |
| − | <svg id="demo" viewBox="0 0 1600 600" preserveAspectRatio="xMidYMid slice" style="z-index: -100;">
| |
| − | <defs>
| |
| − | <linearGradient id="grad1" x1="0" y1="0" x2="1" y2="0" color-interpolation="sRGB">
| |
| − | <stop id="stop1a" offset="0%" stop-color="#12a3b4"></stop>
| |
| − | <stop id="stop1b" offset="100%" stop-color="#ff509e"></stop>
| |
| − | </linearGradient>
| |
| − | <linearGradient id="grad2" x1="0" y1="0" x2="1" y2="0" color-interpolation="sRGB">
| |
| − | <stop id="stop2a" offset="0%" stop-color="#e3bc13"></stop>
| |
| − | <stop id="stop2b" offset="100%" stop-color="#00a78f"></stop>
| |
| − | </linearGradient>
| |
| − | </defs>
| |
| − | <rect id="rect1" x="0" y="0" width="1600" height="600" stroke="none" fill="url(#grad1)"></rect>
| |
| − | <rect id="rect2" x="0" y="0" width="1600" height="600" stroke="none" fill="url(#grad2)"></rect>
| |
| − | </svg>
| |
| − | <div id="demoCover"><img id="coverPic" src="https://static.igem.org/mediawiki/2019/2/2d/T--Fudan-TSI--coverCollaboration.gif"></div>
| |
| − | </div>
| |
| − | <style>
| |
| − | #pageCover{
| |
| − | width:100%;
| |
| − | margin:0;
| |
| − | padding-top:80px;
| |
| − | }
| |
| − | #demoCover{
| |
| − | width:100vw;
| |
| − | height:80vh;
| |
| − | position:absolute;
| |
| − | background-color:rgba(8,39,58,0.5);
| |
| − | top:70px;
| |
| − | left:0;
| |
| − | text-align:center;
| |
| − | }
| |
| − | #coverPic{
| |
| − | width:900px;
| |
| − | margin:20vh auto;
| |
| − | }
| |
| − | #demo{
| |
| − | width:100vw;
| |
| − | height:70vh;
| |
| − | position:relative;
| |
| − | }
| |
| − | #demo svg {
| |
| − | width: 100%;
| |
| − | height: 100%;
| |
| − | position: fixed;
| |
| − | }
| |
| − | #demo svg g {
| |
| − | mix-blend-mode: lighten;
| |
| − | }
| |
| − | #demo svg polygon {
| |
| − | stroke: none;
| |
| − | fill: white;
| |
| − | }
| |
| − |
| |
| − | @media only screen and (max-width:1100px){
| |
| − | #pageCover{
| |
| − | padding-top:55px;
| |
| − | }
| |
| − | #demoCover{
| |
| − | top:55px;
| |
| − | height:30vh;
| |
| − | }
| |
| − | #demo{
| |
| − | height:30vh;
| |
| − | }
| |
| − | #coverPic{
| |
| − | width:800px;
| |
| − | margin:7vh auto;
| |
| − | }
| |
| − | }
| |
| − | @media only screen and (max-width:992px){
| |
| − | #pageCover{
| |
| − | padding-top:55px;
| |
| − | }
| |
| − | #demoCover{
| |
| − | top:55px;
| |
| − | }
| |
| − | #coverPic{
| |
| − | width:700px;
| |
| − | margin:6vh auto;
| |
| − | }
| |
| − | }
| |
| − | @media only screen and (max-width:768px){
| |
| − | #pageCover{
| |
| − | padding-top:55px;
| |
| − | }
| |
| − | #demoCover{
| |
| − | top:55px;
| |
| − | }
| |
| − | #coverPic{
| |
| − | width:500px;
| |
| − | margin:8vh auto;
| |
| − | }
| |
| − | }
| |
| − | @media only screen and (max-width:500px){
| |
| − | #coverPic{
| |
| − | width:250px;
| |
| − | margin:8vh auto;
| |
| − | }
| |
| − | }
| |
| − | </style>
| |
| − | <script>
| |
| − | //////////////////////////////
| |
| − | // Demo Functions
| |
| − | //////////////////////////////
| |
| − | function bkgFunction(showStats) {
| |
| − | // stats
| |
| − | if (showStats) {
| |
| − | var stats = new Stats();
| |
| − | stats.domElement.style.position = 'absolute';
| |
| − | stats.domElement.style.left = '0';
| |
| − | stats.domElement.style.top = '0';
| |
| − | document.body.appendChild(stats.domElement);
| |
| − | requestAnimationFrame(function updateStats(){
| |
| − | stats.update();
| |
| − | requestAnimationFrame(updateStats);
| |
| − | });
| |
| − | }
| |
| − | // init
| |
| − | var svg = document.getElementById('demo');
| |
| − | tesselation.setup(svg);
| |
| − | gradients.setup();
| |
| − | var lastTransitionAt, transitionDelay = 10000, transitionDuration = 3000;
| |
| − | function playNextTransition() {
| |
| − | tesselation.next(transitionDuration);
| |
| − | gradients.next(transitionDuration);
| |
| − | };
| |
| − | function tick(time) {
| |
| − | if (!lastTransitionAt || time - lastTransitionAt > transitionDelay) {
| |
| − | lastTransitionAt = time;
| |
| − | playNextTransition();
| |
| − | }
| |
| − | window.requestAnimationFrame(tick);
| |
| − | }
| |
| − | window.requestAnimationFrame(tick);
| |
| − | }
| |
| − | //////////////////////////////
| |
| − | // Delaunay Triangulation
| |
| − | //////////////////////////////
| |
| − | var calcDelaunayTriangulation = (function() {
| |
| − | var EPSILON = 1.0 / 1048576.0;
| |
| − | function getSuperT(vertices) {
| |
| − | var xMin = Number.POSITIVE_INFINITY, yMin = Number.POSITIVE_INFINITY,
| |
| − | xMax = Number.NEGATIVE_INFINITY, yMax = Number.NEGATIVE_INFINITY,
| |
| − | i, xDiff, yDiff, maxDiff, xCenter, yCenter;
| |
| − | for(i = vertices.length; i--; ) {
| |
| − | if(vertices[i][0] < xMin) xMin = vertices[i][0];
| |
| − | if(vertices[i][0] > xMax) xMax = vertices[i][0];
| |
| − | if(vertices[i][1] < yMin) yMin = vertices[i][1];
| |
| − | if(vertices[i][1] > yMax) yMax = vertices[i][1];
| |
| − | }
| |
| − | xDiff = xMax - xMin;
| |
| − | yDiff = yMax - yMin;
| |
| − | maxDiff = Math.max(xDiff, yDiff);
| |
| − | xCenter = xMin + xDiff * 0.5;
| |
| − | yCenter = yMin + yDiff * 0.5;
| |
| − | return [
| |
| − | [xCenter - 20 * maxDiff, yCenter - maxDiff],
| |
| − | [xCenter, yCenter + 20 * maxDiff],
| |
| − | [xCenter + 20 * maxDiff, yCenter - maxDiff]
| |
| − | ];
| |
| − | }
| |
| − | function circumcircle(vertices, i, j, k) {
| |
| − | var xI = vertices[i][0], yI = vertices[i][1],
| |
| − | xJ = vertices[j][0], yJ = vertices[j][1],
| |
| − | xK = vertices[k][0], yK = vertices[k][1],
| |
| − | yDiffIJ = Math.abs(yI - yJ), yDiffJK = Math.abs(yJ - yK),
| |
| − | xCenter, yCenter, m1, m2, xMidIJ, xMidJK, yMidIJ, yMidJK, xDiff, yDiff;
| |
| − | // bail condition
| |
| − | if(yDiffIJ < EPSILON){
| |
| − | if (yDiffJK < EPSILON){
| |
| − | throw new Error("Can't get circumcircle since all 3 points are y-aligned");
| |
| − | }
| |
| − | }
| |
| − |
| |
| − |
| |
| − | // calc circumcircle center x/y, radius
| |
| − | m1 = -((xJ - xI) / (yJ - yI));
| |
| − | m2 = -((xK - xJ) / (yK - yJ));
| |
| − | xMidIJ = (xI + xJ) / 2.0;
| |
| − | xMidJK = (xJ + xK) / 2.0;
| |
| − | yMidIJ = (yI + yJ) / 2.0;
| |
| − | yMidJK = (yJ + yK) / 2.0;
| |
| − | xCenter = (yDiffIJ < EPSILON) ? xMidIJ :
| |
| − | (yDiffJK < EPSILON) ? xMidJK :
| |
| − | (m1 * xMidIJ - m2 * xMidJK + yMidJK - yMidIJ) / (m1 - m2);
| |
| − | yCenter = (yDiffIJ > yDiffJK) ?
| |
| − | m1 * (xCenter - xMidIJ) + yMidIJ :
| |
| − | m2 * (xCenter - xMidJK) + yMidJK;
| |
| − | xDiff = xJ - xCenter;
| |
| − | yDiff = yJ - yCenter;
| |
| − | // return
| |
| − | return {i: i, j: j, k: k, x: xCenter, y: yCenter, r: xDiff * xDiff + yDiff * yDiff};
| |
| − | }
| |
| − | function dedupeEdges(edges) {
| |
| − | var i, j, a, b, m, n;
| |
| − | for(j = edges.length; j; ) {
| |
| − | b = edges[--j]; a = edges[--j];
| |
| − | for(i = j; i; ) {
| |
| − | n = edges[--i]; m = edges[--i];
| |
| − | if(a === m){
| |
| − | if (b===n){
| |
| − | edges.splice(j, 2); edges.splice(i, 2);
| |
| − | break;
| |
| − | }
| |
| − | }
| |
| − | if(a === n){
| |
| − | if (b===m){
| |
| − | edges.splice(j, 2); edges.splice(i, 2);
| |
| − | break;
| |
| − | }
| |
| − | }
| |
| − | }
| |
| − | }
| |
| − | }
| |
| − | return function(vertices) {
| |
| − | var n = vertices.length,
| |
| − | i, j, indices, st, candidates, locked, edges, dx, dy, a, b, c;
| |
| − | // bail if too few / too many verts
| |
| − | if(n < 3 || n > 2000)
| |
| − | return [];
| |
| − | // copy verts and sort indices by x-position
| |
| − | vertices = vertices.slice(0);
| |
| − | indices = new Array(n);
| |
| − | for(i = n; i--; )
| |
| − | indices[i] = i;
| |
| − | indices.sort(function(i, j) {
| |
| − | return vertices[j][0] - vertices[i][0];
| |
| − | });
| |
| − | // supertriangle
| |
| − | st = getSuperT(vertices);
| |
| − | vertices.push(st[0], st[1], st[2]);
| |
| − | // init candidates/locked tris list
| |
| − | candidates = [circumcircle(vertices, n + 0, n + 1, n + 2)];
| |
| − | locked = [];
| |
| − | edges = [];
| |
| − | // scan left to right
| |
| − | for(i = indices.length; i--; edges.length = 0) {
| |
| − | c = indices[i];
| |
| − | // check candidates tris against point
| |
| − | for(j = candidates.length; j--; ) {
| |
| − | // lock tri if point to right of circumcirc
| |
| − | dx = vertices[c][0] - candidates[j].x;
| |
| − | if (dx > 0.0){
| |
| − | if(dx * dx > candidates[j].r){
| |
| − | locked.push(candidates[j]);
| |
| − | candidates.splice(j, 1);
| |
| − | continue;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − |
| |
| − | // point outside circumcirc = leave candidates
| |
| − | dy = vertices[c][1] - candidates[j].y;
| |
| − | if(dx * dx + dy * dy - candidates[j].r > EPSILON)
| |
| − | continue;
| |
| − | // point inside circumcirc = break apart, save edges
| |
| − | edges.push(
| |
| − | candidates[j].i, candidates[j].j,
| |
| − | candidates[j].j, candidates[j].k,
| |
| − | candidates[j].k, candidates[j].i
| |
| − | );
| |
| − | candidates.splice(j, 1);
| |
| − | }
| |
| − | // new candidates from broken edges
| |
| − | dedupeEdges(edges);
| |
| − | for(j = edges.length; j; ) {
| |
| − | b = edges[--j];
| |
| − | a = edges[--j];
| |
| − | candidates.push(circumcircle(vertices, a, b, c));
| |
| − | }
| |
| − | }
| |
| − | // close candidates tris, remove tris touching supertri verts
| |
| − | for(i = candidates.length; i--; )
| |
| − | locked.push(candidates[i]);
| |
| − | candidates.length = 0;
| |
| − | for(i = locked.length; i--; )
| |
| − | if(locked[i].i < n){
| |
| − | if(locked[i].j < n){
| |
| − | if(locked[i].k < n){
| |
| − | candidates.push(locked[i].i, locked[i].j, locked[i].k);
| |
| − | }
| |
| − | }
| |
| − | }
| |
| − |
| |
| − |
| |
| − | // done
| |
| − | return candidates;
| |
| − | };
| |
| − | })();
| |
| − | var tesselation = (function() {
| |
| − | var svg, svgW, svgH, prevGroup;
| |
| − | function createRandomTesselation() {
| |
| − | var wW = window.innerWidth;
| |
| − | var wH = window.innerHeight;
| |
| − | var gridSpacing = 250, scatterAmount = 0.75;
| |
| − | var gridSize, i, x, y;
| |
| − | if (wW / wH > svgW / svgH) { // window wider than svg = use width for gridSize
| |
| − | gridSize = gridSpacing * svgW / wW;
| |
| − | } else { // window taller than svg = use height for gridSize
| |
| − | gridSize = gridSpacing * svgH / wH;
| |
| − | }
| |
| − | var vertices = [];
| |
| − | var xOffset = (svgW % gridSize) / 2, yOffset = (svgH % gridSize) / 2;
| |
| − | for (x = Math.floor(svgW/gridSize) + 1; x >= -1; x--) {
| |
| − | for (y = Math.floor(svgH/gridSize) + 1; y >= -1; y--) {
| |
| − | vertices.push(
| |
| − | [
| |
| − | xOffset + gridSize * (x + scatterAmount * (Math.random() - 0.5)),
| |
| − | yOffset + gridSize * (y + scatterAmount * (Math.random() - 0.5))
| |
| − | ]
| |
| − | );
| |
| − | }
| |
| − | }
| |
| − | var triangles = calcDelaunayTriangulation(vertices);
| |
| − | var group = document.createElementNS('http://www.w3.org/2000/svg','g');
| |
| − | var polygon;
| |
| − | for(i = triangles.length; i; ) {
| |
| − | polygon = document.createElementNS('http://www.w3.org/2000/svg','polygon');
| |
| − | polygon.setAttribute('points',
| |
| − | vertices[triangles[--i]][0] + ',' + vertices[triangles[i]][1] + ' ' +
| |
| − | vertices[triangles[--i]][0] + ',' + vertices[triangles[i]][1] + ' ' +
| |
| − | vertices[triangles[--i]][0] + ',' + vertices[triangles[i]][1]
| |
| − | );
| |
| − | group.appendChild(polygon);
| |
| − | }
| |
| − | return group;
| |
| − | }
| |
| − | return {
| |
| − | setup: function(svgElement) {
| |
| − | svg = svgElement;
| |
| − | var vb = svg.getAttribute('viewBox').split(/\D/g);
| |
| − | svgW = vb[2];
| |
| − | svgH = vb[3];
| |
| − | },
| |
| − | next: function(t) {
| |
| − | var toRemove, i, n;
| |
| − | t /= 1000;
| |
| − | if(prevGroup){
| |
| − | if(prevGroup.children){
| |
| − | if(prevGroup.children.length){
| |
| − | toRemove = prevGroup;
| |
| − | n = toRemove.children.length;
| |
| − | for (i = n; i--; ) {
| |
| − | TweenMax.to(toRemove.children[i], t*0.4, {opacity: 0, delay: t*(0.3*i/n)});
| |
| − | }
| |
| − | TweenMax.delayedCall(t * (0.7 + 0.05), function(group) { svg.removeChild(group); }, [toRemove], this);
| |
| − | }
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | var g = createRandomTesselation();
| |
| − | n = g.children.length;
| |
| − | for (i = n; i--; ) {
| |
| − | TweenMax.fromTo(g.children[i], t*0.4, {opacity: 0}, {opacity: 0.3 + 0.25 * Math.random(), delay: t*(0.3*i/n + 0.3), ease: Back.easeOut});
| |
| − | }
| |
| − | svg.appendChild(g);
| |
| − | prevGroup = g;
| |
| − | }
| |
| − | }
| |
| − | })();
| |
| − | //////////////////////////////
| |
| − | // Gradients
| |
| − | //////////////////////////////
| |
| − | var gradients = (function() {
| |
| − | var grad1, grad2, showingGrad1;
| |
| − | // using colors from IBM Design Colors this time
| |
| − | var colors = [ // 14 colors - use 3-5 span
| |
| − | '#3c6df0', // ultramarine50
| |
| − | '#12a3b4', // aqua40
| |
| − | '#00a78f', // teal40
| |
| − | '#00aa5e', // green40
| |
| − | '#81b532', // lime30
| |
| − | '#e3bc13', // yellow20
| |
| − | '#ffb000', // gold20
| |
| − | '#fe8500', // orange30
| |
| − | '#fe6100', // peach40
| |
| − | '#e62325', // red50
| |
| − | '#dc267f', // magenta50
| |
| − | '#c22dd5', // purple50
| |
| − | '#9753e1', // violet50
| |
| − | '#5a3ec8' // indigo60
| |
| − | ];
| |
| − | function assignRandomColors(gradObj) {
| |
| − | var rA = Math.floor(colors.length * Math.random());
| |
| − | var rB = Math.floor(Math.random() * 3) + 3; // [3 - 5]
| |
| − | rB = (rA + (rB * (Math.random() < 0.5 ? -1 : 1)) + colors.length) % colors.length;
| |
| − | gradObj.stopA.setAttribute('stop-color', colors[rA]);
| |
| − | gradObj.stopB.setAttribute('stop-color', colors[rB]);
| |
| − | }
| |
| − | return {
| |
| − | setup: function() {
| |
| − | showingGrad1 = false;
| |
| − | grad1 = {
| |
| − | stopA: document.getElementById('stop1a'),
| |
| − | stopB: document.getElementById('stop1b'),
| |
| − | rect: document.getElementById('rect1')
| |
| − | };
| |
| − | grad2 = {
| |
| − | stopA: document.getElementById('stop2a'),
| |
| − | stopB: document.getElementById('stop2b'),
| |
| − | rect: document.getElementById('rect2')
| |
| − | };
| |
| − | grad1.rect.style.opacity = 0;
| |
| − | grad2.rect.style.opacity = 0;
| |
| − | },
| |
| − | next: function(t) {
| |
| − | t /= 1000;
| |
| − | var show, hide;
| |
| − | if (showingGrad1) {
| |
| − | hide = grad1;
| |
| − | show = grad2;
| |
| − | } else {
| |
| − | hide = grad2;
| |
| − | show = grad1;
| |
| − | }
| |
| − | showingGrad1 = !showingGrad1;
| |
| − | TweenMax.to(hide.rect, 0.55*t, {opacity: 0, delay: 0.2*t, ease: Sine.easeOut});
| |
| − | assignRandomColors(show);
| |
| − | TweenMax.to(show.rect, 0.65*t, {opacity: 1, ease: Sine.easeIn});
| |
| − | }
| |
| − | };
| |
| − | })();
| |
| − | //////////////////////////////
| |
| − | // Start
| |
| − | //////////////////////////////
| |
| − | bkgFunction();
| |
| − | </script>
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − | <!----------------------------------------------------------------------------------------------------------------------------------------->
| |
| − | <!---- Left Navigator ---->
| |
| − | <!----------------------------------------------------------------------------------------------------------------------------------------->
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − | <div id="pageContent">
| |
| − | <!----------------------------------------------------------------------------------------------------------------------------------------->
| |
| − | <!---- Content ---->
| |
| − | <!----------------------------------------------------------------------------------------------------------------------------------------->
| |
| − |
| |
| − | <div class="container">
| |
| − | <div class="row">
| |
| − |
| |
| − | <div class="row para1">
| |
| − | <div class="row">
| |
| − | <div class="col col-lg-12">
| |
| − | The final product of our system is an in vivo library of the target sequence carrying different versions of mutations. Researchers can then continue to implement the selection process directly using this library, enabling the continuous evolution of our target towards its desired function. Moreover, as bacterial cells can express multiple genes in a polycistronic transcript, our system has the ability to evolve a series of genes at the same time, which opens up possible application in whole metabolic pathway evolution. The nature of our target sequence can be either protein or RNA, allowing for mutation library construction of a broader range. Our system also has the advantage of using parts orthogonal to native bacterial systems, thus could be applicated in various prokaryotic hosts.
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | <div class="row para1">
| |
| − | <div class="row">
| |
| − | <div class="col col-lg-12">
| |
| − | Through application of our system, researchers would be able to evolve enzymes towards higher efficiency, higher precision and novel functionality, or to evolve metabolic pathways towards more balanced function, less toxic to host cell and higher total yield, or to evolve different functional RNAs. In addition, the mutagenesis system could be applied in different prokaryotic hosts.
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | <div class="row title1">
| |
| − | <div class="col">Environmental resistance</div>
| |
| − | </div>
| |
| − |
| |
| − | <div class="row para1">
| |
| − | <div class="col col-lg-12">
| |
| − | Enzyme function greatly relies on stable and fitting environment. A small change in environmental factor such as temperature, pH, osmotic pressure or metal ion concentration could greatly affect the activity of a certain enzyme. The native environment is often moderate and cannot meet researchers’ divergent needs. Researchers have been applying directed evolution methods in generating enzymes which could function under their desired conditions, for example, heat-resisting enzymes. Employing our system could easily and efficiently create a mutation library that can be used for further selection.
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | <div class="row title1">
| |
| − | <div class="col">Higher efficiency</div>
| |
| − | </div>
| |
| − |
| |
| − | <div class="row para1">
| |
| − | <div class="col col-lg-12">
| |
| − | Nature provides us with proteins exhibiting an almost endless diversity of functions. But we often find them acting less to satisfactory in heterologous systems or when our need exceeds the output of the native system. To meet our needs, we could associate the mutagenesis output with selection pressure such as antibiotic resistance, and only those who performs best will be able to survive. After gradient increase of selection pressure, the protein construct with highest efficiency can be easily selected out.
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | <div class="row title1">
| |
| − | <div class="col">Higher precision</div>
| |
| − | </div>
| |
| − |
| |
| − | <div class="row para1">
| |
| − | <div class="col col-lg-12">
| |
| − | Off-targeting and crosstalk are not uncommon even in heterologous systems, let alone the complex intertwined relationship of proteins within the native system. To minimize or even eliminate crosstalk, researchers could employ our system to generate diverse mutations, and add selection pressure to obtain the desired result.
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | <div class="row title1">
| |
| − | <div class="col">Novel function</div>
| |
| − | </div>
| |
| − |
| |
| − | <div class="row para1">
| |
| − | <div class="col col-lg-12">
| |
| − | In our effort to create orthogonal systems, expanding our genetic code, producing proteins with non-canonical amino acids, or generating novel compounds, researchers are in need of enzymes which does not exist in nature. Similar methods have already been used in generating orthogonal aminoacyl-tRNA synthetases, orthogonal ribosomes, and novel compounds such as organosilicons.
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | <div class="row para1">
| |
| − | <div class="col col-lg-12">
| |
| − | Our system is our sword penetrating the wall of natural world, through which we could not only take a glimpse, but also take a tentative step out and embrace the vastness of unknown. The existing world has its limitations, but out imagination does not, through in-lab evolution, we’re turning imagination into reality.
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | <div class="row title1">
| |
| − | <div class="col">Metabolic pathway</div>
| |
| − | </div>
| |
| − |
| |
| − | <div class="row para1">
| |
| − | <div class="col col-lg-12">
| |
| − | Bacteria is a rapidly developing factory for biological and chemical synthesis. It is common for researchers to transfer multiple enzymes or even whole metabolic pathways at one time into the engineered bacteria. However, heterologous expression is often met with problems regarding metabolic pathway interference and differed expression profile in nonnative host. Our system could mutate a sequence of a relatively long length (~10 kb) due to the outstanding processivity of our reverse transcriptase. Since our target sequence can be transcribed as a whole into RNA and go through the cycles of mutagenesis, no matter this sequence encodes protein or functions as regulatory component, our system has the potential of evolving full metabolic pathway together.
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | <div class="row title1">
| |
| − | <div class="col">RNA</div>
| |
| − | </div>
| |
| − |
| |
| − | <div class="row para1">
| |
| − | <div class="col col-lg-12">
| |
| − | The nature of target sequence can vary. Apart from proteins, functional RNA can also be our target of mutagenesis. Cellular RNA has varied functions, including miRNA and riboswitch, both which are commonly used in synthetic biology. The RNA sequence could be inserted in the place of target sequence and be transcribed, then go through mutagenesis cycles of reverse transcription and recombination, which would output a mutation library of the RNA target. By utilizing our system, a mutation library of miRNA and riboswitch could be easily generated and be tested in later experiments.
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | <div class="row title1">
| |
| − | <div class="col">Adenovirus associated virus (AAV) library</div>
| |
| − | </div>
| |
| − |
| |
| − | <div class="row para1">
| |
| − | <div class="col col-lg-12">
| |
| − | In our Integrated Human Practice, we interviewed Prof. Chen Ling, who expressed great interest in our system and conveyed to us that our system could be used in library construction for AAV’s capsid protein. The constructed library could be later used to generate gene delivery vehicles of enhanced function.
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | <div class="row title1">
| |
| − | <div class="col">Multi-host directed evolution</div>
| |
| − | </div>
| |
| − |
| |
| − | <div class="row para1">
| |
| − | <div class="col col-lg-12">
| |
| − | In our system, we utilized parts that are orthogonal to native prokaryotic systems. The reverse transcriptase is of mammalian origin, and the priming tRNA sequence is orthogonal to that of prokaryotes or could be modified to align the target directly as the user wishes. Cre recombinase is originated from bacteriophage P1 and already widely applied in prokaryotic engineering. Our system has the ability of functioning in different bacteria and could enable directed evolution in different host species in parallel. This ability to build and test the target within the same system greatly increases the efficiency of desired part selection.
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − |
| |
| − |
| |
| − | </div>
| |
| − |
| |
| − |
| |
| − |
| |
| − | <!----------------------------------------------------------------------------------------------------------------------------------------->
| |
| − | <!---- Foot ---->
| |
| − | <!----------------------------------------------------------------------------------------------------------------------------------------->
| |
| − |
| |
| − | <footer id="FudanFooter" class="page-footer grey">
| |
| − |
| |
| − | <div class="container" id="footContainer">
| |
| − | <div class="row">
| |
| − | <div class="col-md-4" id="sponser" style="padding-top:3%;">
| |
| − | <div class="row">
| |
| − | <div class="col-sm-6" style="padding:0;">
| |
| − | <div class="row align-items-center">
| |
| − | <div class="col">
| |
| − | <img class="img-fluid" alt="Team Fudan-TSI" src="https://static.igem.org/mediawiki/2019/0/0f/T--Fudan-TSI--LogoGrey.gif" />
| |
| − | </div>
| |
| − | <div class="col">
| |
| − | <img class="img-fluid" alt="Fudan University" src="https://static.igem.org/mediawiki/2018/f/f7/T--Fudan--schoolLogo.png" />
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="col-sm-6" style="padding:0;">
| |
| − | <div class="row align-items-center">
| |
| − | <div class="col">
| |
| − | <img class="img-fluid" alt="School of Life Sciences, Fudan University" src="https://static.igem.org/mediawiki/2018/1/1d/T--Fudan--schoolOfLifeSciencesIcon.png" />
| |
| − | </div>
| |
| − | <div class="col">
| |
| − | <img class="img-fluid" alt="Yunfeng Capital" src="https://static.igem.org/mediawiki/2018/e/e2/T--Fudan--yunfengLogo.png" />
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="row">
| |
| − | <h3 class="col s12" style="text-align: left; color: rgba(255, 255, 255, 0.8); font-size:12.5px; margin-top:5px;">R-Evolution: an <i>in vivo</i> sequence-specific toolbox for continuous mutagenesis</h3>
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | <div class="col-md-8" id="usefulLinks">
| |
| − | <div class="row">
| |
| − | <div class="col-lg-6" style="padding:0;">
| |
| − | <div class="row">
| |
| − |
| |
| − | <div class="col-sm-4">
| |
| − | <div class="footerUl align-items-center">
| |
| − | <span><a href="/Team:Fudan-TSI/Description" style="text-decoration:none;">Project</a></span>
| |
| − | <ul>
| |
| − | <li><a href="/Team:Fudan-TSI/Description">Background</a></li>
| |
| − | <li><a href="/Team:Fudan-TSI/Design">Design</a></li>
| |
| − | <li><a href="/Team:Fudan-TSI/Applied_Design">Applied Design</a></li>
| |
| − | <li><a href="/Team:Fudan-TSI/Experiments">Experiments</a></li>
| |
| − | <li><a href="/Team:Fudan-TSI/Judging">Judging</a></li>
| |
| − | </ul>
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | <div class="col-sm-4">
| |
| − | <div class="footerUl align-items-center">
| |
| − | <span><a href="/Team:Fudan-TSI/Results" style="text-decoration:none;">Results</a></span>
| |
| − | <ul>
| |
| − | <li><a href="/Team:Fudan-TSI/Results#ReverseTranscription">Reverse Transcription</a></li>
| |
| − | <li><a href="/Team:Fudan-TSI/Results#Recombination">Recombination</a></li>
| |
| − | <li><a href="/Team:Fudan-TSI/Demonstrate">Demonstration</a></li>
| |
| − | <li><a href="/Team:Fudan-TSI/Measurement">Measurement</a></li>
| |
| − | <li><a href="/Team:Fudan-TSI/Notebook">Notebook</a></li>
| |
| − | </ul>
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | <div class="col-sm-4">
| |
| − | <div class="footerUl align-items-center">
| |
| − | <span style="text-decoration:none;">Model</span>
| |
| − | <ul>
| |
| − | <li><a href="/Team:Fudan-TSI/Model">Modeling</a></li>
| |
| − | <li><a href="/Team:Fudan-TSI/Software">Software</a></li>
| |
| − | <li><a href="/Team:Fudan-TSI/Hardware">Hardware</a></li>
| |
| − | </ul>
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="col-lg-6" style="padding:0;">
| |
| − | <div class="row">
| |
| − |
| |
| − | <div class="col-sm-4">
| |
| − | <div class="footerUl align-items-center">
| |
| − | <span><a href="/Team:Fudan-TSI/Parts" style="text-decoration:none;">Parts</a></span>
| |
| − | <ul>
| |
| − | <li><a href="/Team:Fudan-TSI/Basic_Part">Basic parts</a></li>
| |
| − | <li><a href="/Team:Fudan-TSI/Composite_Part">Composite parts</a></li>
| |
| − | <li><a href="/Team:Fudan-TSI/Improve">Improved parts</a></li>
| |
| − | <li><a href="/Team:Fudan-TSI/Part_Collection">Part collection</a></li>
| |
| − | </ul>
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | <div class="col-sm-4">
| |
| − | <div class="footerUl align-items-center active">
| |
| − | <span><a href="/Team:Fudan-TSI/Human_Practices" style="text-decoration:none;">Outreach</a></span>
| |
| − | <ul>
| |
| − | <li><a href="/Team:Fudan-TSI/Public_Engagement">Education & Public engagement</a></li>
| |
| − | <li><a href="/Team:Fudan-TSI/Integrated_Human_Practice">Integrated human practice</a></li>
| |
| − | <li><a href="/Team:Fudan-TSI/Collaborations">Collaborations</a></li>
| |
| − | <li><a href="/Team:Fudan-TSI/Safety">Safety</a></li>
| |
| − | </ul>
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | <div class="col-sm-4">
| |
| − | <div class="footerUl align-items-center">
| |
| − | <span><a href="/Team:Fudan-TSI/Team" style="text-decoration:none;">Team</a></span>
| |
| − | <ul>
| |
| − | <li><a href="/Team:Fudan-TSI/Team">Members</a></li>
| |
| − | <li><a href="/Team:Fudan-TSI/Attributions">Attributions</a></li>
| |
| − | <li><a href="https://2018.igem.org/Team:Fudan/Heritage" target=_blank>Heritage</a></li>
| |
| − | <li><a href="/Team:Fudan-TSI">© 2019</a></li>
| |
| − | </ul>
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − |
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | <div class="footer-copyright">
| |
| − | <div class="container" style="width:90%;">
| |
| − | <div class="contactUS row">
| |
| − | <div class="col s12 m6 l6"><i class="fa fa-location-arrow"></i> Life Sci Bldg, 2005 Songhu Rd, Shanghai
| |
| − | </div>
| |
| − | <div class="col s12 m6 l2"><i class="fa fa-fax"></i> +86-21-31246727
| |
| − | </div>
| |
| − | <div class="col s12 m6 l2"><i class="fa fa-envelope-o"></i> igem@fudan.edu.cn
| |
| − | </div>
| |
| − | <div class="col s12 m6 l2"><i class="fa fa-twitter"></i> <i class="fa fa-wechat"></i> Fudan_iGEM
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | </footer>
| |
| − |
| |
| − |
| |
| − |
| |
| − | </div>
| |
| − |
| |
| − |
| |
| − |
| |
| − | <script>
| |
| − |
| |
| − | var winHeight=$(window).height();
| |
| − | var winWidth=$(window).width();
| |
| − | var pagePosition=$("#pageContent").offset().top+90;
| |
| − | var navHeight=$(".leftNav").height();
| |
| − | var footerHeight=$("#FudanFooter").height();
| |
| − | var maxTopDistance=$("#FudanFooter").offset().top-$(".leftNav").height()-$("#top_menu_14").height()-$("#navUl").height();
| |
| − | $(".leftNav").css({"position":"absolute","top":pagePosition});
| |
| − | $(window).resize(function(){
| |
| − | var winHeight=$(window).height();
| |
| − | var winWidth=$(window).width();
| |
| − | var topDistance=$(window).scrollTop()+0.25*winHeight;
| |
| − | var navHeight=$(".leftNav").height();
| |
| − | var footerHeight=$("#FudanFooter").height();
| |
| − | var maxTopDistance=$("#FudanFooter").offset().top-$(".leftNav").height()-$("#navUl").height();
| |
| − | var leftNavFromTop=pagePosition-$(window).scrollTop();
| |
| − | if (leftNavFromTop<0.25*winHeight){
| |
| − | if(topDistance<maxTopDistance){
| |
| − | $(".leftNav").css({"position":"fixed","top":0.25*winHeight+$("#top_menu_14").height()});
| |
| − | }
| |
| − | else{
| |
| − | $(".leftNav").css({"position":"absolute","top":maxTopDistance});
| |
| − | }
| |
| − | }
| |
| − | else{
| |
| − | $(".leftNav").css({"position":"absolute","top":pagePosition});
| |
| − | }
| |
| − | });
| |
| − |
| |
| − | $(window).scroll(function(){
| |
| − | var winHeight=$(window).height();
| |
| − | var winWidth=$(window).width();
| |
| − | var leftNavFromTop=pagePosition-$(window).scrollTop();
| |
| − | var topDistance=$(window).scrollTop()+0.25*winHeight;
| |
| − | if (leftNavFromTop<0.25*winHeight){
| |
| − | if(topDistance<maxTopDistance){
| |
| − | $(".leftNav").css({"position":"fixed","top":0.25*winHeight+$("#top_menu_14").height()});
| |
| − | }
| |
| − | else{
| |
| − | $(".leftNav").css({"position":"absolute","top":maxTopDistance});
| |
| − | };
| |
| − | }
| |
| − | else{
| |
| − | $(".leftNav").css({"position":"absolute","top":pagePosition});
| |
| − | }
| |
| − | });
| |
| − |
| |
| − | $(".leftNav a").click(function () {
| |
| − | $('html, body').animate({
| |
| − | scrollTop: $($.attr(this, 'href')).offset().top-$("#navUl").height()-50
| |
| − | }, 500);
| |
| − | return false;
| |
| − | });
| |
| − |
| |
| − |
| |
| − | $(window).scroll(function(){
| |
| − |
| |
| − | var currentScroll=$(this).scrollTop();
| |
| − | var firstHeight=$("#pageCover").height();
| |
| − | var footerFromTop=$("#FudanFooter").offset().top;
| |
| − | var $currentSection=null;
| |
| − | $(".leftNavA").each(function(){
| |
| − | $('.leftNavA').removeClass('menu-active');
| |
| − | var hePoint=$($(this).attr("href"));
| |
| − | var divPosition=hePoint.offset().top-$("#navUl").height()-50;
| |
| − | if (divPosition-1<currentScroll){
| |
| − | $currentSection=$(this);
| |
| − | }
| |
| − | if (currentScroll>firstHeight){
| |
| − | $(".leftNavA").removeClass("menu-active");
| |
| − | $currentSection.addClass("menu-active");
| |
| − | }
| |
| − | });
| |
| − |
| |
| − | var $currentSection2;
| |
| − | $('.leftNavA2').each(function(){
| |
| − | $('.leftNavA2').removeClass('menu-active2');
| |
| − | var hePoint2=$($(this).attr("href"));
| |
| − | var divPosition2=hePoint2.offset().top-$("#navUl").height()-50;
| |
| − | if (divPosition2-1<currentScroll){
| |
| − | $currentSection2=$(this);
| |
| − | }
| |
| − | if (currentScroll>firstHeight){
| |
| − | $('.leftNavA2').removeClass('menu-active2');
| |
| − | $currentSection2.addClass('menu-active2');
| |
| − | }
| |
| − | });
| |
| − | });
| |
| − |
| |
| − | </script>
| |
| − |
| |
| − |
| |
| − | <script src="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/popper.min.js&action=raw&ctype=text/javascript" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
| |
| − | <script src="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/bootstrap.js&action=raw&ctype=text/javascript" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| | | | |
| | | | |
