🛠️ 在线工具箱：6 合 1 开发者必备工具（附完整源码）

这是一个功能齐全的在线工具箱系统，集成了 6 个开发者日常使用的实用工具，界面美观，功能实用，完全开源可部署！

🌟 功能亮点

• ✅ JSON 格式化 – 校验、格式化、压缩、转义，支持语法高亮
• ✅ Base64 编解码 – 支持中文，一键转换
• ✅ 二维码生成 – 输入文本/URL 自动生成二维码
• ✅ MD5 加密 – 字符串哈希值计算，32 位输出
• ✅ URL 编解码 – 处理特殊字符，URL 规范化
• ✅ 文本对比 – 对比两段文本差异，找出新增和删除

📸 界面展示

首页 – 6 个工具总览

JSON 格式化界面

Base64 编解码界面

二维码生成界面

MD5 加密界面

🎨 界面设计

• 🎨 现代化渐变背景（紫色主题）
• 💎 毛玻璃效果卡片
• ✨ 悬停动画效果
• 📱 响应式布局，支持移动端
• ⚡ 纯前端实现，无需后端

🚀 部署教程

方式一：静态部署（推荐）

# 1. 上传到服务器
scp toolbox.zip root@your-server:/www/wwwroot/your-domAIn/

# 2. 解压
cd /www/wwwroot/your-domain/
unzip toolbox.zip

# 3. 配置 Nginx
server {
    listen 80;
    server_name your-domAIn.com;
    root /www/wwwroot/your-domain/toolbox;
    index index.html;
}

方式二：宝塔面板

1. 登录宝塔面板
2. 添加网站（填写域名）
3. 上传 toolbox.zip 到网站目录
4. 解压即可访问

方式三：本地运行

# 直接双击打开 index.html
# 或使用 Python 快速启动
python3 -m http.server 8000
# 访问 http://localhost:8000

📦 文件说明

文件	大小	说明
index.html	15 KB	主页面（含所有功能）
toolbox.zip	3.8 KB	完整源码包

🔧 技术栈

• 前端：HTML5 + CSS3 + JavaScript (原生)
• 样式：Flexbox + Grid 布局
• 特效：CSS3 动画 + 过渡效果
• 依赖：无（纯原生实现）
• 兼容：所有现代浏览器

💡 扩展建议

你可以在这个基础上扩展更多功能：

• 📝 添加 HTML 格式化/压缩工具
• 🎨 添加 CSS 格式化/压缩工具
• 🔐 添加 SHA256、AES 加密工具
• 📊 添加时间戳转换工具
• 🌐 添加 IP 地址查询工具
• 📱 添加手机号归属地查询

📥 源码下载

本资源包含完整源码，下载后即可部署使用！

文件信息：

• 📦 文件格式：ZIP
• 💾 文件大小：3.8 KB
• 📄 包含文件：index.html
• 🔧 运行环境：任意 Web 服务器（Nginx/Apache）或本地直接打开

🎯 适用场景

• ✅ 开发者日常工具集
• ✅ 个人导航站工具页
• ✅ 公司内网工具平台
• ✅ 学习前端开发实战
• ✅ 快速搭建在线工具站

部署时间：2026-03-09 02:33 | 演示：http://toolbox.ccyuanma.cn