fix: streamline result UI — wallet button, clickable QR, autofill fix

- Replace "Link kopieren" + "QR speichern" with "In Wallet öffnen" button
- QR code clickable to save as PNG with subtle hint text
- Fix chromium autofill overriding dark input backgrounds
- Center button text and remove underline on link-buttons
This commit is contained in:
Alexander Schmidt
2026-03-24 18:16:23 +01:00
parent bd796e46dc
commit 35552b7dff
4 changed files with 38 additions and 10 deletions

11
app.js
View File

@@ -26,9 +26,8 @@
const resultSection = $('#result'); const resultSection = $('#result');
const qrContainer = $('#qr'); const qrContainer = $('#qr');
const uriBox = $('#uri'); const uriBox = $('#uri');
const copyUriBtn = $('#copyUri'); const openWalletBtn = $('#openWallet');
const copyAddrBtn = $('#copyAddr'); const copyAddrBtn = $('#copyAddr');
const downloadBtn = $('#downloadQr');
const countdownEl = $('#countdown'); const countdownEl = $('#countdown');
const fiatHint = $('#fiatHint'); const fiatHint = $('#fiatHint');
const toast = $('#toast'); const toast = $('#toast');
@@ -47,10 +46,9 @@
amountInput.addEventListener('input', updateFiatHint); amountInput.addEventListener('input', updateFiatHint);
currencySelect.addEventListener('change', updateFiatHint); currencySelect.addEventListener('change', updateFiatHint);
generateBtn.addEventListener('click', generate); generateBtn.addEventListener('click', generate);
copyUriBtn.addEventListener('click', () => copyToClipboard(uriBox.textContent));
copyAddrBtn.addEventListener('click', () => copyToClipboard(addrInput.value.trim())); copyAddrBtn.addEventListener('click', () => copyToClipboard(addrInput.value.trim()));
copyShareLinkBtn.addEventListener('click', () => copyToClipboard(shareLinkInput.value)); copyShareLinkBtn.addEventListener('click', () => copyToClipboard(shareLinkInput.value));
downloadBtn.addEventListener('click', downloadQR); qrContainer.addEventListener('click', downloadQR);
newRequestBtn.addEventListener('click', resetForm); newRequestBtn.addEventListener('click', resetForm);
homeLink.addEventListener('click', function (e) { e.preventDefault(); resetForm(); }); homeLink.addEventListener('click', function (e) { e.preventDefault(); resetForm(); });
@@ -192,6 +190,7 @@
// Show result // Show result
resultSection.classList.add('visible'); resultSection.classList.add('visible');
uriBox.textContent = uri; uriBox.textContent = uri;
openWalletBtn.href = uri;
// Share link — show long URL immediately, then replace with short // Share link — show long URL immediately, then replace with short
const hash = buildHash(addr, xmrAmount, desc, timer); const hash = buildHash(addr, xmrAmount, desc, timer);
@@ -210,6 +209,10 @@
colorLight: '#1a1a1a', colorLight: '#1a1a1a',
correctLevel: QRCode.CorrectLevel.M correctLevel: QRCode.CorrectLevel.M
}); });
const hint = document.createElement('div');
hint.className = 'qr-hint';
hint.textContent = I18n.t('qr_hint');
qrContainer.appendChild(hint);
// Countdown // Countdown
startCountdown(); startCountdown();

View File

