(Prototype team page) |
m |
||
Line 1: | Line 1: | ||
− | + | <html lang="en"> | |
− | < | + | <head> |
+ | <meta charset="UTF-8"> | ||
+ | <link rel="stylesheet" href="https://2018.igem.org/Team:Warwick/CSS?action=raw&ctype=text/css"> | ||
+ | <link rel="stylesheet" href="https://2018.igem.org/Team:Warwick/CSS/Boats?action=raw&ctype=text/css"> | ||
+ | <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> | ||
− | < | + | <script> |
− | + | function changeNavBar(navbarSelection){ | |
− | + | ||
− | + | ||
− | + | ||
+ | var bottnav = document.getElementById("BottNav"); | ||
− | + | $("#BottNav").hide().slideDown(300); | |
+ | switch (navbarSelection){ | ||
+ | case 0: | ||
+ | bottnav.innerHTML = "<li onclick='ProjectBreakdown()'><span>Project Breakdown</span></li><li onclick='Medals()'><span>Medals</span></li><li onclick='BioBricks()'><span>BioBricks</span></li>"; | ||
+ | bottnav.style.marginLeft = "25%" | ||
+ | bottnav.style.background = 'linear-gradient(to right, white, #e6fefe)'; | ||
+ | break; | ||
+ | case 1: | ||
+ | bottnav.innerHTML = "<li onclick='Interlab()'><span>Interlab</span></li><li onclick='Modelling()'><span>Modelling</span></li><li onclick='LabBooks()'><span>Lab Books</span></li>"; | ||
+ | bottnav.style.marginLeft = "40%" | ||
+ | bottnav.style.background = 'linear-gradient(to right, #e6fefe, #d8fdfd)'; | ||
+ | break; | ||
+ | case 2: | ||
+ | bottnav.innerHTML = "<li onclick='HumanPractices()'><span>Integrated Human Practices</span></li><li onclick='Outreach()'><span>Outreach</span></li>"; | ||
+ | bottnav.style.marginLeft = "55%" | ||
+ | bottnav.style.background = 'linear-gradient(to right, #d8fdfd, #bbf0f3)'; | ||
+ | break; | ||
+ | case 3: | ||
+ | bottnav.innerHTML = "<li onclick='MeetTheTeam()'><span>Meet the Team</span></li><li onclick='Attributions()'><span>Attributions</span></li>"; | ||
+ | bottnav.style.marginLeft = "70%" | ||
+ | bottnav.style.background = 'linear-gradient(to right, #bbf0f3, #85e4e9)'; | ||
+ | break; | ||
+ | case 4: | ||
+ | bottnav.innerHTML = "<li><span><a href='mailto:igem@warwick.ac.uk'>iGEM@warwick.ac.uk</a></span></li><li id='scrollToBottom' onclick='scrollToFooter()'><span>Social Media</span></li>"; | ||
+ | bottnav.style.marginLeft = "85%"; | ||
+ | bottnav.style.background = 'linear-gradient(to right, #85e4e9, #02c9d0)'; | ||
+ | break; | ||
+ | } | ||
+ | } | ||
− | + | var amountToTurn = 0; | |
+ | var previousTeam = 0; | ||
− | + | function rotate(newTeam){ | |
− | + | dif = newTeam - previousTeam; | |
− | + | if(dif == 1 || dif == -2){ | |
− | + | amountToTurn += 120; | |
+ | } | ||
+ | else if(dif == -1 || dif == 2){ | ||
+ | amountToTurn -= 120; | ||
+ | } | ||
+ | $("#BOIStriangle").css('transform', 'rotate(' + amountToTurn + 'deg)'); | ||
+ | $("#BOISContent").css('transform', 'rotate(' + (-1*amountToTurn) + 'deg)'); | ||
+ | $("#bioIMG").css('transform', 'rotate(' + (-1*amountToTurn) + 'deg)'); | ||
+ | $("#orgIMG").css('transform', 'rotate(' + (-1*amountToTurn) + 'deg)'); | ||
+ | $("#inorgIMG").css('transform', 'rotate('+ (-1*amountToTurn) + 'deg)'); | ||
+ | h3content = $("#BCTitle"); | ||
+ | pcontent = $("#BCText"); | ||
− | + | switch(newTeam){ | |
− | + | case 0: | |
− | + | h3content.html("Biological"); | |
− | + | pcontent.html("Riboswitches used to find RNA from legionella allowing quick confirmation of the presence of the live bacteria."); | |
− | + | break; | |
− | + | case 1: | |
− | + | h3content.html("Organic"); | |
− | + | pcontent.html("Utilising bacteria, specifically E.Coli, to degrade Oestregen from water to help out wildlife."); | |
− | + | break; | |
− | + | case 2: | |
+ | h3content.html("Inorganic"); | ||
+ | pcontent.html("Utilisting the lead absorbing properties of B.Subtilis bacteria to collect lead from water and with a newly injected gas vesicle gene to make the bacteria float ot the surface for easy collection."); | ||
+ | break; | ||
+ | } | ||
+ | previousTeam = newTeam; | ||
+ | } | ||
+ | function reset(){ | ||
+ | $("#BottNav").hide(); | ||
+ | } | ||
+ | </script> | ||
+ | <script> | ||
+ | function scrollToFooter(){ | ||
+ | $('html, body').animate({scrollTop: '10000px'}, 5000); | ||
+ | } | ||
− | + | function MeetTheTeam(){ | |
− | + | window.location = 'https://2018.igem.org/Team:Warwick/theTeam.html'; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | function Attributions(){ | |
− | + | window.location = 'https://2018.igem.org/Team:Warwick/Attributions' | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | function HumanPractices(){ | |
+ | window.location = 'https://2018.igem.org/Team:Warwick/Human_Practices' | ||
+ | } | ||
+ | function Collaborations(){ | ||
+ | window.location = 'https://2018.igem.org/Team:Warwick/Collaborations' | ||
+ | } | ||
+ | function ProjectBreakdown(){ | ||
+ | window.location = 'https://2018.igem.org/Team:Warwick/ProjectBreakdown' | ||
+ | } | ||
− | + | function BioBricks(){ | |
− | + | window.location = 'https://2018.igem.org/Team:Warwick/BioBricks' | |
− | + | } | |
− | + | ||
+ | function Medals(){ | ||
+ | window.location = 'https://2018.igem.org/Team:Warwick/Medals' | ||
+ | } | ||
− | + | function Interlab(){ | |
− | + | window.location = 'https://2018.igem.org/Team:Warwick/InterLab' | |
− | + | } | |
− | + | ||
+ | function Modelling(){ | ||
+ | window.location = 'https://2018.igem.org/Team:Warwick/Model' | ||
+ | } | ||
+ | function Outreach(){ | ||
+ | window.location = 'https://2018.igem.org/Team:Warwick/Outreach' | ||
+ | } | ||
+ | </script> | ||
− | < | + | <script> |
+ | $(function () { | ||
+ | $(document).scroll(function () { | ||
+ | $nav = $("#Navbar"); | ||
+ | $nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height()); | ||
+ | $("#TopNav").toggleClass("TopNavsscrolled", $(this).scrollTop() > $nav.height()); | ||
+ | $("#topnav0").toggleClass("topnav0scrolled", $(this).scrollTop() > $nav.height()); | ||
+ | $("#topnav1").toggleClass("topnav1scrolled", $(this).scrollTop() > $nav.height()); | ||
+ | $("#topnav2").toggleClass("topnav2scrolled", $(this).scrollTop() > $nav.height()); | ||
+ | $("#topnav3").toggleClass("topnav3scrolled", $(this).scrollTop() > $nav.height()); | ||
+ | $("#topnav4").toggleClass("topnav4scrolled", $(this).scrollTop() > $nav.height()); | ||
+ | }); | ||
+ | }); | ||
+ | </script> | ||
+ | <title>Ripple</title> | ||
+ | <link rel="icon" href="images/RippleLogo.ico"> | ||
+ | </head> | ||
− | < | + | <body> |
− | + | ||
− | |||
− | < | + | <div id='Navbar' onmouseleave='reset()'> |
− | < | + | <div id='TopNav'> |
+ | <ul><!-- | ||
+ | --><li><span class='topnavs' id='topnav0' onmouseenter="changeNavBar(0)">Project</span></li><!-- | ||
+ | --><li><span class='topnavs' id='topnav1' onmouseenter="changeNavBar(1)">Lab Work</span></li><!-- | ||
+ | --><li><span class='topnavs' id='topnav2' onmouseenter="changeNavBar(2)">Human Practices</span></li><!-- | ||
+ | --><li><span class='topnavs' id='topnav3' onmouseenter="changeNavBar(3)">The Team</span></li><!-- | ||
+ | --><li><span class='topnavs' id='topnav4' onmouseenter="changeNavBar(4)">Contact Us</span></li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | <div> | ||
+ | <ul id='BottNav' style='display: none;'> | ||
+ | <li><span></span></li><!-- | ||
+ | --><li><span></span></li><!-- | ||
+ | --><li><span></span></li><!-- | ||
+ | --><li><span></span></li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | </div> | ||
− | </div> | + | <body> |
+ | |||
+ | |||
+ | <div id='Navbar' onmouseleave='reset()'> | ||
+ | <div id='TopNav'> | ||
+ | <ul> | ||
+ | <li><span class='topnavs' id='topnav0' onmouseenter="changeNavBar(0)">Project</span></li><!-- | ||
+ | --><li><span class='topnavs' id='topnav1' onmouseenter="changeNavBar(1)">Human Practices</span></li><!-- | ||
+ | --><li><span class='topnavs' id='topnav2' onmouseenter="changeNavBar(2)">The Team</span></li><!-- | ||
+ | --><li><span class='topnavs' id='topnav3' onmouseenter="changeNavBar(3)">Contact Us</span></li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | <div> | ||
+ | <ul id='BottNav' style='display: none;'> | ||
+ | <li><span>Meet the Team</span></li><!-- | ||
+ | --><li><span>Modelling</span></li><!-- | ||
+ | --><li><span>BioBricks</span></li><!-- | ||
+ | --><li><span>InterLab</span></li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | <div id='FishermanBody'> | ||
+ | <div id='FishermanTitle'> | ||
+ | <h1>Human Practices</h1> | ||
+ | </div> | ||
+ | <div id='FishermanGraphic'> | ||
+ | <div id='frontwave' class='waves'> | ||
+ | </div> | ||
+ | <div id='backwave2' class='waves'> | ||
+ | </div> | ||
+ | <div id='backwave' class='waves'> | ||
+ | </div> | ||
+ | <img src='images/fisherman graphic/fishermanandboat.svg' id='fisherman'> | ||
+ | <div id='hookdiv'> | ||
+ | <img src='images/fisherman graphic/hook.svg' id='hook'> | ||
+ | </div> | ||
+ | |||
+ | <div id='seaSolid'> | ||
+ | </div> | ||
+ | <div id='seaOpac'> | ||
+ | <img src='images/fisherman graphic/sandL.svg' id='sandL'> | ||
+ | <img src='images/fisherman graphic/sandR.svg' id='sandR'> | ||
+ | |||
+ | <img src='images/fisherman graphic/rockL.svg' id='rockL'> | ||
+ | <img src='images/fisherman graphic/rockR.svg' id='rockR'> | ||
+ | <img src='images/fisherman graphic/smokebubble.svg' class='smoke' id='smoke1'> | ||
+ | <img src='images/fisherman graphic/smokebubble.svg' class='smoke' id='smoke2'> | ||
+ | <img src='images/fisherman graphic/smokebubble.svg' class='smoke' id='smoke3'> | ||
+ | <img src='images/fisherman graphic/smokebubble.svg' class='smoke' id='smoke4'> | ||
+ | <img src='images/fisherman graphic/smokebubble.svg' class='smoke' id='smoke5'> | ||
+ | <img src='images/fisherman graphic/smokebubble.svg' class='smoke' id='smoke6'> | ||
+ | <img src='images/fisherman graphic/smokebubble.svg' class='smoke' id='smoke7'> | ||
+ | <img src='images/fisherman graphic/smokebubble.svg' class='smoke' id='smoke8'> | ||
+ | |||
+ | <img src='images/fisherman graphic/coral.svg' id='coralL'> | ||
+ | </div> | ||
+ | |||
+ | <img src='images/fisherman graphic/animals/dolphin.svg' id='jumpingFish'> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | <div id='footer' style='margin-top: 315.75vw'> | ||
+ | |||
+ | <div id='leftFoot'> | ||
+ | <h1 class='FooterTitle' style='margin: 15px auto'>Contact Us</h1> | ||
+ | <img id='FooterLogo' src='images/RippleLogo.svg'> | ||
+ | <div id='socialmedia'> | ||
+ | <h1 style='color: white; font-weight: 300; font-size: 1.5vw; margin-left: -5%'>igem@warwick.ac.uk</h1> | ||
+ | <br> | ||
+ | <a class='socialMedia' style='margin-right: 5%' href="https://www.youtube.com/channel/UCHhLKgvGJFkdSmwgGPvN9PA"> | ||
+ | <img src="https://static.igem.org/mediawiki/2018/6/61/T--Warwick--YTRed.png" alt="YouTube"> | ||
+ | </a> | ||
+ | <a class='socialMedia' style='margin-right: 5%' href="https://twitter.com/WISB_SynBioCtre"> | ||
+ | <img src="https://static.igem.org/mediawiki/2018/f/f0/T--Warwick--Twitterlogo.png" alt="Twitter"> | ||
+ | </a> | ||
+ | <a class='socialMedia' style='margin-right: -2.5%' href="https://www.instagram.com/igem_warwick/"> | ||
+ | <img src="images/insta.png" alt="Twitter"> | ||
+ | </a> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | <div id='rightFoot'> | ||
+ | <h1 class='FooterTitle' style='color: black'>Sponsors</h1> | ||
+ | <table id='theSponsors'> | ||
+ | <tr> | ||
+ | <td> | ||
+ | <img class='sponsorimages' src="images/T--Warwick--GRPIM.png"> | ||
+ | </td> | ||
+ | <td> | ||
+ | <img class='sponsorimages' src="images/T--Warwick--WSFG.png"> | ||
+ | </td> | ||
+ | <td> | ||
+ | <img class='sponsorimages' src="images/synbiocdt.png"> | ||
+ | </td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td> | ||
+ | <img class='sponsorimages' src="images/snapgene.png"> | ||
+ | </td> | ||
+ | <td> | ||
+ | <img class='sponsorimages' src="images/SEB.png"> | ||
+ | </td> | ||
+ | <td> | ||
+ | <img class='sponsorimages' src="https://static.igem.org/mediawiki/2018/f/fb/T--Warwick--NEbiolabs.png"> | ||
+ | </td> | ||
+ | </tr> | ||
+ | </table> | ||
+ | <table id='theSponsors'> | ||
+ | <tr> | ||
+ | <td class='bottomrow'> | ||
+ | <img class='sponsorimages' src="https://static.igem.org/mediawiki/2018/0/0e/T--Warwick--WISB.png"> | ||
+ | </td> | ||
+ | <td class='bottomrow'> | ||
+ | <img class='sponsorimages' src="images/bbsrc.png"> | ||
+ | </td> | ||
+ | </tr> | ||
+ | </table> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | </body> | ||
+ | </html> |
Revision as of 11:52, 4 October 2018
igem@warwick.ac.uk