Pomodoro-Timer

Der Pomodoro-Timer unterstützt die Pomodoro-Technik, eine Arbeitsmethode mit klar getrennten Fokus- und Pausenphasen. Klassisch arbeitet man 25 Minuten konzentriert, macht etwa 5 Minuten Pause und nimmt nach mehreren Durchgängen eine längere Erholung. Der Nutzen liegt weniger in der exakten Zahl als in der sichtbaren Begrenzung: Aufgaben werden kleiner, Ablenkungen lassen sich auf später verschieben, und Pausen verhindern, dass Konzentration unbemerkt abfällt. Das Werkzeug eignet sich für Lernen, Schreiben, Programmieren, Hausarbeit und wiederkehrende Routineaufgaben. Für Meetings, kreative Flow-Phasen oder körperlich belastende Arbeit sollten Dauer und Pausen flexibel angepasst werden. Bei gemeinsamer Nutzung sollten Eingaben, Annahmen und gewünschtes Ergebnis vorher klar sein, damit die Ausgabe nicht falsch interpretiert wird.

Die Pomodoro-Technik wurde von Francesco Cirillo in den späten 1980er Jahren veröffentlicht und definiert einen vierphasigen Zyklus: ein 25-minütiges Fokusintervall (ein Pomodoro), eine 5-minütige kurze Pause, wiederholt über vier Runden, dann eine 15-30-minütige lange Pause. Der Ablauf ist ein endlicher Zustandsautomat über vier Zustände (`work`, `shortBreak`, `longBreak`, `idle`) mit Übergängen, die von einem einzelnen Countdown-Timer gesteuert werden; der Rundenzähler wird nach jedem `work -> break`-Übergang erhöht und der lange-Pause-Zweig wird ausgelöst, wenn `round % roundsBeforeLong === 0`. Varianten wie 50/10 (Tiefenarbeit) und 52/17 (Draugiem-Group-Produktivitätsstudie) werden durch Parametrierung desselben FSM bereitgestellt. Einfache Zeitmessung verwendet `setInterval(tick, 1000)` und dekrementiert einen Zähler, aber JavaScript-Timer-Drift akkumuliert: Jeder Callback kann unter Last des Main-Threads 1003-1020 ms zu spät ausgelöst werden, und die HTML5 Page Visibility API zusammen mit Browser-Richtlinien begrenzt Timer in versteckten Tabs auf etwa 1 Hz in Chrome/Firefox/Safari (Safari kann bis zu 1 Auslösung/Minute gehen). Das driftresistente Muster speichert `endTimestamp = performance.now() + remainingMs` beim Start und berechnet dann bei jedem Tick `remainingMs = Math.max(0, endTimestamp - performance.now())` neu — ein Tab, der nach 10 Minuten Hintergrundzeit wiederkehrt, holt sofort auf statt 10 fiktive Sekunden zu zählen. `performance.now()` ist die hochauflösende monotone Uhr, die unempfindlich gegen Wandzeitkorrekturen (NTP, manuelle Zeitänderungen) ist; `Date.now()` wird nur beim Persistieren der Deadline über eine Seitenaktualisierung verwendet. Vier Browser-APIs machen den Timer nutzbar, während der Benutzer anderswo arbeitet. Die Web Audio API erzeugt den Phasenende-Ton ohne Asset-Aufwand: `new AudioContext()` -> `createOscillator()` bei 800 Hz -> `createGain()` mit Rampe über 200 ms -> `start()` dann `stop(currentTime + 0.2)`. Die Notifications API zeigt eine systemweite Benachrichtigung nach einmaliger Zustimmung durch `Notification.requestPermission()`, dann `new Notification('Fokus beendet', { body, icon, tag: 'pomodoro' })` (das `tag` dedupliziert schnelle Auslösungen). Die Wake Lock API fordert `navigator.wakeLock.request('screen')` an, um den Bildschirm während einer Fokussierung aktiv zu halten, und gibt ihn während der Pausen frei. Der `document.title` wird bei jedem Tick auf `mm:ss - Fokus` umgeschrieben, damit die Zeit in der Tab-Leiste sichtbar bleibt. Einstellungen (Dauern, Auto-Start, Ton) werden über `localStorage` (synchron, ~5 MB Origin-Quota) persistiert; die kreisförmige Fortschrittsanzeige ist ein SVG `<circle>` mit `stroke-dasharray = 2 * pi * r` und `stroke-dashoffset = dasharray * (1 - elapsed/total)`, das den Ring ohne Canvas-Overhead animiert. Hintergrundforschung zur Aufmerksamkeit — Cirillos 25-Minuten-Grenze, aber auch Arbeiten zur Zeitwahrnehmung bei ADHS und den Kosten von Kontextwechseln — erklärt, warum harte Unterbrechungen besser sind als ein weiches 'noch fünf Minuten'.

• FSM über vier Zustände (work/shortBreak/longBreak/idle); lange Pause wird ausgelöst bei `round % roundsBeforeLong === 0`. Standard 25/5/15 Minuten, 4 Runden; Varianten 50/10/30 (Tiefenarbeit) und 52/17 (Draugiem-Studie).
• Driftresistente Zeitmessung: `endTimestamp = performance.now() + remainingMs` speichern und `remainingMs = endTimestamp - performance.now()` bei jedem Tick neu berechnen — immun gegen `setInterval`-Drift und gegen Drosselung versteckter Tabs.
• `performance.now()` ist die hochauflösende monotone Uhr (unbeeinflusst von NTP oder manuellen Wandzeitänderungen); `Date.now()` wird nur zum Persistieren der Deadline über Seiten-Reload verwendet.
• Phasenende-Ton über Web Audio API: `new AudioContext()` -> `createOscillator()` (800-Hz-Sinus) -> `createGain()` mit linearer Rampe auf 0 über 200 ms -> `start()`/`stop()`. Keine Audio-Assets nötig.
• Systembenachrichtigungen über Notifications API: `Notification.requestPermission()` einmal, dann `new Notification(title, { body, tag: 'pomodoro' })`; das `tag` dedupliziert, wenn mehrere Phasen enden während der Tab versteckt ist.
• Screen Wake Lock API: `navigator.wakeLock.request('screen')` während der Fokussierung zur Unterdrückung der Bildschirmabschaltung; Freigabe bei Pause. Wake Locks werden automatisch freigegeben, wenn der Tab die Sichtbarkeit verliert, und müssen bei `visibilitychange` wiedererworben werden.
• Persistenz und UI: `localStorage` (~5 MB Quota) für Dauern/Auto-Start/Ton; SVG-Ring verwendet `stroke-dasharray = 2*pi*r` und animiert `stroke-dashoffset`; `document.title` wird auf `mm:ss - Phase` umgeschrieben für Sichtbarkeit in der Tab-Leiste.