A personal productivity timer built for deep work. Create structured focus sessions with named task blocks, break timers, notes, and checklists — then run them full-screen with audio cues and system notifications.
Built as a single HTML file + lightweight PHP backend. No framework, no build step, no database. Deploy it anywhere that runs PHP.
You build a session in the editor — a list of tasks, each with a focus duration and break time. Hit START and the app takes over your screen: full-screen timer, task name, countdown, and a progress bar. Audio beeps count down the last 3 seconds of each block. A ding plays when the block ends and the break starts automatically.
Sessions auto-save as you build them and get a shareable URL. You can pause mid-session and resume later exactly where you left off.
- Named sessions with 2-second debounced auto-save and shareable
?id=URLs - Add as many task blocks as you need
- Each task has: name, duration, break time, notes, and subtask checklist
- Drag handles to reorder tasks
- ↑ Bump any task to the top instantly
- Floating + button — add tasks from anywhere in the list, choose top or bottom position
- Estimated total session time shown at the bottom
- Session library to browse, open, copy, and delete saved sessions
- Task completion log with timestamps
- Full-screen focus mode — deep blue for work phases, calm teal for rest
- Large countdown digits, phase label, task name, and progress bar
- "Next up" display so you always know what's coming
- Audio beeps at 3-2-1, ding-dong at block end (Web Audio API — no audio files needed)
- System notifications when a timer ends and you're in another app
- +5 min button to extend the current block without breaking flow
- ↩ Redo task — jump back to the previous task if you weren't done
- Skip to break / Next task buttons
- ✓ Task complete to log the task and advance
- Quick-add tasks mid-session, insert at top or bottom of queue
- ✎ Note widget to jot thoughts mid-session, saved per task
- Skipped task notice on the DONE screen with one-tap resume
- Each task has one freeform notes field
- Plain lines → italic notes in the timer view
- Lines starting with
-→ interactive checkboxes - URLs auto-link during the timer
- Checked items animate to the bottom of the list
- Pause mid-session and exit — progress is saved
- Next time you open the session, choose to Resume or Start Fresh
- Completed tasks stay in the "Finished" section and don't reappear
- Describe your session in plain English
- Claude builds a structured block plan with appropriate durations and breaks
- Requires an Anthropic API key (see setup below)
- Works in Chrome on Mac, Windows, and Android
- Safari "Add to Home Screen" on iPhone
- Opens in its own window with no browser chrome
- App icon in your dock
- System notifications
- Service worker caching for fast loads
- Toggle between dark (default) and light themes
- Preference remembered across sessions
| Layer | What |
|---|---|
| Frontend | Single HTML file — vanilla JS, no framework |
| Styling | CSS custom properties, Google Fonts (Bebas Neue, DM Sans) |
| Audio | Web Audio API — synthesized tones, no audio files |
| Backend | PHP — flat JSON file storage, no database |
| PWA | Web App Manifest + Service Worker |
| AI | Anthropic Claude API (optional) |
No Node, no npm, no build step. Edit the HTML file, upload it, done.
- Any PHP host — shared hosting works great (DreamHost, Bluehost, SiteGround, etc.)
- HTTPS — required for PWA install and notifications, standard on any modern host
git clone https://github.com/msenese/focus-timer.git
cd focus-timercp claude-focus.example.php claude-focus.phpEdit claude-focus.php and replace YOUR_API_KEY_HERE with your key from console.anthropic.com.
Without this step everything works except the AI generator under the ⚙ ADVANCED toggle.
cp deploy.example.php deploy.phpEdit deploy.php with your webhook secret and server path. Add a webhook to your GitHub repo pointing at https://yourdomain.com/your-path/deploy.php. Every push deploys automatically in seconds.
Upload all files to your web server's public directory. The focus-sessions/ directory is created automatically on first save.
Make sure focus-sessions/ is writable by the web server (chmod 755 or 777 on some hosts).
Visit your deployed URL in Chrome → click the install icon in the address bar → installs to your dock with its own icon and window.
focus-timer/ ├── index.html # The entire app — HTML, CSS, and JS in one file ├── sessions.php # Save/load sessions API ├── log.php # Task completion log API ├── log-page.php # Task log viewer page ├── library.php # Saved sessions browser ├── claude-focus.example.php # AI generator proxy (copy and add your API key) ├── deploy.example.php # GitHub webhook auto-deploy (copy and configure) ├── manifest.json # PWA manifest ├── sw.js # Service worker for PWA caching ├── robots.txt # Tells search engines not to index the app └── icons/ ├── icon-192.png # PWA icon └── icon-512.png # PWA icon (large)
Everything lives in index.html. The color scheme uses CSS custom properties at the top:
:root {
--work: #7b8cff; /* indigo — work phase color */
--rest: #47c8ff; /* blue — rest phase color */
--bg: #0a0a0a; /* near-black background */
}Change --work and the entire timer theme shifts with it.
Every saved session gets a URL like ?id=abc123. Share the link and anyone can open the session, run it, and save their own copy. Great for sharing focus plans with a team or a client.
MIT — fork it, build your own, make it yours.