From 616c0d1285b4778e15d42c79689653d344f78449 Mon Sep 17 00:00:00 2001
From: svatantrya <svatantrya@bitcoin-after.life>
Date: Fri, 10 Jul 2026 10:38:24 -0400
Subject: [PATCH] add fullscreen QR overlay on click

---
 index.html | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/index.html b/index.html
index 6537272..10209fc 100644
--- a/index.html
+++ b/index.html
@@ -153,6 +153,14 @@ tbody tr:hover{background:color-mix(in srgb,var(--accent-soft) 50%,transparent)}
 .invoice .row span:last-child{font-family:var(--mono);text-align:right;word-break:break-all}
 #qrcode{margin:18px auto 4px;width:160px}
 #qrcode canvas,#qrcode img{width:160px!important;height:160px!important;max-width:100%}
+#qr-overlay{
+  display:none;position:fixed;inset:0;z-index:999;
+  background:rgba(0,0,0,.7);cursor:pointer;
+  align-items:center;justify-content:center;
+}
+#qr-overlay.show{display:flex}
+#qr-big{padding:24px;background:#fff;border-radius:12px}
+#qr-big canvas,#qr-big img{width:280px!important;height:280px!important;max-width:90vw}
 .ok-line{color:var(--ok);font-weight:600;font-size:14px;margin-bottom:14px}
 .err-line{color:#d32f2f;font-weight:600;font-size:14px;margin-bottom:14px}
 .terms-box{display:none;margin:16px 0;padding:20px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius)}
@@ -499,6 +507,8 @@ document.getElementById('submit').addEventListener('click', async () => {
   document.getElementById('iv-status2').textContent = '—';
   document.getElementById('iv-url').textContent = '—';
   document.getElementById('qrcode').innerHTML = '';
+  document.getElementById('qrcode').style.cursor = '';
+  document.getElementById('qr-overlay').classList.remove('show');
   document.getElementById('share-btn').textContent = 'Share invoice';
   document.getElementById('terms-box').classList.remove('show');
   document.getElementById('terms-check').checked = false;
@@ -528,6 +538,17 @@ document.getElementById('submit').addEventListener('click', async () => {
     const qrEl = document.getElementById('qrcode');
     qrEl.innerHTML = '';
     new QRCode(qrEl, { text: invoiceuri, width: 160, height: 160 });
+    qrEl.style.cursor = 'pointer';
+    qrEl.onclick = function () {
+      const overlay = document.getElementById('qr-overlay');
+      const big = document.getElementById('qr-big');
+      big.innerHTML = '';
+      new QRCode(big, { text: invoiceuri, width: 280, height: 280 });
+      overlay.classList.add('show');
+    };
+    document.getElementById('qr-overlay').onclick = function () {
+      this.classList.remove('show');
+    };
     const shareBtn = document.getElementById('share-btn');
     shareBtn.textContent = 'Share invoice';
     shareBtn.onclick = function () {
@@ -577,5 +598,6 @@ document.getElementById('url').addEventListener('keydown', e => {
   fetchMinAmount();
 })();
 </script>
+<div id="qr-overlay"><div id="qr-big"></div></div>
 </body>
 </html>