☰

Website Executor

Website Executor like Xeno

// ==UserScript==
// @name         Website Executor
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Website Executor like Xeno
// @match        *://*/*
// @grant        GM_addStyle
// ==/UserScript==

(function() {
    'use strict';

    // Add custom style
    GM_addStyle(`
        #executorWindow {
            position: fixed;
            top: 20px;
            left: 20px;
            width: 600px;
            height: 400px;
            background-color: #1e1e1e;
            color: #fff;
            border: 1px solid #00ffff;
            box-shadow: 0 0 10px #00ffff;
            z-index: 1000;
        }

        #titleBar {
            background-color: #333;
            padding: 10px;
            cursor: move;
            display: flex;
            justify-content: space-between;
        }

        #contentArea {
            padding: 10px;
        }

        #codeEditor {
            width: 100%;
            height: 300px;
            background-color: #222;
            color: #fff;
            border: none;
            padding: 5px;
            font-family: monospace;
        }

        #bottomBar {
            background-color: #333;
            padding: 10px;
            display: flex;
            justify-content: space-around;
        }

        #bottomBar button {
            background-color: #444;
            color: #fff;
            border: none;
            padding: 5px 10px;
            cursor: pointer;
        }
    `);

    // Create the executor window
    const executorWindow = document.createElement('div');
    executorWindow.id = 'executorWindow';
    document.body.appendChild(executorWindow);

    // Title bar
    const titleBar = document.createElement('div');
    titleBar.id = 'titleBar';
    titleBar.textContent = 'Website Executor';
    executorWindow.appendChild(titleBar);

    // Content area
    const contentArea = document.createElement('div');
    contentArea.id = 'contentArea';
    executorWindow.appendChild(contentArea);

    // Code editor
    const codeEditor = document.createElement('textarea');
    codeEditor.id = 'codeEditor';
    contentArea.appendChild(codeEditor);

    // Bottom bar
    const bottomBar = document.createElement('div');
    bottomBar.id = 'bottomBar';
    executorWindow.appendChild(bottomBar);

    // Buttons
    const buttons = ['Settings', 'Open', 'Save', 'Clear', 'Run'];
    buttons.forEach(text => {
        const button = document.createElement('button');
        button.textContent = text;
        bottomBar.appendChild(button);
    });

    // Make the window draggable
    let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
    titleBar.onmousedown = dragMouseDown;

    function dragMouseDown(e) {
        e = e || window.event;
        e.preventDefault();
        pos3 = e.clientX;
        pos4 = e.clientY;
        document.onmouseup = closeDragElement;
        document.onmousemove = elementDrag;
    }

    function elementDrag(e) {
        e = e || window.event;
        e.preventDefault();
        pos1 = pos3 - e.clientX;
        pos2 = pos4 - e.clientY;
        pos3 = e.clientX;
        pos4 = e.clientY;
        executorWindow.style.top = (executorWindow.offsetTop - pos2) + "px";
        executorWindow.style.left = (executorWindow.offsetLeft - pos1) + "px";
    }

    function closeDragElement() {
        document.onmouseup = null;
        document.onmousemove = null;
    }
})();