Difference between revisions of "Team:Peking/Proof"

Line 4: Line 4:
 
<html class="no-js" lang="en">
 
<html class="no-js" lang="en">
 
     <!--<![endif]-->
 
     <!--<![endif]-->
<head>
+
    <head>
<!--- Basic Page Needs========================================================================= -->
+
        <!--- Basic Page Needs========================================================================= -->
<meta charset="utf-8"/>
+
        <meta charset="utf-8"/>
<title>Proof</title>
+
        <title>Proof</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.2, user-scalable=yes" />
+
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.2, user-scalable=yes" />
<meta name="description" content="Wiki of Peking iGEM 2016" />
+
        <meta name="description" content="Wiki of Peking iGEM 2016" />
<meta name="author" content="Li Jiamian & Wang Yuqing"/>
+
        <meta name="author" content="Li Jiamian & Wang Yuqing"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Mobile Specific Metas===================================================================== -->
+
        <!-- Mobile Specific Metas===================================================================== -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
+
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<!-- Fix  Overwrite the original iGEM style=================================================== -->
+
        <!-- Fix  Overwrite the original iGEM style=================================================== -->
<link href="https://2016.igem.org/Template:Peking/css/fix?action=raw&ctype=text/css" rel="stylesheet" />
+
        <link href="https://2016.igem.org/Template:Peking/css/fix?action=raw&ctype=text/css" rel="stylesheet" />
<!-- CSS======================================================================================= -->
+
        <!-- CSS======================================================================================= -->
<link href="https://2016.igem.org/Template:Peking/css/bootstrap_min?action=raw&ctype=text/css" rel="stylesheet" />
+
        <link href="https://2016.igem.org/Template:Peking/css/bootstrap_min?action=raw&ctype=text/css" rel="stylesheet" />
<link href="https://2016.igem.org/Template:Peking/css/style?action=raw&ctype=text/css" rel="stylesheet" />
+
        <link href="https://2016.igem.org/Template:Peking/css/style?action=raw&ctype=text/css" rel="stylesheet" />
<!-- CSS======================================================================================= -->
+
        <!-- CSS======================================================================================= -->
<link rel="stylesheet" href="https://2016.igem.org/Template:Peking/css/default?action=raw&ctype=text/css"/>
+
        <link rel="stylesheet" href="https://2016.igem.org/Template:Peking/css/default?action=raw&ctype=text/css"/>
<link rel="stylesheet" href="https://2016.igem.org/Template:Peking/css/layout?action=raw&ctype=text/css"/>
+
        <link rel="stylesheet" href="https://2016.igem.org/Template:Peking/css/layout?action=raw&ctype=text/css"/>
<link rel="stylesheet" href="https://2016.igem.org/Template:Peking/css/media-queries?action=raw&ctype=text/css"/>
+
        <link rel="stylesheet" href="https://2016.igem.org/Template:Peking/css/media-queries?action=raw&ctype=text/css"/>
<link rel="stylesheet" href="https://2016.igem.org/Template:Peking/css/priorstyle?action=raw&ctype=text/css"/>
+
        <link rel="stylesheet" href="https://2016.igem.org/Template:Peking/css/priorstyle?action=raw&ctype=text/css"/>
<link rel="stylesheet" href="https://2016.igem.org/Template:Peking/css/notebook_panel?action=raw&ctype=text/css"/>
+
        <link rel="stylesheet" href="https://2016.igem.org/Template:Peking/css/notebook_panel?action=raw&ctype=text/css"/>
<style>
+
        <style>
    .texttitle{
+
            .texttitle{
        color: #11abb0;
+
                color: #11abb0;
        font-size: 38px;
+
                font-size: 38px;
        line-height: 48px;
+
                line-height: 48px;
        margin-bottom: 12px;
+
                margin-bottom: 12px;
        font-family: raleway-bold, sans-serif !important;
+
                font-family: raleway-bold, sans-serif !important;
        background: transparent;
+
                background: transparent;
        letter-spacing: 3px;
+
                letter-spacing: 3px;
        text-transform: uppercase;
+
                text-transform: uppercase;
        font-weight: 350;
+
                font-weight: 350;
        text-align: center;
+
                text-align: center;
        padding-top:40px;
+
                padding-top:40px;
    }
+
            }
    sup{font-size:11px;}
+
        sup{font-size:11px;}
    .references{margin-top:150px;margin-bottom:40px;}
+
        .references{margin-top:150px;margin-bottom:40px;}
    .references p{font-size:14px !important; color:#666161 !important;}
+
        .references p{font-size:14px !important; color:#666161 !important;}
    .classic-title {font-weight: 300;padding-top:30px;}
+
        .classic-title {font-weight: 300;padding-top:30px;}
    .classic-title span {
+
        .classic-title span {
        padding-bottom: 8px;
+
            padding-bottom: 8px;
        border-bottom: 1px solid #383232;
+
            border-bottom: 1px solid #383232;
        font-weight: 400;
+
            font-weight: 400;
    }
+
        }
    figure{margin-top:40px;margin-bottom:40px;height:auto;}
+
        figure{margin-top:40px;margin-bottom:40px;height:auto;}
    .anchor{padding-top:100px;margin-top:-100px;}
+
        .anchor{padding-top:100px;margin-top:-100px;}
</style>
+
            </style>
                                   
+
</head>
+
<body>
+
<!--sidebar 引用==============================================================================-->
+
<style>
+
    #primary span{
+
        display:block;
+
        word-break:break-all
+
    }
+
 
+
#page-wrap {
+
    width: 25%;
+
    margin: 0px;
+
    position: relative;
+
}
+
 
