Jonas232005 (Talk | contribs) |
Jonas232005 (Talk | contribs) |
||
Line 1,280: | 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> |
Revision as of 12:08, 18 September 2021