|
|
Line 132: |
Line 132: |
| line-height: normal !important; | | line-height: normal !important; |
| } | | } |
| + | |
| #my-nav #nav-button{ | | #my-nav #nav-button{ |
| transition: all .25s; | | transition: all .25s; |
Line 212: |
Line 213: |
| color: #f4f4f4; | | color: #f4f4f4; |
| font-weight: 400; | | font-weight: 400; |
− |
| |
| } | | } |
| | | |
Line 290: |
Line 290: |
| font-size: 6rem; | | font-size: 6rem; |
| background-color: #93D5DC; | | background-color: #93D5DC; |
− | background-image: url("../img/Main\ page\ background.png"); | + | background-image: url("https://static.igem.org/mediawiki/2021/e/e3/T--HK_GTC--welcome_background.png"); |
| + | background-repeat: no-repeat; |
| display: grid; | | display: grid; |
| grid-template-columns: 1fr 1fr; | | grid-template-columns: 1fr 1fr; |
Line 1,279: |
Line 1,280: |
| font-size: 100% !important; | | font-size: 100% !important; |
| } | | } |
− | </style>
| |
− |
| |
− | <script>
| |
− | window.onload = function () {
| |
− |
| |
− | //original navigation
| |
− | var backAvaliable = false;
| |
− | var navbutton = document.querySelector("#nav-button");
| |
− | var navbar = document.getElementById("popup");
| |
− | var backbutton = document.getElementById("back-button");
| |
− | var main_items = document.querySelector("#main");
| |
− |
| |
− | function smoothTransition(id){
| |
− | main_items.classList.add("fade-out");
| |
− | document.querySelector(id).classList.remove("inactive");
| |
− | setTimeout(function() {
| |
− | main_items.classList.add("inactive");
| |
− | document.querySelector(id).classList.remove("fade-out");
| |
− | document.querySelector(id).classList.add("show");
| |
− | }, 250);
| |
− | backAvaliable = true;
| |
− | }
| |
− |
| |
− | function resetNav(){
| |
− | document.querySelector("#team").classList.add("fade-out");
| |
− | document.querySelector("#project").classList.add("fade-out");
| |
− | document.querySelector("#human-practice").classList.add("fade-out");
| |
− | setTimeout(function() {
| |
− | main_items.classList.remove("inactive");
| |
− | document.querySelector("#team").classList.add("inactive");
| |
− | document.querySelector("#project").classList.add("inactive");
| |
− | document.querySelector("#human-practice").classList.add("inactive");
| |
− | main_items.classList.remove("fade-out");
| |
− | main_items.classList.add("show");
| |
− | }, 250);
| |
− | backAvaliable = false;
| |
− | }
| |
− |
| |
− | navbutton.addEventListener("click", e => {
| |
− | navbar.classList.add("navShow");
| |
− | navbutton.classList.add("rotate");
| |
− | });
| |
− | backbutton.addEventListener("click", e => {
| |
− | if(backAvaliable){
| |
− | resetNav();
| |
− | }else{
| |
− | navbar.classList.remove("navShow");
| |
− | navbutton.classList.remove("rotate");
| |
− | }
| |
− | });
| |
− |
| |
− | for(var i = 0; i < main_items.children.length; i++){
| |
− | main_items.children[i].addEventListener("click", e =>{
| |
− | switch (e.target.textContent) {
| |
− | case "Team":
| |
− | smoothTransition("#team");
| |
− | break;
| |
− | case "Project":
| |
− | smoothTransition("#project");
| |
− | break;
| |
− | case "Human Practice":
| |
− | smoothTransition("#human-practice");
| |
− | break;
| |
− | }
| |
− | });
| |
− | };
| |
− |
| |
− | //bottle navigation
| |
− |
| |
− | //i know
| |
− | var bot_buttons = [
| |
− | document.querySelector("#bot-team"),
| |
− | document.querySelector("#bot-project"),
| |
− | document.querySelector("#bot-part"),
| |
− | document.querySelector("#bot-safety"),
| |
− | document.querySelector("#bot-dl"),
| |
− | document.querySelector("#bot-hp"),
| |
− | document.querySelector("#bot-home")
| |
− | ]
| |
− |
| |
− | var bot_im = {
| |
− | "bot" : document.querySelector("#bot-im"),
| |
− | // "bot-team" : document.querySelector("#bot-team-im"),
| |
− | // "bot-project" : document.querySelector("#bot-project-im"),
| |
− | // "bot-part" : document.querySelector("#bot-part-im"),
| |
− | // "bot-safety" : document.querySelector("#bot-safe-im"),
| |
− | // "bot-dl" : document.querySelector("#bot-dl-im"),
| |
− | // "bot-hp" : document.querySelector("#bot-hp-im"),
| |
− | // "bot-home" : document.querySelector("#bot-home-im"),
| |
− | }
| |
− |
| |
− | //showing the descriptions
| |
− | for(var i = 0; i < Object.keys(bot_buttons).length; i++){
| |
− | bot_buttons[i].addEventListener("mouseover", e => {
| |
− | console.log(e.target.parentElement.parentElement);
| |
− | switch (e.target.parentElement.parentElement.id) {
| |
− | case "bot-team":
| |
− | console.log(":D");
| |
− | document.getElementById("bottle-team-desc").classList.add("current-desc");
| |
− | break;
| |
− | case "bot-project":
| |
− | document.getElementById("bottle-project-desc").classList.add("current-desc");
| |
− | break;
| |
− | case "bot-safety":
| |
− | document.getElementById("bottle-safety-desc").classList.add("current-desc");
| |
− | break;
| |
− | case "bot-part":
| |
− | document.getElementById("bottle-parts-desc").classList.add("current-desc");
| |
− | break;
| |
− | case "bot-hp":
| |
− | document.getElementById("bottle-hp-desc").classList.add("current-desc");
| |
− | break;
| |
− | case "bot-dl":
| |
− | document.getElementById("bottle-dl-desc").classList.add("current-desc");
| |
− | break;
| |
− | default:
| |
− | break;
| |
− | }
| |
− | document.getElementById("bottle-guide").classList.remove("current-desc");
| |
− | });
| |
− |
| |
− | bot_buttons[i].addEventListener("mouseout", e => {
| |
− | switch (e.target.parentElement.parentElement.id) {
| |
− | case "bot-team":
| |
− | console.log(":D");
| |
− | document.getElementById("bottle-team-desc").classList.remove("current-desc");
| |
− | break;
| |
− | case "bot-project":
| |
− | document.getElementById("bottle-project-desc").classList.remove("current-desc");
| |
− | break;
| |
− | case "bot-safety":
| |
− | document.getElementById("bottle-safety-desc").classList.remove("current-desc");
| |
− | break;
| |
− | case "bot-part":
| |
− | document.getElementById("bottle-parts-desc").classList.remove("current-desc");
| |
− | break;
| |
− | case "bot-hp":
| |
− | document.getElementById("bottle-hp-desc").classList.remove("current-desc");
| |
− | break;
| |
− | case "bot-dl":
| |
− | document.getElementById("bottle-dl-desc").classList.remove("current-desc");
| |
− | break;
| |
− | case "bot-dl":
| |
− | document.getElementById("bottle-dl-desc").classList.remove("current-desc");
| |
− | break;
| |
− | default:
| |
− | break;
| |
− | }
| |
− | document.getElementById("bottle-guide").classList.add("current-desc");
| |
− | });
| |
− | }
| |
− |
| |
− | //bottle effects
| |
− | document.querySelectorAll(".bot-button").forEach(e=>{
| |
− | e.addEventListener("mouseover", e=> {
| |
− | bot_im["bot"].classList.add("darken");
| |
− | });
| |
− | });
| |
− |
| |
− | document.querySelectorAll(".bot-button").forEach(e=>{
| |
− | e.addEventListener("mouseout", e=> {
| |
− | bot_im["bot"].classList.remove("darken");
| |
− | });
| |
− | });
| |
− |
| |
− | };
| |
| </script> | | </script> |
| | | |
| </html> | | </html> |