User:Stumblean/common.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

(function () {
  const iconURL = "https://files.catbox.moe/wk78nl.jpg";

  // === MENU ===
  const menu = document.createElement("div");
  menu.id = "mahitoMenu";
  Object.assign(menu.style, {
    position: "fixed",
    top: "20px",
    right: "20px",
    background: "#7889B2",
    color: "#fff",
    border: "2px solid #fff",
    borderRadius: "10px",
    padding: "10px",
    fontFamily: "monospace",
    zIndex: "99999",
    boxShadow: "0 0 10px black",
    width: "180px"
  });

  const header = document.createElement("div");
  header.style.display = "flex";
  header.style.justifyContent = "space-between";
  header.style.alignItems = "center";
  header.style.marginBottom = "8px";

  const title = document.createElement("div");
  title.textContent = "Mahito Menu";
  title.style.fontWeight = "bold";
  title.style.color = "#fff";

  const minimizeBtn = document.createElement("button");
  minimizeBtn.textContent = "–";
  minimizeBtn.style.background = "#45A8C5";
  minimizeBtn.style.border = "none";
  minimizeBtn.style.color = "#fff";
  minimizeBtn.style.cursor = "pointer";
  minimizeBtn.style.borderRadius = "5px";
  minimizeBtn.style.width = "25px";
  minimizeBtn.style.height = "25px";

  header.appendChild(title);
  header.appendChild(minimizeBtn);

  // === MINIMIZED ICON ===
  const minimizedIcon = document.createElement("img");
  minimizedIcon.src = iconURL;
  minimizedIcon.width = 30;
  minimizedIcon.height = 30;
  Object.assign(minimizedIcon.style, {
    position: "fixed",
    top: "20px",
    right: "20px",
    zIndex: "99999",
    display: "none",
    cursor: "pointer"
  });

  // === Button example (can add more)
  const btn = document.createElement("button");
  btn.textContent = "Open Explanation";
  Object.assign(btn.style, {
    background: "#45A8C5",
    color: "#fff",
    border: "none",
    padding: "5px 10px",
    borderRadius: "5px",
    width: "100%",
    cursor: "pointer"
  });

  // === Append everything
  menu.appendChild(header);
  menu.appendChild(btn);
  document.body.appendChild(menu);
  document.body.appendChild(minimizedIcon);

  // === Minimize/restore logic
  minimizeBtn.addEventListener("click", () => {
    menu.style.display = "none";
    minimizedIcon.style.display = "block";
  });

  minimizedIcon.addEventListener("click", () => {
    minimizedIcon.style.display = "none";
    menu.style.display = "block";
  });
})();