Home panel: Add / Check tabs, side notes, narrower ranking panel

- One panel with two tabs (Add a server / Check a server), one button each, ?mode=check opens the Check tab
- Side column with 'What happens next' / 'What you get' steps; ranking panel gets a closing note and a narrower column
- Terms FAQ 6 points at the Check tab

index.html

@@ -145,7 +145,7 @@ tbody tr:hover{background:color-mix(in srgb,var(--accent-soft) 50%,transparent)}
 .num{font-family:var(--mono);font-variant-numeric:tabular-nums}
 .score{font-family:var(--display);font-weight:600;font-size:15px}
 
-.add-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:24px;margin:40px 0;align-items:stretch}
+.add-grid{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);gap:24px;margin:40px 0;align-items:stretch}
 .add-grid>.panel{display:flex;flex-direction:column}
 .panel{
   background:var(--panel);border:1px solid var(--line);
@@ -208,8 +208,26 @@ tbody tr:hover{background:color-mix(in srgb,var(--accent-soft) 50%,transparent)}
 .terms-box .btn{margin-top:14px}
 .btn-row{display:flex;gap:8px;margin-top:8px}
 .btn-row .btn{flex:1;margin-top:0}
-.btn.secondary{background:var(--panel);color:var(--accent);border:1px solid var(--line-strong)}
+[hidden]{display:none!important}
-.btn.secondary:hover{border-color:var(--accent);filter:none}
+/* Add / Check tabs of the panel, and its two columns (form + side notes). */
+.mode-seg{margin-bottom:18px;align-self:flex-start}
+.mode-seg button{font-size:14px;padding:9px 16px;display:inline-flex;align-items:center;gap:8px}
+.mode-seg button svg{width:16px;height:16px}
+.mode-seg button[aria-selected="true"]{background:var(--accent-soft);color:var(--ink);font-weight:600}
+.panel-body{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:28px;align-items:start}
+.panel-side{border-left:1px solid var(--line);padding-left:24px;font-size:13px;color:var(--muted);line-height:1.5}
+.side-title{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-weight:600;margin:6px 0 12px}
+.mini-steps{list-style:none;margin:0 0 14px;padding:0;counter-reset:ms}
+.mini-steps li{position:relative;padding:0 0 14px 34px;counter-increment:ms}
+.mini-steps li::before{content:counter(ms);position:absolute;left:0;top:0;width:24px;height:24px;border-radius:50%;
+  background:var(--accent-soft);color:var(--accent);font-family:var(--mono);font-size:12px;display:flex;align-items:center;justify-content:center}
+.mini-steps b{display:block;color:var(--ink);font-size:13.5px;margin-bottom:2px}
+.side-link{color:var(--accent);text-decoration:none;font-weight:600}
+.side-link:hover{text-decoration:underline}
+@media (max-width:1024px){
+  .panel-body{grid-template-columns:1fr}
+  .panel-side{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:16px}
+}
 
 .intro-card{
   background:var(--panel);border:1px solid var(--line);
@@ -410,24 +428,34 @@ footer a{color:var(--accent);text-decoration:none}
     </section>
 
     <div class="add-grid">
-      <div class="panel">
+      <!-- One panel, two jobs (owner, 2026-11-06): the tabs choose between adding a
-        <h2>Add your Will Executor</h2>
+           server (pay, invoice) and checking a listed one (read-only). Elements marked
-        <p class="lead">Enter your server URL. It will appear in the list once your deposit is confirmed (typically about 30 minutes).</p>
+           data-add / data-check belong to one tab; the script hides the others.
-        <!-- Same form, second use (2026-11-06): with the exact URL of a listed server the
+           ?mode=check in the address opens the Check tab (the Terms FAQ links to it). -->
-             reply shows its status, balance and next renewal date instead of an invoice. -->
+      <div class="panel" id="we-panel" data-mode="add">
-        <p class="lead" style="margin-top:-10px"><strong>Already listed?</strong> Enter the exact URL of your server as it appears in the list and press <em>Check server</em>: the box shows its status, balance and next renewal date.</p>
+        <div class="seg mode-seg" role="tablist" aria-label="Add or check a server">
+          <button type="button" role="tab" aria-selected="true" data-mode="add">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg>Add a server
+          </button>
+          <button type="button" role="tab" aria-selected="false" data-mode="check">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" aria-hidden="true"><circle cx="11" cy="11" r="6"/><path d="M20 20l-4.5-4.5"/></svg>Check a server
+          </button>
+        </div>
+        <div class="panel-body">
+        <div class="panel-form">
+        <h2 data-add>Add your Will Executor</h2>
+        <h2 data-check hidden>Check your Will Executor</h2>
+        <p class="lead" data-add>Enter your server URL. It will appear in the list once your deposit is confirmed (typically about 30 minutes).</p>
+        <p class="lead" data-check hidden>Enter the exact URL of your server as it appears in the list. You get its position, balance and expiry date. Nothing is charged.</p>
         <div class="form-row">
           <input type="text" id="url" placeholder="https://we.bitcoin-after.life">
         </div>
-        <div style="margin-top:8px">
+        <div style="margin-top:8px" data-add>
           <input type="text" id="contact" placeholder="Email, npub or Telegram (optional)" style="width:100%;font:inherit;font-size:14px;padding:9px 12px;border:1px solid var(--line-strong);border-radius:8px;background:var(--panel);color:var(--ink)">
         </div>
-        <!-- Two buttons, one action (owner, 2026-11-06): "Check server" is the same
-             request as "Add server"; for a listed server the reply is its status,
-             for a new one the invoice. The wording is what differs. -->
         <div class="btn-row">
-          <button class="btn" id="submit">Add server</button>
+          <button class="btn" id="submit" data-add>Add server</button>
-          <button class="btn secondary" id="check">Check server</button>
+          <button class="btn" id="check" data-check hidden>Check server</button>
         </div>
 
         <div class="ok-line" id="iv-status"></div>
@@ -462,6 +490,27 @@ footer a{color:var(--accent);text-decoration:none}
           </p>
         </div>
 
+        </div>
+        <aside class="panel-side">
+          <div data-add>
+            <p class="side-title">What happens next</p>
+            <ol class="mini-steps">
+              <li><b>Pay the yearly fee</b><span>50,000 sats, shown in the payment request</span></li>
+              <li><b>3 confirmations</b><span>about 30 minutes, then your server is listed for 365 days</span></li>
+              <li><b>Renew from 6 months before expiry</b><span>the new year is added on top of the time left</span></li>
+            </ol>
+          </div>
+          <div data-check hidden>
+            <p class="side-title">What you get</p>
+            <ol class="mini-steps">
+              <li><b>Position in the list</b><span>and the server page with its WeTime activity</span></li>
+              <li><b>Balance and donations</b><span>what the server has paid so far</span></li>
+              <li><b>Expiry date</b><span>shown only here and on the server page; the renewal window opens 6 months before</span></li>
+            </ol>
+          </div>
+          <a class="side-link" href="/terms.html">How listing works (15 s) &rarr;</a>
+        </aside>
+        </div>
       </div>
 
       <div class="panel">
@@ -471,6 +520,7 @@ footer a{color:var(--accent);text-decoration:none}
         <div style="display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line);font-size:13px"><span style="color:var(--muted)">Listing period</span><b>365 days</b></div>
         <div style="display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line);font-size:13px"><span style="color:var(--muted)">Renewal window</span><b>from 6 months before expiry</b></div>
         <div style="display:flex;justify-content:space-between;padding:8px 0;font-size:13px"><span style="color:var(--muted)">Plugin integration</span><b>automatic</b></div>
+
         <p class="lead" style="margin:16px 0 0">Paying more than the yearly fee moves your server up: the excess counts first in the order and never decays. Points are only a tie-breaker. <a href="/terms.html#faq" style="color:var(--accent);text-decoration:none;font-weight:600">Details in the Terms &rarr;</a></p>
       </div>
     </div>
@@ -924,8 +974,29 @@ document.getElementById('terms-accept').addEventListener('click', async function
     document.getElementById('iv-status').textContent = 'Network error. Please try again.';
   }
 });
