diff --git a/WebGames-master/WebGames-master/index.html b/WebGames-master/WebGames-master/index.html index fe899019..064e8d8a 100644 --- a/WebGames-master/WebGames-master/index.html +++ b/WebGames-master/WebGames-master/index.html @@ -1,7 +1,6 @@ - Web Games @@ -23,11 +22,8 @@ --card-hover-text-light: #000000; /* Shared Variables */ - --background-color: var(--background-color-light); - --text-color: var(--text-color-light); - --card-bg: var(--card-bg-light); - --card-hover-bg: var(--card-hover-bg-light); - --card-hover-text: var(--card-hover-text-light); + --title-shadow-dark: 0 0 20px #00ffcc, 0 0 30px #00ffcc; + --title-shadow-light: 2px 2px 5px rgba(0, 0, 0, 0.2); } body { @@ -49,7 +45,92 @@ font-size: 3rem; text-transform: uppercase; margin: 20px 0; - text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); + animation: glow 1.5s infinite alternate; + text-shadow: var(--title-shadow-dark); + transition: text-shadow 0.3s, color 0.3s; + } + + @keyframes glow { + from { + text-shadow: 0 0 10px var(--text-color), 0 0 20px var(--text-color), 0 0 30px var(--text-color), 0 0 40px var(--text-color); + } + to { + text-shadow: 0 0 20px var(--text-color), 0 0 30px var(--text-color), 0 0 40px var(--text-color), 0 0 50px var(--text-color); + } + } + + .search-bar { + margin: 20px; + width: 80%; + max-width: 600px; + } + + #searchBar { + width: 100%; + padding: 10px; + font-size: 1rem; + border: 2px solid var(--text-color); + border-radius: 5px; + background-color: var(--card-bg); + color: var(--text-color); + outline: none; + transition: border-color 0.3s; + } + + #searchBar:focus { + border-color: var(--card-hover-bg); + } + + .game-container { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); + gap: 20px; + padding: 20px; + width: 100%; + max-width: 1200px; + } + + .game { + background-color: var(--card-bg); + border-radius: 10px; + overflow: hidden; + text-align: center; + transition: transform 0.3s, background-color 0.3s; + } + + .game:hover { + transform: scale(1.05); + background-color: var(--card-hover-bg); + } + + .game img { + width: 100%; + height: auto; + transition: transform 0.3s; + } + + .game:hover img { + transform: scale(1.1); + } + + .game-title { + padding: 10px; + font-size: 1rem; + color: var(--text-color); + text-transform: uppercase; + } + + .no-results { + display: none; + justify-content: center; + align-items: center; + flex-direction: column; + margin-top: 20px; + } + + .no-results img { + width: 300px; + height: auto; } .toggle-mode { @@ -93,11 +174,15 @@ background-color: var(--card-hover-text); color: var(--card-hover-bg); } + + .button:active { + transform: scale(0.95); + }

Web Games

- +
Home
@@ -187,6 +272,14 @@
Fnaf Collection
+ + + + + + + +
The Shadow Reform @@ -653,6 +746,25 @@ diff --git a/gametoadd.html b/gametoadd.html index b1650c10..63c11d35 100644 --- a/gametoadd.html +++ b/gametoadd.html @@ -72,7 +72,6 @@ text-transform: uppercase; transition: background-color 0.3s, color 0.3s, transform 0.2s; } - .button:hover { background-color: var(--button-hover-bg); color: var(--button-hover-text); @@ -172,5 +171,10 @@ const darkModeEnabled = getCookie('darkMode') === 'true'; applyMode(darkModeEnabled); + +
Comment Form is loading comments...
+ + +