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.
138 lines
5.8 KiB
HTML
138 lines
5.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>Sticky Flowchart · HTML Anything Onboarding</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Caveat:wght@500;600;700&family=Patrick+Hand&family=Inter:wght@400;500;600&family=IBM+Plex+Mono&display=swap" rel="stylesheet" />
|
|
<style>
|
|
body {
|
|
font-family:'Patrick Hand','Caveat',cursive;
|
|
background:
|
|
linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px),
|
|
#f4ede1;
|
|
background-size: 40px 40px;
|
|
color:#2a2a2a;
|
|
min-height:100vh;
|
|
margin:0;
|
|
}
|
|
.sticky {
|
|
width:200px; min-height:150px;
|
|
padding:14px 16px;
|
|
box-shadow: 0 6px 14px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
|
|
position:absolute;
|
|
border-radius: 2px 2px 4px 4px;
|
|
}
|
|
.sticky::before {
|
|
content:''; position:absolute; top:-8px; left:50%; transform:translateX(-50%) rotate(-2deg);
|
|
width:80px; height:18px; background:rgba(255,255,255,0.6);
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
|
|
}
|
|
.yellow { background:#fcd34d; transform: rotate(-1.5deg); }
|
|
.peach { background:#fca5a5; transform: rotate(1.2deg); }
|
|
.mint { background:#a7f3d0; transform: rotate(-0.8deg); }
|
|
.sky { background:#a5b4fc; transform: rotate(2deg); }
|
|
.sticky h3 { font-family:'Caveat',cursive; font-size:22px; font-weight:700; line-height:1.1; }
|
|
.sticky p { font-family:'Patrick Hand',cursive; font-size:14px; line-height:1.3; margin-top:6px; opacity:0.85; }
|
|
.num { font-family:'Caveat',cursive; font-weight:700; font-size:28px; line-height:1; }
|
|
.mono { font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.12em; text-transform:uppercase; }
|
|
.cursor-tag {
|
|
position:absolute; transform: translate(-50%,-100%);
|
|
background:#1a1a1a; color:#fff; font-family:'Inter',sans-serif; font-size:10px;
|
|
padding:2px 8px; border-radius:10px; font-weight:600;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="relative overflow-hidden">
|
|
<!-- header -->
|
|
<header class="px-12 pt-10 flex items-baseline justify-between">
|
|
<div class="mono opacity-70">FLOW · ONBOARDING · 2026</div>
|
|
<h1 style="font-family:'Caveat',cursive;font-size:36px;font-weight:700">HTML Anything · 新用户上手</h1>
|
|
<div class="mono opacity-70">FRAME-FLOWCHART-STICKY</div>
|
|
</header>
|
|
|
|
<!-- canvas -->
|
|
<div class="relative" style="height:780px">
|
|
|
|
<!-- SVG connectors layer -->
|
|
<svg class="absolute inset-0 w-full h-full" viewBox="0 0 1500 780" preserveAspectRatio="none" style="pointer-events:none">
|
|
<defs>
|
|
<marker id="arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto">
|
|
<path d="M0,0 L10,5 L0,10 z" fill="#2a2a2a"/>
|
|
</marker>
|
|
</defs>
|
|
<!-- 1 → 2 -->
|
|
<path d="M 240 240 C 320 240, 360 240, 420 240" fill="none" stroke="#2a2a2a" stroke-width="2.5" stroke-linecap="round" marker-end="url(#arrow)"/>
|
|
<!-- 2 → 3 -->
|
|
<path d="M 620 240 C 700 240, 740 240, 800 240" fill="none" stroke="#2a2a2a" stroke-width="2.5" stroke-linecap="round" marker-end="url(#arrow)"/>
|
|
<!-- 3 → 4 -->
|
|
<path d="M 1000 240 C 1100 240, 1140 290, 1100 360 S 980 480, 880 480" fill="none" stroke="#2a2a2a" stroke-width="2.5" stroke-linecap="round" marker-end="url(#arrow)"/>
|
|
<!-- 4 → 5 -->
|
|
<path d="M 680 480 C 580 480, 540 480, 480 480" fill="none" stroke="#2a2a2a" stroke-width="2.5" stroke-linecap="round" marker-end="url(#arrow)"/>
|
|
<!-- 5 → 6 -->
|
|
<path d="M 280 480 C 200 480, 160 540, 180 600 S 280 700, 380 700" fill="none" stroke="#2a2a2a" stroke-width="2.5" stroke-linecap="round" marker-end="url(#arrow)"/>
|
|
<!-- branch: 2 → installer (dashed) -->
|
|
<path d="M 520 320 C 520 400, 560 440, 700 440" fill="none" stroke="#2a2a2a" stroke-width="2" stroke-linecap="round" stroke-dasharray="8 6" marker-end="url(#arrow)"/>
|
|
</svg>
|
|
|
|
<!-- node 1: 打开 -->
|
|
<div class="sticky yellow" style="top:160px; left:60px">
|
|
<div class="num">01</div>
|
|
<h3 class="mt-1">打开 localhost:3456</h3>
|
|
<p>浏览器进入主界面</p>
|
|
</div>
|
|
|
|
<!-- node 2: 扫 agent -->
|
|
<div class="sticky peach" style="top:160px; left:420px">
|
|
<div class="num">02</div>
|
|
<h3 class="mt-1">扫描本地 Agent</h3>
|
|
<p>列出 17 个 CLI 中已登录的那几个</p>
|
|
</div>
|
|
|
|
<!-- node 3: 选模板 -->
|
|
<div class="sticky mint" style="top:160px; left:800px">
|
|
<div class="num">03</div>
|
|
<h3 class="mt-1">选 75 个模板之一</h3>
|
|
<p>按场景 / 关键字搜</p>
|
|
</div>
|
|
|
|
<!-- node 4: 粘内容 -->
|
|
<div class="sticky sky" style="top:400px; left:680px">
|
|
<div class="num">04</div>
|
|
<h3 class="mt-1">粘 MD / CSV / 图</h3>
|
|
<p>自动识别格式</p>
|
|
</div>
|
|
|
|
<!-- node 5: 转换 -->
|
|
<div class="sticky yellow" style="top:400px; left:280px">
|
|
<div class="num">05</div>
|
|
<h3 class="mt-1">⌘+Enter 转换</h3>
|
|
<p>SSE 流式刷新预览</p>
|
|
</div>
|
|
|
|
<!-- node 6: 复制 -->
|
|
<div class="sticky mint" style="top:620px; left:380px">
|
|
<div class="num">06</div>
|
|
<h3 class="mt-1">一键复制 / 下载</h3>
|
|
<p>公众号 / 推特 / PNG / HTML</p>
|
|
</div>
|
|
|
|
<!-- branch: 安装 agent -->
|
|
<div class="sticky peach" style="top:400px; left:700px; transform:rotate(3deg); width:200px">
|
|
<div class="num">⤳</div>
|
|
<h3 class="mt-1">分支: 装个 CLI</h3>
|
|
<p>没有? brew install claude</p>
|
|
</div>
|
|
|
|
<!-- cursor tag -->
|
|
<div class="cursor-tag" style="top:280px; left:520px;">🟠 you</div>
|
|
</div>
|
|
|
|
<footer class="px-12 pb-6 flex items-baseline justify-between mono opacity-60">
|
|
<span>FLOWCHART · WHITEBOARD STYLE · 6 NODES + 1 BRANCH</span>
|
|
<span>html-anything.dev/onboarding</span>
|
|
</footer>
|
|
</body>
|
|
</html>
|