@@ -17,9 +17,9 @@ var I18n = (function () {
label_timer: 'Zahlungsfrist in Minuten (optional)', label_timer: 'Zahlungsfrist in Minuten (optional)',
placeholder_timer: 'z.B. 30', placeholder_timer: 'z.B. 30',
btn_generate: 'Zahlungsanforderung erstellen', btn_generate: 'Zahlungsanforderung erstellen',
btn_copy_link: 'Link kopieren', btn_open_wallet: 'In Wallet öffnen',
btn_copy_addr: 'Adresse kopieren', btn_copy_addr: 'Adresse kopieren',
btn_download_qr: 'QR speichern', qr_hint: 'Klick auf QR zum Speichern',
footer: 'Open Source &middot; Kein Backend &middot; Kein KYC &middot; <a href="https://gitea.schmidt.eco/schmidt1024/xmrpay.link" target="_blank">Source</a>', footer: 'Open Source &middot; Kein Backend &middot; Kein KYC &middot; <a href="https://gitea.schmidt.eco/schmidt1024/xmrpay.link" target="_blank">Source</a>',
label_share_link: 'Teilbarer Link', label_share_link: 'Teilbarer Link',
btn_new_request: 'Neue Zahlungsanforderung', btn_new_request: 'Neue Zahlungsanforderung',
@@ -38,9 +38,9 @@ var I18n = (function () {
label_timer: 'Payment deadline in minutes (optional)', label_timer: 'Payment deadline in minutes (optional)',
placeholder_timer: 'e.g. 30', placeholder_timer: 'e.g. 30',
btn_generate: 'Create payment request', btn_generate: 'Create payment request',
btn_copy_link: 'Copy link', btn_open_wallet: 'Open in wallet',
btn_copy_addr: 'Copy address', btn_copy_addr: 'Copy address',
btn_download_qr: 'Save QR', qr_hint: 'Click QR to save',
footer: 'Open Source &middot; No Backend &middot; No KYC &middot; <a href="https://gitea.schmidt.eco/schmidt1024/xmrpay.link" target="_blank">Source</a>', footer: 'Open Source &middot; No Backend &middot; No KYC &middot; <a href="https://gitea.schmidt.eco/schmidt1024/xmrpay.link" target="_blank">Source</a>',
label_share_link: 'Shareable link', label_share_link: 'Shareable link',
btn_new_request: 'New payment request', btn_new_request: 'New payment request',

View File

@@ -65,9 +65,8 @@
</div> </div>
</div> </div>
<div class="actions"> <div class="actions">
<button class="btn btn-secondary" id="copyUri" data-i18n="btn_copy_link"></button> <a class="btn btn-secondary" id="openWallet" href="#" data-i18n="btn_open_wallet"></a>
<button class="btn btn-secondary" id="copyAddr" data-i18n="btn_copy_addr"></button> <button class="btn btn-secondary" id="copyAddr" data-i18n="btn_copy_addr"></button>
<button class="btn btn-secondary" id="downloadQr" data-i18n="btn_download_qr"></button>
</div> </div>
<button class="btn btn-primary btn-new" id="newRequest" data-i18n="btn_new_request"></button> <button class="btn btn-primary btn-new" id="newRequest" data-i18n="btn_new_request"></button>
</div> </div>

View File

@@ -171,6 +171,16 @@ input[type="number"] {
-moz-appearance: textfield; -moz-appearance: textfield;
} }
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
select:-webkit-autofill,
textarea:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px var(--bg-input) inset !important;
-webkit-text-fill-color: var(--text) !important;
transition: background-color 5000s ease-in-out 0s;
}
select { select {
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
@@ -262,6 +272,8 @@ textarea {
border: 1px solid var(--border); border: 1px solid var(--border);
font-size: 0.85rem; font-size: 0.85rem;
padding: 0.6rem; padding: 0.6rem;
text-decoration: none;
text-align: center;
} }
.btn-secondary:hover { .btn-secondary:hover {
@@ -287,6 +299,20 @@ textarea {
border-radius: var(--radius); border-radius: var(--radius);
padding: 12px; padding: 12px;
background: #fff; background: #fff;
cursor: pointer;
transition: opacity 0.2s;
}
.qr-container canvas:hover,
.qr-container img:hover {
opacity: 0.85;
}
.qr-hint {
text-align: center;
font-size: 0.7rem;
color: var(--text-muted);
margin-top: 0.3rem;
} }
.uri-box { .uri-box {