"We print what you actually did."
An immersive, personality-driven Pomodoro timer that tracks your "grind" and generates a vintage-style digital receipt of your productivity (or lack thereof). Built with a focus on high-end UI/UX, glassmorphism, and a touch of sass.
Landing Page
Focus Mode
Short break
Long break
Light Theme
Dark Theme
- 🎭 Coach Personalities: Choose your "vibe coach" to keep you focused.
- Strict Asian Mom: Zero tolerance for distractions. Your cousin is already ahead of you.
- Chill Friend: Supportive, low-pressure, "bestie" energy.
- Corporate Manager: KPI-driven synergy. Circle back to your focus.
- Existential Philosopher: Time is an illusion, but your deadline is real.
- 🧾 Productivity Receipts: Complete a cycle to generate a detailed, thermal-print style receipt summarizing your session stats, including "Existential Crises" and "Phantom Snack Breaks."
- 🌓 Adaptive Themes: Seamlessly switch between Obsidian Dark and Paper Light modes.
- 🎧 Immersive UX: Haptic-style audio ticks, glassmorphic UI elements, and a dynamic particle background that reacts to your theme.
- ⌨️ Power User Shortcuts:
Space- Play/PauseR- Reset TimerS- Skip SessionT- Toggle Theme
- HTML5: Semantic structure and SVG-based timer rings.
- CSS3: Custom properties (CSS variables), Glassmorphism, and keyframe animations.
- JavaScript (Vanilla): Custom state management, Web Audio API for synthesis, and Canvas API for the particle system.
GrindReceiptz/
├── index.html # Core layout and onboarding
├── css/
│ └── style.css # Glassmorphism, receipt styling & theme logic
├── js/
└── timer.js # Personality data, Audio/Particle engines & state
Be respectful, kind, and collaborative. This project is meant to be a safe and fun learning environment for everyone.
This project is for personal use and learning purposes. Feel free to fork, remix, and customize it for your own game nights!