I have released Browser Pomodoro Timer
Tags: webdev, personaldevelopment
Published: 2023-11-11 11:17:26

When I was working using the Pomodoro Technique, I wanted a service that is free from advertisements and unnecessary buttons, displaying only a simple timer for work and break sessions. With that in mind, I created a Pomodoro timer that runs in the browser.

## Appearance

### Default（Light）

|Work Session|Break Session|
|:-:|:-:|
|<img width="370" alt="work_light" src="https://github.com/nishina555/digital-pomodoro-browser/assets/3121046/06540dbb-83c4-4b90-b2a1-1cc52be0aeb3">|<img width="370" alt="break_light" src="https://github.com/nishina555/digital-pomodoro-browser/assets/3121046/dc8dba1f-33e6-4db3-975d-4b951e32e60e">|
|<img width="370" alt="work_light_with_session" src="https://github.com/nishina555/digital-pomodoro-browser/assets/3121046/0f62dd81-036f-436c-80a2-16155da63ac3">|<img width="370" alt="break_light_with_session" src="https://github.com/nishina555/digital-pomodoro-browser/assets/3121046/416f79a7-c689-42c7-a8c7-b3636eb85cd8">|

### Dark

|Work Session|Break Session|
|:-:|:-:|
|<img width="370" alt="work_dark" src="https://github.com/nishina555/digital-pomodoro-browser/assets/3121046/2df16ce9-98f7-4e37-a102-0fd2cfa9fe1a">|<img width="370" alt="break_dark" src="https://github.com/nishina555/digital-pomodoro-browser/assets/3121046/dd960041-e011-4d04-941f-3aee347300f0">|
|<img width="370" alt="work_dark_with_session" src="https://github.com/nishina555/digital-pomodoro-browser/assets/3121046/240d208d-bbd5-47b9-b0e5-e7e0031eada7">|<img width="370" alt="break_dark_with_session" src="https://github.com/nishina555/digital-pomodoro-browser/assets/3121046/8505bfa6-7c3e-4dca-a9fc-cf7eb100db8a">|

## Usage

When you access `https://nishina555.github.io/digital-pomodoro-browser/pomodoro`, the Pomodoro Timer will start.

You can customize the Pomodoro Timer's settings by adding query parameters to the above URL.

The details of the query parameters are as follows.

|Query|Description|Type|Default|
|:-|:-|:-|:-|
|work|Minutes of working time|number|25|
|break|Minutes of breaking time|number|5|
|startFrom|Minutes of starting working time|number|0|
|theme|Themes of the timer|`light｜dark`|`light`|
|opacity|Opacity of background. The value can be set within the range of 0 to 1.|number|1|
|displaySession|Display current session(`work` or `break`). |`0｜1`|0|

For example, `https://nishina555.github.io/digital-pomodoro-browser/pomodoro?work=50&break=10&startFrom=45` means a Pomodoro Timer with a work duration of 50 minutes, a break duration of 10 minutes, and the work session starting from the 45 minutes. (If the current time is 10:30, the timer will be set to start the work session at 10:45, calculated in reverse.)

## Intended Usage
Simply access the provided URL on your PC or smartphone to have the Pomodoro Timer ready immediately.

Furthermore, by utilizing the opacity option to make the background transparent, you can embed the timer into a "Study with Me" live streaming screen, for instance, by loading the URL in OBS Studio.

## Service Operation
As it is a niche service with minimal expected demand, I am operating it for free using GitHub Pages without acquiring a custom domain. Monetization is not currently under consideration.

## Future Plans
Currently, users can modify timer settings directly by changing query parameters. If there appears to be demand, I am considering creating a user-friendly interface where users can generate a URL with query parameters automatically by simply filling out a form.