Pomodoro Timer

Generiert eine komplette Pomodoro-Timer-Webapp mit Kreis-Anzeige, Statistiken und PWA-Support.

Der Prompt

Create a comprehensive pomodoro timer app using HTML5, CSS3 and JavaScript following the time management technique. Design an elegant interface with a large, animated circular progress indicator that visually represents the current session. Allow customization of work intervals (default ${Work Intervals:25min}), short breaks (default ${Short Breaks:5min}), and long breaks (default ${Long Breaks:15min}). Include a task list integration where users can associate pomodoro sessions with specific tasks. Add configurable sound notifications for interval transitions with volume control. Implement detailed statistics tracking daily/weekly productivity with visual charts. Use localStorage to persist settings and history between sessions. Make the app installable as a PWA with offline support and notifications. Add keyboard shortcuts for quick timer control (start/pause/reset). Include multiple theme options with customizable colors and fonts. Add a focus mode that blocks distractions during work intervals.

So nutzt du es

Den Prompt-Text kopieren (Button oben) und als System-Prompt bzw. erste Nachricht in ChatGPT, Claude oder einem lokalen Modell einfügen. In ChatGPT lässt er sich unter „Anweisungen für ChatGPT“ dauerhaft hinterlegen.

Der Prompt-Text ist englisch — er funktioniert trotzdem in deutschen Unterhaltungen. Für deutsche Antworten einfach am Ende ergänzen: „Antworte auf Deutsch.“

Im Detail

Umfangreicher Coding-Prompt, der eine vollständige Pomodoro-Timer-App aus HTML5, CSS3 und JavaScript generieren lässt — inklusive animiertem Kreis-Fortschrittsbalken, konfigurierbaren Arbeits-/Pausenintervallen, Aufgabenliste, Sound-Benachrichtigungen, Statistik-Charts, localStorage-Persistenz und PWA-Offline-Fähigkeit. Der Prompt ist detailliert genug, um in einem Rutsch eine funktionsfähige Basisversion zu erzeugen, und spart Zeit gegenüber dem Bauen von Grund auf. Für Einsteiger ein gutes Lernbeispiel für Vanilla-JS-App-Architektur; erfahrene Entwickler nutzen ihn eher als Gerüst zum Verfeinern. Der Funktionsumfang (PWA, Charts, Keyboard-Shortcuts) übersteigt oft das, was ein LLM fehlerfrei in einem Durchgang liefert — realistisch als iterativer Startpunkt zu verstehen.

Praxis-Tipp

Lassen Sie die App zunächst ohne PWA/Statistik generieren und fügen Sie Zusatzfunktionen in separaten Folge-Prompts hinzu, das erhöht die Erfolgsquote deutlich.

Siehe auch

• Build a UI Library for ESP32

Lizenz & Quelle

• Lizenz: CC0-1.0 (Public Domain)
• Quelle: awesome-chatgpt-prompts (GitHub)

Lade …