PetChat - 宠物对话应用网页版

项目介绍

PetChat是一个创新的宠物对话应用，通过与实体宠物铭牌连接，实现人类与宠物的双向交流。这个网页版本展示了应用的核心功能和用户界面设计，为后续的移动APP开发提供参考。

核心功能

🗨️ 对话模块

• 实时聊天界面：美观的聊天气泡设计
• 智能回复：模拟宠物根据关键词智能回复
• 语音输入：点击麦克风按钮进行语音输入（模拟功能）
• 消息动画：流畅的消息发送和接收动画

📍 定位模块

• 实时位置：显示宠物当前位置信息
• 地图视图：可视化地图界面（带动画宠物标记）
• 活动轨迹：记录宠物一天的活动历史
• 位置更新：实时显示最后更新时间

👥 社交模块

• 社交统计：显示好友数量、互动次数等
• 宠物动态：查看其他宠物朋友的最新动态
• 附近宠物：发现并添加附近的宠物朋友
• 互动功能：点击加好友按钮进行社交互动

🐕 我的宠物模块

• 宠物资料：详细的宠物信息展示
• 健康监控：活动量、食欲、睡眠等健康指标
• 照护提醒：喂食、遛弯、体检等重要提醒
• 设备设置：管理宠物铭牌设备和通知设置

界面特色

• 移动端优化：专为手机屏幕设计，同时兼容桌面浏览器
• 现代化UI：采用渐变色彩和圆角设计，符合现代审美
• 宠物主题：温暖的色彩搭配，营造亲切的宠物氛围
• 流畅动画：页面切换、按钮交互都有平滑的动画效果
• 响应式布局：自适应不同屏幕尺寸

技术特点

• 纯前端实现：HTML5 + CSS3 + 原生JavaScript
• 无框架依赖：轻量级，易于维护和扩展
• 模块化设计：代码结构清晰，功能模块分离
• 移动端适配：视口优化，触摸友好

使用方法

1. 打开应用：直接在浏览器中打开 index.html 文件
2. 导航切换：点击底部导航栏切换不同功能模块
3. 开始对话：在对话页面输入消息或点击语音按钮
4. 查看定位：在定位页面查看宠物位置和活动轨迹
5. 社交互动：在社交页面查看动态并添加宠物好友
6. 管理宠物：在我的宠物页面查看健康状态和设置

模拟功能演示

• 智能对话：输入包含关键词的消息（如"你好"、"吃"、"玩"等）体验智能回复
• 语音输入：点击麦克风按钮模拟语音转文字功能
• 实时更新：宠物心情、健康数据会自动更新
• 社交互动：点击"加好友"按钮查看交互效果

文件结构

PetApp/
├── index.html          # 主页面文件
├── style.css           # 样式文件
├── script.js           # 功能脚本
└── README.md           # 项目说明

浏览器支持

• Chrome (推荐)
• Safari
• Firefox
• Edge

后续开发建议

1. 真实API集成：替换模拟数据为真实的后端API
2. 语音识别：集成真实的语音识别和合成技术
3. 地图集成：接入真实的地图服务（如高德地图）
4. 推送通知：添加浏览器推送通知功能
5. 数据持久化：添加本地存储或数据库支持
6. 多语言支持：扩展国际化功能

预览效果

这个网页应用完美展示了宠物对话app的核心理念：

• 温馨的宠物主题设计
• 直观的用户交互体验
• 完整的功能模块布局
• 流畅的移动端操作

适合作为产品原型演示和APP开发的参考依据。