awesome/design/prototype/index.html

241 lines
11 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Awesome Index · 把网上牛逼的东西收进一个库</title>
<meta name="description" content="精选开源软件、服务与网站的数据库。给人用,也给 AI 用——直接提供 MCP 接口。" />
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect x='4' y='4' width='20' height='20' rx='5' fill='%232436E8'/%3E%3Crect x='10' y='10' width='18' height='18' rx='5' fill='none' stroke='%23FF4D2E' stroke-width='2.5'/%3E%3C/svg%3E" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,800&family=Hanken+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Noto+Sans+SC:wght@400;500;700;900&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="assets/css/main.css" />
</head>
<body>
<header class="topbar">
<div class="container topbar-inner">
<a class="brand" href="index.html">
<span class="brand-mark"><i></i><i></i></span>
AWESOME·INDEX
</a>
<nav class="topnav" aria-label="主导航">
<a href="index.html" aria-current="page">首页</a>
<a href="list.html">浏览全部</a>
<a href="admin.html">管理入口</a>
</nav>
<button class="btn btn-sm nav-toggle" aria-expanded="false">菜单</button>
</div>
</header>
<main>
<!-- 首屏 -->
<section class="hero container">
<div class="hero-grid">
<div class="hero-copy">
<p class="anno rise">~/awesome-index — 给人用,也给 AI 用</p>
<h1 class="rise d1">把网上<span class="hl">牛逼的东西</span><br />收进一个好用的库。</h1>
<p class="hero-sub rise d2">人工精选的开源软件、微服务、SaaS、网站、工具、脚本与插件。每一条都是结构化数据人在页面上搜AI 通过 MCP 直接调用。</p>
<form class="search-instrument rise d3" id="search-form" role="search">
<svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.8-3.8"/></svg>
<input id="q" type="search" placeholder="输入需求关键字,如:自托管相册 / 终端文件管理器…" aria-label="搜索收录内容" />
<button class="btn btn-primary" type="submit">搜索</button>
</form>
<p class="query-echo rise d3" id="query-echo" aria-live="polite"></p>
<a class="mcp-jump rise d4" href="#mcp">
<span class="dot"></span>
给 AI 用?本站提供 MCP 接口
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M12 4v16m0 0 6-6m-6 6-6-6"/></svg>
</a>
<p class="hero-meta rise d4">
<span>收录 <b>1,284</b></span>
<span>标签组 <b>96</b></span>
<span>本周新增 <b>+23</b></span>
<span>存储 <b>DuckDB</b></span>
<span>MCP <b>就绪</b></span>
</p>
</div>
<!-- 右侧视觉:同一条数据的两种读者形态 -->
<div class="hero-visual rise d3" role="presentation">
<p class="spec-label mono">// get_entry("ripgrep") · 同一条数据,两种读者</p>
<div class="spec-machine mono" aria-hidden="true">{
"id": "ripgrep",
"type": "tool",
"name": "ripgrep",
"tags": ["Rust", "CLI"],
"stars": 52300,
"status": "active"
}</div>
<div class="spec-human" aria-hidden="true">
<span class="chip chip-type">工具</span>
<h3>ripgrep</h3>
<p>以正则递归搜索目录,默认尊重 .gitignore是代码库里最快的找东西方式。</p>
<div class="card-tags"><span class="chip">Rust</span><span class="chip">CLI</span></div>
<p class="card-meta">★ 52.3k · 更新于 3 天前</p>
</div>
<button class="btn btn-random" id="random-btn" type="button" title="随机打开一条收录,没有头绪时让库替你挑一个">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" aria-hidden="true"><path d="M3 7h4l10 10h4M17 3l4 4-4 4M3 17h4l2.5-2.5M21 17l-4 4"/></svg>
随机游览
</button>
</div>
</div>
</section>
<!-- 第二屏MCP -->
<section class="mcp on-panel" id="mcp">
<div class="container">
<p class="anno">// mcp.transport: streamable-http · auth: none</p>
<h2 class="rise">同一个库,两种读者。<br />AI 走这边。</h2>
<p class="mcp-sub rise d1">本站所有条目同时暴露为 MCPModel Context Protocol接口。把下面的地址加进你的 AI 客户端Claude、Cursor 或任何支持 MCP 的 Agent 就能直接搜索与读取这个库。</p>
<!-- 一句话交给 Agent 自己完成配置 -->
<div class="agent-prompt rise d1">
<div>
<h3>不想手动改配置?</h3>
<p class="mono">复制下面这句话发给你的 Agent它会自己完成接入</p>
<blockquote class="mono" id="agent-sentence">「请把 URL 为 https://honor3.com/mcp 的 MCP 服务器添加到你的客户端配置中,名称用 awesome-index完成后告诉我现在可以调用哪些工具。」</blockquote>
</div>
<button class="copy-btn" type="button" data-copy="请把 URL 为 https://honor3.com/mcp 的 MCP 服务器添加到你的客户端配置中,名称用 awesome-index完成后告诉我现在可以调用哪些工具。">复制给 Agent</button>
</div>
<div class="mcp-grid">
<aside class="endpoint-card rise d2">
<h3>MCP Server URL</h3>
<div class="endpoint-url">
<code id="mcp-url">https://honor3.com/mcp</code>
<button class="copy-btn" type="button" data-copy="https://honor3.com/mcp">复制</button>
</div>
<p class="endpoint-status"><span class="dot"></span>在线 · 协议 2025-06-18</p>
<p class="endpoint-note">只读访问,无需密钥。写入类操作仅限管理台与白名单来源。</p>
</aside>
<div class="steps">
<div class="step rise d2">
<div class="step-head"><span class="step-no">01</span><h3>把服务器加进客户端配置</h3></div>
<pre>{
<span class="k">"mcpServers"</span>: {
<span class="k">"awesome-index"</span>: {
<span class="k">"url"</span>: <span class="s">"https://honor3.com/mcp"</span>
}
}
}</pre>
</div>
<div class="step rise d3">
<div class="step-head"><span class="step-no">02</span><h3>可用的工具</h3></div>
<table class="tools-table">
<thead><tr><th>tool</th><th>说明</th></tr></thead>
<tbody>
<tr><td>search_entries</td><td>按关键字、类型、标签搜索收录内容</td></tr>
<tr><td>get_entry</td><td>获取单条的完整详情与元数据</td></tr>
<tr><td>random_entry</td><td>随机返回一条,用于探索发现</td></tr>
<tr><td>list_tags</td><td>列出全部标签组及其嵌套结构</td></tr>
</tbody>
</table>
</div>
<div class="step rise d4">
<div class="step-head"><span class="step-no">03</span><h3>直接问你的 AI</h3></div>
<pre>「用 awesome-index 找三个能自托管的相册方案,
按 star 数排序,给我 repo 链接。」</pre>
</div>
</div>
</div>
</div>
</section>
<!-- 第三屏:最近收录 -->
<section class="recent container">
<div class="section-head">
<div>
<p class="anno">// resource: recent_entries · limit 4</p>
<h2>最近收录</h2>
</div>
<a href="list.html">查看全部 →</a>
</div>
<div class="card-grid">
<a class="card" href="detail.html">
<span class="chip chip-type">工具</span>
<h3>ripgrep</h3>
<p>以正则递归搜索目录,默认尊重 .gitignore是代码库里最快的找东西方式。</p>
<div class="card-tags"><span class="chip">Rust</span><span class="chip">CLI</span></div>
<p class="card-meta">★ 52.3k · 更新于 3 天前</p>
</a>
<a class="card" href="detail.html">
<span class="chip chip-type">应用</span>
<h3>Uptime Kuma</h3>
<p>自托管的服务可用性监控,漂亮的状态页、通知渠道齐全,五分钟部署完事。</p>
<div class="card-tags"><span class="chip">JavaScript</span><span class="chip">自托管</span></div>
<p class="card-meta">★ 71.9k · 更新于 1 周前</p>
</a>
<a class="card" href="detail.html">
<span class="chip chip-type">网站</span>
<h3>Excalidraw</h3>
<p>手绘风格的白板画图工具,架构图和示意草图的好搭档,支持实时协作。</p>
<div class="card-tags"><span class="chip">TypeScript</span><span class="chip">在线服务</span></div>
<p class="card-meta">★ 96.1k · 更新于 2 天前</p>
</a>
<a class="card" href="detail.html">
<span class="chip chip-type">微服务</span>
<h3>minio</h3>
<p>兼容 S3 API 的对象存储,单二进制即可跑起来,自建存储事实上的标准答案。</p>
<div class="card-tags"><span class="chip">Go</span><span class="chip">存储</span></div>
<p class="card-meta">★ 54.6k · 更新于 5 小时前</p>
</a>
</div>
</section>
</main>
<!-- 页脚 -->
<footer class="footer on-panel">
<div class="container">
<div class="footer-grid">
<div class="footer-brand">
<a class="brand" href="index.html" style="color:var(--paper-on-panel)">
<span class="brand-mark"><i style="border-color:#5b6cff"></i><i></i></span>
AWESOME·INDEX
</a>
<p>一个人工维护的「牛逼东西」数据库。条目可人工录入,也可经 AI 接口进入;坏数据会被灰掉,好东西值得被检索。</p>
</div>
<div>
<h4>站内</h4>
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="list.html">浏览全部</a></li>
<li><a href="detail.html">随机一条(示例)</a></li>
<li><a href="admin.html">管理入口 →</a></li>
</ul>
</div>
<div>
<h4>给 AI</h4>
<ul>
<li><a href="#mcp-url" class="mono">GET /mcp</a></li>
<li><a href="#">MCP 使用文档</a></li>
<li><a href="#">全量数据导出JSON</a></li>
</ul>
</div>
<form class="feedback" data-demo-submit="已收到,感谢反馈">
<h4><label for="fb-text">快速反馈</label></h4>
<textarea id="fb-text" placeholder="坏链接 / 推荐条目 / 吐槽都行"></textarea>
<button type="submit">发送</button>
<span class="alt">或写信到 <a href="mailto:admin@honor3.com">admin@honor3.com</a></span>
</form>
</div>
<div class="footer-bar">
<span>© 2026 honor3.com · Awesome Index</span>
<span>由 DuckDB 驱动 · MCP 就绪 · 数据每日快照</span>
</div>
</div>
</footer>
<div class="toast" role="status"></div>
<script src="assets/js/main.js"></script>
</body>
</html>