+
#sidebar {
+
    width: 25%;
+
    margin-left: 0px;
+
}
+
@media (min-width:1024px){
+
    #sidebar{position:relative;top:120px;max-width:200px;}}
+
@media (max-width: 1023px){
+
    #sidebar{display:none;
+
    }
+
    #page-wrap{display:none;}
+
}
+
</style>
+
 
+
 
+
<script type="text/javascript">
+
    function menuFixed(id){
+
        var obj = document.getElementById(id);
+
        var _getHeight = obj.offsetTop;
+
 
          
 
          
         window.onscroll = function(){
+
    </head>
             changePos(id,_getHeight);
+
    <body>
 +
         <!--sidebar 引用==============================================================================-->
 +
        <style>
 +
            #primary span{
 +
                display:block;
 +
                word-break:break-all
 +
            }
 +
       
 +
        #page-wrap {
 +
            width: 25%;
 +
            margin: 0px;
 +
             position: relative;
 
         }
 
         }
    }
 
function changePos(id,height){
 
    var obj = document.getElementById(id);var windowBottom = $(window).scrollTop() + $(window).innerHeight();
 
    if(w>=1024){
 
        if($(window).scrollTop() + $(window).height() > $(document).height() - 230){
 
            $('#sidebar').fadeOut("fast");}else{$('#sidebar').fadeIn("fast");}
 
    }
 
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop -230;
 
    var windowBottom = $(window).scrollTop() + $(window).innerHeight();
 
    var w = window.innerWidth;
 
   
 
    if(scrollTop < height){ obj.style.position = 'relative';     
 
    }else{
 
        obj.style.position = 'fixed';
 
    }
 
}
 
</script>
 
 
<script type="text/javascript">
 
    window.onload = function(){
 
        menuFixed('sidebar');
 
    }
 
</script>
 
<script>
 
function naver(id){
 
  var obj=document.getElementById(id);
 
  var oPos=obj.offsetTop;
 
  return window.scrollTo(0,oPos+250);
 
}
 
</script>
 
<!--sidebar 引用 end ==============================================================================-->
 
<!--panel 引用==================================================================================-->
 
<style type="text/css">
 
.panel-default .panel-heading a{
 
        text-decoration: none;
 
        display:block;
 
        padding:10px;
 
    }
 
.panel-heading.panel-title{
 
    text-decoration: none;
 
    padding-top:0px;
 
    padding-bottom:0px;
 
    padding-left:0px;
 
    padding-right:0px;
 
    text-align:center;
 
    font-size:19px;
 
   
 
}
 
a[aria-expanded="true"] {
 
    background-color:rgba(70, 73, 76, 0.95);
 
    text-decoration: none;
 
    color:white;
 
}
 
 
.panel-default .panel-heading a[aria-expanded="false"]{
 
    -o-transition: background-color 1s linear;
 
    -moz-transition: background-color 1s linear;
 
    -khtml-transition: background-color 1s linear;
 
    -webkit-transition: background-color 1s linear;
 
    -ms-transition: background-color 1s linear;
 
    transition: background-color 1s linear;
 
}
 
.panel-default .panel-heading a[aria-expanded="false"]:hover{
 
    background-color:rgba(70, 73, 76, 0.95);
 
    text-decoration: none;
 
    color:white;
 
}
 
.panel-default .panel-heading a[aria-expanded="true"]{
 
    -o-transition: opacity 1s linear;
 
    -moz-transition: opacity 1s linear;
 
    -khtml-transition: opacity 1s linear;
 
    -webkit-transition: opacity 1s linear;
 
    -ms-transition: opacity 1s linear;
 
    transition: opacity 0.7s linear;
 
}
 
.panel-default .panel-heading a[aria-expanded="true"]:hover{
 
    opacity:0.7;
 
}
 
</style>
 
 
<script type="text/javascript">
 
    $(document).ready(function(){
 
                      $("#button1").click(function(){
 
                                          $(".panel-collapse").collapse("show");
 
                                          });
 
                      });
 
                      $(document).ready(function(){
 
                                        $("#button2").click(function(){
 
                                                            $(".panel-collapse").collapse("hide");
 
                                                            });
 
                                        });
 
                                        $("#notebook").addClass("navbar-active");
 
</script>
 
<!--panel 引用 end ==================-->
 
 
          
 
          
<!-- Navigation -->
+
        #sidebar {
<div id="navigation" class="navbar navbar-fixed-top">
+
            width: 25%;
    <div class="navbar-inner ">
+
            margin-left: 0px;
         <div class="container no-padding">
+
        }
             <a class="show-menu" data-toggle="collapse" data-target=".nav-collapse"><span class="show-menu-bar"></span>
