Draggable GUI with O-key toggle on all websites
// ==UserScript==
// @name Universal Movable GUI
// @namespace https://greasyfork.org/
// @version 1.0
// @description Draggable GUI with O-key toggle on all websites
// @author You
// @match *://*/*
// @grant none
// @run-at document-end
// ==/UserScript==
(function () {
'use strict';
if (document.getElementById('universalGui')) return;
const gui = document.createElement('div');
gui.id = 'universalGui';
Object.assign(gui.style, {
position: 'fixed',
top: '20px',
left: '20px',
width: '300px',
background: '#1e1e1e',
color: '#fff',
padding: '15px',
borderRadius: '12px',
fontFamily: 'Arial, sans-serif',
zIndex: '2147483647',
boxShadow: '0 0 20px rgba(0,0,0,.5)',
userSelect: 'none'
});
gui.innerHTML = `
<div id="guiHeader" style="
cursor:move;
font-size:18px;
font-weight:bold;
margin-bottom:10px;
border-bottom:1px solid #444;
padding-bottom:8px;
">
Universal GUI
</div>
<div>
<p>Status: Ready</p>
<p>Press <b>O</b> to show/hide</p>
<p>Drag the title bar to move</p>
</div>
`;
document.body.appendChild(gui);
let visible = true;
document.addEventListener('keydown', (e) => {
if (
e.target.tagName === 'INPUT' ||
e.target.tagName === 'TEXTAREA' ||
e.target.isContentEditable
) {
return;
}
if (e.key.toLowerCase() === 'o') {
visible = !visible;
gui.style.display = visible ? 'block' : 'none';
}
});
const header = document.getElementById('guiHeader');
let dragging = false;
let offsetX = 0;
let offsetY = 0;
header.addEventListener('mousedown', (e) => {
dragging = true;
offsetX = e.clientX - gui.offsetLeft;
offsetY = e.clientY - gui.offsetTop;
});
document.addEventListener('mousemove', (e) => {
if (!dragging) return;
gui.style.left = (e.clientX - offsetX) + 'px';
gui.style.top = (e.clientY - offsetY) + 'px';
});
document.addEventListener('mouseup', () => {
dragging = false;
});
})();