☰

Oculus GUI

Custom GUI for script execution

目前為 2024-09-03 提交的版本，檢視 最新版本。

  1. // ==UserScript==
  2. // @name         Oculus GUI
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.0
  5. // @description  Custom GUI for script execution
  6. // @author       Your Name
  7. // @match        *://*/*
  8. // @grant        GM_addStyle
  9. // @grant        GM_setValue
  10. // @grant        GM_getValue
  11. // @grant        GM_addElement
  12. // ==/UserScript==
  13.  
  14. (function() {
  15.     'use strict';
  16.  
  17.     // Inject HTML
  18.     const oculusGUI = document.createElement('div');
  19.     oculusGUI.id = 'oculus-gui';
  20.     oculusGUI.innerHTML = `
  21.         <div class="container">
  22.             <div class="sidebar">
  23.                 <p>Hello user</p>
  24.             </div>
  25.             <div class="main">
  26.                 <div class="header">
  27.                     <span id="oculus-label"><img src="https://i.imgur.com/og6DB9N.png" alt="Oculus" class="logo"> oculus</span>
  28.                     <div id="status-indicator" class="status-indicator red"></div>
  29.                 </div>
  30.                 <div class="output-area-container">
  31.                     <textarea id="script-input" class="output-area" placeholder="Enter your script here..."></textarea>
  32.                 </div>
  33.                 <div class="buttons">
  34.                     <button id="execute">Execute</button>
  35.                     <button id="clear">Clear</button>
  36.                     <button id="inject">Inject</button>
  37.                 </div>
  38.             </div>
  39.         </div>
  40.     `;
  41.     document.body.appendChild(oculusGUI);
  42.  
  43.     // Inject CSS
  44.     GM_addStyle(`
  45.         #oculus-gui {
  46.             position: fixed;
  47.             top: 50px;
  48.             left: 50px;
  49.             width: 600px;
  50.             z-index: 9999;
  51.             font-family: Arial, sans-serif;
  52.         }
  53.  
  54.         .container {
  55.             display: flex;
  56.             background-color: #FFCA2E;
  57.             border-radius: 10px;
  58.             box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  59.         }
  60.  
  61.         .sidebar {
  62.             width: 16%;
  63.             background-color: #C69300;
  64.             display: flex;
  65.             align-items: center;
  66.             justify-content: center;
  67.             color: #000;
  68.             font-weight: bold;
  69.             font-size: 18px;
  70.             border-radius: 10px 0 0 10px;
  71.         }
  72.  
  73.         .main {
  74.             width: 84%;
  75.             padding: 0;
  76.             display: flex;
  77.             flex-direction: column;
  78.         }
  79.  
  80.         .header {
  81.             background-color: #FFCA2E;
  82.             padding: 10px;
  83.             display: flex;
  84.             justify-content: space-between;
  85.             align-items: center;
  86.             border-bottom: 2px solid #D4D4D4;
  87.         }
  88.  
  89.         .logo {
  90.             height: 40px;
  91.             vertical-align: middle;
  92.         }
  93.  
  94.         #oculus-label {
  95.             font-size: 24px;
  96.             font-weight: bold;
  97.             color: #000;
  98.             display: flex;
  99.             align-items: center;
  100.         }
  101.  
  102.         .status-indicator {
  103.             width: 20px;
  104.             height: 20px;
  105.             border-radius: 50%;
  106.             margin-right: 20px;
  107.         }
  108.  
  109.         .status-indicator.green {
  110.             background-color: #00FF00;
  111.         }
  112.  
  113.         .status-indicator.red {
  114.             background-color: #FF0000;
  115.         }
  116.  
  117.         .output-area-container {
  118.             flex: 1;
  119.             background-color: #D4D4D4;
  120.             border-radius: 10px;
  121.             margin: 20px;
  122.             padding: 10px;
  123.             display: flex;
  124.             justify-content: center;
  125.             align-items: center;
  126.         }
  127.  
  128.         .output-area {
  129.             width: 100%;
  130.             height: 200px;
  131.             background-color: #BFBFBF;
  132.             border: none;
  133.             border-radius: 10px;
  134.             padding: 20px;
  135.             font-size: 16px;
  136.             resize: none;
  137.             box-shadow: inset 0 4px 6px rgba(0, 0, 0, 0.1);
  138.         }
  139.  
  140.         .buttons {
  141.             display: flex;
  142.             justify-content: space-around;
  143.             background-color: #FFCA2E;
  144.             padding: 10px;
  145.         }
  146.  
  147.         button {
  148.             background-color: #FFCA2E;
  149.             border: 2px solid #E0A800;
  150.             border-radius: 20px;
  151.             padding: 10px 30px;
  152.             font-size: 16px;
  153.             font-weight: bold;
  154.             cursor: pointer;
  155.             transition: background-color 0.3s ease;
  156.         }
  157.  
  158.         button:hover {
  159.             background-color: #E0A800;
  160.         }
  161.  
  162.         button:active {
  163.             background-color: #C69300;
  164.         }
  165.     `);
  166.  
  167.     // JavaScript Logic
  168.     const executeButton = document.getElementById('execute');
  169.     const clearButton = document.getElementById('clear');
  170.     const injectButton = document.getElementById('inject');
  171.     const scriptInput = document.getElementById('script-input');
  172.     const statusIndicator = document.getElementById('status-indicator');
  173.  
  174.     injectButton.addEventListener('click', function() {
  175.         statusIndicator.classList.remove('red');
  176.         statusIndicator.classList.add('green');
  177.         statusIndicator.setAttribute('data-injected', 'true');
  178.     });
  179.  
  180.     clearButton.addEventListener('click', function() {
  181.         scriptInput.value = "";
  182.     });
  183.  
  184.     executeButton.addEventListener('click', function() {
  185.         if (statusIndicator.getAttribute('data-injected') === 'true') {
  186.             const script = scriptInput.value;
  187.  
  188.             // Execute Userscript
  189.             try {
  190.                 eval(script);
  191.                 alert('Script executed successfully.');
  192.             } catch (err) {
  193.                 console.error('Error executing script:', err);
  194.             }
  195.         } else {
  196.             alert('Please inject the environment first.');
  197.         }
  198.     });
  199.  
  200.     // Dragging Logic
  201.     oculusGUI.onmousedown = function(event) {
  202.         let shiftX = event.clientX - oculusGUI.getBoundingClientRect().left;
  203.         let shiftY = event.clientY - oculusGUI.getBoundingClientRect().top;
  204.  
  205.         function moveAt(pageX, pageY) {
  206.             oculusGUI.style.left = pageX - shiftX + 'px';
  207.             oculusGUI.style.top = pageY - shiftY + 'px';
  208.         }
  209.  
  210.         moveAt(event.pageX, event.pageY);
  211.  
  212.         function onMouseMove(event) {
  213.             moveAt(event.pageX, event.pageY);
  214.         }
  215.  
  216.         document.addEventListener('mousemove', onMouseMove);
  217.  
  218.         oculusGUI.onmouseup = function() {
  219.             document.removeEventListener('mousemove', onMouseMove);
  220.             oculusGUI.onmouseup = null;
  221.         };
  222.     };
  223.  
  224.     oculusGUI.ondragstart = function() {
  225.         return false;
  226.     };
  227. })();