diff --git a/static/css/connect.css b/static/css/connect.css index bb1b5395..27ea020b 100644 --- a/static/css/connect.css +++ b/static/css/connect.css @@ -29,9 +29,37 @@ /* prevent overlap: hide connect string until revealed; click surface on box */ .qrcode-box #connectString { display: none; } .qrcode-box.revealed #connectString { display: block; } -.qrcode-box #qrcode { pointer-events: none; } .qrcode-box { cursor: pointer; } +/* QR viewport and veil overlay */ +.qrcode-viewport { + position: relative; + width: 100%; + height: 175px; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; +} +.qrcode-viewport #qrcode { + position: absolute; + width: 157px; + height: 157px; +} +.qrcode-viewport .qr-veil { + position: absolute; + inset: 0; + display: flex; + align-items: center; + justify-content: center; + backdrop-filter: blur(7px); + -webkit-backdrop-filter: blur(7px); + background: rgba(0,0,0,0.25); + color: #c434e0; + font-size: 12px; +} +.qrcode-box.revealed .qr-veil { display: none; } + .qrcode-box-clicked::before { content: ""; position: absolute; diff --git a/static/index.html b/static/index.html index bdbe8e08..0d8b9a3e 100644 --- a/static/index.html +++ b/static/index.html @@ -191,13 +191,16 @@
Code contains a one-time pairing secret
Click to reveal
-
+
+
+
Click to reveal
+
- + diff --git a/static/js/wizard.js b/static/js/wizard.js index 1c8de1d0..452e03f2 100644 --- a/static/js/wizard.js +++ b/static/js/wizard.js @@ -148,14 +148,13 @@ $(() => { cs.text(''); if (qrElement) { while (qrElement.firstChild) qrElement.removeChild(qrElement.firstChild); + // Pre-generate QR behind veil to entice reveal + new QRCode(qrElement, { text: connectString, colorDark: '#000000', colorLight: '#ffffff', width: 157, height: 157 }); } - // Reveal on click: generate QR and show string + // Reveal on click: show string and remove veil codebox.off('click').on('click', () => { if (!codebox.hasClass('revealed')) { - if (qrElement && !qrElement.firstChild) { - new QRCode(qrElement, { text: connectString, colorDark: '#000000', colorLight: '#ffffff', width: 157, height: 157 }); - } cs.text(connectString); codebox.addClass('revealed'); clickText.text('Pairing code');