retro-badge-maker

一个功能丰富的像素风格工卡生成器，支持自定义文字、头像、二维码、签名等功能。

✨ 功能特色

• 🎨 像素风格设计，复古游戏感
• 👤 自定义姓名、职位、部门信息
• 🖼️ 多种预设头像 + 随机头像生成
• 🔁 X3/X4 模式切换功能
• 🔤 Friends Z 自定义签名字体
• 📱 自定义二维码内容
• 🎛️ 字号实时调整
• ✍️ 签名加粗选项
• 🎲 丑头像随机种子系统

📁 文件结构

retro-badge-maker/
├── index.html              # 主页面（必需）
├── FriendsZ-Regular.ttf     # 签名字体（必需）
├── Avatar-1.jpg            # 预设头像1（必需）
├── Avatar-2.jpg            # 预设头像2（必需）
├── Avatar-3.jpg            # 预设头像3（必需）
├── Avatar-4.jpg            # 预设头像4（必需）
└── README.md              # 说明文档

🎯 使用说明

1. 基本信息：填写姓名、职位、部门等信息
2. 头像设置：
   • 选择预设头像
   • 点击骰子随机生成
   • 上传自定义头像
   • 使用种子重现特定头像
3. 签名设置：
   • 输入签名文字
   • 调整字号和粗细
4. 二维码：输入要编码的文本或链接
5. 模式切换：根据需要选择 X3 或 X4 模式，调整工卡尺寸和布局
6. 下载工卡：点击生成并下载按钮

🛠️ 技术栈

• HTML5 + CSS3 + JavaScript
• Google Fonts (VT323)
• DiceBear API (头像生成)
• QRCode.js (二维码生成)
• html2canvas (图片导出)
• CSS 过渡动画

📱 兼容性

• ✅ Chrome 60+
• ✅ Firefox 55+
• ✅ Safari 11+
• ✅ Edge 79+
• ✅ 移动端浏览器

🎮 自定义

你可以通过修改 index.html 中的 CSS 变量来自定义颜色主题：

:root {
    --bg-color: #222;      /* 背景色 */
    --card-bg: #fff;       /* 卡片背景 */
    --ink-color: #000;     /* 主色调 */
    --accent-gray: #ccc;    /* 辅助色 */
}

📄 许可证

MIT License - 可自由使用和修改

---

⭐ 如果这个项目对你有帮助，请给个 Star！