miles/moon-gaming
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add Home button to the main page and implement confirmation modal for clearing cookies

Browse Source
This commit is contained in:
miles
2025-04-04 13:32:57 +00:00
parent 6014fa0de9
commit a16895e01a
2 changed files with 66 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
WebGames-master/WebGames-master/index.html
+32
View File
@@ -149,11 +149,43 @@
background-color: var(--card-hover-text);
color: var(--card-hover-bg);
}
.button-container {
margin: 20px;
display: flex;
gap: 10px;
}
.button {
display: inline-block;
text-decoration: none;
text-align: center;
padding: 10px 20px;
font-size: 1rem;
border: none;
border-radius: 5px;
cursor: pointer;
background-color: var(--card-hover-bg);
color: var(--card-hover-text);
transition: background-color 0.3s, color 0.3s;
}
.button:hover {
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>
<div class="button-container">
<a href="/index.html" class="button">Home</a>
</div>
<div class="search-bar">
<input type="text" id="searchBar" onkeyup="filterGames()" placeholder="Search for games...">
</div>
setting.html
+34 -2
View File
@@ -101,6 +101,17 @@
</div>
</div>
<!-- Modal for confirmation -->
<div id="confirmationModal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); justify-content: center; align-items: center;">
<div style="background-color: white; padding: 20px; border-radius: 10px; text-align: center; max-width: 400px; width: 90%; color: black;">
<p>Are you sure you want to clear all cookies? This will reset all your preferences and saved data.</p>
<div style="display: flex; justify-content: space-around; margin-top: 20px;">
<button id="cancelClear" style="padding: 10px 20px; background-color: #ccc; border: none; border-radius: 5px; cursor: pointer;">Cancel</button>
<button id="confirmClear" style="padding: 10px 20px; background-color: #ff4d4d; color: white; border: none; border-radius: 5px; cursor: pointer;">OK</button>
</div>
</div>
</div>
<script>
// Utility function to set a cookie
function setCookie(name, value, days) {
@@ -148,13 +159,34 @@
// Apply saved dark mode preference on load
applyDarkMode(darkModeEnabled);
// Clear Cookies
// Clear Cookies Button
const clearCookiesButton = document.getElementById('clearCookies');
const confirmationModal = document.getElementById('confirmationModal');
const cancelClearButton = document.getElementById('cancelClear');
const confirmClearButton = document.getElementById('confirmClear');
// Show confirmation modal when Clear Cookies is clicked
clearCookiesButton.addEventListener('click', () => {
confirmationModal.style.display = 'flex';
});
// Cancel clearing cookies
cancelClearButton.addEventListener('click', () => {
confirmationModal.style.display = 'none';
});
// Confirm clearing cookies
confirmClearButton.addEventListener('click', () => {
// Clear all cookies
document.cookie.split(";").forEach(cookie => {
document.cookie = cookie.replace(/^ +/, "").replace(/=.*/, "=;expires=" + new Date(0).toUTCString() + ";path=/");
});
alert('Cookies cleared!');
// Hide the modal
confirmationModal.style.display = 'none';
// Notify the user
alert('Cookies have been cleared!');
});
// CloakJS Toggle