Difference between revisions of "Team:TAS Taipei"

Line 3: Line 3:
  
 
<head>
 
<head>
−
<title>TAS Taipei iGEM Wiki</title>
+
    <title>TAS Taipei iGEM Wiki</title>
−
<style type='text/css'>
+
    <style type='text/css'>
−
      #top_title, #sideMenu{
+
        #top_title,
−
        display: none;
+
        #sideMenu {
−
      }
+
            display: none;
−
 
+
        }
−
      #content{
+
       
−
        width: 100%;
+
        #content {
−
        margin: 0;
+
            width: 100%;
−
        padding: 0;
+
            margin: 0;
−
        background: #f3f4f4;}
+
            padding: 0;
 +
            background: #f3f4f4;
 +
        }
  
 
     </style>
 
     </style>
Line 20: Line 22:
 
<body data-spy="scroll" data-target="#category_navbar">
 
<body data-spy="scroll" data-target="#category_navbar">
  
−
<link rel="shortcut icon" href="https://static.igem.org/mediawiki/2016/c/c6/T--TAS_Taipei--TAS_iGEM_Logo.png">
+
    <link rel="shortcut icon" href="https://static.igem.org/mediawiki/2016/c/c6/T--TAS_Taipei--TAS_iGEM_Logo.png">
−
<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
+
    <link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
  
−
<link rel="stylesheet" href="https://2015.igem.org/Template:TAS_Taipei/css/bootstrap?action=raw&ctype=text/css">
+
    <link rel="stylesheet" href="https://2015.igem.org/Template:TAS_Taipei/css/bootstrap?action=raw&ctype=text/css">
  
−
<script>localStorage.clear();</script>
+
    <script>
−
<script src="https://2015.igem.org/Template:TAS_Taipei/js/jquery?action=raw&ctype=text/javascript"></script>
+
        localStorage.clear();
−
<script src='https://2015.igem.org/Template:TAS_Taipei/js/bootstrap?action=raw&ctype=text/javascript'></script>
+
−
<script src="https://2015.igem.org/Template:TAS_Taipei/js/jquerySlides?action=raw&ctype=text/javascript"></script>
+
  
−
<script type="text/javascript" async
+
    </script>
−
  src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML">
+
    <script src="https://2015.igem.org/Template:TAS_Taipei/js/jquery?action=raw&ctype=text/javascript"></script>
−
</script>
+
    <script src='https://2015.igem.org/Template:TAS_Taipei/js/bootstrap?action=raw&ctype=text/javascript'></script>
 +
    <script src="https://2015.igem.org/Template:TAS_Taipei/js/jquerySlides?action=raw&ctype=text/javascript"></script>
  
−
<script type="text/x-mathjax-config">
+
    <script type="text/javascript" async src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML">
−
    MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
+
−
</script>
+
  
−
<style type='text/css'>
 
−
    p{font-family: Lato !important;}
 
−
    h1{font-size:40-px !important;}
 
−
    body{font-family:Lato !important;}
 
