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

Line 3: Line 3:
  
 
<head>
 
<head>
−
     <title>TAS Taipei iGEM Wiki</title>
+
     <title>Team - TAS Taipei iGEM Wiki</title>
 
     <style type='text/css'>
 
     <style type='text/css'>
 
         #top_title,
 
         #top_title,
Line 15: Line 15:
 
             padding: 0;
 
             padding: 0;
 
             background: #f3f4f4;
 
             background: #f3f4f4;
 +
        }
 +
       
 +
        img {
 +
            width: 100%
 
         }
 
         }
  
Line 21: Line 25:
  
 
<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">
  
Line 47: Line 49:
 
             p {
 
             p {
 
             font-family: Lato !important;
 
             font-family: Lato !important;
 +
            font-size: 17px !important
 
         }
 
         }
 
          
 
          
Line 64: Line 67:
 
     <script>
 
     <script>
 
         $(document).ready(function() {
 
         $(document).ready(function() {
−
             if (document.domain === "2017.igem.org")
+
             if (document.domain === "2016.igem.org")
 
                 setTimeout(function() {
 
                 setTimeout(function() {
 
                     $("style:eq(0)").remove();
 
                     $("style:eq(0)").remove();
Line 73: Line 76:
  
  
−
    <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>
 
−
 
−
    <br>
 
−
    <script>
 
−
        jQuery(document).ready(function($) {
 
−
            var _CaptionTransitions = [];
 
−
            _CaptionTransitions["L"] = {
 
−
                $Duration: 800,
 
−
                x: 0.6,
 
−
                $Easing: {
 
−
                    $Left: $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["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
 
−
                    $Class: $JssorBulletNavigator$, //[Required] Class to create navigator instance
 
−
                    $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
 
−
                    $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
 
−
                    $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
 
−
                    $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
 
−
                },
 
−
                $CaptionSliderOptions: { //[Optional] Options which specifies how 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
 
−
                    $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
 
−
                }
 
−
 
−
            };
 
−
            var jssor_slider1 = new $JssorSlider$("slider1_container", options);
 
−
        });
 
−
 
−
    </script>
 
−
 
−
    <!--Nav Bar-->
 
  
 
     <div class="container" style='z-index:10;position:relative;'>
 
     <div class="container" style='z-index:10;position:relative;'>
Line 371: Line 244:
 
         <br>
 
         <br>
 
         <br>
 
         <br>
−
        <!--Title-->
+
         <div class="row center-block" style="padding:10px;width:90%;background-color:#07BEB8;box-shadow:0px 0px 5px black">
−
         <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="row" style="text-align:center;">
 
                 <div class="col-sm-2">
 
                 <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>
+
                     <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>
−
                <!--TAS iGEM logo-->
 
 
                 <div class="col-sm-8" style='text-align:center;'>
 
                 <div class="col-sm-8" style='text-align:center;'>
−
                     <a href="https://2017.igem.org/Team:TAS_Taipei" style='text-decoration: none;'>
+
                     <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;">
+
                         <h2 style="font-family:'Lato';letter-spacing:10px;color: white; font-size: 60px;  margin-top: 0;  margin-bottom: 0;"><b>
−
                            <b>NANOTRAP</b>
+
NANOTRAP</b></h2>
−
                        </h2>
+
 
                     </a>
 
                     </a>
 
                 </div>
 
                 </div>
−
                <!--Project Name-->
 
 
                 <div class="col-sm-2">
 
                 <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>
 
                     <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>
−
                <!--iGEM logo-->
 
 
             </div>
 
             </div>
 
         </div>
 
         </div>
−
        <!--End of Title-->
 
 
         <br>
 
         <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="row">
 +
                    <h1>Team</h1>
 +
                    <div class="col-lg-12">
 +
 +
                        <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>
 +
                    </div>
  
−
        <!--Slides-->
 
−
        <div id="slider1_container" style="position: relative; top: 0px; left: 6%; width: 1080px; height: 600px;">
 
−
            <!-- Loading Screen -->
 
−
            <div u="loading" style="position: absolute; top: 0px; left: 0px;">
 
−
                <div style="filter: alpha(opacity=70); opacity:0.7; position: absolute; display: block;
 
−
                background-color: #000000; top: 0px; left: 0px;width: 100%;height:100%;">
 
 
                 </div>
 
                 </div>
−
                 <div style="position: absolute; display: block; background: url(../img/loading.gif) no-repeat center center;
+
                 <div class="row">
−
                top: 0px; left: 0px;width: 100%;height:100%;">
+
                    <div class="col-sm-0"></div>
 +
                    <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>
−
            </div>
 
  
−
            <!-- Slides Container -->
+
                <div class="row" id='members'>
−
            <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 1080px; height: 600px; overflow: hidden;">
+
                     <div class="col-lg-12">
−
                <div>
+
                        <h2 id="members">Members</h2>
−
                     <div u="image" id="image1ani" style="lightgrey;text-align:center">
+
                         <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>
−
                         <image src="https://static.igem.org/mediawiki/2016/b/bb/T--TAS_Taipei--TeamPhoto_iGEMPoster.jpg" />
+
 
                     </div>
 
                     </div>
−
                    <div u="caption" t="B" style="box-shadow: 0 0 10px 0;background-color:orange;padding:20px;position: absolute; bottom: 10px; left: 300px;">
+
                </div>
−
                         <p style="color:white;font-size:25px;text-align:center">
+
 
−
                             <b>BEST MODEL, PARTS COLLECTION,</b>
+
                <div class="row">
−
                         </p>
+
                    <div class="col-sm-10">
−
                         <p style="color:white;font-size:25px;text-align:center">
+
                        <div class="col-sm-3">
−
                             <b>EDUCATION & PUBLIC ENGAGEMENT</b>
+
                            <img src="https://static.igem.org/mediawiki/2017/8/80/Abby_Hau.jpg">
−
                         </p>
+
                            <h3>Abby H.</h3>
−
                         <p style="color:white;font-size: 18px;text-align:center">
+
                            <h4>HP, Prototype</h4>
−
                             Nominated: Best Wiki, Poster, Integrated Human Practices
+
                            <br>
−
                         </p>
+
                         </div>
 +
                        <div class="col-sm-3">
 +
                            <img src="https://static.igem.org/mediawiki/2017/d/d1/Allen_Liu.jpeg">
 +
                             <h3>Allen L.</h3>
 +
                            <h4>EXP</h4>
 +
                            <br>
 +
                         </div>
 +
                         <div class="col-sm-3">
 +
                            <img src="https://static.igem.org/mediawiki/2017/1/11/Andrew_Hu.jpeg">
 +
                             <h3>Andrew H.</h3>
 +
                            <h4>EXP</h4>
 +
                            <br>
 +
                         </div>
 +
                         <div class="col-sm-3">
 +
                             <img src="https://static.igem.org/mediawiki/2017/8/8c/Ashley_Lin.jpg">
 +
                            <h3>Ashley L.</h3>
 +
                            <h4>HP</h4>
 +
                            <br>
 +
                         </div>
 
                     </div>
 
                     </div>
 +
                    <br>
 +
 +
 
                 </div>
 
                 </div>
−
                 <div>
+
                 <div class="row">
−
                     <img u="image" src="https://static.igem.org/mediawiki/2016/c/cb/T--TAS_Taipei--Counteract_Homepage_Banner.jpg" />
+
                     <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 T.</h3>
 +
                            <h4>HP, EXP</h4>
 +
                            <br>
 +
                        </div>
 +
                        <div class="col-sm-3">
 +
                            <img src="https://static.igem.org/mediawiki/2017/2/29/Candice_Lee.jpg">
 +
                            <h3>Candice L.</h3>
 +
                            <h4>HP</h4>
 +
                            <br>
 +
                        </div>
 +
                        <div class="col-sm-3">
 +
                            <img src="https://static.igem.org/mediawiki/2016/9/9e/T--TAS_Taipei--Catherine.png">
 +
                            <h3>Catherine Y.</h3>
 +
                            <h4>EXP</h4>
 +
                        </div>
 +
                        <div class="col-sm-3">
 +
                            <img src="https://static.igem.org/mediawiki/2017/5/59/Chansie_Yang.JPG">
 +
                            <h3>Chansie Y.</h3>
 +
                            <h4>HP</h4>
 +
                            <br>
 +
                        </div>
 +
                    </div>
 +
                    <br>
 
                 </div>
 
                 </div>
−
                 <div>
+
                 <div class="row">
−
                     <div u="image" id="image1ani" style="lightgrey;text-align:center">
+
                     <div class="col-sm-10">
−
                         <image src="https://static.igem.org/mediawiki/2016/4/41/T--TAS_Taipei--PurificationAnimation.gif" />
+
                        <div class="col-sm-3">
 +
                            <img src="https://static.igem.org/mediawiki/2017/c/c8/Christine_Chen.JPG">
 +
                            <h3>Christine C.</h3>
 +
                            <h4>HP</h4>
 +
                            <br>
 +
                         </div>
 +
                        <div class="col-sm-3">
 +
                            <img src="https://static.igem.org/mediawiki/2017/8/85/Dylan_Lu.JPG">
 +
                            <h3>Dylan L.</h3>
 +
                            <h4>EXP</h4>
 +
                            <br>
 +
                        </div>
 +
                        <div class="col-sm-3">
 +
                            <img src="https://static.igem.org/mediawiki/2017/6/66/Emily_Chen.jpg">
 +
                            <h3>Emily C.</h3>
 +
                            <h4>HP, EXP</h4>
 +
                            <br>
 +
                        </div>
 +
                        <div class="col-sm-3">
 +
                            <img src="https://static.igem.org/mediawiki/2017/3/3b/Florence_Liou.jpg">
 +
                            <h3>Florence L.</h3>
 +
                            <h4>Modeling, EXP</h4>
 +
                            <br>
 +
                        </div>
 
                     </div>
 
                     </div>
−
                     <div u="caption" t="L" style="box-shadow: 0 0 10px 0;background-color:orange;padding:20px;position: absolute; top: 250px; left: 20px;">
+
                     <br>
−
                         <p style="color:white;font-size:32px;">
+
                </div>
−
                             PROTOTYPE
+
                <div class="row">
−
                         </p>
+
                    <div class="col-sm-10">
−
                         <p style="color:white;font-size: 20px">
+
                        <div class="col-sm-3">
−
                             Package purified proteins into nanoparticles
+
                            <img src="https://static.igem.org/mediawiki/2017/c/ca/Jesse_Kao.jpeg">
−
                         </p>
+
                            <h3>Jesse K.</h3>
 +
                            <h4>EXP</h4>
 +
                            <br>
 +
                         </div>
 +
                        <div class="col-sm-3">
 +
                            <img src="https://static.igem.org/mediawiki/2017/7/75/Justin_Pei.JPG">
 +
                             <h3>Justin P.</h3>
 +
                            <h4>Modeling</h4>
 +
                            <br>
 +
                         </div>
 +
                         <div class="col-sm-3">
 +
                            <img src="https://static.igem.org/mediawiki/2016/6/6b/T--TAS_Taipei--JustinY.png">
 +
                            <h3>Justin Y.</h3>
 +
                            <h4>EXP</h4>
 +
                            <br>
 +
                        </div>
 +
                        <div class="col-sm-3">
 +
                            <img src="https://static.igem.org/mediawiki/2017/d/db/Katherine_Hsu.JPG">
 +
                             <h3>Katherine H.</h3>
 +
                            <h4>HP</h4>
 +
                            <br>
 +
                         </div>
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
−
                 <div>
+
                 <div class="row">
−
                     <div u="image" id="justintime" style="text-align:center; ">
+
                     <div class="col-sm-10">
−
                         <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 class="col-sm-3">
 +
                            <img src="https://static.igem.org/mediawiki/2017/8/8b/Katie_Chang.jpeg">
 +
                            <h3>Katie C.</h3>
 +
                            <h4>EXP</h4>
 +
                            <br>
 +
                         </div>
 +
                        <div class="col-sm-3">
 +
                            <img src="https://static.igem.org/mediawiki/2017/b/b1/Kelly_Chen.jpg">
 +
                            <h3>Kelly C.</h3>
 +
                            <h4>HP, Wiki</h4>
 +
                            <br>
 +
                        </div>
 +
                        <div class="col-sm-3">
 +
                            <img src="https://static.igem.org/mediawiki/2017/8/8b/Laurent_Hsia.jpg">
 +
                            <h3>Laurent H.</h3>
 +
                            <h4>EXP, Wiki</h4>
 +
                            <br>
 +
                        </div>
 +
                        <div class="col-sm-3">
 +
                            <img src="https://static.igem.org/mediawiki/2017/a/a3/Oscar_Wallace.jpeg">
 +
                            <h3>Oscar W.</h3>
 +
                            <h4>EXP, Wiki</h4>
 +
                            <br>
 +
                        </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;">
+
 
−
                         <p style="color:white;font-size:32px;">
+
                     <br>
−
                             BIOFILM FORMATION
+
                </div>
−
                         </p>
+
                <div class="row">
−
                         <p style="width:400px;color:white;font-size: 20px">
+
                    <div class="col-sm-10">
−
                             Biofilm is formed from engineered bacteria
+
                        <div class="col-sm-3">
−
                         </p>
+
                            <img src="https://static.igem.org/mediawiki/2017/5/51/Paul_Imrogulio.jpeg">
 +
                            <h3>Paul I.</h3>
 +
                            <h4>EXP</h4>
 +
                            <br>
 +
                         </div>
 +
                        <div class="col-sm-3">
 +
                            <img src="https://static.igem.org/mediawiki/2017/a/ac/Stephanie_Chang.jpg">
 +
                             <h3>Stephanie C.</h3>
 +
                            <h4>HP</h4>
 +
                            <br>
 +
                         </div>
 +
                         <div class="col-sm-3">
 +
                            <img src="https://static.igem.org/mediawiki/2017/c/ce/William_Chen.jpg">
 +
                            <h3>William C.</h3>
 +
                            <h4>Wiki</h4>
 +
                            <br>
 +
                        </div>
 +
                        <div class="col-sm-3">
 +
                            <img src="https://static.igem.org/mediawiki/2017/a/ae/William_Huang.jpg">
 +
                             <h3>William H.</h3>
 +
                            <h4>EXP</h4>
 +
                            <br>
 +
                         </div>
 
                     </div>
 
                     </div>
 +
                    <br>
 
                 </div>
 
                 </div>
−
                 <div>
+
                 <div class="row">
−
                     <div u="image" style="text-align:center">
+
                     <div class="col-sm-10">
−
                        <image src="https://static.igem.org/mediawiki/2017/5/58/T--TAS_Taipei--TeamPhoto.jpg" style="width:1080px;height:400px" />
+
                        <div class="col-sm-3">
 +
                            <img src="https://static.igem.org/mediawiki/2017/e/ee/Yvonne_Wei.jpg">
 +
                            <h3>Yvonne W.</h3>
 +
                            <h4>EXP</h4>
 +
                            <br>
 +
                        </div>
 
                     </div>
 
                     </div>
 +
                </div>
 +
                <h1>Teaching Assistants</h1>
 +
                <br>
 +
                <div class="row">
 +
                    <div class="col-sm-10">
 +
                        <div class="col-sm-3">
 +
                            <img src="https://static.igem.org/mediawiki/2017/d/d4/Alvin_Wang.JPG">
 +
                            <h3>Alvin W.</h3>
 +
                            <br>
 +
                        </div>
 +
                        <div class="col-sm-3">
 +
                            <img src="https://static.igem.org/mediawiki/2016/1/11/T--TAS_Taipei--Avery.png">
 +
                            <h3>Avery W.</h3>
 +
                            <br>
 +
                        </div>
 +
                        <div class="col-sm-3">
 +
                            <img src="https://static.igem.org/mediawiki/2017/9/9c/ChangSun_Lee.jpeg">
 +
                            <h3>ChangSun L.</h3>
 +
                            <br>
 +
                        </div>
 +
                        <div class="col-sm-3">
 +
                            <img src="https://static.igem.org/mediawiki/2016/1/15/T--TAS_Taipei--Moksha.png">
 +
                            <h3>Moksha S.</h3>
 +
                            <br>
 +
                        </div>
 +
                    </div>
 +
                    <br>
 +
                </div>
 +
                <div class="row">
 +
                    <div class="col-sm-10">
 +
                        <div class="col-sm-3">
 +
                            <img src="https://static.igem.org/mediawiki/2015/8/8e/LYim.JPG">
 +
                            <h3>Leon Y.</h3>
 +
                            <br>
 +
                        </div>
 +
                    </div>
 +
                </div>
 +
                <h1>Advisors</h1>
 +
                <div class="row">
 +
                    <div class="col-sm-10">
 +
                        <div class="col-sm-3">
 +
                            <img src="https://static.igem.org/mediawiki/2015/3/33/JClapper.JPG">
 +
                            <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 class="row" id='tas'>
 +
                    <div class="col-lg-12">
 +
                        <h2 id="about">About Taipei American School</h2>
 +
                    </div>
 +
                </div>
 +
                <div class="row">
 +
                    <div class="col-lg-3">
 +
                        <img src="https://static.igem.org/mediawiki/2014hs/0/03/Tas_logo.png" style='float:right;width:150px;'>
 +
                    </div>
 +
                    <div class="col-lg-8">
 +
                        <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>
 +
                    </div>
 
                 </div>
 
                 </div>
−
            </div>
 
  
 +
                <div class="row" id='the_lab'>
 +
                    <div class="col-lg-12">
 +
                        <h2 id="aboutLab">About The Lab</h2>
 +
                    </div>
 +
                </div>
 +
                <div class="row">
 +
                    <div class="col-lg-11">
 +
                        <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>
  
−
            <!--#region Bullet Navigator Skin Begin -->
+
                    </div>
−
            <!-- Help: http://www.jssor.com/development/slider-with-bullet-navigator-jquery.html -->
+
                </div>
−
            <style>
+
−
                /* jssor slider bullet navigator skin 12 css */
+
−
                /*
+
−
            .jssorb12 div           (normal)
+
−
            .jssorb12 div:hover    (normal mouseover)
+
−
            .jssorb12 .av          (active)
+
−
            .jssorb12 .av:hover    (active mouseover)
+
−
            .jssorb12 .dn          (mousedown)
+
−
            */
+
−
               
+
−
                .jssorb12 {
+
−
                    position: absolute;
+
−
                }
+
−
               
+
−
                .jssorb12 div,
+
−
                .jssorb12 div:hover,
+
−
                .jssorb12 .av {
+
−
                    position: absolute;
+
−
                    /* size of bullet elment */
+
−
                    width: 16px;
+
−
                    height: 16px;
+
−
                    background: url(https://static.igem.org/mediawiki/2015/9/90/B12.png) no-repeat;
+
−
                    overflow: hidden;
+
−
                    cursor: pointer;
+
−
                }
+
−
               
+
−
                .jssorb12 div {
+
−
                    background-position: -7px -7px;
+
−
                }
+
−
               
+
−
                .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>
+
                 <div class="row" id='synthetic_biology'>
−
            <!-- bullet navigator container -->
+
                    <div class="col-lg-12">
−
            <div u="navigator" class="jssorb12" style="bottom: 16px; right: 6px;">
+
                        <h2>Synthetic Biology</h2>
−
                <!-- bullet navigator item prototype -->
+
                     </div>
−
                 <div u="prototype"></div>
+
                 </div>
−
            </div>
+
                <div class="row">
−
            <!--#endregion Bullet Navigator Skin End -->
+
                     <div class="col-lg-11">
−
            <a style="display: none" href="http://www.jssor.com">Image Slider</a>
+
                        <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>
−
        </div>
+
−
        <!--End of Slides-->
+
−
        <br>
+
−
        <br>
+
−
 
+
−
        <div class="card" id="bodycontainer" style="overflow:hidden;font-family:Lato; text-align:left;">
+
−
            <div class="col-sm-12">
+
−
                <h1 style="padding:10px;background-color: rgb(33,150,243);color:white">
+
−
                     ABSTRACT
+
−
                </h1>
+
−
                 <div style="font-size:20px; line-height:40px">
+
−
                    <div class="col-sm-1"></div>
+
−
                     <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.
+
 
                     </div>
 
                     </div>
−
                    <br>
 
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
 
         </div>
 
         </div>
 
     </div>
 
     </div>
−
     <br>
+
 
−
    <br>
+
     <br><br><br><br>
−
     <br>
+
     <br><br>
  
 
     <canvas id="canvas-container" style="z-index:-1"></canvas>
 
     <canvas id="canvas-container" style="z-index:-1"></canvas>
Line 544: Line 587:
  
 
</body>
 
</body>
 +
 +
 +
 +
 +
 +
 +
  
 
<style type='text/css'>
 
<style type='text/css'>
Line 563: Line 613:
  
 
<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%" height="100%" id="bg" alt="">
 
</div>
 
</div>
  
Line 569: Line 619:
 
     var nowRadius = 0
 
     var nowRadius = 0
 
     $(function() {
 
     $(function() {
−
         if (screen.width < 1400)
+
         if (screen.width > 1800)
−
             document.body.style.zoom = "80%"; // zoom in or out feature
+
             $("#slideoutco").fadeOut(0);
−
        else if (screen.width < 1500)
+
 
−
            document.body.style.zoom = "90%";
+
−
        else document.body.style.zoom = "100%";
+
 
         $({
 
         $({
 
             blurRadius: 0
 
             blurRadius: 0
Line 598: Line 646:
 
                 var LOCSnum = Math.round(nowRadius * 6 / 9);
 
                 var LOCSnum = Math.round(nowRadius * 6 / 9);
 
                 var NineLOCSnum = Math.round(nowRadius * 6 / 9 * 10);
 
                 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 > 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 == 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 (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) {
 
                 if (LOCSnum > 6) {
 
                     LOCSnum = "6+";
 
                     LOCSnum = "6+";
Line 606: Line 654:
 
                 } else $('#LOCS').text(LOCSnum + "");
 
                 } else $('#LOCS').text(LOCSnum + "");
  
−
                 //if (LOCSnum ==0) document.getElementById('bluebutton').click();
+
                 if (LOCSnum == 0) document.getElementById('bluebutton').click();
 
             }
 
             }
 
         });
 
         });
Line 639: Line 687:
 
                 var LOCSnum = Math.round(nowRadius * 6 / 9);
 
                 var LOCSnum = Math.round(nowRadius * 6 / 9);
 
                 var NineLOCSnum = Math.round(nowRadius * 6 / 9 * 10);
 
                 var NineLOCSnum = Math.round(nowRadius * 6 / 9 * 10);
−
                 if (NineLOCSnum == 15) $("#slideoutco").fadeOut(400);
+
                 /**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 (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) {
 
                 if (LOCSnum > 6) {
 
                     LOCSnum = "6+";
 
                     LOCSnum = "6+";
Line 675: Line 723:
 
                 var NineLOCSnum = Math.round(nowRadius * 6 / 9 * 10);
 
                 var NineLOCSnum = Math.round(nowRadius * 6 / 9 * 10);
  
−
                 if (NineLOCSnum < 68) {
+
                 /**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 > 10)
+
                              }
−
                        if (currentColor() == "RED" || currentColor() == "BLUE") $("#slideoutco").fadeOut(0);
+
        if (NineLOCSnum == 9) $("#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")){
−
 
+
                   
−
                if (NineLOCSnum < 5) {
+
                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")
−
                    if ($("#bluebutton").hasClass("isOn")) {
+
            }
−
 
+
            else switchMessage("BLUE","Your eyes are crystal clear! To avoid waste, please turn off the <b>TREATMENT</b> eyedrop.", currentColor()=="YELLOW");
−
                        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+";
 
                 if (LOCSnum > 6) LOCSnum = "6+";
 
                 else LOCSnum = LOCSnum + " ";
 
                 else LOCSnum = LOCSnum + " ";
Line 708: Line 754:
 
             }
 
             }
 
         }
 
         }
−
         if (!$("#redbutton").hasClass("isOn"))
+
         /**if (!$("#redbutton").hasClass("isOn"))
−
             if ($("#bluebutton").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")
+
                    $("#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")
 +
                }*/
 
     };
 
     };
  
Line 843: Line 890:
 
             <div class="slider round redcolorbutton"></div>
 
             <div class="slider round redcolorbutton"></div>
 
         </label>
 
         </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"><button  type="button" class="btn btn-danger btn-md">?</button> </a>
+
         <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>
Line 855: Line 902:
 
</div>
 
</div>
  
−
<div id="slideoutco" style="display:none">
+
<div id="slideoutco">
 
     <div id="slidecontentco">
 
     <div id="slidecontentco">
−
         <div id="slidecontenttext" class="alert alert-success fade in">
+
         <div id="slidecontenttext" class="alert alert-danger">
−
             <strong>Success!</strong> Indicates a successful or positive action.
+
             <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>
 
     </div>
Line 884: Line 933:
 
         height: 200px;
 
         height: 200px;
 
         width: 300px;
 
         width: 300px;
−
         top: 70%;
+
         top: 78%;
−
         right: 10px;
+
         right: 1%;
 
         padding-left: 10px;
 
         padding-left: 10px;
 
         padding-right: 10px;
 
         padding-right: 10px;
Line 984: Line 1,033:
 
     .slider.round:before {
 
     .slider.round:before {
 
         border-radius: 50%;
 
         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;
 
     }
 
     }
  

Revision as of 06:30, 8 June 2017




NANOTRAP

Team

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!

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.

Members

To see team member attributions, click here (leads to attributions page).

Abby H.

HP, Prototype


Allen L.

EXP


Andrew H.

EXP


Ashley L.

HP



Audrey T.

HP, EXP


Candice L.

HP


Catherine Y.

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


Oscar W.

EXP, Wiki



Paul I.

EXP


Stephanie C.

HP


William C.

Wiki


William H.

EXP



Yvonne W.

EXP


Teaching Assistants


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. 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.

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 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 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".







Prevention

GSR Eyedrop

Treatment

25HC Eyedrop

LOCS: 0      


Eyedrops




× Zoom out to see animation.          
Your screen resolution is too low unless you zoom out