diff --git a/app.js b/app.js index bc0958f..095918f 100644 --- a/app.js +++ b/app.js @@ -26,9 +26,8 @@ const resultSection = $('#result'); const qrContainer = $('#qr'); const uriBox = $('#uri'); - const copyUriBtn = $('#copyUri'); + const openWalletBtn = $('#openWallet'); const copyAddrBtn = $('#copyAddr'); - const downloadBtn = $('#downloadQr'); const countdownEl = $('#countdown'); const fiatHint = $('#fiatHint'); const toast = $('#toast'); @@ -47,10 +46,9 @@ amountInput.addEventListener('input', updateFiatHint); currencySelect.addEventListener('change', updateFiatHint); generateBtn.addEventListener('click', generate); - copyUriBtn.addEventListener('click', () => copyToClipboard(uriBox.textContent)); copyAddrBtn.addEventListener('click', () => copyToClipboard(addrInput.value.trim())); copyShareLinkBtn.addEventListener('click', () => copyToClipboard(shareLinkInput.value)); - downloadBtn.addEventListener('click', downloadQR); + qrContainer.addEventListener('click', downloadQR); newRequestBtn.addEventListener('click', resetForm); homeLink.addEventListener('click', function (e) { e.preventDefault(); resetForm(); }); @@ -192,6 +190,7 @@ // Show result resultSection.classList.add('visible'); uriBox.textContent = uri; + openWalletBtn.href = uri; // Share link — show long URL immediately, then replace with short const hash = buildHash(addr, xmrAmount, desc, timer); @@ -210,6 +209,10 @@ colorLight: '#1a1a1a', correctLevel: QRCode.CorrectLevel.M }); + const hint = document.createElement('div'); + hint.className = 'qr-hint'; + hint.textContent = I18n.t('qr_hint'); + qrContainer.appendChild(hint); // Countdown startCountdown(); diff --git a/i18n.js b/i18n.js index c42a64b..5884db5 100644 --- a/i18n.js +++ b/i18n.js @@ -17,9 +17,9 @@ var I18n = (function () { label_timer: 'Zahlungsfrist in Minuten (optional)', placeholder_timer: 'z.B. 30', btn_generate: 'Zahlungsanforderung erstellen', - btn_copy_link: 'Link kopieren', + btn_open_wallet: 'In Wallet öffnen', btn_copy_addr: 'Adresse kopieren', - btn_download_qr: 'QR speichern', + qr_hint: 'Klick auf QR zum Speichern', footer: 'Open Source · Kein Backend · Kein KYC · Source', label_share_link: 'Teilbarer Link', btn_new_request: 'Neue Zahlungsanforderung', @@ -38,9 +38,9 @@ var I18n = (function () { label_timer: 'Payment deadline in minutes (optional)', placeholder_timer: 'e.g. 30', btn_generate: 'Create payment request', - btn_copy_link: 'Copy link', + btn_open_wallet: 'Open in wallet', btn_copy_addr: 'Copy address', - btn_download_qr: 'Save QR', + qr_hint: 'Click QR to save', footer: 'Open Source · No Backend · No KYC · Source', label_share_link: 'Shareable link', btn_new_request: 'New payment request', diff --git a/index.html b/index.html index b760a64..651d1d4 100644 --- a/index.html +++ b/index.html @@ -65,9 +65,8 @@
- + -
diff --git a/style.css b/style.css index 30b3291..261940d 100644 --- a/style.css +++ b/style.css @@ -171,6 +171,16 @@ input[type="number"] { -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 { -webkit-appearance: none; -moz-appearance: none; @@ -262,6 +272,8 @@ textarea { border: 1px solid var(--border); font-size: 0.85rem; padding: 0.6rem; + text-decoration: none; + text-align: center; } .btn-secondary:hover { @@ -287,6 +299,20 @@ textarea { border-radius: var(--radius); padding: 12px; 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 {