+
        @media (min-width:1024px){
             </a>
+
            #sidebar{position:relative;top:120px;max-width:200px;}}
             <div id="logo" style="max-width:170px"><a class="" href="https://2016.igem.org/Team:Peking"></a></div>
+
        @media (max-width: 1023px){
 +
            #sidebar{display:none;
 +
            }
 +
            #page-wrap{display:none;}
 +
        }
 +
        </style>
 +
       
 +
       
 +
         <script type="text/javascript">
 +
             function menuFixed(id){
 +
                var obj = document.getElementById(id);
 +
                var _getHeight = obj.offsetTop;
 +
               
 +
                window.onscroll = function(){
 +
                    changePos(id,_getHeight);
 +
                }
 +
             }
 +
        function changePos(id,height){
 +
             var obj = document.getElementById(id);var windowBottom = $(window).scrollTop() + $(window).innerHeight();
 +
            if(w>=1024){
 +
                if($(window).scrollTop() + $(window).height() > $(document).height() - 230){
 +
                    $('#sidebar').fadeOut("fast");}else{$('#sidebar').fadeIn("fast");}
 +
            }
 +
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop -230;
 +
            var windowBottom = $(window).scrollTop() + $(window).innerHeight();
 +
            var w = window.innerWidth;
 
              
 
              
             <div class="nav-collapse collapse">
+
             if(scrollTop < height){ obj.style.position = 'relative';
                <ul class="nav">
+
            }else{
                    <li class="menu-1"><a class="colapse-menu1" href="https://2016.igem.org/Team:Peking" >Home</a></li>
+
                obj.style.position = 'fixed';
                    <li class="dropdown menu-2"><a class="dropdown-toggle" data-toggle="dropdown" href="#" > Achievements</a>
+
             }
                        <ul class="dropdown-menu">
+
         }
                            <li><a href="https://2016.igem.org/Team:Peking/Demonstrate" >Results</a></li>
+
        </script>
                            <li><a href="https://2016.igem.org/Team:Peking/Basic_Part" >Parts</a></li>
+
                            <li><a href="https://2016.igem.org/Team:Peking/Collaborations" >Collaborations</a></li>
+
                        </ul>
+
                    </li>
+
                    <li class="dropdown menu-3"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Project</a>
+
                        <ul class="dropdown-menu">
+
                            <li><a href="https://2016.igem.org/Team:Peking/Description" >Overview</a></li>
+
                            <li><a href="https://2016.igem.org/Team:Peking/Design" >Design</a></li>
+
                            <li><a href="https://2016.igem.org/Team:Peking/Crosslinking" >Crosslinking</a></li>
+
                            <li><a href="https://2016.igem.org/Team:Peking/Uranyl-adsorption" >Uranyl adsorption</a></li>
+
                            <li><a href="https://2016.igem.org/Team:Peking/Clearance" >Clearance</a></li>
+
                            <li><a href="https://2016.igem.org/Team:Peking/Secretion" >Secretion</a></li>
+
                            <li><a href="https://2016.igem.org/Team:Peking/Proof" >Final Performance</a></li>
+
                        </ul>
+
                    </li>
+
                    <li class="dropdown menu-4"><a class="dropdown-toggle" data-toggle="dropdown" href="#" >Modeling</a>
+
                        <ul class="dropdown-menu">
+
                            <li><a href="https://2016.igem.org/Team:Peking/Model" >Protein polymerization</a></li>
+
                            <li><a href="https://2016.igem.org/Team:Peking/Software" >Software</a></li>
+
                        </ul>
+
                    </li>
+
                    <li class="dropdown menu-5"><a class="dropdown-toggle" data-toggle="dropdown" href="#" >Practices</a>
+
                        <ul class="dropdown-menu">
+
                            <li><a href="https://2016.igem.org/Team:Peking/HP/Gold" >Overview</a></li>
+
                            <li><a href="https://2016.igem.org/Team:Peking/HP/311" >Field research</a></li>
+
                            <li><a href="https://2016.igem.org/Team:Peking/HP/questionnaire" >Questionnaire</a></li>
+
                            <li><a href="https://2016.igem.org/Team:Peking/HP/consulting" >Consulting</a></li>
+
                            <li><a href="https://2016.igem.org/Team:Peking/HP/otherHP" >Other work</a></li>
+
                        </ul>
+
                    </li>
+
                    <li class="menu-6"><a class="colapse-menu1" href="https://2016.igem.org/Team:Peking/Safety" >Safety</a>
+
                        <li class="dropdown menu-7"><a class="dropdown-toggle" data-toggle="dropdown" href="#" >Lab</a>
+
                            <ul class="dropdown-menu">
+
                                <li><a class="" href="https://2016.igem.org/Team:Peking/Team" >Team</a></li>
+
                                <li><a class="" href="https://2016.igem.org/Team:Peking/Attributions" >Attribution</a></li>
+
                                <li><a class="" href="https://2016.igem.org/Team:Peking/Notebook" >Notebook</a></li>
+
                            </ul>
+
                        </li>
+
                        <li class="menu-8"><a class="colapse-menu1" href="https://2016.igem.org/Team:Peking/Interlab" >Interlab</a>
+
                        </li>
+
             </div>
+
         </div>
+
    </div>
+
</div>
+
<!--/Navigation -->
+
 
          
 
          
<!-- Page Title======================================================================== -->
+
        <script type="text/javascript">
<div id="page-title">
+
            window.onload = function(){
    <div class="row">
+
                menuFixed('sidebar');
         <div class="twelve columns centered text-center">
+
            }
             <h1> Integrated experiment</h1>
+
        </script>
             <p class="title1" style="text-align:center"></p>
+
        <script>
         </div>
