☰

BetterTriangulet with Quick CSS Plugin

Adds BetterTriangulet panel with plugin modal, theme-colored overlay, Titan X close, Reset Data, and Quick CSS editor panel

当前为 2025-07-05 提交的版本，查看 最新版本。

// ==UserScript==
// @name         BetterTriangulet with Quick CSS Plugin
// @version      1.16
// @description  Adds BetterTriangulet panel with plugin modal, theme-colored overlay, Titan X close, Reset Data, and Quick CSS editor panel
// @match        https://tri.pengpowers.xyz/*
// @grant        none
// @namespace https://gf.qytechs.cn/users/1479014
// ==/UserScript==

(function () {
    'use strict';

    // Load Titan One font
    const titanFont = document.createElement("link");
    titanFont.href = "https://fonts.googleapis.com/css2?family=Titan+One&display=swap";
    titanFont.rel = "stylesheet";
    document.head.appendChild(titanFont);

    // Apply custom CSS live from textarea + save to localStorage
    function applyQuickCSS(css) {
        let styleTag = document.getElementById("betterTrianguletQuickCSS");
        if (!styleTag) {
            styleTag = document.createElement("style");
            styleTag.id = "betterTrianguletQuickCSS";
            document.head.appendChild(styleTag);
        }
        styleTag.textContent = css || "";
    }

    // Inject Quick CSS panel into settings
    function injectQuickCSSPanel() {
        if (document.getElementById("betterTrianguletQuickCSSPanel")) return; // Already exists

        const mainContainer = document.querySelector(".styles__mainContainer___4TLvi-camelCase");
        if (!mainContainer) return;

        const panel = document.createElement("div");
        panel.id = "betterTrianguletQuickCSSPanel";
        panel.className = "styles__infoContainer___2uI-S-camelCase";

        // Match background color from theme
        const theme = localStorage.getItem("theme");
        const themeColors = {
            Purple: '#4d136b',
            Green: '#265b09',
            Blue: '#132a6b',
            Red: '#6b1313',
            Orange: '#6b3b13',
            Yellow: '#6b6a13',
            Pink: '#6b134a',
            White: '#e6e6e6',
            Black: '#000000'
        };
        panel.style.backgroundColor = themeColors[theme] || "var(--container)";

        const headerRow = document.createElement("div");
        headerRow.className = "styles__headerRow___1tdPa-camelCase";

        const icon = document.createElement("i");
        icon.className = "fas fa-code styles__headerIcon___1ykdN-camelCase";
        icon.setAttribute("aria-hidden", "true");

        const headerText = document.createElement("div");
        headerText.className = "styles__infoHeader___1lsZY-camelCase";
        headerText.textContent = "Quick CSS";

        headerRow.appendChild(icon);
        headerRow.appendChild(headerText);

        const textarea = document.createElement("textarea");
        textarea.id = "betterTrianguletQuickCSSTextarea";
        textarea.placeholder = "Enter your custom CSS here...";
        textarea.style.width = "100%";
        textarea.style.minHeight = "120px";
        textarea.style.marginTop = "1vw";
        textarea.style.backgroundColor = "rgba(255, 255, 255, 0.05)";
        textarea.style.color = "inherit";
        textarea.style.border = "1px solid var(--accent)";
        textarea.style.borderRadius = "0.3vw";
        textarea.style.padding = "0.5vw";
        textarea.style.fontFamily = "monospace";
        textarea.style.fontSize = "1vw";
        textarea.style.resize = "vertical";
        textarea.value = localStorage.getItem("betterTriangulet_quickCSS") || "";

        textarea.addEventListener("input", () => {
            const css = textarea.value;
            applyQuickCSS(css);
            localStorage.setItem("betterTriangulet_quickCSS", css);
        });

        panel.appendChild(headerRow);
        panel.appendChild(textarea);

        mainContainer.appendChild(panel);

        // Apply stored CSS immediately
        applyQuickCSS(textarea.value);
    }

    // Remove Quick CSS panel and clear applied CSS
    function removeQuickCSSPanel() {
        const panel = document.getElementById("betterTrianguletQuickCSSPanel");
        if (panel) panel.remove();

        const styleTag = document.getElementById("betterTrianguletQuickCSS");
        if (styleTag) styleTag.remove();

        // Optionally clear stored CSS when disabling plugin:
        // localStorage.removeItem("betterTriangulet_quickCSS");
    }

    function createOverlayBox() {
        const profileBody = document.querySelector('.arts__profileBody___eNPbH-camelCase');
        if (!profileBody) return;

        const existingOverlay = document.getElementById('profileBodyOverlayBox');
        if (existingOverlay) existingOverlay.remove();

        const rect = profileBody.getBoundingClientRect();
        const overlay = document.createElement('div');
        overlay.id = 'profileBodyOverlayBox';

        Object.assign(overlay.style, {
            position: 'absolute',
            top: `${rect.top + window.scrollY}px`,
            left: `${rect.left + window.scrollX}px`,
            width: `${rect.width}px`,
            height: `${rect.height}px`,
            zIndex: '9998',
            color: 'inherit'
        });

        const theme = localStorage.getItem("theme");
        const themeColors = {
            Purple: '#4d136b',
            Green: '#265b09',
            Blue: '#132a6b',
            Red: '#6b1313',
            Orange: '#6b3b13',
            Yellow: '#6b6a13',
            Pink: '#6b134a',
            White: '#e6e6e6',
            Black: '#000000'
        };

        overlay.style.backgroundColor = themeColors[theme] || 'var(--container)';
        document.body.appendChild(overlay);
    }

    function removeOverlayBox() {
        const existingOverlay = document.getElementById('profileBodyOverlayBox');
        if (existingOverlay) existingOverlay.remove();
    }

    function createModal() {
        const profileBody = document.querySelector(".arts__profileBody___eNPbH-camelCase");
        if (!profileBody) return;

        const existingModal = document.getElementById("betterTrianguletModalOverlay");
        if (existingModal) existingModal.remove();

        createOverlayBox();

        const modalOverlay = document.createElement("div");
        modalOverlay.id = "betterTrianguletModalOverlay";

        Object.assign(modalOverlay.style, {
            position: "absolute",
            top: profileBody.offsetTop + "px",
            left: profileBody.offsetLeft + "px",
            width: profileBody.offsetWidth + "px",
            height: profileBody.offsetHeight + "px",
            zIndex: "9999",
            backgroundColor: "var(--container)",
            color: "inherit",
            borderRadius: "0.5vw",
            overflowY: "auto",
            padding: "2vw",
            fontFamily: "Nunito, sans-serif",
            display: "flex",
            flexDirection: "column",
            boxSizing: "border-box",
        });

        const closeBtn = document.createElement("div");
        closeBtn.textContent = "X";
        Object.assign(closeBtn.style, {
            position: "absolute",
            top: "1vw",
            right: "1.2vw",
            fontFamily: "'Titan One', sans-serif",
            fontSize: "2.5vw",
            color: "#ff4d4d",
            cursor: "pointer",
            userSelect: "none",
            zIndex: "10000",
            transition: "transform 0.15s ease-in-out"
        });

        closeBtn.onmouseenter = () => {
            closeBtn.style.transform = "scale(1.2)";
        };
        closeBtn.onmouseleave = () => {
            closeBtn.style.transform = "scale(1)";
        };

        closeBtn.onclick = () => {
            modalOverlay.remove();
            removeOverlayBox();
        };

        const title = document.createElement("div");
        title.textContent = "Plugin Manager";
        Object.assign(title.style, {
            fontSize: "2vw",
            fontWeight: "800",
            marginBottom: "1vw",
            color: "var(--accent)",
            userSelect: "none",
        });

        // Plugins content container
        const content = document.createElement("div");
        Object.assign(content.style, {
            fontSize: "1.2vw",
            flexGrow: "1",
            marginBottom: "2vw",
            whiteSpace: "pre-wrap",
        });

        // Manage Plugins link
        const pluginText = document.createElement("text");
        pluginText.className = "styles__link___5UR6_-camelCase";
        pluginText.id = "managePlugins";
        pluginText.textContent = "Manage Plugins";
        pluginText.style.cursor = "pointer";
        pluginText.style.textDecoration = "underline";
        pluginText.style.display = "block";
        content.appendChild(pluginText);

        pluginText.onclick = () => {
            if (!document.getElementById("betterTrianguletModalOverlay")) {
                createModal();
            }
        };

        // Reset Data link
        const resetText = document.createElement("text");
        resetText.className = "styles__link___5UR6_-camelCase";
        resetText.textContent = "Reset Data";
        resetText.style.cursor = "pointer";
        resetText.style.textDecoration = "underline";
        resetText.style.display = "block";
        resetText.style.marginTop = "0.5vw";

        resetText.onclick = () => {
            if (confirm("Are you sure you want to clear all localStorage data?")) {
                localStorage.clear();
                location.reload();
            }
        };
        content.appendChild(resetText);

        // === Quick CSS Plugin Toggle ===
        const quickCSSToggle = document.createElement("label");
        quickCSSToggle.textContent = "Quick CSS";
        Object.assign(quickCSSToggle.style, {
            display: "flex",
            alignItems: "center",
            justifyContent: "space-between",
            marginTop: "1vw",
            marginBottom: "1vw",
            fontWeight: "bold",
            fontSize: "1.2vw",
            cursor: "default",
            userSelect: "none"
        });

        const quickCSSCheckbox = document.createElement("input");
        quickCSSCheckbox.type = "checkbox";
        quickCSSCheckbox.checked = localStorage.getItem("quickCSS_enabled") === "true";

        quickCSSCheckbox.onchange = () => {
            const enabled = quickCSSCheckbox.checked;
            localStorage.setItem("quickCSS_enabled", enabled);
            if (enabled) {
                injectQuickCSSPanel();
            } else {
                removeQuickCSSPanel();
            }
        };

        quickCSSToggle.appendChild(quickCSSCheckbox);
        quickCSSToggle.insertBefore(quickCSSCheckbox, quickCSSToggle.firstChild);
        content.appendChild(quickCSSToggle);

        modalOverlay.appendChild(closeBtn);
        modalOverlay.appendChild(title);
        modalOverlay.appendChild(content);
        profileBody.parentElement.appendChild(modalOverlay);
    }

    function injectPanel() {
        const mainContainer = document.querySelector(".styles__mainContainer___4TLvi-camelCase");
        if (!mainContainer || document.getElementById("betterTrianguletBox")) return;

        const container = document.createElement("div");
        container.className = "styles__infoContainer___2uI-S-camelCase";
        container.id = "betterTrianguletBox";

        const headerRow = document.createElement("div");
        headerRow.className = "styles__headerRow___1tdPa-camelCase";

        const icon = document.createElement("i");
        icon.className = "fas fa-code styles__headerIcon___1ykdN-camelCase";
        icon.setAttribute("aria-hidden", "true");

        const headerText = document.createElement("div");
        headerText.className = "styles__infoHeader___1lsZY-camelCase";
        headerText.textContent = "BetterTriangulet";

        headerRow.appendChild(icon);
        headerRow.appendChild(headerText);

        const pluginDiv = document.createElement("div");

        // Manage Plugins link
        const pluginText = document.createElement("text");
        pluginText.className = "styles__link___5UR6_-camelCase";
        pluginText.id = "managePlugins";
        pluginText.textContent = "Manage Plugins";
        pluginText.style.cursor = "pointer";
        pluginText.style.textDecoration = "underline";
        pluginText.style.display = "block";

        pluginText.onclick = () => {
            if (!document.getElementById("betterTrianguletModalOverlay")) {
                createModal();
            }
        };
        pluginDiv.appendChild(pluginText);

        // Reset Data link
        const resetText = document.createElement("text");
        resetText.className = "styles__link___5UR6_-camelCase";
        resetText.textContent = "Reset Data";
        resetText.style.cursor = "pointer";
        resetText.style.textDecoration = "underline";
        resetText.style.display = "block";
        resetText.style.marginTop = "0.5vw";

        resetText.onclick = () => {
            if (confirm("Are you sure you want to clear all localStorage data?")) {
                localStorage.clear();
                location.reload();
            }
        };
        pluginDiv.appendChild(resetText);

        container.appendChild(headerRow);
        container.appendChild(pluginDiv);
        mainContainer.appendChild(container);

        // Auto inject Quick CSS panel if enabled
        if (localStorage.getItem("quickCSS_enabled") === "true") {
            injectQuickCSSPanel();
        }
    }

    function waitForSettings() {
        const settingsHeader = [...document.querySelectorAll("div")].find(el =>
            el.textContent.trim() === "Settings" &&
            el.className.includes("styles__header___")
        );
        if (settingsHeader) {
            injectPanel();
        } else {
            setTimeout(waitForSettings, 250);
        }
    }

    waitForSettings();

})();

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址