Warps and messes around with the HTML of a site, with a protected GUI at the top of the page.
// ==UserScript==
// @name HTML Warper
// @namespace http://tampermonkey.net/
// @version 1.3
// @description Warps and messes around with the HTML of a site, with a protected GUI at the top of the page.
// @author cybuds
// @match *://*/*
// @license MIT
// @grant none
// ==/UserScript==
(function () {
'use strict';
let guiContainer = null;
let reopenButton = null;
const originalState = new Map();
// Helper to create the GUI
const createGUI = () => {
if (guiContainer) return;
// Main GUI container
guiContainer = document.createElement('div');
guiContainer.id = 'htmlWarperGui';
guiContainer.style.position = 'fixed';
guiContainer.style.top = '0';
guiContainer.style.left = '0';
guiContainer.style.width = '100%';
guiContainer.style.padding = '10px';
guiContainer.style.backgroundColor = 'rgba(0, 0, 0, 0.9)';
guiContainer.style.color = 'white';
guiContainer.style.borderBottom = '2px solid white';
guiContainer.style.zIndex = '99999';
guiContainer.style.fontFamily = 'Arial, sans-serif';
guiContainer.innerHTML = `
<div style="display: flex; justify-content: space-between; align-items: center;">
<h3 style="margin: 0; font-size: 16px;">HTML Warper</h3>
<button id="closeGui">Close GUI</button>
</div>
<div style="margin-top: 10px;">
<button id="randomizeText">Randomize Text</button>
<button id="rotateElements">Rotate Elements</button>
<button id="changeColors">Change Colors</button>
<button id="blurText">Blur Text</button>
<button id="enlargeElements">Enlarge Elements</button>
<button id="hideRandom">Hide Random Elements</button>
<button id="undoChanges">Undo Changes</button>
</div>
`;
document.body.appendChild(guiContainer);
// Event listeners for GUI buttons
document.getElementById('randomizeText').addEventListener('click', randomizeText);
document.getElementById('rotateElements').addEventListener('click', rotateElements);
document.getElementById('changeColors').addEventListener('click', changeColors);
document.getElementById('blurText').addEventListener('click', blurText);
document.getElementById('enlargeElements').addEventListener('click', enlargeElements);
document.getElementById('hideRandom').addEventListener('click', hideRandomElements);
document.getElementById('undoChanges').addEventListener('click', undoChanges);
// Close GUI
document.getElementById('closeGui').addEventListener('click', () => {
guiContainer.style.display = 'none';
reopenButton.style.display = 'block';
});
};
// Create reopen button
const createReopenButton = () => {
reopenButton = document.createElement('button');
reopenButton.innerText = 'Reopen GUI';
reopenButton.style.position = 'fixed';
reopenButton.style.bottom = '10px';
reopenButton.style.right = '10px';
reopenButton.style.padding = '10px';
reopenButton.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
reopenButton.style.color = 'white';
reopenButton.style.border = '1px solid white';
reopenButton.style.borderRadius = '5px';
reopenButton.style.zIndex = '99999';
reopenButton.style.fontFamily = 'Arial, sans-serif';
reopenButton.style.display = 'none';
document.body.appendChild(reopenButton);
reopenButton.addEventListener('click', () => {
guiContainer.style.display = 'block';
reopenButton.style.display = 'none';
});
};
// Functions for the effects (excluding the GUI)
const randomizeText = () => {
document.querySelectorAll('*:not(#htmlWarperGui):not(#htmlWarperGui *)').forEach((el) => {
if (!originalState.has(el)) originalState.set(el, el.innerText);
if (el.children.length === 0) el.innerText = Math.random().toString(36).substring(7);
});
};
const rotateElements = () => {
document.querySelectorAll('*:not(#htmlWarperGui):not(#htmlWarperGui *)').forEach((el) => {
if (!originalState.has(el)) originalState.set(el, el.style.transform);
el.style.transform = `rotate(${Math.random() * 360}deg)`;
});
};
const changeColors = () => {
document.querySelectorAll('*:not(#htmlWarperGui):not(#htmlWarperGui *)').forEach((el) => {
if (!originalState.has(el)) originalState.set(el, el.style.backgroundColor);
el.style.backgroundColor = `#${Math.floor(Math.random() * 16777215).toString(16)}`;
});
};
const blurText = () => {
document.querySelectorAll('*:not(#htmlWarperGui):not(#htmlWarperGui *)').forEach((el) => {
if (!originalState.has(el)) originalState.set(el, el.style.filter);
el.style.filter = 'blur(2px)';
});
};
const enlargeElements = () => {
document.querySelectorAll('*:not(#htmlWarperGui):not(#htmlWarperGui *)').forEach((el) => {
if (!originalState.has(el)) originalState.set(el, el.style.transform);
el.style.transform = 'scale(1.5)';
});
};
const hideRandomElements = () => {
document.querySelectorAll('*:not(#htmlWarperGui):not(#htmlWarperGui *)').forEach((el) => {
if (!originalState.has(el)) originalState.set(el, el.style.display);
if (Math.random() > 0.7) el.style.display = 'none';
});
};
const undoChanges = () => {
originalState.forEach((value, element) => {
element.innerText = value || '';
element.style.transform = '';
element.style.backgroundColor = '';
element.style.filter = '';
element.style.display = '';
});
originalState.clear();
};
// Initialize GUI and reopen button
createGUI();
createReopenButton();
})();