2.42.12
- - - - + + + + + + + + + +2.42.12
+ + + + + diff --git a/script2.js b/script2.js new file mode 100644 index 00000000..e6ed3333 --- /dev/null +++ b/script2.js @@ -0,0 +1,77 @@ +const mainContent = document.querySelector(".main-content"); +const navBar = document.querySelector(".nav-bar"); +const gameText = document.getElementsByClassName("game-text"); +const navItem = document.getElementsByClassName("nav-item"); +const gameIcon = document.getElementsByClassName("game"); +const sideBar = document.getElementById("side-bar-menu"); +const darkModeIcon = document.getElementById("dark-mode-icon"); +const sidebarDarkModeIcon = document.getElementById("sidebar-dark-mode-icon"); + +const onToggleDarkMode = () => { + if (darkModeIcon.classList.contains("fa-moon")) { + mainContent.style.backgroundColor = "#15202B"; + sideBar.style.backgroundColor = "rgb(1, 125, 63)"; + for (let i = 0; i < gameText.length; i++) { + gameText[i].style.color = "#E4E6EB"; + } + for (let i = 0; i < gameIcon.length; i++) { + gameIcon[i].style.setProperty("--game-icon-hover-color", "#22303C"); + } + + navBar.style.backgroundColor = "#03DAC5"; + navBar.style.color = "#212628"; + for (let i = 0; i < navItem.length; i++) { + navItem[i].style.color = "#212628"; + } + darkModeIcon.className = "fa-solid fa-sun"; + sidebarDarkModeIcon.className = "fa-solid fa-sun"; + } else { + mainContent.style.backgroundColor = "white"; + sideBar.style.backgroundColor = "rgb(0, 144, 72)"; + for (let i = 0; i < gameText.length; i++) { + gameText[i].style.color = "#333333"; + } + for (let i = 0; i < gameIcon.length; i++) { + gameIcon[i].style.setProperty("--game-icon-hover-color", "#dedede"); + } + + navBar.style.backgroundColor = "#009090"; + navBar.style.color = "white"; + for (let i = 0; i < navItem.length; i++) { + navItem[i].style.color = "white"; + } + darkModeIcon.className = "fa-solid fa-moon"; + sidebarDarkModeIcon.className = "fa-solid fa-moon"; + } +}; + + +const toggleSideBar = () => { + const currentWidth = sideBar.style.width; + if (currentWidth === "73vw") { + sideBar.style.width = "0"; + mainContent.style.filter = "brightness(1)"; + } else { + sideBar.style.width = "73vw"; + mainContent.style.filter = "brightness(50%)"; + } +}; + +// Rendering the main content dynamically +const mainContentData = [ + { + name: "games", + image: "/images.png", + link: "/WebGames-master/WebGames-master/index.html", + }, +]; +mainContentData.forEach(item => { + let newDiv = ` + +