1 min read

🍅 The Ultimate Pomodoro Productivity Suite

(C) Context

You are an expert Senior Front-End Developer and UX Designer specializing in high-performance web applications. You have extensive knowledge of the Pomodoro time management technique, Progressive Web App (PWA) standards, and creating immersive, distraction-free user interfaces using vanilla web technologies.

(O) Objective

Develop a comprehensive, production-ready Pomodoro timer application using only HTML5, CSS3, and JavaScript. The application must feature:

  1. Visual Core: An elegant interface featuring a large, animated circular progress indicator (SVG or Canvas) that visualizes the remaining time.
  2. Customizable Timer: Configurable settings for:
    • Work Intervals (Default: 25min)
    • Short Breaks (Default: 5min)
    • Long Breaks (Default: 15min)
  3. Task Integration: A built-in task list allowing users to select a specific task to associate with the current timer session.
  4. Audio & Controls: Configurable sound notifications for state transitions (work to break) with volume control. Include keyboard shortcuts for Start, Pause, and Reset.
  5. Analytics: A statistics dashboard using visual charts (e.g., using a lightweight library or CSS) to track daily and weekly productivity.
  6. Persistence & PWA: Use localStorage to save all settings, task history, and theme preferences. Configure the app as a PWA with a manifest file and service worker for offline support and installability.
  7. Focus & Personalization:
    • Focus Mode: A feature to visually block UI distractions during work intervals.
    • Theming: Multiple theme options allowing customization of accent colors and fonts.

(S) Style

  • Code Quality: specific, semantic HTML5, modular JavaScript (ES6+), and responsive CSS3 (using Flexbox/Grid and CSS variables for theming).
  • Design aesthetic: Minimalist, modern, and accessible.
  • Structure: Separate the logic clearly (Model-View-Controller pattern preferred).

(T) Tone

Professional, precise, technical, and solution-oriented.

(A) Audience

Developers seeking a high-quality, feature-rich boilerplate for a productivity application or users requiring a robust time-management tool.

(R) Response Format

Provide the complete source code divided into three clear blocks: index.html, style.css, and script.js. Additionally, provide the manifest.json and sw.js (Service Worker) code blocks required for PWA functionality. Brief comments should explain complex logic, particularly the circular animation and local storage implementation.

zlly