diff --git a/static/css/style.css b/static/css/style.css index ef6c5cf..6528d19 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -153,7 +153,8 @@ footer a{color:var(--accent);text-decoration:none} .pdp-info{padding:1.5rem 2rem} .pdp-gallery-main{position:relative;border-radius:10px;overflow:hidden;background:#0a0e14;margin-bottom:.75rem;aspect-ratio:1;display:flex;align-items:center;justify-content:center} .pdp-gallery-main img{max-width:100%;max-height:100%;object-fit:contain} -.pdp-gallery-badge{position:absolute;top:.6rem;left:.6rem;font-family:'JetBrains Mono',monospace;font-size:.6rem;font-weight:700;padding:.2rem .5rem;border-radius:4px;background:rgba(6,10,15,.85);color:var(--accent);border:1px solid var(--border)} +.pdp-gallery-badge{position:absolute;top:.6rem;left:.6rem;font-family:'JetBrains Mono',monospace;font-size:.6rem;font-weight:700;padding:.2rem .5rem;border-radius:4px;background:rgba(6,10,15,.85);color:var(--cyan);border:1px solid var(--border)} +.pdp-gallery-caption{position:absolute;bottom:.6rem;left:.6rem;right:.6rem;font-size:.72rem;color:var(--text2);background:rgba(6,10,15,.85);padding:.3rem .6rem;border-radius:4px;text-align:center} .pdp-thumbs{display:flex;gap:.5rem;overflow-x:auto;padding:.25rem 0} .pdp-thumb{width:72px;height:72px;border-radius:8px;overflow:hidden;cursor:pointer;border:2px solid transparent;position:relative;flex-shrink:0;background:var(--bg);transition:.2s} .pdp-thumb.wide{width:110px} diff --git a/static/js/app.js b/static/js/app.js index 57e590e..d491a78 100644 --- a/static/js/app.js +++ b/static/js/app.js @@ -252,42 +252,39 @@ function renderPDP(product, pack, imgs) { function buildGallery(product, imgs) { const items = []; - // Original product images first - (product.images || []).forEach((src, i) => { - items.push({src: src, label: i === 0 ? 'Original — Main' : `Original — ${i+1}`, isOriginal: true}); - }); - // AI-generated images + // AI-generated images only if (imgs) { const aiSlots = [ - {key:'hero', label:'AI — Clean Studio'}, - {key:'lifestyle', label:'AI — Lifestyle'}, - {key:'scale', label:'AI — Scale'}, - {key:'ingredients', label:'AI — Detail'}, - {key:'banner', label:'AI — Banner', wide: true}, + {key:'hero', label:'Clean Studio Shot', caption:'Studio lighting, white background'}, + {key:'lifestyle', label:'Lifestyle Shot', caption:'Morning kitchen scene'}, + {key:'scale', label:'Scale Reference', caption:'Real-world size context'}, + {key:'ingredients', label:'Detail Close-up', caption:'Ingredients & quality'}, + {key:'banner', label:'Hero Banner', caption:'Wide format for landing pages', wide: true}, ]; aiSlots.forEach(slot => { const d = imgs[slot.key]; if (d && d.filename) { items.push({src: `/generated/${d.filename}`, label: slot.label, - caption: d.caption || '', model: d.model || '', wide: slot.wide}); + caption: d.caption || slot.caption, model: d.model || '', wide: slot.wide}); } }); } - if (!items.length) return ''; + if (!items.length) return ''; const mainImg = items[0]; const thumbs = items.map((item, i) => - `
+ `
${esc(item.label)} - ${esc(item.label)} + ${esc(item.label)}
` ).join(''); return `
${thumbs}
`; @@ -300,10 +297,9 @@ window.switchGallery = function(idx, el) { document.querySelectorAll('.pdp-thumb').forEach(t => t.classList.remove('active')); el.classList.add('active'); const badge = $('.pdp-gallery-badge'); - if (badge) { - const label = el.querySelector('.pdp-thumb-label'); - badge.textContent = label?.classList.contains('orig') ? '📷 Original' : '🤖 AI Generated'; - } + if (badge) badge.textContent = `🤖 AI Generated — ${el.dataset.model || ''}`; + const caption = $('#pdpCaption'); + if (caption) caption.textContent = el.dataset.caption || ''; };