| <!doctype html> |
| <html lang="zh-CN"> |
| <meta charset="utf-8"/> |
| <title>小镇角落小店 · 美术画廊</title> |
| <style> |
| body{font-family:system-ui,sans-serif;background:#f4efe8;color:#3b2f2a;margin:0;padding:1.5rem} |
| h1{font-weight:600} |
| .cats{display:flex;gap:.5rem;flex-wrap:wrap;margin:1rem 0} |
| button{border:1px solid #cbb;background:#fff;border-radius:999px;padding:.35rem .8rem;cursor:pointer} |
| button.active{background:#e7d3c0} |
| grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1rem} |
| figure{margin:0;background:#fff;border-radius:12px;padding:.6rem;box-shadow:0 2px 10px #0001} |
| img{width:100%;height:160px;object-fit:cover;border-radius:8px} |
| figcaption{font-size:.8rem;margin-top:.4rem;word-break:break-all} |
| </style> |
| <h1>小镇角落小店 · 美术资源</h1> |
| <p>仅展示 manifest 核心类目中的独立资源（非 ffmpeg 批量变体目录）。</p> |
| <div class="cats" id="cats"></div> |
| <div id="grid"></div> |
| <script> |
| async function main(){ |
| const res = await fetch('../assets/manifest/assets.json'); |
| const man = await res.json(); |
| const core = ['shop','product','furniture','character','ui']; |
| const cats = document.getElementById('cats'); |
| const grid = document.getElementById('grid'); |
| function render(cat){ |
| grid.innerHTML=''; |
| const keys = (man.categories[cat]||[]).filter(k=>!k.startsWith('round.')); |
| const seen = new Set(); |
| for(const k of keys){ |
| const path = man.assets[k]; |
| if(!path || seen.has(path) || path.includes('assets/rounds/')) continue; |
| seen.add(path); |
| const fig = document.createElement('figure'); |
| fig.innerHTML = `<img src="../${path}" alt="${k}" loading="lazy"/><figcaption>${k}<br/>${path}</figcaption>`; |
| grid.appendChild(fig); |
| } |
| } |
| core.forEach((c,i)=>{ |
| const b=document.createElement('button'); |
| b.textContent=c; if(i===0) b.classList.add('active'); |
| b.onclick=()=>{[...cats.children].forEach(x=>x.classList.remove('active')); b.classList.add('active'); render(c)}; |
| cats.appendChild(b); |
| }); |
| render('shop'); |
| } |
| main(); |
| </script> |
|
|
