Slide To Shutdown Windows 11 !!exclusive!! -

// ---- 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';

.reset-note:hover color: #b7c3f0; text-decoration: underline; // ---- drag handling with mouse / touch

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <title>Windows 11 · Slide to Shutdown</title> <style> * margin: 0; padding: 0; box-sizing: border-box; user-select: none; /* prevent accidental text selection while sliding */ const trackRectCached = trackContainer

function onPointerUp(e) if (!isDragging) return; isDragging = false; document.body.style.cursor = ''; if (shutdownTriggered) // if shutdown triggered, don't snap back if(thumb) thumb.style.transform = `translateX($maxOffsetpx)`; return; // snap back to 0 if not fully completed (except if exactly at max) if (currentTranslateX < maxOffset - 1) // smooth snap to zero (with animation transition) thumb.style.transition = 'transform 0.2s cubic-bezier(0.2, 0.9, 0.4, 1.1)'; setThumbOffset(0, true); // reset transition after animation setTimeout(() => if(thumb) thumb.style.transition = ''; , 220); // update status hint statusDiv.innerHTML = `<span>↺ Slid back — try again to shutdown</span>`; setTimeout(() => if(!shutdownTriggered && statusDiv.innerHTML.includes('↺ Slid back')) statusDiv.innerHTML = `<span>🔘 Drag the circle to the end ➔</span>`; , 1500); else if (currentTranslateX >= maxOffset - 0.5 && !shutdownTriggered) // ensure shutdown is triggered if at the edge performShutdown(); // release pointer capture if (thumb) thumb.releasePointerCapture?.(e.pointerId);

function onPointerMove(e) if (!isDragging) return; if (shutdownTriggered) isDragging = false; return; e.preventDefault(); let clientX = e.clientX; if (e.touches) clientX = e.touches[0].clientX; e.preventDefault(); // get current track boundaries relative to dragZone if (!trackContainer) return; const trackBounds = trackContainer.getBoundingClientRect(); const thumbWidth = thumb.offsetWidth; // compute new left position: pointer position - start offset let newThumbLeft = clientX - startX; // clamp within track container bounds (left bound and right bound) const minLeft = trackBounds.left; const maxLeft = trackBounds.right - thumbWidth; let clampedLeft = Math.min(maxLeft, Math.max(minLeft, newThumbLeft)); // compute translateX = clampedLeft - originalLeft (original thumb position relative to track) // easier: get current transform? we compute relative offset from initial position. // but we want offset relative to left start = 0px. const trackRectCached = trackContainer.getBoundingClientRect(); const offsetFromTrackStart = clampedLeft - trackRectCached.left; let translateValue = Math.min(maxOffset, Math.max(0, offsetFromTrackStart)); // apply to thumb if(thumb) thumb.style.transform = `translateX($translateValuepx)`; currentTranslateX = translateValue; // update fill width based on progress updateFillAndLabel(translateValue); // if fully slid, performShutdown will be called inside setThumbOffset logic ( but we call manually also ) if (!shutdownTriggered && maxOffset > 0 && translateValue >= maxOffset - 0.2) // ensure full engagement if(translateValue >= maxOffset - 0.01) performShutdown(); else // snap to max if close enough? if(translateValue > maxOffset - 1 && translateValue < maxOffset) setThumbOffset(maxOffset, true);

.slider-track background: rgba(255, 255, 255, 0.05); border-radius: 100px; position: relative; cursor: grab; transition: background 0.1s;