|
|
| Line 1: |
Line 1: |
| − | <html lang="en">
| |
| − | <head>
| |
| − | <style>
| |
| − | .sidebaritem {
| |
| − | color:#9BD7D1 !important;
| |
| − | font-family: "Lexend Deca", sans-serif;
| |
| − | font-size: 25px;
| |
| − | }
| |
| − | .sidebaritem:hover {
| |
| − | color: #2C7AAC !important;
| |
| − | text-decoration:none !important;
| |
| − | }
| |
| − | .sidebar {
| |
| − | list-style: none !important;
| |
| − | }
| |
| − | .nav-link {font-size: 125% !important;}
| |
| − | .dropdown-item {font-size: 120% !important;}
| |
| − | #section03 {
| |
| − | left: 48%;
| |
| − | width: 4%;
| |
| − | position: fixed;
| |
| − | text-align: center;
| |
| − | top: 85%;
| |
| − | z-index: 1;
| |
| − | cursor:pointer;
| |
| − | -webkit-animation: 9s ease 0s normal forwards 1 fadein;
| |
| − | animation: 9s ease 0s normal forwards 1 fadein;
| |
| − | }
| |
| | | | |
| − | @keyframes fadein{
| |
| − | 0% { opacity:0; z-index: -2;}
| |
| − | 56% { opacity:0;}
| |
| − | 70% {z-index: 1;}
| |
| − | 100% { opacity:1; }
| |
| − | }
| |
| − |
| |
| − | @-webkit-keyframes fadein{
| |
| − | 0% { opacity:0; z-index: -2;}
| |
| − | 56% { opacity:0;}
| |
| − | 70% {z-index: 1;}
| |
| − | 100% { opacity:1; }
| |
| − | }
| |
| − | header {
| |
| − | position: relative;
| |
| − | background-color: black;
| |
| − | width: 100%;
| |
| − | overflow: hidden;
| |
| − | }
| |
| − | .headervideo {
| |
| − | position: fixed;
| |
| − | top: 0%;
| |
| − | left: 0%;
| |
| − | width: 100%;
| |
| − | object-fit: fill;
| |
| − | margin-top: 5%!important;
| |
| − | }
| |
| − | #HPvidSC {
| |
| − | opacity: 0;
| |
| − | }
| |
| − | .sections {margin-top: 4%}
| |
| − | .maincontent {
| |
| − | padding-top: 2px;
| |
| − | z-index:1;
| |
| − | }
| |
| − |
| |
| − | @media (pointer: coarse) and (hover: none) {white
| |
| − | header {
| |
| − | background: url('https://source.unsplash.com/XT5OInaElMw/1600x900') black no-repeat center center scroll;
| |
| − | }
| |
| − | header video {
| |
| − | display: none;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | .eachSection {
| |
| − | transition: all 0.4s ease;
| |
| − | -webkit-transition: all 0.4s ease;
| |
| − | -moz-transition: all 0.4s ease;
| |
| − | -ms-transition: all 0.4s ease;
| |
| − | -o-transition: all 0.4s ease;
| |
| − | }
| |
| − | .SectionImg {
| |
| − | position: absolute;
| |
| − | left: 10%;
| |
| − | }
| |
| − | .ImgOverlay {
| |
| − | position:absolute;
| |
| − | left: 10%;
| |
| − | height: 100%;
| |
| − | width: 100%;
| |
| − | background-color: #000000;
| |
| − | opacity: 0.4;
| |
| − | z-index: 5;
| |
| − | transition: all 0.4s ease;
| |
| − | -webkit-transition: all 0.4s ease;
| |
| − | -moz-transition: all 0.4s ease;
| |
| − | -ms-transition: all 0.4s ease;
| |
| − | -o-transition: all 0.4s ease;
| |
| − | }
| |
| − | #SectionTeamA:hover #SectionTeamO {background-color: #F26627;}
| |
| − | #SectionTeamA:hover #TextTeam {color: #FFFFFF;}
| |
| − | #SectionProjectA:hover #SectionProjectO {background-color: #F26627;}
| |
| − | #SectionProjectA:hover #TextProject {color: #FFFFFF;}
| |
| − | #SectionPartsA:hover #SectionPartsO {background-color: #F26627;}
| |
| − | #SectionPartsA:hover #TextParts {color: #FFFFFF;}
| |
| − | #SectionSafetyA:hover #SectionSafetyO {background-color: #F26627;}
| |
| − | #SectionSafetyA:hover #TextSafety {color: #FFFFFF;}
| |
| − | #SectionHumanA:hover #SectionHumanO {background-color: #F26627;}
| |
| − | #SectionHumanA:hover #TextHuman {color: #FFFFFF;}
| |
| − |
| |
| − | .SectionText {
| |
| − | z-index: 6;
| |
| − | font-family: "Oswald", sans-serif !important;
| |
| − | font-size: 6vw;
| |
| − | position: absolute;
| |
| − | padding:0px;
| |
| − | color: #FFFFFF;
| |
| − | }
| |
| − | .abstractText {
| |
| − | font-family: 'Lexend Deca', sans-serif !important;
| |
| − | font-size: 16px !important;
| |
| − | }
| |
| − | .abstractBox {
| |
| − | max-width: 80%;
| |
| − | position: relative;
| |
| − | left: 10%;
| |
| − | }
| |
| − | .counter {
| |
| − | max-width: 90%;
| |
| − | position: relative;
| |
| − | right: -13%;
| |
| − | }
| |
| − | </style>
| |
| − | <script>
| |
| − | $(function () {
| |
| − | $("#section03").click(function() {
| |
| − | console.log("Clicked!");
| |
| − | $('html,body').animate({
| |
| − | scrollTop: $("#maincontent").offset().top},
| |
| − | 'slow');
| |
| − | });
| |
| − | });
| |
| − | </script>
| |
| − | <script>
| |
| − | (function ($) {
| |
| − | $(document).ready(function(){
| |
| − | // hide .bigBoyNavBar first
| |
| − | $(".bigBoyNavBar").hide();
| |
| − | // fade in .navbar
| |
| − | $(function () {
| |
| − | $(window).scroll(function () {
| |
| − | // set distance user needs to scroll before we fadeIn bigBoyNavBar
| |
| − | if ($(window).scrollTop() > 250) {
| |
| − | $('.bigBoyNavBar').fadeIn(750);
| |
| − | } //else {
| |
| − | // $('.bigBoyNavBar').fadeOut(250);
| |
| − | //}
| |
| − | });
| |
| − | setTimeout(function() {$('.bigBoyNavBar').fadeIn(750);}, 6000);
| |
| − | });
| |
| − | });
| |
| − | }(jQuery));
| |
| − | </script>
| |
| − | <script>
| |
| − | window.addEventListener("resize", sectionResize);
| |
| − | $(document).ready(function() {sectionResize()});
| |
| − | setTimeout(function() {sectionResize()}, 500);
| |
| − |
| |
| − | function sectionResize () {
| |
| − | var wWidth = window.innerWidth;
| |
| − | var sWidth = 0.8;
| |
| − | var s4Width = sWidth / 4;
| |
| − | $(".SectionImg").css("width", sWidth * wWidth);
| |
| − | $(".SectionImg").css("height", s4Width * wWidth);
| |
| − | $(".SectionImg").css("border-radius", 75 / 1368 * wWidth + "px");
| |
| − |
| |
| − | $(".ImgOverlay").css("width", sWidth * wWidth);
| |
| − | $(".ImgOverlay").css("height", s4Width * wWidth);
| |
| − | $(".ImgOverlay").css("border-radius", 75 / 1368 * wWidth + "px");
| |
| − | $(".eachSection").css("height", s4Width * wWidth);
| |
| − | $(".eachSection").css("border-radius", 75 / 1368 * wWidth + "px");
| |
| − |
| |
| − | var TextTeam = document.getElementById('TextTeam');
| |
| − | var TextTeamW = $(TextTeam).css("width");
| |
| − | $("#TextTeam").css("left", 0.5 * (wWidth - parseInt(TextTeamW,10)));
| |
| − | $("#TextTeam").css("line-height", s4Width * wWidth + "px");
| |
| − |
| |
| − | var TextProject = document.getElementById('TextProject');
| |
| − | var TextProjectW = $(TextProject).css("width");
| |
| − | $("#TextProject").css("left", 0.5 * (wWidth - parseInt(TextProjectW,10)));
| |
| − | $("#TextProject").css("line-height", s4Width * wWidth + "px");
| |
| − |
| |
| − | var TextParts = document.getElementById('TextParts');
| |
| − | var TextPartsW = $(TextParts).css("width");
| |
| − | $("#TextParts").css("left", 0.5 * (wWidth - parseInt(TextPartsW,10)));
| |
| − | $("#TextParts").css("line-height", s4Width * wWidth + "px");
| |
| − |
| |
| − | var TextSafety = document.getElementById('TextSafety');
| |
| − | var TextSafetyW = $(TextSafety).css("width");
| |
| − | $("#TextSafety").css("left", 0.5 * (wWidth - parseInt(TextSafetyW,10)));
| |
| − | $("#TextSafety").css("line-height", s4Width * wWidth + "px");
| |
| − |
| |
| − | var TextHuman = document.getElementById('TextHuman');
| |
| − | var TextHumanW = $(TextHuman).css("width");
| |
| − | $("#TextHuman").css("left", 0.5 * (wWidth - parseInt(TextHumanW,10)));
| |
| − | $("#TextHuman").css("line-height", s4Width * wWidth + "px");
| |
| − |
| |
| − | var wHeight = window.innerHeight;
| |
| − | console.log("Window height is: ",wHeight);
| |
| − | console.log("Window width is: ",wWidth);
| |
| − | if (wWidth > 2 * wHeight) {
| |
| − | $("header").css("height", "100vh");
| |
| − | $(".headervideo").css("top", "-10vw");
| |
| − | } else if (wWidth > 1.5 * wHeight) {
| |
| − | $("header").css("height", "100vh");
| |
| − | $(".headervideo").css("top", "-4.5vw");
| |
| − | } else {
| |
| − | $("header").css("height", (900/16) + "vw");
| |
| − | $(".headervideo").css("top", "-3vw");
| |
| − | }
| |
| − | }
| |
| − | setTimeout(function() {sectionResize();}, 50);
| |
| − |
| |
| − | $(document).ready(function() {counter()});
| |
| − | function counter () {
| |
| − | var now = Date.now() - 14400000;
| |
| − | var fullDaysSinceEpoch = Math.floor(now/8.64e7);
| |
| − | var secsToday = (now) - (24 * 60 * 60 * 1000 * fullDaysSinceEpoch);
| |
| − | var helToday = Math.round(((secsToday) / 1000) * 0.4);
| |
| − | if (helToday >= 1000) {
| |
| − | var helTodayThousands = Math.floor(helToday / 1000);
| |
| − | var helTodayTemp = helToday.toString();
| |
| − | var helTodayOnes = (helTodayTemp.slice(helTodayTemp.length - 3));
| |
| − | var counterText = helTodayThousands + "," + helTodayOnes;
| |
| − | } else {
| |
| − | var counterText = helToday;
| |
| − | }
| |
| − | setTimeout(function() {counter();}, 100);
| |
| − | document.getElementById("counterText").innerHTML = counterText;
| |
| − | }
| |
| − |
| |
| − | $(document).ready(function() {HPvidSC()});
| |
| − | function HPvidSC () {
| |
| − | var wWidth = window.innerWidth;
| |
| − | var wHeight = window.innerHeight;
| |
| − | if (wWidth < wHeight) {
| |
| − | $("#HPvidSC").css("opacity", "1");
| |
| − | }
| |
| − | }
| |
| − | </script>
| |
| − | </head>
| |
| − |
| |
| − | <header>
| |
| − | <section id="section03" class="demo">
| |
| − |
| |
| − | <a><img src="https://www.solodev.com/assets/anchor/arrow-down.png" class="scrolldown" onmouseover="this.src='https://static.igem.org/mediawiki/2019/c/c6/T--Lambert_GA--scrollArrowH2.png';" onmouseout="this.src='https://www.solodev.com/assets/anchor/arrow-down.png';"></a>
| |
| − | </section>
| |
| − | <video autoplay autobuffer muted playsinline class="headervideo" style="top: -74px">
| |
| − | <source src="https://static.igem.org/mediawiki/2019/7/7d/T--Lambert_GA--LabyrinthLogoAnimationBlack.mp4" type="video/mp4">
| |
| − | </video>
| |
| − | <img src="https://static.igem.org/mediawiki/2019/8/81/T--Lambert_GA--HPvidSC.png" class="headervideo" id="HPvidSC" style="top: -74px">
| |
| − |
| |
| − | </header>
| |
| − |
| |
| − | <div id = "maincontent" class="target"></div>
| |
| − | <div class="bg-primary maincontent text-white" style="bottom:0px; background-color: #111111 !important;">
| |
| − | <div class="abstractBox">
| |
| − | <h2 class="orangeHeading2">OUR PROJECT</h2>
| |
| − | <p class="abstractText bodytext">
| |
| − | Soil-transmitted helminthiasis infects 1.5 billion people globally. The prevalence and persistence of these parasitic worm infections stem from poor sanitation infrastructure and a lack of affordable diagnostic tools. LABYRINTH, a helminth detection system, implements low-cost hardware devices, biosensor toehold switches, and software analysis to diagnose helminthiasis. Using <i>Caenorhabditis elegans</i> as a model organism for infectious helminths, LABYRINTH isolates and lyses helminth eggs using a frugal filter and homogenizer. Biosensor cells detect <i>C. elegans</i> by targeting the F59G1.6 gene with an RNA toehold switch. If transcribed, the toehold switch activates GFP expression, indicating the presence of helminth eggs in the sample. The FluoroCents app quantifies fluorescence and maps this data onto a cloud-based service, enabling health organizations to efficiently allocate targeted anthelmintic medications. LABYRINTH has the potential to improve the quality of life for over a billion people worldwide by illuminating the chronic nature of helminthiasis and increasing the affordability of diagnostics.
| |
| − | </p>
| |
| − | </div>
| |
| − | <br>
| |
| − | <div style="max-width: 90%">
| |
| − | <center>
| |
| − | <p class="bodytext counter" style="font-size: 2.5vw !important"><span style="color:#F26627;" id="counterText"></span> people have contracted helminthiasis today alone.</p>
| |
| − | </center>
| |
| − | </div>
| |
| − |
| |
| − |
| |
| − |
| |
| − | <div class="sections">
| |
| − |
| |
| − | <a id="SectionTeamA" href="https://2019.igem.org/Team:Lambert_GA/Team"><div class="eachSection">
| |
| − | <img class="SectionImg" src="https://static.igem.org/mediawiki/2019/7/72/T--Lambert_GA--HPTeamPicTemp.jpeg">
| |
| − | <div class="ImgOverlay" id="SectionTeamO"></div>
| |
| − | <h1 class="SectionText" id="TextTeam">T E A M</h1>
| |
| − | </div></a><br><br>
| |
| − | <a id="SectionProjectA" href="https://2019.igem.org/Team:Lambert_GA/Description"><div class="eachSection">
| |
| − | <img class="SectionImg" src="https://static.igem.org/mediawiki/2019/8/8c/T--Lambert_GA--HPprojectPic.jpeg">
| |
| − | <div class="ImgOverlay" id="SectionProjectO"></div>
| |
| − | <h1 class="SectionText" id="TextProject">P R O J E C T</h1>
| |
| − | </div></a><br><br>
| |
| − | <a id="SectionPartsA" href="https://2019.igem.org/Team:Lambert_GA/Parts"><div class="eachSection">
| |
| − | <img class="SectionImg" src="https://static.igem.org/mediawiki/2019/1/18/T--Lambert_GA--HPpartsPic.jpeg">
| |
| − | <div class="ImgOverlay" id="SectionPartsO"></div>
| |
| − | <h1 class="SectionText" id="TextParts">P A R T S</h1>
| |
| − | </div></a><br><br>
| |
| − | <!--
| |
| − | <a id="SectionSafetyA" href="https://2019.igem.org/Team:Lambert_GA/Safety"><div class="eachSection">
| |
| − | <img class="SectionImg" src="https://static.igem.org/mediawiki/2019/5/5d/T--Lambert_GA--HPsafetyPic2.png">
| |
| − | <div class="ImgOverlay" id="SectionSafetyO"></div>
| |
| − | <h1 class="SectionText" id="TextSafety">S A F E T Y</h1>
| |
| − | </div></a><br><br>
| |
| − | -->
| |
| − | <a id="SectionHumanA" href="https://2019.igem.org/Team:Lambert_GA/Human_Practices"><div class="eachSection">
| |
| − | <img class="SectionImg" src="https://static.igem.org/mediawiki/2019/7/7e/T--Lambert_GA--HPhpPic5.jpeg">
| |
| − | <div class="ImgOverlay" id="SectionHumanO"></div>
| |
| − | <h1 class="SectionText" id="TextHuman">H U M A N<span style="opacity:0;">___</span>P R A C T I C E S</h1>
| |
| − | </div></a><br><br>
| |
| − |
| |
| − |
| |
| − | </div>
| |
| − |
| |
| − | <center>
| |
| − | <br>
| |
| − | <h2 class="orangeHeading2">Medal</h2>
| |
| − | <img src="https://static.igem.org/mediawiki/igem.org/4/4b/2018_igem_gold_medal.svg" style="width: 500px;">
| |
| − | <h4 class="orangeHeading2">Awards</h4>
| |
| − | <p style="text-align: center" class="bodytext">
| |
| − | Best Poster
| |
| − | </p>
| |
| − | <div class="orangeHeading2">Nominations</div>
| |
| − | <p style="text-align: center" class="bodytext">
| |
| − | <br>
| |
| − | Best Wiki
| |
| − | <br>
| |
| − | Best Public Education and Engagement
| |
| − | <br>
| |
| − | Best Integrated Human Practices
| |
| − | <br>
| |
| − | Best Model
| |
| − | <br>
| |
| − | Best Presentation
| |
| − | <br><br>
| |
| − | </p>
| |
| − | </center>
| |
| − |
| |
| − | <div class="footer" style="background-color:#111111">
| |
| − | <center>
| |
| − | <a href="https://www.facebook.com/groups/198318606966726/" target="_blank"><i class="fa fa-facebook" id="flogo"></i></a>
| |
| − | <a href="https://twitter.com/lamberths_igem?lang=en" target="_blank"><i class="fa fa-twitter" id="tlogo"></i></a>
| |
| − | <a href="https://www.instagram.com/lambertigem/" target="_blank"><i class="fa fa-instagram" id="ilogo"></i></a>
| |
| − | <a href="https://www.youtube.com/channel/UCjtWdnQjuJ8uNH8aKN_JZ8Q/videos" target="_blank"><i class="fa fa-youtube-play" id="ylogo"></i></i></a>
| |
| − | </center>
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − |
| |
| − |
| |
| − | </html>
| |
