Created
February 13, 2026 04:29
-
-
Save reedicleiscool/cf36c9d5e879ae3b22309c0d191c845b to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <header> | |
| <h1>🎮 Unblocked Games</h1> | |
| <input type="text" id="search" placeholder="Search games..."> | |
| <select id="categoryFilter"> | |
| <option value="All">All Categories</option> | |
| </select> | |
| <!-- Theme Toggle --> | |
| <button id="themeToggle">🌙 Dark Mode</button> | |
| </header> | |
| :root { | |
| --bg: #ffffff; | |
| --text: #000000; | |
| --header: #f2f2f2; | |
| --card: #ffffff; | |
| --card-hover: #e6e6e6; | |
| --controls: #dddddd; | |
| --button: #cccccc; | |
| } | |
| body.dark { | |
| --bg: #111; | |
| --text: #ffffff; | |
| --header: #1a1a1a; | |
| --card: #1f1f1f; | |
| --card-hover: #333; | |
| --controls: #222; | |
| --button: #444; | |
| } | |
| body { | |
| margin: 0; | |
| font-family: Arial, sans-serif; | |
| background: var(--bg); | |
| color: var(--text); | |
| transition: background 0.3s, color 0.3s; | |
| } | |
| header { | |
| text-align: center; | |
| padding: 20px; | |
| background: var(--header); | |
| } | |
| .game-card { | |
| background: var(--card); | |
| border-radius: 8px; | |
| overflow: hidden; | |
| cursor: pointer; | |
| transition: 0.2s; | |
| } | |
| .game-card:hover { | |
| background: var(--card-hover); | |
| transform: scale(1.05); | |
| } | |
| .controls { | |
| background: var(--controls); | |
| padding: 10px; | |
| display: flex; | |
| gap: 10px; | |
| } | |
| .controls button, | |
| #themeToggle { | |
| padding: 8px 12px; | |
| border: none; | |
| cursor: pointer; | |
| background: var(--button); | |
| color: var(--text); | |
| border-radius: 5px; | |
| } | |
| const themeToggle = document.getElementById("themeToggle"); | |
| // Load saved theme | |
| if (localStorage.getItem("theme") === "dark") { | |
| document.body.classList.add("dark"); | |
| themeToggle.textContent = "☀ Light Mode"; | |
| } | |
| // Toggle theme | |
| themeToggle.addEventListener("click", () => { | |
| document.body.classList.toggle("dark"); | |
| if (document.body.classList.contains("dark")) { | |
| localStorage.setItem("theme", "dark"); | |
| themeToggle.textContent = "☀ Light Mode"; | |
| } else { | |
| localStorage.setItem("theme", "light"); | |
| themeToggle.textContent = "🌙 Dark Mode"; | |
| } | |
| }); |
Comments are disabled for this gist.