高中英语3500词是一款纯前端、无需安装的浏览器背单词工具。它内置高考核心词汇，采用卡片式记忆设计，支持释义隐藏、朗读、收藏标记和进度统计，所有学习状态都保存在浏览器本地。

• 内置高考词汇库：覆盖高中英语 3500 核心词，打开即用，无需上传词表。
• 卡片式记忆：大字显示单词，点击卡片或按空格即可显示/隐藏中文释义。
• 顺序与随机模式：支持顺序背诵和随机抽词，一键切换复习方式。
• 朗读发音：基于 Web Speech API，支持单词朗读、语速调节和语音选择。
• 自动朗读设置：可开启切换单词时自动朗读、显示释义时自动朗读。
• 收藏/标为不熟：遇到重点或不会的单词，按 S 或点击星标收藏，便于集中复习。
• 仅看收藏过滤：开启过滤后只显示已收藏单词，针对性巩固薄弱词汇。
• 显示释义后自动下一个：可设置延迟时间，自动推进到下一张卡片。
• 单词列表与搜索：侧滑单词列表支持按英文或中文释义快速搜索跳转。
• 进度统计：顶部显示当前进度条和第几个 / 总词数。
• 学习状态本地保存：收藏、设置、释义显示状态均通过 localStorage 保存，刷新不丢失。
• 快捷键支持：空格/点击显示释义、← → 翻页、R 随机、P 朗读、A 自动朗读、S 收藏、L 列表、G 设置。

打开 高中英语3500词。 点击卡片或按空格查看释义。 熟悉的词按 → 或点击"下一个 →"继续；不熟悉的词按 S 收藏。

Read Aloud 是一款纯前端、无需上传文本的浏览器朗读工具。它基于 Web Speech API 实现，全部文本处理与语音合成都在本地完成，适合朗读英文范文、中文小说、演讲稿、技术文档等长文本。

• 本地朗读：文本不离开浏览器，无上传、无服务端、保护隐私。
• 自动分句：按段落和标点自动切分长文，避免单次文本过长被浏览器截断。
• 当前句高亮：朗读时文本区切换为阅读视图，当前句子高亮并自动滚动到视野中央。
• 点击跳转播放：在阅读视图中单击任意句子，即可从该句开始播放。
• 语速与音调调节：支持 0.5x ~ 2.0x 语速调节，以及 0.5 ~ 2.0 的音调调节。
• 多语音选择：自动根据语言选择系统语音，也支持手动切换。
• 中英文支持：自动检测中英文比例，或手动指定中文 / 英文。
• 进度与时间显示：实时显示当前句数、总句数和已用时间。

1. 打开 Read Aloud。
2. 将需要朗读的文本粘贴到编辑区。
3. 点击 ▶ 朗读 开始播放。
4. 需要暂停时点击 ⏸ 暂停，或点击 ⏹ 停止 结束朗读并恢复编辑。

• 在编辑区内按 Ctrl / ⌘ + Space：播放 / 暂停。
• 焦点在编辑区外时，按 Space：快速播放 / 暂停。
• 按 Esc：关闭帮助窗口。

Read Aloud 依赖 Web Speech API，建议使用 Safari、Chrome、Edge 等现代浏览器。

极简长文朗读器是一款基于浏览器 Web Speech API 的本地文本朗读工具。它采用左右分屏的极简设计：左侧输入文本，右侧实时生成可朗读的阅读视图，全部处理都在浏览器内完成，无需上传、无需后端。

• 左右分屏实时同步：左侧编辑文本，右侧阅读视图即时解析渲染，边写边读。
• 中英文智能识别：自动判断文本为中文还是英文，也可手动选择语种。
• 按句高亮：朗读时当前句子以黄色高亮显示，并自动滚动到视野中央。
• 点击跳转播放：点击阅读视图中的任意句子，即可从该句开始朗读。
• 语速调节：支持 0.5x ~ 2.0x 语速调节，拖动滑块即可实时生效。
• 发音人选择：自动加载系统语音，支持手动切换中英文发音人。
• 防中断保活：针对部分浏览器长段朗读容易中断的问题，内置保活机制。
• 内置范例：一键加载中英文示例文本，快速体验朗读效果。

