Difference between revisions of "Team:NCKU Tainan"

Line 1: Line 1:
 
{{NCKU_Tainan/Header}} {{NCKU_Tainan/animate_css}}
 
{{NCKU_Tainan/Header}} {{NCKU_Tainan/animate_css}}
 
<html>
 
<html>
 +
 
<head>
 
<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_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>  
+
  <script src="https://2017.igem.org/wiki/index.php?title=Team:NCKU_Tainan/jquery_waypoint_js&action=raw&ctype=text/javascript"></script>
  
 
</head>
 
</head>
 
<style>
 
<style>
 +
  .full {
 +
    width: 100%;
 +
    height: auto;
 +
  }
  
 +
  .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;
 +
    }
 +
  }
  
−
.full{
+
  .logo img {
−
width:100%;
+
    width: 100%;
−
height:auto;
+
    height: 100%;
−
}
+
   }
−
.imagerow{
+
−
   background-color:#fbfbfb; 
+
−
}
+
  
−
.logo{
+
  #video-background {
−
  position:absolute;
+
    position: absolute;
−
  width: 475px;
+
    width: 100%;
−
  height: 475px;
+
    z-index: 1;
−
  border-radius: 300px;
+
   }
−
  text-align:center; 
+
−
  z-index:100;
+
−
}
+
−
@media only screen and (max-width: 768px) {
+
−
.logo{
+
−
   width: 150px;
+
−
  height: 150px;
+
−
}
+
−
}
+
−
.logo img{
+
−
  width: 100%;
+
−
  height:100%; 
+
−
}
+
  
−
#video-background {
+
  #video-boat {
−
     position:absolute;  
+
     position: relative;
−
     width:100%;
+
     width: 80%;
−
     z-index: 1;  
+
     z-index: 1;
 +
    margin-left: 10%;
 +
    margin-right: 10%;
 
   }
 
   }
  
−
#video-boat {
+
  #div-left {
−
     position:relative;
+
     width: 50%;
−
     width:80%;
+
     height: 100%;
−
     z-index: 1;
+
     margin-left: auto;
−
     margin-left:10%;
+
     margin-right: auto;
−
     margin-right:10%;  
+
     background-color: #fbfbfb;
 
   }
 
   }
  
−
#div-left { 
+
   #div-left p {
−
   width:50%;
+
    text-align: right !important;
−
  height:100%; 
+
    font-weight: 500 !important;
−
  margin-left:auto;
+
    right: 10px;
−
  margin-right:auto;
+
    margin-top: 15px;
−
  background-color:#fbfbfb;   
+
   }
−
}
+
−
#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{  
+
  #div-left h1 {
−
  width:50%;
+
    color: #93edd4;
−
  height:100%;
+
    text-align: right !important;
−
  margin-left:auto;
+
    right: 10px;
−
  margin-right:auto;  
+
   }
−
   background-color:#fbfbfb;
+
−
}
+
  
−
#div-right p{    
+
  #div-right {
−
  text-align:left !important;
+
    width: 50%;
−
  font-weight: 500 !important;
+
    height: 100%;
−
  padding-left:0 !important;
+
    margin-left: auto;
−
  margin-top:15px;
+
    margin-right: auto;
−
}
+
    background-color: #fbfbfb;
−
#div-right h1{
+
   }
−
  color:#93edd4;
+
−
   text-align:left !important;
+
−
}
+
−
@media only screen and (max-width: 768px) {
+
−
#div-left{
+
−
  width:100%;
+
−
}
+
  
−
#div-right{
+
  #div-right p {
−
  width:100%;
+
    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) {
−
.rightborder{
+
    #div-left {
−
  position:absolute;
+
      width: 100%;
−
   width:10px;
+
    }
−
  height:30%;
+
−
  border-right:4px solid #f9cb8f ;
+
−
  right:0;
+
−
  top:15%;  
+
−
  display:block;
+
−
}
+
  
−
.leftborder{
+
    #div-right {
−
  position:absolute;
+
      width: 100%;
−
  width:10px;
+
    }
