QOL pt. 2 :3

startpage/index.html

@@ -83,6 +83,24 @@
             </div>
             <div class="settings-section">
                 <h4>Layout & Style</h4>
+                <div class="setting-group">
+                    <label>Transparency:</label>
+                    <input type="range" id="transparencyControl" min="0" max="100" value="15" class="settings-input">
+                    <span id="transparencyValue">15%</span>
+                    <button class="settings-btn small reset-btn" id="resetTransparency">Reset</button>
+                </div>
+                <div class="setting-group">
+                    <label>Blur Effect:</label>
+                    <div class="toggle-switch">
+                        <input type="checkbox" id="blurToggle">
+                        <label for="blurToggle"></label>
+                    </div>
+                    <div class="blur-controls">
+                        <input type="range" id="blurControl" min="0" max="20" value="8" class="settings-input">
+                        <span id="blurValue">8px</span>
+                        <button class="settings-btn small reset-btn" id="resetBlur">Reset</button>
+                    </div>
+                </div>
                 <div class="setting-group">
                     <label>Link Size:</label>
                     <input type="range" id="linkSizeControl" min="12" max="38" value="16" class="settings-input">

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;
+    });
 });

startpage/styles.css

@@ -75,38 +75,41 @@ body {
     overflow: hidden; /* Prevent body scrolling */
 }
 
+/* Enhanced Container Styles */
 .container {
-    max-width: 800px;
+    max-width: 900px;
-    margin: 4rem auto;
+    margin: 2rem auto;
-    padding: 2rem;
+    padding: 2.5rem;
-    background-color: rgba(var(--base-rgb), 0.8);
+    background-color: rgba(var(--base-rgb), var(--container-opacity, 0.85));
-    border-radius: 16px;
+    border-radius: 24px;
-    backdrop-filter: blur(8px);
+    backdrop-filter: var(--container-blur, blur(12px));
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+    transition: all 0.3s ease;
     max-height: calc(100vh - 8rem); /* Account for margins */
     overflow-y: auto; /* Change from hidden to auto */
     scrollbar-width: thin; /* Firefox */
     scrollbar-color: var(--surface1) transparent; /* Firefox */
 }
 
+/* Improved Search Box */
 .search-box {
-    margin: 2rem 0;
+    margin: 2.5rem auto;
-    text-align: center;
+    max-width: 600px;
 }
 
 #search-input {
     width: 100%;
-    max-width: 600px;
+    padding: 1.2rem 1.5rem;
-    padding: 1rem;
+    border-radius: 12px;
-    border: none;
-    border-radius: 8px;
-    background-color: var(--surface0);
-    color: var(--text);
     font-size: 1.1rem;
+    transition: all 0.3s ease;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
 
 #search-input:focus {
