Custom GUI Dashboard

Persistent menu with custom keybinds and saved text
Ask a question, post a review, or report the script.
Wrap lines
// ==UserScript==
// @name         Custom GUI Dashboard
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Persistent menu with custom keybinds and saved text
// @author       You
// @match        *://*/*
// @license      MIT
// @grant        GM_setValue
// @grant        GM_getValue
// ==/UserScript==

(function() {
    'use strict';

    // --- 1. Load Saved Data ---
    let savedKey = GM_getValue("menuKey", "ShiftRight");
    let savedText = GM_getValue("userText", "");

    // --- 2. Create UI Elements ---
    const gui = document.createElement('div');
    gui.id = "tm-gui-wrapper";
    
    // Inject Styles
    const style = document.createElement('style');
    style.innerHTML = `
        #tm-gui-wrapper {
            position: fixed; bottom: 20px; right: 20px;
            background: #222; color: white; padding: 15px;
            border-radius: 8px; font-family: sans-serif;
            box-shadow: 0 4px 15px rgba(0,0,0,0.5);
            z-index: 999999; border: 1px solid #444;
            min-width: 200px; display: none; /* Hidden by default */
        }
        #tm-helper-tip {
            position: fixed; bottom: 10px; right: 10px;
            background: rgba(0,0,0,0.7); color: #fff;
            padding: 5px 10px; border-radius: 4px;
            font-size: 12px; z-index: 999998;
        }
        .tm-field { margin-bottom: 10px; }
        .tm-field label { display: block; font-size: 11px; color: #aaa; }
        .tm-field input, .tm-field textarea {
            width: 100%; background: #333; border: 1px solid #555;
            color: white; padding: 5px; border-radius: 3px;
        }
    `;
    document.head.appendChild(style);

    // GUI Content
    gui.innerHTML = `
        <div style="font-weight:bold; margin-bottom:10px; border-bottom:1px solid #444;">Settings Menu</div>
        <div class="tm-field">
            <label>Menu Keybind (e.g. ShiftRight, KeyM)</label>
            <input type="text" id="tm-keybind-input" value="${savedKey}">
        </div>
        <div class="tm-field">
            <label>Your Saved Notes</label>
            <textarea id="tm-text-input" rows="4">${savedText}</textarea>
        </div>
        <div style="font-size:10px; color: #888;">Data saves automatically.</div>
    `;

    // Helper Tip
    const tip = document.createElement('div');
    tip.id = "tm-helper-tip";
    tip.innerText = `Press ${savedKey} to Open Menu`;
    
    document.body.appendChild(gui);
    document.body.appendChild(tip);

    // --- 3. Logic & Events ---

    const keyInput = document.getElementById('tm-keybind-input');
    const textInput = document.getElementById('tm-text-input');

    // Toggle Menu
    window.addEventListener('keydown', (e) => {
        // Check if we are typing in an input (don't trigger menu while typing)
        if (document.activeElement.tagName === "INPUT" || document.activeElement.tagName === "TEXTAREA") {
            if (document.activeElement !== keyInput) return;
        }

        if (e.code === savedKey) {
            e.preventDefault();
            const isVisible = gui.style.display === 'block';
            gui.style.display = isVisible ? 'none' : 'block';
        }
    });

    // Save Text on change
    textInput.addEventListener('input', () => {
        GM_setValue("userText", textInput.value);
    });

    // Change Keybind Logic
    keyInput.addEventListener('keydown', (e) => {
        e.preventDefault();
        savedKey = e.code;
        keyInput.value = savedKey;
        tip.innerText = `Press ${savedKey} to Open Menu`;
        GM_setValue("menuKey", savedKey);
    });

})();