mirror of
https://github.com/qingchencloud/cftunnel.git
synced 2026-08-28 10:03:59 +08:00
docs: 添加宣传视频到 Pages 主页和 README
- Pages 主页新增「30秒了解 cftunnel」视频展示区 - README 嵌入 video 标签,GitHub 上直接可播放 - 清理 docs/images 冗余副本文件
This commit is contained in:
@@ -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` 就有了公网域名。
|
||||
|
||||
|
||||
@@ -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.
Reference in New Issue
Block a user