From 4dae7c082f858381f81b64bd938ae0be50a79108 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hern=C3=A2ni=20Marques?= <hernani+magikoopa@vecirex.net>
Date: Fri, 10 Jul 2026 20:05:59 +0200
Subject: [PATCH] merchant landing: Get GOA first hint with bank link and
 p(l)ay joke

---
 configs/merchant-landing/index.html | 120 +++++++++++++++-------------
 1 file changed, 64 insertions(+), 56 deletions(-)

diff --git a/configs/merchant-landing/index.html b/configs/merchant-landing/index.html
index dc2ee3a..6a64bdd 100644
--- a/configs/merchant-landing/index.html
+++ b/configs/merchant-landing/index.html
@@ -57,6 +57,57 @@
       padding: 0.2rem 0.7rem; border-radius: 999px; margin: 0 0 0.75rem;
       border: 1px solid rgba(167, 139, 250, 0.45); letter-spacing: 0.04em;
     }
+    .money-hint {
+      margin: 0 0 1.15rem;
+      padding: 0.85rem 0.95rem 0.95rem;
+      border-radius: 12px;
+      background: rgba(94, 234, 212, 0.1);
+      border: 1px solid rgba(94, 234, 212, 0.4);
+      color: #ccfbf1;
+      font-size: 0.9rem;
+      line-height: 1.4;
+      text-align: center;
+    }
+    .money-hint strong { color: #5eead4; font-weight: 750; }
+    .money-hint .play-joke {
+      color: #fdf4ff;
+      font-weight: 800;
+      white-space: nowrap;
+      background: linear-gradient(135deg, #d946ef 0%, #a21caf 55%, #7c3aed 100%);
+      padding: 0.08em 0.35em 0.12em;
+      border-radius: 0.35em;
+      box-shadow: 0 0 0 1px rgba(253, 244, 255, 0.25);
+      letter-spacing: 0.02em;
+    }
+    .money-hint a {
+      color: #5eead4; font-weight: 700; text-decoration: none;
+      border-bottom: 1px solid rgba(94, 234, 212, 0.4);
+    }
+    .money-hint a:hover { border-bottom-color: #5eead4; }
+    .money-hint .money-hint-detail {
+      display: inline-block;
+      margin-top: 0.35rem;
+      font-size: 0.84rem;
+      color: #99f6e4;
+      opacity: 0.92;
+    }
+    .money-hint .money-hint-cta {
+      display: inline-block;
+      margin-top: 0.55rem;
+      padding: 0.45rem 0.9rem;
+      border-radius: 10px;
+      border: 0;
+      border-bottom: 0;
+      background: linear-gradient(135deg, #5eead4, #0d9488);
+      color: #042f2e;
+      font-weight: 750;
+      font-size: 0.88rem;
+      text-decoration: none;
+    }
+    .money-hint .money-hint-cta:hover {
+      filter: brightness(1.06);
+      border-bottom: 0;
+    }
     .stats {
       background: rgba(24, 18, 40, 0.65);
       border: 1px solid rgba(167, 139, 250, 0.32);
@@ -269,47 +320,6 @@
       transform: translateY(-1px);
       outline: none;
     }
-    .shop-modal {
-      position: fixed; inset: 0; z-index: 50;
-      display: none; align-items: center; justify-content: center;
-      padding: 1rem; background: rgba(8, 6, 14, 0.72);
-      backdrop-filter: blur(6px);
-    }
-    .shop-modal.open { display: flex; }
-    .shop-modal-card {
-      background: rgba(36, 28, 48, 0.96);
-      border: 1px solid rgba(167, 139, 250, 0.45);
-      border-radius: 16px;
-      padding: 1.25rem 1.2rem 1.35rem;
-      max-width: 20rem; width: 100%;
-      text-align: center;
-      box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
-    }
-    .shop-modal-card h3 {
-      margin: 0 0 0.25rem; font-size: 1.05rem; color: #faf5ff;
-    }
-    .shop-modal-card .amount {
-      margin: 0 0 0.85rem; font-weight: 750; color: #c4b5fd; font-variant-numeric: tabular-nums;
-    }
-    .shop-modal-card .qr-wrap {
-      background: #fff; border-radius: 12px; padding: 0.75rem;
-      display: inline-block; margin: 0 auto 0.85rem;
-    }
-    .shop-modal-card .qr-wrap canvas,
-    .shop-modal-card .qr-wrap img,
-    .shop-modal-card .qr-wrap table {
-      display: block; margin: 0 auto;
-    }
-    .shop-modal-card .status {
-      min-height: 1.2em; font-size: 0.82rem; color: var(--muted); margin: 0 0 0.75rem;
-    }
-    .shop-modal-card .status.err { color: #fca5a5; }
-    .shop-modal-card .actions {
-      display: flex; flex-direction: column; gap: 0.45rem;
-    }
-    .shop-modal-card .meta {
-      font-size: 0.68rem; word-break: break-all; color: var(--muted); margin: 0.55rem 0 0;
-    }
     .shop-item .emoji { display: block; font-size: 1.4rem; line-height: 1.2; margin-bottom: 0.25rem; }
     .shop-item .emoji.pill-duo {
       display: flex; justify-content: center; align-items: center;
@@ -342,9 +352,20 @@
       </p>
     </header>
 
+    <p class="money-hint" role="note">
+      <strong>Get GOA first.</strong>
+      You need coins in your wallet before you can
+      <span class="play-joke" title="pay / play">p(l)ay</span>
+      here.
+      <br />
+      <span class="money-hint-detail">Install the wallet → one-step withdraw at the bank, then return to this shop.</span>
+      <br />
+      <a class="money-hint-cta" href="https://bank.hacktivism.ch/intro/">Get money at the bank →</a>
+    </p>
+
     <aside class="shop-box" aria-labelledby="shop-title">
       <h2 id="shop-title">GOA shop · samples</h2>
-      <p class="shop-lead">Tap an item → pay QR for the wallet</p>
+      <p class="shop-lead">Tap an item → open payment link for the wallet</p>
       <div class="shop-grid" id="shop-grid">
         <button type="button" class="shop-item" data-product="orbit-sticker">
           <span class="emoji" aria-hidden="true">🪐</span>
@@ -420,19 +441,6 @@
       </div>
     </aside>
 
-    <div class="shop-modal" id="shop-modal" role="dialog" aria-modal="true" aria-labelledby="shop-modal-title" hidden>
-      <div class="shop-modal-card">
-        <h3 id="shop-modal-title">…</h3>
-        <p class="amount" id="shop-modal-amount">…</p>
-        <div class="qr-wrap" id="shop-modal-qr"></div>
-        <p class="status" id="shop-modal-status">Preparing pay QR…</p>
-        <div class="actions">
-          <a class="cta teal" id="shop-modal-open" href="#">Open in wallet →</a>
-          <button type="button" class="cta-sec" id="shop-modal-close">Close</button>
-        </div>
-        <p class="meta" id="shop-modal-uri" hidden></p>
-      </div>
-    </div>
 
     <section class="stats" id="stats" aria-labelledby="stats-title">
       <h2 id="stats-title">Merchant stats</h2>
@@ -568,7 +576,7 @@
       <a href="https://taler.hacktivism.ch/intro/">Merchant</a> ·
       <a href="https://taler.hacktivism.ch/terms">Terms</a> ·
       <a href="https://taler.hacktivism.ch/privacy">Privacy</a> ·
-      <a href="https://git.hacktivism.ch/hernani/koopa-admin-log/src/branch/main/configs/merchant-landing">source</a>
+      <a href="https://git.hacktivism.ch/hernani/koopa-admin-log/src/branch/main/configs/merchant-landing">Source</a>
       <p class="privacy-note" style="margin:0.65rem 0 0;font-size:0.78rem;color:var(--muted);line-height:1.4">
         Privacy: processing under Swiss FADP (revDSG). What is retained is listed on
         <a href="https://taler.hacktivism.ch/privacy" style="color:#5eead4">/privacy</a>.