From 9b32d40874186b05a7c03c1c43b4e2430f3d9dfb Mon Sep 17 00:00:00 2001
From: martbost <martybostick@gmail.com>
Date: Wed, 9 Sep 2026 08:32:52 -0500
Subject: [PATCH] Wall page: platform icons on the social pills

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 public/admin.html      |  2 +-
 public/assets/site.css |  5 +++--
 public/assets/wall.js  | 14 +++++++++++++-
 public/contract.html   |  2 +-
 public/disclaimer.html |  2 +-
 public/index.html      |  2 +-
 public/join.html       |  2 +-
 public/ledger.html     |  2 +-
 public/my.html         |  2 +-
 public/privacy.html    |  2 +-
 public/shorts.html     |  2 +-
 public/terms.html      |  2 +-
 public/tx.html         |  2 +-
 public/view.html       |  2 +-
 public/wall.html       |  4 ++--
 15 files changed, 30 insertions(+), 17 deletions(-)

diff --git a/public/admin.html b/public/admin.html
index e17b4ca..4b41194 100644
--- a/public/admin.html
+++ b/public/admin.html
@@ -6,7 +6,7 @@
 <title>Admin | InstantAdPay</title>
 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&display=swap">
 <link rel="icon" type="image/png" href="/logo-icon.png">
-<link rel="stylesheet" href="/assets/site.css?v=20260908f">
+<link rel="stylesheet" href="/assets/site.css?v=20260909c">
 <style>
   .adm-table th,.adm-table td{padding:8px 10px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);font-size:13.5px}
   .adm-table th{color:var(--muted);font-size:11.5px;text-transform:uppercase;letter-spacing:.08em}
