diff --git a/WebGames-master/WebGames-master/index.html b/WebGames-master/WebGames-master/index.html
index 553117c3..d42df5b0 100644
--- a/WebGames-master/WebGames-master/index.html
+++ b/WebGames-master/WebGames-master/index.html
@@ -875,11 +875,11 @@
function animateGame(game) {
anime({
targets: game,
- translateY: [-50, 0], // Fly in from above
- rotate: [-10, 0], // Rotate back to normal
opacity: [0, 1], // Fade in
- duration: 1000, // Animation duration
- easing: 'easeOutElastic(1, 0.5)', // Elastic easing for a bouncy effect
+ translateY: [-50, 0], // Slide down
+ rotate: [-45, 0], // Small spin counterclockwise (start at -45 degrees and rotate to 0)
+ duration: 3000, // Animation duration (3 seconds)
+ easing: 'easeOutExpo', // Smooth easing
});
}
@@ -900,49 +900,23 @@
const games = document.querySelectorAll('.game');
games.forEach(game => {
game.style.opacity = '0'; // Hide games initially
- game.style.transform = 'translateY(-50px) rotate(-10deg)'; // Move them above and rotate slightly
+ game.style.transform = 'translateY(-50px) rotate(-45deg)'; // Move them above and rotate counterclockwise
observer.observe(game); // Start observing the game
});
- // 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;
- }
-
- // Function to animate game elements
- function animateGames() {
- const games = document.querySelectorAll('.game');
- games.forEach(game => {
- game.style.opacity = '0'; // Hide games initially
- game.style.transform = 'translateY(-50px) rotate(-10deg)'; // Move them above and rotate slightly
- });
-
- // Use Anime.js to animate the games
- anime({
- targets: '.game',
- translateY: [-50, 0], // Fly in from above
- rotate: [-10, 0], // Rotate back to normal
- opacity: [0, 1], // Fade in
- delay: anime.stagger(150), // Stagger animation for each card
- duration: 1000, // Animation duration
- easing: 'easeOutElastic(1, 0.5)', // Elastic easing for a bouncy effect
- });
- }
-
// Check if animation is enabled
const gameAnimationEnabled = getCookie('gameAnimation') === 'true';
// Trigger animations on page load if enabled
window.onload = () => {
if (gameAnimationEnabled) {
- animateGames();
+ games.forEach(game => observer.observe(game));
+ } else {
+ // Make all games visible without animation
+ games.forEach(game => {
+ game.style.opacity = '1';
+ game.style.transform = 'none';
+ });
}
};
diff --git a/gametoadd.html b/gametoadd.html
index 63c11d35..85fe51fa 100644
--- a/gametoadd.html
+++ b/gametoadd.html
@@ -2,6 +2,7 @@
+
Games to Add
@@ -104,11 +105,14 @@
background-color: var(--button-hover-bg);
color: var(--button-hover-text);
}
+
+ h1, .button-container .button, ul li {
+ opacity: 0; /* Hide elements initially */
+ }
Games to Add
-
@@ -148,33 +152,115 @@
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);
+
+ // Function to animate the title
+ function animateTitle() {
+ anime({
+ targets: 'h1',
+ opacity: [0, 1], // Fade in
+ translateY: [-50, 0], // Slide down
+ duration: 1000, // Animation duration
+ easing: 'easeOutExpo', // Smooth easing
+ });
+ }
+
+ // Function to animate the buttons
+ function animateButtons() {
+ anime({
+ targets: '.button-container .button',
+ opacity: [0, 1], // Fade in
+ translateX: [-50, 0], // Slide in from the left
+ delay: anime.stagger(200), // Stagger animation for each button
+ duration: 800, // Animation duration
+ easing: 'easeOutExpo', // Smooth easing
+ });
+ }
+
+ // Function to animate the list items
+ function animateListItems() {
+ anime({
+ targets: 'ul li',
+ opacity: [0, 1], // Fade in
+ translateY: [20, 0], // Slide up
+ delay: anime.stagger(150), // Stagger animation for each list item
+ duration: 800, // Animation duration
+ easing: 'easeOutExpo', // Smooth easing
+ });
+ }
+
+ // Function to toggle animations
+ function toggleAnimations() {
+ const animationsEnabled = getCookie('gameAnimation') === 'true';
+ if (animationsEnabled) {
+ animateTitle();
+ animateButtons();
+ animateListItems();
+ } else {
+ // Make everything visible without animations
+ document.querySelector('h1').style.opacity = '1';
+ document.querySelector('h1').style.transform = 'none';
+
+ const buttons = document.querySelectorAll('.button-container .button');
+ buttons.forEach(button => {
+ button.style.opacity = '1';
+ button.style.transform = 'none';
+ });
+
+ const listItems = document.querySelectorAll('ul li');
+ listItems.forEach(item => {
+ item.style.opacity = '1';
+ item.style.transform = 'none';
+ });
+ }
+ }
+
+ // Ensure animations are enabled by default
+ if (getCookie('gameAnimation') === null) {
+ setCookie('gameAnimation', 'true', 30); // Default to animations enabled
+ }
+
+ // Trigger animations on page load
+ window.onload = () => {
+ toggleAnimations();
+ };
-
-
-
-
+
+
+
+
diff --git a/setting.html b/setting.html
index 7a612c9a..b44f0983 100644
--- a/setting.html
+++ b/setting.html
@@ -74,6 +74,10 @@
.setting-item.clear-cookies button:hover {
background-color: #cc0000;
}
+
+ h1, .setting-item {
+ opacity: 0; /* Hide elements initially */
+ }
@@ -137,6 +141,7 @@
+