marty/instantadpay
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Promo tools: banner kit as collapsed accordions per size group

Browse Source 
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
martbost
2026-09-10 14:32:16 -05:00
parent cac78133ca
commit b4b9ac8680
3 changed files with 54 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/assets/my.js
+45 -31
View File
@@ -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);
}
}
}