World Clock Floating Widget

WHAT IT DOES

This script adds a floating, draggable widget to your browser that displays the current time in multiple time zones simultaneously. Choose between digital, analog, or both clock formats, and customize the display with 12-hour or 24-hour time, date visibility, and seconds. The widget automatically detects your local time zone on first run, and you can add any time zones you need—London, New York, Tokyo, Sydney, or any custom offset. A floating badge lets you toggle the widget on and off, and double-clicking the widget pauses the clock for a quick reference without the moving second hand.

WHERE IT RUNS

The script works on any website—browsing, working, or researching. The widget stays visible as you navigate between pages, providing a persistent time reference. It works on any website regardless of framework, and the floating design ensures it never interferes with page content.

HOW TO USE

After installation, the widget appears automatically. Drag it to any corner of your screen by clicking and dragging the header. Click the ✕ button to hide it, or click the floating badge at the bottom-right to toggle visibility. Double-click the widget to pause the clock (useful for a static reference). Open the panel to configure: choose clock format (digital, analog, or both), set time format (12h or 24h), toggle date and seconds visibility, enable auto-detection of your local time zone, manage time zones via JSON, adjust widget opacity, and switch between dark and light themes. Add time zones using the JSON editor with a simple array of objects containing label and offset (in hours from UTC).

TECHNICAL MECHANISM

The script uses a multi-stage time rendering pipeline. First, it detects the user's local time zone using `new Date().getTimezoneOffset()` to calculate the offset in hours. Second, it calculates time for each configured zone by applying the offset to the current UTC time. Third, it renders digital clocks using formatted strings with dynamic updates via `setInterval` every second. Fourth, it renders analog clocks using the Canvas API—drawing hour, minute, and second hands with smooth positioning based on the current time, with hour markers and minute ticks. Fifth, it makes the widget draggable using mouse event listeners (mousedown, mousemove, mouseup) with viewport clamping to keep the widget on screen. Sixth, it stores widget position and visibility state in GM_setValue for persistence across sessions, and supports per-site memory for position preferences.

THE PANEL

The settings panel is fully draggable and can be positioned anywhere on your screen. It automatically snaps to the nearest edge when released, keeping your workspace organized. The panel can be collapsed to a small bubble showing only a gear icon, and restored with a single click. Its position is remembered across page reloads using GM_setValue. The panel also responds to the Escape key, which instantly hides it until you click the bubble again. All settings are saved immediately when changed and persist across browser sessions.

PLEASE NOTE

This script requires the free BotGentz extension to run. The widget uses UTC offsets for time zone calculations and does not account for daylight saving time changes automatically—you may need to adjust offsets manually when DST changes occur. The script does not access, store, or transmit any personal data or browsing history. All processing happens locally in your browser and never leaves your device.