mirror of
https://github.com/qingchencloud/clawpanel.git
synced 2026-05-06 20:02:49 +08:00
760 lines
55 KiB
HTML
760 lines
55 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 可视化管理面板</title>
|
||
<meta name="description" content="ClawPanel 是基于 Tauri v2 的跨平台桌面应用，为 OpenClaw AI Agent 框架提供可视化管理面板。仪表盘监控、模型配置、实时聊天、记忆管理、内网穿透，一站式管理。">
|
||
<meta name="keywords" content="ClawPanel, OpenClaw, AI Agent, Tauri, 管理面板, 桌面应用, 开源, LLM, 多模型">
|
||
<meta property="og:title" content="ClawPanel - OpenClaw AI Agent 可视化管理面板">
|
||
<meta property="og:description" content="基于 Tauri v2 的跨平台桌面应用，为 OpenClaw AI Agent 框架提供可视化管理界面。">
|
||
<meta property="og:type" content="website">
|
||
<meta property="og:url" content="https://qingchencloud.github.io/clawpanel/">
|
||
<link rel="icon" href="./logo.png" type="image/png">
|
||
<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: smooth; }
|
||
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; }
|
||
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; }
|
||
.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-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; }
|
||
@keyframes gradShift { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
|
||
|
||
/* ══════════════ 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 img { transform: rotateX(4deg) scale(0.98); border-radius: 16px; box-shadow: 0 20px 60px -15px rgba(99,102,241,0.25), 0 0 0 1px rgba(99,102,241,0.08); transition: transform 0.6s cubic-bezier(0.16,1,0.3,1), box-shadow 0.6s; cursor: zoom-in; width: 100%; }
|
||
.hero-image-wrap:hover img { transform: rotateX(0deg) scale(1); box-shadow: 0 30px 80px -15px rgba(99,102,241,0.35), 0 0 0 1px rgba(99,102,241,0.15); }
|
||
.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; }
|
||
.screenshot-frame:hover { transform: translateY(-6px); box-shadow: 0 20px 60px -10px rgba(99,102,241,0.2); }
|
||
.screenshot-frame img { width: 100%; display: block; }
|
||
|
||
/* ══════════════ Gallery ══════════════ */
|
||
.gallery-grid { display: grid; grid-template-columns: repeat(4,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(4,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 { transform: translateY(-2px); box-shadow: 0 12px 40px -10px rgba(99,102,241,0.12); }
|
||
.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); }
|
||
|
||
/* ══════════════ 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 ══════════════ */
|
||
.community-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; margin-bottom: 32px; }
|
||
.community-card { border-radius: 20px; border: 1px solid var(--border); background: var(--bg-card); backdrop-filter: blur(8px); padding: 40px 32px; text-align: center; transition: all 0.35s cubic-bezier(0.16,1,0.3,1); }
|
||
.community-card:hover { transform: translateY(-6px); border-color: var(--border-h); box-shadow: 0 16px 48px -12px rgba(99,102,241,0.18); }
|
||
.community-emoji { font-size: 48px; margin-bottom: 16px; display: block; }
|
||
.community-qr { width: 160px; height: 160px; border-radius: 12px; margin: 0 auto 16px; border: 1px solid var(--border); }
|
||
.community-card h3 { font-size: 20px; font-weight: 800; margin-bottom: 8px; }
|
||
.community-card .desc { font-size: 14px; color: var(--text-s); margin-bottom: 20px; }
|
||
.community-extra { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
|
||
.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; }
|
||
.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; }
|
||
|
||
/* ══════════════ CTA ══════════════ */
|
||
.cta-section { text-align: center; }
|
||
.cta-buttons { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }
|
||
|
||
/* ══════════════ 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); }
|
||
|
||
/* ══════════════ 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 ══════════════ */
|
||
@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; }
|
||
}
|
||
@media (max-width: 768px) {
|
||
.hero-title { font-size: 2.5rem; }
|
||
.section-title { font-size: 1.75rem; }
|
||
.showcase-title { font-size: 1.5rem; }
|
||
.community-grid { grid-template-columns: 1fr; }
|
||
.hero-cta { flex-direction: column; align-items: center; }
|
||
.btn { width: 100%; max-width: 320px; justify-content: center; }
|
||
.footer-inner { flex-direction: column; gap: 16px; text-align: center; }
|
||
.footer-links { flex-wrap: wrap; justify-content: center; }
|
||
}
|
||
@media (max-width: 640px) {
|
||
.hero-title { font-size: 2rem; }
|
||
.section { padding: 64px 0; }
|
||
.gallery-grid { grid-template-columns: 1fr 1fr; }
|
||
.info-grid { grid-template-columns: 1fr 1fr; }
|
||
.stats-grid { grid-template-columns: 1fr 1fr; }
|
||
.stat-value { font-size: 1.5rem; }
|
||
}
|
||
</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="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="#community" 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="#community" 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">
|
||
<div class="grid-bg"></div>
|
||
<div class="orb orb-1"></div>
|
||
<div class="orb orb-2"></div>
|
||
<div class="particles" id="particles"></div>
|
||
<div class="hero-inner">
|
||
<div class="reveal hero-badge"><span class="pulse"></span> v0.2.1 已发布 — 支持聊天图片 & 灯箱查看</div>
|
||
<h1 class="reveal hero-title">管理你的 <span class="gradient-text">AI Agent</span><br>从未如此直观</h1>
|
||
<p class="reveal hero-subtitle">ClawPanel 是 <strong>OpenClaw</strong> 的可视化管理面板，基于 Tauri v2 构建。<br>仪表盘、模型配置、实时聊天、记忆管理 — 一站式掌控。</p>
|
||
<div class="reveal hero-cta">
|
||
<a href="https://github.com/qingchencloud/clawpanel/releases/latest" target="_blank" rel="noopener" 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">
|
||
<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 仪表盘" 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 float-a"><div class="stat-value c-indigo counter" data-target="10">0</div><div class="stat-label">功能模块</div></div>
|
||
<div class="reveal stat-card float-b"><div class="stat-value c-purple">Tauri v2</div><div class="stat-label">桌面框架</div></div>
|
||
<div class="reveal stat-card float-a"><div class="stat-value c-cyan">Vanilla JS</div><div class="stat-label">前端框架</div></div>
|
||
<div class="reveal stat-card float-b"><div class="stat-value c-emerald counter" data-target="100" data-suffix="%">0</div><div class="stat-label">开源免费</div></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('./02.png')"><img src="./02.png" alt="实时聊天" loading="lazy"></div>
|
||
<div>
|
||
<div class="reveal showcase-tag c-indigo" style="background:var(--accent-10)">💬 核心功能</div>
|
||
<h3 class="reveal showcase-title">实时 AI 对话</h3>
|
||
<p class="reveal showcase-desc">WebSocket 直连 Gateway，流式响应实时显示。支持图片附件、多模态交互、Markdown 渲染、会话管理与快捷指令。</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:#a855f7;background:rgba(168,85,247,0.1)">🧠 配置中心</div>
|
||
<h3 class="reveal showcase-title">多模型灵活调配</h3>
|
||
<p class="reveal showcase-desc">支持 OpenAI、DeepSeek、Kimi 等多家服务商。可视化管理模型列表，一键设为主模型，自动备选切换。</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('./05.png')"><img src="./05.png" alt="模型配置" loading="lazy"></div>
|
||
</div>
|
||
|
||
<!-- 记忆文件 -->
|
||
<div class="showcase-row">
|
||
<div class="reveal screenshot-frame img-first" onclick="openLightbox('./08.png')"><img src="./08.png" alt="记忆文件" loading="lazy"></div>
|
||
<div>
|
||
<div class="reveal showcase-tag" style="color:#22d3ee;background:rgba(34,211,238,0.1)">🗂️ 数据管理</div>
|
||
<h3 class="reveal showcase-title">让 Agent 拥有记忆</h3>
|
||
<p class="reveal showcase-desc">在线编辑 Agent 核心配置文件（AGENTS.md、SOUL.md 等），管理工作记忆和记忆归档。支持 ZIP 一键打包导出。</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>
|
||
|
||
<!-- Gateway -->
|
||
<div class="showcase-row">
|
||
<div>
|
||
<div class="reveal showcase-tag" style="color:#10b981;background:rgba(16,185,129,0.1)">🌐 网关管控</div>
|
||
<h3 class="reveal showcase-title">安全访问，可视化配置</h3>
|
||
<p class="reveal showcase-desc">Gateway 端口、绑定范围、运行模式、Token / 密码认证方式，卡片式选项直观配置，即改即生效。</p>
|
||
<ul class="reveal showcase-list">
|
||
<li><span class="check">✓</span> 本地 / 局域网模式切换</li>
|
||
<li><span class="check">✓</span> Token & 密码双认证模式</li>
|
||
<li><span class="check">✓</span> Tailscale Funnel 支持</li>
|
||
<li><span class="check">✓</span> 高级选项按需展开</li>
|
||
</ul>
|
||
</div>
|
||
<div class="reveal screenshot-frame" onclick="openLightbox('./07.png')"><img src="./07.png" alt="Gateway 配置" loading="lazy"></div>
|
||
</div>
|
||
|
||
<!-- Agent 管理 -->
|
||
<div class="showcase-row">
|
||
<div class="reveal screenshot-frame img-first" onclick="openLightbox('./06.png')"><img src="./06.png" alt="Agent 管理" loading="lazy"></div>
|
||
<div>
|
||
<div class="reveal showcase-tag" style="color:#f97316;background:rgba(249,115,22,0.1)">🤖 智能体</div>
|
||
<h3 class="reveal showcase-title">多 Agent 协作管理</h3>
|
||
<p class="reveal showcase-desc">创建和管理多个 AI 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>
|
||
</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">⚙️ 服务管理</div></div>
|
||
<div class="reveal gallery-card" onclick="openLightbox('./04.png')"><img src="./04.png" alt="日志查看" loading="lazy"><div class="gallery-label">📋 日志查看</div></div>
|
||
<div class="reveal gallery-card" onclick="openLightbox('./09.png')"><img src="./09.png" alt="扩展工具" loading="lazy"><div class="gallery-label">🔌 扩展工具</div></div>
|
||
<div class="reveal gallery-card" onclick="openLightbox('./10.png')"><img src="./10.png" alt="系统诊断" loading="lazy"><div class="gallery-label">🔍 系统诊断</div></div>
|
||
</div>
|
||
<div class="info-grid">
|
||
<div class="reveal info-card"><div class="ic">⚙️</div><h4>服务管理</h4><p>启停控制、版本检测、一键升级、配置备份与恢复</p></div>
|
||
<div class="reveal info-card"><div class="ic">📋</div><h4>日志查看</h4><p>多日志源实时查看、关键字搜索、自动滚动跟踪</p></div>
|
||
<div class="reveal info-card"><div class="ic">🔌</div><h4>扩展工具</h4><p>cftunnel 内网穿透、ClawApp 移动客户端管理</p></div>
|
||
<div class="reveal info-card"><div class="ic">🔍</div><h4>系统诊断</h4><p>全面健康检测、WebSocket 测试、一键修复配对</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="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)">🦀</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)">⚡</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)">🔌</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)">🎨</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>
|
||
|
||
<!-- ══════════════ Marquee ══════════════ -->
|
||
<div class="marquee-wrap">
|
||
<div class="marquee-track">
|
||
<span class="marquee-item">Rust</span><span class="marquee-item marquee-dot">·</span>
|
||
<span class="marquee-item">Tauri v2</span><span class="marquee-item marquee-dot">·</span>
|
||
<span class="marquee-item">Vanilla JS</span><span class="marquee-item marquee-dot">·</span>
|
||
<span class="marquee-item">Vite</span><span class="marquee-item marquee-dot">·</span>
|
||
<span class="marquee-item">WebSocket</span><span class="marquee-item marquee-dot">·</span>
|
||
<span class="marquee-item">CSS Variables</span><span class="marquee-item marquee-dot">·</span>
|
||
<span class="marquee-item">IPC Bridge</span><span class="marquee-item marquee-dot">·</span>
|
||
<span class="marquee-item">Ed25519</span><span class="marquee-item marquee-dot">·</span>
|
||
<span class="marquee-item">Shell Plugin</span><span class="marquee-item marquee-dot">·</span>
|
||
<span class="marquee-item">SPA Router</span><span class="marquee-item marquee-dot">·</span>
|
||
<span class="marquee-item">Glassmorphism</span><span class="marquee-item marquee-dot">·</span>
|
||
<span class="marquee-item">Cross-Platform</span><span class="marquee-item marquee-dot">·</span>
|
||
<span class="marquee-item">Rust</span><span class="marquee-item marquee-dot">·</span>
|
||
<span class="marquee-item">Tauri v2</span><span class="marquee-item marquee-dot">·</span>
|
||
<span class="marquee-item">Vanilla JS</span><span class="marquee-item marquee-dot">·</span>
|
||
<span class="marquee-item">Vite</span><span class="marquee-item marquee-dot">·</span>
|
||
<span class="marquee-item">WebSocket</span><span class="marquee-item marquee-dot">·</span>
|
||
<span class="marquee-item">CSS Variables</span><span class="marquee-item marquee-dot">·</span>
|
||
<span class="marquee-item">IPC Bridge</span><span class="marquee-item marquee-dot">·</span>
|
||
<span class="marquee-item">Ed25519</span><span class="marquee-item marquee-dot">·</span>
|
||
<span class="marquee-item">Shell Plugin</span><span class="marquee-item marquee-dot">·</span>
|
||
<span class="marquee-item">SPA Router</span><span class="marquee-item marquee-dot">·</span>
|
||
<span class="marquee-item">Glassmorphism</span><span class="marquee-item marquee-dot">·</span>
|
||
<span class="marquee-item">Cross-Platform</span><span class="marquee-item marquee-dot">·</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ══════════════ 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>
|
||
|
||
<!-- ══════════════ 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/anthropics/openclaw" target="_blank" rel="noopener" class="reveal eco-card">
|
||
<div><h3>🧠 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>📱 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>🔗 cftunnel</h3><p>Cloudflare Tunnel 内网穿透工具，一键暴露本地服务</p></div>
|
||
<span class="eco-arrow">→</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══════════════ Community ══════════════ -->
|
||
<section id="community" class="section">
|
||
<div class="orb orb-1" style="top:auto;bottom:-200px;left:auto;right:-100px"></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="community-grid">
|
||
<div class="reveal community-card">
|
||
<img class="community-qr" src="./qr-qq.png" alt="QQ 群二维码">
|
||
<h3>QQ 交流群</h3>
|
||
<p class="desc">扫码或点击链接加入 OpenClaw 用户群，与开发者和用户实时交流</p>
|
||
<a href="https://qt.cool/c/OpenClaw" target="_blank" rel="noopener" class="btn btn-sm btn-outline">加入 QQ 群</a>
|
||
</div>
|
||
<div class="reveal community-card">
|
||
<img class="community-qr" src="./qr-wechat.png" alt="微信群二维码">
|
||
<h3>微信交流群</h3>
|
||
<p class="desc">加入微信群，获取最新版本通知和使用技巧分享</p>
|
||
<a href="https://qt.cool/c/OpenClawWx" target="_blank" rel="noopener" class="btn btn-sm btn-outline">加入微信群</a>
|
||
</div>
|
||
</div>
|
||
<div class="community-extra">
|
||
<a href="https://discord.gg/U9AttmsNHh" target="_blank" rel="noopener" class="reveal community-link">
|
||
<svg viewBox="0 0 24 24" fill="currentColor"><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://yb.tencent.com/gp/i/LsvIw7mdR7Lb" target="_blank" rel="noopener" class="reveal community-link">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M8 12l2 2 4-4"/></svg>
|
||
元宝派
|
||
</a>
|
||
<a href="https://github.com/qingchencloud/clawpanel/discussions" target="_blank" rel="noopener" class="reveal community-link">
|
||
<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>
|
||
GitHub Discussions
|
||
</a>
|
||
<a href="https://github.com/qingchencloud/clawpanel/issues/new" target="_blank" rel="noopener" class="reveal community-link">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 8v4M12 16h.01"/></svg>
|
||
反馈 Issue
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══════════════ CTA ══════════════ -->
|
||
<section class="section cta-section">
|
||
<div class="orb orb-2" style="top:auto;bottom:-100px"></div>
|
||
<div class="container" style="position:relative;z-index:10">
|
||
<h2 class="reveal section-title" style="font-size:2.5rem">准备好了吗？</h2>
|
||
<p class="reveal section-desc" style="margin-bottom:40px">下载 ClawPanel，开始管理你的 AI Agent</p>
|
||
<div class="reveal cta-buttons">
|
||
<a href="https://github.com/qingchencloud/clawpanel/releases/latest" target="_blank" rel="noopener" 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">
|
||
<svg viewBox="0 0 24 24" fill="currentColor" style="width:18px;height:18px"><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>
|
||
Star on GitHub
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══════════════ Footer ══════════════ -->
|
||
<footer class="footer">
|
||
<div class="footer-inner">
|
||
<div class="footer-logo">
|
||
<img src="./logo.png" alt="Logo">
|
||
<span>ClawPanel © 2025</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://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');
|
||
});
|
||
});
|
||
|
||
/* ── Particles ── */
|
||
(function() {
|
||
var c = document.getElementById('particles');
|
||
for (var i = 0; i < 30; i++) {
|
||
var p = document.createElement('span');
|
||
p.className = 'particle';
|
||
p.style.left = Math.random() * 100 + '%';
|
||
p.style.animationDuration = (8 + Math.random() * 12) + 's';
|
||
p.style.animationDelay = (Math.random() * 10) + 's';
|
||
p.style.width = p.style.height = (1 + Math.random() * 2) + 'px';
|
||
c.appendChild(p);
|
||
}
|
||
})();
|
||
</script>
|
||
</body>
|
||
</html>
|