qrcode

<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gerador de QR Code</title>
<style>
    body { font-family: Arial, sans-serif; margin: 20px; }
    fieldset { margin-bottom: 15px; }
    #qrcode { margin-top: 20px; }
</style>
</head>
<body>
<h1>Gerador de QR Code</h1>
<form id="qrForm">
    <fieldset>
      <legend>Tipo de conteúdo</legend>
      <label><input type="radio" name="type" value="site" checked> Site/URL</label>
      <label><input type="radio" name="type" value="mp3"> MP3</label>
      <label><input type="radio" name="type" value="texto"> Texto</label>
      <label><input type="radio" name="type" value="pdf"> PDF</label>
    </fieldset>

    <div id="fieldURL">
      <label>Endereço (URL): <input type="url" id="inputURL" placeholder="https://..."></label>
    </div>

    <div id="fieldText" style="display:none">
      <label>Texto: <textarea id="inputText" rows="3" cols="40"></textarea></label>
    </div>

    <fieldset>
      <legend>Opções</legend>
      <label>Tamanho: <input type="number" id="size" value="256" min="100" max="1000"> px</label><br>
      <label>Cor dos módulos: <input type="color" id="colorDark" value="#000000"></label><br>
      <label>Cor do fundo: <input type="color" id="colorLight" value="#ffffff"></label>
    </fieldset>

    <button type="button" id="btnGenerate">Gerar QR Code</button>
</form>

<div id="qrcode"></div>

<script src="https://cdn.jsdelivr.net/gh/davidshimjs/qrcodejs/qrcode.min.js"></script>
<script>
    const form = document.getElementById('qrForm');
    const qrcodeContainer = document.getElementById('qrcode');
    const inputURL = document.getElementById('inputURL');
    const inputText = document.getElementById('inputText');
    const fieldURL = document.getElementById('fieldURL');
    const fieldText = document.getElementById('fieldText');
    const btnGenerate = document.getElementById('btnGenerate');
    let qr;

    function getType() {
      return form.querySelector('input[name="type"]:checked').value;
    }

    form.addEventListener('change', () => {
      if (getType() === 'texto') {
        fieldText.style.display = '';
        fieldURL.style.display = 'none';
      } else {
        fieldText.style.display = 'none';
        fieldURL.style.display = '';
      }
    });

    btnGenerate.addEventListener('click', () => {
      let payload = '';
      if (getType() === 'texto') {
        payload = inputText.value.trim();
      } else {
        payload = inputURL.value.trim();
      }
      if (!payload) {
        alert("Informe o conteúdo.");
        return;
      }

      qrcodeContainer.innerHTML = "";
      qr = new QRCode(qrcodeContainer, {
        text: payload,
        width: parseInt(document.getElementById('size').value),
        height: parseInt(document.getElementById('size').value),
        colorDark: document.getElementById('colorDark').value,
        colorLight: document.getElementById('colorLight').value,
        correctLevel: QRCode.CorrectLevel.H
      });
    });
</script>
</body>
</html>