|
|
Line 1: |
Line 1: |
− | {{TAS Taipei/CSS}}
| + | <!DOCTYPE html> |
− | <html> | + | <html lang="en"> |
| | | |
| <head> | | <head> |
− | <title>Team - TAS Taipei iGEM Wiki</title> | + | <meta charset="UTF-8"> |
− | <style type='text/css'> | + | <title>navtest</title> |
− | #top_title,
| + | <link rel="stylesheet" href="https://2015.igem.org/Template:TAS_Taipei/css/bootstrap?action=raw&ctype=text/css"> |
− | #sideMenu {
| + | <link rel="stylesheet" href="../Test/navtest.css"> |
− | display: none;
| + | |
− | }
| + | |
− |
| + | |
− | #content {
| + | |
− | width: 100%;
| + | |
− | margin: 0;
| + | |
− | padding: 0;
| + | |
− | background: #f3f4f4;
| + | |
− | }
| + | |
− |
| + | |
− | img {
| + | |
− | width: 100%
| + | |
− | }
| + | |
− | | + | |
− | </style> | + | |
| </head> | | </head> |
| | | |
− | <body data-spy="scroll" data-target="#category_navbar"> | + | <body> |
− | <link rel="shortcut icon" href="https://static.igem.org/mediawiki/2016/c/c6/T--TAS_Taipei--TAS_iGEM_Logo.png">
| + | <section class="boxes"> |
− | <link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
| + | <div class="box" id="project" onclick="location.href='https://2017.igem.org/Team:TAS_Taipei/Background';" style="cursor: pointer;"> |
− | <link rel="stylesheet" href="https://2015.igem.org/Template:TAS_Taipei/css/bootstrap?action=raw&ctype=text/css">
| + | <br> |
− | | + | <h1> |
− | <script>
| + | <span> |
− | localStorage.clear(); | + | <img src="https://static.igem.org/mediawiki/2017/6/6b/Dna-structure.png" id="dna" width="40vh"> |
− | | + | </span> |
− | </script>
| + | </h1> |
− | <script src="https://2015.igem.org/Template:TAS_Taipei/js/jquery?action=raw&ctype=text/javascript"></script>
| + | <br> |
− | <script src='https://2015.igem.org/Template:TAS_Taipei/js/bootstrap?action=raw&ctype=text/javascript'></script>
| + | </div> |
− | <script src="https://2015.igem.org/Template:TAS_Taipei/js/jquerySlides?action=raw&ctype=text/javascript"></script>
| + | <div class="box" id="experiment" onclick="location.href='https://2017.igem.org/Team:TAS_Taipei/Experimental_Summary';" style="cursor: pointer;"> |
− | | + | <br> |
− | <script type="text/javascript" async src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML">
| + | <h1> |
− | | + | <span> |
− | | + | <img src="https://static.igem.org/mediawiki/2017/2/2c/Microscope.png" id="dna" width="40vh"> |
− | </script>
| + | </span> |
− | | + | </h1> |
− | <script type="text/x-mathjax-config"> | + | <br> |
− | MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}}); | + | </div> |
− | </script>
| + | <div class="box" id="modeling" onclick="location.href='https://2017.igem.org/Team:TAS_Taipei/Model';" style="cursor: pointer;"> |
− | | + | <br> |
− | <style type='text/css'>
| + | <h1> |
− | p { | + | <span> |
− | font-family: Lato !important; | + | <img src="https://static.igem.org/mediawiki/2017/d/d0/Statistics.png" id="dna" width="40vh"> |
− | font-size: 17px !important | + | </span> |
− | }
| + | </h1> |
− | | + | <br> |
− | h1 { | + | </div> |
− | font-size: 40-px !important; | + | <div class="box" id="prototype" onclick="location.href='https://2017.igem.org/Team:TAS_Taipei/Prototype';" style="cursor: pointer;"> |
− | }
| + | <br> |
− | | + | <h1> |
− | body { | + | <span> |
− | font-family: Lato !important; | + | <img src="https://static.igem.org/mediawiki/2017/9/92/Compass.png" id="dna" width="40vh"> |
− | }
| + | </span> |
− | | + | </h1> |
− | h3 { | + | <br> |
− | font-size: 25-px | + | </div> |
− | | + | <div class="box" id="policy" onclick="location.href='https://2017.igem.org/Team:TAS_Taipei/Human_Practices';" style="cursor: pointer;"> |
− | </style>
| + | <br> |
− | | + | <H1> |
− | <script>
| + | <span> |
− | $(document).ready(function() { | + | <img src="https://static.igem.org/mediawiki/2017/3/3e/Earth-globe.png" id="dna" width="40vh"> |
− | if (document.domain === "2016.igem.org") | + | </span> |
− | setTimeout(function() { | + | </H1> |
− | $("style:eq(0)").remove(); | + | <br> |
− | }, 500); | + | </div> |
− | }); | + | <div class="box" id="biosafety" onclick="location.href='https://2017.igem.org/Team:TAS_Taipei/Safety';" style="cursor: pointer;"> |
− | | + | <br> |
− | </script>
| + | <H1> |
− | | + | <span> |
− | | + | <img src="https://static.igem.org/mediawiki/2017/b/b9/Biosafety.png" id="dna" width="40vh"> |
− | | + | </span> |
| + | </H1> |
| + | <br> |
| + | </div> |
| + | <div class="box" id="about" onclick="location.href='https://2017.igem.org/Team:TAS_Taipei/Team';" style="cursor: pointer;"> |
| + | <br> |
| + | <H1> |
| + | <span> |
| + | <img src="https://static.igem.org/mediawiki/2017/a/a3/About_us1.png" id="dna" width="40vh"> |
| + | </span> |
| + | </H1> |
| + | <br> |
| + | </div> |
| + | <div class="box" id="acknowledgments" onclick="location.href='https://2017.igem.org/Team:TAS_Taipei/Attributions';" style="cursor: pointer;"> |
| + | <br> |
| + | <H1> |
| + | <span> |
| + | <img src="https://static.igem.org/mediawiki/2017/f/f3/Book.png" id="dna" width="40vh"> |
| + | </span> |
| + | </H1> |
| + | <br> |
| + | </div> |
| + | </section> |
| + | <section class="boxes2"> |
| + | <div class="box2" id="project" onclick="location.href='https://2017.igem.org/Team:TAS_Taipei/Background';" style="cursor: pointer;"> |
| + | <br> |
| + | <h1>PROJECT |
| + | <span> |
| + | <img src="https://static.igem.org/mediawiki/2017/6/6b/Dna-structure.png" id="dna" width="40vh"> |
| + | </span> |
| + | </h1> |
| + | <br> |
| + | </div> |
| + | <div class="box2" id="experiment" onclick="location.href='https://2017.igem.org/Team:TAS_Taipei/Experimental_Summary';" style="cursor: pointer;"> |
| + | <br> |
| + | <h1>EXPERIMENTS |
| + | <span> |
| + | <img src="https://static.igem.org/mediawiki/2017/2/2c/Microscope.png" id="dna" width="40vh"> |
| + | </span> |
| + | </h1> |
| + | <br> |
| + | </div> |
| + | <div class="box2" id="modeling" onclick="location.href='https://2017.igem.org/Team:TAS_Taipei/Model';" style="cursor: pointer;"> |
| + | <br> |
| + | <h1>MODELING |
| + | <span> |
| + | <img src="https://static.igem.org/mediawiki/2017/d/d0/Statistics.png" id="dna" width="40vh"> |
| + | </span> |
| + | </h1> |
| + | <br> |
| + | </div> |
| + | <div class="box2" id="prototype" onclick="location.href='https://2017.igem.org/Team:TAS_Taipei/Prototype';" style="cursor: pointer;"> |
| + | <br> |
| + | <h1>PROTOTYPE |
| + | <span> |
| + | <img src="https://static.igem.org/mediawiki/2017/9/92/Compass.png" id="dna" width="40vh"> |
| + | </span> |
| + | </h1> |
| + | <br> |
| + | </div> |
| + | <div class="box2" id="policy" onclick="location.href='https://2017.igem.org/Team:TAS_Taipei/Human_Practices';" style="cursor: pointer;"> |
| + | <br> |
| + | <H1>HUMAN PRACTICES |
| + | <span> |
| + | <img src="https://static.igem.org/mediawiki/2017/3/3e/Earth-globe.png" id="dna" width="40vh"> |
| + | </span> |
| + | </H1> |
| + | <br> |
| + | </div> |
| + | <div class="box2" id="biosafety" onclick="location.href='https://2017.igem.org/Team:TAS_Taipei/Safety';" style="cursor: pointer;"> |
| + | <br> |
| + | <H1>BIOSAFETY |
| + | <span> |
| + | <img src="https://static.igem.org/mediawiki/2017/b/b9/Biosafety.png" id="dna" width="40vh"> |
| + | </span> |
| + | </H1> |
| + | <br> |
| + | </div> |
| + | <div class="box2" id="about" onclick="location.href='https://2017.igem.org/Team:TAS_Taipei/Team';" style="cursor: pointer;"> |
| + | <br> |
| + | <H1>ABOUT US |
| + | <span> |
| + | <img src="https://static.igem.org/mediawiki/2017/a/a3/About_us1.png" id="dna" width="40vh"> |
| + | </span> |
| + | </H1> |
| + | <br> |
| + | </div> |
| + | <div class="box2" id="acknowledgments" onclick="location.href='https://2017.igem.org/Team:TAS_Taipei/Attributions';" style="cursor: pointer;"> |
| + | <br> |
| + | <H1>ATTRIBUTIONS |
| + | <span> |
| + | <img src="https://static.igem.org/mediawiki/2017/f/f3/Book.png" id="dna" width="40vh"> |
| + | </span> |
| + | </H1> |
| + | <br> |
| + | </div> |
| + | </section> |
| <div class="container" style='z-index:10;position:relative;'> | | <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://2017.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://2017.igem.org/Team:TAS_Taipei/Background">Background</a></h5>
| |
− | </div>
| |
− | <div>
| |
− | <h5><a href="https://2017.igem.org/Team:TAS_Taipei/Achievements">Achievements</a></h5>
| |
− | </div>
| |
− | <div>
| |
− | <h5><a href="https://2017.igem.org/Team:TAS_Taipei/Collaborations">Collaborations</a></h5>
| |
− | </div>
| |
− | <div>
| |
− | <h5><a href="https://2017.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.
| |
− | </h4>
| |
− | </div>
| |
− | </div>
| |
− | </li>
| |
− | <!--Project-->
| |
− | <li class="dropdown">
| |
− | <a href="https://2017.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://2017.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>
| |
− | <!--Experimental-->
| |
− | <li class="dropdown">
| |
− | <a href="https://2017.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>
| |
− | <!--Model-->
| |
− | <li class="dropdown">
| |
− | <a href="https://2017.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>
| |
− | <!--Human Practice-->
| |
− | <li class="dropdown">
| |
− | <a href="https://2017.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>
| |
− | <!--Safety-->
| |
− | <li class="dropdown">
| |
− | <a href="https://2017.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://2017.igem.org/Team:TAS_Taipei/Team#members">Members</a></h5>
| |
− | </div>
| |
− | <div>
| |
− | <h5><a href="https://2017.igem.org/Team:TAS_Taipei/Team#about">About</a></h5>
| |
− | </div>
| |
− | <div>
| |
− | <h5><a href="https://2017.igem.org/Team:TAS_Taipei/Attributions">Attributions</a></h5>
| |
− | </div>
| |
− | <div>
| |
− | <h5><a href="https://2017.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>
| |
− | <!--Team-->
| |
− | </ul>
| |
− | </nav>
| |
− | </div>
| |
| <br> | | <br> |
| <br> | | <br> |
Line 576: |
Line 494: |
| </div> | | </div> |
| </div> | | </div> |
− |
| |
| </div> | | </div> |
| </div> | | </div> |
| </div> | | </div> |
− |
| |
− | <br><br><br><br>
| |
− | <br><br>
| |
− |
| |
− | <canvas id="canvas-container" style="z-index:-1"></canvas>
| |
− | <script type="text/javascript" src='https://2016.igem.org/Template:TAS_Taipei/js/field?action=raw&ctype=text/javascript'></script>
| |
− |
| |
− | </body>
| |
− |
| |
− |
| |
− |
| |
− |
| |
− |
| |
− |
| |
− |
| |
− |
| |
− | <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 {
| |
− | if ($("#bluebutton").hasClass("isOn")) {} 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")
| |
− | }*/
| |
− | };
| |
− |
| |
− | </script>
| |
− |
| |
− | <script>
| |
− | function switchToggleB() {
| |
− | if ($("#bluebutton").hasClass("isOn")) {
| |
− | $("#bluebutton").removeClass("isOn");
| |
− | } else {
| |
− | $("#bluebutton").addClass("isOn");
| |
− | }
| |
− | };
| |
− |
| |
− | function switchToggleR() {
| |
− | if ($("#redbutton").hasClass("isOn")) {
| |
− | $("#redbutton").removeClass("isOn");
| |
− | } else {
| |
− | $("#redbutton").addClass("isOn");
| |
− | }
| |
− | };
| |
− |
| |
− | function currentColor() {
| |
− | if ($("#slidecontenttext").hasClass("alert-danger"))
| |
− | return "RED";
| |
− | if ($("#slidecontenttext").hasClass("alert-warning"))
| |
− | return "YELLOW";
| |
− | 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);
| |
− | }
| |
− |
| |
− | };
| |
− |
| |
− | </script>
| |
− |
| |
− |
| |
− |
| |
− |
| |
− |
| |
− |
| |
− | <canvas id="canvas-container" style="z-index:-1" hidden></canvas>
| |
− | <script type="text/javascript" src='https://2015.igem.org/Template:TAS_Taipei/js/field?action=raw&ctype=text/javascript' hidden>
| |
− | < /script/ >
| |
− |
| |
− |
| |
− |
| |
− | <
| |
− | 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");
| |
− | }
| |
− | }
| |
− |
| |
− | </script>
| |
− |
| |
− | <script type="text/javascript">
| |
− | $("#category_navbar a").on('click', function(event) {
| |
− | // Make sure this.hash has a value before overriding default behavior
| |
− | 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
| |
− | // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
| |
− | $('html, body').animate({
| |
− | scrollTop: $(hash).offset().top
| |
− | }, 800, function() {
| |
− |
| |
− | // Add hash (#) to URL when done scrolling (default click behavior)
| |
− | window.location.hash = hash;
| |
− | });
| |
− | } // End if
| |
− | });
| |
− |
| |
− | </script>
| |
− |
| |
− | <div id="slideout">
| |
− | <div id="slidecontent">
| |
− | <h3>Prevention</h3>
| |
− | <h5>GSR Eyedrop</h5>
| |
− | <label class="switch">
| |
− | <input id="bluebutton" onClick="switchToggleB(); chooseBlur()" type="checkbox">
| |
− | <div class="slider round bluecolorbutton"></div>
| |
− | </label>
| |
− | <br>
| |
− |
| |
− | <h3>Treatment</h3>
| |
− | <h5>25HC Eyedrop</h5>
| |
− | <label class="switch">
| |
− | <input id="redbutton" onClick="switchToggleR(); chooseBlur()" type="checkbox">
| |
− | <div class="slider round redcolorbutton"></div>
| |
− | </label>
| |
− | <h4><b> LOCS: <span id="LOCS">0  </span></b>     <a href="https://2016.igem.org/Team:TAS_Taipei/Wiki_Standard_Pages#Animation"><button type="button" class="btn btn-danger btn-md">?</button> </a>
| |
− |
| |
− | </div>
| |
− | <div id="clickme">
| |
− | <h2 class="vertical-text" style="Lato" !important>
| |
− | <br> Eyedrops
| |
− | </h2>
| |
− | <br><br><br>
| |
− |
| |
− | </div>
| |
− | </div>
| |
− |
| |
− | <div id="slideoutco">
| |
− | <div id="slidecontentco">
| |
− | <div id="slidecontenttext" class="alert alert-danger">
| |
− | <p style="font-size:14px !important"> <a href="#" class="close" data-dismiss="alert">×</a>
| |
− | <strong>Zoom out to see animation.</strong>          <a href="https://2016.igem.org/Team:TAS_Taipei/Wiki_Standard_Pages#Animation"><button type="button" class="btn btn-danger btn-sm">?</button> </a><span style="font-size:14px"><br>Your screen resolution is too low unless you zoom out </span></p>
| |
− |
| |
− | </div>
| |
− | </div>
| |
− | </div>
| |
− |
| |
− | <javascript>
| |
− |
| |
− | </javascript>
| |
− |
| |
− | <style type='text/css'>
| |
− | #slideout {
| |
− | background: #FFD700;
| |
− | position: fixed;
| |
− | height: 300px;
| |
− | width: 200px;
| |
− | top: 30%;
| |
− | right: -150px;
| |
− | padding-left: 60px;
| |
− | z-index: 30;
| |
− | border-radius: 25px;
| |
− | }
| |
− |
| |
− | #slideoutco {
| |
− | position: fixed;
| |
− | height: 200px;
| |
− | width: 300px;
| |
− | top: 78%;
| |
− | right: 1%;
| |
− | padding-left: 10px;
| |
− | padding-right: 10px;
| |
− | border-radius: 10px;
| |
− | z-index: 30;
| |
− | }
| |
− |
| |
− | #clickme {
| |
− | position: absolute;
| |
− | top: 0;
| |
− | left: 0;
| |
− | height: 300px;
| |
− | width: 50px;
| |
− | background: #FFBA49;
| |
− | z-index: 30;
| |
− | border-radius: 25px 5px 5px 25px;
| |
− | }
| |
− |
| |
− | #slidecontent {
| |
− | float: left;
| |
− | }
| |
− |
| |
− | #slidecontentco {
| |
− | float: left;
| |
− | }
| |
− |
| |
− | .vertical-text {
| |
− | transform: rotate(90deg);
| |
− | transform-origin: left bottom 0;
| |
− | float: left;
| |
− | }
| |
− | /* The switch - the box around the slider */
| |
− |
| |
− | .switch {
| |
− | position: relative;
| |
− | display: inline-block;
| |
− | width: 60px;
| |
− | height: 34px;
| |
− | }
| |
− | /* Hide default HTML checkbox */
| |
− |
| |
− | .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 {
| |
− | position: absolute;
| |
− | content: "";
| |
− | height: 26px;
| |
− | width: 26px;
| |
− | left: 4px;
| |
− | bottom: 4px;
| |
− | background-color: white;
| |
− | -webkit-transition: .4s;
| |
− | transition: .4s;
| |
− | }
| |
− |
| |
− | input:checked+.slider.bluecolorbutton {
| |
− | background-color: #2196F3;
| |
− | }
| |
− |
| |
− | input:focus+.slider.bluecolorbutton {
| |
− | box-shadow: 0 0 1px #2196F3;
| |
− | }
| |
− |
| |
− | input:checked+.slider.redcolorbutton {
| |
− | background-color: #FF0000;
| |
− | }
| |
− |
| |
− | input:focus+.slider.redcolorbutton {
| |
− | box-shadow: 0 0 1px #FF0000;
| |
− | }
| |
− |
| |
− | input:checked+.slider:before {
| |
− | -webkit-transform: translateX(26px);
| |
− | -ms-transform: translateX(26px);
| |
− | transform: translateX(26px);
| |
− | }
| |
− | /* Rounded sliders */
| |
− |
| |
− | .slider.round {
| |
− | border-radius: 34px;
| |
− | }
| |
− |
| |
− | .slider.round:before {
| |
− | border-radius: 50%;
| |
− | }
| |
− |
| |
− | input[type=text] {
| |
− | width: 100%;
| |
− | padding: 12px 20px;
| |
− | margin: 8px 0;
| |
− | box-sizing: border-box;
| |
− | border: 3px solid #ccc;
| |
− | -webkit-transition: 0.5s;
| |
− | transition: 0.5s;
| |
− | 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>
| |
− |
| |
− |
| |
| </body> | | </body> |
| | | |
| </html> | | </html> |