From 77458465e395c8043ff7a6be64b8c788b320f18e Mon Sep 17 00:00:00 2001
From: mileswa1q22 <mileswolfallen4@hotmail.com>
Date: Mon, 7 Apr 2025 19:25:06 +0000
Subject: [PATCH] Update button labels for clarity; remove "Coming Soon" toggle
 from settings

---
 WebGames-master/WebGames-master/index.html | 176 +++++++--------------
 index.html                                 |   4 +-
 setting.html                               |   8 +-
 3 files changed, 61 insertions(+), 127 deletions(-)

diff --git a/WebGames-master/WebGames-master/index.html b/WebGames-master/WebGames-master/index.html
index 3a44311f..fe899019 100644
--- a/WebGames-master/WebGames-master/index.html
+++ b/WebGames-master/WebGames-master/index.html
@@ -23,8 +23,11 @@
             --card-hover-text-light: #000000;
 
             /* Shared Variables */
-            --title-shadow-dark: 0 0 20px #00ffcc, 0 0 30px #00ffcc;
-            --title-shadow-light: 2px 2px 5px rgba(0, 0, 0, 0.2);
+            --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);
         }
 
         body {
@@ -46,102 +49,7 @@
             font-size: 3rem;
             text-transform: uppercase;
             margin: 20px 0;
-            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-container.single-result {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-        }
-
-        .game {
-            background-color: var(--card-bg);
-            border-radius: 10px;
-            overflow: hidden;
-            text-align: center;
-            transition: transform 0.3s, background-color 0.3s;
-            max-width: 500px; /* Limit the maximum width */
-            max-height: 600px; /* Limit the maximum height */
-        }
-
-        .game:hover {
-            transform: scale(1.05);
-            background-color: var(--card-hover-bg);
-        }
-
-        .game img {
-            width: 100%;
-            height: auto;
-            max-width: 500px; /* Limit the maximum width */
-            max-height: 500px; /* Limit the maximum height */
-            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;
+            text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
         }
 
         .toggle-mode {
@@ -185,15 +93,11 @@
             background-color: var(--card-hover-text);
             color: var(--card-hover-bg);
         }
-
-        .button:active {
-            transform: scale(0.95);
-        }
     </style>
 </head>
 <body>
     <h1 id="pageTitle">Web Games</h1>
-    <button class="toggle-mode" id="toggleMode">Switch to Light Mode</button>
+    <button class="toggle-mode" id="toggleMode">Switch to Dark Mode</button>
     <div class="button-container">
         <a href="/index.html" class="button">Home</a>
     </div>
@@ -283,23 +187,12 @@
                 <div class="game-title">Fnaf Collection</div>
             </a>
         </div>
-
-
-
-
-
-
-
-        
         <div class="game">
             <a href="games/The-Shadow-Reform.html">
                 <img src="assets/kaertt.png" alt="The Shadow Reform">
                 <div class="game-title">The Shadow Reform</div>
             </a>
         </div>
-
-
-
         <div class="game">
             <a href="/wedrowemdlemtest/webretro-master/webretro-master/embed/Mario-Kart-64.html">
                 <img src="assets/mareoc64.jpeg" alt="Mario Kart 64">
@@ -336,10 +229,6 @@
                 <div class="game-title">Tiny Fishing</div>
             </a>
         </div>
-
-
-
-        
         <div class="game">
             <a href="games2/game/idle-breakout/index.html">
                 <img src="games2/assets/idle-breakout.jpg" alt="idle breakout">
@@ -764,6 +653,55 @@
 
     <script src="https://cdn.jsdelivr.net/npm/cloakjs@latest/cloak.min.js"></script>
     <script>
+        // Utility function to set a cookie
+        function setCookie(name, value, days) {
+            const date = new Date();
+            date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
+            document.cookie = `${name}=${value};expires=${date.toUTCString()};path=/`;
+        }
+
+        // Utility function to get a cookie
+        function getCookie(name) {
+            const cookies = document.cookie.split(';');
+            for (let i = 0; i < cookies.length; i++) {
+                const cookie = cookies[i].trim();
+                if (cookie.startsWith(name + '=')) {
+                    return cookie.substring(name.length + 1);
+                }
+            }
+            return null;
+        }
+
+        // Apply dark or light mode based on cookie
+        function applyDarkMode(enabled) {
+            if (enabled) {
+                document.documentElement.style.setProperty('--background-color', 'var(--background-color-dark)');
+                document.documentElement.style.setProperty('--text-color', 'var(--text-color-dark)');
+                document.documentElement.style.setProperty('--card-bg', 'var(--card-bg-dark)');
+                document.documentElement.style.setProperty('--card-hover-bg', 'var(--card-hover-bg-dark)');
+                document.documentElement.style.setProperty('--card-hover-text', 'var(--card-hover-text-dark)');
+                document.getElementById('toggleMode').textContent = 'Switch to Light Mode';
+            } else {
+                document.documentElement.style.setProperty('--background-color', 'var(--background-color-light)');
+                document.documentElement.style.setProperty('--text-color', 'var(--text-color-light)');
+                document.documentElement.style.setProperty('--card-bg', 'var(--card-bg-light)');
+                document.documentElement.style.setProperty('--card-hover-bg', 'var(--card-hover-bg-light)');
+                document.documentElement.style.setProperty('--card-hover-text', 'var(--card-hover-text-light)');
+                document.getElementById('toggleMode').textContent = 'Switch to Dark Mode';
+            }
+        }
+
+        // Check and apply saved mode on load
+        const darkModeEnabled = getCookie('darkMode') === 'true';
+        applyDarkMode(darkModeEnabled);
+
+        // Toggle dark mode on button click
+        document.getElementById('toggleMode').addEventListener('click', () => {
+            const isDarkMode = getCookie('darkMode') === 'true';
+            setCookie('darkMode', !isDarkMode, 30); // Save preference for 30 days
+            applyDarkMode(!isDarkMode);
+        });
+
         function filterGames() {
             const searchInput = document.getElementById('searchBar').value.toLowerCase();
             const games = document.querySelectorAll('.game');
@@ -787,7 +725,7 @@
             }
 
             const noResultsElement = document.getElementById('noResults');
-            noResultsElement.style.display = hasResults ? 'none' : 'flex';
+            noResultsElement.style.display = visibleGames > 0 ? 'none' : 'flex';
         }
     </script>
 </body>
