Difference between revisions of "Team:Tsinghua"

 
(61 intermediate revisions by 2 users not shown)
Line 47: Line 47:
 
      
 
      
 
     <link rel="stylesheet" type="text/css" href="https://2019.igem.org/wiki/index.php?title=Team:Tsinghua/css/remodal-default-theme.css&action=raw&ctype=text/css" >
 
     <link rel="stylesheet" type="text/css" href="https://2019.igem.org/wiki/index.php?title=Team:Tsinghua/css/remodal-default-theme.css&action=raw&ctype=text/css" >
 +
    <style>
 +
        *{margin:0;padding:0;}
 +
        .box{height:1px;width:1%;background:#ccc;}
 +
        .progress{position:fixed;top:1rem; z-index:9999;height:5px;background-image: linear-gradient(to right, rgb(252, 141, 15),rgb(14, 178, 243));}
 +
    </style>
 
</head>  
 
</head>  
 
<body data-spy="scroll" data-target=".inner-link" data-offset="60">
 
<body data-spy="scroll" data-target=".inner-link" data-offset="60">
Line 58: Line 63:
 
             </div>
 
             </div>
 
         </div>
 
         </div>
−
         <div class="znav-container znav-transparent mt-4" id="znav-container">
+
         <div class="sticky-lg-top pt-4" style="z-index: 1000;">
−
             <div class="container">
+
            <div style="background: rgba(30, 30, 30, 0.936);position: absolute; width: 100%; height: 10rem;top:-3.2rem;"></div>
 +
             <div class="znav-container znav-transparent sticky-lg-top pt-4 mt-0" id="znav-container" style="left:10%">
 
                  
 
                  
−
                 <nav class="navbar navbar-expand-lg">
+
                 <div class="container">
−
                    <a class="navbar-brand overflow-hidden pr-3 fs-3" href="https://2019.igem.org/Team:Tsinghua">iGEM
+
                    <img src="https://static.igem.org/mediawiki/2019/b/be/T--Tsinghua--logo.png" style="width: 8%;position: absolute;left: -6%;">
−
                        <span class="d-none d-lg-inline-block">Tsinghua</span>
+
                    <nav class="navbar navbar-expand-lg">
−
                    </a>
+
                       
−
                    <!-- <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
+
                        <a class="navbar-brand overflow-hidden pr-3 fs-3" href="https://2019.igem.org/Team:Tsinghua">
−
                        <div class="hamburger hamburger--emphatic">
+
                           
−
                            <div class="hamburger-box">
+
                            iGEM
−
                                <div class="hamburger-inner"></div>
+
                            <span class="d-none d-lg-inline-block">Tsinghua</span>
−
                                  
+
                        </a>
 +
                        <!-- <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
 +
                            <div class="hamburger hamburger--emphatic">
 +
                                <div class="hamburger-box">
 +
                                    <div class="hamburger-inner"></div>
 +
                                   
 +
                                 </div>
 
                             </div>
 
                             </div>
−
                         </div>
+
                         </button> -->
−
                    </button> -->
+
                        <div class="collapse navbar-collapse" id="navbarNavDropdown">
−
                    <div class="collapse navbar-collapse" id="navbarNavDropdown">
+
                            <ul class="navbar-nav font-2 fs-1">
−
                        <ul class="navbar-nav font-2 fs-1">
+
                                <li>
−
                            <li>
+
                                    <a href="https://2019.igem.org/Team:Tsinghua"><span class="fa fa-home"></span> Home</a>
−
                                <a href="https://2019.igem.org/Team:Tsinghua"><span class="fa fa-home"></span> Home</a>
+
                                   
 +
                                </li>
 +
                                <li>
 +
                                    <a href="JavaScript:void(0)"><span class="fa fa-group"></span> Team</a>
 +
                                    <ul class="dropdown fs-0">
 +
                                        <li>
 +
                                            <a href="https://2019.igem.org/Team:Tsinghua/Team">Members</a>
 +
                                        </li> 
 +
                                        <li>
 +
                                            <a href="https://2019.igem.org/Team:Tsinghua/Collaborations">Collaborations</a>
 +
                                        </li>
 +
                                        <li>
 +
                                            <a href="https://2019.igem.org/Team:Tsinghua/Notebook">Notebook</a>
 +
                                        </li>
 +
                                       
 +
                                        <li>
 +
                                            <a href="https://2019.igem.org/Team:Tsinghua/Attributions">Attributions</a>
 +
                                        </li>
 +
                                        <li>
 +
                                            <a href="https://2019.igem.org/Team:Tsinghua/Design">Design</a>
 +
                                        </li>
 +
                                    </ul>
 +
                                </li>
 +
                                <li>
 +
                                    <a href="JavaScript:void(0)"><span class="fa fa-flask"></span> Project</a>
 +
                                    <ul class="dropdown fs-0">
 +
                                        <li>
 +
                                            <a href="https://2019.igem.org/Team:Tsinghua/Description">Description</a>
 +
                                        </li>
 +
                                        <li>
 +
                                            <a href="https://2019.igem.org/Team:Tsinghua/Experiments">Experiments</a>
 +
                                        </li>
 +
                                        <li>
 +
                                            <a href="https://2019.igem.org/Team:Tsinghua/Demonstrate">Results</a>
 +
                                        </li>
 +
                                        <li>
 +
                                            <a href="https://2019.igem.org/Team:Tsinghua/Measurement">Measurement</a>
 +
                                        </li>
 +
                                       
 +
                                    </ul>
 +
                                </li>
 +
                                <li>
 +
                                    <a href="JavaScript:void(0)"><span class="fa fa-cube"></span> Model</a>
 +
                                    <ul class="dropdown fs-0">
 +
                                        <li>
 +
                                            <a href="https://2019.igem.org/Team:Tsinghua/Model">Part I</a>
 +
                                        </li>
 +
                                        <li>
 +
                                            <a href="https://2019.igem.org/Team:Tsinghua/Model2">Part II</a>
 +
                                        </li>
 +
                                        <li>
 +
                                            <a href="https://2019.igem.org/Team:Tsinghua/Model3">Part III</a>
 +
                                        </li>
 +
                                    </ul>
 +
                                </li>
 +
                                <li>
 +
                                    <a href="JavaScript:void(0)"><span class="fa fa-gears"></span> Parts</a>
 +
                                    <ul class="dropdown fs-0">
 +
                                        <li>
 +
                                            <a href="https://2019.igem.org/Team:Tsinghua/Improvement">Improvement</a>
 +
                                        </li>
 +
                                        <li>
 +
                                            <a href="https://2019.igem.org/Team:Tsinghua/Characterization">Characterization</a>
 +
                                        </li>
 +
                                       
 +
                                        <li>
 +
                                            <a href="https://2019.igem.org/Team:Tsinghua/Chart">Chart Form</a>
 +
                                        </li>
 +
                                    </ul>
 +
                                </li>
 
                                  
 
                                  
−
                            </li>
+
                                <li>
−
                            <li>
+
                                    <a href="JavaScript:void(0)"><span class="fa fa-male"></span> Human Practices</a>
−
                                <a href="JavaScript:void(0)">Team</a>
+
                                     <ul class="dropdown fs-0">
−
                                <ul class="dropdown fs-0">
+
                                        <li>
−
                                    <li>
+
                                            <a href="https://2019.igem.org/Team:Tsinghua/Human_Practices">General</a>
−
                                        <a href="https://2019.igem.org/Team:Tsinghua/Team">Members</a>
+
                                        </li>
−
                                     </li> 
+
                                          
−
                                    <li>
+
                                         <li>
−
                                        <a href="https://2019.igem.org/Team:Tsinghua/Collaborations">Collaborations</a>
+
                                            <a href="https://2019.igem.org/Team:Tsinghua/Integrated">Integrated</a>
−
                                    </li>
+
                                         </li>
−
                                    <li>
+
                                         <li>
−
                                        <a href="https://2019.igem.org/Team:Tsinghua/Notebook">Notebook</a>
+
                                            <a href="https://2019.igem.org/Team:Tsinghua/Safety">Safety</a>
−
                                    </li>
+
                                         </li>
−
                                   
+
                                          
−
                                    <li>
+
                                     </ul>
−
                                        <a href="https://2019.igem.org/Team:Tsinghua/Attributions">Attributions</a>
+
                                 </li>
−
                                    </li>
+
                             </ul>
−
                                    <li>
+
−
                                        <a href="https://2019.igem.org/Team:Tsinghua/Design">Attributions</a>
+
−
                                    </li>
+
−
                                </ul>
+
−
                            </li>
+
−
                            <li>
+
−
                                <a href="JavaScript:void(0)">Project</a>
+
−
                                <ul class="dropdown fs-0">
+
−
                                    <li>
+
−
                                        <a href="https://2019.igem.org/Team:Tsinghua/Description">Description</a>
+
−
                                    </li>
+
−
                                    <li>
+
−
                                         <a href="https://2019.igem.org/Team:Tsinghua/Experiments">Experiments</a>
+
−
                                    </li>
+
−
                                    <li>
+
−
                                         <a href="https://2019.igem.org/Team:Tsinghua/Demonstrate">Results</a>
+
−
                                    </li>
+
−
                                   
+
−
                                </ul>
+
−
                            </li>
+
−
                            <li>
+
−
                                <a href="JavaScript:void(0)">Model</a>
+
−
                                <ul class="dropdown fs-0">
+
−
                                    <li>
+
−
                                        <a href="https://2019.igem.org/Team:Tsinghua/Model">Part I</a>
+
−
                                    </li>
+
−
                                    <li>
+
−
                                         <a href="https://2019.igem.org/Team:Tsinghua/Model2">Part II</a>
+
−
                                    </li>
+
−
                                    <li>
+
−
                                         <a href="https://2019.igem.org/Team:Tsinghua/Model3">Part III</a>
+
−
                                    </li>
+
−
                                </ul>
+
−
                            </li>
+
−
                            <li>
+
−
                                <a href="JavaScript:void(0)">Parts</a>
+
−
                                <ul class="dropdown fs-0">
+
−
                                    <li>
+
−
                                        <a href="https://2019.igem.org/Team:Tsinghua/Improvement">Improvement</a>
+
−
                                    </li>
+
−
                                    <li>
+
−
                                         <a href="https://2019.igem.org/Team:Tsinghua/Composite">Composite</a>
+
−
                                    </li>
+
−
                                   
+
−
                                    <li>
+
−
                                         <a href="https://2019.igem.org/Team:Tsinghua/Basic">Basic Part</a>
+
−
                                     </li>
+
−
                                 </ul>
+
−
                             </li>
+
 
                              
 
                              
−
                            <li>
+
                         </div>
−
                                <a href="JavaScript:void(0)">Human Practices</a>
+
−
                                <ul class="dropdown fs-0">
+
−
                                    <li>
+
−
                                        <a href="https://2019.igem.org/Team:Tsinghua/Human_Practices">Overview</a>
+
−
                                    </li>
+
−
                                    <li>
+
−
                                        <a href="https://2019.igem.org/Team:Tsinghua/General">General</a>
+
−
                                    </li>
+
−
                                    <li>
+
−
                                        <a href="https://2019.igem.org/Team:Tsinghua/Integrated">Integrated</a>
+
−
                                    </li>
+
−
                                    <li>
+
−
                                        <a href="https://2019.igem.org/Team:Tsinghua/Safety">Safety</a>
+
−
                                    </li>
+
−
                                   
+
−
                                </ul>
+
−
                            </li>
+
−
                         </ul>
+
 
                          
 
                          
−
                     </div>
+
                     </nav>
 
                      
 
                      
−
                 </nav>
+
                 </div>
−
               
+
 
             </div>
 
             </div>
 
         </div>
 
         </div>
−
       
 
 
         <div class="flexslider flexslider-simple h-box parallax">
 
         <div class="flexslider flexslider-simple h-box parallax">
 
             <div id="whiteMask"><a href="#afterwhiteMask">
 
             <div id="whiteMask"><a href="#afterwhiteMask">
Line 185: Line 197:
 
                         <div class="container">
 
                         <div class="container">
 
                             <a class="down-indicator" href="#target-down-indicator"></a>
 
                             <a class="down-indicator" href="#target-down-indicator"></a>
−
                             <div class="row align-items-center py-8 parallax h-box" data-inertia='{"weight":1.5}' data-rellax-speed="2">
+
                             <div class="row align-items-center py-8 parallax h-box" data-inertia='{"weight":1.5}' data-rellax-speed="2" style="position: static;">
 
                                 <div class="col">
 
                                 <div class="col">
 
                                     <div class="overflow-hidden">
 
                                     <div class="overflow-hidden">
Line 194: Line 206:
 
                                          
 
                                          
 
                                     </div>
 
                                     </div>
−
                                     <div class="overflow-hidden">
+
                                      
−
                                       
+
−
                                        <a class="video-modal btn btn-primary color-white" href="https://cloud.tsinghua.edu.cn/d/9fdab2b92ab0486b980b/" data-start="16" data-end="168" style="text-decoration: dotted;">
+
−
                                            <h6 class="text-uppercase color-white fs--1 fs-lg-0 font-2 ls" data-zanim='{"delay":0.2}'>Download Video</h6>
+
−
                                        </a>
+
−
                                        <a class="video-modal btn btn-primary color-white" href="https://2019.igem.org/File:T--Tsinghua--video1.mp4" data-start="34" data-end="345" style="text-decoration: dotted;">
+
−
                                            <h6 class="text-uppercase color-white fs--1 fs-lg-0 font-2 ls" data-zanim='{"delay":0.2}'>Watch Video</h6>
+
−
                                        </a>
+
−
                                       
+
−
                                       
+
−
                                    </div>
+
 
                                 </div>
 
                                 </div>
 
                             </div>
 
                             </div>
Line 218: Line 220:
 
                         <div class="container">
 
                         <div class="container">
 
                             <a class="down-indicator" href="#target-down-indicator"></a>
 
                             <a class="down-indicator" href="#target-down-indicator"></a>
−
                             <div class="row align-items-center py-8 parallax h-box" data-inertia='{"weight":1.5}' data-rellax-speed="2">
+
                             <div class="row align-items-center py-8 parallax h-box" data-inertia='{"weight":1.5}' data-rellax-speed="2" style="position: static;">
 
                                 <div class="col">
 
                                 <div class="col">
 
                                     <div class="overflow-hidden">
 
                                     <div class="overflow-hidden">
Line 227: Line 229:
 
                                          
 
                                          
 
                                     </div>
 
                                     </div>
−
                                     <div class="overflow-hidden">
+
                                      
−
                                       
+
−
                                        <a class="video-modal btn btn-primary color-white" href="https://cloud.tsinghua.edu.cn/d/9fdab2b92ab0486b980b/" data-start="16" data-end="168" style="text-decoration: dotted;">
+
−
                                            <h6 class="text-uppercase color-white fs--1 fs-lg-0 font-2 ls" data-zanim='{"delay":0.2}'>Download Video</h6>
+
−
                                        </a>
+
−
                                        <a class="video-modal btn btn-primary color-white" href="https://2019.igem.org/File:T--Tsinghua--video1.mp4" data-start="34" data-end="345" style="text-decoration: dotted;">
+
−
                                            <h6 class="text-uppercase color-white fs--1 fs-lg-0 font-2 ls" data-zanim='{"delay":0.2}'>Watch Video</h6>
+
−
                                        </a>
+
−
                                       
+
−
                                       
+
−
                                    </div>
+
 
                                 </div>
 
                                 </div>
 
                             </div>
 
                             </div>
Line 251: Line 243:
 
                         <div class="container">
 
                         <div class="container">
 
                             <a class="down-indicator" href="#target-down-indicator"></a>
 
                             <a class="down-indicator" href="#target-down-indicator"></a>
−
                             <div class="row align-items-center py-8 parallax h-box" data-inertia='{"weight":1.5}' data-rellax-speed="2">
+
                             <div class="row align-items-center py-8 parallax h-box" data-inertia='{"weight":1.5}' data-rellax-speed="2" style="position: static;">
 
                                 <div class="col">
 
                                 <div class="col">
 
                                     <div class="overflow-hidden">
 
                                     <div class="overflow-hidden">
Line 260: Line 252:
 
                                          
 
                                          
 
                                     </div>
 
                                     </div>
−
                                     <div class="overflow-hidden">
+
                                      
−
                                       
+
−
                                        <a class="video-modal btn btn-primary color-white" href="https://cloud.tsinghua.edu.cn/d/9fdab2b92ab0486b980b/" data-start="16" data-end="168" style="text-decoration: dotted;">
+
−
                                            <h6 class="text-uppercase color-white fs--1 fs-lg-0 font-2 ls" data-zanim='{"delay":0.2}'>Download Video</h6>
+
−
                                        </a>
+
−
                                        <a class="video-modal btn btn-primary color-white" href="https://2019.igem.org/File:T--Tsinghua--video1.mp4" data-start="34" data-end="345" style="text-decoration: dotted;">
+
−
                                            <h6 class="text-uppercase color-white fs--1 fs-lg-0 font-2 ls" data-zanim='{"delay":0.2}'>Watch Video</h6>
+
−
                                        </a>
+
−
                                       
+
−
                                       
+
−
                                    </div>
+
 
                                 </div>
 
                                 </div>
 
                             </div>
 
                             </div>
Line 284: Line 266:
 
                         <div class="container">
 
                         <div class="container">
 
                             <a class="down-indicator" href="#target-down-indicator"></a>
 
                             <a class="down-indicator" href="#target-down-indicator"></a>
−
                             <div class="row align-items-center py-8 parallax h-box" data-inertia='{"weight":1.5}' data-rellax-speed="2">
+
                             <div class="row align-items-center py-8 parallax h-box" data-inertia='{"weight":1.5}' data-rellax-speed="2" style="position: static;">
 
                                 <div class="col">
 
                                 <div class="col">
 
                                     <div class="overflow-hidden">
 
                                     <div class="overflow-hidden">
Line 293: Line 275:
 
                                          
 
                                          
 
                                     </div>
 
                                     </div>
−
                                     <div class="overflow-hidden">
+
                                      
−
                                       
+
−
                                        <a class="video-modal btn btn-primary color-white" href="https://cloud.tsinghua.edu.cn/d/9fdab2b92ab0486b980b/" data-start="16" data-end="168" style="text-decoration: dotted;">
+
−
                                            <h6 class="text-uppercase color-white fs--1 fs-lg-0 font-2 ls" data-zanim='{"delay":0.2}'>Download Video</h6>
+
−
                                        </a>
+
−
                                        <a class="video-modal btn btn-primary color-white" href="https://2019.igem.org/File:T--Tsinghua--video1.mp4" data-start="34" data-end="345" style="text-decoration: dotted;">
+
−
                                            <h6 class="text-uppercase color-white fs--1 fs-lg-0 font-2 ls" data-zanim='{"delay":0.2}'>Watch Video</h6>
+
−
                                        </a>
+
−
                                       
+
−
                                       
+
−
                                    </div>
+
 
                                 </div>
 
                                 </div>
 
                             </div>
 
                             </div>
Line 317: Line 289:
 
                         <div class="container">
 
                         <div class="container">
 
                             <a class="down-indicator" href="#target-down-indicator"></a>
 
                             <a class="down-indicator" href="#target-down-indicator"></a>
−
                             <div class="row align-items-center py-8 parallax h-box" data-inertia='{"weight":1.5}' data-rellax-speed="2">
+
                             <div class="row align-items-center py-8 parallax h-box" data-inertia='{"weight":1.5}' data-rellax-speed="2" style="position: static;">
−
                                 <div class="col">
+
                                 <div class="col">  
 
                                     <div class="overflow-hidden">
 
                                     <div class="overflow-hidden">
 
                                         <h4 class="color-white fs-4 fs-lg-7" data-zanim='{"delay":0.1}'>PhASE | Photo-Activated Switch in <i>E.coli</i></h4>
 
                                         <h4 class="color-white fs-4 fs-lg-7" data-zanim='{"delay":0.1}'>PhASE | Photo-Activated Switch in <i>E.coli</i></h4>
Line 326: Line 298:
 
                                          
 
                                          
 
                                     </div>
 
                                     </div>
−
                                     <div class="overflow-hidden">
+
                                      
−
                                       
+
−
                                        <a class="video-modal btn btn-primary color-white" href="https://cloud.tsinghua.edu.cn/d/9fdab2b92ab0486b980b/" data-start="16" data-end="168" style="text-decoration: dotted;">
+
−
                                            <h6 class="text-uppercase color-white fs--1 fs-lg-0 font-2 ls" data-zanim='{"delay":0.2}'>Download Video</h6>
+
−
                                        </a>
+
−
                                        <a class="video-modal btn btn-primary color-white" href="https://2019.igem.org/File:T--Tsinghua--video1.mp4" data-start="34" data-end="345" style="text-decoration: dotted;">
+
−
                                            <h6 class="text-uppercase color-white fs--1 fs-lg-0 font-2 ls" data-zanim='{"delay":0.2}'>Watch Video</h6>
+
−
                                        </a>
+
−
                                       
+
−
                                       
+
−
                                    </div>
+
 
                                 </div>
 
                                 </div>
 
                             </div>
 
                             </div>
Line 350: Line 312:
 
                         <div class="container">
 
                         <div class="container">
 
                             <a class="down-indicator" href="#target-down-indicator"></a>
 
                             <a class="down-indicator" href="#target-down-indicator"></a>
−
                             <div class="row align-items-center py-8 parallax h-box" data-inertia='{"weight":1.5}' data-rellax-speed="2">
+
                             <div class="row align-items-center py-8 parallax h-box" data-inertia='{"weight":1.5}' data-rellax-speed="2" style="position: static;">
 
                                 <div class="col">
 
                                 <div class="col">
 
                                     <div class="overflow-hidden">
 
                                     <div class="overflow-hidden">
Line 359: Line 321:
 
                                          
 
                                          
 
                                     </div>
 
                                     </div>
−
                                     <div class="overflow-hidden">
+
                                      
−
                                       
+
−
                                        <a class="video-modal btn btn-primary color-white" href="https://cloud.tsinghua.edu.cn/d/9fdab2b92ab0486b980b/" data-start="16" data-end="168" style="text-decoration: dotted;">
+
−
                                            <h6 class="text-uppercase color-white fs--1 fs-lg-0 font-2 ls" data-zanim='{"delay":0.2}'>Download Video</h6>
+
−
                                        </a>
+
−
                                        <a class="video-modal btn btn-primary color-white" href="https://2019.igem.org/File:T--Tsinghua--video1.mp4" data-start="34" data-end="345" style="text-decoration: dotted;">
+
−
                                            <h6 class="text-uppercase color-white fs--1 fs-lg-0 font-2 ls" data-zanim='{"delay":0.2}'>Watch Video</h6>
+
−
                                        </a>
+
−
                                       
+
−
                                       
+
−
                                    </div>
+
 
                                 </div>
 
                                 </div>
 
                             </div>
 
                             </div>
Line 382: Line 334:
 
         <section class="text-center text-lg-left py-9 background-white">
 
         <section class="text-center text-lg-left py-9 background-white">
 
             <div id="highlight_head">
 
             <div id="highlight_head">
−
                 <div style="position: absolute;top:180px;left:16%;height: 200px;width: 25px;background-image:linear-gradient(to bottom, rgb(252, 106, 8), rgb(0, 162, 255));">
+
               
−
                      
+
                 <div style="width:100hv">
 +
                    <img src="https://static.igem.org/mediawiki/2019/8/89/T--Tsinghua--abstract.gif">
 +
                     <div style="height: 90px;"></div>
 
                 </div>
 
                 </div>
−
                 <p style="position: relative; top: 0px; font-size:35px; text-indent: 60px; left: 20%; width: 60%; word-spacing: 15px;">
+
                  
−
                    In order to precisely control the velocity of biochemical reactions, we applied phase separation system coupled with light induction in E.coli.
+
−
                </p>
+
−
                <div style="height: 90px;"></div>
+
 
             </div>
 
             </div>
 
             <div style="height: 10px;"></div>
 
             <div style="height: 10px;"></div>
 +
            <div class = 'row index_para'>
 +
                <div class="col-4"></div>
 +
                <div class="col-1">
 +
                    <a class="video-modal" href="https://vimeo.com/367596666" data-start="16" data-end="168">
 +
                        <button style="background-image: linear-gradient(to right, #2f80ed, #56ccf2);">Watch Video</button>
 +
                    </a>       
 +
                </div>
 +
                <div class="col-1"></div>
 +
                <button style="background-image: linear-gradient(to right, #ff4b1f, #ff9068);" onclick="window.location.href='https://cloud.tsinghua.edu.cn/d/9fdab2b92ab0486b980b/'">Download Video</button>
 +
                <div class="col-4"></div>
 +
            </div>
 +
            <div style="height: 30px;"></div>
 
             <div style="height:1px; width:100%; background: black;"></div>
 
             <div style="height:1px; width:100%; background: black;"></div>
 
             <div style="height: 20px;"></div>
 
             <div style="height: 20px;"></div>
 +
           
 
             <div>
 
             <div>
 
                  
 
                  
Line 409: Line 373:
 
                         <div class="index_para" style="width: 90%;"><h1>Phase separation system</h1>
 
                         <div class="index_para" style="width: 90%;"><h1>Phase separation system</h1>
 
                             <p class="fs-3" style="margin: 1cm 0 1cm 0; text-indent: 1cm; text-align: justify;">We constructed the first artificial phase separation system ever in prokaryotes. These droplets in E.coli exhibit similar spherical shape and high fluidity as they were in eukaryotes. By creating membraneless organelles in a cell, phases could realize the redistribution of various targets, including proteins and small organic molecules.</p>
 
                             <p class="fs-3" style="margin: 1cm 0 1cm 0; text-indent: 1cm; text-align: justify;">We constructed the first artificial phase separation system ever in prokaryotes. These droplets in E.coli exhibit similar spherical shape and high fluidity as they were in eukaryotes. By creating membraneless organelles in a cell, phases could realize the redistribution of various targets, including proteins and small organic molecules.</p>
−
                             <button style="background-image: linear-gradient(to right, #2f80ed,#56ccf2);" onclick="window.location.href='https://2019.igem.org/Team:Tsinghua/Demonstrate'">Read more</button>
+
                             <button style="background-image: linear-gradient(to right, #2f80ed,#56ccf2);" onclick="window.location.href='https://2019.igem.org/Team:Tsinghua/Demonstrate#result1-1'">Read more</button>
 
                         </div>
 
                         </div>
 
                          
 
                          
Line 424: Line 388:
 
                         <div class="index_para" style="width: 100%;"><h1>Photo-activated switch</h1>
 
                         <div class="index_para" style="width: 100%;"><h1>Photo-activated switch</h1>
 
                             <p class="fs-3" style="margin: 1cm 0 1cm 0; text-indent: 1cm;text-align: justify;">We use laser as a switch to control our system in a high spatial-temporal resolution. Within a few seconds, target proteins would redistribute into existing phases. After incubated in dark for several minutes, targets can reverse to previous smear state.</p>
 
                             <p class="fs-3" style="margin: 1cm 0 1cm 0; text-indent: 1cm;text-align: justify;">We use laser as a switch to control our system in a high spatial-temporal resolution. Within a few seconds, target proteins would redistribute into existing phases. After incubated in dark for several minutes, targets can reverse to previous smear state.</p>
−
                             <button style="background-image: linear-gradient(to right, #fbc7d4, #9796f0);" onclick="window.location.href='https://2019.igem.org/Team:Tsinghua/Demonstrate'">Read more</button>
+
                             <button style="background-image: linear-gradient(to right, #fbc7d4, #9796f0);" onclick="window.location.href='https://2019.igem.org/Team:Tsinghua/Demonstrate#result2-1'">Read more</button>
 
                         </div>
 
                         </div>
 
                          
 
                          
Line 463: Line 427:
 
                         <div class="index_para" style="width: 90%;"><h1>Downstream reactions</h1>
 
                         <div class="index_para" style="width: 90%;"><h1>Downstream reactions</h1>
 
                             <p class="fs-3" style="margin: 1cm 0 1cm 0; text-indent: 1cm;text-align: justify;">Enzymes of proper size could be recruited into phases by using photo-activated switch. Selecting substrates of proper solubility according to our model, we realized the regulation of enzymatic reactions.</p>
 
                             <p class="fs-3" style="margin: 1cm 0 1cm 0; text-indent: 1cm;text-align: justify;">Enzymes of proper size could be recruited into phases by using photo-activated switch. Selecting substrates of proper solubility according to our model, we realized the regulation of enzymatic reactions.</p>
−
                             <button style="background-image: linear-gradient(to right, #ffe259,#ffa751);" onclick="window.location.href='https://2019.igem.org/Team:Tsinghua/Demonstrate'">Read more</button>
+
                             <button style="background-image: linear-gradient(to right, #ffe259,#ffa751);" onclick="window.location.href='https://2019.igem.org/Team:Tsinghua/Demonstrate#result3-1'">Read more</button>
 
                         </div>
 
                         </div>
 
                          
 
                          
Line 502: Line 466:
 
                         <div class="index_para" style="width: 90%;"><h1>More possibilities</h1>
 
                         <div class="index_para" style="width: 90%;"><h1>More possibilities</h1>
 
                             <p class="fs-3" style="margin: 1cm 0 1cm 0; text-indent: 1cm;text-align: justify;">Upon introducing this powerful tool in E.coli, there are much more prosperous applications waiting to be developed. We propose that by isolating specific material in phase, a uniform E.coli colony could grow into a society with cell differentiation.</p>
 
                             <p class="fs-3" style="margin: 1cm 0 1cm 0; text-indent: 1cm;text-align: justify;">Upon introducing this powerful tool in E.coli, there are much more prosperous applications waiting to be developed. We propose that by isolating specific material in phase, a uniform E.coli colony could grow into a society with cell differentiation.</p>
−
                             <button style="background-image: linear-gradient(to left, #a8ff78,#78ffd6);" onclick="window.location.href='https://2019.igem.org/Team:Tsinghua/Results'">Read more</button>
+
                             <button style="background-image: linear-gradient(to left, #a8ff78,#78ffd6);" onclick="window.location.href='https://2019.igem.org/Team:Tsinghua/Demonstrate#result4'">Read more</button>
 
                         </div>
 
                         </div>
 
                          
 
                          
Line 525: Line 489:
 
                         <div class="index_para" style="width: 84%;"><h1>Hardware</h1>
 
                         <div class="index_para" style="width: 84%;"><h1>Hardware</h1>
 
                             <p class="fs-3" style="margin: 1cm 0 1cm 0; text-indent: 1cm;text-align: justify;">Depending on the manner of reversible amplification in phase, specific proteins can be used to create a biological register. Responding to laser stimulation, the distribution of fluorescence proteins would change, resulting in the variation in FRET signal, which can be detected by fluorescence reader.</p>
 
                             <p class="fs-3" style="margin: 1cm 0 1cm 0; text-indent: 1cm;text-align: justify;">Depending on the manner of reversible amplification in phase, specific proteins can be used to create a biological register. Responding to laser stimulation, the distribution of fluorescence proteins would change, resulting in the variation in FRET signal, which can be detected by fluorescence reader.</p>
−
                             <button style="background-image: linear-gradient(to right, #74ebd5,#acb6e5);" onclick="window.location.href='https://2019.igem.org/Team:Tsinghua/Results'">Read more</button>
+
                             <button style="background-image: linear-gradient(to right, #74ebd5,#acb6e5);" onclick="window.location.href='https://2019.igem.org/Team:Tsinghua/Demonstrate#result4'">Read more</button>
 
                         </div>
 
                         </div>
 
                          
 
                          
Line 534: Line 498:
 
              
 
              
 
              
 
              
−
             <div class="container">
+
            <p></p>
−
                  
+
            <p></p>
−
            </div>
+
             <div class="container background-white" >
−
        </section>
+
                 <video width="100%"  controls>
−
       
+
                    <source src="https://static.igem.org/mediawiki/2019/f/f7/T--Tsinghua--video1.mp4" type="video/mp4">
−
        <section class="text-center pb-3">
+
                       
−
            <div class="background-holder overlay overlay-2" style="background-image:url(https://static.igem.org/mediawiki/2019/6/61/T--Tsinghua--subpage4_model.jpg);background-position: top;"> </div>
+
                    </video>
−
            <!--/.background-holder-->
+
                </div>
−
            <div class="container">
+
            </section>
−
                <div class="row justify-content-center">
+
            <section class="text-center pb-3">
−
                    <div class="col-12">
+
                <div class="background-holder overlay overlay-2" style="background-image:url(https://static.igem.org/mediawiki/2019/f/fb/T--Tsinghua--footimg.png);background-position: top;"> </div>
−
                        <h4 class="mb-2 color-white">PhASE</h4>
+
                <!--/.background-holder-->
−
                         <p class="mb-0 color-9">Subscribe to our mailing list to receive updates and promotional offers.</p>
+
                <div class="container">
−
                    </div>
+
                    <div class="row justify-content-center">
−
                    <div class="col-md-10 col-lg-7 col-xl-5 mt-4">
+
                        <div class="col-12">
−
                        <form method="post">
+
                            <h4 class="mb-4 color-white">Thanks for your support !</h4>
−
                            <div class="row align-items-center no-gutters">
+
                           
−
                                 <div class="col-md-8 px-2">
+
                         </div>
−
                                     <input class="form-control" type="hidden" name="to" value="username@domain.extension" />
+
                        <div style="height: 30px;"></div>
−
                                     <input class="form-control border-color-white" type="text" placeholder="Enter Email Here" /> </div>
+
                        <div class ="row">
−
                                    <div class="col-md-4 px-2 mt-3 mt-md-0">
+
                           
−
                                        <button class="btn btn-block btn-white" type="submit">
+
                            <div class="col-2">
−
                                            <span>Submit</span>
+
                            </div>
−
                                        </button>
+
                            <div class="col-2">
−
                                     </div>
+
                                <a href="https://2019.igem.org/Team:BIT-China/Collaborations" target="_blank">
−
                                 </div>
+
                                    <img src="https://static.igem.org/mediawiki/2019/f/f2/T--Tsinghua--colab_bitlogo2.png" style="width: 50%;">
−
                             </form>
+
                                </a>
 +
                               
 +
                            </div>
 +
                            <div class="col-2">
 +
                                <a href="https://2019.igem.org/Team:Peking/Collaborations" target="_blank">
 +
                                    <img src="https://static.igem.org/mediawiki/2019/b/bf/T--Tsinghua--colab_pkulogo3.png" style="width:50%;">
 +
                                 </a>
 +
                            </div>
 +
                            <div class="col-2">
 +
                                <a href="https://2019.igem.org/Team:BIT-China/Collaborations" target="_blank">
 +
                                     <img src="https://static.igem.org/mediawiki/2019/1/16/T--Tsinghua--colab_bitlogo3.png" style="width:50%;">
 +
                                </a>
 +
                            </div>
 +
                           
 +
                            <div class="col-2">
 +
                                <a href="https://2019.igem.org/Team:SJTU-BioX-Shanghai/Collaborations#section4" target="_blank">
 +
                                     <img src="https://static.igem.org/mediawiki/2019/1/12/T--Tsinghua--sj3.jpg" style="width: 50%;">
 +
                                </a>
 +
                            </div>
 +
                            <div class="col-2">
 +
                            </div>
 +
                           
 +
                        </div>
 +
                        <div style="height: 1cm;"></div>
 +
                        <div class="row">
 +
                            <div class="col-3"></div>
 +
                            <div class="col-2">
 +
                                <a href="https://2019.igem.org/Team:Peking/Collaborations" target="_blank">
 +
                                    <img src="https://static.igem.org/mediawiki/2019/2/2e/T--Tsinghua--colab_pkulogo.png">
 +
                                </a>
 +
                            </div>
 +
                            <div class="col-2">
 +
                                <a href="https://2019.igem.org/Team:BIT-China/Collaborations" target="_blank">
 +
                                    <img src="https://static.igem.org/mediawiki/2019/4/4a/T--Tsinghua--colab_bitlogo.png">
 +
                                </a>
 +
                            </div>
 +
                            <div class="col-2">
 +
                                <a href="https://2019.igem.org/Team:SJTU-BioX-Shanghai/Collaborations#section4" target="_blank">
 +
                                     <img src="https://static.igem.org/mediawiki/2019/5/5b/T--Tsinghua--Colab_sj2.png">
 +
                                 </a>
 +
                            </div>
 +
                            <div class="col-3">
 +
                             </div>
 
                         </div>
 
                         </div>
 
                     </div>
 
                     </div>
Line 571: Line 577:
 
                             <a class="d-inline-block mx-2 color-8" href="https://2019.igem.org/Team:Tsinghua/Improvement">Parts</a>
 
                             <a class="d-inline-block mx-2 color-8" href="https://2019.igem.org/Team:Tsinghua/Improvement">Parts</a>
 
                             <a class="d-inline-block mx-2 color-8" href="https://2019.igem.org/Team:Tsinghua/Human_Practices">HP</a>
 
                             <a class="d-inline-block mx-2 color-8" href="https://2019.igem.org/Team:Tsinghua/Human_Practices">HP</a>
−
                             <a class="d-inline-block mx-2 color-8" href="mailto:igem.thu@outlook.com">Contact Us</a>
+
                             <a class="d-inline-block mx-2 color-8" href="mailto:igem.thu@outlook.com"><span class="fa fa-envelope"></span> Contact Us</a>
−
                              
+
                             <a class="d-inline-block mx-2 color-8" href="https://2019.igem.org/Team:Tsinghua/Team">Next Page <span class="fa fa-chevron-right"></span></span></a>
 
                         </div>
 
                         </div>
 
                         <div class="col-lg text-lg-left">
 
                         <div class="col-lg text-lg-left">
Line 579: Line 585:
 
                         </div>
 
                         </div>
 
                     </div>
 
                     </div>
−
                    <!--/.row-->
 
 
                 </div>
 
                 </div>
 +
                <!--/.row-->
 +
               
 
                 <!--/.container-->
 
                 <!--/.container-->
 
             </section>
 
             </section>
Line 628: Line 635:
 
         <script type="text/javascript" src="https://2019.igem.org/wiki/index.php?title=Team:Tsinghua/js/remodal.js&action=raw&ctype=text/javascript"></script>
 
         <script type="text/javascript" src="https://2019.igem.org/wiki/index.php?title=Team:Tsinghua/js/remodal.js&action=raw&ctype=text/javascript"></script>
 
         <script type="text/javascript" src="https://2019.igem.org/wiki/index.php?title=Team:Tsinghua/js/remodal.min.js&action=raw&ctype=text/javascript"></script>
 
         <script type="text/javascript" src="https://2019.igem.org/wiki/index.php?title=Team:Tsinghua/js/remodal.min.js&action=raw&ctype=text/javascript"></script>
 +
        <script>
 +
            (function(){
 +
                let pageHeight = document.body.scrollHeight || document.documentElement.scrollHeight; // 页面总高度
 +
                let windowHeight = document.documentElement.clientHeight || document.body.clientHeight; // 浏览器视口高度
 +
                let scrollAvail = pageHeight - windowHeight; // 可滚动的高度
 +
                console.log('可滚动的高度：', scrollAvail);
 +
                window.onscroll = function () {
 +
                    let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;  // 获取滚动条的高度
 +
                    console.log('滚动条的高度：', scrollTop);
 +
                    document.querySelector('.progress').style.width = (scrollTop/scrollAvail)*100 + '%';    // 计算占比
 +
                };
 +
            }());
 +
        </script>
 +
    </body>
 +
    <body>
 +
        <div class="progress"></div>
 +
        <div>
 +
            <div class="box">1</div>
 +
        </div>
 
     </body>
 
     </body>
 
     </html>
 
     </html>

Latest revision as of 01:51, 22 October 2019

iGEM Tsinghua

  • PhASE | Photo-Activated Switch in E.coli

    Tsinghua 2019

  • PhASE | Photo-Activated Switch in E.coli

    Tsinghua 2019

  • PhASE | Photo-Activated Switch in E.coli

    Tsinghua 2019

  • PhASE | Photo-Activated Switch in E.coli

    Tsinghua 2019

  • PhASE | Photo-Activated Switch in E.coli

    Tsinghua 2019

  • PhASE | Photo-Activated Switch in E.coli

    Tsinghua 2019

Phase separation system

We constructed the first artificial phase separation system ever in prokaryotes. These droplets in E.coli exhibit similar spherical shape and high fluidity as they were in eukaryotes. By creating membraneless organelles in a cell, phases could realize the redistribution of various targets, including proteins and small organic molecules.

Photo-activated switch

We use laser as a switch to control our system in a high spatial-temporal resolution. Within a few seconds, target proteins would redistribute into existing phases. After incubated in dark for several minutes, targets can reverse to previous smear state.

Modelling our system

We modelled the phase separation system and coupled enzymatic reactions using a differential equation model and a collision model of chemical reactions. The model conceptually explained how phase separation would regulate downstream reactions, and provided insights for enzyme concentration and phase separation system selection. In addition, an interactive interface based on the model is presented on our wiki.

Downstream reactions

Enzymes of proper size could be recruited into phases by using photo-activated switch. Selecting substrates of proper solubility according to our model, we realized the regulation of enzymatic reactions.

Improvement

Enrichment of CRY2 in phase include both homo-aggregation of itself and hetero-aggregation of CRY2 and CIB1. By introducing point mutation to C terminal of CRY2, we attenuate homo-aggregation of CRY2 in dark, increasing the threshold of light induction. This improvement may also be helpful for teams who want to modify the sensitivity of their light-controlled information-processing system.

More possibilities

Upon introducing this powerful tool in E.coli, there are much more prosperous applications waiting to be developed. We propose that by isolating specific material in phase, a uniform E.coli colony could grow into a society with cell differentiation.

Hardware

Depending on the manner of reversible amplification in phase, specific proteins can be used to create a biological register. Responding to laser stimulation, the distribution of fluorescence proteins would change, resulting in the variation in FRET signal, which can be detected by fluorescence reader.

Thanks for your support !

Home Team Project Model Parts HP Contact Us Next Page
© Tsinghua iGEM 2019
1