Difference between revisions of "Team:NCKU Tainan"

 
(252 intermediate revisions by 3 users not shown)
Line 1: Line 1:
−
{{NCKU_Tainan/Header}}
+
{{NCKU_Tainan/Header}} {{NCKU_Tainan/animate_css}}
 
<html>
 
<html>
 +
 +
<head>
 +
  <script src="https://2017.igem.org/wiki/index.php?title=Team:NCKU_Tainan/jquery_min_js&action=raw&ctype=text/javascript"></script>
 +
  <script src="https://2017.igem.org/wiki/index.php?title=Team:NCKU_Tainan/jquery_waypoint_js&action=raw&ctype=text/javascript"></script>
 +
 +
</head>
 +
<style>
 +
  .full {
 +
    width: 100%;
 +
    height: auto;
 +
  }
 +
  #paragraph .imagerow p {
 +
    font-size: 20px;
 +
  }
 +
  #paragraph a:hover {
 +
    text-decoration: none;
 +
  }
 +
 +
  .imagerow {
 +
    background-color: #fbfbfb;
 +
  }
 +
 +
  .logo {
 +
    position: absolute;
 +
    width: 475px;
 +
    height: 475px;
 +
    border-radius: 300px;
 +
    text-align: center;
 +
    z-index: 100;
 +
  }
 +
 +
  @media only screen and (max-width: 768px) {
 +
    .logo {
 +
      width: 150px;
 +
      height: 150px;
 +
    }
 +
  }
 +
 +
  .logo img {   
 +
    height: 100%;
 +
    width:auto;
 +
 +
  }
 +
 +
  #video-background {
 +
    position: absolute;
 +
    width: 100%;
 +
    z-index: 1;
 +
  }
 +
 +
  #video-boat {
 +
    position: relative;
 +
    width: 80%;
 +
    z-index: 1;
 +
    margin-left: 10%;
 +
    margin-right: 10%;
 +
  }
 +
 +
  #div-left {
 +
    width: 50%;
 +
    height: 100%;
 +
    margin-left: auto;
 +
    margin-right: auto;
 +
    background-color: #fbfbfb;
 +
    padding-right: 50px;
 +
  }
 +
 +
  #div-left p {
 +
    text-align: right !important;
 +
    font-weight: 500 !important;
 +
    right: 10px;
 +
    margin-top: 15px;
 +
  }
 +
 +
  #div-left h1 {
 +
    color: #93edd4;
 +
    text-align: right !important;
 +
    right: 10px;
 +
  }
 +
 +
  #div-right {
 +
    width: 50%;
 +
    height: 100%;
 +
    margin-left: auto;
 +
    margin-right: auto;
 +
    background-color: #fbfbfb;
 +
    padding-left: 50px;
 +
  }
 +
 +
  #div-right p {
 +
    text-align: left !important;
 +
    font-weight: 500 !important;
 +
    padding-left: 0 !important;
 +
    margin-top: 15px;
 +
  }
 +
 +
  #div-right h1 {
 +
    color: #93edd4;
 +
    text-align: left !important;
 +
  }
 +
 +
  @media only screen and (max-width: 768px) {
 +
    #div-left {
 +
      width: 100%;
 +
    }
 +
 +
    #div-right {
 +
      width: 100%;
 +
    }
 +
  }
 +
 +
  .rightborder {
 +
    position: absolute;
 +
    width: 10px;
 +
    height: 30%;
 +
    border-right: 4px solid #f9cb8f;
 +
    right: 0;
 +
    top: 30%;
 +
    display: block;
 +
  }
 +
 +
  .leftborder {
 +
    position: absolute;
 +
    width: 10px;
 +
    height: 30%;
 +
    border-right: 4px solid #f9cb8f;
 +
    left: 0;
 +
    top: 30%;
 +
    display: block;
 +
  }
 +
 +
  @media only screen and (max-width: 990px) {
 +
    .rightborder {
 +
      display: none;
 +
    }
 +
    .leftborder {
 +
      display: none;
 +
    }
 +
  }
 +
 +
  .imagerow img {
 +
    width: 100%;
 +
  }
 +
 +
  #full img {
 +
    width: 100%;
 +
  }
 +
 +
  #margintop {}
 +
