Home

WebUtils

纯前端工具集 - 单文件、零构建、可离线使用

GitHub Pages • Vercel • Netlify • Cloudflare

---

✨ 项目简介

WebUtils 是一个受 Simon Willison 启发的纯前端工具集合。每个工具都是一个独立的 HTML 文件，无需任何构建步骤，打开即用。

🎯 为什么选择 WebUtils？

传统工具	WebUtils
需要安装 Node.js、npm	❌ 不需要
需要运行构建命令	❌ 不需要
数据上传到服务器	❌ 纯本地处理
需要网络才能使用	❌ 支持离线
复杂的依赖管理	❌ 零依赖

---

🚀 核心特性

📦 单文件架构

每个工具都是一个完整的 HTML 文件，CSS 和 JavaScript 全部内联。复制一个文件就能在任何地方使用。

⚡ 零构建流程

没有 webpack、没有 Vite、没有 npm install。下载文件，双击打开，完事。

🔒 隐私优先

所有数据处理都在你的浏览器本地完成。你的 JSON、JWT、密码永远不会离开你的电脑。

🔗 URL 状态分享

每个工具都支持将当前状态编码到 URL，方便分享给同事或保存书签。

📴 离线可用

下载 HTML 文件后，断网也能正常使用（除了需要 CDN 库的工具）。

---

📚 工具分类

🛠 开发工具 (11) 格式化、编解码、调试必备 JSON 格式化 / JSON-YAML 转换 JWT 解码器 / Base64 编解码 URL 编解码 / 正则测试器 颜色转换器 / 哈希生成器 HTML 实体转换 / 进制转换 剪贴板查看器	📝 文本工具 (4) 文本处理和预览 文本 Diff 对比 Markdown 实时预览 字数统计 Lorem Ipsum 生成
⏰ 时间工具 (5) 时间戳和日期处理 时间戳转换 (两个版本) 时区转换器 日期计算器 Cron 表达式解析	⚡ 生成器 (3) 各种生成工具 UUID / ULID 生成器 二维码生成器 密码生成器
🔐 隐私工具 (1) 数据脱敏和保护 日志脱敏（自动识别 IP、邮箱、手机号）	🎨 媒体工具 (4) 图片和媒体处理 图片压缩 / 压缩对比 SVG 渲染器 摄像头拍照

👉 工具列表

---

🎨 设计风格

WebUtils 采用 Neo-Brutalist Tech 暗色主题设计：

• 🌙 深色背景 (#0a0a0f) 保护眼睛
• 💎 霓虹强调色 - 青色 (#00f5d4)、品红 (#f72585)
• 🔲 科技感网格背景
• ✨ 字体组合：JetBrains Mono + Space Grotesk

👉 设计规范

---

🛠 快速开始

在线使用（推荐）

直接访问：https://chicogong.github.io/html-tools/

本地使用

# 方式一：克隆整个仓库
git clone https://github.com/chicogong/html-tools.git
cd html-tools
open index.html

# 方式二：只下载单个工具
# 右键保存任意工具页面的 HTML 文件即可

部署到自己的服务器

支持一键部署到：

• Vercel - 导入 GitHub 仓库即可
• Netlify - 导入 GitHub 仓库即可
• Cloudflare Pages - 连接 GitHub 仓库即可
• GitHub Pages - Fork 后在 Settings 启用

---

🤝 参与贡献

欢迎提交 Issue 和 Pull Request！

添加新工具

1. 在 tools/[category]/ 下创建 HTML 文件
2. 在 index.html 添加工具卡片
3. 运行 npm run lint 检查代码
4. 提交 PR

👉 开发指南

---

📖 Wiki 目录

页面	描述
工具列表	全部 28 个工具的详细说明和链接
开发指南	如何添加新工具、代码模板、通用功能实现
设计规范	色彩系统、字体、组件规范、响应式断点

---

💡 灵感来源

本项目受以下启发：

• Simon Willison 的 tools.simonwillison.net
• 博客文章：Useful patterns for building HTML tools

---

_{Made with ❤️ by chicogong}