This commit is contained in:
shocknet-justin 2025-10-09 20:34:38 -04:00
parent 312d6e3d37
commit cc62e72b1d
3 changed files with 37 additions and 7 deletions

View file

@ -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;

View file

@ -191,13 +191,16 @@
<div style="text-align: center; color: #a3a3a3;">Code contains a one-time pairing secret</div>
<div style="text-align: center; color: #c434e0;" id="click-text">Click to reveal</div>
</div>
<div id="qrcode"></div>
<div class="qrcode-viewport">
<div id="qrcode"></div>
<div class="qr-veil"><span>Click to reveal</span></div>
</div>
<div style="color: #a3a3a3; font-size: 11px; word-break: break-all; overflow-wrap: anywhere; max-width: 220px; margin: 0 auto;">
<div id="connectString"></div>
</div>
</div>
</div>
<button class="push-button" style="margin-top: 20px" id="to-status">Continue</button>
<button class="push-button" style="margin-top: 20px" id="to-status">OK, I've connected my wallet</button>
</div>
</section>

View file

@ -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');