Difference between revisions of "Team:NYU Abu Dhabi/"

Line 6: Line 6:
 
#sideMenu, #top_title, .patrollink  {display:none; }
 
#sideMenu, #top_title, .patrollink  {display:none; }
 
#content { margin-left:0px; margin-top:-30px; padding:0px; width:100%;}
 
#content { margin-left:0px; margin-top:-30px; padding:0px; width:100%;}
−
 
 
</style>
 
</style>
  
Line 23: Line 22:
 
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.1.1/aos.css">
 
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.1.1/aos.css">
 
     <!-- <link rel="stylesheet" href="assets/css/styles.min.css"> -->
 
     <!-- <link rel="stylesheet" href="assets/css/styles.min.css"> -->
−
 
+
 
 
</head>
 
</head>
  
Line 49: Line 48:
 
<script src="https://2019.igem.org/Team:NYU_Abu_Dhabi/smoothScroll?action=raw&ctype=text/javascript"></script>
 
<script src="https://2019.igem.org/Team:NYU_Abu_Dhabi/smoothScroll?action=raw&ctype=text/javascript"></script>
 
<script src="https://2019.igem.org/Team:NYU_Abu_Dhabi/jquery?action=raw&ctype=text/javascript"></script>
 
<script src="https://2019.igem.org/Team:NYU_Abu_Dhabi/jquery?action=raw&ctype=text/javascript"></script>
−
   
+
 
 
     <script src="https://2019.igem.org/Team:NYU_Abu_Dhabi/bootstrapjs?action=raw&ctype=text/javascript"></script>
 
     <script src="https://2019.igem.org/Team:NYU_Abu_Dhabi/bootstrapjs?action=raw&ctype=text/javascript"></script>
 
     <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>-->
 
     <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>-->
 
     <script src="https://2019.igem.org/Team:NYU_Abu_Dhabi/sampleScript?action=raw&ctype=text/javascript"></script>
 
     <script src="https://2019.igem.org/Team:NYU_Abu_Dhabi/sampleScript?action=raw&ctype=text/javascript"></script>
−
   
+
 
 
<script src="https://2019.igem.org/Team:NYU_Abu_Dhabi/IndicatorDebug?action=raw&ctype=text/javascript"></script>
 
<script src="https://2019.igem.org/Team:NYU_Abu_Dhabi/IndicatorDebug?action=raw&ctype=text/javascript"></script>
 
<link rel="prefetch" href="https://2019.igem.org/wiki/images/0/00/T--NYU_Abu_Dhabi--iphone.png">
 
<link rel="prefetch" href="https://2019.igem.org/wiki/images/0/00/T--NYU_Abu_Dhabi--iphone.png">
Line 67: Line 66:
 
         <!-- Start: IGEM MENU LINKS -->
 
         <!-- Start: IGEM MENU LINKS -->
 
         <!-- End: IGEM MENU LINKS -->
 
         <!-- End: IGEM MENU LINKS -->
−
         <div class="container"><img src="https://2019.igem.org/wiki/images/f/f3/T--NYU_Abu_Dhabi--logoWhite.png" style="width: 30px;padding: 5px;"><a class="navbar-brand js-scroll-trigger" href="https://2019.igem.org/Team:NYU_Abu_Dhabi/">Volatect</a><button data-toggle="collapse" data-target="#navbarResponsive" class="navbar-toggler float-right" aria-controls="navbarResponsive"
+
         <div class="container"><img src="https://2019.igem.org/wiki/images/f/f3/T--NYU_Abu_Dhabi--logoWhite.png" style="width: 30px;padding: 5px;"><a class="navbar-brand js-scroll-trigger" href="https://2019.igem.org/Team:NYU_Abu_Dhabi">Volatect</a><button data-toggle="collapse" data-target="#navbarResponsive" class="navbar-toggler float-right" aria-controls="navbarResponsive"
 
                 aria-expanded="false" aria-label="Toggle navigation"><i class="fa fa-bars"></i></button>
 
                 aria-expanded="false" aria-label="Toggle navigation"><i class="fa fa-bars"></i></button>
 
             <div class="collapse navbar-collapse" id="navbarResponsive" style="z-index: 9999;">
 
             <div class="collapse navbar-collapse" id="navbarResponsive" style="z-index: 9999;">
Line 99: Line 98:
 
                     <li class="nav-item dropdown" role="presentation"><a class="dropdown-toggle nav-link" data-toggle="dropdown" aria-expanded="false" href="#yolo" style="height: 100%;" role="presentation">Engagement&nbsp;</a>
 
                     <li class="nav-item dropdown" role="presentation"><a class="dropdown-toggle nav-link" data-toggle="dropdown" aria-expanded="false" href="#yolo" style="height: 100%;" role="presentation">Engagement&nbsp;</a>
 
                         <div class="dropdown-menu" role="menu">
 
                         <div class="dropdown-menu" role="menu">
−
                             <a class="dropdown-item" role="presentation" href="https://2019.igem.org/Team:NYU_Abu_Dhabi/Experiments">Collaborations</a>
+
                             <a class="dropdown-item" role="presentation" href="https://2019.igem.org/Team:NYU_Abu_Dhabi/Collaborations">Collaborations</a>
−
                           <a class="dropdown-item" role="presentation" href="human-practices.html">Human Practices</a>
+
                           <a class="dropdown-item" role="presentation" href="https://2019.igem.org/Team:NYU_Abu_Dhabi/Human_Practices">Human Practices</a>
−
                             <a class="dropdown-item" role="presentation" href="integrated-humans.html">Integrated Human</a><a class="dropdown-item" role="presentation"
+
                             <a class="dropdown-item" role="presentation" href="https://2019.igem.org/Team:NYU_Abu_Dhabi/Human_Practices">Integrated Human</a><a class="dropdown-item" role="presentation"
 
                                 href="public-engagement.html">Public Engagement</a>
 
                                 href="public-engagement.html">Public Engagement</a>
 
                             </div>
 
                             </div>
Line 120: Line 119:
  
 
                     </li>
 
                     </li>
−
                 
+
 
 
                     <li style="display:none" class="nav-item" role="presentation"><a class="nav-link" href="https://2019.igem.org/Team:NYU_Abu_Dhabi/Parts">Parts</a></li>
 
                     <li style="display:none" class="nav-item" role="presentation"><a class="nav-link" href="https://2019.igem.org/Team:NYU_Abu_Dhabi/Parts">Parts</a></li>
 
                     <li style="display:none" class="nav-item dropdown" role="presentation"><a class="dropdown-toggle nav-link" data-toggle="dropdown" aria-expanded="false" href="human-practices.html">HUMAN</a>
 
                     <li style="display:none" class="nav-item dropdown" role="presentation"><a class="dropdown-toggle nav-link" data-toggle="dropdown" aria-expanded="false" href="human-practices.html">HUMAN</a>
Line 127: Line 126:
 
                                 href="public-engagement.html">Public Engagement</a></div>
 
                                 href="public-engagement.html">Public Engagement</a></div>
 
                     </li>
 
                     </li>
−
                 
+
 
 
                     <li class="nav-item" role="presentation"><a class="nav-link" href="https://2019.igem.org/Team:NYU_Abu_Dhabi/VolatectAPI">WEB API</a></li>
 
                     <li class="nav-item" role="presentation"><a class="nav-link" href="https://2019.igem.org/Team:NYU_Abu_Dhabi/VolatectAPI">WEB API</a></li>
 
                 </ul>
 
                 </ul>
Line 154: Line 153:
  
 
<script>
 
