Difference between revisions of "Team:NCKU Tainan"

 
(263 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>
  
−
<!-- <div class="logo_2017">
+
</head>
−
<a href="https://2017.igem.org">
+
<style>
−
<img src="https://static.igem.org/mediawiki/2017/8/8b/HQ_page_logo.jpg"
+
  .full {
−
width="100px">
+
    width: 100%;
−
</a>
+
    height: auto;
−
</div>-->
+
  }
 +
  #paragraph .imagerow p {
 +
    font-size: 20px;
 +
  }
 +
  #paragraph a:hover {
 +
    text-decoration: none;
 +
  }
  
 +
  .imagerow {
 +
    background-color: #fbfbfb;
 +
  }
  
−
<div class="container">
+
  .logo {
−
   <div class="row">
+
    position: absolute;
−
     <div class="col">
+
    width: 475px;
−
      <h1> description </h1>
+
    height: 475px;
−
      <p>
+
    border-radius: 300px;
−
      <br>
+
    text-align: center;
−
      Aquaculture is one of the fastest-growing food production area in the world, and
+
    z-index: 100;
−
      according to a FAO report (The State of World Fisheries and Aquaculture 2012),
+
   }
−
      farmed fish will exceed captured fish for human consumption by 2018.
+
 
−
       As overfishing reduce fish stock in the ocean, aquaculture has become even more
+
  @media only screen and (max-width: 768px) {
−
       important. 
+
    .logo {
−
     
+
      width: 150px;
−
       
+
      height: 150px;
−
      <br></br>
+
    }
−
      When talking about a successful aquaculture model, cleanliness of the water is
+
  }
−
      crucial, especially for some aquatic organisms of great economic value such as
+
 
−
      shrimp and crab. But keeping the water clear and healthy for fishes is not as easy as
+
  .logo img {   
−
      it sounds since it requires experience and a lot of effort. What’s more, intensive
+
    height: 100%;
−
       aquaculture is very common in Taiwan because of the extremely high population
+
    width:auto;
−
      density, but controlling the water condition will be even more difficult in such
+
 
−
      situation.
+
  }
−
       <br></br>
+
 
−
     
+
  #video-background {
−
      Some of the fishermen may turn to technology like recirculating aquaculture system
+
    position: absolute;
−
      (RAS). However, the astonishing operating costs make it a castle in the air for most
+
    width: 100%;
−
      of the fishermen. To solve these problems, we decided to build an easy-to- use
+
    z-index: 1;
−
      device which keep the water clean with efficiency and reliability.
+
  }
−
       <br></br>
+
 
−
     
+
  #video-boat {
−
      Controlling the concentration of Nitrate（NO3-）is an essential part of our project. When
+
    position: relative;
−
      there is limiting nitrate, unwanted algae will decrease and also avid to use antibiotics. With
+
    width: 80%;
−
      the device and app we develop, nitrate in the fish-pond will be transformed into harmless
+
    z-index: 1;
−
      molecule and under monitor the condition of the water at once, making the traditional
+
    margin-left: 10%;
−
      aquaculture safer, easier and more eco-friendly.
+
    margin-right: 10%;
−
       </p>
+
  }
 +
 
 +
  #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>
 +
 
 +
  <div class="container-fluid">
 +
    <div class="row">
 +
       <div class="col">
 +
        <div id="top">
 +
        </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>
 
   </div>
−
</div>
+
  <div class="container-fluid">
−
<script src="/Team:NCKU_Tainan/js/frame/T--NCKU_Tainan--jquery-1_12_0_min_js?ctype=text/javascript&amp;action=raw">
+
    <div class="row">
−
<script src="/Team:NCKU_Tainan/js/frame/T--NCKU_Tainan--bootstrap_min_js?ctype=text/javascript&amp;action=raw">
+
      <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 id="div-right" class="col-md-6 ">
 +
            <a href="https://2017.igem.org/Team:NCKU_Tainan/Demonstrate#sensingboat"><h1 style="margin-top: 20%">Sensing Boat</h1></a>
 +
            <p>
 +
              With sensors and our <i>E. coli</i>, the boat provides an accurate, immediate and automatic sampling method to nitrate sensing.
 +
            </p>
 +
 
 +
           
 +
 
 +
          </div>
 +
 
 +
        </div>
 +
 
 +
        <div class="row imagerow">
 +
 
 +
          <div id="div-right " class="col-md-6 col-md-push-6">
 +
            <div class="leftborder "></div>
 +
            <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>
 +
          </div>
 +
          <div id="div-left" class="col-md-6 col-md-pull-6">
 +
            <div id="margintop" style="right:20px;">
 +
              <a href="https://2017.igem.org/Team:NCKU_Tainan/Demonstrate#regulationbox"><h1 style="margin-top: 20%">Regulation Box</h1></a>
 +
              <p>
 +
                <i>E. coli</i> in box is able to reduce the nitrate concentration of the pumped-
 +
                in water, achieving nitrate regulation in a biological way.
 +
              </p>
 +
            </div>
 +
          </div>
 +
        </div>
 +
 
 +
        <div class="row imagerow">
 +
          <div id="div-left" class="col-md-6">
 +
            <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>
 +
            <div class="rightborder "></div>
 +
          </div>
 +
          <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>
 +
  <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>
  
 
</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.