iPad 模拟器

一个模拟 iOS 系统的网页应用，支持自定义壁纸、图标、字体和小组件。

功能特性

🏠 主界面

• 无边框全屏设计，适配横屏使用
• 4行6列的图标网格布局（24个槽位）
• 磨砂效果的 Dock 栏（12个槽位）
• 长按拖动图标到任意槽位
• 拖动时自动交换位置，布局自动保存
• 支持触摸屏和鼠标操作

⚙️ 设置功能 (settings.html)

• API 配置
  • 填写反代地址和 API Key
  • 自动获取可用模型列表
  • 选择响应模型
• 数据备份
  • 导出所有配置为 JSON 文件
  • 导入备份文件恢复配置

🎨 外观设置 (appearance.html)

• 壁纸更换
  • 通过 URL 设置壁纸
  • 上传本地图片作为壁纸
  • 恢复默认壁纸
• 图标自定义
  • 为每个应用设置自定义图标
  • 支持 URL 和本地图片
  • 恢复默认图标
• 字体设置
  • 通过 URL 加载自定义字体
  • 上传本地字体文件（.ttf, .woff, .woff2）
  • 选择系统预装字体
  • 实时预览字体效果

📦 小组件系统

• 时钟小组件（1x1）
  • 显示实时时间和日期
  • 每分钟自动更新
• 待办清单小组件（1x1）
  • 显示今日日期和任务列表
  • 点击打开弹窗进行任务管理
  • 可追溯其他日期的待办事项
  • 支持任务完成状态切换
• 日历小组件（1x1）
  • 左侧显示当前日期和星期
  • 右侧显示月历视图
  • 高亮显示当天日期
• 所有小组件可长按拖动到任意位置
• 小组件可与应用图标自由交换位置

使用方法

1. 在浏览器中打开 index.html
2. 长按图标或小组件（300ms）开始拖动
3. 拖动到目标位置释放即可交换
4. 点击 Dock 栏的"设置"或"外观"图标进入相应页面
5. 所有配置自动保存到浏览器本地存储

文件结构

├── index.html          # 主页面
├── style.css           # 主页面样式
├── app.js              # 主页面逻辑
├── widgets.css         # 小组件样式
├── widgets.js          # 小组件逻辑
├── settings.html       # 设置页面
├── settings.js         # 设置逻辑
├── appearance.html     # 外观设置页面
├── appearance.js       # 外观设置逻辑
├── message.html        # 消息 App
├── message.css         # 消息 App 样式
├── message.js          # 消息 App 逻辑
├── app-page.css        # 应用页面通用样式
└── README.md           # 说明文档

应用介绍

💬 消息 App (message.html)

一个精美的 Ins 风格个人信息管理应用：

主界面（我）

• 大头像展示，带呼吸灯边框效果
• 圆角分组列表：我的信息、我的头像库
• 底部导航栏：我、联系人、动态、NPC

我的信息

• 编辑姓名、网名、人设
• 添加彩色人设标签（Ins 风格）
• 头像预览和选择

我的头像库

• 9个预设 Ins 风格头像（极简线条、渐变色彩）
• Grid 布局展示
• 支持 URL 上传和本地文件上传
• 点击头像实时更换

特色功能

• 动态毛玻璃背景（自动提取壁纸主色调）
• 丝滑的页面切换动画（0.4s cubic-bezier）
• 支持左滑返回手势
• 点击列表项有缩放反馈
• 所有数据存储在 localStorage

技术特点

• 纯前端实现，无需后端服务器
• 使用 localStorage 持久化存储
• 支持触摸和鼠标双重操作
• 响应式设计，适配不同屏幕尺寸
• 模块化代码结构，易于扩展

浏览器兼容性

• Chrome/Edge 90+
• Firefox 88+
• Safari 14+
• 移动端浏览器

注意事项

• 所有数据存储在浏览器本地，清除浏览器数据会丢失配置
• 建议定期使用"设置"页面的导出功能备份配置
• 上传的图片和字体会转换为 Base64 存储，文件过大可能影响性能