exchange landing: wallet fold with gold penguin packages row

configs/exchange-landing/index.html

@@ -136,6 +136,67 @@
       flex: 1 1 100%; border-color: rgba(201, 184, 160, 0.35); color: var(--muted);
       font-weight: 600; font-size: 0.82rem; gap: 0.5rem;
     }
+    .wallet-fold {
+      margin: 0 0 1.15rem;
+      border: 1px solid rgba(232, 168, 56, 0.35);
+      border-radius: 14px;
+      overflow: hidden;
+      background: rgba(18, 28, 28, 0.55);
+    }
+    .wallet-fold-toggle {
+      display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
+      width: 100%; margin: 0; padding: 0.75rem 0.9rem; border: 0;
+      background: transparent; color: #f0d090; font: inherit; font-size: 0.95rem;
+      font-weight: 750; text-align: left; cursor: pointer;
+    }
+    .wallet-fold-toggle:hover { background: rgba(232, 168, 56, 0.1); }
+    .wallet-fold-toggle-text { flex: 1; }
+    .wallet-fold-chevron {
+      flex-shrink: 0; color: #3ecfbf; font-size: 1.1rem; font-weight: 700;
+      transition: transform 0.15s ease;
+    }
+    .wallet-fold.open .wallet-fold-chevron { transform: rotate(90deg); }
+    .wallet-fold-body {
+      display: none; padding: 0.15rem 0.9rem 1rem;
+      border-top: 1px solid rgba(232, 168, 56, 0.28);
+    }
+    .wallet-fold.open .wallet-fold-body { display: block; }
+    .wallet-fold-body .app-links { margin-top: 0.55rem; }
+    button.app-btn.cli-toggle {
+      flex: 1 1 100%; width: 100%; justify-content: flex-start; gap: 0.5rem;
+      font: inherit; font-weight: 700; font-size: 0.88rem; cursor: pointer;
+      color: #f0d090; border-color: rgba(232, 168, 56, 0.4); background: rgba(0,0,0,0.28);
+    }
+    button.app-btn.cli-toggle .cli-chevron {
+      margin-left: auto; flex-shrink: 0; color: #3ecfbf;
+      font-size: 1.15rem; font-weight: 700; line-height: 1;
+      transition: transform 0.15s ease;
+    }
+    button.app-btn.cli-toggle[aria-expanded="true"] .cli-chevron { transform: rotate(90deg); }
+    button.app-btn.cli-toggle[aria-expanded="true"] {
+      border-color: rgba(62, 207, 191, 0.5); background: rgba(62, 207, 191, 0.08);
+    }
+    .cli-panel {
+      display: none; width: 100%; margin: 0.35rem 0 0.55rem; text-align: left;
+      border: 1px solid rgba(232, 168, 56, 0.32); border-radius: 12px;
+      background: rgba(0, 0, 0, 0.28); padding: 0.75rem 0.85rem 0.9rem; box-sizing: border-box;
+    }
+    .cli-panel.open { display: block; }
+    .cli-panel .cli-lead {
+      margin: 0 0 0.55rem; color: var(--muted); font-size: 0.84rem; line-height: 1.4;
+    }
+    .cli-panel .cli-lead a { color: #e8c878; }
+    .cli-block {
+      margin: 0; padding: 0.55rem 0.65rem; border-radius: 10px;
+      background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(240, 200, 106, 0.2);
+      color: #e8e0d0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+      font-size: 0.7rem; line-height: 1.45; overflow-x: auto; white-space: pre; user-select: all;
+    }
+    .cli-block .cmt { color: #8a9a90; }
+    .sym-gold path, .sym-gold circle { fill: #f0c86a; stroke: #f0c86a; }
+    .sym-gold path[data-ring], .sym-gold circle[data-ring] { fill: none; stroke: #f0c86a; }
+    .sym-blue path, .sym-blue circle { fill: #3ecfbf; stroke: #3ecfbf; }
+    .sym-blue path[data-ring], .sym-blue circle[data-ring] { fill: none; stroke: #3ecfbf; }
     .app-ico { width: 1.15rem; height: 1.15rem; flex-shrink: 0; display: block; }
     .app-ico:not(.browser-ico) path,
     .app-ico:not(.browser-ico) circle,
@@ -144,6 +205,10 @@
     .app-ico.stroke-ico path, .app-ico.stroke-ico circle, .app-ico.stroke-ico rect {
       fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
     }
+    .app-ico.branch-ico circle { fill: currentColor; stroke: none; }
+    .app-ico.branch-ico path {
+      fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
+    }
     .app-btn:not(.hub) .app-ico { color: #f0c86a; }
     .app-btn.ios .app-ico { color: #f0c86a; }
     .hub-icons { display: inline-flex; align-items: center; gap: 0.4rem; }
@@ -239,9 +304,13 @@
       <p class="stats-foot" id="st-perf-foot">Memory from /proc + cgroup inside podman container.</p>
     </section>
 
-    <section class="step-card">
+    <div class="wallet-fold" id="wallet-fold">
-      <h2>Get the wallet</h2>
+      <button type="button" class="wallet-fold-toggle" id="wallet-fold-toggle"
-      <div class="step-body">
+              aria-expanded="false" aria-controls="wallet-fold-body">
+        <span class="wallet-fold-toggle-text">Get the wallet · Android / iOS / web / packages</span>
+        <span class="wallet-fold-chevron" aria-hidden="true">›</span>
+      </button>
+      <div class="wallet-fold-body" id="wallet-fold-body" hidden>
         <div class="app-links">
           <a class="app-btn" href="https://play.google.com/store/apps/details?id=net.taler.wallet" target="_blank" rel="noopener noreferrer" aria-label="Android Play Store">
             <svg class="app-ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M8.2 2.4l-.9-1.6c-.1-.2 0-.4.2-.5.2-.1.4 0 .5.2l.9 1.6c.8-.3 1.7-.5 2.6-.5s1.8.2 2.6.5l.9-1.6c.1-.2.3-.3.5-.2.2.1.3.3.2.5l-.9 1.6c1.8.8 3.1 2.5 3.3 4.6H4.9c.2-2.1 1.5-3.8 3.3-4.6zM7 8.5c.6 0 1 .4 1 1s-.4 1-1 1-1-.4-1-1 .4-1 1-1zm10 0c.6 0 1 .4 1 1s-.4 1-1 1-1-.4-1-1 .4-1 1-1zM5 10.5h14c.6 0 1 .4 1 1v6.2c0 1.3-1 2.3-2.3 2.3h-.5v2.2c0 .5-.4.9-.9.9s-.9-.4-.9-.9v-2.2h-4.8v2.2c0 .5-.4.9-.9.9s-.9-.4-.9-.9v-2.2h-.5C5.9 20 5 19 5 17.7v-6.2c0-.6.4-1 1-1z"/></svg>
@@ -282,9 +351,37 @@
             </span>
             Web browsers (experimental)
           </a>
+          <button type="button" class="app-btn hub cli-toggle" id="pkg-fold-toggle"
+                  aria-expanded="false" aria-controls="pkg-fold-body"
+                  aria-label="Linux packages: Debian and Ubuntu (taler-wallet-cli)">
+            <svg class="app-ico browser-ico penguin-ico" viewBox="0 0 24 24" role="img" aria-label="Linux">
+              <ellipse cx="12" cy="14.2" rx="6.4" ry="7.2" fill="#f0c86a"/>
+              <ellipse cx="12" cy="15.2" rx="3.6" ry="4.8" fill="#1a1410" opacity="0.35"/>
+              <circle cx="12" cy="7" r="4.1" fill="#f0c86a"/>
+              <circle cx="10.35" cy="6.6" r="0.85" fill="#1a1410"/>
+              <circle cx="13.65" cy="6.6" r="0.85" fill="#1a1410"/>
+              <path fill="#e8a838" d="M11.15 8.1 12 9.55 12.85 8.1z"/>
+              <ellipse cx="9.4" cy="21" rx="2.1" ry="1.05" fill="#e8a838"/>
+              <ellipse cx="14.6" cy="21" rx="2.1" ry="1.05" fill="#e8a838"/>
+              <ellipse cx="6.6" cy="13.5" rx="1.4" ry="2.6" fill="#f0c86a" transform="rotate(-18 6.6 13.5)"/>
+              <ellipse cx="17.4" cy="13.5" rx="1.4" ry="2.6" fill="#f0c86a" transform="rotate(18 17.4 13.5)"/>
+            </svg>
+            Debian · Ubuntu packages
+            <span class="cli-chevron" aria-hidden="true">›</span>
+          </button>
+          <div class="cli-panel" id="pkg-fold-body" hidden>
+            <p class="cli-lead">
+              Official <strong>taler-wallet-cli</strong> from
+              <a href="https://deb.taler.net/" target="_blank" rel="noopener noreferrer">deb.taler.net</a>.
+              More on the <a href="https://bank.hacktivism.ch/intro/">bank landing</a>.
+            </p>
+            <pre class="cli-block"><span class="cmt"># Debian example</span>
+sudo apt-get update
+sudo apt-get install -y taler-wallet-cli</pre>
+          </div>
         </div>
       </div>
-    </section>
+    </div>
 
     <section class="step-card">
       <h2>Withdraw GOA</h2>
@@ -450,5 +547,36 @@
     }
   })();
   </script>
+
+  <script>
+  (function () {
+    var fold = document.getElementById("wallet-fold");
+    var btn = document.getElementById("wallet-fold-toggle");
+    var body = document.getElementById("wallet-fold-body");
+    if (fold && btn && body) {
+      btn.addEventListener("click", function () {
+        var open = !fold.classList.contains("open");
+        fold.classList.toggle("open", open);
+        btn.setAttribute("aria-expanded", open ? "true" : "false");
+        if (open) body.removeAttribute("hidden");
+        else body.setAttribute("hidden", "");
+      });
+    }
+    function wireCli(btnId, bodyId) {
+      var b = document.getElementById(btnId);
+      var p = document.getElementById(bodyId);
+      if (!b || !p) return;
+      b.addEventListener("click", function () {
+        var open = !p.classList.contains("open");
+        p.classList.toggle("open", open);
+        b.setAttribute("aria-expanded", open ? "true" : "false");
+        if (open) p.removeAttribute("hidden");
+        else p.setAttribute("hidden", "");
+      });
+    }
+    wireCli("pkg-fold-toggle", "pkg-fold-body");
+  })();
+  </script>
+
 </body>
 </html>