diff --git a/public/assets/my.js b/public/assets/my.js
index a9090d9..fe0cb86 100644
--- a/public/assets/my.js
+++ b/public/assets/my.js
@@ -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 = '
'
- + '' + b.size + '
';
- 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 = '' + esc(g.title) + '' + g.items.length + (g.items.length === 1 ? ' banner' : ' banners') + '';
+ 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 = '
'
+ + '' + b.size + '
';
+ 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);
}
}
}
diff --git a/public/assets/site.css b/public/assets/site.css
index ce01930..405f755 100644
--- a/public/assets/site.css
+++ b/public/assets/site.css
@@ -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)}
diff --git a/public/my.html b/public/my.html
index 6dd2353..5b255d5 100644
--- a/public/my.html
+++ b/public/my.html
@@ -668,7 +668,7 @@