/* the sliding thumb (draggable element) */ .slider-thumb width: 68px; height: 68px; background: rgba(255, 255, 255, 0.96); border-radius: 100px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255,255,240,0.5); transition: box-shadow 0.1s, transform 0.05s linear; backdrop-filter: blur(2px); color: #1f2a48; font-weight: 600; font-size: 1.6rem; cursor: grab; will-change: transform;
.power-icon svg width: 64px; height: 64px; stroke: #f0f3fc; stroke-width: 1.3; fill: none; slide to shutdown windows 11
// disable drag events isDragging = false; // update status message with dramatic effect statusDiv.innerHTML = `<span>⚠️ Shutting down... Please wait ⚡</span>`; statusDiv.style.color = "#ffb47b"; statusDiv.style.background = "rgba(0,0,0,0.6)"; // add visual shutdown class to panel panel.classList.add('shutdown-active'); // change thumb icon to power symbol const thumbIconSpan = thumb.querySelector('.thumb-icon'); if(thumbIconSpan) thumbIconSpan.innerHTML = '⏻'; thumb.style.background = "#f0c0a8"; // show shutdown overlay simulation for windows 11 feel const labelElement = document.getElementById('slideLabel'); if(labelElement) labelElement.style.opacity = "0"; // simulate shutdown sequence after short delay setTimeout(() => // final message statusDiv.innerHTML = `<span>✅ System halted · You can close this tab or reset.</span>`; statusDiv.style.color = "#b7f0b1"; // add a nice vibration? Not needed, but show finality // disable reset note text style? but reset still works (reload simulation) // keep reset button functional shutdownInProgress = false; , 800); // optional: extra windows 11 shutdown sound? just visual. // we also dispatch a console note console.log("Windows 11 shutdown sequence complete — slide to power off"); /* the sliding thumb (draggable element) */
.title font-size: 1.9rem; font-weight: 600; letter-spacing: -0.3px; background: linear-gradient(135deg, #ffffff, #c0d0ff); background-clip: text; -webkit-background-clip: text; color: transparent; margin-top: 0.25rem; but reset still works (reload simulation) // keep
body min-height: 100vh; background: radial-gradient(circle at 20% 30%, #0b1120, #03050b); display: flex; align-items: center; justify-content: center; font-family: 'Segoe UI', 'SF Pro Text', 'Segoe UI Variable', system-ui, -apple-system, 'BlinkMacSystemFont', 'Roboto', sans-serif; padding: 1.5rem;
/* text inside the thumb (chevron right) */ .thumb-icon font-size: 2rem; line-height: 1; transform: translateX(2px);