特性	极简长文朗读器	Read Aloud
界面	左右分屏，实时同步	编辑/阅读视图切换
分句	按中英文标点实时切分	段落 + 句子双层切分
音调调节	无	支持
进度显示	无	句数 / 时间
设计	极简 Tailwind 风格	卡片式工具风格

可以根据个人喜好选择更适合自己的一款，两者都是纯浏览器本地运行。

剪贴板备份是一款纯前端、无需后端的浏览器剪贴板历史管理工具。它支持保存文本、HTML、RTF、图片等多种剪贴板格式，利用浏览器 IndexedDB 本地持久化存储，随时恢复或下载历史内容。

• 多格式剪贴板捕获：支持保存文本、HTML、RTF、URL 列表、PNG / JPEG / GIF / WebP 图片等多种剪贴板格式。
• 本地持久化存储：所有备份数据通过 IndexedDB 存储在浏览器本地，刷新页面或关闭浏览器后数据不丢失。
• 多格式预览：支持按格式切换预览，文本、HTML、图片分别渲染，HTML 内容经 DOMPurify 安全过滤。
• 一键恢复复制：点击复制按钮即可将备份内容还原到系统剪贴板，图片自动转换为 PNG 格式以兼容 Clipboard API。
• 逐格式下载：每个备份的每种格式均可单独下载为对应文件（txt、html、rtf、png 等）。
• 相对时间显示：备份时间以"刚刚""5 分钟前""2 小时前"等相对时间展示，直观易读。
• 全页粘贴支持：不仅可以在粘贴区域粘贴，在页面任意位置按 Ctrl+V 均可触发备份。
• 批量清空：支持一键删除所有备份，操作前需确认，防止误删。

打开 剪贴板备份。 点击页面粘贴区域并按 Ctrl + V 粘贴内容，或在页面任意位置直接粘贴。 备份自动保存并显示在列表中，可预览、复制或下载。

SVG 渲染器是一款纯前端的在线 SVG 预览工具。它支持粘贴 SVG 代码或从 URL 加载 SVG 文件，右侧实时渲染预览，全部处理都在浏览器内完成，无需上传、无需后端。

• 双模式输入：支持直接粘贴 SVG 代码，或输入 URL 从网络加载 SVG 文件。
• 实时预览：左侧编辑或粘贴代码，右侧即时渲染 SVG 图形，所见即所得。
• 安全沙箱渲染：使用 DOMPurify 对 SVG 进行安全过滤，并在沙箱 iframe 中渲染，防范 XSS 和恶意脚本。
• 智能宽高比：自动解析 SVG 的 viewBox 或 width/height 属性，保持正确的图形比例。
• URL 分享：通过 URL hash 加载的 SVG 地址可直接分享，他人打开即可查看同一图形。
• 响应式布局：桌面端左右分屏，移动端自动切换为上下堆叠，适配各种设备。
• 内置示例：首次打开自动加载示例 SVG，快速体验渲染效果。

1. 打开 SVG 渲染器。
2. 点击 粘贴 标签，将 SVG 代码粘贴到左侧编辑区。
3. 或点击 URL 标签，输入 SVG 文件地址后点击 加载。
4. 右侧预览区即时显示渲染结果。

SVG 渲染器为纯静态 HTML 页面，兼容所有现代浏览器。建议使用 Chrome、Edge、Safari 或 Firefox 最新版本。

HTML + CSS + JavaScript DOMPurify（SVG 安全过滤） 无后端、无依赖、纯

DOT 文件渲染器是一款纯前端的在线 Graphviz 图形预览工具。只需在浏览器中粘贴 DOT 语言描述的图结构代码，即可实时渲染为有向图或无向图 SVG，支持通过 URL 片段直接分享图形代码，无需安装任何本地软件。

• 实时渲染：输入 DOT 代码后自动防抖渲染，500ms 内即时出图。
• URL 分享：图形代码自动编码到 URL 片段中，复制链接即可分享完整图形。
• 加载示例：内置完整流程图示例，一键体验渲染效果。
• 错误提示：DOT 语法错误时，在输出区显示详细错误信息。
• 纯浏览器运行：基于 Viz.js 在浏览器端完成全部渲染，无后端、无上传。

1. 打开 DOT 文件渲染器。
2. 在输入区粘贴您的 .dot 文件内容。
3. 图形会自动渲染到下方的输出区。
4. 复制当前浏览器地址栏中的 URL 即可分享图形。

