File size: 2,076 Bytes
3831e97 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | <!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>
|