Difference between revisions of "Team:NTHU Formosa"

 
(48 intermediate revisions by 6 users not shown)
Line 1: Line 1:
−
{{NTHU_Formosa}}{{NTHU_Formosa/NavBar}}
+
{{NTHU_Formosa}} {{NTHU_Formosa/NavBar}}
 
<html>
 
<html>
  
Line 5: Line 5:
 
   <meta charset="UTF-8">
 
   <meta charset="UTF-8">
 
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
−
  <!-- <link rel="stylesheet" type="text/css" href="https://2018.igem.org/wiki/index.php?title=Template:NTHU_Formosa/initial&action=raw&ctype=text/css"> -->
 
−
  <link rel="stylesheet" type="text/css" href="https://alvarotrigo.com/fullPage/fullpage.css">
 
−
  <link rel="stylesheet" type="text/css" href="https://alvarotrigo.com/fullPage/examples/examples.css">
 
 
   <link rel="stylesheet" type="text/css" href="https://2018.igem.org/wiki/index.php?title=Template:NTHU_Formosa/CSS&action=raw&ctype=text/css">
 
   <link rel="stylesheet" type="text/css" href="https://2018.igem.org/wiki/index.php?title=Template:NTHU_Formosa/CSS&action=raw&ctype=text/css">
  
  
 
   <style>
 
   <style>
 +
    /*!
 +
  * fullPage 3.0.2
 +
  * https://github.com/alvarotrigo/fullPage.js
 +
  *
 +
  * @license GPLv3 for open source use only
 +
  * or Fullpage Commercial License for commercial use
 +
  * http://alvarotrigo.com/fullPage/pricing/
 +
  *
 +
  * Copyright (C) 2018 http://alvarotrigo.com/fullPage - A project by Alvaro Trigo
 +
  */
 +
 +
    html.fp-enabled,
 +
    .fp-enabled body {
 +
      margin: 0;
 +
      padding: 0;
 +
      overflow: hidden;
 +
 +
      /*Avoid flicker on slides transitions for mobile phones #336 */
 +
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 +
    }
 +
 +
    .fp-section {
 +
      position: relative;
 +
      -webkit-box-sizing: border-box;
 +
      /* Safari<=5 Android<=3 */
 +
      -moz-box-sizing: border-box;
 +
      /* <=28 */
 +
      box-sizing: border-box;
 +
    }
 +
 +
    .fp-slide {
 +
      float: left;
 +
    }
 +
 +
    .fp-slide,
 +
    .fp-slidesContainer {
 +
      height: 100%;
 +
      display: block;
 +
    }
 +
 +
    .fp-slides {
 +
      z-index: 1;
 +
      height: 100%;
 +
      overflow: hidden;
 +
      position: relative;
 +
      -webkit-transition: all 0.3s ease-out;
 +
      /* Safari<=6 Android<=4.3 */
 +
      transition: all 0.3s ease-out;
 +
    }
 +
 +
    .fp-section.fp-table,
 +
    .fp-slide.fp-table {
 +
      display: table;
 +
      table-layout: fixed;
 +
      width: 100%;
 +
    }
 +
 +
    .fp-tableCell {
 +
      display: table-cell;
 +
      vertical-align: middle;
 +
      width: 100%;
 +
      height: 100%;
 +
    }
 +
 +
    .fp-slidesContainer {
 +
      float: left;
 +
      position: relative;
 +
    }
 +
 +
    .fp-controlArrow {
 +
      -webkit-user-select: none;
 +
      /* webkit (safari, chrome) browsers */
 +
      -moz-user-select: none;
 +
      /* mozilla browsers */
 +
      -khtml-user-select: none;
 +
      /* webkit (konqueror) browsers */
 +
      -ms-user-select: none;
 +
      /* IE10+ */
 +
      position: absolute;
 +
      z-index: 4;
 +
      top: 50%;
 +
      cursor: pointer;
 +
      width: 0;
 +
      height: 0;
 +
      border-style: solid;
 +
      margin-top: -38px;
 +
      -webkit-transform: translate3d(0, 0, 0);
 +
      -ms-transform: translate3d(0, 0, 0);
 +
      transform: translate3d(0, 0, 0);
 +
    }
 +
 +
    .fp-controlArrow.fp-prev {
 +
      left: 15px;
 +
      width: 0;
 +
      border-width: 38.5px 34px 38.5px 0;
 +
      border-color: transparent #fff transparent transparent;
 +
    }
 +
 +
    .fp-controlArrow.fp-next {
 +
      right: 15px;
 +
      border-width: 38.5px 0 38.5px 34px;
 +
      border-color: transparent transparent transparent #fff;
 +
    }
 +
 +
    .fp-scrollable {
 +
      overflow: hidden;
 +
      position: relative;
 +
    }
 +
 +
    .fp-scroller {
 +
      overflow: hidden;
 +
    }
 +
 +
    .iScrollIndicator {
 +
      border: 0 !important;
 +
    }
 +
 +
    .fp-notransition {
 +
      -webkit-transition: none !important;
 +
      transition: none !important;
 +
    }
 +
 +
    #fp-nav {
 +
      position: fixed;
 +
      z-index: 100;
 +
      margin-top: -32px;
 +
      top: 50%;
 +
      opacity: 1;
 +
      -webkit-transform: translate3d(0, 0, 0);
 +
    }
 +
 +
    #fp-nav.fp-right {
 +
      right: 17px;
 +
    }
 +
 +
    #fp-nav.fp-left {
 +
      left: 17px;
 +
    }
 +
 +
    .fp-slidesNav {
 +
      position: absolute;
 +
      z-index: 4;
 +
      opacity: 1;
 +
      -webkit-transform: translate3d(0, 0, 0);
 +
      -ms-transform: translate3d(0, 0, 0);
 +
      transform: translate3d(0, 0, 0);
 +
      left: 0 !important;
 +
      right: 0;
 +
      margin: 0 auto !important;
 +
    }
 +
 +
    .fp-slidesNav.fp-bottom {
 +
      bottom: 17px;
 +
    }
 +
 +
    .fp-slidesNav.fp-top {
 +
      top: 17px;
 +
    }
 +
 +
    #fp-nav ul,
 +
    .fp-slidesNav ul {
 +
      margin: 0;
 +
      padding: 0;
 +
    }
 +
 +
    #fp-nav ul li,
 +
    .fp-slidesNav ul li {
 +
      display: block;
 +
      width: 14px;
 +
      height: 13px;
 +
      margin: 7px;
 +
      position: relative;
 +
    }
 +
 +
    .fp-slidesNav ul li {
 +
      display: inline-block;
 +
    }
 +
 +
    #fp-nav ul li a,
 +
    .fp-slidesNav ul li a {
 +
      display: block;
 +
      position: relative;
 +
      z-index: 1;
 +
      width: 100%;
 +
      height: 100%;
 +
      cursor: pointer;
 +
      text-decoration: none;
 +
    }
 +
 +
    #fp-nav ul li a.active span,
 +
    .fp-slidesNav ul li a.active span,
 +
    #fp-nav ul li:hover a.active span,
 +
    .fp-slidesNav ul li:hover a.active span {
 +
      height: 12px;
 +
      width: 12px;
 +
      margin: -6px 0 0 -6px;
 +
      border-radius: 100%;
 +
    }
 +
 +
    #fp-nav ul li a span,
 +
    .fp-slidesNav ul li a span {
 +
      border-radius: 50%;
 +
      position: absolute;
 +
      z-index: 1;
 +
      height: 4px;
 +
      width: 4px;
 +
      border: 0;
 +
      background: #333;
 +
      left: 50%;
 +
      top: 50%;
 +
      margin: -2px 0 0 -2px;
 +
      -webkit-transition: all 0.1s ease-in-out;
 +
      -moz-transition: all 0.1s ease-in-out;
 +
      -o-transition: all 0.1s ease-in-out;
 +
      transition: all 0.1s ease-in-out;
 +
    }
 +
 +
    #fp-nav ul li:hover a span,
 +
    .fp-slidesNav ul li:hover a span {
 +
      width: 10px;
 +
      height: 10px;
 +
      margin: -5px 0px 0px -5px;
 +
    }
 +
 +
    #fp-nav ul li .fp-tooltip {
 +
      position: absolute;
 +
      top: -2px;
 +
      color: #fff;
 +
      font-size: 14px;
 +
      font-family: arial, helvetica, sans-serif;
 +
      white-space: nowrap;
 +
      max-width: 220px;
 +
      overflow: hidden;
 +
      display: block;
 +
      opacity: 0;
 +
      width: 0;
 +
      cursor: pointer;
 +
    }
 +
 +
    #fp-nav ul li:hover .fp-tooltip,
 +
    #fp-nav.fp-show-active a.active+.fp-tooltip {
 +
      -webkit-transition: opacity 0.2s ease-in;
 +
      transition: opacity 0.2s ease-in;
 +
      width: auto;
 +
      opacity: 1;
 +
    }
 +
 +
    #fp-nav ul li .fp-tooltip.fp-right {
 +
      right: 20px;
 +
    }
 +
 +
    #fp-nav ul li .fp-tooltip.fp-left {
 +
      left: 20px;
 +
    }
 +
 +
    .fp-auto-height.fp-section,
 +
    .fp-auto-height .fp-slide,
 +
    .fp-auto-height .fp-tableCell {
 +
      height: auto !important;
 +
    }
 +
 +
    .fp-responsive .fp-auto-height-responsive.fp-section,
 +
    .fp-responsive .fp-auto-height-responsive .fp-slide,
 +
    .fp-responsive .fp-auto-height-responsive .fp-tableCell {
 +
      height: auto !important;
 +
    }
 +
 
     /* Fixed header and footer.
 
     /* Fixed header and footer.
 
     * --------------------------------------- */
 
     * --------------------------------------- */