• 有向图（digraph）
• 无向图（graph）
• 节点样式、边标签、布局方向（rankdir）等 Graphviz 标准属性

• HTML + CSS + JavaScript
• Viz.js（WebAssembly 版 Graphviz）
• 无后端、无依赖、纯静态页面

我要设计一个WEB应用（HTML），在线渲染DOT文件。有什么好的思路？先分析需求，进行设计，再实现（一个html），存储到 @tools/ 目录。

Markdown 渲染器是一款纯前端的在线 Markdown 转 HTML 工具。它调用 GitHub Markdown API 进行渲染，支持 GitHub Flavored Markdown (GFM) 标准，输出干净的 HTML 代码和实时预览，无需安装任何软件，打开浏览器即可使用。

• GitHub API 渲染：调用 GitHub 官方 Markdown API，渲染结果与 GitHub 页面保持一致。
• GFM 模式切换：支持标准 Markdown 和 GitHub Flavored Markdown 两种模式，一键切换。
• 实时预览：渲染后的结果即时显示在预览区，包括代码高亮、表格、引用块等样式。
• 自动清理 HTML：可选清理隐藏元素（aria-hidden、nofollow 等），整理 heading 结构，输出更干净的 HTML。
• 自动生成目录：根据文章中的 h2-h6 标题自动提取并生成可点击的目录导航。
• 复制 HTML：一键复制清理后的 HTML 源码，方便粘贴到博客或编辑器中。
• 复制富文本：一键复制带格式的富文本，可直接粘贴到 Word、Notion、邮件等支持富文本的地方。
• 自动保存：输入内容自动保存到浏览器 localStorage，刷新页面不丢失。

打开 Markdown 渲染器。 在编辑区粘贴需要渲染的 Markdown 文本。

二维码识别器是一款纯前端在线 QR 码识别工具，基于 jsQR 库实现。它支持图片上传、拖拽、剪贴板粘贴以及摄像头实时扫码四种方式，所有图片处理均在浏览器本地完成，不会上传到任何服务器，保护隐私安全。

• 图片上传识别：点击或拖拽图片文件到识别区域，即可自动解析二维码内容。
• 剪贴板粘贴识别：直接按 Ctrl / ⌘ + V 粘贴剪贴板中的图片，无需先保存文件。
• 摄像头实时扫码：调用设备摄像头，持续扫描画面中的二维码，适合快速识别实物上的 QR 码。
• 前后摄像头切换：支持在设备的前置与后置摄像头之间切换，适应不同扫码场景。
• 双指缩放对焦：摄像头模式下支持双指捏合缩放画面，双击重置缩放，方便对准远距离或微小二维码。
• UTF-8 中文支持：底层使用 TextDecoder('utf-8') 解码二进制数据，确保中文、日文等非 ASCII 字符正确显示。
• 链接自动识别：识别结果若为 URL，自动渲染为可点击的超链接，一键跳转。
• 一键复制结果：识别后点击"复制识别结果"按钮，快速将内容复制到剪贴板。
• 纯前端隐私安全：所有图像处理在本地完成，图片不离开浏览器，无需担心隐私泄露。

二维码识别器依赖 getUserMedia 和 jsQR 库，建议使用 Chrome、Edge、Safari、Firefox 等现代浏览器。

一款纯前端在线二维码生成工具，支持为网址、文本和 WiFi 网络创建可扫描的二维码，可自定义样式、尺寸与颜色，并直接下载 PNG 图片。

• 双模式生成：支持「网址 / 文本」和「WiFi 网络」两种二维码类型，一键切换
• WiFi 二维码：输入 SSID、密码、选择加密方式（WPA/WEP/无），支持隐藏网络，手机扫码即可自动连接
• 自定义样式：提供「方块」和「流体」两种视觉风格，流体样式采用自适应圆角与同心圆定位图案
• 灵活尺寸：小 / 中 / 大 三档尺寸可选，适配不同使用场景
• 颜色与边框：可自定义二维码颜色，并选择是否添加外圆角边框
• 实时预览：调整样式、尺寸、颜色或边框后，二维码实时更新
• 下载 PNG：一键下载高清 PNG 图片，可直接用于打印或分享
• 复制图片：支持将二维码图片复制到剪贴板，方便粘贴到文档或聊天中
• 中文支持：内置 UTF-8 编码处理，完美支持中文文本与中文 WiFi 名称
• 纯前端运行：所有计算在浏览器本地完成，无需上传数据，保护隐私

