Badge emblems, profile social links, and SEO/OG social previews

- Achievement badge share-image now draws a milestone emblem (⚡🎯⭐🏆) in the medal
- Profile: Facebook/X/YouTube/Instagram/TikTok/Telegram/LinkedIn/Website links, shown on the public bio page
- OG + Twitter Card tags on homepage/ledger/contract (hero banner as share image)
- Per-member OG tags server-injected into /wall/<username> so shared bio links preview with name/bio/avatar
- robots.txt + sitemap.xml; .txt/.xml MIME types

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

public/assets/my.js

@@ -42,10 +42,10 @@
 
   // achievement badges: the milestone ladder as unlockable medals + share-to-image
   const BADGES = [
-    { key: 'payouts', label: 'Payouts On', sub: 'wallet linked', icon: '<circle cx="12" cy="12" r="8"/><path d="M9 12l2 2 4-4"/>' },
-    { key: 'firstBuyer', label: 'First Buyer', sub: 'first qualified referral', icon: '<path d="M6 7h12l-1 13H7z"/><path d="M9 7a3 3 0 0 1 6 0"/>' },
-    { key: 'level2', label: 'Level 2', sub: '2 qualifying buyers', icon: '<path d="M12 3l2.5 5 5.5.8-4 3.9.9 5.5L12 21l-4.9 2.6.9-5.5-4-3.9 5.5-.8z"/>' },
-    { key: 'level3', label: 'Level 3', sub: 'fully qualified', icon: '<path d="M5 4h14v5a7 7 0 0 1-14 0z"/><path d="M9 20h6M12 16v4"/><path d="M5 6H3v2a3 3 0 0 0 3 3M19 6h2v2a3 3 0 0 1-3 3"/>' }
+    { key: 'payouts', label: 'Payouts On', sub: 'wallet linked', emblem: '⚡', icon: '<circle cx="12" cy="12" r="8"/><path d="M9 12l2 2 4-4"/>' },
+    { key: 'firstBuyer', label: 'First Buyer', sub: 'first qualified referral', emblem: '🎯', icon: '<path d="M6 7h12l-1 13H7z"/><path d="M9 7a3 3 0 0 1 6 0"/>' },
+    { key: 'level2', label: 'Level 2', sub: '2 qualifying buyers', emblem: '⭐', icon: '<path d="M12 3l2.5 5 5.5.8-4 3.9.9 5.5L12 21l-4.9 2.6.9-5.5-4-3.9 5.5-.8z"/>' },
+    { key: 'level3', label: 'Level 3', sub: 'fully qualified', emblem: '🏆', icon: '<path d="M5 4h14v5a7 7 0 0 1-14 0z"/><path d="M9 20h6M12 16v4"/><path d="M5 6H3v2a3 3 0 0 0 3 3M19 6h2v2a3 3 0 0 1-3 3"/>' }
   ];
   let lastMilestones = [];
   function renderBadges(d) {
@@ -81,16 +81,19 @@
     x.strokeStyle = 'rgba(67,232,195,.5)'; x.lineWidth = 6; x.strokeRect(24, 24, 1152, 582);
     x.fillStyle = '#43e8c3'; x.font = 'bold 34px Sora, sans-serif'; x.fillText('InstantAdPay', 70, 100);
     x.fillStyle = '#8ba69c'; x.font = '22px Sora, sans-serif'; x.fillText('ACHIEVEMENT UNLOCKED', 70, 150);
-    // medal circle
-    x.beginPath(); x.arc(600, 320, 110, 0, Math.PI * 2);
-    const mg = x.createRadialGradient(600, 290, 20, 600, 320, 110);
-    mg.addColorStop(0, 'rgba(67,232,195,.45)'); mg.addColorStop(1, 'rgba(9,26,19,.9)');
-    x.fillStyle = mg; x.fill(); x.strokeStyle = '#43e8c3'; x.lineWidth = 5; x.stroke();
+    // medal with the milestone emblem
+    x.beginPath(); x.arc(600, 300, 112, 0, Math.PI * 2);
+    const mg = x.createRadialGradient(600, 270, 20, 600, 300, 112);
+    mg.addColorStop(0, 'rgba(67,232,195,.5)'); mg.addColorStop(1, 'rgba(9,26,19,.92)');
+    x.fillStyle = mg; x.fill(); x.strokeStyle = '#43e8c3'; x.lineWidth = 6; x.stroke();
+    x.save(); x.shadowColor = 'rgba(67,232,195,.6)'; x.shadowBlur = 24;
+    x.font = '90px "Segoe UI Emoji","Noto Color Emoji",sans-serif'; x.textAlign = 'center'; x.textBaseline = 'middle';
+    x.fillText(b.emblem || '', 600, 300); x.restore(); x.textBaseline = 'alphabetic';
     x.fillStyle = '#eef7f3'; x.textAlign = 'center';
-    x.font = 'bold 64px Sora, sans-serif'; x.fillText(b.label, 600, 500);
-    x.font = '26px Sora, sans-serif'; x.fillStyle = '#8ba69c'; x.fillText(b.sub, 600, 545);
+    x.font = 'bold 60px Sora, sans-serif'; x.fillText(b.label, 600, 485);
+    x.font = '25px Sora, sans-serif'; x.fillStyle = '#8ba69c'; x.fillText(b.sub, 600, 527);
     const who = d.username ? '@' + d.username : d.memberId ? 'member #' + d.memberId : '';
-    if (who) { x.fillStyle = '#43e8c3'; x.font = 'bold 30px Sora, sans-serif'; x.fillText(who, 600, 590); }
+    if (who) { x.fillStyle = '#43e8c3'; x.font = 'bold 30px Sora, sans-serif'; x.fillText(who, 600, 575); }
     x.textAlign = 'left';
     try {
       c.toBlob(bl => {
@@ -1228,10 +1231,13 @@
       fillProfileDetails(a);
     } catch (e) {}
   }
+  const SOCIALS = ['facebook', 'twitter', 'youtube', 'instagram', 'tiktok', 'telegram', 'linkedin', 'website'];
   function fillProfileDetails(a) {
     if (!a) return;
     if (a.bio) $('pfBio').value = a.bio;
     if (a.avatarUrl) { const p = $('pfAvatarPrev'); p.src = a.avatarUrl; p.hidden = false; }
+    let soc = {}; try { soc = a.socials ? JSON.parse(a.socials) : {}; } catch (e) {}
+    for (const p of SOCIALS) if ($('soc-' + p)) $('soc-' + p).value = soc[p] || '';
     if (a.username) {
       const link = location.origin + '/wall/' + a.username;
       $('pfBioLink').textContent = link;
@@ -1255,7 +1261,8 @@
     $('pfAvatarFile').value = '';
   });
   $('pfDetailsSave').addEventListener('click', busy2($('pfDetailsSave'), async () => {
-    const body = { bio: $('pfBio').value };
+    const body = { bio: $('pfBio').value, socials: {} };
+    for (const p of SOCIALS) body.socials[p] = ($('soc-' + p) && $('soc-' + p).value.trim()) || '';
     if (pfAvatar) body.avatarUrl = pfAvatar;
     const r = await api('/api/my/profile-details', body);
     IAP.status('Profile saved.', 'ok');

public/assets/site.css

@@ -373,6 +373,10 @@ textarea{resize:vertical;font:inherit}
 .bio-head{display:flex;gap:22px;align-items:center;flex-wrap:wrap;padding:8px 0 4px}
 .bio-avatar{width:96px;height:96px;border-radius:50%;object-fit:cover;border:2px solid var(--mint);flex:0 0 auto}
 .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: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}
 /* ── wall page ── */

public/assets/wall.js

@@ -18,6 +18,14 @@
   if (w.avatarUrl) { const av = IAP.$('bioAvatar'); av.src = w.avatarUrl; av.hidden = false; }
   IAP.$('bioText').textContent = w.bio || 'Building a team on InstantAdPay — join through this page and you\'re in my line.';
   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' };
+  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>');
+    sc.innerHTML = links.join('');
+  }
   IAP.$('wallCtaHead').textContent = 'Join ' + w.name + '’s line';
   IAP.$('wallJoin').href = w.joinUrl;
   // per-wall viewed-position memory (survives revisits; anonymous-friendly)

public/contract.html

@@ -4,8 +4,19 @@
 <meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
 <title>The contract | InstantAdPay</title>
 <meta name="description" content="Plain-language review of the InstantAdPay settlement contract: what it does, what nobody can change, what the operator can and cannot touch, and how to verify all of it yourself.">
+<link rel="canonical" href="https://instantadpay.com/contract">
+<meta property="og:type" content="website"><meta property="og:site_name" content="InstantAdPay">
+<meta property="og:url" content="https://instantadpay.com/contract">
+<meta property="og:title" content="InstantAdPay — the contract, in plain language">
+<meta property="og:description" content="What the settlement contract does, what nobody can change, and how to verify all of it yourself.">
+<meta property="og:image" content="https://instantadpay.com/banners/iap-hero-1200x630.png">
+<meta name="twitter:card" content="summary_large_image">
+<meta name="twitter:title" content="InstantAdPay — the contract, in plain language">
+<meta name="twitter:description" content="Immutable 50-20-10 splits, no withdrawal button, verify it yourself.">
+<meta name="twitter:image" content="https://instantadpay.com/banners/iap-hero-1200x630.png">
+<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="stylesheet" href="/assets/site.css?v=20260906k">
+<link rel="stylesheet" href="/assets/site.css?v=20260906l">
 </head>
 <body>
 <div class="wrap">
@@ -129,8 +140,8 @@
     <div class="small">Advertising services with a performance referral program. Not an investment product; no income guarantees. Crypto transactions are irreversible. Never spend what you cannot afford.</div>
   </footer>
 </div>
-<script src="/assets/common.js?v=20260906k"></script>
-<script src="/assets/contract.js?v=20260906k"></script>
-<script src="/assets/chat.js?v=20260906k"></script>
+<script src="/assets/common.js?v=20260906l"></script>
+<script src="/assets/contract.js?v=20260906l"></script>
+<script src="/assets/chat.js?v=20260906l"></script>
 </body>
 </html>

public/index.html

@@ -3,9 +3,23 @@
 <head>
 <meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
 <title>InstantAdPay: advertise and earn, locked in code</title>
-<meta name="description" content="Real ad packages with instant on-chain settlement. Every purchase pays the sponsor line in the same transaction, verifiable by anyone on the live ledger.">
+<meta name="description" content="Advertise and earn instantly. Real ad packages with instant on-chain settlement — every purchase pays the sponsor line in the same Polygon transaction, verifiable by anyone on the live ledger. Seven ad formats, earn credits back for your attention.">
+<link rel="canonical" href="https://instantadpay.com/">
+<meta property="og:type" content="website">
+<meta property="og:site_name" content="InstantAdPay">
+<meta property="og:url" content="https://instantadpay.com/">
+<meta property="og:title" content="InstantAdPay — Advertise and Earn Instantly">
+<meta property="og:description" content="Real ad packages with instant on-chain settlement. Every purchase pays the sponsor line in the same transaction — verifiable on the live ledger. Seven ad formats, earn credits back for your attention.">
+<meta property="og:image" content="https://instantadpay.com/banners/iap-hero-1200x630.png">
+<meta property="og:image:width" content="1200">
+<meta property="og:image:height" content="630">
+<meta name="twitter:card" content="summary_large_image">
+<meta name="twitter:title" content="InstantAdPay — Advertise and Earn Instantly">
+<meta name="twitter:description" content="Instant on-chain ad payouts, verifiable on a public ledger. Seven ad formats. Earn credits back for your attention.">
+<meta name="twitter:image" content="https://instantadpay.com/banners/iap-hero-1200x630.png">
+<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="stylesheet" href="/assets/site.css?v=20260906k">
+<link rel="stylesheet" href="/assets/site.css?v=20260906l">
 </head>
 <body>
 
@@ -423,9 +437,9 @@
   </div>
 </section>
 
-<script src="/assets/common.js?v=20260906k"></script>
-<script src="/assets/wallet.js?v=20260906k"></script>
-<script src="/assets/home.js?v=20260906k"></script>
-<script src="/assets/chat.js?v=20260906k"></script>
+<script src="/assets/common.js?v=20260906l"></script>
+<script src="/assets/wallet.js?v=20260906l"></script>
+<script src="/assets/home.js?v=20260906l"></script>
+<script src="/assets/chat.js?v=20260906l"></script>
 </body>
 </html>

public/ledger.html

@@ -4,8 +4,19 @@
 <meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
 <title>Live ledger | InstantAdPay</title>
 <meta name="description" content="Every purchase, payout, and pass-up on InstantAdPay, streamed straight from the blockchain with a verify link on every line.">
+<link rel="canonical" href="https://instantadpay.com/ledger">
+<meta property="og:type" content="website"><meta property="og:site_name" content="InstantAdPay">
+<meta property="og:url" content="https://instantadpay.com/ledger">
+<meta property="og:title" content="InstantAdPay — the live payout ledger">
+<meta property="og:description" content="Watch real ad purchases split into instant on-chain payouts, live. Every line links to the raw transaction.">
+<meta property="og:image" content="https://instantadpay.com/banners/iap-hero-1200x630.png">
+<meta name="twitter:card" content="summary_large_image">
+<meta name="twitter:title" content="InstantAdPay — the live payout ledger">
+<meta name="twitter:description" content="Real ad purchases splitting into instant on-chain payouts, live and verifiable.">
+<meta name="twitter:image" content="https://instantadpay.com/banners/iap-hero-1200x630.png">
+<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="stylesheet" href="/assets/site.css?v=20260906k">
+<link rel="stylesheet" href="/assets/site.css?v=20260906l">
 </head>
 <body>
 <div class="wrap">
@@ -25,8 +36,8 @@
     <div>InstantAdPay · <a href="/">how it works</a> · <a id="contractLink" href="#" target="_blank" rel="noopener">contract source ↗</a></div>
   </footer>
 </div>
-<script src="/assets/common.js?v=20260906k"></script>
-<script src="/assets/ledger.js?v=20260906k"></script>
-<script src="/assets/chat.js?v=20260906k"></script>
+<script src="/assets/common.js?v=20260906l"></script>
+<script src="/assets/ledger.js?v=20260906l"></script>
+<script src="/assets/chat.js?v=20260906l"></script>
 </body>
 </html>

public/my.html

@@ -4,7 +4,7 @@
 <meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
 <title>Member area | InstantAdPay</title>
 <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=20260906k">
+<link rel="stylesheet" href="/assets/site.css?v=20260906l">
 </head>
 <body class="bo-body">
 
@@ -534,7 +534,18 @@
              <button class="btn small sec" id="pfAvatarBtn" type="button">Upload avatar</button>
              <span class="small muted" id="pfAvatarInfo"></span></p>
           <p><textarea id="pfBio" rows="3" maxlength="600" placeholder="A short bio for your profile page…" style="width:100%"></textarea></p>
-          <p><button class="btn" id="pfDetailsSave">Save profile</button>
+          <p class="small muted" style="margin-bottom:4px">Social links (https URLs — shown on your public page):</p>
+          <div class="grid c2" style="gap:8px">
+            <input id="soc-facebook" placeholder="Facebook URL" style="width:100%">
+            <input id="soc-twitter" placeholder="X / Twitter URL" style="width:100%">
+            <input id="soc-youtube" placeholder="YouTube URL" style="width:100%">
+            <input id="soc-instagram" placeholder="Instagram URL" style="width:100%">
+            <input id="soc-tiktok" placeholder="TikTok URL" style="width:100%">
+            <input id="soc-telegram" placeholder="Telegram URL" style="width:100%">
+            <input id="soc-linkedin" placeholder="LinkedIn URL" style="width:100%">
+            <input id="soc-website" placeholder="Website URL" style="width:100%">
+          </div>
+          <p style="margin-top:12px"><button class="btn" id="pfDetailsSave">Save profile</button>
              <a class="btn small sec" id="pfViewBio" target="_blank" rel="noopener" hidden>View my page</a></p>
         </div>
         <div class="card">
@@ -584,9 +595,9 @@
   </div>
 </div>
 
-<script src="/assets/common.js?v=20260906k"></script>
-<script src="/assets/wallet.js?v=20260906k"></script>
-<script src="/assets/my.js?v=20260906k"></script>
-<script src="/assets/chat.js?v=20260906k"></script>
+<script src="/assets/common.js?v=20260906l"></script>
+<script src="/assets/wallet.js?v=20260906l"></script>
+<script src="/assets/my.js?v=20260906l"></script>
+<script src="/assets/chat.js?v=20260906l"></script>
 </body>
 </html>

public/robots.txt

@@ -0,0 +1,5 @@
+User-agent: *
+Allow: /
+Disallow: /my
+Disallow: /api/
+Sitemap: https://instantadpay.com/sitemap.xml

public/shorts.html

@@ -4,7 +4,7 @@
 <meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
 <title>Shorts | InstantAdPay</title>
 <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=20260906k">
+<link rel="stylesheet" href="/assets/site.css?v=20260906l">
 <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)}
@@ -43,6 +43,6 @@
     </div>
   </div>
 </div>
-<script src="/assets/shorts.js?v=20260906k"></script>
+<script src="/assets/shorts.js?v=20260906l"></script>
 </body>
 </html>

public/sitemap.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+  <url><loc>https://instantadpay.com/</loc><changefreq>daily</changefreq><priority>1.0</priority></url>
+  <url><loc>https://instantadpay.com/ledger</loc><changefreq>always</changefreq><priority>0.8</priority></url>
+  <url><loc>https://instantadpay.com/contract</loc><changefreq>monthly</changefreq><priority>0.7</priority></url>
+</urlset>

public/tx.html

@@ -4,7 +4,7 @@
 <meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
 <title>Transaction | InstantAdPay</title>
 <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=20260906k">
+<link rel="stylesheet" href="/assets/site.css?v=20260906l">
 </head>
 <body>
 <div id="nav"></div>
@@ -33,7 +33,7 @@
     <p><a href="/ledger">← Back to the live ledger</a> · <a href="/contract">Read the contract review</a></p>
   </div>
 </section>
-<script src="/assets/common.js?v=20260906k"></script>
-<script src="/assets/tx.js?v=20260906k"></script>
+<script src="/assets/common.js?v=20260906l"></script>
+<script src="/assets/tx.js?v=20260906l"></script>
 </body>
 </html>

public/view.html

@@ -4,7 +4,7 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <title>Viewing ad — InstantAdPay</title>
-<link rel="stylesheet" href="/assets/site.css?v=20260906k">
+<link rel="stylesheet" href="/assets/site.css?v=20260906l">
 <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)}