</style>
 +
 
<body>
 
<body>
  
−
<!-- <div class="logo_2017">
+
  <div class="container-fluid">
−
<a href="https://2017.igem.org">
+
    <div class="row">
−
<img src="https://static.igem.org/mediawiki/2017/8/8b/HQ_page_logo.jpg"
+
      <div class="col">
−
width="100px">
+
        <div id="top">
−
</a>
+
        </div>
−
</div>-->
+
        <div id="category" class="vertical-container">
 +
          <div class="logo">
 +
            <img src="https://static.igem.org/mediawiki/2017/1/1a/NCKU-landing_page-logo-2.png">
 +
          </div>
 +
          <video autoplay loop id="video-background" muted plays-inline>
 +
                <source src="https://static.igem.org/mediawiki/2017/f/ff/NCKU-home-background.mp4" type="video/mp4">
 +
          </video>
 +
        </div>
 +
      </div>
 +
    </div>
 +
  </div>
 +
  <div class="container-fluid">
 +
    <div class="row">
 +
      <div id="paragraph" class="paragraph col-md-12  col-xs-12" data-os-animation="fadeIn" data-os-animation-delay="0s">
  
 +
        <div class="row imagerow">
 +
          <div id="div-left" class="col-md-6">
 +
            <a href="https://2017.igem.org/Team:NCKU_Tainan/Demonstrate#sensingboat"><img src="https://static.igem.org/mediawiki/2017/f/f8/T--NCKU_Tainan--boat_transparent.gif"></a>
 +
            <div class="rightborder "></div>
 +
          </div>
  
−
<!-- <div class="container">
+
          <div id="div-right" class="col-md-6 ">
−
  <div class="row">
+
            <a href="https://2017.igem.org/Team:NCKU_Tainan/Demonstrate#sensingboat"><h1 style="margin-top: 20%">Sensing Boat</h1></a>
−
    <div class="col">
+
            <p>
−
      <h1> description </h1>
+
              With sensors and our <i>E. coli</i>, the boat provides an accurate, immediate and automatic sampling method to nitrate sensing.
−
      <p>
+
            </p>
−
      <br>
+
 
−
      Aquaculture is one of the fastest-growing food production area in the world, and
+
           
−
      according to a FAO report (The State of World Fisheries and Aquaculture 2012),
+
 
−
      farmed fish will exceed captured fish for human consumption by 2018.
+
          </div>
−
      As overfishing reduce fish stock in the ocean, aquaculture has become even more
+
 
−
      important. 
+
        </div>
−
     
+
 
−
       
+
        <div class="row imagerow">
−
      <br></br>
+
 
−
      When talking about a successful aquaculture model, cleanliness of the water is
+
          <div id="div-right " class="col-md-6 col-md-push-6">
−
      crucial, especially for some aquatic organisms of great economic value such as
+
            <div class="leftborder "></div>
−
      shrimp and crab. But keeping the water clear and healthy for fishes is not as easy as
+
            <a href="https://2017.igem.org/Team:NCKU_Tainan/Demonstrate#regulationbox"><img src="https://static.igem.org/mediawiki/2017/9/93/T--NCKU_Tainan--box_transparent.gif" style="padding-left:40px"></a>
−
      it sounds since it requires experience and a lot of effort. What’s more, intensive
+
          </div>
−
      aquaculture is very common in Taiwan because of the extremely high population
+
          <div id="div-left" class="col-md-6 col-md-pull-6">
−
      density, but controlling the water condition will be even more difficult in such
+
            <div id="margintop" style="right:20px;">
−
      situation.
+
              <a href="https://2017.igem.org/Team:NCKU_Tainan/Demonstrate#regulationbox"><h1 style="margin-top: 20%">Regulation Box</h1></a>
