bitcoinafterlife/bal-welist-website
1
0
Fork 2
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add fullscreen QR overlay on click

Browse Source
This commit is contained in:
svatantrya
2026-07-10 10:38:24 -04:00
parent 03d41dd25d
commit 616c0d1285
1 changed files with 22 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
index.html
View File

@@ -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} .invoice .row span:last-child{font-family:var(--mono);text-align:right;word-break:break-all}
#qrcode{margin:18px auto 4px;width:160px} #qrcode{margin:18px auto 4px;width:160px}
#qrcode canvas,#qrcode img{width:160px!important;height:160px!important;max-width:100%} #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} .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} .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)} .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-status2').textContent = '—';
document.getElementById('iv-url').textContent = '—'; document.getElementById('iv-url').textContent = '—';
document.getElementById('qrcode').innerHTML = ''; 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('share-btn').textContent = 'Share invoice';
document.getElementById('terms-box').classList.remove('show'); document.getElementById('terms-box').classList.remove('show');
document.getElementById('terms-check').checked = false; document.getElementById('terms-check').checked = false;
@@ -528,6 +538,17 @@ document.getElementById('submit').addEventListener('click', async () => {
const qrEl = document.getElementById('qrcode'); const qrEl = document.getElementById('qrcode');
qrEl.innerHTML = ''; qrEl.innerHTML = '';
new QRCode(qrEl, { text: invoiceuri, width: 160, height: 160 }); 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'); const shareBtn = document.getElementById('share-btn');
shareBtn.textContent = 'Share invoice'; shareBtn.textContent = 'Share invoice';
shareBtn.onclick = function () { shareBtn.onclick = function () {
@@ -577,5 +598,6 @@ document.getElementById('url').addEventListener('keydown', e => {
fetchMinAmount(); fetchMinAmount();
})(); })();
</script> </script>
<div id="qr-overlay"><div id="qr-big"></div></div>
</body> </body>
</html> </html>