项目简介link

OpenUp 是一套面向 AI 内容创作场景的 HTML 模板集合，包含落地页、用户仪表盘、聊天机器人、图片生成、语音合成等多类型页面，适合快速搭建 AI 文案写作或 AI 应用产品展示站点。

技术栈link

• HTML5 + CSS3（静态页面）
• jQuery（交互逻辑）
• Bootstrap 4（响应式布局框架）
• SCSS（样式预处理器）
• Font Awesome 6 Pro（图标库）
• Google Fonts（Space Grotesk / Roboto 等字体）
• Swiper.js（轮播组件）

项目结构link

openup-ai-content-writing-applications-landing-page-template/
├── documentation/           # 产品文档页面
│   ├── index.html
│   └── assets/
│       ├── css/main.css
│       ├── js/main.js
│       ├── fonts/
│       └── images/
├── openup-dashboard/        # 用户后台仪表盘
│   ├── index.html
│   ├── chatbot.html
│   ├── voicegenerator.html
│   ├── image-generator.html
│   └── assets/
│       ├── css/style.css
│       ├── scss/style.scss
│       ├── js/main.js
│       └── fonts/
└── openup-html/             # 落地页集合
    ├── dark/                # 深色主题页面
    │   ├── index.html
    │   ├── index-dark.html
    │   └── pricing.html
    └── openup-rtl/          # RTL 布局版本
        └── index.html

核心文件说明link

• openup-html/index.html — 主落地页入口，展示 AI 文案写作服务
• openup-dashboard/index.html — 用户仪表盘首页，包含侧边栏和内容区
• openup-dashboard/assets/css/style.css — 仪表盘主体样式，定义主题色 --color-primary 和字体
• openup-dashboard/assets/js/main.js — 仪表盘交互逻辑，含音频播放、侧边栏折叠等
• documentation/index.html — 产品文档站点，含导航搜索和内容锚点跳转
• openup-html/openup-rtl/index.html — RTL 布局演示页，支持阿拉伯语等从右到左排版

快速开始link

纯静态项目，直接在浏览器打开对应 HTML 文件即可预览：

• 落地页：openup-html/openup-rtl/index.html
• 仪表盘：openup-dashboard/index.html
• 文档：documentation/index.html

如需完整交互体验，建议使用本地服务器（如 npx serve .）打开页面。

使用建议link

• 替换品牌色时直接修改 CSS 文件顶部 :root 中的 CSS 变量（如 --color-primary），可批量更新全站配色
• 页面依赖外部 CDN 资源（如 Google Fonts、jQuery），部署时需确保网络可达