Promo tools: banner kit as collapsed accordions per size group

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

public/assets/my.js

@@ -1288,39 +1288,53 @@
     const bwrap = $('promoBanners');
     if (bwrap && !bwrap.dataset.filled) {
       bwrap.dataset.filled = '1';
-      const BANNERS = [
+      // one collapsed accordion per size / use, so the kit stays scannable as it grows
-        { file: 'iap-hero-1200x630.png', size: '1200×630 (social / hero)' },
+      const GROUPS = [
-        { file: 'iap-1080x1080.png', size: '1080×1080 (Instagram / Facebook square)' },
+        { title: '1200×630 · social posts, link previews, Daily News covers', items: [
-        { file: 'iap-1080x1920.png', size: '1080×1920 (story / reel)' },
+          { file: 'iap-hero-1200x630.png', size: '1200×630 · hero' } ] },
-        { file: 'iap-1280x720.png', size: '1280×720 (Telegram group post)' },
+        { title: '1080×1080 and 1080×1920 · Instagram, Facebook, stories, reels', items: [
-        { file: 'iap-728x90.png', size: '728×90 (leaderboard)' },
+          { file: 'iap-1080x1080.png', size: '1080×1080 · square' },
-        { file: 'iap-336x280.png', size: '336×280 (large rectangle)' },
+          { file: 'iap-1080x1920.png', size: '1080×1920 · story / reel' } ] },
-        { file: 'iap-300x250.png', size: '300×250 (rectangle)' },
+        { title: '1280×720 · Telegram and group posts', items: [
-        { file: 'iap-125x125.png', size: '125×125 (square button)' },
+          { file: 'iap-1280x720.png', size: '1280×720 · group post' } ] },
-        { file: 'iap-468x60.png', size: '468×60 (banner)' },
+        { title: 'Leaderboards · 728×90, 468×60, 320×50', items: [
-        { file: 'iap-160x600.png', size: '160×600 (wide skyscraper)' },
+          { file: 'iap-728x90.png', size: '728×90 · leaderboard' },
-        { file: 'iap-120x600.png', size: '120×600 (skyscraper)' },
+          { file: 'iap-468x60.png', size: '468×60 · banner' },
-        { file: 'iap-320x50.svg', size: '320×50 (mobile leaderboard)' }
+          { 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) {
+      for (const g of GROUPS) {
-        const url = location.origin + '/banners/' + b.file;
+        const det = document.createElement('details');
-        const d = document.createElement('div');
+        det.className = 'pb-acc';
-        d.className = 'pb-item';
+        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>';
-        d.innerHTML = '<img src="/banners/' + b.file + '?v=3" alt="InstantAdPay banner ' + b.size + '" loading="lazy">'
+        const grid = det.querySelector('.pb-grid');
-          + '<div class="pb-row"><span class="pb-size">' + b.size + '</span></div>';
+        for (const b of g.items) {
-        const dl = document.createElement('a');
+          const url = location.origin + '/banners/' + b.file;
-        dl.className = 'btn small'; dl.textContent = 'Download'; dl.href = '/banners/' + b.file; dl.setAttribute('download', b.file);
+          const d = document.createElement('div');
-        d.querySelector('.pb-row').appendChild(dl);
+          d.className = 'pb-item';
-        const btn = document.createElement('button');
+          d.innerHTML = '<img src="/banners/' + b.file + '?v=4" alt="InstantAdPay banner ' + b.size + '" loading="lazy">'
-        btn.className = 'btn small sec';
+            + '<div class="pb-row"><span class="pb-size">' + b.size + '</span></div>';
-        btn.textContent = 'Copy image URL';
+          const dl = document.createElement('a');
-        btn.addEventListener('click', async () => {
+          dl.className = 'btn small'; dl.textContent = 'Download'; dl.href = '/banners/' + b.file; dl.setAttribute('download', b.file);
-          try { await navigator.clipboard.writeText(url); IAP.status('Banner URL copied.', 'ok'); }
+          d.querySelector('.pb-row').appendChild(dl);
-          catch (e) { IAP.status('Copy failed.', 'bad'); }
+          const btn = document.createElement('button');
-        });
+          btn.className = 'btn small sec';
-        d.querySelector('.pb-row').appendChild(btn);
+          btn.textContent = 'Copy image URL';
-        bwrap.appendChild(d);
+          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);
       }
     }
   }

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

public/my.html

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