Line 73: Line 337:
  
 
     #section0 {
 
     #section0 {
−
       background-image: url(https://static.igem.org/mediawiki/2018/e/e1/T--NTHU_Formosa--home1.png);
+
      color: white;
−
       background-size: contain;
+
      background-color: white;
 +
       background-image: url(https://static.igem.org/mediawiki/2018/6/66/T--NTHU_Formosa--cell0.png);
 +
      background-repeat: no-repeat;
 +
      background-position: center;
 +
       background-size: 70% 70%;
 
     }
 
     }
  
Line 93: Line 361:
  
 
     #section4 {
 
     #section4 {
−
       background-image: url(https://static.igem.org/mediawiki/2018/6/63/T--NTHU_Formosa--home_hp2.png);
+
       background-image: url(https://static.igem.org/mediawiki/2018/4/4f/T--NTHU_Formosa--HP.png);
 
       background-size: cover;
 
       background-size: cover;
 
     }
 
     }
  
 
     #section5 {
 
     #section5 {
−
       background-image: url(https://static.igem.org/mediawiki/2018/0/0d/T--NTHU_Formosa--home_about.png);
+
       background-image: url(https://static.igem.org/mediawiki/2018/8/84/T--NTHU_Formosa--%E6%9C%AA%E5%91%BD%E5%90%8D-3.png);
 
       background-size: cover;
 
       background-size: cover;
 
     }
 
     }
