上传文件至 /
This commit is contained in:
commit
a02df90636
143
README.md
Normal file
143
README.md
Normal file
@ -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支持
|
||||
|
||||
## 联系方式
|
||||
|
||||
如有问题或建议，请联系开发团队。
|
||||
|
||||
---
|
||||
|
||||
**翻译服务应用** - 让跨语言沟通更简单 🌍
|
||||
1335
index.html
Normal file
1335
index.html
Normal file
File diff suppressed because it is too large
Load Diff
26
manifest.json
Normal file
26
manifest.json
Normal file
@ -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"
|
||||
}
|
||||
142
start.html
Normal file
142
start.html
Normal file
@ -0,0 +1,142 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>翻译服务应用 - 启动页</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
background: linear-gradient(135deg, #007AFF, #5AC8FA);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 600px;
|
||||
text-align: center;
|
||||
padding: 40px;
|
||||
background: rgba(255,255,255,0.1);
|
||||
border-radius: 20px;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.5em;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 1.2em;
|
||||
margin-bottom: 40px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.methods {
|
||||
display: grid;
|
||||
gap: 20px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.method {
|
||||
background: rgba(255,255,255,0.15);
|
||||
padding: 30px;
|
||||
border-radius: 15px;
|
||||
border: 1px solid rgba(255,255,255,0.2);
|
||||
}
|
||||
|
||||
.method h3 {
|
||||
margin-bottom: 15px;
|
||||
font-size: 1.4em;
|
||||
}
|
||||
|
||||
.method p {
|
||||
margin-bottom: 20px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.btn {
|
||||
background: white;
|
||||
color: #007AFF;
|
||||
border: none;
|
||||
padding: 15px 30px;
|
||||
border-radius: 10px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 20px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.features {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||||
gap: 20px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.feature {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
font-size: 3em;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
margin-top: 40px;
|
||||
opacity: 0.8;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>🌐 翻译服务应用</h1>
|
||||
<p class="subtitle">专业的跨平台口译服务 Web 版本</p>
|
||||
|
||||
<div class="methods">
|
||||
<div class="method">
|
||||
<h3>🚀 直接体验（推荐）</h3>
|
||||
<p>无需安装，直接在浏览器中体验完整功能</p>
|
||||
<a href="index.html" class="btn">立即体验</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="features">
|
||||
<div class="feature">
|
||||
<div class="feature-icon">📞</div>
|
||||
<div>视频通话</div>
|
||||
</div>
|
||||
<div class="feature">
|
||||
<div class="feature-icon">📅</div>
|
||||
<div>预约管理</div>
|
||||
</div>
|
||||
<div class="feature">
|
||||
<div class="feature-icon">📄</div>
|
||||
<div>文档翻译</div>
|
||||
</div>
|
||||
<div class="feature">
|
||||
<div class="feature-icon">👤</div>
|
||||
<div>个人中心</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<p>✨ 支持 PWA 安装 | 📱 响应式设计 | 🌍 中文界面</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user