Add "Games Coming Soon" feature with toggle in settings and update HTML structure

2025-04-04 17:52:16 +00:00
parent cf79e3ceae
commit 0e8df8783d
4 changed files with 211 additions and 17 deletions
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
+    <script defer src="https://chirpy.dev/bootstrapper.js" data-chirpy-domain="fun-miles-4jub.onrender.com"></script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web Games</title>
@@ -1,19 +1,176 @@
-<html>
-  <body>
-  <script defer src="https://chirpy.dev/bootstrapper.js" data-chirpy-domain="fun-miles-4jub.onrender.com"></script>
-    <a href='/index.html'>home</a>
-    <link rel="stylesheet" href="/ecstra/ecsta.css">
-<ul>
-<li>n64games</li>
-<li>the old games</li>
-<li>micro box v2</li>
-<li>game chaliges</li>
-<li>new chat sitem for all of the pages</li>
-</ul>
-<!-- begin wwww.htmlcommentbox.com -->
-<div id="HCB_comment_box"><a href="http://www.htmlcommentbox.com">Widget</a> is loading comments...</div>
-<link rel="stylesheet" type="text/css" href="https://www.htmlcommentbox.com/static/skins/bootstrap/twitter-bootstrap.css?v=0" />
-<script type="text/javascript" id="hcb"> /*<!--*/ if(!window.hcb_user){hcb_user={};} (function(){var s=document.createElement("script"), l=hcb_user.PAGE || (""+window.location).replace(/'/g,"%27"), h="https://www.htmlcommentbox.com";s.setAttribute("type","text/javascript");s.setAttribute("src", h+"/jread?page="+encodeURIComponent(l).replace("+","%2B")+"&mod=%241%24wq1rdBcg%24piEQg.u8ZJ10jZd4Ns2cl%2F"+"&opts=16798&num=10&ts=1736864483796");if (typeof s!="undefined") document.getElementsByTagName("head")[0].appendChild(s);})(); /*-->*/ </script>
-<!-- end www.htmlcommentbox.com -->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <script defer src="https://chirpy.dev/bootstrapper.js" data-chirpy-domain="fun-miles-4jub.onrender.com"></script>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Games to Add</title>
+    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@700&family=Press+Start+2P&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --background-color-dark: #0d0d0d;
+            --text-color-dark: #00ffcc;
+            --button-bg-dark: #1a1a1a;
+            --button-hover-bg-dark: #00ffcc;
+            --button-hover-text-dark: #0d0d0d;
+
+            --background-color-light: #ffffff;
+            --text-color-light: #333333;
+            --button-bg-light: #f0f0f0;
+            --button-hover-bg-light: #333333;
+            --button-hover-text-light: #ffffff;
+        }
+
+        body {
+            background-color: var(--background-color);
+            color: var(--text-color);
+            font-family: 'Orbitron', sans-serif;
+            margin: 0;
+            padding: 0;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: flex-start;
+            min-height: 100vh;
+            overflow-x: hidden;
+            transition: background-color 0.3s, color 0.3s;
+        }
+
+        h1 {
+            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);
+            }
+        }
+
+        .button-container {
+            display: flex;
+            gap: 20px;
+            margin-top: 20px;
+        }
+
+        .button {
+            padding: 15px 30px;
+            font-size: 1.2rem;
+            font-family: 'Press Start 2P', cursive;
+            color: var(--text-color);
+            background-color: var(--button-bg);
+            border: 2px solid var(--text-color);
+            border-radius: 5px;
+            cursor: pointer;
+            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);
+            transform: scale(1.1);
+        }
+
+        .button:active {
+            transform: scale(0.95);
+        }
+
+        ul {
+            list-style-type: none;
+            padding: 0;
+            margin: 20px 0;
+            width: 80%;
+            max-width: 600px;
+        }
+
+        li {
+            background-color: var(--button-bg);
+            color: var(--text-color);
+            padding: 10px 20px;
+            margin: 10px 0;
+            border-radius: 5px;
+            text-align: center;
+            transition: background-color 0.3s, color 0.3s;
+        }
+
+        li:hover {
+            background-color: var(--button-hover-bg);
+            color: var(--button-hover-text);
+        }
+    </style>
+</head>
+<body>
+    <h1>Games to Add</h1>
+    <button class="button" id="toggleMode">Switch to Light Mode</button>
+    <div class="button-container">
+        <a href="/index.html" class="button">Home</a>
+    </div>
+    <ul>
+        <li>N64 Games</li>
+        <li>The Old Games</li>
+        <li>Micro Box V2</li>
+        <li>Game Challenges</li>
+        <li>New Chat System for All Pages</li>
+    </ul>
+
+    <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 applyMode(isDarkMode) {
+            if (isDarkMode) {
+                document.body.style.setProperty('--background-color', 'var(--background-color-dark)');
+                document.body.style.setProperty('--text-color', 'var(--text-color-dark)');
+                document.body.style.setProperty('--button-bg', 'var(--button-bg-dark)');
+                document.body.style.setProperty('--button-hover-bg', 'var(--button-hover-bg-dark)');
+                document.body.style.setProperty('--button-hover-text', 'var(--button-hover-text-dark)');
+                document.getElementById('toggleMode').textContent = 'Switch to Light Mode';
+            } else {
+                document.body.style.setProperty('--background-color', 'var(--background-color-light)');
+                document.body.style.setProperty('--text-color', 'var(--text-color-light)');
+                document.body.style.setProperty('--button-bg', 'var(--button-bg-light)');
+                document.body.style.setProperty('--button-hover-bg', 'var(--button-hover-bg-light)');
+                document.body.style.setProperty('--button-hover-text', 'var(--button-hover-text-light)');
+                document.getElementById('toggleMode').textContent = 'Switch to Dark Mode';
+            }
+        }
+
+        // Toggle mode
+        const toggleModeButton = document.getElementById('toggleMode');
+        toggleModeButton.addEventListener('click', () => {
+            const isDarkMode = getCookie('darkMode') === 'true';
+            setCookie('darkMode', !isDarkMode, 30); // Save preference for 30 days
+            applyMode(!isDarkMode);
+        });
+
+        // Apply saved mode on load
+        const darkModeEnabled = getCookie('darkMode') === 'true';
+        applyMode(darkModeEnabled);
+    </script>
 </body>
 </html>
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
+    <script defer src="https://chirpy.dev/bootstrapper.js" data-chirpy-domain="fun-miles-4jub.onrender.com"></script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Moon Gaming</title>
@@ -87,6 +88,7 @@
    <div class="button-container">
        <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>
    </div>

    <script>
