Difference between revisions of "Template:HK GTC"

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

HK_GTC 2021 Homepage