+
            function naver(id){
    </div>
+
                var obj=document.getElementById(id);
</div><!-- Page Title End-->
+
                var oPos=obj.offsetTop;
 +
                return window.scrollTo(0,oPos+250);
 +
            }
 +
        </script>
 +
        <!--sidebar 引用 end ==============================================================================-->
 +
        <!--panel 引用==================================================================================-->
 +
        <style type="text/css">
 +
            .panel-default .panel-heading a{
 +
                text-decoration: none;
 +
                display:block;
 +
                padding:10px;
 +
            }
 +
         .panel-heading.panel-title{
 +
            text-decoration: none;
 +
             padding-top:0px;
 +
            padding-bottom:0px;
 +
            padding-left:0px;
 +
            padding-right:0px;
 +
             text-align:center;
 +
            font-size:19px;
 +
           
 +
         }
 +
        a[aria-expanded="true"] {
 +
            background-color:rgba(70, 73, 76, 0.95);
 +
            text-decoration: none;
 +
            color:white;
 +
        }
 
          
 
          
 +
        .panel-default .panel-heading a[aria-expanded="false"]{
 +
            -o-transition: background-color 1s linear;
 +
            -moz-transition: background-color 1s linear;
 +
            -khtml-transition: background-color 1s linear;
 +
            -webkit-transition: background-color 1s linear;
 +
            -ms-transition: background-color 1s linear;
 +
            transition: background-color 1s linear;
 +
        }
 +
        .panel-default .panel-heading a[aria-expanded="false"]:hover{
 +
            background-color:rgba(70, 73, 76, 0.95);
 +
            text-decoration: none;
 +
            color:white;
 +
        }
 +
        .panel-default .panel-heading a[aria-expanded="true"]{
 +
            -o-transition: opacity 1s linear;
 +
            -moz-transition: opacity 1s linear;
 +
            -khtml-transition: opacity 1s linear;
 +
            -webkit-transition: opacity 1s linear;
 +
            -ms-transition: opacity 1s linear;
 +
            transition: opacity 0.7s linear;
 +
        }
 +
        .panel-default .panel-heading a[aria-expanded="true"]:hover{
 +
            opacity:0.7;
 +
        }
 +
        </style>
 
          
 
          
<div id="page-content" class="row page">
+
        <script type="text/javascript">
    <div id="primary" class="twelve columns">
+
            $(document).ready(function(){
         <section>
+
                              $("#button1").click(function(){
 +
                                                  $(".panel-collapse").collapse("show");
 +
                                                  });
 +
                              });
 +
                              $(document).ready(function(){
 +
                                                $("#button2").click(function(){
 +
                                                                    $(".panel-collapse").collapse("hide");
 +
                                                                    });
 +
                                                });
 +
                                                $("#notebook").addClass("navbar-active");
 +
            </script>
 +
        <!--panel 引用 end ==================-->
 +
       
 +
        <!-- Navigation -->
 +
        <div id="navigation" class="navbar navbar-fixed-top">
 +
            <div class="navbar-inner ">
 +
                <div class="container no-padding">
 +
                    <a class="show-menu" data-toggle="collapse" data-target=".nav-collapse"><span class="show-menu-bar"></span>
 +
                    </a>
 +
                    <div id="logo" style="max-width:170px"><a class="" href="https://2016.igem.org/Team:Peking"></a></div>
 +
                   
 +
                    <div class="nav-collapse collapse">
 +
                        <ul class="nav">
 +
                            <li class="menu-1"><a class="colapse-menu1" href="https://2016.igem.org/Team:Peking" >Home</a></li>
 +
                            <li class="dropdown menu-2"><a class="dropdown-toggle" data-toggle="dropdown" href="#" > Achievements</a>
 +
                                <ul class="dropdown-menu">
 +
                                    <li><a href="https://2016.igem.org/Team:Peking/Demonstrate" >Results</a></li>
 +
                                    <li><a href="https://2016.igem.org/Team:Peking/Basic_Part" >Parts</a></li>
 +
                                    <li><a href="https://2016.igem.org/Team:Peking/Collaborations" >Collaborations</a></li>
 +
                                </ul>
 +
                            </li>
 +
                            <li class="dropdown menu-3"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Project</a>
 +
                                <ul class="dropdown-menu">
 +
                                    <li><a href="https://2016.igem.org/Team:Peking/Description" >Overview</a></li>
 +
                                    <li><a href="https://2016.igem.org/Team:Peking/Design" >Design</a></li>
 +
                                    <li><a href="https://2016.igem.org/Team:Peking/Crosslinking" >Crosslinking</a></li>
 +
                                    <li><a href="https://2016.igem.org/Team:Peking/Uranyl-adsorption" >Uranyl adsorption</a></li>
 +
                                    <li><a href="https://2016.igem.org/Team:Peking/Clearance" >Clearance</a></li>
 +
                                    <li><a href="https://2016.igem.org/Team:Peking/Secretion" >Secretion</a></li>
 +
                                    <li><a href="https://2016.igem.org/Team:Peking/Proof" >Final Performance</a></li>
 +
                                </ul>
 +
                            </li>
 +
                            <li class="dropdown menu-4"><a class="dropdown-toggle" data-toggle="dropdown" href="#" >Modeling</a>
 +
                                <ul class="dropdown-menu">
 +
                                    <li><a href="https://2016.igem.org/Team:Peking/Model" >Protein polymerization</a></li>
 +
                                    <li><a href="https://2016.igem.org/Team:Peking/Software" >Software</a></li>
 +
                                </ul>
 +
                            </li>
 +
                            <li class="dropdown menu-5"><a class="dropdown-toggle" data-toggle="dropdown" href="#" >Practices</a>
 +
                                <ul class="dropdown-menu">
 +
                                    <li><a href="https://2016.igem.org/Team:Peking/HP/Gold" >Overview</a></li>
 +
                                    <li><a href="https://2016.igem.org/Team:Peking/HP/311" >Field research</a></li>
 +
                                    <li><a href="https://2016.igem.org/Team:Peking/HP/questionnaire" >Questionnaire</a></li>
 +
                                    <li><a href="https://2016.igem.org/Team:Peking/HP/consulting" >Consulting</a></li>
 +
                                    <li><a href="https://2016.igem.org/Team:Peking/HP/otherHP" >Other work</a></li>
 +
                                </ul>
 +
                            </li>
 +
                            <li class="menu-6"><a class="colapse-menu1" href="https://2016.igem.org/Team:Peking/Safety" >Safety</a>
 +
                                <li class="dropdown menu-7"><a class="dropdown-toggle" data-toggle="dropdown" href="#" >Lab</a>
 +
                                    <ul class="dropdown-menu">
 +
                                        <li><a class="" href="https://2016.igem.org/Team:Peking/Team" >Team</a></li>
 +
                                        <li><a class="" href="https://2016.igem.org/Team:Peking/Attributions" >Attribution</a></li>
 +
                                        <li><a class="" href="https://2016.igem.org/Team:Peking/Notebook" >Notebook</a></li>
 +
                                    </ul>
 +
                                </li>
 +
                                <li class="menu-8"><a class="colapse-menu1" href="https://2016.igem.org/Team:Peking/Interlab" >Interlab</a>
 +
                                </li>
 +
                                </div>
 +
                </div>
 +
            </div>
 +
         </div>
 +
        <!--/Navigation -->
 +
       
 +
        <!-- Page Title======================================================================== -->
 +
        <div id="page-title">
 
             <div class="row">
 
             <div class="row">
               