−
  height:30%;
+
   }
−
  border-right:4px solid #f9cb8f ;
+
−
   left:0;
+
−
  top:15%;
+
−
  display:block;
+
−
}
+
  
−
@media only screen and (max-width: 990px) {
+
  .rightborder {
−
.rightborder{
+
    position: absolute;
−
  display:none;
+
    width: 10px;
−
}
+
    height: 30%;
−
.leftborder{
+
    border-right: 4px solid #f9cb8f;
−
  display:none;
+
    right: 0;
−
}
+
    top: 15%;
−
}
+
    display: block;
 +
  }
  
−
.imagerow img{
+
  .leftborder {
−
width:100%;  
+
    position: absolute;
−
}
+
    width: 10px;
 +
    height: 30%;
 +
    border-right: 4px solid #f9cb8f;
 +
    left: 0;
 +
    top: 15%;
 +
    display: block;
 +
  }
  
−
#full img{
+
   @media only screen and (max-width: 990px) {
−
   width:100%;
+
    .rightborder {
−
}
+
      display: none;
−
#margintop{
+
    }
 +
    .leftborder {
 +
      display: none;
 +
    }
 +
  }
  
−
      
+
  .imagerow img {
−
}
+
     width: 100%;
 +
  }
  
 +
  #full img {
 +
    width: 100%;
 +
  }
 +
 +
  #margintop {}
 
</style>
 
</style>
 +
 
<body>
 
<body>
  
−
<div class="container-fluid">
+
  <div class="container-fluid">
−
  <div class="row">
+
    <div class="row">
−
    <div class="col">
+
      <div class="col">
−
      <div id="top">
+
        <div id="top">
−
      </div>
+
        </div>
−
      <div id="category" class="vertical-container">
+
        <div id="category" class="vertical-container">
 
           <div class="logo">
 
           <div class="logo">
 
             <img src="https://static.igem.org/mediawiki/2017/d/dd/NCKU-home-logo.png">
 
             <img src="https://static.igem.org/mediawiki/2017/d/dd/NCKU-home-logo.png">
Line 156: Line 157:
 
                 <source src="https://static.igem.org/mediawiki/2017/f/ff/NCKU-home-background.mp4" type="video/mp4">
 
                 <source src="https://static.igem.org/mediawiki/2017/f/ff/NCKU-home-background.mp4" type="video/mp4">
 
           </video>
 
           </video>
 +
        </div>
 
       </div>
 
       </div>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
−
</div>
+
  <div class="container-fluid">
−
<div class="container-fluid">
+
    <div class="row">
−
  <div class="row">
+
      <div id="paragraph" class="paragraph col-md-12  col-xs-12" data-os-animation="fadeIn" data-os-animation-delay="0s">
−
    <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 class="row imagerow">
−
<div id="div-left" class="col-md-6">
+
          <div id="div-left" class="col-md-6">
−
          <img src="https://static.igem.org/mediawiki/2017/a/ad/T--NCKU_Tainan--boxnobackground.gif">
+
            <img src="https://static.igem.org/mediawiki/2017/4/4a/T--NCKU_Tainan--boatnobackground.gif">
−
          <div class="rightborder "></div>
+
            <div class="rightborder "></div>
−
        </div>
+
          </div>
−
       
+
−
        <div id="div-right" class="col-md-6 ">
+
  
−
           <h1>Regulation Box</h1>
+
           <div id="div-right" class="col-md-6 ">
−
<p>
+
            <h1>Sensing Boat</h1>
−
<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>
+
            <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>
  
−
      </div>
+
        <div class="row imagerow">
  
−
      <div class="row imagerow">
+
          <div id="div-right " class="col-md-6 col-md-push-6">
−
     
+
            <div class="leftborder "></div>
−
        <div id="div-right " class="col-md-6 col-md-push-6">
+
            <img src="https://static.igem.org/mediawiki/2017/a/ad/T--NCKU_Tainan--boxnobackground.gif" style="padding-left:40px">
−
          <div class="leftborder "></div>
+
          </div>
