[Feature]: Add Glassmorphism Effect Option #79

index.html

@@ -28,6 +28,7 @@
     <script defer src="scripts/alert-modal.js"></script>
     <script defer src="scripts/wallpaper.js"></script>
     <script defer src="scripts/widgets-transparency.js"></script>
+    <script defer src="scripts/glassmorphism.js"></script>
     <script defer src="scripts/clock.js"></script>
     <script defer src="scripts/weather.js"></script>
     <script defer src="scripts/custom-text.js"></script>
@@ -1715,6 +1716,35 @@ <h1>Material You New Tab</h1>
                             </div>
                         </div>
                     </div>
+
+                    <!-- Glassmorphism Control -->
+                    <div class="ttcont unflex" id="glassControl">
+                        <div class="texts">
+                            <div class="bigText" id="glassmorphismText">Glassmorphism</div>
+                            <div class="infoText" id="glassmorphismInfo">Enable frosted glass (backdrop blur)</div>
+                        </div>
+                        <label class="switch">
+                            <input id="glassCheckbox" type="checkbox">
+                            <span class="toggle"></span>
+                        </label>
+                    </div>
+
+                    <div id="glassBlurControl" class="opacityBarControl">
+                        <div class="spacer"></div>
+                        <div class="ttcont">
+                            <div class="texts">
+                                <div class="bigText" id="glassBlurTitle">Blur Intensity</div>
+                                <div class="infoText" id="glassBlurDesc">Adjust backdrop blur</div>
+                            </div>
+                        </div>
+                        <div class="opacityBar">
+                            <div class="thinLine"></div>
+                            <div class="opacitySlider" id="glassSlider">
+                                <div id="glassBlurLevel">8px</div>
+                            </div>
+                        </div>
+                    </div>
+
                     <!-- End of opacity Bar Control -->
 
                     <!-- end of themingStuff -->

locales/en.js

