An aesthetic and immersive Virtual Study Room Web App built using HTML, CSS, and JavaScript, featuring a Pomodoro timer, ambient sound engine, focus mode, and productivity tracking to help users maintain deep focus.
- Pomodoro Timer System – Structured focus and break sessions with auto cycle.
- Focus Mode Screen – Fullscreen distraction-free study interface.
- Ambient Sound Engine – Rain, café, forest, fire, white noise, and thunder sounds.
- Custom Task Tracking – Set and display current study task.
- Session Statistics Dashboard – Track sessions, focus time, streaks, and progress.
- Progress Ring Timer UI – Circular visual countdown indicator.
- Distraction Detection Overlay – Alerts when user switches tabs.
- Keyboard Shortcuts Support – Control timer using keys (Space, R, F, Esc).
- Theme System – Multiple visual themes (night, library, rain).
- Audio Volume Controls – Individual and master sound controls.
- Auto Pomodoro Cycle – Automatically switches between focus and break sessions.
StudyRoom/
├── index.html
├── script.js
├── style.css
- HTML5
- CSS3
- JavaScript
- Clone the repository:
git clone https://github.com/Agent-A345/StudyRoom.git
- Open the project and navigate to the file:
cd index.html
- Run the game in any modern browser
Set Your Task
- Click task button
- Enter what you’re working on
Start Focus Session
- Click Start or press Space
- Timer begins (default 25 min)
Control Timer
- Pause → Space
- Reset → R
- Skip → Skip button
Enter Focus Mode
- Click Focus Mode or press F
- Fullscreen distraction-free experience
Use Ambient Sounds
- Toggle sounds (rain, café, forest, etc.)
- Adjust individual volume sliders
- Use master volume control
Study Room helps users:
- Stay focused using Pomodoro technique
- Create immersive study environments
- Track productivity and consistency
- Reduce distractions
- Build long-term study habits
- Spotify / music integration
- AI-based focus recommendations
- Study group / shared rooms
This project is licensed under the MIT License.