+
+// Add / Check tabs: show the elements of one tab, clear any previous result.
+(function () {
+  const panel = document.getElementById('we-panel');
+  const tabs = Array.from(panel.querySelectorAll('.mode-seg button'));
+  function setMode(mode) {
+    panel.dataset.mode = mode;
+    tabs.forEach(b => b.setAttribute('aria-selected', b.dataset.mode === mode ? 'true' : 'false'));
+    panel.querySelectorAll('[data-add]').forEach(el => { el.hidden = mode !== 'add'; });
+    panel.querySelectorAll('[data-check]').forEach(el => { el.hidden = mode !== 'check'; });
+    stopDepositWatch();
+    const status = document.getElementById('iv-status');
+    status.className = ''; status.textContent = '';
+    document.getElementById('terms-box').classList.remove('show');
+    document.getElementById('invoice').classList.remove('show');
+  }
+  tabs.forEach(b => b.addEventListener('click', () => setMode(b.dataset.mode)));
+  if (new URLSearchParams(location.search).get('mode') === 'check') setMode('check');
+})();
 
-  if (e.key === 'Enter') document.getElementById('submit').click();
+document.getElementById('url').addEventListener('keydown', e => {
+  if (e.key !== 'Enter') return;
+  const mode = document.getElementById('we-panel').dataset.mode;
   document.getElementById(mode === 'check' ? 'check' : 'submit').click();
 });
 

