QOL pt. 2 :3

startpage/js/main.js

@@ -141,7 +141,8 @@ document.addEventListener('DOMContentLoaded', () => {
     // Theme handling
     const themeSelect = document.getElementById('themeSelect');
     
-    function setTheme(theme) {
+    const setTheme = (theme) => {
+        document.body.style.transition = 'background-color 0.3s ease';
         const root = document.documentElement;
         root.style.setProperty('--base', `var(--${theme}-base)`);
         root.style.setProperty('--base-rgb', `var(--${theme}-base-rgb)`);
@@ -151,7 +152,13 @@ document.addEventListener('DOMContentLoaded', () => {
         root.style.setProperty('--blue', `var(--${theme}-blue)`);
         root.style.setProperty('--pink', `var(--${theme}-pink)`);
         localStorage.setItem('theme', theme);
-    }
+        
+        // Add smooth transition class
+        document.body.classList.add('theme-transition');
+        setTimeout(() => {
+            document.body.classList.remove('theme-transition');
+        }, 300);
+    };
 
     // Load saved theme
     const savedTheme = localStorage.getItem('theme') || 'mocha';
@@ -300,4 +307,71 @@ document.addEventListener('DOMContentLoaded', () => {
     resetLinkSize.addEventListener('click', () => {
         setLinkSize(DEFAULT_LINK_SIZE);
     });
+
+    // Transparency and Blur controls
+    const transparencyControl = document.getElementById('transparencyControl');
+    const transparencyValue = document.getElementById('transparencyValue');
+    const resetTransparency = document.getElementById('resetTransparency');
+    const blurToggle = document.getElementById('blurToggle');
+    const blurControl = document.getElementById('blurControl');
+    const blurValue = document.getElementById('blurValue');
+    const resetBlur = document.getElementById('resetBlur');
+
+    const DEFAULT_TRANSPARENCY = 15;
+    const DEFAULT_BLUR = 8;
+
+    const setTransparency = (value) => {
+        const opacity = (100 - value) / 100;
+        document.documentElement.style.setProperty('--container-opacity', opacity);
+        transparencyValue.textContent = `${value}%`;
+        transparencyControl.value = value;
+        localStorage.setItem('transparency', value);
+    };
+
+    const setBlur = (enabled, value) => {
+        const blurEffect = enabled ? `blur(${value}px)` : 'none';
+        document.documentElement.style.setProperty('--container-blur', blurEffect);
+        blurValue.textContent = `${value}px`;
+        blurControl.value = value;
+        blurToggle.checked = enabled;
+        localStorage.setItem('blurEnabled', enabled);
+        localStorage.setItem('blurAmount', value);
+        blurControl.disabled = !enabled;
+        blurValue.style.opacity = enabled ? '1' : '0.5';
+        blurControl.style.opacity = enabled ? '1' : '0.5';
+    };
+
+    // Load saved values or set defaults
+    const savedTransparency = localStorage.getItem('transparency') || DEFAULT_TRANSPARENCY;
+    const savedBlurEnabled = localStorage.getItem('blurEnabled') === 'true';
+    const savedBlurAmount = localStorage.getItem('blurAmount') || DEFAULT_BLUR;
+
+    setTransparency(parseInt(savedTransparency));
+    setBlur(savedBlurEnabled, parseInt(savedBlurAmount));
+
+    // Event listeners
+    transparencyControl.addEventListener('input', (e) => {
+        setTransparency(parseInt(e.target.value));
+    });
+
+    resetTransparency.addEventListener('click', () => {
+        setTransparency(DEFAULT_TRANSPARENCY);
+    });
+
+    blurToggle.addEventListener('change', (e) => {
+        const currentValue = parseInt(blurControl.value);
+        setBlur(e.target.checked, currentValue);
+    });
+
+    blurControl.addEventListener('input', (e) => {
+        if (blurToggle.checked) {
+            setBlur(true, parseInt(e.target.value));
+        }
+    });
+
+    // Add reset blur handler
+    resetBlur.addEventListener('click', () => {
+        setBlur(true, DEFAULT_BLUR);
+        blurToggle.checked = true;
+    });
 });