Difference between revisions of "Team:TAS Taipei/Team"

 
(93 intermediate revisions by 2 users not shown)
Line 1: Line 1:
{{TAS Taipei/CSS}}
+
{{TAS Taipei/CSS2}} {{TAS Taipei/Bootstrap}} {{TAS Taipei/BootstrapJS}}
<html>
+
<html lang="en">
  
 
<head>
 
<head>
     <title>Team - TAS Taipei iGEM Wiki</title>
+
     <meta charset="UTF-8">
 +
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 +
    <title>About Us</title>
 +
    <link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
 
     <style type='text/css'>
 
     <style type='text/css'>
 
         #top_title,
 
         #top_title,
 
         #sideMenu {
 
         #sideMenu {
             display: none;
+
             display: none !important;
 
         }
 
         }
       
+
 
 
         #content {
 
         #content {
 
             width: 100%;
 
             width: 100%;
Line 16: Line 19:
 
             background: #f3f4f4;
 
             background: #f3f4f4;
 
         }
 
         }
       
+
 
         img {
+
         .this_border {
             width: 100%
+
             background-color: #A6BCA2;
 
         }
 
         }
  
Line 24: Line 27:
 
</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">
+
    <div class="return">
    <link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
+
        <h1>X</h1>
 
+
    </div>
    <link rel="stylesheet" href="https://2015.igem.org/Template:TAS_Taipei/css/bootstrap?action=raw&ctype=text/css">
+
    <div class="yellow">
 
+
        <div class="box right">
    <script>
+
            <div class="box2 right project" href="https://2017.igem.org/Team:TAS_Taipei/Background">
        localStorage.clear();
+
                <img src="https://static.igem.org/mediawiki/2017/0/00/T--TAS_Taipei--Project_C.png" id="dna">
 
+
                <h6 class="navCap">Project</h6>
    </script>
+
            </div>
    <script src="https://2015.igem.org/Template:TAS_Taipei/js/jquery?action=raw&ctype=text/javascript"></script>
+
            <div class="box2 right experiment" href="https://2017.igem.org/Team:TAS_Taipei/Experimental_Summary">
    <script src='https://2015.igem.org/Template:TAS_Taipei/js/bootstrap?action=raw&ctype=text/javascript'></script>
+
                <img src="https://static.igem.org/mediawiki/2017/b/b0/T--TAS_Taipei--Exp_C.png" id="dna">
    <script src="https://2015.igem.org/Template:TAS_Taipei/js/jquerySlides?action=raw&ctype=text/javascript"></script>
+
                <h6 class="navCap">Experiments</h6>
 
+
            </div>
    <script type="text/javascript" async src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML">
+
            <div class="box2 right modeling" href="https://2017.igem.org/Team:TAS_Taipei/Model">
 
+
                <img src="https://static.igem.org/mediawiki/2017/b/be/T--TAS_Taipei--Modeling_C.png" id="dna">
 
+
                <h6 class="navCap">Modeling</h6>
    </script>
+
            </div>
 
+
            <div class="box2 right prototype" href="https://2017.igem.org/Team:TAS_Taipei/Applied_Design">
    <script type="text/x-mathjax-config">
+
                <img src="https://static.igem.org/mediawiki/2017/2/2e/T--TAS_Taipei--Prototype_C.png" id="dna">
        MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
+
                <h6 class="navCap">Prototype</h6>
    </script>
+
            </div>
 
+
            <div class="box2 right policy" href="https://2017.igem.org/Team:TAS_Taipei/Human_Practices">
    <style type='text/css'>
+
                <img src="https://static.igem.org/mediawiki/2017/4/42/T--TAS_Taipei--HP2_C.png" id="dna">
            p {
+
                <h6 class="navCap">Human Practices</h6>
            font-family: Lato !important;
+
            </div>
            font-size: 17px !important
+
             <div class="box2 right biosafety" href="https://2017.igem.org/Team:TAS_Taipei/Safety">
        }
+
                 <img src="https://static.igem.org/mediawiki/2017/b/b8/T--TAS_Taipei--Biosafety_C.png" id="dna">
       
+
                <h6 class="navCap">Safety</h6>
        h1 {
+
            </div>
            font-size: 40-px !important;
+
            <div class="box2 right about" href="https://2017.igem.org/Team:TAS_Taipei/Team">
        }
+
                <img src="https://static.igem.org/mediawiki/2017/1/1a/T--TAS_Taipei--About_Us_C.png" id="dna">
       
+
                 <h6 class="navCap">About Us</h6>
        body {
+
            </div>
            font-family: Lato !important;
+
            <div class="box2 right acknowledgments" href="https://2017.igem.org/Team:TAS_Taipei/Attributions">
        }
+
                <img src="https://static.igem.org/mediawiki/2017/5/52/T--TAS_Taipei--Attributions_C.png" id="dna">
       
