From f6490c9444d025de49166f7fd009d19d352083b4 Mon Sep 17 00:00:00 2001
From: martbost <martybostick@gmail.com>
Date: Thu, 10 Sep 2026 08:55:29 -0500
Subject: [PATCH] Promo tools: hook video cards (matched links, downloads,
 captions, share buttons)

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 public/admin.html      |  2 +-
 public/assets/promo.js | 37 ++++++++++++++++++++++++++++++++++++-
 public/assets/site.css |  2 ++
 public/contract.html   |  2 +-
 public/disclaimer.html |  2 +-
 public/index.html      |  2 +-
 public/join.html       |  2 +-
 public/ledger.html     |  2 +-
 public/my.html         |  7 ++++---
 public/plays.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       |  2 +-
 16 files changed, 55 insertions(+), 17 deletions(-)

diff --git a/public/admin.html b/public/admin.html
index 3223f5f..e97dd9a 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=20260910g">
+<link rel="stylesheet" href="/assets/site.css?v=20260910h">
 <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/promo.js b/public/assets/promo.js
index fa143a2..a4aa4d9 100644
--- a/public/assets/promo.js
+++ b/public/assets/promo.js
@@ -81,6 +81,15 @@ window.IAPPromo = (function () {
     return a;
   }
 
+  // hook videos: one per angle; the matched link continues the same hook on the join page
+  const VID_BASE = 'https://coolify-saasytop.nyc3.digitaloceanspaces.com/promo/';
+  const VIDEOS = [
+    { angle: 'instant', title: 'Paid before the page reloads', hook: 'What if your commission landed before the thank-you page finished loading?', caption: 'What if your commission landed before the thank-you page finished loading? On InstantAdPay a smart contract splits every ad package the second it sells, straight to wallets, on a public ledger. Free to join by email: {{LINK:instant}}' },
+    { angle: 'adspend', title: 'You were buying traffic anyway', hook: 'Every ad dollar you have ever spent went one direction. Out.', caption: 'Every ad dollar you have ever spent went one direction. Out. Here the ad spend in your line pays you back in the same transaction. Seven formats, packages from $5, free to join: {{LINK:adspend}}' },
+    { angle: 'free', title: 'Watch first, spend never', hook: 'You can run your first ad campaign here for exactly zero dollars.', caption: 'Run your first ad campaign for exactly zero dollars. Join free by email, earn credits by viewing ads, launch a real campaign, and watch real payouts land on a public ledger before you spend a cent: {{LINK:free}}' },
+    { angle: 'ledger', title: 'No back office. No payday.', hook: 'Your last affiliate program paid you on the fifteenth. If it paid you.', caption: 'Your last affiliate program paid you on the fifteenth. If it paid you. Here the payroll is the blockchain: every payout is a public transaction, nothing is held, nobody can change the split. Open the ledger, then join free: {{LINK:ledger}}' },
+    { angle: 'two', title: 'Two buyers open level two', hook: 'Two buyers. Then five. That is the whole ladder.', caption: 'Two buyers. Then five. That is the whole ladder. Level 1 pays from your first buyer, two qualifying buyers open level 2, five open level 3, all in the same transaction, straight to your wallet. Free to join: {{LINK:two}}' }
+  ];
   function fill(link, me) {
     const token = (me && (me.username || me.refCode || me.memberId)) || '';
     // invite strip
@@ -128,6 +137,32 @@ window.IAPPromo = (function () {
         sw.appendChild(block(text, '<span class="pb-net">' + esc(s.tier) + '</span> <b>' + esc(s.subject) + '</b>'));
       }
     }
+    // hook videos
+    const vw = $('promoVideos');
+    if (vw && vw.dataset.filled !== link) {
+      vw.dataset.filled = link; vw.innerHTML = '';
+      for (const v of VIDEOS) {
+        const mlink = angleLink(link, v.angle);
+        const card = document.createElement('div'); card.className = 'pv';
+        card.innerHTML = '<div class="pv-head"><span class="pb-net">' + esc(v.angle) + ' angle</span> <b>' + esc(v.title) + '</b><div class="muted small">' + esc(v.hook) + '</div></div>'
+          + '<video src="' + VID_BASE + v.angle + '.mp4" poster="' + VID_BASE + v.angle + '.jpg" preload="none" controls playsinline style="width:100%;max-width:640px;border-radius:12px;background:#000;margin:10px 0"></video>'
+          + '<p class="small"><span class="muted">Matched link:</span> <span class="mono" style="overflow-wrap:anywhere">' + esc(mlink) + '</span></p>';
+        const row = document.createElement('p'); row.className = 'pb-actions';
+        row.appendChild(copyBtn(mlink, 'Copy matched link'));
+        row.appendChild(linkBtn(VID_BASE + v.angle + '.mp4', 'Download 16:9'));
+        row.appendChild(linkBtn(VID_BASE + v.angle + '-portrait.mp4', 'Download 9:16'));
+        card.appendChild(row);
+        const cap = fillLink(v.caption, link);
+        const extras = [
+          linkBtn('https://twitter.com/intent/tweet?text=' + encodeURIComponent(cap), 'Post on X'),
+          linkBtn('https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(mlink), 'Share on Facebook'),
+          linkBtn('https://t.me/share/url?url=' + encodeURIComponent(mlink) + '&text=' + encodeURIComponent(cap.replace(/https?:\/\/\S+$/, '').trim()), 'Telegram'),
+          linkBtn('https://wa.me/?text=' + encodeURIComponent(cap), 'WhatsApp')
+        ];
+        card.appendChild(block(cap, '<span class="lab">Caption</span>', extras));
+        vw.appendChild(card);
+      }
+    }
     // objections
     const ob = $('promoObjections');
     if (ob && ob.dataset.filled !== link) {
@@ -146,5 +181,5 @@ window.IAPPromo = (function () {
     }
   }
 
-  return { fill, POSTS, TEXTS, SWIPES, OBJECTIONS };
+  return { fill, POSTS, TEXTS, SWIPES, OBJECTIONS, VIDEOS };
 })();
diff --git a/public/assets/site.css b/public/assets/site.css
index 3fed036..ce01930 100644
--- a/public/assets/site.css
+++ b/public/assets/site.css
@@ -218,6 +218,8 @@ tr:last-child td{border-bottom:0}
 .ad-strip a{color:var(--ink)}
 .ad-strip b{color:var(--mint)}
 .ad-foot{text-align:center}
+.pv{border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin:0 0 16px;background:rgba(4,8,7,.35)}
+.pv-head b{display:block;font-size:18px;margin:4px 0 2px}
 .done-big{display:flex;flex-direction:column;align-items:center;gap:6px;padding:26px 16px;text-align:center}
 .done-big .tick{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;font-size:48px;font-weight:800;color:var(--mint-ink);background:var(--mint);box-shadow:0 0 0 10px rgba(67,232,195,.15),0 10px 30px rgba(67,232,195,.35)}
 .done-big b{font-family:var(--disp);font-size:22px;margin-top:8px}
diff --git a/public/contract.html b/public/contract.html
index b277bc9..d24a718 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=20260910g">
+<link rel="stylesheet" href="/assets/site.css?v=20260910h">
 </head>
 <body>
 <div class="wrap">
diff --git a/public/disclaimer.html b/public/disclaimer.html
index be9c4fd..e88fb20 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=20260910g">
+<link rel="stylesheet" href="/assets/site.css?v=20260910h">
 </head>
 <body>
 <div id="nav"></div>
diff --git a/public/index.html b/public/index.html
index 5a15332..4695fd1 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=20260910g">
+<link rel="stylesheet" href="/assets/site.css?v=20260910h">
 </head>
 <body>
 
diff --git a/public/join.html b/public/join.html
index 37a29f7..5cd2190 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=20260910g">
+<link rel="stylesheet" href="/assets/site.css?v=20260910h">
 <style>
   .jn-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 0}
   .jn-hero{padding:14px 0 4px;text-align:left}
diff --git a/public/ledger.html b/public/ledger.html
index 1b77211..1a439af 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=20260910g">
+<link rel="stylesheet" href="/assets/site.css?v=20260910h">
 </head>
 <body>
 <div class="wrap">
diff --git a/public/my.html b/public/my.html
index 36eee15..7b9fe07 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=20260910g">
+<link rel="stylesheet" href="/assets/site.css?v=20260910h">
 </head>
 <body class="bo-body">
 
@@ -684,8 +684,9 @@
         <div class="card promo-sec" id="promo-videos" hidden>
           <h3>Hook videos</h3>
           <p class="muted small">Short videos, one per angle, each with a matched invite link that lands on a
-            page continuing the same hook. In production now. When they arrive, this tab holds the previews,
-            your matched links, and paste-ready captions.</p>
+            page continuing the same hook. Post the video with the matched link, or download it and use it anywhere.
+            Every caption below already carries your link.</p>
+          <div id="promoVideos"></div>
         </div>
         <div class="card ad-foot" id="adSlotPane-promo" hidden></div>
       </div>
diff --git a/public/plays.html b/public/plays.html
index 8404ac8..21338fc 100644
--- a/public/plays.html
+++ b/public/plays.html
@@ -8,7 +8,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=20260910g">
+<link rel="stylesheet" href="/assets/site.css?v=20260910h">
 <style>
   .pl-rule{border-left:4px solid #f2c94c;background:rgba(242,201,76,.08);padding:16px 20px;border-radius:0 12px 12px 0;margin:0 0 28px}
   .pl-rule b{font-family:var(--disp);font-size:17px;display:block;margin-bottom:6px}
diff --git a/public/privacy.html b/public/privacy.html
index 4172f91..50d658f 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=20260910g">
+<link rel="stylesheet" href="/assets/site.css?v=20260910h">
 </head>
 <body>
 <div id="nav"></div>
diff --git a/public/shorts.html b/public/shorts.html
index 00cb2c8..d3a76f4 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=20260910g">
+<link rel="stylesheet" href="/assets/site.css?v=20260910h">
 <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 81cd686..364ce12 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=20260910g">
+<link rel="stylesheet" href="/assets/site.css?v=20260910h">
 </head>
 <body>
 <div id="nav"></div>
diff --git a/public/tx.html b/public/tx.html
index 2c5e8b9..95315fd 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=20260910g">
+<link rel="stylesheet" href="/assets/site.css?v=20260910h">
 </head>
 <body>
 <div id="nav"></div>
diff --git a/public/view.html b/public/view.html
index 72c705e..17a78e2 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=20260910g">
+<link rel="stylesheet" href="/assets/site.css?v=20260910h">
 <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 31656f9..b531c25 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=20260910g">
+<link rel="stylesheet" href="/assets/site.css?v=20260910h">
 </head>
 <body>
 <div id="nav"></div>