Difference between revisions of "Team:NCKU Tainan"

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