@@ -186,6 +188,13 @@
        if (dateTimeEnabled) {
            document.getElementById('clock').style.display = 'block'; // Show the clock
        }
+
+        // Check if "Games Coming Soon" is enabled
+        const gamesComingSoonEnabled = getCookie('gamesComingSoon') === 'true';
+
+        if (gamesComingSoonEnabled) {
+            document.getElementById('gamesComingSoonButton').style.display = 'inline-block'; // Show the button
+        }
    </script>
 </body>
 </html>
@@ -2,6 +2,7 @@
 <html lang="en">

 <head>
+    <script defer src="https://chirpy.dev/bootstrapper.js" data-chirpy-domain="fun-miles-4jub.onrender.com"></script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Settings</title>
@@ -95,6 +96,10 @@
            <span>Show Date and Time</span>
            <button id="toggleDateTime">Enable</button>
        </div>
+        <div class="setting-item">
+            <span>Show "Games Coming Soon" Button</span>
+            <button id="toggleGamesComingSoon">Enable</button>
+        </div>
        <div class="setting-item clear-cookies">
            <span>Clear Cookies</span>
            <button id="clearCookies">Clear</button>
@@ -294,6 +299,27 @@
        // Apply saved Date and Time preference on load
        applyDateTimeSetting(dateTimeEnabled);

+        // Games Coming Soon Toggle
+        const toggleGamesComingSoonButton = document.getElementById('toggleGamesComingSoon');
+        const gamesComingSoonEnabled = getCookie('gamesComingSoon') === 'true';
+
+        function applyGamesComingSoonSetting(enabled) {
+            if (enabled) {
+                toggleGamesComingSoonButton.textContent = 'Disable';
+            } else {
+                toggleGamesComingSoonButton.textContent = 'Enable';
+            }
+        }
+
+        toggleGamesComingSoonButton.addEventListener('click', () => {
+            const isGamesComingSoonEnabled = getCookie('gamesComingSoon') === 'true';
+            setCookie('gamesComingSoon', !isGamesComingSoonEnabled, 30); // Save preference for 30 days
+            applyGamesComingSoonSetting(!isGamesComingSoonEnabled);
+        });
+
+        // Apply saved Games Coming Soon preference on load
+        applyGamesComingSoonSetting(gamesComingSoonEnabled);
+
        // Regional Settings
        const regionSelect = document.getElementById('regionSelect');
        const savedRegion = getCookie('region') || 'us'; // Default to 'us'
@@ -337,6 +363,7 @@
            applyMaturityFilterSetting(false); // Default: Maturity Filter disabled
            applyTextToSpeechSetting(false); // Default: Text-to-Speech disabled
            applyDateTimeSetting(false); // Default: Date and Time disabled
+            applyGamesComingSoonSetting(false); // Default: Games Coming Soon disabled

            alert('Settings have been reset to default!');
        });