live demo: https://coffeeco-seven.vercel.app/
a cozy coffee themed pomodoro timer!(read more in features)
the pomodoro techinique tells you to focus for 25 mins and then take a short 5 mins break. rinse and repeat. after multiple session (3-4) you should take a long 15/20 mins break, the long break as its called. there is also a 50/10 and 45/15 variation of this as well.
- a cozy coffee themed pomodoro timer
- custom beackground colors and themes (change using the settings tabs <3)
- the coffee cup on the screen fills up as the session progresses
- tracks to help you focus in the music tab (cafe scape, forest scape, white noise, lofi and classical- for when on a deadline)
- according to the lighter and darker background colors, the text and the notification system changes, sort of like dark and light mode.
- in the settings panel you can change focus, short break, and long break durations as well as toggles to auto-start breaks and auto-start focus.
- a cat widget at the bottom, click her to get motivation? i wouldnt use the word motivation for it but she's good company!!
git clone https://github.com Hiba-Malkan/coffeeco.git
cd coffeeco
then run:
python3 -m http.server 8080
and visit localhost:8080
- html
- css
- js
- for safari the main background doesnt change due to safari's weird caching.
- fix/ workaround: switch to a different tab after applying a background colour and then switch back. it now applies it properly.
this is recommended to be used on chrome, but apart from this issue in safari, it works fine in all other browsers (brave, chrome, firefox, opera)
i built this for the caffeinated sidequest (flavortown), its really cozy and its my perfect pomodoro timer. i made it for me, and i hope to get use out of it. hope you enjoy it as well!
if you have any suggestions or feedback, please send me a dm on slack (@grumpymarie)
-
used github's copilot for autocompletion and minor css fixes
-
i used ai to help with the spotify integration, but that didnt work as its only for premium users- the Spotify WebAPI, so i scrapped that and added a simple embed myself. in short, removed the ai part.