A single-screen productivity dashboard that bundles all the tools you need to get into focus mode — a clock, pomodoro timer, todo list, lofi/jazz music player, motivational quotes, study stats with streaks, and a picker for aesthetic backgrounds — into one clean page you can throw up on your laptop while you work on your main monitor.
No account, no install, no build step. Everything lives in your browser.
I have a monitor and I like to do work on my big monitor and use my laptop screen as a background, and pomodoro timer, task tracker. I realized that there are too many things to open, so I integrated all of these functions into one screen, so that I can just open all of these tools that I use while I'm on productivity mode with just one click!
- Clock — a big, always-visible current time display
- Rotating quotes — a new motivational quote every hour to keep you going
- Pomodoro timer — Pomodoro, Short Break, and Long Break modes with customizable durations. Keeps time against the real clock, so it stays accurate even when the tab is backgrounded
- Alarm sound picker — choose how your session ends: Calm Bell, Soft Chime, Marimba, Classic Alarm, or Silent. The gentle options are synthesized with the Web Audio API (no audio files to download), and picking one previews it instantly
- Todo list — add, edit, check off, and delete tasks, with a Notion-style drag handle for reordering. Tab / Shift+Tab indents tasks into subtasks (up to 3 levels); checking a parent checks its subtasks, and completed items sink to the bottom of their own level. Persists across sessions
- Music player — built-in lofi and jazz tracks with play/pause/prev/next controls and mood/genre/playlist pickers, plus a custom-link field for any SoundCloud URL. A Spotify option is also available alongside SoundCloud — toggle it inside the player block. Full-track playback requires a Spotify Premium account; free accounts can still browse and play 30-second previews. StudySpot never sees, stores, or transmits your Spotify credentials — login is handled entirely inside Spotify's own embed, and whether your Spotify session sticks across reloads depends on your browser's third-party cookie policy (most modern browsers will ask you to log in again each session). NetEase Music share links also work — paste one into the same bar and it loads in place of the Spotify embed (playback is geo-restricted to mainland China)
- Background picker — choose from curated still backgrounds (coffee shop, misty forest, library, rainy window, city night, bright nature) or animated video backgrounds (hideout, traveling, sunset watch, starry window, forest moving) to match your vibe
- Custom backgrounds — upload your own images or short video loops. They're stored locally in IndexedDB, appear alongside the built-ins, and can be removed anytime
- Study stats — daily goal, focus-time totals, weekly bar chart, completed-sessions count, and a 🔥 daily streak; only Pomodoro sessions count toward focus time (breaks are logged but excluded)
- Shareable stats card — generate a 1080×1080 image of your streak and focus time straight from the stats panel. Share sheet on mobile, download or copy-link on desktop
- Streak milestones — hit 3, 7, 14, 30 days (and beyond) or clear your daily goal and you get a one-time celebration card with a shortcut to share it. Deliberately anti-nag: each milestone fires exactly once and auto-dismisses
- Guided onboarding — a 5-step hint tour on first visit (fullscreen → backgrounds → edit layout → stats → Spotify) with back/next navigation, so nothing hides behind an unlabeled icon
- Backup & restore — export your stats and settings to a JSON file, or import a previous backup
- Edit layout mode — drag and freely resize the timer, music player, and todo blocks to fit your screen; positions persist across reloads, with a one-click reset
- Fullscreen mode — one click to hide everything else on your laptop
Ideas in rough priority order. Nothing here is committed; this is a sketch of where StudySpot could go.
- Leaderboard — compare daily / weekly focus time with friends. Needs a lightweight backend (Firebase or Supabase would fit), opt-in account, and a privacy-respecting "share by handle" model so you don't have to expose anything you don't want to.
- Achievement badges — beyond the streak milestones that already exist: badges for things like a first 10-hour week, or finishing a task that's been on your list for a week. Slots in naturally next to the leaderboard.
- Ambient sound mixer — layerable rain / cafe / fireplace / white noise on top of the music player, with per-track volume sliders.
- Scratchpad / notes block — a fourth resizable block for quick notes during a session, persisted to
localStorage. - Task ↔ session linking — pick a task before starting a Pomodoro and have the session count toward that task. Unlocks per-task time tracking and a "what did I actually spend time on this week?" view.
- GitHub-style yearly heatmap — a contributions-style grid for study sessions, in addition to the current weekly chart.
- Theme / accent customization — pick the highlight color and font weight; pairs well with the existing background picker.
- Keyboard shortcuts + cheatsheet overlay — start/pause timer, next track, toggle fullscreen, open stats, etc., from the keyboard.
- Cloud sync — opt-in cross-device sync for stats and tasks. Mostly only worth doing once the leaderboard backend exists, since it reuses the same infra.
- Mobile / tablet layout — the current layout assumes a laptop screen; a stacked single-column variant would make it usable on a phone next to the main monitor.
Live site: studyspot.space — just open it in your browser, no install needed.
Or run it locally — no build step, no dependencies, no setup, it's just HTML, CSS, and vanilla JavaScript.
git clone <this-repo>
cd studyspot
open index.htmlOr just double-click index.html. That's it.
Tip: open it on your laptop, hit the fullscreen button (or fn + f on Mac), and keep your main monitor for actual work.
studyspot/
├── index.html # main page
├── style.css # all styles
├── js/
│ ├── main.js # boots everything up
│ ├── clock.js # live clock
│ ├── timer.js # pomodoro timer
│ ├── alarm-sound.js # end-of-session sound picker (Web Audio synthesis)
│ ├── tasks.js # todo list with subtasks and drag-reorder
│ ├── music.js # music player (SoundCloud + Spotify + NetEase)
│ ├── quotes.js # hourly quote rotation
│ ├── background.js # background picker (images + video + uploads)
│ ├── bgdb.js # IndexedDB store for user-uploaded backgrounds
│ ├── stats.js # study stats, streak, daily goal, export/import
│ ├── share.js # renders the 1080x1080 shareable stats card
│ ├── milestone.js # one-time streak / daily-goal celebration
│ ├── layout.js # edit-mode drag/resize for the main blocks
│ └── *-hint.js # the 5-step first-visit onboarding tour
└── assets/
├── icons/ # UI icons (SVG)
├── images/ # background images + social preview
├── mp4/ # animated video backgrounds
└── music/ # alarm sound
Plain HTML + CSS + JavaScript — no framework, no bundler, no build step. State (tasks, stats, chosen background, timer settings, alarm sound) is saved to localStorage so it survives page reloads; uploaded background files go to IndexedDB since they're too large for localStorage. Nothing is sent to a server — there's no account, no backend, and no analytics.
Backgrounds and lofi artwork are for personal study use. Fonts via Google Fonts (Inter).