Line 165: Line 433:
 
       background-color: #fff;
 
       background-color: #fff;
 
       box-shadow: 4px 0px 25px -1px rgba(0, 0, 0, 0.5);
 
       box-shadow: 4px 0px 25px -1px rgba(0, 0, 0, 0.5);
−
       font-family: "Raleway";
+
       font-family: "Arial";
 
       font-weight: 600;
 
       font-weight: 600;
 
       font-size: 18px;
 
       font-size: 18px;
Line 176: Line 444:
 
     .side-bar:hover {
 
     .side-bar:hover {
 
       /* Width on hover */
 
       /* Width on hover */
−
       width: 250px;
+
       width: 350px;
 
     }
 
     }
  
Line 264: Line 532:
  
 
     .side-button.facebook:after {
 
     .side-button.facebook:after {
−
       background: url("https://cdn3.iconfinder.com/data/icons/social-media-2026/60/Socialmedia_icons_Facebook-128.png") no-repeat center;
+
       background: url("https://cdn3.iconfinder.com/data/icons/social-media-2026/60/Socialmedia_icons_Facebook-128.png") no-repeat center; margin-left:auto;margin-right:auto;width:10%;"
 
     }
 
     }
  
−
     .side-button.twitter::before {
+
      
−
       content: "Twitter";
+
   
 +
        .side-button.Biomarker::before {
 +
       content: "Biomarker";
 
     }
 
     }
  
