docs: 添加宣传视频到 Pages 主页和 README

- Pages 主页新增「30秒了解 cftunnel」视频展示区
- README 嵌入 video 标签,GitHub 上直接可播放
- 清理 docs/images 冗余副本文件
This commit is contained in:
晴天
2026-02-24 01:04:20 +08:00
parent 4f36ea0942
commit 7729c2de0b
3 changed files with 27 additions and 1 deletions
+5 -1
View File
@@ -10,7 +10,11 @@
关联项目:[cftunnel-app 桌面客户端](https://github.com/qingchencloud/cftunnel-app)[下载](https://github.com/qingchencloud/cftunnel-app/releases) · [ClawApp](https://github.com/qingchencloud/clawapp) · [OpenClaw 中文翻译](https://github.com/1186258278/OpenClawChineseTranslation)
> 用 AI 写了个前端页面想给客户看?本地跑着 API 想让远程同事调试?开发环境需要接收 Webhook?
<p align="center">
<video src="docs/videos/promo.mp4" width="720" controls></video>
</p>
> 在本地写了个前端页面想给客户看?本地跑着 API 想让远程同事调试?开发环境需要接收 Webhook?
>
> 一条命令,你的 `localhost` 就有了公网域名。
+22
View File
@@ -104,6 +104,12 @@ nav .links a:hover{color:var(--text);text-decoration:none}
footer{border-top:1px solid var(--border);padding:40px 0;text-align:center;color:var(--text2);font-size:13px}
footer .links{display:flex;gap:24px;justify-content:center;margin-bottom:16px}
/* 视频展示 */
.video-showcase{background:var(--surface);padding:60px 0}
.video-wrap{max-width:720px;margin:0 auto;border-radius:12px;overflow:hidden;border:1px solid var(--border);box-shadow:0 8px 32px rgba(0,0,0,.4)}
.video-wrap video{display:block;width:100%}
.video-label{text-align:center;margin-top:16px;font-size:13px;color:var(--text2)}
/* 响应式 */
@media(max-width:768px){
nav .links{display:none}
@@ -120,6 +126,7 @@ footer .links{display:flex;gap:24px;justify-content:center;margin-bottom:16px}
<div class="container">
<a href="#" class="logo">cf<span>tunnel</span></a>
<div class="links">
<a href="#demo-video">演示</a>
<a href="#features">特性</a>
<a href="#compare">对比</a>
<a href="#install">安装</a>
@@ -163,6 +170,21 @@ footer .links{display:flex;gap:24px;justify-content:center;margin-bottom:16px}
</div>
</section>
<section id="demo-video" class="video-showcase">
<div class="container">
<div class="section-title">
<h2>30 秒了解 cftunnel</h2>
<p>从安装到穿透,一条命令的事</p>
</div>
<div class="video-wrap">
<video controls preload="metadata" poster="images/terminal-demo.gif">
<source src="videos/promo.mp4" type="video/mp4">
</video>
</div>
<p class="video-label">cftunnel v0.4 · 终端演示 + 架构解析 + 功能对比</p>
</div>
</section>
<section id="features">
<div class="container">
<div class="section-title">
Binary file not shown.