Update index.html

public/index.html

@@ -37,8 +37,6 @@
     <meta name="twitter:image" content="images/logo_transparent_512x512.png">
     <meta property="og:image" content="images/logo_transparent_512x512.png">
     <!-- Resources -->
-    <script src="https://unpkg.com/html5-qrcode/minified/html5-qrcode.min.js"></script>
-    
     <link rel="preload" href="lang/en.json" as="fetch">
     <link rel="preload" href="fonts/OpenSans/static/OpenSans-Medium.ttf" as="font" type="font/ttf" crossorigin>
     <link rel="stylesheet" type="text/css" href="styles/styles-main.css">
@@ -194,7 +192,12 @@
         </div>
     </header>
 
-    <div id="qr-reader" style="display: none;"></div>
+<div id="qr-reader" style="width: 300px; height: 300px;"></div>
+
+<input type="text" id="result" placeholder="Resultado do QR Code" />
+<div class="app__dialog app__dialog--hide">
+  <button class="app__dialog-close">Fechar</button>
+</div>
 	
     <!-- Center -->
     <div id="center" class="opacity-0">
@@ -961,47 +964,46 @@
     </svg>
     <!-- Scripts -->
 
-    <script src="https://unpkg.com/html5-qrcode/minified/html5-qrcode.min.js"></script>
+<script src="https://unpkg.com/html5-qrcode/minified/html5-qrcode.min.js"></script>
-    <script>
+<script>
-        document.addEventListener("DOMContentLoaded", function() {
+  document.addEventListener("DOMContentLoaded", function () {
-            const qrBtn = document.getElementById("openQRScanner");
+    const resultInput = document.getElementById("result");
-            const qrReader = document.getElementById("qr-reader");
+    const qrCodeDialog = document.querySelector(".app__dialog");
 
-            if (qrBtn) {
+    const qrCodeScanner = new Html5Qrcode("qr-reader");
-                qrBtn.addEventListener("click", async () => {
-                    qrReader.style.display = "block"; // Mostrar o reador
-                    const html5QrCode = new Html5Qrcode("qr-reader");
 
-                    try {
+    Html5Qrcode.getCameras()
-                        const devices = await Html5Qrcode.getCameras();
+      .then(devices => {
+        if (devices.length) {
+          const cameraId = devices[0].id;
 
-                        if (devices && devices.length) {
+          qrCodeScanner.start(
-                            const backCamera = devices.find(d => d.label.toLowerCase().includes("back")) || devices[0];
+            cameraId,
-
+            { fps: 10, qrbox: 250 },
-                            await html5QrCode.start(
+            qrCodeMessage => {
-                                backCamera.id,
+              resultInput.value = qrCodeMessage;
-                                { fps: 10, qrbox: 250 },
+              qrCodeDialog.classList.remove("app__dialog--hide");
-                                qrCodeMessage => {
+              qrCodeScanner.stop();
-                                    console.log("QR Detected:", qrCodeMessage);
+            },
-                                    html5QrCode.stop(); // Para leitura
+            errorMessage => {
-                                    qrReader.style.display = "none"; // Oculta o leitor
+              console.warn("Erro de leitura QR:", errorMessage);
-                                    window.location.href = qrCodeMessage; // Redireciona
-                                },
-                                error => {
-                                    console.warn("QR Code no detected: ", error);
-                                }
-                            );
-                        } else {
-                            alert("📷｜Nenhuma câmera encontrada.");
-                        }
-                    } catch (error) {
-                        console.error("Erro ao acessar a câmera: ", error);
-                        alert("🪲｜Erro ao acessar a câmera: " + error);
-                    }
-                });
             }
-        });
+          ).catch(err => {
-    </script>
+            console.error("Erro ao iniciar scanner:", err);
+          });
+        } else {
+          alert("Nenhuma câmera disponível.");
+        }
+      })
+      .catch(err => {
+        console.error("Erro ao acessar as câmeras:", err);
+      });
+
+    document.querySelector(".app__dialog-close").addEventListener("click", () => {
+      qrCodeDialog.classList.add("app__dialog--hide");
+    });
+  });
+</script>
 
   <!-- 
   <input type="file" id="fileInput" />