# 翻译服务应用 (Twilio Translation Service App)

## 项目简介

这是一个基于Web技术开发的现代化翻译服务应用，提供实时通话翻译、预约管理、文档翻译等功能。应用采用响应式设计，支持桌面和移动设备访问，具备PWA（渐进式Web应用）功能。

## 主要功能

### 🔥 核心功能
- **智能通话系统** - 支持语音和视频通话，集成实时翻译服务
- **费率管理** - 透明的费率显示和自动计费系统
- **预约管理** - 直观的日历界面，轻松管理翻译预约
- **文档翻译** - 支持多格式文档导入和翻译管理
- **个人中心** - 用户信息管理和账单历史查看

### 💰 计费系统
- 语音通话：¥80/小时
- 视频通话：¥120/小时  
- 翻译员服务：+¥50/小时
- 按分钟计费，最低1分钟

### 📱 技术特性
- **响应式设计** - 适配各种屏幕尺寸
- **PWA支持** - 可安装到桌面，离线访问
- **现代UI** - iOS风格设计，用户体验优秀
- **实时计费** - 通话结束自动生成账单
- **文件管理** - 支持PDF、DOC、DOCX、TXT格式

## 项目结构

```
twilio-project/
├── web-app/
│   ├── index.html          # 主应用页面
│   ├── start.html          # 启动页面
│   └── manifest.json       # PWA配置文件
└── README.md               # 项目说明文档
```

## 快速开始

### 本地运行

1. 克隆项目到本地
```bash
git clone http://git.wanzhongtech.com/mars/Twilioapp-project.git
cd Twilioapp-project
```

2. 启动HTTP服务器
```bash
# 使用Python
cd web-app
python -m http.server 8080

# 或使用Node.js
npx http-server web-app -p 8080 -c-1
```

3. 访问应用
- 主页面：http://localhost:8080/index.html
- 启动页：http://localhost:8080/start.html

### 功能页面

1. **通话页面** - 发起语音/视频通话，实时计费
2. **预约页面** - 日历视图管理翻译预约
3. **文档页面** - 上传和管理翻译文档
4. **个人中心** - 查看账单历史和用户设置

## 使用指南

### 发起通话
1. 点击"语音通话"或"视频通话"按钮
2. 确认费率信息，可选择添加翻译员服务
3. 点击"开始通话"进入通话界面
4. 通话结束后自动显示账单

### 管理预约
1. 进入预约页面查看日历
2. 点击日期查看当天预约详情
3. 有预约的日期会显示绿色标记

### 文档翻译
1. 点击"导入文档"按钮选择文件
2. 支持多文件同时上传
3. 查看文档翻译进度和统计信息

## 技术栈

- **前端**: HTML5, CSS3, JavaScript (ES6+)
- **UI框架**: 原生CSS，iOS风格设计
- **PWA**: Service Worker, Web App Manifest
- **响应式**: CSS Grid, Flexbox
- **兼容性**: 现代浏览器 (Chrome, Safari, Firefox, Edge)

## 浏览器支持

- Chrome 80+
- Safari 13+
- Firefox 75+
- Edge 80+

## 开发说明

### 项目特点
- 单页面应用(SPA)架构
- 模块化JavaScript代码
- 响应式CSS设计
- 渐进式Web应用(PWA)

### 代码结构
- `index.html` - 主应用文件，包含所有功能模块
- CSS样式采用BEM命名规范
- JavaScript使用ES6+语法，模块化组织

## 部署说明

项目为纯前端应用，可部署到任何静态文件服务器：

- Nginx
- Apache
- GitHub Pages
- Vercel
- Netlify

## 更新日志

### v1.0.0 (2024-01-15)
- ✨ 初始版本发布
- 🔥 完整的通话和计费系统
- 📅 日历式预约管理
- 📄 文档导入和管理功能
- 💰 智能账单系统
- 📱 响应式设计和PWA支持

## 联系方式

如有问题或建议，请联系开发团队。

---

**翻译服务应用** - 让跨语言沟通更简单 🌍 

## 测试提交功能
- 测试时间：2025-06-29
- 状态：Git推送功能验证