☰

Zed.City Theme Settings Alpha

Floating theme settings menu for zed.city with invert colors, hue overlay, custom background, page title change, hide logo, hide stats, and reset options.

// ==UserScript==
// @name         Zed.City Theme Settings Alpha
// @namespace    http://tampermonkey.net/
// @version      1.5
// @description  Floating theme settings menu for zed.city with invert colors, hue overlay, custom background, page title change, hide logo, hide stats, and reset options.
// @match        https://www.zed.city/*
// @grant        none
// ==/UserScript==

(function() {
  'use strict';

  // --- Constants ---
  const LS_KEYS = {
    hideStats: 'zedHideStats',
    themeColor: 'zedThemeColor',
    invertColors: 'zedInvertColors',
    hideLogo: 'zedHideLogo',
    pageTitle: 'zedPageTitle',
    customBackground: 'zedCustomBackground',
    hueOverlayColor: 'zedHueOverlayColor',
    hueOverlayIntensity: 'zedHueOverlayIntensity',
    menuMinimized: 'zedMenuMinimized',
  };

  const DEFAULTS = {
    hideStats: false,
    themeColor: '#000000',
    invertColors: false,
    hideLogo: false,
    pageTitle: document.title || 'zed.city',
    customBackground: '',
    hueOverlayColor: '#ff69b4',
    hueOverlayIntensity: 0,
    menuMinimized: false,
  };

  // --- Utility functions ---
  function lsGet(key, def) {
    try {
      const val = localStorage.getItem(key);
      if (val === null || val === undefined) return def;
      if (typeof def === 'boolean') return val === 'true';
      if (typeof def === 'number') return Number(val) || def;
      return val;
    } catch {
      return def;
    }
  }
  function lsSet(key, val) {
    try {
      localStorage.setItem(key, val);
    } catch {}
  }

  function el(tag, options = {}) {
    const e = document.createElement(tag);
    if (options.text) e.textContent = options.text;
    if (options.html) e.innerHTML = options.html;
    if (options.attrs) for (const [k,v] of Object.entries(options.attrs)) e.setAttribute(k,v);
    if (options.styles) for (const [k,v] of Object.entries(options.styles)) e.style[k] = v;
    if (options.classes) for (const c of options.classes) e.classList.add(c);
    if (options.events) for (const [k,v] of Object.entries(options.events)) e.addEventListener(k,v);
    return e;
  }

  // --- Apply functions ---
  function applyThemeColor(color) {
    document.documentElement.style.setProperty('--zed-theme-color', color);
    const buttons = document.querySelectorAll('button, a, input[type=button], input[type=submit]');
    buttons.forEach(btn => {
      btn.style.backgroundColor = color;
      btn.style.color = '#fff';
      btn.style.borderColor = color;
    });
  }
  function applyInvertColors(enabled) {
    if (enabled) {
      if (!document.getElementById('zedInvertStyle')) {
        const style = document.createElement('style');
        style.id = 'zedInvertStyle';
        style.textContent = `
          html {
            filter: invert(1) hue-rotate(180deg);
            background: black !important;
          }
          img, video, svg, picture, iframe, .no-invert {
            filter: invert(1) hue-rotate(180deg) !important;
          }
        `;
        document.head.appendChild(style);
      }
    } else {
      const style = document.getElementById('zedInvertStyle');
      if (style) style.remove();
    }
  }
  function applyHideStats(hide) {
    const statsBars = document.querySelectorAll('.stats, header .stats, #stats, .top-stats');
    statsBars.forEach(el => el.style.display = hide ? 'none' : '');
  }
  function applyHideLogo(hide) {
    const logo = document.querySelector('header img.logo, .logo img, header .logo, .logo');
    if (logo) logo.style.display = hide ? 'none' : '';
  }
  function applyPageTitle(title) {
    document.title = title || DEFAULTS.pageTitle;
  }
  function applyCustomBackground(dataUrl) {
    if (dataUrl) {
      document.body.style.backgroundImage = `url(${dataUrl})`;
      document.body.style.backgroundSize = 'cover';
      document.body.style.backgroundRepeat = 'no-repeat';
      document.body.style.backgroundPosition = 'center center';
    } else {
      document.body.style.backgroundImage = '';
    }
  }
  function applyHueOverlay(color, intensity) {
    let overlay = document.getElementById('zedHueOverlay');
    if (!overlay) {
      overlay = document.createElement('div');
      overlay.id = 'zedHueOverlay';
      Object.assign(overlay.style, {
        pointerEvents: 'none',
        position: 'fixed',
        top: '0', left: '0',
        width: '100%',
        height: '100%',
        zIndex: '999999',
        mixBlendMode: 'overlay'
      });
      document.body.appendChild(overlay);
    }
    overlay.style.backgroundColor = color;
    overlay.style.opacity = intensity;
  }

  // --- Init ---
  window.addEventListener('load', () => {
    const menu = el('div', {
      styles: {
        position: 'fixed',
        top: '10px',
        right: '10px',
        background: '#222',
        color: '#fff',
        padding: '10px',
        zIndex: 9999999,
        borderRadius: '5px',
        fontFamily: 'sans-serif',
        maxWidth: '250px'
      }
    });

    // Theme color picker
    const colorLabel = el('label', { text: ' Theme Color ' });
    const colorInput = el('input', {
      attrs: { type: 'color' },
      events: {
        input: e => {
          lsSet(LS_KEYS.themeColor, e.target.value);
          applyThemeColor(e.target.value);
        }
      }
    });
    colorLabel.prepend(colorInput);
    menu.appendChild(colorLabel);

    // Invert colors
    const invertLabel = el('label', { text: ' Invert Colors' });
    const invertCheckbox = el('input', {
      attrs: { type: 'checkbox' },
      events: {
        change: e => {
          lsSet(LS_KEYS.invertColors, e.target.checked);
          applyInvertColors(e.target.checked);
        }
      }
    });
    invertLabel.prepend(invertCheckbox);
    menu.appendChild(invertLabel);

    // Hide logo
    const hideLogoLabel = el('label', { text: ' Hide Logo' });
    const hideLogoCheckbox = el('input', {
      attrs: { type: 'checkbox' },
      events: {
        change: e => {
          lsSet(LS_KEYS.hideLogo, e.target.checked);
          applyHideLogo(e.target.checked);
        }
      }
    });
    hideLogoLabel.prepend(hideLogoCheckbox);
    menu.appendChild(hideLogoLabel);

    // Hide stats
    const hideStatsLabel = el('label', { text: ' Hide Stats' });
    const hideStatsCheckbox = el('input', {
      attrs: { type: 'checkbox' },
      events: {
        change: e => {
          lsSet(LS_KEYS.hideStats, e.target.checked);
          applyHideStats(e.target.checked);
        }
      }
    });
    hideStatsLabel.prepend(hideStatsCheckbox);
    menu.appendChild(hideStatsLabel);

    document.body.appendChild(menu);

    // Apply saved settings
    applyThemeColor(lsGet(LS_KEYS.themeColor, DEFAULTS.themeColor));
    invertCheckbox.checked = lsGet(LS_KEYS.invertColors, DEFAULTS.invertColors);
    hideLogoCheckbox.checked = lsGet(LS_KEYS.hideLogo, DEFAULTS.hideLogo);
    hideStatsCheckbox.checked = lsGet(LS_KEYS.hideStats, DEFAULTS.hideStats);
    applyInvertColors(invertCheckbox.checked);
    applyHideLogo(hideLogoCheckbox.checked);
    applyHideStats(hideStatsCheckbox.checked);
  });
})();