@@ -43,6 +43,6 @@
   </div>
   <iframe class="vframe" id="vFrame" sandbox="allow-scripts allow-same-origin allow-forms allow-popups" referrerpolicy="no-referrer" title="Advertiser site"></iframe>
 </div>
-<script src="/assets/view.js?v=20260906k"></script>
+<script src="/assets/view.js?v=20260906l"></script>
 </body>
 </html>

public/wall.html

@@ -3,8 +3,9 @@
 <head>
 <meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
 <title>Banner wall | InstantAdPay</title>
+<!--OG-->
 <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=20260906k">
+<link rel="stylesheet" href="/assets/site.css?v=20260906l">
 </head>
 <body>
 <div id="nav"></div>
@@ -16,6 +17,7 @@
         <p class="eyebrow">Member profile</p>
         <h2 id="wallTitle" style="margin:.1em 0">Loading…</h2>
         <p id="bioText" class="lead" style="font-size:16px"></p>
+        <div id="bioSocials" class="bio-socials"></div>
       </div>
       <div class="bio-qr"><img id="bioQr" alt="Join QR code" width="150" height="150"><div class="small muted" style="text-align:center">scan to join</div></div>
     </div>
@@ -34,7 +36,7 @@
     </div>
   </div>
 </section>
-<script src="/assets/common.js?v=20260906k"></script>
-<script src="/assets/wall.js?v=20260906k"></script>
+<script src="/assets/common.js?v=20260906l"></script>
+<script src="/assets/wall.js?v=20260906l"></script>
 </body>
 </html>