Merge branch 'main' of https://github.com/Zexlo/Minecraft3DS-Wiki

Author: Zexlo

css/styles.css

@@ -3,9 +3,14 @@ body {
   font-family: Arial, sans-serif;
   margin: 0;
   padding: 0;
-  color: #fff;
+  color: #ffff
   text-align: center;
   background: url("assets/images/blueprintscroll.png"); 
+  transition: background-color 0.3s, color 0.3s;
+}
+
+body.dark-mode {
+  background-color: #000000; /* Darker background for dark mode */
 }
 
 header {
@@ -21,22 +26,6 @@ header {
   height: auto;
 }
 
-.home-icon img {
-  width: 50px;
-  height: 50px;
-  margin-right: 1rem;
-}
-
-.header-content h1 {
-  font-size: 2.5rem;
-  margin: 0;
-}
-
-.header-content p {
-  font-size: 1rem;
-  margin: 0.5rem 0 0;
-}
-
 .settings-icon {
   width: 100px;
   height: 100px;
@@ -56,18 +45,25 @@ header {
   justify-content: center;
   align-items: center;
   z-index: 1000;
+  transition: backdrop-filter 0.3s;
+}
+
+.settings-modal.blur {
+  backdrop-filter: blur(5px);
 }
 
 .settings-menu {
   background-color: #222;
   color: #fff;
-  padding: 1rem 2rem;
+  padding: 2rem; /* Increase padding to make it bigger */
   border-radius: 10px;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
   text-align: center;
-  transition: transform 0.3s ease-out;
+  transition: transform 0.3s ease-out, width 0.3s ease-out, height 0.3s ease-out;
   z-index: 100;
-  width: 300px;
+  width: 400px; /* Increase width */
+  max-height: 80vh; /* Ensure it doesn't take up too much vertical space */
+  overflow-y: auto; /* Add scroll if content exceeds max-height */
 }
 
 /* Light mode styles */
@@ -87,7 +83,6 @@ body.no-bg {
   gap: 1rem;
   padding: 2rem;
   margin: auto;
-  /* No background set here, use body's background */
 }
 
 /* Card Styles */

index.html

@@ -68,11 +68,14 @@ <h2>Settings</h2>
         <input type="checkbox" id="bgImageToggle">
         Enable Background Image
       </label>
+      <label>
+        <input type="checkbox" id="blurToggle">
+        Enable Background Blur
+      </label>
       <button id="closeSettings">Close</button>
     </div>
   </div>
 
   <script src="js/main.js"></script>
 </body>
 </html>
-</html>

js/main.js

@@ -9,6 +9,7 @@ document.addEventListener('DOMContentLoaded', () => {
   // Function to set theme preference in localStorage
   const setThemePreference = (isLight) => {
     localStorage.setItem('theme', isLight ? 'light' : 'dark');
+    document.body.classList.toggle('dark-mode', !isLight); // Add dark mode class
   };
 
   // Function to get background image preference from localStorage
@@ -21,13 +22,26 @@ document.addEventListener('DOMContentLoaded', () => {
     localStorage.setItem('bgImage', useImage ? 'true' : 'false');
   };
 
+  // Function to get background blur preference from localStorage
+  const getBlurPreference = () => {
+    return localStorage.getItem('blur') === 'true' ? true : false;
+  };
+
+  // Function to set background blur preference in localStorage
+  const setBlurPreference = (useBlur) => {
+    localStorage.setItem('blur', useBlur ? 'true' : 'false');
+  };
+
   // Apply theme and background settings
   const applySettings = () => {
     const themeToggle = document.getElementById('themeToggle');
     const bgImageToggle = document.getElementById('bgImageToggle');
-    
+    const blurToggle = document.getElementById('blurToggle');
+    const settingsModal = document.getElementById('settingsModal');
+
     document.body.classList.toggle('light-mode', themeToggle.checked);
-    document.body.classList.toggle('no-bg', !bgImageToggle.checked); // Disable background if unchecked
+    document.body.classList.toggle('no-bg', !bgImageToggle.checked);
+    settingsModal.classList.toggle('blur', blurToggle.checked);
   };
 
   // Settings Modal Functionality
@@ -36,10 +50,12 @@ document.addEventListener('DOMContentLoaded', () => {
   const closeSettingsButton = document.getElementById('closeSettings');
   const themeToggle = document.getElementById('themeToggle');
   const bgImageToggle = document.getElementById('bgImageToggle');
+  const blurToggle = document.getElementById('blurToggle');
 
-  // Load the user's theme and background preferences
+  // Load the user's preferences
   themeToggle.checked = getThemePreference();
   bgImageToggle.checked = getBackgroundPreference();
+  blurToggle.checked = getBlurPreference();
   applySettings();
 
   settingsIcon.addEventListener('click', () => {
@@ -60,9 +76,26 @@ document.addEventListener('DOMContentLoaded', () => {
     applySettings();
   });
 
-  // Existing code for card interaction and other features remains unchanged
-  // ... (keep your existing event listeners for details and cards here)
-  
+  blurToggle.addEventListener('change', function() {
+    setBlurPreference(this.checked);
+    applySettings();
+  });
+
+  // Card Hover Effect (JavaScript)
+  document.querySelectorAll('.card').forEach((card) => {
+    card.addEventListener('mouseenter', () => {
+      card.style.transition = 'transform 0.4s ease, box-shadow 0.4s ease';
+      card.style.transform = 'scale(1.05)';
+      card.style.boxShadow = '0 8px 16px rgba(0, 0, 0, 0.2)';
+    });
+
+    card.addEventListener('mouseleave', () => {
+      card.style.transition = 'transform 0.4s ease, box-shadow 0.4s ease';
+      card.style.transform = 'scale(1)';
+      card.style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.1)';
+    });
+  });
+
   // Disable right-click
   document.addEventListener('contextmenu', function (e) {
     e.preventDefault();