|
|
| Line 1: |
Line 1: |
| − | {{TAS Taipei/CSS}}
| + | <!DOCTYPE html> |
| − | <html> | + | <html lang="en"> |
| | | | |
| | <head> | | <head> |
| − | <title>TAS Taipei iGEM Wiki</title> | + | <meta charset="UTF-8"> |
| − | <style type='text/css'> | + | <title>Test Main</title> |
| − | #top_title,
| + | <link rel="stylesheet" href="../Test/test.css"> |
| − | #sideMenu {
| + | |
| − | display: none;
| + | |
| − | }
| + | |
| − |
| + | |
| − | #content {
| + | |
| − | width: 100%;
| + | |
| − | margin: 0;
| + | |
| − | padding: 0;
| + | |
| − | background: #f3f4f4;
| + | |
| − | }
| + | |
| − | | + | |
| − | </style>
| + | |
| | </head> | | </head> |
| | | | |
| − | <body data-spy="scroll" data-target="#category_navbar"> | + | <body> |
| | + | <div class="circle"> |
| | + | <h6>TAS_TAIPEI 2017|<img src="https://static.igem.org/mediawiki/2017/thumb/2/23/Fb_icon.png/240px-Fb_icon.png" onclick="location.href='https://www.facebook.com/IGEMTAS/';" style="cursor: pointer;" id="fb"> |
| | + | <span><img src="https://static.igem.org/mediawiki/2017/f/f3/Twitter_icon.png" onclick="location.href='https://twitter.com/iGEM_TAS';" style="cursor: pointer;" id="twit"></span> |
| | + | <img src="http://objects.airfrance.com/FR/common/common/img/tab1st/social/picto_instagram_login.svg" onclick="location.href='https://www.instagram.com/igem_tas/';" style="cursor: pointer;" id="insta"></h6> |
| | + | <h1><span>N</span>ANO</h1> |
| | + | <h1 id="row2"><span>T</span>RAP</h1> |
| | + | <p id="abstract1">The small size of nanoparticles is both an advantage and a problem. The high surface area allows them to catalyze chemical reactions more efficiently, but most wastewater treatment plants lack the ability to clean up such small particles, thus allowing nanoparticles to enter the environment and pose health risks for humans, plants, and aquatic life. As nanoparticle usage expands into medical, industrial, and consumer products, it is important to prevent nanoparticles from harming the environment. Our project aims to remove nanoparticles using two approaches: trapping citrate-capped nanoparticles with a modified form of the membrane protein proteorhodopsin and increasing the production of <i> E.coli </i> biofilm to entrap nanoparticles in the extracellular matrix. Ultimately, we wish to clean nanoparticle waste by implementing our trapping mechanism into centralized wastewater treatment plants to efficiently capture all nanoparticles before treated water is released back into the environment. |
| | + | </p> |
| | | | |
| − | <link rel="shortcut icon" href="https://static.igem.org/mediawiki/2016/c/c6/T--TAS_Taipei--TAS_iGEM_Logo.png"> | + | </div> |
| − | <link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'> | + | <section class="boxes"> |
| − | | + | <div class="box" id="project" onclick="location.href='https://2017.igem.org/Team:TAS_Taipei/Background';" style="cursor: pointer;"> |
| − | <link rel="stylesheet" href="https://2015.igem.org/Template:TAS_Taipei/css/bootstrap?action=raw&ctype=text/css">
| + | <br> |
| − | | + | <h1>PROJECT |
| − | <script>
| + | <span> |
| − | localStorage.clear();
| + | <img src="https://static.igem.org/mediawiki/2017/6/6b/Dna-structure.png" id="dna" width="40vh"> |
| − | | + | </span> |
| − | </script>
| + | </h1> |
| − | <script src="https://2015.igem.org/Template:TAS_Taipei/js/jquery?action=raw&ctype=text/javascript"></script>
| + | <br> |
| − | <script src='https://2015.igem.org/Template:TAS_Taipei/js/bootstrap?action=raw&ctype=text/javascript'></script>
| + | |
| − | <script src="https://2015.igem.org/Template:TAS_Taipei/js/jquerySlides?action=raw&ctype=text/javascript"></script>
| + | |
| − | | + | |
| − | <script type="text/javascript" async src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML">
| + | |
| − | | + | |
| − | | + | |
| − | </script>
| + | |
| − | | + | |
| − | <script type="text/x-mathjax-config">
| + | |
| − | MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
| + | |
| − | </script>
| + | |
| − | | + | |
| − | <style type='text/css'>
| + | |
| − | p {
| + | |
| − | font-family: Lato !important;
| + | |
| − | }
| + | |
| − |
| + | |
| − | h1 {
| + | |
| − | font-size: 40-px !important;
| + | |
| − | }
| + | |
| − |
| + | |
| − | body {
| + | |
| − | font-family: Lato !important;
| + | |
| − | }
| + | |
| − |
| + | |
| − | h3 {
| + | |
| − | font-size: 25-px
| + | |
| − | | + | |
| − | </style>
| + | |
| − | | + | |
| − | <script>
| + | |
| − | $(document).ready(function() {
| + | |
| − | if (document.domain === "2017.igem.org")
| + | |
| − | setTimeout(function() {
| + | |
| − | $("style:eq(0)").remove();
| + | |
| − | }, 500);
| + | |
| − | });
| + | |
| − | | + | |
| − | </script>
| + | |
| − | | + | |
| − | | + | |
| − | <script type="text/javascript" src="https://2015.igem.org/Template:TAS_Taipei/js/jssor?action=raw&ctype=text/javascript"></script>
| + | |
| − | <script type="text/javascript" src="https://2015.igem.org/Template:TAS_Taipei/js/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="row center-block" style="text-align: left;"> | + | |
| − | <nav style='font-family:Lato;font-size:22px;background-color:#1C77C3;-webkit-transform: translateZ(0);z-index: 100;position: fixed;box-shadow: 0px 0px 10px black;'>
| + | |
| − | <ul style='margin-left:0px'>
| + | |
| − | <li class="dropdown">
| + | |
| − | <a href="https://2017.igem.org/Team:TAS_Taipei/Background">
| + | |
| − | <h4 class="dropdown-toggle disabled" data-toggle="dropdown"><b>PROJECT</b></h4>
| + | |
| − | </a>
| + | |
| − | <div class="dropdown-menu">
| + | |
| − | <div class='subcategories_container'>
| + | |
| − | <div>
| + | |
| − | <h5><a href="https://2017.igem.org/Team:TAS_Taipei/Background">Background</a></h5>
| + | |
| − | </div>
| + | |
| − | <div>
| + | |
| − | <h5><a href="https://2017.igem.org/Team:TAS_Taipei/Achievements">Achievements</a></h5>
| + | |
| − | </div>
| + | |
| − | <div>
| + | |
| − | <h5><a href="https://2017.igem.org/Team:TAS_Taipei/Collaborations">Collaborations</a></h5>
| + | |
| − | </div>
| + | |
| − | <div>
| + | |
| − | <h5><a href="https://2017.igem.org/Team:TAS_Taipei/Parts">Parts</a></h5>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | <div style='height:140px;'>
| + | |
| − | <img src="https://static.igem.org/mediawiki/2016/1/11/T--TAS_Taipei--TAS_Icon_Project.png">
| + | |
| − | <h4>
| + | |
| − | <b>Cataracts</b> - the leading cause of blindness. Find out how we can non-invasively <b>treat</b> and <b>prevent</b> cataract formation.
| + | |
| − | </h4>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | </li>
| + | |
| − | <!--Project-->
| + | |
| − | <li class="dropdown">
| + | |
| − | <a href="https://2017.igem.org/Team:TAS_Taipei/Experimental_Summary">
| + | |
| − | <h4 class='dropdown-toggle disabled' data-toggle="dropdown"><b>EXPERIMENTAL</b></h4>
| + | |
| − | </a>
| + | |
| − | <div class="dropdown-menu">
| + | |
| − | <div class='subcategories_container'>
| + | |
| − | <div>
| + | |
| − | <h5><a href="https://2016.igem.org/Team:TAS_Taipei/Experimental_Summary#lensmodel">Lens Cataract Model</a></h5>
| + | |
| − | </div>
| + | |
| − | <div>
| + | |
| − | <h5><a href="https://2016.igem.org/Team:TAS_Taipei/Experimental_Summary#construct">Prevention and Treatment Constructs </a></h5>
| + | |
| − | </div>
| + | |
| − | <div>
| + | |
| − | <h5><a href="https://2016.igem.org/Team:TAS_Taipei/Experimental_Summary#prototype">Delivery Prototype</a></h5>
| + | |
| − | </div>
| + | |
| − | <div>
| + | |
| − | <h5><a href="https://2017.igem.org/Team:TAS_Taipei/Notebook">Notebook</a></h5>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | <div style='height:140px;'>
| + | |
| − | <img src="https://static.igem.org/mediawiki/2016/b/b0/T--TAS_Taipei--TAS_Icon_Experiments.png">
| + | |
| − | <h4>We build <b>constructs</b> to make our great ideas become reality. Follow along our discovery of exciting science!</h4>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | </li>
| + | |
| − | <!--Experimental-->
| + | |
| − | <li class="dropdown">
| + | |
| − | <a href="https://2017.igem.org/Team:TAS_Taipei/Model">
| + | |
| − | <h4 class='dropdown-toggle disabled' data-toggle="dropdown"><b>MODEL</b></h4>
| + | |
| − | </a>
| + | |
| − | <div class="dropdown-menu">
| + | |
| − | <div class='subcategories_container'>
| + | |
| − | <div>
| + | |
| − | <h5><a href="https://2016.igem.org/Team:TAS_Taipei/Model#GSRFunc">GSR Function</a></h5>
| + | |
| − | </div>
| + | |
| − | <div>
| + | |
| − | <h5><a href="https://2016.igem.org/Team:TAS_Taipei/Model#prototype">Prototype Delivery</a></h5>
| + | |
| − | </div>
| + | |
| − | <div>
| + | |
| − | <h5><a href="https://2016.igem.org/Team:TAS_Taipei/Model#treatment">CH25H Treatment</a></h5>
| + | |
| − | </div>
| + | |
| − | <div>
| + | |
| − | <h5><a href="https://2016.igem.org/Team:TAS_Taipei/Model#software">Calculator</a></h5>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | </div>
| + | |
| − | <div style='height:140px;'>
| + | |
| − | <img src="https://static.igem.org/mediawiki/2016/c/ca/T--TAS_Taipei--TAS_Icon_Model.png">
| + | |
| − | <h4><b>Computational Biology</b> provides us models that we cannot easily test experimentally. Click to find out the results of our modeling, and the math behind it!</h4>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | </li> | + | |
| − | <!--Model-->
| + | |
| − | <li class="dropdown">
| + | |
| − | <a href="https://2017.igem.org/Team:TAS_Taipei/Human_Practices">
| + | |
| − | <h4 class='dropdown-toggle disabled' data-toggle="dropdown"><b>HUMAN PRACTICE</b></h4>
| + | |
| − | </a>
| + | |
| − | <div class="dropdown-menu">
| + | |
| − | <div class='subcategories_container'>
| + | |
| − | <div>
| + | |
| − | <h5><a href="https://2016.igem.org/Team:TAS_Taipei/Human_Practices#research">Research</a></h5>
| + | |
| − | </div>
| + | |
| − | <div>
| + | |
| − | <h5><a href="https://2016.igem.org/Team:TAS_Taipei/Human_Practices#outreach">Outreach</a></h5>
| + | |
| − | </div>
| + | |
| − | <div>
| + | |
| − | <h5><a href="https://2016.igem.org/Team:TAS_Taipei/Human_Practices#impact">Impact</a></h5>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | <div style='height:140px;'>
| + | |
| − | <img src="https://static.igem.org/mediawiki /2016/b/b9/T--TAS_Taipei--TAS_Icon_HP.png"> | + | |
| − | <h4>We don't just grow cool bacteria. We make a <b>difference</b>. Find out how we tackled <b>social aspects</b> of this project.</h4>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | </li>
| + | |
| − | <!--Human Practice-->
| + | |
| − | <li class="dropdown">
| + | |
| − | <a href="https://2017.igem.org/Team:TAS_Taipei/Safety">
| + | |
| − | <h4 class='dropdown-toggle disabled' data-toggle="dropdown"><b>SAFETY</b></h4>
| + | |
| − | </a>
| + | |
| − | <div class="dropdown-menu">
| + | |
| − | <div style='height:100px;'>
| + | |
| − | <div class='subcategories_container'>
| + | |
| − | <div>
| + | |
| − | <h5><a href="https://2016.igem.org/Team:TAS_Taipei/Safety#overview">Overview</a></h5>
| + | |
| − | </div>
| + | |
| − | <div>
| + | |
| − | <h5><a href="https://2016.igem.org/Team:TAS_Taipei/Safety#biosafety">Biosafety</a></h5>
| + | |
| − | </div>
| + | |
| − | <div>
| + | |
| − | <h5><a href="https://2016.igem.org/Team:TAS_Taipei/Safety#riskreduction">Risk Reduction Methods</a></h5>
| + | |
| − | </div>
| + | |
| − | <div>
| + | |
| − | <h5><a href="https://2016.igem.org/Team:TAS_Taipei/Safety#furtherquestion">Further Questions</a></h5>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | <img src="https://static.igem.org/mediawiki/2016/7/7e/T--TAS_Taipei--TAS_Icon_Safety.png">
| + | |
| − | <h4><b>Safety first.</b> Especially in a lab. Here's how we maintained and investigated the integrity and security of our work environment.</h4>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | </li>
| + | |
| − | <!--Safety-->
| + | |
| − | <li class="dropdown">
| + | |
| − | <a href="https://2017.igem.org/Team:TAS_Taipei/Team">
| + | |
| − | <h4 class='dropdown-toggle disabled' data-toggle="dropdown">
| + | |
| − | <b>TEAM</b></h4>
| + | |
| − | </a>
| + | |
| − | <div class="dropdown-menu">
| + | |
| − | <div class='subcategories_container'>
| + | |
| − | <div>
| + | |
| − | <h5><a href="https://2017.igem.org/Team:TAS_Taipei/Team#members">Members</a></h5>
| + | |
| − | </div>
| + | |
| − | <div>
| + | |
| − | <h5><a href="https://2017.igem.org/Team:TAS_Taipei/Team#about">About</a></h5>
| + | |
| − | </div>
| + | |
| − | <div>
| + | |
| − | <h5><a href="https://2017.igem.org/Team:TAS_Taipei/Attributions">Attributions</a></h5>
| + | |
| − | </div>
| + | |
| − | <div>
| + | |
| − | <h5><a href="https://2017.igem.org/Team:TAS_Taipei/Wiki_Standard_Pages">Wiki Standard Pages</a></h5>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | <div style='height:140px;'>
| + | |
| − | <img src="https://static.igem.org/mediawiki/2016/c/c6/T--TAS_Taipei--TAS_Icon_Team.png">
| + | |
| − | <h4>Every iGEM project is the accumulation of an entire year's hard work by a group of cheerful students. <b>Meet the team!</b></h4>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | </li>
| + | |
| − | <!--Team-->
| + | |
| − | </ul>
| + | |
| − | </nav> | + | |
| | </div> | | </div> |
| − | <br>
| + | <div class="box" id="experiment" onclick="location.href='https://2017.igem.org/Team:TAS_Taipei/Experimental_Summary';" style="cursor: pointer;"> |
| − | <br>
| + | <br> |
| − | <br>
| + | <h1>EXPERIMENTS |
| − | <!--Title-->
| + | <span> |
| − | <div class="row center-block" style="padding:10px;width:960px;background-color:#07BEB8;box-shadow:0px 0px 5px black"> | + | <img src="https://static.igem.org/mediawiki/2017/2/2c/Microscope.png" id="dna" width="40vh"> |
| − | <div class="row" style="text-align:center;">
| + | </span> |
| − | <div class="col-sm-2">
| + | </h1> |
| − | <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>
| + | <br> |
| − | </div>
| + | |
| − | <!--TAS iGEM logo-->
| + | |
| − | <div class="col-sm-8" style='text-align:center;'>
| + | |
| − | <a href="https://2017.igem.org/Team:TAS_Taipei" style='text-decoration: none;'>
| + | |
| − | <h2 style="font-family:'Lato';letter-spacing:10px;color: white; font-size: 60px; margin-top: 0; margin-bottom: 0;">
| + | |
| − | <b>NANOTRAP</b>
| + | |
| − | </h2>
| + | |
| − | </a>
| + | |
| − | </div> | + | |
| − | <!--Project Name-->
| + | |
| − | <div class="col-sm-2">
| + | |
| − | <a href="https://igem.org/HS"><img src="https://static.igem.org/mediawiki/ 2016/ 6/ 6e/ T--TAS_Taipei--TAS_Icon_Logo2.png" alt="" style=" width: 100px;" ></a> | + | |
| − | </div> | + | |
| − | <!--iGEM logo-->
| + | |
| − | </div> | + | |
| | </div> | | </div> |
| − | <!--End of Title-->
| + | <div class="box" id="modeling" onclick="location.href='https://2017.igem.org/Team:TAS_Taipei/Model';" style="cursor: pointer;"> |
| − | <br>
| + | <br> |
| − | | + | <h1>MODELING |
| − | <!--Slides-->
| + | <span> |
| − | <div id="slider1_container" style="position: relative; top: 0px; left: 6%; width: 1080px; height: 600px;"> | + | <img src="https://static.igem.org/mediawiki/2017/d/d0/Statistics.png" id="dna" width="40vh"> |
| − | <!-- Loading Screen -->
| + | </span> |
| − | <div u="loading" style="position: absolute; top: 0px; left: 0px;">
| + | </h1> |
| − | <div style="filter: alpha(opacity=70); opacity:0.7; position: absolute; display: block;
| + | <br> |
| − | background-color: #000000; top: 0px; left: 0px;width: 100%;height:100%;">
| + | |
| − | </div>
| + | |
| − | <div style="position: absolute; display: block; background: url(../img/loading.gif) no-repeat center center;
| + | |
| − | top: 0px; left: 0px;width: 100%;height:100%;">
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <!-- Slides Container -->
| + | |
| − | <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 1080px; height: 600px; overflow: hidden;">
| + | |
| − | <div>
| + | |
| − | <div u="image" id="image1ani" style="lightgrey;text-align:center">
| + | |
| − | <image src="https://static.igem.org/mediawiki/2016/b/bb/T--TAS_Taipei--TeamPhoto_iGEMPoster.jpg" />
| + | |
| − | </div>
| + | |
| − | <div u="caption" t="B" style="box-shadow: 0 0 10px 0;background-color:orange;padding:20px;position: absolute; bottom: 10px; left: 300px;">
| + | |
| − | <p style="color:white;font-size:25px;text-align:center">
| + | |
| − | <b>BEST MODEL, PARTS COLLECTION,</b>
| + | |
| − | </p>
| + | |
| − | <p style="color:white;font-size:25px;text-align:center">
| + | |
| − | <b>EDUCATION & PUBLIC ENGAGEMENT</b>
| + | |
| − | </p>
| + | |
| − | <p style="color:white;font-size: 18px;text-align:center">
| + | |
| − | Nominated: Best Wiki, Poster, Integrated Human Practices
| + | |
| − | </p>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | <div>
| + | |
| − | <img u="image" src="https://static.igem.org/mediawiki/2016/c/cb/T--TAS_Taipei--Counteract_Homepage_Banner.jpg" />
| + | |
| − | </div>
| + | |
| − | <div>
| + | |
| − | <div u="image" id="image1ani" style="lightgrey;text-align:center">
| + | |
| − | <image src="https://static.igem.org/mediawiki/2016/4/41/T--TAS_Taipei--PurificationAnimation.gif" />
| + | |
| − | </div>
| + | |
| − | <div u="caption" t="L" style="box-shadow: 0 0 10px 0;background-color:orange;padding:20px;position: absolute; top: 250px; left: 20px;">
| + | |
| − | <p style="color:white;font-size:32px;">
| + | |
| − | PROTOTYPE
| + | |
| − | </p>
| + | |
| − | <p style="color:white;font-size: 20px">
| + | |
| − | Package purified proteins into nanoparticles
| + | |
| − | </p>
| + | |
| − | </div>
| + | |
| − | </div> | + | |
| − | <div>
| + | |
| − | <div u="image" id="justintime" style="text-align:center; "> | + | |
| − | <image src="https://static.igem.org/mediawiki/2017/f/f7/Bio-Film-Treated_%28no_white_receptors%29.gif" id="image2ani" style="width: 600px;height:600px;" />
| + | |
| − | </div>
| + | |
| − | <div u="caption" t="L" style="box-shadow: 0 0 10px 0;background-color:orange;padding:20px;position: absolute; top: 35px; left: 30px;">
| + | |
| − | <p style="color:white;font-size:32px;">
| + | |
| − | BIOFILM FORMATION
| + | |
| − | </p>
| + | |
| − | <p style="width:400px;color:white;font-size: 20px">
| + | |
| − | Biofilm is formed from engineered bacteria
| + | |
| − | </p>
| + | |
| − | </div>
| + | |
| − | </div> | + | |
| − | <div>
| + | |
| − | <div u="image" style="text-align:center">
| + | |
| − | <image src="https://static.igem.org/mediawiki/2017/5/58/T--TAS_Taipei--TeamPhoto.jpg" style="width:1080px;height:400px" />
| + | |
| − | </div>
| + | |
| − | | + | |
| − | </div>
| + | |
| − | </div> | + | |
| − | | + | |
| − | | + | |
| − | <!--#region Bullet Navigator Skin Begin --> | + | |
| − | <!-- Help: http://www.jssor.com/development/slider-with-bullet-navigator-jquery.html -->
| + | |
| − | <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>
| + | |
| − | <!-- bullet navigator container -->
| + | |
| − | <div u="navigator" class="jssorb12" style="bottom: 16px; right: 6px;">
| + | |
| − | <!-- bullet navigator item prototype -->
| + | |
| − | <div u="prototype"></div>
| + | |
| − | </div>
| + | |
| − | <!--#endregion Bullet Navigator Skin End -->
| + | |
| − | <a style="display: none" href="http://www.jssor.com">Image Slider</a>
| + | |
| | </div> | | </div> |
| − | <!--End of Slides-->
| + | <div class="box" id="prototype" onclick="location.href='https://2017.igem.org/Team:TAS_Taipei/Prototype';" style="cursor: pointer;"> |
| − | <br>
| + | <br> |
| − | <br>
| + | <h1>PROTOTYPE |
| − | | + | <span> |
| − | <div class="card" id="bodycontainer" style="overflow:hidden;font-family:Lato; text-align:left;"> | + | <img src="https://static.igem.org/mediawiki/2017/9/92/Compass.png" id="dna" width="40vh"> |
| − | <div class="col-sm-12"> | + | </span> |
| − | <h1 style="padding:10px;background-color: rgb(33,150,243);color:white">
| + | </h1> |
| − | ABSTRACT
| + | <br> |
| − | </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>
| + | |
| − | <br>
| + | |
| − | </div>
| + | |
| − | </div> | + | |
| | </div> | | </div> |
| − | </div>
| + | <div class=" box" id=" policy" onclick=" location.href='https:// 2017.igem.org/ Team:TAS_Taipei/ Human_Practices' ;" style= "cursor: pointer; "> |
| − | <br>
| + | <br> |
| − | <br>
| + | <H1>HUMAN PRACTICES |
| − | <br>
| + | <span> |
| − | | + | <img src="https://static.igem.org/mediawiki/ 2017/ 3/ 3e/ Earth- globe. png" id=" dna" width=" 40vh"> |
| − | <canvas id="canvas-container" style="z-index:-1"></canvas>
| + | </span> |
| − | <script type="text/javascript" src='https://2016.igem.org/Template:TAS_Taipei/js/field?action=raw&ctype=text/javascript'></script>
| + | </H1> |
| − | | + | <br> |
| − | </body>
| + | </div> |
| − | | + | <div class="box" id="biosafety" onclick="location.href='https://2017.igem.org/Team:TAS_Taipei/Safety';" style="cursor: pointer;"> |
| − | <style type='text/css'>
| + | <br> |
| − | #bg {
| + | <H1>BIOSAFETY |
| − | position: fixed;
| + | <span> |
| − | top: 0;
| + | <img src="https://static.igem.org/mediawiki/2017/b/b9/Biosafety.png" id="dna" width="40vh"> |
| − | left: 0;
| + | </span> |
| − | }
| + | </H1> |
| − |
| + | <br> |
| − | .bgwidth {
| + | </div> |
| − | width: 100%;
| + | <div class="box" id="about" onclick="location.href='https://2017.igem.org/Team:TAS_Taipei/Team';" style="cursor: pointer;"> |
| − | }
| + | <br> |
| − |
| + | <H1>ABOUT US |
| − | .bgheight {
| + | <span> |
| − | height: 100%;
| + | <img src="https://static.igem.org/mediawiki/2017/a/a3/About_us1.png" id="dna" width="40vh"> |
| − | }
| + | </span> |
| − | | + | </H1> |
| − | </style> | + | <br> |
| − | | + | </div> |
| − | <div class="backgroundpic"> | + | <div class="box" id="acknowledgments" onclick="location.href='https://2017.igem.org/Team:TAS_Taipei/Attributions';" style="cursor: pointer;"> |
| − | <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=""> | + | <br> |
| − | </div> | + | <H1>ATTRIBUTIONS |
| − | | + | <span> |
| − | <canvas id="canvas-container" style="z-index:-1" hidden></canvas> | + | <img src="https://static.igem.org/mediawiki/2017/f/f3/Book.png" id="dna" width="40vh"> |
| − | <script type="text/javascript" src='https://2015.igem.org/Template:TAS_Taipei/js/field?action=raw&ctype=text/javascript' hidden> | + | </span> |
| − | < /script/ >
| + | </H1> |
| − | | + | <br> |
| − | | + | </div> |
| − | | + | </section> |
| − | <
| + | |
| − | 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> | + | |
| − | | + | |
| − | <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: 70%;
| + | |
| − | right: 10px;
| + | |
| − | 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%;
| + | |
| − | }
| + | |
| − | | + | |
| − | </style> | + | |
| − | <script> | + | |
| − | $(function() {
| + | |
| − | var rightVal = -150;
| + | |
| − | | + | |
| − | $("#clickme").click(function() {
| + | |
| − | | + | |
| − | rightVal = (rightVal * -1) - 150;
| + | |
| − | $(this).parent().animate({
| + | |
| − | right: rightVal + 'px' | + | |
| − | }, { | + | |
| − | queue: false,
| + | |
| − | duration: 500
| + | |
| − | }); | + | |
| − | }); | + | |
| − | | + | |
| − | }); | + | |
| − | | + | |
| − | </script> | + | |
| − | | + | |
| − | | + | |
| | </body> | | </body> |
| | | | |
| | </html> | | </html> |
