Screen Time Monitor is a client-side web application designed to help users take control of their digital wellbeing. Built as a university project, it demonstrates the full flow of a multi-page SPA: from user onboarding and preference capture to data visualisation and report sharing — without any backend or framework dependency.
The app guides users through a structured workflow: configuring break reminders, logging physical health symptoms (eye strain, headaches, anxiety) with severity ratings, setting a daily screen time limit, and finally reviewing a personalised weekly report. All user preferences are persisted in localStorage, meaning the app is entirely self-contained and works offline.
The architecture uses a dynamic page-loading pattern: HTML partials are fetched and injected into a single #app container, with a central initPage dispatcher wiring up the correct event handlers per route. Charts are rendered using Plotly.js, and a share feature generates a CSV summary of weekly data and opens a pre-filled mailto link for quick reporting. Google Analytics is integrated for usage tracking.
From an engineering standpoint, the project demonstrates component-based thinking without a framework, event delegation for navigation, input validation with user feedback, and separating concerns across modular HTML, CSS, and JS files.
- Break reminder configuration — choose preset intervals (30 min, 1 hr) or set a custom break schedule, with notification type selection (pop-up, text, sound alert, screen dimming)
- Health symptom logger — log eye strain, headaches, and anxiety with severity sliders (1–10), triggering personalised wellness suggestions
- Daily screen time limit — set a time-based cap (up to 10 hours) with optional proximity and exceedance notifications
- Visual break cue — full-screen overlay alert with snooze and take-a-break actions
- Weekly report dashboard — Plotly.js bar and line charts for screen time usage, break frequency, and health impact across a 7-day view
- CSV export & share — generates a combined CSV of all weekly metrics and opens a pre-filled email via
mailto - Persistent settings — all user data stored in
localStorage, survives page refresh with no backend required - Google Analytics integration — usage tracking via gtag.js
Setup Reminders
│
▼
Log Health Symptoms
│
▼
Set Daily Screen Time Limit
│
▼
Visual Break Cue
│
▼
Weekly Report ──▶ Share via Email (CSV)
| Layer | Technology |
|---|---|
| Structure | HTML5 (multi-partial SPA) |
| Styling | CSS3, custom design system |
| Logic | Vanilla JavaScript (ES6+) |
| Charts | Plotly.js |
| Icons | Font Awesome 6 |
| Persistence | localStorage Web API |
| Analytics | Google Analytics (gtag.js) |
| Hosting | GitHub Pages |
ScreenTimeMonitor.github.io/
├── index.html # App shell — single entry point
├── js/
│ └── main.js # SPA router, page init, all feature logic
├── css/
│ └── styles.css # Global styles and component theming
├── pages/
│ ├── setup-reminders.html # Step 1 — break interval & notification config
│ ├── log-health-symptoms.html # Step 2 — symptom logging with severity sliders
│ ├── set-daily-limit.html # Step 3 — daily screen time cap
│ ├── visual-cue.html # Step 4 — full-screen break overlay
│ └── weekly-report.html # Step 5 — Plotly charts + settings review
└── assets/
└── logo.png
No build tools or dependencies to install. Clone the repo and open index.html in a browser, or serve it locally:
git clone https://github.com/Karan-Manhas/ScreenTimeMonitor.github.io.git
cd ScreenTimeMonitor.github.io
# Open index.html directly, or use a local server:
npx serve .Note: the page-loading system uses
fetch()to load HTML partials, so a local server is recommended over opening the file directly (browsers blockfetchonfile://URLs).