John
2e14873f2d
Track application source and tests; exclude local env, user workspaces, and runtime data via .gitignore. Co-authored-by: Cursor <cursoragent@cursor.com>
67 lines
3.6 KiB
HTML
67 lines
3.6 KiB
HTML
<!doctype html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>MindSpace 预览图 Demo</title>
|
|
<style>
|
|
:root { color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #f4f0e7; color: #18211d; }
|
|
body { margin: 0; padding: 24px; }
|
|
h1 { margin: 0 0 8px; font-size: 28px; }
|
|
.lead { margin: 0 0 24px; color: #5f6963; line-height: 1.6; }
|
|
.compare { display: grid; gap: 28px; }
|
|
.sample { padding: 20px; border-radius: 20px; background: #fff; box-shadow: 0 10px 30px rgba(24,33,29,0.08); }
|
|
.sample h2 { margin: 0 0 16px; font-size: 20px; }
|
|
.pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
|
|
.thumb { display: grid; gap: 8px; }
|
|
.thumb img { width: 100%; border-radius: 12px; box-shadow: 0 8px 24px rgba(24,33,29,0.12); }
|
|
.thumb span { font-size: 13px; color: #6d7771; }
|
|
.feed-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 520px; }
|
|
.feed-card { border: none; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 2px 10px rgba(24,33,29,0.07); }
|
|
.feed-cover { aspect-ratio: 3 / 4; background: #ece7df; }
|
|
.feed-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
|
.feed-body { padding: 10px 12px 12px; }
|
|
.feed-body h3 { margin: 0; font-size: 14px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
|
|
.feed-body p { margin: 6px 0 0; font-size: 12px; color: #939c97; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>MindSpace 预览图升级 Demo</h1>
|
|
<p class="lead">左侧为旧版横版缩略图，中间为新版 3:4 信息流封面（自动从 HTML 提取标题、配色、emoji），右侧为保存页面时实际写入的 thumbnail.svg。下方是小红书风格卡片效果。</p>
|
|
<div class="compare">
|
|
|
|
<section class="sample">
|
|
<h2>样本 1</h2>
|
|
<div class="pair">
|
|
<div class="thumb"><img src="./malaysia-travel-legacy.svg" alt="旧版" /><span>旧版（横版字卡）</span></div>
|
|
<div class="thumb"><img src="./malaysia-travel-feed.svg" alt="新版" /><span>新版（3:4 精美封面）</span></div>
|
|
<div class="thumb"><img src="./malaysia-travel-generated.svg" alt="生成结果" /><span>generateHtmlThumbnail 输出</span></div>
|
|
</div>
|
|
<div class="feed-grid" style="margin-top:18px">
|
|
<article class="feed-card">
|
|
<div class="feed-cover"><img src="./malaysia-travel-feed.svg" alt="马来西亚旅游攻略 预览图" /></div>
|
|
<div class="feed-body">
|
|
<h3>马来西亚旅游攻略</h3>
|
|
<p>旅行攻略 · 新版 3:4 封面</p>
|
|
</div>
|
|
</article></div>
|
|
</section>
|
|
<section class="sample">
|
|
<h2>样本 2</h2>
|
|
<div class="pair">
|
|
<div class="thumb"><img src="./mapo-tofu-legacy.svg" alt="旧版" /><span>旧版（横版字卡）</span></div>
|
|
<div class="thumb"><img src="./mapo-tofu-feed.svg" alt="新版" /><span>新版（3:4 精美封面）</span></div>
|
|
<div class="thumb"><img src="./mapo-tofu-generated.svg" alt="生成结果" /><span>generateHtmlThumbnail 输出</span></div>
|
|
</div>
|
|
<div class="feed-grid" style="margin-top:18px">
|
|
<article class="feed-card">
|
|
<div class="feed-cover"><img src="./mapo-tofu-feed.svg" alt="麻婆豆腐 预览图" /></div>
|
|
<div class="feed-body">
|
|
<h3>麻婆豆腐</h3>
|
|
<p>美食专题 · 新版 3:4 封面</p>
|
|
</div>
|
|
</article></div>
|
|
</section>
|
|
</div>
|
|
</body>
|
|
</html> |