Difference between revisions of "Team:NYU Abu Dhabi/"
| (42 intermediate revisions by 3 users not shown) | |||
| Line 22: | 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"> --> | ||
| − | + | <link rel="prefetch" href="https://2019.igem.org/wiki/images/thumb/0/0a/T--NYU_Abu_Dhabi--prender1.png/1600px-T--NYU_Abu_Dhabi--prender1.png"> | |
| + | <script> | ||
| + | let getName = () => { | ||
| + | const name = document.getElementById('user_item').innerText; | ||
| + | return name.charAt(0).toUpperCase() + name.slice(1); | ||
| + | } | ||
| + | let setIt = () => { | ||
| + | if(((getName()!="Login")||(getName()==""))){ | ||
| + | if((getName().length<= 15)) { | ||
| + | document.getElementById('nameHolder').innerHTML = "Hey " + getName() + "!"; | ||
| + | clearInterval(intervalAdder); | ||
| + | } | ||
| + | } | ||
| + | } | ||
| + | intervalAdder = setInterval(setIt, 300); | ||
| + | $(window).load(function(){ | ||
| + | $('.loader').fadeOut(); | ||
| + | }); | ||
| + | </script> | ||
</head> | </head> | ||
<body id="page-top"> | <body id="page-top"> | ||
| − | <!-- Start: *DEPENDANCIES AND PRELOADING --><script | + | <!-- Start: *DEPENDANCIES AND PRELOADING --> |
| + | <script | ||
src="https://2019.igem.org/Team:NYU_Abu_Dhabi/jquery?action=raw&ctype=text/javascript"></script> | src="https://2019.igem.org/Team:NYU_Abu_Dhabi/jquery?action=raw&ctype=text/javascript"></script> | ||
<script> | <script> | ||
| Line 48: | Line 67: | ||
<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> | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
<!-- End: *DEPENDANCIES AND PRELOADING --> | <!-- End: *DEPENDANCIES AND PRELOADING --> | ||
| − | <nav class="navbar navbar-light navbar-expand-lg fixed-top" id="mainNav"> | + | <nav class="navbar navbar-light navbar-expand-lg fixed-top" style="padding:20px 0px;" id="mainNav"> |
<!-- 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 | + | <div class="container"><img src="https://2019.igem.org/wiki/images/f/f3/T--NYU_Abu_Dhabi--logoWhite.png" class="img-fluid" style="max-width: 30px; |
| + | width:100%;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;"> | ||
<ul class="nav navbar-nav ml-auto"> | <ul class="nav navbar-nav ml-auto"> | ||
| + | <style> | ||
| + | a:visited { | ||
| + | color:black; | ||
| + | } | ||
| + | </style> | ||
| − | + | <li class="nav-item dropdown" role="presentation"><a class="dropdown-toggle nav-link" data-toggle="dropdown" aria-expanded="false" id="navbarDropdown" href="#" style="height: 100%;" role="button" aria-haspopup="true">Description </a> | |
| − | <li class="nav-item dropdown" role="presentation"><a class="dropdown-toggle nav-link" data-toggle="dropdown" aria-expanded="false" id="navbarDropdown" href="# | + | |
<div class="dropdown-menu js-scroll-trigger" role="menu" | <div class="dropdown-menu js-scroll-trigger" role="menu" | ||
aria-labelledby="navbarDropdown"> | aria-labelledby="navbarDropdown"> | ||
| − | <a class="dropdown-item" role="presentation" href=" | + | <a class="dropdown-item" role="presentation" href="https://2019.igem.org/Team:NYU_Abu_Dhabi/Description">Description</a> |
<a class="dropdown-item" role="presentation" href="https://2019.igem.org/Team:NYU_Abu_Dhabi/Software">Software</a><a class="dropdown-item" role="presentation" href="https://2019.igem.org/Team:NYU_Abu_Dhabi/Hardware">Hardware</a> | <a class="dropdown-item" role="presentation" href="https://2019.igem.org/Team:NYU_Abu_Dhabi/Software">Software</a><a class="dropdown-item" role="presentation" href="https://2019.igem.org/Team:NYU_Abu_Dhabi/Hardware">Hardware</a> | ||
<a class="dropdown-item" role="presentation" href="https://2019.igem.org/Team:NYU_Abu_Dhabi/Parts">Parts</a> | <a class="dropdown-item" role="presentation" href="https://2019.igem.org/Team:NYU_Abu_Dhabi/Parts">Parts</a> | ||
| + | <a class="dropdown-item" role="presentation" href="https://2019.igem.org/Team:NYU_Abu_Dhabi/Demonstrate">Demonstrate</a> | ||
| + | |||
</div> | </div> | ||
</li> | </li> | ||
| Line 84: | Line 104: | ||
<li class="nav-item" role="presentation"><a class="nav-link" href="https://2019.igem.org/Team:NYU_Abu_Dhabi/Awards">Awards</a></li> | <li class="nav-item" role="presentation"><a class="nav-link" href="https://2019.igem.org/Team:NYU_Abu_Dhabi/Awards">Awards</a></li> | ||
| − | <li class="nav-item dropdown" role="presentation"><a class="dropdown-toggle nav-link" data-toggle="dropdown" aria-expanded="false" href="# | + | <li class="nav-item dropdown" role="presentation"><a class="dropdown-toggle nav-link" data-toggle="dropdown" aria-expanded="false" href="#" style="height: 100%;" role="presentation">Process </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">Experiments</a> | <a class="dropdown-item" role="presentation" href="https://2019.igem.org/Team:NYU_Abu_Dhabi/Experiments">Experiments</a> | ||
| Line 90: | Line 110: | ||
<a class="dropdown-item" role="presentation" href="https://2019.igem.org/Team:NYU_Abu_Dhabi/Results">Results </a> | <a class="dropdown-item" role="presentation" href="https://2019.igem.org/Team:NYU_Abu_Dhabi/Results">Results </a> | ||
<a class="dropdown-item" role="presentation" href="https://2019.igem.org/Team:NYU_Abu_Dhabi/Design">Design</a> | <a class="dropdown-item" role="presentation" href="https://2019.igem.org/Team:NYU_Abu_Dhabi/Design">Design</a> | ||
| + | |||
<a | <a | ||
class="dropdown-item" role="presentation" href="https://2019.igem.org/Team:NYU_Abu_Dhabi/Safety">Safety</a> | class="dropdown-item" role="presentation" href="https://2019.igem.org/Team:NYU_Abu_Dhabi/Safety">Safety</a> | ||
| Line 96: | Line 117: | ||
| − | <li class="nav-item dropdown" role="presentation"><a class="dropdown-toggle nav-link" data-toggle="dropdown" aria-expanded="false" href="# | + | <li class="nav-item dropdown" role="presentation"><a class="dropdown-toggle nav-link" data-toggle="dropdown" aria-expanded="false" href="#" style="height: 100%;" role="presentation">Engagement </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/ | + | <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=" | + | <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=" | + | <a class="dropdown-item" role="presentation" |
| − | + | href="https://2019.igem.org/Team:NYU_Abu_Dhabi/Public_Engagement">Public Engagement</a> | |
| + | <a class="dropdown-item" role="presentation" href="https://2019.igem.org/Team:NYU_Abu_Dhabi/Attributions">Attributions</a> | ||
</div> | </div> | ||
</li> | </li> | ||
| + | <li class="nav-item" role="presentation"><a class="nav-link" href="https://2019.igem.org/Team:NYU_Abu_Dhabi/Team">Team</a></li> | ||
| + | <li class="nav-item" role="presentation"><a class="nav-link" href="https://2019.igem.org/Team:NYU_Abu_Dhabi/About">About</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" 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> | ||
<div class="dropdown-menu" role="menu"><a class="dropdown-item" role="presentation" href="human-practices.html">Human Practices</a> | <div class="dropdown-menu" role="menu"><a class="dropdown-item" role="presentation" href="human-practices.html">Human Practices</a> | ||
| − | + | <a class="dropdown-item" role="presentation" | |
href="public-engagement.html">Public Engagement</a></div> | href="public-engagement.html">Public Engagement</a></div> | ||
</li> | </li> | ||
| − | + | ||
| − | + | ||
</ul> | </ul> | ||
</div> | </div> | ||
| Line 138: | Line 148: | ||
<div class="row"> | <div class="row"> | ||
<div class="col-md-12"> | <div class="col-md-12"> | ||
| − | <div id="fadeHeaderOut"></div><h1 id="meetVolatectHeader" class="text-center" style="padding-top:20%;font-size: 9vh;color: rgb(255,255,255);font-family: Catamaran !important; font-weight: 200 !important;">Meet Volatect. | + | <div id="fadeHeaderOut"></div><h1 id="meetVolatectHeader" class="text-center" style="padding-top:20%;font-size: 9vh;color: rgb(255,255,255);font-family: Catamaran !important; font-weight: 200 !important;"><span id="nameHolder"></span> Meet Volatect. Flying safe starts by flying healthy.</h1><div id="scene"></div></div> |
</div> | </div> | ||
<div class="row"> | <div class="row"> | ||
| Line 153: | Line 163: | ||
<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 172: | Line 182: | ||
$(this).hover(function(){ | $(this).hover(function(){ | ||
isHovered=true; | isHovered=true; | ||
| − | + | ||
}, function() { | }, function() { | ||
isHovered=false; | isHovered=false; | ||
| Line 182: | Line 192: | ||
}); | }); | ||
*/ | */ | ||
| − | + | ||
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 199: | Line 209: | ||
</div> | </div> | ||
</div> | </div> | ||
| − | <!-- Start: HEADER_ANIMATIONS --><div | + | <!-- Start: HEADER_ANIMATIONS --><div style="position:fixed;left: 0; |
| − | right: 0;" id="productImage"><div class="text-center"><img id="productImageActual" src="https://2019.igem.org/wiki/images/ | + | right: 0;" id="productImage"> |
| + | |||
| + | <div class="text-center"> | ||
| + | <img src="https://2019.igem.org/wiki/images/a/ab/T--NYU_Abu_Dhabi--loaderyo.gif" class="loader img-fluid" /><br/><img id="productImageActual" src="https://2019.igem.org/wiki/images/1/16/T--NYU_Abu_Dhabi--pn1.png" style="max-width:400px;"><div id="pinTheProduct"></div></div></div> | ||
<script> | <script> | ||
| Line 207: | Line 220: | ||
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 | ||
| − | var tweenMoveProduct = TweenMax.to("#productImage", 1000, {top:" | + | var tweenMoveProduct = TweenMax.to("#productImage", 1000, {top:"25%"}); |
var tweenFadeOut = TweenMax.to("#productImage", 1000, {opacity:0}); | var tweenFadeOut = TweenMax.to("#productImage", 1000, {opacity:0}); | ||
var tweenRotate = TweenMax.to("#productImageActual",0,{rotation:0}); | var tweenRotate = TweenMax.to("#productImageActual",0,{rotation:0}); | ||
var images = [ | var images = [ | ||
| − | "https://2019.igem.org/wiki/images/ | + | "https://2019.igem.org/wiki/images/1/16/T--NYU_Abu_Dhabi--pn1.png", |
| − | "https://2019.igem.org/wiki/images/ | + | "https://2019.igem.org/wiki/images/3/35/T--NYU_Abu_Dhabi--pn2.png", |
| − | "https://2019.igem.org/wiki/images/ | + | "https://2019.igem.org/wiki/images/e/ee/T--NYU_Abu_Dhabi--pn3.png", |
| − | "https://2019.igem.org/wiki/images/ | + | "https://2019.igem.org/wiki/images/0/06/T--NYU_Abu_Dhabi--pn4.png", |
| − | "https://2019.igem.org/wiki/images/ | + | "https://2019.igem.org/wiki/images/e/e2/T--NYU_Abu_Dhabi--pn5.png", |
| − | "https://2019.igem.org/wiki/images/2/ | + | "https://2019.igem.org/wiki/images/e/e8/T--NYU_Abu_Dhabi--pn6.png", |
| − | "https://2019.igem.org/wiki/images/2/2c/T--NYU_Abu_Dhabi-- | + | "https://2019.igem.org/wiki/images/3/32/T--NYU_Abu_Dhabi--pn8.png", |
| − | + | "https://2019.igem.org/wiki/images/3/32/T--NYU_Abu_Dhabi--pn9.png", | |
| + | "https://2019.igem.org/wiki/images/e/ea/T--NYU_Abu_Dhabi--pn10.png", | ||
| + | "https://2019.igem.org/wiki/images/1/13/T--NYU_Abu_Dhabi--pn11.png", | ||
| + | "https://2019.igem.org/wiki/images/2/2e/T--NYU_Abu_Dhabi--pn12.png", | ||
| + | "https://2019.igem.org/wiki/images/f/f9/T--NYU_Abu_Dhabi--pn13.png", | ||
| + | "https://2019.igem.org/wiki/images/2/25/T--NYU_Abu_Dhabi--pn14.png", | ||
| + | "https://2019.igem.org/wiki/images/9/91/T--NYU_Abu_Dhabi--pn15.png", | ||
| + | "https://2019.igem.org/wiki/images/6/61/T--NYU_Abu_Dhabi--pn16.png", | ||
| + | "https://2019.igem.org/wiki/images/a/a9/T--NYU_Abu_Dhabi--pn17.png", | ||
| + | "https://2019.igem.org/wiki/images/4/42/T--NYU_Abu_Dhabi--pn18.png", | ||
| + | "https://2019.igem.org/wiki/images/8/87/T--NYU_Abu_Dhabi--pn19.png", | ||
| + | "https://2019.igem.org/wiki/images/3/34/T--NYU_Abu_Dhabi--pn20.png", | ||
| + | "https://2019.igem.org/wiki/images/1/1f/T--NYU_Abu_Dhabi--pn21.png", | ||
| + | "https://2019.igem.org/wiki/images/b/bd/T--NYU_Abu_Dhabi--pn22.png", | ||
| + | "https://2019.igem.org/wiki/images/6/66/T--NYU_Abu_Dhabi--pn23.png", | ||
| + | "https://2019.igem.org/wiki/images/b/bc/T--NYU_Abu_Dhabi--pn24.png", | ||
| + | "https://2019.igem.org/wiki/images/0/0e/T--NYU_Abu_Dhabi--p25.png", | ||
| + | "https://2019.igem.org/wiki/images/4/4b/T--NYU_Abu_Dhabi--p26.png", | ||
| + | "https://2019.igem.org/wiki/images/2/2c/T--NYU_Abu_Dhabi--p28.png", | ||
| + | "https://2019.igem.org/wiki/images/8/8e/T--NYU_Abu_Dhabi--p29.png" | ||
| + | |||
| + | |||
| + | |||
| + | |||
]; | ]; | ||
| + | |||
| + | arrayLength = images.length; | ||
| + | for (i = 0; i < arrayLength; i++) { | ||
| + | // <link rel="prefetch" href="https://2019.igem.org/wiki/images/thumb/0/0a/T--NYU_Abu_Dhabi--prender1.png/1600px-T--NYU_Abu_Dhabi--prender1.png"> | ||
| + | let code ="<link rel='prefetch' href='" + images[i] + "'>"; | ||
| + | $('head').append(code); | ||
| + | } | ||
// TweenMax can tween any property of any object. We use this object to cycle through the array | // TweenMax can tween any property of any object. We use this object to cycle through the array | ||
| Line 232: | Line 275: | ||
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 247: | Line 290: | ||
); | ); | ||
// build scene | // build scene | ||
| − | var timelineProductAnimation = new TimelineMax().add(tweenHeaderFade).add(tweenRotate).add(tweenMoveProduct).add(tweenBlast).add(tweenFadeOut).add(tweenRemoveDisplay); | + | var timelineProductAnimation = new TimelineMax().add(tweenHeaderFade).add(tweenRotate).add(tweenMoveProduct).add(tweenBlast,"f").add(tweenFadeOut).add(tweenRemoveDisplay); |
var scene2 = new ScrollMagic.Scene({ duration:"150%",offset:"0"}) | var scene2 = new ScrollMagic.Scene({ duration:"150%",offset:"0"}) | ||
.setPin("#productImage") | .setPin("#productImage") | ||
| Line 253: | Line 296: | ||
//.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 266: | Line 309: | ||
//.addIndicators({name: "targetVideo"}) // add indicators (requires plugin) | //.addIndicators({name: "targetVideo"}) // add indicators (requires plugin) | ||
.addTo(controller2); | .addTo(controller2); | ||
| − | + | ||
}); | }); | ||
| − | + | ||
| − | // | + | // |
</script> | </script> | ||
| Line 324: | Line 367: | ||
color: #fff; | color: #fff; | ||
cursor: pointer; | cursor: pointer; | ||
| − | + | ||
} | } | ||
| Line 333: | Line 376: | ||
</style> | </style> | ||
<video autoplay muted loop id="myVideo"> | <video autoplay muted loop id="myVideo"> | ||
| − | < | + | <!-- 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 344: | Line 388: | ||
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 354: | Line 398: | ||
</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 | + | <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 --> | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | + | <h1 class="text-center d-block d-lg-none"> REVOLUTIONIZING YOUR TRAVEL EXPERIENCE</h1> | |
| − | + | <video autoplay muted loop style="height:100%;width:100%;" class="d-block d-lg-none"> | |
| − | + | <source src="https://2019.igem.org/wiki/images/d/d2/T--NYU_Abu_Dhabi--airport3_.mp4" type="video/mp4"> | |
| − | + | </video> | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | <div class=" | + | <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;"> |
| − | + | <!-- Start: TargetGroupVideoMobile --> | |
| − | + | <div class="d-block d-lg-none" style="position:relative;background-color: #000000;background-image: url('assets/img/bg-pattern.png');height: 100%;"> | |
| − | + | ||
| − | + | ||
| − | + | </div> | |
| − | + | ||
| − | + | ||
<!-- End: TargetGroupVideoMobile --> | <!-- End: TargetGroupVideoMobile --> | ||
</div> | </div> | ||
| + | |||
<!-- 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 463: | Line 472: | ||
<div></div> | <div></div> | ||
<!-- Start: Features Desktop --> | <!-- Start: Features Desktop --> | ||
| − | <div id="engineeringbio" class="d-none d-lg-block" style="background-color: | + | <div id="engineeringbio" class="d-none d-lg-block" style="background-color: black;background-image: url("https://2019.igem.org/wiki/images/f/f3/T--NYU_Abu_Dhabi--bg-pattern.png");height: 500vh;width: 100%;"><div id="middleMarker"></div> |
<div class="row " style="position:fixed;top:25%;width:100%;opacity:0;" id="featuresHeaderText"> | <div class="row " style="position:fixed;top:25%;width:100%;opacity:0;" id="featuresHeaderText"> | ||
<div style="width:100%;" class="col w-100 text-center"> | <div style="width:100%;" class="col w-100 text-center"> | ||
| − | <h1 style="color:white;font-size: 9vh;">State of the art Engineering and Biology</h1> | + | <h1 style="color:white;font-size: 9vh;">State of the art <span style="color:#fdcc52">Engineering</span> and <span style="color:#fdcc52;">Biology</span></h1> |
</div> | </div> | ||
</div> | </div> | ||
| Line 513: | Line 522: | ||
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 542: | Line 551: | ||
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 553: | Line 562: | ||
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 571: | Line 580: | ||
</style> | </style> | ||
| − | + | ||
</div> | </div> | ||
<div id="featureInfoHolder" class="col-sm-5 my-auto"> | <div id="featureInfoHolder" class="col-sm-5 my-auto"> | ||
<h1 class="headingTextBioEngineering" style="font-size: 5vw;">Crispr</h1> | <h1 class="headingTextBioEngineering" style="font-size: 5vw;">Crispr</h1> | ||
<p class="gradientText" style="font-size: 1.5vw;">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. | <p class="gradientText" style="font-size: 1.5vw;">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. | ||
| − | </p><button class="btn btn-primary" type="button">Learn more</button></div> | + | </p><button class="btn btn-primary engineeringbiobutton" type="button">Learn more</button></div> |
</div> | </div> | ||
| Line 593: | Line 602: | ||
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 769: | Line 778: | ||
<rect fill="url(#New_Pattern)" width="1560" height="400"/> | <rect fill="url(#New_Pattern)" width="1560" height="400"/> | ||
</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;font-family:avenir">Microfluidics</h1> |
| − | <p class="gradientText" style="font-size: 1.5vw;"> | + | <p class="gradientText" style="font-size: 1.5vw;"> |
| − | + | 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 engineeringbiobutton" type="button">Learn more</button></div> | ||
</div> | </div> | ||
| Line 777: | Line 787: | ||
<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 786: | Line 796: | ||
} | } | ||
circle { | circle { | ||
| − | fill: | + | fill: #fdcc52; |
} | } | ||
/* circle, */ | /* circle, */ | ||
.banaan { | .banaan { | ||
fill: #00FF00; | fill: #00FF00; | ||
| − | + | border-radius: 25px; | |
| − | + | animation: blinker 1s linear infinite; | |
} | } | ||
| + | |||
.banaan2 { | .banaan2 { | ||
fill: red; | fill: red; | ||
| − | + | border-radius: 25px; | |
| − | + | animation: blinker 1s linear infinite; | |
} | } | ||
| + | |||
@keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}} | @keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}} | ||
| Line 804: | Line 816: | ||
@keyframes crescendo { | @keyframes crescendo { | ||
0% {transform: scale(.8);} | 0% {transform: scale(.8);} | ||
| − | 100% {transform: scale( | + | 100% {transform: scale(500);} |
| + | } | ||
| + | @keyframes blinker { | ||
| + | 50% { | ||
| + | opacity: 0; | ||
| + | } | ||
} | } | ||
</style> | </style> | ||
| Line 3,431: | Line 3,448: | ||
<script> | <script> | ||
| − | $(function () { | + | $(function () { |
setRandomClass(); | setRandomClass(); | ||
setInterval(function () { | setInterval(function () { | ||
| Line 3,442: | Line 3,459: | ||
var number = items.length; | var number = items.length; | ||
| − | + | ||
//alert("yolo"); | //alert("yolo"); | ||
items.removeClass("banaan"); | items.removeClass("banaan"); | ||
items.removeClass("banaan2"); | items.removeClass("banaan2"); | ||
| + | items.attr("r","1.9"); | ||
for(x=0;x<Math.random() * 25;x++){ | for(x=0;x<Math.random() * 25;x++){ | ||
var random = Math.floor((Math.random() * number)); | var random = Math.floor((Math.random() * number)); | ||
var random2 = Math.floor((Math.random() * 10)); | var random2 = Math.floor((Math.random() * 10)); | ||
if(random2<7) { | if(random2<7) { | ||
| + | items.eq(random).attr("r","4"); | ||
items.eq(random).addClass("banaan"); | items.eq(random).addClass("banaan"); | ||
} else { | } else { | ||
| + | items.eq(random).attr("r","4"); | ||
items.eq(random).addClass("banaan2"); | items.eq(random).addClass("banaan2"); | ||
} | } | ||
| − | + | ||
} | } | ||
| Line 3,461: | Line 3,481: | ||
</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;"> | + | <p class="gradientText" style="font-size: 1.5vw;"> |
| − | + | 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 engineeringbiobutton" type="button">Learn more</button></div> | ||
</div> | </div> | ||
| − | + | ||
<!-- Start: Fade2Black --> | <!-- Start: Fade2Black --> | ||
<style> | <style> | ||
@import "compass/css3"; | @import "compass/css3"; | ||
.headingTextBioEngineering { | .headingTextBioEngineering { | ||
| − | color: | + | color:#fdcc52; |
} | } | ||
.gradientText { | .gradientText { | ||
font-size: 2vw; | font-size: 2vw; | ||
background: #8A2387; | background: #8A2387; | ||
| − | background: -webkit-linear-gradient(to right, # | + | background: -webkit-linear-gradient(to right, #C8C8C8 , #FFFFFF, #C8C8C8 ); |
| − | background: linear-gradient(to right, # | + | background: linear-gradient(to right,#C8C8C8 , #FFFFFF, #C8C8C8); |
| − | + | ||
-webkit-background-clip: text; | -webkit-background-clip: text; | ||
| − | + | ||
color: transparent; | color: transparent; | ||
} | } | ||
#engineeringbio { | #engineeringbio { | ||
opacity:0; | opacity:0; | ||
| + | } | ||
| + | .engineeringbiobutton { | ||
| + | background:black; | ||
| + | border-color:#fdcc52; | ||
| + | display:none; | ||
} | } | ||
</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}); | ||
| + | var fadeoutvideo = TweenMax.to("#myVideo", 1, {opacity:"0"}); | ||
var tweenStepsFadeIn = TweenMax.to("#volatectSteps", 1, {backgroundColor:"black"}); | var tweenStepsFadeIn = TweenMax.to("#volatectSteps", 1, {backgroundColor:"black"}); | ||
var tweenRotate = TweenMax.to("#canvas-container", 1, {scale:"0.9",rotation:0}); | var tweenRotate = TweenMax.to("#canvas-container", 1, {scale:"0.9",rotation:0}); | ||
var tweenMicro =TweenMax.to("#microfluidics", 1, {scale:"1.5"}); //volatectSteps | var tweenMicro =TweenMax.to("#microfluidics", 1, {scale:"1.5"}); //volatectSteps | ||
// var tween2 = TweenMax.to("#productImage", 1000, {rotation:"360"}); | // var tween2 = TweenMax.to("#productImage", 1000, {rotation:"360"}); | ||
| − | var timelineProductAnimation2 = new TimelineMax().add( | + | var timelineProductAnimation2 = new TimelineMax().add(fadeoutvideo,"f").add(tweenRotate,"f").add(tweenMicro,"f"); |
var sceneBack = new ScrollMagic.Scene({ duration:"200px",offset:"0"}) | var sceneBack = new ScrollMagic.Scene({ duration:"200px",offset:"0"}) | ||
.triggerElement("#engineeringbio") | .triggerElement("#engineeringbio") | ||
| Line 3,501: | Line 3,528: | ||
.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() | ||
| − | .add(TweenMax.to("#featuresHeaderText", | + | .add(TweenMax.to("#featuresHeaderText", 20, {opacity:1,top:"35%"})) |
| − | .add(TweenMax.to("#featuresHeaderText", | + | .add(TweenMax.to("#featuresHeaderText", 20, {opacity:0,top:"35%"})) |
.add(TweenMax.to("#featuresHeaderText", 1, {display:"none"})) | .add(TweenMax.to("#featuresHeaderText", 1, {display:"none"})) | ||
.add(TweenMax.to("#middleFeatureContainer", 50, {opacity:1,top:"7%"}),"q") | .add(TweenMax.to("#middleFeatureContainer", 50, {opacity:1,top:"7%"}),"q") | ||
| Line 3,528: | Line 3,555: | ||
.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:" | + | var sceneBack2 = new ScrollMagic.Scene({ duration:"500%",offset:0}) |
.setTween(timelineFeatures) | .setTween(timelineFeatures) | ||
.triggerElement("#engineeringbio") | .triggerElement("#engineeringbio") | ||
| Line 3,555: | Line 3,582: | ||
.addTo(controller4); | .addTo(controller4); | ||
}); | }); | ||
| − | + | ||
| − | + | ||
</script> | </script> | ||
| Line 3,563: | Line 3,590: | ||
<!-- 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> | ||
| − | + | ||
<hr /> | <hr /> | ||
</div> | </div> | ||
<div class="row"> | <div class="row"> | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
<div class="col-lg-8 my-auto"> | <div class="col-lg-8 my-auto"> | ||
<div class="container-fluid"> | <div class="container-fluid"> | ||
<div class="row"> | <div class="row"> | ||
<div class="col-lg-6"> | <div class="col-lg-6"> | ||
| − | <div class="feature-item" style=""><img src=" | + | <div class="feature-item" style=""><img src="https://2019.igem.org/wiki/images/e/e9/T--NYU_Abu_Dhabi--crispranimation.gif" class="img-fluid"/></i> |
<h3>CRISPR</h3> | <h3>CRISPR</h3> | ||
| − | <p class="text-muted"> | + | <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></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="">< | + | <div class="feature-item" style=""> |
| − | <h3> | + | <img src="https://2019.igem.org/wiki/images/a/a7/T--NYU_Abu_Dhabi--microfluidicsmobile.gif" class="img-fluid" /> |
| − | <p class="text-muted"> | + | </i> |
| + | <h3>Microfluidics</h3> | ||
| + | <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></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="">< | + | <div class="feature-item" style=""><img src="https://2019.igem.org/wiki/images/1/10/T--NYU_Abu_Dhabi--webapimob.gif" class="img-fluid" /></i> |
| − | <h3> | + | <h3>Volatect API</h3> |
| − | <p class="text-muted">We | + | <p class="text-muted"> |
| + | 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. | ||
| + | </p></div> | ||
<div class="Push-20"></div> | <div class="Push-20"></div> | ||
</div> | </div> | ||
| Line 3,611: | Line 3,639: | ||
<!-- End: Features Mobile --> | <!-- End: Features Mobile --> | ||
<!-- Start: WEB API MOBILE --> | <!-- Start: WEB API MOBILE --> | ||
| − | + | <div style="display:none;"></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,675: | Line 3,645: | ||
<h2><span>We </span><i class="fa fa-heart" id="heart_icon"></i><span> new friends!</span></h2> | <h2><span>We </span><i class="fa fa-heart" id="heart_icon"></i><span> new friends!</span></h2> | ||
<ul class="list-inline list-social"> | <ul class="list-inline list-social"> | ||
| − | <li class="list-inline-item social- | + | <li class="list-inline-item social-youtube"><a href="https://www.youtube.com/channel/UCQnySAKw67slX8T6r9bAcYw"><img src="https://2019.igem.org/wiki/images/9/91/T--NYU_Abu_Dhabi--_ytcircle.svg" width="80" height="80" ></a></li> |
| − | <li class="list-inline-item social- | + | <li class="list-inline-item social-instagram"><a href="https://www.instagram.com/igem_nyuad/"><img src="https://2019.igem.org/wiki/images/3/3a/T--NYU_Abu_Dhabi--igicon.png" width="80" height="80"></a></li> |
| − | <li class="list-inline-item social- | + | <li class="list-inline-item social-facebook"><a href="https://www.facebook.com/iGEMNYUAD/"><img src="https://2019.igem.org/wiki/images/thumb/2/2e/T--NYU_Abu_Dhabi--fblogo.png/240px-T--NYU_Abu_Dhabi--fblogo.png" width="80" height="80"></a></li> |
</ul> | </ul> | ||
</div> | </div> | ||
| Line 3,685: | Line 3,655: | ||
<!-- 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,694: | Line 3,664: | ||
.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,700: | Line 3,670: | ||
.triggerElement("#socialContainer") | .triggerElement("#socialContainer") | ||
//.setPin("#middleFeatureContainer") | //.setPin("#middleFeatureContainer") | ||
| − | //.addIndicators({name: "heart"}) | + | //.addIndicators({name: "heart"}) |
.addTo(controller5) | .addTo(controller5) | ||
.on("start", ()=> { | .on("start", ()=> { | ||
| Line 3,708: | Line 3,678: | ||
}); | }); | ||
}); | }); | ||
| − | + | ||
| − | + | ||
</script> | </script> | ||
<!-- End: HeartAnimation --> | <!-- End: HeartAnimation --> | ||
| Line 3,720: | Line 3,690: | ||
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,729: | Line 3,699: | ||
-webkit-filter: grayscale(0); | -webkit-filter: grayscale(0); | ||
-webkit-transform: scale(1.01); | -webkit-transform: scale(1.01); | ||
| − | + | ||
| − | + | ||
} | } | ||
.mobile-space { | .mobile-space { | ||
| Line 3,750: | Line 3,720: | ||
<div class="col-md-3 col-xl-2 d-xl-flex justify-content-xl-center align-items-xl-center"><img class="img-fluid sponsor-logo" src="https://2019.igem.org/wiki/images/thumb/a/a5/T--NYU_Abu_Dhabi--NYU-logo.png/800px-T--NYU_Abu_Dhabi--NYU-logo.png"></div><div class="col-xl-2 d-lg-none mobile-space" ></div> | <div class="col-md-3 col-xl-2 d-xl-flex justify-content-xl-center align-items-xl-center"><img class="img-fluid sponsor-logo" src="https://2019.igem.org/wiki/images/thumb/a/a5/T--NYU_Abu_Dhabi--NYU-logo.png/800px-T--NYU_Abu_Dhabi--NYU-logo.png"></div><div class="col-xl-2 d-lg-none mobile-space" ></div> | ||
| + | |||
| + | <div class="col-md-3 col-xl-2 d-xl-flex justify-content-xl-center align-items-xl-center"><img class="img-fluid sponsor-logo" src="https://2019.igem.org/wiki/images/0/06/T--NYU_Abu_Dhabi--3mlogo.png"></div><div class="col-xl-2 d-lg-none mobile-space" ></div> | ||
| + | |||
| + | <div class="col-md-3 col-xl-2 d-xl-flex justify-content-xl-center align-items-xl-center"><img class="img-fluid sponsor-logo" src="https://2019.igem.org/wiki/images/c/c6/T--NYU_Abu_Dhabi--ansyslogo.png"></div><div class="col-xl-2 d-lg-none mobile-space" ></div> | ||
| + | |||
| + | <div class="col-md-3 col-xl-2 d-xl-flex justify-content-xl-center align-items-xl-center"><img class="img-fluid sponsor-logo" src="https://2019.igem.org/wiki/images/0/0a/T--NYU_Abu_Dhabi--jklogo.png"></div><div class="col-xl-2 d-lg-none mobile-space" ></div> | ||
| + | |||
| + | <div class="col-md-3 col-xl-2 d-xl-flex justify-content-xl-center align-items-xl-center"><img class="img-fluid sponsor-logo" src="https://2019.igem.org/wiki/images/e/ee/T--NYU_Abu_Dhabi--snapgenelogo.png"></div><div class="col-xl-2 d-lg-none mobile-space" ></div> | ||
| + | |||
| + | |||
</div> | </div> | ||
| Line 3,757: | Line 3,737: | ||
<footer style="background-color: white; color:black;" class="text-center"> | <footer style="background-color: white; color:black;" class="text-center"> | ||
<div class="container"> | <div class="container"> | ||
| − | <p class="text-center">© | + | <p class="text-center">© Volatect 2019. All Rights Reserved.</p> |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
</div> | </div> | ||
</footer> | </footer> | ||
| Line 3,783: | Line 3,758: | ||
</div> | </div> | ||
<!-- 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> | ||
<!-- End: SmoothWheel Integration --> | <!-- End: SmoothWheel Integration --> | ||
Latest revision as of 03:18, 22 October 2019
Meet Volatect. Flying safe starts by flying healthy.
REVOLUTIONIZING YOUR TRAVEL EXPERIENCE
Meet Volatect. A disease diagnostic device that works like magic.
pre orderREVOLUTIONIZING 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!