// ==UserScript== // @name Deep Work Strict Focus Overlay // @namespace tweeks.io // @version 1.0.0 // @description Enforces a persistent Deep Work mode with a full-screen blocking overlay, countdown timer, duration selector, and URL whitelist. // @author Tweeks // @match *://*/* // @run-at document-start // @grant none // ==/UserScript== (function() { 'use strict'; const STORAGE_END = 'tw_deep_work_end_time'; const STORAGE_WHITELIST = 'tw_deep_work_whitelist'; const DURATIONS = [15, 30, 45, 60, 90, 120, 150, 180, 240, 300]; const Z = 2147482990; let shell; let overlay; let countdownEl; let whitelistInput; let durationSelect; let statusEl; let tickTimer; function getEndTime() { return Number(localStorage.getItem(STORAGE_END) || '0'); } function setEndTime(value) { localStorage.setItem(STORAGE_END, String(value)); } function getWhitelistText() { return localStorage.getItem(STORAGE_WHITELIST) || ''; } function getWhitelist() { return getWhitelistText().split(',').map(s => s.trim()).filter(Boolean); } function isWhitelisted() { const here = location.href; return getWhitelist().some(entry => here.includes(entry)); } function remainingMs() { return Math.max(0, getEndTime() - Date.now()); } function format(ms) { const total = Math.ceil(ms / 1000); const h = Math.floor(total / 3600); const m = Math.floor((total % 3600) / 60); const s = total % 60; return h > 0 ? `${h}:${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}` : `${m}:${String(s).padStart(2, '0')}`; } function injectStyles() { if (document.getElementById('tw-deep-work-style')) return; const style = document.createElement('style'); style.id = 'tw-deep-work-style'; style.textContent = ` #tw-deep-work-shell, #tw-deep-work-shell * { box-sizing: border-box !important; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; } #tw-deep-work-shell { position: fixed !important; right: 18px !important; bottom: 18px !important; z-index: ${Z} !important; color: #eef2ff !important; } #tw-deep-work-panel { width: 330px !important; max-width: calc(100vw - 36px) !important; background: rgba(15, 23, 42, .96) !important; border: 1px solid rgba(148, 163, 184, .28) !important; border-radius: 18px !important; padding: 16px !important; box-shadow: 0 24px 70px rgba(0,0,0,.38) !important; backdrop-filter: blur(12px) !important; } #tw-deep-work-shell.minimized #tw-deep-work-panel { width: auto !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } #tw-deep-work-shell.minimized .tw-expanded { display: none !important; } #tw-deep-work-toggle { border: 0 !important; border-radius: 999px !important; padding: 12px 16px !important; cursor: pointer !important; color: white !important; background: linear-gradient(135deg, #111827, #4f46e5) !important; font-weight: 800 !important; box-shadow: 0 12px 35px rgba(79,70,229,.38) !important; } #tw-deep-work-shell:not(.minimized) #tw-deep-work-toggle { width: 100% !important; margin-bottom: 12px !important; } #tw-deep-work-title { font-size: 18px !important; font-weight: 900 !important; margin: 0 0 4px !important; } #tw-deep-work-subtitle { color: #cbd5e1 !important; font-size: 12px !important; line-height: 1.45 !important; margin-bottom: 14px !important; } #tw-deep-work-panel label { display: block !important; font-size: 12px !important; color: #cbd5e1 !important; margin: 10px 0 6px !important; font-weight: 700 !important; } #tw-deep-work-panel select, #tw-deep-work-panel input { width: 100% !important; border: 1px solid rgba(148,163,184,.35) !important; border-radius: 12px !important; padding: 10px 12px !important; background: #020617 !important; color: #f8fafc !important; outline: none !important; } #tw-deep-work-start { width: 100% !important; margin-top: 14px !important; border: 0 !important; border-radius: 13px !important; padding: 12px !important; cursor: pointer !important; color: #020617 !important; background: #a7f3d0 !important; font-weight: 900 !important; } #tw-deep-work-status { margin-top: 10px !important; color: #93c5fd !important; font-size: 12px !important; min-height: 16px !important; } #tw-deep-work-overlay { position: fixed !important; inset: 0 !important; z-index: ${Z - 1} !important; display: none !important; align-items: center !important; justify-content: center !important; background: radial-gradient(circle at center, rgba(30,41,59,.98), rgba(2,6,23,.995)) !important; color: #f8fafc !important; pointer-events: auto !important; user-select: none !important; } #tw-deep-work-overlay.active { display: flex !important; } #tw-deep-work-card { width: min(620px, calc(100vw - 36px)) !important; text-align: center !important; padding: 34px !important; border-radius: 28px !important; border: 1px solid rgba(148,163,184,.22) !important; background: rgba(15,23,42,.72) !important; box-shadow: 0 30px 120px rgba(0,0,0,.55) !important; } #tw-deep-work-card h1 { margin: 0 0 12px !important; font-size: clamp(30px, 6vw, 58px) !important; letter-spacing: -.04em !important; } #tw-deep-work-countdown { font-size: clamp(44px, 10vw, 96px) !important; font-weight: 950 !important; margin: 18px 0 !important; font-variant-numeric: tabular-nums !important; } #tw-deep-work-note { color: #cbd5e1 !important; line-height: 1.6 !important; } `; (document.head || document.documentElement).appendChild(style); } function buildUI() { if (shell || !document.body) return; injectStyles(); overlay = document.createElement('div'); overlay.id = 'tw-deep-work-overlay'; overlay.innerHTML = '

Deep Work Mode

0:00

This focus block is locked until the countdown reaches zero. Essential whitelisted URLs remain available.

'; countdownEl = overlay.querySelector('#tw-deep-work-countdown'); shell = document.createElement('div'); shell.id = 'tw-deep-work-shell'; shell.className = 'minimized'; shell.innerHTML = `

Strict Deep Work

Start a persistent focus block. Refreshes and browser restarts will not remove the overlay before time expires.

Duration Whitelist essential URLs, comma-separated

`; document.body.appendChild(overlay); document.body.appendChild(shell); durationSelect = shell.querySelector('#tw-deep-work-duration'); whitelistInput = shell.querySelector('#tw-deep-work-whitelist'); statusEl = shell.querySelector('#tw-deep-work-status'); whitelistInput.value = getWhitelistText(); shell.querySelector('#tw-deep-work-toggle').addEventListener('click', () => { if (remainingMs() <= 0) shell.classList.toggle('minimized'); }); whitelistInput.addEventListener('input', () => localStorage.setItem(STORAGE_WHITELIST, whitelistInput.value)); shell.querySelector('#tw-deep-work-start').addEventListener('click', () => { localStorage.setItem(STORAGE_WHITELIST, whitelistInput.value); setEndTime(Date.now() + Number(durationSelect.value) * 60 * 1000); shell.classList.add('minimized'); tick(); }); } function tick() { const ms = remainingMs(); const active = ms > 0; const allowed = isWhitelisted(); if (active && !allowed) { overlay && overlay.classList.add('active'); shell && shell.classList.add('minimized'); } else { overlay && overlay.classList.remove('active'); if (!active && getEndTime()) setEndTime(0); } if (countdownEl) countdownEl.textContent = format(ms); if (statusEl) statusEl.textContent = active ? (allowed ? `Active, but this URL is whitelisted. ${format(ms)} left.` : `${format(ms)} remaining.`) : 'Inactive. Choose a duration and start when ready.'; } function init() { buildUI(); tick(); if (!tickTimer) tickTimer = setInterval(tick, 1000); } if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', init, { once: true }); } else { init(); } })();