https://github.com/theatom06/pomo
A pomorodo timer for studying with breaks
https://github.com/theatom06/pomo
Last synced: 9 months ago
JSON representation
A pomorodo timer for studying with breaks
- Host: GitHub
- URL: https://github.com/theatom06/pomo
- Owner: theatom06
- Created: 2025-10-03T05:58:29.000Z (9 months ago)
- Default Branch: master
- Last Pushed: 2025-10-04T04:48:30.000Z (9 months ago)
- Last Synced: 2025-10-04T06:27:49.130Z (9 months ago)
- Language: JavaScript
- Size: 7.81 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🍅 Pomo-04
A minimalist, highly focused, and persistent Pomodoro Timer application designed to maximize concentration by preventing distractions and screen sleep. Perfect for deep work and study sessions.
## 🚀 Live Demo
Experience the timer live and start your focused work:
[**pomo-04.web.app**](https://www.google.com/search?q=https://pomo-04.web.app)
## ✨ Features
Pomo-04 is built to provide an uninterrupted, distraction-free environment with advanced browser APIs:
| **Feature** | **Description** |
| :--- | :--- |
| **🧠 Screen Wake Lock** | Uses the Wake Lock API to prevent your screen from dimming or sleeping while the timer is running, ensuring continuous focus. |
| **🖥️ Fullscreen Mode** | Dedicated fullscreen button provides a completely distraction-free, immersive study environment. |
| **💾 Persistent Settings** | Saves your customized Study and Break durations using `localStorage`, so your preferences are retained across sessions and refreshes. |
| **🔔 Desktop Notifications** | Sends OS-level notifications when a session ends (Study -> Break or Break -> Study), even if the tab is minimized or in the background. |
| **💡 Tab Title Timer** | The remaining time is displayed directly in the browser tab title, allowing you to monitor progress even when viewing other research tabs. |
| **🎨 Smooth Transitions** | The background color smoothly transitions between Study (Black) and Break (Deep Blue) modes, providing a calming visual cue for the cycle change. |
| **🔒 Edit Confirmation** | Prevents accidental changes: you cannot edit the Study or Break times while the timer is running. Attempting to edit will prompt a confirmation to pause the timer first. |
## 💻 How to Use
1. **Set Durations:** Click the editable numbers next to "Study" or "Break" to set your desired time in minutes. This setting is saved automatically.
2. **Start/Pause:** Click the **Start** button to begin the current cycle. The button changes to **Pause**.
3. **Toggle Cycle:** The timer automatically switches from Study to Break mode when time runs out, accompanied by an alarm sound and a desktop notification.
4. **Reset:** Use the **Close (X)** button to stop the timer, release the screen lock, and reset the timer back to the start of the current cycle's duration.
5. **Focus Mode:** Click the **Fullscreen** icon (top-left) to enter a completely immersive, distraction-free mode.
## 🛠️ Technology Stack
This project is a single-page application built for speed and minimalism using core web technologies:
* **HTML5:** Structure and Content
* **CSS3 (Custom):** Styling, layout, and smooth transitions
* **Vanilla JavaScript:** Core logic, state management, and implementation of advanced APIs:
* `Screen Wake Lock API`
* `Fullscreen API`
* `Notification API`
* `Web Audio API` (for the alarm sound)
## 🏗️ Local Setup
To clone and run Pomo-04 locally:
1. **Clone the repository:**
```bash
git clone https://github.com/theatom06/pomo.git
cd pomo
```
2. Just open `public/index.html` in your favorite web browser (preferably Chrome or Edge for full API support).