`series2/gallery.mjs`

18 lines
import fs from 'node:fs';
import path from 'node:path';
const root=import.meta.dirname;
const episodes=JSON.parse(fs.readFileSync(path.join(root,'episodes.json')));
const products=JSON.parse(fs.readFileSync(path.join(root,'products.json')));
const sources=JSON.parse(fs.readFileSync(path.join(root,'sources.json')));
const esc=s=>s.replaceAll('&','&amp;').replaceAll('<','&lt;').replaceAll('"','&quot;');
const html=`<!doctype html><html lang="en"><head><meta charset="utf-8"><link rel="icon" href="data:,"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Wallo presents — A guide to wallcoverings</title><style>
@font-face{font-family:Editorial;src:url('assets/georgia.ttf')}@font-face{font-family:Information;src:url('assets/verdana.ttf')}*{box-sizing:border-box}body{margin:0;background:#eeeae2;color:#243a3b;font:16px/1.6 Information,sans-serif}main{max-width:1240px;margin:auto;padding:38px 30px 80px}nav{display:flex;justify-content:space-between;gap:20px;padding-bottom:23px;border-bottom:1px solid #b9b6aa;font-size:12px;letter-spacing:.12em}a{color:#284f4b;text-underline-offset:4px}h1,h2,h3{font-family:Editorial,serif;font-weight:400;line-height:1.12}h1{font-size:clamp(44px,5vw,70px);margin:16px 0 22px;letter-spacing:-.04em}h2{font-size:40px}h3{font-size:32px;margin:14px 0}p{max-width:650px}.eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#4d6459}.hero{display:flex;gap:64px;align-items:center;margin:44px 0 64px}.hero .intro{flex:1}.hero video{width:360px;max-width:100%;box-shadow:0 17px 45px #233a3b1a}video{aspect-ratio:9/16;display:block;background:#dad5c8;border-radius:2px}.primary{display:inline-block;margin:18px 0 10px;padding:12px 22px;background:#284f4b;color:#f7f3e9;text-decoration:none}.chapters{display:flex;flex-wrap:wrap;gap:8px;padding:18px 0}button{font:inherit;font-size:13px;background:transparent;border:1px solid #a8b0a2;color:#284f4b;padding:8px 12px;cursor:pointer}button:hover,button:focus-visible{background:#284f4b;color:#f7f3e9}.short{display:flex;gap:48px;align-items:center;padding:42px 0;border-top:1px solid #b9b6aa}.short video{width:245px;max-width:100%}.short .copy{max-width:620px}.meta{font-size:13px;color:#59645a}.product{display:flex;gap:18px;align-items:center;padding:20px 0}.product img{width:78px;height:94px;object-fit:cover}.product span{font-size:13px}details{border-top:1px solid #b9b6aa;margin-top:45px;padding-top:22px}summary{cursor:pointer}details li{margin:12px 0;max-width:900px}footer{margin-top:36px;font-size:12px;color:#59645a}.small{font-size:13px}@media(max-width:750px){main{padding:24px 21px 50px}.hero{flex-direction:column;gap:25px;align-items:flex-start}.hero video{width:100%;max-width:430px;margin:auto}.short{flex-direction:column;gap:24px;align-items:flex-start}.short video{width:100%;max-width:360px;margin:auto}nav{flex-wrap:wrap}h2{font-size:32px}}
</style></head><body><main><nav><span>DESIGNER WALLCOVERINGS / MATERIAL NOTES</span><a href="../watch.html">Original Wallo &amp; Pippa shorts</a><a href="memes/index.html">10 installer memes</a></nav>
<section class="hero"><div class="intro"><p class="eyebrow">A presentation by Wallo</p><h1>Good rooms start<br>with good choices.</h1><p>Five short lessons on specifying wallcoverings, with Wallo presenting and Pippa demonstrating real products from Designer Wallcoverings.</p><p>Fire performance. Design benefits. Daily wear. Sampling. Service.</p><a class="primary" href="renders/wallo-wallcovering-presentation.mp4" download>Download the full presentation</a><p class="meta">1 minute 40 seconds · narrated · captions · 1080 × 1920</p><div class="chapters" aria-label="Jump to presentation chapter">${episodes.map((ep,i)=>`<button data-jump="${i*20}">${i+1}. ${['Fire','Design','Performance','Samples','DW service'][i]}</button>`).join('')}</div><p class="small" id="playback-status" role="status">Sound on for Wallo’s presentation. Each chapter is also available below as a 20-second short.</p></div><video id="presentation" data-slug="wallo-wallcovering-presentation" controls playsinline preload="metadata" poster="verification/04-fire-rated-3.5.png" src="renders/wallo-wallcovering-presentation.mp4"></video></section>
<h2>The five shorts</h2>${episodes.map((ep,i)=>{const p=products.find(p=>p.id===ep.product);return `<article class="short" id="${ep.slug}"><video data-slug="${ep.slug}" controls playsinline preload="metadata" poster="verification/${ep.slug}-6.2.png" src="renders/${ep.slug}.mp4"></video><div class="copy"><p class="eyebrow">${esc(ep.kicker)}</p><h3>${esc(ep.shortTitle)}</h3><p>${esc(ep.takeaway)}</p><p>${esc(ep.captions[1])} ${esc(ep.captions[3])}</p><div class="product"><a href="${p.url}" target="_blank" rel="noopener"><img src="${p.file}" alt="${esc(p.title)}"></a><span>Featured at Designer Wallcoverings<br><a href="${p.url}" target="_blank" rel="noopener">${esc(p.title)}</a></span></div><p class="meta">20 seconds · narrated by Wallo · captions</p><a href="renders/${ep.slug}.mp4" download>Download this short</a> · <a href="transcripts/${ep.slug}.txt">Read transcript</a></div></article>`;}).join('')}
<details><summary>Product credits and information sources</summary><p class="small">Product images come directly from designerwallcoverings.com. Animated room installations are illustrative and not to scale. Ask for the selected product’s actual test report, specification and installation instructions. Product availability and terms may change.</p><ul>${sources.claims.map(s=>`<li><a href="${s.url}" target="_blank" rel="noopener">${esc(s.topic)}</a> — ${esc(s.statement)}</li>`).join('')}</ul></details><footer>Wallo &amp; Pippa / Material Notes · September 5, 2026<br>Original articulated character animation. Local synthetic narration. Product artwork credited to the brands shown. Local review copy.</footer></main><script>document.querySelectorAll('[data-jump]').forEach(b=>b.addEventListener('click',()=>{const v=document.getElementById('presentation');v.currentTime=Number(b.dataset.jump);v.play().catch(error=>{if(error.name!=='AbortError')document.getElementById('playback-status').textContent='Press play to start this chapter.';});v.scrollIntoView({behavior:'smooth',block:'center'});}));document.querySelectorAll('video').forEach(v=>v.addEventListener('play',()=>document.querySelectorAll('video').forEach(other=>{if(other!==v)other.pause();})));</script></body></html>`;
fs.writeFileSync(path.join(root,'watch.html'),html);
fs.mkdirSync(path.join(root,'transcripts'),{recursive:true});
for(const ep of episodes)fs.writeFileSync(path.join(root,'transcripts',ep.slug+'.txt'),ep.shortTitle+'\n\n'+ep.lines.join('\n\n')+'\n\nFeatured product: '+products.find(p=>p.id===ep.product).url+'\n');
console.log('Created presentation gallery and five transcripts.');