diff --git a/resources/js/theme.js b/resources/js/theme.js index d82284a..346e6e8 100644 --- a/resources/js/theme.js +++ b/resources/js/theme.js @@ -19,4 +19,46 @@ if(localStorage.theme) { } else { // Default Dark Theme localStorage.theme = 'dark'; -} \ No newline at end of file +} + +// Ability to disable blur effects for slower devices +const LOCAL_STORAGE_KEY = 'blur'; +const blurCheckbox = document.querySelector("input[type='checkbox']#toggleBlur"); + +function setCSSFilter(selector, value) { + document.querySelectorAll(selector).forEach(el => { + el.style.backdropFilter = value + }); +} + +function applyBlur(enabled) { + if (!enabled) { + setCSSFilter('.backdrop-blur, .backdrop-blur-sm, .backdrop-blur-lg', 'none'); + return; + } + + setCSSFilter('.backdrop-blur-lg', 'blur(16px)'); + setCSSFilter('.backdrop-blur', 'blur(8px)'); + setCSSFilter('.backdrop-blur-sm', 'blur(4px)'); +} + +function initBlurToggle() { + const storedValue = localStorage.getItem(LOCAL_STORAGE_KEY); + const enabled = storedValue === null ? true : storedValue === 'true'; + + // initialize UI and DOM + applyBlur(enabled); + if (blurCheckbox) blurCheckbox.checked = enabled; + + // add event listener + if (blurCheckbox) { + blurCheckbox.addEventListener('click', (e) => { + console.log("Received Event"); + const isEnabled = e.target.checked; + applyBlur(isEnabled); + localStorage.setItem(LOCAL_STORAGE_KEY, isEnabled ? 'true' : 'false'); + }); + } +} + +initBlurToggle(); \ No newline at end of file diff --git a/resources/views/layouts/navigation.blade.php b/resources/views/layouts/navigation.blade.php index ec5af3d..86fee6c 100644 --- a/resources/views/layouts/navigation.blade.php +++ b/resources/views/layouts/navigation.blade.php @@ -59,6 +59,11 @@ + + {{-- Expiremental --}} + + @include('partials.blurswitcher') + diff --git a/resources/views/partials/blurswitcher.blade.php b/resources/views/partials/blurswitcher.blade.php new file mode 100644 index 0000000..5cd7775 --- /dev/null +++ b/resources/views/partials/blurswitcher.blade.php @@ -0,0 +1,36 @@ +
+

{{ __('Blur effects') }}

+
+
+ +
+
+