From a02df90636929d1fb639ab0c65149c175f24f8a9 Mon Sep 17 00:00:00 2001 From: mars Date: Sun, 29 Jun 2025 21:45:58 +0800 Subject: [PATCH] =?UTF-8?q?=E4=B8=8A=E4=BC=A0=E6=96=87=E4=BB=B6=E8=87=B3?= =?UTF-8?q?=20/?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 143 ++++++ index.html | 1335 +++++++++++++++++++++++++++++++++++++++++++++++++ manifest.json | 26 + start.html | 142 ++++++ 4 files changed, 1646 insertions(+) create mode 100644 README.md create mode 100644 index.html create mode 100644 manifest.json create mode 100644 start.html diff --git a/README.md b/README.md new file mode 100644 index 0000000..a1c461b --- /dev/null +++ b/README.md @@ -0,0 +1,143 @@ +# 翻译服务应用 (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支持 + +## 联系方式 + +如有问题或建议，请联系开发团队。 + +--- + +**翻译服务应用** - 让跨语言沟通更简单 🌍 \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..7189203 --- /dev/null +++ b/index.html @@ -0,0 +1,1335 @@ + + + + + + 翻译服务应用 + + + + + +
+
+

翻译服务应用

+
+ +
+ +
+
+
+ + +
+ +
+
通话中...
+
00:00
+
+ + +
+
+ + +
+
+
+ +
2024年1月
+ +
+
+ +
+
+ +
+
+
今天 14:30
+
商务会议翻译 - 英语 | 翻译员：张译文
+
+
+
+ + +
+
+
文档管理
+ + +
+ +
+
+
24
+
总文档数
+
+
+
18
+
已完成
+
+
+
4
+
进行中
+
+
+
2
+
待开始
+
+
+ +
+
+
+
产品说明书.pdf
+
已完成
+
+
+ 中文 → 英文 | 5页 | 完成时间：2024-01-15 +
+
+ +
+
+
合同文件.docx
+
翻译中
+
+
+ 英文 → 中文 | 12页 | 进度：60% +
+
+ +
+
+
技术手册.pdf
+
审核中
+
+
+ 日文 → 中文 | 8页 | 预计完成：明天 +
+
+
+
+ + +
+
+
用
+
用户名
+
ID: 123456789
+
+ +
+
+
+
📋
+
账单历史
+
+
›
+
+ +
+
+
⚙️
+
设置
+
+
›
+
+ +
+
+
❓
+
帮助与支持
+
+
›
+
+ +
+
+
ℹ️
+
关于我们
+
+
›
+
+
+ +
+ +
+
+
+ + +
+
+
📞
+
通话
+
+
+
📅
+
预约
+
+
+
📄
+
文档
+
+
+
👤
+
我的
+
+
+
+ + + + + + + + + + \ No newline at end of file diff --git a/manifest.json b/manifest.json new file mode 100644 index 0000000..788f2de --- /dev/null +++ b/manifest.json @@ -0,0 +1,26 @@ +{ + "name": "翻译服务应用", + "short_name": "翻译服务", + "description": "专业的跨平台口译服务应用", + "start_url": "./index.html", + "display": "standalone", + "orientation": "portrait", + "theme_color": "#007AFF", + "background_color": "#ffffff", + "icons": [ + { + "src": "icon-192.png", + "sizes": "192x192", + "type": "image/png", + "purpose": "maskable any" + }, + { + "src": "icon-512.png", + "sizes": "512x512", + "type": "image/png", + "purpose": "maskable any" + } + ], + "categories": ["productivity", "business", "utilities"], + "lang": "zh-CN" +} \ No newline at end of file diff --git a/start.html b/start.html new file mode 100644 index 0000000..996815c --- /dev/null +++ b/start.html @@ -0,0 +1,142 @@ + + + + + + 翻译服务应用 - 启动页 + + + +
+

🌐 翻译服务应用

+

专业的跨平台口译服务 Web 版本

+ +
+
+

🚀 直接体验（推荐）

+

无需安装，直接在浏览器中体验完整功能

+ 立即体验 +
+
+ +
+
+
📞
+
视频通话
+
+
+
📅
+
预约管理
+
+
+
📄
+
文档翻译
+
+
+
👤
+
个人中心
+
+
+ +
+

✨ 支持 PWA 安装 | 📱 响应式设计 | 🌍 中文界面

+
+
+ + \ No newline at end of file