🍅 LumaTimer

A beautiful, minimal Pomodoro timer designed to boost your productivity and maintain focus.

✨ Features

• Pomodoro Technique: 25-minute focus sessions with short and long breaks
• Customizable Timers: Adjust focus and break durations to your preference
• Session Tracking: Keep track of completed focus sessions
• Visual Progress: Animated circular progress indicator
• Sound Notifications: Optional audio alerts when timers complete
• Auto-start Options: Automatically begin breaks or focus sessions
• Persistent Settings: Your preferences are saved locally
• Responsive Design: Works perfectly on desktop and mobile devices
• Modern UI: Clean, minimal interface with smooth animations

🚀 Quick Start

Live Demo

Visit the live demo: https://cqilg.github.io/LumaTimer/

Run Locally

1. Clone the repository:

git clone https://github.com/cqilg/LumaTimer.git

2. Navigate to the project directory:

cd LumaTimer

3. Open index.html in your browser or use a local server:

# Using Python 3
python -m http.server 8000

# Using Node.js with npx
npx serve

# Using PHP
php -S localhost:8000

4. Visit http://localhost:8000 in your browser

📁 Project Structure

LumaTimer/
├── index.html          # Main HTML file
├── css/
│   └── styles.css      # All styles and animations
├── js/
│   └── script.js       # Timer logic and functionality
├── assets/
│   └── favicon.svg     # Site favicon
├── docs/
│   └── preview.png     # Project preview image
└── README.md           # Project documentation

🎯 How to Use

1. Choose Your Mode: Select Focus (25 min), Short Break (5 min), or Long Break (15 min)
2. Start the Timer: Click the Start button to begin your session
3. Stay Focused: Work during focus sessions, relax during breaks
4. Track Progress: Complete 4 focus sessions to earn a long break
5. Customize: Click the settings icon to adjust durations and preferences

⚙️ Settings

Customize LumaTimer to match your workflow:

• Focus Duration: Adjust your focus session length (1-60 minutes)
• Short Break Duration: Set your short break time (1-30 minutes)
• Long Break Duration: Configure long break duration (1-60 minutes)
• Sessions Until Long Break: Number of focus sessions before a long break (1-8)
• Sound Notifications: Toggle audio alerts on timer completion
• Auto-start Breaks: Automatically begin breaks after focus sessions
• Auto-start Focus: Automatically begin focus after breaks

All settings are saved automatically in your browser's local storage.

🛠️ Technologies Used

• HTML5: Semantic markup
• CSS3: Modern styling with CSS Grid, Flexbox, and animations
• Vanilla JavaScript: No frameworks, pure ES6+ JavaScript
• Web APIs: localStorage, Audio API, SVG animations

🌟 Browser Support

LumaTimer works on all modern browsers:

• Chrome/Edge (latest)
• Firefox (latest)
• Safari (latest)
• Opera (latest)

📝 License

This project is open source and available under the MIT License.

🤝 Contributing

Contributions, issues, and feature requests are welcome!

1. Fork the project
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

💡 Inspiration

Built with the Pomodoro Technique in mind - a time management method developed by Francesco Cirillo in the late 1980s.

📧 Contact

Project Link: https://github.com/cqilg/LumaTimer

Live Demo: https://cqilg.github.io/LumaTimer/

---

Made with ❤️ and ☕ | Focus. Break. Repeat. 🌿