☰

Oculus WebExcutor (prototype)

Create an accurate GUI replica with draggable features and dynamic buttons

  1. // ==UserScript==
  2. // @name        Oculus WebExcutor (prototype)
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.1
  5. // @description  Create an accurate GUI replica with draggable features and dynamic buttons
  6. // @match        *://*/*
  7. // @grant        GM_addStyle
  8. // ==/UserScript==
  9.  
  10. (function() {
  11.     'use strict';
  12.  
  13.     // Add CSS for the GUI
  14.     GM_addStyle(`
  15.         #custom-gui {
  16.             position: fixed;
  17.             top: 20px;
  18.             left: 20px;
  19.             width: 400px;
  20.             background-color: #f0f0f0;
  21.             border: 1px solid #dcdcdc;
  22.             box-shadow: 0 0 10px rgba(0,0,0,0.5);
  23.             border-radius: 15px;
  24.             z-index: 9999;
  25.             display: none;
  26.             transform: translateX(-100%);
  27.             transition: transform 0.5s ease, box-shadow 0.3s ease;
  28.         }
  29.         #custom-gui.show {
  30.             transform: translateX(0);
  31.         }
  32.         #header {
  33.             background-color: #333333;
  34.             color: #ffffff;
  35.             padding: 10px;
  36.             border-top-left-radius: 15px;
  37.             border-top-right-radius: 15px;
  38.             cursor: move;
  39.             display: flex;
  40.             justify-content: space-between;
  41.             align-items: center;
  42.         }
  43.         #header .btn {
  44.             background-color: #ff0000;
  45.             color: #ffffff;
  46.             border: none;
  47.             border-radius: 5px;
  48.             padding: 5px 10px;
  49.             cursor: pointer;
  50.         }
  51.         #header .btn.open {
  52.             background-color: #00ff00;
  53.         }
  54.         #content {
  55.             padding: 10px;
  56.         }
  57.         #text-box {
  58.             width: calc(100% - 22px);
  59.             height: 30px;
  60.             border: 1px solid #BFBFBF;
  61.             border-radius: 5px;
  62.             margin-bottom: 10px;
  63.             padding: 5px;
  64.             box-sizing: border-box;
  65.         }
  66.         #inject-btn {
  67.             background-color: #00ff00;
  68.             color: #ffffff;
  69.             border: none;
  70.             border-radius: 5px;
  71.             padding: 5px 10px;
  72.             cursor: pointer;
  73.             margin-right: 10px;
  74.         }
  75.         #inject-btn.red {
  76.             background-color: #ff0000;
  77.         }
  78.         #clear-btn {
  79.             background-color: #0000ff;
  80.             color: #ffffff;
  81.             border: none;
  82.             border-radius: 5px;
  83.             padding: 5px 10px;
  84.             cursor: pointer;
  85.         }
  86.         #execute-btn {
  87.             background-color: #00ffff;
  88.             color: #ffffff;
  89.             border: none;
  90.             border-radius: 5px;
  91.             padding: 5px 10px;
  92.             cursor: pointer;
  93.         }
  94.         #loading-bar {
  95.             position: fixed;
  96.             top: 0;
  97.             left: 0;
  98.             width: 0;
  99.             height: 5px;
  100.             background-color: #cccccc;
  101.             z-index: 9998;
  102.             transition: width 4s ease;
  103.         }
  104.     `);
  105.  
  106.     // Create GUI elements
  107.     const gui = document.createElement('div');
  108.     gui.id = 'custom-gui';
  109.     gui.innerHTML = `
  110.         <div id="header">
  111.             <span>Custom GUI</span>
  112.             <button class="btn open" id="toggle-btn">Open</button>
  113.         </div>
  114.         <div id="content">
  115.             <input type="text" id="text-box" placeholder="Injection text here">
  116.             <button id="inject-btn" class="btn">Inject</button>
  117.             <button id="clear-btn" class="btn">Clear</button>
  118.             <button id="execute-btn" class="btn">Execute</button>
  119.         </div>
  120.     `;
  121.     document.body.appendChild(gui);
  122.  
  123.     // Create loading bar
  124.     const loadingBar = document.createElement('div');
  125.     loadingBar.id = 'loading-bar';
  126.     document.body.appendChild(loadingBar);
  127.  
  128.     // Initialize draggable functionality
  129.     let isDragging = false;
  130.     let offsetX = 0;
  131.     let offsetY = 0;
  132.  
  133.     const header = document.getElementById('header');
  134.     header.addEventListener('mousedown', (e) => {
  135.         isDragging = true;
  136.         offsetX = e.clientX - gui.getBoundingClientRect().left;
  137.         offsetY = e.clientY - gui.getBoundingClientRect().top;
  138.         document.addEventListener('mousemove', onMouseMove);
  139.         document.addEventListener('mouseup', onMouseUp);
  140.     });
  141.  
  142.     function onMouseMove(e) {
  143.         if (isDragging) {
  144.             gui.style.left = `${e.clientX - offsetX}px`;
  145.             gui.style.top = `${e.clientY - offsetY}px`;
  146.         }
  147.     }
  148.  
  149.     function onMouseUp() {
  150.         isDragging = false;
  151.         document.removeEventListener('mousemove', onMouseMove);
  152.         document.removeEventListener('mouseup', onMouseUp);
  153.     }
  154.  
  155.     // Loading bar animation
  156.     setTimeout(() => {
  157.         loadingBar.style.width = '100%';
  158.         setTimeout(() => {
  159.             loadingBar.style.display = 'none';
  160.             gui.classList.add('show');
  161.         }, 4000);
  162.     }, 0);
  163.  
  164.     // Button functionalities
  165.     const injectBtn = document.getElementById('inject-btn');
  166.     const clearBtn = document.getElementById('clear-btn');
  167.     const executeBtn = document.getElementById('execute-btn');
  168.     const toggleBtn = document.getElementById('toggle-btn');
  169.     const textBox = document.getElementById('text-box');
  170.  
  171.     injectBtn.addEventListener('click', () => {
  172.         injectBtn.classList.toggle('red');
  173.     });
  174.  
  175.     clearBtn.addEventListener('click', () => {
  176.         textBox.value = '';
  177.     });
  178.  
  179.     executeBtn.addEventListener('click', () => {
  180.         alert('Execute button clicked');
  181.     });
  182.  
  183.     toggleBtn.addEventListener('click', () => {
  184.         gui.classList.toggle('show');
  185.         toggleBtn.classList.toggle('open');
  186.         toggleBtn.textContent = gui.classList.contains('show') ? 'Close' : 'Open';
  187.     });
  188. })();