Difference between revisions of "Team:CCU Taiwan"

Line 4: Line 4:
 
<head>
 
<head>
 
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
     <meta name="viewport" content="width=device-width, initial-scale=1">
−
<meta charset="utf-8">
+
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
−
<title>jQuery One Page Scroll by Pete R. | The Pete Design</title>
+
    <script type="text/javascript" src="https://2018.igem.org/Template:CCU_Taiwan/Javascript?
−
<meta name="title" content="jQuery One Page Scroll by Pete R. | The Pete Design" />
+
action=raw&ctype=text/javascript"></script>
−
<meta name="description" content="Create an Apple-like one page scroller website (iPhone 5S website) with One Page Scroll plugin" />
+
    <script>
−
<link rel="image_src" href="/images/notify_better_image.png" />
+
  
−
<meta content="http://www.thepetedesign.com/demos/onepage_scroll_demo.html" property="og:url" />
+
    window.onscroll = function() {scrollFunction()};
−
<meta content="http://www.thepetedesign.com/images/onepage_scroll_image.png" property="og:image" />
+
−
<link rel="shortcut icon" id="favicon" href="favicon.png">
+
−
<meta name="author" content="Pete R.">
+
−
<link rel="canonical" href="http://www.thepetedesign.com/demos/onepage_scroll_demo.html" />
+
−
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700' rel='stylesheet' type='text/css'>
+
−
<link href='http://fonts.googleapis.com/css?family=Pacifico:400' rel='stylesheet' type='text/css'>
+
−
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
+
  
 +
    function scrollFunction() {
 +
    if (document.body.scrollTop > 10 || document.documentElement.scrollTop > 10) {
 +
        document.getElementById("myBtn").style.display = "block";
 +
    } else {
 +
        document.getElementById("myBtn").style.display = "none";
 +
    }
 +
}
  
−
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
+
// When the user clicks on the button, scroll to the top of the document
−
     <script type="text/javascript" src="https://2018.igem.org/Template:CCU_Taiwan/Javascript/ops.js"></script>
+
function topFunction() {
−
     <script type="text/javascript" src="https://2018.igem.org/Template:CCU_Taiwan/Javascript/ops1.9.1.js"></script>
+
     document.body.scrollTop = 0;
 +
     document.documentElement.scrollTop = 0;
 +
}
  
−
    <script>
 
−
  $(document).ready(function(){
 
−
      $(".main").onepage_scroll({
 
−
        sectionContainer: "section",
 
−
        responsiveFallback: 600,
 
−
        loop: true
 
−
      });
 
−
});
 
−
 
−
</script>
 
−
</head>
 
  
  
 +
    function myFunction() {
 +
        var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
 +
        var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
 +
        var scrolled = (winScroll / height) * 100;
 +
        document.getElementById("myBar").style.height = scrolled + "%";
 +
    }
 +
 +
    $(document).ready(function() {
 +
        // Add smooth scrolling to all links
 +
        $("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 hash
 +
                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
 +
        });
 +
    });
 +
 +
    $(window).on('scroll', function() {
 +
        if ($(window).scrollTop()) {
 +
            $('.container').css('background', '#808080');
 +
            $('nav ul li ul').css('background', '#808080');
 +
            $('nav').css('opacity', '1');
 +
        } else {
 +
            $('.container').css('background', '#000000');
 +
            $('nav ul li ul').css('background', '#000000');
 +
            $('nav').css('opacity', '1');
 +
        }
 +
    });
 +
    $(document).ready(function() {
 +
        $('#fullPage').fullpage({
 +
            anchors: ['page1', 'page2', 'page3'],
 +
            scrollingSpeed: 800,
 +
            navigation: true,
 +
        });
 +
    });
 +
    </script>
 +
</head>
 
  <header>
 
  <header>
 
         <nav class="navbar navbar-default navbar-inverse navbar-fixed-top">
 
         <nav class="navbar navbar-default navbar-inverse navbar-fixed-top">
Line 101: Line 143:
 
         </nav>
 
         </nav>
 
     </header>
 
     </header>
 +
<body>
 +
    <button onclick="topFunction()" id="top" title="Go to top">Top</button>
 +
    <div id="fullPage">
 +
        <div class="section">
 +
            <video id="homelogo" loop muted data-autoplay>
 +
              <source src="https://static.igem.org/mediawiki/2018/7/76/T--CCU_Taiwan--CCU_Taiwan_logo.mp4" type="video/mp4">
 +
              <source src="https://static.igem.org/mediawiki/2018/7/7e/T--CCU_Taiwan--CCU_Taiwan_logo.webm" type="video/webm">
 +
            </video>
 +
            <center><a href="#page2" class="scroll-down"><img src="https://static.igem.org/mediawiki/2018/3/3b/T--CCU_Taiwan--down_button.png" width="60" hieght="60"></a></center>
 +
        </div>
 +
        <div class="section" id="move">
 +
          <div class="section2">
 +
            <div class="content">
 +
                <p class="first">CCU Taiwan Team</p>
 +
                <p class="second">Project Description</p>
 +
                <p class="description"> &emsp; We are aiming to create eco-friendly ligneous cups. We hope that the cups we make are waterproof and heat-resistant; furthermore, they can be naturally decomposed. You might think why we waste our whole summer vacation on this little cup which would be thrown soon that people make the drink inside be empty? We will tell you the reason soon.
 +
                <br>
 +
                <br>
  
 +
                    &emsp; The most common stores in Taiwan are handmade drink stores. For us, these handmade drinks are part of our lives. These drinks are often packed in disposable paper cups that are coated with petrochemical, such as PP and PE, to make them waterproof. Nonetheless, these substances produce a large amount of paper that is difficult to be recycled, which causes serious pollution to our environment. Thus, we decide to create a cup coated with substitute which can be naturally decomposed in order to solve the problems.
 +
                <br>
 +
                <br>
  
