AsinoV/bal-welist-website
1
0
Fork 0
forked from bitcoinafterlife/bal-welist-website
Code Pull Requests Activity

Terms: animated listing timeline first, sections reordered, navigation buttons

Browse Source 
- Animated SVG timeline of the listing lifecycle (pay, listed, renewal window every year, renewed / removed) opens the Terms page; plays when scrolled into view, Replay button, four-step strip kept on small screens
- Sections reordered Listing, Order, Contact, Changes and renumbered; cross-references updated, legal text unchanged
- Home hero: 'How to get listed' button to the Terms page; Terms: 'Back to the server list' button and footer link
This commit is contained in:
bitcoinafterlife
2026-11-06 17:59:33 +01:00
parent 6046f8fba9
commit e39d56b756
2 changed files with 216 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
index.html
View File

@@ -78,6 +78,15 @@ header.hero{padding:48px 0 28px;border-bottom:1px solid var(--line)}
}
.brand .sub{color:var(--muted);font-size:14px;margin-top:2px}
.hero-stats{display:flex;gap:28px}
/* Right side of the hero: the stats and the way to the Terms page (how to get
listed, yearly fee). Added 2026-11-06: the page was hard to find. */
.hero-right{display:flex;align-items:flex-end;gap:28px;flex-wrap:wrap}
.hero-cta{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:10px;
background:var(--accent);color:#fff;text-decoration:none;font-weight:600;font-size:14px;line-height:1.15;
box-shadow:0 4px 14px rgba(45,108,223,.25)}
.hero-cta:hover{filter:brightness(1.06)}
.hero-cta svg{width:22px;height:22px;flex:none}
.hero-cta small{display:block;font-weight:400;font-size:12px;opacity:.85;margin-top:2px}
.stat .n{font-family:var(--display);font-size:26px;font-weight:600;line-height:1}
.stat .l{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:6px}
@@ -331,10 +340,13 @@ footer a{color:var(--accent);text-decoration:none}
<div class="sub"><a href="https://bitcoin-after.life" target="_blank" rel="noopener">Bitcoin After Life</a> · Will-executor node leaderboard</div>
</div>
</div>
<div class="hero-right">
<div class="hero-stats">
<div class="stat"><div class="n" id="s-online">0</div><div class="l">Online</div></div>
<div class="stat"><div class="n" id="s-total">0</div><div class="l">Servers</div></div>
</div>
<a class="hero-cta" href="/terms.html"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><path d="M14 3v6h6"/><path d="M8 13h8M8 17h5"/></svg><span>How to get listed<small>Terms &amp; yearly fee</small></span></a>
</div>
</div>
</header>

223
terms.html
View File