diff --git a/index.html b/index.html
index 5f40672b..6911aa95 100644
--- a/index.html
+++ b/index.html
@@ -12,9 +12,9 @@
 <body>
     <h1>Moon Gaming</h1>
     <div class="button-container">
-        <button class="button" onclick="location.href='setting.html'">Settings ⚙️</button>
+        <button class="button" onclick="location.href='setting.html'">Settings</button>
         <button class="button" onclick="location.href='./WebGames-master/WebGames-master/index.html'">Games</button>
-        <button class="button" id="gamesComingSoonButton" style="display: none;" onclick="location.href='./gametoadd.html'">Games Coming Soon</button>
+        <button class="button" id="gamesComingSoonButton" onclick="location.href='./gametoadd.html'">Coming Soon</button>
     </div>
 
     <script>
diff --git a/setting.html b/setting.html
index a61e2ca2..b1724218 100644
--- a/setting.html
+++ b/setting.html
@@ -97,17 +97,13 @@
             <button id="toggleDateTime">Enable</button>
         </div>
         <div class="setting-item">
-            <span>Show "Games Coming Soon" Button</span>
-            <button id="toggleGamesComingSoon">Enable</button>
+            <span>Save Search Input</span>
+            <button id="toggleSaveSearch">Enable</button>
         </div>
         <div class="setting-item clear-cookies">
             <span>Clear Cookies</span>
             <button id="clearCookies">Clear</button>
         </div>
-        <div class="setting-item">
-            <span>Save Search Input</span>
-            <button id="toggleSaveSearch">Enable</button>
-        </div>
     </div>
 
     <!-- Modal for confirmation -->