Duo Helper VN のソースコード

Duo Helper VN

Duo Helper giao diện tiếng Việt
右端で折り返す
// ==UserScript==
// @name         Duo Helper VN
// @namespace    DuoHelperVN
// @version      2.0
// @description  Duo Helper giao diện tiếng Việt
// @match        https://www.duolingo.com/*
// @grant        none
// ==/UserScript==

(() => {
    "use strict";

    const ID = "duo-helper-vn";

    let mode = "normal";
    let running = false;

    function addStyle() {
        if (document.getElementById(ID + "-style")) return;

        const style = document.createElement("style");
        style.id = ID + "-style";

        style.textContent = `
            #${ID} {
                position: fixed;
                top: 220px;
                right: 22px;
                width: 270px;
                padding: 18px;
                background: #ffffff;
                border-radius: 20px;
                box-shadow: 0 8px 30px rgba(0,0,0,.25);
                border: 2px solid #e5e5e5;
                z-index: 2147483647;
                font-family: Arial, sans-serif;
                user-select: none;
            }

            #${ID} .dh-title {
                font-size: 20px;
                font-weight: 900;
                color: #333;
                margin-bottom: 14px;
            }

            #${ID} button {
                width: 100%;
                height: 52px;
                margin: 6px 0;
                border: 0;
                border-radius: 14px;
                color: white;
                font-size: 15px;
                font-weight: 900;
                cursor: pointer;
                transition: transform .12s;
            }

            #${ID} button:active {
                transform: translateY(3px);
            }

            #dh-auto {
                background: #58cc02;
                box-shadow: 0 4px #46a302;
            }

            #dh-fast {
                background: #1cb0f6;
                box-shadow: 0 4px #168dcc;
            }

            #dh-slow {
                background: #ff9600;
                box-shadow: 0 4px #d77d00;
            }

            #dh-status {
                margin-top: 12px;
                padding: 11px;
                border-radius: 12px;
                background: #f1f1f1;
                color: #555;
                text-align: center;
                font-size: 13px;
                font-weight: 800;
            }

            #dh-speed {
                margin-top: 8px;
                text-align: center;
                color: #777;
                font-size: 12px;
            }
        `;

        document.head.appendChild(style);
    }

    function createPanel() {
        if (!document.body) return;

        if (document.getElementById(ID)) return;

        addStyle();

        const panel = document.createElement("div");
        panel.id = ID;

        panel.innerHTML = `
            <div class="dh-title">Duo Helper</div>

            <button id="dh-auto">
                AUTO LÀM BÀI
            </button>

            <button id="dh-fast">
                ⚡ CHẾ ĐỘ NHANH
            </button>

            <button id="dh-slow">
                🐢 CHẾ ĐỘ CHẬM
            </button>

            <div id="dh-status">
                AUTO: Sẵn sàng
            </div>

            <div id="dh-speed">
                Tốc độ: Bình thường
            </div>
        `;

        document.body.appendChild(panel);

        document.getElementById("dh-auto").onclick = () => {
            running = !running;

            const status = document.getElementById("dh-status");

            if (running) {
                status.textContent = "AUTO: Đang bật";
                status.style.background = "#e8f8df";
                status.style.color = "#46a302";
            } else {
                status.textContent = "AUTO: Đã tắt";
                status.style.background = "#f1f1f1";
                status.style.color = "#555";
            }
        };

        document.getElementById("dh-fast").onclick = () => {
            mode = "fast";

            document.getElementById("dh-status").textContent =
                "Chế độ: NHANH ⚡";

            document.getElementById("dh-speed").textContent =
                "Tốc độ: Nhanh";
        };

        document.getElementById("dh-slow").onclick = () => {
            mode = "slow";

            document.getElementById("dh-status").textContent =
                "Chế độ: CHẬM 🐢";

            document.getElementById("dh-speed").textContent =
                "Tốc độ: Chậm";
        };
    }

    function start() {
        createPanel();
    }

    start();

    const observer = new MutationObserver(() => {
        if (!document.getElementById(ID)) {
            createPanel();
        }
    });

    observer.observe(document.documentElement, {
        childList: true,
        subtree: true
    });

    setInterval(() => {
        if (!document.getElementById(ID)) {
            createPanel();
        }
    }, 2000);

})();