−
     .side-button.twitter:after {
+
     .side-button.Biomarker:after {
−
       background: url("https://cdn3.iconfinder.com/data/icons/social-media-2026/60/Socialmedia_icons_Twitter-07-128.png") no-repeat center;
+
       background: url("https://static.igem.org/mediawiki/2018/8/86/T--NTHU_Formosa--icon_biomar.png") no-repeat center;
 +
    }
 +
            .side-button.Nanobody::before {
 +
      content: "Nanobody";
 
     }
 
     }
  
−
     .side-button.instagram::before {
+
     .side-button.Nanobody:after {
−
       content: "Instagram";
+
      background: url("https://static.igem.org/mediawiki/2018/0/0e/T--NTHU_Formosa--icon_nanobody.png") no-repeat center;
 +
    }
 +
            .side-button.TEV::before {
 +
       content: "TEV protease";
 
     }
 
     }
  
−
     .side-button.instagram:after {
+
     .side-button.TEV:after {
−
       background: url("https://cdn3.iconfinder.com/data/icons/social-media-2026/60/Socialmedia_icons_Instagram-128.png") no-repeat center;
+
       background: url("https://static.igem.org/mediawiki/2018/6/6f/T--NTHU_Formosa--icon_TEV.png") no-repeat center;
 +
    }
 +
            .side-button.Bioluminescence::before {
 +
      content: "Bioluminescence";
 
     }
 
     }
  
−
     .side-button.soundcloud::before {
+
     .side-button.Bioluminescence:after {
−
       content: "Soundcloud";
+
       background: url("https://static.igem.org/mediawiki/2018/e/e5/T--NTHU_Formosa--icon_biolu.png") no-repeat center;
 
     }
 
     }
  
−
     .side-button.soundcloud:after {
+
   
−
       background: url("https://cdn3.iconfinder.com/data/icons/social-media-2026/60/Socialmedia_icons_SoundCloud-128.png") no-repeat center;
+
   
 +
   
 +
   
 +
   
 +
   
 +
 
 +
     .side-button.Introduction::before {
 +
       content: "Introduction";
 
     }
 
     }
  
−
     .side-button.linked-in::before {
+
     .side-button.Introduction:after {
−
       content: "LinkedIn";
+
       background: url("https://static.igem.org/mediawiki/2018/f/f4/T--NTHU_Formosa--icon_introduction.png") no-repeat center;
 
     }
 
     }
  
−
     .side-button.linked-in:after {
+
     .side-button.Design::before {
−
       background: url("https://cdn3.iconfinder.com/data/icons/social-media-2026/60/Socialmedia_icons_LinkedIn-128.png") no-repeat center;
+
       content: "Design";
 
     }
 
     }
  
−
     .side-button.pinterest::before {
+
     .side-button.Design:after {
−
       content: "Pinterest";
+
       background: url("https://static.igem.org/mediawiki/2018/e/e8/T--NTHU_Formosa--icon_design.png") no-repeat center;
 
     }
 
     }
  
−
     .side-button.pinterest:after {
+
     .side-button.Biosafety::before {
−
       background: url("https://cdn3.iconfinder.com/data/icons/social-media-2026/60/Socialmedia_icons_Pinterest-23-128.png") no-repeat center;
+
       content: "Biosafety";
 
     }
 
     }
−
  </style>
 
  
−
  <!-- Sidebar Script -->
+
    .side-button.Biosafety:after {
−
  <!-- <script>
+
      background: url("https://static.igem.org/mediawiki/2018/e/e0/T--NTHU_Formosa--icon_biosafety.png") no-repeat center;
−
     $(document).ready(function() {
+
     }
  
−
      // Social plus button function
+
    .side-button.Applied_Design::before {
−
      $('.plus-button').click(function() {
+
      content: "Applied Design";
−
        $(this).toggleClass('open');
+
    }
−
        $('.social-button').toggleClass('active');
+
−
      });
+
  
−
     });
