☰

Oculus WebExcutor (prototype)

Create an accurate GUI replica with draggable features and dynamic buttons

// ==UserScript==
// @name        Oculus WebExcutor (prototype)
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Create an accurate GUI replica with draggable features and dynamic buttons
// @match        *://*/*
// @grant        GM_addStyle
// ==/UserScript==

(function() {
    'use strict';

    // Add CSS for the GUI
    GM_addStyle(`
        #custom-gui {
            position: fixed;
            top: 20px;
            left: 20px;
            width: 400px;
            background-color: #f0f0f0;
            border: 1px solid #dcdcdc;
            box-shadow: 0 0 10px rgba(0,0,0,0.5);
            border-radius: 15px;
            z-index: 9999;
            display: none;
            transform: translateX(-100%);
            transition: transform 0.5s ease, box-shadow 0.3s ease;
        }
        #custom-gui.show {
            transform: translateX(0);
        }
        #header {
            background-color: #333333;
            color: #ffffff;
            padding: 10px;
            border-top-left-radius: 15px;
            border-top-right-radius: 15px;
            cursor: move;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        #header .btn {
            background-color: #ff0000;
            color: #ffffff;
            border: none;
            border-radius: 5px;
            padding: 5px 10px;
            cursor: pointer;
        }
        #header .btn.open {
            background-color: #00ff00;
        }
        #content {
            padding: 10px;
        }
        #text-box {
            width: calc(100% - 22px);
            height: 30px;
            border: 1px solid #BFBFBF;
            border-radius: 5px;
            margin-bottom: 10px;
            padding: 5px;
            box-sizing: border-box;
        }
        #inject-btn {
            background-color: #00ff00;
            color: #ffffff;
            border: none;
            border-radius: 5px;
            padding: 5px 10px;
            cursor: pointer;
            margin-right: 10px;
        }
        #inject-btn.red {
            background-color: #ff0000;
        }
        #clear-btn {
            background-color: #0000ff;
            color: #ffffff;
            border: none;
            border-radius: 5px;
            padding: 5px 10px;
            cursor: pointer;
        }
        #execute-btn {
            background-color: #00ffff;
            color: #ffffff;
            border: none;
            border-radius: 5px;
            padding: 5px 10px;
            cursor: pointer;
        }
        #loading-bar {
            position: fixed;
            top: 0;
            left: 0;
            width: 0;
            height: 5px;
            background-color: #cccccc;
            z-index: 9998;
            transition: width 4s ease;
        }
    `);

    // Create GUI elements
    const gui = document.createElement('div');
    gui.id = 'custom-gui';
    gui.innerHTML = `
        <div id="header">
            <span>Custom GUI</span>
            <button class="btn open" id="toggle-btn">Open</button>
        </div>
        <div id="content">
            <input type="text" id="text-box" placeholder="Injection text here">
            <button id="inject-btn" class="btn">Inject</button>
            <button id="clear-btn" class="btn">Clear</button>
            <button id="execute-btn" class="btn">Execute</button>
        </div>
    `;
    document.body.appendChild(gui);

    // Create loading bar
    const loadingBar = document.createElement('div');
    loadingBar.id = 'loading-bar';
    document.body.appendChild(loadingBar);

    // Initialize draggable functionality
    let isDragging = false;
    let offsetX = 0;
    let offsetY = 0;

    const header = document.getElementById('header');
    header.addEventListener('mousedown', (e) => {
        isDragging = true;
        offsetX = e.clientX - gui.getBoundingClientRect().left;
        offsetY = e.clientY - gui.getBoundingClientRect().top;
        document.addEventListener('mousemove', onMouseMove);
        document.addEventListener('mouseup', onMouseUp);
    });

    function onMouseMove(e) {
        if (isDragging) {
            gui.style.left = `${e.clientX - offsetX}px`;
            gui.style.top = `${e.clientY - offsetY}px`;
        }
    }

    function onMouseUp() {
        isDragging = false;
        document.removeEventListener('mousemove', onMouseMove);
        document.removeEventListener('mouseup', onMouseUp);
    }

    // Loading bar animation
    setTimeout(() => {
        loadingBar.style.width = '100%';
        setTimeout(() => {
            loadingBar.style.display = 'none';
            gui.classList.add('show');
        }, 4000);
    }, 0);

    // Button functionalities
    const injectBtn = document.getElementById('inject-btn');
    const clearBtn = document.getElementById('clear-btn');
    const executeBtn = document.getElementById('execute-btn');
    const toggleBtn = document.getElementById('toggle-btn');
    const textBox = document.getElementById('text-box');

    injectBtn.addEventListener('click', () => {
        injectBtn.classList.toggle('red');
    });

    clearBtn.addEventListener('click', () => {
        textBox.value = '';
    });

    executeBtn.addEventListener('click', () => {
        alert('Execute button clicked');
    });

    toggleBtn.addEventListener('click', () => {
        gui.classList.toggle('show');
        toggleBtn.classList.toggle('open');
        toggleBtn.textContent = gui.classList.contains('show') ? 'Close' : 'Open';
    });
})();