−
      <br></br>
+
              <p>
−
     
+
                <i>E. coli</i> in box is able to reduce the nitrate concentration of the pumped-
−
      Some of the fishermen may turn to technology like recirculating aquaculture system
+
                in water, achieving nitrate regulation in a biological way.
−
      (RAS). However, the astonishing operating costs make it a castle in the air for most
+
              </p>
−
      of the fishermen. To solve these problems, we decided to build an easy-to- use
+
            </div>
−
      device which keep the water clean with efficiency and reliability.
+
          </div>
−
      <br></br>
+
        </div>
−
     
+
 
−
      Controlling the concentration of Nitrate（NO3-）is an essential part of our project. When
+
        <div class="row imagerow">
−
      there is limiting nitrate, unwanted algae will decrease and also avid to use antibiotics. With
+
          <div id="div-left" class="col-md-6">
−
      the device and app we develop, nitrate in the fish-pond will be transformed into harmless
+
            <a href="https://2017.igem.org/Team:NCKU_Tainan/Software"><img src="https://static.igem.org/mediawiki/2017/0/0a/T--NCKU_Tainan--test.gif"></a>
−
      molecule and under monitor the condition of the water at once, making the traditional
+
            <div class="rightborder "></div>
−
      aquaculture safer, easier and more eco-friendly.
+
          </div>
−
       </p>
+
          <div id="div-right" class="col-md-6 ">
 +
            <div id="margintop">
 +
              <a href="https://2017.igem.org/Team:NCKU_Tainan/Software"><h1 style="margin-top: 20%">Application</h1></a>
 +
              <p>
 +
                Our own app sends a notice to users while nitrate concentration reaching a certain level, making aquaculture less manpower-required.</p>
 +
            </div>
 +
          </div>
 +
        </div>
 +
       </div>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
−
</div>-->
+
  <br><br><br><br>
 +
 
 +
  <div class="container-fluid">
 +
    <div class="row">
 +
      <div class="full">
 +
        <video autoplay loop id="video-background" muted plays-inline>
 +
                <source src="https://static.igem.org/mediawiki/2017/8/85/T--NCKU_Tainan--all2.mp4" type="video/mp4">
 +
          </video>
 +
      </div>
 +
    </div>
 +
  </div>
 +
 
 +
  <body>
 +
 
 +
    <script type="text/javascript">
 +
      function onScrollInit(items, trigger) {
 +
        $(items).each(function() {
 +
          var osElement = $(this),
 +
            osAnimationClass = osElement.attr('data-os-animation'),
 +
            osAnimationDelay = osElement.attr('data-os-animation-delay');
 +
          osElement.css({
 +
            '-webkit-animation-delay': osAnimationDelay,
 +
            '-moz-animation-delay': osAnimationDelay,
 +
            'animation-delay': osAnimationDelay,
 +
          });
 +
          var osTrigger = (trigger) ? trigger : osElement;
 +
          var waypoint = new Waypoint({
 +
            element: osTrigger,
 +
            handler: function() {
 +
              osElement.addClass('animated').toggleClass(osAnimationClass);
 +
            },
 +
            triggerOnce: false,
 +
            offset: '100%'
 +
          })
 +
        });
 +
      }
 +
      $(document).ready(function() {
 +
        onScrollInit('.os-animation');
 +
        onScrollInit('.staggered-animation', '.staggered-animation-container');
 +
      });
 +
    </script>
  
−
</body>
 
 
</html>
 
</html>

Latest revision as of 05:26, 4 December 2017

Sensing Boat

With sensors and our E. coli, the boat provides an accurate, immediate and automatic sampling method to nitrate sensing.

Regulation Box

E. coli in box is able to reduce the nitrate concentration of the pumped- in water, achieving nitrate regulation in a biological way.

Application

Our own app sends a notice to users while nitrate concentration reaching a certain level, making aquaculture less manpower-required.