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;
// dimensions & state let isDragging = false; let startX = 0; let currentTranslateX = 0; // current thumb offset (px) let maxOffset = 0; // max allowed offset (px) let trackRect = null; let animationFrame = null; let shutdownTriggered = false; // once shutdown is triggered, interaction locked slide to shutdown windows 11
.slider-track background: rgba(255, 255, 255, 0.05); border-radius: 100px; position: relative; cursor: grab; transition: background 0.1s; body min-height: 100vh
/* 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; background: radial-gradient(circle at 20% 30%
/* main card: fluent design, acrylic-like glass */ .shutdown-panel background: rgba(20, 25, 40, 0.68); backdrop-filter: blur(24px); border-radius: 3rem; padding: 2rem 2rem 2.2rem; box-shadow: 0 25px 45px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08) inset; width: 100%; max-width: 560px; transition: all 0.2s ease;
<!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 */
.slider-track:active cursor: grabbing;