|
|
Line 1: |
Line 1: |
| {{Fudan-TSI}} | | {{Fudan-TSI}} |
− | <html> | + | <html></p></div></div></div><meta name="viewport" content="width=device-width, initial-scale=1"><meta charset="UTF-8"> |
− | | + | <link rel="stylesheet" href="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/materialize.css&action=raw&ctype=text/css"> |
− | | + | <link rel="stylesheet" href="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/Fudan-font-awesome.css&action=raw&ctype=text/css" /> |
− | <script> | + | <link rel="stylesheet" type="text/css" href="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/Fudan-css.css&action=raw&ctype=text/css" /> |
− | //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// | + | |
− | | + | |
− | $(document).ready(function() {
| + | |
− | | + | |
− | //remove the HQ_page id
| + | |
− | $("#HQ_page").attr('id','');
| + | |
− |
| + | |
− | | + | |
− | //highlight current page on the menu
| + | |
− | highlight_current_page_menu();
| + | |
− |
| + | |
− | //accessing submenus
| + | |
− | $(".menu_item").click(function(){
| + | |
− | $(".submenu_control_icon", this).toggleClass("open");
| + | |
− | $(this).next(".submenu").fadeToggle(400);
| + | |
− | });
| + | |
− |
| + | |
− | //mobile menu access
| + | |
− | $(".igem_2019_team_mobile_bar").click(function(){
| + | |
− | $(this).next().toggleClass("displaying_menu");
| + | |
− | });
| + | |
− |
| + | |
− | });
| + | |
− | | + | |
− | | + | |
− | function highlight_current_page_menu() {
| + | |
− |
| + | |
− | var page_url="https://2019.igem.org/";
| + | |
− | page_url = page_url + wgPageName;
| + | |
− | $("a[href$='"+ page_url +"']").children().addClass("current_page");
| + | |
− |
| + | |
− | //if the page is in a submenu, open the submenu and make the appropiate changes
| + | |
− | 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>
| + | |
− | | + | |
− | | + | |
| <style> | | <style> |
− | /**************************************************************************************************************************************************************************************************/ | + | /*****************************************************************************/ |
− | | + | |
− | | + | |
− | | + | |
− | /**************************************************************************************************************************************************************************************************/
| + | |
| /* DEFAULT WIKI SETTINGS */ | | /* DEFAULT WIKI SETTINGS */ |
− | /**************************************************************************************************************************************************************************************************/ | + | /*****************************************************************************/ |
− | | + | #home_logo, #sideMenu { display:none; } |
− | | + | #sideMenu, #top_title, .patrollink { display:none; } |
− | #home_logo, #sideMenu { display:none; }
| + | #content { margin-left: 0; padding:0px; width:100%;} |
− | #sideMenu, #top_title, .patrollink {display:none;}
| + | .judges-will-not-evaluate { border: 4px solid #e4dede; padding: 2% !important; width: 92%!important; } |
− | #content { margin-left:0px; margin-top:-7px; padding:0px; width:100%;}
| + | /* css clean * */ |
− | #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
| + | #FudanTSIBody li { list-style: none; } |
− | #bodyContent a[href ^="https://"], .link-https { padding-right:0px;}
| + | </style> |
− |
| + | <title>Demonstration | 2019 iGEM Team:Fudan-TSI</title> |
− |
| + | </head> |
− | | + | <body> |
− | | + | <div id="FudanTSIdivWrapper"><div id="FudanTSIBody"> |
− | /**************************************************************************************************************************************************************************************************/
| + | <header> |
− | /* MENU */
| + | <div id="emptyBar" style="position:relative;width: 100%;"></div><nav id="topNav" class="black z-depth-0_5"><div class="nav-wrapper"><div id="teamLogo" class="brand-logo"> <a href="/Team:Fudan-TSI" target="_self"><img alt="2019 team logo" src="https://static.igem.org/mediawiki/2019/d/d3/T--Fudan-TSI--HomepageLogo.gif"></a></div><ul id="nav-mobile" class="right"> |
− | /**************************************************************************************************************************************************************************************************/
| + | <li class="hide-on-med-and-down"><a class="dropdown-trigger" data-target="dropdown1">Project</a></li><li class="hide-on-med-and-down"><a class="dropdown-trigger" data-target="dropdown2">Results</a></li><li class="hide-on-med-and-down"><a class="dropdown-trigger" data-target="dropdown3">Model</a></li><li class="hide-on-med-and-down"><a class="dropdown-trigger" data-target="dropdown4">Parts</a></li><li class="hide-on-med-and-down"><a class="dropdown-trigger" data-target="dropdown5">Human practices</a></li><li class="hide-on-med-and-down"><a class="dropdown-trigger" data-target="dropdown6">Team</a></li> |
− | | + | <li class="hide-on-med-and-down"><a href="/Team:Fudan-TSI/Judging">Judging</a></li> |
− | /*wrapping for the menu*/
| + | <li> <a id="navList" data-target="slide-out" class="waves-effect waves-light sidenav-trigger right"> <i class="fa fa-navicon" style="font-size: 24px"></i> </a></li></ul></div> </nav> |
− | .igem_2019_team_menu {
| + | <!-- Dropdown and List elements in navigation bar --> |
− | background-color:#cecece;
| + | <ul id="dropdown1" class="dropdown-content"> |
− | border-left: 1px solid #635d5d;
| + | <li><a href="/Team:Fudan-TSI/Description">Background</a></li> |
− | float:right;
| + | <li><a href="/Team:Fudan-TSI/Design">Design</a></li> |
− | height:100vh;
| + | <li><a href="/Team:Fudan-TSI/Experiments">Experiments</a></li> |
− | max-width: 270px;
| + | <li><a href="/Team:Fudan-TSI/Applied_Design">Applied design</a></li> |
− | overflow-y: auto;
| + | </ul> |
− | overflow-x: hidden;
| + | <ul id="dropdown2" class="dropdown-content"> |
− | padding:0px;
| + | <li><a href="/Team:Fudan-TSI/Demonstrate#ReverseTranscription">Reverse transcription</a></li> |
− | position:fixed;
| + | <li><a href="/Team:Fudan-TSI/Demonstrate#Recombination">Recombination</a></li> |
− | right:0%;
| + | <li><a href="/Team:Fudan-TSI/Demonstrate">Demonstration</a></li> |
− | text-align:left;
| + | <li><a href="/Team:Fudan-TSI/Measurement">Measurement</a></li> |
− | width: 15%;
| + | <li><a href="/Team:Fudan-TSI/Notebook">Notebook</a></li> |
− | }
| + | </ul> |
− | | + | <ul id="dropdown3" class="dropdown-content"> |
− | /*controlling menu visibility*/
| + | <li><a href="/Team:Fudan-TSI/Model">Modeling</a></li> |
− | .igem_2019_team_menu.displaying_menu{
| + | <li><a href="/Team:Fudan-TSI/Software">Software</a></li> |
− | display:block;
| + | <li><a href="/Team:Fudan-TSI/Hardware">Hardware</a></li> |
− | }
| + | </ul> |
− | | + | <ul id="dropdown4" class="dropdown-content"> |
− | /*links in the menu*/
| + | <li><a href="/Team:Fudan-TSI/Basic_Part">Basic parts</a></li> |
− | .igem_2019_team_menu a {
| + | <li><a href="/Team:Fudan-TSI/Composite_Part">Composite parts</a></li> |
− | color: #484848;
| + | <li><a href="/Team:Fudan-TSI/Improve">Part improvement</a></li> |
− | text-decoration:none;
| + | <li><a href="/Team:Fudan-TSI/Part_Collection">Part collection</a></li> |
− | }
| + | </ul> |
− | | + | <ul id="dropdown5" class="dropdown-content"> |
− | /*images in the menu*/
| + | <li><a href="/Team:Fudan-TSI/Public_Engagement">Public engagement</a></li> |
− | .igem_2019_team_menu img {
| + | <li><a href="/Team:Fudan-TSI/Human_Practices#IntegratedHumanPractice">Integrated HP</a></li> |
− | width:100%;
| + | <li><a href="/Team:Fudan-TSI/Collaborations">Collaborations</a></li> |
− | }
| + | <li><a href="/Team:Fudan-TSI/Safety">Safety</a></li> |
− | | + | </ul> |
− | /*level 1 menu items*/
| + | <ul id="dropdown6" class="dropdown-content"> |
− | .igem_2019_team_menu .menu_item {
| + | <li><a href="/Team:Fudan-TSI/Team">Members</a></li> |
− | background-color: #cecece;
| + | <li><a href="/Team:Fudan-TSI/Attributions">Attributions</a></li> |
− | border-bottom: 1px solid #635d5d;
| + | <li><a href="/Team:Fudan-TSI/Team#Acknowledge">Acknowledge</a></li> |
− | clear: both;
| + | <li><a href="/Team:Fudan-TSI/Heritage">Heritage</a></li> |
− | color: #484848;
| + | </ul> |
− | cursor: pointer;
| + | |
− | float: left;
| + | |
− | font-size: 120%;
| + | |
− | font-weight: bold;
| + | |
− | padding: 15px 0px 15px 5%;
| + | |
− | width: 100%;
| + | |
− | }
| + | |
− | | + | |
− | /*level 1 menu items without submenus*/
| + | |
− | .igem_2019_team_menu .menu_item.direct_link {
| + | |
− | color: #484848;
| + | |
− | padding-left: 15%;
| + | |
− | }
| + | |
− | | + | |
− |
| + | |
− | /*level 1 menu items on hover*/
| + | |
− | .igem_2019_team_menu .menu_item:hover {
| + | |
− | background-color: #ecb656 !important;
| + | |
− | }
| + | |
− | | + | |
− | /*icon for expanding and collapsing level 1 menut items*/
| + | |
− | .igem_2019_team_menu .menu_item .submenu_control_icon {
| + | |
− | color: #484848;
| + | |
− | float: left;
| + | |
− | width: 10%;
| + | |
− | }
| + | |
− | | + | |
− | /* submenu icon "-"*/
| + | |
− | .igem_2019_team_menu .menu_item .submenu_control_icon::before {
| + | |
− | content: "+";
| + | |
− | }
| + | |
− | | + | |
− | /* submenu icon "-"*/
| + | |
− | .igem_2019_team_menu .menu_item .submenu_control_icon.open::before {
| + | |
− | content: "-";
| + | |
− | }
| + | |
− | | + | |
− |
| + | |
− | /*level 2 menu (submenu) wrapper*/
| + | |
− | .igem_2019_team_menu .submenu{
| + | |
− | background-color: #ececec;
| + | |
− | clear:both;
| + | |
− | display:none;
| + | |
− | float: left;
| + | |
− | width:100%;
| + | |
− | }
| + | |
− | | + | |
− | /*level 2 menu (submenu) item*/
| + | |
− | .igem_2019_team_menu .submenu .submenu_item {
| + | |
− | border-bottom: 1px solid #cecece;
| + | |
− | color: #635d5d;
| + | |
− | height: 30px;
| + | |
− | float: left;
| + | |
− | font-size: 110%;
| + | |
− | font-weight: bold;
| + | |
− | padding: 12px 0px 0px 15%;
| + | |
− | width: 100%;
| + | |
− | }
| + | |
− | | + | |
− | /*level 2 menu (submenu) items on hover*/
| + | |
− | .igem_2019_team_menu .submenu .submenu_item:hover {
| + | |
− | background-color: #ecb656 !important;
| + | |
− | }
| + | |
− | | + | |
− | /*color for highlighting current page on the wiki*/
| + | |
− | .igem_2019_team_menu .submenu .submenu_item.current_page,
| + | |
− | .igem_2019_team_menu .menu_item.current_page,
| + | |
− | .igem_2019_team_menu .menu_item.direct_link.current_page {
| + | |
− | background-color:#a2d3d0;
| + | |
− | }
| + | |
− | | + | |
− | | + | |
− | /*mobile menu bar styling*/ | + | |
− | /**************************************************************************************************************************************************************************************************/ | + | |
− | | + | |
− | /*mobile bar that controls the menu*/
| + | |
− | .igem_2019_team_mobile_bar {
| + | |
− | background-color:#ececec;
| + | |
− | border-bottom: 1px solid #cecece;
| + | |
− | cursor:pointer;
| + | |
− | display:none;
| + | |
− | float:left;
| + | |
− | margin-top: 0;
| + | |
− | padding: 5px 0;
| + | |
− | position:fixed;
| + | |
− | width:100%;
| + | |
− | }
| + | |
− |
| + | |
− | /*mobile logo*/
| + | |
− | .igem_logo_mobile {
| + | |
− | float:left;
| + | |
− | padding-left: 5%;
| + | |
− | width: 30%;
| + | |
− | }
| + | |
− | | + | |
− | /*image within the mobile logo*/
| + | |
− | .igem_logo_mobile img {
| + | |
− | width:70px;
| + | |
− | }
| + | |
− |
| + | |
− | /*mobile expand collapse button*/
| + | |
− | .igem_menu_control_mobile {
| + | |
− | float:right;
| + | |
− | padding-right:5%;
| + | |
− | padding-top:5px;
| + | |
− | text-align:right;
| + | |
− | width: 30%;
| + | |
− | }
| + | |
− | | + | |
− | /*image for mobile expand collapse button*/
| + | |
− | .igem_menu_control_mobile img {
| + | |
− | width:25px;
| + | |
− | }
| + | |
− | | + | |
− | | + | |
− | /*add extra padding to the menu to improve mobile scrolling*/
| + | |
− | .menu_padding{
| + | |
− | float:left;
| + | |
− | height:100px;
| + | |
− | }
| + | |
− | | + | |
− | | + | |
− | /**************************************************************************************************************************************************************************************************/
| + | |
− | /* CONTENT OF THE PAGE */
| + | |
− | /**************************************************************************************************************************************************************************************************/
| + | |
− | | + | |
− | /* general wrapper for the content */
| + | |
− | .igem_2019_team_content {
| + | |
− | background-color:white;
| + | |
− | display:block;
| + | |
− | width: 87%;
| + | |
− | }
| + | |
− | | + | |
− | /* subwrapper to center content */
| + | |
− | .igem_2019_team_content .igem_2019_team_column_wrapper {
| + | |
− | margin:auto;
| + | |
− | max-width: 1400px;
| + | |
− | width:90%;
| + | |
− | }
| + | |
− | | + | |
− | | + | |
− | | + | |
− | /*general styling*/ | + | |
− | /**************************************************************************************************************************************************************************************************/
| + | |
− | | + | |
− | /*size for title h tags*/
| + | |
− | .igem_2019_team_content .igem_2019_team_column_wrapper h1 { font-size: 210%;}
| + | |
− | .igem_2019_team_content .igem_2019_team_column_wrapper h2 { font-size: 190%;}
| + | |
− | .igem_2019_team_content .igem_2019_team_column_wrapper h3 { font-size: 170%;}
| + | |
− | .igem_2019_team_content .igem_2019_team_column_wrapper h4 { font-size: 150%;}
| + | |
− | .igem_2019_team_content .igem_2019_team_column_wrapper h5 { font-size: 140%;}
| + | |
− | .igem_2019_team_content .igem_2019_team_column_wrapper h6 { font-size: 130%;}
| + | |
− | | + | |
− | | + | |
− | /*titles h1, h2*/
| + | |
− | .igem_2019_team_content .igem_2019_team_column_wrapper h1, .igem_2019_team_content .igem_2019_team_column_wrapper h2 {
| + | |
− | border-bottom:0px;
| + | |
− | color: white;
| + | |
− | font-family: "Arial Black", Gadget, sans-serif;
| + | |
− | padding: 10px 0px;
| + | |
− | }
| + | |
− | | + | |
− | /*titles h3, h3, h5, h6 */
| + | |
− | .igem_2019_team_content .igem_2019_team_column_wrapper h3,
| + | |
− | .igem_2019_team_content .igem_2019_team_column_wrapper h4,
| + | |
− | .igem_2019_team_content .igem_2019_team_column_wrapper h5,
| + | |
− | .igem_2019_team_content .igem_2019_team_column_wrapper h6 {
| + | |
− | border-bottom:0px;
| + | |
− | color: white;
| + | |
− | font-family: "Arial Black", Gadget, sans-serif;
| + | |
− | padding: 5px 0px;
| + | |
− | }
| + | |
− | | + | |
− | /* text p tag*/
| + | |
− | .igem_2019_team_content .igem_2019_team_column_wrapper p {
| + | |
− | font-size: 130%;
| + | |
− | font-family: Arial, Helvetica, sans-serif;
| + | |
− | padding: 5px 0px;
| + | |
− | text-align: left;
| + | |
− | color: white;
| + | |
− | }
| + | |
− | | + | |
− | /* Links a tag*/
| + | |
− | .igem_2019_team_content .igem_2019_team_column_wrapper a {
| + | |
− | color: #00a19b;
| + | |
− | font-weight: bold;
| + | |
− | text-decoration: underline;
| + | |
− | text-decoration-color:#00a19b;
| + | |
− | transition: all 0.4s ease;
| + | |
− | -webkit-transition: all 0.4s ease;
| + | |
− | -moz-transition: all 0.4s ease;
| + | |
− | -ms-transition: all 0.4s ease;
| + | |
− | -o-transition: all 0.4s ease;
| + | |
− | }
| + | |
− | | + | |
− | /* hover for the links */
| + | |
− | .igem_2019_team_content .igem_2019_team_column_wrapper a:hover {
| + | |
− | color: #085156;
| + | |
− | text-decoration:none;
| + | |
− | }
| + | |
− | | + | |
− | | + | |
− | /* Table tag*/
| + | |
− | .igem_2019_team_content .igem_2019_team_column_wrapper table {
| + | |
− | border: 1px solid #635d5d;
| + | |
− | border-collapse: collapse;
| + | |
− | font-size: 130%;
| + | |
− | width: 100%;
| + | |
− | }
| + | |
− | | + | |
− | /* table cells */
| + | |
− | .igem_2019_team_content .igem_2019_team_column_wrapper td {
| + | |
− | border: 1px solid #cecece;
| + | |
− | border-collapse: collapse;
| + | |
− | font-size: 105%;
| + | |
− | padding: 10px;
| + | |
− | vertical-align: text-top;
| + | |
− | }
| + | |
− | | + | |
− | /* table headers */
| + | |
− | .igem_2019_team_content .igem_2019_team_column_wrapper th {
| + | |
− | background-color:#cecece;
| + | |
− | border: 1px solid #635d5d;
| + | |
− | border-collapse: collapse;
| + | |
− | font-size: 110%;
| + | |
− | padding: 10px;
| + | |
− | vertical-align: text-top;
| + | |
− | }
| + | |
− | | + | |
− | | + | |
− | | + | |
− | /* non numbered lists */
| + | |
− | .igem_2019_team_content .igem_2019_team_column_wrapper ul, .igem_2019_team_content .igem_2019_team_column_wrapper ol {
| + | |
− | font-size: 130%;
| + | |
− | font-family: Arial, Helvetica, sans-serif;
| + | |
− | padding:0px 20px;
| + | |
− | }
| + | |
− | | + | |
− | | + | |
− | /*font sizing within list nesting*/
| + | |
− | .igem_2019_team_content .igem_2019_team_column_wrapper ul ul li, .igem_2019_team_content .igem_2019_team_column_wrapper ul ul ul li,
| + | |
− | .igem_2019_team_content .igem_2019_team_column_wrapper ul ol li, .igem_2019_team_content .igem_2019_team_column_wrapper ul ul ol li,
| + | |
− | .igem_2019_team_content .igem_2019_team_column_wrapper ol ol li, .igem_2019_team_content .igem_2019_team_column_wrapper ul ol ul li,
| + | |
− | .igem_2019_team_content .igem_2019_team_column_wrapper ol ul li, .igem_2019_team_content .igem_2019_team_column_wrapper ul ol ol li,
| + | |
− | .igem_2019_team_content .igem_2019_team_column_wrapper ol ul ul li, .igem_2019_team_content .igem_2019_team_column_wrapper ol ol ul li,
| + | |
− | .igem_2019_team_content .igem_2019_team_column_wrapper ol ol ol li, .igem_2019_team_content .igem_2019_team_column_wrapper ol ul ol li{ font-size: 76%; }
| + | |
− | | + | |
− | | + | |
− | | + | |
− | /*layout classes*/ | + | |
− | /**************************************************************************************************************************************************************************************************/ | + | |
− | | + | |
− | /*main layout class */
| + | |
− | .igem_2019_team_content .igem_2019_team_column_wrapper .column {
| + | |
− | float:left;
| + | |
− | margin: 1% 2%;
| + | |
− | padding: 0px;
| + | |
− | }
| + | |
− | | + | |
− | /* 100% */
| + | |
− | .igem_2019_team_content .igem_2019_team_column_wrapper .column.full_size { width:96%; }
| + | |
− | | + | |
− | /* 66% */
| + | |
− | .igem_2019_team_content .igem_2019_team_column_wrapper .column.two_thirds_size { width: 62.6%; }
| + | |
− | | + | |
− | /* 33% */
| + | |
− | .igem_2019_team_content .igem_2019_team_column_wrapper .column.third_size { width: 29.3%; }
| + | |
− | | + | |
− | | + | |
− | | + | |
− | | + | |
− | /*all images*/
| + | |
− | .igem_2019_team_content .igem_2019_team_column_wrapper .column.full_size img,
| + | |
− | .igem_2019_team_content .igem_2019_team_column_wrapper .column.two_thirds_size img,
| + | |
− | .igem_2019_team_content .igem_2019_team_column_wrapper .column.third_size img {
| + | |
− | margin-bottom: 15px;
| + | |
− | width: 100%;
| + | |
− | }
| + | |
− | | + | |
− | | + | |
− | /* page break */
| + | |
− | .igem_2019_team_content .igem_2019_team_column_wrapper .clear {
| + | |
− | clear:both;
| + | |
− | }
| + | |
− | /*add extra space to page break with clear class*/
| + | |
− | .igem_2019_team_content .igem_2019_team_column_wrapper .clear.extra_space {
| + | |
− | height: 30px;
| + | |
− | }
| + | |
− | | + | |
− | /* horizontal line to divide the page*/
| + | |
− | .igem_2019_team_content .igem_2019_team_column_wrapper .line_divider {
| + | |
− | border-top: 1px solid #cecece;
| + | |
− | margin: auto;
| + | |
− | width: 98%;
| + | |
− | }
| + | |
− | | + | |
− | | + | |
− | | + | |
− |
| + | |
− | /*support classes*/ | + | |
− | /**************************************************************************************************************************************************************************************************/ | + | |
− | | + | |
− | | + | |
− | /*Button */
| + | |
− | /************************************************/
| + | |
− | .igem_2019_team_content .igem_2019_team_column_wrapper .button_link {
| + | |
− | font-size: 130%;
| + | |
− | margin: 30px auto;
| + | |
− | text-align: center;
| + | |
− | }
| + | |
− | | + | |
− | .igem_2019_team_content .igem_2019_team_column_wrapper .button_link a {
| + | |
− | background-color: #00a19bad !important;
| + | |
− | color: #000 !important;
| + | |
− | font-weight: bold;
| + | |
− | margin: auto;
| + | |
− | text-decoration: none !important;
| + | |
− | padding: 10px 15px !important;
| + | |
− | }
| + | |
− | | + | |
− | .igem_2019_team_content .igem_2019_team_column_wrapper .button_link a:hover {
| + | |
− | background-color: #ffb819 !important;
| + | |
− | }
| + | |
− | | + | |
− |
| + | |
− | | + | |
− | /*highlight */
| + | |
− | /************************************************/
| + | |
− | .igem_2019_team_content .igem_2019_team_column_wrapper .highlight {
| + | |
− | padding: 15px 20px;
| + | |
− | }
| + | |
− | | + | |
− | | + | |
− | .igem_2019_team_content .igem_2019_team_column_wrapper .highlight p,
| + | |
− | .igem_2019_team_content .igem_2019_team_column_wrapper .highlight h1,
| + | |
− | .igem_2019_team_content .igem_2019_team_column_wrapper .highlight h2,
| + | |
− | .igem_2019_team_content .igem_2019_team_column_wrapper .highlight h3,
| + | |
− | .igem_2019_team_content .igem_2019_team_column_wrapper .highlight h4,
| + | |
− | .igem_2019_team_content .igem_2019_team_column_wrapper .highlight h5,
| + | |
− | .igem_2019_team_content .igem_2019_team_column_wrapper .highlight h6 {
| + | |
− | padding: 5px 15px;
| + | |
− | }
| + | |
− | | + | |
− | .igem_2019_team_content .igem_2019_team_column_wrapper .highlight.decoration_background {
| + | |
− | background-color: #ececec;
| + | |
− | }
| + | |
− | | + | |
− | .igem_2019_team_content .igem_2019_team_column_wrapper .highlight.decoration_A_top {
| + | |
− | border-top: 4px solid #00a19bad;
| + | |
− | }
| + | |
− | | + | |
− | | + | |
− | .igem_2019_team_content .igem_2019_team_column_wrapper .highlight.decoration_A_full {
| + | |
− | border: 4px solid #00a19bad;
| + | |
− | }
| + | |
− | | + | |
− | .igem_2019_team_content .igem_2019_team_column_wrapper .highlight.decoration_B_top {
| + | |
− | border-top: 4px solid #ffb819
| + | |
− | }
| + | |
− | | + | |
− | | + | |
− | .igem_2019_team_content .igem_2019_team_column_wrapper .highlight.decoration_B_full {
| + | |
− | border: 4px solid #ffb819;
| + | |
− | }
| + | |
− | | + | |
− | | + | |
− | | + | |
− | | + | |
− | /*mobile*/ | + | |
− | /**************************************************************************************************************************************************************************************************/ | + | |
− | | + | |
− | | + | |
− | /* 1800px */
| + | |
− | /************************************************/
| + | |
− | @media only screen and (max-width: 1800px) {
| + | |
− | .igem_2019_team_content { width: 85%;}
| + | |
− | .igem_2019_team_menu {display:block;}
| + | |
− |
| + | |
− | }
| + | |
− | | + | |
− | /* 1400px */
| + | |
− | /************************************************/
| + | |
− | @media only screen and (max-width: 1400px) {
| + | |
− | .igem_2019_team_menu .menu_item { font-size:100%;}
| + | |
− | .igem_2019_team_menu .submenu .submenu_item { font-size:90%;}
| + | |
− | .igem_2019_team_menu {display:block;}
| + | |
− | }
| + | |
− | | + | |
− | | + | |
− | /* 1100px */
| + | |
− | /************************************************/
| + | |
− | @media only screen and (max-width: 1100px) {
| + | |
− | .igem_2019_team_content {width:100%; margin-left:0px;}
| + | |
− |
| + | |
− | .igem_2019_team_menu {display:none;float:right;margin-top:47px;max-width:100%;position:fixed;width:25%;}
| + | |
− |
| + | |
− | .igem_2019_team_mobile_bar {display:block;}
| + | |
− |
| + | |
− | .igem_2019_team_content .igem_2019_team_column_wrapper .column.full_size, .igem_2019_team_content .igem_2019_team_column_wrapper .column.two_thirds_size,.igem_2019_team_content .igem_2019_team_column_wrapper .column.third_size {width:96%; }
| + | |
− | | + | |
− | }
| + | |
− | | + | |
− | /* 850px */
| + | |
− | /************************************************/
| + | |
− | @media only screen and (max-width: 850px) {
| + | |
− | .igem_2019_team_menu {width:40%;}
| + | |
− | }
| + | |
− | | + | |
− | /*500px */
| + | |
− | /************************************************/
| + | |
− | @media only screen and (max-width: 500px) {
| + | |
− | .igem_2019_team_menu {min-width:100%;width:100%;}
| + | |
− | }
| + | |
− | | + | |
− | | + | |
− | /**************************************************************************************************************************************************************************************************/ | + | |
− | | + | |
| | | |
| | | |
| + | <ul id="slide-out" class="sidenav"> |
| + | <li style="padding: 0"><div class="sidenavBanner"> |
| + | <div class="background"></div> |
| + | <p class="flow-text" style="width:100%;text-align:center"><span class="white-text">Demonstration</span></p> |
| + | </div></li> |
| + | <li> |
| + | <ul class="collapsible expandable"> |
| + | <li class="onThisPageNav"><span>On this page</span></li> |
| + | <li class="onThisPageNav"><a href="#section1">Transcription</a></li> |
| + | <li class="onThisPageNav"><a href="#ReverseTranscription">Reverse transcription</a></li> |
| + | <li class="onThisPageNav"><a href="#Recombination">Recombination</a></li> |
| + | <li class="onThisPageNav"><a href="#section4">Modeling</a></li> |
| | | |
| + | <li><span class="pageSidebar">Team: Fudan-TSI</span></li><li><div class="collapsible-header"><span class="pageSidebar">Project</span></div><div class="collapsible-body"><ul><li><a class="pageSidebar" href="/Team:Fudan-TSI/Description">Background</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Design">Design</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Experiments">Experiments</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Applied_Design">Applied design</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Judging">Judging</a></li></ul></div></li><li><div class="collapsible-header active"><span class="pageSidebar">Results</span></div><div class="collapsible-body"><ul><li><a class="pageSidebar" href="/Team:Fudan-TSI/Demonstrate#ReverseTranscription">Reverse transcription</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Demonstrate#Recombination">Recombination</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Demonstrate">Demonstration</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Measurement">Measurement</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Notebook">Notebook</a></li></ul></div></li><li><div class="collapsible-header"><span class="pageSidebar">Model</span></div><div class="collapsible-body"><ul><li><a class="pageSidebar" href="/Team:Fudan-TSI/Model">Modeling</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Software">Software</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Hardware">Hardware</a></li></ul></div></li><li><div class="collapsible-header"><span class="pageSidebar">Parts</span></div><div class="collapsible-body"><ul><li><a class="pageSidebar" href="/Team:Fudan-TSI/Basic_Part">Basic parts</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Composite_Part">Composite parts</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Improve">Part improvement</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Part_Collection">Part collection</a></li></ul></div></li><li><div class="collapsible-header"><span class="pageSidebar">Human practices</span></div><div class="collapsible-body"><ul><li><a class="pageSidebar" href="/Team:Fudan-TSI/Public_Engagement">Public engagement</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Human_Practices#IntegratedHumanPractice">Integrated HP</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Collaborations">Collaborations</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Safety">Safety</a></li></ul></div></li><li><div class="collapsible-header"><span class="pageSidebar">Team</span></div><div class="collapsible-body"><ul><li><a class="pageSidebar" href="/Team:Fudan-TSI/Team">Members</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Attributions">Attributions</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Heritage">Heritage</a></li></ul></div></li> |
| + | </ul><!-- .expandable --> |
| + | </li> |
| + | <li><div class="placeHolder"></div></li> |
| + | </ul> |
| + | </header> |
| | | |
| + | <div id="pageContent"> |
| + | <div id="contentBanner" class="figureBanner"> |
| + | <div class="row"> |
| + | <div class="col s12 hide-on-med-and-up"> |
| + | <h1><br/>Demonstration</h1> |
| + | <p class="flow-text">Mutation library generation is critical for biological and medical research. Our R-Evolution toolbox is orthogonal and provides a wide range of applications among various species, and serves as a foundational advance to synthetic biology.</p> |
| + | </div> |
| + | </div> |
| + | <div class="hide-on-small-only"> |
| + | <style> |
| + | #demo {width:100%;height:100%;position:relative;z-index:-100;} |
| + | #demo svg {width:100%;height:100%;position:fixed;} |
| + | #demo svg g {mix-blend-mode:lighten;} |
| + | #demo svg polygon {stroke:none;fill:white;} |
| </style> | | </style> |
| + | <div id="pageCover"> |
| + | <svg id="demo" viewBox="0 0 1600 600" preserveAspectRatio="xMidYMid slice"> |
| + | <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><!-- #pageCover --> |
| + | <script src="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/bkg&action=raw&ctype=text/javascript"></script> |
| + | <script>function bkgFunction(e){if(e){var t=new Stats;t.domElement.style.position="absolute",t.domElement.style.left="0",t.domElement.style.top="0",document.body.appendChild(t.domElement),requestAnimationFrame(function e(){t.update(),requestAnimationFrame(e)})}var n=document.getElementById("demo");tesselation.setup(n),gradients.setup();var o,r=1e4,a=3e3;window.requestAnimationFrame(function e(t){(!o||r<t-o)&&(o=t,tesselation.next(a),gradients.next(a)),window.requestAnimationFrame(e)})}var calcDelaunayTriangulation=function(){var E=1/1048576;function p(e,t,n,o){var r,a,i,l,c,u,s,d,h,f,p=e[t][0],m=e[t][1],g=e[n][0],y=e[n][1],w=e[o][0],I=e[o][1],b=Math.abs(m-y),v=Math.abs(y-I);if(b<E&&v<E)throw new Error("Can't get circumcircle since all 3 points are y-aligned");return i=-(g-p)/(y-m),l=-(w-g)/(I-y),c=(p+g)/2,u=(g+w)/2,s=(m+y)/2,d=(y+I)/2,{i:t,j:n,k:o,x:r=b<E?c:v<E?u:(i*c-l*u+d-s)/(i-l),y:a=v<b?i*(r-c)+s:l*(r-u)+d,r:(h=g-r)*h+(f=y-a)*f}}function m(e){var t,n,o,r,a,i;for(n=e.length;n;)for(r=e[--n],o=e[--n],t=n;t;){if(i=e[--t],o===(a=e[--t])&&r===i){e.splice(n,2),e.splice(t,2);break}if(o===i&&r===a){e.splice(n,2),e.splice(t,2);break}}}return function(n){var e,t,o,r,a,i,l,c,u,s,d,h,f=n.length;if(f<3||2e3<f)return[];for(n=n.slice(0),o=new Array(f),e=f;e--;)o[e]=e;for(o.sort(function(e,t){return n[t][0]-n[e][0]}),r=function(e){var t,n,o,r,a,i,l=Number.POSITIVE_INFINITY,c=Number.POSITIVE_INFINITY,u=Number.NEGATIVE_INFINITY,s=Number.NEGATIVE_INFINITY;for(t=e.length;t--;)e[t][0]<l&&(l=e[t][0]),e[t][0]>u&&(u=e[t][0]),e[t][1]<c&&(c=e[t][1]),e[t][1]>s&&(s=e[t][1]);return o=s-c,[[(a=l+.5*(n=u-l))-20*(r=Math.max(n,o)),(i=c+.5*o)-r],[a,i+20*r],[a+20*r,i-r]]}(n),n.push(r[0],r[1],r[2]),a=[p(n,f+0,f+1,f+2)],i=[],l=[],e=o.length;e--;l.length=0){for(h=o[e],t=a.length;t--;)0<(c=n[h][0]-a[t].x)&&c*c>a[t].r?(i.push(a[t]),a.splice(t,1)):c*c+(u=n[h][1]-a[t].y)*u-a[t].r>E||(l.push(a[t].i,a[t].j,a[t].j,a[t].k,a[t].k,a[t].i),a.splice(t,1));for(m(l),t=l.length;t;)d=l[--t],s=l[--t],a.push(p(n,s,d,h))}for(e=a.length;e--;)i.push(a[e]);for(a.length=0,e=i.length;e--;)i[e].i<f&&i[e].j<f&&i[e].k<f&&a.push(i[e].i,i[e].j,i[e].k);return a}}(),tesselation=function(){var a,h,f,i;return{setup:function(e){var t=(a=e).getAttribute("viewBox").split(/\D/g);h=t[2],f=t[3]},next:function(e){var t,n,o;if(e/=1e3,i&&i.children&&i.children.length){for(n=o=(t=i).children.length;n--;)TweenMax.to(t.children[n],.4*e,{opacity:0,delay:e*(.3*n/o)});TweenMax.delayedCall(.75*e,function(e){a.removeChild(e)},[t],this)}var r=function(){var e,t,n,o,r=window.innerWidth,a=window.innerHeight,i=[],l=h%(e=h/f<r/a?250*h/r:250*f/a)/2,c=f%e/2;for(n=Math.floor(h/e)+1;-1<=n;n--)for(o=Math.floor(f/e)+1;-1<=o;o--)i.push([l+e*(n+.75*(Math.random()-.5)),c+e*(o+.75*(Math.random()-.5))]);var u,s=calcDelaunayTriangulation(i),d=document.createElementNS("http://www.w3.org/2000/svg","g");for(t=s.length;t;)(u=document.createElementNS("http://www.w3.org/2000/svg","polygon")).setAttribute("points",i[s[--t]][0]+","+i[s[t]][1]+" "+i[s[--t]][0]+","+i[s[t]][1]+" "+i[s[--t]][0]+","+i[s[t]][1]),d.appendChild(u);return d}();for(n=o=r.children.length;n--;)TweenMax.fromTo(r.children[n],.4*e,{opacity:0},{opacity:.3+.25*Math.random(),delay:e*(.3*n/o+.3),ease:Back.easeOut});a.appendChild(r),i=r}}}(),gradients=function(){var o,r,a,i=["#3c6df0","#12a3b4","#00a78f","#00aa5e","#81b532","#e3bc13","#ffb000","#fe8500","#fe6100","#e62325","#dc267f","#c22dd5","#9753e1","#5a3ec8"];return{setup:function(){a=!1,o={stopA:document.getElementById("stop1a"),stopB:document.getElementById("stop1b"),rect:document.getElementById("rect1")},r={stopA:document.getElementById("stop2a"),stopB:document.getElementById("stop2b"),rect:document.getElementById("rect2")},o.rect.style.opacity=0,r.rect.style.opacity=0},next:function(e){var t,n;e/=1e3,t=a?(n=o,r):(n=r,o),a=!a,TweenMax.to(n.rect,.55*e,{opacity:0,delay:.2*e,ease:Sine.easeOut}),function(e){var t=Math.floor(i.length*Math.random()),n=Math.floor(3*Math.random())+3;n=(t+n*(Math.random()<.5?-1:1)+i.length)%i.length,e.stopA.setAttribute("stop-color",i[t]),e.stopB.setAttribute("stop-color",i[n])}(t),TweenMax.to(t.rect,.65*e,{opacity:1,ease:Sine.easeIn})}}}();bkgFunction(); |
| + | </script> |
| + | <div style="position:absolute;top:100px;left:9%"><center><img style="height:120px;width:auto" alt="cover gif 1st added" src="https://static.igem.org/mediawiki/2019/8/83/T--Fudan-TSI--coverDemonstration.gif" /></center></div> |
| + | </div> |
| + | </div> |
| | | |
| + | <!--//////////////////////////////////////////////////// |
| + | do not edit above, if must BE CAREFUL |
| + | //////////////////////////////////////////////////////--> |
| + | <div class="container"> |
| + | <!-- side navigator of page content --> |
| + | <ul id="pageContentNav" class="hide-on-med-and-down z-depth-0"> |
| + | <li class="onThisPageNav"><a href="#section1">Transcription</a></li> |
| + | <li class="onThisPageNav"><a href="#ReverseTranscription">Reverse transcription</a></li> |
| + | <li class="onThisPageNav"><a href="#Recombination">Recombination</a></li> |
| + | <li class="onThisPageNav"><a href="#section4">Modeling</a></li> |
| + | </ul> |
| + | <!-- main content of the page --> |
| + | <main><article> |
| | | |
− | <!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
| + | <div id="section1" class="section container scrolSpy"> |
− | <!--- THIS IS WHERE THE HTML BEGINS --->
| + | <p class="flow-text">Our system can be divided into three biochemical steps: 1) transcription of the target sequence into mRNA, 2) reverse transcription of the target sequence into double-stranded cDNA, 3) recombination for the cDNA to replace the target sequence. We set out to separately verify each step before integrating together. Our team logo shows the mutants accumulated by varying blue colors.</p> |
− | <!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
| + | |
− | | + | |
− | <head>
| + | |
− | | + | |
− | <!-- This tells the browser that your page is responsive -->
| + | |
− | <meta name="viewport" content="width=device-width, initial-scale=1">
| + | |
− |
| + | |
− | <script type="text/javascript" src="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/jQuery&action=raw&ctype=text/javascript"></script>
| + | |
− |
| + | |
− |
| + | |
− |
| + | |
− | </head>
| + | |
− | | + | |
− | <link rel="stylesheet" href="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/Fudan-font-awesome.css&action=raw&ctype=text/css" />
| + | |
− | | + | |
− | <!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
| + | |
− | <!--- Menu --->
| + | |
− | <!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
| + | |
− |
| + | |
− | | + | |
− | <style>
| + | |
− |
| + | |
− | *{margin: 0;padding: 0;list-style: none;}
| + | |
− | /* via: https://blog.csdn.net/weixin_41014370/article/details/79523637 */
| + | |
− | | + | |
− | /** 清除内外边距 **/
| + | |
− | body, h1, h3, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
| + | |
− | dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
| + | |
− | pre, /* text formatting elements 文本格式元素 */
| + | |
− | form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */
| + | |
− | th, td /* table elements 表格元素 */ {
| + | |
− | margin: 0;
| + | |
− | padding: 0;
| + | |
− | }
| + | |
− | | + | |
− | /** 设置默认字体 **/
| + | |
− | | + | |
− | /* @@@@ h1, h3, h3, h4, h5, h6 { font-size: 100%; }*/
| + | |
− | address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */
| + | |
− | code, kbd, pre, samp { font-family: courier new, courier, monospace; } /* 统一等宽字体 */
| + | |
− | /* @@@@ small { font-size: 12px; } /* 小于 12px 的中文很难阅读,让 small 正常化 */
| + | |
− | | + | |
− | /** 重置列表元素 **/
| + | |
− | ul, ol { list-style: none; }
| + | |
− | | + | |
− | /** 重置文本格式元素 **/
| + | |
− | a { text-decoration: none; }
| + | |
− | a:hover { text-decoration: underline; }
| + | |
− | | + | |
− | | + | |
− | /** 重置表单元素 **/
| + | |
− | legend { color: #000; } /* for ie6 */
| + | |
− | fieldset, img { border: 0; } /* img 搭车:让链接里的 img 无边框 */
| + | |
− | button, input, select, textarea { font-size: 100%; } /* 使得表单元素在 ie 下能继承字体大小 */
| + | |
− | /* 注:optgroup 无法扶正 */
| + | |
− | | + | |
− | /** 重置表格元素 **/
| + | |
− | table { border-collapse: collapse; border-spacing: 0; }
| + | |
− |
| + | |
− | </style>
| + | |
− | | + | |
− | | + | |
− | | + | |
− | | + | |
− | <!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- 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/Applied_Design" style="white-space:nowrap">Applied Design</a></li>
| + | |
− | <li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Experiments">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">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>
| + | |
− | <li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Hardware">Hardware</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/Human_Practices">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/Attributions">Attribution</a></li>
| + | |
− | <li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Acknowledgment">Acknowledgement</a></li>
| + | |
− | </ul>
| + | |
− | </div>
| + | |
− | </li>
| + | |
− |
| + | |
− | <li class="navLi"><a class="navA noSubmenu" href="https://2019.igem.org/Team:Fudan-TSI/Judging">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/8/83/T--Fudan-TSI--coverDemonstration.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:450px;
| + | |
− | 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 ---->
| + | |
− | <!----------------------------------------------------------------------------------------------------------------------------------------->
| + | |
− |
| + | |
| | | |
− | <ul class="leftNav" style="margin:0;padding:0;">
| + | <h2>Transcription</h2> |
− |
| + | <div class="figureHolder" id="Fig1"> |
− | <li class="leftNavLi"><a class="leftNavA" href="#mainTitle1">Transcription</a>
| + | <img class="responsive-img" src="https://static.igem.org/mediawiki/2019/4/4b/T--Fudan-TSI--Result_Fig1.gif" /> |
− | </li>
| + | <p><b>Figure 1. The flanking of reverse transcription initiation and loxP sequences does not disrupt Chl functionality.</b><br/> |
− | <li class="leftNavLi"><a class="leftNavA" href="#mainTitle2">Reverse transcription</a>
| + | Wildtype Chl gene continues to express and colonies are grown on the plate containing chloramphenicol (plate on the right). The L158X mutant cannot express functional resistance gene and thus the plate is devoid of cell colony (plate on the right).</p> |
− | <ul class="leftNavUl2">
| + | </div> |
− | <li class="leftNavLi2"><a class="leftNavA2" href="#mainTitle2_1">The successful expression of reverse transcriptase</a></li>
| + | <p class="flow-text">We put the target sequence and its flanking elements together under a T7 stable promoter for high expression level of target RNA. To verify our R-Evolution system, we constructed 8 nonsense mutant of chloramphenicol resistance gene (Chl), bearing the 8 base pair substitution from sense codon to nonsense mutant. We verified this construct through culturing bacteria carrying the original version or mutant on plates containing chloramphenicol. We found that bacteria carrying the original Chl grow naturally, while no colony was formed on the plates of mChl (Table. 1). After adding the flanking sequences on both ends, we used the C158X mutant and showed that the gene’s function has not been changed by our conduct <a href="#Fig1">(Figure 1)</a>.</p> |
− | </ul>
| + | |
− | </li>
| + | |
− | <li class="leftNavLi"><a class="leftNavA" href="#mainTitle3">Recombination</a>
| + | |
− | <ul class="leftNavUl2">
| + | |
− | <li class="leftNavLi2"><a class="leftNavA2" href="#mainTitle3_2">Cre initiates excision between two homologous loxP site</a></li>
| + | |
− | <li class="leftNavLi2"><a class="leftNavA2" href="#mainTitle3_3">lox5171 is most incompatible with wildtype loxP (wtlox)</a></li>
| + | |
− | <li class="leftNavLi2"><a class="leftNavA2" href="#mainTitle3_4">Cre with degradation tags</a></li>
| + | |
− | </ul>
| + | |
− | </li>
| + | |
− | <li class="leftNavLi"><a class="leftNavA" href="#mainTitle4">Modeling</a></li>
| + | |
− |
| + | |
| | | |
| + | <div class="figureHolder"> |
| + | <p><b>Table 1. Nonsense mutation disrupts the chloramphenicol resistance ability of Chl.</b><br/> |
| + | Amp stands for ampicillin, Chl stands for chloramphenicol, the left column means that they are added to the plate. Chl acts as the positive control, cells grow naturally on both plates, while cells transformed with the negative control plasmid can only grow on plates containing ampicillin. Chl gene carrying nonsense mutation at different sites does not affect its ampicillin resistance, but chloramphenicol resistance is lost as no colony is formed. Single colony was picked and shook in liquid culture overnight, the plate was coated with 100 μL culture after 104 dilution. |
| + | </p> |
| + | <table style="color:white;border:1px solid white"> |
| + | <tr style="border:1px solid white"> |
| + | <td></td> |
| + | <td>Control</td> |
| + | <td> Chl </td> |
| + | <td>Chl-Y33X</td> |
| + | <td>Chl-W85X</td> |
| + | <td>Chl-E97X</td> |
| + | <td>Chl-S121X</td> |
| + | <td>Chl-L158X</td> |
| + | <td>Chl-K182X</td> |
| + | <td>Chl-Q190X</td> |
| + | </tr> |
| + | <tr style="border:1px solid white"> |
| + | <td>Amp</td> |
| + | <td>19</td> |
| + | <td>192</td> |
| + | <td>291</td> |
| + | <td>128</td> |
| + | <td>236</td> |
| + | <td>138</td> |
| + | <td>255</td> |
| + | <td>175</td> |
| + | <td>276</td> |
| + | </tr> |
| + | <tr style="border:1px solid white"> |
| + | <td>Amp & Chl</td> |
| + | <td>0</td> |
| + | <td>30</td> |
| + | <td>0</td> |
| + | <td>0</td> |
| + | <td>0</td> |
| + | <td>0</td> |
| + | <td>0</td> |
| + | <td>0</td> |
| + | <td>0</td> |
| + | </tr> |
| + | </table> |
| + | </div> |
| | | |
| + | <p class="flow-text">In addition, we also constructed and verified nonsense mutants of fluorescent protein EGFP and mCherry at the 158<sup>th</sup> and 159<sup>th</sup> amino acid <a href="#Fig2">(Figure 2)</a>.</p> |
| | | |
− | </ul>
| + | <div class="figureHolder" id="Fig2"> |
− |
| + | <img class="responsive-img" src="https://static.igem.org/mediawiki/2019/4/45/T--Fudan-TSI--Result_Fig2.gif" /> |
− | <style>
| + | <p><b>Figure 2. mCherry cannot emit fluorescence.</b><br/> |
− | .leftNav{
| + | The vertical axis shows the quantified level of EGFP expression. Mutants of the fluorescence proteins cannot emit fluorescence while the wildtype protein functions naturally. The fluorescence level (EGFP: excitation wavelength 485 nm, detection wavelength 528 nm; mCherry: excitation 550 nm, detection 590 nm) is quantified by the concentration of fluorescein, and normalized by the measured OD600 equivalent to the number of beads in the system. The fluorescein for EGFP and silica beads are from the iGEM distributed measurement kit, red fluorescence is quantified by rhodamine B (Sigma-Aldrich, #S1402-1G). Error bar in the two graphs on the first row indicates the SEM of three replicates.</p> |
− | position: absolute;
| + | </div> |
− | top:30vw;
| + | </div> |
− | left:4%;
| + | |
− | list-style: none;
| + | |
− | z-index: 3;
| + | |
− | text-align:left !important;
| + | |
− | width:15vw;
| + | |
− | }
| + | |
− | .leftNav .leftNavA2{
| + | |
− | position: relative;
| + | |
− | }
| + | |
− | .leftNav .leftNavA2:before {
| + | |
− | content: "";
| + | |
− | display: inline-block;
| + | |
− | width: 5px;
| + | |
− | height: 5px;
| + | |
− | background-color: rgba(55,55,62,0.7);
| + | |
− | border-radius: 50%;
| + | |
− | position: absolute;
| + | |
− | left: 0.3vw;
| + | |
− | top:50%;
| + | |
− | margin: 0;
| + | |
− | padding: 0;
| + | |
− | transform: translateY(-50%);
| + | |
− | }
| + | |
− | .leftNavUl2{
| + | |
− | list-style: none;
| + | |
− | }
| + | |
− | .leftNavA{
| + | |
− | display: block;
| + | |
− | font-size: 1.1vw;
| + | |
− | font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
| + | |
− | padding: 0.2vw 0.8vw;
| + | |
− | color:#4CA198;
| + | |
− | text-decoration: none;
| + | |
− | }
| + | |
− | .leftNavLi2{
| + | |
− | width: 13vw;
| + | |
− | margin:0.3vw 0;
| + | |
− | line-height: 17px;
| + | |
− | }
| + | |
− | .leftNavA:visited{
| + | |
− | text-decoration: none;
| + | |
− | color:#4CA198;
| + | |
− | }
| + | |
− | .leftNavA:focus{
| + | |
− | text-decoration: none;
| + | |
− | color:#4CA198;
| + | |
− | }
| + | |
− | .leftNavA:hover,.leftNavA:active{
| + | |
− | text-decoration: none;
| + | |
− | color: #B0EBE4;
| + | |
− | }
| + | |
| | | |
− | .leftNavA2{
| + | <div id="ReverseTranscription" class="section container scrolSpy"> |
− | display: block;
| + | <h2>Reverse transcription (RT)</h2> |
− | font-size: 1vw;
| + | <h4>The successful expression of RT</h4> |
− | font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
| + | <p class="flow-text">RT is expressed under an IPTG controlled promoter, we constructed a series of promoters by placing a LacO fragment under a stable promoter, and hopes to determine under which we could achieve most stringent control. The constructs we tested are: T5, T5-LacO, T7-LacO, LacUV5-LacO, J23119-LacO.</p> |
− | padding: 0.1vw 1.5vw;
| + | <p class="flow-text">We initially attempted to verify RT’s expression through an EGFP fusion protein. We fused the EGFP to the C’ end of pol protein, linked by a GS tag. But this construct proved unsuccessful (data not shown), possibly due to the length and complexity of the gag-pol polyprotein. Then we turned to directly expressing EGFP in the place of RT under the control of IPTG. If EGFP can be successfully expressed, so should RT. And results are obtained for each induction promoter construct (figure would be supplemented in presentation and poster).</p> |
− | color:rgba(168,168,168,1);
| + | <p class="flow-text">We found through careful examination that this failure is due to problems with our plasmid construct, so we moved the RT to another tested plasmid, and through SDS-PAGE, verified its successful expression <a href="#Fig3">(Figure 3)</a>. Gag-pol polyprotein is expressed as a whole with its stop codon mutated into its readthrough product, glutamine. The polyprotein has three functional parts, capsid protein, protease and reverse transcriptase. We made Y586F mutation on reverse transcriptase to increase its mutation rate. From the PAGE gel, we can see that all three bands could be seen when induced.</p> |
− | text-decoration: none;
| + | |
− | }
| + | |
− | .leftNavA2:visited{
| + | |
− | text-decoration: none;
| + | |
− | color:rgba(168,168,168,1);
| + | |
− | }
| + | |
− | .leftNavA2:focus{
| + | |
− | text-decoration: none;
| + | |
− | color:rgba(168,168,168,1);
| + | |
− | }
| + | |
− | .leftNavA2:hover,.leftNavA2:active{
| + | |
− | text-decoration: none;
| + | |
− | color: white;
| + | |
− | }
| + | |
− | .menu-active,.menu-active:focus{
| + | |
− | text-decoration: none;
| + | |
− | color: white;
| + | |
− | }
| + | |
− | .menu-active2,.menu-active2:focus{
| + | |
− | text-decoration:none;
| + | |
− | color:#B0EBE4;
| + | |
− | }
| + | |
− |
| + | |
− |
| + | |
− | @media only screen and (max-width:768px){
| + | |
− | .leftNav{
| + | |
− | display:none;
| + | |
− | }
| + | |
− | }
| + | |
− | </style>
| + | |
| | | |
| + | <div class="figureHolder" id="Fig3"> |
| + | <img class="responsive-img" src="https://static.igem.org/mediawiki/2019/2/2f/T--Fudan-TSI--Result_Fig3.gif" /> |
| + | <p><b>Figure 3. gag-pol polyprotein is successfully expressed and underwent excision in the cell.</b><br/> |
| + | SDS-PAGE is performed on whole cell-lysis. The gag-pol polyprotein is split into three pieces, capsid protein (60.4 kDa), protease (13.5 kDa) and reverse transcriptase (69.1 kDa). Both versions of reverse transcriptase, one wildtype, the other Y586F mutant, are tested. ‘-’ stands for uninduced sample, while ‘+’ stands for sample after induction. From the gel we could see that all three bands are brighter in the induced sample.</p> |
| + | </div> |
| + | </div> |
| | | |
− |
| + | <div id="Recombination" class="section container scrolSpy"> |
− | <div id="pageContent">
| + | <h2>Recombination</h2> |
− | <!----------------------------------------------------------------------------------------------------------------------------------------->
| + | <h4>Cre expression is controlled by Tet operon</h4> |
− | <!---- Content ---->
| + | <p class="flow-text">We placed Cre under the promoter ptetR, whose expression is controlled by its inhibitor TetR. Regarding where we should place the inhibitor gene to maximize its expression, we opted between 2 options, one is placing it downstream of the LacI inhibitor, the other is to place it downstream of the kanamycin resistance gene (KanR). We tested both construct by placing an EGFP in these two places and measuring its fluorescence emission. Results show that the expression level is almost the same in both construct. </p> |
− | <!----------------------------------------------------------------------------------------------------------------------------------------->
| + | |
− |
| + | |
− | <div class="container" id="containerWithLeftNav">
| + | |
− | <div class="row">
| + | |
− |
| + | |
− | <div class="row para1">
| + | |
− | <div class="row">
| + | |
− | <div class="col">
| + | |
− | We testified experimentally that our separate modules could function well, while our modelling result proves for the theoretical applicability of our system design.
| + | |
− | </div>
| + | |
− | </div>
| + | |
− | </div>
| + | |
− |
| + | |
− | <div class="row para1">
| + | |
− | <div class="row">
| + | |
− | <div class="col">
| + | |
− | The mutagenesis system could be split into three modules, transcription, reverse transcription, and recombination. Meanwhile our modelling is also conducted in three modules, induced expression model, reverse transcription model and Cre recombination model. Experimental data are processed and proved by modelling result, mutually they testified and demonstrated the feasibility of our system.
| + | |
− | </div>
| + | |
− | </div>
| + | |
− | </div>
| + | |
− |
| + | |
− | <div class="row para1">
| + | |
− | <div class="row">
| + | |
− | <div class="col">
| + | |
− | To ensure that our system can work safely and efficiently, we carefully stuck to all safety rules and investigated thoroughly to verify that each part is safe before using them. For more information please check our Safety page.
| + | |
− | </div>
| + | |
− | </div>
| + | |
− | </div>
| + | |
− |
| + | |
− | <div class="row title1" id="mainTitle1">
| + | |
− | <div class="col">Transcription</div>
| + | |
− | </div>
| + | |
− |
| + | |
− | <div class="row para1">
| + | |
− | <div class="row">
| + | |
− | <div class="col">
| + | |
− | We put the target sequence and its flanking elements together under a T7 stable promoter for high expression level of target RNA. To verify our R-Evolution system, we constructed 7 nonsense mutant of chloramphenicol resistance gene (Chl), bearing the 7 base pair substitution from sense codon to nonsense mutant. We verified this construct through culturing bacteria carrying the original version or mutant on plates containing chloramphenicol. We found that bacteria carrying the original Chl grow naturally, while no colony was formed on the plates of mutated Chl (Fig. 1).
| + | |
− | </div>
| + | |
− | </div>
| + | |
− | </div>
| + | |
− |
| + | |
− |
| + | |
− |
| + | |
− |
| + | |
− | <div class="row legend">
| + | |
− | <div class="row">
| + | |
− | <img src="https://static.igem.org/mediawiki/2019/4/4b/T--Fudan-TSI--Result_Fig1.gif" style="width:30%; margin:auto;">
| + | |
− | </div>
| + | |
− | <div class="row legends">
| + | |
− | <b>Figure 1. The flanking of reverse transcription initiation and loxP sequences does not disrupt Chl functionality.</b><br />
| + | |
− | Wildtype Chl gene continues to express and colonies are grown on the plate containing chloramphenicol (plate on the right). The L158X mutant cannot express functional resistance gene and thus the plate is devoid of cell colony (plate on the right).
| + | |
− | </div>
| + | |
− | </div>
| + | |
− |
| + | |
− |
| + | |
− |
| + | |
− | <div class="row para1">
| + | |
− | <div class="row">
| + | |
− | <div class="col">
| + | |
− | We also constructed and verified nonsense mutants of fluorescent protein EGFP and mCherry at the 158th and 159th amino acid (Fig. 2).
| + | |
− | </div>
| + | |
− | </div>
| + | |
− | </div>
| + | |
− |
| + | |
− | <div class="row legend">
| + | |
− | <div class="row">
| + | |
− | <img src="https://static.igem.org/mediawiki/2019/4/45/T--Fudan-TSI--Result_Fig2.gif" style="width:70%; margin:auto;">
| + | |
− | </div>
| + | |
− | <div class="row legends">
| + | |
− | <b>Figure 2. Nonsense mutant of EGFP and mCherry cannot emit fluorescence.</b><br />
| + | |
− | The vertical axis shows the quantified level of EGFP expression. Mutants of the fluorescence proteins cannot emit fluorescence while the wildtype protein functions naturally. The fluorescence level (EGFP: excitation wavelength 485 nm, detection wavelength 528 nm; mCherry: excitation 550 nm, detection 590 nm) is quantified by the concentration of fluorescein, and normalized by the measured OD600 equivalent to the number of beads in the system. The fluorescein for EGFP and silica beads are from the iGEM distributed measurement kit, red fluorescence is quantified by rhodamine B (Sigma-Aldrich, #S1402-1G). Error bar in the two graphs on the first row indicates the SEM of three replicates.
| + | |
− | </div>
| + | |
− | </div>
| + | |
− |
| + | |
− | <div class="row title1" id="mainTitle2">
| + | |
− | <div class="col">Reverse transcription</div>
| + | |
− | </div>
| + | |
− |
| + | |
− | <div class="row title2" id="mainTitle2_1">
| + | |
− | <div class="col">The successful expression of reverse transcriptase</div>
| + | |
− | </div>
| + | |
− |
| + | |
− | <div class="row para1">
| + | |
− | <div class="col">
| + | |
− | We conducted SDS-PAGE on whole-cell lysates of uninduced and induced cell. Gag-pol polyprotein is expressed as a whole with its stop codon mutated into its readthrough product, glutamine. The polyprotein has three functional parts, capsid protein, protease and reverse transcriptase. We made Y586F mutation on reverse transcriptase to increase its mutation rate. From the PAGE gel, we can see that all three bands could be seen when induced (Fig. 3).
| + | |
− | </div>
| + | |
− | </div>
| + | |
− |
| + | |
− |
| + | |
− |
| + | |
− | <div class="row legend">
| + | |
− | <div class="row">
| + | |
− | <img src="https://static.igem.org/mediawiki/2019/2/2f/T--Fudan-TSI--Result_Fig3.gif" style="width:70%; margin:auto;">
| + | |
− | </div>
| + | |
− | <div class="row legends">
| + | |
− | <b>Figure 3. gag-pol polyprotein is successfully expressed and underwent excision in the cell.</b><br />
| + | |
− | SDS-PAGE is performed on whole cell-lysis. The gag-pol polyprotein is split into three pieces, capsid protein (60.4 kDa), protease (13.5 kDa) and reverse transcriptase (69.1 kDa). Both versions of reverse transcriptase, one wildtype, the other Y586F mutant, are tested. ‘-’ stands for uninduced sample, while ‘+’ stands for sample after induction. From the gel we could see that all three bands are brighter in the induced sample.
| + | |
− | </div>
| + | |
− | </div>
| + | |
− |
| + | |
− |
| + | |
− |
| + | |
− | <div class="row title1" id="mainTitle3">
| + | |
− | <div class="col">Recombination</div>
| + | |
− | </div>
| + | |
− |
| + | |
− |
| + | |
− |
| + | |
− | <div class="row title2" id="mainTitle3_2">
| + | |
− | <div class="col">Cre initiates excision between two homologous loxP site</div>
| + | |
− | </div>
| + | |
− |
| + | |
− | <div class="row para1">
| + | |
− | <div class="col">
| + | |
− | Placing 2 wild-type loxP on both ends of the target sequence (mCherry) in the same direction, and expressing it under a stable promoter (J23101). By co-transforming the target plasmid with another plasmid carrying Cre recombinase, we verified that our Cre protein functions accordingly by excising the mCherry sequence from the promoter (Fig. 4). Through PCR amplification with the primers annealing to sequences outside the target, and subsequent electrophoresis, we found that the band from bacteria co-transforming Cre corresponds to the excision of mCherry.
| + | |
− | </div>
| + | |
− | </div>
| + | |
− |
| + | |
− | <div class="row legend">
| + | |
− | <div class="row">
| + | |
− | <img src="https://static.igem.org/mediawiki/2019/e/e8/T--Fudan-TSI--Result_Fig5.gif" style="width:50%; margin:auto;">
| + | |
− | </div>
| + | |
− | <div class="row legends">
| + | |
− | <b>Figure 4. lox511 remains compatible with wildtype loxP, though at a lower excision rate.</b><br />
| + | |
− | Wildtype loxP and lox511-mCherry-loxP are analyzed on two different gels, their marker bands are indicated. Wildtype loxP only has an excision band. lox511 has a slight full-length mCherry band slightly longer than 1000 bp, which correlates with the full length between two loxP, but excision band is still visible and brighter than that of full-length mCherry. This result suggests that lox511 still interacts with wildtype loxP and go through excision, but at a lower efficiency.
| + | |
− | </div>
| + | |
− | </div>
| + | |
− |
| + | |
− |
| + | |
− |
| + | |
− |
| + | |
− | <div class="row title2" id="mainTitle3_3">
| + | |
− | <div class="col">lox5171 is most incompatible with wildtype loxP (wtlox)</div>
| + | |
− | </div>
| + | |
− |
| + | |
− | <div class="row para1">
| + | |
− | <div class="col">
| + | |
− | When we were carrying out integrated human practice, we were warned by Prof. Wang that two homologous loxP would be excised at a much higher efficiency than performing recombination as we wished, so we searched the literature and selected 3 mutants that are said to be incompatible with wt-loxP but are compatible with themselves, they are lox511, lox2272 and lox5171. We tested their incompatibility with wt-loxP by replacing one of wt-loxP into the mutant at the ends of mCherry, and co-transformed the plasmid with Cre (Fig. 5 & 7). The result we obtained showed that lox5171-mCherry-wt_loxP performs best, and used it in further analysis (Fig. 7).
| + | |
− | </div>
| + | |
− | </div>
| + | |
− |
| + | |
− | <div class="row legend">
| + | |
− | <div class="row">
| + | |
− | <img src="https://static.igem.org/mediawiki/2019/9/9e/T--Fudan-TSI--Result_Fig6.gif" style="width:60%; margin:auto;">
| + | |
− | </div>
| + | |
− | <div class="row legends">
| + | |
− | <b>Figure5. Schematic diagram of loxP mutant incompatibility test. </b><br />
| + | |
− |
| + | |
− | </div>
| + | |
− | </div>
| + | |
− |
| + | |
− | <div class="row legend">
| + | |
− | <div class="row">
| + | |
− | <img src="https://static.igem.org/mediawiki/2019/b/b3/T--Fudan-TSI--Result_Fig7.gif" style="width:70%; margin:auto;">
| + | |
− | </div>
| + | |
− | <div class="row legends">
| + | |
− | <b>Figure 6. Cre excises sequences flanked by homologous loxP sites, but are incompatible with its mutant version. </b><br />
| + | |
− | The above column shows which plasmids are transformed. The 3 middle lanes stand for Cre co-transforming with mCherry flanked on both ends by wildtype loxP (Lane 3), or with wildtype loxP on only one end, the other end being lox2272 (Lane 4) or lox5171 (Lane 5). mCherry flanked with lox2272 or lox5171 on one end does not go through excision so a full-length band was detectable, while mCherry flanked with wildtype loxP on both ends are excised and only a shorter band was seen.
| + | |
− | </div>
| + | |
− | </div>
| + | |
− |
| + | |
− | <div class="row title2" id="mainTitle3_4">
| + | |
− | <div class="col">Cre with degradation tags</div>
| + | |
− | </div>
| + | |
− |
| + | |
− | <div class="row para1">
| + | |
− | <div class="col">
| + | |
− | When our modelling demonstrated to us that the expression level of Cre needs to be much lower than that of RT, we introduced degradation tags. By attaching them to the C terminal of Cre recombinase, the protein would be rapidly recognized and degraded by the E. coli’s native SsrA-SmpB degradation system. This construct could also solve the problem of basal leakage and continued existence after inducer removal. Apart from the native AANDENYALAA tag, we also modified its last three or five amino acids into YALAV, YALVA, YALVV and WVLAA. We tested the stable expression level, as well as the degradation dynamic of each tag by attaching them to the C terminal of EGFP protein and measuring the change in fluorescence level (Fig. 7). The stable state expression increases as the number of mutated amino acids increase, or the mutated site nears the N’ of the tag. Supported by our modelling result, we deemed that the WVLAA tag performs best and chose to use it in further experiments.
| + | |
− | </div>
| + | |
− | </div>
| + | |
− |
| + | |
− | <div class="row legend">
| + | |
− | <div class="row">
| + | |
− | <img src="https://static.igem.org/mediawiki/2019/6/61/T--Fudan-TSI--Result_Fig8.gif" style="width:70%; margin:auto;">
| + | |
− | </div>
| + | |
− | <div class="row legends">
| + | |
− | <b>Figure 7. Degradation tag greatly reduces the protein level at stable state. </b><br />
| + | |
− | WT represents the positive control of EGFP without any tag attachment. The five degradation tags are represented by their last five amino acid sequence. The vertical axis shows the quantitative analysis of EGFP fluorescence (excitation wavelength: 485 nm; detection wavelength: 528 nm), normalized by cell amount (OD600). The fluorescence is quantified by the concentration of green fluorescein, cell number is quantified by the number of silicon beads, both are from the distributed measurement kit. Fluorescence below detection level are eliminated. Error bar stands for the SEM of 3 replicates. t-test is performed between WT and each degradation tag, P<0.0001 (****).
| + | |
− | </div>
| + | |
− | </div>
| + | |
− |
| + | |
− |
| + | |
− |
| + | |
− |
| + | |
− |
| + | |
− | <div class="row title1" id="mainTitle4">
| + | |
− | <div class="col">Modeling</div>
| + | |
− | </div>
| + | |
− |
| + | |
− | <div class="row para1">
| + | |
− | <div class="row">
| + | |
− | <div class="col">
| + | |
− | Our modelling successfully demonstrated that our system could function and mutation could accumulate along bacteria growth (Fig. 8). For detailed explanation of our system, please visit our <a href="https://2019.igem.org/Team:Fudan-TSI/Model"><u>Modeling</u></a> page.
| + | |
| | | |
− | </div>
| + | <h4>Cre initiates excision between two homologous loxP site</h4> |
− | </div>
| + | <p class="flow-text">Placing 2 wild-type loxP on both ends of the target sequence (mCherry) in the same direction, and expressing it under a stable promoter (J23101). By co-transforming the target plasmid with another plasmid carrying Cre recombinase, we verified that our Cre protein functions accordingly by excising the mCherry sequence from the promoter <a href="#Fig4">(Figure 4)</a>.</p> |
− | </div>
| + | |
− | <div class="row legend">
| + | |
− | <div class="row">
| + | |
− | <img src="https://static.igem.org/mediawiki/2019/d/df/T--Fudan-TSI--DemoMd.gif" style="width:70%; margin:auto;">
| + | |
− | </div>
| + | |
− | <div class="row legends">
| + | |
− | <b>Figure 8. Recombined Ptarget would occur when RT and Cre is expressed at a proper level. </b><br />
| + | |
− | Dynamics of the percentage of un-recombined / recombined Ptarget among all Ptargets is shown in the upper panel. The distribution of the percentage of substances at the steady-state is shown in the lower panel. Ps: un-recombined Ptarget. Pp: recombined Ptarget. The result that intermediate formed by un-recombined Ptarget and T7RNA polymerase shows that mutation on Parget can accumulate.
| + | |
− | </div>
| + | |
− | </div>
| + | |
− |
| + | |
− |
| + | |
− |
| + | |
− |
| + | |
− |
| + | |
− |
| + | |
− | </div>
| + | |
− | </div>
| + | |
− |
| + | |
| | | |
− |
| + | <div class="figureHolder" id="Fig4"> |
− | </div>
| + | <img class="responsive-img" src="https://static.igem.org/mediawiki/2019/e/e8/T--Fudan-TSI--Result_Fig5.gif" /> |
− |
| + | <p><b>Figure 4. lox511 remains compatible with wildtype loxP, though at a lower excision rate.</b><br/> |
− |
| + | Wildtype loxP and lox511-mCherry-loxP are analyzed on two different gels, their marker bands are indicated. Wildtype loxP only has an excision band. lox511 has a slight full-length mCherry band slightly longer than 1000 bp, which correlates with the full length between two loxP, but excision band is still visible and brighter than that of full-length mCherry. This result suggests that lox511 still interacts with wildtype loxP and go through excision, but at a lower efficiency.</p> |
− |
| + | </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 active">
| + | |
− | <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">
| + | |
− | <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/Human_Practices">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="/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>
| + | <p class="flow-text">Through PCR amplification with the primers annealing to sequences outside the target, and subsequent electrophoresis, we found that the band from bacteria co-transforming Cre corresponds to the excision of mCherry.</p> |
| | | |
− |
| + | <h4>lox5171 is most incompatible with wildtype loxP (wtlox)</h4> |
− |
| + | <p class="flow-text">When we were carrying out integrated human practice, we were warned by <a href="/Team:Fudan-TSI/Human_Practices#IntegratedHumanPractice">Prof. Wang</a> that two homologous loxP would be excised at a much higher efficiency than performing recombination as we wished, so we searched the literature and selected 3 mutants that are said to be incompatible with wtlox but are compatible with themselves, they are lox511, lox2272 and lox5171.</p> |
− | <script>
| + | <p class="flow-text">We tested their incompatibility with wtlox by replacing one of wtlox into the mutant at the ends of mCherry, and co-transformed the plasmid with Cre <a href="#Fig5">(Figure 5</a><a href="#Fig6"> & 6)</a>. The result we obtained showed that lox5171-mCherry-wtlox performs best, and used it in further analysis <a href="#Fig6">(Figure 6)</a>.</p> |
− |
| + | |
− | 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(){
| + | <div class="figureHolder" id="Fig5"> |
− | var winHeight=$(window).height();
| + | <img class="responsive-img" src="https://static.igem.org/mediawiki/2019/9/9e/T--Fudan-TSI--Result_Fig6.gif" /> |
− | var winWidth=$(window).width();
| + | <p><b>Figure 5. Schematic diagram of loxP mutant incompatibility test.</b></p> |
− | var leftNavFromTop=pagePosition-$(window).scrollTop();
| + | </div> |
− | 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;
| + | |
− | });
| + | |
| | | |
| + | <div class="figureHolder" id="Fig5"> |
| + | <img class="responsive-img" src="https://static.igem.org/mediawiki/2019/b/b3/T--Fudan-TSI--Result_Fig7.gif" /> |
| + | <p><b>Figure 6. Cre excises sequences flanked by homologous loxP sites, but are incompatible with its mutant version.</b><br/> |
| + | The above column shows which plasmids are transformed. The 3 middle lanes stand for Cre co-transforming with mCherry flanked on both ends by wildtype loxP (Lane 3), or with wildtype loxP on only one end, the other end being lox2272 (Lane 4) or lox5171 (Lane 5). mCherry flanked with lox2272 or lox5171 on one end does not go through excision so a full-length band was detectable, while mCherry flanked with wildtype loxP on both ends are excised and only a shorter band was seen.</p> |
| + | </div> |
| | | |
− | $(window).scroll(function(){
| + | <h4 id="degradation">Cre with degradation tags</h4> |
− |
| + | <p class="flow-text">When our <a href="/Team:Fudan-TSI/Model">modeling</a> demonstrated to us that the expression level of Cre needs to be much lower than that of RT, we introduced degradation tags. By attaching them to the C terminal of Cre recombinase, the protein would be rapidly recognized and degraded by the <i>E. coli</i>’s native SsrA-SmpB degradation system. This construct could also solve the problem of basal leakage and continued existence after inducer removal.</p> |
− | 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>
| + | <div class="figureHolder" id="Fig7"> |
| + | <img class="responsive-img" src="https://static.igem.org/mediawiki/2019/6/61/T--Fudan-TSI--Result_Fig8.gif" /> |
| + | <p><b>Figure 7. Degradation tag greatly reduces the protein level at stable state.</b><br/> |
| + | <br/>WT represents the positive control of EGFP without any tag attachment. The five degradation tags are represented by their last five amino acid sequence. The vertical axis shows the quantitative analysis of EGFP fluorescence (excitation wavelength: 485 nm; detection wavelength: 528 nm), normalized by cell amount (OD600). The fluorescence is quantified by the concentration of green fluorescein, cell number is quantified by the number of silicon beads, both are from the distributed measurement kit. Fluorescence below detection level are eliminated. Error bar stands for the SEM of 3 replicates. t-test is performed between WT and each degradation tag, P<0.0001 (****).</p> |
| + | </div> |
| | | |
− |
| + | <p class="flow-text">Apart from the native AANDENYALAA tag, we also modified its last three or five amino acids into YALAV, YALVA, YALVV and WVLAA. We tested the stable expression level, as well as the degradation dynamic of each tag by attaching them to the C terminal of EGFP protein and measuring the change in fluorescence level <a href="#Fig7">(Figure 7)</a>. The stable state expression increases as the number of mutated amino acids increase, or the mutated site nears the N’ of the tag. Supported by our modeling result, we deemed that the XXX tag performs best and chose to use it in further experiments.</p> |
− | <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>
| + | </div> |
− | <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>
| + | |
| | | |
| + | <div id="section4" class="section container scrolSpy"> |
| + | <h2>Modeling</h2> |
| + | <div class="figureHolder"> |
| + | <img class="responsive-img" src="https://static.igem.org/mediawiki/2019/d/df/T--Fudan-TSI--DemoMd.gif" /> |
| + | <p><b>Figure 8. Recombined P<sub>target</sub> would occur when RT and Cre is expressed at a proper level.</b> |
| + | <br/>Dynamics of the percentage of un-recombined / recombined Ptarget among all Ptargets is shown in the upper panel. The distribution of the percentage of substances at the steady-state is shown in the lower panel. Ps: un-recombined Ptarget. Pp: recombined Ptarget. The result that intermediate formed by un-recombined Ptarget and T7RNA polymerase shows that mutation on Parget can accumulate.</p> |
| + | </div> |
| + | <p class="flow-text">Our modelling successfully demonstrated that our system could function and mutation could accumulate along bacteria growth <a href="#Fig8">(Figure 8)</a>. For detailed explanation of our system, please visit our <a href="Team:Fudan-TSI/Model">Modeling</a> page.</p> |
| + | </div> |
| | | |
− |
| |
− |
| |
− |
| |
− |
| |
− |
| |
− |
| |
− |
| |
| | | |
| + | <!--//////////////////////////////////////////////////// |
| + | do not edit below, if must BE CAREFUL |
| + | //////////////////////////////////////////////////////--> |
| + | </article></main></div><!-- end of side navigator and main of the page --> |
| | | |
− | <!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Content ends ---------------------------------------------------------------------------------------------------------------------------------> | + | <!-- Floating Btns, Footer with sponsors --> |
− | <!----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------> | + | <div class="floatingBtn"> <a href="#FudanTSIdivWrapper" class="btn"> <i class="fa fa-angle-up" style="font-size:48px;line-height:45px"></i> </a></div> <footer id="FudanTSIfooter" class="page-footer blue-grey darken-1"><div class="container"><div class="row"><div id="sponsor" class="col m3 s12 row"> <a href="https://2019.igem.org/Team:Fudan-TSI"><img alt="2019 Team:Fudan-TSI logo white" class="col s3 m6 l3" style="position:relative; padding: 0.45em 0.3rem; margin:-0.15rem 0; left: -0.45rem;" src="https://static.igem.org/mediawiki/2019/0/0f/T--Fudan-TSI--LogoGrey.gif"> </a><a href="http://www.fudan.edu.cn/en/" target="_blank"><img class="col s3 m6 l3" alt="Fudan University" src="https://static.igem.org/mediawiki/2018/f/f7/T--Fudan--schoolLogo.png"> </a><a href="http://life.fudan.edu.cn/" target="_blank"><img class="col s3 m6 l3" style="margin-bottom: 4%;/* fig should be smaller, 2018 ht */" alt="School of Life Sciences, Fudan University" src="https://static.igem.org/mediawiki/2018/1/1d/T--Fudan--schoolOfLifeSciencesIcon.png"> </a><a href="http://www.yfc.cn/en/" target="_blank"><img class="col s3 m6 l3" style="padding: 0.15rem 0.9rem;" alt="Yunfeng Capital" src="https://static.igem.org/mediawiki/2018/e/e2/T--Fudan--yunfengLogo.png"> </a><h3 class="col s12" style="text-align:left;font-size:12.5px">R-Evolution: an <i>in vivo</i> sequence-specific toolbox for continuous mutagenesis</h3></div><div id="footerNavList" class="col m9 s12 row"><div class="col s12 l6 row"><div class="col s12 m4"> <span><a href="/Team:Fudan-TSI/Description">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/Experiments">Experiments</a></li><li><a href="/Team:Fudan-TSI/Applied_Design">Applied design</a></li><li><a href="/Team:Fudan-TSI/Judging">Judging</a></li></ul></div><div class="col s12 m4 active"> <span><a href="/Team:Fudan-TSI/Demonstrate">Results</a></span><ul><li><a href="/Team:Fudan-TSI/Demonstrate#ReverseTranscription">Reverse transcription</a></li><li><a href="/Team:Fudan-TSI/Demonstrate#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 class="col s12 m4"> <span><a href="/Team:Fudan-TSI/Model">Model</a></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 class="col s12 l6 row"><div class="col s12 m4"> <span><a href="/Team:Fudan-TSI/Parts">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">Part improvement</a></li><li><a href="/Team:Fudan-TSI/Part_Collection">Part collection</a></li></ul></div><div class="col s12 m4"> <span><a href="/Team:Fudan-TSI/Human_Practices">Outreach</a></span><ul><li><a href="/Team:Fudan-TSI/Public_Engagement">Public engagement</a></li><li><a href="/Team:Fudan-TSI/Human_Practices#IntegratedHumanPractice">Integrated HP</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 class="col s12 m4"> <span><a href="/Team:Fudan-TSI/Team">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="/Team:Fudan-TSI/Team#Acknowledge">Acknowledge</a></li><li><a href="/Team:Fudan-TSI/Heritage">Heritage</a></li></ul></div><div class="col s12 m4"> </div></div></div></div></div><div class="footer-copyright"><div class="container"><div class="contactUS row"><div class="col s12 m6 l4"><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 l4"><i class="fa fa-twitter"></i> <i class="fa fa-wechat"></i> Fudan_iGEM</div></div></div></div> </footer> |
| + | </div></div></div><!-- #pageContent #FudanTSIBody #FudanTSIdivWrapper --> |
| | | |
| + | <script src="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/materialize.js&action=raw&ctype=text/javascript"></script><!-- Materialize 1.0.0-rc.2 --> |
| + | <script src="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/Fudan-js.js&action=raw&ctype=text/javascript"></script> |
| + | </body> |
| </html> | | </html> |