open-modules/public/index.html

118 lines
5.0 KiB
HTML
Raw Permalink Normal View History

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>bingshuo / open-modules</title>
<style>
:root{--bg:#0d1117;--s:#161b22;--b:#30363d;--t:#c9d1d9;--d:#8b949e;--a:#58a6ff;--g:#3fb950}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg);color:var(--t);font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;min-height:100vh}
.hdr{background:var(--s);border-bottom:1px solid var(--b);padding:24px 32px}
.hdr h1{font-size:22px;display:flex;align-items:center;gap:10px}
.hdr .badge{border:1px solid var(--b);border-radius:12px;padding:2px 10px;font-size:11px;color:var(--d)}
.hdr .desc{font-size:13px;color:var(--d);margin-top:8px;max-width:600px}
.main{padding:32px;max-width:900px;margin:0 auto}
.card{background:var(--s);border:1px solid var(--b);border-radius:12px;padding:28px;margin-bottom:20px}
.card h2{font-size:18px;margin-bottom:12px}
.card .info{font-size:13px;color:var(--d);line-height:1.8}
.card .info code{background:#0d1117;padding:2px 6px;border-radius:4px;font-size:12px;color:var(--a)}
.module{background:var(--s);border:1px solid var(--b);border-radius:12px;padding:24px;margin-bottom:16px;display:flex;gap:20px;align-items:flex-start;cursor:pointer;transition:border-color .2s}
.module:hover{border-color:var(--a)}
.module .icon{font-size:36px;flex-shrink:0}
.module .body{flex:1}
.module .name{font-size:16px;font-weight:600;margin-bottom:4px}
.module .id{font-size:11px;color:var(--d);font-family:monospace;margin-bottom:6px}
.module .tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.module .tag{padding:2px 8px;border:1px solid var(--b);border-radius:8px;font-size:10px;color:var(--d)}
.module .tag.g{border-color:var(--g);color:var(--g)}
.step{display:flex;gap:12px;padding:12px;background:#0d1117;border-radius:8px;align-items:flex-start;margin-bottom:10px}
.step .n{width:24px;height:24px;border-radius:50%;background:var(--a);color:#0d1117;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0}
.step .b{font-size:13px;line-height:1.6}
.step .b .t{font-weight:600;margin-bottom:2px}
.step .b .d{color:var(--d)}
pre{background:#0d1117;border:1px solid var(--b);border-radius:8px;padding:16px;font-size:12px;line-height:1.6;overflow-x:auto;color:var(--t)}
pre .c{color:#6e7681}
.ft{text-align:center;padding:24px;font-size:12px;color:var(--d);border-top:1px solid var(--b)}
</style>
</head>
<body>
<header class="hdr">
<h1>open-modules <span class="badge">public</span></h1>
<p class="desc">光湖公开模块仓库 · 任何 AI 学完 HLDP 字典即可使用 · 模块热插拔</p>
</header>
<div class="main">
<div class="card">
<h2>外部 AI 接入流程</h2>
<div class="step">
<div class="n">1</div>
<div class="b"><div class="t">学 HLDP 字典</div><div class="d"><code>HLDP-SPEC-v2.0.md</code>,理解 @trigger / @emergence / @lock / @why</div></div>
</div>
<div class="step">
<div class="n">2</div>
<div class="b"><div class="t">看注册表</div><div class="d"><code>module-registry.json</code>,获取可用模块列表</div></div>
</div>
<div class="step">
<div class="n">3</div>
<div class="b"><div class="t">读模块 README</div><div class="d">进入模块目录读 <code>README.md</code>,了解参数和用法</div></div>
</div>
<div class="step">
<div class="n">4</div>
<div class="b"><div class="t">clone + 部署</div><div class="d"><code>git clone https://guanghulab.com/code/bingshuo/open-modules.git && npm install && PORT=3913 node server.js</code></div></div>
</div>
</div>
<h2 style="font-size:16px;margin-bottom:12px;color:var(--d)">可用模块</h2>
<div class="module">
<div class="icon">📕</div>
<div class="body">
<div class="name">小红书封面生成器</div>
<div class="id">MODULE-COVER-001</div>
<div class="tags">
<span class="tag g">active</span>
<span class="tag">MIT</span>
<span class="tag">Puppeteer</span>
<span class="tag">Express</span>
</div>
<div class="info">
输入标题+描述 → 生成 1080×1440 小红书封面图。<br>
纯 HTML/CSS 排版渲染 · 零 GPU · 零 AI 生图 · 全免费。<br>
淯径: <code>image-generator/xiaohongshu-cover/</code>
</div>
</div>
</div>
<div class="card">
<h2>API 快速参考</h2>
<pre>
<span class="c"># 获取模板列表</span>
GET https://guanghulab.com/cover/api/templates
<span class="c"># 生成封面
</span>
POST https://guanghulab.com/cover/api/generate
Body: {
"templateId": "xiaohongshu",
"presetId": "warm",
"title": "标题",
"subtitle": "副标题|副标题",
"tag": "Puppeteer,Node.js"
}
<span class="c"># 返回
</span>
{ "success":true, "url":"/output/cover_xxx.png" }</pre>
</div>
</div>
<footer class="ft">
guanghulab.com/code/bingshuo/open-modules · 国作登字-2026-A-00037559
</footer>
</body>
</html>