Beat distractions. Track progress. Outrank your peers.
A premium mobile-first student focus application inspired by Yeolpumta (YPT), rebuilt with a modern dark UI, stricter focus controls, and rich analytics. Designed to help students develop deep work habits and stay accountable.
- Animated SVG ring with gradient progress
- 25-minute sessions (customisable)
- Play / Pause / Reset / Skip controls
- Session counter (1–4 Pomodoros)
- Toggle focus lock on/off
- Allow-listed apps (Notes, PDF Reader, Calculator)
- Block-listed apps (YouTube, Instagram, Games)
- Live lock/unlock status indicator
- Weekly study hours bar chart
- Subject-wise time breakdown with progress bars
- Peak productivity window detection
- 3 summary metric cards (hours, focus %, growth)
- Gold / Silver / Bronze podium for top 3
- Full ranked list with streak and speciality info
- Your position highlighted with point delta
- Daily / Weekly / Monthly period switcher
- XP bar with level badge
- 30-day streak calendar (color-coded)
- Achievement badges (unlocked + locked)
- Lifetime stats: total hours, streak, badge count
- Live clock in status bar
- 4-card stats grid (today, focus score, weekly, rank)
- 21-day streak banner with fire animation
- One-tap "Start Focus Session" CTA
- Subject filter pills
- Daily goal progress bar
focusflow/
├── index.html # App entry point (semantic HTML5)
├── assets/
│ ├── css/
│ │ └── style.css # All styles — design tokens, layout, components
│ ├── js/
│ │ └── app.js # All interactivity — timer, navigation, state
│ └── icons/
│ └── favicon.svg # App icon (add your own)
├── .gitignore
├── LICENSE
└── README.md
git clone https://github.com/ishu7w/focusflow.git
cd focusflow
open index.html # macOS
# or
start index.html # Windows
# or
xdg-open index.html # Linux# Using Python
python3 -m http.server 8080
# Using Node.js (npx)
npx serve .
# Then open: http://localhost:8080| Layer | Technology | Why |
|---|---|---|
| Markup | HTML5 (semantic) | Accessibility, SEO-ready |
| Styles | Pure CSS3 | Zero dependencies, fast |
| Scripts | Vanilla JS (ES2021) | No framework overhead |
| Fonts | Google Fonts CDN | DM Sans + Space Grotesk |
| Design | Glassmorphism + Aurora | Premium, calming feel |
No build tools. No npm install. No bundler. Just open and go.
--bg: #08091A /* Deep navy background */
--blue: #7C9FFF /* Primary accent */
--mint: #5FDDBB /* Success / focus active */
--amber: #F4A261 /* Streak / warnings */
--purple: #C589FF /* XP / level / gamification */
--red: #FF7B7B /* Blocked / danger */- Display / UI — Space Grotesk (600, 700)
- Body / Labels — DM Sans (300, 400, 500)
- Glassmorphism cards —
backdrop-filter: blur(20px)+ semi-transparent border - Aurora background — 4 animated radial-gradient orbs with CSS
@keyframes - Dock — macOS-style nav bar with glow states
- Timer ring — SVG
stroke-dashoffsetanimation
The app is built as a mobile-first experience centered in a 420×780px phone shell. On desktop it appears as a centered app preview — ideal for demos, pitches, and GitHub Pages hosting.
- Push this repo to GitHub
- Go to Settings → Pages
- Set source to
mainbranch,/ (root)folder - Your app will be live at:
https://YOUR_USERNAME.github.io/focusflow/
- localStorage persistence (timer state, session count)
- Custom Pomodoro durations (settings screen)
- Subject management (add/remove/reorder)
- Dark/light mode toggle
- Offline support via Service Worker (PWA)
- Push notifications for break reminders
- Backend integration (Node.js + PostgreSQL)
- Real leaderboard with friend invites
- React / Next.js migration
- React Native mobile port
Pull requests are welcome!
# Fork the repo, then:
git checkout -b feature/your-feature
# Make your changes
git commit -m "feat: describe your change"
git push origin feature/your-feature
# Open a PR on GitHubPlease follow Conventional Commits for commit messages.
MIT — see LICENSE for details.
- Inspired by Yeolpumta (YPT) — the Korean study timer app
- UI inspired by components from 21st.dev
- Fonts by Google Fonts
Made with 💙 to help students focus better