Slide To Shutdown Windows 11 New! 〈2024〉

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;

/* the filled part (progress behind thumb) */ .slider-fill position: absolute; top: 0; left: 0; height: 100%; background: linear-gradient(90deg, #3b7cff, #5a9eff); border-radius: 100px; width: 0%; transition: width 0.05s linear; pointer-events: none; box-shadow: inset 0 1px 1px rgba(255,255,255,0.3); slide to shutdown windows 11

/* slider container — modern Windows 11 style track */ .slider-container background: rgba(10, 14, 23, 0.7); border-radius: 100px; padding: 0.45rem; box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255,255,255,0.05); margin: 1rem 0 0.8rem; transition: all 0.1s; body min-height: 100vh

<div class="slider-container"> <div class="slider-track" id="sliderTrack"> <div class="drag-zone" id="dragZone"> <div class="slider-fill" id="sliderFill"></div> <div class="slide-label" id="slideLabel">➡️ Slide to shutdown ⬅️</div> <div class="slider-thumb" id="sliderThumb"> <span class="thumb-icon">⏺</span> </div> </div> </div> </div> background: radial-gradient(circle at 20% 30%

// reset button handler resetBtn.addEventListener('click', (e) => e.preventDefault(); if(shutdownInProgress && !shutdownTriggered) // weird case but just reset resetShutdownUI(); // also ensure that if we reset after shutdown, slider fully reinitialized recalcMaxOffset(); // force pointer release isDragging = false; );

// initial recalculation and safety function init() initEvents(); recalcMaxOffset(); setThumbOffset(0, true); statusDiv.innerHTML = `<span>🔘 Drag the circle to the end ➔</span>`; init(); )(); </script> </body> </html>

// ---- drag handling with mouse / touch ---- function onPointerDown(e) if (shutdownTriggered) e.preventDefault(); // add little shake to indicate blocked const status = document.getElementById('statusMsg'); status.classList.add('shake-warning'); setTimeout(() => status.classList.remove('shake-warning'), 400); status.innerHTML = `<span>🔒 System already shutdown — press reset</span>`; return; e.preventDefault(); // get clientX from touch or mouse let clientX = e.clientX; if (e.touches) clientX = e.touches[0].clientX; e.preventDefault(); isDragging = true; // store start thumb offset and start pointer X const thumbRect = thumb.getBoundingClientRect(); const currentThumbLeft = thumbRect.left; startX = clientX - currentThumbLeft; // set capturing for smooth move thumb.setPointerCapture(e.pointerId); document.body.style.cursor = 'grabbing';