项目简介link

WEvoice 是一款面向移动端的语音生成与翻译 PWA HTML 模板，完整覆盖注册登录、首页、AI 语音、翻译、订阅、通知等业务页面，提供统一的 UI 风格和响应式布局，适合快速构建语音类 App 的前端原型或学习参考。

技术栈link

• HTML5 + CSS3（原生 + Bootstrap 5）
• JavaScript（jQuery、Slick Slider、Bootstrap JS）
• SVG 向量图标（Remix Icon）
• 静态资源（无构建工具，直接浏览器运行）

项目结构link

wevoicehtml-10/Main File/
├── Documentation/
│   ├── index.html
│   └── assets/
└── Voice Generation and Translation Mobile App PWA HTML Template - We Voice/
    ├── splash.html
    ├── sign-in.html
    ├── homeScreen.html
    ├── aiVoiceAudio.html
    ├── translateTo.html
    └── assets/
        ├── css/
        ├── javascript/
        └── images/

核心文件说明link

• splash.html — 应用启动页，包含预加载动画和 logo。
• homeScreen.html — 首页，展示主要功能入口和推荐内容。
• aiVoiceAudio.html — 语音生成页面，提供文字转语音的 UI。
• translateTo.html — 翻译页面，支持语言切换和结果展示。
• assets/css/style.css — 全局样式，包含颜色、间距、按钮等。
• assets/javascript/script.js — 交互脚本，处理页面跳转、表单校验等逻辑。

快速开始link

1. 下载或克隆项目到本地。
2. 直接在浏览器打开 splash.html（或 index.html）即可预览全部页面。
3. 如需本地服务器（跨域或 PWA 测试），在项目根目录执行：
   bashcontent_copyCopy

   python -m http.server 8000
   

   然后访问 http://localhost:8000/.

使用建议link

• 替换 assets/images/ 中的 logo 与插图，可快速实现品牌化。
• 在 assets/css/style.css 中调整主题色，实现深色/浅色切换。
• 若要真正实现 PWA，需添加 manifest.json 与 Service Worker，当前仅为 UI 模板。