Promo tools: banner kit as collapsed accordions per size group
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
martbost
+45
-31
@@ -1288,39 +1288,53 @@
|
||||
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-1080x1080.png', size: '1080×1080 (Instagram / Facebook square)' },
|
||||
{ file: 'iap-1080x1920.png', size: '1080×1920 (story / reel)' },
|
||||
{ file: 'iap-1280x720.png', size: '1280×720 (Telegram group post)' },
|
||||
{ file: 'iap-728x90.png', size: '728×90 (leaderboard)' },
|
||||
{ file: 'iap-336x280.png', size: '336×280 (large rectangle)' },
|
||||
{ file: 'iap-300x250.png', size: '300×250 (rectangle)' },
|
||||
{ file: 'iap-125x125.png', size: '125×125 (square button)' },
|
||||
{ file: 'iap-468x60.png', size: '468×60 (banner)' },
|
||||
{ file: 'iap-160x600.png', size: '160×600 (wide skyscraper)' },
|
||||
{ file: 'iap-120x600.png', size: '120×600 (skyscraper)' },
|
||||
{ file: 'iap-320x50.svg', size: '320×50 (mobile leaderboard)' }
|
||||
// one collapsed accordion per size / use, so the kit stays scannable as it grows
|
||||
const GROUPS = [
|
||||
{ title: '1200×630 · social posts, link previews, Daily News covers', items: [
|
||||
{ file: 'iap-hero-1200x630.png', size: '1200×630 · hero' } ] },
|
||||
{ title: '1080×1080 and 1080×1920 · Instagram, Facebook, stories, reels', items: [
|
||||
{ file: 'iap-1080x1080.png', size: '1080×1080 · square' },
|
||||
{ file: 'iap-1080x1920.png', size: '1080×1920 · story / reel' } ] },
|
||||
{ title: '1280×720 · Telegram and group posts', items: [
|
||||
{ file: 'iap-1280x720.png', size: '1280×720 · group post' } ] },
|
||||
{ title: 'Leaderboards · 728×90, 468×60, 320×50', items: [
|
||||
{ file: 'iap-728x90.png', size: '728×90 · leaderboard' },
|
||||
{ file: 'iap-468x60.png', size: '468×60 · banner' },
|
||||
{ file: 'iap-320x50.svg', size: '320×50 · mobile leaderboard' } ] },
|
||||
{ title: 'Rectangles and buttons · 336×280, 300×250, 125×125', items: [
|
||||
{ file: 'iap-336x280.png', size: '336×280 · large rectangle' },
|
||||
{ file: 'iap-300x250.png', size: '300×250 · rectangle' },
|
||||
{ file: 'iap-125x125.png', size: '125×125 · square button' } ] },
|
||||
{ title: 'Skyscrapers · 160×600, 120×600', items: [
|
||||
{ file: 'iap-160x600.png', size: '160×600 · wide skyscraper' },
|
||||
{ file: 'iap-120x600.png', size: '120×600 · skyscraper' } ] }
|
||||
];
|
||||
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 + '?v=3" alt="InstantAdPay banner ' + b.size + '" loading="lazy">'
|
||||
+ '<div class="pb-row"><span class="pb-size">' + b.size + '</span></div>';
|
||||
const dl = document.createElement('a');
|
||||
dl.className = 'btn small'; dl.textContent = 'Download'; dl.href = '/banners/' + b.file; dl.setAttribute('download', b.file);
|
||||
d.querySelector('.pb-row').appendChild(dl);
|
||||
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);
|
||||
for (const g of GROUPS) {
|
||||
const det = document.createElement('details');
|
||||
det.className = 'pb-acc';
|
||||
det.innerHTML = '<summary><span>' + esc(g.title) + '</span><span class="pb-count">' + g.items.length + (g.items.length === 1 ? ' banner' : ' banners') + '</span></summary><div class="pb-grid"></div>';
|
||||
const grid = det.querySelector('.pb-grid');
|
||||
for (const b of g.items) {
|
||||
const url = location.origin + '/banners/' + b.file;
|
||||
const d = document.createElement('div');
|
||||
d.className = 'pb-item';
|
||||
d.innerHTML = '<img src="/banners/' + b.file + '?v=4" alt="InstantAdPay banner ' + b.size + '" loading="lazy">'
|
||||
+ '<div class="pb-row"><span class="pb-size">' + b.size + '</span></div>';
|
||||
const dl = document.createElement('a');
|
||||
dl.className = 'btn small'; dl.textContent = 'Download'; dl.href = '/banners/' + b.file; dl.setAttribute('download', b.file);
|
||||
d.querySelector('.pb-row').appendChild(dl);
|
||||
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);
|
||||
grid.appendChild(d);
|
||||
}
|
||||
bwrap.appendChild(det);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -298,7 +298,14 @@ textarea{resize:vertical;font:inherit}
|
||||
.bo-content{padding:18px}
|
||||
}
|
||||
/* ── promo banners ── */
|
||||
.promo-banners{display:flex;flex-direction:column;gap:14px;margin-top:12px}
|
||||
.promo-banners{display:flex;flex-direction:column;gap:10px;margin-top:12px}
|
||||
.pb-acc{margin:0}
|
||||
.pb-acc>summary{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:13px 16px;font-size:14.5px}
|
||||
.pb-acc>summary::before{content:none}
|
||||
.pb-acc>summary>span:first-child::before{content:"+";color:var(--mint);font-weight:800;margin-right:10px}
|
||||
.pb-acc[open]>summary>span:first-child::before{content:"−"}
|
||||
.pb-acc .pb-count{font-family:var(--mono);font-size:11px;color:var(--muted);white-space:nowrap}
|
||||
.pb-acc .pb-grid{display:flex;flex-direction:column;gap:14px;padding:0 16px 16px}
|
||||
.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)}
|
||||
|
||||
+1
-1
@@ -668,7 +668,7 @@
|
||||
<div class="card promo-sec" id="promo-banners" hidden>
|
||||
<h3>Banners and graphics</h3>
|
||||
<p class="muted small">Branded InstantAdPay banners in every standard ad size, plus square, story and Telegram
|
||||
group sizes. Pair one with your invite link. Download, or copy the image URL for ad networks.</p>
|
||||
group sizes. Open a size to see its banners. Pair one with your invite link. Download, or copy the image URL for ad networks.</p>
|
||||
<div id="promoBanners" class="promo-banners"></div>
|
||||
</div>
|
||||
<div class="card promo-sec" id="promo-wall" hidden>
|
||||
|
||||
Reference in New Issue
Block a user