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:
11
app.js
11
app.js
@@ -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();
|
||||||
|
|||||||
8
i18n.js
8
i18n.js
@@ -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 · Kein Backend · Kein KYC · <a href="https://gitea.schmidt.eco/schmidt1024/xmrpay.link" target="_blank">Source</a>',
|
footer: 'Open Source · Kein Backend · Kein KYC · <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 · No Backend · No KYC · <a href="https://gitea.schmidt.eco/schmidt1024/xmrpay.link" target="_blank">Source</a>',
|
footer: 'Open Source · No Backend · No KYC · <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',
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
26
style.css
26
style.css
@@ -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 {
|
||||||
|
|||||||
Reference in New Issue
Block a user