+
                 <div class="twelve columns centered text-center">
               
+
                     <h1> Integrated experiment</h1>
               
+
                    <p class="title1" style="text-align:center"></p>
               
+
                 <div class="three columns">
+
                <div id="page-wrap">
+
                     <div id="sidebar" style="color:#000000">
+
                        <h4><a href="javascript:void(0);" onclick="naver('Background')">Background&nbsp;&amp;&nbsp;Design</a></h4>
+
                        <h4><a href="javascript:void(0);" onclick="naver('Methods')">Methods</a></h4>
+
                        <h4><a href="javascript:void(0);" onclick="naver('Results')">Results<a></h4>
+
                        <h4><a href="javascript:void(0);" onclick="naver('Conclusion')">Discussion</a></h4>
+
                        <h4><a href="javascript:void(0);" onclick="naver('App')">Potential&nbsp;Applications<a></h4>
+
                        <ul>
+
                            <li><a href="javascript:void(0);" onclick="naver('Cadmium')">Cadmium&nbsp;&amp;&nbsp;Lead&nbsp;Reaper</a></li>
+
                            <li><a href="javascript:void(0);" onclick="naver('Visual')">Visualization</a></li>
+
                        </ul>
+
                    </div>
+
                </div>
+
 
                 </div>
 
                 </div>
 +
            </div>
 +
        </div><!-- Page Title End-->
 +
       
 +
       
 +
        <div id="page-content" class="row page">
 +
            <div id="primary" class="twelve columns">
 +
                <section>
 +
                    <div class="row">
 +
                       
 +
                       
 +
                       
 +
                       
 +
                        <div class="three columns">
 +
                            <div id="page-wrap">
 +
                                <div id="sidebar" style="color:#000000">
 +
                                    <h4><a href="javascript:void(0);" onclick="naver('Background')">Background&nbsp;&amp;&nbsp;Design</a></h4>
 +
                                    <h4><a href="javascript:void(0);" onclick="naver('Methods')">Methods</a></h4>
 +
                                    <h4><a href="javascript:void(0);" onclick="naver('Results')">Results<a></h4>
 +
                                    <h4><a href="javascript:void(0);" onclick="naver('Conclusion')">Discussion</a></h4>
 +
                                    <h4><a href="javascript:void(0);" onclick="naver('App')">Potential&nbsp;Applications<a></h4>
 +
                                    <ul>
 +
                                        <li><a href="javascript:void(0);" onclick="naver('Cadmium')">Cadmium&nbsp;&amp;&nbsp;Lead&nbsp;Reaper</a></li>
 +
                                        <li><a href="javascript:void(0);" onclick="naver('Visual')">Visualization</a></li>
 +
                                    </ul>
 +
                                </div>
 +
                            </div>
 +
                        </div>
 
                          
 
                          
 
                          
 
                          
Line 284: Line 284:
 
                         <div class="nine columns">
 
                         <div class="nine columns">
 
                              
 
                              
            <a id="Background"></a>