diff --git a/public/assets/site.css b/public/assets/site.css
index ba06ff8..5265e26 100644
--- a/public/assets/site.css
+++ b/public/assets/site.css
@@ -384,8 +384,9 @@ textarea{resize:vertical;font:inherit}
 .btn.disabled{opacity:.45;pointer-events:none;filter:grayscale(.3)}
 .bio-meta{flex:1;min-width:220px}
 .bio-socials{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
-.bio-socials a{font-size:12px;font-weight:700;color:var(--mint);border:1px solid var(--line-strong);
-  border-radius:999px;padding:4px 12px;text-decoration:none}
+.bio-socials a{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--mint);border:1px solid var(--line-strong);
+  border-radius:999px;padding:4px 12px 4px 9px;text-decoration:none}
+.bio-socials a svg{flex:0 0 auto}
 .bio-socials a:hover{border-color:var(--mint)}
 .bio-qr{flex:0 0 auto;background:var(--panel);border:1px solid var(--line-strong);border-radius:14px;padding:10px}
 .bio-qr img{display:block;border-radius:8px;background:#eef7f3}
diff --git a/public/assets/wall.js b/public/assets/wall.js
index 442346c..44c1c16 100644
--- a/public/assets/wall.js
+++ b/public/assets/wall.js
@@ -21,10 +21,22 @@
   if (w.qrUrl) IAP.$('bioQr').src = w.qrUrl;
   // social links
   const SOC = { facebook: 'Facebook', twitter: 'X', youtube: 'YouTube', instagram: 'Instagram', tiktok: 'TikTok', telegram: 'Telegram', linkedin: 'LinkedIn', website: 'Website' };
+  // small line icons, one per platform (currentColor so they follow the pill color)
+  const svg = inner => '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">' + inner + '</svg>';
+  const ICON = {
+    facebook: svg('<path d="M14 8h3V4h-3a4 4 0 0 0-4 4v2H7v4h3v7h4v-7h3l1-4h-4V8.5c0-.3.2-.5.5-.5z" fill="currentColor" stroke="none"/>'),
+    twitter: svg('<path d="M4 4l16 16M20 4L4 20"/>'),
+    youtube: svg('<rect x="2.5" y="6" width="19" height="12" rx="4"/><path d="M10 9.5v5l4.5-2.5z" fill="currentColor" stroke="none"/>'),
+    instagram: svg('<rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.3" cy="6.7" r="1" fill="currentColor" stroke="none"/>'),
+    tiktok: svg('<path d="M14 4c.3 2.3 1.9 3.8 4.3 4v3.1c-1.6 0-3.1-.5-4.3-1.4v5.8a5 5 0 1 1-5-5v3.2a1.9 1.9 0 1 0 1.9 1.9V4z" fill="currentColor" stroke="none"/>'),
+    telegram: svg('<path d="M21 4L3 11.5l5.5 2L11 20l3-4.5L19 19z" fill="currentColor" stroke="none"/>'),
+    linkedin: svg('<circle cx="6" cy="5.5" r="1.6" fill="currentColor" stroke="none"/><path d="M4.5 9.5h3V20h-3z" fill="currentColor" stroke="none"/><path d="M11 9.5h3v1.6c.7-1.1 1.9-1.9 3.5-1.9 2.8 0 3.5 1.9 3.5 4.5V20h-3v-5.6c0-1.3-.3-2.3-1.6-2.3s-2.4 1-2.4 2.4V20h-3z" fill="currentColor" stroke="none"/>'),
+    website: svg('<circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3c3 3.5 3 14.5 0 18M12 3c-3 3.5-3 14.5 0 18"/>')
+  };
   const sc = IAP.$('bioSocials');
   if (sc && w.socials && typeof w.socials === 'object') {
     const links = Object.keys(SOC).filter(k => w.socials[k]).map(k =>
-      '<a href="' + String(w.socials[k]).replace(/"/g, '%22') + '" target="_blank" rel="noopener nofollow me">' + SOC[k] + '</a>');
+      '<a href="' + String(w.socials[k]).replace(/"/g, '%22') + '" target="_blank" rel="noopener nofollow me">' + (ICON[k] || '') + '<span>' + SOC[k] + '</span></a>');
     sc.innerHTML = links.join('');
   }
   IAP.$('wallCtaHead').textContent = 'Join ' + w.name + '’s line';
diff --git a/public/contract.html b/public/contract.html
index 4e10436..782ddb9 100644
--- a/public/contract.html
+++ b/public/contract.html
@@ -17,7 +17,7 @@
 <meta name="theme-color" content="#043b2f">
 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&display=swap">
 <link rel="icon" type="image/png" href="/logo-icon.png">
-<link rel="stylesheet" href="/assets/site.css?v=20260908a">
+<link rel="stylesheet" href="/assets/site.css?v=20260909c">
 </head>
 <body>
 <div class="wrap">
diff --git a/public/disclaimer.html b/public/disclaimer.html
index 41abdb2..9b763ab 100644
--- a/public/disclaimer.html
+++ b/public/disclaimer.html
@@ -5,7 +5,7 @@
 <title>Disclaimer | InstantAdPay</title>
 <link rel="icon" type="image/png" href="/logo-icon.png">
 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&display=swap">
-<link rel="stylesheet" href="/assets/site.css?v=20260908a">
+<link rel="stylesheet" href="/assets/site.css?v=20260909c">
 </head>
 <body>
 <div id="nav"></div>
diff --git a/public/index.html b/public/index.html
index 202583e..2aba2fc 100644
--- a/public/index.html
+++ b/public/index.html
@@ -20,7 +20,7 @@
 <meta name="theme-color" content="#043b2f">
 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&display=swap">
 <link rel="icon" type="image/png" href="/logo-icon.png">
-<link rel="stylesheet" href="/assets/site.css?v=20260908a">
+<link rel="stylesheet" href="/assets/site.css?v=20260909c">
 </head>
 <body>
 
diff --git a/public/join.html b/public/join.html
index 10aecdb..a9e5cdc 100644
--- a/public/join.html
+++ b/public/join.html
@@ -6,7 +6,7 @@
 <title>You're invited | InstantAdPay</title>
 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&display=swap">
 <link rel="icon" type="image/png" href="/logo-icon.png">
-<link rel="stylesheet" href="/assets/site.css?v=20260909a">
+<link rel="stylesheet" href="/assets/site.css?v=20260909c">
 <style>
   .jn-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 0}
   .jn-hero{padding:34px 0 10px;text-align:left}
diff --git a/public/ledger.html b/public/ledger.html
index 75c357d..650f5e4 100644
--- a/public/ledger.html
+++ b/public/ledger.html
@@ -17,7 +17,7 @@
 <meta name="theme-color" content="#043b2f">
 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&display=swap">
 <link rel="icon" type="image/png" href="/logo-icon.png">
-<link rel="stylesheet" href="/assets/site.css?v=20260908a">
+<link rel="stylesheet" href="/assets/site.css?v=20260909c">
 </head>
 <body>
 <div class="wrap">
diff --git a/public/my.html b/public/my.html
index d93c4fc..4735e34 100644
--- a/public/my.html
+++ b/public/my.html
@@ -5,7 +5,7 @@
 <title>Member area | InstantAdPay</title>
 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&display=swap">
 <link rel="icon" type="image/png" href="/logo-icon.png">
-<link rel="stylesheet" href="/assets/site.css?v=20260909b">
+<link rel="stylesheet" href="/assets/site.css?v=20260909c">
 </head>
 <body class="bo-body">
 
diff --git a/public/privacy.html b/public/privacy.html
index 37ca060..5fe8fc2 100644
--- a/public/privacy.html
+++ b/public/privacy.html
@@ -5,7 +5,7 @@
 <title>Privacy Policy | InstantAdPay</title>
 <link rel="icon" type="image/png" href="/logo-icon.png">
 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&display=swap">
-<link rel="stylesheet" href="/assets/site.css?v=20260908a">
+<link rel="stylesheet" href="/assets/site.css?v=20260909c">
 </head>
 <body>
 <div id="nav"></div>
diff --git a/public/shorts.html b/public/shorts.html
index 1e11168..29d8d38 100644
--- a/public/shorts.html
+++ b/public/shorts.html
@@ -5,7 +5,7 @@
 <title>Shorts | InstantAdPay</title>
 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&display=swap">
 <link rel="icon" type="image/png" href="/logo-icon.png">
-<link rel="stylesheet" href="/assets/site.css?v=20260908a">
+<link rel="stylesheet" href="/assets/site.css?v=20260909c">
 <style>
   html,body{height:100%;margin:0;overflow:hidden;background:#000}
   .sh{position:fixed;inset:0;display:flex;flex-direction:column;background:#000;color:var(--ink,#e8fff7)}
diff --git a/public/terms.html b/public/terms.html
index 74d96ff..f36da27 100644
--- a/public/terms.html
+++ b/public/terms.html
@@ -5,7 +5,7 @@
 <title>Terms of Service | InstantAdPay</title>
 <link rel="icon" type="image/png" href="/logo-icon.png">
 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&display=swap">
-<link rel="stylesheet" href="/assets/site.css?v=20260908a">
+<link rel="stylesheet" href="/assets/site.css?v=20260909c">
 </head>
 <body>
 <div id="nav"></div>
diff --git a/public/tx.html b/public/tx.html
index c48c659..a399e0d 100644
--- a/public/tx.html
+++ b/public/tx.html
@@ -5,7 +5,7 @@
 <title>Transaction | InstantAdPay</title>
 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&display=swap">
 <link rel="icon" type="image/png" href="/logo-icon.png">
-<link rel="stylesheet" href="/assets/site.css?v=20260908a">
+<link rel="stylesheet" href="/assets/site.css?v=20260909c">
 </head>
 <body>
 <div id="nav"></div>
diff --git a/public/view.html b/public/view.html
index 63bc052..0f86436 100644
--- a/public/view.html
+++ b/public/view.html
@@ -5,7 +5,7 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <title>Viewing ad — InstantAdPay</title>
 <link rel="icon" type="image/png" href="/logo-icon.png">
-<link rel="stylesheet" href="/assets/site.css?v=20260908a">
+<link rel="stylesheet" href="/assets/site.css?v=20260909c">
 <style>
   html,body{height:100%;margin:0;overflow:hidden}
   .vw{display:flex;flex-direction:column;height:100vh;height:100dvh;background:var(--bg,#04110c);color:var(--ink,#e8fff7)}
diff --git a/public/wall.html b/public/wall.html
index ee05077..6939210 100644
--- a/public/wall.html
+++ b/public/wall.html
@@ -6,7 +6,7 @@
 <!--OG-->
 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&display=swap">
 <link rel="icon" type="image/png" href="/logo-icon.png">
-<link rel="stylesheet" href="/assets/site.css?v=20260908a">
+<link rel="stylesheet" href="/assets/site.css?v=20260909c">
 </head>
 <body>
 <div id="nav"></div>
@@ -40,6 +40,6 @@
   </div>
 </section>
 <script src="/assets/common.js?v=20260909a"></script>
-<script src="/assets/wall.js?v=20260908d"></script>
+<script src="/assets/wall.js?v=20260909a"></script>
 </body>
 </html>