☰

HTML Warper

Warps and messes around with the HTML of a site, with a protected GUI at the top of the page.

  1. // ==UserScript==
  2. // @name         HTML Warper
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.3
  5. // @description  Warps and messes around with the HTML of a site, with a protected GUI at the top of the page.
  6. // @author       cybuds
  7. // @match        *://*/*
  8. // @license      MIT
  9. // @grant        none
  10. // ==/UserScript==
  11.  
  12. (function () {
  13.     'use strict';
  14.  
  15.     let guiContainer = null;
  16.     let reopenButton = null;
  17.     const originalState = new Map();
  18.  
  19.     // Helper to create the GUI
  20.     const createGUI = () => {
  21.         if (guiContainer) return;
  22.  
  23.         // Main GUI container
  24.         guiContainer = document.createElement('div');
  25.         guiContainer.id = 'htmlWarperGui';
  26.         guiContainer.style.position = 'fixed';
  27.         guiContainer.style.top = '0';
  28.         guiContainer.style.left = '0';
  29.         guiContainer.style.width = '100%';
  30.         guiContainer.style.padding = '10px';
  31.         guiContainer.style.backgroundColor = 'rgba(0, 0, 0, 0.9)';
  32.         guiContainer.style.color = 'white';
  33.         guiContainer.style.borderBottom = '2px solid white';
  34.         guiContainer.style.zIndex = '99999';
  35.         guiContainer.style.fontFamily = 'Arial, sans-serif';
  36.         guiContainer.innerHTML = `
  37.             <div style="display: flex; justify-content: space-between; align-items: center;">
  38.                 <h3 style="margin: 0; font-size: 16px;">HTML Warper</h3>
  39.                 <button id="closeGui">Close GUI</button>
  40.             </div>
  41.             <div style="margin-top: 10px;">
  42.                 <button id="randomizeText">Randomize Text</button>
  43.                 <button id="rotateElements">Rotate Elements</button>
  44.                 <button id="changeColors">Change Colors</button>
  45.                 <button id="blurText">Blur Text</button>
  46.                 <button id="enlargeElements">Enlarge Elements</button>
  47.                 <button id="hideRandom">Hide Random Elements</button>
  48.                 <button id="undoChanges">Undo Changes</button>
  49.             </div>
  50.         `;
  51.         document.body.appendChild(guiContainer);
  52.  
  53.         // Event listeners for GUI buttons
  54.         document.getElementById('randomizeText').addEventListener('click', randomizeText);
  55.         document.getElementById('rotateElements').addEventListener('click', rotateElements);
  56.         document.getElementById('changeColors').addEventListener('click', changeColors);
  57.         document.getElementById('blurText').addEventListener('click', blurText);
  58.         document.getElementById('enlargeElements').addEventListener('click', enlargeElements);
  59.         document.getElementById('hideRandom').addEventListener('click', hideRandomElements);
  60.         document.getElementById('undoChanges').addEventListener('click', undoChanges);
  61.  
  62.         // Close GUI
  63.         document.getElementById('closeGui').addEventListener('click', () => {
  64.             guiContainer.style.display = 'none';
  65.             reopenButton.style.display = 'block';
  66.         });
  67.     };
  68.  
  69.     // Create reopen button
  70.     const createReopenButton = () => {
  71.         reopenButton = document.createElement('button');
  72.         reopenButton.innerText = 'Reopen GUI';
  73.         reopenButton.style.position = 'fixed';
  74.         reopenButton.style.bottom = '10px';
  75.         reopenButton.style.right = '10px';
  76.         reopenButton.style.padding = '10px';
  77.         reopenButton.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
  78.         reopenButton.style.color = 'white';
  79.         reopenButton.style.border = '1px solid white';
  80.         reopenButton.style.borderRadius = '5px';
  81.         reopenButton.style.zIndex = '99999';
  82.         reopenButton.style.fontFamily = 'Arial, sans-serif';
  83.         reopenButton.style.display = 'none';
  84.         document.body.appendChild(reopenButton);
  85.  
  86.         reopenButton.addEventListener('click', () => {
  87.             guiContainer.style.display = 'block';
  88.             reopenButton.style.display = 'none';
  89.         });
  90.     };
  91.  
  92.     // Functions for the effects (excluding the GUI)
  93.     const randomizeText = () => {
  94.         document.querySelectorAll('*:not(#htmlWarperGui):not(#htmlWarperGui *)').forEach((el) => {
  95.             if (!originalState.has(el)) originalState.set(el, el.innerText);
  96.             if (el.children.length === 0) el.innerText = Math.random().toString(36).substring(7);
  97.         });
  98.     };
  99.  
  100.     const rotateElements = () => {
  101.         document.querySelectorAll('*:not(#htmlWarperGui):not(#htmlWarperGui *)').forEach((el) => {
  102.             if (!originalState.has(el)) originalState.set(el, el.style.transform);
  103.             el.style.transform = `rotate(${Math.random() * 360}deg)`;
  104.         });
  105.     };
  106.  
  107.     const changeColors = () => {
  108.         document.querySelectorAll('*:not(#htmlWarperGui):not(#htmlWarperGui *)').forEach((el) => {
  109.             if (!originalState.has(el)) originalState.set(el, el.style.backgroundColor);
  110.             el.style.backgroundColor = `#${Math.floor(Math.random() * 16777215).toString(16)}`;
  111.         });
  112.     };
  113.  
  114.     const blurText = () => {
  115.         document.querySelectorAll('*:not(#htmlWarperGui):not(#htmlWarperGui *)').forEach((el) => {
  116.             if (!originalState.has(el)) originalState.set(el, el.style.filter);
  117.             el.style.filter = 'blur(2px)';
  118.         });
  119.     };
  120.  
  121.     const enlargeElements = () => {
  122.         document.querySelectorAll('*:not(#htmlWarperGui):not(#htmlWarperGui *)').forEach((el) => {
  123.             if (!originalState.has(el)) originalState.set(el, el.style.transform);
  124.             el.style.transform = 'scale(1.5)';
  125.         });
  126.     };
  127.  
  128.     const hideRandomElements = () => {
  129.         document.querySelectorAll('*:not(#htmlWarperGui):not(#htmlWarperGui *)').forEach((el) => {
  130.             if (!originalState.has(el)) originalState.set(el, el.style.display);
  131.             if (Math.random() > 0.7) el.style.display = 'none';
  132.         });
  133.     };
  134.  
  135.     const undoChanges = () => {
  136.         originalState.forEach((value, element) => {
  137.             element.innerText = value || '';
  138.             element.style.transform = '';
  139.             element.style.backgroundColor = '';
  140.             element.style.filter = '';
  141.             element.style.display = '';
  142.         });
  143.         originalState.clear();
  144.     };
  145.  
  146.     // Initialize GUI and reopen button
  147.     createGUI();
  148.     createReopenButton();
  149. })();