+
                <h6 class="navCap">Attributions</h6>
        h3 {
+
            </div>
            font-size: 25-px
+
        </div>
 
+
        <div class="blue">
    </style>
+
            <div class="box3 left project" href="https://2017.igem.org/Team:TAS_Taipei/Background">
 
+
                <h1>Project</h1>
    <script>
+
            </div>
        $(document).ready(function() {
+
            <div class="box3 left experiment" href="https://2017.igem.org/Team:TAS_Taipei/Experimental_Summary">
             if (document.domain === "2016.igem.org")
+
                <h1>Experiment</h1>
                 setTimeout(function() {
+
            </div>
                    $("style:eq(0)").remove();
+
            <div class="box3 left modeling" href="https://2017.igem.org/Team:TAS_Taipei/Model">
                }, 500);
+
                <h1>Modeling</h1>
        });
+
            </div>
 
+
            <div class="box3 left prototype" href="https://2017.igem.org/Team:TAS_Taipei/Applied_Design">
    </script>
+
                <h1>Prototype</h1>
 
+
            </div>
 
+
            <div class="box3 left policy" href="https://2017.igem.org/Team:TAS_Taipei/Human_Practices">
 
+
                <h1>Human Practice</h1>
    <div class="container" style='z-index:10;position:relative;'>
+
            </div>
        <div class="row center-block" style="text-align: left;">
+
            <div class="box3 left biosafety" href="https://2017.igem.org/Team:TAS_Taipei/Safety">
            <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;'>
+
                <h1>Safety</h1>
                 <ul style='margin-left:0px'>
+
            </div>
                    <li class="dropdown">
+
            <div class="box3 left about" href="https://2017.igem.org/Team:TAS_Taipei/Team">
                        <a href="https://2017.igem.org/Team:TAS_Taipei/Background">
+
                <h1>About Us</h1>
                            <h4 class="dropdown-toggle disabled" data-toggle="dropdown"><b>PROJECT</b></h4>
+
            </div>
                        </a>
+
            <div class="box3 left acknowledgments" href="https://2017.igem.org/Team:TAS_Taipei/Attributions">
                        <div class="dropdown-menu">
+
                <h1>Attributions</h1>
                            <div class='subcategories_container'>
+
            </div>
                                <div>
+
        </div>
                                    <h5><a href="https://2017.igem.org/Team:TAS_Taipei/Background">Background</a></h5>
+
    </div>
                                </div>
+
    <box class="home">
                                <div>
+
        <img src="https://static.igem.org/mediawiki/2017/2/25/T--TAS_Taipei--7home.svg" alt="Home" id="home" onclick="location.href='https://2017.igem.org/Team:TAS_Taipei';" style="cursor: pointer;">
                                    <h5><a href="https://2017.igem.org/Team:TAS_Taipei/Achievements">Achievements</a></h5>
+
    </box>
                                </div>
+
    <!--全版面大型看板開始-->
                                <div>
+
    <div class="jumbotron" id="team-jumbo">
                                    <h5><a href="https://2017.igem.org/Team:TAS_Taipei/Collaborations">Collaborations</a></h5>
+
        <div class="container">
                                </div>
+
            <h1>About Us</h1>
                                <div>
+
            <h4>Meet the team, the faces behind NANOTRAP.</h4>
                                    <h5><a href="https://2017.igem.org/Team:TAS_Taipei/Parts">Parts</a></h5>
+
        </div>
                                </div>
+
        <a href="#cv"><img src="https://static.igem.org/mediawiki/2017/4/4a/T--TAS_Taipei--Chevron_500px_200ppi.png" alt="test" id="chevron"></a>
                            </div>
+
    </div>
                            <div style='height:140px;'>
+
    <!--全版面大型看板結尾-->
                                <img src="https://static.igem.org/mediawiki/2016/1/11/T--TAS_Taipei--TAS_Icon_Project.png">
+
    <div class="cv" id="cv">
                                <h4>
+
        <div class="row">
                                    <b>Cataracts</b> - the leading cause of blindness. Find out how we can non-invasively <b>treat</b> and <b>prevent</b> cataract formation.
+
            <nav class="pageNav col-lg-1">
                                </h4>
+
                <ul class="nav">
                            </div>
+
                    <li>
                         </div>
+
                         <a href="#team" class="pageNavBig">TEAM</a>
 
                     </li>
 
                     </li>
                    <!--Project-->
+
                     <li>
                     <li class="dropdown">
+
                         <a href="#main" class="pageNavSm">Members</a>
                         <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>
 
                     </li>
                    <!--Experimental-->
+
                     <li>
                     <li class="dropdown">
+
                         <a href="#StuAd" class="pageNavSm">Student Advisors</a>
                         <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>
 
                     </li>
                    <!--Model-->
+
                     <li>
                     <li class="dropdown">
+
                         <a href="#advisors" class="pageNavSm">Advisors</a>
                         <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>
 
                     </li>
                    <!--Human Practice-->
+
                     <li>
                     <li class="dropdown">
+
                         <a href="#about" class="pageNavBig">ABOUT TAIPEI AMERICAN SCHOOL</a>
                         <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>
 
                     </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>
 
                 </ul>
 
             </nav>
 
             </nav>
        </div>
+
             <div class="white col-lg-2">
        <br>
+
                 hi
        <br>
+
        <br>
+
        <div class="row center-block" style="padding:10px;width:90%;background-color:#07BEB8;box-shadow:0px 0px 5px black">
+
             <div class="row" style="text-align:center;">
+
                <div class="col-sm-2">
+
                    <a href="https://2016.igem.org/Team:TAS_Taipei" style='text-decoration: none'><img src="https://static.igem.org/mediawiki/2016/c/c6/T--TAS_Taipei--TAS_iGEM_Logo.png" alt="" style="width: 100px;"></a>
+
                </div>
+
                <div class="col-sm-8" style='text-align:center;'>
+
                    <a href="https://2016.igem.org/Team:TAS_Taipei" style='text-decoration: none;'>
+
                        <h2 style="font-family:'Lato';letter-spacing:10px;color: white; font-size: 60px;  margin-top: 0;  margin-bottom: 0;"><b>
+
NANOTRAP</b></h2>
+
                    </a>
+
                </div>
+
                <div class="col-sm-2">
+
                    <a href="https://igem.org/HS"><img src="https://static.igem.org/mediawiki/2016/6/6e/T--TAS_Taipei--TAS_Icon_Logo2.png" alt="" style="width: 100px;"></a>
+
                 </div>
+
 
             </div>
 
             </div>
        </div>
 
        <br>
 
        <div class="row card" id='bodycontainer' class='row'>
 
            <div class="col-sm-2" style='padding-left:8px;'>
 
                <div id="category_navbar">
 
                    <ul class="nav nav-list" data-spy="affix" data-offset-top="160" style='-webkit-transform: translateZ(0);width:160px;margin-left:0'>
 
                        <li><a href="#members">Members</a></li>
 
                        <li><a href="#about">About TAS</a></li>
 
                        <li><a href="#aboutLab">About the Lab</a></li>
 
                    </ul>
 
                </div>
 
            </div>
 
 
 
             <div class="col-lg-10">
 
             <div class="col-lg-10">
 +
                <!-- header -->
 +
                <header id="team">
 +
                    <h1 class="name">TEAM</h1>
 +
                    <h4>We are the Taipei American School iGEM team, Taiwan's first high school team. Our team consists of 27 dedicated members, 11 of whom will be attending the jamboree in Boston. This is our fourth year participating in the iGEM competition, and we look forward to continuing for years to come!</h4><br>
 +
                    <div class="this_border"></div>
 +
                </header>
 +
                <div class="row" id="main">
 +
                    <h1 class="col-xs-12 col-sm-12 col-md-12 col-lg-12 title2">MEMBERS</h1>
 +
                </div><br>
 
                 <div class="row">
 
                 <div class="row">
                    <h1>Team</h1>
+
                     <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3 ind_pic_container">
                     <div class="col-lg-12">
+
                        <img src="https://static.igem.org/mediawiki/2017/a/ab/T--TAS_Taipei--Abby_Hau.jpg" class="ind_pic">
 
+
                         <h3>Abby H.</h3>
                         <p> We are the Taipei American School iGEM team, Taiwan's first high school team. Our team consists of 28 dedicated members, 15 of whom will be attending the jamboree in Boston. This is our third year participating in the iGEM competition, and we look forward to continuing for years to come!</p>
+
                        <h4>HP, Prototype</h4>
 
                     </div>
 
                     </div>
 
+
                     <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3 ind_pic_container">
                </div>
+
                         <img src="https://static.igem.org/mediawiki/2017/a/a2/T--TAS_Taipei--Allen_Liu.jpg" class="ind_pic">
                <div class="row">
+
                         <h3>Allen L.</h3>
                     <div class="col-sm-0"></div>
+
                         <h4>EXP</h4>
                    <figure class="col-lg-8">
+
                         <img src="https://static.igem.org/mediawiki/2016/9/96/T--TAS_Taipei--iGEM_Selfie_Team.jpg">
+
                        <figcaption class='darkblue'>A team photo taken during the award ceremony for the Giant Jamboree photo. Though we were unfortunately cut off from the photo frame, we still have this amazing photo! Photo taken by Avery (bottom right), as a group selfie.</figcaption>
+
                    </figure>
+
                </div>
+
 
+
                <div class="row" id='members'>
+
                    <div class="col-lg-12">
+
                         <h2 id="members">Members</h2>
+
                         <p>To see team member attributions, <a href="https://2017.igem.org/Team:TAS_Taipei/Attributions">click here</a> (leads to <b>attributions</b> page).</p>
+
 
                     </div>
 
                     </div>
                </div>
+
                     <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3 ind_pic_container">
 
+
                        <img src="https://static.igem.org/mediawiki/2017/d/dd/T--TAS_Taipei--Andrew_Hu.jpg" class="ind_pic">
                <div class="row">
+
                        <h3>Andrew H.</h3>
                     <div class="col-sm-10">
+
                         <h4>EXP</h4>
                        <div class="col-sm-3">
+
                            <img src="https://static.igem.org/mediawiki/2017/8/80/Abby_Hau.jpg">
+
                            <h3>Abby Hau</h3>
+
                            <h4>HP, Prototype</h4>
+
                            <br>
+
                        </div>
+
                        <div class="col-sm-3">
+
                            <img src="https://static.igem.org/mediawiki/2017/d/d1/Allen_Liu.jpeg">
+
                            <h3>Allen Liu</h3>
+
                        </div>
+
                        <div class="col-sm-3">
+
                            <img src="https://static.igem.org/mediawiki/2017/1/11/Andrew_Hu.jpeg">
+
                            <h3>Andrew Hu</h3>
+
                         </div>
+
                        <div class="col-sm-3">
+
                            <img src="https://static.igem.org/mediawiki/2017/8/8c/Ashley_Lin.jpg">
+
                            <h3>Ashley Lin</h3>
+
                        </div>
+
 
                     </div>
 
                     </div>
                    <br>
+
                     <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3 ind_pic_container">
 
+
                        <img src="https://static.igem.org/mediawiki/2017/9/94/T--TAS_Taipei--Ashley_Lin.jpg" class="ind_pic">
 
+
                        <h3>Ashley L.</h3>
                </div>
+
                         <h4>HP</h4>
                <div class="row">
+
                     <div class="col-sm-10">
+
                        <div class="col-sm-3">
+
                            <img src="https://static.igem.org/mediawiki/2017/3/32/Audrey_Tei.JPG">
+
                            <h3>Audrey Tei</h3>
+
                        </div>
+
                        <div class="col-sm-3">
+
                            <img src="https://static.igem.org/mediawiki/2017/2/29/Candice_Lee.jpg">
+
                            <h3>Candice Lee</h3>
+
                        </div>
+
                        <div class="col-sm-3">
+
                            <img src="https://static.igem.org/mediawiki/2017/5/59/Chansie_Yang.JPG">
+
                            <h3>Chansie Yang</h3>
+
                         </div>
+
                        <div class="col-sm-3">
+
                            <img src="https://static.igem.org/mediawiki/2017/c/c8/Christine_Chen.JPG">
+
                            <h3>Christine Chen</h3>
+
                        </div>
+
 
                     </div>
 
                     </div>
                    <br>
+
                     <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3 ind_pic_container">
                </div>
+
                        <img src="https://static.igem.org/mediawiki/2017/5/5d/T--TAS_Taipei--Audrey_Tei.jpg" class="ind_pic">
                <div class="row">
+
                        <h3>Audrey T.</h3>
                     <div class="col-sm-10">
+
                         <h4>HP, EXP</h4>
                        <div class="col-sm-3">
+
                            <img src="https://static.igem.org/mediawiki/2017/8/85/Dylan_Lu.JPG">
+
                            <h3>Dylan Lu</h3>
+
                        </div>
+
                        <div class="col-sm-3">
+
                            <img src="https://static.igem.org/mediawiki/2017/6/66/Emily_Chen.jpg">
+
                            <h3>Emily Chen</h3>
+
                        </div>
+
                        <div class="col-sm-3">
+
                            <img src="https://static.igem.org/mediawiki/2017/3/3b/Florence_Liou.jpg">
+
                            <h3>Florence Liou</h3>
+
                        </div>
+
                        <div class="col-sm-3">
+
                            <img src="https://static.igem.org/mediawiki/2017/c/ca/Jesse_Kao.jpeg">
+
                            <h3>Jesse Kao</h3>
+
                         </div>
+
 
                     </div>
 
                     </div>
                    <br>
+
                     <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3 ind_pic_container">
                </div>
+
                        <img src="https://static.igem.org/mediawiki/2017/5/5d/T--TAS_Taipei--Candice_Lee.jpg" class="ind_pic">
                <div class="row">
+
                        <h3>Candice L.</h3>
                     <div class="col-sm-10">
+
                         <h4>HP</h4>
                        <div class="col-sm-3">
+
                            <img src="https://static.igem.org/mediawiki/2017/7/75/Justin_Pei.JPG">
+
                            <h3>Justin Pei</h3>
+
                        </div>
+
                        <div class="col-sm-3">
+
                            <img src="https://static.igem.org/mediawiki/2017/d/db/Katherine_Hsu.JPG">
+
                            <h3>Katherine Hsu</h3>
+
                        </div>
+
                        <div class="col-sm-3">
+
                            <img src="https://static.igem.org/mediawiki/2017/8/8b/Katie_Chang.jpeg">
+
                            <h3>Katie Chang</h3>
+
                        </div>
+
                        <div class="col-sm-3">
+
                            <img src="https://static.igem.org/mediawiki/2017/b/b1/Kelly_Chen.jpg">
+
                            <h3>Kelly Chen</h3>
+
                         </div>
+
 
                     </div>
 
                     </div>
                </div>
+
                     <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3 ind_pic_container">
                <div class="row">
+
                        <img src="https://static.igem.org/mediawiki/2017/1/12/T--TAS_Taipei--Cat_Yeh.jpg" class="ind_pic">
                     <div class="col-sm-10">
+
                        <h3>Catherine Y.</h3>
                        <div class="col-sm-3">
+
                         <h4>EXP</h4>
                            <img src="https://static.igem.org/mediawiki/2017/8/8b/Laurent_Hsia.jpg">
+
                            <h3>Laurent Hsia</h3>
+
                        </div>
+
                        <div class="col-sm-3">
+
                            <img src="https://static.igem.org/mediawiki/2017/a/a3/Oscar_Wallace.jpeg">
+
                            <h3>Oscar Wallace</h3>
+
                        </div>
+
                        <div class="col-sm-3">
+
                            <img src="https://static.igem.org/mediawiki/2017/5/51/Paul_Imrogulio.jpeg">
+
                            <h3>Paul Imbrogulio</h3>
+
                        </div>
+
                        <div class="col-sm-3">
+
                            <img src="https://static.igem.org/mediawiki/2017/a/ac/Stephanie_Chang.jpg">
+
                            <h3>Stephanie Chang</h3>
+
                         </div>
+
 
                     </div>
 
                     </div>
 
+
                     <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3 ind_pic_container" class="ind_pic">
                    <br>
+
                         <img src="https://static.igem.org/mediawiki/2017/d/d6/T--TAS_Taipei--Catherine_Cheng.jpg" class="ind_pic">
                </div>
+
                        <h3>Catherine C.</h3>
                <div class="row">
+
                         <h4>EXP</h4>
                     <div class="col-sm-10">
+
                        <div class="col-sm-3">
+
                            <img src="https://static.igem.org/mediawiki/2017/c/ce/William_Chen.jpg">
+
                            <h3>William Chen</h3>
+
                        </div>
+
                        <div class="col-sm-3">
+
                            <img src="https://static.igem.org/mediawiki/2017/a/ae/William_Huang.jpg">
+
                            <h3>William Huang</h3>
+
                        </div>
+
                        <div class="col-sm-3">
+
                            <img src="https://static.igem.org/mediawiki/2017/e/ee/Yvonne_Wei.jpg">
+
                            <h3>Yvonne Wei</h3>
+
                         </div>
+
                        <div class="col-sm-3">
+
                            <img src="https://static.igem.org/mediawiki/2016/6/6b/T--TAS_Taipei--JustinY.png">
+
                            <h3>Justin Yang</h3>
+
                         </div>
+
 
                     </div>
 
                     </div>
                    <br>
+
                     <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3 ind_pic_container">
                </div>
+
                        <img src="https://static.igem.org/mediawiki/2017/8/80/T--TAS_Taipei--Chansie_Yang.jpg" class="ind_pic">
                <div class="row">
+
                        <h3>Chansie Y.</h3>
                     <div class="col-sm-10">
+
                         <h4>HP</h4>
                        <div class="col-sm-3">
+
                            <img src="https://static.igem.org/mediawiki/2016/9/9e/T--TAS_Taipei--Catherine.png">
+
                            <h3>Catherine Yeh</h3>
+
                        </div>
+
                        <div class="col-sm-3">
+
                            <img src="https://static.igem.org/mediawiki/2016/7/78/T--TAS_Taipei--Huiru.png">
+
                            <h3>Huiru Huang</h3>
+
                        </div>
+
                        <div class="col-sm-3">
+
                            <img src="https://static.igem.org/mediawiki/2017/d/d4/Alvin_Wang.JPG">
+
                            <h3>Alvin Wang</h3>
+
                         </div>
+
                        <div class="col-sm-3">
+
                            <img src="https://static.igem.org/mediawiki/2016/1/11/T--TAS_Taipei--Avery.png">
+
                            <h3>Avery Wang</h3>
+
                        </div>
+
 
                     </div>
 
                     </div>
                </div>
+
                    <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3 ind_pic_container">
                <div class="row">
+
                        <img src="https://static.igem.org/mediawiki/2017/d/d3/T--TAS_Taipei--Christine_Chen.jpg" class="ind_pic">
                     <div class="col-sm-10">
+
                        <h3>Christine C.</h3>
                         <div class="col-sm-3">
+
                        <h4>HP</h4>
                            <img src="https://static.igem.org/mediawiki/2017/9/9c/ChangSun_Lee.jpeg">
+
                    </div>
                            <h3>ChangSun Lee</h3>
+
                    <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3 ind_pic_container">
                         </div>
+
                        <img src="https://static.igem.org/mediawiki/2017/6/6f/T--TAS_Taipei--Dylan_Lu.jpg" class="ind_pic">
                         <div class="col-sm-3">
+
                        <h3>Dylan L.</h3>
                            <img src="https://static.igem.org/mediawiki/2016/1/15/T--TAS_Taipei--Moksha.png">
+
                        <h4>EXP</h4>
                            <h3>Moksha Shah</h3>
+
                    </div>
                         </div>
+
                     <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3 ind_pic_container">
                         <div class="col-sm-3">
+
                         <img src="https://static.igem.org/mediawiki/2017/a/a7/T--TAS_Taipei--Emily_Chen.jpg" class="ind_pic">
                            <img src="https://static.igem.org/mediawiki/2015/8/8e/LYim.JPG">
+
                        <h3>Emily C.</h3>
                            <h3>Leon Yim</h3>
+
                        <h4>HP, EXP</h4>
                         </div>
+
                    </div>
 +
                    <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3 ind_pic_container">
 +
                        <img src="https://static.igem.org/mediawiki/2017/6/64/T--TAS_Taipei--Florence_Liou.jpg" class="ind_pic">
 +
                        <h3>Florence L.</h3>
 +
                        <h4>Modeling, EXP</h4>
 +
                    </div>
 +
                    <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3 ind_pic_container">
 +
                        <img src="https://static.igem.org/mediawiki/2017/1/17/T--TAS_Taipei--Jesse_Kao.jpeg" class="ind_pic">
 +
                        <h3>Jesse K.</h3>
 +
                         <h4>EXP</h4>
 +
                    </div>
 +
                    <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3 ind_pic_container">
 +
                         <img src="https://static.igem.org/mediawiki/2017/6/6a/T--TAS_Taipei--Justin_Pei.jpg" class="ind_pic">
 +
                        <h3>Justin P.</h3>
 +
                        <h4>Modeling</h4>
 +
                    </div>
 +
                    <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3 ind_pic_container">
 +
                        <img src="https://static.igem.org/mediawiki/2016/6/6b/T--TAS_Taipei--JustinY.png" class="ind_pic">
 +
                        <h3>Justin Y.</h3>
 +
                         <h4>EXP</h4>
 +
                    </div>
 +
                    <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3 ind_pic_container">
 +
                         <img src="https://static.igem.org/mediawiki/2017/c/ce/T--TAS_Taipei--Katherine_Hsu.jpg" class="ind_pic">
 +
                        <h3>Katherine H.</h3>
 +
                        <h4>HP</h4>
 +
                    </div>
 +
                    <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3 ind_pic_container">
 +
                        <img src="https://static.igem.org/mediawiki/2017/d/d4/T--TAS_Taipei--Katie_Chang.jpeg" class="ind_pic">
 +
                        <h3>Katie C.</h3>
 +
                         <h4>EXP</h4>
 +
                    </div>
 +
                    <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3 ind_pic_container">
 +
                        <img src="https://static.igem.org/mediawiki/2017/7/72/T--TAS_Taipei--Kelly_Chen.jpg" class="ind_pic">
 +
                        <h3>Kelly C.</h3>
 +
                        <h4>HP, Wiki</h4>
 +
                    </div>
 +
                    <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3 ind_pic_container">
 +
                        <img src="https://static.igem.org/mediawiki/2017/f/f5/T--TAS_Taipei--Laurent_Hsia.jpg" class="ind_pic">
 +
                        <h3>Laurent H.</h3>
 +
                        <h4>EXP, Wiki</h4>
 +
                    </div>
 +
                    <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3 ind_pic_container">
 +
                        <img src="https://static.igem.org/mediawiki/2017/5/5b/T--TAS_Taipei--Leona_Tsai.jpg" class="ind_pic">
 +
                        <h3>Leona T.</h3>
 +
                        <h4>EXP</h4>
 +
                    </div>
 +
                    <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3 ind_pic_container">
 +
                        <img src="https://static.igem.org/mediawiki/2017/f/f9/T--TAS_Taipei--Oscar_Wallace.jpeg" class="ind_pic">
 +
                        <h3>Oscar W.</h3>
 +
                        <h4>EXP, Wiki</h4>
 +
                    </div>
 +
                    <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3 ind_pic_container">
 +
                        <img src="https://static.igem.org/mediawiki/2017/2/2a/T--TAS_Taipei--Paul_Imrogulio.jpeg" class="ind_pic">
 +
                        <h3>Paul I.</h3>
 +
                        <h4>EXP</h4>
 +
                    </div>
 +
                    <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3 ind_pic_container">
 +
                        <img src="https://static.igem.org/mediawiki/2017/3/39/T--TAS_Taipei--Stephanie_Chang.jpg" class="ind_pic">
 +
                        <h3>Stephanie C.</h3>
 +
                        <h4>HP</h4>
 +
                    </div>
 +
                    <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3 ind_pic_container">
 +
                        <img src="https://static.igem.org/mediawiki/2017/c/c5/T--TAS_Taipei--William_Chen.jpg" class="ind_pic">
 +
                        <h3>William C.</h3>
 +
                        <h4>Wiki</h4>
 +
                    </div>
 +
                    <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3 ind_pic_container">
 +
                        <img src="https://static.igem.org/mediawiki/2017/0/0b/T--TAS_Taipei--William_Huang.jpg" class="ind_pic">
 +
                        <h3>William H.</h3>
 +
                        <h4>EXP</h4>
 +
                    </div>
 +
                    <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3 ind_pic_container">
 +
                        <img src="https://static.igem.org/mediawiki/2017/9/98/T--TAS_Taipei--Yvonne_Wei.jpg" class="ind_pic">
 +
                        <h3>Yvonne W.</h3>
 +
                        <h4>EXP</h4>
 
                     </div>
 
                     </div>
                    <br>
 
 
                 </div>
 
                 </div>
 +
                <br>
 +
                <div class="row" id="StuAd">
 +
                    <h1 class="col-xs-12 col-sm-12 col-md-12 col-lg-12 title2">STUDENT ADVISORS</h1>
 +
                </div><br>
 
                 <div class="row">
 
                 <div class="row">
                     <div class="col-sm-10">
+
                     <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3 adv_ind_pic_container">
                        <div class="col-sm-3">
+
                        <img src="https://static.igem.org/mediawiki/2017/d/d4/Alvin_Wang.JPG" class="ind_pic">
                            <img src="https://static.igem.org/mediawiki/2015/3/33/JClapper.JPG">
+
                        <h3>Alvin W.</h3>
                            <h3>Jude Clapper</h3>
+
                        </div>
+
                        <div class="col-sm-3">
+
                            <img src="https://static.igem.org/mediawiki/2015/0/04/TChiang.jpg">
+
 
+
                            <h3>Teresa Chiang</h3>
+
                        </div>
+
                        <div class="col-sm-3">
+
                            <img src="https://static.igem.org/mediawiki/2015/7/72/STsao.jpg">
+
                            <h3>Sean Tsao</h3>
+
                        </div>
+
                        <div class="col-sm-3">
+
                            <img src="https://static.igem.org/mediawiki/2015/4/43/RBrundage.jpg">
+
                            <h3>Richard Brundage</h3>
+
                        </div>
+
 
                     </div>
 
                     </div>
                </div>
+
                    <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3 adv_ind_pic_container">
                <div class="row" id='tas'>
+
                        <img src="https://static.igem.org/mediawiki/2016/1/11/T--TAS_Taipei--Avery.png" class="ind_pic">
                     <div class="col-lg-12">
+
                        <h3>Avery W.</h3>
                         <h2 id="about">About Taipei American School</h2>
+
                    </div>
 +
                    <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3 adv_ind_pic_container">
 +
                        <img src="https://static.igem.org/mediawiki/2017/1/1c/T--TAS_Taipei--ChangSun_Lee.jpeg" class="ind_pic">
 +
                        <h3>ChangSun L.</h3>
 +
                    </div>
 +
                     <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3 adv_ind_pic_container">
 +
                         <img src="https://static.igem.org/mediawiki/2016/1/15/T--TAS_Taipei--Moksha.png" class="ind_pic">
 +
                        <h3>Moksha S.</h3>
 +
                    </div>
 +
                    <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3 adv_ind_pic_container">
 +
                        <img src="https://static.igem.org/mediawiki/2017/f/fd/T--TAS_Taipei--Leon_Yim.jpg" class="ind_pic">
 +
                        <h3>Leon Y.</h3>
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
 +
                <div class="row" id="advisors">
 +
                    <h1 class="col-xs-12 col-sm-12 col-md-12 col-lg-12 title2">ADVISORS</h1>
 +
                </div><br>
 
                 <div class="row">
 
                 <div class="row">
                     <div class="col-lg-3">
+
                     <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3 adv_ind_pic_container">
                         <img src="https://static.igem.org/mediawiki/2014hs/0/03/Tas_logo.png" style='float:right;width:150px;'>
+
                         <img src="https://static.igem.org/mediawiki/2015/3/33/JClapper.JPG" class="ind_pic">
 +
                        <h3>Jude Clapper</h3>
 
                     </div>
 
                     </div>
                     <div class="col-lg-8">
+
                     <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3 adv_ind_pic_container">
                         <p>Taipei American School is a private independent school with an American-based curriculum located in Tianmu (T'ien-mu), Shilin District (Shih-lin), Taipei City. Most graduates of TAS go on to attend colleges and universities in United States, although some choose to attend schools in other countries. TAS strives to stay ahead of the curve in STEAM education. An important aspect of STEAM education is the 'E': Engineering. Our iGEM team represents the application of engineering beyond robotics.</p>
+
                         <img src="https://static.igem.org/mediawiki/2015/0/04/TChiang.jpg" class="ind_pic">
 +
                        <h3>Teresa Chiang</h3>
 
                     </div>
 
                     </div>
                </div>
+
                    <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3 adv_ind_pic_container">
 
+
                        <img src="https://static.igem.org/mediawiki/2015/7/72/STsao.jpg" class="ind_pic">
                <div class="row" id='the_lab'>
+
                        <h3>Sean Tsao</h3>
                     <div class="col-lg-12">
+
                    </div>
                         <h2 id="aboutLab">About The Lab</h2>
+
                     <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3 adv_ind_pic_container">
 +
                         <img src="https://static.igem.org/mediawiki/2015/4/43/RBrundage.jpg" class="ind_pic">
 +
                        <h3>Richard Brundage</h3>
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
 
                 <div class="row">
 
                 <div class="row">
                     <div class="col-lg-11">
+
                     <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" id="this_border">
                        <img src="https://static.igem.org/mediawiki/2015/1/18/Team_page.JPG" style='float: right;width: 263px;margin: 10px;'>
+
                        <p>We work in the Sandy R. Puckett Memorial Research Lab, which was completely renovated in 2013 to provide a research laboratory for on-campus student research in synthetic biology and nanotechnology. It is fully equipped with lab tools for research for the iGEM competition. The students have the opportunity to be creative and exploratory in many areas of scientific research at TAS.</p>
+
 
+
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
 
+
                 <section class="main">
                 <div class="row" id='synthetic_biology'>
+
                    <div class="row" id="about">
                    <div class="col-lg-12">
+
                        <h1 class="title2 col-lg-12 col-md-12 col-sm-12 col-xs-12">ABOUT TAIPEI AMERICAN SCHOOL</h1>
                        <h2>Synthetic Biology</h2>
+
 
                     </div>
 
                     </div>
                </div>
+
                    <div class="row">
                <div class="row">
+
                        <h4 class="para col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <div class="col-lg-11">
+
                            Taipei American School is a private independent school with an American-based curriculum located in Tianmu (T'ien-mu), Shilin District (Shih-lin), Taipei City. TAS strives to stay ahead of the curve in STEAM education. An important aspect of STEAM education is the 'E': Engineering. Our iGEM team represents the application of engineering beyond robotics.
                        <p>The fusion between biological research and engineering has culminated in the creation of synthetic biology. This interdisciplinary area was facilitated by the recent advances in technology, allowing humans to actually design and construct biological devices as if they were machinery. However, the advent of synthetic biology has raised concerns with biosafety and biosecurity, which is why iGEM places such importance on "safety".</p>
+
                        </h4>
 
                     </div>
 
                     </div>
                </div>
+
                    <div class="row">
 
+
                        <h1 class="title2 col-lg-12 col-md-12 col-sm-12 col-xs-12">About the lab</h1>
 +
                    </div>
 +
                    <div class="row">
 +
                        <h4 class="para col-lg-12 col-md-12 col-sm-12 col-xs-12">
 +
                            We work in the Sandy R. Puckett Memorial Research Lab, which was completely renovated in 2013 to provide a research laboratory for on-campus student research in chemistry, synthetic biology and nanotechnology. It is fully equipped with lab tools for research for the iGEM competition. The students have the opportunity to be creative and exploratory in many areas of scientific research at TAS.
 +
                        </h4>
 +
                    </div>
 +
                    <div class="row">
 +
                        <h1 class="title2 col-lg-12 col-md-12 col-sm-12 col-xs-12">Synthetic Biology</h1>
 +
                    </div>
 +
                    <div class="row">
 +
                        <h4 class="para col-lg-12 col-md-12 col-sm-12 col-xs-12">
 +
                            The fusion between biological research and engineering has culminated in the creation of synthetic biology. This interdisciplinary area was facilitated by the recent advances in technology, allowing biological devices to be designed and contructed as if they were machinery. However, the advent of synthetic biology has raised concerns with biosafety and biosecurity, which is why iGEM places such importance on "safety".
 +
                        </h4>
 +
                    </div>
 +
                    <br>
 
             </div>
 
             </div>
 +
            </section>
 
         </div>
 
         </div>
 
     </div>
 
     </div>
 
+
     <script>
    <br><br><br><br>
+
         $("a").on('click', function(event) {
    <br><br>
+
            if (this.hash !== "") {
 
+
                event.preventDefault();
    <canvas id="canvas-container" style="z-index:-1"></canvas>
+
                 var hash = this.hash;
     <script type="text/javascript" src='https://2016.igem.org/Template:TAS_Taipei/js/field?action=raw&ctype=text/javascript'></script>
+
                 $('html, body').animate({
 
+
                     scrollTop: $(hash).offset().top
</body>
+
                 }, 300, function() {
 
+
                     // Add hash (#) to URL when done scrolling (default click behavior)
 
+
                     window.location.hash = hash;
 
+
 
+
 
+
 
+
 
+
 
+
<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();
 
 
             }
 
             }
 
         });
 
         });
 +
        $(function() {
 +
            $('.yellow').removeClass('active');
 +
            $('.yellow').mouseenter(function() {
 +
                var windowsize = $(window).width();
 +
                if (windowsize > 1020) {
 +
                    //if the window is greater than 1020px wide then hover
 +
                    $('.yellow').addClass('active');
 +
                }
 +
                $('.navCap').addClass('deactive');
 +
            });
  
    });
+
            $('.yellow').mouseleave(function() {
 +
                var windowsize = $(window).width();
 +
                if (windowsize > 1020) {
 +
                    //if the window is greater than 1020px wide then hover
 +
                    $('.yellow').removeClass('active');
 +
                }
 +
                $('.navCap').removeClass('deactive');
 +
            });
  
    startBlur = function(speed) {
+
            $('.box2').click(function() {
        $({
+
                var windowsize = $(window).width();
            blurRadius: nowRadius
+
                if (windowsize < 1020) {
        }).animate({
+
                    //if the window is less than 1020px wide then turn on click for mobile.
            blurRadius: 10
+
                    if ($('.yellow').hasClass('active')) {
        }, {
+
                        window.location = $(this).attr('href');
            duration: speed,
+
                    } else {
            easing: 'swing', // or "linear"
+
                        $('.yellow').addClass('active');
            // use jQuery UI or Easing plugin for more options
+
                        $('.return').addClass('active');
            step: function() {
+
                        $('.home').addClass('deactive');
                console.log(this.blurRadius);
+
                    }
                if ($("#bluebutton").hasClass("isOn")) {
+
                } else {
                    return;
+
                     window.location = $(this).attr('href');
                };
+
                if ($('#redbutton').hasClass("isOn")) {
+
                     return;
+
 
                 }
 
                 }
  
                $('.backgroundpic').css({
+
            })
                    "-webkit-filter": "blur(" + this.blurRadius + "px)",
+
                    "filter": "blur(" + this.blurRadius + "px)"
+
  
                 });
+
            $('.box3').click(function() {
 +
                 var windowsize = $(window).width();
 +
                if (windowsize < 1020) {
 +
                    //if the window is less than 1020px wide then turn on click for mobile.
 +
                    if ($('.yellow').hasClass('active')) {
 +
                        window.location = $(this).attr('href');
 +
                    } else {
 +
                        $('.yellow').addClass('active');
 +
                        $('.return').addClass('active');
 +
                        $('.home').addClass('deactive');
 +
                    }
 +
                } else {
 +
                    window.location = $(this).attr('href');
 +
                }
 +
            })
  
                nowRadius = this.blurRadius;
+
            $('.return').click(function() {
                var LOCSnum = Math.round(nowRadius * 6 / 9);
+
                 $('.yellow').removeClass('active');
                var NineLOCSnum = Math.round(nowRadius * 6 / 9 * 10);
+
                 $('.return').removeClass('active');
                 /**if (NineLOCSnum == 15) $("#slideoutco").fadeOut(400);
+
                 $('.home').removeClass('deactive');
                 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 + " ");
+
  
 +
            $('.cv').click(function() {
 +
                $('.yellow').removeClass('active');
 +
                $('.return').removeClass('active');
 +
                $('.home').removeClass('deactive');
 +
            })
  
             }
+
             $('.jumbotron').mouseenter(function() {
        });
+
                $('.project').removeClass('active');
    };
+
                $('.experiment').removeClass('active');
 +
                $('.modeling').removeClass('active');
 +
                $('.prototype').removeClass('active');
 +
                $('.biosafety').removeClass('active');
 +
                $('.about').removeClass('active');
 +
                $('.policy').removeClass('active');
 +
                $('.acknowledgments').removeClass('active');
 +
            });
  
    stopBlur = function(speed) {
+
            $('.cv').mouseenter(function() {
 +
                $('.project').removeClass('active');
 +
                $('.experiment').removeClass('active');
 +
                $('.modeling').removeClass('active');
 +
                $('.prototype').removeClass('active');
 +
                $('.biosafety').removeClass('active');
 +
                $('.about').removeClass('active');
 +
                $('.policy').removeClass('active');
 +
                $('.acknowledgments').removeClass('active');
 +
            });
  
        $({
+
            $('.project').mouseenter(function() {
            blurRadius: nowRadius
+
                $('.project').addClass('active');
        }).animate({
+
                 $('.experiment').removeClass('active');
            blurRadius: 0
+
                 $('.modeling').removeClass('active');
        }, {
+
                $('.prototype').removeClass('active');
            duration: speed,
+
                 $('.biosafety').removeClass('active');
            easing: 'swing', // or "linear"
+
                 $('.about').removeClass('active');
            // use jQuery UI or Easing plugin for more options
+
                $('.policy').removeClass('active');
            step: function() {
+
                $('.acknowledgments').removeClass('active');
                 console.log(this.blurRadius);
+
            });
                 if ($("#redbutton").hasClass("isOn")) {} else {
+
                    return;
+
                 };
+
                 $('.backgroundpic').css({
+
                    "-webkit-filter": "blur(" + this.blurRadius + "px)",
+
                    "filter": "blur(" + this.blurRadius + "px)"
+
  
                 });
+
            $('.experiment').mouseenter(function() {
                 nowRadius = this.blurRadius;
+
                 $('.project').removeClass('active');
                 var LOCSnum = Math.round(nowRadius * 6 / 9);
+
                 $('.experiment').addClass('active');
                 var NineLOCSnum = Math.round(nowRadius * 6 / 9 * 10);
+
                 $('.modeling').removeClass('active');
 +
                 $('.prototype').removeClass('active');
 +
                $('.biosafety').removeClass('active');
 +
                $('.about').removeClass('active');
 +
                $('.policy').removeClass('active');
 +
                $('.acknowledgments').removeClass('active');
 +
            });
  
                /**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");
+
            $('.modeling').mouseenter(function() {
                              }
+
                $('.project').removeClass('active');
        if (NineLOCSnum == 9) $("#slideoutco").fadeOut(0);
+
                $('.experiment').removeClass('active');
       
+
                $('.modeling').addClass('active');
           
+
                $('.prototype').removeClass('active');
        if (NineLOCSnum < 5) {
+
                 $('.biosafety').removeClass('active');
            if ($("#bluebutton").hasClass("isOn")){
+
                $('.about').removeClass('active');
                   
+
                 $('.policy').removeClass('active');
                 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")
+
                 $('.acknowledgments').removeClass('active');
            }
+
            });
            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 + "");
+
  
             }
+
             $('.prototype').mouseenter(function() {
        });
+
                $('.project').removeClass('active');
 +
                $('.experiment').removeClass('active');
 +
                $('.modeling').removeClass('active');
 +
                $('.prototype').addClass('active');
 +
                $('.biosafety').removeClass('active');
 +
                $('.about').removeClass('active');
 +
                $('.policy').removeClass('active');
 +
                $('.acknowledgments').removeClass('active');
 +
            });
  
 +
            $('.biosafety').mouseenter(function() {
 +
                $('.project').removeClass('active');
 +
                $('.experiment').removeClass('active');
 +
                $('.modeling').removeClass('active');
 +
                $('.prototype').removeClass('active');
 +
                $('.biosafety').addClass('active');
 +
                $('.about').removeClass('active');
 +
                $('.policy').removeClass('active');
 +
                $('.acknowledgments').removeClass('active');
 +
            });
  
    };
+
            $('.about').mouseenter(function() {
 +
                $('.project').removeClass('active');
 +
                $('.experiment').removeClass('active');
 +
                $('.modeling').removeClass('active');
 +
                $('.prototype').removeClass('active');
 +
                $('.biosafety').removeClass('active');
 +
                $('.about').addClass('active');
 +
                $('.policy').removeClass('active');
 +
                $('.acknowledgments').removeClass('active');
 +
            });
  
    function chooseBlur() {
+
             $('.policy').mouseenter(function() {
        if ($("#redbutton").hasClass("isOn")) {
+
                 $('.project').removeClass('active');
             stopBlur(4500);
+
                $('.experiment').removeClass('active');
 
+
                $('.modeling').removeClass('active');
        } else {
+
                 $('.prototype').removeClass('active');
            if ($("#bluebutton").hasClass("isOn")) {} else {
+
                 $('.biosafety').removeClass('active');
                startBlur(12000);
+
                 $('.about').removeClass('active');
            }
+
                 $('.policy').addClass('active');
        }
+
                $('.acknowledgments').removeClass('active');
        /**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>
+
            $('.acknowledgments').mouseenter(function() {
 
+
                $('.project').removeClass('active');
<div id="slideout">
+
                 $('.experiment').removeClass('active');
    <div id="slidecontent">
+
                $('.modeling').removeClass('active');
        <h3>Prevention</h3>
+
                $('.prototype').removeClass('active');
        <h5>GSR Eyedrop</h5>
+
                $('.biosafety').removeClass('active');
        <label class="switch">
+
                $('.about').removeClass('active');
            <input id="bluebutton" onClick="switchToggleB(); chooseBlur()" type="checkbox">
+
                $('.policy').removeClass('active');
            <div class="slider round bluecolorbutton"></div>
+
                $('.acknowledgments').addClass('active');
        </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 &#160;</span></b> &#160; &#160; <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">&times;</a>
+
                 <strong>Zoom out to see animation.</strong> &#160; &#160; &#160; &#160; &#160;<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>
 
  
 +
        })
  
 +
    </script>
 
</body>
 
</body>
  
 
</html>
 
</html>

Latest revision as of 13:25, 31 October 2017

X

Project

Experiment

Modeling

Prototype

Human Practice

Safety

About Us

Attributions

Home

About Us

Meet the team, the faces behind NANOTRAP.

test
hi

TEAM

We are the Taipei American School iGEM team, Taiwan's first high school team. Our team consists of 27 dedicated members, 11 of whom will be attending the jamboree in Boston. This is our fourth year participating in the iGEM competition, and we look forward to continuing for years to come!


MEMBERS


Abby H.

HP, Prototype

Allen L.

EXP

Andrew H.

EXP

Ashley L.

HP

Audrey T.

HP, EXP

Candice L.

HP

Catherine Y.

EXP

Catherine C.

EXP

Chansie Y.

HP

Christine C.

HP

Dylan L.

EXP

Emily C.

HP, EXP

Florence L.

Modeling, EXP

Jesse K.

EXP

Justin P.

Modeling

Justin Y.

EXP

Katherine H.

HP

Katie C.

EXP

Kelly C.

HP, Wiki

Laurent H.

EXP, Wiki

Leona T.

EXP

Oscar W.

EXP, Wiki

Paul I.

EXP

Stephanie C.

HP

William C.

Wiki

William H.

EXP

Yvonne W.

EXP


STUDENT ADVISORS


Alvin W.

Avery W.

ChangSun L.

Moksha S.

Leon Y.

ADVISORS


Jude Clapper

Teresa Chiang

Sean Tsao

Richard Brundage

ABOUT TAIPEI AMERICAN SCHOOL

Taipei American School is a private independent school with an American-based curriculum located in Tianmu (T'ien-mu), Shilin District (Shih-lin), Taipei City. TAS strives to stay ahead of the curve in STEAM education. An important aspect of STEAM education is the 'E': Engineering. Our iGEM team represents the application of engineering beyond robotics.

About the lab

We work in the Sandy R. Puckett Memorial Research Lab, which was completely renovated in 2013 to provide a research laboratory for on-campus student research in chemistry, synthetic biology and nanotechnology. It is fully equipped with lab tools for research for the iGEM competition. The students have the opportunity to be creative and exploratory in many areas of scientific research at TAS.

Synthetic Biology

The fusion between biological research and engineering has culminated in the creation of synthetic biology. This interdisciplinary area was facilitated by the recent advances in technology, allowing biological devices to be designed and contructed as if they were machinery. However, the advent of synthetic biology has raised concerns with biosafety and biosecurity, which is why iGEM places such importance on "safety".