@@ -156,6 +156,13 @@ const en = {
     // Wallpaper and settings
     "uploadWallpaperText": "Upload Wallpaper",    // Keep this short
     "rangColor": "Pick color",    // Keep this short
+
+    // Glassmorphism
+    "glassmorphismText": "Glassmorphism",
+    "glassmorphismInfo": "Enable frosted glass (backdrop blur)",
+    "glassBlurTitle": "Blur Intensity",
+    "glassBlurDesc": "Adjust backdrop blur",
+
     "opacityTitle": "Opacity",
     "adjustOpacityDesc": "Adjust interface transparency",
     "backupText": "Backup",

scripts/glassmorphism.js

@@ -0,0 +1,96 @@
+/*
+ * Glassmorphism feature
+ * Adds optional backdrop blur and supports a toggle + blur intensity slider
+ */
+
+const glassCheckbox = document.getElementById("glassCheckbox");
+const glassBar = document.querySelector("#glassBlurControl .opacityBar");
+const glassSlider = document.getElementById("glassSlider");
+const glassBlurLevel = document.getElementById("glassBlurLevel");
+
+const MAX_BLUR = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--glass-max-blur')) || 30;
+
+function setGlassBlur(px) {
+    const clamped = Math.max(0, Math.min(MAX_BLUR, Math.round(px)));
+    const percent = (clamped / MAX_BLUR) * 100;
+    glassSlider.style.width = `${percent}%`;
+    glassBlurLevel.textContent = `${clamped}px`;
+    document.documentElement.style.setProperty('--glass-blur', `${clamped}px`);
+    localStorage.setItem('glassBlur', clamped);
+}
+
+function setGlassEnabled(enabled) {
+    const control = document.getElementById('glassBlurControl');
+    if (enabled) {
+        document.documentElement.classList.add('glass-enabled');
+        localStorage.setItem('glassEnabled', '1');
+        if (control) control.classList.remove('disabled');
+        if (glassSlider) glassSlider.setAttribute('aria-disabled', 'false');
+        if (glassCheckbox) glassCheckbox.setAttribute('aria-checked', 'true');
+    } else {
+        document.documentElement.classList.remove('glass-enabled');
+        localStorage.setItem('glassEnabled', '0');
+        if (control) control.classList.add('disabled');
+        if (glassSlider) glassSlider.setAttribute('aria-disabled', 'true');
+        if (glassCheckbox) glassCheckbox.setAttribute('aria-checked', 'false');
+    }
+}
+
+// Drag / click handling (similar to other sliders in the project)
+function handleGlassDrag(e) {
+    const clientX = e.type.startsWith("touch") ? e.touches[0].clientX : e.clientX;
+    const rect = glassBar.getBoundingClientRect();
+    let newPos = clientX - rect.left;
+    newPos = Math.max(0, Math.min(rect.width, newPos));
+    const percentage = +((newPos / rect.width) * 100).toFixed(2);
+    const px = (percentage / 100) * MAX_BLUR;
+    setGlassBlur(px);
+}
+
+function startGlassDrag() {
+    const onMove = e => handleGlassDrag(e);
+    const onEnd = () => {
+        ["mousemove", "touchmove"].forEach(evt => document.removeEventListener(evt, onMove));
+        ["mouseup", "touchend"].forEach(evt => document.removeEventListener(evt, onEnd));
+    };
+    ["mousemove", "touchmove"].forEach(evt => document.addEventListener(evt, onMove));
+    ["mouseup", "touchend"].forEach(evt => document.addEventListener(evt, onEnd));
+}
+
+["mousedown", "touchstart"].forEach(evt => {
+    glassBar.addEventListener(evt, e => {
+        e.preventDefault();
+        handleGlassDrag(e);
+        startGlassDrag();
+    }, { passive: false });
+});
+
+// Initialize from saved state
+const savedGlassEnabled = localStorage.getItem('glassEnabled') === '1';
+const savedGlassBlur = Number(localStorage.getItem('glassBlur')) || 8;
+
+setGlassBlur(savedGlassBlur);
+setGlassEnabled(savedGlassEnabled);
+if (glassCheckbox) glassCheckbox.checked = savedGlassEnabled;
+
+// Wire up the checkbox
+if (glassCheckbox) {
+    glassCheckbox.setAttribute('role', 'switch');
+    glassCheckbox.setAttribute('aria-label', 'Toggle glassmorphism');
+    glassCheckbox.addEventListener('change', () => {
+        setGlassEnabled(glassCheckbox.checked);
+    });
+}
+
+// Initialize disabled state for the control if needed
+const glassBlurControl = document.getElementById('glassBlurControl');
+if (glassBlurControl) {
+    // reflect current enabled state
+    if (!savedGlassEnabled) glassBlurControl.classList.add('disabled');
+}
+
+// Expose a small API for other scripts if needed
+window.glassmorphism = {
+    setEnabled: setGlassEnabled,
+    setBlur: setGlassBlur,
+};

scripts/languages.js

@@ -221,6 +221,13 @@ function applyLanguage(lang) {
         "dontShowTips",
         "aiSettingsIntro",
         "resetAISettingsBtn",
+
+        /* Glassmorphism */
+        "glassmorphismText",
+        "glassmorphismInfo",
+        "glassBlurTitle",
+        "glassBlurDesc",
+
         "opacityTitle",
         "adjustOpacityDesc",
         "footerToastTitle",

style.css

@@ -34,6 +34,12 @@
 	--textColorDark-blue: #1b3041;
 	--whitishColor-blue: #ffffff;
 
+	/* Glassmorphism variables */
+	--glass-blur: 0px; /* applied when glass mode is enabled */
+	--glass-saturation: 160%;
+	--glass-alpha: 0.6;
+	--glass-max-blur: 30px;
+
 	/* 🔴🔴🔴 */
 	--bg-color-red: #fdbdbd;
 	--accentLightTint-red: #ffe7e7;
@@ -1867,6 +1873,44 @@ body[data-bg="wallpaper"] .humidityBar .thinLine {
 	font-size: 1rem;
 }
 
+/* Glassmorphism styles */
+/* Elements with .bgLightTint (used across the UI) will gain backdrop blur when glass mode is enabled */
+body.glass-enabled .bgLightTint,
+body.glass-enabled .searchbar,
+body.glass-enabled .tiles,
+body.glass-enabled .lrectangle,
+body.glass-enabled .modal-content,
+body.glass-enabled .ai-tools-list,
+body.glass-enabled .bookmark-sidebar,
+body.glass-enabled .liquidGlass-wrapper,
+body.glass-enabled .menuBar,
+body.glass-enabled .ai-modal-content {
+	-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
+	backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
+	transition: background-color 200ms ease, backdrop-filter 200ms ease;
+}
+
+/* Background tint adapts to light/dark theme */
+body.glass-enabled:not(.dark-theme) .bgLightTint {
+	background-color: rgba(255,255,255,var(--glass-alpha));
+}
+
+body.dark-theme.glass-enabled .bgLightTint {
+	background-color: rgba(0,0,0,calc(var(--glass-alpha) - 0.12));
+}
+
+/* Disabled state for controls (used when glass is off) */
+.opacityBarControl.disabled {
+	opacity: 0.55;
+	pointer-events: none;
+	filter: grayscale(0.18);
+}
+
+/* Small helper for slider when aria-disabled is true */
+.opacityBar .opacitySlider[aria-disabled="true"] {
+	opacity: 0.6;
+}
+
 /* End of _____________________- */
 
 /* ------------Weather Pill------------- */