# OrangeRadio 介绍页

> 自包含炫酷单页，介绍 OrangeRadio 应用。包含应用截图、文档查看器、GitHub 链接。

## 快速预览

```bash
# 从 website 目录启动本地服务器（推荐）
cd website
python -m http.server 8099
# 浏览器访问 http://localhost:8099/landing.html
```

> 文档查看器（点 Footer 文档链接）需通过 HTTP 服务器访问 Markdown 文件。
> 直接双击 `landing.html`（`file://` 协议）时，浏览器安全限制会阻止读取文件，文档链接会提示改用服务器预览。

## 文件结构

```
website/
├── landing.html      # 单页介绍（CSS/JS 全内联，零依赖）
├── assets/           # 应用截图
│   ├── home.png              # 应用首页
│   ├── hero-particles.png    # 粒子律动全屏
│   └── studio.png            # OrangeStudio 界面
├── docs/             # 文档副本（供文档查看器读取）
│   ├── 01-技术架构.md
│   ├── 02-使用手册.md
│   ├── 03-开发文档.md
│   ├── 06-创作工作室指南.md
│   ├── 07-Roadmap.md
│   └── 14-推荐系统与LLM接入.md
└── README.md         # 本文件
```

> `docs/` 是项目根 `docs/` 的副本，让介绍页自包含——不依赖上级目录，部署更简单。
> 如果项目文档更新，重新复制即可：`cp ../docs/01-技术架构.md docs/`

## 📸 截图

页面已集成 3 张真实应用截图（位于 `assets/`）：

| 截图内容 | 文件名 | 页面位置 |
|---|---|---|
| 应用首页 | `home.png` | 「多音源聚合」section 右侧 |
| 粒子律动全屏 | `hero-particles.png` | 「沉浸式视觉」section 主展示位 |
| OrangeStudio 界面 | `studio.png` | 「AI 创作工作站」section |

> 其余布局卡片（律动专辑/沉浸黑胶/歌词长卷/杂志三栏）仍为代码绘制的模拟预览。如需替换为真实截图，按下文说明操作。

### 替换示例

以替换某个模拟布局卡为例，找到这段（模拟预览结构）：

```html
<div class="shot-frame" style="height: 200px;">
  <div class="mock-window">
    ...模拟界面...
  </div>
</div>
```

替换成（真实截图）：

```html
<div class="shot-frame shot-real" style="height: 200px;">
  <img class="shot-img" src="assets/你的截图.png" alt="布局说明" />
</div>
```

> 关键：加 `shot-real` class 会自动隐藏「模拟预览」角标；`shot-img` class 提供铺满 + hover 缩放效果。保留外层 `.shot-frame` 容器（提供圆角、边框、阴影）。

## 🎨 设计说明

介绍页严格复用了应用本体的视觉语言：

- **配色**：深色录音室底（`#030409`）+ 烧橙信号光（`#ff6b1a`）+ 薄荷绿点缀（`#00f5d4`）
- **字体**：Fraunces / Cormorant Garamond（编辑杂志感衬线）+ Inter + Noto Serif SC + JetBrains Mono
- **Logo**：橙子 + 电波环 SVG（与应用 `OrangeRadioLogo.tsx` 一致）
- **动效**：Canvas 节奏粒子（复刻 Three.js 视觉的 2D 版）、滚动渐入、hover 聚光灯、数字 count-up

## 🔗 链接

- **GitHub 仓库**：https://github.com/jzh-ff/OrangeRadio
- **下载**：https://github.com/jzh-ff/OrangeRadio/releases （支持 Windows / macOS / Linux，打包发布 Release 后可下载安装包）

## 🚀 部署到 GitHub Pages

```bash
# 1. 把 website/ 推到仓库
git add website/
git commit -m "docs: 新增应用介绍页"
git push

# 2. GitHub 仓库 Settings → Pages
#    Source 选 Deploy from a branch
#    Branch 选 main，文件夹选 /website
#    保存后访问 https://<用户名>.github.io/<仓库名>/landing.html
```

或用 GitHub Actions 自动部署，在 `.github/workflows/` 加一个把 `website/` 推到 `gh-pages` 分支的 workflow。

## 自定义

- **文档内容**：编辑 `docs/` 下的 Markdown 文件，文档查看器会实时渲染
- **新增文档**：把 `.md` 放进 `docs/`，在 Footer 加 `<a href="docs/xxx.md" data-doc>标题</a>` 即可