Difference between revisions of "Team:NCKU Tainan"

 
(42 intermediate revisions by 2 users not shown)
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;
 +
  }
 +
  #paragraph .imagerow p {
 +
    font-size: 20px;
 +
  }
 +
  #paragraph a:hover {
 +
    text-decoration: none;
 +
  }
  
−
.full{
+
  .imagerow {
−
width:100%;
+
    background-color: #fbfbfb;
−
height:auto;
+
  }
−
}
+
−
.imagerow{  
+
−
  background-color:#fbfbfb;
+
−
}
+
  
−
.logo{
+
  .logo {
−
  position:absolute;
+
    position: absolute;
−
  width: 475px;
+
    width: 475px;
−
  height: 475px;
+
    height: 475px;
−
  border-radius: 300px;
+
    border-radius: 300px;
−
  text-align:center;
+
    text-align: center;
−
 
+
    z-index: 100;
−
  z-index:100;
+
   }
−
}
+
−
.logo img{
+
−
   width: 100%;
+
−
  height:100%; 
+
−
}
+
  
−
#video-background {
+
  @media only screen and (max-width: 768px) {
−
     position:absolute; 
+
     .logo {
−
    width:100%;
+
      width: 150px;
−
    z-index: 1;  
+
      height: 150px;
 +
    }
 
   }
 
   }
  
−
#video-boat {
+
  .logo img {  
−
     position:relative;
+
     height: 100%;
−
     width:80%;
+
     width:auto;
−
    z-index: 1; 
+
 
−
    margin-left:10%;
+
−
    margin-right:10%;
+
 
   }
 
   }
  
−
#div-left {
+
  #video-background {
−
  width:50%;
+
    position: absolute;
−
  height:100%;
+
    width: 100%;
−
  margin-left:auto;
+
    z-index: 1;
−
   margin-right:auto;
+
   }
−
  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{  
+
  #video-boat {
−
  width:50%;
+
    position: relative;
−
  height:100%;
+
    width: 80%;
−
  margin-left:auto;
+
    z-index: 1;
−
  margin-right:auto;  
+
    margin-left: 10%;
−
   background-color:#fbfbfb;
+
    margin-right: 10%;
−
}
+
   }
  
−
#div-right p{     
+
  #div-left {
−
  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{
+
    padding-right: 50px;
−
  color:#93edd4;
+
  }
−
  text-align:left !important;
+
−
}
+
  
 +
  #div-left p {
 +
    text-align: right !important;
 +
    font-weight: 500 !important;
 +
    right: 10px;
 +
    margin-top: 15px;
 +
  }
  
−
.rightborder{
+
  #div-left h1 {
−
  position:absolute;
+
    color: #93edd4;
−
  width:10px;
+
    text-align: right !important;
−
  height:30%;
+
    right: 10px;
−
  border-right:4px solid #f9cb8f ;  
+
   }
−
  right:0;  
+
−
   top:15%;
+
−
}
+
  
−
.leftborder{
+
  #div-right {
−
  position:absolute;
+
    width: 50%;
−
  width:10px;
+
    height: 100%;
−
  height:30%;
+
    margin-left: auto;
−
  border-right:4px solid #f9cb8f ;  
+
    margin-right: auto;
−
  left:0;  
+
    background-color: #fbfbfb;
−
  top:15%;  
+
    padding-left: 50px;
−
}
+
  }
  
−
.imagerow img{
+
  #div-right p {
−
width:100%;  
+
    text-align: left !important;
−
}
+
    font-weight: 500 !important;
 +
    padding-left: 0 !important;
 +
    margin-top: 15px;
 +
  }
  
−
#full img{
+
  #div-right h1 {
−
   width:100%;
+
    color: #93edd4;
−
}
+
    text-align: left !important;
−
#margintop{
+
  }
−
   position:absolute;
+
 
−
      
+
   @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>
 
</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/1/1a/NCKU-landing_page-logo-2.png">
 
           </div>
 
           </div>
 
           <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/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-10 col-md-offset-1 col-xs-offset-1 col-xs-10" 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/4/4a/T--NCKU_Tainan--boatnobackground.gif" style="padding-left:40px">
+
            <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 class="rightborder "></div>
−
        </div>
+
          </div>
−
        <div id="div-right" class="col-md-6 ">
+
 
−
          <div id="margintop" >
+
          <div id="div-right" class="col-md-6 ">
−
          <h1>Sensing Boat</h1>
+
            <a href="https://2017.igem.org/Team:NCKU_Tainan/Demonstrate#sensingboat"><h1 style="margin-top: 20%">Sensing Boat</h1></a>
−
          <p>
+
            <p>
−
With sensors and our <i>E. coli</i>, the boat provides an accurate, immediate and automatic sampling method to nitrate sensing.
+
              With sensors and our <i>E. coli</i>, the boat provides an accurate, immediate and automatic sampling method to nitrate sensing.
−
          </p>
+
            </p>
 +
 
 +
           
 +
 
 +
          </div>
  
−
</div>
 
 
         </div>
 
         </div>
−
      </div>
 
  
−
      <div class="row imagerow">
+
        <div class="row imagerow">
−
        <div id="div-left" class="col-md-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 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>
−
        <div id="div-right " class="col-md-6 ">
 
−
          <div class="leftborder "></div>
 
−
          <img src="https://static.igem.org/mediawiki/2017/a/ad/T--NCKU_Tainan--boxnobackground.gif">
 
−
         
 
−
        </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">
+
            <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 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>
+
              <a href="https://2017.igem.org/Team:NCKU_Tainan/Software"><h1 style="margin-top: 20%">Application</h1></a>
−
<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/8/85/T--NCKU_Tainan--all2.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>

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.