150 lines
8.1 KiB
HTML
150 lines
8.1 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<link rel="icon" type="image/svg+xml" href="logo/favicon.svg">
|
||
<title>海报素材中心 · 画个标</title>
|
||
<style>
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
body { font-family: "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif; font-size: 14px; color: #1f2937; background: #f3f4f6; min-height: 100vh; }
|
||
a { color: #4f46e5; text-decoration: none; }
|
||
a:hover { text-decoration: underline; }
|
||
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 0 20px; height: 54px; background: linear-gradient(90deg, #1e1b4b, #312e81); color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.15); position: sticky; top: 0; z-index: 20; }
|
||
.topbar .brand { display: flex; align-items: center; gap: 10px; }
|
||
.topbar .brand .icon { font-size: 20px; }
|
||
.topbar .brand .name { font-size: 17px; font-weight: 700; letter-spacing: 1px; }
|
||
.topbar .brand .tag { font-size: 11px; color: #c7d2fe; background: rgba(255,255,255,.12); padding: 2px 8px; border-radius: 20px; }
|
||
.topbar .nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
|
||
.topbar .nav a { color: #e0e7ff; font-size: 13px; padding: 6px 12px; border: 1px solid rgba(255,255,255,.35); border-radius: 6px; background: rgba(255,255,255,.1); transition: background .15s; }
|
||
.topbar .nav a:hover { background: rgba(255,255,255,.22); text-decoration: none; }
|
||
.topbar .nav a.active { background: #fff; color: #312e81; font-weight: 700; }
|
||
.wrap { max-width: 1080px; margin: 22px auto 60px; padding: 0 16px; }
|
||
.card { background: #fff; border-radius: 12px; padding: 20px; margin-bottom: 16px; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
|
||
.card h2 { font-size: 16px; color: #312e81; margin-bottom: 10px; }
|
||
.muted { color: #6b7280; line-height: 1.7; }
|
||
.types { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
|
||
.type-chip { font-size: 12px; padding: 4px 10px; border-radius: 20px; background: #eef2ff; color: #4f46e5; }
|
||
/* ===== 来源卡片 ===== */
|
||
.scard { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 18px 20px; margin-bottom: 14px; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
|
||
.scard-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
|
||
.scard-head h3 { font-size: 16px; color: #312e81; }
|
||
.scard-head .en { font-size: 12px; color: #9ca3af; }
|
||
.scard p { font-size: 13px; color: #4b5563; line-height: 1.7; margin-bottom: 6px; }
|
||
.scard .note { color: #6b7280; }
|
||
.scard .meta { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: #6b7280; margin: 6px 0 10px; }
|
||
.scard .meta b { color: #4f46e5; }
|
||
.scard .links { display: flex; gap: 14px; margin: 8px 0 10px; }
|
||
.scard .links a { font-size: 13px; color: #4f46e5; }
|
||
.samples { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
|
||
.samples svg, .samples .ph { width: 48px; height: 48px; border: 1px solid #e5e7eb; border-radius: 8px; background: #f9fafb; }
|
||
.samples .ph { display: flex; align-items: center; justify-content: center; font-size: 10px; color: #9ca3af; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!-- ===== 顶部工具栏 ===== -->
|
||
<header class="topbar">
|
||
<div class="brand">
|
||
<img class="icon" src="logo/logo-mark.svg" alt="画个标" width="20" height="20">
|
||
<span class="name">画个标</span>
|
||
<span class="tag">海报素材中心</span>
|
||
</div>
|
||
<nav class="nav">
|
||
<a href="index.html" title="LOGO 设计工作台">🎨 LOGO</a>
|
||
<a href="avatar.html" title="头像设计工作台">🖼 头像</a>
|
||
<a href="poster.html" title="海报设计工作台">📰 海报</a>
|
||
<a href="skills.html" title="共享技能中心">🧩 技能中心</a>
|
||
<a href="poster-skills.html" title="海报技能中心">🧩 海报技能</a>
|
||
<a href="sources.html" title="图标素材中心">📚 素材中心</a>
|
||
<a href="materials.html" title="素材库：按行预览 LOGO/头像/海报素材">🗃 素材库</a>
|
||
<a class="active" href="poster-sources.html" title="海报素材中心">📚 海报素材</a>
|
||
</nav>
|
||
</header>
|
||
|
||
<div class="wrap">
|
||
<div class="card">
|
||
<h2>📚 海报素材库</h2>
|
||
<p class="muted">集中管理海报专属素材（背景底纹 / 插画 / 成品模板 / 装饰元素 / 样机 / 字体 / 配色），来源、协议与构建信息可查。</p>
|
||
<div class="types">
|
||
<span class="type-chip">bg 背景底纹</span>
|
||
<span class="type-chip">illustration 插画</span>
|
||
<span class="type-chip">template 成品模板</span>
|
||
<span class="type-chip">decoration 装饰元素</span>
|
||
<span class="type-chip">mockup 展示样机</span>
|
||
<span class="type-chip">photo 无版权图片</span>
|
||
<span class="type-chip">font 字体</span>
|
||
<span class="type-chip">palette 配色</span>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<h2>来源清单（<span id="src-count">0</span> 个源，<span id="total-count">0</span> 个素材）</h2>
|
||
<p class="muted">收录原则：仅接受 MIT / Apache-2.0 / ISC / CC0 / CC BY 4.0 / OFL 等协议，排除 BY-SA / BY-NC / BY-ND / GPL 及禁止 AI 训练的自定义协议；每条来源均经 jsDelivr 拉取可行性验证与像素级质量审计。</p>
|
||
</div>
|
||
<div id="src-list"></div>
|
||
</div>
|
||
|
||
<script src="js/data/poster-sources.js"></script>
|
||
<script src="js/data/poster-builtin.js?v=20260823e"></script>
|
||
<script>
|
||
(function () {
|
||
const builtin = window.HGB_PosterBuiltin || { sources: {} };
|
||
const FALLBACK = window.HGB_PosterSources || [];
|
||
const TYPE_CN = { bg: '背景底纹', illustration: '插画', template: '成品模板', decoration: '装饰元素', mockup: '展示样机', photo: '无版权图片', font: '字体', palette: '配色' };
|
||
let sources = [];
|
||
|
||
function render() {
|
||
document.getElementById('src-count').textContent = sources.length;
|
||
let total = 0;
|
||
for (const s of sources) total += (typeof s.count === 'number') ? s.count : ((builtin.sources[s.id] || {}).count || 0);
|
||
document.getElementById('total-count').textContent = total;
|
||
|
||
const list = document.getElementById('src-list');
|
||
if (!sources.length) {
|
||
list.innerHTML = '<div class="card muted">暂未收录来源，请先运行 node scripts/build-posters.js。</div>';
|
||
return;
|
||
}
|
||
for (const s of sources) {
|
||
const meta = builtin.sources[s.id] || {};
|
||
const count = (typeof s.count === 'number') ? s.count : (meta.count || 0);
|
||
const samples = (meta.samples || []);
|
||
const sampleHtml = samples.map(sm => {
|
||
if (sm && /<svg|<path|<circle|<rect|<g/i.test(sm)) {
|
||
return '<svg viewBox="0 0 36 36" width="48" height="48" xmlns="http://www.w3.org/2000/svg">' + sm + '</svg>';
|
||
}
|
||
return '<span class="ph">数据</span>';
|
||
}).join('') || (s.type === 'palette' ? '<span class="ph">配色</span>' : '');
|
||
list.insertAdjacentHTML('beforeend', `
|
||
<div class="scard">
|
||
<div class="scard-head">
|
||
<h3>${s.nameCn || s.name}</h3>
|
||
<span class="en">${s.name}</span>
|
||
<span class="type-chip">${s.type} ${TYPE_CN[s.type] || ''}</span>
|
||
</div>
|
||
<p>${s.desc || ''}</p>
|
||
<div class="meta">
|
||
<span>📄 协议：<b>${s.license || '未标注'}</b></span>
|
||
<span>🗂 素材：<b>${count}</b></span>
|
||
<span>📅 收录：${s.added || '-'}</span>
|
||
</div>
|
||
<p class="note">${s.licenseNote || ''}</p>
|
||
<p class="note">坐标系：${s.coordText || '-'}</p>
|
||
<p class="note">变体：${s.variants || '-'}</p>
|
||
<div class="links">
|
||
${s.home ? '<a href="' + s.home + '" target="_blank" rel="noopener">🌐 官网</a>' : ''}
|
||
${s.github ? '<a href="' + s.github + '" target="_blank" rel="noopener">🐙 GitHub</a>' : ''}
|
||
</div>
|
||
<div class="samples">${sampleHtml}</div>
|
||
</div>`);
|
||
}
|
||
}
|
||
|
||
// 优先读机器可读 manifest（js/data/manifest/posters.json，构建时生成）；失败回退内置配置
|
||
fetch('js/data/manifest/posters.json?v=20260823e')
|
||
.then(r => r.json())
|
||
.then(m => { sources = m.sources || []; render(); })
|
||
.catch(() => { sources = FALLBACK; render(); });
|
||
})();
|
||
</script>
|
||
</body>
|
||
</html>
|