+
                            <a id="Background"></a>
 
                             <div class="texttitle">Background&nbsp;&amp;&nbsp;Design</div>
 
                             <div class="texttitle">Background&nbsp;&amp;&nbsp;Design</div>
 
                             <p>Since we have successfully demonstrated that the bio-functional hydrogel could assemble itself quickly, capture uranyl efficiently and be enriched conveniently, we proposed to combine the features of these experiments in a single trial. We thus incubated triple SpyTag-SUP together with triple SpyTag-mSA and triple SpyCatcher, and contacted the product of crosslinking with simulated pollution. After adsorption, we used a magnet and biotin-coated beads to retrieve the hydrogel, together with its contents of adsorbed uranyl (Fig. 1).</p>
 
                             <p>Since we have successfully demonstrated that the bio-functional hydrogel could assemble itself quickly, capture uranyl efficiently and be enriched conveniently, we proposed to combine the features of these experiments in a single trial. We thus incubated triple SpyTag-SUP together with triple SpyTag-mSA and triple SpyCatcher, and contacted the product of crosslinking with simulated pollution. After adsorption, we used a magnet and biotin-coated beads to retrieve the hydrogel, together with its contents of adsorbed uranyl (Fig. 1).</p>
 
                             <figure>
 
                             <figure>
                                 <img class="featurette-image" src="https://static.igem.org/mediawiki/2016/8/8b/T--Peking--images_FP_fig1.png" style="width:100%;" alt=""/>
+
                                 <p style="text-align:center;"><img style="width:85% ;" src="https://static.igem.org/mediawiki/2016/8/8b/T--Peking--images_FP_fig1.png" alt=""/></p>
                                    <figcaption>Fig. 1.  Conceptual graph of the integrated experiment.
+
                                <figcaption style="text-align:center;">
                                    </figcaption>
+
                                    Fig. 1.  Conceptual graph of the integrated experiment.
 +
                                </figcaption>
 
                             </figure>
 
                             </figure>
 
                              
 
                              
Line 297: Line 298:
 
                              
 
                              
 
                              
 
                              
            <a id="Methods"></a>
+
                            <a id="Methods"></a>
 
                             <div class="texttitle">Methods</div>
 
                             <div class="texttitle">Methods</div>
 
                             <p>We prepared 10μM uranyl nitrate solutions in TBS buffer, as well as in fresh water (sampled from Weiming Lake in Peking University) and seawater (sampled from Qinhuang Island) to simulate real-life pollution.</p>
 
                             <p>We prepared 10μM uranyl nitrate solutions in TBS buffer, as well as in fresh water (sampled from Weiming Lake in Peking University) and seawater (sampled from Qinhuang Island) to simulate real-life pollution.</p>
Line 309: Line 310:
 
                             </div>
 
                             </div>
 
                              
 
                              
 
+
                           
 
                             <br/>
 
                             <br/>
 
                             <br/>
 
                             <br/>
 
                              
 
                              
            <a id="Results"></a>
+
                            <a id="Results"></a>
 
                             <div class="texttitle">Results</div>
 
                             <div class="texttitle">Results</div>
 
                             <p>The statistical analysis of experimental results is shown in Fig.18. Under the circumstances mentioned above, the Uranium Reaper achieved a relatively good adsorption efficiency (51.4% in TBS buffer, 55.8% in seawater and 60.1% in fresh water). </p>
 
                             <p>The statistical analysis of experimental results is shown in Fig.18. Under the circumstances mentioned above, the Uranium Reaper achieved a relatively good adsorption efficiency (51.4% in TBS buffer, 55.8% in seawater and 60.1% in fresh water). </p>
 
                             <figure>
 
                             <figure>
                                 <img class="featurette-image" src="https://static.igem.org/mediawiki/2016/b/b4/T--Peking--images_FP_fig2.png" style="width:100%;" alt=""/>
+
                                 <img class="featurette-image" src="" style="width:100%;" alt=""/>
 
                                 <figcaption>
 
                                 <figcaption>
 +
                                   
 +
                                </figcaption>
 +
                            </figure>
 +
                            <figure>
 +
                                <p style="text-align:center;"><img style="width:55%;" src="https://static.igem.org/mediawiki/2016/b/b4/T--Peking--images_FP_fig2.png" alt=""/></p>
 +
                                <figcaption style="text-align:left;">
 
                                     Fig. 2.  The remaining proportion of 10μM uranyl in TBS buffer, fresh and seawater after treatment with our hydrogel. ****p &lt; 0.0001. n=3. Error bars indicate standard deviations.
 
                                     Fig. 2.  The remaining proportion of 10μM uranyl in TBS buffer, fresh and seawater after treatment with our hydrogel. ****p &lt; 0.0001. n=3. Error bars indicate standard deviations.
 
                                 </figcaption>
 
                                 </figcaption>
 
                             </figure>
 
                             </figure>
 
                              
 
                              
                       
+
                           
                       
+
                           
                        <br/>
+
                            <br/>
                        <br/>
+
                            <br/>
 
+
                           
                       
+
                           
                       
+
                           
            <a id="Conclusion"></a>
+
                            <a id="Conclusion"></a>
            <div class="texttitle">Discussion</div>
+
                            <div class="texttitle">Discussion</div>
            <p>In this integrated experiment, the Uranium Reaper showed an adsorption rate of 60%, which corresponds well to the product of the uranyl adsorption rate and hydrogel recovery rate (90% × 70% = 63%). This result has reached the expectations but is still far removed from the efficiencies that would be needed for an industrial process. Consequently, both the uranyl adsorption and hydrogel recovery rate have to be increased to improve the overall efficiency of the Uranium Reaper, which, of course, requires further research and development.</p>
+
                            <p>In this integrated experiment, the Uranium Reaper showed an adsorption rate of 60%, which corresponds well to the product of the uranyl adsorption rate and hydrogel recovery rate (90% × 70% = 63%). This result has reached the expectations but is still far removed from the efficiencies that would be needed for an industrial process. Consequently, both the uranyl adsorption and hydrogel recovery rate have to be increased to improve the overall efficiency of the Uranium Reaper, which, of course, requires further research and development.</p>
           
+
                           
            <a id="App"></a>
+
                            <a id="App"></a>
            <div class="texttitle">Potential Applications</div>
+
                            <div class="texttitle">Potential Applications</div>
            <h3 class="classic-title"><span> Widening the Potential Applications of Uranium Reaper:  </span> </h3>
+
                            <h3 class="classic-title"><span> Widening the Potential Applications of Uranium Reaper:  </span> </h3>
            <h3 class="classic-title" id="Cadmium">Cadmium and Lead Reaper</h3>
+
                            <h3 class="classic-title" id="Cadmium">Cadmium and Lead Reaper</h3>
            <p class="lead add-bottom" style="color:#5E5656">Due to the modularity of the SpyTag-SpyCatcher covalently cross-linked hydrogel, we could easily replace the SUP fused to the Triple SpyTag module with other proteins of interest, such as Cadmium-Binding Protein (CBP) or Lead-Binding Protein (LBP), and use it to adsorb a variety of other heavy metals. A preliminary result is shown in Fig. 1.</p>
+
                            <p class="lead add-bottom" style="color:#5E5656">Due to the modularity of the SpyTag-SpyCatcher covalently cross-linked hydrogel, we could easily replace the SUP fused to the Triple SpyTag module with other proteins of interest, such as Cadmium-Binding Protein (CBP) or Lead-Binding Protein (LBP), and use it to adsorb a variety of other heavy metals. A preliminary result is shown in Fig. 3.</p>
            <figure>
+
                            <figure>
                <img class="featurette-image" src="https://static.igem.org/mediawiki/2016/c/c8/T--Peking--images_FP_fig3.png" style="width:100%;" alt=""/>
+
                                <img class="featurette-image" src="" style="width:100%;" alt=""/>
                <figcaption>
+
                                <figcaption>
                    Fig. 3. The adsorption of Cd (A) and Pb (B) by modified functional hydrogel based on the Uranium Reaper platform.
+
                                   
                </figcaption>
+
                                </figcaption>
            </figure>
+
                            </figure>
            <p class="lead add-bottom" style="color:#5E5656">We simulated Cd and Pb pollution (10μM) in TBS buffer. Using the same strategy which we have used for uranyl removal, with the 3A-SUP monomer replaced by 3A-CBP or 3A-LBP, about 85% of the Cd 55% of the Pb could be adsorbed, respectively. The results demonstrated that the strategy has great potential for broader metal recovery applications. It is thus necessary to optimize the hydrogel under various conditions.</p>
+
                            <figure>
            <h3 class="classic-title" id="Visual">Visualization</h3>
+
                                <p style="text-align:center;"><img style="width:90% ;" src="https://static.igem.org/mediawiki/2016/c/c8/T--Peking--images_FP_fig3.png" alt=""/></p>
            <p class="lead add-bottom" style="color:#5E5656">We fused mRFP to the Triple SpyTag to make impart color to our hydrogel (Fig.2).</p>
+
                                <figcaption style="text-align:left;">
            <figure>
+
                                    Fig. 3. The adsorption of Cd (A) and Pb (B) by modified functional hydrogel based on the Uranium Reaper platform.
                <img class="featurette-image" src="https://static.igem.org/mediawiki/2016/4/48/T--Peking--images_FP_fig4.png" style="width:100%;" alt=""/>
+
                                </figcaption>
                <figcaption>
+
                            </figure>
                    Fig. 2. Left: Crosslinking of Triple SpyTag-mRFP and Triple SpyCatcher at high concentrations, showing gel formation. Right: Triple SpyTag-mRFP monomer solution (negative control).
+
                            <p class="lead add-bottom" style="color:#5E5656">We simulated Cd and Pb pollution (10μM) in TBS buffer. Using the same strategy which we have used for uranyl removal, with the 3A-SUP monomer replaced by 3A-CBP or 3A-LBP, about 85% of the Cd 55% of the Pb could be adsorbed, respectively. The results demonstrated that the strategy has great potential for broader metal recovery applications. It is thus necessary to optimize the hydrogel under various conditions.</p>
                </figcaption>
+
                            <h3 class="classic-title" id="Visual">Visualization</h3>
            </figure>
+
                            <p class="lead add-bottom" style="color:#5E5656">We fused mRFP to the Triple SpyTag to make impart color to our hydrogel (Fig.4).</p>
            <p class="lead add-bottom" style="color:#5E5656">When the SUP module in the Triple SpyTag-SUP monomer was changed to mRFP, a red-colored gel was formed (Fig 2. left), and by crosslinking proteins at higher concentrations, we could get a relatively stable gel structure. This attribute of the hydrogel promises a literally colorful future in artistic creation, with potential applications in 3D printing.</p>