<script>
−
$( document ).ready(function() {
+
$( document ).ready(function() {
 
     var isHovered=false;
 
     var isHovered=false;
 
     $( ".nav-item.dropdown" ).each(function(){
 
     $( ".nav-item.dropdown" ).each(function(){
−
       
+
 
 
         $( this ).hover(function(){
 
         $( this ).hover(function(){
−
       
+
 
 
$(this).children("div").fadeIn(400);
 
$(this).children("div").fadeIn(400);
 
         // $(this).children("div").addClass("show");
 
         // $(this).children("div").addClass("show");
Line 173: Line 172:
 
         $(this).hover(function(){
 
         $(this).hover(function(){
 
             isHovered=true;
 
             isHovered=true;
−
           
+
 
 
         }, function() {
 
         }, function() {
 
             isHovered=false;
 
             isHovered=false;
Line 183: Line 182:
 
                           });
 
                           });
 
     */
 
     */
−
   
+
 
 
     var is_mobile = false;
 
     var is_mobile = false;
  
 
     if( $('#mobileChecker').css('display')=='none') {
 
     if( $('#mobileChecker').css('display')=='none') {
−
         is_mobile = true;      
+
         is_mobile = true;
 
     }
 
     }
  
Line 208: Line 207:
 
         var controller2 = new ScrollMagic.Controller();
 
         var controller2 = new ScrollMagic.Controller();
 
         //TweenMax.set("#headerTextVolatect", {x:0, y:0});
 
         //TweenMax.set("#headerTextVolatect", {x:0, y:0});
−
         //TweenMax.to("#headerTextVolatect",1,{y:2, repeat:-1});  
+
         //TweenMax.to("#headerTextVolatect",1,{y:2, repeat:-1});
−
       
+
 
−
       
+
 
−
       
+
 
 
         //end hover
 
         //end hover
 
         // build tween
 
         // build tween
Line 225: Line 224:
 
         "https://2019.igem.org/wiki/images/2/2b/T--NYU_Abu_Dhabi--d5.png",
 
         "https://2019.igem.org/wiki/images/2/2b/T--NYU_Abu_Dhabi--d5.png",
 
             "https://2019.igem.org/wiki/images/2/2c/T--NYU_Abu_Dhabi--d6.png"
 
             "https://2019.igem.org/wiki/images/2/2c/T--NYU_Abu_Dhabi--d6.png"
−
   
+
 
 
     ];
 
     ];
  
Line 233: Line 232:
 
     var tweenRemoveDisplay = TweenMax.to("#productImage", 1, {display:"none"});
 
     var tweenRemoveDisplay = TweenMax.to("#productImage", 1, {display:"none"});
 
         //productImage
 
         //productImage
−
   
+
 
 
     // create tween
 
     // create tween
 
     var tweenBlast = TweenMax.to(obj, 1000,
 
     var tweenBlast = TweenMax.to(obj, 1000,
Line 254: Line 253:
 
                         //.addIndicators({name: "pinProduct"}) // add indicators (requires plugin)
 
                         //.addIndicators({name: "pinProduct"}) // add indicators (requires plugin)
 
                         .addTo(controller2);
 
                         .addTo(controller2);
−
       
+
 
 
         scene2.on("end", function (event) {
 
         scene2.on("end", function (event) {
 
     //alert("done");
 
     //alert("done");
 
});
 
});
 
         //.add(tweenTargetGroup)
 
         //.add(tweenTargetGroup)
−
         var tweenTargetGroup =TweenMax.to("#myVideo", 5000, {opacity:1});  
+
         var tweenTargetGroup =TweenMax.to("#myVideo", 5000, {opacity:1});
 
         var targetGroupTimeline = new TimelineMax().add(tweenTargetGroup);
 
         var targetGroupTimeline = new TimelineMax().add(tweenTargetGroup);
 
         var scene2 = new ScrollMagic.Scene({ duration:"100px",offset:"0"})
 
         var scene2 = new ScrollMagic.Scene({ duration:"100px",offset:"0"})
Line 267: Line 266:
 
                         //.addIndicators({name: "targetVideo"}) // add indicators (requires plugin)
 
                         //.addIndicators({name: "targetVideo"}) // add indicators (requires plugin)
 
                         .addTo(controller2);
 
                         .addTo(controller2);
−
       
+
 
 
     });
 
     });
−
   
+
 
−
     //  
+
     //
 
</script>
 
</script>
  
Line 325: Line 324:
 
   color: #fff;
 
   color: #fff;
 
   cursor: pointer;
 
   cursor: pointer;
−
   
+
 
 
}
 
}
  
Line 334: Line 333:
 
     </style>
 
     </style>
 
<video autoplay muted loop id="myVideo">
 
<video autoplay muted loop id="myVideo">
−
   <source src="https://www.videvo.net/videvo_files/converted/2014_08/preview/Gatwick_Airport_1Videvo_1.mov32092.webm" type="video/mp4">
+
   <!-- https://www.videvo.net/videvo_files/converted/2014_08/preview/Gatwick_Airport_1Videvo_1.mov32092.webm -->
 +
  <source src="https://2019.igem.org/wiki/images/d/d2/T--NYU_Abu_Dhabi--airport3_.mp4" type="video/mp4">
 
</video>
 
</video>
  
 
<div class="videoContent">
 
<div class="videoContent">
−
   <h1 class="videoContentText" style="text-align:center;font-size:7vw;height: 100%;  
+
   <h1 class="videoContentText" style="text-align:center;font-size:7vw;height: 100%;
 
     width:100%;
 
     width:100%;
 
     display:flex;
 
     display:flex;
Line 345: Line 345:
 
     color:white;
 
     color:white;
 
     font-family: Catamaran !important; font-weight: 200 !important;">REVOLUTIONIZING YOUR TRAVEL EXPERIENCE</h1>
 
     font-family: Catamaran !important; font-weight: 200 !important;">REVOLUTIONIZING YOUR TRAVEL EXPERIENCE</h1>
−
+
 
 
  </div></div>
 
  </div></div>
 
     <!-- End: TargetGroupVideo -->
 
     <!-- End: TargetGroupVideo -->
Line 355: Line 355:
 
             </div>
 
             </div>
 
             <div class="row text-center d-flex justify-content-center align-items-center">
 
             <div class="row text-center d-flex justify-content-center align-items-center">
−
                 <div class="col-md-12"> <h1 style="font-size:5vw;color:#fffbfe" >Meet Volatectica. A disease diagnostic device that works like magic. </h1><a class="btn btn-outline-warning btn-xl js-scroll-trigger" role="button" href="#download">pre order</a></div>
+
                 <div class="col-md-12"> <h1 style="font-size:5vw;color:#fffbfe" >Meet Volatect. A disease diagnostic device that works like magic. </h1><a class="btn btn-outline-warning btn-xl js-scroll-trigger" role="button" href="#download">pre order</a></div>
 
             </div>
 
             </div>
 
         </div>
 
         </div>
 
     </div>
 
     </div>
 
     <!-- End: mobileScreenProductHeader -->
 
     <!-- End: mobileScreenProductHeader -->
−
    <div data-aos="fade-down" data-aos-duration="500" data-aos-offset="200" class="d-block d-lg-none" style="background-color: #000000;">
 
−
        <!-- Start: TargetGroupVideoMobile --><div style="position:relative;background-color: #000000;background-image: url('assets/img/bg-pattern.png');height: 100%;">
 
−
    <style>
 
−
    #myVideoMobile {
 
−
        position:relative;
 
−
        z-index:0;
 
−
        width: 100%;
 
−
}
 
  
−
.videoContent {
+
<h1 class="text-center d-block d-lg-none"> REVOLUTIONIZING YOUR TRAVEL EXPERIENCE</h1>
−
     top:0;
+
     <video autoplay muted loop style="height:100%;width:100%;" class="d-block d-lg-none">
−
    bottom:0;
+
      <source src="https://2019.igem.org/wiki/images/d/d2/T--NYU_Abu_Dhabi--airport3_.mp4" type="video/mp4">
−
    margin:auto;
+
    </video>
−
    position:absolute;
+
−
    max-height:50%;
+
−
    left:0;
+
−
    z-index:1;
+
−
  background: rgba(0, 0, 0, 0.5);
+
−
  color: #f1f1f1;
+
−
  width: 100%;
+
−
  padding: 20px;
+
−
}
+
  
−
#myBtn {
 
−
  width: 200px;
 
−
  font-size: 18px;
 
−
  padding: 10px;
 
−
  border: none;
 
−
  background: #000;
 
−
  color: #fff;
 
−
  cursor: pointer;
 
−
   
 
−
}
 
  
−
#myBtn:hover {
 
−
  background: #ddd;
 
−
  color: black;
 
−
}
 
−
    </style>
 
−
<video autoplay muted loop id="myVideoMobile">
 
−
  <source src="https://www.videvo.net/videvo_files/converted/2014_08/preview/Gatwick_Airport_1Videvo_1.mov32092.webm" type="video/mp4">
 
−
</video>
 
  
−
<div class="videoContent">
+
 
−
  <h1 style="text-align:center;font-size:7vw;height: 100%;
+
    <div style="display:none;" data-aos="fade-down" data-aos-duration="500" data-aos-offset="200" class="d-block d-lg-none" style="background-color: #000000;">
−
    width:100%;
+
        <!-- Start: TargetGroupVideoMobile -->
−
    display:flex;
+
        <div class="d-block d-lg-none" style="position:relative;background-color: #000000;background-image: url('assets/img/bg-pattern.png');height: 100%;">
−
    align-items: center;
+
 
−
    justify-content: center;">REVOLUTIONIZING YOUR TRAVEL EXPERIENCE</h1>
+
 
−
+
</div>
−
</div></div>
+
 
         <!-- End: TargetGroupVideoMobile -->
 
         <!-- End: TargetGroupVideoMobile -->
 
     </div>
 
     </div>
 +
    <img src="https://2019.igem.org/wiki/images/thumb/4/47/T--NYU_Abu_Dhabi--collectInfo.jpg/539px-T--NYU_Abu_Dhabi--collectInfo.jpg" class="text-center img-fluid"/>
 
     <!-- Start: How does it work? -->
 
     <!-- Start: How does it work? -->
−
     <section id="volatectSteps" class="index-howto-alt py-3">
+
     <section style="display:none;" id="volatectSteps" class="index-howto-alt py-3 " >
−
         <div class="container" style="padding: 100px 0px;">
+
         <div class="container d-none d-lg-block" style="padding: 100px 0px; ">
 
             <h2 class="text-center mb-3">How does it work?</h2>
 
             <h2 class="text-center mb-3">How does it work?</h2>
 
             <div class="psd-line pos-rel" style="position:relative;">
 
             <div class="psd-line pos-rel" style="position:relative;">
Line 514: Line 479:
 
   canvas.height = 800;
 
   canvas.height = 800;
 
   ctx = canvas.getContext("2d");
 
   ctx = canvas.getContext("2d");
−
 
+
 
−
 
+
 
 
   height = canvas.height;
 
   height = canvas.height;
 
   width = canvas.width;
 
   width = canvas.width;
Line 543: Line 508:
 
     var y1 = unit * Math.sin(x) + xAxis;
 
     var y1 = unit * Math.sin(x) + xAxis;
 
     var y2 = unit * Math.sin(-x) + xAxis;
 
     var y2 = unit * Math.sin(-x) + xAxis;
−
 
+
 
−
 
+
 
 
     ctx.moveTo(i, y1);
 
     ctx.moveTo(i, y1);
 
     ctx.lineTo(i, y2);
 
     ctx.lineTo(i, y2);
Line 554: Line 519:
 
function drawCircles(i, x, y1, y2) {
 
function drawCircles(i, x, y1, y2) {
 
   ctx.beginPath();
 
   ctx.beginPath();
−
   ctx.lineWidth = 0;  
+
   ctx.lineWidth = 0;
 
   ctx.arc(i, y1, ballWeight - Math.cos(x) * 6, 0, 2 * Math.PI);
 
   ctx.arc(i, y1, ballWeight - Math.cos(x) * 6, 0, 2 * Math.PI);
 
   ctx.fill();
 
   ctx.fill();
Line 572: Line 537:
  
 
</style>
 
</style>
−
 
+
 
 
     </div>
 
     </div>
 
     <div id="featureInfoHolder" class="col-sm-5 my-auto">
 
     <div id="featureInfoHolder" class="col-sm-5 my-auto">
Line 594: Line 559:
 
   width: 50%
 
   width: 50%
 
}
 
}
−
</style>  
+
</style>
 
<svg id="microfluidics" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1560 400" enable-background="new 0 0 1560 400" xml:space="preserve">
 
<svg id="microfluidics" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1560 400" enable-background="new 0 0 1560 400" xml:space="preserve">
−
   
+
 
 
<pattern  width="304" height="304" patternUnits="userSpaceOnUse" id="New_Pattern" viewBox="0 -304 304 304" overflow="visible">
 
<pattern  width="304" height="304" patternUnits="userSpaceOnUse" id="New_Pattern" viewBox="0 -304 304 304" overflow="visible">
 
     <g>
 
     <g>
 
         <rect y="-304" fill="none" width="304" height="304"/>
 
         <rect y="-304" fill="none" width="304" height="304"/>
−
   
+
 
 
         <style type="text/css">
 
         <style type="text/css">
 
             .ic-path {
 
             .ic-path {
Line 771: Line 736:
 
       </svg></div><div id="" class="col-sm-5 my-auto">
 
       </svg></div><div id="" class="col-sm-5 my-auto">
 
     <h1 class="headingTextBioEngineering" style="font-size: 5vw;">Microfluidics</h1>
 
     <h1 class="headingTextBioEngineering" style="font-size: 5vw;">Microfluidics</h1>
−
     <p class="gradientText" style="font-size: 1.5vw;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
+
     <p class="gradientText" style="font-size: 1.5vw;">
−
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><button class="btn btn-primary" type="button">Learn more</button></div>
+
Microfluidics unites the reliability of lab tests with the  integrated efficiency of a printed circuit board. It tackles the challenges of controlling fluid flow in micromillimeters sized channel geometries and facilitating complex on-chip biological protocols both spatially and temporally. In accordance with the international trends of integrating technologies to ensure reliable use, scalability and user availability, Volatect's chip is the result of improving multiple iterations on iGEM's diagnostics track over the years and a pursuit of high standards both in signal quality and chemical contamination prevention.
 +
    </p><button class="btn btn-primary" type="button">Learn more</button></div>
 
</div>
 
</div>
  
Line 778: Line 744:
 
<div class="row" style="position:fixed;top:25%;opacity:0;" id="webapiHolder">
 
<div class="row" style="position:fixed;top:25%;opacity:0;" id="webapiHolder">
 
   <div id="featureHolder" class="col-sm-6 my-auto">
 
   <div id="featureHolder" class="col-sm-6 my-auto">
−
 
+
 
 
     <style>
 
     <style>
 
     #map {
 
     #map {
Line 3,432: Line 3,398:
  
 
<script>
 
<script>
−
     $(function () {  
+
     $(function () {
 
     setRandomClass();
 
     setRandomClass();
 
setInterval(function () {
 
setInterval(function () {
Line 3,443: Line 3,409:
 
     var number = items.length;
 
     var number = items.length;
  
−
   
+
 
 
   //alert("yolo");
 
   //alert("yolo");
 
     items.removeClass("banaan");
 
     items.removeClass("banaan");
Line 3,455: Line 3,421:
 
           items.eq(random).addClass("banaan2");
 
           items.eq(random).addClass("banaan2");
 
       }
 
       }
−
   
+
 
 
   }
 
   }
  
Line 3,462: Line 3,428:
 
     </div><div id="featureInfoHolder" class="col-sm-5 my-auto">
 
     </div><div id="featureInfoHolder" class="col-sm-5 my-auto">
 
     <h1 class="headingTextBioEngineering" style="font-size: 5vw;">WEB API</h1>
 
     <h1 class="headingTextBioEngineering" style="font-size: 5vw;">WEB API</h1>
−
     <p class="gradientText" style="font-size: 1.5vw;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
+
     <p class="gradientText" style="font-size: 1.5vw;">
−
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><button class="btn btn-primary" type="button">Learn more</button></div>
+
      An API (Application Programming Interface) simply put is a way for applications to communicate with each other. The Volatect API is intended to be used by medical researchers. We believe that the data that comes out of air travel disease reports from our device could help immensely in the analysis and prediction of outbreaks around the world as we provide disease diagnosis in relation to the nationality and the flight path of the passengers.
 +
    </p><button class="btn btn-primary" type="button">Learn more</button></div>
  
 
</div>
 
</div>
−
   
+
 
 
         <!-- Start: Fade2Black -->
 
         <!-- Start: Fade2Black -->
 
<style>
 
<style>
Line 3,477: Line 3,444:
 
   background: #8A2387;
 
   background: #8A2387;
 
   background: -webkit-linear-gradient(to right, #1E90FF, #00BFFF, #1E90FF);
 
   background: -webkit-linear-gradient(to right, #1E90FF, #00BFFF, #1E90FF);
−
   background: linear-gradient(to right, #1E90FF, #00BFFF, #1E90FF);  
+
   background: linear-gradient(to right, #1E90FF, #00BFFF, #1E90FF);
−
 
+
 
 
   -webkit-background-clip: text;
 
   -webkit-background-clip: text;
−
 
+
 
 
   color: transparent;
 
   color: transparent;
 
}
 
}
Line 3,487: Line 3,454:
 
     }
 
     }
 
</style><script>
 
</style><script>
−
   
+
 
−
     $(function () {  
+
     $(function () {
 
         var controller3 = new ScrollMagic.Controller();
 
         var controller3 = new ScrollMagic.Controller();
 
         var tweenFadeIn = TweenMax.to("#engineeringbio", 1, {backgroundColor:"black",opacity:1});
 
         var tweenFadeIn = TweenMax.to("#engineeringbio", 1, {backgroundColor:"black",opacity:1});
Line 3,502: Line 3,469:
 
                         .addTo(controller3);
 
                         .addTo(controller3);
 
     });
 
     });
−
   
+
 
−
   
+
 
 
</script>
 
</script>
  
 
         <!-- End: Fade2Black -->
 
         <!-- End: Fade2Black -->
 
         <!-- Start: ScrollFeatures --><script>
 
         <!-- Start: ScrollFeatures --><script>
−
   
+
 
−
     $(function () {  
+
     $(function () {
 
         $("#featuresHeaderText").css("display", "none");
 
         $("#featuresHeaderText").css("display", "none");
 
         $("#middleFeatureContainer").css("display", "none");
 
         $("#middleFeatureContainer").css("display", "none");
 
         $("#microfluidicsContainer").css("display", "none");
 
         $("#microfluidicsContainer").css("display", "none");
 
         $("#webapiHolder").css("display", "none");
 
         $("#webapiHolder").css("display", "none");
−
       
+
 
 
         var controller4 = new ScrollMagic.Controller();
 
         var controller4 = new ScrollMagic.Controller();
 
         var timelineFeatures = new TimelineMax()
 
         var timelineFeatures = new TimelineMax()
Line 3,529: Line 3,496:
 
         .add(TweenMax.to("#webapiHolder", 10, {opacity:0,display:"none"}),"last")
 
         .add(TweenMax.to("#webapiHolder", 10, {opacity:0,display:"none"}),"last")
 
         .add(TweenMax.to("#webapiHolder", 1, {display:"none"}))
 
         .add(TweenMax.to("#webapiHolder", 1, {display:"none"}))
−
       
+
 
 
         //microfluidicsContainer webapiHolder
 
         //microfluidicsContainer webapiHolder
 
         var sceneBack2 = new ScrollMagic.Scene({ duration:"300%",offset:0})
 
         var sceneBack2 = new ScrollMagic.Scene({ duration:"300%",offset:0})
Line 3,556: Line 3,523:
 
                         .addTo(controller4);
 
                         .addTo(controller4);
 
     });
 
     });
−
   
+
 
−
   
+
 
 
</script>
 
</script>
  
Line 3,564: Line 3,531:
 
     <!-- End: Features Desktop -->
 
     <!-- End: Features Desktop -->
 
     <!-- Start: Features Mobile --><section id="features" class="features d-block d-lg-none" style=" background:url('assets/img/bg-pattern.png'), linear-gradient(to left, #cecccc, #fdfffc, #fdfffc, #cecccc);">
 
     <!-- Start: Features Mobile --><section id="features" class="features d-block d-lg-none" style=" background:url('assets/img/bg-pattern.png'), linear-gradient(to left, #cecccc, #fdfffc, #fdfffc, #cecccc);">
−
   
+
 
−
 
+
 
 
     <div class="container">
 
     <div class="container">
 
         <div class="section-heading text-center">
 
         <div class="section-heading text-center">
 
             <h2 style="">State-of-the-art Biology and Engineering</h2>
 
             <h2 style="">State-of-the-art Biology and Engineering</h2>
−
            <p class="text-muted">bla bla bla</p>
+
 
 
             <hr />
 
             <hr />
 
         </div>
 
         </div>
Line 3,583: Line 3,550:
 
                             <div class="feature-item" style=""><img src="assets/img/Crispr.gif.gif" class="img-fluid"/></i>
 
                             <div class="feature-item" style=""><img src="assets/img/Crispr.gif.gif" class="img-fluid"/></i>
 
                                 <h3>CRISPR</h3>
 
                                 <h3>CRISPR</h3>
−
                                 <p class="text-muted">We use Crispr in order to target specific genes. Bla bla</p><button class="btn btn-primary" data-toggle="modal" data-target="#crisprInfo" type="button">Learn More</button></div>
+
                                 <p class="text-muted">
 +
                                  CRISPR technology is a simple yet powerful tool for editing genomes. It allows researchers to easily alter DNA sequences and modify gene function. Its many potential applications include correcting genetic defects, treating and preventing
 +
                                      the spread of diseases and improving crops. However, its promise also raises ethical concerns.In popular usage, "CRISPR" (pronounced "crisper") is shorthand for "CRISPR-Cas9." CRISPRs are specialized stretches of DNA. The protein
 +
                                      Cas9 (or "CRISPR-associated") is an enzyme that acts like a pair of molecular scissors, capable of cutting strands of DNA.
 +
                                </p><button class="btn btn-primary" data-toggle="modal" data-target="#crisprInfo" type="button">Learn More</button></div>
 
                             <div class="Push-20"></div>
 
                             <div class="Push-20"></div>
 
                         </div>
 
                         </div>
 
                         <div class="col-lg-6">
 
                         <div class="col-lg-6">
 
                             <div class="feature-item" style=""><i class="icon-camera text-primary"></i>
 
                             <div class="feature-item" style=""><i class="icon-camera text-primary"></i>
−
                                 <h3>RPA / LAMP</h3>
+
                                 <h3>Microfluidics</h3>
−
                                 <p class="text-muted">Fluoresence is what we use to decide what the</p><button class="btn btn-primary" data-toggle="modal" data-target="#crisprInfo" type="button">Learn More</button></div>
+
                                 <p class="text-muted">
 +
Microfluidics unites the reliability of lab tests with the  integrated efficiency of a printed circuit board. It tackles the challenges of controlling fluid flow in micromillimeters sized channel geometries and facilitating complex on-chip biological protocols both spatially and temporally.  In accordance with the international trends of integrating technologies to ensure reliable use, scalability and user availability, Volatect's chip is the result of improving multiple iterations on iGEM's diagnostics track over the years and a pursuit of high standards both in signal quality and chemical contamination prevention.
 +
                                </p><button class="btn btn-primary" data-toggle="modal" data-target="#crisprInfo" type="button">Learn More</button></div>
 
                             <div class="Push-20"></div>
 
                             <div class="Push-20"></div>
 
                         </div>
 
                         </div>
 
                         <div class="col-lg-6">
 
                         <div class="col-lg-6">
 
                             <div class="feature-item" style=""><i class="fa fa-bolt text-primary"></i>
 
                             <div class="feature-item" style=""><i class="fa fa-bolt text-primary"></i>
−
                                 <h3>DEP</h3>
+
                                 <h3>Volatect API</h3>
−
                                 <p class="text-muted">Di Electric Bla bla force used to do ___</p><button class="btn btn-primary" data-toggle="modal" data-target="#crisprInfo" type="button">Learn More</button></div>
+
                                 <p class="text-muted">
−
                            <div class="Push-20"></div>
+
We built a WEB API that allows secure access to the data we collect using our device. Medical researchers can now use the data we collect from passengers in airports to predict and report disease outbreaks before they happen.&nbsp;
−
                        </div>
+
                                 </p><button class="btn btn-primary" data-toggle="modal" data-target="#crisprInfo" type="button">Learn More</button></div>
−
                        <div class="col-lg-6">
+
−
                            <div class="feature-item" style=""><i class="icon-graph text-primary"></i>
+
−
                                 <h3>Machine Learning</h3>
+
−
                                <p class="text-muted">We use machine learning models to make accurate deductions on data.</p><button class="btn btn-primary" data-toggle="modal" data-target="#crisprInfo" type="button">Learn More</button></div>
+
 
                             <div class="Push-20"></div>
 
                             <div class="Push-20"></div>
 
                         </div>
 
                         </div>
Line 3,612: Line 3,581:
 
     <!-- End: Features Mobile -->
 
     <!-- End: Features Mobile -->
 
     <!-- Start: WEB API MOBILE -->
 
     <!-- Start: WEB API MOBILE -->
−
    <div data-aos="flip-up" class="d-block d-lg-none" style="background-color: black;padding: 20px;"><script>
+
<div style="display:none;"></div>
−
    const sleep = (milliseconds) => {
+
−
  return new Promise(resolve => setTimeout(resolve, milliseconds))
+
−
}
+
−
setCodeTextAreas = (request,response) => {
+
−
  document.getElementById("apirequest").innerText=request;
+
−
document.getElementById("apiresponse").innerText=response;
+
−
}
+
−
loadTextArea = (request,response) => {
+
−
    seconds=Math.floor(Math.random() * (2000 - 100 + 1)) + 100;
+
−
    setCodeTextAreas(request,"-LOADING-");
+
−
    showLoader();
+
−
    sleep(seconds).then(() => {
+
−
setCodeTextAreas(request,response);
+
−
        hideLoader();
+
−
})
+
−
}
+
−
hideLoader = () => {
+
−
    var link = document.getElementById('loaderImage');
+
−
link.style.visibility = 'hidden';
+
−
}
+
−
showLoader = () => {
+
−
    var link = document.getElementById('loaderImage');
+
−
link.style.visibility = 'visible';
+
−
}
+
−
generalCall = () => {
+
−
  loadTextArea("{Request: all}","{ { \"Disease\":\"HIV\",\r\n  \"fluorescencePositiveMin\":30,\r\n  \"fluorescencePositiveDanger\":40,\r\n  \"datapoints\": {\r\n    \"noOfDatapoints\":5000,\r\n    \"errorVal\":\"40\",\r\n    }\r\n}, { \"Disease\":\"Ebola\",\r\n  \"fluorescencePositiveMin\":20,\r\n  \"fluorescencePositiveDanger\":25,\r\n  \"datapoints\": {\r\n    \"noOfDatapoints\":3500,\r\n    \"errorVal\":\"30\",\r\n    }\r\n}");
+
−
 
+
−
}
+
−
HIVPositive = () => {
+
−
  loadTextArea("{Request: { disease: \"HIV\", intensity : 32 } }","{Response:{ HIV: true , Danger: false}}");
+
−
}
+
−
HIVNegative = () => {
+
−
  loadTextArea("{Request: { disease: \"HIV\", intensity : 20 } }","{Response:{ HIV: false , Danger: false}}");
+
−
}
+
−
HIVDanger = () => {
+
−
  loadTextArea("{Request: { intensity : 46 } }","{Response:{ HIV: false, Danger: true}}");
+
−
}
+
−
</script>
+
−
        <div class="row">
+
−
            <div class="col-md-12">
+
−
                <h1 class="text-center" style="width: 100%;color: rgb(255,255,255);">Web API</h1>
+
−
                <p class="lead text-center" style="width: 100%;min-width: 100%;color: rgb(255,255,255);font-size: 18px;">We built a WEB API that allows secure access to the data we collect using our device. Medical researchers can now use the data we collect from passengers in airports to predict and report disease outbreaks before they happen.&nbsp;</p>
+
−
                <!-- Start: Juvi - Push Empty Space 20px -->
+
−
                <div class="Push-20"></div>
+
−
                <!-- End: Juvi - Push Empty Space 20px -->
+
−
                <!-- Start: Juvi - Push Empty Space 20px -->
+
−
                <div class="Push-20"></div>
+
−
                <!-- End: Juvi - Push Empty Space 20px --><img src="assets/img/built-on-heroku-light.svg" style="width: 300px;"><img src="assets/img/kisspng-postgresql-clip-art-database-logo-web-design-strategy-relik-5b67d8468fcf82.2394477615335322305891.jpg" style="width: 100px;"></div>
+
−
        </div>
+
−
        <div class="row d-none">
+
−
            <div class="col-md-4 d-xl-flex justify-content-xl-center align-items-xl-center" style="padding: 20px;"><div class="dropdown d-flex justify-content-center" style="padding:10px;"><button  class="btn btn-primary dropdown-toggle d-xl-flex justify-content-xl-center align-items-xl-center" data-toggle="dropdown" aria-expanded="false" type="button">Select Request </button>
+
−
    <div role="menu" class="dropdown-menu"><a role="presentation" class="dropdown-item" onclick="generalCall()">General Request</a><a role="presentation" class="dropdown-item" onclick="HIVPositive();">HIV Positive Call</a><a role="presentation" class="dropdown-item" onclick="HIVNegative();">HIV Negative Call</a><a role="presentation" class="dropdown-item" onclick="HIVDanger();">HIV Positive Danger Call</a></div>
+
−
</div><div class="dropdown d-flex justify-content-center"><img class="img-fluid text-center" style="visibility:hidden;" id="loaderImage" src="assets/img/loading.svg" /></div></div>
+
−
            <div class="col-md-4 d-flex d-xl-flex justify-content-center justify-content-xl-center" style="padding: 10px;"><textarea class="border rounded shadow-lg" id="apirequest" readonly="" style="height: 250px;width: 100%;font-size: 18px;" placeholder="Request Call "></textarea></div>
+
−
            <div class="col d-flex d-xl-flex justify-content-center justify-content-xl-center"
+
−
                style="padding: 10px;"><textarea class="border rounded shadow-lg" id="apiresponse" readonly="" style="height: 250px;width: 100%;font-size: 18px;" placeholder="Response JSON"></textarea></div>
+
−
        </div>
+
−
    </div>
+
 
     <!-- End: WEB API MOBILE -->
 
     <!-- End: WEB API MOBILE -->
 
     <section id="socialContainer" class="contact" style="background-color: #fdfffc;">
 
     <section id="socialContainer" class="contact" style="background-color: #fdfffc;">
Line 3,677: Line 3,588:
 
             <ul class="list-inline list-social">
 
             <ul class="list-inline list-social">
 
                 <li class="list-inline-item social-twitter"><a href="#"><i class="fa fa-twitter"></i></a></li>
 
                 <li class="list-inline-item social-twitter"><a href="#"><i class="fa fa-twitter"></i></a></li>
−
                 <li class="list-inline-item social-facebook"><a href="#"><i class="fa fa-facebook"></i></a></li>
+
                 <li class="list-inline-item social-facebook"><a href="https://www.facebook.com/iGEMNYUAD/"><i class="fa fa-facebook"></i></a></li>
 
                 <li class="list-inline-item social-google-plus"><a href="#"><i class="fa fa-google-plus"></i></a></li>
 
                 <li class="list-inline-item social-google-plus"><a href="#"><i class="fa fa-google-plus"></i></a></li>
 
             </ul>
 
             </ul>
Line 3,686: Line 3,597:
 
         <!-- Start: HeartAnimation -->
 
         <!-- Start: HeartAnimation -->
 
<script>
 
<script>
−
   
+
 
−
     $(function () {  
+
     $(function () {
 
         var controller5 = new ScrollMagic.Controller();
 
         var controller5 = new ScrollMagic.Controller();
−
     
+
 
 
         var rotateHeart = new TimelineMax()
 
         var rotateHeart = new TimelineMax()
 
         .add(TweenMax.to("#heart_icon", 50, {rotation:180}),"up")
 
         .add(TweenMax.to("#heart_icon", 50, {rotation:180}),"up")
Line 3,695: Line 3,606:
 
         .add(TweenMax.to("#heart_icon", 50, {rotation:360}),"down")
 
         .add(TweenMax.to("#heart_icon", 50, {rotation:360}),"down")
 
         .add(TweenMax.to("#heart_icon", 50, {y:0}),"down")
 
         .add(TweenMax.to("#heart_icon", 50, {y:0}),"down")
−
       
+
 
 
         //microfluidicsContainer webapiHolder
 
         //microfluidicsContainer webapiHolder
 
         var sceneHeart = new ScrollMagic.Scene({ duration:"100px",offset:"50px"})
 
         var sceneHeart = new ScrollMagic.Scene({ duration:"100px",offset:"50px"})
Line 3,701: Line 3,612:
 
         .triggerElement("#socialContainer")
 
         .triggerElement("#socialContainer")
 
       //.setPin("#middleFeatureContainer")
 
       //.setPin("#middleFeatureContainer")
−
                         //.addIndicators({name: "heart"})  
+
                         //.addIndicators({name: "heart"})
 
                         .addTo(controller5)
 
                         .addTo(controller5)
 
         .on("start", ()=> {
 
         .on("start", ()=> {
Line 3,709: Line 3,620:
 
         });
 
         });
 
     });
 
     });
−
   
+
 
−
   
+
 
 
</script>
 
</script>
 
         <!-- End: HeartAnimation -->
 
         <!-- End: HeartAnimation -->
Line 3,721: Line 3,632:
 
       filter: gray; /* IE5+ */
 
       filter: gray; /* IE5+ */
 
       -webkit-filter: grayscale(1); /* Webkit Nightlies & Chrome Canary */
 
       -webkit-filter: grayscale(1); /* Webkit Nightlies & Chrome Canary */
−
       -webkit-transition: all .1s ease-in-out;
+
       -webkit-transition: all .1s ease-in-out;
−
     
+
 
 
     }
 
     }
  
Line 3,730: Line 3,641:
 
       -webkit-filter: grayscale(0);
 
       -webkit-filter: grayscale(0);
 
       -webkit-transform: scale(1.01);
 
       -webkit-transform: scale(1.01);
−
     
+
 
−
     
+
 
 
     }
 
     }
 
     .mobile-space {
 
     .mobile-space {
Line 3,785: Line 3,696:
 
     <!-- Start: SmoothWheel Integration --> <script>
 
     <!-- Start: SmoothWheel Integration --> <script>
 
       $(function(){
 
       $(function(){
−
   
+
 
 
     var $window = $(window);        //Window object
 
     var $window = $(window);        //Window object
−
   
+
 
 
     var scrollTime = 1.5;          //Scroll time
 
     var scrollTime = 1.5;          //Scroll time
 
     var scrollDistance = 200;      //Distance. Use smaller value for shorter scroll and greater value for longer scroll
 
     var scrollDistance = 200;      //Distance. Use smaller value for shorter scroll and greater value for longer scroll
−
       
+
 
 
     $window.on("mousewheel DOMMouseScroll", function(event){
 
     $window.on("mousewheel DOMMouseScroll", function(event){
−
       
+
 
−
         event.preventDefault();  
+
         event.preventDefault();
−
                                       
+
 
         var delta = event.originalEvent.wheelDelta/120 || -event.originalEvent.detail/3;
 
         var delta = event.originalEvent.wheelDelta/120 || -event.originalEvent.detail/3;
 
         var scrollTop = $window.scrollTop();
 
         var scrollTop = $window.scrollTop();
 
         var finalScroll = scrollTop - parseInt(delta*scrollDistance);
 
         var finalScroll = scrollTop - parseInt(delta*scrollDistance);
−
           
+
 
 
         TweenMax.to($window, scrollTime, {
 
         TweenMax.to($window, scrollTime, {
 
             scrollTo : { y: finalScroll, autoKill:true },
 
             scrollTo : { y: finalScroll, autoKill:true },
 
                 ease: Power1.easeOut,  //For more easing functions see https://api.greensock.com/js/com/greensock/easing/package-detail.html
 
                 ease: Power1.easeOut,  //For more easing functions see https://api.greensock.com/js/com/greensock/easing/package-detail.html
 
                 autoKill: true,
 
                 autoKill: true,
−
                 overwrite: 5                          
+
                 overwrite: 5
 
             });
 
             });
−
                   
+
 
 
     });
 
     });
−
   
+
 
 
});
 
});
 
     </script>
 
     </script>

Revision as of 10:32, 20 October 2019

Volatect

Meet Volatect. A disease diagnostic device that works like magic

REVOLUTIONIZING YOUR TRAVEL EXPERIENCE

Meet Volatect. A disease diagnostic device that works like magic. 

pre order

REVOLUTIONIZING YOUR TRAVEL EXPERIENCE

State of the art Engineering and Biology

Crispr

CRISPR (Clustered Regularly Interspaced Short Palindromic Repeats) is a genome-editing technology derived from the bacterial defense system strategy to cut the DNA of viruses and other invading bodies. The method we are utilizing, DETECTR, involves the use of CRISPR-Cas12a to accurately detect a DNA sequence and cut a fluorescent probe to release light upon detection.

Microfluidics

Microfluidics unites the reliability of lab tests with the integrated efficiency of a printed circuit board. It tackles the challenges of controlling fluid flow in micromillimeters sized channel geometries and facilitating complex on-chip biological protocols both spatially and temporally. In accordance with the international trends of integrating technologies to ensure reliable use, scalability and user availability, Volatect's chip is the result of improving multiple iterations on iGEM's diagnostics track over the years and a pursuit of high standards both in signal quality and chemical contamination prevention.

WEB API

An API (Application Programming Interface) simply put is a way for applications to communicate with each other. The Volatect API is intended to be used by medical researchers. We believe that the data that comes out of air travel disease reports from our device could help immensely in the analysis and prediction of outbreaks around the world as we provide disease diagnosis in relation to the nationality and the flight path of the passengers.

State-of-the-art Biology and Engineering

CRISPR

CRISPR technology is a simple yet powerful tool for editing genomes. It allows researchers to easily alter DNA sequences and modify gene function. Its many potential applications include correcting genetic defects, treating and preventing the spread of diseases and improving crops. However, its promise also raises ethical concerns.In popular usage, "CRISPR" (pronounced "crisper") is shorthand for "CRISPR-Cas9." CRISPRs are specialized stretches of DNA. The protein Cas9 (or "CRISPR-associated") is an enzyme that acts like a pair of molecular scissors, capable of cutting strands of DNA.

Microfluidics

Microfluidics unites the reliability of lab tests with the integrated efficiency of a printed circuit board. It tackles the challenges of controlling fluid flow in micromillimeters sized channel geometries and facilitating complex on-chip biological protocols both spatially and temporally. In accordance with the international trends of integrating technologies to ensure reliable use, scalability and user availability, Volatect's chip is the result of improving multiple iterations on iGEM's diagnostics track over the years and a pursuit of high standards both in signal quality and chemical contamination prevention.

Volatect API

We built a WEB API that allows secure access to the data we collect using our device. Medical researchers can now use the data we collect from passengers in airports to predict and report disease outbreaks before they happen. 

We  new friends!