From 66e88f284ab4c5870c188ebae980e5b876eff5f3 Mon Sep 17 00:00:00 2001 From: ploszukiwacz Date: Mon, 3 Feb 2025 19:49:23 +0100 Subject: [PATCH] QOL pt. 2 :3 --- startpage/index.html | 18 ++++ startpage/js/main.js | 78 ++++++++++++++- startpage/styles.css | 228 ++++++++++++++++++++++++++++++++++++------- 3 files changed, 289 insertions(+), 35 deletions(-) diff --git a/startpage/index.html b/startpage/index.html index 2a70c74..01a601f 100755 --- a/startpage/index.html +++ b/startpage/index.html @@ -83,6 +83,24 @@

Layout & Style

+
+ + + 15% + +
+
+ +
+ + +
+
+ + 8px + +
+
diff --git a/startpage/js/main.js b/startpage/js/main.js index 963d564..3be8cb8 100755 --- a/startpage/js/main.js +++ b/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; + }); }); \ No newline at end of file diff --git a/startpage/styles.css b/startpage/styles.css index 7459d4a..50c9972 100755 --- a/startpage/styles.css +++ b/startpage/styles.css @@ -75,38 +75,41 @@ body { overflow: hidden; /* Prevent body scrolling */ } +/* Enhanced Container Styles */ .container { - max-width: 800px; - margin: 4rem auto; - padding: 2rem; - background-color: rgba(var(--base-rgb), 0.8); - border-radius: 16px; - backdrop-filter: blur(8px); + max-width: 900px; + margin: 2rem auto; + padding: 2.5rem; + background-color: rgba(var(--base-rgb), var(--container-opacity, 0.85)); + border-radius: 24px; + 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; - text-align: center; + margin: 2.5rem auto; + max-width: 600px; } #search-input { width: 100%; - max-width: 600px; - padding: 1rem; - border: none; - border-radius: 8px; - background-color: var(--surface0); - color: var(--text); + padding: 1.2rem 1.5rem; + border-radius: 12px; 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 0 0 2px var(--blue); + box-shadow: 0 4px 16px rgba(var(--base-rgb), 0.2), + 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; - border-radius: 8px; + padding: 1.8rem; + 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.2rem; - color: var(--blue); + font-size: 1.3rem; + margin-bottom: 1.2rem; + 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; - border-radius: 12px; + padding: 2.5rem; + 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; +}