+
    .side-button.Applied_Design:after {
−
  </script> -->
+
      background: url("https://static.igem.org/mediawiki/2018/8/85/T--NTHU_Formosa--icon_applied_design.png") no-repeat center;
 +
     }
 +
 
 +
    .side-button.Results::before {
 +
      content: "Results";
 +
    }
 +
 
 +
    .side-button.Results:after {
 +
      background: url("https://static.igem.org/mediawiki/2018/7/7f/T--NTHU_Formosa--icon_result.png") no-repeat center;
 +
    }
 +
 
 +
    .side-button.Parts::before {
 +
      content: "Parts";
 +
    }
 +
 
 +
    .side-button.Parts:after {
 +
      background: url("https://static.igem.org/mediawiki/2018/f/fc/T--NTHU_Formosa--icon_part.png") no-repeat center;
 +
    }
 +
 
 +
    .side-button.Notebook::before {
 +
      content: "Notebook";
 +
    }
 +
 
 +
    .side-button.Notebook:after {
 +
      background: url("https://static.igem.org/mediawiki/2018/c/ca/T--NTHU_Formosa--notebook.png") no-repeat center;
 +
    }
 +
 
 +
    .side-button.InterLab::before {
 +
      content: "InterLab";
 +
    }
 +
 
 +
    .side-button.InterLab:after {
 +
      background: url("https://static.igem.org/mediawiki/2018/f/ff/T--NTHU_Formosa--icon_interlab.png") no-repeat center;
 +
    }
 +
   
 +
    .side-button.Collaborations::before {
 +
      content: "Collaborations";
 +
    }
 +
 
 +
    .side-button.Collaborations:after {
 +
      background: url("https://static.igem.org/mediawiki/2018/9/99/T--NTHU_Formosa--icon_collaboration.png") no-repeat center;
 +
    }
 +
 
 +
    .side-button.Public_Engagement::before {
 +
      content: "Public Engagement";
 +
    }
 +
 
 +
    .side-button.Public_Engagement:after {
 +
      background: url("https://static.igem.org/mediawiki/2018/e/e4/T--NTHU_Formosa--public_engagement.png") no-repeat center;
 +
    }
 +
   
 +
    .side-button.Integrated_Human_Practice::before {
 +
      content: "Integrated Human Practice";
 +
    }
 +
 
 +
    .side-button.Integrated_Human_Practice:after {
 +
      background: url("https://static.igem.org/mediawiki/2018/7/7a/T--NTHU_Formosa--icon_integrated.png") no-repeat center;
 +
    }
 +
 
 +
 
 +
    .side-button.Team::before {
 +
      content: "Team Members";
 +
    }
 +
 
 +
    .side-button.Team:after {
 +
      background: url("https://static.igem.org/mediawiki/2018/b/bc/T--NTHU_Formosa--aboutus.png") no-repeat center;
 +
    }
 +
 
 +
    .side-button.Sponsor::before {
 +
      content: "Sponsors";
 +
    }
 +
 
 +
    .side-button.Sponsor:after {
 +
      background: url("https://static.igem.org/mediawiki/2018/8/8c/T--NTHU_Formosa--icon-sponsor.png") no-repeat center;
 +
    }
 +
 
 +
    .side-button.Attributions::before {
 +
      content: "Attributions";
 +
    }
 +
 
 +
    .side-button.Attributions:after {
 +
      background: url("https://static.igem.org/mediawiki/2018/2/29/T--NTHU_Formosa--attribution.png") no-repeat center;
 +
    }
 +
 
 +
    .side-button.Judging::before {
 +
      content: "Judging Form";
 +
    }
 +
 
 +
    .side-button.Judging:after {
 +
      background: url("https://static.igem.org/mediawiki/2018/a/a9/T--NTHU_Formosa--medal.png") no-repeat center;
 +
    }
 +
  </style>
 
</head>
 
</head>
  
Line 327: Line 701:
 
   <div class="side-bar">
 
   <div class="side-bar">
 
     <div class="side-container top">
 
     <div class="side-container top">
−
      <!-- <svg viewbox="0 0 120 120" class="hover-svg">
 
−
            <path D="M 60 25 L 20 95 L 100 95 Z"/>
 
−
            <path D="M 36 67 L 53 95"/>
 
