Promo tools: hook video cards (matched links, downloads, captions, share buttons)

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

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}

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 };
 })();

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}

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">

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>

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>
 

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}

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">

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,
+            page continuing the same hook. Post the video with the matched link, or download it and use it anywhere.
-            your matched links, and paste-ready captions.</p>
+            Every caption below already carries your link.</p>
+          <div id="promoVideos"></div>
         </div>
         <div class="card ad-foot" id="adSlotPane-promo" hidden></div>
       </div>

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}

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>

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)}

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>

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>

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)}

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>