+
                            <figure>
           
+
                                <p style="text-align:center;"><img style="width:80% ;" src="https://static.igem.org/mediawiki/2016/4/48/T--Peking--images_FP_fig4.png" alt=""/></p>
                       
+
                                <figcaption style="text-align:left;">
                       
+
                                    Fig. 4. Left: Crosslinking of Triple SpyTag-mRFP and Triple SpyCatcher at high concentrations, showing gel formation. Right: Triple SpyTag-mRFP monomer solution (negative control).
                       
+
                                </figcaption>
                       
+
                            </figure>
                   
+
                            <p class="lead add-bottom" style="color:#5E5656">When the SUP module in the Triple SpyTag-SUP monomer was changed to mRFP, a red-colored gel was formed (Fig 2. left), and by crosslinking proteins at higher concentrations, we could get a relatively stable gel structure. This attribute of the hydrogel promises a literally colorful future in artistic creation, with potential applications in 3D printing.</p>
 
+
                           
 +
                           
 +
                           
 +
                           
 +
                           
 +
                           
 +
                           
 
                         </div><!--9 columns end-->
 
                         </div><!--9 columns end-->
 
                          
 
                          

Revision as of 04:08, 17 October 2016

Proof

Integrated experiment

Background & Design

Since we have successfully demonstrated that the bio-functional hydrogel could assemble itself quickly, capture uranyl efficiently and be enriched conveniently, we proposed to combine the features of these experiments in a single trial. We thus incubated triple SpyTag-SUP together with triple SpyTag-mSA and triple SpyCatcher, and contacted the product of crosslinking with simulated pollution. After adsorption, we used a magnet and biotin-coated beads to retrieve the hydrogel, together with its contents of adsorbed uranyl (Fig. 1).

Fig. 1. Conceptual graph of the integrated experiment.


Methods

We prepared 10μM uranyl nitrate solutions in TBS buffer, as well as in fresh water (sampled from Weiming Lake in Peking University) and seawater (sampled from Qinhuang Island) to simulate real-life pollution.

After mixing of 5mg/mL solutions of triple SpyTag-SUP, triple SpyTag-mSA and triple SpyCatcher, each, in a volume ratio of 1:1:2, and subsequent incubation for 1h, we were able to obtain the dual-function crosslinked hydrogel encompassing both uranium adsorption and hydrogel clearance functions.

The protein hydrogel was added into the polluted solution and the mixture shaken on a swing bed for 1min, after which the solution was contacted with a suspension of biotin-coated beads (10mg/ml) at a volume ratio of 5:1 (reaction system: beads), and shaken for 1h to ensure good contact between the protein and the beads. Finally, the beads were immobilized using a magnetic shelf, and the uranyl ion concentration in the supernatant was measured using the Arsenazo III assay.

Learn more:



Results

The statistical analysis of experimental results is shown in Fig.18. Under the circumstances mentioned above, the Uranium Reaper achieved a relatively good adsorption efficiency (51.4% in TBS buffer, 55.8% in seawater and 60.1% in fresh water).

Fig. 2. The remaining proportion of 10μM uranyl in TBS buffer, fresh and seawater after treatment with our hydrogel. ****p < 0.0001. n=3. Error bars indicate standard deviations.


Discussion

In this integrated experiment, the Uranium Reaper showed an adsorption rate of 60%, which corresponds well to the product of the uranyl adsorption rate and hydrogel recovery rate (90% × 70% = 63%). This result has reached the expectations but is still far removed from the efficiencies that would be needed for an industrial process. Consequently, both the uranyl adsorption and hydrogel recovery rate have to be increased to improve the overall efficiency of the Uranium Reaper, which, of course, requires further research and development.

Potential Applications

Widening the Potential Applications of Uranium Reaper:

Cadmium and Lead Reaper

Due to the modularity of the SpyTag-SpyCatcher covalently cross-linked hydrogel, we could easily replace the SUP fused to the Triple SpyTag module with other proteins of interest, such as Cadmium-Binding Protein (CBP) or Lead-Binding Protein (LBP), and use it to adsorb a variety of other heavy metals. A preliminary result is shown in Fig. 3.

Fig. 3. The adsorption of Cd (A) and Pb (B) by modified functional hydrogel based on the Uranium Reaper platform.

We simulated Cd and Pb pollution (10μM) in TBS buffer. Using the same strategy which we have used for uranyl removal, with the 3A-SUP monomer replaced by 3A-CBP or 3A-LBP, about 85% of the Cd 55% of the Pb could be adsorbed, respectively. The results demonstrated that the strategy has great potential for broader metal recovery applications. It is thus necessary to optimize the hydrogel under various conditions.

Visualization

We fused mRFP to the Triple SpyTag to make impart color to our hydrogel (Fig.4).

Fig. 4. Left: Crosslinking of Triple SpyTag-mRFP and Triple SpyCatcher at high concentrations, showing gel formation. Right: Triple SpyTag-mRFP monomer solution (negative control).

When the SUP module in the Triple SpyTag-SUP monomer was changed to mRFP, a red-colored gel was formed (Fig 2. left), and by crosslinking proteins at higher concentrations, we could get a relatively stable gel structure. This attribute of the hydrogel promises a literally colorful future in artistic creation, with potential applications in 3D printing.