Cat Errors

Replace error messages with cat images.
Ask a question, post a review, or report the script.
Wrap lines
// ==UserScript==
// @name         Cat Errors
// @namespace caterrors
// @description Replace error messages with cat images. 
// @version      0.1
// @match        *://*/*
// @grant        none
// ==/UserScript==

(function() {
  "use strict";

  const lang = navigator.language || navigator.userLanguage;
  const langStrings = [
    {
      lang: "en",
      tempDisableBtn: "View Original Page",
      permDisableBtn: "Disable cat errors",
      enableButton: "Enable cat errors",
    },
    {
      lang: "pt",
      tempDisableBtn: "Ver página original", 
      permDisableBtn: "Desativar",
      enableButton: "Ativar", 
    },
  ];

  const text = langStrings.find(l => l.lang === lang.substring(0, 2)) || langStrings[0];

  const errors = [
    {
      code: 400,
      message: "bad request",
    },
    {
      code: 401,
      message: "unauthorized",
    },
    {
      code: 403,
      message: "forbidden",
    },
    {
      code: 404,
      message: "not found",
    },
    {
      code: 500,
      message: "internal server error",
    },
    {
      code: 502,
      message: "bad gateway",
    },
    {
      code: 503,
      message: "service unavailable",
    },
    {
      code: 504,
      message: "gateway timeout",
    }
  ];

  const cats = [
    "😺",
    "😹",
    "😻",
    "😼",
    "😽",
    "🙀",
    "😿",
  ]

  const catEmoji = cats[Math.floor(Math.random() * cats.length)];

  const toggleButton = document.createElement("button");
  toggleButton.innerText = catEmoji;
  toggleButton.style.position = "fixed";
  toggleButton.style.bottom = "0px";
  toggleButton.style.right = "0px";
  toggleButton.style.zIndex = "9999";
  toggleButton.style.padding = "10px";
  toggleButton.style.borderTop = "1px solid #1a1a1a75";
  toggleButton.style.borderLeft = "1px solid #1a1a1a75";
  toggleButton.style.borderRadius = "20px 0 0 0";
  toggleButton.style.backgroundColor = "#1a1a1a50";
  toggleButton.style.backdropFilter = "blur(10px)";
  toggleButton.style.fontSize = "20px";
  toggleButton.style.cursor = "pointer";
  toggleButton.title = "Abrir popup";

  const isEnabled = localStorage.getItem("catErrorsDisabled") !== "true";

  // Cria o painel de popup
  const popup = document.createElement("div");
  popup.innerHTML = `
    <h2 style="margin: 0; font-size: 32px; font: bold;">${catEmoji}${catEmoji}${catEmoji}</h2>
    <div style="margin-top: 10px; font-size: 14px; line-height: 1.5;">
        <button id="toggle" style="margin-top: 10px; padding: 5px 10px; font-size: 14px; border-radius: 100px; background-color: #1a1a1a; border: 1px #2a2a2a solid; color: white; cursor: pointer;">${isEnabled ? text.permDisableBtn : text.enableButton}</button>
    </div>
  `;
  popup.style.position = "fixed";
  popup.style.bottom = "70px";
  popup.style.right = "0";
  popup.style.width = "250px";
  popup.style.display = "none"
  popup.style.padding = "15px";
  popup.style.backgroundColor = "#1a1a1a50";
  popup.style.backdropFilter = "blur(10px)";
  popup.style.color = "#fff";
  popup.style.border = "1px solid #1a1a1a75";
  popup.style.borderStartStartRadius = "8px";
  popup.style.borderEndStartRadius = "8px";

  toggleButton.addEventListener("click", () => {
    popup.style.display = popup.style.display === "none" ? "block" : "none";
  });

  document.addEventListener("click", (event) => {
    if (!popup.contains(event.target) && event.target !== toggleButton) {
      popup.style.display = "none";
    }
  });

  document.body.appendChild(toggleButton);
  document.body.appendChild(popup);

  function toggleCatErrors() {
    const isDisabled = localStorage.getItem("catErrorsDisabled") === "true";
    if (isDisabled) {
      localStorage.removeItem("catErrorsDisabled");
      popup.querySelector("button").innerText = text.permDisableBtn;
    } else {
      localStorage.setItem("catErrorsDisabled", "true");
      popup.querySelector("button").innerText = text.enableButton;
    }
  }
  
  popup.querySelector("#toggle").addEventListener("click", toggleCatErrors);

  const disabled = localStorage.getItem("catErrorsDisabled");
  if (disabled === "temp") {
    localStorage.removeItem("catErrorsDisabled");
    return;
  }
  if (disabled) return;


  function restorePage(){
    localStorage.setItem("catErrorsDisabled", "temp");
    location.reload();
  }

  function disableCatErrors() {
    localStorage.setItem("catErrorsDisabled", "true");
    location.reload();
  }


  errors.forEach(error => {
    console.log(`Cat Error: ${error.code} - ${error.message}`);
    if (document.title.toLowerCase().includes(error.code) || document.body.innerText.toLowerCase().includes(error.message)) {
      document.body.innerHTML = `
        <div style="display:flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; font-family: Arial, sans-serif;">
          <img src="https://http.cat/${error.code}" alt="Gato" style="max-width: 100%; height: auto; border-radius: 32px;">
          <div style="margin-top: 20px;">
            <button style="padding: 10px 20px; font-size: 16px; border-radius: 8px; background-color: #4CAF50; color: white; border: none; cursor: pointer;" id="restore">${text.tempDisableBtn}</button>
            <button style="padding: 10px 20px; font-size: 16px; border-radius: 8px; background-color: #f44336; color: white; border: none; cursor: pointer; margin-left: 10px;" id="disable">${text.permDisableBtn}</button>
          </div>
        </div>
      `;
      document.body.style.height = "100vh";
      
    }

    document.getElementById("restore")?.addEventListener("click", restorePage);
    document.getElementById("disable")?.addEventListener("click", disableCatErrors);
  });
})();