Hydration Reminder Badge

WHAT IT DOES

Hydration Reminder Badge places a persistent floating badge on your screen that helps you track your daily water intake and stay hydrated throughout the day. The badge features a visual progress ring that fills as you log drinks, providing an at-a-glance view of your progress toward your daily goal. A large "+" button lets you log each glass of water with a single click, automatically adding your configured glass size to your daily total. The badge changes color and pulses gently when it's time to drink, accompanied by a desktop notification to ensure you never miss a reminder. It also displays the time since your last logged drink and the time until your next reminder, keeping you informed and motivated. The badge resets automatically at midnight, so you start fresh each day.

WHERE IT RUNS

This script operates as a userscript within the BotGentz extension on every webpage you visit across all websites and domains. It functions on any modern browser that supports the BotGentz extension, including Chrome, Firefox, Edge, Safari, and Opera. The script runs entirely client-side, storing all data locally using GM_setValue without sending any information to external servers. The badge floats above webpage content, remaining visible and accessible regardless of which site you are browsing.

HOW TO USE

After installation, the badge appears in the bottom-right corner of your screen with a progress ring showing your current intake. Click the "+" button to log one glass of water (default 8 oz) - the progress ring updates instantly and the total increases. Use the "↺" button to undo your last logged drink if you made a mistake. The badge displays your current total in ounces, your daily goal, and a status message showing when you last drank or when your next reminder is due. When the reminder interval passes, the badge pulses and changes color, and a desktop notification appears. Open the panel to customize your daily goal, glass size, reminder interval, badge position, and toggle compact mode or the percentage display. Drag the badge anywhere on your screen by clicking and holding it.

THE MECHANISM THAT MAKES IT WORK

Unlike generic timer apps that simply count down, this script uses a stateful tracking system that persists your intake data across browser sessions and page reloads. The badge calculates progress using a circular SVG progress ring with stroke-dasharray and stroke-dashoffset properties, dynamically updating the circumference offset to represent the ratio of current intake to daily goal. The reminder engine uses a two-stage alert system: when the configured interval elapses since the last logged drink, the badge enters a "reminder" state (yellow) with gentle pulsing. If five additional minutes pass without action, it escalates to an "alert" state (red) with faster pulsing. The time-until-next-reminder calculation uses JavaScript Date objects to compute precise differences, displaying friendly human-readable formats like "15m" or "1h". All data is serialized to JSON and stored with GM_setValue, including the current date key to ensure automatic daily resets without losing historical context.

THE PANEL

The script panel is built using BotGentz's BGPanel framework and provides comprehensive control over the badge's behavior. The panel opens as a floating overlay that can be dragged anywhere on your screen, with a clean dark theme matching the badge's aesthetic. It includes input fields for your daily goal in ounces, a dropdown for glass size, and a dropdown for reminder interval. Toggle switches enable or disable the badge, toggle compact mode for a smaller footprint, and control whether the percentage is shown on the progress ring. A dropdown menu lets you set the badge's default position to top-left, top-right, bottom-left, or bottom-right. Action buttons allow you to save settings, reset today's progress, or reset all settings to defaults. The panel collapses to a small icon when not in use and expands when clicked, remaining accessible but unobtrusive. Press the Escape key at any time to close the panel.

PLEASE NOTE

This script requires the free BotGentz extension to be installed and activated in your browser. The extension is available from the official BotGentz website. All data is stored locally using GM_setValue and is not shared with any third-party services. The badge automatically resets at midnight based on your system clock. If you close your browser, your progress is saved and restored when you return. The reminder notifications require your browser to support the GM_notification API, which is included with the BotGentz extension. If you find the badge distracting, you can click the "✕" button to dismiss it for 30 minutes, or disable it entirely via the panel toggle.