mirror of
https://github.com/nexu-io/open-design.git
synced 2026-09-20 06:15:06 +08:00
pftom
d3d95121f3
- Updated the `sortByVisualAppeal` function to prioritize featured ranks, ensuring that curated plugins are displayed prominently. - Added tests to verify the new sorting logic, ensuring that plugins with numeric featured ranks are sorted correctly ahead of others. - Introduced new example templates for a magazine article layout, a Twitter share card, and a Xiaohongshu card, expanding the available options for users. - Enhanced the overall plugin preview experience by integrating these new templates, providing users with more visually appealing and functional examples. This update significantly improves the plugin sorting mechanism and enriches the template offerings, enhancing user engagement and experience.
88 lines
5.6 KiB
HTML
88 lines
5.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>HTML Anything 0.1 海报</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@600;700;800;900&family=Noto+Sans+SC:wght@500;700;900&family=JetBrains+Mono:wght@500&display=swap" rel="stylesheet">
|
|
<style>
|
|
body { margin:0; background:#0a0a0a; font-family:'Inter Tight','Noto Sans SC',sans-serif; display:grid; place-items:center; padding:24px 0; }
|
|
.poster { position:relative; width:1080px; max-width:96vw; aspect-ratio:9/16; border-radius:32px; overflow:hidden; color:#fff;
|
|
background:
|
|
radial-gradient(ellipse at 80% 0%, rgba(233,185,74,0.55), transparent 55%),
|
|
radial-gradient(ellipse at 20% 100%, rgba(108,58,166,0.5), transparent 55%),
|
|
linear-gradient(135deg,#c96442 0%,#15140f 60%,#1a0e2b 100%);
|
|
display:flex; flex-direction:column; padding:80px 70px;
|
|
box-shadow:0 40px 120px -20px rgba(0,0,0,0.7);
|
|
}
|
|
.grain { position:absolute; inset:0; pointer-events:none; opacity:0.18; background-image:radial-gradient(rgba(255,255,255,0.4) 1px, transparent 1px); background-size:3px 3px; }
|
|
.label { font-size:13px; font-weight:600; letter-spacing:0.28em; text-transform:uppercase; opacity:0.85; }
|
|
.glyph { width:120px; height:120px; border-radius:32px; display:grid; place-items:center; background:rgba(255,255,255,0.08); backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,0.18); }
|
|
h1 { font-family:'Inter Tight',sans-serif; font-weight:900; font-size:148px; line-height:0.95; letter-spacing:-0.04em; margin:0; }
|
|
.em { font-family:Georgia, 'Noto Serif SC', serif; font-weight:700; font-style:italic; color:#e9b94a; }
|
|
.feature { display:flex; align-items:flex-start; gap:18px; }
|
|
.feature .ic { width:42px; height:42px; border-radius:12px; background:rgba(255,255,255,0.12); display:grid; place-items:center; font-size:22px; flex-shrink:0; }
|
|
.feature .t { font-size:22px; font-weight:600; }
|
|
.feature .d { font-size:15px; opacity:0.7; line-height:1.55; margin-top:4px; }
|
|
.qr { width:120px; height:120px; border-radius:14px; background:#fff; padding:12px; }
|
|
.qr svg { width:100%; height:100%; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="poster">
|
|
<div class="grain"></div>
|
|
|
|
<div class="flex items-center justify-between">
|
|
<div class="label">RELEASE · 2026.05</div>
|
|
<div class="glyph">
|
|
<div style="font-family:Georgia,serif; font-style:italic; font-size:78px; font-weight:700; color:#fff">H</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="margin:auto 0; flex:none">
|
|
<div class="label" style="margin-bottom:24px">v0.1 · 已发布 / Now Available</div>
|
|
<h1>HTML<br/><span class="em">Anything</span></h1>
|
|
<div style="font-size:30px; font-weight:500; opacity:0.92; margin-top:36px; max-width:560px; line-height:1.35">
|
|
任何文档 → 世界级好看的 HTML,<br/>
|
|
用你<span class="em" style="color:#e9b94a">本地</span>的 AI agent。
|
|
</div>
|
|
</div>
|
|
|
|
<div style="display:grid; grid-template-columns:1fr; gap:18px; margin:48px 0 32px">
|
|
<div class="feature"><div class="ic">🎨</div><div><div class="t">9 套世界级模板</div><div class="d">PPT · 简历 · 海报 · 小红书 · 数据报告 …</div></div></div>
|
|
<div class="feature"><div class="ic">🔌</div><div><div class="t">8 个本地 agent 自动检测</div><div class="d">Claude / Cursor / Codex / Gemini / Copilot …</div></div></div>
|
|
<div class="feature"><div class="ic">🗝️</div><div><div class="t">0 API Key</div><div class="d">复用你已经登录的 CLI session, 0 边际成本</div></div></div>
|
|
<div class="feature"><div class="ic">📋</div><div><div class="t">一键发布</div><div class="d">公众号 / 推特 / 知乎 / PNG, 直接粘贴</div></div></div>
|
|
</div>
|
|
|
|
<div style="display:flex; align-items:center; gap:24px; padding-top:24px; border-top:1px solid rgba(255,255,255,0.18)">
|
|
<div class="qr">
|
|
<svg viewBox="0 0 33 33" xmlns="http://www.w3.org/2000/svg">
|
|
<rect width="33" height="33" fill="#fff"/>
|
|
<g fill="#0a0a0a">
|
|
<rect x="2" y="2" width="9" height="9" fill="none" stroke="#0a0a0a" stroke-width="2"/>
|
|
<rect x="5" y="5" width="3" height="3"/>
|
|
<rect x="22" y="2" width="9" height="9" fill="none" stroke="#0a0a0a" stroke-width="2"/>
|
|
<rect x="25" y="5" width="3" height="3"/>
|
|
<rect x="2" y="22" width="9" height="9" fill="none" stroke="#0a0a0a" stroke-width="2"/>
|
|
<rect x="5" y="25" width="3" height="3"/>
|
|
<rect x="13" y="2" width="2" height="2"/><rect x="17" y="2" width="2" height="2"/>
|
|
<rect x="13" y="6" width="2" height="2"/><rect x="15" y="9" width="2" height="2"/>
|
|
<rect x="2" y="13" width="2" height="2"/><rect x="6" y="13" width="2" height="2"/>
|
|
<rect x="13" y="13" width="2" height="2"/><rect x="17" y="13" width="2" height="2"/><rect x="21" y="13" width="2" height="2"/>
|
|
<rect x="13" y="17" width="2" height="2"/><rect x="19" y="15" width="2" height="2"/>
|
|
<rect x="22" y="17" width="2" height="2"/><rect x="26" y="17" width="2" height="2"/>
|
|
<rect x="13" y="21" width="2" height="2"/><rect x="17" y="21" width="2" height="2"/>
|
|
<rect x="22" y="22" width="2" height="2"/><rect x="26" y="26" width="2" height="2"/>
|
|
<rect x="22" y="29" width="2" height="2"/><rect x="29" y="22" width="2" height="2"/>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<div style="font-family:'JetBrains Mono',monospace; font-size:14px; opacity:0.95">$ pnpm dlx html-anything</div>
|
|
<div style="font-size:14px; opacity:0.7; margin-top:6px">github.com/your-org/html-anything</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |