/* MAIN WINDOW AREA (DESKTOP BACKGROUND WITH ICONS + WIDGETS) */ .desktop-area background: rgba(10, 14, 23, 0.6); margin: 1.2rem; border-radius: 1.4rem; padding: 1.5rem; transition: all 0.2s cubic-bezier(0.2, 0.9, 0.4, 1.1); backdrop-filter: blur(0px); /* controlled dynamically */ border: 1px solid rgba(255,255,255,0.05);
function updateBlurUI(value) const floatVal = parseFloat(value); if (isNaN(floatVal)) return; currentBlur = floatVal; const formatted = currentBlur.toFixed(1); blurValueDisplay.innerText = `$formattedpx`; if (liveBlurSpan) liveBlurSpan.innerText = `$formattedpx`; applyBlur(currentBlur);
/* THE "BLUR PC" CORE WIDGET */ .blur-pc background: #0f1119e6; border-radius: 1.8rem; backdrop-filter: blur(2px); overflow: hidden; width: 100%; max-width: 1100px; min-width: 280px; box-shadow: 0 20px 35px -12px black; transition: all 0.2s ease;
init(); })(); </script> </body> </html>
/* dynamic blur effect demonstration */ .highlight-blur transition: all 0.2s;
.blur-badge span font-weight: bold; font-size: 1rem;
// interactive icon clicks (just simulate desktop actions with a toast) function bindIconActions() const icons = [ el: docIcon, name: "Documents", msg: "📄 Opening 'My Documents' — blur protected storage" , el: photoIcon, name: "Gallery", msg: "🖼️ Gallery would show blurred previews (matching current blur)" , el: settingsIcon, name: "Blur FX", msg: `⚙️ Blur settings: intensity = $currentBlur.toFixed(1)px` , el: browserIcon, name: "Web Canvas", msg: "🌐 Browser canvas: rendered under blur effect" , el: terminalIcon, name: "Terminal", msg: ">_ BlurPC terminal: 'blur' command active." ]; icons.forEach(icon => if (!icon.el) return; icon.el.addEventListener('click', (e) => e.stopPropagation(); showToastMessage(`$icon.msg`, "#b0e0ff"); // extra special: settings updates current blur info dynamically if (icon.name === "Blur FX") setTimeout(() => showToastMessage(`Current blur radius: $currentBlur.toFixed(1)px`, "#7df9ff"); , 400); ); ); Blur PC
.icon-label font-size: 0.8rem; font-weight: 500; color: #eef5ff; text-shadow: 0 1px 2px black;
/* ICON GRID (simulated windows shortcuts) */ .icon-group display: flex; flex-direction: column; align-items: center; gap: 10px; background: rgba(255,255,255,0.03); backdrop-filter: blur(2px); padding: 14px 8px; border-radius: 20px; transition: transform 0.15s, background 0.2s; cursor: pointer;
.blur-value background: #010414; padding: 4px 10px; border-radius: 30px; font-family: monospace; font-weight: bold; font-size: 0.85rem; color: #7df9ff; min-width: 65px; text-align: center; /* MAIN WINDOW AREA (DESKTOP BACKGROUND WITH ICONS
input[type="range"]::-webkit-slider-thumb -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #5bc0ff; cursor: pointer; box-shadow: 0 0 6px cyan; border: none;
<!-- Desktop Area: background layer that gets blurred --> <div class="desktop-area" id="desktopArea"> <div class="desktop-content"> <!-- classic desktop shortcuts / icons --> <div class="icon-group" id="docIcon"> <div class="icon-emoji">📁</div> <div class="icon-label">Documents</div> </div> <div class="icon-group" id="photoIcon"> <div class="icon-emoji">🖼️</div> <div class="icon-label">Gallery</div> </div> <div class="icon-group" id="settingsIcon"> <div class="icon-emoji">⚙️</div> <div class="icon-label">Blur FX</div> </div> <div class="icon-group" id="browserIcon"> <div class="icon-emoji">🌐</div> <div class="icon-label">Web Canvas</div> </div> <div class="icon-group" id="terminalIcon"> <div class="icon-emoji">💻</div> <div class="icon-label">Terminal</div> </div> </div>