feat: add background audio Pomodoro prototype

[foxhub2020]

Bounty Solution Submission

Problem Statement

This solves #1 by providing a minimal single-page Pomodoro timer prototype that keeps accurate time while inactive and schedules a Web Audio chime that can play when Chrome backgrounds or minimizes the tab.

Solution Approach

The solution is a dependency-free single HTML page. It validates a minutes-only input, displays an MM:SS countdown, and uses a wall-clock deadline instead of interval counting so inactive-tab throttling does not create timer drift. The Start click creates and resumes Web Audio inside Chrome's required user gesture, plays a near-silent unlock pulse, and schedules the completion chime on the AudioContext clock before the page goes into the background.

Technical Implementation

• Package Manager: None. The bounty issue asks for a single HTML file with embedded CSS/JS and no external dependencies.
• Database Setup: Not applicable.
• Environment Variables: None.
• Build Process: No build step. Open submissions/pomodoro-background-audio-foxhub2020/index.html directly in Chrome desktop or serve the repository with any static file server.

Testing Evidence

• Test Coverage: Browser self-test mode for input parsing and time formatting, plus Playwright/Chrome checks for self-test, running state, and completion reset.
• Critical Flows Tested: first render, invalid input rejection, start, pause/resume state, Web Audio unlock/scheduling status, completion reset to the configured time, and Chrome clock fast-forward behavior.
• Test Results:

git diff --check: PASS
prettier --no-config --check index.html TESTING.md: PASS
inline script parse check with new Function: PASS
Playwright + local Chrome browser self-test: PASS
Playwright clock fast-forward completion reset: PASS

Evidence files:

• submissions/pomodoro-background-audio-foxhub2020/evidence/selftest.png
• submissions/pomodoro-background-audio-foxhub2020/evidence/running.png
• submissions/pomodoro-background-audio-foxhub2020/evidence/complete.png

Demo Evidence

Choose ONE:

• Video Demo: submissions/pomodoro-background-audio-foxhub2020/evidence/demo.webm

Setup Instructions

Step-by-step instructions to run your code:

1. Clone this branch.
2. Open submissions/pomodoro-background-audio-foxhub2020/index.html in recent Chrome desktop.
3. Optional: run any static server from the repository root and open the same path through http://localhost.
4. For deterministic helper checks, open index.html?selftest=1.
5. For the background audio test, enter 1, press Start while the tab is active, then switch to another tab or app until the timer completes.

Database Setup

Not applicable.

Architectural Decisions

• Web Audio is unlocked from the Start click because Chrome blocks page-created audio until a user gesture occurs.
• The chime is scheduled on AudioContext.currentTime immediately after Start, so completion audio does not depend on throttled background JavaScript timers.
• The countdown derives remaining time from Date.now() and a stored deadline, so inactive tabs catch up accurately.
• Notification permission is optional; a denied notification does not affect the timer or audio path.
• Wake Lock is requested when available, but the app does not depend on it.
• The app remains a single HTML file with embedded CSS and JavaScript as requested by the bounty issue.

Bun/Yarn Justification

Not applicable. No package manager is used because the bounty deliverable is a dependency-free single HTML file.

---

Pre-submission Checklist:

• All bounty requirements met
• Tests written and passing
• Working demo available
• Code is self-explanatory
• Setup instructions complete
• @adrianmurage tagged for review

I confirm this submission meets all requirements and is ready for review.

Closes #1

@adrianmurage