@@ -28,6 +28,12 @@
matching the server-side get_list() ordering. Section 1, header,
footer and the dynamic min-deposit script are unchanged from the
previous version.
2026-11-06: the page opens with an animated SVG timeline (.lt) of the
listing lifecycle, played when it scrolls into view; the four-step
.lifecycle strip is kept for small screens only. Sections reordered
(Listing, Order, Contact, Changes) and renumbered; the "see Section N"
references follow. The yearly fee in the SVG (#thr-min-lt) is updated by
the same script as #thr-min.
-->
<style>
:root{
@@ -80,6 +86,12 @@ header.hero{padding:48px 0 28px;border-bottom:1px solid var(--line)}
font-size:30px;line-height:1.05;margin:0;letter-spacing:-.01em;
}
.brand .sub{color:var(--muted);font-size:14px;margin-top:2px}
/* Way back to the server list (added 2026-11-06: the page had no obvious exit). */
.back-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:10px;
border:1px solid var(--line-strong);background:var(--panel);color:var(--accent);
font-weight:600;font-size:14px;text-decoration:none;box-shadow:var(--shadow)}
.back-btn:hover{border-color:var(--accent)}
.back-btn svg{width:18px;height:18px;flex:none}
.mono{font-family:var(--mono);font-size:13px}
@@ -111,6 +123,53 @@ header.hero{padding:48px 0 28px;border-bottom:1px solid var(--line)}
.step h3{font-size:14px;margin:0 0 6px;letter-spacing:.01em}
.step p{font-size:13px;color:var(--muted);margin:0;line-height:1.55}
/* --- Added 2026-11-06: animated timeline of the listing lifecycle (top of the page).
Inline SVG + CSS keyframes, runs once and ends on the complete drawing;
prefers-reduced-motion shows the complete drawing at once. On small
screens the SVG text would be too small, so the four-step .lifecycle
strip is shown instead (see the 860px media query). */
/* ---- Listing timeline (SVG + CSS animation) ---- */
.lt{position:relative;grid-column:1 / -1;background:var(--panel);border:1px solid var(--line);
border-radius:var(--radius);padding:18px 20px 6px;box-shadow:var(--shadow)}
.lt svg{display:block;width:100%;height:auto;font-family:var(--body)}
.lt .replay{position:absolute;right:14px;top:14px;font:12px var(--body);color:var(--accent);background:var(--accent-soft);
border:1px solid #cfe0fb;border-radius:999px;padding:4px 10px;cursor:pointer}
.lt text{fill:var(--ink);font-size:13px}
.lt .small{font-size:12px;fill:var(--muted)}
.lt .mono{font-family:var(--mono);font-size:12px}
.lt .lbl-ok{fill:var(--ok);font-weight:600}
.lt .lbl-acc{fill:var(--accent);font-weight:600}
.lt .lbl-off{fill:var(--off);font-weight:600}
/* every animated piece starts hidden/empty and ends in its final state; the
animation runs once (fill-mode both) so the diagram is complete when it stops */
.lt .bar-y1{transform-origin:120px 0}
.lt .bar-y2{transform-origin:520px 0}
.lt .dot{transform:translateX(400px)}
/* .play is added by the script when the timeline scrolls into view (and by
Replay); the keyframes start from the empty state, so until then the
complete drawing is shown */
.lt.play .pill{animation:fade .85s ease both}
.lt.play .bar-y1{animation:grow 5.5s linear both}
.lt.play .bar-y2{animation:grow 4s linear both}
.lt.play .dot{animation:travel 5.5s linear both}
.lt.play .win{animation:fade 1s ease both}
.lt.play .out{animation:fade 1s ease both}
.lt.play .p1{animation-delay:.4s}
.lt.play .p2{animation-delay:1.8s}
.lt.play .p3{animation-delay:3.4s}
.lt.play .bar-y1,.lt.play .dot{animation-delay:4s}
.lt.play .win{animation-delay:6.8s}
.lt.play .out{animation-delay:9.6s}
.lt.play .bar-y2{animation-delay:10.5s}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes travel{from{transform:translateX(0)}to{transform:translateX(400px)}}
@media (prefers-reduced-motion:reduce){
.lt.play .pill,.lt.play .win,.lt.play .out,.lt.play .bar-y1,.lt.play .bar-y2,.lt.play .dot{animation:none}
}
.lifecycle{display:none}
footer{border-top:1px solid var(--line);margin-top:48px;padding:28px 0;color:var(--muted);font-size:13px}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
footer a{color:var(--accent);text-decoration:none}
@@ -118,8 +177,9 @@ footer a{color:var(--accent);text-decoration:none}
@media (max-width:860px){
.info-grid{grid-template-columns:1fr}
.brand h1{font-size:24px}
/* On small screens the timeline stacks vertically like the other blocks */
.lifecycle{grid-template-columns:1fr}
/* On small screens the four-step strip replaces the SVG timeline and stacks vertically */
.lt-section{display:none}
.lifecycle{display:grid;grid-template-columns:1fr}
.step{border-top:none;border-left:3px solid var(--line-strong);padding:0 0 4px 16px}
.step:first-child{border-left-color:var(--accent)}
.step::before{top:2px;left:-7px}
@@ -229,31 +289,117 @@ l-49 -25 -880 0 -880 0 -3 704 c-2 557 0 706 10 713 7 4 407 7 888 5 818 -2
<div class="sub">Bitcoin After Life · Will Executor List</div>
</div>
</div>
<a class="back-btn" href="/"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M11 17l-5-5 5-5"/><path d="M6 12h6"/><path d="M15 6h4M15 12h4M15 18h4"/></svg>Back to the server list</a>
</div>
</header>
<main class="wrap">
<!-- The listing lifecycle first: the animated timeline (desktop) with a
one-line intro. On small screens this section is hidden and the
four-step strip inside Section 1 takes its place. The animation
starts when the timeline scrolls into view (see the script). -->
<section class="info-section lt-section">
<h2>How a listing works</h2>
<p class="sub">From the payment to the renewal, in fifteen seconds. The details are in the sections below.</p>
<div class="lt" id="lt">
<button class="replay" type="button">&#8635; Replay</button>
<svg viewBox="0 0 1000 318" role="img" aria-labelledby="lt-title lt-desc">
<title id="lt-title">Listing timeline</title>
<desc id="lt-desc">Pay the yearly fee; after 3 confirmations the server is listed for 365 days. From 6 months before expiry you can renew: a new year is added on top. If you do not renew, the server is removed at expiry.</desc>
<defs>
<pattern id="hatch" width="8" height="8" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
<rect width="8" height="8" fill="#e6eefc"/><line x1="0" y1="0" x2="0" y2="8" stroke="#2d6cdf" stroke-opacity=".35" stroke-width="2"/>
</pattern>
</defs>
<section class="info-section">
<h2>1. Contact &amp; Support</h2>
<p class="sub">For URL changes, refunds, or any issues related to your Will Executor listing, contact us at <a href="mailto:welist@bitcoin-after.life">welist@bitcoin-after.life</a>.</p>
<div class="info-grid">
<div class="info-block">
<span class="ic">VERIFICATION</span>
<h3>Proof of Ownership</h3>
<p>Any request to modify a listing (including URL changes) requires proof that you control both the domain and the server. We reserve the right to request a message signed with the private key of the UTXO used for payment before processing any changes or refunds.</p>
</div>
<div class="info-block">
<span class="ic">POLICY</span>
<h3>No Refunds After Payment</h3>
<p>Once a payment is confirmed on the blockchain and the server is listed, no refunds will be issued. Always verify that your server URL is correct and reachable before submitting payment.</p>
</div>
<!-- steps 1-3: pay, confirmations, listed -->
<g class="pill p1">
<rect x="20" y="22" width="180" height="40" rx="20" fill="#fff" stroke="#dfe4ea"/>
<circle cx="42" cy="42" r="11" fill="#f7931a"/><text x="42" y="46.5" text-anchor="middle" font-size="13" font-weight="700" fill="#fff">&#8383;</text>
<text x="62" y="38" font-weight="600">Pay the yearly fee</text>
<text x="62" y="54" class="small mono"><tspan id="thr-min-lt">50,000</tspan> sats / 365 days</text>
</g>
<g class="pill p2">
<path d="M202 42 h26" stroke="#cbd2da" stroke-width="2"/>
<polygon points="226,37 234,42 226,47" fill="#cbd2da"/>
<rect x="238" y="22" width="186" height="40" rx="20" fill="#fff" stroke="#dfe4ea"/>
<circle cx="260" cy="42" r="11" fill="none" stroke="#2d6cdf" stroke-width="2"/><path d="M260 35 v7 l5 3" stroke="#2d6cdf" stroke-width="2" fill="none" stroke-linecap="round"/>
<text x="280" y="38" font-weight="600">3 confirmations</text>
<text x="280" y="54" class="small">about 30 minutes</text>
</g>
<g class="pill p3">
<path d="M426 42 h26" stroke="#cbd2da" stroke-width="2"/>
<polygon points="450,37 458,42 450,47" fill="#cbd2da"/>
<rect x="462" y="22" width="190" height="40" rx="20" fill="#e3f4ea" stroke="#bfe3cd"/>
<circle cx="484" cy="42" r="11" fill="#1f9d57"/><path d="M478 42 l4 4 l8 -8" stroke="#fff" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
<text x="504" y="38" font-weight="600" fill="#1f9d57">Listed</text>
<text x="504" y="54" class="small">your 365 days start now</text>
</g>
<!-- axis: 24 months, 0 at x=120, 12 at x=520, 24 at x=920 -->
<line x1="120" y1="136" x2="940" y2="136" stroke="#cbd2da" stroke-width="2"/>
<polygon points="938,131 948,136 938,141" fill="#cbd2da"/>
<g class="small" text-anchor="middle">
<line x1="120" y1="130" x2="120" y2="142" stroke="#9aa4b0"/><text x="120" y="182">day 0</text>
<line x1="320" y1="130" x2="320" y2="142" stroke="#9aa4b0"/><text x="320" y="182">6 months</text>
<line x1="520" y1="130" x2="520" y2="142" stroke="#9aa4b0"/><text x="520" y="182" font-weight="600" fill="#1a2027">12 months &middot; expiry</text>
<line x1="720" y1="130" x2="720" y2="142" stroke="#9aa4b0"/><text x="720" y="182">18 months</text>
<line x1="920" y1="130" x2="920" y2="142" stroke="#9aa4b0"/><text x="920" y="182">24 months</text>
</g>
<!-- year 1: listed (fills from day 0 to month 12) -->
<rect class="bar-y1" x="120" y="124" width="400" height="24" rx="6" fill="#1f9d57" fill-opacity=".85"/>
<text x="220" y="140" text-anchor="middle" font-size="13" font-weight="600" fill="#fff" style="pointer-events:none">Listed &middot; year 1</text>
<circle class="dot" cx="120" cy="136" r="7" fill="#fff" stroke="#1f9d57" stroke-width="3"/>
<!-- renewal window: months 6-12, glued under the bar -->
<g class="win">
<!-- the window marked on the bar itself, and two guides down to its caption -->
<rect x="320" y="124" width="200" height="24" rx="6" fill="none" stroke="#2d6cdf" stroke-width="2" stroke-dasharray="5 4"/>
<rect x="320" y="150" width="200" height="16" fill="url(#hatch)" stroke="#2d6cdf" stroke-opacity=".5" rx="3"/>
<text x="320" y="204" class="lbl-acc">Renewal window</text>
<text x="320" y="220" class="small">from 6 months before expiry: pay the yearly fee again</text>
<text x="320" y="235" class="small">for the same URL &mdash; the new year is added on top.</text>
<text x="320" y="250" class="small">The same window opens every year.</text>
</g>
<!-- the two outcomes at month 12 -->
<g class="out">
<!-- renewed: the bar continues -->
<rect class="bar-y2" x="520" y="124" width="400" height="24" rx="6" fill="#1f9d57" fill-opacity=".55"/>
<text x="620" y="140" text-anchor="middle" font-size="13" font-weight="600" fill="#fff">Renewed &middot; year 2</text>
<!-- the renewal window repeats every year: months 18-24 of year 2 -->
<rect x="720" y="124" width="200" height="24" rx="6" fill="none" stroke="#2d6cdf" stroke-width="2" stroke-dasharray="5 4"/>
<rect x="720" y="150" width="200" height="16" fill="url(#hatch)" stroke="#2d6cdf" stroke-opacity=".5" rx="3"/>
<path d="M520 92 v24" stroke="#1f9d57" stroke-width="2"/>
<polygon points="515,116 520,124 525,116" fill="#1f9d57"/>
<text x="660" y="86" class="lbl-ok">Renewed in time</text>
<text x="660" y="101" class="small">+365 days added on top of the time left:</text>
<text x="660" y="116" class="small">renewing early never costs you days</text>
<!-- not renewed: removed at expiry -->
<path d="M524 156 h116 v58 h12" stroke="#9aa4b0" stroke-width="2" fill="none"/>
<polygon points="648,209 656,214 648,219" fill="#9aa4b0"/>
<rect x="660" y="200" width="292" height="28" rx="14" fill="#eceff3" stroke="#dfe4ea"/>
<line x1="676" y1="208" x2="688" y2="220" stroke="#9aa4b0" stroke-width="2.4" stroke-linecap="round"/>
<line x1="688" y1="208" x2="676" y2="220" stroke="#9aa4b0" stroke-width="2.4" stroke-linecap="round"/>
<text x="698" y="218" class="lbl-off">Not renewed &rarr; removed at expiry</text>
<text x="660" y="248" class="small">Users who already added your server keep it:</text>
<text x="660" y="263" class="small">the plugin list is add-only.</text>
</g>
<!-- note: the paid total never decays -->
<g>
<rect x="20" y="282" width="960" height="1" fill="#dfe4ea"/>
<text x="20" y="304" class="small"><tspan font-weight="600" fill="#1a2027">Your paid total never decays:</tspan> it is kept across renewals and sets your position in the list (Section 2). Payments below the yearly fee are donations and add no time.</text>
</g>
</svg>
</div>
</section>
<section class="info-section">
<h2>2. Listing &amp; Renewal</h2>
<p class="sub">A listing works like a hosting plan: a flat yearly fee buys your server one year of presence in the list. Your paid amount accumulates and never decays — it is preserved across renewals and also determines your position in the list (see Section&nbsp;3). Payments are non-refundable (see Section&nbsp;1) — double-check your server URL before paying.</p>
<h2>1. Listing &amp; Renewal</h2>
<p class="sub">A listing works like a hosting plan: a flat yearly fee buys your server one year of presence in the list. Your paid amount accumulates and never decays — it is preserved across renewals and also determines your position in the list (see Section&nbsp;2). Payments are non-refundable (see Section&nbsp;3) — double-check your server URL before paying.</p>
<div class="info-grid">
<div class="info-block">
<span class="ic">01 · PAYMENT</span>
@@ -270,7 +416,7 @@ l-49 -25 -880 0 -880 0 -3 704 c-2 557 0 706 10 713 7 4 407 7 888 5 818 -2
<div class="info-block">
<span class="ic">03 · CAPACITY</span>
<h3>No Cap on Listings</h3>
<p>There is no fixed number of slots: every server with remaining listing time is shown. Paying buys presence in the list; the total amount paid also affects your position in it (see Section&nbsp;3).</p>
<p>There is no fixed number of slots: every server with remaining listing time is shown. Paying buys presence in the list; the total amount paid also affects your position in it (see Section&nbsp;2).</p>
<p>Removal from the list does not affect users who already have your server in their plugin: the plugin's server list is add-only. Being listed matters for reaching new users.</p>
</div>
<div class="info-block">
@@ -300,7 +446,7 @@ l-49 -25 -880 0 -880 0 -3 704 c-2 557 0 706 10 713 7 4 407 7 888 5 818 -2
</section>
<section class="info-section">
<h2>3. List Order &amp; Server Page</h2>
<h2>2. List Order &amp; Server Page</h2>
<p class="sub">The list is ordered by four criteria: first by total excess donated (higher first), then by total amount paid in balance (higher first), then by the base fee charged (lower first), and finally by WeTime points (higher first) as a tie-breaker.</p>
<div class="info-grid">
<div class="info-block">
@@ -323,6 +469,23 @@ l-49 -25 -880 0 -880 0 -3 704 c-2 557 0 706 10 713 7 4 407 7 888 5 818 -2
</div>
</section>
<section class="info-section">
<h2>3. Contact &amp; Support</h2>
<p class="sub">For URL changes, refunds, or any issues related to your Will Executor listing, contact us at <a href="mailto:welist@bitcoin-after.life">welist@bitcoin-after.life</a>.</p>
<div class="info-grid">
<div class="info-block">
<span class="ic">VERIFICATION</span>
<h3>Proof of Ownership</h3>
<p>Any request to modify a listing (including URL changes) requires proof that you control both the domain and the server. We reserve the right to request a message signed with the private key of the UTXO used for payment before processing any changes or refunds.</p>
</div>
<div class="info-block">
<span class="ic">POLICY</span>
<h3>No Refunds After Payment</h3>
<p>Once a payment is confirmed on the blockchain and the server is listed, no refunds will be issued. Always verify that your server URL is correct and reachable before submitting payment.</p>
</div>
</div>
</section>
<section class="info-section">
<h2>4. Changes to These Terms</h2>
<p class="sub">We reserve the right to update these terms at any time. Material changes will be announced on this page with their effective date.</p>
@@ -339,27 +502,41 @@ l-49 -25 -880 0 -880 0 -3 704 c-2 557 0 706 10 713 7 4 407 7 888 5 818 -2
</div>
</div>
</section>
</main>
<footer>
<div class="wrap">
<span>Bitcoin After Life — Will Executor List</span>
<a href="/">&larr; Back to the server list</a>
<a href="mailto:welist@bitcoin-after.life">welist@bitcoin-after.life</a>
</div>
</footer>
<script>
(function () {
// Listing timeline: play once when it scrolls into view; Replay restarts it.
var lt = document.getElementById('lt');
if (!lt || !('IntersectionObserver' in window)) { if (lt) lt.classList.add('play'); return; }
var play = function () { lt.classList.remove('play'); void lt.offsetWidth; lt.classList.add('play'); };
var io = new IntersectionObserver(function (entries) {
if (entries.some(function (e) { return e.isIntersecting; })) { play(); io.disconnect(); }
}, { threshold: 0.5 });
io.observe(lt);
lt.querySelector('.replay').addEventListener('click', play);
})();
(async function() {
// Unchanged from the previous version: fetches the current yearly fee
// from the server so the number on this page always matches reality.
// The #thr-min span is now inside Section 2 (01 · PAYMENT).
// The #thr-min span is inside Section 1 (01 · PAYMENT).
const chain = location.hash ? location.hash.slice(1) : 'bitcoin';
try {
const r = await fetch('/min_deposit/' + chain);
const val = parseInt(await r.text(), 10);
if (!isNaN(val)) {
document.getElementById('thr-min').textContent = Number(val).toLocaleString('en-US');
const txt = Number(val).toLocaleString('en-US');
document.getElementById('thr-min').textContent = txt;
const svgFee = document.getElementById('thr-min-lt');
if (svgFee) svgFee.textContent = txt;
}
} catch (err) {}
})();