Reimagining the Pomodoro timer. Awaken your inner focus and crush every task one by one.
A beautifully crafted productivity tool that combines the proven Pomodoro Technique with modern design and powerful task management. Built with vanilla JavaScript, no frameworks required.
- Space - Start/Pause timer (most natural)
- R - Reset timer (quick access)
- Escape - Pause if running (quick panic button)
- Smart detection - Shortcuts disabled when typing in inputs
- Customizable focus sessions (5, 10, 15, or 25 minutes)
- Beautiful animated progress ring with gradient effects
- Browser tab title updates to show remaining time
- Desktop notifications when sessions complete
- Audio alerts with Web Audio API
- Session state persistence across page refreshes
- Add, complete, and delete tasks with ease
- Tasks persist locally in your browser
- Export your tasks as JSON for backup
- Import tasks from previous exports
- Clear all tasks with confirmation
- Smooth animations and visual feedback
- Quick link to your GitHub repository
- Username persistence across sessions
- One-click access to your active project
- Stunning glassmorphism UI
- Gradient animations and glow effects
- Fully responsive (works on mobile, tablet, desktop)
- Smooth micro-interactions
- Dark theme optimized for long sessions
- Screen reader support with ARIA labels
- Keyboard navigation
- Focus indicators
- Respects
prefers-reduced-motion - High contrast text for readability
- A modern web browser (Chrome, Firefox, Safari, Edge)
- That's it! No build tools or dependencies needed.
-
Clone the repository
git clone https://github.com/PCMan67/focus-git.git cd focus-git -
Open in browser
# On macOS open index.html # On Linux xdg-open index.html # On Windows start index.html
Or simply drag
index.htmlinto your browser. -
Start focusing! 🎯
For the best experience, serve with a local server:
# Python 3
python -m http.server 8000
# Node.js (with http-server)
npx http-server
# VS Code Live Server
# Right-click index.html → "Open with Live Server"Then visit http://localhost:8000
- Choose your duration from the dropdown (25 min default)
- Click Start to begin your focus session
- Work on your task until the timer completes
- Get notified when your session ends
- Take a break and repeat! 🔄
- Add a task by typing in the input field and clicking "Add Task" (or press Enter)
- Complete a task by clicking on it or using the "Done" button
- Delete a task with the 🗑️ button
- Export tasks to save your list as JSON
- Import tasks to restore from a previous backup
- Check "Persist timer" to save your session if you accidentally close the tab
- Enable browser notifications for alerts when you're in another tab
- Use the GitHub integration to quickly jump to your project repo
- Export your tasks regularly to keep backups
FOCUS.GIT is built on three principles:
- Beautiful by Default - Design should inspire productivity
- Distraction-Free - Simple, focused interface with no clutter
- Accessible to All - Everyone deserves great tools
The design uses modern CSS techniques including:
- CSS Custom Properties for easy theming
- Hardware-accelerated animations
- Glassmorphism and gradient effects
- Responsive design patterns
- HTML5 - Semantic markup
- CSS3 - Custom properties, animations, gradients
- Vanilla JavaScript (ES6+) - No frameworks, just clean code
- Web Audio API (sound notifications)
- Notifications API (desktop alerts)
- Local Storage (task persistence)
- Session Storage (timer state)
- File API (import/export)
- Object-Oriented - Three main classes (FocusTimer, TaskManager, GitHubIntegration)
- Event-Driven - Clean separation of concerns
- Progressive Enhancement - Works even if some features aren't supported
focus-git/
├── index.html # Main HTML structure
├── styles.css # All styles with CSS variables
├── script.js # Three main classes + initialization
├── icon.png # Notification icon (optional)
├── README.md # You are here!
└── LICENSE # Apache 2.0
Contributions are what make the open source community amazing! Any contributions you make are greatly appreciated.
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
- Use ES6+ features (classes, arrow functions, template literals)
- Follow existing naming conventions (camelCase for methods, PascalCase for classes)
- Add comments for complex logic
- Keep functions focused and small
- Use semantic HTML
- Maintain accessibility standards
- Notifications require user permission (browser prompt on first use)
- Audio may not work in some mobile browsers due to autoplay restrictions
- Timer persistence uses sessionStorage (resets when browser closes completely)
Found a bug? Report it here!
Distributed under the Apache 2.0 License. See LICENSE for more information.
Copyright 2024 PCMan67
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
- Inspired by the Pomodoro Technique by Francesco Cirillo
- Color palette inspired by modern cyberpunk aesthetics
- Icons from Unicode emoji set
PCMan67 - @PCMan67
Project Link: https://github.com/PCMan67/focus-git
Give a ⭐️ if this project helped you stay focused!
Built with 💜 by PCMan67, elijahatkins65-code & lilacviolets
Focus. Execute. Achieve.