−
            <path D="M 33 72 L 47 95"/>
 
−
            <path D="M 30 78 L 41 95"/>
 
−
            <path D="M 27 83 L 35 95"/>
 
−
        </svg> -->
 
 
     </div>
 
     </div>
 
     <div class="side-container middle">
 
     <div class="side-container middle">
−
       <div class="rela-block side-button " id="mySide_1"></div>
+
       <div class="rela-block side-button" id="mySide_1"></div>
−
       <div class="rela-block side-button " id="mySide_2"></div>
+
       <div class="rela-block side-button" id="mySide_2"></div>
−
       <div class="rela-block side-button instagram" id="mySide_3"></div>
+
       <div class="rela-block side-button" id="mySide_3"></div>
−
       <div class="rela-block side-button soundcloud" id="mySide_4"></div>
+
       <div class="rela-block side-button" id="mySide_4"></div>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
Line 345: Line 712:
 
   <!-- Sidebar script, DO NOT MODIFY -->
 
   <!-- Sidebar script, DO NOT MODIFY -->
 
   <script>
 
   <script>
 +
    onAnchorChange();
 +
 
     function onAnchorChange() {
 
     function onAnchorChange() {
 +
      //Initialize all side element
 
       var side = [document.getElementById("mySide_1"), document.getElementById("mySide_2"), document.getElementById("mySide_3"), document.getElementById("mySide_4")];
 
       var side = [document.getElementById("mySide_1"), document.getElementById("mySide_2"), document.getElementById("mySide_3"), document.getElementById("mySide_4")];
−
      side[0].classList.remove(side1.classList.item(2));
 
−
      side[0].classList.add("instagram");
 
−
      //element.classList.remove("mystyle");
 
−
    }
 
  
−
    //myFunction();
+
      // Clear all class and URLs
 +
      for (let i = 0; i < 4; i++) {
 +
        side[i].classList.remove(side[i].classList.item(2));
 +
        side[i].onclick = function() {};
 +
      }
 +
 
 +
      // Get anchor url var currentUrl = document.URL,
 +
      var urlParts = document.URL.split('#');
 +
      if (urlParts.length > 1) {
 +
        var anchor = urlParts[1];
 +
 
 +
        // Add the corresponding class
 +
        switch (anchor) {
 +
 
 +
          case "0": //Interactice cell
 +
            side[0].classList.add("Biomarker");
 +
            side[0].onclick = function() {
 +
              location.href = "https://2018.igem.org/Team:NTHU_Formosa/Biomarker";
 +
            };
 +
            side[1].classList.add("Nanobody");
 +
            side[1].onclick = function() {
 +
              location.href = "https://2018.igem.org/Team:NTHU_Formosa/Nanobody";
 +
            };
 +
            side[2].classList.add("TEV");
 +
            side[2].onclick = function() {
 +
              location.href = "https://2018.igem.org/Team:NTHU_Formosa/TEV_protease";
 +
            };
 +
            side[3].classList.add("Bioluminescence");
 +
            side[3].onclick = function() {
 +
              location.href = "https://2018.igem.org/Team:NTHU_Formosa/Bioluminescence";
 +
            };
 +
            break;
 +
          case "1": //Project
 +
            side[0].classList.add("Introduction");
 +
            side[0].onclick = function() {
 +
              location.href = "https://2018.igem.org/Team:NTHU_Formosa/Description";
 +
            };
 +
            side[1].classList.add("Design");
 +
            side[1].onclick = function() {
 +
              location.href = "https://2018.igem.org/Team:NTHU_Formosa/Design";
 +
            };
 +
            side[2].classList.add("Biosafety");
 +
            side[2].onclick = function() {
 +
              location.href = "https://2018.igem.org/Team:NTHU_Formosa/Safety";
 +
            };
 +
            side[3].classList.add("Applied_Design");
 +
            side[3].onclick = function() {
 +
              location.href = "https://2018.igem.org/Team:NTHU_Formosa/Applied_Design";
 +
            };
 +
            break;
 +
          case "2": //Demonstrate
 +
            side[0].classList.add("Results");
 +
            side[0].onclick = function() {
 +
              location.href = "https://2018.igem.org/Team:NTHU_Formosa/Results";
 +
            };
 +
            side[1].classList.add("Parts");
 +
            side[1].onclick = function() {
 +
              location.href = "https://2018.igem.org/Team:NTHU_Formosa/Parts";
 +
            };
 +
            side[2].classList.add("Notebook");
 +
            side[2].onclick = function() {
 +
              location.href = "https://2018.igem.org/Team:NTHU_Formosa/Notebook";
 +
            };
 +
            side[3].classList.add("InterLab");
 +
            side[3].onclick = function() {
 +
              location.href = "https://2018.igem.org/Team:NTHU_Formosa/InterLab";
 +
            };
 +
            break;
 +
 
 +
          case "3": //Human Practices
 +
         
 +
            side[0].classList.add("Collaborations");
 +
            side[0].onclick = function() {
 +
              location.href = "https://2018.igem.org/Team:NTHU_Formosa/Collaborations";
 +
            };
 +
            side[1].classList.add("Public_Engagement");
 +
            side[1].onclick = function() {
 +
              location.href = "https://2018.igem.org/Team:NTHU_Formosa/Public_Engagement";
 +
            };
 +
            side[2].classList.add("Integrated_Human_Practice");
 +
            side[2].onclick = function() {
 +
              location.href = "https://2018.igem.org/Team:NTHU_Formosa/Human_Practices";
 +
            };
 +
            side[3].classList.add("");
 +
            side[3].onclick = function() {
 +
              location.href = "";
 +
            };
 +
           
 +
            break;
 +
          case "4": //About us
 +
            side[0].classList.add("Team");
 +
            side[0].onclick = function() {
 +
              location.href = "https://2018.igem.org/Team:NTHU_Formosa/Team";
 +
            };
 +
            side[1].classList.add("Sponsor");
 +
            side[1].onclick = function() {
 +
              location.href = "https://2018.igem.org/Team:NTHU_Formosa/Sponsor";
 +
            };
 +
            side[2].classList.add("Attributions");
 +
            side[2].onclick = function() {
 +
              location.href = "https://2018.igem.org/Team:NTHU_Formosa/Attributions";
 +
            };
 +
            side[3].classList.add("Judging");
 +
            side[3].onclick = function() {
 +
              location.href = "https://igem.org/2018_Judging_Form?team=NTHU_Formosa";
 +
            };
 +
            break;
 +
        }
 +
      }
 +
    }
 
   </script>
 
   </script>
  