1. 打开页面，选择「网址 / 文本」或「WiFi」模式
2. 输入对应内容（网址、文本，或 WiFi 网络信息）
3. 选择样式、尺寸、颜色，是否添加边框
4. 点击「生成二维码」
5. 使用「下载 PNG」或「复制图片」保存结果

使用现代浏览器（Chrome、Edge、Firefox、Safari）可获得最佳体验。

高中英语词汇速记是一款纯前端浏览器背单词工具，专为高考英语词汇复习设计。它采用卡片式翻转记忆，支持单词搜索、朗读、已会/未会标记、随机顺序和进度统计，所有学习状态保存在浏览器本地，无需安装、无需上传。

• 内置高考词汇库：覆盖高中英语核心词汇，打开即用。
• 卡片式记忆：大字显示单词，点击或按 H 键显示/隐藏中文释义。
• 搜索跳转：顶部搜索框支持按英文单词或中文释义快速定位。
• 朗读发音：基于 Web Speech API，点击单词或按空格即可朗读，支持语速调节和语音选择。
• 已会/未会标记：按 K 标记已会、按 M 标记未会，分类管理学习进度。
• 学习模式过滤：设置面板支持切换"全部""仅未会""仅已会"三种学习模式。
• 随机顺序：按 S 或点击随机按钮打乱词汇顺序，强化记忆。
• 自动朗读：开启自动模式后，切换单词自动朗读，解放双手。
• 字母筛选：设置面板可按首字母筛选词汇，针对性复习某字母开头的单词。
• 进度统计：顶部实时显示当前进度、已会数量和未会数量。
• 学习状态本地保存：标记、设置、模式均通过 localStorage 保存，刷新不丢失。
• 快捷键支持：空格朗读、← → 翻页、H 显隐释义、K 已会、M 未会、S 随机、A 自动、/ 搜索。

打开 高中英语词汇速记。 查看单词，不确定释义时按 H 或点击卡片显示中文。

扫雷是一款经典的浏览器本地益智游戏。无需下载安装，打开网页即可游玩，支持简单、中等、困难三种难度，同时适配桌面端与移动端操作。

• 三种难度可选：简单（9×9，10 颗雷）、中等（16×16，40 颗雷）、困难（30×16，99 颗雷），一键切换。
• 首次点击保护：第一次点击永远不会踩到雷，确保开局安全。
• 自动展开空区：翻开无雷的空白格子时，自动级联展开周围相邻区域。
• 插旗标记：支持右键或长按标记疑似地雷位置，实时显示剩余雷数。
• 双模式切换：移动端提供"点击翻开 / 点击插旗"模式切换按钮，操作更直观。
• 长按插旗：移动端支持长按格子快速插旗，并伴随触觉反馈（若设备支持）。
• 计时器：从第一次点击开始计时，精确到秒。
• 表情按钮：重置按钮随游戏状态变化（😊 / 😵 / 😎），点击即可重新开始。
• 动画效果：翻开格子、踩雷爆炸、胜利庆祝均配有流畅的 CSS 动画。
• 彩色数字提示：周围雷数 1~8 分别用不同颜色显示，便于快速判断。

1. 打开 扫雷。
2. 选择难度（默认简单）。
3. 点击格子开始游戏，首次点击安全无雷。
4. 根据数字提示推理雷的位置，用右键或长按插旗标记。
5. 翻开所有安全格子即可获胜，踩到雷则游戏结束。
6. 点击表情按钮 😊 随时重新开始。

平台	翻开	插旗
桌面端	左键单击	右键单击
移动端	单击（翻开模式）	长按 0.5 秒 / 切换插旗模式后单击

坦克大战是一款纯前端运行的经典坦克射击游戏，基于 HTML5 Canvas 构建。玩家控制坦克消灭所有敌人、保护基地，采用关卡制推进，每关敌人数量和强度逐渐增加，支持道具收集和丰富的自定义配置。

• 经典关卡制玩法：消灭所有敌人即可进入下一关，每关难度递增。
• 6 种道具系统：生命+1、火力提升（散射穿甲弹）、速度提升、护盾、炸弹（全屏清敌）、冻结敌人。
• 完整音效系统：基于 Web Audio API 合成射击、爆炸、移动、通关、游戏结束等音效。
• 自定义游戏配置：支持调整玩家速度、射击冷却、初始生命、敌人数量与速度、道具生成间隔、地图元素数量等参数。
• 实时侧边栏状态：显示分数、关卡、生命值（心形）、敌人进度条、活跃道具计时、游戏时间、历史最高分。
• 暂停与音效控制：游戏中可随时暂停/继续，一键开关音效。
• 本地最高分记录：通过 localStorage 保存历史最高分，刷新不丢失。
• 响应式布局：适配不同屏幕尺寸，三栏布局自动调整为纵向排列。

• WASD / 方向键：控制坦克移动
• 空格键：发射子弹
• 回车键：开始游戏 / 重新开始
• P 键：暂停 / 继续游戏
• M 键：开关音效

• 击毁敌人坦克：100 分
• 通关奖励：500 分
• 道具得分：20 分
• 基地被摧毁：游戏结束

HTML5 Canvas JavaScript（原生，无框架依赖） Web Audio API（音效合成） localStorage（最高分持

JSON 格式化 / 压缩是一款纯前端在线 JSON 处理工具，无需联网、无需上传数据，所有操作均在浏览器本地完成。支持格式化、压缩、转义与去转义，适合开发者在日常工作中快速处理 JSON 数据。

• 格式化：将压缩的 JSON 文本一键展开为带缩进的可读格式，便于查看与调试。
• 压缩：去除 JSON 中所有不必要的空格与换行，生成最小体积的 JSON 字符串。
• 转义：将 JSON 对象序列化为转义后的字符串，方便嵌入代码或配置文件。
• 去转义：将转义后的 JSON 字符串还原为原始内容，支持带引号或不带引号的输入。
• 一键复制：处理结果可直接复制到剪贴板，无需手动选中。
• 一键清空：快速清空输入与输出区域，方便处理下一段数据。
• 实时错误提示：JSON 解析失败时，状态栏会显示具体错误信息，帮助定位问题。
• 深色模式支持：自动跟随系统主题，也支持手动切换，长时间使用不刺眼。
• 左右分屏布局：输入与输出并排显示，大屏对比查看更高效，移动端自动切换为上下布局。

1. 打开 JSON 格式化 / 压缩。
2. 将 JSON 文本粘贴到左侧输入框。
3. 点击工具栏上的 格式化、压缩、转义 或 去转义 按钮进行处理。
4. 处理结果即时显示在右侧输出框，点击 复制结果 即可复制到剪贴板。

• HTML + CSS + JavaScript
• 无后端、无依赖、纯静态页面
• 支持深色模式与响应式布局

User: 研究这个网站设计的风格和功能：https://simonwillison.net/ 这里有许多不同类型的内容（如Link、TIL、Tool、Entries、Quotes、Notes、Guides等），它是如何融合到一起的。 https://wangjunjian.com/ 是我的博客，我想参考一下。 Kimi: 让我先浏览这两个网站，了解它们的设计风格和内容组织方式。 我已经仔细浏览了这两个网站。Simon Willison 的博客是一个非常经典的"个人知识流"设计，它将 Entries、Links、Quotes、Notes、Guides、TILs、Tools 等多种内容类型按时间线无缝融合，配合极简的排版和强大的标签系统。你的博客"军舰的日志"则是更传统的技术博客布局，内容质量很高，主要围绕 AI Agent、LLM 等技术主题。

在我深入研究并给出具体建议之前，想先确认几个关键问题：

1. 你想借鉴的侧重点是什么？ 是 primarily 学习 Simon 的视觉设计风格和布局（极简、时间流、多种内容类型混排），还是想在自己的博客中也引入多种内容类型（如 Link、TIL、Quotes 等），还是两者都想？

你目前的博客是基于什么技术栈？ 比如 Jekyll、Hugo、Next.js、VuePress 等？

这是一个使用 Kimi 网站 基于 SpaceX S-1 招股说明书 和 SpaceX 官方网 制作的网站，以视觉化的方式展示了据称提取自 SpaceX 于 2026 年 5 月 20 日向 SEC 提交的 S-1 注册声明的数据。整体风格偏向科幻和未来感，配有 AI 生成的航天主题图片。

网站内容可以分为以下几个主要板块：

网站还展示了 2023-2025 年三大板块的收入趋势对比。