−
    h3{font-size:25-px
 
−
</style>
 
  
−
<script>
+
    </script>
−
$(document).ready(function() {
+
 
−
if(document.domain === "2017.igem.org")
+
    <script type="text/x-mathjax-config">
−
setTimeout(function() {
+
        MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
−
$("style:eq(0)").remove();
+
    </script>
−
}, 500);
+
 
−
    });
+
    <style type='text/css'>
−
</script>
+
            p {
 +
            font-family: Lato !important;
 +
        }
 +
       
 +
        h1 {
 +
            font-size: 40-px !important;
 +
        }
 +
       
 +
        body {
 +
            font-family: Lato !important;
 +
        }
 +
       
 +
        h3 {
 +
            font-size: 25-px
 +
 
 +
    </style>
 +
 
 +
    <script>
 +
        $(document).ready(function() {
 +
            if (document.domain === "2017.igem.org")
 +
                setTimeout(function() {
 +
                    $("style:eq(0)").remove();
 +
                }, 500);
 +
        });
 +
 
 +
    </script>
 +
 
  
−
   
 
 
     <script type="text/javascript" src="https://2015.igem.org/Template:TAS_Taipei/js/jssor?action=raw&ctype=text/javascript"></script>
 
     <script type="text/javascript" src="https://2015.igem.org/Template:TAS_Taipei/js/jssor?action=raw&ctype=text/javascript"></script>
−
<script type="text/javascript" src="https://2015.igem.org/Template:TAS_Taipei/js/jssorSlider?action=raw&ctype=text/javascript"></script>
+
    <script type="text/javascript" src="https://2015.igem.org/Template:TAS_Taipei/js/jssorSlider?action=raw&ctype=text/javascript"></script>
  
−
<br>
+
    <br>
−
<script>
+
    <script>
−
jQuery(document).ready(function ($) {
+
        jQuery(document).ready(function($) {
−
var _CaptionTransitions = [];
+
            var _CaptionTransitions = [];
−
_CaptionTransitions["L"] = { $Duration: 800, x: 0.6, $Easing: { $Left: $JssorEasing$.$EaseInOutSine }, $Opacity: 2 };
+
            _CaptionTransitions["L"] = {
−
_CaptionTransitions["R"] = { $Duration: 800, x: -0.6, $Easing: { $Left: $JssorEasing$.$EaseInOutSine }, $Opacity: 2 };
+
                $Duration: 800,
−
_CaptionTransitions["T"] = { $Duration: 800, y: 0.6, $Easing: { $Top: $JssorEasing$.$EaseInOutSine }, $Opacity: 2 };
+
                x: 0.6,
−
_CaptionTransitions["B"] = { $Duration: 800, y: -0.6, $Easing: { $Top: $JssorEasing$.$EaseInOutSine }, $Opacity: 2 };
+
                $Easing: {
−
_CaptionTransitions["TL"] = { $Duration: 800, x: 0.6, y: 0.6, $Easing: { $Left: $JssorEasing$.$EaseInOutSine, $Top: $JssorEasing$.$EaseInOutSine }, $Opacity: 2 };
+
                    $Left: $JssorEasing$.$EaseInOutSine
−
_CaptionTransitions["TR"] = { $Duration: 800, x: -0.6, y: 0.6, $Easing: { $Left: $JssorEasing$.$EaseInOutSine, $Top: $JssorEasing$.$EaseInOutSine }, $Opacity: 2 };
+
                },
−
_CaptionTransitions["BL"] = { $Duration: 800, x: 0.6, y: -0.6, $Easing: { $Left: $JssorEasing$.$EaseInOutSine, $Top: $JssorEasing$.$EaseInOutSine }, $Opacity: 2 };
+
                $Opacity: 2
−
_CaptionTransitions["BR"] = { $Duration: 800, x: -0.6, y: -0.6, $Easing: { $Left: $JssorEasing$.$EaseInOutSine, $Top: $JssorEasing$.$EaseInOutSine }, $Opacity: 2 };
+
            };
 +
            _CaptionTransitions["R"] = {
 +
                $Duration: 800,
 +
                x: -0.6,
 +
                $Easing: {
 +
                    $Left: $JssorEasing$.$EaseInOutSine
 +
                },
 +
                $Opacity: 2
 +
            };
 +
            _CaptionTransitions["T"] = {
 +
                $Duration: 800,
 +
                y: 0.6,
 +
                $Easing: {
 +
                    $Top: $JssorEasing$.$EaseInOutSine
 +
                },
 +
                $Opacity: 2
 +
            };
 +
            _CaptionTransitions["B"] = {
 +
                $Duration: 800,
 +
                y: -0.6,
 +
                $Easing: {
 +
                    $Top: $JssorEasing$.$EaseInOutSine
 +
                },
 +
                $Opacity: 2
 +
            };
 +
            _CaptionTransitions["TL"] = {
 +
                $Duration: 800,
 +
                x: 0.6,
 +
                y: 0.6,
 +
                $Easing: {
 +
                    $Left: $JssorEasing$.$EaseInOutSine,
 +
                    $Top: $JssorEasing$.$EaseInOutSine
 +
                },
 +
                $Opacity: 2
 +
            };
 +
            _CaptionTransitions["TR"] = {
 +
                $Duration: 800,
 +
                x: -0.6,
 +
                y: 0.6,
 +
                $Easing: {
 +
                    $Left: $JssorEasing$.$EaseInOutSine,
 +
                    $Top: $JssorEasing$.$EaseInOutSine
 +
                },
 +
                $Opacity: 2
 +
            };
 +
            _CaptionTransitions["BL"] = {
 +
                $Duration: 800,
 +
                x: 0.6,
 +
                y: -0.6,
 +
                $Easing: {
 +
                    $Left: $JssorEasing$.$EaseInOutSine,
 +
                    $Top: $JssorEasing$.$EaseInOutSine
 +
                },
 +
                $Opacity: 2
 +
            };
 +
            _CaptionTransitions["BR"] = {
 +
                $Duration: 800,
 +
                x: -0.6,
 +
                y: -0.6,
 +
                $Easing: {
 +
                    $Left: $JssorEasing$.$EaseInOutSine,
 +
                    $Top: $JssorEasing$.$EaseInOutSine
 +
                },
 +
                $Opacity: 2
 +
            };
  
−
_CaptionTransitions["WAVE|L"] = { $Duration: 1500, x: 0.6, y: 0.3, $Easing: { $Left: $JssorEasing$.$EaseLinear, $Top: $JssorEasing$.$EaseInWave }, $Opacity: 2, $Round: { $Top: 2.5} };
+
            _CaptionTransitions["WAVE|L"] = {
−
_CaptionTransitions["MCLIP|B"] = { $Duration: 600, $Clip: 8, $Move: true, $Easing: $JssorEasing$.$EaseOutExpo };
+
                $Duration: 1500,
−
var options = {
+
                x: 0.6,
−
$AutoPlay: true,
+
                y: 0.3,
−
                    $AutoPlayInterval: 10000,
+
                $Easing: {
−
$SlideDuration: 500,
+
                    $Left: $JssorEasing$.$EaseLinear,
−
                 $DragOrientation: 3,                               //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0)
+
                    $Top: $JssorEasing$.$EaseInWave
 +
                },
 +
                $Opacity: 2,
 +
                $Round: {
 +
                    $Top: 2.5
 +
                }
 +
            };
 +
            _CaptionTransitions["MCLIP|B"] = {
 +
                $Duration: 600,
 +
                $Clip: 8,
 +
                $Move: true,
 +
                $Easing: $JssorEasing$.$EaseOutExpo
 +
            };
 +
            var options = {
 +
                $AutoPlay: true,
 +
                $AutoPlayInterval: 10000,
 +
                $SlideDuration: 500,
 +
                 $DragOrientation: 3, //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0)
  
−
                 $BulletNavigatorOptions: {                         //[Optional] Options to specify and enable navigator or not
+
                 $BulletNavigatorOptions: { //[Optional] Options to specify and enable navigator or not
−
                     $Class: $JssorBulletNavigator$,                 //[Required] Class to create navigator instance
+
                     $Class: $JssorBulletNavigator$, //[Required] Class to create navigator instance
−
                     $ChanceToShow: 2,                               //[Required] 0 Never, 1 Mouse Over, 2 Always
+
                     $ChanceToShow: 2, //[Required] 0 Never, 1 Mouse Over, 2 Always
−
                     $ActionMode: 1,                                 //[Optional] 0 None, 1 act by click, 2 act by mouse hover, 3 both, default value is 1
+
                     $ActionMode: 1, //[Optional] 0 None, 1 act by click, 2 act by mouse hover, 3 both, default value is 1
−
                     $AutoCenter: 0,                                 //[Optional] Auto center navigator in parent container, 0 None, 1 Horizontal, 2 Vertical, 3 Both, default value is 0
+
                     $AutoCenter: 0, //[Optional] Auto center navigator in parent container, 0 None, 1 Horizontal, 2 Vertical, 3 Both, default value is 0
−
                     $Steps: 1,                                     //[Optional] Steps to go for each navigation request, default value is 1
+
                     $Steps: 1, //[Optional] Steps to go for each navigation request, default value is 1
−
                     $Lanes: 1,                                     //[Optional] Specify lanes to arrange items, default value is 1
+
                     $Lanes: 1, //[Optional] Specify lanes to arrange items, default value is 1
−
                     $SpacingX: 0,                                   //[Optional] Horizontal space between each item in pixel, default value is 0
+
                     $SpacingX: 0, //[Optional] Horizontal space between each item in pixel, default value is 0
−
                     $SpacingY: 0,                                   //[Optional] Vertical space between each item in pixel, default value is 0
+
                     $SpacingY: 0, //[Optional] Vertical space between each item in pixel, default value is 0
−
                     $Orientation: 1                                 //[Optional] The orientation of the navigator, 1 horizontal, 2 vertical, default value is 1
+
                     $Orientation: 1 //[Optional] The orientation of the navigator, 1 horizontal, 2 vertical, default value is 1
 
                 },
 
                 },
−
                 $CaptionSliderOptions: {                           //[Optional] Options which specifies how to animate caption
+
                 $CaptionSliderOptions: { //[Optional] Options which specifies how to animate caption
−
                     $Class: $JssorCaptionSlider$,                   //[Required] Class to create instance to animate caption
+
                     $Class: $JssorCaptionSlider$, //[Required] Class to create instance to animate caption
−
                     $CaptionTransitions: _CaptionTransitions,       //[Required] An array of caption transitions to play caption, see caption transition section at jssor slideshow transition builder
+
                     $CaptionTransitions: _CaptionTransitions, //[Required] An array of caption transitions to play caption, see caption transition section at jssor slideshow transition builder
−
                     $PlayInMode: 1,                                 //[Optional] 0 None (no play), 1 Chain (goes after main slide), 3 Chain Flatten (goes after main slide and flatten all caption animations), default value is 1
+
                     $PlayInMode: 1, //[Optional] 0 None (no play), 1 Chain (goes after main slide), 3 Chain Flatten (goes after main slide and flatten all caption animations), default value is 1
−
                     $PlayOutMode: 3                                 //[Optional] 0 None (no play), 1 Chain (goes before main slide), 3 Chain Flatten (goes before main slide and flatten all caption animations), default value is 1
+
                     $PlayOutMode: 3 //[Optional] 0 None (no play), 1 Chain (goes before main slide), 3 Chain Flatten (goes before main slide and flatten all caption animations), default value is 1
 
                 }
 
                 }
  
Line 100: Line 199:
 
             var jssor_slider1 = new $JssorSlider$("slider1_container", options);
 
             var jssor_slider1 = new $JssorSlider$("slider1_container", options);
 
         });
 
         });
−
</script>
 
  
−
<!--Nav Bar-->
+
    </script>
−
   
+
 
−
<div class="container" style='z-index:10;position:relative;'>
+
    <!--Nav Bar-->
−
    <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;'>
+
    <div class="container" style='z-index:10;position:relative;'>
−
            <ul style='margin-left:0px'>
+
        <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">
 
                     <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>
+
                        <a href="https://2017.igem.org/Team:TAS_Taipei/Background">
−
<div class="dropdown-menu">
+
                            <h4 class="dropdown-toggle disabled" data-toggle="dropdown"><b>PROJECT</b></h4>
−
<div class='subcategories_container'>
+
                        </a>
−
<div>
+
                        <div class="dropdown-menu">
−
<h5><a href="https://2017.igem.org/Team:TAS_Taipei/Background">Background</a></h5>
+
                            <div class='subcategories_container'>
−
</div>
+
                                <div>
−
<div>
+
                                    <h5><a href="https://2017.igem.org/Team:TAS_Taipei/Background">Background</a></h5>
−
<h5><a href="https://2017.igem.org/Team:TAS_Taipei/Achievements">Achievements</a></h5>
+
                                </div>
−
</div>
+
                                <div>
−
<div>
+
                                    <h5><a href="https://2017.igem.org/Team:TAS_Taipei/Achievements">Achievements</a></h5>
−
<h5><a href="https://2017.igem.org/Team:TAS_Taipei/Collaborations">Collaborations</a></h5>
+
                                </div>
−
</div>
+
                                <div>
−
<div>
+
                                    <h5><a href="https://2017.igem.org/Team:TAS_Taipei/Collaborations">Collaborations</a></h5>
−
<h5><a href="https://2017.igem.org/Team:TAS_Taipei/Parts">Parts</a></h5>
+
                                </div>
−
</div>
+
                                <div>
−
    </div>
+
                                    <h5><a href="https://2017.igem.org/Team:TAS_Taipei/Parts">Parts</a></h5>
−
<div style='height:140px;'>
+
                                </div>
−
<img src="https://static.igem.org/mediawiki/2016/1/11/T--TAS_Taipei--TAS_Icon_Project.png">
+
                            </div>
−
<h4>
+
                            <div style='height:140px;'>
−
                            <b>Cataracts</b> - the leading cause of blindness. Find out how we can non-invasively <b>treat</b> and <b>prevent</b> cataract formation.
+
                                <img src="https://static.igem.org/mediawiki/2016/1/11/T--TAS_Taipei--TAS_Icon_Project.png">
−
                        </h4>
+
                                <h4>
−
                    </div>
+
                                    <b>Cataracts</b> - the leading cause of blindness. Find out how we can non-invasively <b>treat</b> and <b>prevent</b> cataract formation.
−
</div>
+
                                </h4>
−
</li> <!--Project-->
+
                            </div>
−
                     <li class="dropdown">  
+
                        </div>
−
<a href="https://2017.igem.org/Team:TAS_Taipei/Experimental_Summary"><h4 class='dropdown-toggle disabled' data-toggle="dropdown"><b>EXPERIMENTAL</b></h4></a>
+
                    </li>
−
<div class="dropdown-menu">
+
                    <!--Project-->
−
<div class='subcategories_container'>
+
                     <li class="dropdown">
−
<div>
+
                        <a href="https://2017.igem.org/Team:TAS_Taipei/Experimental_Summary">
−
<h5><a href="https://2016.igem.org/Team:TAS_Taipei/Experimental_Summary#lensmodel">Lens Cataract Model</a></h5>
+
                            <h4 class='dropdown-toggle disabled' data-toggle="dropdown"><b>EXPERIMENTAL</b></h4>
−
</div>
+
                        </a>
−
<div>
+
                        <div class="dropdown-menu">
−
<h5><a href="https://2016.igem.org/Team:TAS_Taipei/Experimental_Summary#construct">Prevention and Treatment Constructs </a></h5>
+
                            <div class='subcategories_container'>
−
</div>
+
                                <div>
−
<div>
+
                                    <h5><a href="https://2016.igem.org/Team:TAS_Taipei/Experimental_Summary#lensmodel">Lens Cataract Model</a></h5>
−
<h5><a href="https://2016.igem.org/Team:TAS_Taipei/Experimental_Summary#prototype">Delivery Prototype</a></h5>
+
                                </div>
−
</div>
+
                                <div>
−
<div>
+
                                    <h5><a href="https://2016.igem.org/Team:TAS_Taipei/Experimental_Summary#construct">Prevention and Treatment Constructs </a></h5>
−
<h5><a href="https://2017.igem.org/Team:TAS_Taipei/Notebook">Notebook</a></h5>
+
                                </div>
−
</div>
+
                                <div>
−
</div>
+
                                    <h5><a href="https://2016.igem.org/Team:TAS_Taipei/Experimental_Summary#prototype">Delivery Prototype</a></h5>
−
<div style='height:140px;'>
+
                                </div>
−
<img src="https://static.igem.org/mediawiki/2016/b/b0/T--TAS_Taipei--TAS_Icon_Experiments.png">
+
                                <div>
−
                        <h4>We build <b>constructs</b> to make our great ideas become reality. Follow along our discovery of exciting science!</h4>
+
                                    <h5><a href="https://2017.igem.org/Team:TAS_Taipei/Notebook">Notebook</a></h5>
−
</div>
+
                                </div>
−
</div>
+
                            </div>
−
</li> <!--Experimental-->
+
                            <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">
 
                     <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>
+
                        <a href="https://2017.igem.org/Team:TAS_Taipei/Model">
−
<div class="dropdown-menu">
+
                            <h4 class='dropdown-toggle disabled' data-toggle="dropdown"><b>MODEL</b></h4>
−
<div class='subcategories_container'>
+
                        </a>
−
<div>
+
                        <div class="dropdown-menu">
−
<h5><a href="https://2016.igem.org/Team:TAS_Taipei/Model#GSRFunc">GSR Function</a></h5>
+
                            <div class='subcategories_container'>
−
</div>
+
                                <div>
−
<div>
+
                                    <h5><a href="https://2016.igem.org/Team:TAS_Taipei/Model#GSRFunc">GSR Function</a></h5>
−
<h5><a href="https://2016.igem.org/Team:TAS_Taipei/Model#prototype">Prototype Delivery</a></h5>
+
                                </div>
−
</div>
+
                                <div>
−
<div>
+
                                    <h5><a href="https://2016.igem.org/Team:TAS_Taipei/Model#prototype">Prototype Delivery</a></h5>
−
<h5><a href="https://2016.igem.org/Team:TAS_Taipei/Model#treatment">CH25H Treatment</a></h5>
+
                                </div>
−
</div>
+
                                <div>
−
<div>
+
                                    <h5><a href="https://2016.igem.org/Team:TAS_Taipei/Model#treatment">CH25H Treatment</a></h5>
−
<h5><a href="https://2016.igem.org/Team:TAS_Taipei/Model#software">Calculator</a></h5>
+
                                </div>
−
</div>
+
                                <div>
 +
                                    <h5><a href="https://2016.igem.org/Team:TAS_Taipei/Model#software">Calculator</a></h5>
 +
                                </div>
  
−
</div>
+
                            </div>
−
<div style='height:140px;'>
+
                            <div style='height:140px;'>
−
<img src="https://static.igem.org/mediawiki/2016/c/ca/T--TAS_Taipei--TAS_Icon_Model.png">
+
                                <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>
+
                                <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>
−
</div>
+
                        </div>
−
</li> <!--Model-->
+
                    </li>
 +
                    <!--Model-->
 
                     <li class="dropdown">
 
                     <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>
+
                        <a href="https://2017.igem.org/Team:TAS_Taipei/Human_Practices">
−
<div class="dropdown-menu">
+
                            <h4 class='dropdown-toggle disabled' data-toggle="dropdown"><b>HUMAN PRACTICE</b></h4>
−
<div class='subcategories_container'>
+
                        </a>
−
<div>
+
                        <div class="dropdown-menu">
−
<h5><a href="https://2016.igem.org/Team:TAS_Taipei/Human_Practices#research">Research</a></h5>
+
                            <div class='subcategories_container'>
−
</div>
+
                                <div>
−
<div>
+
                                    <h5><a href="https://2016.igem.org/Team:TAS_Taipei/Human_Practices#research">Research</a></h5>
−
<h5><a href="https://2016.igem.org/Team:TAS_Taipei/Human_Practices#outreach">Outreach</a></h5>
+
                                </div>
−
</div>
+
                                <div>
−
<div>
+
                                    <h5><a href="https://2016.igem.org/Team:TAS_Taipei/Human_Practices#outreach">Outreach</a></h5>
−
<h5><a href="https://2016.igem.org/Team:TAS_Taipei/Human_Practices#impact">Impact</a></h5>
+
                                </div>
−
</div>
+
                                <div>
−
</div>
+
                                    <h5><a href="https://2016.igem.org/Team:TAS_Taipei/Human_Practices#impact">Impact</a></h5>
−
<div style='height:140px;'>
+
                                </div>
−
<img src="https://static.igem.org/mediawiki/2016/b/b9/T--TAS_Taipei--TAS_Icon_HP.png">
+
                            </div>
−
<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 style='height:140px;'>
−
</div>
+
                                <img src="https://static.igem.org/mediawiki/2016/b/b9/T--TAS_Taipei--TAS_Icon_HP.png">
−
</div>
+
                                <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>
−
</li> <!--Human Practice-->
+
                            </div>
 +
                        </div>
 +
                    </li>
 +
                    <!--Human Practice-->
 
                     <li class="dropdown">
 
                     <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>
+
                        <a href="https://2017.igem.org/Team:TAS_Taipei/Safety">
−
<div class="dropdown-menu">
+
                            <h4 class='dropdown-toggle disabled' data-toggle="dropdown"><b>SAFETY</b></h4>
−
<div style='height:100px;'>
+
                        </a>
−
<div class='subcategories_container'>
+
                        <div class="dropdown-menu">
−
<div>
+
                            <div style='height:100px;'>
−
<h5><a href="https://2016.igem.org/Team:TAS_Taipei/Safety#overview">Overview</a></h5>
+
                                <div class='subcategories_container'>
−
</div>
+
                                    <div>
−
<div>
+
                                        <h5><a href="https://2016.igem.org/Team:TAS_Taipei/Safety#overview">Overview</a></h5>
−
<h5><a href="https://2016.igem.org/Team:TAS_Taipei/Safety#biosafety">Biosafety</a></h5>
+
                                    </div>
−
</div>
+
                                    <div>
−
<div>
+
                                        <h5><a href="https://2016.igem.org/Team:TAS_Taipei/Safety#biosafety">Biosafety</a></h5>
−
<h5><a href="https://2016.igem.org/Team:TAS_Taipei/Safety#riskreduction">Risk Reduction Methods</a></h5>
+
                                    </div>
−
</div>
+
                                    <div>
−
<div>
+
                                        <h5><a href="https://2016.igem.org/Team:TAS_Taipei/Safety#riskreduction">Risk Reduction Methods</a></h5>
−
<h5><a href="https://2016.igem.org/Team:TAS_Taipei/Safety#furtherquestion">Further Questions</a></h5>
+
                                    </div>
−
</div>
+
                                    <div>
−
</div>
+
                                        <h5><a href="https://2016.igem.org/Team:TAS_Taipei/Safety#furtherquestion">Further Questions</a></h5>
−
<img src="https://static.igem.org/mediawiki/2016/7/7e/T--TAS_Taipei--TAS_Icon_Safety.png">
+
                                    </div>
−
<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>
+
                                <img src="https://static.igem.org/mediawiki/2016/7/7e/T--TAS_Taipei--TAS_Icon_Safety.png">
−
</div>
+
                                <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>
−
</li> <!--Safety-->
+
                            </div>
 +
                        </div>
 +
                    </li>
 +
                    <!--Safety-->
 
                     <li class="dropdown">
 
                     <li class="dropdown">
−
<a href="https://2017.igem.org/Team:TAS_Taipei/Team"><h4 class='dropdown-toggle disabled' data-toggle="dropdown">
+
                        <a href="https://2017.igem.org/Team:TAS_Taipei/Team">
−
                <b>TEAM</b></h4></a>
+
                            <h4 class='dropdown-toggle disabled' data-toggle="dropdown">
−
<div class="dropdown-menu">
+
                                <b>TEAM</b></h4>
−
<div class='subcategories_container'>
+
                        </a>
−
<div>
+
                        <div class="dropdown-menu">
−
<h5><a href="https://2016.igem.org/Team:TAS_Taipei/Team#members">Members</a></h5>
+
                            <div class='subcategories_container'>
−
</div>
+
                                <div>
−
<div>
+
                                    <h5><a href="https://2016.igem.org/Team:TAS_Taipei/Team#members">Members</a></h5>
−
<h5><a href="https://2016.igem.org/Team:TAS_Taipei/Team#about">About</a></h5>
+
                                </div>
−
</div>
+
                                <div>
−
<div>
+
                                    <h5><a href="https://2016.igem.org/Team:TAS_Taipei/Team#about">About</a></h5>
−
<h5><a href="https://2016.igem.org/Team:TAS_Taipei/Attributions">Attributions</a></h5>
+
                                </div>
−
</div>
+
                                <div>
−
<div>
+
                                    <h5><a href="https://2016.igem.org/Team:TAS_Taipei/Attributions">Attributions</a></h5>
−
<h5><a href="https://2016.igem.org/Team:TAS_Taipei/Wiki_Standard_Pages">Wiki Standard Pages</a></h5>
+
                                </div>
−
</div>
+
                                <div>
−
</div>
+
                                    <h5><a href="https://2016.igem.org/Team:TAS_Taipei/Wiki_Standard_Pages">Wiki Standard Pages</a></h5>
−
<div style='height:140px;'>
+
                                </div>
−
<img src="https://static.igem.org/mediawiki/2016/c/c6/T--TAS_Taipei--TAS_Icon_Team.png">
+
                            </div>
−
<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 style='height:140px;'>
−
</div>
+
                                <img src="https://static.igem.org/mediawiki/2016/c/c6/T--TAS_Taipei--TAS_Icon_Team.png">
−
</div>
+
                                <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>
−
</li> <!--Team-->
+
                            </div>
 +
                        </div>
 +
                    </li>
 +
                    <!--Team-->
 
                 </ul>
 
                 </ul>
−
        </nav>
+
            </nav>
−
    </div>
+
−
<br>
+
−
<br>
+
−
<br>
+
−
    <!--Title-->
+
−
    <div class="row center-block" style = "padding:10px;width:960px;background-color:#07BEB8;box-shadow:0px 0px 5px black">
+
−
<div class="row" style = "text-align:center;">
+
−
            <div class="col-sm-2">
+
−
<a href="https://2017.igem.org/Team:TAS_Taipei" style='text-decoration: none'><img src= "https://static.igem.org/mediawiki/2015/2/2f/Tas_igemlogo.png" alt="Tas iGEM Logo" style="width: 100px;"></a>
+
−
            </div> <!--TAS iGEM logo-->
+
−
            <div class="col-sm-8" style='text-align:center;'>
+
−
<a href="https://2017.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>NANOTRAP</b>
+
−
                    </h2>
+
−
</a>
+
−
            </div> <!--Project Name-->
+
−
            <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> <!--iGEM logo-->
+
 
         </div>
 
         </div>
−
    </div>
+
        <br>
−
    <!--End of Title-->
+
        <br>
−
<br>
+
        <br>
−
   
+
        <!--Title-->
−
    <!--Slides-->
+
        <div class="row center-block" style="padding:10px;width:960px;background-color:#07BEB8;box-shadow:0px 0px 5px black">
−
    <div id="slider1_container" style="position: relative; top: 0px; left: 6%; width: 1080px; height: 600px;">
+
            <div class="row" style="text-align:center;">
−
        <!-- Loading Screen -->
+
                <div class="col-sm-2">
−
        <div u="loading" style="position: absolute; top: 0px; left: 0px;">
+
                    <a href="https://2017.igem.org/Team:TAS_Taipei" style='text-decoration: none'><img src="https://static.igem.org/mediawiki/2015/2/2f/Tas_igemlogo.png" alt="Tas iGEM Logo" style="width: 100px;"></a>
−
            <div style="filter: alpha(opacity=70); opacity:0.7; position: absolute; display: block;
+
                </div>
−
                background-color: #000000; top: 0px; left: 0px;width: 100%;height:100%;">
+
                <!--TAS iGEM logo-->
−
            </div>
+
                <div class="col-sm-8" style='text-align:center;'>
−
            <div style="position: absolute; display: block; background: url(../img/loading.gif) no-repeat center center;
+
                    <a href="https://2017.igem.org/Team:TAS_Taipei" style='text-decoration: none;'>
−
                top: 0px; left: 0px;width: 100%;height:100%;">
+
                        <h2 style="font-family:'Lato';letter-spacing:10px;color: white; font-size: 60px; margin-top: 0;  margin-bottom: 0;">
 +
                            <b>NANOTRAP</b>
 +
                        </h2>
 +
                    </a>
 +
                </div>
 +
                <!--Project Name-->
 +
                <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>
 +
                <!--iGEM logo-->
 
             </div>
 
             </div>
 
         </div>
 
         </div>
 +
        <!--End of Title-->
 +
        <br>
  
−
         <!-- Slides Container -->
+
         <!--Slides-->
−
         <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 1080px; height: 600px; overflow: hidden;">
+
         <div id="slider1_container" style="position: relative; top: 0px; left: 6%; width: 1080px; height: 600px;">
−
             <div>
+
             <!-- Loading Screen -->
−
                <div u="image" id="image1ani" style = "lightgrey;text-align:center"><image src="https://static.igem.org/mediawiki/2016/b/bb/T--TAS_Taipei--TeamPhoto_iGEMPoster.jpg"/></div>
+
            <div u="loading" style="position: absolute; top: 0px; left: 0px;">
−
                <div u="caption" t="B" style="box-shadow: 0 0 10px 0;background-color:orange;padding:20px;position: absolute; bottom: 10px; left: 300px;">
+
                <div style="filter: alpha(opacity=70); opacity:0.7; position: absolute; display: block;
−
                    <p style = "color:white;font-size:25px;text-align:center">
+
                background-color: #000000; top: 0px; left: 0px;width: 100%;height:100%;">
−
                        <b>BEST MODEL, PARTS COLLECTION,</b>
+
−
                    </p>
+
−
                    <p style = "color:white;font-size:25px;text-align:center">
+
−
                        <b>EDUCATION & PUBLIC ENGAGEMENT</b>
+
−
                    </p>
+
−
                    <p style = "color:white;font-size: 18px;text-align:center">
+
−
                    Nominated: Best Wiki, Poster, Integrated Human Practices
+
−
                    </p>
+
 
                 </div>
 
                 </div>
−
            </div>
+
                 <div style="position: absolute; display: block; background: url(../img/loading.gif) no-repeat center center;
−
            <div>
+
                 top: 0px; left: 0px;width: 100%;height:100%;">
−
                 <img u="image" src="https://static.igem.org/mediawiki/2016/c/cb/T--TAS_Taipei--Counteract_Homepage_Banner.jpg"/>
+
−
            </div>
+
−
            <div>
+
−
                <div u="image" id="image1ani" style = "lightgrey;text-align:center"><image src="https://static.igem.org/mediawiki/2016/4/41/T--TAS_Taipei--PurificationAnimation.gif"/></div>
+
−
                 <div u="caption" t="L" style="box-shadow: 0 0 10px 0;background-color:orange;padding:20px;position: absolute; top: 250px; left: 20px;">
+
−
                    <p style = "color:white;font-size:32px;">
+
−
                    PROTOTYPE
+
−
                    </p>
+
−
                    <p style = "color:white;font-size: 20px">
+
−
                    Package purified proteins into nanoparticles
+
−
                    </p>
+
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
−
             <div>
+
 
−
                 <div u="image" id="justintime" style = "text-align:center; ">
+
            <!-- Slides Container -->
−
                    <image src="https://static.igem.org/mediawiki/2017/f/f7/Bio-Film-Treated_%28no_white_receptors%29.gif" id="image2ani" style ="width: 600px;height:600px;"/>
+
             <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 1080px; height: 600px; overflow: hidden;">
 +
                 <div>
 +
                    <div u="image" id="image1ani" style="lightgrey;text-align:center">
 +
                        <image src="https://static.igem.org/mediawiki/2016/b/bb/T--TAS_Taipei--TeamPhoto_iGEMPoster.jpg" />
 +
                    </div>
 +
                    <div u="caption" t="B" style="box-shadow: 0 0 10px 0;background-color:orange;padding:20px;position: absolute; bottom: 10px; left: 300px;">
 +
                        <p style="color:white;font-size:25px;text-align:center">
 +
                            <b>BEST MODEL, PARTS COLLECTION,</b>
 +
                        </p>
 +
                        <p style="color:white;font-size:25px;text-align:center">
 +
                            <b>EDUCATION & PUBLIC ENGAGEMENT</b>
 +
                        </p>
 +
                        <p style="color:white;font-size: 18px;text-align:center">
 +
                            Nominated: Best Wiki, Poster, Integrated Human Practices
 +
                        </p>
 +
                    </div>
 
                 </div>
 
                 </div>
−
                 <div u="caption" t="L" style="box-shadow: 0 0 10px 0;background-color:orange;padding:20px;position: absolute; top: 35px; left: 30px;">
+
                 <div>
−
                     <p style = "color:white;font-size:32px;">
+
                     <img u="image" src="https://static.igem.org/mediawiki/2016/c/cb/T--TAS_Taipei--Counteract_Homepage_Banner.jpg" />
−
                        BIOFILM FORMATION
+
−
                    </p>
+
−
                    <p style = "width:400px;color:white;font-size: 20px">
+
−
                        Biofilm is formed from engineered bacteria
+
−
                    </p>
+
 
                 </div>
 
                 </div>
−
            </div>
+
                <div>
−
            <div>
+
                    <div u="image" id="image1ani" style="lightgrey;text-align:center">
−
                 <div u="image" style = "text-align:center">
+
                        <image src="https://static.igem.org/mediawiki/2016/4/41/T--TAS_Taipei--PurificationAnimation.gif" />
−
                     <image src="https://static.igem.org/mediawiki/2017/5/58/T--TAS_Taipei--TeamPhoto.jpg" style = "width:1080px;height:400px"/>
+
                    </div>
 +
                    <div u="caption" t="L" style="box-shadow: 0 0 10px 0;background-color:orange;padding:20px;position: absolute; top: 250px; left: 20px;">
 +
                        <p style="color:white;font-size:32px;">
 +
                            PROTOTYPE
 +
                        </p>
 +
                        <p style="color:white;font-size: 20px">
 +
                            Package purified proteins into nanoparticles
 +
                        </p>
 +
                    </div>
 +
                 </div>
 +
                <div>
 +
                    <div u="image" id="justintime" style="text-align:center; ">
 +
                        <image src="https://static.igem.org/mediawiki/2017/f/f7/Bio-Film-Treated_%28no_white_receptors%29.gif" id="image2ani" style="width: 600px;height:600px;" />
 +
                     </div>
 +
                    <div u="caption" t="L" style="box-shadow: 0 0 10px 0;background-color:orange;padding:20px;position: absolute; top: 35px; left: 30px;">
 +
                        <p style="color:white;font-size:32px;">
 +
                            BIOFILM FORMATION
 +
                        </p>
 +
                        <p style="width:400px;color:white;font-size: 20px">
 +
                            Biofilm is formed from engineered bacteria
 +
                        </p>
 +
                    </div>
 +
                </div>
 +
                <div>
 +
                    <div u="image" style="text-align:center">
 +
                        <image src="https://static.igem.org/mediawiki/2017/5/58/T--TAS_Taipei--TeamPhoto.jpg" style="width:1080px;height:400px" />
 +
                    </div>
 +
 
 
                 </div>
 
                 </div>
−
               
 
 
             </div>
 
             </div>
−
        </div>
+
 
−
       
+
 
−
       
+
            <!--#region Bullet Navigator Skin Begin -->
−
        <!--#region Bullet Navigator Skin Begin -->
+
            <!-- Help: http://www.jssor.com/development/slider-with-bullet-navigator-jquery.html -->
−
        <!-- Help: http://www.jssor.com/development/slider-with-bullet-navigator-jquery.html -->
+
            <style>
−
        <style>
+
                /* jssor slider bullet navigator skin 12 css */
−
            /* jssor slider bullet navigator skin 12 css */
+
                /*
−
            /*
+
 
             .jssorb12 div          (normal)
 
             .jssorb12 div          (normal)
 
             .jssorb12 div:hover    (normal mouseover)
 
             .jssorb12 div:hover    (normal mouseover)
Line 349: Line 474:
 
             .jssorb12 .dn          (mousedown)
 
             .jssorb12 .dn          (mousedown)
 
             */
 
             */
−
            .jssorb12 {
+
               
−
                position: absolute;
+
                .jssorb12 {
−
            }
+
                    position: absolute;
−
            .jssorb12 div, .jssorb12 div:hover, .jssorb12 .av {
+
                }
−
                position: absolute;
+
               
−
                /* size of bullet elment */
+
                .jssorb12 div,
−
                width: 16px;
+
                .jssorb12 div:hover,
−
                height: 16px;
+
                .jssorb12 .av {
−
                background: url(https://static.igem.org/mediawiki/2015/9/90/B12.png) no-repeat;
+
                    position: absolute;
−
                overflow: hidden;
+
                    /* size of bullet elment */
−
                cursor: pointer;
+
                    width: 16px;
−
            }
+
                    height: 16px;
−
            .jssorb12 div { background-position: -7px -7px; }
+
                    background: url(https://static.igem.org/mediawiki/2015/9/90/B12.png) no-repeat;
−
            .jssorb12 div:hover, .jssorb12 .av:hover { background-position: -37px -7px; }
+
                    overflow: hidden;
−
            .jssorb12 .av { background-position: -67px -7px; }
+
                    cursor: pointer;
−
            .jssorb12 .dn, .jssorb12 .dn:hover { background-position: -97px -7px; }
+
                }
−
        </style>
+
               
−
        <!-- bullet navigator container -->
+
                .jssorb12 div {
−
        <div u="navigator" class="jssorb12" style="bottom: 16px; right: 6px;">
+
                    background-position: -7px -7px;
−
            <!-- bullet navigator item prototype -->
+
                }
−
            <div u="prototype"></div>
+
               
 +
                .jssorb12 div:hover,
 +
                .jssorb12 .av:hover {
 +
                    background-position: -37px -7px;
 +
                }
 +
               
 +
                .jssorb12 .av {
 +
                    background-position: -67px -7px;
 +
                }
 +
               
 +
                .jssorb12 .dn,
 +
                .jssorb12 .dn:hover {
 +
                    background-position: -97px -7px;
 +
                }
 +
 
 +
            </style>
 +
            <!-- bullet navigator container -->
 +
            <div u="navigator" class="jssorb12" style="bottom: 16px; right: 6px;">
 +
                <!-- bullet navigator item prototype -->
 +
                <div u="prototype"></div>
 +
            </div>
 +
            <!--#endregion Bullet Navigator Skin End -->
 +
            <a style="display: none" href="http://www.jssor.com">Image Slider</a>
 
         </div>
 
         </div>
−
         <!--#endregion Bullet Navigator Skin End -->
+
         <!--End of Slides-->
−
        <a style="display: none" href="http://www.jssor.com">Image Slider</a>
+
        <br>
−
    </div>
+
        <br>
−
    <!--End of Slides-->
+
−
<br>
+
−
<br>
+
  
−
<div class = "card" id = "bodycontainer" style = "overflow:hidden;font-family:Lato; text-align:left;">
+
        <div class="card" id="bodycontainer" style="overflow:hidden;font-family:Lato; text-align:left;">
−
<div class = "col-sm-12">
+
            <div class="col-sm-12">
−
<h1 style = "padding:10px;background-color: rgb(33,150,243);color:white">
+
                <h1 style="padding:10px;background-color: rgb(33,150,243);color:white">
−
ABSTRACT
+
                    ABSTRACT
−
</h1>
+
                </h1>
−
<div style = "font-size:20px; line-height:40px">
+
                <div style="font-size:20px; line-height:40px">
−
            <div class = "col-sm-1"></div>
+
                    <div class="col-sm-1"></div>
−
            <div class = "col-sm-10"><br>
+
                    <div class="col-sm-10"><br> Insert Abstract here. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure illum dolores a, quibusdam provident autem aliquam, ipsam maxime consectetur aliquid. Iste quam explicabo possimus, ex neque laboriosam necessitatibus vitae nisi magni, in iusto itaque odit blanditiis magnam perferendis soluta nam ipsa, quisquam quas voluptate alias repudiandae molestias unde sit quidem. Fuga unde dolor quibusdam culpa illum quos sit magni vitae, in earum veniam ex esse aliquid eum nam cum, repellat suscipit! Et odit nam, totam dolor maiores commodi quia ducimus numquam sit consequatur blanditiis, atque fugit pariatur velit molestias nostrum dolorem recusandae asperiores quasi suscipit modi incidunt ut dolores minima.
−
Cataracts, the clouding of the lens, cause half of the world's blindness. Most cataracts are age-related and arise when <b>crystallin proteins in the lens become oxidized and aggregate over time</b>. Surgery is currently the only recognized treatment to effectively cure cataracts, but this method is expensive and invasive. Therefore, we formulated a <b>natural and non-invasive alternative</b>. In the eye, a natural antioxidant glutathione (GSH)—produced by the enzyme glutathione reductase (GSR)—exists to <b>combat oxidation</b>, but GSH levels decrease with age. Studies have also suggested that another enzyme—<b>25-hydroxylase (CH25H)</b>—can convert cholesterol in the eye into 25-hydroxycholesterol (25HC), which <b>reverses crystallin aggregation</b>. We expressed and purified GSR and CH25H for the prevention and treatment of cataracts, respectively. To deliver these proteins through the cornea and into the lens, we engineered <b>biodegradable chitosan nanoparticles</b>, thus creating a natural and non-invasive alternative to surgery.
+
                    </div>
−
</div>
+
                    <br>
−
            <br>
+
−
+
−
</div>
+
−
</div>
+
  
−
</div>
+
                </div>
−
</div>
+
            </div>
−
<br>
+
 
 +
        </div>
 +
    </div>
 +
    <br>
 
     <br>
 
     <br>
 
     <br>
 
     <br>
  
−
<canvas id="canvas-container" style = "z-index:-1"></canvas>
+
    <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>
+
    <script type="text/javascript" src='https://2016.igem.org/Template:TAS_Taipei/js/field?action=raw&ctype=text/javascript'></script>
  
 
</body>
 
</body>
  
 
<style type='text/css'>
 
<style type='text/css'>
−
    #bg { position: fixed; top: 0; left: 0; }
+
    #bg {
−
    .bgwidth { width: 100%; }
+
        position: fixed;
−
    .bgheight { height: 100%; }
+
        top: 0;
 +
        left: 0;
 +
    }
 +
   
 +
    .bgwidth {
 +
        width: 100%;
 +
    }
 +
   
 +
    .bgheight {
 +
        height: 100%;
 +
    }
 +
 
 
</style>
 
</style>
  
 
<div class="backgroundpic">
 
<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%" important! height="100%" id="bg" alt="" >
+
    <img src="https://static.igem.org/mediawiki/2016/e/e5/T--TAS_Taipei--Taipei_Background_1.0.jpg" style="z-index:0" width="100%" important! height="100%" id="bg" alt="">
 
</div>
 
</div>
  
 
<script>
 
<script>
−
var nowRadius = 0
+
    var nowRadius = 0
−
$(function() {
+
    $(function() {
−
    if (screen.width < 1400)
+
        if (screen.width < 1400)
−
      document.body.style.zoom="80%"; // zoom in or out feature
+
            document.body.style.zoom = "80%"; // zoom in or out feature
−
    else if (screen.width < 1500)
+
        else if (screen.width < 1500)
−
      document.body.style.zoom = "90%";
+
            document.body.style.zoom = "90%";
−
    else document.body.style.zoom="100%";
+
        else document.body.style.zoom = "100%";
−
    $({blurRadius: 0}).animate({blurRadius: 10}, {
+
        $({
−
        duration: 20000,
+
            blurRadius: 0
−
        easing:'swing', // or "linear"
+
        }).animate({
−
                        // use jQuery UI or Easing plugin for more options
+
            blurRadius: 10
−
        step: function() {
+
        }, {
−
            console.log(this.blurRadius);
+
            duration: 20000,
−
            if ($("#bluebutton").hasClass("isOn") ) {return;};
+
            easing: 'swing', // or "linear"
−
            if($('#redbutton').hasClass("isOn") ) {return;}
+
            // use jQuery UI or Easing plugin for more options
−
            $('.backgroundpic').css({
+
            step: function() {
−
                "-webkit-filter": "blur("+this.blurRadius+"px)",
+
                console.log(this.blurRadius);
−
                "filter": "blur("+this.blurRadius+"px)"
+
                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();
 +
            }
 +
        });
  
−
            });
 
−
            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;
 +
                }
  
−
startBlur= function(speed) {
+
                $('.backgroundpic').css({
−
    $({blurRadius: nowRadius}).animate({blurRadius: 10}, {
+
                    "-webkit-filter": "blur(" + this.blurRadius + "px)",
−
        duration: speed,
+
                    "filter": "blur(" + this.blurRadius + "px)"
−
        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 creaping 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 + " ");
  
−
        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 creaping 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}, {
+
    stopBlur = function(speed) {
−
        duration: speed,
+
 
−
        easing: 'swing', // or "linear"
+
        $({
−
                        // use jQuery UI or Easing plugin for more options
+
            blurRadius: nowRadius
−
        step: function() {
+
        }).animate({
−
            console.log(this.blurRadius);
+
            blurRadius: 0
−
        if ($("#redbutton").hasClass("isOn") ) {} else{return;};
+
        }, {
−
            $('.backgroundpic').css({
+
            duration: speed,
−
                "-webkit-filter": "blur("+this.blurRadius+"px)",
+
            easing: 'swing', // or "linear"
−
                "filter": "blur("+this.blurRadius+"px)"
+
            // 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 + "");
  
−
            });
 
−
        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);
−
   
+
−
   
+
−
};
+
  
−
function chooseBlur() {
+
        } else {
−
  if ($("#redbutton").hasClass("isOn") )  
+
            if ($("#bluebutton").hasClass("isOn")) {} else {
−
      {
+
                startBlur(12000);
−
      stopBlur(4500);
+
−
 
+
 
             }
 
             }
−
 
+
        }
−
    else {
+
        if (!$("#redbutton").hasClass("isOn"))
−
            if($("#bluebutton").hasClass("isOn") ) {}
+
            if ($("#bluebutton").hasClass("isOn")) {
−
            else {startBlur(12000);}
+
−
          }
+
−
    if (!$("#redbutton").hasClass("isOn"))
+
−
        if ($("#bluebutton").hasClass("isOn"))
+
−
            {
+
 
                 $("#slideoutco").fadeOut(0);
 
                 $("#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")
+
                 switchMessage("BLUE", "Great! Furthur cataract formation is prevented with GSR Eyedrops. Now use <b>TREATMENT</b> eyedrops one last time.", currentColor() == "RED")
 
             }
 
             }
−
};
+
    };
−
 
+
  
 
</script>
 
</script>
  
 
<script>
 
<script>
 +
    function switchToggleB() {
 +
        if ($("#bluebutton").hasClass("isOn")) {
 +
            $("#bluebutton").removeClass("isOn");
 +
        } else {
 +
            $("#bluebutton").addClass("isOn");
 +
        }
 +
    };
  
−
function switchToggleB() {
+
     function switchToggleR() {
−
     if ( $("#bluebutton").hasClass("isOn") ) {
+
        if ($("#redbutton").hasClass("isOn")) {
−
        $("#bluebutton").removeClass("isOn"); }
+
            $("#redbutton").removeClass("isOn");
−
  else { $("#bluebutton").addClass("isOn"); }
+
        } else {
−
};
+
            $("#redbutton").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)  
+
     function currentColor() {
−
     {$(entirebox).fadeOut(100);
+
        if ($("#slidecontenttext").hasClass("alert-danger"))
−
    if ($("#slidecontenttext").hasClass("alert-danger"))
+
            return "RED";
−
        $("#slidecontenttext").removeClass("alert-danger");
+
        if ($("#slidecontenttext").hasClass("alert-warning"))
−
    if ($("#slidecontenttext").hasClass("alert-warning"))
+
            return "YELLOW";
−
        $("#slidecontenttext").removeClass("alert-warning");
+
        if ($("#slidecontenttext").hasClass("alert-info"))
−
    if ($("#slidecontenttext").hasClass("alert-info"))
+
            return "BLUE";
−
        $("#slidecontenttext").removeClass("alert-info");
+
        if ($("#slidecontenttext").hasClass("alert-success"))
−
    if ($("#slidecontenttext").hasClass("alert-success"))
+
            return "GREEN";
−
        $("#slidecontenttext").removeClass("alert-success");
+
        else return "NONE"
−
    if (color == "RED")
+
     };
−
        $("#slidecontenttext").addClass("alert-danger");
+
 
−
    if (color == "YELLOW")
+
    function switchMessage(color, textInside, refresh) {
−
        $("#slidecontenttext").addClass("alert-warning");
+
        var entirebox = document.getElementById("slideoutco");
−
    if (color == "BLUE")
+
 
−
        $("#slidecontenttext").addClass("alert-info");
+
        if (refresh) {
−
    if (color == "GREEN")
+
            $(entirebox).fadeOut(100);
−
        $("#slidecontenttext").addClass("alert-success");
+
            if ($("#slidecontenttext").hasClass("alert-danger"))
−
   
+
                $("#slidecontenttext").removeClass("alert-danger");
−
   
+
            if ($("#slidecontenttext").hasClass("alert-warning"))
−
    $("#slidecontenttext").html(textInside);
+
                $("#slidecontenttext").removeClass("alert-warning");
−
    $(entirebox).fadeIn(500);
+
            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>
 
</script>
Line 602: Line 784:
  
  
−
<canvas id="canvas-container" style = "z-index:-1" hidden></canvas>
+
<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" 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 */
+
    script type = "text/javascript" >
−
var acc = document.getElementsByClassName("accordion");
+
        /* 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 i;
+
        var acc = document.getElementsByClassName("accordion");
 +
    var i;
  
−
for (i = 0; i < acc.length; i++) {
+
    for (i = 0; i < acc.length; i++) {
−
    acc[i].onclick = function(){
+
        acc[i].onclick = function() {
−
        this.classList.toggle("active");
+
            this.classList.toggle("active");
−
        this.nextElementSibling.classList.toggle("show");
+
            this.nextElementSibling.classList.toggle("show");
 +
        }
 
     }
 
     }
−
}
+
 
 
</script>
 
</script>
  
Line 624: Line 809:
 
         // Make sure this.hash has a value before overriding default behavior
 
         // Make sure this.hash has a value before overriding default behavior
 
         if (this.hash !== "") {
 
         if (this.hash !== "") {
−
          // Prevent default anchor click behavior
+
            // Prevent default anchor click behavior
−
          event.preventDefault();
+
            event.preventDefault();
  
−
          // Store hash0
+
            // Store hash0
−
          var hash = this.hash;
+
            var hash = this.hash;
  
−
          // Using jQuery's animate() method to add smooth page scroll
+
            // 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
+
            // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
−
          $('html, body').animate({
+
            $('html, body').animate({
−
            scrollTop: $(hash).offset().top
+
                scrollTop: $(hash).offset().top
−
          }, 800, function(){
+
            }, 800, function() {
 +
 
 +
                // Add hash (#) to URL when done scrolling (default click behavior)
 +
                window.location.hash = hash;
 +
            });
 +
        } // End if
 +
    });
  
−
            // Add hash (#) to URL when done scrolling (default click behavior)
 
−
            window.location.hash = hash;
 
−
          });
 
−
        }  // End if
 
−
      });
 
 
</script>
 
</script>
  
 
<div id="slideout">
 
<div id="slideout">
 
     <div id="slidecontent">
 
     <div id="slidecontent">
−
         <h3>Prevention</h3>  
+
         <h3>Prevention</h3>
−
         <h5>GSR Eyedrop</h5>  
+
         <h5>GSR Eyedrop</h5>
 
         <label class="switch">
 
         <label class="switch">
 
             <input id="bluebutton" onClick="switchToggleB(); chooseBlur()" type="checkbox">
 
             <input id="bluebutton" onClick="switchToggleB(); chooseBlur()" type="checkbox">
 
             <div class="slider round bluecolorbutton"></div>
 
             <div class="slider round bluecolorbutton"></div>
 
         </label>
 
         </label>
−
<br>
+
        <br>
  
−
         <h3>Treatment</h3>  
+
         <h3>Treatment</h3>
−
         <h5>25HC Eyedrop</h5>  
+
         <h5>25HC Eyedrop</h5>
 
         <label class="switch">
 
         <label class="switch">
 
             <input id="redbutton" onClick="switchToggleR(); chooseBlur()" type="checkbox">
 
             <input id="redbutton" onClick="switchToggleR(); chooseBlur()" type="checkbox">
Line 663: Line 849:
 
     </div>
 
     </div>
 
     <div id="clickme">
 
     <div id="clickme">
−
    <h2 class="vertical-text" style="Lato" !important>
+
        <h2 class="vertical-text" style="Lato" !important>
−
            <br> Eyedrops  
+
            <br> Eyedrops
−
    </h2>
+
        </h2>
 
         <br><br><br>
 
         <br><br><br>
−
       
+
 
 
     </div>
 
     </div>
 
</div>
 
</div>
Line 680: Line 866:
  
 
<javascript>
 
<javascript>
−
   
+
 
 
</javascript>
 
</javascript>
  
 
<style type='text/css'>
 
<style type='text/css'>
−
 
+
    #slideout {
−
#slideout {
+
        background: #FFD700;
−
    background: #FFD700;
+
        position: fixed;
−
    position: fixed;
+
        height: 300px;
−
    height: 300px;
+
        width: 200px;
−
    width: 200px;
+
        top: 30%;
−
    top: 30%;
+
        right: -150px;
−
    right:-150px;
+
        padding-left: 60px;
−
    padding-left: 60px;
+
        z-index: 30;
−
    z-index:30;
+
        border-radius: 25px;
−
    border-radius: 25px;
+
    }
−
 
+
−
 
+
−
}
+
 
      
 
      
−
#slideoutco {
+
    #slideoutco {
−
    position: fixed;
+
        position: fixed;
−
    height: 200px;
+
        height: 200px;
−
    width: 300px;
+
        width: 300px;
−
    top: 70%;
+
        top: 70%;
−
    right:10px;
+
        right: 10px;
−
    padding-left: 10px;
+
        padding-left: 10px;
−
    padding-right: 10px;
+
        padding-right: 10px;
−
    border-radius: 10px;
+
        border-radius: 10px;
−
    z-index:30;
+
        z-index: 30;
−
}
+
    }
 
      
 
      
−
#clickme {
+
    #clickme {
−
    position: absolute;
+
        position: absolute;
−
    top: 0; left: 0;
+
        top: 0;
−
    height: 300px;
+
        left: 0;
−
    width: 50px;
+
        height: 300px;
−
    background: #FFBA49;
+
        width: 50px;
−
    z-index:30;
+
        background: #FFBA49;
−
    border-radius: 25px 5px 5px 25px;
+
        z-index: 30;
−
}
+
        border-radius: 25px 5px 5px 25px;
−
 
+
     }
−
#slidecontent {
+
−
     float:left;
+
−
}
+
 
      
 
      
−
#slidecontentco {
+
    #slidecontent {
−
     float:left;
+
        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%;
 +
    }
  
−
.vertical-text {
+
</style>
−
transform: rotate(90deg);
+
<script>
−
transform-origin: left bottom 0;
+
    $(function() {
−
  float: left;
+
        var rightVal = -150;
−
}
+
−
/* The switch - the box around the slider */
+
−
.switch {
+
−
  position: relative;
+
−
  display: inline-block;
+
−
  width: 60px;
+
−
  height: 34px;
+
−
}
+
  
−
/* Hide default HTML checkbox */
+
        $("#clickme").click(function() {
−
.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;
+
−
}
+
  
 +
            rightVal = (rightVal * -1) - 150;
 +
            $(this).parent().animate({
 +
                right: rightVal + 'px'
 +
            }, {
 +
                queue: false,
 +
                duration: 500
 +
            });
 +
        });
  
−
.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%;
 
−
}
 
−
</style>
 
−
<script>
 
−
$(function () {
 
−
    var rightVal = -150;
 
−
   
 
−
        $("#clickme").click(function () {
 
−
       
 
−
        rightVal = (rightVal * -1) - 150;
 
−
        $(this).parent().animate({right: rightVal + 'px'}, {queue: false, duration: 500});
 
 
     });
 
     });
−
   
 
−
});
 
−
 
  
 
</script>
 
</script>

Revision as of 11:53, 30 May 2017





Tas iGEM Logo

NANOTRAP


BEST MODEL, PARTS COLLECTION,

EDUCATION & PUBLIC ENGAGEMENT

Nominated: Best Wiki, Poster, Integrated Human Practices

PROTOTYPE

Package purified proteins into nanoparticles

BIOFILM FORMATION

Biofilm is formed from engineered bacteria

Image Slider


ABSTRACT


Insert Abstract here. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure illum dolores a, quibusdam provident autem aliquam, ipsam maxime consectetur aliquid. Iste quam explicabo possimus, ex neque laboriosam necessitatibus vitae nisi magni, in iusto itaque odit blanditiis magnam perferendis soluta nam ipsa, quisquam quas voluptate alias repudiandae molestias unde sit quidem. Fuga unde dolor quibusdam culpa illum quos sit magni vitae, in earum veniam ex esse aliquid eum nam cum, repellat suscipit! Et odit nam, totam dolor maiores commodi quia ducimus numquam sit consequatur blanditiis, atque fugit pariatur velit molestias nostrum dolorem recusandae asperiores quasi suscipit modi incidunt ut dolores minima.




Prevention

GSR Eyedrop

Treatment

25HC Eyedrop

LOCS: 0      


Eyedrops