Line 360: Line 835:
 
     <!-- Section 0 -->
 
     <!-- Section 0 -->
 
     <div class="section " id="section0">
 
     <div class="section " id="section0">
−
      <p>Interactive Cell</p>
 
 
     </div>
 
     </div>
 +
 +
    <script>
 +
      window.onload = function() {
 +
 +
        let i = 0;
 +
 +
        function changeImage() {
 +
          var BackgroundImg = ["https://static.igem.org/mediawiki/2018/6/66/T--NTHU_Formosa--cell0.png",
 +
            "https://static.igem.org/mediawiki/2018/3/39/T--NTHU_Formosa--cell1.png",
 +
            "https://static.igem.org/mediawiki/2018/8/88/T--NTHU_Formosa--cell2.png",
 +
            "https://static.igem.org/mediawiki/2018/b/be/T--NTHU_Formosa--cell3.png",
 +
            "https://static.igem.org/mediawiki/2018/0/0f/T--NTHU_Formosa--%E7%B4%B0%E8%83%9E5.png"
 +
          ];
 +
 +
          //document.getElementById("section0").style.property = background-image:
 +
          console.log(i);
 +
          document.getElementById("section0").style.backgroundImage = 'url("' + BackgroundImg[i] + '")';
 +
          if (i == 4) i = 0;
 +
          else i = i + 1;
 +
        }
 +
        window.setInterval(changeImage, 3000);
 +
      }
 +
    </script>
 +
 +
   
 +
   
 +
   
  
 
     <!-- Section 1 -->
 
     <!-- Section 1 -->
 
     <div class="section" id="section1">
 
     <div class="section" id="section1">
−
      <p>Project</p>
 
−
      <a href="https://2018.igem.org/Team:NTHU_Formosa/Description" class="button">Introduction</a>
 
−
      <br>
 
