Difference between revisions of "Team:Tsinghua/Model"

Line 1: Line 1:
 
 
 
{{Tsinghua}}
 
{{Tsinghua}}
<html>
+
<html lang="en-US">
 
+
 
<head>
 
<head>
<meta charset="UTF-8" />
+
    <meta charset="utf-8">
 
+
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
+
    <meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tsinghua Documentation - 2019.igem.org</title>
+
    <!--  -->
<meta name="generator" content="MediaWiki 1.24.1" />
+
    <!--    Document Title-->
<link rel="shortcut icon" href="/favicon.ico" />
+
    <!-- =============================================-->
<link rel="search" type="application/opensearchdescription+xml" href="/wiki/opensearch_desc.php" title="2019.igem.org (en)" />
+
    <title>iGEM Tsinghua</title>
<link rel="alternate" hreflang="x-default" href="/Resources/Template_Documentation" />
+
<link rel="copyright" href="https://creativecommons.org/licenses/by/3.0/" />
+
<link rel="alternate" type="application/atom+xml" title="2019.igem.org Atom feed" href="/wiki/index.php?title=Special:RecentChanges&amp;feed=atom" />
+
<link rel="stylesheet" href="https://2019.igem.org/wiki/load.php?debug=false&amp;lang=en&amp;modules=mediawiki.legacy.commonPrint%2Cshared%7Cmediawiki.skinning.content.externallinks%7Cmediawiki.skinning.interface%7Cmediawiki.ui.button%7Cskins.igem.styles&amp;only=styles&amp;skin=igem&amp;*" />
+
<!--[if IE 6]><link rel="stylesheet" href="/wiki/skins/Igem/IE60Fixes.css?303" media="screen" /><![endif]-->
+
<!--[if IE 7]><link rel="stylesheet" href="/wiki/skins/Igem/IE70Fixes.css?303" media="screen" /><![endif]--><meta name="ResourceLoaderDynamicStyles" content="" />
+
<style>a:lang(ar),a:lang(kk-arab),a:lang(mzn),a:lang(ps),a:lang(ur){text-decoration:none}
+
/* cache key: 2019_igem_org:resourceloader:filter:minify-css:7:35f114711b15fda1f15f5df02b43e4bc */</style>
+
<script src="https://2019.igem.org/wiki/load.php?debug=false&amp;lang=en&amp;modules=startup&amp;only=scripts&amp;skin=igem&amp;*"></script>
+
<script>if(window.mw){
+
mw.config.set({"wgCanonicalNamespace":"","wgCanonicalSpecialPageName":false,"wgNamespaceNumber":0,"wgPageName":"Resources/Template_Documentation","wgTitle":"Resources/Template Documentation","wgCurRevisionId":2350,"wgRevisionId":2350,"wgArticleId":121,"wgIsArticle":true,"wgIsRedirect":false,"wgAction":"view","wgUserName":"Yunoinsky","wgUserGroups":["*","user","autoconfirmed"],"wgCategories":[],"wgBreakFrames":false,"wgPageContentLanguage":"en","wgPageContentModel":"wikitext","wgSeparatorTransformTable":["",""],"wgDigitTransformTable":["",""],"wgDefaultDateFormat":"dmy","wgMonthNames":["","January","February","March","April","May","June","July","August","September","October","November","December"],"wgMonthNamesShort":["","Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],"wgRelevantPageName":"Resources/Template_Documentation","wgUserId":1817,"wgUserEditCount":0,"wgUserRegistration":1557059995000,"wgUserNewMsgRevisionId":null,"wgIsProbablyEditable":false,"wgRestrictionEdit":[],"wgRestrictionMove":[]});
+
}</script><script>if(window.mw){
+
mw.loader.implement("user.options",function($,jQuery){mw.user.options.set({"ccmeonemails":0,"cols":80,"date":"default","diffonly":0,"disablemail":0,"editfont":"default","editondblclick":0,"editsectiononrightclick":0,"enotifminoredits":0,"enotifrevealaddr":0,"enotifusertalkpages":1,"enotifwatchlistpages":1,"extendwatchlist":0,"fancysig":0,"forceeditsummary":0,"gender":"unknown","hideminor":0,"hidepatrolled":0,"imagesize":2,"math":1,"minordefault":0,"newpageshidepatrolled":0,"nickname":"","norollbackdiff":0,"numberheadings":0,"previewonfirst":0,"previewontop":1,"rcdays":7,"rclimit":50,"rows":25,"showhiddencats":0,"shownumberswatching":1,"showtoolbar":1,"skin":"igem","stubthreshold":0,"thumbsize":5,"underline":2,"uselivepreview":0,"usenewrc":1,"watchcreations":1,"watchdefault":1,"watchdeletion":0,"watchlistdays":3,"watchlisthideanons":0,"watchlisthidebots":0,"watchlisthideliu":0,"watchlisthideminor":0,"watchlisthideown":0,"watchlisthidepatrolled":0,"watchmoves":0,"watchrollback":0,
+
"wllimit":250,"useeditwarning":1,"prefershttps":1,"language":"en","variant-gan":"gan","variant-iu":"iu","variant-kk":"kk","variant-ku":"ku","variant-shi":"shi","variant-sr":"sr","variant-tg":"tg","variant-uz":"uz","variant-zh":"zh","searchNs0":true,"searchNs1":false,"searchNs2":false,"searchNs3":false,"searchNs4":false,"searchNs5":false,"searchNs6":false,"searchNs7":false,"searchNs8":false,"searchNs9":false,"searchNs10":false,"searchNs11":false,"searchNs12":false,"searchNs13":false,"searchNs14":false,"searchNs15":false});},{},{});mw.loader.implement("user.tokens",function($,jQuery){mw.user.tokens.set({"editToken":"0a01daa1c813c6c2dc420febf993afe0+\\","patrolToken":"6bc9eb4357326fc0635615e4f27f0418+\\","watchToken":"151bcf6668aaf2784b71b46ac46a4579+\\"});},{},{});
+
/* cache key: 2019_igem_org:resourceloader:filter:minify-js:7:7846161d434a545962d1f00908a98090 */
+
}</script>
+
<script>if(window.mw){
+
mw.loader.load(["mediawiki.page.startup","mediawiki.legacy.wikibits","mediawiki.legacy.ajax"]);
+
}</script>
+
 
+
 
+
 
     <!--  -->
 
     <!--  -->
 
     <!--    Favicons-->
 
     <!--    Favicons-->
 
     <!--    =============================================-->
 
     <!--    =============================================-->
      
+
     <!-- <link rel="apple-touch-icon" sizes="180x180" href="assets/images/favicons/apple-touch-icon.png">
   
+
        <link rel="icon" type="image/png" sizes="32x32" href="assets/images/favicons/favicon-32x32.png">
    <meta name="theme-color" content="#ffffff">
+
        <link rel="icon" type="image/png" sizes="16x16" href="assets/images/favicons/favicon-16x16.png">
     <!--  -->
+
        <link rel="shortcut icon" type="image/x-icon" href="assets/images/favicons/favicon.ico">
 +
        <link rel="manifest" href="assets/images/favicons/manifest.json">
 +
        <link rel="mask-icon" href="assets/images/favicons/safari-pinned-tab.svg" color="#5bbad5">
 +
        <meta name="msapplication-TileImage" content="assets/images/favicons/mstile-150x150.png">
 +
        <meta name="theme-color" content="#ffffff">
 +
     -->
 
     <!--    Stylesheets-->
 
     <!--    Stylesheets-->
 
     <!--    =============================================-->
 
     <!--    =============================================-->
 
     <!-- Default stylesheets-->
 
     <!-- Default stylesheets-->
     <link href="assets/lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
+
     <!-- <link href="assets/lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> -->
 +
    <link rel="stylesheet" type="text/css" href="https://2019.igem.org/wiki/index.php?title=Team:Tsinghua/css/bootstrap.min.css&action=raw&ctype=text/css" >
 +
   
 
     <!-- Template specific stylesheets-->
 
     <!-- Template specific stylesheets-->
     <link href="assets/lib/loaders.css/loaders.min.css" rel="stylesheet">
+
     <!-- <link href="assets/lib/loaders.css/loaders.min.css" rel="stylesheet"> -->
 
     <link href="https://fonts.googleapis.com/css?family=Hind+Madurai:300,400,500,600,700|Playfair+Display:400,400i,700,700i,900,900i" rel="stylesheet">
 
     <link href="https://fonts.googleapis.com/css?family=Hind+Madurai:300,400,500,600,700|Playfair+Display:400,400i,700,700i,900,900i" rel="stylesheet">
     <link href="assets/lib/hamburgers/dist/hamburgers.min.css" rel="stylesheet">
+
     <!-- <link href="assets/lib/hamburgers/dist/hamburgers.min.css" rel="stylesheet"> -->
     <link href="assets/lib/font-awesome/css/font-awesome.min.css" rel="stylesheet">
+
     <!-- <link href="assets/lib/font-awesome/css/font-awesome.min.css" rel="stylesheet"> -->
     <link href="assets/lib/lightbox2/dist/css/lightbox.css" rel="stylesheet">
+
     <!-- <link href="assets/lib/lightbox2/dist/css/lightbox.css" rel="stylesheet"> -->
     <link href="assets/lib/flexslider/flexslider.css" rel="stylesheet">
+
     <!-- <link href="assets/lib/flexslider/flexslider.css" rel="stylesheet"> -->
 +
    <link rel="stylesheet" type="text/css" href="https://2019.igem.org/wiki/index.php?title=Team:Tsinghua/css/flexslider2.css&action=raw&ctype=text/css" >
 +
   
 
     <!-- Main stylesheet and color file-->
 
     <!-- Main stylesheet and color file-->
     <link href="assets/css/style.css" rel="stylesheet">
+
     <!-- <link href="assets/css/style.css" rel="stylesheet"> -->
     <link href="assets/css/custom.css" rel="stylesheet">
+
     <link rel="stylesheet" type="text/css" href="https://2019.igem.org/wiki/index.php?title=Team:Tsinghua/css/font-awesome.min.css&action=raw&ctype=text/css">
</head>
+
    <link rel="stylesheet" type="text/css" href="https://2019.igem.org/wiki/index.php?title=Team:Tsinghua/css/style.css&action=raw&ctype=text/css" >
+
   
     <body data-spy="scroll" data-target=".inner-link" data-offset="60">
+
    <!-- <link href="assets/css/custom.css" rel="stylesheet"> </head> -->
        <main>
+
    <link rel="stylesheet" type="text/css" href="https://2019.igem.org/wiki/index.php?title=Team:Tsinghua/css/custom.css&action=raw&ctype=text/css" >
           
+
      
            <div class="loading" id="preloader">
+
    <link rel="stylesheet" type="text/css" href="https://2019.igem.org/wiki/index.php?title=Team:Tsinghua/css/remodal.css&action=raw&ctype=text/css" >
                <div class="h-100vh d-flex align-items-center justify-content-center background-white">
+
   
                    <div>                         
+
    <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" >
                        <img src="assets/images/amenities.jpg" style="width:5%;  position:absolute; left: 46%; top: 43%">
+
</head>
                    </div>
+
<body data-spy="scroll" data-target=".inner-link" data-offset="60">
 +
    <main>
 +
       
 +
        <div class="loading" id="preloader">
 +
            <div class="h-100vh d-flex align-items-center justify-content-center background-white">
 +
                <div>                         
 +
                    <img src="https://static.igem.org/mediawiki/2019/1/15/T--Tsinghua--loading.gif" style="width:5%;  position:absolute; left: 46%; top: 43%">
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
             <div class="znav-container znav-transparent mt-4" id="znav-container">
+
        </div>
 +
        <div class="sticky-lg-top pt-4" style="z-index: 1000;">
 +
            <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%">
 +
               
 
                 <div class="container">
 
                 <div class="container">
                      
+
                     <img src="https://static.igem.org/mediawiki/2019/b/be/T--Tsinghua--logo.png" style="width: 8%;position: absolute;left: -6%;">
 
                     <nav class="navbar navbar-expand-lg">
 
                     <nav class="navbar navbar-expand-lg">
                         <a class="navbar-brand overflow-hidden pr-3 fs-3" href="index.html">iGEM
+
                       
 +
                         <a class="navbar-brand overflow-hidden pr-3 fs-3" href="https://2019.igem.org/Team:Tsinghua">
 +
                           
 +
                            iGEM
 
                             <span class="d-none d-lg-inline-block">Tsinghua</span>
 
                             <span class="d-none d-lg-inline-block">Tsinghua</span>
 
                         </a>
 
                         </a>
                         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
+
                         <!-- <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 hamburger--emphatic">
 
                                 <div class="hamburger-box">
 
                                 <div class="hamburger-box">
Line 80: Line 78:
 
                                 </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="index.html"><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>
 
                                 <li>
 
                                 <li>
                                    <a href="Team.html">Team</a>
+
                                     <a href="JavaScript:void(0)"><span class="fa fa-group"></span> Team</a>
                                </li>
+
                                <li>
+
                                     <a href="JavaScript:void(0)">Project</a>
+
 
                                     <ul class="dropdown fs-0">
 
                                     <ul class="dropdown fs-0">
 
                                         <li>
 
                                         <li>
                                             <a href="Description.html">Description</a>
+
                                             <a href="https://2019.igem.org/Team:Tsinghua/Team">Members</a>
                                         </li>
+
                                         </li>  
 
                                         <li>
 
                                         <li>
                                             <a href="Experiments.html">Experiments</a>
+
                                             <a href="https://2019.igem.org/Team:Tsinghua/Collaborations">Collaborations</a>
 
                                         </li>
 
                                         </li>
 
                                         <li>
 
                                         <li>
                                             <a href="Demonstration.html">Results</a>
+
                                             <a href="https://2019.igem.org/Team:Tsinghua/Notebook">Notebook</a>
 
                                         </li>
 
                                         </li>
 +
                                       
 
                                         <li>
 
                                         <li>
                                             <a href="Notebook.html">Notebook</a>
+
                                             <a href="https://2019.igem.org/Team:Tsinghua/Attributions">Attributions</a>
 
                                         </li>
 
                                         </li>
                                       
 
 
                                         <li>
 
                                         <li>
                                             <a href="Attributions.html">Attributions</a>
+
                                             <a href="https://2019.igem.org/Team:Tsinghua/Design">Design</a>
 
                                         </li>
 
                                         </li>
 
                                     </ul>
 
                                     </ul>
 
                                 </li>
 
                                 </li>
 
                                 <li>
 
                                 <li>
                                     <a href="JavaScript:void(0)">Model</a>
+
                                     <a href="JavaScript:void(0)"><span class="fa fa-flask"></span> Project</a>
 
                                     <ul class="dropdown fs-0">
 
                                     <ul class="dropdown fs-0">
 
                                         <li>
 
                                         <li>
                                             <a href="Model.html">Part I</a>
+
                                             <a href="https://2019.igem.org/Team:Tsinghua/Description">Description</a>
 
                                         </li>
 
                                         </li>
 
                                         <li>
 
                                         <li>
                                             <a href="Model2.html">Part II</a>
+
                                             <a href="https://2019.igem.org/Team:Tsinghua/Experiments">Experiments</a>
 
                                         </li>
 
                                         </li>
 
                                         <li>
 
                                         <li>
                                             <a href="Model3.html">Part III</a>
+
                                             <a href="https://2019.igem.org/Team:Tsinghua/Demonstrate">Results</a>
 
                                         </li>
 
                                         </li>
 +
                                       
 
                                     </ul>
 
                                     </ul>
 
                                 </li>
 
                                 </li>
 
                                 <li>
 
                                 <li>
                                     <a href="JavaScript:void(0)">Parts</a>
+
                                     <a href="JavaScript:void(0)"><span class="fa fa-cube"></span> Model</a>
 
                                     <ul class="dropdown fs-0">
 
                                     <ul class="dropdown fs-0">
 
                                         <li>
 
                                         <li>
                                             <a href="Basic.html">Basic</a>
+
                                             <a href="https://2019.igem.org/Team:Tsinghua/Model">Part I</a>
 
                                         </li>
 
                                         </li>
 
                                         <li>
 
                                         <li>
                                             <a href="Composite.html">Composite</a>
+
                                             <a href="https://2019.igem.org/Team:Tsinghua/Model2">Part II</a>
 
                                         </li>
 
                                         </li>
 
                                         <li>
 
                                         <li>
                                             <a href="Improve.html">Improve</a>
+
                                             <a href="https://2019.igem.org/Team:Tsinghua/Model3">Part III</a>
 
                                         </li>
 
                                         </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>
 
                                         <li>
                                             <a href="Characterization.html">Characterization</a>
+
                                             <a href="https://2019.igem.org/Team:Tsinghua/Chart">Chart Form</a>
 
                                         </li>
 
                                         </li>
 
                                     </ul>
 
                                     </ul>
Line 144: Line 152:
 
                                  
 
                                  
 
                                 <li>
 
                                 <li>
                                     <a href="JavaScript:void(0)">Human Practices</a>
+
                                     <a href="JavaScript:void(0)"><span class="fa fa-male"></span> Human Practices</a>
 
                                     <ul class="dropdown fs-0">
 
                                     <ul class="dropdown fs-0">
 
                                         <li>
 
                                         <li>
                                             <a href="Human_Practices.html">Overview</a>
+
                                             <a href="https://2019.igem.org/Team:Tsinghua/Human_Practices">Overview</a>
 
                                         </li>
 
                                         </li>
 
                                         <li>
 
                                         <li>
                                             <a href="General.html">General</a>
+
                                             <a href="https://2019.igem.org/Team:Tsinghua/General">General</a>
 
                                         </li>
 
                                         </li>
 
                                         <li>
 
                                         <li>
                                             <a href="Integrated.html">Integrated</a>
+
                                             <a href="https://2019.igem.org/Team:Tsinghua/Integrated">Integrated</a>
 
                                         </li>
 
                                         </li>
 
                                         <li>
 
                                         <li>
                                             <a href="Safety.html">Safety</a>
+
                                             <a href="https://2019.igem.org/Team:Tsinghua/Safety">Safety</a>
                                        </li>
+
                                        <li>
+
                                            <a href="Collaborations.html">Collaborations</a>
+
 
                                         </li>
 
                                         </li>
 +
                                       
 
                                     </ul>
 
                                     </ul>
 
                                 </li>
 
                                 </li>
Line 171: Line 177:
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
           
+
        </div>
             <div class="flexslider flexslider-simple h-box parallax">
+
       
                <div id="whiteMask"><a href="#afterwhiteMask">
+
        <section class="py-0 overflow-hidden">
                     <img src="assets/images/whitemask.png"></a>
+
             <div class="background-holder overlay overlay-2 parallax" style="background-image:url(https://static.igem.org/mediawiki/2019/6/61/T--Tsinghua--subpage4_model.jpg);"> </div>
 +
            <!--/.background-holder-->
 +
            <div class="container">
 +
                <div class="row align-items-center justify-content-center text-center pt-8 pb-6" style="height: 50vh; min-height: 300px;" data-zanim-timeline="{}" data-zanim-trigger="scroll">
 +
                     <div class="col">
 +
                        <div class="overflow-hidden">
 +
                            <h1 class="color-white fs-5 fs-lg-7"  >Ⅲ. A User-Interface for Our Modeling </h1>
 +
                        </div>
 +
                    </div>
 
                 </div>
 
                 </div>
               
+
                 <!--/.row-->
                 <canvas id="myCanvas" width="1536" height="673"></canvas>
+
                <ul class="slides">
+
                    <li data-zanim-timeline="{}">
+
                        <section class="py-0 text-center">
+
                            <div class="background-holder overlay" style="background-image:url(assets/images/indexSlider1.jpg);"> </div>
+
                            <!--/.background-holder-->
+
                            <div class="container">
+
                                <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="col">
+
                                        <div class="overflow-hidden">
+
                                            <h6 class="text-uppercase color-white fs--1 fs-lg-0 font-2 ls" data-zanim='{"delay":0.2}'>Tsinghua 2019</h6>
+
                                        </div>
+
                                        <div class="overflow-hidden">
+
                                            <h1 class="color-white fs-5 fs-lg-7" data-zanim='{"delay":0.1}'>LIGHT-INDUCED PHASE SEPARATION</h1>
+
                                        </div>
+
                                    </div>
+
                                </div>
+
                                <!--/.row-->
+
                            </div>
+
                            <!--/.container-->
+
                        </section>
+
                    </li>
+
                    <li data-zanim-timeline="{}">
+
                        <section class="py-0 text-center">
+
                            <div class="background-holder overlay" style="background-image:url(assets/images/indexSlider2.jpg);"> </div>
+
                            <!--/.background-holder-->
+
                            <div class="container">
+
                                <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="col">
+
                                        <div class="overflow-hidden">
+
                                            <h6 class="text-uppercase color-white fs--1 fs-lg-0 font-2 ls" data-zanim='{"delay":0.2}'>Tsinghua 2019</h6>
+
                                        </div>
+
                                        <div class="overflow-hidden">
+
                                            <h1 class="color-white fs-5 fs-lg-7" data-zanim='{"delay":0.1}'>LIGHT-INDUCED PHASE SEPARATION
+
                                            </h1>
+
                                        </div>
+
                                    </div>
+
                                </div>
+
                                <!--/.row-->
+
                            </div>
+
                            <!--/.container-->
+
                        </section>
+
                    </li>
+
                    <li data-zanim-timeline="{}">
+
                        <section class="py-0 text-center">
+
                            <div class="background-holder overlay" style="background-image:url(assets/images/indexSlider3.jpg);"> </div>
+
                            <!--/.background-holder-->
+
                            <div class="container">
+
                                <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="col">
+
                                        <div class="overflow-hidden">
+
                                            <h6 class="text-uppercase color-white fs--1 fs-lg-0 font-2 ls" data-zanim='{"delay":0.2}'>Tsinghua 2019</h6>
+
                                        </div>
+
                                        <div class="overflow-hidden">
+
                                            <h1 class="color-white fs-5 fs-lg-7" data-zanim='{"delay":0.1}'>LIGHT-INDUCED PHASE SEPARATION</h1>
+
                                        </div>
+
                                    </div>
+
                                </div>
+
                                <!--/.row-->
+
                            </div>
+
                            <!--/.container-->
+
                        </section>
+
                    </li>
+
                    <li data-zanim-timeline="{}">
+
                        <section class="py-0 text-center">
+
                            <div class="background-holder overlay" style="background-image:url(assets/images/indexSlider4.jpg);"> </div>
+
                            <!--/.background-holder-->
+
                            <div class="container">
+
                                <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="col">
+
                                        <div class="overflow-hidden">
+
                                            <h6 class="text-uppercase color-white fs--1 fs-lg-0 font-2 ls" data-zanim='{"delay":0.2}'>Tsinghua 2019</h6>
+
                                        </div>
+
                                        <div class="overflow-hidden">
+
                                            <h1 class="color-white fs-5 fs-lg-7" data-zanim='{"delay":0.1}'>LIGHT-INDUCED PHASE SEPARATION</h1>
+
                                        </div>
+
                                    </div>
+
                                </div>
+
                                <!--/.row-->
+
                            </div>
+
                            <!--/.container-->
+
                        </section>
+
                    </li>
+
                    <li data-zanim-timeline="{}">
+
                        <section class="py-0 text-center">
+
                            <div class="background-holder overlay" style="background-image:url(assets/images/indexSlider5.jpg);"> </div>
+
                            <!--/.background-holder-->
+
                            <div class="container">
+
                                <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="col">
+
                                        <div class="overflow-hidden">
+
                                            <h6 class="text-uppercase color-white fs--1 fs-lg-0 font-2 ls" data-zanim='{"delay":0.2}'>Tsinghua 2019</h6>
+
                                        </div>
+
                                        <div class="overflow-hidden">
+
                                            <h1 class="color-white fs-5 fs-lg-7" data-zanim='{"delay":0.1}'>LIGHT-INDUCED PHASE SEPARATION</h1>
+
                                        </div>
+
                                    </div>
+
                                </div>
+
                                <!--/.row-->
+
                            </div>
+
                            <!--/.container-->
+
                        </section>
+
                    </li>
+
                    <li data-zanim-timeline="{}">
+
                        <section class="py-0 text-center">
+
                            <div class="background-holder overlay" style="background-image:url(assets/images/indexSlider6.jpg);"> </div>
+
                            <!--/.background-holder-->
+
                            <div class="container">
+
                                <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="col">
+
                                        <div class="overflow-hidden">
+
                                            <h6 class="text-uppercase color-white fs--1 fs-lg-0 font-2 ls" data-zanim='{"delay":0.2}'>Tsinghua 2019</h6>
+
                                        </div>
+
                                        <div class="overflow-hidden">
+
                                            <h1 class="color-white fs-5 fs-lg-7" data-zanim='{"delay":0.1}'>LIGHT-INDUCED PHASE SEPARATION</h1>
+
                                        </div>
+
                                    </div>
+
                                </div>
+
                                <!--/.row-->
+
                            </div>
+
                            <!--/.container-->
+
                        </section>
+
                    </li>
+
                </ul>
+
                <span id="afterwhiteMask"></span>
+
 
             </div>
 
             </div>
             <section class="text-center text-lg-left py-9 background-white">
+
             <!--/.container-->
                <div style="margin-left:auto;margin-right:auto;right: 0;width: 800px;" id="highlight_head">
+
        </section>
                     <div style="position: absolute;top:140px;left:220px;height: 280px;width: 30px;background-image:linear-gradient(to bottom, rgb(252, 106, 8), rgb(0, 162, 255));">
+
       
 +
        <section>
 +
            <div class="container">
 +
                <div class="row no-gutters">
 +
                    <div class="col-md-7 col-lg-5">
 +
                        <div class="sticky-lg-top pt-4" style="top: 5.5rem;">
 +
                            <h3 class="ls color-primary mb-4">User-Interface</h3>
 +
                            <p class="lead pr-lx-8 pr-lg-6 mb-5">interactions</p>
 +
                        </div>
 +
                     </div>
 +
                    <div class="col-lg-7 mt-lg-4 pl-lg-5" style="text-align: justify;">
 +
                        <p class="dropcap">To give you a more intuitive understanding of the phase separation process and the effect of phase separation on the rate of enzymatic reactions, we have made an interactive interface. You can choose the different strengths of interactions between separation elements and different enzyme concentrations to see how the phase separation proceeds and how the rate of the enzymatic reaction changes. </p>
 
                          
 
                          
                    </div>
+
                        <p class="mb-0">The computation of enzymatic reaction rate changes in the user-interface is based on formula (2.17), which we made some modifications to. First, we assume that every protein cluster forms a real phase, which means 𝜒<sub>𝑖</sub>=1 for all 𝑖’s. Then, we get </p>
                    <p class="fs-5" style="text-indent: 60px;word-spacing: 15px;">
+
                        <div class="row my-4 my-lg-6">
                        In order to precisely control the velocity of biochemical reactions, we applied phase separation system coupled with light induction in E.coli.
+
                            <div class="col-12">
                    </p>
+
                                 <img src="https://static.igem.org/mediawiki/2019/4/4d/T--Tsinghua--model3form3_1.png" width="80%" alt="" />
                   
+
                               
                </div>
+
                <div style="height: 10px;"></div>
+
                <hr width="1100">
+
                <div style="height: 20px;"></div>
+
                <div>
+
                   
+
                   
+
                   
+
                   
+
                    <div class = "row" id="highlight1">
+
                        <div class="col-1"></div>
+
                        <div class = "col-4">
+
                            <div style="position:relative">
+
                                 <img src="assets/images/indexhighlight1.png" width="80%">
+
 
                             </div>
 
                             </div>
 +
                           
 
                         </div>
 
                         </div>
                         <div class="col-6">
+
                         <p class="dropcap">If we denote by 𝑆<sub>1</sub> the specific surface area of protein clusters (the ratio of surface area to volume) after phase separation and 𝑆<sub>0</sub> the specific surface area of protein all protein particles before phase separation, one will find the term 𝑞<sup>1/3</sup><sub>0</sub><sup>𝑛</sup><sub>𝑖=1</sub>𝑞<sup>2/3</sup><sub>𝑖</sub> is exactly equal to 𝑆<sub>1</sub>/𝑆<sub>0</sub>. We can use this relationship to extend the application of equation (3.1) to the case where the shape of the protein phase is arbitrary (i.e., not necessarily a sphere), just by replacing the term 𝑞<sup>1/3</sup><sub>0</sub>∑<sup>𝑛</sup><sub>𝑖=1</sub>𝑞<sup>2/3</sup><sub>𝑖</sub> with 𝑆<sub>1</sub>/𝑆<sub>0</sub>. The phase-separated images are two-dimensional, where we can only obtain the ratio of the perimeter to the area of the protein phase (denoted by 𝐶<sub>1</sub> and 𝐶<sub>0</sub> after and before the phase separation respectively) rather than the surface area to volume ratio. We can roughly estimate the relationship between the two ratios using the relationship 3𝐶<sub>1</sub>/𝐶<sub>0</sub>=2𝑆<sub>1</sub>/𝑆<sub>0</sub>. Therefore, we can rewrite (3.1) as
                            <div class="circle" style="position: absolute;left: -30px;top:3px;background-image: linear-gradient(to right, #2f80ed,#56ccf2);;"></div>
+
                        </p>
                            <div class="index_para" style="width: 90%;"><h1>Phase separation system</h1>
+
                        <div class="row my-4 my-lg-6">
                                <p class="fs-3" style="margin: 1cm 0 1cm 0; text-indent: 1cm;">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>
+
                            <div class="col-12">
                                <button style="background-image: linear-gradient(to right, #2f80ed,#56ccf2);">Read more</button>
+
                                <img src="https://static.igem.org/mediawiki/2019/a/a8/T--Tsinghua--model3form3_2.png" width="80%" alt="" />
 +
                               
 
                             </div>
 
                             </div>
 
                              
 
                              
                            <div class="col-1"></div>
 
 
                         </div>
 
                         </div>
 +
                        <p class="dropcap">
 +
                                The value of 𝐶<sub>1</sub> can be calculated via image processing programs, while the value of 𝐶<sub>0</sub> can be inferred from the size of protein particles after scaling to the same scale as the image where we calculate 𝐶<sub>1</sub>.
 +
                        </p>
 +
                        <p class="mb-0">
 +
                                Since there is not much prior knowledge of the solubility difference of the substrate between in the cytoplasm and in the phase, we conservatively assume that 𝑘<sup>∘</sup><sub>𝑓</sub>=1. As discussed previously, the term 1−𝑒<sup>−𝜆𝑉<sub>0</sub><sup>1/3</sup></sup> is the orientation factor. The orientation factors of different chemical reactions vary greatly, and the orientation factor data of enzymatic reactions are lacking. But as a proof of concept, we don’t need to be that precise and hence we can roughly estimate the orientation factor to be 1×10<sup>-3</sup>.
 +
                        </p>
 
                     </div>
 
                     </div>
                    <div style="height:100px"></div>
+
                </div>
                    <div class = "row" id="highlight2">
+
               
 +
               
 +
                <!--/.row-->
 +
            </div>
 +
            <!--/.container-->
 +
        </section>
 +
        <section class="text-center pb-3">
 +
            <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>
 +
            <!--/.background-holder-->
 +
            <div class="container">
 +
                <div class="row justify-content-center">
 +
                    <div class="col-12">
 +
                        <h4 class="mb-4 color-white">Thanks for your support !</h4>
 +
                       
 +
                    </div>
 +
                    <div style="height: 30px;"></div>
 +
                    <div class ="row">
 +
                       
 
                         <div class="col-2">
 
                         <div class="col-2">
                           
 
 
                         </div>
 
                         </div>
                         <div class="col-5">
+
                         <div class="col-2">
                             <div class="circle" style="position: absolute;left: -30px;top:3px;background-image: linear-gradient(to right,#fbc7d4, #9796f0);"></div>
+
                             <img src="https://static.igem.org/mediawiki/2019/f/f2/T--Tsinghua--colab_bitlogo2.png" style="width: 50%;">
                            <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;">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);">Read more</button>
+
                            </div>
+
 
                              
 
                              
 
                         </div>
 
                         </div>
                       
+
                         <div class="col-2">
                         <div class = "col-4">
+
                             <img src="https://static.igem.org/mediawiki/2019/b/bf/T--Tsinghua--colab_pkulogo3.png" style="width:50%;">
                             <div style="position:relative">
+
                                <img src="assets/images/indexhighlight2.png" width="100%">
+
                            </div>
+
 
                         </div>
 
                         </div>
                         <div class="col-1"></div>
+
                         <div class="col-2">
                    </div>
+
                             <img src="https://static.igem.org/mediawiki/2019/1/16/T--Tsinghua--colab_bitlogo3.png" style="width:50%;">
                    <div class = "row" id="highlight3">
+
                        <div class="col-1"></div>
+
                        <div class = "col-4">
+
                             <div style="position:relative">
+
                                <img src="assets/images/indexhighlight3.png" width="80%">
+
                            </div>
+
 
                         </div>
 
                         </div>
                         <div class="col-6">
+
                       
                             <div class="circle" style="position: absolute;left: -30px;top:3px;background-image: linear-gradient(to right, #ffafbd,#ffc3a0);"></div>
+
                         <div class="col-2">
                            <div class="index_para" style="width: 85%;"><h1>Modelling our system</h1>
+
                             <img src="https://static.igem.org/mediawiki/2019/1/12/T--Tsinghua--sj3.jpg" style="width: 50%;">
                                <p class="fs-3" style="margin: 1cm 0 1cm 0; text-indent: 1cm;">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.</p>
+
                                <button style="background-image: linear-gradient(to right, #ffafbd,#ffc3a0);">Read more</button>
+
                            </div>
+
 
                              
 
                              
                            <div class="col-1"></div>
 
 
                         </div>
 
                         </div>
                    </div>
 
                   
 
                    <div style="height:150px"></div>
 
                    <div class = "row" id="highlight4">
 
 
                         <div class="col-2">
 
                         <div class="col-2">
                           
 
                        </div>
 
                        <div class="col-5">
 
                            <div class="circle" style="position: absolute;left: -30px;top:3px;background-image: linear-gradient(to right, #ffe259,#ffa751);;"></div>
 
                            <div class="index_para" style="width: 90%;"><h1>Downstream reactions</h1>
 
                                <p class="fs-3" style="margin: 1cm 0 1cm 0; text-indent: 1cm;">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);">Read more</button>
 
                            </div>
 
                           
 
 
                         </div>
 
                         </div>
 
                          
 
                          
                        <div class = "col-4">
 
                            <div style="position:relative">
 
                                <img src="assets/images/indexhighlight4.png" style="float:right" width="80%">
 
                            </div>
 
                        </div>
 
                        <div class="col-1"></div>
 
 
                     </div>
 
                     </div>
                     <div style="height: 10px;"></div>
+
                     <div style="height: 1cm;"></div>
                     <div class = "row" id="highlight5">
+
                     <div class="row">
                         <div class="col-1"></div>
+
                         <div class="col-3"></div>
                         <div class = "col-4">
+
                         <div class="col-2">
                             <div style="position:relative">
+
                             <img src="https://static.igem.org/mediawiki/2019/2/2e/T--Tsinghua--colab_pkulogo.png">
                                <img src="assets/images/indexhighlight5.png" width="90%">
+
                            </div>
+
 
                         </div>
 
                         </div>
                         <div class="col-6">
+
                         <div class="col-2">
                             <div class="circle" style="position: absolute;left: -30px;top:3px;background-image: linear-gradient(to right, #f8ffae,#43c6ac);;"></div>
+
                             <img src="https://static.igem.org/mediawiki/2019/4/4a/T--Tsinghua--colab_bitlogo.png">
                            <div class="index_para" style="width: 84%;"><h1>Improvement</h1>
+
                                <p class="fs-3" style="margin: 1cm 0 1cm 0; text-indent: 1cm;">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.</p>
+
                                <button style="background-image: linear-gradient(to right, #f8ffae,#43c6ac);">Read more</button>
+
                            </div>
+
                           
+
                            <div class="col-1"></div>
+
 
                         </div>
 
                         </div>
                    </div>
+
                        <div class="col-2">
                    <div style="height: 90px;"></div>
+
                             <img src="https://static.igem.org/mediawiki/2019/5/5b/T--Tsinghua--Colab_sj2.png">
                    <div class = "row" id="highlight6">
+
                            <div class="col-2">
+
                              
+
                                </div>
+
                        <div class="col-5">
+
                            <div class="circle" style="position: absolute;left: -30px;top:3px;background-image: linear-gradient(to right, #a8ff78,#78ffd6);;"></div>
+
                            <div class="index_para" style="width: 90%;"><h1>Downstream reactions</h1>
+
                                <p class="fs-3" style="margin: 1cm 0 1cm 0; text-indent: 1cm;">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, #a8ff78,#78ffd6);">Read more</button>
+
                            </div>
+
                           
+
 
                         </div>
 
                         </div>
                       
+
                         <div class="col-3">
                         <div class = "col-4">
+
                            <div style="position:relative">
+
                                <img src="assets/images/indexhighlight6.png" style="float:right" width="80%">
+
                            </div>
+
 
                         </div>
 
                         </div>
                        <div class="col-1"></div>
 
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
 
+
                 <div class="row mt-8 fs--1">
               
+
                     <div class="col-lg-auto ml-lg-auto order-lg-2 mb-2 mb-lg-0">
                 <div class="container">
+
                         <a class="d-inline-block mx-2 color-8" href="https://2019.igem.org/Team:Tsinghua">Home</a>
                      
+
                        <a class="d-inline-block mx-2 color-8" href="https://2019.igem.org/Team:Tsinghua/Team">Team</a>
                </div>
+
                        <a class="d-inline-block mx-2 color-8" href="https://2019.igem.org/Team:Tsinghua/Description">Project</a>
            </section>
+
                         <a class="d-inline-block mx-2 color-8" href="https://2019.igem.org/Team:Tsinghua/Model">Model</a>
            <section class="text-center text-lg-left py-9 background-white" id="target-down-indicator">
+
                        <a class="d-inline-block mx-2 color-8" href="https://2019.igem.org/Team:Tsinghua/Improvement">Parts</a>
                <div class="container">
+
                        <a class="d-inline-block mx-2 color-8" href="https://2019.igem.org/Team:Tsinghua/Human_Practices">HP</a>
                    <div class="row">
+
                         <a class="d-inline-block mx-2 color-8" href="mailto:igem.thu@outlook.com"><span class="fa fa-envelope"></span> Contact Us</a>
                         <div class="col-lg-4">
+
                        <a class="d-inline-block mx-2 color-8" href="https://2019.igem.org/Team:Tsinghua/Model2">Next Page <span class="fa fa-chevron-right"></span></span></a>
                            <a href="gallery.html">
+
                    </div>
                                <div class="hoverbox">
+
                    <div class="col-lg text-lg-left">
                                    <img src="assets/images/thumb-gallery.jpg" alt="" />
+
                        <div class="color-8">&copy; Tsinghua iGEM 2019
                                    <div class="hoverbox-primary-content as-hoverbox-content d-flex align-items-center justify-content-center h-100">
+
                                        <h3 class="color-white">Gallery</h3>
+
                                    </div>
+
                                    <div class="hoverbox-content p-4">
+
                                        <div class="hoverbox-bg d-flex align-items-center justify-content-center h-100"></div>
+
                                    </div>
+
                                </div>
+
                            </a>
+
                         </div>
+
                        <div class="col-lg-4 mt-4 mt-lg-0">
+
                            <a href="amenities.html">
+
                                <div class="hoverbox">
+
                                    <img src="assets/images/thumb-amneities.jpg" alt="" />
+
                                    <div class="hoverbox-primary-content as-hoverbox-content d-flex align-items-center justify-content-center h-100">
+
                                        <h3 class="color-white">Amneities</h3>
+
                                    </div>
+
                                    <div class="hoverbox-content p-4">
+
                                        <div class="hoverbox-bg d-flex align-items-center justify-content-center h-100"></div>
+
                                    </div>
+
                                </div>
+
                            </a>
+
                         </div>
+
                        <div class="col-lg-4 mt-4 mt-lg-0">
+
                            <a href="packages.html">
+
                                <div class="hoverbox">
+
                                    <img src="assets/images/thumb-packages.jpg" alt="" />
+
                                    <div class="hoverbox-primary-content as-hoverbox-content d-flex align-items-center justify-content-center h-100">
+
                                        <h3 class="color-white">Packages</h3>
+
                                    </div>
+
                                    <div class="hoverbox-content p-4">
+
                                        <div class="hoverbox-bg d-flex align-items-center justify-content-center h-100"></div>
+
                                    </div>
+
                                </div>
+
                            </a>
+
 
                         </div>
 
                         </div>
 
                     </div>
 
                     </div>
                    <div class="row mt-6">
+
                </div>
                        <div class="col-lg-4">
+
            </div>
                            <h3 class="color-primary ls">An
+
            <!--/.row-->
                                <em>inviting </em>escape</h3>
+
           
                            </div>
+
            <!--/.container-->
                            <div class="col-lg-8">
+
        </section>
                                <p>Crafted with Bootstrap 4, Hideaway is perfectly responsive to every devices available. Thousands of CSS helper classes let you customize this template in any way you want, without writing any code. This is a dummy text that
+
    </main>
                                    you can change customize as you like with your description.</p>
+
    <!-- -->
                                    <a class="btn btn-outline-primary mt-2 mt-lg-4 py-lg-3 px-lg-4 fw-300" href="#">Our History</a>
+
    <!--   JavaScripts-->
                                </div>
+
    <!--    =============================================-->
                            </div>
+
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script> -->
                            <!--/.row-->
+
    <script type="text/javascript" src="https://2019.igem.org/wiki/index.php?title=Team:Tsinghua/js/modernizr.min.js&action=raw&ctype=text/javascript"></script>
                        </div>
+
   
                        <!--/.container-->
+
    <script src="assets/lib/jquery/dist/jquery.min.js"></script>
                    </section>
+
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> -->
                    <section class="text-center overflow-hidden py-11">
+
    <!-- <script src="assets/lib/bootstrap/dist/js/bootstrap.min.js"></script> -->
                        <div class="background-holder overlay overlay-2 parallax" style="background-image:url(assets/images/cta.jpg);" data-rellax-percentage="0.5"> </div>
+
    <!-- <script src="assets/js/googlemap.js"></script> -->
                        <!--/.background-holder-->
+
   
                        <div class="container">
+
    <!-- <script src="assets/lib/imagesloaded/imagesloaded.pkgd.min.js"></script> -->
                            <div class="row">
+
    <script type="text/javascript" src="https://2019.igem.org/wiki/index.php?title=Team:Tsinghua/js/imagesloaded.pkgd.min.js&action=raw&ctype=text/javascript"></script>
                                <div class="col">
+
    <!-- <script src="assets/lib/jquery-menu-aim/jquery.menu-aim.js"></script> -->
                                    <h1 class="color-white fs-4 fs-lg-7 mb-5">Eagerly
+
    <!-- <script src="assets/lib/gsap/src/minified/TweenMax.min.js"></script> -->
                                        <em>waiting </em>to welcome you.</h1>
+
    <script type="text/javascript" src="https://2019.igem.org/wiki/index.php?title=Team:Tsinghua/js/TweenMax.min.js&action=raw&ctype=text/javascript"></script>
                                        <a class="btn btn-outline-white btn-lg d-none d-lg-inline-block" href="#">Book Your Stay</a>
+
   
                                        <a class="btn btn-outline-white d-lg-none" href="#">Book Your Stay</a>
+
    <!-- <script src="assets/lib/gsap/src/minified/plugins/ScrollToPlugin.min.js"></script> -->
                                    </div>
+
    <!-- <script src="assets/lib/CustomEase.min.js"></script> -->
                                </div>
+
    <script type="text/javascript" src="https://2019.igem.org/wiki/index.php?title=Team:Tsinghua/js/CustomEase.min.js&action=raw&ctype=text/javascript"></script>
                                <!--/.row-->
+
   
                            </div>
+
    <!-- <script src="assets/js/config.js"></script> -->
                            <!--/.container-->
+
    <script type="text/javascript" src="https://2019.igem.org/wiki/index.php?title=Team:Tsinghua/js/config.js&action=raw&ctype=text/javascript"></script>
                        </section>
+
   
                        <section class="text-center py-9">
+
    <!-- <script src="assets/lib/rellax/rellax.min.js"></script> -->
                            <div class="container">
+
    <script type="text/javascript" src="https://2019.igem.org/wiki/index.php?title=Team:Tsinghua/js/rellax.min.js&action=raw&ctype=text/javascript"></script>
                                <div class="row">
+
   
                                    <div class="col-xl-6">
+
    <!-- <script src="assets/js/zanimation.js"></script> -->
                                        <h6 class="fs-0 mb-4 color-primary">123 Fake Street, Stone Ridge, NY 12345</h6>
+
    <script type="text/javascript" src="https://2019.igem.org/wiki/index.php?title=Team:Tsinghua/js/zanimation.js&action=raw&ctype=text/javascript"></script>
                                        <div class="p-2">
+
    <script type="text/javascript" src="https://2019.igem.org/wiki/index.php?title=Team:Tsinghua/js/inertia.js&action=raw&ctype=text/javascript"></script>
                                            <div class="row">
+
   
                                                <div class="col">
+
    <!-- <script src="assets/js/inertia.js"></script> -->
                                                    <div class="googlemap" data-latlng="41.8333925,-88.0123393" data-scrollwheel="false" data-icon="assets/images/map-marker.png" data-zoom="15" data-theme="Default" style="height: 353px;">
+
    <!-- <script src="assets/lib/lightbox2/dist/js/lightbox.js"></script> -->
                                                        <div class="marker-content py-3">
+
    <!-- <script src="assets/lib/flexslider/jquery.flexslider-min.js"></script> -->
                                                            <h5 class="color-primary">The
+
    <script type="text/javascript" src="https://2019.igem.org/wiki/index.php?title=Team:Tsinghua/js/jquery.flexslider-min.js&action=raw&ctype=text/javascript"></script>
                                                                <em>Hideaway </em>Resort</h5>
+
   
                                                                <p class="fs--1">A nice description about your place
+
    <!-- <script src="assets/js/core.js"></script> -->
                                                                    <br/>Customize it as you want.</p>
+
    <!-- <script src="assets/js/main.js"></script> -->
                                                                </div>
+
    <script type="text/javascript" src="https://2019.igem.org/wiki/index.php?title=Team:Tsinghua/js/main.js&action=raw&ctype=text/javascript"></script>
                                                            </div>
+
    <script type="text/javascript" src="https://2019.igem.org/wiki/index.php?title=Team:Tsinghua/js/core.js&action=raw&ctype=text/javascript"></script>
                                                        </div>
+
    <!-- <script src="assets/js/particleanimate.js"></script> -->
                                                    </div>
+
    <!-- <script type="text/javascript" src="https://2019.igem.org/wiki/index.php?title=Team:Tsinghua/js/particleanimate.js&action=raw&ctype=text/javascript"></script> -->
                                                </div>
+
    <script type="text/javascript" src="https://2019.igem.org/wiki/index.php?title=Team:Tsinghua/js/remodal.js&action=raw&ctype=text/javascript"></script>
                                            </div>
+
    <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>
                                            <div class="col-xl-6 mt-6 mt-xl-0">
+
</body>
                                                <a class="d-inline-block mx-1 mx-lg-2 font-1 color-primary mb-lg-4" href="#">Instagram</a>
+
                                                <span>/</span>
+
                                                <a class="d-inline-block mx-1 mx-lg-2 font-1 color-primary mb-lg-4" href="#">Facebook</a>
+
                                                <span>/</span>
+
                                                <a class="d-inline-block mx-1 mx-lg-2 font-1 color-primary mb-lg-4" href="#">Twitter</a>
+
                                                <div class="row no-gutters mt-4 mt-lg-0">
+
                                                    <div class="col-md-6 col-lg-4 p-1">
+
                                                        <a href="assets/images/feature/3.jpg" data-lightbox="image" data-title="my caption">
+
                                                            <img src="assets/images/feature/3.jpg" alt="" />
+
                                                        </a>
+
                                                    </div>
+
                                                    <div class="col-md-6 col-lg-4 p-1">
+
                                                        <a href="assets/images/feature/8.jpg" data-lightbox="image" data-title="my caption">
+
                                                            <img src="assets/images/feature/8.jpg" alt="" />
+
                                                        </a>
+
                                                    </div>
+
                                                    <div class="col-md-6 col-lg-4 p-1">
+
                                                        <a href="assets/images/feature/5.jpg" data-lightbox="image" data-title="my caption">
+
                                                            <img src="assets/images/feature/5.jpg" alt="" />
+
                                                        </a>
+
                                                    </div>
+
                                                    <div class="col-md-6 col-lg-4 p-1">
+
                                                        <a href="assets/images/feature/1.jpg" data-lightbox="image" data-title="my caption">
+
                                                            <img src="assets/images/feature/1.jpg" alt="" />
+
                                                        </a>
+
                                                    </div>
+
                                                    <div class="col-md-6 col-lg-4 p-1">
+
                                                        <a href="assets/images/feature/6.jpg" data-lightbox="image" data-title="my caption">
+
                                                            <img src="assets/images/feature/6.jpg" alt="" />
+
                                                        </a>
+
                                                    </div>
+
                                                    <div class="col-md-6 col-lg-4 p-1">
+
                                                        <a href="assets/images/feature/12.jpg" data-lightbox="image" data-title="my caption">
+
                                                            <img src="assets/images/feature/12.jpg" alt="" />
+
                                                        </a>
+
                                                    </div>
+
                                                </div>
+
                                            </div>
+
                                        </div>
+
                                        <!--/.row-->
+
                                    </div>
+
                                    <!--/.container-->
+
                                </section>
+
                                <section class="text-center pb-3">
+
                                    <div class="background-holder overlay overlay-2" style="background-image:url(assets/images/footer-bg.jpg);background-position: top;"> </div>
+
                                    <!--/.background-holder-->
+
                                    <div class="container">
+
                                        <div class="row justify-content-center">
+
                                            <div class="col-12">
+
                                                <h4 class="mb-2 color-white">Join the
+
                                                    <em>Hideaway </em>Newsletters</h4>
+
                                                    <p class="mb-0 color-9">Subscribe to our mailing list to receive updates and promotional offers.</p>
+
                                                </div>
+
                                                <div class="col-md-10 col-lg-7 col-xl-5 mt-4">
+
                                                    <form method="post">
+
                                                        <div class="row align-items-center no-gutters">
+
                                                            <div class="col-md-8 px-2">
+
                                                                <input class="form-control" type="hidden" name="to" value="username@domain.extension" />
+
                                                                <input class="form-control border-color-white" type="text" placeholder="Enter Email Here" /> </div>
+
                                                                <div class="col-md-4 px-2 mt-3 mt-md-0">
+
                                                                    <button class="btn btn-block btn-white" type="submit">
+
                                                                        <span>Submit</span>
+
                                                                    </button>
+
                                                                </div>
+
                                                            </div>
+
                                                        </form>
+
                                                    </div>
+
                                                </div>
+
                                                <div class="row mt-8 fs--1">
+
                                                    <div class="col-lg-auto ml-lg-auto order-lg-2 mb-2 mb-lg-0">
+
                                                        <a class="d-inline-block mx-2 color-8" href="#">Home</a>
+
                                                        <a class="d-inline-block mx-2 color-8" href="#">Book Now</a>
+
                                                        <a class="d-inline-block mx-2 color-8" href="#">Contact</a>
+
                                                        <a class="d-inline-block mx-2 color-8" href="#">Events</a>
+
                                                        <a class="d-inline-block mx-2 color-8" href="#">Policies</a>
+
                                                        <a class="d-inline-block mx-2 color-8" href="#">Term + Conditions</a>
+
                                                    </div>
+
                                                    <div class="col-lg text-lg-left">
+
                                                        <div class="color-8">&copy; Hideaway 2018 | Template crafted by
+
                                                            <a class="color-8" href="https://themewagon.com/" target="_blank">Themewagon</a>
+
                                                        </div>
+
                                                    </div>
+
                                                </div>
+
                                                <!--/.row-->
+
                                            </div>
+
                                            <!--/.container-->
+
                                        </section>
+
                                    </main>
+
                                    <!--  -->
+
                                    <!--    JavaScripts-->
+
                                    <!--    =============================================-->
+
                                    <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
+
                                    <script src="assets/lib/jquery/dist/jquery.min.js"></script>
+
                                    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
+
                                    <script src="assets/lib/bootstrap/dist/js/bootstrap.min.js"></script>
+
                                    <script src="assets/js/googlemap.js"></script>
+
                                   
+
                                    <script src="assets/lib/imagesloaded/imagesloaded.pkgd.min.js"></script>
+
                                    <script src="assets/lib/jquery-menu-aim/jquery.menu-aim.js"></script>
+
                                    <script src="assets/lib/gsap/src/minified/TweenMax.min.js"></script>
+
                                    <script src="assets/lib/gsap/src/minified/plugins/ScrollToPlugin.min.js"></script>
+
                                    <script src="assets/lib/CustomEase.min.js"></script>
+
                                    <script src="assets/js/config.js"></script>
+
                                    <script src="assets/lib/rellax/rellax.min.js"></script>
+
                                    <script src="assets/js/zanimation.js"></script>
+
                                    <script src="assets/js/inertia.js"></script>
+
                                    <script src="assets/lib/lightbox2/dist/js/lightbox.js"></script>
+
                                    <script src="assets/lib/flexslider/jquery.flexslider-min.js"></script>
+
                                    <script src="assets/js/core.js"></script>
+
                                    <script src="assets/js/main.js"></script>
+
                                    <script src="assets/js/particleanimate.js"></script>
+
                                </body>
+
 
+
 
+
 
+
 
</html>
 
</html>

Revision as of 18:11, 21 October 2019

iGEM Tsinghua

Ⅲ. A User-Interface for Our Modeling

User-Interface

interactions

To give you a more intuitive understanding of the phase separation process and the effect of phase separation on the rate of enzymatic reactions, we have made an interactive interface. You can choose the different strengths of interactions between separation elements and different enzyme concentrations to see how the phase separation proceeds and how the rate of the enzymatic reaction changes.

The computation of enzymatic reaction rate changes in the user-interface is based on formula (2.17), which we made some modifications to. First, we assume that every protein cluster forms a real phase, which means 𝜒𝑖=1 for all 𝑖’s. Then, we get

If we denote by 𝑆1 the specific surface area of protein clusters (the ratio of surface area to volume) after phase separation and 𝑆0 the specific surface area of protein all protein particles before phase separation, one will find the term 𝑞1/30𝑛𝑖=1𝑞2/3𝑖 is exactly equal to 𝑆1/𝑆0. We can use this relationship to extend the application of equation (3.1) to the case where the shape of the protein phase is arbitrary (i.e., not necessarily a sphere), just by replacing the term 𝑞1/30𝑛𝑖=1𝑞2/3𝑖 with 𝑆1/𝑆0. The phase-separated images are two-dimensional, where we can only obtain the ratio of the perimeter to the area of the protein phase (denoted by 𝐶1 and 𝐶0 after and before the phase separation respectively) rather than the surface area to volume ratio. We can roughly estimate the relationship between the two ratios using the relationship 3𝐶1/𝐶0=2𝑆1/𝑆0. Therefore, we can rewrite (3.1) as

The value of 𝐶1 can be calculated via image processing programs, while the value of 𝐶0 can be inferred from the size of protein particles after scaling to the same scale as the image where we calculate 𝐶1.

Since there is not much prior knowledge of the solubility difference of the substrate between in the cytoplasm and in the phase, we conservatively assume that 𝑘𝑓=1. As discussed previously, the term 1−𝑒−𝜆𝑉01/3 is the orientation factor. The orientation factors of different chemical reactions vary greatly, and the orientation factor data of enzymatic reactions are lacking. But as a proof of concept, we don’t need to be that precise and hence we can roughly estimate the orientation factor to be 1×10-3.

Thanks for your support !