34 lines
5.0 KiB
HTML
34 lines
5.0 KiB
HTML
<!doctype html>
|
||
<html lang="zh-CN"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>炉火｜图片素材目录</title>
|
||
<style>
|
||
*{box-sizing:border-box}body{margin:0;background:#f5f2eb;color:#272c30;font:15px/1.7 system-ui,"Microsoft YaHei",sans-serif}header,main{max-width:1480px;margin:auto;padding:24px}header{padding-top:36px}h1{font-size:28px;margin:0}p{margin:8px 0;color:#61676a}.bar{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:22px 0}input[type=search]{flex:1;min-width:250px}input,select,button{font:inherit;padding:8px 12px;border:1px solid #b8c0be;border-radius:8px;background:white}button{cursor:pointer}a{color:#286b67}#grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}.card{background:white;border:1px solid #dedfd8;border-radius:12px;overflow:hidden}.card img{display:block;width:100%;height:270px;object-fit:contain;background:#e9eae4}.body{padding:15px}h2{font-size:16px;line-height:1.5;overflow-wrap:anywhere;margin:0 0 8px}.meta{font-size:12px;color:#586563}.tag{font-size:12px;border-radius:4px;background:#e5eeea;padding:3px 6px;display:inline-block;margin:2px}details{font-size:13px;margin-top:12px}summary{cursor:pointer;color:#286b67}.desc{white-space:pre-wrap;overflow-wrap:anywhere}.nav{display:flex;gap:16px;align-items:center;margin:20px 0}label{cursor:pointer}.small{font-size:13px}
|
||
</style></head><body><header><h1>炉火照彻诸神沉默的年代 · 图片素材</h1><p>原图保留 · 内容去重 · 每图说明 · 版本可追溯</p><p class="small">这是本地整理目录，不是定稿或授权证明。外部参考另存，不进入此图库。</p>
|
||
<div class="bar"><input type="search" id="query" placeholder="搜索人物、年龄、场景、镜号或说明…" aria-label="搜索素材"><select id="category" aria-label="分类"><option value="">全部分类</option></select><label><input id="all" type="checkbox"> 包含历史版、检查图和逐帧图</label></div>
|
||
<div class="small"><a href="素材清单.csv">CSV导入表</a> · <a href="素材清单.json">JSON完整数据</a> · <a href="README.md">整理说明</a></div><p id="count"></p></header>
|
||
<main><div class="nav"><button id="prev">上一页</button><span id="page"></span><button id="next">下一页</button></div><div id="grid"></div><p class="small">说明依据为已有项目记录与制作数据；展开可查看详细内容。图片未裁切、未修改。</p></main>
|
||
<script id="data" type="application/json">__CATALOG_DATA__</script>
|
||
<script>
|
||
const items=JSON.parse(document.getElementById('data').textContent),q=document.getElementById('query'),cat=document.getElementById('category'),all=document.getElementById('all'),grid=document.getElementById('grid');let page=0;const size=30;
|
||
for(const category of [...new Set(items.map(x=>x.category))]){const o=document.createElement('option');o.value=category;o.textContent=category;cat.append(o)}
|
||
function el(tag,text,cls){const n=document.createElement(tag);if(text)n.textContent=text;if(cls)n.className=cls;return n}
|
||
function render(){
|
||
const term=q.value.trim().toLowerCase();const selected=items.filter(x=>(all.checked||x.default_gallery_visible)&&(!cat.value||x.category===cat.value)&&(!term||[x.title,x.description,x.shot_id,x.filename].join(' ').toLowerCase().includes(term)));
|
||
const pages=Math.max(1,Math.ceil(selected.length/size));page=Math.max(0,Math.min(page,pages-1));
|
||
document.getElementById('count').textContent='当前显示 '+selected.length+' 张 / 全部 '+items.length+' 张（不含外部参考）。默认隐藏历史版、检查图、逐帧中间图。';
|
||
document.getElementById('page').textContent=(page+1)+' / '+pages;
|
||
document.getElementById('prev').disabled=page===0;document.getElementById('next').disabled=page>=pages-1;
|
||
grid.replaceChildren();
|
||
for(const x of selected.slice(page*size,(page+1)*size)){
|
||
const card=el('article',null,'card'),link=el('a');link.href=encodeURI(x.image_path);link.target='_blank';link.rel='noopener';
|
||
const img=el('img');img.src=encodeURI(x.image_path);img.alt=x.title;img.loading='lazy';link.append(img);card.append(link);
|
||
const body=el('div',null,'body');body.append(el('h2',x.title));body.append(el('span',x.category,'tag'),el('span',x.status,'tag'));
|
||
body.append(el('div',x.width+' × '+x.height+' · '+(x.bytes/1048576).toFixed(2)+' MB','meta'));
|
||
const details=el('details');details.append(el('summary','详细说明、用途与限制'),el('p',x.description,'desc'),el('p','原始来源：'+x.source_paths.join('；'),'desc'));
|
||
const txt=el('a','打开同名说明');txt.href=encodeURI(x.image_path.replace(/\.[^.]+$/,'.txt'));txt.target='_blank';details.append(txt);body.append(details);card.append(body);grid.append(card);
|
||
}
|
||
}
|
||
for(const input of [q,cat,all])input.addEventListener('input',()=>{page=0;render()});
|
||
document.getElementById('prev').onclick=()=>{page--;render()};document.getElementById('next').onclick=()=>{page++;render();window.scrollTo({top:0,behavior:'smooth'})};render();
|
||
</script></body></html>
|