☰

Key Press Display

Displays the keys being pressed on the screen with customization options, positioning, and a toggleable GUI via the 'H' key.

  1. // ==UserScript==
  2. // @name         Key Press Display
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.9
  5. // @description  Displays the keys being pressed on the screen with customization options, positioning, and a toggleable GUI via the 'H' key.
  6. // @author       Arjun
  7. // @grant        none
  8. // @match        https://shellshock.io/
  9. // @license      GPL 3.0
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.     'use strict';
  14.  
  15.     const keyDisplayDiv = document.createElement('div');
  16.     keyDisplayDiv.style.position = 'fixed';
  17.     keyDisplayDiv.style.top = '10px';
  18.     keyDisplayDiv.style.right = '10px';
  19.     keyDisplayDiv.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
  20.     keyDisplayDiv.style.color = 'white';
  21.     keyDisplayDiv.style.padding = '10px';
  22.     keyDisplayDiv.style.borderRadius = '8px';
  23.     keyDisplayDiv.style.fontFamily = 'Arial, sans-serif';
  24.     keyDisplayDiv.style.fontSize = '20px';
  25.     keyDisplayDiv.style.zIndex = '9999';
  26.     keyDisplayDiv.style.textAlign = 'center';
  27.     keyDisplayDiv.style.cursor = 'move';  // Set cursor to move
  28.     document.body.appendChild(keyDisplayDiv);
  29.  
  30.     const guiDiv = document.createElement('div');
  31.     guiDiv.style.position = 'fixed';
  32.     guiDiv.style.bottom = '10px';
  33.     guiDiv.style.right = '50%';
  34.     guiDiv.style.transform = 'translateX(50%)';
  35.     guiDiv.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
  36.     guiDiv.style.color = 'white';
  37.     guiDiv.style.padding = '15px';
  38.     guiDiv.style.borderRadius = '10px';
  39.     guiDiv.style.fontFamily = 'Arial, sans-serif';
  40.     guiDiv.style.fontSize = '14px';
  41.     guiDiv.style.zIndex = '10000';
  42.     guiDiv.style.width = '240px';
  43.     guiDiv.style.boxShadow = '0px 4px 10px rgba(0, 0, 0, 0.3)';
  44.     guiDiv.style.transition = 'opacity 0.3s ease';
  45.     guiDiv.style.textAlign = 'center';
  46.     guiDiv.style.cursor = 'move';  // Set cursor to move
  47.     guiDiv.innerHTML = `
  48.         <label for="bgColor">Background:</label><br>
  49.         <input type="color" id="bgColor" value="#000000" style="border-radius: 5px; padding: 5px; border: none;"><br><br>
  50.         <label for="fontColor">Font Color:</label><br>
  51.         <input type="color" id="fontColor" value="#FFFFFF" style="border-radius: 5px; padding: 5px; border: none;"><br><br>
  52.         <label for="fontSize">Font Size: <span id="fontSizeValue">20</span>px</label><br>
  53.         <input type="range" id="fontSize" min="10" max="50" value="20" style="width: 100%; border-radius: 5px;"><br><br>
  54.         <label for="position">Position:</label><br>
  55.         <select id="position" style="border-radius: 5px; padding: 5px; width: 100%; border: none; background-color: rgba(255, 255, 255, 0.1); color: white;">
  56.             <option value="top-right">Top Right</option>
  57.             <option value="top-left">Top Left</option>
  58.             <option value="bottom-right">Bottom Right</option>
  59.             <option value="bottom-left">Bottom Left</option>
  60.             <option value="center">Center</option>
  61.             <option value="top-center">Top Center</option>
  62.             <option value="bottom-center">Bottom Center</option>
  63.         </select><br><br>
  64.         <button id="closeGui" style="padding: 10px; width: 100%; background-color: rgba(255, 255, 255, 0.2); border: none; border-radius: 8px; color: white; cursor: pointer;">Close GUI[H]</button>
  65.     `;
  66.     document.body.appendChild(guiDiv);
  67.  
  68.     const pressedKeys = new Set();
  69.     let capsLockActive = false;
  70.     let isGuiVisible = false;
  71.  
  72.     document.addEventListener('keydown', (event) => {
  73.         if (isTyping()) return; // Prevent logging while typing
  74.  
  75.         if (event.key === 'CapsLock') {
  76.             capsLockActive = !capsLockActive;
  77.             displayCapsLock();
  78.         } else if (event.key === 'h' || event.key === 'H') {  // Toggle GUI on "H" key press
  79.             toggleGuiVisibility();
  80.         } else {
  81.             pressedKeys.add(event.key);
  82.         }
  83.         updateDisplay();
  84.     });
  85.  
  86.     document.addEventListener('keyup', (event) => {
  87.         if (isTyping()) return; // Prevent logging while typing
  88.  
  89.         if (event.key !== 'CapsLock') {
  90.             pressedKeys.delete(event.key);
  91.         }
  92.         updateDisplay();
  93.     });
  94.  
  95.     // Function to check if the user is typing in an input field
  96.     function isTyping() {
  97.         const activeElement = document.activeElement;
  98.         return activeElement.tagName === 'INPUT' || activeElement.tagName === 'TEXTAREA' || activeElement.isContentEditable;
  99.     }
  100.  
  101.     // Toggle GUI visibility function
  102.     function toggleGuiVisibility() {
  103.         if (isGuiVisible) {
  104.             guiDiv.style.opacity = '0';
  105.             setTimeout(() => guiDiv.style.display = 'none', 300);
  106.         } else {
  107.             guiDiv.style.display = 'block';
  108.             setTimeout(() => guiDiv.style.opacity = '1', 10);
  109.         }
  110.         isGuiVisible = !isGuiVisible;
  111.     }
  112.  
  113.     const bgColorInput = document.getElementById('bgColor');
  114.     const fontColorInput = document.getElementById('fontColor');
  115.     const fontSizeInput = document.getElementById('fontSize');
  116.     const fontSizeValue = document.getElementById('fontSizeValue');
  117.     const positionSelect = document.getElementById('position');
  118.     const closeGuiButton = document.getElementById('closeGui');
  119.  
  120.     bgColorInput.addEventListener('input', () => {
  121.         keyDisplayDiv.style.backgroundColor = bgColorInput.value;
  122.     });
  123.  
  124.     fontColorInput.addEventListener('input', () => {
  125.         keyDisplayDiv.style.color = fontColorInput.value;
  126.     });
  127.  
  128.     fontSizeInput.addEventListener('input', () => {
  129.         const fontSize = fontSizeInput.value;
  130.         keyDisplayDiv.style.fontSize = fontSize + 'px';
  131.         fontSizeValue.textContent = fontSize;
  132.     });
  133.  
  134.     positionSelect.addEventListener('change', () => {
  135.         switch (positionSelect.value) {
  136.             case 'top-right':
  137.                 keyDisplayDiv.style.top = '10px';
  138.                 keyDisplayDiv.style.right = '10px';
  139.                 keyDisplayDiv.style.bottom = '';
  140.                 keyDisplayDiv.style.left = '';
  141.                 keyDisplayDiv.style.transform = '';
  142.                 break;
  143.             case 'top-left':
  144.                 keyDisplayDiv.style.top = '10px';
  145.                 keyDisplayDiv.style.left = '10px';
  146.                 keyDisplayDiv.style.bottom = '';
  147.                 keyDisplayDiv.style.right = '';
  148.                 keyDisplayDiv.style.transform = '';
  149.                 break;
  150.             case 'bottom-right':
  151.                 keyDisplayDiv.style.bottom = '10px';
  152.                 keyDisplayDiv.style.right = '10px';
  153.                 keyDisplayDiv.style.top = '';
  154.                 keyDisplayDiv.style.left = '';
  155.                 keyDisplayDiv.style.transform = '';
  156.                 break;
  157.             case 'bottom-left':
  158.                 keyDisplayDiv.style.bottom = '10px';
  159.                 keyDisplayDiv.style.left = '10px';
  160.                 keyDisplayDiv.style.top = '';
  161.                 keyDisplayDiv.style.right = '';
  162.                 keyDisplayDiv.style.transform = '';
  163.                 break;
  164.             case 'center':
  165.                 keyDisplayDiv.style.top = '50%';
  166.                 keyDisplayDiv.style.left = '50%';
  167.                 keyDisplayDiv.style.bottom = '';
  168.                 keyDisplayDiv.style.right = '';
  169.                 keyDisplayDiv.style.transform = 'translate(-50%, -50%)';
  170.                 break;
  171.             case 'top-center':
  172.                 keyDisplayDiv.style.top = '10px';
  173.                 keyDisplayDiv.style.left = '50%';
  174.                 keyDisplayDiv.style.bottom = '';
  175.                 keyDisplayDiv.style.right = '';
  176.                 keyDisplayDiv.style.transform = 'translateX(-50%)';
  177.                 break;
  178.             case 'bottom-center':
  179.                 keyDisplayDiv.style.bottom = '10px';
  180.                 keyDisplayDiv.style.left = '50%';
  181.                 keyDisplayDiv.style.top = '';
  182.                 keyDisplayDiv.style.right = '';
  183.                 keyDisplayDiv.style.transform = 'translateX(-50%)';
  184.                 break;
  185.         }
  186.     });
  187.  
  188.     closeGuiButton.addEventListener('click', () => {
  189.         guiDiv.style.opacity = '0';
  190.         setTimeout(() => guiDiv.style.display = 'none', 300);
  191.         isGuiVisible = false;
  192.     });
  193.  
  194.     function updateDisplay() {
  195.         if (pressedKeys.size > 0) {
  196.             keyDisplayDiv.innerText = Array.from(pressedKeys).join(' + ');
  197.         } else if (!capsLockActive) {
  198.             keyDisplayDiv.innerText = '';
  199.         }
  200.     }
  201.  
  202.     function displayCapsLock() {
  203.         if (capsLockActive) {
  204.             keyDisplayDiv.innerText = 'Caps Lock On';
  205.             setTimeout(() => {
  206.                 keyDisplayDiv.innerText = '';
  207.                 updateDisplay();
  208.             }, 1000);
  209.         } else {
  210.             updateDisplay();
  211.         }
  212.     }
  213.  
  214.     // Dragging functionality
  215.     function makeDraggable(element) {
  216.         let offsetX = 0, offsetY = 0, isDragging = false;
  217.  
  218.         element.addEventListener('mousedown', (e) => {
  219.             offsetX = e.clientX - element.getBoundingClientRect().left;
  220.             offsetY = e.clientY - element.getBoundingClientRect().top;
  221.             isDragging = true;
  222.         });
  223.  
  224.         document.addEventListener('mousemove', (e) => {
  225.             if (isDragging) {
  226.                 element.style.left = `${e.clientX - offsetX}px`;
  227.                 element.style.top = `${e.clientY - offsetY}px`;
  228.                 element.style.right = '';
  229.                 element.style.bottom = '';
  230.                 element.style.transform = '';
  231.             }
  232.         });
  233.  
  234.         document.addEventListener('mouseup', () => {
  235.             isDragging = false;
  236.         });
  237.     }
  238.  
  239.     makeDraggable(keyDisplayDiv);  // Enable dragging for key display div
  240.     makeDraggable(guiDiv);  // Enable dragging for GUI div
  241.  
  242.     keyDisplayDiv.addEventListener('selectstart', (e) => {
  243.         e.preventDefault();  // Prevent text selection
  244.     });
  245. })();
  246.