|
|
| 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> |
