Display Time

Displays the current time in the any place of the page.
Wrap lines
// ==UserScript==
// @name         Display Time
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Displays the current time in the any place of the page.
// @author       You
// @match       *://*/*
// @grant        GM_getValue
// @grant        GM_setValue
// @grant        GM_registerMenuCommand
// ==/UserScript==

(function() {
    'use strict';
    const defaultSettings = {
        top: '10px',
        left: '10px',
        backgroundColor: 'rgba(0, 0, 0, 0.5)',
        textColor: 'white',
        fontSize: '14px',
        draggable: false // Initial draggable state
    };
    const settings = Object.assign({}, defaultSettings, GM_getValue('timeDisplaySettings'));
    function saveSettings() {
        GM_setValue('timeDisplaySettings', settings);
    }
    const timeDiv = document.createElement('div');
    timeDiv.id = 'myTimeDisplay';
    styleTimeDiv();
    function styleTimeDiv() {
        timeDiv.style.position = 'fixed';
        timeDiv.style.top = settings.top;
        timeDiv.style.left = settings.left;
        timeDiv.style.padding = '5px 10px';
        timeDiv.style.backgroundColor = settings.backgroundColor;
        timeDiv.style.color = settings.textColor;
        timeDiv.style.borderRadius = '5px';
        timeDiv.style.zIndex = '9999';
        timeDiv.style.fontSize = settings.fontSize;
        timeDiv.style.cursor = settings.draggable ? 'move' : 'default';
    }
    function updateTime() {
        const now = new Date();
        timeDiv.textContent = now.toLocaleTimeString();
    }
    let isDragging = false;
    let offsetX, offsetY;
    timeDiv.addEventListener('mousedown', (e) => {
        if (settings.draggable) {
            isDragging = true;
            offsetX = e.clientX - timeDiv.offsetLeft;
            offsetY = e.clientY - timeDiv.offsetTop;
        }
    });
    document.addEventListener('mousemove', (e) => {
        if (isDragging) {
            settings.left = (e.clientX - offsetX) + 'px';
            settings.top = (e.clientY - offsetY) + 'px';
            timeDiv.style.left = settings.left;
            timeDiv.style.top = settings.top;
        }
    });
    document.addEventListener('mouseup', () => {
        if (isDragging) {
            isDragging = false;
            saveSettings();
        }
    });
    document.body.appendChild(timeDiv);
    updateTime();
    setInterval(updateTime, 1000);
    GM_registerMenuCommand("Toggle Draggable", () => {
        settings.draggable = !settings.draggable;
        styleTimeDiv(); // Reapply styles
        saveSettings();
    });
})();