−
<body>
+
                    &emsp; Lignin, which can be found in most of the plants, is a polymer mainly composed of three kinds of monolignol: p-coumaryl alcohol (H), coniferyl alcohol (G), and sinapyl alcohol (S). The ratio of the three monolignols vary from species to species. These three monolignols can go through polymerization by adding two enzymes—peroxidase and laccase. Therefore, we aim to modify the yeast to produce these two enzymes. We use the enzyme to catalyze three monolignol and form high-purity lignin. We will make the most use of its waterproof characteristic to coat on the cups.
 +
                <br>
 +
                <br>
  
−
 
+
                    &emsp; The highlights of our project are innovative as well as eco- friendly. We hope we can make the most use of lignin and do our best to protect the environment. With our lignin cups, everyone will be able to enjoy the convenience without polluting the Mother Earth.
−
<div class="wrapper">
+
                </p>
−
  <div class="main">
+
            </div>
−
   
+
            </div>
−
      <section class="page1">
+
        </div>
−
        <div class="page_container">
+
        <div class="section">
−
          <h1>One Page Scroll</h1>
+
            <video id="partvideo" loop muted data-autoplay>
−
          <h2>Create an Apple-like one page scroller website (iPhone 5S website) with One Page Scroll plugin</h2>
+
              <source src="https://static.igem.org/mediawiki/2018/9/92/T--CCU_Taiwan--ccupartsvideo.mp4" type="video/mp4">
−
          <p class="credit">Created by <a href="http://www.thepetedesign.com">Pete R.</a>, Founder of <a href="http://www.bucketlistly.com" target="_blank">BucketListly</a></p>
+
              <source src="https://static.igem.org/mediawiki/2018/3/3e/T--CCU_Taiwan--ccupartsvideo.webm" type="video/webm">
−
          <div class="btns">
+
            </video>
−
          <a class="reload btn" href="https://github.com/peachananr/onepage-scroll">Download on Github</a>
+
        </div>
−
        </div>
+
−
      </div>
+
−
      <img src="phones.png" alt="phones">
+
−
      </section>
+
−
   
+
−
    <section class="page2">
+
−
      <div class="page_container">
+
−
          <h1>Ready-to-use plugin</h1>
+
−
          <h2>All you need is an HTML markup, call the script and BAM!</h2>
+
−
          <code class="html">
+
−
          &lt;div class="main"&gt;<br>
+
−
            &lt;section&gt;...&lt;/section&gt;<br>
+
−
            &lt;section&gt;...&lt;/section&gt;<br>
+
−
            ...<br>
+
−
          &lt;/div&gt;
+
−
        </code>
+
−
       
+
−
        <code class="js">
+
−
          $(".main").onepage_scroll();
+
−
        </code>
+
−
      </div>
+
−
      </section>
+
−
   
+
−
    <section class="page3">
+
−
      <div class="page_container">
+
−
          <h1>Pretty Neat Eh?</h1>
+
−
          <h2>You can customise the animation timing, the selector or even the animation easing using CSS3. I can't wait to see what you guys will come up with. Don't forget to grab them for free on Github'</h2>
+
−
          <div class="btns">
+
−
          <a class="reload btn" href="https://github.com/peachananr/onepage-scroll">Download on Github</a>
+
−
        </div>
+
−
      </div>
+
−
      </section>
+
 
     </div>
 
     </div>
−
    <a class="back" href="http://www.thepetedesign.com/#design">Back to The Pete Design</a>
 
−
    <a href="https://github.com/peachananr/onepage-scroll">
 
−
        <img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub">
 
−
 
−
</a>
 
−
  </div>
 
−
 
 
</body>
 
</body>
−
 
  
 
</html>
 
</html>

Revision as of 08:00, 27 July 2018

CCU Taiwan Team

Project Description

  We are aiming to create eco-friendly ligneous cups. We hope that the cups we make are waterproof and heat-resistant; furthermore, they can be naturally decomposed. You might think why we waste our whole summer vacation on this little cup which would be thrown soon that people make the drink inside be empty? We will tell you the reason soon.

  The most common stores in Taiwan are handmade drink stores. For us, these handmade drinks are part of our lives. These drinks are often packed in disposable paper cups that are coated with petrochemical, such as PP and PE, to make them waterproof. Nonetheless, these substances produce a large amount of paper that is difficult to be recycled, which causes serious pollution to our environment. Thus, we decide to create a cup coated with substitute which can be naturally decomposed in order to solve the problems.

  Lignin, which can be found in most of the plants, is a polymer mainly composed of three kinds of monolignol: p-coumaryl alcohol (H), coniferyl alcohol (G), and sinapyl alcohol (S). The ratio of the three monolignols vary from species to species. These three monolignols can go through polymerization by adding two enzymes—peroxidase and laccase. Therefore, we aim to modify the yeast to produce these two enzymes. We use the enzyme to catalyze three monolignol and form high-purity lignin. We will make the most use of its waterproof characteristic to coat on the cups.

  The highlights of our project are innovative as well as eco- friendly. We hope we can make the most use of lignin and do our best to protect the environment. With our lignin cups, everyone will be able to enjoy the convenience without polluting the Mother Earth.