diff --git a/assets/main_background_dark.jpg b/assets/main_background_dark.jpg new file mode 100644 index 0000000..f73c852 Binary files /dev/null and b/assets/main_background_dark.jpg differ diff --git a/assets/main_background_light.jpg b/assets/main_background_light.jpg new file mode 100644 index 0000000..3d65593 Binary files /dev/null and b/assets/main_background_light.jpg differ diff --git a/assets/tic-tac-toe.jpg b/assets/tic-tac-toe.jpg new file mode 100644 index 0000000..aa4fc20 Binary files /dev/null and b/assets/tic-tac-toe.jpg differ diff --git a/assets/tic-tac-toe.png b/assets/tic-tac-toe.png deleted file mode 100644 index de44ca3..0000000 Binary files a/assets/tic-tac-toe.png and /dev/null differ diff --git a/index.html b/index.html index 04c8ff5..961c6ab 100644 --- a/index.html +++ b/index.html @@ -1,105 +1,85 @@ - - - - - - - - - - + + + - - Web Games - + + + + + + + - - +
+ + +

Tic-Tac-Toe

+ -
- - -

Tic-Tac-Toe

- + + +

The Bubble Game

+ - - -

The Bubble Game

- + + +

Dev Quiz

+ +
+ - - -

Dev Quiz

- -
- - + \ No newline at end of file diff --git a/main.css b/main.css index b2db436..d978517 100644 --- a/main.css +++ b/main.css @@ -101,10 +101,10 @@ body { } .main-content { + background-image: url("./assets/main_background_light.jpg"); overflow: hidden; height: 100vh; width: 100vw; - background-color: white; display: flex; align-items: start; justify-content: start; @@ -128,6 +128,9 @@ body { width: 12vw; cursor: pointer; overflow: hidden; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); + border-style: solid; + border-color: palevioletred; } .main-content .game:hover { @@ -139,6 +142,8 @@ body { /* rotate: 3deg; */ scale: 1.1; outline: 1.5px solid #009090; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); + } .main-content, .nav-bar { overflow: hidden; @@ -283,13 +288,9 @@ body { } } - - /* add media query for andriod device */ /* @media all and (max-width: 700px) { .nav-bar { width: 100%; } } */ - - diff --git a/script.js b/script.js index a56f442..1d65678 100644 --- a/script.js +++ b/script.js @@ -7,9 +7,15 @@ 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 textIcon = document.getElementById("text-icon"); +const spanText = textIcon.getElementsByTagName("span"); +const sideTextIcon = document.getElementById("side-text-icon"); +const sideSpanText = sideTextIcon.getElementsByTagName("span"); const onToggleDarkMode = () => { if (darkModeIcon.classList.contains('fa-moon')) { + mainContent[0].style.backgroundImage = "url('./assets/main_background_dark.jpg')"; + spanText[0].innerHTML = "Light Mode"; + sideSpanText[0].innerHTML = "Light Mode"; mainContent[0].style.backgroundColor = "#15202B"; sideBar.style.backgroundColor = "rgb(1, 125, 63)"; for (let i = 0; i < gameText.length; i++) { @@ -18,7 +24,6 @@ const onToggleDarkMode = () => { for (let i = 0; i < gameIcon.length; i++) { gameIcon[i].style.setProperty("--game-icon-hover-color", "#22303C"); } - navBar[0].style.backgroundColor = "#03DAC5"; navBar[0].style.color = "#212628"; for (let i = 0; i < navItem.length; i++) { @@ -28,7 +33,11 @@ const onToggleDarkMode = () => { sidebarDarkModeIcon.className = "fa-solid fa-sun"; } else { + spanText[0].innerHTML = "Dark Mode"; + sideSpanText[0].innerHTML = "Dark Mode"; mainContent[0].style.backgroundColor = "white"; + mainContent[0].style.backgroundImage = "url('./assets/main_background_light.jpg')"; + sideBar.style.backgroundColor = "rgb(0, 144, 72) "; for (let i = 0; i < gameText.length; i++) { gameText[i].style.color = "#333333"; @@ -63,4 +72,4 @@ const toggleSideBar = () => { mainContentQS.style.filter = "brightness(50%)"; } -} +} \ No newline at end of file diff --git a/tic-tac-toe/index.html b/tic-tac-toe/index.html index 63ed696..7099a59 100644 --- a/tic-tac-toe/index.html +++ b/tic-tac-toe/index.html @@ -3,7 +3,7 @@ - +