Update button labels for clarity; remove "Coming Soon" toggle from settings
This commit is contained in:
@@ -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>
|
||||
|
||||
+2
-2
@@ -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>
|
||||
|
||||
+2
-6
@@ -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 -->
|
||||
|
||||
Reference in New Issue
Block a user