mirror of
https://github.com/qingchencloud/clawpanel.git
synced 2026-05-06 20:02:49 +08:00
1716 lines
134 KiB
HTML
1716 lines
134 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN" class="dark">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>ClawPanel - OpenClaw AI Agent 可视化管理面板 | 快速搭建、配置、监控你的 AI 智能体</title>
|
||
<meta name="description" content="ClawPanel 是 OpenClaw AI Agent 框架的可视化管理面板，基于 Tauri v2 构建的跨平台桌面应用。内置 AI 助手支持工具调用（终端执行、文件读写、目录浏览），让 AI 帮你诊断和修复 OpenClaw 配置。支持仪表盘监控、多模型配置（OpenAI/DeepSeek/Kimi/Anthropic）、消息渠道管理、内置 QQ 机器人、实时 AI 聊天、记忆管理、Agent 管理、网关配置、服务管控、日志查看、内网穿透、系统诊断。一键安装 OpenClaw，快速搭建你的私有 AI Agent，开源免费，支持 Windows/macOS/Linux。">
|
||
<meta name="keywords" content="ClawPanel, OpenClaw, AI Agent, AI 智能体, 管理面板, 可视化管理, 快速搭建, 一键安装, 桌面应用, 跨平台, Tauri, Tauri v2, Rust, 开源, 免费, LLM, 大语言模型, 多模型, 模型配置, OpenAI, DeepSeek, Kimi, Anthropic, Claude, 消息渠道, QQ 机器人, Telegram, Discord, 实时聊天, AI 对话, 流式响应, 记忆管理, Agent 管理, 多 Agent, 网关配置, Gateway, 服务管理, 日志查看, 内网穿透, Cloudflare Tunnel, 系统诊断, WebSocket, 仪表盘, 监控, 配置管理, 私有部署, 本地部署, 自托管, AI 工具, AI 平台, 智能体平台, 人工智能, 深度学习, 自然语言处理, NLP, 模型调度, 模型切换, 备选模型, 开箱即用, 零代码, 低代码, admin panel, dashboard, open source AI, self-hosted AI, local AI, AI management">
|
||
<meta name="author" content="晴辰云 QingchenCloud">
|
||
<meta name="robots" content="index, follow, max-snippet:-1, max-image-preview:large">
|
||
<link rel="canonical" href="https://claw.qt.cool/">
|
||
<meta property="og:title" content="ClawPanel - OpenClaw AI Agent 可视化管理面板 | 快速搭建你的 AI 智能体">
|
||
<meta property="og:description" content="基于 Tauri v2 的跨平台桌面应用，为 OpenClaw AI Agent 提供可视化管理。内置 AI 助手支持工具调用，新增消息渠道管理与内置 QQ 机器人接入。开源免费。">
|
||
<meta property="og:type" content="website">
|
||
<meta property="og:url" content="https://claw.qt.cool/">
|
||
<meta property="og:site_name" content="ClawPanel">
|
||
<meta property="og:locale" content="zh_CN">
|
||
<meta property="og:image" content="https://claw.qt.cool/00.png">
|
||
<meta property="og:image:width" content="1200">
|
||
<meta property="og:image:height" content="675">
|
||
<meta property="og:image:alt" content="ClawPanel 仪表盘">
|
||
<meta name="twitter:card" content="summary_large_image">
|
||
<meta name="twitter:title" content="ClawPanel - OpenClaw AI Agent 可视化管理面板">
|
||
<meta name="twitter:description" content="基于 Tauri v2 的跨平台桌面应用。支持消息渠道管理、内置 QQ 机器人、多模型配置与实时 AI 聊天。">
|
||
<meta name="twitter:image" content="https://claw.qt.cool/00.png">
|
||
<link rel="icon" href="./logo.png" type="image/png">
|
||
<script type="application/ld+json">
|
||
{
|
||
"@context": "https://schema.org",
|
||
"@type": "SoftwareApplication",
|
||
"name": "ClawPanel",
|
||
"applicationCategory": "DeveloperApplication",
|
||
"operatingSystem": "Windows, macOS, Linux",
|
||
"description": "OpenClaw AI Agent 可视化管理面板，基于 Tauri v2 的跨平台桌面应用。支持仪表盘监控、多模型配置、消息渠道管理、内置 QQ 机器人、实时 AI 聊天、记忆管理、Agent 管理、网关配置、内网穿透等功能。",
|
||
"url": "https://claw.qt.cool/",
|
||
"downloadUrl": "https://github.com/qingchencloud/clawpanel/releases/latest",
|
||
"softwareVersion": "0.9.6",
|
||
"author": {
|
||
"@type": "Organization",
|
||
"name": "晴辰云 QingchenCloud",
|
||
"url": "https://qt.cool"
|
||
},
|
||
"license": "https://www.gnu.org/licenses/agpl-3.0.html",
|
||
"offers": {
|
||
"@type": "Offer",
|
||
"price": "0",
|
||
"priceCurrency": "CNY"
|
||
},
|
||
"screenshot": "https://claw.qt.cool/00.png",
|
||
"keywords": "OpenClaw, AI Agent, 管理面板, Tauri, 跨平台, 开源, 免费, LLM, 多模型"
|
||
}
|
||
</script>
|
||
<style>
|
||
/* ══════════════ Theme Variables ══════════════ */
|
||
:root {
|
||
--bg: #ffffff; --bg-s: #f9fafb; --bg-card: rgba(255,255,255,0.8); --bg-card-s: rgba(255,255,255,0.6);
|
||
--text: #111827; --text-s: #6b7280; --text-t: #9ca3af;
|
||
--border: rgba(0,0,0,0.08); --border-h: rgba(99,102,241,0.3);
|
||
--accent: #6366f1; --accent-h: #4f46e5; --accent-10: rgba(99,102,241,0.1); --accent-5: rgba(99,102,241,0.05);
|
||
--nav-bg: rgba(255,255,255,0.82); --card-shadow: 0 4px 24px -6px rgba(0,0,0,0.07);
|
||
}
|
||
html.dark {
|
||
--bg: #0a0a0f; --bg-s: #111118; --bg-card: rgba(255,255,255,0.025); --bg-card-s: rgba(255,255,255,0.03);
|
||
--text: #f3f4f6; --text-s: #9ca3af; --text-t: #6b7280;
|
||
--border: rgba(255,255,255,0.06); --border-h: rgba(129,140,248,0.4);
|
||
--accent: #818cf8; --accent-h: #6366f1; --accent-10: rgba(129,140,248,0.1); --accent-5: rgba(129,140,248,0.05);
|
||
--nav-bg: rgba(10,10,15,0.82); --card-shadow: 0 4px 24px -6px rgba(0,0,0,0.3);
|
||
}
|
||
|
||
/* ══════════════ Reset & Base ══════════════ */
|
||
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
|
||
html { scroll-behavior: auto; }
|
||
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, Roboto, sans-serif; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; overflow-x: hidden; line-height: 1.6; transition: background 0.3s, color 0.3s; }
|
||
a { color: inherit; text-decoration: none; } img { max-width: 100%; height: auto; display: block; } .screenshot-frame img, .gallery-card img, .hero-image-wrap img, .arch-gif-wrap img { aspect-ratio: 16/10; object-fit: cover; background: var(--bg-s); }
|
||
button { font: inherit; cursor: pointer; border: none; background: none; } ul { list-style: none; }
|
||
.mono { font-family: 'SF Mono', 'Fira Code', Consolas, monospace; }
|
||
|
||
/* ══════════════ Layout ══════════════ */
|
||
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
|
||
.container-sm { max-width: 900px; margin: 0 auto; padding: 0 20px; }
|
||
.section { position: relative; padding: 96px 0; overflow: hidden; scroll-margin-top: 120px; }
|
||
.section-header { text-align: center; margin-bottom: 64px; }
|
||
.section-title { font-size: 2rem; font-weight: 900; letter-spacing: -0.03em; margin-bottom: 12px; }
|
||
.section-desc { color: var(--text-s); max-width: 480px; margin: 0 auto; }
|
||
|
||
/* ══════════════ Nav ══════════════ */
|
||
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: var(--nav-bg); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-bottom: 1px solid var(--border); }
|
||
.nav-inner { max-width: 1200px; margin: 0 auto; padding: 0 20px; height: 64px; display: flex; align-items: center; justify-content: space-between; }
|
||
.nav-logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; letter-spacing: -0.02em; }
|
||
.nav-logo img { width: 32px; height: 32px; border-radius: 8px; }
|
||
.nav-links { display: flex; align-items: center; gap: 28px; font-size: 14px; font-weight: 500; }
|
||
.nav-link { color: var(--text-s); transition: color 0.2s; } .nav-link:hover { color: var(--text); }
|
||
.nav-actions { display: none; align-items: center; gap: 4px; }
|
||
.theme-btn { padding: 8px; border-radius: 8px; color: var(--text-s); transition: background 0.2s; }
|
||
.theme-btn:hover { background: var(--accent-5); }
|
||
.theme-btn svg { width: 16px; height: 16px; display: block; }
|
||
html.dark .sun { display: block; } html.dark .moon { display: none; }
|
||
html:not(.dark) .sun { display: none; } html:not(.dark) .moon { display: block; }
|
||
.hamburger { padding: 8px; border-radius: 8px; color: var(--text-s); } .hamburger svg { width: 20px; height: 20px; display: block; }
|
||
.mobile-menu { display: block; position: absolute; top: 64px; left: 0; right: 0; background: var(--nav-bg); backdrop-filter: blur(24px); border-bottom: 1px solid var(--border); transform: translateY(-110%); opacity: 0; transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), opacity 0.25s; pointer-events: none; }
|
||
.mobile-menu.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
|
||
.mobile-menu-inner { padding: 16px 20px; display: flex; flex-direction: column; gap: 4px; }
|
||
.mobile-menu-link { padding: 10px 0; color: var(--text-s); font-size: 16px; font-weight: 500; display: block; }
|
||
|
||
/* ══════════════ Buttons ══════════════ */
|
||
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 32px; border-radius: 12px; font-weight: 600; font-size: 15px; transition: all 0.25s; }
|
||
.btn-primary { background: var(--accent); color: #fff; position: relative; z-index: 0; }
|
||
.btn-primary:hover { background: var(--accent-h); transform: translateY(-2px); box-shadow: 0 8px 30px rgba(99,102,241,0.35); }
|
||
.btn-magnetic { transition: transform 0.3s cubic-bezier(0.16,1,0.3,1); }
|
||
.btn-primary::before { content:''; position: absolute; inset: -2px; border-radius: inherit; background: conic-gradient(from var(--angle,0deg), #6366f1, #a855f7, #22d3ee, #6366f1); z-index: -2; animation: spin 3s linear infinite; }
|
||
.btn-primary::after { content:''; position: absolute; inset: 0; border-radius: inherit; background: var(--accent); z-index: -1; }
|
||
@property --angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
|
||
@keyframes spin { to { --angle: 360deg; } }
|
||
.btn-outline { border: 1px solid var(--border); background: var(--bg-card); color: var(--text); }
|
||
.btn-outline:hover { border-color: var(--border-h); background: var(--bg-s); }
|
||
.btn svg { width: 18px; height: 18px; }
|
||
.btn-sm { padding: 10px 20px; font-size: 13px; border-radius: 10px; }
|
||
|
||
/* ══════════════ Gradient Text ══════════════ */
|
||
.gradient-text { background: linear-gradient(135deg, #6366f1, #a855f7, #22d3ee, #6366f1); background-size: 300% 300%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: gradShift 6s ease-in-out infinite; position: relative; }
|
||
@keyframes gradShift { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
|
||
.shimmer { position: relative; overflow: hidden; display: inline-block; vertical-align: baseline; }
|
||
.shimmer::after { content:''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent); animation: shimmer 3s ease-in-out infinite; }
|
||
@keyframes shimmer { 0% { left: -100%; } 100% { left: 200%; } }
|
||
|
||
/* ══════════════ Aurora ══════════════ */
|
||
.aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
|
||
.aurora-band { position: absolute; width: 150%; height: 60%; filter: blur(80px); opacity: 0.12; border-radius: 50%; }
|
||
html:not(.dark) .aurora-band { opacity: 0.06; }
|
||
.aurora-1 { background: linear-gradient(135deg, #6366f1, #a855f7); top: -30%; left: -25%; animation: aur1 12s ease-in-out infinite alternate; }
|
||
.aurora-2 { background: linear-gradient(225deg, #22d3ee, #6366f1); top: -20%; right: -30%; animation: aur2 15s ease-in-out infinite alternate; }
|
||
.aurora-3 { background: linear-gradient(180deg, #a855f7, #ec4899); bottom: -40%; left: 10%; animation: aur3 10s ease-in-out infinite alternate; }
|
||
@keyframes aur1 { 0% { transform: translate(0,0) rotate(0deg) scale(1); } 100% { transform: translate(60px,40px) rotate(15deg) scale(1.1); } }
|
||
@keyframes aur2 { 0% { transform: translate(0,0) rotate(0deg) scale(1); } 100% { transform: translate(-50px,30px) rotate(-10deg) scale(1.15); } }
|
||
@keyframes aur3 { 0% { transform: translate(0,0) rotate(0deg) scale(1); } 100% { transform: translate(30px,-20px) rotate(8deg) scale(0.9); } }
|
||
|
||
/* ══════════════ Noise Texture ══════════════ */
|
||
.noise { position: fixed; inset: 0; pointer-events: none; z-index: 9999; opacity: 0.025; mix-blend-mode: overlay; }
|
||
.noise::before { content:''; position: absolute; inset: -50%; width: 200%; height: 200%; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
|
||
html:not(.dark) .noise { opacity: 0.015; }
|
||
|
||
/* ══════════════ Scroll Progress ══════════════ */
|
||
.scroll-progress { position: absolute; bottom: 0; left: 0; height: 2px; background: linear-gradient(90deg, #6366f1, #a855f7, #22d3ee); width: 0%; transition: none; }
|
||
|
||
/* ══════════════ Background Effects ══════════════ */
|
||
.grid-bg { position: absolute; inset: 0; background-image: linear-gradient(rgba(99,102,241,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(99,102,241,0.04) 1px, transparent 1px); background-size: 64px 64px; mask-image: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent); -webkit-mask-image: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent); }
|
||
html.dark .grid-bg { background-image: linear-gradient(rgba(99,102,241,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(99,102,241,0.06) 1px, transparent 1px); }
|
||
.orb { position: absolute; border-radius: 50%; filter: blur(100px); pointer-events: none; will-change: transform; }
|
||
.orb-1 { width: 600px; height: 600px; background: rgba(99,102,241,0.12); top: -200px; left: -100px; animation: oF1 20s ease-in-out infinite; }
|
||
.orb-2 { width: 500px; height: 500px; background: rgba(168,85,247,0.08); top: -100px; right: -150px; animation: oF2 25s ease-in-out infinite; }
|
||
.orb-3 { width: 400px; height: 400px; background: rgba(34,211,238,0.06); bottom: -100px; left: 30%; animation: oF3 18s ease-in-out infinite; }
|
||
@keyframes oF1 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(40px,30px); } }
|
||
@keyframes oF2 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-30px,40px); } }
|
||
@keyframes oF3 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(20px,-25px); } }
|
||
html:not(.dark) .orb-1 { background: rgba(99,102,241,0.06); }
|
||
html:not(.dark) .orb-2 { background: rgba(168,85,247,0.04); }
|
||
html:not(.dark) .orb-3 { background: rgba(34,211,238,0.03); }
|
||
|
||
/* ══════════════ Particles ══════════════ */
|
||
.particles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
|
||
.particle { position: absolute; width: 2px; height: 2px; background: var(--accent); border-radius: 50%; opacity: 0; animation: pRise linear infinite; }
|
||
@keyframes pRise { 0% { opacity:0; transform: translateY(100vh) scale(0); } 10% { opacity:0.5; } 90% { opacity:0.15; } 100% { opacity:0; transform: translateY(-20vh) scale(1); } }
|
||
|
||
/* ══════════════ Hero ══════════════ */
|
||
.hero { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding-top: 64px; position: relative; overflow: hidden; }
|
||
.hero-inner { position: relative; z-index: 10; max-width: 1200px; margin: 0 auto; padding: 48px 20px 96px; text-align: center; }
|
||
.hero-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px; border-radius: 99px; border: 1px solid rgba(99,102,241,0.2); background: var(--accent-5); font-size: 14px; color: var(--accent); margin-bottom: 32px; }
|
||
.hero-badge .pulse { width: 6px; height: 6px; border-radius: 50%; background: #22c55e; animation: pulse 2s ease-in-out infinite; }
|
||
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:0.3; } }
|
||
.hero-title { font-size: 3.75rem; font-weight: 900; letter-spacing: -0.04em; line-height: 1.08; margin-bottom: 24px; }
|
||
.hero-subtitle { font-size: 1.1rem; color: var(--text-s); max-width: 600px; margin: 0 auto 40px; line-height: 1.7; }
|
||
.hero-cta { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }
|
||
.hero-image-wrap { perspective: 1200px; max-width: 1100px; margin: 64px auto 0; padding: 0 16px; position: relative; }
|
||
.hero-image-wrap::before { content:''; position: absolute; inset: -2px; border-radius: 18px; background: conic-gradient(from var(--border-angle,0deg), #6366f1, #a855f7, #22d3ee, #10b981, #6366f1); z-index: -1; animation: borderSpin 4s linear infinite; opacity: 0.6; }
|
||
.hero-image-wrap::after { content:''; position: absolute; inset: -2px; border-radius: 18px; background: conic-gradient(from var(--border-angle,0deg), #6366f1, #a855f7, #22d3ee, #10b981, #6366f1); z-index: -1; animation: borderSpin 4s linear infinite; filter: blur(20px); opacity: 0.4; }
|
||
@property --border-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
|
||
@keyframes borderSpin { to { --border-angle: 360deg; } }
|
||
.hero-image-wrap img { transform: rotateX(4deg) scale(0.98); border-radius: 16px; box-shadow: 0 20px 60px -15px rgba(99,102,241,0.25); transition: transform 0.6s cubic-bezier(0.16,1,0.3,1), box-shadow 0.6s; cursor: zoom-in; width: 100%; position: relative; z-index: 1; }
|
||
.hero-image-wrap:hover img { transform: rotateX(0deg) scale(1); box-shadow: 0 30px 80px -15px rgba(99,102,241,0.35); }
|
||
.hero-glow { position: absolute; bottom: -60px; left: 50%; transform: translateX(-50%); width: 80%; height: 120px; background: radial-gradient(ellipse, rgba(99,102,241,0.15), transparent 70%); filter: blur(40px); pointer-events: none; }
|
||
html:not(.dark) .hero-glow { background: radial-gradient(ellipse, rgba(99,102,241,0.08), transparent 70%); }
|
||
|
||
/* ══════════════ Stats ══════════════ */
|
||
.stats-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
|
||
.stat-card { border-radius: 16px; border: 1px solid var(--border); background: var(--bg-card-s); backdrop-filter: blur(8px); padding: 24px; text-align: center; }
|
||
.stat-value { font-size: 2rem; font-weight: 900; letter-spacing: -0.02em; }
|
||
.stat-label { font-size: 14px; color: var(--text-s); margin-top: 8px; }
|
||
.c-indigo { color: #6366f1; } .c-purple { color: #a855f7; } .c-cyan { color: #22d3ee; } .c-emerald { color: #10b981; }
|
||
.c-green { color: #22c55e; } .c-orange { color: #f97316; }
|
||
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
|
||
.float-a { animation: float 6s ease-in-out infinite; } .float-b { animation: float 6s ease-in-out 2s infinite; }
|
||
|
||
/* ══════════════ Showcase ══════════════ */
|
||
.showcase-row { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; margin-bottom: 112px; }
|
||
.showcase-row:last-child { margin-bottom: 0; }
|
||
.showcase-tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 14px; border-radius: 99px; font-size: 12px; font-weight: 600; letter-spacing: 0.5px; margin-bottom: 16px; }
|
||
.showcase-title { font-size: 1.75rem; font-weight: 900; letter-spacing: -0.03em; margin-bottom: 16px; }
|
||
.showcase-desc { color: var(--text-s); line-height: 1.7; margin-bottom: 16px; }
|
||
.showcase-list { display: flex; flex-direction: column; gap: 8px; }
|
||
.showcase-list li { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-s); }
|
||
.check { color: #22c55e; flex-shrink: 0; font-weight: 700; }
|
||
.screenshot-frame { border-radius: 12px; overflow: hidden; border: 1px solid var(--border); box-shadow: var(--card-shadow); transition: transform 0.5s cubic-bezier(0.16,1,0.3,1), box-shadow 0.5s; cursor: zoom-in; position: relative; }
|
||
.screenshot-frame:hover { transform: translateY(-6px) scale(1.01); box-shadow: 0 20px 60px -10px rgba(99,102,241,0.2); }
|
||
.screenshot-frame::after { content:''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(99,102,241,0.08), transparent 50%); opacity: 0; transition: opacity 0.5s; pointer-events: none; }
|
||
.screenshot-frame:hover::after { opacity: 1; }
|
||
.screenshot-frame img { width: 100%; display: block; }
|
||
|
||
/* ══════════════ Gallery ══════════════ */
|
||
.gallery-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-bottom: 24px; }
|
||
.gallery-card { border-radius: 12px; overflow: hidden; border: 1px solid var(--border); box-shadow: var(--card-shadow); transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), box-shadow 0.4s, border-color 0.4s; cursor: zoom-in; position: relative; }
|
||
.gallery-card:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 12px 40px -8px rgba(99,102,241,0.2); border-color: var(--border-h); }
|
||
.gallery-card img { width: 100%; display: block; }
|
||
.gallery-label { position: absolute; bottom: 0; left: 0; right: 0; padding: 8px 12px; background: linear-gradient(transparent, rgba(0,0,0,0.65)); color: #fff; font-size: 13px; font-weight: 600; opacity: 0; transition: opacity 0.3s; }
|
||
.gallery-card:hover .gallery-label { opacity: 1; }
|
||
.info-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
|
||
.info-card { border-radius: 16px; border: 1px solid var(--border); background: var(--bg-card); backdrop-filter: blur(8px); padding: 20px; }
|
||
.info-card .ic { font-size: 18px; margin-bottom: 8px; }
|
||
.info-card h4 { font-size: 14px; font-weight: 700; margin-bottom: 4px; }
|
||
.info-card p { font-size: 12px; color: var(--text-s); line-height: 1.5; }
|
||
|
||
/* ══════════════ Tech ══════════════ */
|
||
.tech-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; }
|
||
.tech-card { border-radius: 16px; border: 1px solid var(--border); background: var(--bg-card); backdrop-filter: blur(8px); padding: 24px; transition: transform 0.3s, box-shadow 0.3s; position: relative; overflow: hidden; }
|
||
.tech-card:hover { box-shadow: 0 12px 40px -10px rgba(99,102,241,0.12); }
|
||
.tilt-card { transition: transform 0.4s cubic-bezier(0.16,1,0.3,1); transform-style: preserve-3d; }
|
||
.tech-card::before { content:''; position: absolute; inset: 0; background: radial-gradient(300px circle at var(--mx,50%) var(--my,50%), rgba(99,102,241,0.06), transparent 60%); opacity: 0; transition: opacity 0.4s; pointer-events: none; }
|
||
.tech-card:hover::before { opacity: 1; }
|
||
.tech-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
|
||
.tech-icon { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 18px; }
|
||
.tech-name { font-size: 14px; font-weight: 700; }
|
||
.tech-sub { font-size: 12px; color: var(--text-s); }
|
||
.tech-desc { font-size: 14px; color: var(--text-s); }
|
||
|
||
/* ══════════════ Marquee ══════════════ */
|
||
.marquee-wrap { overflow: hidden; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 16px 0; }
|
||
.marquee-track { display: flex; width: max-content; animation: mScroll 30s linear infinite; }
|
||
.marquee-track:hover { animation-play-state: paused; }
|
||
.marquee-item { padding: 0 28px; font-size: 14px; color: var(--text-t); white-space: nowrap; }
|
||
.marquee-dot { color: var(--accent); }
|
||
@keyframes mScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
|
||
|
||
/* ══════════════ Terminal ══════════════ */
|
||
.terminal { border-radius: 16px; border: 1px solid var(--border); background: var(--bg-card); backdrop-filter: blur(8px); overflow: hidden; }
|
||
.terminal-bar { display: flex; align-items: center; gap: 8px; padding: 14px 20px; border-bottom: 1px solid var(--border); }
|
||
.td { width: 12px; height: 12px; border-radius: 50%; } .td-r { background: rgba(239,68,68,0.8); } .td-y { background: rgba(234,179,8,0.8); } .td-g { background: rgba(34,197,94,0.8); }
|
||
.terminal-title { margin-left: 12px; font-size: 12px; color: var(--text-t); }
|
||
.terminal-body { padding: 20px; font-size: 14px; line-height: 2.2; overflow-x: auto; }
|
||
.t-comment { color: var(--text-t); }
|
||
.t-cmd { color: var(--text-s); } .t-cmd::before { content: '$ '; color: var(--accent); }
|
||
|
||
/* ══════════════ Deploy Guides ══════════════ */
|
||
.deploy-grid { display: flex; flex-direction: column; gap: 24px; }
|
||
.deploy-card { border-radius: 16px; border: 1px solid var(--border); background: var(--bg-card); backdrop-filter: blur(8px); padding: 28px; transition: all 0.3s; }
|
||
.deploy-card:hover { border-color: var(--border-h); }
|
||
.deploy-card-header { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 20px; }
|
||
.deploy-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||
.deploy-title { font-size: 18px; font-weight: 700; margin-bottom: 4px; }
|
||
.deploy-desc { font-size: 14px; color: var(--text-s); }
|
||
|
||
/* ══════════════ Docs Center ══════════════ */
|
||
.docs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
|
||
.doc-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 24px; display: flex; gap: 16px; align-items: flex-start; backdrop-filter: blur(12px); transition: all 0.3s; cursor: pointer; position: relative; overflow: hidden; }
|
||
.doc-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(99,102,241,0.06), transparent 60%); opacity: 0; transition: opacity 0.4s; pointer-events: none; }
|
||
.doc-card:hover::before { opacity: 1; }
|
||
.doc-card:hover { border-color: var(--border-h); transform: translateY(-3px); box-shadow: 0 12px 40px rgba(99,102,241,0.08); }
|
||
.doc-icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; }
|
||
.doc-card h3 { font-size: 15px; font-weight: 700; margin-bottom: 6px; }
|
||
.doc-card p { color: var(--text-s); font-size: 13px; margin-bottom: 8px; }
|
||
.doc-tags { display: flex; flex-wrap: wrap; gap: 6px; }
|
||
.doc-tag { padding: 2px 8px; background: rgba(255,255,255,0.06); border-radius: 4px; font-size: 11px; color: var(--text-t); }
|
||
@media (max-width: 640px) { .docs-grid { grid-template-columns: 1fr; } }
|
||
|
||
/* Markdown Reader Modal */
|
||
.md-reader { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,0.7); backdrop-filter: blur(8px); display: none; justify-content: center; align-items: flex-start; padding: 40px 20px; overflow-y: auto; }
|
||
.md-reader.active { display: flex; }
|
||
.md-reader-inner { background: var(--bg); border: 1px solid var(--border); border-radius: 16px; max-width: 820px; width: 100%; position: relative; }
|
||
.md-reader-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--bg); border-radius: 16px 16px 0 0; z-index: 1; }
|
||
.md-reader-header h3 { font-size: 16px; font-weight: 700; }
|
||
.md-reader-header a { color: var(--text-s); font-size: 13px; margin-right: 16px; }
|
||
.md-reader-header a:hover { color: var(--accent); }
|
||
.md-reader-close { background: none; border: none; color: var(--text-s); cursor: pointer; padding: 4px; border-radius: 8px; transition: all 0.2s; }
|
||
.md-reader-close:hover { background: var(--surface); color: var(--text); }
|
||
.md-reader-body { padding: 32px; line-height: 1.8; font-size: 15px; }
|
||
.md-reader-body h1 { font-size: 24px; font-weight: 800; margin: 32px 0 16px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
|
||
.md-reader-body h2 { font-size: 20px; font-weight: 700; margin: 28px 0 12px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
|
||
.md-reader-body h3 { font-size: 17px; font-weight: 600; margin: 24px 0 8px; }
|
||
.md-reader-body p { margin-bottom: 12px; }
|
||
.md-reader-body ul, .md-reader-body ol { margin-bottom: 12px; padding-left: 24px; }
|
||
.md-reader-body li { margin-bottom: 4px; }
|
||
.md-reader-body code { background: var(--surface); padding: 2px 6px; border-radius: 4px; font-size: 13px; font-family: 'JetBrains Mono', 'Fira Code', monospace; }
|
||
.md-reader-body pre { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 16px; overflow-x: auto; margin-bottom: 16px; }
|
||
.md-reader-body pre code { background: none; padding: 0; font-size: 13px; }
|
||
.md-reader-body table { width: 100%; border-collapse: collapse; margin-bottom: 16px; font-size: 14px; }
|
||
.md-reader-body th, .md-reader-body td { border: 1px solid var(--border); padding: 8px 12px; text-align: left; }
|
||
.md-reader-body th { background: var(--surface); font-weight: 600; }
|
||
.md-reader-body blockquote { border-left: 3px solid var(--accent); padding: 8px 16px; margin: 12px 0; color: var(--text-s); background: var(--surface); border-radius: 0 8px 8px 0; }
|
||
.md-reader-body a { color: var(--accent); text-decoration: none; }
|
||
.md-reader-body a:hover { text-decoration: underline; }
|
||
.md-reader-body hr { border: none; border-top: 1px solid var(--border); margin: 24px 0; }
|
||
.md-loading { text-align: center; padding: 60px; color: var(--text-t); }
|
||
|
||
/* ══════════════ Ecosystem ══════════════ */
|
||
.eco-list { display: flex; flex-direction: column; gap: 16px; }
|
||
.eco-card { display: flex; align-items: center; justify-content: space-between; border-radius: 16px; border: 1px solid var(--border); background: var(--bg-card); backdrop-filter: blur(8px); padding: 24px; transition: all 0.3s; }
|
||
.eco-card:hover { transform: translateY(-2px); border-color: var(--border-h); }
|
||
.eco-card h3 { font-size: 16px; font-weight: 700; margin-bottom: 4px; transition: color 0.2s; }
|
||
.eco-card:hover h3 { color: var(--accent); }
|
||
.eco-card p { font-size: 14px; color: var(--text-s); }
|
||
.eco-arrow { color: var(--text-t); transition: all 0.3s; font-size: 18px; }
|
||
.eco-card:hover .eco-arrow { color: var(--accent); transform: translateX(4px); }
|
||
|
||
/* ══════════════ Community Banner ══════════════ */
|
||
.community-banner { position: relative; padding: 72px 0; overflow: hidden; scroll-margin-top: 120px; background: linear-gradient(135deg, rgba(99,102,241,0.03) 0%, rgba(168,85,247,0.05) 50%, rgba(34,211,238,0.03) 100%); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
|
||
html.dark .community-banner { background: linear-gradient(135deg, rgba(99,102,241,0.06) 0%, rgba(168,85,247,0.08) 50%, rgba(34,211,238,0.05) 100%); }
|
||
.community-banner-inner { display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: center; }
|
||
.community-banner-text h2 { font-size: 2rem; font-weight: 900; letter-spacing: -0.03em; margin-bottom: 16px; }
|
||
.community-banner-text p { color: var(--text-s); font-size: 15px; line-height: 1.9; max-width: 420px; margin-bottom: 24px; }
|
||
.community-banner-links { display: flex; flex-wrap: wrap; gap: 10px; }
|
||
.community-link { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 12px; font-size: 14px; font-weight: 600; border: 1px solid var(--border); background: var(--bg-card); color: var(--text); transition: all 0.25s; text-decoration: none; }
|
||
.community-link:hover { border-color: var(--border-h); color: var(--accent); background: var(--accent-5); transform: translateY(-2px); }
|
||
.community-link svg { width: 18px; height: 18px; }
|
||
.community-qr-row { display: flex; gap: 20px; }
|
||
.community-qr-card { text-align: center; padding: 20px 24px; border-radius: 16px; border: 1px solid var(--border); background: var(--bg-card); backdrop-filter: blur(8px); transition: all 0.3s cubic-bezier(0.16,1,0.3,1); }
|
||
.community-qr-card:hover { transform: translateY(-4px); border-color: var(--border-h); box-shadow: 0 12px 32px -8px rgba(99,102,241,0.15); }
|
||
.community-qr-card img { width: 128px; height: 128px; border-radius: 10px; margin-bottom: 12px; display: block; border: 1px solid var(--border); }
|
||
.community-qr-card span { display: block; font-weight: 700; font-size: 15px; margin-bottom: 10px; }
|
||
.community-qr-card a { display: inline-block; padding: 6px 20px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--accent); border: 1px solid rgba(99,102,241,0.3); transition: all 0.2s; text-decoration: none; }
|
||
.community-qr-card a:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
|
||
|
||
/* ══════════════ CTA ══════════════ */
|
||
.cta-section { text-align: center; }
|
||
.cta-buttons { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }
|
||
|
||
/* ══════════════ Sponsors ══════════════ */
|
||
.sponsor-card { max-width: 600px; margin: 40px auto; padding: 32px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 16px; text-align: center; transition: all 0.3s; }
|
||
.sponsor-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(99, 102, 241, 0.15); border-color: var(--primary); }
|
||
.sponsor-link { display: block; color: inherit; text-decoration: none; }
|
||
.sponsor-badge { display: inline-block; padding: 8px 20px; background: linear-gradient(135deg, #FF6B35, #FF8C42); color: white; border-radius: 20px; font-weight: 600; font-size: 18px; margin-bottom: 12px; }
|
||
.sponsor-slogan { font-size: 16px; font-weight: 500; color: var(--text-s); margin-bottom: 16px; }
|
||
.sponsor-desc { font-size: 14px; color: var(--text-t); line-height: 1.6; }
|
||
|
||
/* ══════════════ Footer ══════════════ */
|
||
.footer { border-top: 1px solid var(--border); padding: 40px 0; }
|
||
.footer-inner { max-width: 1200px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; font-size: 14px; color: var(--text-t); }
|
||
.footer-logo { display: flex; align-items: center; gap: 8px; }
|
||
.footer-logo img { width: 20px; height: 20px; border-radius: 4px; opacity: 0.5; }
|
||
.footer-links { display: flex; gap: 24px; }
|
||
.footer-link { color: var(--text-t); transition: color 0.2s; } .footer-link:hover { color: var(--text-s); }
|
||
|
||
/* ══════════════ Video Demo Section ══════════════ */
|
||
.video-demo-wrap { max-width: 960px; margin: 0 auto; position: relative; padding: 0 16px; }
|
||
.video-demo-wrap::before { content:''; position: absolute; inset: -2px; border-radius: 18px; background: conic-gradient(from var(--border-angle,0deg), #6366f1, #a855f7, #22d3ee, #10b981, #6366f1); z-index: 0; animation: borderSpin 4s linear infinite; opacity: 0.5; }
|
||
.video-demo-wrap::after { content:''; position: absolute; inset: -2px; border-radius: 18px; background: conic-gradient(from var(--border-angle,0deg), #6366f1, #a855f7, #22d3ee, #10b981, #6366f1); z-index: 0; animation: borderSpin 4s linear infinite; filter: blur(20px); opacity: 0.3; }
|
||
.video-demo-frame { border-radius: 16px; overflow: hidden; position: relative; background: #000; z-index: 1; box-shadow: 0 20px 60px -15px rgba(99,102,241,0.2); transition: box-shadow 0.5s; }
|
||
.video-demo-wrap:hover .video-demo-frame { box-shadow: 0 30px 80px -15px rgba(99,102,241,0.35); }
|
||
.video-demo-frame video { width: 100%; display: block; }
|
||
.video-play-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.35); cursor: pointer; transition: background 0.3s; z-index: 2; }
|
||
.video-play-overlay:hover { background: rgba(0,0,0,0.15); }
|
||
.video-play-overlay.hidden { display: none; }
|
||
.play-btn { width: 80px; height: 80px; border-radius: 50%; background: rgba(99,102,241,0.3); backdrop-filter: blur(12px); border: 2px solid rgba(255,255,255,0.25); display: flex; align-items: center; justify-content: center; transition: transform 0.3s, background 0.3s, box-shadow 0.3s; box-shadow: 0 8px 32px rgba(99,102,241,0.3); }
|
||
.play-btn:hover { transform: scale(1.12); background: rgba(99,102,241,0.5); box-shadow: 0 12px 40px rgba(99,102,241,0.5); }
|
||
.play-btn svg { width: 32px; height: 32px; fill: #fff; margin-left: 4px; }
|
||
.video-demo-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 99px; font-size: 13px; color: var(--accent); background: var(--accent-5); border: 1px solid rgba(99,102,241,0.15); margin-bottom: 16px; white-space: nowrap; }
|
||
.video-demo-badge svg { width: 14px; height: 14px; flex-shrink: 0; }
|
||
.video-demo-glow { position: absolute; bottom: -40px; left: 50%; transform: translateX(-50%); width: 70%; height: 80px; background: radial-gradient(ellipse, rgba(99,102,241,0.12), transparent 70%); filter: blur(30px); pointer-events: none; z-index: 0; }
|
||
html:not(.dark) .video-demo-glow { background: radial-gradient(ellipse, rgba(99,102,241,0.06), transparent 70%); }
|
||
|
||
/* ══════════════ Download Section ══════════════ */
|
||
.download-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-bottom: 32px; }
|
||
.download-card { border-radius: 20px; border: 1px solid var(--border); background: var(--bg-card); backdrop-filter: blur(8px); padding: 32px 24px; text-align: center; transition: all 0.35s cubic-bezier(0.16,1,0.3,1); position: relative; overflow: hidden; }
|
||
.download-card:hover { transform: translateY(-6px); border-color: var(--border-h); box-shadow: 0 16px 48px -12px rgba(99,102,241,0.18); }
|
||
.download-card::before { content:''; position: absolute; inset: 0; background: radial-gradient(300px circle at var(--mx,50%) var(--my,50%), rgba(99,102,241,0.06), transparent 60%); opacity: 0; transition: opacity 0.4s; pointer-events: none; }
|
||
.download-card:hover::before { opacity: 1; }
|
||
.download-icon { font-size: 40px; margin-bottom: 16px; display: block; }
|
||
.download-card h3 { font-size: 18px; font-weight: 800; margin-bottom: 6px; }
|
||
.download-card .dl-desc { font-size: 13px; color: var(--text-s); margin-bottom: 20px; }
|
||
.dl-links { display: flex; flex-direction: column; gap: 8px; }
|
||
.dl-link { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-card-s); font-size: 13px; font-weight: 600; color: var(--text); transition: all 0.25s; text-decoration: none; }
|
||
.dl-link:hover { border-color: var(--border-h); background: var(--accent-5); color: var(--accent); }
|
||
.dl-link .dl-format { font-size: 11px; color: var(--text-t); font-weight: 400; }
|
||
.dl-link:hover .dl-format { color: var(--accent); opacity: 0.7; }
|
||
.dl-link svg { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.4; transition: opacity 0.2s; }
|
||
.dl-link:hover svg { opacity: 1; color: var(--accent); }
|
||
.download-version { display: inline-flex; align-items: center; gap: 6px; padding: 6px 16px; border-radius: 99px; font-size: 14px; font-weight: 600; color: var(--accent); background: var(--accent-5); border: 1px solid rgba(99,102,241,0.15); margin-bottom: 16px; }
|
||
.download-version .pulse { width: 6px; height: 6px; border-radius: 50%; background: #22c55e; animation: pulse 2s ease-in-out infinite; }
|
||
.download-note { font-size: 13px; color: var(--text-t); margin-top: 24px; }
|
||
.download-note a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
|
||
@media (max-width: 768px) { .download-grid { grid-template-columns: 1fr; } }
|
||
|
||
/* ══════════════ Architecture GIF ══════════════ */
|
||
.arch-gif-wrap { max-width: 700px; margin: 0 auto 40px; border-radius: 16px; overflow: hidden; border: 1px solid var(--border); box-shadow: var(--card-shadow); transition: transform 0.5s cubic-bezier(0.16,1,0.3,1); }
|
||
.arch-gif-wrap:hover { transform: translateY(-4px); }
|
||
.arch-gif-wrap img { width: 100%; display: block; }
|
||
|
||
/* ══════════════ Lightbox ══════════════ */
|
||
.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,0.92); backdrop-filter: blur(8px); display: none; align-items: center; justify-content: center; cursor: zoom-out; padding: 24px; }
|
||
.lightbox.active { display: flex; }
|
||
.lightbox img { max-width: 100%; max-height: 100%; border-radius: 12px; box-shadow: 0 0 80px rgba(99,102,241,0.2); animation: lbIn 0.3s ease-out; }
|
||
@keyframes lbIn { from { opacity:0; transform: scale(0.95); } to { opacity:1; transform: scale(1); } }
|
||
.lb-close { position: absolute; top: 20px; right: 24px; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,0.1); color: #fff; font-size: 22px; display: flex; align-items: center; justify-content: center; transition: background 0.2s; }
|
||
.lb-close:hover { background: rgba(255,255,255,0.2); }
|
||
|
||
/* ══════════════ Scroll Reveal ══════════════ */
|
||
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1); }
|
||
.reveal.revealed { opacity: 1; transform: translateY(0); }
|
||
|
||
/* ══════════════ Responsive ══════════════ */
|
||
|
||
/* ── Tablet ── */
|
||
@media (max-width: 1024px) {
|
||
.showcase-row { grid-template-columns: 1fr; gap: 32px; }
|
||
.showcase-row .img-first { order: -1; }
|
||
.gallery-grid, .info-grid { grid-template-columns: repeat(2,1fr); }
|
||
.stats-grid { grid-template-columns: repeat(2,1fr); }
|
||
.tech-grid { grid-template-columns: 1fr; }
|
||
.nav-links { display: none; }
|
||
.nav-actions { display: flex; }
|
||
.mobile-menu { display: block; }
|
||
}
|
||
|
||
/* ── Small Tablet / Large Phone ── */
|
||
@media (max-width: 768px) {
|
||
.section { padding: 72px 0; }
|
||
.section-header { margin-bottom: 40px; }
|
||
.hero-title { font-size: 2.5rem; }
|
||
.hero-subtitle { font-size: 1rem; }
|
||
.hero-badge { font-size: 12px; padding: 5px 12px; }
|
||
.section-title { font-size: 1.75rem; }
|
||
.showcase-title { font-size: 1.5rem; }
|
||
.showcase-row { margin-bottom: 72px; }
|
||
|
||
.community-banner { padding: 56px 0; }
|
||
.community-banner-inner { grid-template-columns: 1fr; gap: 32px; }
|
||
.community-banner-text { text-align: center; }
|
||
.community-banner-text h2 { text-align: center; }
|
||
.community-banner-text p { margin-left: auto; margin-right: auto; }
|
||
.community-banner-links { justify-content: center; }
|
||
.community-qr-row { justify-content: center; flex-wrap: wrap; }
|
||
.community-qr-card img { width: 108px; height: 108px; }
|
||
.community-qr-card { padding: 16px 18px; }
|
||
|
||
.hero-cta { flex-direction: column; align-items: center; }
|
||
.btn { width: 100%; max-width: 320px; justify-content: center; }
|
||
|
||
.deploy-card { padding: 20px; }
|
||
.deploy-title { font-size: 16px; }
|
||
.deploy-card-header { gap: 12px; }
|
||
|
||
.eco-card { flex-direction: column; gap: 8px; align-items: flex-start; }
|
||
.eco-arrow { display: none; }
|
||
|
||
.doc-card { flex-direction: column; gap: 12px; }
|
||
.doc-icon { width: 36px; height: 36px; font-size: 1.1rem; }
|
||
|
||
.terminal-body { font-size: 12px; line-height: 2; }
|
||
.t-cmd { word-break: break-all; }
|
||
|
||
.video-demo-wrap { padding: 0 8px; }
|
||
.play-btn { width: 60px; height: 60px; }
|
||
.play-btn svg { width: 24px; height: 24px; }
|
||
|
||
.sponsor-card { padding: 24px 16px; margin: 24px auto; }
|
||
|
||
.footer-inner { flex-direction: column; gap: 16px; text-align: center; }
|
||
.footer-links { flex-wrap: wrap; justify-content: center; }
|
||
|
||
.md-reader { padding: 16px 8px; }
|
||
.md-reader-body { padding: 20px; font-size: 14px; }
|
||
.md-reader-header { padding: 12px 16px; }
|
||
.md-reader-body h1 { font-size: 20px; }
|
||
.md-reader-body h2 { font-size: 17px; }
|
||
|
||
.lightbox { padding: 16px; }
|
||
}
|
||
|
||
/* ── Phone ── */
|
||
@media (max-width: 640px) {
|
||
.section { padding: 56px 0; }
|
||
.section-header { margin-bottom: 28px; }
|
||
.hero-title { font-size: 2rem; }
|
||
.hero-subtitle { font-size: 0.95rem; margin-bottom: 32px; }
|
||
.hero-image-wrap { margin-top: 40px; }
|
||
.gallery-grid { grid-template-columns: 1fr 1fr; }
|
||
.info-grid { grid-template-columns: 1fr 1fr; }
|
||
.stats-grid { grid-template-columns: 1fr 1fr; }
|
||
.stat-card { padding: 16px; }
|
||
.stat-value { font-size: 1.5rem; }
|
||
.showcase-row { margin-bottom: 56px; gap: 24px; }
|
||
.showcase-desc { font-size: 14px; }
|
||
.showcase-list li { font-size: 13px; }
|
||
|
||
.community-banner { padding: 40px 0; }
|
||
.community-banner-text h2 { font-size: 1.5rem; }
|
||
.community-banner-text p { font-size: 14px; line-height: 1.7; }
|
||
.community-link { padding: 8px 14px; font-size: 13px; }
|
||
.community-qr-card img { width: 96px; height: 96px; }
|
||
}
|
||
|
||
/* ── Small Phone ── */
|
||
@media (max-width: 480px) {
|
||
.container { padding: 0 16px; }
|
||
.container-sm { padding: 0 16px; }
|
||
.section { padding: 48px 0; }
|
||
.hero-title { font-size: 1.75rem; }
|
||
.hero-badge { font-size: 11px; padding: 4px 10px; gap: 6px; }
|
||
.hero-inner { padding: 32px 16px 64px; }
|
||
.section-title { font-size: 1.4rem; }
|
||
.showcase-title { font-size: 1.25rem; }
|
||
|
||
.gallery-grid { grid-template-columns: 1fr; }
|
||
.info-grid { grid-template-columns: 1fr; }
|
||
|
||
.community-banner-links { gap: 8px; }
|
||
.community-link { padding: 8px 12px; font-size: 12px; gap: 6px; }
|
||
.community-qr-row { flex-direction: column; align-items: center; gap: 16px; }
|
||
.community-qr-card { width: 100%; max-width: 200px; }
|
||
.community-qr-card img { width: 120px; height: 120px; margin-left: auto; margin-right: auto; }
|
||
|
||
.download-card { padding: 20px 16px; }
|
||
.download-card h3 { font-size: 16px; }
|
||
.deploy-card { padding: 16px; }
|
||
.deploy-icon { width: 40px; height: 40px; }
|
||
.deploy-title { font-size: 15px; }
|
||
|
||
.terminal-body { font-size: 11px; padding: 14px; line-height: 1.8; white-space: pre-wrap; word-break: break-all; }
|
||
|
||
.md-reader-body { padding: 16px; }
|
||
|
||
.sponsor-badge { font-size: 15px; padding: 6px 16px; }
|
||
.sponsor-slogan { font-size: 14px; }
|
||
.sponsor-desc { font-size: 13px; }
|
||
|
||
.footer { padding: 24px 0; }
|
||
.footer-inner { font-size: 12px; }
|
||
}
|
||
</style>
|
||
<script>
|
||
(function(){
|
||
var s = localStorage.getItem('clawpanel-theme');
|
||
if (s === 'light') document.documentElement.classList.remove('dark');
|
||
else if (s === 'dark') document.documentElement.classList.add('dark');
|
||
else if (!window.matchMedia('(prefers-color-scheme: dark)').matches) document.documentElement.classList.remove('dark');
|
||
})()
|
||
</script>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- ══════════════ Nav ══════════════ -->
|
||
<nav class="nav">
|
||
<div class="scroll-progress" id="scroll-progress"></div>
|
||
<div class="nav-inner">
|
||
<a href="#" class="nav-logo"><img src="./logo.png" alt="Logo">ClawPanel</a>
|
||
<div class="nav-links">
|
||
<a href="#features" class="nav-link">功能预览</a>
|
||
<a href="#tech" class="nav-link">架构</a>
|
||
<a href="#quickstart" class="nav-link">开始</a>
|
||
<a href="#deploy" class="nav-link">部署</a>
|
||
<a href="#docs" class="nav-link">文档</a>
|
||
<a href="#community" class="nav-link">社区</a>
|
||
<a href="#ai-plan" class="nav-link">活动</a>
|
||
<a href="#download" class="nav-link">下载</a>
|
||
<a href="https://github.com/qingchencloud/clawpanel" target="_blank" rel="noopener" class="nav-link">GitHub</a>
|
||
<button id="theme-toggle" class="theme-btn" aria-label="切换主题">
|
||
<svg class="sun" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>
|
||
<svg class="moon" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg>
|
||
</button>
|
||
</div>
|
||
<div class="nav-actions">
|
||
<button id="theme-toggle-mobile" class="theme-btn" aria-label="切换主题">
|
||
<svg class="sun" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>
|
||
<svg class="moon" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg>
|
||
</button>
|
||
<button id="hamburger" class="hamburger" aria-label="菜单">
|
||
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M4 6h16M4 12h16M4 18h16"/></svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div id="mobile-menu" class="mobile-menu">
|
||
<div class="mobile-menu-inner">
|
||
<a href="#features" class="mobile-menu-link mobile-link">功能预览</a>
|
||
<a href="#tech" class="mobile-menu-link mobile-link">架构</a>
|
||
<a href="#quickstart" class="mobile-menu-link mobile-link">开始</a>
|
||
<a href="#deploy" class="mobile-menu-link mobile-link">部署</a>
|
||
<a href="#docs" class="mobile-menu-link mobile-link">文档</a>
|
||
<a href="#community" class="mobile-menu-link mobile-link">社区</a>
|
||
<a href="#ai-plan" class="mobile-menu-link mobile-link">活动</a>
|
||
<a href="https://github.com/qingchencloud/clawpanel" target="_blank" rel="noopener" class="mobile-menu-link">GitHub ↗</a>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- ══════════════ Hero ══════════════ -->
|
||
<section class="hero" id="hero">
|
||
<div class="aurora">
|
||
<div class="aurora-band aurora-1"></div>
|
||
<div class="aurora-band aurora-2"></div>
|
||
</div>
|
||
<div class="grid-bg"></div>
|
||
<div class="orb orb-1" id="orb1"></div>
|
||
<div class="orb orb-2" id="orb2"></div>
|
||
<div class="hero-inner">
|
||
<div class="reveal hero-badge"><span class="pulse"></span> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:inline;vertical-align:-2px"><rect x="3" y="11" width="18" height="10" rx="2"/><circle cx="9" cy="16" r="1"/><circle cx="15" cy="16" r="1"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg> 内置 AI 助手 — 一键安装、配置、诊断、修复 OpenClaw</div>
|
||
<h1 class="reveal hero-title"><span class="gradient-text shimmer">AI 助手</span>驱动的<br>OpenClaw 管理面板</h1>
|
||
<p class="reveal hero-subtitle">内置智能 AI 助手，帮你<strong>一键安装 OpenClaw</strong>、自动诊断配置、排查问题、修复错误。<br>新增消息渠道管理，内置 QQ 机器人，并支持 Telegram、Discord 等外部渠道接入。</p>
|
||
<div class="reveal hero-cta">
|
||
<a href="#download" class="btn btn-primary">
|
||
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M12 15V3m0 12l-4-4m4 4l4-4M2 17l.621 2.485A2 2 0 004.561 21h14.878a2 2 0 001.94-1.515L22 17"/></svg>
|
||
下载最新版
|
||
</a>
|
||
<a href="https://github.com/qingchencloud/clawpanel" target="_blank" rel="noopener" class="btn btn-outline btn-magnetic">
|
||
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/></svg>
|
||
源代码
|
||
</a>
|
||
</div>
|
||
<div class="reveal hero-image-wrap" data-delay="300">
|
||
<img src="./01.png" alt="ClawPanel AI 助手 — 8 大技能卡片" onclick="openLightbox(this.src)" loading="eager">
|
||
<div class="hero-glow"></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══════════════ Stats ══════════════ -->
|
||
<section class="section" style="padding-top:48px;padding-bottom:48px">
|
||
<div class="grid-bg"></div>
|
||
<div class="container" style="position:relative;z-index:10">
|
||
<div class="stats-grid">
|
||
<div class="reveal stat-card"><div class="stat-value c-indigo counter" data-target="10">0</div><div class="stat-label">功能模块</div></div>
|
||
<div class="reveal stat-card"><div class="stat-value c-purple">Tauri v2</div><div class="stat-label">桌面框架</div></div>
|
||
<div class="reveal stat-card"><div class="stat-value c-cyan">3</div><div class="stat-label">跨平台支持</div></div>
|
||
<div class="reveal stat-card"><div class="stat-value c-emerald">AGPL-3.0</div><div class="stat-label">开源协议</div></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══════════════ Community ══════════════ -->
|
||
<section id="community" class="community-banner">
|
||
<div class="container" style="position:relative;z-index:10">
|
||
<div class="community-banner-inner">
|
||
<div class="community-banner-text">
|
||
<h2 class="reveal"><span class="gradient-text">加入社区</span></h2>
|
||
<p class="reveal">这里聚集了一群对 AI Agent 充满热情的开发者和玩家。<br>交流使用技巧、分享落地经验、反馈问题、第一时间获取新版本动态。</p>
|
||
<div class="reveal community-banner-links">
|
||
<a href="https://discord.gg/U9AttmsNHh" target="_blank" rel="noopener" class="community-link">
|
||
<svg viewBox="0 0 24 24" fill="currentColor" style="width:16px;height:16px"><path d="M20.317 4.37a19.791 19.791 0 00-4.885-1.515.074.074 0 00-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 00-5.487 0 12.64 12.64 0 00-.617-1.25.077.077 0 00-.079-.037A19.736 19.736 0 003.677 4.37a.07.07 0 00-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 00.031.057 19.9 19.9 0 005.993 3.03.078.078 0 00.084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 00-.041-.106 13.107 13.107 0 01-1.872-.892.077.077 0 01-.008-.128 10.2 10.2 0 00.372-.292.074.074 0 01.077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 01.078.01c.12.098.246.198.373.292a.077.077 0 01-.006.127 12.299 12.299 0 01-1.873.892.077.077 0 00-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 00.084.028 19.839 19.839 0 006.002-3.03.077.077 0 00.032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 00-.031-.03z"/></svg>
|
||
Discord
|
||
</a>
|
||
<a href="https://github.com/qingchencloud/clawpanel/discussions" target="_blank" rel="noopener" class="community-link">
|
||
<svg viewBox="0 0 24 24" fill="currentColor" style="width:16px;height:16px"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/></svg>
|
||
Discussions
|
||
</a>
|
||
<a href="https://yb.tencent.com/gp/i/LsvIw7mdR7Lb" target="_blank" rel="noopener" class="community-link">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:16px;height:16px"><circle cx="12" cy="12" r="10"/><path d="M8 12l2 2 4-4"/></svg>
|
||
元宝派
|
||
</a>
|
||
<a href="https://github.com/qingchencloud/clawpanel/issues/new" target="_blank" rel="noopener" class="community-link">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:16px;height:16px"><circle cx="12" cy="12" r="10"/><path d="M12 8v4M12 16h.01"/></svg>
|
||
反馈 Issue
|
||
</a>
|
||
<a href="https://qt.cool/c/feishu" target="_blank" rel="noopener" class="community-link">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:16px;height:16px"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
|
||
飞书群
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="community-qr-row">
|
||
<div class="reveal community-qr-card">
|
||
<img src="./qr-qq.png" alt="QQ 群二维码">
|
||
<span>QQ 群</span>
|
||
<a href="https://qt.cool/c/OpenClaw" target="_blank" rel="noopener">扫码加入</a>
|
||
</div>
|
||
<div class="reveal community-qr-card">
|
||
<img src="./qr-wechat.png" alt="微信群二维码">
|
||
<span>微信群</span>
|
||
<a href="https://qt.cool/c/OpenClawWx" target="_blank" rel="noopener">扫码加入</a>
|
||
</div>
|
||
<div class="reveal community-qr-card">
|
||
<img src="./qr-dy.png" alt="抖音群二维码">
|
||
<span>抖音群</span>
|
||
<a href="https://qt.cool/c/OpenClawDY" target="_blank" rel="noopener">扫码加入</a>
|
||
</div>
|
||
<div class="reveal community-qr-card">
|
||
<img src="https://qt.cool/c/feishu/qr.png" alt="飞书群二维码">
|
||
<span>飞书群</span>
|
||
<a href="https://qt.cool/c/feishu" target="_blank" rel="noopener">扫码加入</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══════════════ Video Demo ══════════════ -->
|
||
<section class="section" style="padding-top:48px">
|
||
<div class="grid-bg"></div>
|
||
<div class="container" style="position:relative;z-index:10">
|
||
<div class="section-header">
|
||
<div class="reveal video-demo-badge">
|
||
<svg viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"/></svg>
|
||
50 秒快速了解
|
||
</div>
|
||
<h2 class="reveal section-title">产品 <span class="gradient-text">演示视频</span></h2>
|
||
<p class="reveal section-desc">从仪表盘到记忆管理，一个视频看完所有核心功能</p>
|
||
</div>
|
||
<div class="reveal video-demo-wrap">
|
||
<div class="video-demo-frame">
|
||
<div class="video-play-overlay" id="videoOverlay" onclick="playDemoVideo()">
|
||
<div class="play-btn">
|
||
<svg viewBox="0 0 24 24"><polygon points="5 3 19 12 5 21 5 3"/></svg>
|
||
</div>
|
||
</div>
|
||
<video id="demoVideo" poster="./video-cover.png?v=0.7.0" preload="metadata" playsinline controls onclick="toggleDemoVideo()">
|
||
<source src="./promo-web.mp4?v=0.7.0" type="video/mp4">
|
||
</video>
|
||
</div>
|
||
<div class="video-demo-glow"></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══════════════ Features Showcase ══════════════ -->
|
||
<section id="features" class="section">
|
||
<div class="orb orb-3"></div>
|
||
<div class="container" style="position:relative;z-index:10">
|
||
<div class="section-header">
|
||
<h2 class="reveal section-title">强大的 <span class="gradient-text">功能矩阵</span></h2>
|
||
<p class="reveal section-desc">一个面板，管理 OpenClaw 的方方面面</p>
|
||
</div>
|
||
|
||
<!-- 仪表盘 -->
|
||
<div class="showcase-row">
|
||
<div class="reveal screenshot-frame img-first" onclick="openLightbox('./00.png')"><img src="./00.png" alt="ClawPanel 仪表盘" loading="lazy"></div>
|
||
<div>
|
||
<div class="reveal showcase-tag" style="color:#f43f5e;background:rgba(244,63,94,0.1)"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg> 全景概览</div>
|
||
<h3 class="reveal showcase-title">仪表盘 — 运行状态一目了然</h3>
|
||
<p class="reveal showcase-desc">Gateway 运行状态、版本信息、Agent 数量、模型池总览，搭配内网穿透状态、基础服务监控和实时日志流。一屏掌握 OpenClaw 所有运行指标。</p>
|
||
<ul class="reveal showcase-list">
|
||
<li><span class="check">✓</span> Gateway / 隧道 / 服务实时状态卡片</li>
|
||
<li><span class="check">✓</span> 配置版本标识 & 最近备份时间</li>
|
||
<li><span class="check">✓</span> 并行推理队列 & 工作区文件隔离</li>
|
||
<li><span class="check">✓</span> 重启 / 检查更新 / 创建备份快捷操作</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- AI 助手设置 — 模型配置 + 公益 AI 接口 -->
|
||
<div class="showcase-row">
|
||
<div>
|
||
<div class="reveal showcase-tag" style="color:#f43f5e;background:rgba(244,63,94,0.1)"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09z"/><path d="M18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456z"/></svg> 开箱即用</div>
|
||
<h3 class="reveal showcase-title">公益 AI 接口 — 零成本开始</h3>
|
||
<p class="reveal showcase-desc">内置<strong>公益 AI 接口计划</strong>，GPT-5 全系列模型免费使用，Token 费用由项目组内部承担。选择模型、一键接入，无需注册、无需付费。也支持接入任意 OpenAI 兼容 API。</p>
|
||
<ul class="reveal showcase-list">
|
||
<li><span class="check">✓</span> 公益接口一键接入，零门槛</li>
|
||
<li><span class="check">✓</span> GPT-5 全系列模型可选</li>
|
||
<li><span class="check">✓</span> 兼容 Chat Completions & Responses API</li>
|
||
<li><span class="check">✓</span> 独立配置，无需安装 OpenClaw</li>
|
||
</ul>
|
||
</div>
|
||
<div class="reveal screenshot-frame" onclick="openLightbox('./02.png')"><img src="./02.png" alt="AI 助手设置 — 公益 AI 接口一键接入" loading="lazy"></div>
|
||
</div>
|
||
|
||
<!-- AI 助手人设 — Agent 灵魂 -->
|
||
<div class="showcase-row">
|
||
<div class="reveal screenshot-frame img-first" onclick="openLightbox('./05.png')"><img src="./05.png" alt="AI 助手人设 — Agent 灵魂加载" loading="lazy"></div>
|
||
<div>
|
||
<div class="reveal showcase-tag" style="color:#f43f5e;background:rgba(244,63,94,0.1)"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg> 借尸还魂</div>
|
||
<h3 class="reveal showcase-title">继承 Agent 人格与记忆</h3>
|
||
<p class="reveal showcase-desc">从 OpenClaw Agent 加载完整灵魂——SOUL.md（人格）、IDENTITY.md（身份）、USER.md（用户偏好）、AGENTS.md（行为规则）、TOOLS.md（工具）一键注入。让 AI 助手拥有你 Agent 的全部能力。</p>
|
||
<ul class="reveal showcase-list">
|
||
<li><span class="check">✓</span> 一键加载 Agent 灵魂（5/6 核心文件）</li>
|
||
<li><span class="check">✓</span> 多 Agent 灵魂自由切换</li>
|
||
<li><span class="check">✓</span> 保留 ClawPanel 工具调用能力</li>
|
||
<li><span class="check">✓</span> 工具权限细粒度控制</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 实时聊天 -->
|
||
<div class="showcase-row">
|
||
<div>
|
||
<div class="reveal showcase-tag c-indigo" style="background:var(--accent-10)"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg> 核心功能</div>
|
||
<h3 class="reveal showcase-title">实时聊天 — 多模型流式对话</h3>
|
||
<p class="reveal showcase-desc">WebSocket 直连 Gateway，流式响应逐字显示。自动列出所有已配置模型（含公益接口），支持图片附件、Markdown 渲染和快捷指令。</p>
|
||
<ul class="reveal showcase-list">
|
||
<li><span class="check">✓</span> 多 Provider 模型自动聚合</li>
|
||
<li><span class="check">✓</span> 多会话管理与历史记录</li>
|
||
<li><span class="check">✓</span> 图片拖拽 & 多模态对话</li>
|
||
<li><span class="check">✓</span> / 快捷指令系统</li>
|
||
</ul>
|
||
</div>
|
||
<div class="reveal screenshot-frame" onclick="openLightbox('./07.png')"><img src="./07.png" alt="实时聊天" loading="lazy"></div>
|
||
</div>
|
||
|
||
<!-- 模型配置 -->
|
||
<div class="showcase-row">
|
||
<div class="reveal screenshot-frame img-first" onclick="openLightbox('./09.png')"><img src="./09.png" alt="模型配置" loading="lazy"></div>
|
||
<div>
|
||
<div class="reveal showcase-tag" style="color:#a855f7;background:rgba(168,85,247,0.1)"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg> 配置中心</div>
|
||
<h3 class="reveal showcase-title">多服务商统一管理</h3>
|
||
<p class="reveal showcase-desc">OpenAI、公益接口、DeepSeek、Kimi 等多家服务商统一管理。内置公益 AI 接口一键添加全部模型。可视化主模型 + 备选自动切换，批量测试连通性。</p>
|
||
<ul class="reveal showcase-list">
|
||
<li><span class="check">✓</span> 公益接口一键添加全部模型</li>
|
||
<li><span class="check">✓</span> 批量连通性测试 & 延迟检测</li>
|
||
<li><span class="check">✓</span> 主模型 + 备选自动切换</li>
|
||
<li><span class="check">✓</span> 拖拽排序 & 实时保存</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 记忆文件 -->
|
||
<div class="showcase-row">
|
||
<div>
|
||
<div class="reveal showcase-tag" style="color:#22d3ee;background:rgba(34,211,238,0.1)"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.93a2 2 0 0 1-1.66-.9l-.82-1.2A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z"/></svg> 数据管理</div>
|
||
<h3 class="reveal showcase-title">让 Agent 拥有记忆</h3>
|
||
<p class="reveal showcase-desc">在线编辑 Agent 工作记忆、浏览记忆归档、管理核心配置文件（SOUL.md、AGENTS.md 等）。支持 ZIP 一键打包导出，多 Agent 记忆完全隔离。</p>
|
||
<ul class="reveal showcase-list">
|
||
<li><span class="check">✓</span> 工作记忆 & 记忆归档 & 核心文件</li>
|
||
<li><span class="check">✓</span> 在线编辑 & 实时预览</li>
|
||
<li><span class="check">✓</span> 多 Agent 记忆隔离</li>
|
||
<li><span class="check">✓</span> ZIP 打包下载</li>
|
||
</ul>
|
||
</div>
|
||
<div class="reveal screenshot-frame" onclick="openLightbox('./13.png')"><img src="./13.png" alt="记忆文件" loading="lazy"></div>
|
||
</div>
|
||
|
||
<!-- Gateway 安全认证 -->
|
||
<div class="showcase-row">
|
||
<div class="reveal screenshot-frame img-first" onclick="openLightbox('./11.png')"><img src="./11.png" alt="Gateway 安全认证与工具权限" loading="lazy"></div>
|
||
<div>
|
||
<div class="reveal showcase-tag" style="color:#10b981;background:rgba(16,185,129,0.1)"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg> 安全防护</div>
|
||
<h3 class="reveal showcase-title">安全认证 + 工具权限管控</h3>
|
||
<p class="reveal showcase-desc">Token 密钥 / 密码认证双模式，卡片式直观选择。Agent 工具调用权限三档可调（完整 / 受限 / 禁用），会话可见性细粒度控制。安全与灵活兼得。</p>
|
||
<ul class="reveal showcase-list">
|
||
<li><span class="check">✓</span> Token & 密码双认证模式</li>
|
||
<li><span class="check">✓</span> Agent 工具权限三档管控</li>
|
||
<li><span class="check">✓</span> 会话可见性控制</li>
|
||
<li><span class="check">✓</span> 改完自动重启生效</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Agent 管理 -->
|
||
<div class="showcase-row">
|
||
<div>
|
||
<div class="reveal showcase-tag" style="color:#f97316;background:rgba(249,115,22,0.1)"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="10" x="3" y="11" rx="2"/><circle cx="12" cy="5" r="2"/><path d="M12 7v4"/><line x1="8" x2="8" y1="16" y2="16"/><line x1="16" x2="16" y1="16" y2="16"/></svg> 智能体</div>
|
||
<h3 class="reveal showcase-title">多 Agent 协作管理</h3>
|
||
<p class="reveal showcase-desc">创建和管理多个 AI Agent，各自配置名称、模型和独立工作区。支持备份、编辑与默认 Agent 快速切换。</p>
|
||
<ul class="reveal showcase-list">
|
||
<li><span class="check">✓</span> 多 Agent 独立工作区</li>
|
||
<li><span class="check">✓</span> 身份与模型单独配置</li>
|
||
<li><span class="check">✓</span> Agent 配置备份 & 编辑</li>
|
||
<li><span class="check">✓</span> 默认 Agent 快速切换</li>
|
||
</ul>
|
||
</div>
|
||
<div class="reveal screenshot-frame" onclick="openLightbox('./10.png')"><img src="./10.png" alt="Agent 管理" loading="lazy"></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══════════════ More Features ══════════════ -->
|
||
<section class="section">
|
||
<div class="grid-bg"></div>
|
||
<div class="container" style="position:relative;z-index:10">
|
||
<div class="section-header">
|
||
<h2 class="reveal section-title">还有 <span class="gradient-text">更多</span></h2>
|
||
<p class="reveal section-desc">运维、监控、诊断，面面俱到</p>
|
||
</div>
|
||
<div class="gallery-grid">
|
||
<div class="reveal gallery-card" onclick="openLightbox('./03.png')"><img src="./03.png" alt="服务管理" loading="lazy"><div class="gallery-label"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:inline;vertical-align:-2px"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg> 服务管理</div></div>
|
||
<div class="reveal gallery-card" onclick="openLightbox('./06.png')"><img src="./06.png" alt="知识库" loading="lazy"><div class="gallery-label"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:inline;vertical-align:-2px"><path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20"/></svg> 知识库</div></div>
|
||
<div class="reveal gallery-card" onclick="openLightbox('./12.png')"><img src="./12.png" alt="安全设置" loading="lazy"><div class="gallery-label"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:inline;vertical-align:-2px"><rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg> 安全设置</div></div>
|
||
<div class="reveal gallery-card" onclick="openLightbox('./14.png')"><img src="./14.png" alt="扩展工具" loading="lazy"><div class="gallery-label"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:inline;vertical-align:-2px"><path d="M12 22v-5"/><path d="M9 8V2"/><path d="M15 8V2"/><path d="M18 8v5a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V8Z"/></svg> 扩展工具</div></div>
|
||
<div class="reveal gallery-card" onclick="openLightbox('./15.png')"><img src="./15.png" alt="系统诊断" loading="lazy"><div class="gallery-label"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:inline;vertical-align:-2px"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg> 系统诊断</div></div>
|
||
<div class="reveal gallery-card" onclick="openLightbox('./16.png')"><img src="./16.png" alt="关于" loading="lazy"><div class="gallery-label"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:inline;vertical-align:-2px"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg> 关于</div></div>
|
||
</div>
|
||
<div class="info-grid">
|
||
<div class="reveal info-card"><div class="ic"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg></div><h4>服务管理</h4><p>启停控制、版本检测、一键升级、npm 源切换、配置备份与恢复</p></div>
|
||
<div class="reveal info-card"><div class="ic"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20"/></svg></div><h4>知识库</h4><p>自定义知识注入 AI 助手，Markdown 格式，对话时自动激活</p></div>
|
||
<div class="reveal info-card"><div class="ic"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg></div><h4>安全设置</h4><p>访问密码保护、无视风险模式切换、面板访问安全管控</p></div>
|
||
<div class="reveal info-card"><div class="ic"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22v-5"/><path d="M9 8V2"/><path d="M15 8V2"/><path d="M18 8v5a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V8Z"/></svg></div><h4>扩展工具</h4><p>cftunnel 内网穿透、ClawApp 移动客户端一键安装</p></div>
|
||
<div class="reveal info-card"><div class="ic"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg></div><h4>系统诊断</h4><p>全面健康检测、WebSocket 测试、网络日志、一键修复配对</p></div>
|
||
<div class="reveal info-card"><div class="ic"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg></div><h4>关于</h4><p>版本信息、社群入口（QQ / 微信 / 抖音）、相关项目链接</p></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══════════════ Tech ══════════════ -->
|
||
<section id="tech" class="section">
|
||
<div class="grid-bg"></div>
|
||
<div class="container-sm" style="position:relative;z-index:10">
|
||
<div class="section-header">
|
||
<h2 class="reveal section-title"><span class="gradient-text">技术架构</span></h2>
|
||
<p class="reveal section-desc">精挑细选的技术栈，追求极致性能与开发体验</p>
|
||
</div>
|
||
<div class="reveal arch-gif-wrap">
|
||
<img src="./quick-stats.gif" alt="ClawPanel 数据概览" loading="lazy">
|
||
</div>
|
||
<div class="tech-grid" id="tech-grid">
|
||
<div class="reveal tech-card">
|
||
<div class="tech-header"><div class="tech-icon" style="background:rgba(99,102,241,0.1)"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#6366f1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M7 7h.01"/><path d="M17 7h.01"/><path d="M7 17h.01"/><path d="M17 17h.01"/></svg></div><div><div class="tech-name">Rust + Tauri v2</div><div class="tech-sub">后端运行时</div></div></div>
|
||
<div class="tech-desc">原生编译，内存安全，跨平台打包。通过 IPC 与前端高效通信，Shell Plugin 执行本地命令。</div>
|
||
</div>
|
||
<div class="reveal tech-card">
|
||
<div class="tech-header"><div class="tech-icon" style="background:rgba(234,179,8,0.1)"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#eab308" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z"/></svg></div><div><div class="tech-name">Vanilla JS + Vite</div><div class="tech-sub">前端架构</div></div></div>
|
||
<div class="tech-desc">零框架依赖，SPA 路由，组件化设计。Vite 极速 HMR，支持浏览器 mock 模式独立调试。</div>
|
||
</div>
|
||
<div class="reveal tech-card">
|
||
<div class="tech-header"><div class="tech-icon" style="background:rgba(34,211,238,0.1)"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#22d3ee" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 0 1 9 9"/><path d="M4 4a16 16 0 0 1 16 16"/><circle cx="5" cy="19" r="1"/></svg></div><div><div class="tech-name">WebSocket + RPC</div><div class="tech-sub">实时通信</div></div></div>
|
||
<div class="tech-desc">WsClient 管理 WebSocket 连接、心跳保活与自动重连。RPC 请求-响应 + 事件订阅双模式。</div>
|
||
</div>
|
||
<div class="reveal tech-card">
|
||
<div class="tech-header"><div class="tech-icon" style="background:rgba(168,85,247,0.1)"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#a855f7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="13.5" cy="6.5" r=".5" fill="#a855f7"/><circle cx="17.5" cy="10.5" r=".5" fill="#a855f7"/><circle cx="8.5" cy="7.5" r=".5" fill="#a855f7"/><circle cx="6.5" cy="12.5" r=".5" fill="#a855f7"/><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z"/></svg></div><div><div class="tech-name">CSS Variables</div><div class="tech-sub">主题系统</div></div></div>
|
||
<div class="tech-desc">暗色 / 亮色主题无闪烁切换，玻璃拟态 UI 风格，CSS 自定义属性实现全局样式管理。</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══════════════ Quickstart ══════════════ -->
|
||
<section id="quickstart" class="section">
|
||
<div class="container-sm" style="position:relative;z-index:10">
|
||
<div class="section-header">
|
||
<h2 class="reveal section-title"><span class="gradient-text">快速开始</span></h2>
|
||
<p class="reveal section-desc">几条命令，开箱即用</p>
|
||
</div>
|
||
<div class="reveal terminal">
|
||
<div class="terminal-bar">
|
||
<span class="td td-r"></span><span class="td td-y"></span><span class="td td-g"></span>
|
||
<span class="terminal-title mono">Terminal</span>
|
||
</div>
|
||
<div class="terminal-body mono">
|
||
<div class="t-comment"># 克隆仓库</div>
|
||
<div class="t-cmd">git clone https://github.com/qingchencloud/clawpanel.git</div>
|
||
<div class="t-cmd">cd clawpanel && npm install</div>
|
||
<br>
|
||
<div class="t-comment"># macOS / Linux — 启动完整 Tauri 桌面应用</div>
|
||
<div class="t-cmd">./scripts/dev.sh</div>
|
||
<br>
|
||
<div class="t-comment"># Windows — 启动完整 Tauri 桌面应用</div>
|
||
<div class="t-cmd">npm run tauri dev</div>
|
||
<br>
|
||
<div class="t-comment"># 仅前端调试（浏览器 mock 模式）</div>
|
||
<div class="t-cmd">npm run dev</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══════════════ Deploy Guides ══════════════ -->
|
||
<section id="deploy" class="section">
|
||
<div class="grid-bg"></div>
|
||
<div class="container-sm" style="position:relative;z-index:10">
|
||
<div class="section-header">
|
||
<h2 class="reveal section-title">服务器 <span class="gradient-text">部署指南</span></h2>
|
||
<p class="reveal section-desc">没有桌面环境？在 Linux 或 Docker 上部署 ClawPanel Web 版，浏览器即可管理 OpenClaw</p>
|
||
</div>
|
||
<div class="deploy-grid">
|
||
<!-- Linux -->
|
||
<div class="reveal deploy-card">
|
||
<div class="deploy-card-header">
|
||
<div class="deploy-icon" style="background:rgba(234,179,8,0.1)">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#eab308" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8"/><path d="M12 17v4"/><path d="m6 8 4 4-4 4"/><path d="M12 16h4"/></svg>
|
||
</div>
|
||
<div>
|
||
<h3 class="deploy-title">Linux 一键部署</h3>
|
||
<p class="deploy-desc">支持 Ubuntu、Debian、CentOS、Fedora、Alpine 等主流发行版</p>
|
||
</div>
|
||
</div>
|
||
<div class="terminal" style="margin:0">
|
||
<div class="terminal-bar">
|
||
<span class="td td-r"></span><span class="td td-y"></span><span class="td td-g"></span>
|
||
<span class="terminal-title mono">bash</span>
|
||
</div>
|
||
<div class="terminal-body mono" style="padding:16px 20px;font-size:13px">
|
||
<div class="t-comment"># 一键部署 ClawPanel Web + OpenClaw + systemd 自启</div>
|
||
<div class="t-cmd">curl -fsSL https://raw.githubusercontent.com/qingchencloud/clawpanel/main/scripts/linux-deploy.sh | bash</div>
|
||
</div>
|
||
</div>
|
||
<div style="margin-top:16px;display:flex;gap:12px;flex-wrap:wrap">
|
||
<a href="https://github.com/qingchencloud/clawpanel/blob/main/docs/linux-deploy.md" target="_blank" rel="noopener" class="btn btn-sm btn-outline" style="font-size:13px;padding:6px 16px">
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20"/></svg>
|
||
完整教程
|
||
</a>
|
||
<span style="color:var(--text-muted);font-size:12px;line-height:32px">Node.js · OpenClaw · systemd/PM2 · Nginx 反代 · 防火墙</span>
|
||
</div>
|
||
</div>
|
||
<!-- Docker -->
|
||
<div class="reveal deploy-card">
|
||
<div class="deploy-card-header">
|
||
<div class="deploy-icon" style="background:rgba(34,211,238,0.1)">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#22d3ee" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 12.5c-.5-1-2-2-4-2-1 0-2 .5-2.5 1"/><rect x="1" y="8" width="4" height="4" rx=".5"/><rect x="6" y="8" width="4" height="4" rx=".5"/><rect x="11" y="8" width="4" height="4" rx=".5"/><rect x="6" y="3" width="4" height="4" rx=".5"/><rect x="11" y="3" width="4" height="4" rx=".5"/><rect x="16" y="8" width="4" height="4" rx=".5"/><path d="M2 16c0 2 2 4 10 4s10-2 10-4"/></svg>
|
||
</div>
|
||
<div>
|
||
<h3 class="deploy-title">Docker 部署</h3>
|
||
<p class="deploy-desc">容器化隔离，支持 Compose 编排、自定义镜像、Nginx 反代</p>
|
||
</div>
|
||
</div>
|
||
<div class="terminal" style="margin:0">
|
||
<div class="terminal-bar">
|
||
<span class="td td-r"></span><span class="td td-y"></span><span class="td td-g"></span>
|
||
<span class="terminal-title mono">bash</span>
|
||
</div>
|
||
<div class="terminal-body mono" style="padding:16px 20px;font-size:13px">
|
||
<div class="t-comment"># 一条命令启动 ClawPanel Web</div>
|
||
<div class="t-cmd">docker run -d --name clawpanel -p 1420:1420 \</div>
|
||
<div class="t-cmd" style="padding-left:1em">-v clawpanel-data:/root/.openclaw node:22-slim \</div>
|
||
<div class="t-cmd" style="padding-left:1em">sh -c "apt-get update && apt-get install -y git && ..."</div>
|
||
</div>
|
||
</div>
|
||
<div style="margin-top:16px;display:flex;gap:12px;flex-wrap:wrap">
|
||
<a href="https://github.com/qingchencloud/clawpanel/blob/main/docs/docker-deploy.md" target="_blank" rel="noopener" class="btn btn-sm btn-outline" style="font-size:13px;padding:6px 16px">
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20"/></svg>
|
||
完整教程
|
||
</a>
|
||
<span style="color:var(--text-muted);font-size:12px;line-height:32px">Compose · Dockerfile · Gateway 联动 · Nginx 反代</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="reveal" style="text-align:center;margin-top:32px">
|
||
<p style="color:var(--text-muted);font-size:14px">
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:inline;vertical-align:-2px;opacity:0.7"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
|
||
部署完成后，访问 <code style="background:var(--surface);padding:2px 8px;border-radius:4px;font-size:13px">http://服务器IP:1420</code> 即可通过浏览器管理 OpenClaw，功能与桌面版一致。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══════════════ Docs Center ══════════════ -->
|
||
<section id="docs" class="section">
|
||
<div class="grid-bg"></div>
|
||
<div class="container-sm" style="position:relative;z-index:10">
|
||
<div class="section-header">
|
||
<h2 class="reveal section-title"><span class="gradient-text">文档中心</span></h2>
|
||
<p class="reveal section-desc">遇到问题？这里有你需要的一切</p>
|
||
</div>
|
||
<div class="docs-grid">
|
||
<div class="reveal doc-card" onclick="openDoc('linux-deploy.md','Linux 服务器部署指南')">
|
||
<div class="doc-icon" style="background:rgba(234,179,8,0.12);color:#eab308"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg></div>
|
||
<div>
|
||
<h3>Linux 部署指南</h3>
|
||
<p>在 Linux 服务器上部署 ClawPanel Web 版，通过浏览器远程管理 OpenClaw</p>
|
||
<div class="doc-tags">
|
||
<span class="doc-tag">一键部署</span>
|
||
<span class="doc-tag">systemd</span>
|
||
<span class="doc-tag">PM2</span>
|
||
<span class="doc-tag">Nginx 反代</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="reveal doc-card" onclick="openDoc('docker-deploy.md','Docker 部署指南')">
|
||
<div class="doc-icon" style="background:rgba(34,211,238,0.12);color:#22d3ee">🐳</div>
|
||
<div>
|
||
<h3>Docker 部署指南</h3>
|
||
<p>用 Docker 部署 ClawPanel Web 版，支持 Compose 编排、自定义镜像、Gateway 联动</p>
|
||
<div class="doc-tags">
|
||
<span class="doc-tag">Docker Compose</span>
|
||
<span class="doc-tag">Dockerfile</span>
|
||
<span class="doc-tag">Gateway 联动</span>
|
||
<span class="doc-tag">Nginx 反代</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="reveal doc-card" onclick="openDoc('../README.md','ClawPanel 项目主页')">
|
||
<div class="doc-icon" style="background:rgba(99,102,241,0.12);color:#6366f1">📖</div>
|
||
<div>
|
||
<h3>项目主页 README</h3>
|
||
<p>完整的项目介绍，包含安装方式、功能特性、技术架构、源码构建、常见问题</p>
|
||
<div class="doc-tags">
|
||
<span class="doc-tag">安装指南</span>
|
||
<span class="doc-tag">功能介绍</span>
|
||
<span class="doc-tag">源码构建</span>
|
||
<span class="doc-tag">常见问题</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="reveal doc-card" onclick="openDoc('../CHANGELOG.md','更新日志')">
|
||
<div class="doc-icon" style="background:rgba(168,85,247,0.12);color:#a855f7">📋</div>
|
||
<div>
|
||
<h3>更新日志</h3>
|
||
<p>每个版本的新增功能、Bug 修复和改进记录</p>
|
||
<div class="doc-tags">
|
||
<span class="doc-tag">新功能</span>
|
||
<span class="doc-tag">Bug 修复</span>
|
||
<span class="doc-tag">版本记录</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Markdown Reader Modal -->
|
||
<div class="md-reader" id="mdReader" onclick="if(event.target===this)closeDoc()">
|
||
<div class="md-reader-inner">
|
||
<div class="md-reader-header">
|
||
<h3 id="mdTitle"></h3>
|
||
<div style="display:flex;align-items:center;gap:8px">
|
||
<a id="mdGithubLink" href="#" target="_blank" rel="noopener">在 GitHub 上查看</a>
|
||
<button class="md-reader-close" onclick="closeDoc()">
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="md-reader-body" id="mdContent"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ══════════════ Ecosystem ══════════════ -->
|
||
<section id="projects" class="section">
|
||
<div class="grid-bg"></div>
|
||
<div class="container-sm" style="position:relative;z-index:10">
|
||
<div class="section-header">
|
||
<h2 class="reveal section-title"><span class="gradient-text">生态项目</span></h2>
|
||
<p class="reveal section-desc">ClawPanel 是 OpenClaw 生态的一部分</p>
|
||
</div>
|
||
<div class="eco-list">
|
||
<a href="https://github.com/1186258278/OpenClawChineseTranslation" target="_blank" rel="noopener" class="reveal eco-card">
|
||
<div><h3><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:inline;vertical-align:-2px"><path d="M12 5a3 3 0 1 0-5.997.125 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.588A4 4 0 1 0 12 18Z"/><path d="M12 5a3 3 0 1 1 5.997.125 4 4 0 0 1 2.526 5.77 4 4 0 0 1-.556 6.588A4 4 0 1 1 12 18Z"/><path d="M15 13a4.5 4.5 0 0 1-3-4 4.5 4.5 0 0 1-3 4"/><path d="M17.599 6.5a3 3 0 0 0 .399-1.375"/><path d="M6.003 5.125A3 3 0 0 0 6.401 6.5"/><path d="M3.477 10.896a4 4 0 0 1 .585-.396"/><path d="M19.938 10.5a4 4 0 0 1 .585.396"/><path d="M6 18a4 4 0 0 1-1.967-.516"/><path d="M19.967 17.484A4 4 0 0 1 18 18"/></svg> OpenClaw</h3><p>AI Agent 框架 — ClawPanel 的核心管理目标</p></div>
|
||
<span class="eco-arrow">→</span>
|
||
</a>
|
||
<a href="https://github.com/qingchencloud/clawapp" target="_blank" rel="noopener" class="reveal eco-card">
|
||
<div><h3><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:inline;vertical-align:-2px"><rect width="14" height="20" x="5" y="2" rx="2" ry="2"/><path d="M12 18h.01"/></svg> ClawApp</h3><p>跨平台移动聊天客户端，随时随地与 AI Agent 对话</p></div>
|
||
<span class="eco-arrow">→</span>
|
||
</a>
|
||
<a href="https://github.com/qingchencloud/cftunnel" target="_blank" rel="noopener" class="reveal eco-card">
|
||
<div><h3><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:inline;vertical-align:-2px"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg> cftunnel</h3><p>Cloudflare Tunnel 内网穿透工具，一键暴露本地服务</p></div>
|
||
<span class="eco-arrow">→</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══════════════ Download ══════════════ -->
|
||
<section id="download" class="section cta-section">
|
||
<div class="orb orb-2" style="top:auto;bottom:-100px"></div>
|
||
<div class="container-sm" style="position:relative;z-index:10">
|
||
<div class="section-header">
|
||
<div class="reveal download-version"><span class="pulse"></span> v0.9.6 最新版</div>
|
||
<h2 class="reveal section-title"><span class="gradient-text">下载安装</span></h2>
|
||
<p class="reveal section-desc">选择你的操作系统，一键下载安装</p>
|
||
</div>
|
||
<div class="download-grid">
|
||
<div class="reveal download-card">
|
||
<span class="download-icon"><svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="var(--text)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20.94c1.5 0 2.75 1.06 4 1.06 3 0 6-8 6-12.22A4.91 4.91 0 0 0 17 5c-2.22 0-4 1.44-5 2-1-.56-2.78-2-5-2a4.9 4.9 0 0 0-5 4.78C2 14 5 22 8 22c1.25 0 2.5-1.06 4-1.06Z"/><path d="M10 2c1 .5 2 2 2 5"/></svg></span>
|
||
<h3>macOS</h3>
|
||
<p class="dl-desc">支持 Apple Silicon 和 Intel 芯片</p>
|
||
<div class="dl-links">
|
||
<a class="dl-link" href="https://claw.qt.cool/proxy/dl/github.com/qingchencloud/clawpanel/releases/latest/download/ClawPanel_0.9.6_aarch64.dmg" target="_blank" rel="noopener">
|
||
Apple Silicon (M1/M2/M3/M4)
|
||
<span class="dl-format">.dmg</span>
|
||
</a>
|
||
<a class="dl-link" href="https://claw.qt.cool/proxy/dl/github.com/qingchencloud/clawpanel/releases/latest/download/ClawPanel_0.9.6_x64.dmg" target="_blank" rel="noopener">
|
||
Intel 芯片
|
||
<span class="dl-format">.dmg</span>
|
||
</a>
|
||
</div>
|
||
<div style="margin-top:16px;padding:12px;border-radius:10px;background:rgba(234,179,8,0.08);border:1px solid rgba(234,179,8,0.15);text-align:left">
|
||
<p style="font-size:12px;color:var(--text-s);margin-bottom:6px"><strong style="color:#eab308">⚠️ 首次打开提示"已损坏"或"无法验证"？</strong></p>
|
||
<p style="font-size:12px;color:var(--text-s);margin-bottom:8px">① 先将 ClawPanel <strong>拖入「应用程序」文件夹</strong>，然后打开终端执行：</p>
|
||
<code style="display:block;font-size:11px;padding:8px 10px;border-radius:6px;background:rgba(0,0,0,0.15);color:var(--accent);word-break:break-all;cursor:pointer" onclick="navigator.clipboard.writeText('sudo xattr -rd com.apple.quarantine /Applications/ClawPanel.app');this.textContent='✅ 已复制！';setTimeout(()=>this.textContent='sudo xattr -rd com.apple.quarantine /Applications/ClawPanel.app',1500)">sudo xattr -rd com.apple.quarantine /Applications/ClawPanel.app</code>
|
||
<p style="font-size:11px;color:var(--text-t);margin-top:6px">② 或前往 <strong>系统设置 → 隐私与安全性</strong>，找到 ClawPanel 点击「仍要打开」</p>
|
||
<p style="font-size:11px;color:var(--text-t);margin-top:4px">提示 No such file？说明没拖入应用程序，改用：<code style="font-size:10px;color:var(--accent);cursor:pointer" onclick="navigator.clipboard.writeText('sudo xattr -rd com.apple.quarantine ~/Downloads/ClawPanel.app');this.textContent='✅ 已复制';setTimeout(()=>this.textContent='sudo xattr -rd com.apple.quarantine ~/Downloads/ClawPanel.app',1500)">sudo xattr -rd com.apple.quarantine ~/Downloads/ClawPanel.app</code></p>
|
||
</div>
|
||
</div>
|
||
<div class="reveal download-card">
|
||
<span class="download-icon"><svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="var(--text)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8"/><path d="M12 17v4"/><path d="m6 8 4 4-4 4"/><path d="M12 16h4"/></svg></span>
|
||
<h3>Windows</h3>
|
||
<p class="dl-desc">支持 Windows 10 及以上版本</p>
|
||
<div class="dl-links">
|
||
<a class="dl-link" href="https://claw.qt.cool/proxy/dl/github.com/qingchencloud/clawpanel/releases/latest/download/ClawPanel_0.9.6_x64-setup.exe" target="_blank" rel="noopener">
|
||
安装程序
|
||
<span class="dl-format">.exe</span>
|
||
</a>
|
||
<a class="dl-link" href="https://claw.qt.cool/proxy/dl/github.com/qingchencloud/clawpanel/releases/latest/download/ClawPanel_0.9.6_x64_en-US.msi" target="_blank" rel="noopener">
|
||
MSI 安装包
|
||
<span class="dl-format">.msi</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="reveal download-card">
|
||
<span class="download-icon"><svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="var(--text)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m4 17 2 2 4-4"/><path d="M12 13h8"/><path d="M12 17h8"/><path d="M12 21h8"/><path d="M3 7V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v2"/><path d="M3 11v2a2 2 0 0 0 2 2h1"/><path d="M21 11v2a2 2 0 0 1-2 2h-1"/></svg></span>
|
||
<h3>Linux</h3>
|
||
<p class="dl-desc">支持主流 Linux 发行版</p>
|
||
<div class="dl-links">
|
||
<a class="dl-link" href="https://claw.qt.cool/proxy/dl/github.com/qingchencloud/clawpanel/releases/latest/download/ClawPanel_0.9.6_amd64.AppImage" target="_blank" rel="noopener">
|
||
通用版
|
||
<span class="dl-format">.AppImage</span>
|
||
</a>
|
||
<a class="dl-link" href="https://claw.qt.cool/proxy/dl/github.com/qingchencloud/clawpanel/releases/latest/download/ClawPanel_0.9.6_amd64.deb" target="_blank" rel="noopener">
|
||
Debian / Ubuntu
|
||
<span class="dl-format">.deb</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="reveal" style="margin-top:40px;max-width:680px;margin-left:auto;margin-right:auto;border-radius:16px;background:linear-gradient(135deg,rgba(99,102,241,0.08),rgba(168,85,247,0.08));border:1px solid rgba(99,102,241,0.15);padding:28px 32px;text-align:center">
|
||
<h3 style="font-size:18px;font-weight:700;margin-bottom:8px">⚡ OpenClaw 独立安装包<span style="font-size:12px;background:var(--accent);color:#fff;padding:2px 8px;border-radius:20px;margin-left:8px;vertical-align:2px">零依赖</span></h3>
|
||
<p style="font-size:14px;color:var(--text-s);margin-bottom:16px">不想折腾 Node.js 环境？下载独立安装包，<strong>内置运行时，解压即用</strong>。支持 Windows / macOS / Linux / 树莓派。</p>
|
||
<div style="display:flex;gap:12px;justify-content:center;flex-wrap:wrap">
|
||
<a href="https://github.com/qingchencloud/openclaw-standalone/releases/latest" target="_blank" rel="noopener" class="btn btn-primary" style="font-size:14px;padding:10px 20px">
|
||
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" width="16" height="16" style="display:inline;vertical-align:-3px;margin-right:4px"><path d="M12 15V3m0 12l-4-4m4 4l4-4M2 17l.621 2.485A2 2 0 004.561 21h14.878a2 2 0 001.94-1.515L22 17"/></svg>
|
||
下载独立安装包
|
||
</a>
|
||
<a href="https://github.com/qingchencloud/openclaw-standalone" target="_blank" rel="noopener" class="btn btn-outline" style="font-size:14px;padding:10px 20px">GitHub 项目</a>
|
||
</div>
|
||
<p style="font-size:12px;color:var(--text-t);margin-top:12px">ClawPanel 安装 OpenClaw 时会自动优先使用独立安装包，无需手动下载</p>
|
||
</div>
|
||
<div class="reveal download-note" style="text-align:center">
|
||
<p>查看 <a href="https://github.com/qingchencloud/clawpanel/releases" target="_blank" rel="noopener">所有版本</a> · 需要帮助？阅读 <a href="https://github.com/qingchencloud/clawpanel#readme" target="_blank" rel="noopener">安装文档</a></p>
|
||
<p style="margin-top:12px"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:inline;vertical-align:-2px;opacity:0.7"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg> 国内网络下载慢？加入 <a href="https://qt.cool/c/OpenClaw" target="_blank" rel="noopener">QQ 群</a> 或 <a href="https://qt.cool/c/OpenClawWx" target="_blank" rel="noopener">微信群</a> 获取安装包直传</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══════════════ 公益 AI 接口计划 ══════════════ -->
|
||
<section id="ai-plan" class="section" style="padding-top:64px;padding-bottom:64px">
|
||
<div class="grid-bg"></div>
|
||
<div class="container" style="position:relative;z-index:10">
|
||
<div class="section-header">
|
||
<h2 class="reveal section-title"><svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:inline;vertical-align:-6px;margin-right:4px;color:var(--accent)"><path d="M20 12v10H4V12"/><path d="M2 7h20v5H2z"/><path d="M12 22V7"/><path d="M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z"/><path d="M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z"/></svg> <span class="gradient-text">公益 AI 接口计划</span></h2>
|
||
<p class="reveal section-desc">Token 费用？我们帮你出了。</p>
|
||
</div>
|
||
<div class="reveal" style="max-width:800px;margin:0 auto;border-radius:20px;background:linear-gradient(135deg,#0f0c29 0%,#302b63 50%,#24243e 100%);color:#fff;position:relative;overflow:hidden;box-shadow:0 8px 40px rgba(48,43,99,0.3)">
|
||
<div style="position:absolute;top:-60px;right:-60px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(99,102,241,0.15) 0%,transparent 70%);pointer-events:none"></div>
|
||
<div style="position:absolute;bottom:-40px;left:-40px;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,rgba(168,85,247,0.1) 0%,transparent 70%);pointer-events:none"></div>
|
||
<div style="padding:40px 48px;position:relative">
|
||
<div style="font-size:15px;color:rgba(255,255,255,0.8);line-height:1.9;margin-bottom:24px">
|
||
<p style="margin-bottom:12px">ClawPanel 公益 AI 接口测试计划已开放。<strong style="color:#a78bfa">调用成本由项目组内部承担</strong>，用户无需注册、无需付费。</p>
|
||
<p style="margin-bottom:12px">支持 GPT-5 全系列模型，兼容 OpenAI <code style="background:rgba(255,255,255,0.1);padding:2px 6px;border-radius:4px;font-size:13px">/v1/chat/completions</code> 和 <code style="background:rgba(255,255,255,0.1);padding:2px 6px;border-radius:4px;font-size:13px">/v1/responses</code> 接口。</p>
|
||
<p>在 ClawPanel 内置助手设置中，选择模型 → 点击「测试」→「一键接入」即可开始使用。如需独立密钥，可前往活动站签到领取。</p>
|
||
</div>
|
||
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:24px">
|
||
<div style="background:rgba(255,255,255,0.06);border-radius:12px;padding:16px;text-align:center;border:1px solid rgba(255,255,255,0.08)">
|
||
<div style="margin-bottom:6px"><svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#a78bfa" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"/><path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"/><path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0"/><path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"/></svg></div>
|
||
<div style="font-weight:700;font-size:14px;margin-bottom:4px">GPT-5 全系列</div>
|
||
<div style="font-size:12px;color:rgba(255,255,255,0.5)">10+ 模型开箱即用</div>
|
||
</div>
|
||
<div style="background:rgba(255,255,255,0.06);border-radius:12px;padding:16px;text-align:center;border:1px solid rgba(255,255,255,0.08)">
|
||
<div style="margin-bottom:6px"><svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#a78bfa" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8"/><path d="M12 18V6"/></svg></div>
|
||
<div style="font-weight:700;font-size:14px;margin-bottom:4px">费用全包</div>
|
||
<div style="font-size:12px;color:rgba(255,255,255,0.5)">Token 成本项目组承担</div>
|
||
</div>
|
||
<div style="background:rgba(255,255,255,0.06);border-radius:12px;padding:16px;text-align:center;border:1px solid rgba(255,255,255,0.08)">
|
||
<div style="margin-bottom:6px"><svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#a78bfa" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m21 2-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0 3 3L22 7l-3-3m-3.5 3.5L19 4"/></svg></div>
|
||
<div style="font-weight:700;font-size:14px;margin-bottom:4px">独立密钥</div>
|
||
<div style="font-size:12px;color:rgba(255,255,255,0.5)">签到即可免费领取</div>
|
||
</div>
|
||
</div>
|
||
<div style="display:flex;flex-wrap:wrap;gap:12px;justify-content:center">
|
||
<a href="https://gpt.qt.cool/checkin" target="_blank" rel="noopener" style="display:inline-flex;align-items:center;gap:8px;padding:10px 24px;border-radius:12px;background:linear-gradient(135deg,#6366f1,#a855f7);color:#fff;font-weight:600;font-size:14px;text-decoration:none;box-shadow:0 4px 16px rgba(99,102,241,0.4);transition:transform 0.2s"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M8 12l2 2 4-4"/></svg> 签到领密钥</a>
|
||
<a href="https://gpt.qt.cool/user" target="_blank" rel="noopener" style="display:inline-flex;align-items:center;gap:8px;padding:10px 24px;border-radius:12px;border:1px solid rgba(255,255,255,0.2);color:#fff;font-size:14px;font-weight:500;text-decoration:none;transition:all 0.2s"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3v18h18"/><path d="m19 9-5 5-4-4-3 3"/></svg> 用量查询</a>
|
||
<a href="https://gpt.qt.cool/" target="_blank" rel="noopener" style="display:inline-flex;align-items:center;gap:8px;padding:10px 24px;border-radius:12px;border:1px solid rgba(255,255,255,0.2);color:#fff;font-size:14px;font-weight:500;text-decoration:none;transition:all 0.2s"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M2 12h20"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg> GPT-AI 网关</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══════════════ Sponsors ══════════════ -->
|
||
<section class="section" id="sponsors">
|
||
<div class="container">
|
||
<h2 class="reveal section-title"><span class="gradient-text">赞助商</span></h2>
|
||
<p class="reveal section-desc">感谢以下赞助商对 ClawPanel 项目的支持</p>
|
||
<div class="reveal sponsor-card">
|
||
<a href="https://www.ciyundata.com/cart/goods.htm?id=267" target="_blank" rel="noopener" class="sponsor-link">
|
||
<div class="sponsor-badge">慈云数据</div>
|
||
<div class="sponsor-slogan">香港直连 2H2G 仅 99 元/年</div>
|
||
<div class="sponsor-desc">
|
||
慈云数据服务团队于 2020 年成立，专注于基础云计算、游戏云、主题站长等业务。
|
||
售前售后服务 24 小时在线值班，强力保证为客户提供优质稳定的网络资源与机房服务。
|
||
</div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══════════════ Star History ══════════════ -->
|
||
<section class="section" style="padding:48px 0">
|
||
<div class="container-sm" style="position:relative;z-index:10;text-align:center">
|
||
<h2 class="reveal section-title"><span class="gradient-text">Star 趋势</span></h2>
|
||
<p class="reveal section-desc" style="margin-bottom:32px">感谢每一位 Star，你们是我们持续前进的动力</p>
|
||
<div class="reveal" style="border-radius:16px;overflow:hidden;border:1px solid var(--border);box-shadow:var(--card-shadow)">
|
||
<a href="https://star-history.com/#qingchencloud/clawpanel&1186258278/OpenClawChineseTranslation&Date" target="_blank" rel="noopener">
|
||
<picture>
|
||
<source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=qingchencloud/clawpanel,1186258278/OpenClawChineseTranslation&type=Date&theme=dark">
|
||
<img src="https://api.star-history.com/svg?repos=qingchencloud/clawpanel,1186258278/OpenClawChineseTranslation&type=Date" alt="Star History Chart" style="width:100%;display:block;background:#fff">
|
||
</picture>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══════════════ Footer ══════════════ -->
|
||
<footer class="footer">
|
||
<div class="footer-inner">
|
||
<div class="footer-logo">
|
||
<img src="./logo.png" alt="Logo">
|
||
<span>ClawPanel © 2026</span>
|
||
</div>
|
||
<div class="footer-links">
|
||
<a href="https://github.com/qingchencloud/clawpanel" class="footer-link">GitHub</a>
|
||
<a href="https://github.com/qingchencloud/clawpanel/issues" class="footer-link">Issues</a>
|
||
<a href="https://qt.cool/c/OpenClaw" target="_blank" rel="noopener" class="footer-link">QQ 群</a>
|
||
<a href="https://qt.cool/c/feishu" target="_blank" rel="noopener" class="footer-link">飞书群</a>
|
||
<a href="https://discord.gg/U9AttmsNHh" target="_blank" rel="noopener" class="footer-link">Discord</a>
|
||
<a href="https://qt.cool" target="_blank" rel="noopener" class="footer-link">晴辰云</a>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- ══════════════ Lightbox ══════════════ -->
|
||
<div class="lightbox" id="lightbox" onclick="closeLightbox(event)">
|
||
<button class="lb-close" onclick="closeLightbox(event)">×</button>
|
||
<img id="lb-img" src="" alt="预览">
|
||
</div>
|
||
|
||
<!-- ══════════════ JavaScript ══════════════ -->
|
||
<script>
|
||
/* ── Lightbox ── */
|
||
function openLightbox(src) {
|
||
document.getElementById('lb-img').src = src;
|
||
document.getElementById('lightbox').classList.add('active');
|
||
document.body.style.overflow = 'hidden';
|
||
}
|
||
function closeLightbox(e) {
|
||
if (e && e.target.tagName === 'IMG') return;
|
||
document.getElementById('lightbox').classList.remove('active');
|
||
document.body.style.overflow = '';
|
||
}
|
||
document.addEventListener('keydown', function(e) { if (e.key === 'Escape') closeLightbox(); });
|
||
|
||
/* ── Theme ── */
|
||
function toggleTheme() {
|
||
var h = document.documentElement;
|
||
var isDark = h.classList.contains('dark');
|
||
h.classList.toggle('dark');
|
||
localStorage.setItem('clawpanel-theme', isDark ? 'light' : 'dark');
|
||
}
|
||
document.getElementById('theme-toggle').addEventListener('click', toggleTheme);
|
||
document.getElementById('theme-toggle-mobile').addEventListener('click', toggleTheme);
|
||
|
||
/* ── Mobile Menu ── */
|
||
var menu = document.getElementById('mobile-menu');
|
||
document.getElementById('hamburger').addEventListener('click', function() {
|
||
menu.classList.toggle('open');
|
||
});
|
||
document.querySelectorAll('.mobile-link').forEach(function(a) {
|
||
a.addEventListener('click', function() { menu.classList.remove('open'); });
|
||
});
|
||
|
||
/* ── Scroll Reveal ── */
|
||
var revealObs = new IntersectionObserver(function(entries) {
|
||
entries.forEach(function(e) {
|
||
if (e.isIntersecting) {
|
||
var delay = parseInt(e.target.dataset.delay) || 0;
|
||
setTimeout(function() { e.target.classList.add('revealed'); }, delay);
|
||
revealObs.unobserve(e.target);
|
||
}
|
||
});
|
||
}, { threshold: 0.08, rootMargin: '0px 0px -40px 0px' });
|
||
document.querySelectorAll('.reveal').forEach(function(el, i) {
|
||
if (!el.dataset.delay) {
|
||
var parent = el.closest('.showcase-row, .stats-grid, .gallery-grid, .info-grid, .community-grid, .community-extra, .eco-list');
|
||
if (parent) {
|
||
var siblings = parent.querySelectorAll('.reveal');
|
||
for (var j = 0; j < siblings.length; j++) {
|
||
if (siblings[j] === el) { el.dataset.delay = j * 80; break; }
|
||
}
|
||
}
|
||
}
|
||
revealObs.observe(el);
|
||
});
|
||
|
||
/* ── Counters ── */
|
||
var counterObs = new IntersectionObserver(function(entries) {
|
||
entries.forEach(function(e) {
|
||
if (!e.isIntersecting) return;
|
||
var el = e.target, target = parseInt(el.dataset.target), suffix = el.dataset.suffix || '';
|
||
var start = performance.now(), duration = 1500;
|
||
function tick(now) {
|
||
var p = Math.min((now - start) / duration, 1);
|
||
var ease = 1 - Math.pow(1 - p, 4);
|
||
el.textContent = Math.round(target * ease) + suffix;
|
||
if (p < 1) requestAnimationFrame(tick);
|
||
}
|
||
requestAnimationFrame(tick);
|
||
counterObs.unobserve(el);
|
||
});
|
||
}, { threshold: 0.5 });
|
||
document.querySelectorAll('.counter').forEach(function(el) { counterObs.observe(el); });
|
||
|
||
/* ── Tech Card Spotlight ── */
|
||
document.getElementById('tech-grid').addEventListener('mousemove', function(e) {
|
||
var cards = this.querySelectorAll('.tech-card');
|
||
cards.forEach(function(card) {
|
||
var r = card.getBoundingClientRect();
|
||
card.style.setProperty('--mx', (e.clientX - r.left) + 'px');
|
||
card.style.setProperty('--my', (e.clientY - r.top) + 'px');
|
||
});
|
||
});
|
||
|
||
|
||
/* ── Scroll Progress Bar ── */
|
||
var progressBar = document.getElementById('scroll-progress');
|
||
window.addEventListener('scroll', function() {
|
||
var h = document.documentElement.scrollHeight - window.innerHeight;
|
||
var p = h > 0 ? (window.scrollY / h) * 100 : 0;
|
||
progressBar.style.width = p + '%';
|
||
}, { passive: true });
|
||
|
||
/* ── Mouse Parallax on Orbs ── */
|
||
var orb1 = document.getElementById('orb1');
|
||
var orb2 = document.getElementById('orb2');
|
||
var heroEl = document.getElementById('hero');
|
||
heroEl.addEventListener('mousemove', function(e) {
|
||
var cx = (e.clientX / window.innerWidth - 0.5) * 2;
|
||
var cy = (e.clientY / window.innerHeight - 0.5) * 2;
|
||
orb1.style.transform = 'translate(' + (cx * 30) + 'px,' + (cy * 20) + 'px)';
|
||
orb2.style.transform = 'translate(' + (cx * -25) + 'px,' + (cy * -15) + 'px)';
|
||
});
|
||
heroEl.addEventListener('mouseleave', function() {
|
||
orb1.style.transform = ''; orb2.style.transform = '';
|
||
});
|
||
|
||
/* ── Magnetic Buttons ── */
|
||
document.querySelectorAll('.btn-magnetic').forEach(function(btn) {
|
||
btn.addEventListener('mousemove', function(e) {
|
||
var r = btn.getBoundingClientRect();
|
||
var dx = e.clientX - (r.left + r.width / 2);
|
||
var dy = e.clientY - (r.top + r.height / 2);
|
||
btn.style.transform = 'translate(' + (dx * 0.15) + 'px,' + (dy * 0.15) + 'px)';
|
||
});
|
||
btn.addEventListener('mouseleave', function() {
|
||
btn.style.transform = '';
|
||
});
|
||
});
|
||
|
||
/* ── Video Demo Controls ── */
|
||
function playDemoVideo() {
|
||
var v = document.getElementById('demoVideo');
|
||
var o = document.getElementById('videoOverlay');
|
||
var p = v.play();
|
||
if (p !== undefined) { p.catch(function() {}); }
|
||
o.classList.add('hidden');
|
||
}
|
||
function toggleDemoVideo() {
|
||
var v = document.getElementById('demoVideo');
|
||
var o = document.getElementById('videoOverlay');
|
||
if (v.paused) {
|
||
var p = v.play();
|
||
if (p !== undefined) { p.catch(function() {}); }
|
||
o.classList.add('hidden');
|
||
} else {
|
||
v.pause();
|
||
o.classList.remove('hidden');
|
||
}
|
||
}
|
||
document.getElementById('demoVideo').addEventListener('ended', function() {
|
||
document.getElementById('videoOverlay').classList.remove('hidden');
|
||
});
|
||
|
||
/* ── 3D Tilt on Tech & Gallery Cards ── */
|
||
document.querySelectorAll('.tech-card, .gallery-card, .eco-card, .doc-card').forEach(function(card) {
|
||
card.classList.add('tilt-card');
|
||
card.addEventListener('mousemove', function(e) {
|
||
var r = card.getBoundingClientRect();
|
||
var x = (e.clientX - r.left) / r.width - 0.5;
|
||
var y = (e.clientY - r.top) / r.height - 0.5;
|
||
card.style.transform = 'perspective(600px) rotateY(' + (x * 8) + 'deg) rotateX(' + (-y * 8) + 'deg) scale(1.02)';
|
||
});
|
||
card.addEventListener('mouseleave', function() {
|
||
card.style.transform = '';
|
||
});
|
||
});
|
||
/* ── Doc Card Spotlight ── */
|
||
document.querySelectorAll('.doc-card').forEach(function(card) {
|
||
card.addEventListener('mousemove', function(e) {
|
||
var r = card.getBoundingClientRect();
|
||
card.style.setProperty('--mouse-x', ((e.clientX - r.left) / r.width * 100) + '%');
|
||
card.style.setProperty('--mouse-y', ((e.clientY - r.top) / r.height * 100) + '%');
|
||
});
|
||
});
|
||
|
||
/* ── Markdown Reader ── */
|
||
var GITHUB_RAW = 'https://raw.githubusercontent.com/qingchencloud/clawpanel/main/';
|
||
var GITHUB_BLOB = 'https://github.com/qingchencloud/clawpanel/blob/main/';
|
||
var docCache = {};
|
||
var markedLoaded = false;
|
||
|
||
function loadMarked(cb) {
|
||
if (markedLoaded) return cb();
|
||
var s = document.createElement('script');
|
||
s.src = 'https://cdn.jsdelivr.net/npm/marked@15/marked.min.js';
|
||
s.onload = function() { markedLoaded = true; cb(); };
|
||
s.onerror = function() { cb(true); };
|
||
document.head.appendChild(s);
|
||
}
|
||
|
||
function openDoc(file, title) {
|
||
var reader = document.getElementById('mdReader');
|
||
var content = document.getElementById('mdContent');
|
||
var titleEl = document.getElementById('mdTitle');
|
||
var ghLink = document.getElementById('mdGithubLink');
|
||
|
||
titleEl.textContent = title;
|
||
var blobPath = file.replace(/^\.\.\//g, '');
|
||
if (!blobPath.startsWith('docs/') && blobPath !== 'README.md' && blobPath !== 'CHANGELOG.md') blobPath = 'docs/' + blobPath;
|
||
ghLink.href = GITHUB_BLOB + blobPath;
|
||
reader.classList.add('active');
|
||
document.body.style.overflow = 'hidden';
|
||
|
||
if (docCache[file]) {
|
||
renderDoc(docCache[file], content);
|
||
return;
|
||
}
|
||
|
||
content.innerHTML = '<div class="md-loading">加载中...</div>';
|
||
|
||
loadMarked(function(err) {
|
||
if (err) {
|
||
content.innerHTML = '<div class="md-loading">marked.js 加载失败，<a href="' + ghLink.href + '" target="_blank">在 GitHub 上查看</a></div>';
|
||
return;
|
||
}
|
||
var rawPath = file.startsWith('../') ? file.replace('../', '') : 'docs/' + file;
|
||
fetch(GITHUB_RAW + rawPath)
|
||
.then(function(res) { if (!res.ok) throw new Error(res.status); return res.text(); })
|
||
.then(function(md) {
|
||
docCache[file] = md;
|
||
renderDoc(md, content);
|
||
})
|
||
.catch(function() {
|
||
content.innerHTML = '<div class="md-loading">文档加载失败，<a href="' + ghLink.href + '" target="_blank">在 GitHub 上查看原文</a></div>';
|
||
});
|
||
});
|
||
}
|
||
|
||
function renderDoc(md, container) {
|
||
container.innerHTML = marked.parse(md);
|
||
container.querySelectorAll('a').forEach(function(a) {
|
||
var href = a.getAttribute('href');
|
||
if (!href) return;
|
||
if (href.charAt(0) === '#') {
|
||
a.onclick = function(e) {
|
||
e.preventDefault();
|
||
var target = container.querySelector('[id="' + href.substring(1) + '"]');
|
||
if (target) target.scrollIntoView({ behavior: 'smooth' });
|
||
};
|
||
} else if (!href.startsWith('http')) {
|
||
a.href = GITHUB_BLOB + 'docs/' + href;
|
||
a.target = '_blank';
|
||
}
|
||
});
|
||
container.scrollTop = 0;
|
||
document.getElementById('mdReader').scrollTop = 0;
|
||
}
|
||
|
||
function closeDoc() {
|
||
document.getElementById('mdReader').classList.remove('active');
|
||
document.body.style.overflow = '';
|
||
}
|
||
|
||
document.addEventListener('keydown', function(e) {
|
||
if (e.key === 'Escape') closeDoc();
|
||
});
|
||
|
||
/* ── Robust Anchor Scroll (handles lazy-loaded image layout shift) ── */
|
||
function smoothScrollTo(target) {
|
||
if (!target) return;
|
||
var lastTop = -1;
|
||
function doScroll() {
|
||
var top = target.getBoundingClientRect().top + window.scrollY - 120;
|
||
window.scrollTo({ top: top, behavior: 'smooth' });
|
||
return top;
|
||
}
|
||
lastTop = doScroll();
|
||
// Re-check position after images may have loaded and shifted layout
|
||
var retries = [300, 600, 1200];
|
||
retries.forEach(function(delay) {
|
||
setTimeout(function() {
|
||
var newTop = target.getBoundingClientRect().top + window.scrollY - 120;
|
||
if (Math.abs(newTop - window.scrollY) > 30) {
|
||
doScroll();
|
||
}
|
||
}, delay);
|
||
});
|
||
}
|
||
// Intercept all anchor link clicks
|
||
document.querySelectorAll('a[href^="#"]').forEach(function(link) {
|
||
link.addEventListener('click', function(e) {
|
||
var hash = this.getAttribute('href');
|
||
if (!hash || hash === '#') return;
|
||
e.preventDefault();
|
||
var target = document.querySelector(hash);
|
||
if (target) {
|
||
smoothScrollTo(target);
|
||
history.pushState(null, '', hash);
|
||
}
|
||
});
|
||
});
|
||
// Fix anchor position on initial page load with hash
|
||
window.addEventListener('load', function() {
|
||
if (window.location.hash) {
|
||
var target = document.querySelector(window.location.hash);
|
||
if (target) setTimeout(function() { smoothScrollTo(target); }, 100);
|
||
}
|
||
});
|
||
|
||
/* ── Dynamic Download Links from latest.json ── */
|
||
(function() {
|
||
var BASE = 'https://claw.qt.cool/update/latest.json';
|
||
fetch(BASE).then(function(r) { return r.json(); }).then(function(d) {
|
||
var ver = d.version;
|
||
if (!ver) return;
|
||
// 更新版本徽章
|
||
var badge = document.querySelector('.download-version');
|
||
if (badge) badge.innerHTML = '<span class="pulse"></span> v' + ver + ' 最新版';
|
||
// 更新 JSON-LD 版本
|
||
// 更新所有下载链接：替换旧版本号为新版本号
|
||
document.querySelectorAll('#download .dl-link').forEach(function(a) {
|
||
var href = a.getAttribute('href');
|
||
if (!href) return;
|
||
// 替换 URL 中的版本号模式 ClawPanel_X.Y.Z_
|
||
var updated = href.replace(/ClawPanel_[\d.]+_/g, 'ClawPanel_' + ver + '_');
|
||
a.setAttribute('href', updated);
|
||
});
|
||
}).catch(function() { /* 静默失败，保留硬编码链接作为兜底 */ });
|
||
})();
|
||
</script>
|
||
|
||
<!-- ══════════════ Floating Promo Capsule ══════════════ -->
|
||
<style>
|
||
.promo-capsule{position:fixed;bottom:140px;right:24px;z-index:80;font-family:inherit;opacity:0;transform:translateY(20px);transition:opacity .5s,transform .5s;pointer-events:none}
|
||
.promo-capsule.promo-visible{opacity:1;transform:translateY(0);pointer-events:auto}
|
||
.promo-capsule.promo-dismissed{display:none}
|
||
.promo-fab{display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;transition:transform .3s;position:relative;border:none;padding:0;background:none}
|
||
.promo-fab:hover{transform:scale(1.08)}
|
||
.promo-fab-icon{width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,#f97316,#ef4444);box-shadow:0 4px 16px rgba(239,68,68,.3);display:flex;align-items:center;justify-content:center;position:relative}
|
||
.promo-fab-icon::after{content:'';position:absolute;inset:-3px;border-radius:17px;border:2px solid rgba(239,68,68,.2);animation:promoPulse 2.5s ease-in-out infinite}
|
||
@keyframes promoPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0;transform:scale(1.1)}}
|
||
.promo-fab-icon img{width:28px;height:28px;border-radius:6px}
|
||
.promo-fab-ad{position:absolute;top:-6px;right:-6px;padding:1px 5px;border-radius:4px;font-size:9px;font-weight:700;color:#fff;background:rgba(0,0,0,.45);backdrop-filter:blur(4px);line-height:1.3;letter-spacing:.5px}
|
||
.promo-fab-text{font-size:11px;font-weight:600;color:var(--accent,#6366f1);background:var(--bg-card,rgba(255,255,255,.85));backdrop-filter:blur(8px);padding:3px 10px;border-radius:8px;border:1px solid var(--border,rgba(0,0,0,.06));box-shadow:0 2px 8px rgba(0,0,0,.06);white-space:nowrap;overflow:hidden;min-width:20px;max-width:120px}
|
||
html.dark .promo-fab-text{background:rgba(18,18,26,.8);color:#818cf8}
|
||
.promo-fab-text .typewriter{display:inline;border-right:2px solid var(--accent,#6366f1);animation:blink .7s step-end infinite}
|
||
@keyframes blink{50%{border-color:transparent}}
|
||
.promo-card{position:absolute;bottom:64px;right:0;width:280px;background:var(--bg-card,rgba(255,255,255,.8));backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--border,rgba(0,0,0,.08));border-radius:16px;box-shadow:0 12px 40px rgba(0,0,0,.12);padding:20px;opacity:0;transform:translateY(8px) scale(.95);transition:opacity .25s,transform .25s;pointer-events:none;visibility:hidden}
|
||
html.dark .promo-card{background:rgba(18,18,26,.85);box-shadow:0 12px 40px rgba(0,0,0,.4)}
|
||
.promo-capsule.promo-expanded .promo-card{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;visibility:visible}
|
||
.promo-card-close{position:absolute;top:8px;right:10px;background:none;border:none;color:var(--text-t,#9ca3af);font-size:18px;cursor:pointer;padding:2px 6px;border-radius:6px;line-height:1;transition:color .2s,background .2s}
|
||
.promo-card-close:hover{color:var(--text,#111);background:var(--accent-5,rgba(99,102,241,.05))}
|
||
.promo-card-icon{width:40px;height:40px;border-radius:10px;margin-bottom:12px;border:1px solid var(--border)}
|
||
.promo-card-title{font-size:15px;font-weight:700;color:var(--text,#111);margin-bottom:6px;line-height:1.3}
|
||
.promo-card-desc{font-size:13px;color:var(--text-s,#6b7280);line-height:1.5;margin-bottom:14px}
|
||
.promo-card-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 18px;border-radius:10px;font-size:13px;font-weight:600;color:#fff;background:linear-gradient(135deg,#6366f1,#a855f7);text-decoration:none;transition:transform .2s,box-shadow .2s;border:none;cursor:pointer}
|
||
.promo-card-btn:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(99,102,241,.35)}
|
||
.promo-card-tag{display:inline-block;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:600;color:var(--accent,#6366f1);background:var(--accent-5,rgba(99,102,241,.05));margin-bottom:10px}
|
||
@media(max-width:768px){.promo-capsule{bottom:120px;right:16px}.promo-card{width:260px;right:-8px}.promo-fab-icon{width:42px;height:42px;border-radius:12px}.promo-fab-icon img{width:24px;height:24px}.promo-fab-text{font-size:10px;padding:2px 8px}}
|
||
@media(max-width:480px){.promo-capsule{bottom:100px;right:12px}}
|
||
</style>
|
||
|
||
<div class="promo-capsule" id="promoCapsule">
|
||
<div class="promo-card">
|
||
<button class="promo-card-close" id="promoClose" aria-label="关闭">×</button>
|
||
<img class="promo-card-icon" src="./app-icon.png" alt="OpenClaw 教程">
|
||
<div class="promo-card-tag">推荐课程 <span style="font-weight:400;opacity:.5;font-size:10px">· 广告</span></div>
|
||
<div class="promo-card-title">OpenClaw 教程<br>0 基础入门到精通</div>
|
||
<div class="promo-card-desc">系统学习 AI Agent 搭建，从安装到实战部署。含全网独家创业教程，视频+图文全覆盖。</div>
|
||
<a class="promo-card-btn" href="https://plus.wx.hapymcn.com/app/index.php?i=4532&c=entry&do=search&clear=1&m=fy_lessonv2&keyword=openclaw" target="_blank" rel="noopener">
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="5 3 19 12 5 21 5 3"/></svg>
|
||
立即学习
|
||
</a>
|
||
</div>
|
||
<button class="promo-fab" id="promoFab" aria-label="OpenClaw 教程">
|
||
<span class="promo-fab-icon"><img src="./app-icon.png" alt=""></span>
|
||
<span class="promo-fab-text"><span class="typewriter" id="promoTypewriter"></span></span>
|
||
</button>
|
||
</div>
|
||
|
||
<script>
|
||
(function(){
|
||
if(sessionStorage.getItem('promo-dismissed'))return;
|
||
var capsule=document.getElementById('promoCapsule');
|
||
var fab=document.getElementById('promoFab');
|
||
var closeBtn=document.getElementById('promoClose');
|
||
// 延迟 3 秒显示，不打扰首屏体验
|
||
setTimeout(function(){capsule.classList.add('promo-visible')},1000);
|
||
fab.addEventListener('click',function(){capsule.classList.toggle('promo-expanded')});
|
||
// Typewriter effect — cycling phrases
|
||
var phrases=['OpenClaw 教程','0基础入门','AI Agent 实战','全网独家创业课','视频+图文'];
|
||
var tw=document.getElementById('promoTypewriter');
|
||
var pi=0,ci=0,deleting=false,speed=120;
|
||
function typeStep(){
|
||
var phrase=phrases[pi];
|
||
if(!deleting){
|
||
tw.textContent=phrase.substring(0,ci+1);
|
||
ci++;
|
||
if(ci>=phrase.length){deleting=true;setTimeout(typeStep,1800);return;}
|
||
}else{
|
||
tw.textContent=phrase.substring(0,ci);
|
||
ci--;
|
||
if(ci<0){ci=0;deleting=false;pi=(pi+1)%phrases.length;setTimeout(typeStep,400);return;}
|
||
}
|
||
setTimeout(typeStep,deleting?60:speed);
|
||
}
|
||
typeStep();
|
||
closeBtn.addEventListener('click',function(e){
|
||
e.stopPropagation();
|
||
capsule.classList.remove('promo-expanded');
|
||
});
|
||
// 点击外部关闭展开态
|
||
document.addEventListener('click',function(e){
|
||
if(!capsule.contains(e.target)){capsule.classList.remove('promo-expanded')}
|
||
});
|
||
})();
|
||
</script>
|
||
</body>
|
||
</html>
|