BF QRcode

Gera um QR code da página atual e permite o download, com um design centralizado e elegante.
当前为 2025-05-27 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         BF QRcode
// @name:pt-BR   BF QRcode - Gerador de QR Code
// @namespace    http://tampermonkey.net/
// @version      1.4
// @description  Gera um QR code da página atual e permite o download, com um design centralizado e elegante.
// @description:pt-BR Gera um QR code da página atual e permite o download (versão mobile)
// @author       Você
// @license      MIT
// @match        *://*/*
// @grant        GM_registerMenuCommand
// @require      https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js
// ==/UserScript==

// Adiciona o botão ao menu do Tampermonkey
GM_registerMenuCommand("Gerar QR Code", function() {
    gerarQRCode();
});

// Função para criar e exibir o QR code
function gerarQRCode() {
    // Se o QR code já estiver visível, não faz nada para evitar duplicatas
    if (document.getElementById("bf-qrcode-container")) {
        return;
    }

    // Criando o elemento do contêiner do QR code
    let qrDiv = document.createElement("div");
    qrDiv.id = "bf-qrcode-container"; // Adiciona um ID para fácil referência
    qrDiv.style.position = "fixed";
    qrDiv.style.top = "50%"; // Centraliza verticalmente
    qrDiv.style.left = "50%"; // Centraliza horizontalmente
    qrDiv.style.transform = "translate(-50%, -50%)"; // Ajusta para o centro exato
    qrDiv.style.background = "white";
    qrDiv.style.padding = "25px"; // Aumentado para mais espaço interno
    qrDiv.style.boxShadow = "0 6px 12px rgba(0, 0, 0, 0.3)"; // Sombra um pouco mais forte
    qrDiv.style.zIndex = "10000";
    qrDiv.style.borderRadius = "12px"; // Bordas ligeiramente mais arredondadas
    qrDiv.style.display = "flex"; // Usa flexbox para centralizar conteúdo
    qrDiv.style.flexDirection = "column"; // Organiza itens em coluna
    qrDiv.style.alignItems = "center"; // Centraliza itens horizontalmente
    qrDiv.style.textAlign = "center"; // Garante que o texto (se houver) esteja centralizado
    qrDiv.style.minWidth = "250px"; // Largura mínima para botões e QR
    qrDiv.style.maxWidth = "calc(100% - 40px)"; // Garante que não exceda a largura da tela em mobile
    qrDiv.style.maxHeight = "calc(100% - 40px)"; // Garante que não exceda a altura da tela em mobile


    // Criando o elemento para o QR code em si (onde o qrcode.js desenha)
    let qrCodeCanvasContainer = document.createElement("div");
    qrCodeCanvasContainer.id = "bf-qrcode-canvas-container"; // Para controle do qrcode.js
    qrDiv.appendChild(qrCodeCanvasContainer);

    // Criando o QR code com tamanho otimizado para mobile
    let qrCode = new QRCode(qrCodeCanvasContainer, {
        text: window.location.href,
        width: 180,
        height: 180,
        colorDark : "#000000",
        colorLight : "#ffffff",
        correctLevel : QRCode.CorrectLevel.H // Alto nível de correção de erros
    });

    // Contêiner para os botões para melhor controle de layout
    let buttonContainer = document.createElement("div");
    buttonContainer.style.marginTop = "20px"; // Espaçamento entre QR e botões
    buttonContainer.style.display = "flex";
    buttonContainer.style.flexDirection = "column"; // Botões um abaixo do outro
    buttonContainer.style.gap = "10px"; // Espaço entre os botões
    buttonContainer.style.width = "100%"; // Para os botões preencherem a largura do contêiner

    // Botão de download
    let downloadBtn = document.createElement("button");
    downloadBtn.innerText = "Baixar QR Code";
    downloadBtn.style.cssText = `
        font-size: 16px;
        padding: 10px 15px;
        background-color: #4CAF50; /* Verde vibrante */
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        width: 100%; /* Ocupa toda a largura do buttonContainer */
        box-sizing: border-box; /* Garante que padding e border sejam incluídos na largura */
        transition: background-color 0.3s ease; /* Transição suave ao hover */
    `;
    downloadBtn.onmouseover = () => downloadBtn.style.backgroundColor = "#45a049";
    downloadBtn.onmouseout = () => downloadBtn.style.backgroundColor = "#4CAF50";

    downloadBtn.onclick = function() {
        // Encontra o canvas dentro do qrCodeCanvasContainer
        let canvas = qrCodeCanvasContainer.querySelector("canvas");
        if (canvas) {
            let link = document.createElement("a");
            link.href = canvas.toDataURL("image/png");
            link.download = `QR_Code_${new URL(window.location.href).hostname.replace(/\./g, '_')}.png`; // Nome do arquivo mais descritivo
            link.click();
        }
    };

    // Botão de fechar
    let closeBtn = document.createElement("button");
    closeBtn.innerText = "Fechar";
    closeBtn.style.cssText = `
        font-size: 16px;
        padding: 10px 15px;
        background-color: #f44336; /* Vermelho vibrante */
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        width: 100%; /* Ocupa toda a largura do buttonContainer */
        box-sizing: border-box;
        transition: background-color 0.3s ease;
    `;
    closeBtn.onmouseover = () => closeBtn.style.backgroundColor = "#da190b";
    closeBtn.onmouseout = () => closeBtn.style.backgroundColor = "#f44336";

    closeBtn.onclick = function() {
        document.body.removeChild(qrDiv);
    };

    // Adiciona os botões ao contêiner de botões
    buttonContainer.appendChild(downloadBtn);
    buttonContainer.appendChild(closeBtn);

    // Adiciona o contêiner de botões ao contêiner principal do QR
    qrDiv.appendChild(buttonContainer);

    // Adiciona o contêiner principal do QR ao corpo do documento
    document.body.appendChild(qrDiv);
}
欢迎访问Greasy Fork镜像
