Kids Screen Time Reminder Overlay

WHAT IT DOES

Kids Screen Time Reminder Overlay tracks time spent on any webpage and displays a colorful, kid-friendly countdown timer showing remaining screen time. A visual progress bar fills up as time passes, and star rewards are earned for completing screen time sessions. Gentle reminders appear when time is almost up, and a fun, animated screen lock with a celebration message appears when the time limit is reached. This helps parents manage their children's screen time in a positive, encouraging way.

WHERE IT RUNS

This extension works on any website across the entire web. It functions on kids' game sites, educational platforms, streaming services, and any page where children spend time. The tool works across all domains and adapts to dynamically loaded content and single-page applications.

HOW TO USE

Install the extension and navigate to any webpage. Start the timer by clicking "Start Timer" in the overlay panel. A colorful countdown timer appears showing the remaining screen time with a progress bar. Stars are earned as time progresses, displayed in the timer overlay. When the timer reaches the limit, a fun screen lock animation appears with a celebration message. Click "Pause Timer" to pause the countdown, or "Reset Today" to reset the screen time for the day. Use the overlay panel to customize the experience: adjust the daily screen time limit in minutes (1-180), set the reminder threshold in minutes, toggle the countdown timer visibility, toggle star rewards display, and toggle screen lock on or off. The timer automatically resumes on page reload.

TECHNICAL SECTION — SCREEN TIME TRACKING AND KID-FRIENDLY UI

The extension uses a setInterval-based timer engine that tracks elapsed time with 200ms precision, updating the display every 200ms for smooth progress bar animation. Time is persisted using GM_setValue with daily reset — the timer automatically resets at midnight based on the system date. Star rewards are calculated based on the percentage of the limit completed, with stars awarded at regular intervals (every 20% of the limit). The timer overlay uses color-coded transitions from green to yellow to orange to red as time runs out. The screen lock uses CSS animations (fade-in and bounce) for a fun, gentle experience. The lock screen includes a parent unlock button that resets the timer. All settings are persisted locally, and the timer state survives page navigation.

THE PANEL — DRAG / PER-SITE POSITION / SNAP / COLLAPSE / RESIZE / ESCAPE

The overlay panel is fully interactive and designed for seamless multitasking. Drag it anywhere on the screen using the handle at the top of the panel; the position is saved per site so it stays where you left it across sessions. The panel includes a snap-to-edge feature that gently anchors the overlay to the nearest screen edge when released. Click the collapse button to minimize the panel to a compact pill showing the current timer status; expand it again with a single click. Resize the panel vertically by dragging the bottom-right corner to view more controls. Press the Escape key at any time to instantly close the overlay; it reappears on the next page navigation or refresh.

PLEASE NOTE

This extension requires the free BotGentz companion extension to function, as it provides the underlying content script injection and cross-origin communication framework. No personal data, browsing history, or screen time data is stored, transmitted, or shared. Screen time data is stored locally in your browser using GM_setValue and is never sent to any external server. The extension does not access or store login credentials, financial data, or personally identifiable information. The timer is a helpful tool for managing screen time and should be used in conjunction with parental supervision. The screen lock is a gentle reminder and can be bypassed by the parent unlock button. The tool is designed for positive reinforcement with star rewards and celebration messages.