InstantAdPay banner kit (kie.ai): hero + leaderboard + rectangle in Promo tools

- 3 brand banners generated via kie.ai (mint-on-dark Web3 aesthetic), served from /banners/
- Promo tools Banners card now shows the kit with copy-image-URL

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
martbost
2026-09-06 09:35:06 -05:00
parent 537e7352d4
commit 6423d57f60
13 changed files with 63 additions and 30 deletions
+27
View File
@@ -953,6 +953,33 @@
const sw = $('promoSwipeWrap'); const sw = $('promoSwipeWrap');
sw.innerHTML = ''; sw.innerHTML = '';
sw.appendChild(promoBlock('Subject: ' + PROMO_SWIPE.subject + '\n\n' + PROMO_SWIPE.body.replace('{{LINK}}', link))); sw.appendChild(promoBlock('Subject: ' + PROMO_SWIPE.subject + '\n\n' + PROMO_SWIPE.body.replace('{{LINK}}', link)));
// banner kit
const bwrap = $('promoBanners');
if (bwrap && !bwrap.dataset.filled) {
bwrap.dataset.filled = '1';
const BANNERS = [
{ file: 'iap-hero-1200x630.png', size: '1200×630 (social / hero)' },
{ file: 'iap-728x90.png', size: '728×90 (leaderboard)' },
{ file: 'iap-300x250.png', size: '300×250 (rectangle)' }
];
bwrap.innerHTML = '';
for (const b of BANNERS) {
const url = location.origin + '/banners/' + b.file;
const d = document.createElement('div');
d.className = 'pb-item';
d.innerHTML = '<img src="/banners/' + b.file + '" alt="InstantAdPay banner ' + b.size + '" loading="lazy">'
+ '<div class="pb-row"><span class="pb-size">' + b.size + '</span></div>';
const btn = document.createElement('button');
btn.className = 'btn small sec';
btn.textContent = 'Copy image URL';
btn.addEventListener('click', async () => {
try { await navigator.clipboard.writeText(url); IAP.status('Banner URL copied.', 'ok'); }
catch (e) { IAP.status('Copy failed.', 'bad'); }
});
d.querySelector('.pb-row').appendChild(btn);
bwrap.appendChild(d);
}
}
} }
// ── profile ── (busy2 defers the busy lookup past its TDZ) // ── profile ── (busy2 defers the busy lookup past its TDZ)
+5
View File
@@ -259,6 +259,11 @@ textarea{resize:vertical;font:inherit}
#boBurger{display:block} #boBurger{display:block}
.bo-content{padding:18px} .bo-content{padding:18px}
} }
/* ── promo banners ── */
.promo-banners{display:flex;flex-direction:column;gap:14px;margin-top:12px}
.pb-item img{max-width:100%;border-radius:8px;border:1px solid var(--line-strong);display:block}
.pb-item .pb-row{display:flex;gap:10px;align-items:center;margin-top:6px;flex-wrap:wrap}
.pb-item .pb-size{font-family:var(--mono);font-size:11px;color:var(--muted)}
/* ── featured day-slot picker ── */ /* ── featured day-slot picker ── */
.feat-days{display:flex;gap:8px;flex-wrap:wrap} .feat-days{display:flex;gap:8px;flex-wrap:wrap}
.feat-day{flex:0 0 auto;min-width:82px;padding:8px 10px;border:1px solid var(--line-strong);border-radius:10px; .feat-day{flex:0 0 auto;min-width:82px;padding:8px 10px;border:1px solid var(--line-strong);border-radius:10px;
Binary file not shown.

After

Width:  |  Height:  |  Size: 107 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 69 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 MiB

+4 -4
View File
@@ -5,7 +5,7 @@
<title>The contract | InstantAdPay</title> <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."> <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="stylesheet" href="https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&display=swap"> <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=20260906g"> <link rel="stylesheet" href="/assets/site.css?v=20260906h">
</head> </head>
<body> <body>
<div class="wrap"> <div class="wrap">
@@ -129,8 +129,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> <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> </footer>
</div> </div>
<script src="/assets/common.js?v=20260906g"></script> <script src="/assets/common.js?v=20260906h"></script>
<script src="/assets/contract.js?v=20260906g"></script> <script src="/assets/contract.js?v=20260906h"></script>
<script src="/assets/chat.js?v=20260906g"></script> <script src="/assets/chat.js?v=20260906h"></script>
</body> </body>
</html> </html>
+5 -5
View File
@@ -5,7 +5,7 @@
<title>InstantAdPay: advertise and earn, locked in code</title> <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="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.">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&display=swap"> <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=20260906g"> <link rel="stylesheet" href="/assets/site.css?v=20260906h">
</head> </head>
<body> <body>
@@ -410,9 +410,9 @@
</div> </div>
</section> </section>
<script src="/assets/common.js?v=20260906g"></script> <script src="/assets/common.js?v=20260906h"></script>
<script src="/assets/wallet.js?v=20260906g"></script> <script src="/assets/wallet.js?v=20260906h"></script>
<script src="/assets/home.js?v=20260906g"></script> <script src="/assets/home.js?v=20260906h"></script>
<script src="/assets/chat.js?v=20260906g"></script> <script src="/assets/chat.js?v=20260906h"></script>
</body> </body>
</html> </html>
+4 -4
View File
@@ -5,7 +5,7 @@
<title>Live ledger | InstantAdPay</title> <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."> <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="stylesheet" href="https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&display=swap"> <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=20260906g"> <link rel="stylesheet" href="/assets/site.css?v=20260906h">
</head> </head>
<body> <body>
<div class="wrap"> <div class="wrap">
@@ -25,8 +25,8 @@
<div>InstantAdPay · <a href="/">how it works</a> · <a id="contractLink" href="#" target="_blank" rel="noopener">contract source ↗</a></div> <div>InstantAdPay · <a href="/">how it works</a> · <a id="contractLink" href="#" target="_blank" rel="noopener">contract source ↗</a></div>
</footer> </footer>
</div> </div>
<script src="/assets/common.js?v=20260906g"></script> <script src="/assets/common.js?v=20260906h"></script>
<script src="/assets/ledger.js?v=20260906g"></script> <script src="/assets/ledger.js?v=20260906h"></script>
<script src="/assets/chat.js?v=20260906g"></script> <script src="/assets/chat.js?v=20260906h"></script>
</body> </body>
</html> </html>
+8 -7
View File
@@ -4,7 +4,7 @@
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"> <meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Member area | InstantAdPay</title> <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="https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&display=swap">
<link rel="stylesheet" href="/assets/site.css?v=20260906g"> <link rel="stylesheet" href="/assets/site.css?v=20260906h">
</head> </head>
<body class="bo-body"> <body class="bo-body">
@@ -510,8 +510,9 @@
</div> </div>
<div class="card"> <div class="card">
<h3>Banners</h3> <h3>Banners</h3>
<p class="muted small">Branded InstantAdPay banner sets are in production. They will land here <p class="muted small">Branded InstantAdPay banners, ready to drop anywhere. Pair one with your
sized for every standard placement, pre-tagged with your link.</p> invite link (copy it from "My line"). Right-click to save, or copy the image URL.</p>
<div id="promoBanners" class="promo-banners"></div>
</div> </div>
</div> </div>
@@ -583,9 +584,9 @@
</div> </div>
</div> </div>
<script src="/assets/common.js?v=20260906g"></script> <script src="/assets/common.js?v=20260906h"></script>
<script src="/assets/wallet.js?v=20260906g"></script> <script src="/assets/wallet.js?v=20260906h"></script>
<script src="/assets/my.js?v=20260906g"></script> <script src="/assets/my.js?v=20260906h"></script>
<script src="/assets/chat.js?v=20260906g"></script> <script src="/assets/chat.js?v=20260906h"></script>
</body> </body>
</html> </html>
+2 -2
View File
@@ -4,7 +4,7 @@
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"> <meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Shorts | InstantAdPay</title> <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="https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&display=swap">
<link rel="stylesheet" href="/assets/site.css?v=20260906g"> <link rel="stylesheet" href="/assets/site.css?v=20260906h">
<style> <style>
html,body{height:100%;margin:0;overflow:hidden;background:#000} 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)} .sh{position:fixed;inset:0;display:flex;flex-direction:column;background:#000;color:var(--ink,#e8fff7)}
@@ -43,6 +43,6 @@
</div> </div>
</div> </div>
</div> </div>
<script src="/assets/shorts.js?v=20260906g"></script> <script src="/assets/shorts.js?v=20260906h"></script>
</body> </body>
</html> </html>
+3 -3
View File
@@ -4,7 +4,7 @@
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"> <meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Transaction | InstantAdPay</title> <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="https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&display=swap">
<link rel="stylesheet" href="/assets/site.css?v=20260906g"> <link rel="stylesheet" href="/assets/site.css?v=20260906h">
</head> </head>
<body> <body>
<div id="nav"></div> <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> <p><a href="/ledger">← Back to the live ledger</a> · <a href="/contract">Read the contract review</a></p>
</div> </div>
</section> </section>
<script src="/assets/common.js?v=20260906g"></script> <script src="/assets/common.js?v=20260906h"></script>
<script src="/assets/tx.js?v=20260906g"></script> <script src="/assets/tx.js?v=20260906h"></script>
</body> </body>
</html> </html>
+2 -2
View File
@@ -4,7 +4,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="viewport" content="width=device-width,initial-scale=1">
<title>Viewing ad — InstantAdPay</title> <title>Viewing ad — InstantAdPay</title>
<link rel="stylesheet" href="/assets/site.css?v=20260906g"> <link rel="stylesheet" href="/assets/site.css?v=20260906h">
<style> <style>
html,body{height:100%;margin:0;overflow:hidden} 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)} .vw{display:flex;flex-direction:column;height:100vh;height:100dvh;background:var(--bg,#04110c);color:var(--ink,#e8fff7)}
@@ -43,6 +43,6 @@
</div> </div>
<iframe class="vframe" id="vFrame" sandbox="allow-scripts allow-same-origin allow-forms allow-popups" referrerpolicy="no-referrer" title="Advertiser site"></iframe> <iframe class="vframe" id="vFrame" sandbox="allow-scripts allow-same-origin allow-forms allow-popups" referrerpolicy="no-referrer" title="Advertiser site"></iframe>
</div> </div>
<script src="/assets/view.js?v=20260906g"></script> <script src="/assets/view.js?v=20260906h"></script>
</body> </body>
</html> </html>
+3 -3
View File
@@ -4,7 +4,7 @@
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"> <meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Banner wall | InstantAdPay</title> <title>Banner wall | InstantAdPay</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&display=swap"> <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=20260906g"> <link rel="stylesheet" href="/assets/site.css?v=20260906h">
</head> </head>
<body> <body>
<div id="nav"></div> <div id="nav"></div>
@@ -34,7 +34,7 @@
</div> </div>
</div> </div>
</section> </section>
<script src="/assets/common.js?v=20260906g"></script> <script src="/assets/common.js?v=20260906h"></script>
<script src="/assets/wall.js?v=20260906g"></script> <script src="/assets/wall.js?v=20260906h"></script>
</body> </body>
</html> </html>