−
      <a href="https://2018.igem.org/Team:NTHU_Formosa/Design" class="button">Design</a>
 
−
      <br>
 
−
      <a href="https://2018.igem.org/Team:NTHU_Formosa/Safety" class="button">Biosafety</a>
 
−
      <br>
 
−
      <a href="https://2018.igem.org/Team:NTHU_Formosa/Future_Application" class="button">Future Application</a>
 
 
     </div>
 
     </div>
  
 
     <!-- Section 2 -->
 
     <!-- Section 2 -->
 
     <div class="section" id="section2">
 
     <div class="section" id="section2">
−
      <p>Experiment</p>
 
−
      <a href="https://2018.igem.org/Team:NTHU_Formosa/Results" class="button">Results</a>
 
−
      <br>
 
−
      <a href="https://2018.igem.org/Team:NTHU_Formosa/Parts" class="button">Parts & Component</a>
 
−
      <br>
 
−
      <a href="https://2018.igem.org/Team:NTHU_Formosa/Notebook" class="button">Notebook</a>
 
−
      <br>
 
−
      <a href="https://2018.igem.org/Team:NTHU_Formosa/Interlab" class="button">Interlab</a>
 
 
     </div>
 
     </div>
  
 
     <!-- Section 3 -->
 
     <!-- Section 3 -->
−
    <div class="section" id="section3">
+
 
−
      <p>Modeling</p>
+
−
      <a href="https://2018.igem.org/Team:NTHU_Formosa/Model" class="button"></a>
+
−
    </div>
+
  
 
     <!-- Section 4 -->
 
     <!-- Section 4 -->
 
     <div class="section" id="section4">
 
     <div class="section" id="section4">
−
      <p>Human Practices</p>
 
−
      <a href="https://2018.igem.org/Team:NTHU_Formosa/Human_Practices" class="button">Human Practices</a>
 
 
     </div>
 
     </div>
  
 
     <!-- Section 5 -->
 
     <!-- Section 5 -->
 
     <div class="section" id="section5">
 
     <div class="section" id="section5">
−
      <p>About Us</p>
 
−
      <a href="https://2018.igem.org/Team:NTHU_Formosa/Team" class="button">Members</a>
 
−
      <br>
 
−
      <a href="https://2018.igem.org/Team:NTHU_Formosa/Sponsor" class="button">Sponsor</a>
 
−
      <br>
 
−
      <a href="https://2018.igem.org/Team:NTHU_Formosa/Attributions" class="button">Attributions</a>
 
−
      <br>
 
−
      <a href="https://igem.org/2018_Judging_Form?team=NTHU_Formosa" class="button">Medal</a>
 
 
     </div>
 
     </div>
  
Line 415: Line 887:
  
 
   <!-- fullpage.js, DO NOT MODIFT! -->
 
   <!-- fullpage.js, DO NOT MODIFT! -->
−
   <script type="text/javascript" src="https://alvarotrigo.com/fullPage/fullpage.js"></script>
+
   <script type="text/javascript" src="https://2018.igem.org/wiki/index.php?title=Template:NTHU_Formosa/Javascript&action=raw&ctype=text/javascript"></script>
−
  <script type="text/javascript" src="https://alvarotrigo.com/fullPage/example.js"></script>
+
  
 
   <script type="text/javascript">
 
   <script type="text/javascript">
 
     var myFullpage = new fullpage('#fullpage', {
 
     var myFullpage = new fullpage('#fullpage', {
 
       anchors: ['0', '1', '2', '3', '4', '5'],
 
       anchors: ['0', '1', '2', '3', '4', '5'],
−
       sectionsColor: ['#C63D0F', '#1BBC9B', '#7E8F7C'],
+
       sectionsColor: ['#000000', '#1BBC9B', '#7E8F7C'],
 
       css3: true,
 
       css3: true,
 
       licenseKey: "OPEN-SOURCE-GPLV3-LICENSE",
 
       licenseKey: "OPEN-SOURCE-GPLV3-LICENSE",
−
       scrollBar: true
+
       scrollBar: true,
 +
      lazyLoading: false
 
     });
 
     });
 
   </script>
 
   </script>

Latest revision as of 00:36, 18 October 2018