-    outline: none;
+    box-shadow: 0 4px 16px rgba(var(--base-rgb), 0.2),
-    box-shadow: 0 0 0 2px var(--blue);
+                0 0 0 3px var(--blue);
+    transform: translateY(-1px);
 }
 
 .links-container {
@@ -115,16 +118,25 @@ body {
     gap: 2rem;
 }
 
+/* Enhanced Category Cards */
 .category {
     background-color: var(--surface0);
-    padding: 1.5rem;
+    padding: 1.8rem;
-    border-radius: 8px;
+    border-radius: 16px;
+    transition: all 0.3s ease;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+}
+
+.category:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
 }
 
 .category h2 {
-    margin: 0 0 1rem 0;
+    font-size: 1.3rem;
-    font-size: 1.2rem;
+    margin-bottom: 1.2rem;
-    color: var(--blue);
+    padding-bottom: 0.8rem;
+    border-bottom: 2px solid var(--surface1);
 }
 
 .category ul {
@@ -147,7 +159,15 @@ body {
     transition: all 0.2s;
     font-size: var(--link-size, 16px);
     line-height: 1.5;
-    padding: 0.25rem 0;
+    padding: 0.5rem;
+    border-radius: 8px;
+    transition: all 0.2s ease;
+}
+
+.container .links-container .category li a:hover {
+    background-color: var(--surface1);
+    transform: translateX(4px);
+    color: var(--pink);
 }
 
 .container .links-container .category li a i,
@@ -183,22 +203,27 @@ a:not(.container .links-container .category li a):hover {
     color: var(--pink);
 }
 
+/* Clock Section Enhancement */
 .clock-section {
     text-align: center;
-    margin-bottom: 2rem;
+    margin: 1rem 0 3rem;
 }
 
 .clock {
-    font-size: 3.5rem;
+    font-size: 4rem;
+    font-weight: 300;
+    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
     margin: 0;
     color: var(--pink);
     font-family: var(--font-mono, 'MapelMono, monospace');
 }
 
 #greeting {
-    font-size: 1.2rem;
+    font-size: 1.4rem;
+    font-weight: 500;
+    margin-bottom: 0.8rem;
+    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
     color: var(--blue);
-    margin-bottom: 0.5rem;
 }
 
 .image-controls {
@@ -223,11 +248,13 @@ a:not(.container .links-container .category li a):hover {
     background-color: var(--surface1);
 }
 
+/* Settings Button Animation */
 .settings-button {
     position: fixed;
     top: 1rem;
     right: 1rem;
-    background-color: var(--surface0);
+    backdrop-filter: blur(8px);
+    background-color: rgba(var(--base-rgb), 0.8);
     color: var(--text);
     width: 40px;
     height: 40px;
@@ -238,13 +265,16 @@ a:not(.container .links-container .category li a):hover {
     cursor: pointer;
     transition: transform 0.3s, background-color 0.2s;
     z-index: 1000;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .settings-button:hover {
     background-color: var(--surface1);
-    transform: rotate(45deg);
+    transform: rotate(90deg) scale(1.1);
 }
 
+/* Settings Modal Improvements */
 .settings-popup {
     display: none;
     position: fixed;
@@ -263,14 +293,15 @@ a:not(.container .links-container .category li a):hover {
     left: 50%;
     transform: translate(-50%, -50%);
     background-color: var(--base);
-    padding: 2rem;
+    padding: 2.5rem;
-    border-radius: 12px;
+    border-radius: 20px;
     min-width: 300px;
     max-height: 90vh;
     overflow-y: auto;
     box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
     scrollbar-width: thin;
     scrollbar-color: var(--surface1) transparent;
+    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.3);
 }
 
 .settings-content::-webkit-scrollbar {
@@ -290,11 +321,18 @@ a:not(.container .links-container .category li a):hover {
     background-color: var(--surface0);
 }
 
+/* Enhanced Settings Section */
 .settings-section {
     margin: 1.5rem 0;
-    padding: 1rem;
+    padding: 1.5rem;
     background-color: var(--surface0);
-    border-radius: 8px;
+    border-radius: 12px;
+    transition: all 0.2s ease;
+}
+
+.settings-section:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }
 
 .settings-section h4 {
@@ -302,20 +340,26 @@ a:not(.container .links-container .category li a):hover {
     color: var(--blue);
 }
 
+/* Better Button Styles */
 .settings-btn {
     background-color: var(--surface1);
     color: var(--text);
     border: none;
     padding: 0.5rem 1rem;
-    border-radius: 4px;
+    border-radius: 8px;
     cursor: pointer;
     transition: background-color 0.2s;
     margin: 0.5rem 0;
     width: 100%;
+    transition: all 0.2s ease;
+    font-weight: 500;
 }
 
 .settings-btn:hover {
     background-color: #585b70;
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    background-color: var(--blue);
 }
 
 #bgImage {
@@ -878,3 +922,121 @@ a:not(.container .links-container .category li a):hover {
     transform: translateY(-2px);
     background: var(--surface0);
 }
+
+/* Smooth Scrollbar */
+::-webkit-scrollbar {
+    width: 10px;
+}
+
+::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--surface1);
+    border-radius: 5px;
+    border: 3px solid var(--base);
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: var(--blue);
+}
+
+/* Toggle Switch Styles - Updated */
+.toggle-switch {
+    position: relative;
+    display: inline-block;
+    width: 100px; /* Reduced from 44px */
+    height: 20px; /* Reduced from 24px */
+    margin: 0 4px; /* Reduced from 8px */
+}
+
+.toggle-switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+.toggle-switch label {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: var(--surface0);
+    transition: .3s;
+    border-radius: 20px;
+}
+
+.toggle-switch label:before {
+    position: absolute;
+    content: "";
+    height: 14px; /* Reduced from 16px */
+    width: 14px; /* Reduced from 16px */
+    left: 3px; /* Adjusted from 4px */
+    bottom: 3px; /* Adjusted from 4px */
+    background-color: var(--text);
+    transition: .3s;
+    border-radius: 50%;
+}
+
+.toggle-switch input:checked + label {
+    background-color: var(--blue);
+}
+
+.toggle-switch input:checked + label:before {
+    transform: translateX(16px); /* Adjusted from 20px */
+}
+
+/* Blur and Transparency Controls */
+.setting-group {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    margin-bottom: 1rem;
+    padding: 0.8rem;
+    border-radius: 8px;
+    background: var(--surface1);
+}
+
+.setting-group label {
+    min-width: 100px;
+    font-weight: 500;
+}
+
+/* Blur Controls - Updated */
+.blur-controls {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    flex: 1;
+    margin-left: 0.25rem; /* Added small margin */
+}
+
+.blur-controls input[type="range"] {
+    flex: 1;
+}
+
+.blur-controls span {
+    min-width: 45px;
+    text-align: right;
+}
+
+.toggle-switch {
+    min-width: 44px;
+    margin: 0;
+}
+
+.setting-group input[type="range"] {
+    flex: 1;
+}
+
+.setting-group span {
+    min-width: 50px;
+    text-align: right;
+}
+
+.setting-group input[type="range"]:disabled {
+    cursor: not-allowed;
+}