|
|
| (48 intermediate revisions by 3 users not shown) |
| Line 3: |
Line 3: |
| | | | |
| | <head> | | <head> |
| − | <title>Background - TAS Taipei iGEM Wiki</title> | + | <title>Project</title> |
| | + | |
| | <style type='text/css'> | | <style type='text/css'> |
| | #top_title, #sideMenu { | | #top_title, #sideMenu { |
| Line 16: |
Line 17: |
| | } | | } |
| | | | |
| − | | + | p { |
| − | </style>
| + | font-family: Lato !important; |
| − | </head>
| + | font-size: 17px !important |
| − | | + | |
| − | <body data-spy="scroll" data-target="#category_navbar">
| + | |
| − | <link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
| + | |
| − | <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
| + | |
| − | <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
| + | |
| − | | + | |
| − | <script>localStorage.clear();</script>
| + | |
| − | <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
| + | |
| − | <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
| + | |
| − | | + | |
| − | <script type="text/javascript" async
| + | |
| − | src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML"> | + | |
| − | </script>
| + | |
| − | | + | |
| − | <script type="text/x-mathjax-config">
| + | |
| − | MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
| + | |
| − | </script>
| + | |
| − | | + | |
| − | <style type='text/css'>
| + | |
| − | p {
| + | |
| − | font-family: Lato !important;
| + | |
| − | font-size: 17px !important
| + | |
| − | }
| + | |
| − | | + | |
| − | h1 {
| + | |
| − | font-size: 40 -px !important;
| + | |
| − | }
| + | |
| − | | + | |
| − | body {
| + | |
| − | font-family: Lato !important;
| + | |
| − | }
| + | |
| − | | + | |
| − | h3 {
| + | |
| − | font-size: 25 -px
| + | |
| − | </style>
| + | |
| − | | + | |
| − | <div class="container" style='z-index:10;position:relative;'>
| + | |
| − | <!--
| + | |
| − | <div class="row center-block" style="text-align: left;">
| + | |
| − | <nav style='font-family:Lato;font-size:22px;background-color:#1C77C3;-webkit-transform: translateZ(0);z-index: 100;position: fixed;box-shadow: 0px 0px 10px black;'>
| + | |
| − | <ul style='margin-left:0px'>
| + | |
| − | <li class="dropdown">
| + | |
| − | <a href="https://2016.igem.org/Team:TAS_Taipei/Background"><h4 class="dropdown-toggle disabled"
| + | |
| − | data-toggle="dropdown"><b>PROJECT</b>
| + | |
| − | </h4></a>
| + | |
| − | <div class="dropdown-menu">
| + | |
| − | <div class='subcategories_container'>
| + | |
| − | <div>
| + | |
| − | <h5><a href="https://2016.igem.org/Team:TAS_Taipei/Background">Background</a></h5>
| + | |
| − | </div>
| + | |
| − | <div>
| + | |
| − | <h5><a href="https://2016.igem.org/Team:TAS_Taipei/Achievements">Achievements</a></h5>
| + | |
| − | </div>
| + | |
| − | <div>
| + | |
| − | <h5><a href="https://2016.igem.org/Team:TAS_Taipei/Collaborations">Collaborations</a>
| + | |
| − | </h5>
| + | |
| − | </div>
| + | |
| − | <div>
| + | |
| − | <h5><a href="https://2016.igem.org/Team:TAS_Taipei/Parts">Parts</a></h5>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | <div style='height:140px;'>
| + | |
| − | <img src="https://static.igem.org/mediawiki/2016/1/11/T--TAS_Taipei--TAS_Icon_Project.png">
| + | |
| − | <h4><b>Cataracts</b> - the leading cause of blindness. Find out how we can non-invasively
| + | |
| − | <b>treat</b> and <b>prevent</b> cataract formation.</b></h4>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | </div>
| + | |
| − | </li>
| + | |
| − | <li class="dropdown">
| + | |
| − | <a href="https://2016.igem.org/Team:TAS_Taipei/Experimental_Summary"><h4
| + | |
| − | class='dropdown-toggle disabled' data-toggle="dropdown"><b>EXPERIMENTAL</b></h4></a>
| + | |
| − | <div class="dropdown-menu">
| + | |
| − | <div class='subcategories_container'>
| + | |
| − | <div>
| + | |
| − | <h5><a href="https://2016.igem.org/Team:TAS_Taipei/Experimental_Summary#lensmodel">Lens
| + | |
| − | Cataract Model</a></h5>
| + | |
| − | </div>
| + | |
| − | <div>
| + | |
| − | <h5><a href="https://2016.igem.org/Team:TAS_Taipei/Experimental_Summary#construct">Prevention
| + | |
| − | and Treatment Constructs </a></h5>
| + | |
| − | </div>
| + | |
| − | <div>
| + | |
| − | <h5><a href="https://2016.igem.org/Team:TAS_Taipei/Experimental_Summary#prototype">Delivery
| + | |
| − | Prototype</a></h5>
| + | |
| − | </div>
| + | |
| − | <div>
| + | |
| − | <h5><a href="https://2016.igem.org/Team:TAS_Taipei/Notebook">Notebook</a></h5>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | <div style='height:140px;'>
| + | |
| − | <img src="https://static.igem.org/mediawiki/2016/b/b0/T--TAS_Taipei--TAS_Icon_Experiments.png">
| + | |
| − | <h4>We build <b>constructs</b> to make our great ideas become reality. Follow along our
| + | |
| − | discovery of exciting science!</h4>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | </li>
| + | |
| − | <li class="dropdown">
| + | |
| − | <a href="https://2016.igem.org/Team:TAS_Taipei/Model"><h4 class='dropdown-toggle disabled'
| + | |
| − | data-toggle="dropdown"><b>MODEL</b></h4>
| + | |
| − | </a>
| + | |
| − | <div class="dropdown-menu">
| + | |
| − | <div class='subcategories_container'>
| + | |
| − | <div>
| + | |
| − | <h5><a href="https://2016.igem.org/Team:TAS_Taipei/Model#GSRFunc">GSR Function</a></h5>
| + | |
| − | </div>
| + | |
| − | <div>
| + | |
| − | <h5><a href="https://2016.igem.org/Team:TAS_Taipei/Model#prototype">Prototype
| + | |
| − | Delivery</a></h5>
| + | |
| − | </div>
| + | |
| − | <div>
| + | |
| − | <h5><a href="https://2016.igem.org/Team:TAS_Taipei/Model#treatment">CH25H Treatment</a>
| + | |
| − | </h5>
| + | |
| − | </div>
| + | |
| − | <div>
| + | |
| − | <h5><a href="https://2016.igem.org/Team:TAS_Taipei/Model#software">Calculator</a></h5>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | </div>
| + | |
| − | <div style='height:140px;'>
| + | |
| − | <img src="https://static.igem.org/mediawiki/2016/c/ca/T--TAS_Taipei--TAS_Icon_Model.png">
| + | |
| − | <h4><b>Computational Biology</b> provides us models that we cannot easily test
| + | |
| − | experimentally. Click to find out the results of our modeling, and the math behind it!
| + | |
| − | </h4>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | </li>
| + | |
| − | <li class="dropdown">
| + | |
| − | <a href="https://2016.igem.org/Team:TAS_Taipei/Human_Practices"><h4 class='dropdown-toggle disabled'
| + | |
| − | data-toggle="dropdown"><b>HUMAN
| + | |
| − | PRACTICE</b></h4></a>
| + | |
| − | <div class="dropdown-menu">
| + | |
| − | <div class='subcategories_container'>
| + | |
| − | <div>
| + | |
| − | <h5><a href="https://2016.igem.org/Team:TAS_Taipei/Human_Practices#research">Research</a>
| + | |
| − | </h5>
| + | |
| − | </div>
| + | |
| − | <div>
| + | |
| − | <h5><a href="https://2016.igem.org/Team:TAS_Taipei/Human_Practices#outreach">Outreach</a>
| + | |
| − | </h5>
| + | |
| − | </div>
| + | |
| − | <div>
| + | |
| − | <h5><a href="https://2016.igem.org/Team:TAS_Taipei/Human_Practices#impact">Impact</a>
| + | |
| − | </h5>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | <div style='height:140px;'>
| + | |
| − | <img src="https://static.igem.org/mediawiki/2016/b/b9/T--TAS_Taipei--TAS_Icon_HP.png">
| + | |
| − | <h4>We don't just grow cool bacteria. We make a <b>difference</b>. Find out how we tackled
| + | |
| − | <b>social aspects</b> of this project.</h4>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | </li>
| + | |
| − | <li class="dropdown">
| + | |
| − | <a href="https://2016.igem.org/Team:TAS_Taipei/Safety"><h4 class='dropdown-toggle disabled'
| + | |
| − | data-toggle="dropdown"><b>SAFETY</b></h4>
| + | |
| − | </a>
| + | |
| − | <div class="dropdown-menu">
| + | |
| − | <div style='height:100px;'>
| + | |
| − | <div class='subcategories_container'>
| + | |
| − | <div>
| + | |
| − | <h5><a href="https://2016.igem.org/Team:TAS_Taipei/Safety#overview">Overview</a></h5>
| + | |
| − | </div>
| + | |
| − | <div>
| + | |
| − | <h5><a href="https://2016.igem.org/Team:TAS_Taipei/Safety#biosafety">Biosafety</a>
| + | |
| − | </h5>
| + | |
| − | </div>
| + | |
| − | <div>
| + | |
| − | <h5><a href="https://2016.igem.org/Team:TAS_Taipei/Safety#riskreduction">Risk
| + | |
| − | Reduction Methods</a></h5>
| + | |
| − | </div>
| + | |
| − | <div>
| + | |
| − | <h5><a href="https://2016.igem.org/Team:TAS_Taipei/Safety#furtherquestion">Further
| + | |
| − | Questions</a></h5>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | <img src="https://static.igem.org/mediawiki/2016/7/7e/T--TAS_Taipei--TAS_Icon_Safety.png">
| + | |
| − | <h4><b>Safety first.</b> Especially in a lab. Here's how we maintained and investigated the
| + | |
| − | integrity and security of our work environment.</h4>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | </li>
| + | |
| − | <li class="dropdown">
| + | |
| − | <a href="https://2016.igem.org/Team:TAS_Taipei/Team"><h4 class='dropdown-toggle disabled'
| + | |
| − | data-toggle="dropdown"><b>TEAM</b></h4></a>
| + | |
| − | <div class="dropdown-menu">
| + | |
| − | <div class='subcategories_container'>
| + | |
| − | <div>
| + | |
| − | <h5><a href="https://2016.igem.org/Team:TAS_Taipei/Team#members">Members</a></h5>
| + | |
| − | </div>
| + | |
| − | <div>
| + | |
| − | <h5><a href="https://2016.igem.org/Team:TAS_Taipei/Team#about">About</a></h5>
| + | |
| − | </div>
| + | |
| − | <div>
| + | |
| − | <h5><a href="https://2016.igem.org/Team:TAS_Taipei/Attributions">Attributions</a></h5>
| + | |
| − | </div>
| + | |
| − | <div>
| + | |
| − | <h5><a href="https://2016.igem.org/Team:TAS_Taipei/Wiki_Standard_Pages">Wiki Standard
| + | |
| − | Pages</a></h5>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | <div style='height:140px;'>
| + | |
| − | <img src="https://static.igem.org/mediawiki/2016/c/c6/T--TAS_Taipei--TAS_Icon_Team.png">
| + | |
| − | <h4>Every iGEM project is the accumulation of an entire year's hard work by a group of
| + | |
| − | cheerful students. <b>Meet the team!</b></h4>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | </li>
| + | |
| − | </ul>
| + | |
| − | </nav>
| + | |
| − | </div>
| + | |
| − | <br>
| + | |
| − | <br>
| + | |
| − | <br>
| + | |
| − | -->
| + | |
| − | <!--
| + | |
| − | <div class="row center-block" style="padding:10px;width:90%;background-color:#07BEB8;box-shadow:0px 0px 5px black">
| + | |
| − | <div class="row" style="text-align:center;">
| + | |
| − | <div class="col-sm-2">
| + | |
| − | <a href="https://2016.igem.org/Team:TAS_Taipei" style='text-decoration: none'><img src="https://static.igem.org/mediawiki/2016/c/c6/T--TAS_Taipei--TAS_iGEM_Logo.png
| + | |
| − | " alt="" style="width: 100px;"></a>
| + | |
| − | </div>
| + | |
| − | <div class="col-sm-8" style='text-align:center;'>
| + | |
| − | <a href="https://2016.igem.org/Team:TAS_Taipei" style='text-decoration: none;'>
| + | |
| − | <h2 style="font-family:'Lato';letter-spacing:10px;color: white; font-size: 60px; margin-top: 0; margin-bottom: 0;">
| + | |
| − | <b>
| + | |
| − | C◎UNTERACTS</b></h2>
| + | |
| − | </a>
| + | |
| − | </div>
| + | |
| − | <div class="col-sm-2">
| + | |
| − | <a href="https://igem.org/HS"><img
| + | |
| − | src="https://static.igem.org/mediawiki/2016/6/6e/T--TAS_Taipei--TAS_Icon_Logo2.png" alt=""
| + | |
| − | style="width: 100px;"></a>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | <br>
| + | |
| − | -->
| + | |
| − | <div class="row card" id='bodycontainer' class='row'>
| + | |
| − | <div class="col-sm-2" style='padding-left:5% padding-right:10%'>
| + | |
| − | <div id="category_navbar">
| + | |
| − | <ul class="nav nav-list" data-spy="affix" data-offset-top="160"
| + | |
| − | style='-webkit-transform: translateZ(0);width:160px;margin-left:0'>
| + | |
| − | | + | |
| − | <li><a href="#Background">Background</a></li>
| + | |
| − | <li><a href="#Purpose">Purpose</a></li>
| + | |
| − | <li><a href="#Overview">Overview of the project</a></li>
| + | |
| − | <li><a href="#Goal">Our goal</a></li>
| + | |
| − | | + | |
| − | </ul>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | </div>
| + | |
| − | | + | |
| − | | + | |
| − | <div class="col-sm-10" style="padding-right:5%">
| + | |
| − | <div class="row">
| + | |
| − | <div class="col-sm-12">
| + | |
| − | <h1 id='Background'>Background</h1>
| + | |
| − | <p>Bear bile, one of the most famous animal drugs in Traditional Chinese Medicine (TCM), has been recorded in ancient Chinese medicine book as a significant method to treat hepatic and biliary disorders. UDCA, the effective ingredient of bear bile.Aside from the traditional use of bear bile in Chinese medicine, UDCA(ursodeoxycholic acid), the effective ingredient of bear bile acid, has a much larger pharmaceutical application. As well as the usage of UDCA in dissolving gallstone, its efficacy in primary biliary cirrhosis and primary sclerosing cholangitis (PSC) as an adjunct to medical therapy has been well established. Newer indications include its use in the management of chronic hepatitis, cirrhosis, post liver transplant rejection, graft-versus-host disease and acute viral hepatitis, where it not only relieves symptoms of cholestasis but also arrests ongoing hepatocyte necrosis. However, the increasing demand for bear bile has caused bears to be in an endangered state: bear poaching and illegal animal trade have greatly dwindled the number of the wild Asiatic black bear. Apart from that, bear bile farming industry in Asia extracts bile through “milking” from the bears, which is operated through surgically implanting a permanent catheter in the animal's gallbladder to obtain the drips. It is unquestionable that the bear bile farming process will lead to both physical and psychological damage in bears. </p>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <div class="row">
| + | |
| − | <div class="col-sm-12">
| + | |
| − | <h1 id='Purpose'>Purpose</h1>
| + | |
| − | <p>To find substitute or alternative for bear bile farming, our team will be working on the biological synthesis of the main effective component of this important medicine, UDCA(Ursodeoxycholic Acid). This biological approach will not only be more efficient but also be cheaper than the original chemical approach, which is widely used in the current UDCA synthesis industry. </p>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <div class="row">
| + | |
| − | <div class="col-sm-12">
| + | |
| − | <h1 id='Overview'>Overview of the project</h1>
| + | |
| − | <p>We found that it is possible to convert the main component of poultry bile, CDCA(Chenodeoxycholic Acid), into UDCA, by employing two enzyme-catalyzed the reactions. First, two enzymes was employed to manage the transformation of CDCA to 7oxo-LCA. In the present of 7a-HSD(7alpha-hydroxysteroid dehydrogenase), CDCA is transformed in to 7oxo-LCA by loosing a pair of hydrogen(2H+ and 2e-), the pair of hydrogen is added to NAD+, the cofactor and the acceptor. The NAD+ is transformed into NADH during the reaction. To regenerate the NAD+ and recycle the reaction, to , the LDH(Lactate dehydrogenase) works on pyruvate and take the pair of hydrogen from NADH and transform the pyruvate to lactate and NADH to NAD+.</p>
| + | |
| − | <p>In the second step, the 7oxo-LCA is transformed to UDCA by 7β-HSDH(7beta-hydroxysteroid dehydrogenase)and GDH(glutamate dehydrogenase).The 7β-HSDH works on 7oxo-LCA and take a pair of hydrogen from NADPH(the cofactor for the second step)and add it to 7oxo-LCA and form a beta position 7-hydroxyl group, which is our target product UDCA. The GDH works on glucose and take a pair of hydrogen from it and add it to the NADP+, to form NADPH to manage the regeneration of cofactor NADPH for the second step.</p>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <div class="row">
| + | |
| − | <div class="col-sm-12">
| + | |
| − | <h1 id='Goal'>Our goal</h1>
| + | |
| − | <p>Our mission is to expression of the four enzymes 7α-HSDH (from ecoli DH5a), 7β-HSDH (from Ruminococcus Torques), GDH (from Bacillus subtilis), and LDH from (Lactobacillus delbruechii subsp. Bulgaricus)and test their activities. By adding the CBD( cellulose binding domain)sequnence to the plasmid we construct, we manage to bind our enzyme on gauze. This specific design excels in 3 specific ways: first, by controlling the presence of the gauze in the solution, we can control the process of the reaction. Second, when the target enzyme is bound to cellulose we manage to purify the protein we express. Third, the enzyme binding gauze is employed to a machine including the reaction efficiency measuring system and the enzyme addition controlling system .</p>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | <br>
| + | |
| − | <br>
| + | |
| − | <br>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <br>
| + | |
| − | <br>
| + | |
| − | <br>
| + | |
| − | <!--
| + | |
| − | <canvas id="canvas-container" style="z-index:-1"></canvas>
| + | |
| − | <style type='text/css'>
| + | |
| − | #bg {
| + | |
| − | position: fixed;
| + | |
| − | top: 0;
| + | |
| − | left: 0;
| + | |
| − | }
| + | |
| − | | + | |
| − | .bgwidth {
| + | |
| − | width: 100%;
| + | |
| − | }
| + | |
| − | | + | |
| − | .bgheight {
| + | |
| − | height: 100%;
| + | |
| − | }
| + | |
| − | </style>
| + | |
| − | | + | |
| − | <div class="backgroundpic">
| + | |
| − | <img src="https://static.igem.org/mediawiki/2016/e/e5/T--TAS_Taipei--Taipei_Background_1.0.jpg" style="z-index:0"
| + | |
| − | width="100%" height="100%" id="bg" alt="">
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <script>
| + | |
| − | var nowRadius = 0
| + | |
| − | $(function () {
| + | |
| − | if (screen.width > 1800)
| + | |
| − | $("#slideoutco").fadeOut(0);
| + | |
| − | | + | |
| − | $({blurRadius: 0}).animate({blurRadius: 10}, {
| + | |
| − | duration: 20000,
| + | |
| − | easing: 'swing', // or "linear"
| + | |
| − | // use jQuery UI or Easing plugin for more options
| + | |
| − | step: function () {
| + | |
| − | console.log(this.blurRadius);
| + | |
| − | if ($("#bluebutton").hasClass("isOn")) {
| + | |
| − | return;
| + | |
| − | }
| + | |
| − | ;
| + | |
| − | if ($('#redbutton').hasClass("isOn")) {
| + | |
| − | return;
| + | |
| − | }
| + | |
| − | $('.backgroundpic').css({
| + | |
| − | "-webkit-filter": "blur(" + this.blurRadius + "px)",
| + | |
| − | "filter": "blur(" + this.blurRadius + "px)"
| + | |
| − | | + | |
| − | });
| + | |
| − | nowRadius = this.blurRadius;
| + | |
| − | var LOCSnum = Math.round(nowRadius * 6 / 9);
| + | |
| − | var NineLOCSnum = Math.round(nowRadius * 6 / 9 * 10);
| + | |
| − | /**if (NineLOCSnum > 20) switchMessage("YELLOW","<b> Oh no! </b> Cataracts are forming! Click on the Eyedrop Tab and get <b>TREATMENT</b> eyedrops!", currentColor()=="GREEN");
| + | |
| − | if (NineLOCSnum == 55) $("#slideoutco").fadeOut(1000);
| + | |
| − | if (NineLOCSnum > 60) switchMessage("RED","Your cataracts are very severe. You need to get TREATMENT fast by clicking the Eyedrop Tab", currentColor()=="YELLOW");*/
| + | |
| − | if (LOCSnum > 6) {
| + | |
| − | LOCSnum = "6+";
| + | |
| − | $('#LOCS').text(LOCSnum + "");
| + | |
| − | }
| + | |
| − | else $('#LOCS').text(LOCSnum + "");
| + | |
| − | | + | |
| − | if (LOCSnum == 0) document.getElementById('bluebutton').click();
| + | |
| − | }
| + | |
| − | });
| + | |
| − | | + | |
| − | });
| + | |
| − | | + | |
| − | startBlur = function (speed) {
| + | |
| − | $({blurRadius: nowRadius}).animate({blurRadius: 10}, {
| + | |
| − | duration: speed,
| + | |
| − | easing: 'swing', // or "linear"
| + | |
| − | // use jQuery UI or Easing plugin for more options
| + | |
| − | step: function () {
| + | |
| − | console.log(this.blurRadius);
| + | |
| − | if ($("#bluebutton").hasClass("isOn")) {
| + | |
| − | return;
| + | |
| − | }
| + | |
| − | ;
| + | |
| − | if ($('#redbutton').hasClass("isOn")) {
| + | |
| − | return;
| + | |
| − | }
| + | |
| − | | + | |
| − | $('.backgroundpic').css({
| + | |
| − | "-webkit-filter": "blur(" + this.blurRadius + "px)",
| + | |
| − | "filter": "blur(" + this.blurRadius + "px)"
| + | |
| − | | + | |
| − | });
| + | |
| − | | + | |
| − | nowRadius = this.blurRadius;
| + | |
| − | var LOCSnum = Math.round(nowRadius * 6 / 9);
| + | |
| − | var NineLOCSnum = Math.round(nowRadius * 6 / 9 * 10);
| + | |
| − | /**if (NineLOCSnum == 15) $("#slideoutco").fadeOut(400);
| + | |
| − | if (NineLOCSnum > 20) switchMessage("RED","<b>Cataracts</b> are creeping back again! Click the PREVENTION eyedrop to add GSR into your eyes!", currentColor()=="BLUE");*/
| + | |
| − | if (LOCSnum > 6) {
| + | |
| − | LOCSnum = "6+";
| + | |
| − | $('#LOCS').text(LOCSnum + "");
| + | |
| − | }
| + | |
| − | else $('#LOCS').text(LOCSnum + " ");
| + | |
| − | | + | |
| − | | + | |
| − | }
| + | |
| − | });
| + | |
| − | };
| + | |
| − | | + | |
| − | stopBlur = function (speed) {
| + | |
| − | | + | |
| − | $({blurRadius: nowRadius}).animate({blurRadius: 0}, {
| + | |
| − | duration: speed,
| + | |
| − | easing: 'swing', // or "linear"
| + | |
| − | // use jQuery UI or Easing plugin for more options
| + | |
| − | step: function () {
| + | |
| − | console.log(this.blurRadius);
| + | |
| − | if ($("#redbutton").hasClass("isOn")) {
| + | |
| − | } else {
| + | |
| − | return;
| + | |
| − | }
| + | |
| − | ;
| + | |
| − | $('.backgroundpic').css({
| + | |
| − | "-webkit-filter": "blur(" + this.blurRadius + "px)",
| + | |
| − | "filter": "blur(" + this.blurRadius + "px)"
| + | |
| − | | + | |
| − | });
| + | |
| − | nowRadius = this.blurRadius;
| + | |
| − | var LOCSnum = Math.round(nowRadius * 6 / 9);
| + | |
| − | var NineLOCSnum = Math.round(nowRadius * 6 / 9 * 10);
| + | |
| − | | + | |
| − | /**if (NineLOCSnum < 68){ if (NineLOCSnum > 10) if(currentColor()=="RED" || currentColor() == "BLUE") $("#slideoutco").fadeOut(0); switchMessage("YELLOW","<b> Treating</b> your cataract with <b>25HC Eyedrops </b>", currentColor()=="RED");
| + | |
| − | }
| + | |
| − | if (NineLOCSnum == 9) $("#slideoutco").fadeOut(0);
| + | |
| − | | + | |
| − | | + | |
| − | if (NineLOCSnum < 5) {
| + | |
| − | if ($("#bluebutton").hasClass("isOn")){
| + | |
| − | | + | |
| − | switchMessage("GREEN","<b>Your eyes are <i>pernamently</i> crystal clear!</b> Treatment is not needed, so don't forget to turn it off!. Click the question mark to learn more.", currentColor()=="BLUE")
| + | |
| − | }
| + | |
| − | else switchMessage("BLUE","Your eyes are crystal clear! To avoid waste, please turn off the <b>TREATMENT</b> eyedrop.", currentColor()=="YELLOW");
| + | |
| − | }*/
| + | |
| − | if (LOCSnum > 6) LOCSnum = "6+";
| + | |
| − | else LOCSnum = LOCSnum + " ";
| + | |
| − | $('#LOCS').text(LOCSnum + "");
| + | |
| − | | + | |
| − | }
| + | |
| − | });
| + | |
| − | | + | |
| − | | + | |
| − | };
| + | |
| − | | + | |
| − | function chooseBlur() {
| + | |
| − | if ($("#redbutton").hasClass("isOn")) {
| + | |
| − | stopBlur(4500);
| + | |
| − | | + | |
| | } | | } |
| | | | |
| − | else { | + | h1 { |
| − | if ($("#bluebutton").hasClass("isOn")) { | + | font-size: 40 -px !important; |
| − | }
| + | |
| − | else {
| + | |
| − | startBlur(12000);
| + | |
| − | }
| + | |
| | } | | } |
| − | /**if (!$("#redbutton").hasClass("isOn"))
| |
| − | if ($("#bluebutton").hasClass("isOn"))
| |
| − | {
| |
| − | $("#slideoutco").fadeOut(0);
| |
| − | switchMessage("BLUE","Great! Furthur cataract formation is prevented with GSR Eyedrops. Now use <b>TREATMENT</b> eyedrops one last time.", currentColor()=="RED")
| |
| − | }*/
| |
| − | };
| |
| | | | |
| − | | + | body { |
| − | </script>
| + | font-family: Lato !important; |
| − | -->
| + | |
| − | <!--
| + | |
| − | <script>
| + | |
| − | | + | |
| − | function switchToggleB() {
| + | |
| − | if ($("#bluebutton").hasClass("isOn")) { | + | |
| − | $("#bluebutton").removeClass("isOn"); | + | |
| | } | | } |
| − | else {
| |
| − | $("#bluebutton").addClass("isOn");
| |
| − | }
| |
| − | };
| |
| | | | |
| − | function switchToggleR() {
| + | h3 { |
| − | if ($("#redbutton").hasClass("isOn")) { | + | font-size: 25 -px; |
| − | $("#redbutton").removeClass("isOn"); | + | |
| | } | | } |
| − | else {
| |
| − | $("#redbutton").addClass("isOn");
| |
| − | }
| |
| − | };
| |
| | | | |
| − | function currentColor() {
| + | #bg { |
| − | if ($("#slidecontenttext").hasClass("alert-danger")) | + | position: fixed; |
| − | return "RED";
| + | z-index: -1; |
| − | if ($("#slidecontenttext").hasClass("alert-warning"))
| + | top: 0; |
| − | return "YELLOW";
| + | left: 0; |
| − | if ($("#slidecontenttext").hasClass("alert-info"))
| + | |
| − | return "BLUE";
| + | |
| − | if ($("#slidecontenttext").hasClass("alert-success"))
| + | |
| − | return "GREEN";
| + | |
| − | else return "NONE"
| + | |
| − | };
| + | |
| − | | + | |
| − | function switchMessage(color, textInside, refresh) {
| + | |
| − | var entirebox = document.getElementById("slideoutco");
| + | |
| − | | + | |
| − | if (refresh) {
| + | |
| − | $(entirebox).fadeOut(100); | + | |
| − | if ($("#slidecontenttext").hasClass("alert-danger")) | + | |
| − | $("#slidecontenttext").removeClass("alert-danger");
| + | |
| − | if ($("#slidecontenttext").hasClass("alert-warning")) | + | |
| − | $("#slidecontenttext").removeClass("alert-warning");
| + | |
| − | if ($("#slidecontenttext").hasClass("alert-info"))
| + | |
| − | $("#slidecontenttext").removeClass("alert-info");
| + | |
| − | if ($("#slidecontenttext").hasClass("alert-success"))
| + | |
| − | $("#slidecontenttext").removeClass("alert-success");
| + | |
| − | if (color == "RED")
| + | |
| − | $("#slidecontenttext").addClass("alert-danger");
| + | |
| − | if (color == "YELLOW")
| + | |
| − | $("#slidecontenttext").addClass("alert-warning");
| + | |
| − | if (color == "BLUE")
| + | |
| − | $("#slidecontenttext").addClass("alert-info");
| + | |
| − | if (color == "GREEN")
| + | |
| − | $("#slidecontenttext").addClass("alert-success");
| + | |
| − | | + | |
| − | | + | |
| − | $("#slidecontenttext").html(textInside);
| + | |
| − | $(entirebox).fadeIn(500); | + | |
| | } | | } |
| | | | |
| − | };
| + | #bodycontainer { |
| − | | + | background: rgba(255, 255, 255, 0.5); |
| − | | + | |
| − | </script>
| + | |
| − | | + | |
| − | | + | |
| − | <canvas id="canvas-container" style="z-index:-1" hidden></canvas>
| + | |
| − | -->
| + | |
| − | <!--
| + | |
| − | <script type="text/javascript">
| + | |
| − | /* Toggle between adding and removing the "active" and "show" classes when the user clicks on one of the "Section" buttons. The "active" class is used to add a background color to the current button when its belonging panel is open. The "show" class is used to open the specific accordion panel */
| + | |
| − | var acc = document.getElementsByClassName("accordion");
| + | |
| − | var i;
| + | |
| − | | + | |
| − | for (i = 0; i < acc.length; i++) {
| + | |
| − | acc[i].onclick = function () { | + | |
| − | this.classList.toggle("active"); | + | |
| − | this.nextElementSibling.classList.toggle("show");
| + | |
| | } | | } |
| − | } | + | </style> |
| − | </script> | + | <link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'> |
| − | <script type="text/javascript"> | + | <!-- 最新版本的 Bootstrap 核心 CSS 文件 --> |
| − | $("#category_navbar a").on('click', function (event) { | + | <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" |
| − | // Make sure this.hash has a value before overriding default behavior
| + | integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> |
| − | if (this.hash !== "") {
| + | |
| − | // Prevent default anchor click behavior
| + | |
| − | event.preventDefault();
| + | |
| | | | |
| − | // Store hash0
| |
| − | var hash = this.hash;
| |
| | | | |
| − | // Using jQuery's animate() method to add smooth page scroll
| + | <script>localStorage.clear();</script> |
| − | // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
| + | <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> |
| − | $('html, body').animate({
| + | <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" |
| − | scrollTop: $(hash).offset().top
| + | integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" |
| − | }, 800, function () { | + | crossorigin="anonymous"></script> |
| | | | |
| − | // Add hash (#) to URL when done scrolling (default click behavior)
| + | <script type="text/javascript" async |
| − | window.location.hash = hash;
| + | src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML"></script> |
| − | });
| + | <script type="text/x-mathjax-config"> |
| − | } // End if
| + | MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}}); |
| − | }); | + | |
| | | | |
| | | | |
| − | </script>
| |
| | | | |
| − | -->
| + | |
| − | <div id="slideout" style="display: none;">
| + | </script> |
| − | <div id="slidecontent"> | + | |
| − | <label class="switch">
| + | |
| − | <input id="bluebutton" onClick="switchToggleB(); chooseBlur()" type="checkbox">
| + | |
| − | <div class="slider round bluecolorbutton"></div>
| + | |
| − | </label>
| + | |
| − | <label class="switch">
| + | |
| − | <input id="redbutton" onClick="switchToggleR(); chooseBlur()" type="checkbox">
| + | |
| − | <div class="slider round redcolorbutton"></div>
| + | |
| − | </label>
| + | |
| − | </div>
| + | |
| − | </div> | + | |
| | | | |
| − | <style type='text/css'> | + | <script type="text/javascript"> |
| | | | |
| − | #slideout {
| + | $(document).ready(function () { |
| − | background: #FFD700;
| + | $("#category_navbar a").on('click', function (event) { |
| − | position: fixed;
| + | // Make sure this.hash has a value before overriding default behavior |
| − | height: 300px;
| + | if (this.hash !== "") { |
| − | width: 200px;
| + | // Prevent default anchor click behavior |
| − | top: 30%;
| + | event.preventDefault(); |
| − | right: -150px;
| + | |
| − | padding-left: 60px;
| + | |
| − | z-index: 30;
| + | |
| − | border-radius: 25px;
| + | |
| | | | |
| − | }
| + | // Store hash0 |
| | + | var hash = this.hash; |
| | | | |
| − | #slideoutco {
| + | // Using jQuery's animate() method to add smooth page scroll |
| − | position: fixed;
| + | // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area |
| − | height: 200px;
| + | $('html, body').animate({ |
| − | width: 300px;
| + | scrollTop: $(hash).offset().top |
| − | top: 78%;
| + | }, 800, function () { |
| − | right: 1%;
| + | |
| − | padding-left: 10px;
| + | |
| − | padding-right: 10px;
| + | |
| − | border-radius: 10px;
| + | |
| − | z-index: 30;
| + | |
| − | }
| + | |
| | | | |
| − | #clickme {
| + | // Add hash (#) to URL when done scrolling (default click behavior) |
| − | position: absolute;
| + | window.location.hash = hash; |
| − | top: 0;
| + | }); |
| − | left: 0;
| + | } // End if |
| − | height: 300px;
| + | }); |
| − | width: 50px; | + | }); |
| − | background: #FFBA49;
| + | |
| − | z-index: 30;
| + | |
| − | border-radius: 25px 5px 5px 25px;
| + | |
| − | }
| + | |
| | | | |
| − | #slidecontent {
| |
| − | float: left;
| |
| − | }
| |
| | | | |
| − | #slidecontentco { | + | </script> |
| − | float: left;
| + | |
| − | }
| + | |
| | | | |
| − | .vertical-text {
| + | </head> |
| − | transform: rotate(90deg);
| + | </head> |
| − | transform-origin: left bottom 0;
| + | |
| − | float: left;
| + | |
| − | }
| + | |
| | | | |
| − | /* The switch - the box around the slider */
| + | <body data-spy="scroll" data-target="#category_navbar"> |
| − | .switch {
| + | |
| − | position: relative;
| + | |
| − | display: inline-block;
| + | |
| − | width: 60px;
| + | |
| − | height: 34px;
| + | |
| − | }
| + | |
| | | | |
| − | /* Hide default HTML checkbox */
| + | <div class="container" style='z-index:10;position:relative;'> |
| − | .switch input {
| + | |
| − | display: none;
| + | |
| − | }
| + | |
| | | | |
| − | /* The slider */
| |
| − | .slider {
| |
| − | position: absolute;
| |
| − | cursor: pointer;
| |
| − | top: 0;
| |
| − | left: 0;
| |
| − | right: 0;
| |
| − | bottom: 0;
| |
| − | background-color: #ccc;
| |
| − | -webkit-transition: .4s;
| |
| − | transition: .4s;
| |
| − | }
| |
| | | | |
| − | .slider:before { | + | <div class="row card" id='bodycontainer' class='row'> |
| − | position: absolute;
| + | |
| − | content: "";
| + | |
| − | height: 26px;
| + | |
| − | width: 26px;
| + | |
| − | left: 4px;
| + | |
| − | bottom: 4px;
| + | |
| − | background-color: white;
| + | |
| − | -webkit-transition: .4s;
| + | |
| − | transition: .4s;
| + | |
| − | }
| + | |
| | | | |
| − | input:checked + .slider.bluecolorbutton {
| + | <nav class="navbar navbar-default navbar-static-top"> |
| − | background-color: #2196F3; | + | <!-- Brand and toggle get grouped for better mobile display --> |
| − | }
| + | <div class="navbar-header"> |
| | + | <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" |
| | + | data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> |
| | + | <span class="sr-only">Toggle navigation</span> |
| | + | <span class="icon-bar"></span> |
| | + | <span class="icon-bar"></span> |
| | + | <span class="icon-bar"></span> |
| | + | </button> |
| | + | <a class="navbar-brand" href="#"><img |
| | + | src="https://static.igem.org/mediawiki/2017/8/8c/%E5%91%80%E5%95%8A%E5%93%88.jpeg" width="100"></a> |
| | + | </div> |
| | | | |
| − | input:focus + .slider.bluecolorbutton {
| + | <!-- Collect the nav links, forms, and other content for toggling --> |
| − | box-shadow: 0 0 1px #2196F3;
| + | <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> |
| − | }
| + | <ul class="nav navbar-nav"> |
| | + | <li><a href="/Team:SDSZ-China">Home</a></li> |
| | + | <li><a href="/Team:SDSZ-China/Project">Project</a></li> |
| | + | <li><a href="/Team:SDSZ-China/Experiment">Experiment</a></li> |
| | + | <li><a href="/Team:SDSZ-China/Parts">Parts</a></li> |
| | + | <li><a href="/Team:SDSZ-China/Human_Practices">Human Practices</a></li> |
| | + | <li><a href="/Team:SDSZ-China/Safety">Safety</a></li> |
| | + | <li><a href="/Team:SDSZ-China/Hardware"> Hardware </a></li> |
| | | | |
| − | input:checked + .slider.redcolorbutton {
| + | </ul> |
| − | background-color: #FF0000;
| + | <ul class="nav navbar-nav navbar-right"> |
| − | }
| + | <li><a href="/Team:SDSZ-China/Team">Team and attributions</a></li> |
| | + | <li><a href="#">By SDSZ</a></li> |
| | + | </ul> |
| | + | </div><!-- /.navbar-collapse --> |
| | + | </nav> |
| | | | |
| − | input:focus + .slider.redcolorbutton {
| |
| − | box-shadow: 0 0 1px #FF0000;
| |
| − | }
| |
| | | | |
| − | input:checked + .slider:before {
| + | <div class="col-sm-12" style="padding-right:5%"> |
| − | -webkit-transform: translateX(26px); | + | |
| − | -ms-transform: translateX(26px);
| + | |
| − | transform: translateX(26px);
| + | |
| − | }
| + | |
| | | | |
| − | /* Rounded sliders */
| + | <br> |
| − | .slider.round {
| + | <br> |
| − | border-radius: 34px;
| + | |
| − | }
| + | |
| | | | |
| − | .slider.round:before {
| + | <div class="text-center"> |
| − | border-radius: 50%;
| + | <h1 class="text-danger">SDSZ - China</h1> |
| − | }
| + | <h4 class="text-default">Automatic Synthesize of UDCA(effective ingredient of bear bile) using immobilized enzymes.</h4> |
| | + | </div> |
| | | | |
| − | input[type=text] {
| + | <br> |
| − | width: 100%;
| + | <br> |
| − | padding: 12px 20px;
| + | <br> |
| − | margin: 8px 0;
| + | <br> |
| − | box-sizing: border-box;
| + | <br> |
| − | border: 3px solid #ccc;
| + | <br> |
| − | -webkit-transition: 0.5s;
| + | </div> |
| − | transition: 0.5s;
| + | </div> |
| − | outline: none;
| + | |
| − | }
| + | |
| − | | + | |
| − | input[type=text]:focus {
| + | |
| − | border: 3px solid #555;
| + | |
| − | }
| + | |
| − | </style> | + | |
| − | <script> | + | |
| − | $(function () {
| + | |
| − | var rightVal = -150;
| + | |
| − | | + | |
| − | $("#clickme").click(function () {
| + | |
| − | | + | |
| − | rightVal = (rightVal * -1) - 150; | + | |
| − | $(this).parent().animate({right: rightVal + 'px'}, {queue: false, duration: 500}); | + | |
| − | }); | + | |
| − | | + | |
| − | }); | + | |
| − | | + | |
| − | | + | |
| − | </script> | + | |
| | | | |
| | + | <div class="backgroundpic"> |
| | + | <img src="https://static.igem.org/mediawiki/2017/6/62/%E8%83%8C%E6%99%AF1.jpeg" width="100%" |
| | + | height="100%" id="bg" alt=""> |
| | + | </div> |
| | + | </div> |
| | | | |
| | </body> | | </body> |
| | | | |
| | </html> | | </html> |