−
          <img src="https://static.igem.org/mediawiki/2017/4/4a/T--NCKU_Tainan--boatnobackground.gif" style="padding-left:40px">
+
          <div id="div-left" class="col-md-6 col-md-pull-6">
 +
            <div id="margintop" style="right:20px;">
 +
              <h1>Regulation Box</h1>
 +
              <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>
−
<div id="div-left" class="col-md-6 col-md-pull-6">
 
−
<div id="margintop" style="right:20px;">
 
−
          <h1>Sensing Boat</h1>
 
−
          <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>
 
  
−
      <div class="row imagerow">
+
        <div class="row imagerow">
−
        <div id="div-left" class="col-md-6">
+
          <div id="div-left" class="col-md-6">
−
          <img src="https://static.igem.org/mediawiki/2017/0/0a/T--NCKU_Tainan--test.gif">
+
            <img src="https://static.igem.org/mediawiki/2017/0/0a/T--NCKU_Tainan--test.gif">
−
          <div class="rightborder "></div>
+
            <div class="rightborder "></div>
−
        </div>
+
          </div>
−
        <div id="div-right" class="col-md-6 ">
+
          <div id="div-right" class="col-md-6 ">
−
<div id="margintop">    
+
            <div id="margintop">
−
<h1>Application</h1>
+
              <h1>Application</h1>
−
<p>
+
              <p>
−
Our own app sends a notice to users while nitrate concentration reaching a certain level, making aquaculture less manpower-required.</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>
 
   </div>
 
   </div>
−
</div>
+
  <br><br><br><br>
−
<br><br><br><br>
+
  
−
<div class="container-fluid">
+
  <div class="container-fluid">
−
  <div class="row">  
+
    <div class="row">
−
    <div class="full">      
+
      <div class="full">
−
        <video autoplay loop id="video-background" muted plays-inline>
+
        <video autoplay loop id="video-background" muted plays-inline>
 
                 <source src="https://static.igem.org/mediawiki/2017/2/2b/NCKU-home-all.mp4" type="video/mp4">
 
                 <source src="https://static.igem.org/mediawiki/2017/2/2b/NCKU-home-all.mp4" type="video/mp4">
−
           </video>    
+
           </video>
 +
      </div>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
−
</div>
 
−
<body>
 
  
−
<script type="text/javascript">
+
  <body>
−
    function onScrollInit(items, trigger) {
+
 
−
      $(items).each( function() {
+
    <script type="text/javascript">
−
  var osElement = $(this),
+
      function onScrollInit(items, trigger) {
−
      osAnimationClass = osElement.attr('data-os-animation'),
+
        $(items).each(function() {
−
      osAnimationDelay = osElement.attr('data-os-animation-delay');
+
          var osElement = $(this),
−
      osElement.css({
+
            osAnimationClass = osElement.attr('data-os-animation'),
−
        '-webkit-animation-delay': osAnimationDelay,
+
            osAnimationDelay = osElement.attr('data-os-animation-delay');
−
        '-moz-animation-delay':     osAnimationDelay,
+
          osElement.css({
−
        'animation-delay':         osAnimationDelay,
+
            '-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%'
 +
          })
 
         });
 
         });
−
    var osTrigger = ( trigger ) ? trigger : osElement;
+
      }
−
    var waypoint = new Waypoint({
+
      $(document).ready(function() {
−
        element: osTrigger,
+
        onScrollInit('.os-animation');
−
        handler: function() {
+
         onScrollInit('.staggered-animation', '.staggered-animation-container');
−
          osElement.addClass('animated').toggleClass(osAnimationClass);
+
−
         },
+
−
        triggerOnce: false,
+
−
        offset: '100%'
+
−
        })
+
 
       });
 
       });
−
}
 
−
$(document).ready(function() {
 
−
      onScrollInit('.os-animation');
 
−
      onScrollInit( '.staggered-animation', '.staggered-animation-container');
 
−
});
 
 
     </script>
 
     </script>
  
 
</html>
 
</html>

Revision as of 10:33, 1 November 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.