Focus Timer ⏰

A modern, feature-rich Pomodoro-style interval timer with persistent state and audio notifications.

✨ Features

• 🎯 Customizable Work & Break Sessions - Set your own work and break durations
• 💾 Persistent State - Timer continues running even after page reload or browser restart
• 🔔 Smart Notifications - Desktop notifications when phases complete
• 🔊 Audio Alerts - Optional sound notifications (can be toggled on/off)
• ⏸️ Pause & Resume - Full control with start, pause, and reset buttons
• 📱 Responsive Design - Works beautifully on desktop and mobile devices
• 🎨 Modern UI - Clean, gradient-based design with smooth animations
• 📊 Visual Feedback - Timer display pulses when active
• 🌐 Browser Tab Updates - See remaining time in your browser tab

🚀 Quick Start

1. Open index.html in your web browser
2. Set your desired work and break durations (default: 25 min work, 5 min break)
3. Enable audio alerts if desired
4. Click Start to begin your focus session
5. Get notified when it's time to take a break!

🔧 Technical Details

Files Structure

clocky/
├── index.html      # Main HTML structure
├── styles.css      # Modern, responsive styling
├── script.js       # Timer logic and state management
└── README.md       # This file

Technologies Used

• HTML5 - Semantic markup
• CSS3 - Modern styling with gradients and animations
• Vanilla JavaScript - No dependencies
• Web Audio API - For audio notifications
• Notifications API - For desktop alerts
• Cookies - For state persistence

🎮 Usage

Starting a Session

1. Configure your work duration (1-180 minutes)
2. Configure your break duration (1-60 minutes)
3. Click Start to begin

Controls

• Start - Begin or resume the timer
• Pause - Pause the current session (state is saved)
• Reset - Reset timer to work session start

Settings

• Enable audio alerts - Toggle sound notifications on phase completion
• Preferences are automatically saved and persist across sessions

💡 The Pomodoro Technique

This timer implements the Pomodoro Technique:

1. Work for a focused period (default 25 minutes)
2. Take a short break (default 5 minutes)
3. Repeat to maintain productivity and prevent burnout

🔒 Privacy

All data is stored locally in browser cookies. No external services or tracking.

🐛 Bug Fixes (v2.0)

• Fixed incomplete window.beforeunload event handler
• Improved cookie persistence with proper expiration
• Enhanced state management for reliable resume after reload
• Added validation for all user inputs
• Fixed timer accuracy with timestamp-based calculations

🎨 UI Improvements

• Modern gradient background (purple theme)
• Smooth animations and transitions
• Larger, more readable timer display (56px)
• Responsive design for all screen sizes
• Professional button styling with hover effects
• Better visual hierarchy with cards and sections

📝 License

Open source - feel free to use and modify!

🤝 Contributing

Contributions are welcome! Feel free to submit issues and pull requests.

---

Focus Timer v2.0 - Stay productive with the Pomodoro technique 🍅