terms.html

@@ -256,7 +256,7 @@ footer a{color:var(--accent);text-decoration:none}
    "name": "Where do I see my expiry date?",
    "acceptedAnswer": {
     "@type": "Answer",
-    "text": "On the home page, in the box “Add your Will Executor”, enter the exact URL of your server as it appears in the list and press “Check server” (it is the same request as “Add server”). If the server is already listed, instead of a payment request the box shows “Server is already listed. Next renewal: …” together with its chain, balance, donations and contact; “View page” opens the server's detail page with its WeTime activity. The date is not shown in the main table, so you need the exact URL. Knowing it also tells you when your renewal window opens (6 months before). Since the price per day is fixed and public, the expiry date shows how much a server has paid: this is intentional transparency."
+    "text": "On the home page, open the “Check a server” tab, enter the exact URL of your server as it appears in the list and press “Check server”. Nothing is charged: you get the server's position in the list, its balance and donations, and its expiry date; “View page” opens the server's detail page with its WeTime activity. The date is not shown in the main table, so you need the exact URL. Knowing it also tells you when your renewal window opens (6 months before). Since the price per day is fixed and public, the expiry date shows how much a server has paid: this is intentional transparency."
    }
   },
   {
@@ -663,7 +663,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
         </details>
         <details>
           <summary><span>Where do I see my expiry date?</span></summary>
-          <p>On the home page, in the box “Add your Will Executor”, enter the exact URL of your server as it appears in the list and press “Check server” (it is the same request as “Add server”). If the server is already listed, instead of a payment request the box shows “Server is already listed. Next renewal: …” together with its chain, balance, donations and contact; “View page” opens the server's detail page with its WeTime activity. The date is not shown in the main table, so you need the exact URL. Knowing it also tells you when your renewal window opens (6 months before). Since the price per day is fixed and public, the expiry date shows how much a server has paid: this is intentional transparency.</p>
+          <p>On the home page, open the “Check a server” tab, enter the exact URL of your server as it appears in the list and press “Check server”. Nothing is charged: you get the server's position in the list, its balance and donations, and its expiry date; “View page” opens the server's detail page with its WeTime activity. The date is not shown in the main table, so you need the exact URL. Knowing it also tells you when your renewal window opens (6 months before). Since the price per day is fixed and public, the expiry date shows how much a server has paid: this is intentional transparency. <a href="/?mode=check">Open the Check tab &rarr;</a></p>
         </details>
         <details>
           <summary><span>How is the order of the list decided?</span></summary>