add terms acceptance step before invoice, enter key submit, fix link display

This commit is contained in:
2026-07-05 18:23:12 -04:00
parent 3d2dbf1c2a
commit dbc00b6012

View File

@@ -136,6 +136,7 @@ tbody tr:hover{background:color-mix(in srgb,var(--accent-soft) 50%,transparent)}
background:var(--accent);color:#fff; background:var(--accent);color:#fff;
} }
.btn:hover{filter:brightness(1.06)} .btn:hover{filter:brightness(1.06)}
.btn:disabled{opacity:.45;cursor:not-allowed;filter:none}
.note{font-size:13px;color:var(--muted);margin-top:16px;line-height:1.55} .note{font-size:13px;color:var(--muted);margin-top:16px;line-height:1.55}
.note strong{color:var(--ink)} .note strong{color:var(--ink)}
@@ -149,8 +150,12 @@ tbody tr:hover{background:color-mix(in srgb,var(--accent-soft) 50%,transparent)}
#qrcode img{width:160px;height:160px} #qrcode img{width:160px;height:160px}
.ok-line{color:var(--ok);font-weight:600;font-size:14px;margin-bottom:14px} .ok-line{color:var(--ok);font-weight:600;font-size:14px;margin-bottom:14px}
.err-line{color:#d32f2f;font-weight:600;font-size:14px;margin-bottom:14px} .err-line{color:#d32f2f;font-weight:600;font-size:14px;margin-bottom:14px}
.flag-ok{color:var(--ok);font-weight:600;font-size:13px} .terms-box{display:none;margin:16px 0;padding:20px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius)}
.flag-err{color:#d32f2f;font-weight:600;font-size:13px} .terms-box.show{display:block}
.terms-box .lead{margin:0 0 12px;color:var(--ink);font-weight:600}
.terms-box a.mono{font-size:14px;word-break:break-all}
.terms-box label{font-size:14px;cursor:pointer}
.terms-box .btn{margin-top:14px}
.intro-card{ .intro-card{
background:var(--panel);border:1px solid var(--line); background:var(--panel);border:1px solid var(--line);
@@ -275,6 +280,19 @@ footer a{color:var(--accent);text-decoration:none}
<div class="ok-line" id="iv-status"></div> <div class="ok-line" id="iv-status"></div>
<div class="terms-box" id="terms-box">
<p class="lead">You are about to add this server:</p>
<p><a id="terms-url" href="#" target="_blank" rel="noopener" class="mono"></a></p>
<p style="font-size:13px;margin-top:4px"><strong>Make sure the link above works correctly before paying. No refunds or URL changes after payment.</strong></p>
<p style="font-size:14px">
<label>
<input type="checkbox" id="terms-check">
I accept the <a href="/terms.html" target="_blank">terms and conditions</a>
</label>
</p>
<button class="btn" id="terms-accept" disabled>Accept & Show Invoice</button>
</div>
<div class="invoice" id="invoice"> <div class="invoice" id="invoice">
<div class="row"><span>Minimum amount</span><span id="iv-min"></span></div> <div class="row"><span>Minimum amount</span><span id="iv-min"></span></div>
<div class="row"><span>Chain</span><span id="iv-chain"></span></div> <div class="row"><span>Chain</span><span id="iv-chain"></span></div>
@@ -287,8 +305,6 @@ footer a{color:var(--accent);text-decoration:none}
<p class="note"> <p class="note">
<strong>Please make sure your server is online before you attempt to add it.</strong> <strong>Please make sure your server is online before you attempt to add it.</strong>
Servers that are offline will not appear in this list. They will be checked regularly
until they come back online.
</p> </p>
</div> </div>
@@ -461,6 +477,9 @@ document.getElementById('submit').addEventListener('click', async () => {
document.getElementById('iv-status2').textContent = '—'; document.getElementById('iv-status2').textContent = '—';
document.getElementById('iv-url').textContent = '—'; document.getElementById('iv-url').textContent = '—';
document.getElementById('qrcode').innerHTML = ''; document.getElementById('qrcode').innerHTML = '';
document.getElementById('terms-box').classList.remove('show');
document.getElementById('terms-check').checked = false;
document.getElementById('terms-accept').disabled = true;
const chain = getChain(); const chain = getChain();
try { try {
const response = await fetch('/data', { const response = await fetch('/data', {
@@ -485,15 +504,34 @@ document.getElementById('submit').addEventListener('click', async () => {
const qrEl = document.getElementById('qrcode'); const qrEl = document.getElementById('qrcode');
qrEl.innerHTML = ''; qrEl.innerHTML = '';
new QRCode(qrEl, invoiceuri); new QRCode(qrEl, invoiceuri);
inv.classList.add('show'); const serverUrl = result.url || url;
inv.scrollIntoView({ behavior: 'smooth', block: 'nearest' }); const infoUrl = serverUrl + '/' + (result.chain || chain) + '/info';
document.getElementById('iv-url').textContent = result.url || url; document.getElementById('iv-url').textContent = serverUrl;
document.getElementById('terms-url').href = infoUrl;
document.getElementById('terms-url').textContent = serverUrl;
document.getElementById('terms-box').classList.add('show');
document.getElementById('terms-box').scrollIntoView({ behavior: 'smooth', block: 'nearest' });
} catch (err) { } catch (err) {
document.getElementById('iv-status').className = 'err-line'; document.getElementById('iv-status').className = 'err-line';
document.getElementById('iv-status').textContent = 'Network error. Please try again.'; document.getElementById('iv-status').textContent = 'Network error. Please try again.';
} }
}); });
document.getElementById('terms-check').addEventListener('change', function () {
document.getElementById('terms-accept').disabled = !this.checked;
});
document.getElementById('terms-accept').addEventListener('click', function () {
document.getElementById('terms-box').classList.remove('show');
const inv = document.getElementById('invoice');
inv.classList.add('show');
inv.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
});
document.getElementById('url').addEventListener('keydown', e => {
if (e.key === 'Enter') document.getElementById('submit').click();
});
(function init() { (function init() {
const blob = new Blob([JSON.stringify(allServers, null, 2)], { type: 'application/json' }); const blob = new Blob([JSON.stringify(allServers, null, 2)], { type: 'application/json' });
document.getElementById('download').href = URL.createObjectURL(blob); document.getElementById('download').href = URL.createObjectURL(blob);