☰

Website UI Switcher

Switch UI styles (modern/eras) for YouTube, Google, Roblox, Yahoo!, and Amazon.

Version vom 09.09.2024. Aktuellste Version

// ==UserScript==
// @name         Website UI Switcher
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Switch UI styles (modern/eras) for YouTube, Google, Roblox, Yahoo!, and Amazon.
// @author       Your Name
// @match        *://*.youtube.com/*
// @match        *://*.google.com/*
// @match        *://*.roblox.com/*
// @match        *://*.yahoo.com/*
// @match        *://*.amazon.com/*
// @grant        GM_addStyle
// @grant        GM_registerMenuCommand
// ==/UserScript==

// Default settings
let settings = {
    style: "modern",  // "modern" or "classical"
    roundedCorners: true,  // true or false
};

// Load settings from localStorage
if (localStorage.getItem("uiSwitcherSettings")) {
    settings = JSON.parse(localStorage.getItem("uiSwitcherSettings"));
}

// Apply styles based on settings
function applyStyles() {
    if (settings.style === "modern") {
        GM_addStyle(`
            /* General Modern Rounded Styles */
            * {
                border-radius: ${settings.roundedCorners ? '10px' : '0px'} !important;
                box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
                transition: all 0.3s ease;
            }
            
            /* Modern Font */
            body, button, input {
                font-family: 'Arial', sans-serif !important;
            }
        `);
    } else {
        GM_addStyle(`
            /* Classical Styles with Square Corners */
            * {
                border-radius: 0px !important;
                box-shadow: none !important;
                transition: none;
            }
            
            /* Classical Font */
            body, button, input {
                font-family: 'Times New Roman', serif !important;
            }
        `);
    }
}

// Save settings
function saveSettings() {
    localStorage.setItem("uiSwitcherSettings", JSON.stringify(settings));
    applyStyles();
}

// Settings page UI
function createSettingsPage() {
    const settingsContainer = document.createElement("div");
    settingsContainer.id = "uiSwitcherSettingsContainer";
    settingsContainer.style.position = "fixed";
    settingsContainer.style.top = "10%";
    settingsContainer.style.left = "50%";
    settingsContainer.style.transform = "translateX(-50%)";
    settingsContainer.style.backgroundColor = "#fff";
    settingsContainer.style.padding = "20px";
    settingsContainer.style.boxShadow = "0px 0px 10px rgba(0, 0, 0, 0.2)";
    settingsContainer.style.zIndex = "9999";

    settingsContainer.innerHTML = `
        <h2>UI Switcher Settings</h2>
        <label>
            Style:
            <select id="uiStyleSelector">
                <option value="modern" ${settings.style === 'modern' ? 'selected' : ''}>Modern</option>
                <option value="classical" ${settings.style === 'classical' ? 'selected' : ''}>Classical</option>
            </select>
        </label><br><br>
        <label>
            Rounded Corners:
            <input type="checkbox" id="roundedCornersCheckbox" ${settings.roundedCorners ? 'checked' : ''}>
        </label><br><br>
        <button id="saveSettingsButton">Save</button>
        <button id="closeSettingsButton">Close</button>
    `;

    document.body.appendChild(settingsContainer);

    // Add event listeners for controls
    document.getElementById("saveSettingsButton").addEventListener("click", () => {
        settings.style = document.getElementById("uiStyleSelector").value;
        settings.roundedCorners = document.getElementById("roundedCornersCheckbox").checked;
        saveSettings();
        alert("Settings saved!");
    });

    document.getElementById("closeSettingsButton").addEventListener("click", () => {
        settingsContainer.remove();
    });
}

// Register menu command to open settings page
GM_registerMenuCommand("UI Switcher Settings", createSettingsPage);

// Apply styles on page load
applyStyles();