mirror of
https://github.com/qingchencloud/clawpanel.git
synced 2026-06-08 09:09:41 +08:00
feat(engine-select): Monolith 对角线全屏选择屏
替换原卡片网格为「左上 OpenClaw（石墨黑）vs 右下 Hermes（象牙白）」对角线全屏设计。
启动屏 / 引擎切换时给用户一个有冲击力的「选择时刻」。
## 核心设计
- position: fixed 跳出 #content 范围，覆盖整个 viewport（含 sidebar）
- 双三角形 clip-path: polygon (0 0, 0 100%, 100% 0) / (100% 0, 100% 100%, 0 100%)
- 内容用 absolute 定位到三角形质心（左上 11%/6.5% / 右下 11%/6.5%），永不重叠
- 微妙的 60px 网格纹 + 角落极光（紫蓝 / 橙金）+ 极细中线分割
- clamp(80px, 13vw, 200px) 巨字标题 + 序号 + Logo + tagline + 特性列表 + CTA
## 交互
- hover 联动：用 [data-hover] attribute 替代 :has()，兼容旧 WebKit
- 鼠标悬停一侧 → 该侧亮起 + 内容平移 + CTA 反白；另一侧变暗 + 内容模糊缩小
- 点击三角形 → 三角形 clip-path 扩满（0.8s）→ 中心圆扩散（0.9s）→ 进入主页
- reveal 节点 attach 到 body，跨路由切换存活，新页面渲染后再淡出
## Both / Later 处理
- 两个次级选项保留，做成底部居中的玻璃 pill 链接（不抢戏）
- 不走对角线扩散动画，点击后直接 applyEngineSelection + navigate
## 兼容性
- prefers-reduced-motion: reduce → 关闭所有动画
- 移动端响应式：< 760px 调整字号 / 边距 / 角标
- 用 Vite define 注入的 __APP_VERSION__ 显示版本号（与 main.js / sidebar.js 一致）
## i18n
- engine.choiceTopBanner / choiceCtaEnter
- choiceOpenclaw{Tagline,Feat1,Feat2,Feat3,Category}
- choiceHermes{Tagline,Feat1,Feat2,Feat3,Category}
- choiceSecondary{Both,Later}
- 三语完整（zh-CN / en / zh-TW）
## 抽卡 prototype
保留 docs/engine-select-mockups/ 下的 V2 4 张设计 + 索引页（v2-monolith.html
即本次接入的最终版本）。
This commit is contained in:
晴天
150
docs/engine-select-mockups/index.html
Normal file
150
docs/engine-select-mockups/index.html
Normal file
@@ -0,0 +1,150 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Engine Select Mockups · 三种风格抽卡</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box }
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
|
||||
background: #0a0a0a;
|
||||
color: #fff;
|
||||
min-height: 100vh;
|
||||
padding: 40px 24px;
|
||||
}
|
||||
.container { max-width: 1100px; margin: 0 auto }
|
||||
h1 {
|
||||
font-size: 28px;
|
||||
font-weight: 200;
|
||||
letter-spacing: -0.02em;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.lead { color: rgba(255, 255, 255, 0.6); font-size: 14px; margin-bottom: 32px }
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
.card {
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border-radius: 16px;
|
||||
padding: 28px 24px;
|
||||
transition: border-color 0.2s, transform 0.2s;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
display: block;
|
||||
}
|
||||
.card:hover {
|
||||
border-color: rgba(255, 255, 255, 0.25);
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
.tag {
|
||||
display: inline-block;
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.2em;
|
||||
text-transform: uppercase;
|
||||
padding: 3px 10px;
|
||||
border-radius: 12px;
|
||||
margin-bottom: 16px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
.tag-a { background: rgba(180, 180, 180, 0.18) }
|
||||
.tag-b { background: rgba(180, 100, 255, 0.25) }
|
||||
.tag-c { background: rgba(100, 180, 255, 0.2) }
|
||||
.card h2 { font-size: 18px; margin-bottom: 8px; font-weight: 400 }
|
||||
.card .desc { font-size: 13px; color: rgba(255, 255, 255, 0.65); line-height: 1.6; margin-bottom: 14px }
|
||||
.pros { display: flex; flex-direction: column; gap: 6px }
|
||||
.pro {
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
padding-left: 18px;
|
||||
position: relative;
|
||||
}
|
||||
.pro::before {
|
||||
content: '✓';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
color: #5fffa3;
|
||||
}
|
||||
|
||||
.preview {
|
||||
aspect-ratio: 16 / 10;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 16px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.preview-a { background: #0a0a0a }
|
||||
.preview-a::before { content: ''; position: absolute; inset: 0; clip-path: polygon(100% 100%, 0 100%, 100% 0); background: #f5f5f5 }
|
||||
.preview-a::after { content: ''; position: absolute; inset: 0; background: linear-gradient(45deg, transparent 49.7%, #888 49.9%, #888 50.1%, transparent 50.3%) }
|
||||
|
||||
.preview-b { background: linear-gradient(135deg, #2c1d6b, #4a2585) }
|
||||
.preview-b::before { content: ''; position: absolute; inset: 0; clip-path: polygon(100% 100%, 0 100%, 100% 0); background: linear-gradient(315deg, #b85419, #ff8c3a) }
|
||||
.preview-b::after { content: ''; position: absolute; inset: 0; background: linear-gradient(45deg, transparent 49.6%, rgba(255,255,255,0.9) 50%, transparent 50.4%) }
|
||||
|
||||
.preview-c {
|
||||
background:
|
||||
radial-gradient(circle at 20% 30%, rgba(140, 100, 255, 0.4), transparent 35%),
|
||||
radial-gradient(circle at 80% 70%, rgba(255, 140, 60, 0.4), transparent 35%),
|
||||
#0a0d1a;
|
||||
}
|
||||
.preview-c::before { content: ''; position: absolute; inset: 0; clip-path: polygon(100% 100%, 0 100%, 100% 0); background: rgba(255, 140, 80, 0.08); backdrop-filter: blur(20px) }
|
||||
.preview-c::after { content: ''; position: absolute; inset: 0; background: linear-gradient(45deg, transparent 49.7%, rgba(255,255,255,0.6) 50%, transparent 50.3%) }
|
||||
|
||||
.footer { color: rgba(255, 255, 255, 0.5); font-size: 13px; margin-top: 32px; line-height: 1.7 }
|
||||
.footer code { background: rgba(255, 255, 255, 0.08); padding: 2px 6px; border-radius: 4px; font-size: 12px }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>Engine Select · 三种风格抽卡</h1>
|
||||
<div class="lead">点击下面任一张卡片预览完整动画。每个 mockup 都是独立 HTML，可单独打开。</div>
|
||||
|
||||
<div class="grid">
|
||||
<a class="card" href="mockup-a-minimal.html" target="_blank">
|
||||
<div class="preview preview-a"></div>
|
||||
<span class="tag tag-a">A · 极简</span>
|
||||
<h2>极简对角线 · 黑白对比</h2>
|
||||
<div class="desc">纯黑 vs 纯白，瑞士设计风格。强调内容本身，不引入任何装饰元素。</div>
|
||||
<div class="pros">
|
||||
<div class="pro">最快加载、最稳定（不依赖 backdrop-filter）</div>
|
||||
<div class="pro">永不过时，能搭配任何主题</div>
|
||||
<div class="pro">高对比度，残障友好</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="card" href="mockup-b-gradient.html" target="_blank">
|
||||
<div class="preview preview-b"></div>
|
||||
<span class="tag tag-b">B · 赛博</span>
|
||||
<h2>渐变发光 · 赛博朋克</h2>
|
||||
<div class="desc">紫蓝 vs 橙金渐变 + 发光中线 + logo 光圈脉动。每个引擎有强烈的「人格」色彩。</div>
|
||||
<div class="pros">
|
||||
<div class="pro">视觉冲击力最强，第一眼记得住</div>
|
||||
<div class="pro">两个引擎气质对比鲜明（冷 vs 暖）</div>
|
||||
<div class="pro">动效丰富但不影响性能</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="card" href="mockup-c-glass.html" target="_blank">
|
||||
<div class="preview preview-c"></div>
|
||||
<span class="tag tag-c">C · 高级</span>
|
||||
<h2>玻璃拟态 + 粒子 · 沉浸高级</h2>
|
||||
<div class="desc">动态极光 + 玻璃质感 + 漂浮粒子 + 玻璃 logo 卡片。最接近 Apple Vision Pro 的高级感。</div>
|
||||
<div class="pros">
|
||||
<div class="pro">沉浸感最强，"未来感" 拉满</div>
|
||||
<div class="pro">背景动态延伸到展开后的主页</div>
|
||||
<div class="pro">细节层次丰富（极光、粒子、玻璃高光）</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<p><strong>预览说明</strong>：每个 HTML 都是独立可运行的，无任何外部依赖。</p>
|
||||
<p>动画三阶段：<code>hover</code> → <code>三角形扩满</code> → <code>中心圆扩散进入主页</code>。</p>
|
||||
<p>预览模式下点击三角形会展示完整动画，按 <code>R</code> 重置。</p>
|
||||
<p style="margin-top: 16px">挑好风格后告诉我编号（A / B / C），我把它接进真实的 <code>/engine-select</code> 页面替换现有卡片网格。</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
303
docs/engine-select-mockups/index2.html
Normal file
303
docs/engine-select-mockups/index2.html
Normal file
@@ -0,0 +1,303 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>V2 抽卡 · 4 张大间距对角线设计</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box }
|
||||
body {
|
||||
font-family: 'Inter', -apple-system, system-ui, sans-serif;
|
||||
background: #050608;
|
||||
color: #fff;
|
||||
min-height: 100vh;
|
||||
padding: 40px 24px 60px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
.container { max-width: 1280px; margin: 0 auto }
|
||||
|
||||
.header { margin-bottom: 36px }
|
||||
h1 {
|
||||
font-size: 32px;
|
||||
font-weight: 200;
|
||||
letter-spacing: -0.03em;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.lead {
|
||||
color: rgba(255, 255, 255, 0.65);
|
||||
font-size: 14px;
|
||||
line-height: 1.7;
|
||||
max-width: 720px;
|
||||
}
|
||||
.lead strong { color: #ffd56b; font-weight: 500 }
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border-radius: 14px;
|
||||
padding: 0;
|
||||
transition: border-color 0.25s, transform 0.25s;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
}
|
||||
.card:hover {
|
||||
border-color: rgba(255, 255, 255, 0.3);
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
|
||||
.preview {
|
||||
aspect-ratio: 16 / 10;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* —— V2-A: Bold Split — 黑白 —— */
|
||||
.preview-a { background: #fff }
|
||||
.preview-a::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
clip-path: polygon(0 0, 0 100%, 100% 0);
|
||||
background: #0a0a0a;
|
||||
}
|
||||
.preview-a::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(45deg, transparent 49.7%, #d4d4d4 50%, transparent 50.3%);
|
||||
}
|
||||
.preview-a .label-tl, .preview-a .label-br {
|
||||
position: absolute;
|
||||
font-size: 8px;
|
||||
letter-spacing: 0.2em;
|
||||
}
|
||||
.preview-a .label-tl { top: 12%; left: 8%; color: #fff }
|
||||
.preview-a .label-br { bottom: 12%; right: 8%; color: #000 }
|
||||
|
||||
/* —— V2-B: Cinematic 紫橙 —— */
|
||||
.preview-b {
|
||||
background:
|
||||
radial-gradient(circle at 75% 65%, rgba(255, 130, 50, 0.45), transparent 50%),
|
||||
radial-gradient(circle at 95% 5%, rgba(120, 50, 20, 0.6), transparent 55%),
|
||||
linear-gradient(315deg, #2a1208, #4a1f0a);
|
||||
}
|
||||
.preview-b::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
clip-path: polygon(0 0, 0 100%, 100% 0);
|
||||
background:
|
||||
radial-gradient(circle at 25% 35%, rgba(120, 90, 255, 0.5), transparent 50%),
|
||||
radial-gradient(circle at 5% 95%, rgba(50, 30, 120, 0.6), transparent 55%),
|
||||
linear-gradient(135deg, #1a1340, #0d0828);
|
||||
}
|
||||
.preview-b::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(45deg, transparent 49.6%, rgba(255,255,255,0.95) 50%, transparent 50.4%);
|
||||
filter: drop-shadow(0 0 6px rgba(255,255,255,0.6));
|
||||
}
|
||||
|
||||
/* —— V2-C: Monolith 黑+米白 —— */
|
||||
.preview-c { background: #f5f3ee }
|
||||
.preview-c::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
clip-path: polygon(0 0, 0 100%, 100% 0);
|
||||
background: #0c0d12;
|
||||
}
|
||||
.preview-c::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background:
|
||||
radial-gradient(circle at 5% 5%, rgba(110, 100, 255, 0.3), transparent 35%),
|
||||
radial-gradient(circle at 95% 95%, rgba(220, 130, 60, 0.2), transparent 35%),
|
||||
linear-gradient(45deg, transparent 49.7%, rgba(180,180,180,0.7) 50%, transparent 50.3%);
|
||||
}
|
||||
|
||||
/* —— V2-D: Aurora 极光 —— */
|
||||
.preview-d {
|
||||
background:
|
||||
radial-gradient(ellipse 50% 40% at 22% 28%, rgba(110, 110, 255, 0.55) 0%, transparent 70%),
|
||||
radial-gradient(ellipse 45% 35% at 78% 72%, rgba(255, 130, 80, 0.55) 0%, transparent 70%),
|
||||
#050608;
|
||||
}
|
||||
.preview-d::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
clip-path: polygon(0 0, 0 100%, 100% 0);
|
||||
background: linear-gradient(135deg, rgba(20, 25, 60, 0.5), rgba(10, 12, 30, 0.85));
|
||||
backdrop-filter: blur(20px);
|
||||
}
|
||||
.preview-d::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(45deg, transparent 49.6%, rgba(255,255,255,0.95) 50%, transparent 50.4%);
|
||||
filter: drop-shadow(0 0 8px rgba(255,255,255,0.5));
|
||||
}
|
||||
|
||||
.body {
|
||||
padding: 20px 22px 22px;
|
||||
}
|
||||
.tag {
|
||||
display: inline-block;
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.22em;
|
||||
text-transform: uppercase;
|
||||
padding: 3px 9px;
|
||||
border-radius: 11px;
|
||||
margin-bottom: 12px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
font-weight: 500;
|
||||
}
|
||||
.card h2 {
|
||||
font-size: 17px;
|
||||
margin-bottom: 6px;
|
||||
font-weight: 500;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
.card .desc {
|
||||
font-size: 12.5px;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
line-height: 1.6;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.pros { display: flex; flex-direction: column; gap: 5px }
|
||||
.pro {
|
||||
font-size: 11.5px;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
padding-left: 18px;
|
||||
position: relative;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.pro::before {
|
||||
content: '✓';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
color: #5fffa3;
|
||||
font-size: 10px;
|
||||
top: 2px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
margin-top: 40px;
|
||||
padding-top: 28px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.08);
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
font-size: 13px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
.footer code {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
padding: 2px 7px;
|
||||
border-radius: 4px;
|
||||
font-size: 11.5px;
|
||||
}
|
||||
.footer .keys {
|
||||
margin-top: 16px;
|
||||
padding: 14px 18px;
|
||||
background: rgba(255, 215, 100, 0.06);
|
||||
border-left: 2px solid rgba(255, 215, 100, 0.5);
|
||||
border-radius: 4px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<h1>V2 抽卡 — 大间距对角线设计</h1>
|
||||
<div class="lead">
|
||||
<strong>这次修了什么</strong>：上一版把内容用 flex center 堆在屏幕中央，导致 OpenClaw 和 Hermes 的字挤在分割线两侧重叠。
|
||||
新版用 absolute 定位把内容明确放在各自三角形的「重心」——左上 11%/6%，右下 11%/6%，间距大幅拉开，分割线清晰。
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<a class="card" href="v2-bold-split.html" target="_blank">
|
||||
<div class="preview preview-a">
|
||||
<span class="label-tl">OPENCLAW</span>
|
||||
<span class="label-br">HERMES</span>
|
||||
</div>
|
||||
<div class="body">
|
||||
<span class="tag">A · BOLD SPLIT</span>
|
||||
<h2>黑白巨字</h2>
|
||||
<div class="desc">瑞士设计风。两侧都是巨大产品名（180px），黑底 vs 白底强烈反差。hover 让另一侧变暗，专注感强。</div>
|
||||
<div class="pros">
|
||||
<div class="pro">最强反差，第一眼就抓住视线</div>
|
||||
<div class="pro">极简、最稳、最快</div>
|
||||
<div class="pro">永不过时（二十年后仍漂亮）</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="card" href="v2-cinematic.html" target="_blank">
|
||||
<div class="preview preview-b"></div>
|
||||
<div class="body">
|
||||
<span class="tag">B · CINEMATIC</span>
|
||||
<h2>电影级双世界</h2>
|
||||
<div class="desc">深紫蓝（OpenClaw 冷）vs 暖橙琥珀（Hermes 暖）双世界。发光中线 + 玻璃 chips + 大图标 logo + 角标版本号。</div>
|
||||
<div class="pros">
|
||||
<div class="pro">视觉冲击最强，沉浸感最高</div>
|
||||
<div class="pro">两个引擎气质对比鲜明（冷 vs 暖）</div>
|
||||
<div class="pro">细节层次最丰富</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="card" href="v2-monolith.html" target="_blank">
|
||||
<div class="preview preview-c"></div>
|
||||
<div class="body">
|
||||
<span class="tag">C · MONOLITH</span>
|
||||
<h2>巨碑感（Linear / Vercel 风）</h2>
|
||||
<div class="desc">石墨黑 vs 象牙白，每边都有微妙网格纹 + 角落 glow。左上 logo + 序号 + 巨字 + 特性列表 + 实心 CTA。</div>
|
||||
<div class="pros">
|
||||
<div class="pro">最专业、信息密度最高</div>
|
||||
<div class="pro">B2B / SaaS 一线产品的常用风格</div>
|
||||
<div class="pro">两侧都有完整 CTA 按钮（点击意图明确）</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="card" href="v2-aurora.html" target="_blank">
|
||||
<div class="preview preview-d"></div>
|
||||
<div class="body">
|
||||
<span class="tag">D · AURORA</span>
|
||||
<h2>极光大字（Stripe / Apple 风）</h2>
|
||||
<div class="desc">底层动态极光 + 噪声纹理 + 玻璃覆盖层。两侧都是统一暗色调，但 hover 时该侧的玻璃会变亮、另一侧变暗。最高级感。</div>
|
||||
<div class="pros">
|
||||
<div class="pro">沉浸感最强，"未来感" 拉满</div>
|
||||
<div class="pro">背景与展开后的主页可无缝衔接</div>
|
||||
<div class="pro">动态背景延伸到整个产品的视觉体系</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<p><strong>核心修复</strong>：用 <code>absolute</code> 定位（top/left & bottom/right）替代 flex center，让 OpenClaw 内容在左上 ~25% 重心，Hermes 内容在右下 ~75% 重心，永不重叠。</p>
|
||||
<p><strong>新增交互</strong>：用 CSS <code>:has()</code> 实现 hover 联动 — 鼠标在哪一边，那一边变亮 + 内容浮起；另一边自动变暗 + 模糊 + 内容缩小，专注感很强。</p>
|
||||
<p><strong>动画三阶段（每个版本统一）</strong>：hover 联动 → 三角形扩满 → 中心圆扩散 → 进入主页 mock。</p>
|
||||
<div class="keys">
|
||||
<strong>挑选指引</strong>：
|
||||
<br>· 想要 <strong>极简永恒</strong> → A · Bold Split
|
||||
<br>· 想要 <strong>视觉冲击</strong> → B · Cinematic
|
||||
<br>· 想要 <strong>专业 SaaS</strong> → C · Monolith
|
||||
<br>· 想要 <strong>未来高级感</strong> → D · Aurora
|
||||
</div>
|
||||
<p style="margin-top: 18px">挑好告诉我编号（A/B/C/D），我把它接进真实的 <code>/engine-select</code> 替换现有卡片网格。</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
229
docs/engine-select-mockups/mockup-a-minimal.html
Normal file
229
docs/engine-select-mockups/mockup-a-minimal.html
Normal file
@@ -0,0 +1,229 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Mockup A — 极简对角线（黑白对比）</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box }
|
||||
html, body { height: 100%; overflow: hidden; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif }
|
||||
|
||||
/* 整体容器 */
|
||||
.stage {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
/* 三角形：clip-path 切对角线（左下→右上）
|
||||
左上半（OpenClaw）：(0,0) (0,100%) (100%,0)
|
||||
右下半（Hermes）： (100%,100%) (0,100%) (100%,0) */
|
||||
.panel {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: filter 0.4s ease;
|
||||
color: #fff;
|
||||
}
|
||||
.panel-openclaw {
|
||||
clip-path: polygon(0 0, 0 100%, 100% 0);
|
||||
background: #0a0a0a;
|
||||
color: #f5f5f5;
|
||||
}
|
||||
.panel-hermes {
|
||||
clip-path: polygon(100% 100%, 0 100%, 100% 0);
|
||||
background: #f5f5f5;
|
||||
color: #0a0a0a;
|
||||
}
|
||||
|
||||
/* 内容定位：每边贴近自己的「角」 */
|
||||
.panel-inner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
text-align: center;
|
||||
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
.panel-openclaw .panel-inner {
|
||||
margin-top: -120px;
|
||||
margin-left: -180px;
|
||||
}
|
||||
.panel-hermes .panel-inner {
|
||||
margin-bottom: -120px;
|
||||
margin-right: -180px;
|
||||
}
|
||||
|
||||
/* hover 强化 */
|
||||
.panel:hover { filter: brightness(1.08) }
|
||||
.panel:hover .panel-inner { transform: scale(1.06) }
|
||||
|
||||
/* logo */
|
||||
.logo {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
.logo svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.5 }
|
||||
|
||||
.title {
|
||||
font-size: 56px;
|
||||
font-weight: 200;
|
||||
letter-spacing: -0.04em;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 14px;
|
||||
opacity: 0.6;
|
||||
max-width: 240px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* 中央分割线（hover 时显示提示） */
|
||||
.hint {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%) rotate(-45deg);
|
||||
color: rgba(128, 128, 128, 0.3);
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.2em;
|
||||
pointer-events: none;
|
||||
text-transform: uppercase;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/* —— 选中态展开动画 —— */
|
||||
/* 阶段 1: 该三角形扩大到全屏（clip-path 占整个矩形） */
|
||||
.panel-openclaw.expanding { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); z-index: 5 }
|
||||
.panel-hermes.expanding { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); z-index: 5 }
|
||||
.panel.expanding { transition: clip-path 0.6s cubic-bezier(0.7, 0, 0.3, 1) }
|
||||
|
||||
/* 阶段 2: 中心圆扩散，模拟「展开进入主页」 */
|
||||
.reveal {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-radius: 50%;
|
||||
background: #1a1a1a;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 20;
|
||||
pointer-events: none;
|
||||
transition: width 0.7s ease, height 0.7s ease;
|
||||
}
|
||||
.reveal.active {
|
||||
width: 250vmax;
|
||||
height: 250vmax;
|
||||
}
|
||||
|
||||
/* 完成时显示「已进入主页」 */
|
||||
.home-mock {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 30;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
font-size: 24px;
|
||||
font-weight: 200;
|
||||
letter-spacing: 0.1em;
|
||||
background: #1a1a1a;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.4s ease;
|
||||
}
|
||||
.home-mock.show { opacity: 1; pointer-events: auto }
|
||||
|
||||
.reset-hint {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
font-size: 12px;
|
||||
z-index: 40;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="stage" id="stage">
|
||||
<!-- OpenClaw 左上三角 -->
|
||||
<div class="panel panel-openclaw" data-engine="openclaw">
|
||||
<div class="panel-inner">
|
||||
<div class="logo">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path d="M12 2L2 7l10 5 10-5-10-5z"/>
|
||||
<path d="M2 17l10 5 10-5"/>
|
||||
<path d="M2 12l10 5 10-5"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="title">OpenClaw</div>
|
||||
<div class="subtitle">通用 AI 助理 · 模型 / 渠道 / 记忆 / 智能体</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Hermes 右下三角 -->
|
||||
<div class="panel panel-hermes" data-engine="hermes">
|
||||
<div class="panel-inner">
|
||||
<div class="logo">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="title">Hermes</div>
|
||||
<div class="subtitle">Agent 工作流 · 工具调用 / Profile / Kanban / Skills</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hint">SELECT YOUR ENGINE</div>
|
||||
</div>
|
||||
|
||||
<div class="reveal" id="reveal"></div>
|
||||
<div class="home-mock" id="home">
|
||||
✓ 已进入 <span id="home-name" style="margin-left: 6px"></span> 主页
|
||||
</div>
|
||||
<div class="reset-hint">点击任意三角形预览动画 · 按 R 重置</div>
|
||||
|
||||
<script>
|
||||
const stage = document.getElementById('stage')
|
||||
const reveal = document.getElementById('reveal')
|
||||
const home = document.getElementById('home')
|
||||
const homeName = document.getElementById('home-name')
|
||||
|
||||
document.querySelectorAll('.panel').forEach(panel => {
|
||||
panel.addEventListener('click', () => {
|
||||
const engine = panel.dataset.engine
|
||||
const other = stage.querySelector(`.panel:not([data-engine="${engine}"])`)
|
||||
// 阶段 1: 选中三角形展开占满
|
||||
panel.classList.add('expanding')
|
||||
other.style.opacity = '0'
|
||||
other.style.transition = 'opacity 0.4s'
|
||||
// 阶段 2: 中心圆扩散
|
||||
setTimeout(() => {
|
||||
reveal.style.background = engine === 'openclaw' ? '#1a1a1a' : '#fafafa'
|
||||
home.style.background = engine === 'openclaw' ? '#1a1a1a' : '#fafafa'
|
||||
home.style.color = engine === 'openclaw' ? '#fff' : '#000'
|
||||
homeName.textContent = engine === 'openclaw' ? 'OpenClaw' : 'Hermes'
|
||||
reveal.classList.add('active')
|
||||
}, 500)
|
||||
// 阶段 3: 显示主页 mock
|
||||
setTimeout(() => home.classList.add('show'), 1100)
|
||||
})
|
||||
})
|
||||
|
||||
// R 键重置
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key.toLowerCase() === 'r') location.reload()
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
269
docs/engine-select-mockups/mockup-b-gradient.html
Normal file
269
docs/engine-select-mockups/mockup-b-gradient.html
Normal file
@@ -0,0 +1,269 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Mockup B — 渐变发光（赛博朋克）</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box }
|
||||
html, body { height: 100%; overflow: hidden; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; background: #060611 }
|
||||
|
||||
.stage { position: fixed; inset: 0; overflow: hidden }
|
||||
|
||||
/* 背景星点 */
|
||||
.stars {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image:
|
||||
radial-gradient(2px 2px at 12% 18%, rgba(120, 130, 255, 0.5), transparent),
|
||||
radial-gradient(2px 2px at 88% 78%, rgba(255, 180, 100, 0.5), transparent),
|
||||
radial-gradient(1.5px 1.5px at 30% 65%, rgba(160, 100, 255, 0.4), transparent),
|
||||
radial-gradient(1.5px 1.5px at 70% 30%, rgba(255, 120, 80, 0.4), transparent),
|
||||
radial-gradient(1px 1px at 50% 50%, rgba(255, 255, 255, 0.3), transparent);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
/* 三角形 panel */
|
||||
.panel {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: filter 0.4s ease, transform 0.4s ease;
|
||||
}
|
||||
.panel-openclaw {
|
||||
clip-path: polygon(0 0, 0 100%, 100% 0);
|
||||
background:
|
||||
radial-gradient(ellipse at 25% 25%, rgba(110, 80, 220, 0.45), transparent 60%),
|
||||
linear-gradient(135deg, #2c1d6b 0%, #4a2585 35%, #1a0d3d 100%);
|
||||
}
|
||||
.panel-hermes {
|
||||
clip-path: polygon(100% 100%, 0 100%, 100% 0);
|
||||
background:
|
||||
radial-gradient(ellipse at 75% 75%, rgba(255, 130, 60, 0.45), transparent 60%),
|
||||
linear-gradient(315deg, #5b1f0a 0%, #b85419 35%, #ff8c3a 70%, #d97a4e 100%);
|
||||
}
|
||||
|
||||
/* 中线发光 */
|
||||
.panel::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(45deg, transparent 49.6%, rgba(255, 255, 255, 0.7) 49.8%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0.7) 50.2%, transparent 50.4%);
|
||||
filter: blur(0.5px);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* 内容定位 */
|
||||
.panel-inner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 28px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
z-index: 2;
|
||||
}
|
||||
.panel-openclaw .panel-inner { margin-top: -120px; margin-left: -180px }
|
||||
.panel-hermes .panel-inner { margin-bottom: -120px; margin-right: -180px }
|
||||
|
||||
/* hover：发光增强 + 浮起 */
|
||||
.panel:hover { filter: brightness(1.18) saturate(1.2) }
|
||||
.panel:hover .panel-inner { transform: scale(1.08) translateY(-8px) }
|
||||
.panel:hover .logo { animation: pulse 1.2s ease infinite }
|
||||
|
||||
/* logo 装饰光圈 */
|
||||
.logo {
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
position: relative;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1.5px solid rgba(255, 255, 255, 0.3);
|
||||
box-shadow: 0 0 30px currentColor, inset 0 0 30px rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
.panel-openclaw .logo { color: rgba(170, 130, 255, 0.5) }
|
||||
.panel-hermes .logo { color: rgba(255, 180, 100, 0.6) }
|
||||
|
||||
.logo svg { width: 50px; height: 50px; stroke: #fff; fill: none; stroke-width: 1.6 }
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { box-shadow: 0 0 30px currentColor, inset 0 0 30px rgba(255, 255, 255, 0.1) }
|
||||
50% { box-shadow: 0 0 60px currentColor, inset 0 0 40px rgba(255, 255, 255, 0.2) }
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 64px;
|
||||
font-weight: 300;
|
||||
letter-spacing: -0.04em;
|
||||
line-height: 1;
|
||||
text-shadow: 0 2px 30px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 14px;
|
||||
opacity: 0.85;
|
||||
max-width: 280px;
|
||||
line-height: 1.7;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.badge {
|
||||
font-size: 10px;
|
||||
padding: 4px 12px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.4);
|
||||
border-radius: 20px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.15em;
|
||||
margin-bottom: -10px;
|
||||
}
|
||||
|
||||
/* 中央提示 */
|
||||
.center-hint {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%) rotate(-45deg);
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.3em;
|
||||
pointer-events: none;
|
||||
z-index: 10;
|
||||
font-weight: 300;
|
||||
text-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
/* —— 选中展开动画 —— */
|
||||
.panel.expanding { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); z-index: 5 }
|
||||
.panel.expanding::before { opacity: 0 }
|
||||
.panel { transition: clip-path 0.7s cubic-bezier(0.7, 0, 0.3, 1), filter 0.4s ease }
|
||||
|
||||
.reveal {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-radius: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 20;
|
||||
pointer-events: none;
|
||||
transition: width 0.8s cubic-bezier(0.65, 0, 0.35, 1), height 0.8s cubic-bezier(0.65, 0, 0.35, 1);
|
||||
box-shadow: 0 0 100px currentColor;
|
||||
}
|
||||
.reveal.active { width: 250vmax; height: 250vmax }
|
||||
|
||||
.home-mock {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 30;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
color: #fff;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.5s ease;
|
||||
}
|
||||
.home-mock.show { opacity: 1; pointer-events: auto }
|
||||
.home-title { font-size: 32px; font-weight: 200; letter-spacing: -0.02em }
|
||||
.home-sub { font-size: 13px; opacity: 0.7; letter-spacing: 0.2em; text-transform: uppercase }
|
||||
|
||||
.reset-hint {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
font-size: 12px;
|
||||
z-index: 40;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="stage" id="stage">
|
||||
<div class="stars"></div>
|
||||
|
||||
<div class="panel panel-openclaw" data-engine="openclaw">
|
||||
<div class="panel-inner">
|
||||
<div class="badge">通用助理</div>
|
||||
<div class="logo">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path d="M12 2L2 7l10 5 10-5-10-5z"/>
|
||||
<path d="M2 17l10 5 10-5"/>
|
||||
<path d="M2 12l10 5 10-5"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="title">OpenClaw</div>
|
||||
<div class="subtitle">模型管理 · 渠道集成 · 记忆系统 · 智能体编排</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel panel-hermes" data-engine="hermes">
|
||||
<div class="panel-inner">
|
||||
<div class="badge">Agent 工作流</div>
|
||||
<div class="logo">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="title">Hermes</div>
|
||||
<div class="subtitle">工具调用 · Profile · Kanban · Skills · OAuth</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="center-hint">— SELECT —</div>
|
||||
</div>
|
||||
|
||||
<div class="reveal" id="reveal"></div>
|
||||
<div class="home-mock" id="home">
|
||||
<div class="home-title" id="home-name"></div>
|
||||
<div class="home-sub">Loading workspace...</div>
|
||||
</div>
|
||||
<div class="reset-hint">点击预览 · 按 R 重置</div>
|
||||
|
||||
<script>
|
||||
const stage = document.getElementById('stage')
|
||||
const reveal = document.getElementById('reveal')
|
||||
const home = document.getElementById('home')
|
||||
const homeName = document.getElementById('home-name')
|
||||
|
||||
const colors = {
|
||||
openclaw: { bg: 'linear-gradient(135deg, #2c1d6b, #4a2585)', glow: 'rgba(110, 80, 220, 0.6)' },
|
||||
hermes: { bg: 'linear-gradient(315deg, #b85419, #ff8c3a)', glow: 'rgba(255, 130, 60, 0.6)' },
|
||||
}
|
||||
|
||||
document.querySelectorAll('.panel').forEach(panel => {
|
||||
panel.addEventListener('click', () => {
|
||||
const engine = panel.dataset.engine
|
||||
const other = stage.querySelector(`.panel:not([data-engine="${engine}"])`)
|
||||
panel.classList.add('expanding')
|
||||
other.style.opacity = '0'
|
||||
other.style.transition = 'opacity 0.4s'
|
||||
setTimeout(() => {
|
||||
reveal.style.background = colors[engine].bg
|
||||
reveal.style.color = colors[engine].glow
|
||||
home.style.background = colors[engine].bg
|
||||
homeName.textContent = engine === 'openclaw' ? 'OpenClaw' : 'Hermes'
|
||||
reveal.classList.add('active')
|
||||
}, 600)
|
||||
setTimeout(() => home.classList.add('show'), 1300)
|
||||
})
|
||||
})
|
||||
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key.toLowerCase() === 'r') location.reload()
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
339
docs/engine-select-mockups/mockup-c-glass.html
Normal file
339
docs/engine-select-mockups/mockup-c-glass.html
Normal file
@@ -0,0 +1,339 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Mockup C — 玻璃拟态 + 粒子（沉浸高级感）</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box }
|
||||
html, body { height: 100%; overflow: hidden; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif }
|
||||
|
||||
body {
|
||||
background: #0a0d1a;
|
||||
}
|
||||
|
||||
.stage { position: fixed; inset: 0; overflow: hidden }
|
||||
|
||||
/* 动态背景层：色块缓慢移动 */
|
||||
.bg-aurora {
|
||||
position: absolute;
|
||||
inset: -50%;
|
||||
background:
|
||||
radial-gradient(circle at 20% 30%, rgba(140, 100, 255, 0.4) 0%, transparent 30%),
|
||||
radial-gradient(circle at 80% 70%, rgba(255, 140, 60, 0.4) 0%, transparent 30%),
|
||||
radial-gradient(circle at 50% 50%, rgba(100, 180, 255, 0.2) 0%, transparent 50%);
|
||||
filter: blur(80px);
|
||||
animation: drift 20s ease-in-out infinite alternate;
|
||||
}
|
||||
@keyframes drift {
|
||||
0% { transform: translate(0, 0) rotate(0deg) }
|
||||
100% { transform: translate(-10%, 10%) rotate(8deg) }
|
||||
}
|
||||
|
||||
/* 粒子层 */
|
||||
.particles {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
.particle {
|
||||
position: absolute;
|
||||
width: 3px;
|
||||
height: 3px;
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
opacity: 0;
|
||||
animation: float 6s ease-in-out infinite;
|
||||
}
|
||||
@keyframes float {
|
||||
0%, 100% { opacity: 0; transform: translateY(0) scale(0.5) }
|
||||
50% { opacity: 0.8; transform: translateY(-30px) scale(1) }
|
||||
}
|
||||
|
||||
/* 三角形 panel — 玻璃拟态 */
|
||||
.panel {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: backdrop-filter 0.5s ease;
|
||||
}
|
||||
.panel-openclaw {
|
||||
clip-path: polygon(0 0, 0 100%, 100% 0);
|
||||
background: rgba(120, 100, 200, 0.08);
|
||||
backdrop-filter: blur(20px) saturate(1.4);
|
||||
-webkit-backdrop-filter: blur(20px) saturate(1.4);
|
||||
}
|
||||
.panel-hermes {
|
||||
clip-path: polygon(100% 100%, 0 100%, 100% 0);
|
||||
background: rgba(255, 140, 80, 0.08);
|
||||
backdrop-filter: blur(20px) saturate(1.4);
|
||||
-webkit-backdrop-filter: blur(20px) saturate(1.4);
|
||||
}
|
||||
|
||||
/* 玻璃边缘高光（细线） */
|
||||
.panel::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(45deg, transparent 49.7%, rgba(255, 255, 255, 0.5) 49.9%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0.5) 50.1%, transparent 50.3%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* 内容定位 */
|
||||
.panel-inner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), letter-spacing 0.6s ease;
|
||||
z-index: 2;
|
||||
}
|
||||
.panel-openclaw .panel-inner { margin-top: -100px; margin-left: -160px }
|
||||
.panel-hermes .panel-inner { margin-bottom: -100px; margin-right: -160px }
|
||||
|
||||
/* hover：内容浮起 + 字距张开 */
|
||||
.panel:hover { backdrop-filter: blur(25px) saturate(1.8) brightness(1.1) }
|
||||
.panel:hover .panel-inner { transform: scale(1.05) translateY(-4px) }
|
||||
.panel:hover .title { letter-spacing: 0em }
|
||||
.panel:hover .glass-card { box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.3) }
|
||||
|
||||
/* 玻璃卡片 — logo 容器 */
|
||||
.glass-card {
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 24px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(20px);
|
||||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.18);
|
||||
transition: box-shadow 0.5s ease, transform 0.5s ease;
|
||||
}
|
||||
.panel:hover .glass-card { transform: rotate(-4deg) scale(1.05) }
|
||||
|
||||
.glass-card svg { width: 56px; height: 56px; stroke: #fff; fill: none; stroke-width: 1.5 }
|
||||
|
||||
.label {
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.3em;
|
||||
opacity: 0.7;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 60px;
|
||||
font-weight: 200;
|
||||
letter-spacing: -0.02em;
|
||||
line-height: 1;
|
||||
background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0.7) 100%);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
transition: letter-spacing 0.6s ease;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 13px;
|
||||
opacity: 0.8;
|
||||
max-width: 280px;
|
||||
line-height: 1.7;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.features {
|
||||
display: flex;
|
||||
gap: 14px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.feature-pill {
|
||||
font-size: 10px;
|
||||
padding: 4px 10px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 12px;
|
||||
backdrop-filter: blur(10px);
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
/* 中央分割线提示 */
|
||||
.divider-hint {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%) rotate(-45deg);
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.4em;
|
||||
pointer-events: none;
|
||||
z-index: 10;
|
||||
text-transform: uppercase;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
/* —— 选中展开动画 —— */
|
||||
.panel.expanding { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); z-index: 5 }
|
||||
.panel.expanding::before { opacity: 0 }
|
||||
.panel { transition: clip-path 0.8s cubic-bezier(0.7, 0, 0.3, 1), backdrop-filter 0.5s ease }
|
||||
|
||||
/* 反向 reveal: 中心圆向外扩散 */
|
||||
.reveal {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-radius: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 20;
|
||||
pointer-events: none;
|
||||
transition: width 0.9s cubic-bezier(0.65, 0, 0.35, 1), height 0.9s cubic-bezier(0.65, 0, 0.35, 1);
|
||||
}
|
||||
.reveal.active { width: 250vmax; height: 250vmax }
|
||||
|
||||
.home-mock {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 30;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.6s ease;
|
||||
}
|
||||
.home-mock.show { opacity: 1; pointer-events: auto }
|
||||
.home-card {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
backdrop-filter: blur(30px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
border-radius: 24px;
|
||||
padding: 40px 60px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
box-shadow: 0 20px 80px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.home-card .ht { font-size: 28px; font-weight: 200; margin-bottom: 8px }
|
||||
.home-card .hs { font-size: 12px; opacity: 0.6; letter-spacing: 0.2em; text-transform: uppercase }
|
||||
|
||||
.reset-hint {
|
||||
position: fixed;
|
||||
bottom: 24px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
font-size: 12px;
|
||||
z-index: 40;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="stage" id="stage">
|
||||
<div class="bg-aurora"></div>
|
||||
<div class="particles" id="particles"></div>
|
||||
|
||||
<div class="panel panel-openclaw" data-engine="openclaw">
|
||||
<div class="panel-inner">
|
||||
<div class="label">通用助理</div>
|
||||
<div class="glass-card">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path d="M12 2L2 7l10 5 10-5-10-5z"/>
|
||||
<path d="M2 17l10 5 10-5"/>
|
||||
<path d="M2 12l10 5 10-5"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="title">OpenClaw</div>
|
||||
<div class="subtitle">模型管理 · 渠道集成 · 记忆系统 · 智能体编排</div>
|
||||
<div class="features">
|
||||
<div class="feature-pill">Models</div>
|
||||
<div class="feature-pill">Channels</div>
|
||||
<div class="feature-pill">Memory</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel panel-hermes" data-engine="hermes">
|
||||
<div class="panel-inner">
|
||||
<div class="label">Agent 工作流</div>
|
||||
<div class="glass-card">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="title">Hermes</div>
|
||||
<div class="subtitle">工具调用 · Kanban · Skills · OAuth · Multi Profile</div>
|
||||
<div class="features">
|
||||
<div class="feature-pill">Tools</div>
|
||||
<div class="feature-pill">Skills</div>
|
||||
<div class="feature-pill">Profiles</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="divider-hint">CHOOSE YOUR PATH</div>
|
||||
</div>
|
||||
|
||||
<div class="reveal" id="reveal"></div>
|
||||
<div class="home-mock" id="home">
|
||||
<div class="home-card">
|
||||
<div class="ht" id="home-name"></div>
|
||||
<div class="hs">Loading workspace…</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="reset-hint">点击预览 · 按 R 重置</div>
|
||||
|
||||
<script>
|
||||
// 生成粒子
|
||||
const pc = document.getElementById('particles')
|
||||
for (let i = 0; i < 40; i++) {
|
||||
const p = document.createElement('div')
|
||||
p.className = 'particle'
|
||||
p.style.left = Math.random() * 100 + '%'
|
||||
p.style.top = Math.random() * 100 + '%'
|
||||
p.style.animationDelay = (Math.random() * 6) + 's'
|
||||
p.style.animationDuration = (4 + Math.random() * 6) + 's'
|
||||
pc.appendChild(p)
|
||||
}
|
||||
|
||||
const stage = document.getElementById('stage')
|
||||
const reveal = document.getElementById('reveal')
|
||||
const home = document.getElementById('home')
|
||||
const homeName = document.getElementById('home-name')
|
||||
|
||||
const colors = {
|
||||
openclaw: 'radial-gradient(circle at center, rgba(140, 100, 255, 0.5), #1a1530)',
|
||||
hermes: 'radial-gradient(circle at center, rgba(255, 140, 60, 0.5), #2a1a10)',
|
||||
}
|
||||
|
||||
document.querySelectorAll('.panel').forEach(panel => {
|
||||
panel.addEventListener('click', () => {
|
||||
const engine = panel.dataset.engine
|
||||
const other = stage.querySelector(`.panel:not([data-engine="${engine}"])`)
|
||||
panel.classList.add('expanding')
|
||||
other.style.opacity = '0'
|
||||
other.style.transition = 'opacity 0.5s'
|
||||
setTimeout(() => {
|
||||
reveal.style.background = colors[engine]
|
||||
home.style.background = colors[engine]
|
||||
homeName.textContent = engine === 'openclaw' ? 'OpenClaw' : 'Hermes'
|
||||
reveal.classList.add('active')
|
||||
}, 700)
|
||||
setTimeout(() => home.classList.add('show'), 1500)
|
||||
})
|
||||
})
|
||||
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key.toLowerCase() === 'r') location.reload()
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
395
docs/engine-select-mockups/v2-aurora.html
Normal file
395
docs/engine-select-mockups/v2-aurora.html
Normal file
@@ -0,0 +1,395 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>V2-D · Aurora — 极光大字（Stripe / Apple 风）</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box }
|
||||
html, body { height: 100%; overflow: hidden; font-family: 'Inter', -apple-system, system-ui, sans-serif; background: #050608; -webkit-font-smoothing: antialiased }
|
||||
|
||||
.stage { position: fixed; inset: 0 }
|
||||
|
||||
/* 全屏极光背景（永远在最底） */
|
||||
.aurora-bg {
|
||||
position: absolute;
|
||||
inset: -20%;
|
||||
background:
|
||||
radial-gradient(ellipse 50% 40% at 22% 28%, rgba(110, 110, 255, 0.55) 0%, transparent 70%),
|
||||
radial-gradient(ellipse 45% 35% at 78% 72%, rgba(255, 130, 80, 0.55) 0%, transparent 70%),
|
||||
radial-gradient(circle at 50% 50%, rgba(60, 80, 180, 0.3) 0%, transparent 50%);
|
||||
filter: blur(50px);
|
||||
animation: aurora-drift 18s ease-in-out infinite alternate;
|
||||
}
|
||||
@keyframes aurora-drift {
|
||||
0% { transform: translate(0, 0) rotate(0deg) scale(1) }
|
||||
50% { transform: translate(2%, -2%) rotate(2deg) scale(1.05) }
|
||||
100% { transform: translate(-3%, 3%) rotate(-2deg) scale(1.02) }
|
||||
}
|
||||
|
||||
/* 噪声纹理（增加质感） */
|
||||
.noise {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
opacity: 0.4;
|
||||
pointer-events: none;
|
||||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.18 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
|
||||
mix-blend-mode: overlay;
|
||||
}
|
||||
|
||||
/* 三角形（玻璃覆盖层）— 不再用纯色，而是给玻璃质感 */
|
||||
.panel-openclaw {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
clip-path: polygon(0 0, 0 100%, 100% 0);
|
||||
cursor: pointer;
|
||||
background: linear-gradient(135deg, rgba(20, 25, 60, 0.5), rgba(10, 12, 30, 0.85));
|
||||
backdrop-filter: blur(30px) saturate(1.4);
|
||||
-webkit-backdrop-filter: blur(30px) saturate(1.4);
|
||||
transition: backdrop-filter 0.6s ease, background 0.6s ease;
|
||||
}
|
||||
.panel-hermes {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
clip-path: polygon(100% 0, 100% 100%, 0 100%);
|
||||
cursor: pointer;
|
||||
background: linear-gradient(315deg, rgba(60, 25, 15, 0.5), rgba(30, 12, 8, 0.85));
|
||||
backdrop-filter: blur(30px) saturate(1.4);
|
||||
-webkit-backdrop-filter: blur(30px) saturate(1.4);
|
||||
transition: backdrop-filter 0.6s ease, background 0.6s ease;
|
||||
}
|
||||
|
||||
/* 中线发光（更细致） */
|
||||
.divider {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(45deg,
|
||||
transparent 49.6%,
|
||||
rgba(255, 255, 255, 0.15) 49.8%,
|
||||
rgba(255, 255, 255, 0.85) 49.97%,
|
||||
rgba(255, 255, 255, 1) 50%,
|
||||
rgba(255, 255, 255, 0.85) 50.03%,
|
||||
rgba(255, 255, 255, 0.15) 50.2%,
|
||||
transparent 50.4%
|
||||
);
|
||||
pointer-events: none;
|
||||
filter: drop-shadow(0 0 16px rgba(255, 255, 255, 0.5));
|
||||
transition: opacity 0.6s;
|
||||
}
|
||||
|
||||
/* 内容定位 */
|
||||
.content {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
color: #fff;
|
||||
transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s, filter 0.5s;
|
||||
z-index: 5;
|
||||
}
|
||||
.content-openclaw {
|
||||
top: 11%;
|
||||
left: 6%;
|
||||
text-align: left;
|
||||
max-width: 44vw;
|
||||
}
|
||||
.content-hermes {
|
||||
bottom: 11%;
|
||||
right: 6%;
|
||||
text-align: right;
|
||||
max-width: 44vw;
|
||||
}
|
||||
|
||||
/* hover 联动 */
|
||||
.stage:has(.panel-openclaw:hover) .panel-hermes,
|
||||
.stage:has(.panel-hermes:hover) .panel-openclaw {
|
||||
backdrop-filter: blur(50px) saturate(0.5) brightness(0.5);
|
||||
}
|
||||
.stage:has(.panel-openclaw:hover) .content-hermes,
|
||||
.stage:has(.panel-hermes:hover) .content-openclaw {
|
||||
opacity: 0.2;
|
||||
filter: blur(3px);
|
||||
transform: scale(0.98);
|
||||
}
|
||||
.stage:has(.panel-openclaw:hover) .panel-openclaw {
|
||||
backdrop-filter: blur(20px) saturate(1.6) brightness(1.15);
|
||||
}
|
||||
.stage:has(.panel-hermes:hover) .panel-hermes {
|
||||
backdrop-filter: blur(20px) saturate(1.6) brightness(1.15);
|
||||
}
|
||||
.stage:has(.panel-openclaw:hover) .content-openclaw,
|
||||
.stage:has(.panel-hermes:hover) .content-hermes {
|
||||
transform: scale(1.04);
|
||||
}
|
||||
|
||||
/* 字母 */
|
||||
.number-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
margin-bottom: 32px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.4em;
|
||||
text-transform: uppercase;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
.number-tag::before {
|
||||
content: '';
|
||||
width: 60px;
|
||||
height: 1px;
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
.content-hermes .number-tag { flex-direction: row-reverse }
|
||||
.content-hermes .number-tag::before { display: none }
|
||||
.content-hermes .number-tag::after {
|
||||
content: '';
|
||||
width: 60px;
|
||||
height: 1px;
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
/* 巨字 + 渐变 */
|
||||
.title {
|
||||
font-size: clamp(80px, 13vw, 200px);
|
||||
font-weight: 100;
|
||||
letter-spacing: -0.06em;
|
||||
line-height: 0.88;
|
||||
margin-bottom: 28px;
|
||||
background: linear-gradient(180deg, #fff 25%, rgba(255, 255, 255, 0.45) 100%);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
/* 副标题 */
|
||||
.tagline {
|
||||
font-size: clamp(20px, 1.7vw, 26px);
|
||||
line-height: 1.5;
|
||||
font-weight: 300;
|
||||
max-width: 520px;
|
||||
margin-bottom: 36px;
|
||||
opacity: 0.82;
|
||||
letter-spacing: -0.005em;
|
||||
}
|
||||
.content-hermes .tagline { margin-left: auto }
|
||||
|
||||
/* 玻璃 chips */
|
||||
.chips {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-bottom: 48px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.content-hermes .chips { justify-content: flex-end }
|
||||
.chip {
|
||||
padding: 10px 18px;
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.02em;
|
||||
border: 1px solid rgba(255, 255, 255, 0.16);
|
||||
border-radius: 100px;
|
||||
backdrop-filter: blur(15px);
|
||||
-webkit-backdrop-filter: blur(15px);
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
/* CTA */
|
||||
.cta {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
padding: 16px 28px;
|
||||
border-radius: 100px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.05em;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.25);
|
||||
backdrop-filter: blur(15px);
|
||||
color: #fff;
|
||||
transition: all 0.4s ease;
|
||||
}
|
||||
.stage:has(.panel-openclaw:hover) .content-openclaw .cta,
|
||||
.stage:has(.panel-hermes:hover) .content-hermes .cta {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
color: #0a0a0a;
|
||||
border-color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
.content-hermes .cta { flex-direction: row-reverse }
|
||||
.cta .arrow { font-size: 16px; transition: transform 0.3s }
|
||||
.stage:has(.panel-openclaw:hover) .content-openclaw .cta .arrow { transform: translateX(4px) }
|
||||
.stage:has(.panel-hermes:hover) .content-hermes .cta .arrow { transform: translateX(-4px) }
|
||||
|
||||
/* 顶部 banner + 角标 */
|
||||
.top-banner {
|
||||
position: fixed;
|
||||
top: 32px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.45em;
|
||||
text-transform: uppercase;
|
||||
z-index: 5;
|
||||
pointer-events: none;
|
||||
font-weight: 500;
|
||||
}
|
||||
.corner-mark {
|
||||
position: absolute;
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.32em;
|
||||
text-transform: uppercase;
|
||||
color: rgba(255, 255, 255, 0.35);
|
||||
pointer-events: none;
|
||||
z-index: 5;
|
||||
font-weight: 500;
|
||||
}
|
||||
.corner-tl { top: 32px; left: 36px }
|
||||
.corner-br { bottom: 32px; right: 36px }
|
||||
|
||||
/* —— 选中展开动画 —— */
|
||||
.panel.expanding { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); z-index: 6 }
|
||||
.panel { transition: clip-path 0.8s cubic-bezier(0.7, 0, 0.3, 1), backdrop-filter 0.6s, background 0.6s }
|
||||
|
||||
.reveal {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-radius: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 20;
|
||||
pointer-events: none;
|
||||
transition: width 0.9s cubic-bezier(0.65, 0, 0.35, 1), height 0.9s cubic-bezier(0.65, 0, 0.35, 1);
|
||||
}
|
||||
.reveal.active { width: 260vmax; height: 260vmax }
|
||||
|
||||
.home-mock {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 30;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
color: #fff;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.6s ease;
|
||||
}
|
||||
.home-mock.show { opacity: 1; pointer-events: auto }
|
||||
.home-mock .ht {
|
||||
font-size: 64px;
|
||||
font-weight: 100;
|
||||
letter-spacing: -0.04em;
|
||||
background: linear-gradient(180deg, #fff, rgba(255, 255, 255, 0.55));
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
.home-mock .hs { font-size: 12px; letter-spacing: 0.45em; text-transform: uppercase; opacity: 0.5 }
|
||||
|
||||
.reset-hint {
|
||||
position: fixed;
|
||||
bottom: 24px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.2em;
|
||||
text-transform: uppercase;
|
||||
z-index: 40;
|
||||
pointer-events: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="stage" id="stage">
|
||||
<div class="aurora-bg"></div>
|
||||
<div class="noise"></div>
|
||||
|
||||
<div class="panel panel-openclaw" data-engine="openclaw"></div>
|
||||
<div class="panel panel-hermes" data-engine="hermes"></div>
|
||||
<div class="divider"></div>
|
||||
|
||||
<div class="top-banner">— Choose your engine —</div>
|
||||
<div class="corner-mark corner-tl">CLAWPANEL</div>
|
||||
<div class="corner-mark corner-br">v0.15.3</div>
|
||||
|
||||
<div class="content content-openclaw">
|
||||
<div class="number-tag">01 · Universal Assistant</div>
|
||||
<div class="title">OpenClaw</div>
|
||||
<div class="tagline">从模型到智能体，一站式打造你的 AI 工作台。</div>
|
||||
<div class="chips">
|
||||
<div class="chip">Models</div>
|
||||
<div class="chip">Channels</div>
|
||||
<div class="chip">Memory</div>
|
||||
<div class="chip">Agents</div>
|
||||
</div>
|
||||
<div class="cta">
|
||||
Enter OpenClaw
|
||||
<span class="arrow">→</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content content-hermes">
|
||||
<div class="number-tag">Agent Workflow · 02</div>
|
||||
<div class="title">Hermes</div>
|
||||
<div class="tagline">让 Agent 真正能干活。工具调用、Profile、Kanban 一应俱全。</div>
|
||||
<div class="chips">
|
||||
<div class="chip">Tools</div>
|
||||
<div class="chip">Skills</div>
|
||||
<div class="chip">Kanban</div>
|
||||
<div class="chip">Profiles</div>
|
||||
</div>
|
||||
<div class="cta">
|
||||
<span class="arrow">→</span>
|
||||
Enter Hermes
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="reveal" id="reveal"></div>
|
||||
<div class="home-mock" id="home">
|
||||
<div class="ht" id="home-name"></div>
|
||||
<div class="hs">Initializing workspace</div>
|
||||
</div>
|
||||
<div class="reset-hint">Click a side · Press R to reset</div>
|
||||
|
||||
<script>
|
||||
const stage = document.getElementById('stage')
|
||||
const reveal = document.getElementById('reveal')
|
||||
const home = document.getElementById('home')
|
||||
const homeName = document.getElementById('home-name')
|
||||
|
||||
const colors = {
|
||||
openclaw: 'radial-gradient(circle at center, rgba(110, 110, 255, 0.5) 0%, #0a0c20 70%)',
|
||||
hermes: 'radial-gradient(circle at center, rgba(255, 130, 80, 0.5) 0%, #2a1208 70%)',
|
||||
}
|
||||
|
||||
document.querySelectorAll('.panel').forEach(panel => {
|
||||
panel.addEventListener('click', () => {
|
||||
const engine = panel.dataset.engine
|
||||
const other = stage.querySelector(`.panel:not([data-engine="${engine}"])`)
|
||||
panel.classList.add('expanding')
|
||||
other.style.opacity = '0'
|
||||
stage.querySelectorAll('.content, .corner-mark, .top-banner').forEach(c => c.style.opacity = '0')
|
||||
stage.querySelector('.divider').style.opacity = '0'
|
||||
setTimeout(() => {
|
||||
reveal.style.background = colors[engine]
|
||||
home.style.background = colors[engine]
|
||||
homeName.textContent = engine === 'openclaw' ? 'OpenClaw' : 'Hermes'
|
||||
reveal.classList.add('active')
|
||||
}, 700)
|
||||
setTimeout(() => home.classList.add('show'), 1500)
|
||||
})
|
||||
})
|
||||
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key.toLowerCase() === 'r') location.reload()
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
284
docs/engine-select-mockups/v2-bold-split.html
Normal file
284
docs/engine-select-mockups/v2-bold-split.html
Normal file
@@ -0,0 +1,284 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>V2-A · Bold Split — 黑白巨字</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box }
|
||||
html, body { height: 100%; overflow: hidden; font-family: 'Inter', -apple-system, system-ui, sans-serif; -webkit-font-smoothing: antialiased }
|
||||
|
||||
.stage {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
/* 左上三角（黑） */
|
||||
.panel-openclaw {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
clip-path: polygon(0 0, 0 100%, 100% 0);
|
||||
background: #0a0a0a;
|
||||
cursor: pointer;
|
||||
transition: filter 0.5s ease;
|
||||
}
|
||||
/* 右下三角（白）— 不需要单独 panel，body 是白底 */
|
||||
.panel-hermes {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
clip-path: polygon(100% 0, 100% 100%, 0 100%);
|
||||
background: #fff;
|
||||
cursor: pointer;
|
||||
transition: filter 0.5s ease;
|
||||
}
|
||||
|
||||
/* 中线（细灰线） */
|
||||
.divider {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(45deg, transparent calc(50% - 1px), #e5e5e5 50%, transparent calc(50% + 1px));
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* 内容容器：absolute 定位，各自放在对角线的"远端"重心 */
|
||||
.content {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
|
||||
}
|
||||
.content-openclaw {
|
||||
top: 14%;
|
||||
left: 8%;
|
||||
color: #f5f5f5;
|
||||
text-align: left;
|
||||
}
|
||||
.content-hermes {
|
||||
bottom: 14%;
|
||||
right: 8%;
|
||||
color: #0a0a0a;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* hover 该三角形 → 内容浮起 + 字距拉开 + 另一侧变暗 */
|
||||
.panel-openclaw:hover ~ .divider + .content-openclaw,
|
||||
.panel-openclaw:hover + .content-openclaw {
|
||||
transform: scale(1.04);
|
||||
}
|
||||
.panel-hermes:hover ~ .content-hermes {
|
||||
transform: scale(1.04);
|
||||
}
|
||||
/* 悬停联动（用 :has 选择器，新浏览器都支持） */
|
||||
.stage:has(.panel-openclaw:hover) .content-hermes { opacity: 0.35 }
|
||||
.stage:has(.panel-hermes:hover) .content-openclaw { opacity: 0.35 }
|
||||
.stage:has(.panel-openclaw:hover) .panel-openclaw { filter: brightness(1.15) }
|
||||
.stage:has(.panel-hermes:hover) .panel-hermes { filter: brightness(0.97) }
|
||||
|
||||
/* —— 内容样式 —— */
|
||||
.eyebrow {
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.32em;
|
||||
text-transform: uppercase;
|
||||
opacity: 0.55;
|
||||
margin-bottom: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
.eyebrow::before {
|
||||
content: '';
|
||||
width: 32px;
|
||||
height: 1px;
|
||||
background: currentColor;
|
||||
opacity: 0.4;
|
||||
}
|
||||
.content-hermes .eyebrow { flex-direction: row-reverse }
|
||||
.content-hermes .eyebrow::before { display: none }
|
||||
.content-hermes .eyebrow::after {
|
||||
content: '';
|
||||
width: 32px;
|
||||
height: 1px;
|
||||
background: currentColor;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: clamp(80px, 12vw, 180px);
|
||||
font-weight: 200;
|
||||
letter-spacing: -0.06em;
|
||||
line-height: 0.9;
|
||||
margin-bottom: 24px;
|
||||
transition: letter-spacing 0.5s ease;
|
||||
}
|
||||
|
||||
.desc {
|
||||
font-size: 16px;
|
||||
line-height: 1.7;
|
||||
max-width: 380px;
|
||||
opacity: 0.7;
|
||||
font-weight: 300;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
.content-hermes .desc { margin-left: auto }
|
||||
|
||||
.meta {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.15em;
|
||||
text-transform: uppercase;
|
||||
opacity: 0.5;
|
||||
}
|
||||
.content-hermes .meta { justify-content: flex-end }
|
||||
|
||||
/* CTA 大箭头 */
|
||||
.cta {
|
||||
margin-top: 48px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
font-size: 14px;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
font-weight: 500;
|
||||
opacity: 0.85;
|
||||
transition: opacity 0.3s, gap 0.3s;
|
||||
}
|
||||
.stage:has(.panel-openclaw:hover) .content-openclaw .cta { opacity: 1; gap: 18px }
|
||||
.stage:has(.panel-hermes:hover) .content-hermes .cta { opacity: 1; gap: 18px }
|
||||
.cta-arrow {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
border: 1.5px solid currentColor;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* —— 选中展开动画 —— */
|
||||
.panel.expanding { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); z-index: 5 }
|
||||
.panel-openclaw.expanding, .panel-hermes.expanding { transition: clip-path 0.7s cubic-bezier(0.7, 0, 0.3, 1) }
|
||||
|
||||
.reveal {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-radius: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 20;
|
||||
pointer-events: none;
|
||||
transition: width 0.8s cubic-bezier(0.65, 0, 0.35, 1), height 0.8s cubic-bezier(0.65, 0, 0.35, 1);
|
||||
}
|
||||
.reveal.active { width: 250vmax; height: 250vmax }
|
||||
|
||||
.home-mock {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 30;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.5s ease;
|
||||
}
|
||||
.home-mock.show { opacity: 1; pointer-events: auto }
|
||||
.home-mock .ht { font-size: 36px; font-weight: 200; letter-spacing: -0.02em }
|
||||
.home-mock .hs { font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase; opacity: 0.55 }
|
||||
|
||||
.reset-hint {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
color: rgba(128, 128, 128, 0.6);
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.18em;
|
||||
text-transform: uppercase;
|
||||
z-index: 40;
|
||||
pointer-events: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="stage" id="stage">
|
||||
<div class="panel panel-openclaw" data-engine="openclaw"></div>
|
||||
<div class="panel panel-hermes" data-engine="hermes"></div>
|
||||
<div class="divider"></div>
|
||||
|
||||
<div class="content content-openclaw">
|
||||
<div class="eyebrow">01 · 通用助理</div>
|
||||
<div class="title">OpenClaw</div>
|
||||
<div class="desc">通用 AI 助理平台。模型、渠道、记忆、智能体，一个面板搞定全部。</div>
|
||||
<div class="meta">
|
||||
<span>Models</span>
|
||||
<span>Channels</span>
|
||||
<span>Agents</span>
|
||||
</div>
|
||||
<div class="cta">
|
||||
Choose
|
||||
<span class="cta-arrow">→</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content content-hermes">
|
||||
<div class="eyebrow">02 · Agent 工作流</div>
|
||||
<div class="title">Hermes</div>
|
||||
<div class="desc">Agent 工作流引擎。工具调用、Profile、Kanban、Skills，让 Agent 真正能干活。</div>
|
||||
<div class="meta">
|
||||
<span>Tools</span>
|
||||
<span>Skills</span>
|
||||
<span>Profiles</span>
|
||||
</div>
|
||||
<div class="cta">
|
||||
<span class="cta-arrow">→</span>
|
||||
Choose
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="reveal" id="reveal"></div>
|
||||
<div class="home-mock" id="home">
|
||||
<div class="ht" id="home-name"></div>
|
||||
<div class="hs">Loading workspace…</div>
|
||||
</div>
|
||||
<div class="reset-hint">Click a side · Press R to reset</div>
|
||||
|
||||
<script>
|
||||
const stage = document.getElementById('stage')
|
||||
const reveal = document.getElementById('reveal')
|
||||
const home = document.getElementById('home')
|
||||
const homeName = document.getElementById('home-name')
|
||||
|
||||
document.querySelectorAll('.panel').forEach(panel => {
|
||||
panel.addEventListener('click', () => {
|
||||
const engine = panel.dataset.engine
|
||||
const other = stage.querySelector(`.panel:not([data-engine="${engine}"])`)
|
||||
panel.classList.add('expanding')
|
||||
other.style.opacity = '0'
|
||||
stage.querySelectorAll('.content').forEach(c => c.style.opacity = '0')
|
||||
stage.querySelector('.divider').style.opacity = '0'
|
||||
setTimeout(() => {
|
||||
const isOpenclaw = engine === 'openclaw'
|
||||
reveal.style.background = isOpenclaw ? '#0a0a0a' : '#fff'
|
||||
home.style.background = isOpenclaw ? '#0a0a0a' : '#fff'
|
||||
home.style.color = isOpenclaw ? '#fff' : '#000'
|
||||
homeName.textContent = isOpenclaw ? 'OpenClaw' : 'Hermes'
|
||||
reveal.classList.add('active')
|
||||
}, 600)
|
||||
setTimeout(() => home.classList.add('show'), 1300)
|
||||
})
|
||||
})
|
||||
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key.toLowerCase() === 'r') location.reload()
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
366
docs/engine-select-mockups/v2-cinematic.html
Normal file
366
docs/engine-select-mockups/v2-cinematic.html
Normal file
@@ -0,0 +1,366 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>V2-B · Cinematic — 电影级双世界</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box }
|
||||
html, body { height: 100%; overflow: hidden; font-family: 'Inter', -apple-system, system-ui, sans-serif; -webkit-font-smoothing: antialiased; background: #000 }
|
||||
|
||||
.stage { position: fixed; inset: 0 }
|
||||
|
||||
/* 左上三角：深蓝紫世界 */
|
||||
.panel-openclaw {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
clip-path: polygon(0 0, 0 100%, 100% 0);
|
||||
cursor: pointer;
|
||||
transition: filter 0.6s ease;
|
||||
background:
|
||||
radial-gradient(circle at 25% 35%, rgba(120, 90, 255, 0.5) 0%, transparent 45%),
|
||||
radial-gradient(circle at 5% 95%, rgba(50, 30, 120, 0.6) 0%, transparent 50%),
|
||||
linear-gradient(135deg, #1a1340 0%, #0d0828 100%);
|
||||
}
|
||||
|
||||
/* 右下三角：暖橙琥珀世界 */
|
||||
.panel-hermes {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
clip-path: polygon(100% 0, 100% 100%, 0 100%);
|
||||
cursor: pointer;
|
||||
transition: filter 0.6s ease;
|
||||
background:
|
||||
radial-gradient(circle at 75% 65%, rgba(255, 130, 50, 0.45) 0%, transparent 45%),
|
||||
radial-gradient(circle at 95% 5%, rgba(120, 50, 20, 0.6) 0%, transparent 50%),
|
||||
linear-gradient(315deg, #2a1208 0%, #4a1f0a 100%);
|
||||
}
|
||||
|
||||
/* 中线发光 */
|
||||
.divider {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(45deg,
|
||||
transparent 49.5%,
|
||||
rgba(255, 255, 255, 0.3) 49.7%,
|
||||
rgba(255, 255, 255, 0.85) 49.95%,
|
||||
rgba(255, 255, 255, 1) 50%,
|
||||
rgba(255, 255, 255, 0.85) 50.05%,
|
||||
rgba(255, 255, 255, 0.3) 50.3%,
|
||||
transparent 50.5%
|
||||
);
|
||||
pointer-events: none;
|
||||
filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.4));
|
||||
transition: opacity 0.6s ease;
|
||||
}
|
||||
|
||||
/* 内容容器 — absolute 定位到三角形重心 */
|
||||
.content {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
color: #fff;
|
||||
transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease, filter 0.5s ease;
|
||||
z-index: 3;
|
||||
}
|
||||
.content-openclaw {
|
||||
top: 12%;
|
||||
left: 6%;
|
||||
text-align: left;
|
||||
max-width: 42vw;
|
||||
}
|
||||
.content-hermes {
|
||||
bottom: 12%;
|
||||
right: 6%;
|
||||
text-align: right;
|
||||
max-width: 42vw;
|
||||
}
|
||||
|
||||
/* —— hover 联动效果 —— */
|
||||
.stage:has(.panel-openclaw:hover) .content-hermes,
|
||||
.stage:has(.panel-hermes:hover) .content-openclaw {
|
||||
opacity: 0.3;
|
||||
filter: blur(2px);
|
||||
}
|
||||
.stage:has(.panel-openclaw:hover) .panel-hermes,
|
||||
.stage:has(.panel-hermes:hover) .panel-openclaw {
|
||||
filter: brightness(0.5) saturate(0.6);
|
||||
}
|
||||
.stage:has(.panel-openclaw:hover) .content-openclaw,
|
||||
.stage:has(.panel-hermes:hover) .content-hermes {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
/* 序号 */
|
||||
.number {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.4em;
|
||||
opacity: 0.5;
|
||||
margin-bottom: 32px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
}
|
||||
.number::before {
|
||||
content: '';
|
||||
width: 60px;
|
||||
height: 1px;
|
||||
background: currentColor;
|
||||
opacity: 0.5;
|
||||
}
|
||||
.content-hermes .number { flex-direction: row-reverse }
|
||||
.content-hermes .number::before { display: none }
|
||||
.content-hermes .number::after {
|
||||
content: '';
|
||||
width: 60px;
|
||||
height: 1px;
|
||||
background: currentColor;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* 巨大产品名 */
|
||||
.title {
|
||||
font-size: clamp(72px, 11vw, 168px);
|
||||
font-weight: 100;
|
||||
letter-spacing: -0.05em;
|
||||
line-height: 0.88;
|
||||
margin-bottom: 28px;
|
||||
background: linear-gradient(180deg, #fff 30%, rgba(255, 255, 255, 0.55) 100%);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
/* tagline 句子 */
|
||||
.tagline {
|
||||
font-size: clamp(18px, 1.6vw, 24px);
|
||||
line-height: 1.55;
|
||||
font-weight: 300;
|
||||
max-width: 460px;
|
||||
margin-bottom: 36px;
|
||||
opacity: 0.85;
|
||||
}
|
||||
.content-hermes .tagline { margin-left: auto }
|
||||
|
||||
/* 特性 chips */
|
||||
.chips {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-bottom: 48px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.content-hermes .chips { justify-content: flex-end }
|
||||
.chip {
|
||||
padding: 8px 16px;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.05em;
|
||||
border: 1px solid rgba(255, 255, 255, 0.18);
|
||||
border-radius: 100px;
|
||||
backdrop-filter: blur(10px);
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
|
||||
/* CTA */
|
||||
.cta {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 14px 32px 14px 24px;
|
||||
border-radius: 100px;
|
||||
border: 1.5px solid rgba(255, 255, 255, 0.4);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.18em;
|
||||
text-transform: uppercase;
|
||||
backdrop-filter: blur(10px);
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
transition: all 0.4s ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
.stage:has(.panel-openclaw:hover) .content-openclaw .cta,
|
||||
.stage:has(.panel-hermes:hover) .content-hermes .cta {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
color: #0a0a0a;
|
||||
border-color: rgba(255, 255, 255, 1);
|
||||
transform: translateX(8px);
|
||||
}
|
||||
.content-hermes .cta { flex-direction: row-reverse; padding: 14px 24px 14px 32px }
|
||||
.stage:has(.panel-hermes:hover) .content-hermes .cta { transform: translateX(-8px) }
|
||||
.cta .arrow {
|
||||
font-size: 16px;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
/* 装饰：右上角的小品牌字母（每个三角形对角的另一边的角） */
|
||||
.corner-mark {
|
||||
position: absolute;
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.4em;
|
||||
color: rgba(255, 255, 255, 0.35);
|
||||
text-transform: uppercase;
|
||||
pointer-events: none;
|
||||
z-index: 2;
|
||||
}
|
||||
.corner-tl { top: 32px; left: 36px }
|
||||
.corner-br { bottom: 32px; right: 36px }
|
||||
|
||||
/* 主标题 */
|
||||
.top-banner {
|
||||
position: fixed;
|
||||
top: 32px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
color: rgba(255, 255, 255, 0.45);
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.4em;
|
||||
text-transform: uppercase;
|
||||
z-index: 5;
|
||||
pointer-events: none;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* —— 选中展开动画 —— */
|
||||
.panel.expanding { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); z-index: 5 }
|
||||
.panel { transition: clip-path 0.8s cubic-bezier(0.7, 0, 0.3, 1), filter 0.5s ease }
|
||||
|
||||
.reveal {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-radius: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 20;
|
||||
pointer-events: none;
|
||||
transition: width 0.9s cubic-bezier(0.65, 0, 0.35, 1), height 0.9s cubic-bezier(0.65, 0, 0.35, 1);
|
||||
}
|
||||
.reveal.active { width: 260vmax; height: 260vmax }
|
||||
|
||||
.home-mock {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 30;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
color: #fff;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.6s ease;
|
||||
}
|
||||
.home-mock.show { opacity: 1; pointer-events: auto }
|
||||
.home-mock .ht {
|
||||
font-size: 56px;
|
||||
font-weight: 100;
|
||||
letter-spacing: -0.04em;
|
||||
background: linear-gradient(180deg, #fff, rgba(255, 255, 255, 0.6));
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
.home-mock .hs { font-size: 12px; letter-spacing: 0.4em; text-transform: uppercase; opacity: 0.5 }
|
||||
|
||||
.reset-hint {
|
||||
position: fixed;
|
||||
bottom: 24px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
color: rgba(255, 255, 255, 0.45);
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.2em;
|
||||
text-transform: uppercase;
|
||||
z-index: 40;
|
||||
pointer-events: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="stage" id="stage">
|
||||
<div class="panel panel-openclaw" data-engine="openclaw"></div>
|
||||
<div class="panel panel-hermes" data-engine="hermes"></div>
|
||||
<div class="divider"></div>
|
||||
|
||||
<div class="top-banner">— Choose your engine —</div>
|
||||
<div class="corner-mark corner-tl">CLAWPANEL · 2026</div>
|
||||
<div class="corner-mark corner-br">v0.15.3</div>
|
||||
|
||||
<div class="content content-openclaw">
|
||||
<div class="number">01</div>
|
||||
<div class="title">OpenClaw</div>
|
||||
<div class="tagline">通用 AI 助理平台。模型、渠道、记忆、智能体——一个面板搞定全部。</div>
|
||||
<div class="chips">
|
||||
<div class="chip">Models</div>
|
||||
<div class="chip">Channels</div>
|
||||
<div class="chip">Memory</div>
|
||||
<div class="chip">Agents</div>
|
||||
</div>
|
||||
<div class="cta">
|
||||
Enter OpenClaw
|
||||
<span class="arrow">→</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content content-hermes">
|
||||
<div class="number">02</div>
|
||||
<div class="title">Hermes</div>
|
||||
<div class="tagline">Agent 工作流引擎。工具调用、Profile、Kanban、Skills——让 AI 真正能干活。</div>
|
||||
<div class="chips">
|
||||
<div class="chip">Tools</div>
|
||||
<div class="chip">Skills</div>
|
||||
<div class="chip">Kanban</div>
|
||||
<div class="chip">Profiles</div>
|
||||
</div>
|
||||
<div class="cta">
|
||||
<span class="arrow">→</span>
|
||||
Enter Hermes
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="reveal" id="reveal"></div>
|
||||
<div class="home-mock" id="home">
|
||||
<div class="ht" id="home-name"></div>
|
||||
<div class="hs">Initializing workspace…</div>
|
||||
</div>
|
||||
<div class="reset-hint">Click a side · Press R to reset</div>
|
||||
|
||||
<script>
|
||||
const stage = document.getElementById('stage')
|
||||
const reveal = document.getElementById('reveal')
|
||||
const home = document.getElementById('home')
|
||||
const homeName = document.getElementById('home-name')
|
||||
|
||||
const colors = {
|
||||
openclaw: 'radial-gradient(circle at center, rgba(120, 90, 255, 0.4) 0%, #0d0828 70%)',
|
||||
hermes: 'radial-gradient(circle at center, rgba(255, 130, 50, 0.4) 0%, #2a1208 70%)',
|
||||
}
|
||||
|
||||
document.querySelectorAll('.panel').forEach(panel => {
|
||||
panel.addEventListener('click', () => {
|
||||
const engine = panel.dataset.engine
|
||||
const other = stage.querySelector(`.panel:not([data-engine="${engine}"])`)
|
||||
panel.classList.add('expanding')
|
||||
other.style.opacity = '0'
|
||||
stage.querySelectorAll('.content, .corner-mark, .top-banner').forEach(c => c.style.opacity = '0')
|
||||
stage.querySelector('.divider').style.opacity = '0'
|
||||
setTimeout(() => {
|
||||
reveal.style.background = colors[engine]
|
||||
home.style.background = colors[engine]
|
||||
homeName.textContent = engine === 'openclaw' ? 'OpenClaw' : 'Hermes'
|
||||
reveal.classList.add('active')
|
||||
}, 700)
|
||||
setTimeout(() => home.classList.add('show'), 1500)
|
||||
})
|
||||
})
|
||||
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key.toLowerCase() === 'r') location.reload()
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
423
docs/engine-select-mockups/v2-monolith.html
Normal file
423
docs/engine-select-mockups/v2-monolith.html
Normal file
@@ -0,0 +1,423 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>V2-C · Monolith — 巨碑感（Linear / Vercel 风）</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box }
|
||||
html, body { height: 100%; overflow: hidden; font-family: 'Inter', -apple-system, system-ui, sans-serif; background: #000; -webkit-font-smoothing: antialiased }
|
||||
|
||||
.stage { position: fixed; inset: 0 }
|
||||
|
||||
/* 左上三角：石墨黑 + 紫蓝 accent */
|
||||
.panel-openclaw {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
clip-path: polygon(0 0, 0 100%, 100% 0);
|
||||
cursor: pointer;
|
||||
transition: filter 0.6s ease;
|
||||
background: #0c0d12;
|
||||
}
|
||||
/* 微妙的网格纹 */
|
||||
.panel-openclaw::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image:
|
||||
linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
|
||||
background-size: 60px 60px;
|
||||
background-position: -1px -1px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* 右下三角：象牙白 + 黑色 accent */
|
||||
.panel-hermes {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
clip-path: polygon(100% 0, 100% 100%, 0 100%);
|
||||
cursor: pointer;
|
||||
transition: filter 0.6s ease;
|
||||
background: #f5f3ee;
|
||||
}
|
||||
.panel-hermes::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image:
|
||||
linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px);
|
||||
background-size: 60px 60px;
|
||||
background-position: -1px -1px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* 微妙发光（左上：紫蓝 / 右下：金棕） */
|
||||
.glow-openclaw, .glow-hermes {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.5s ease;
|
||||
}
|
||||
.glow-openclaw {
|
||||
top: -10%;
|
||||
left: -10%;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
background: radial-gradient(circle, rgba(110, 100, 255, 0.35) 0%, transparent 60%);
|
||||
filter: blur(40px);
|
||||
clip-path: polygon(0 0, 100% 0, 0 100%);
|
||||
}
|
||||
.glow-hermes {
|
||||
bottom: -10%;
|
||||
right: -10%;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
background: radial-gradient(circle, rgba(220, 130, 60, 0.25) 0%, transparent 60%);
|
||||
filter: blur(40px);
|
||||
clip-path: polygon(100% 100%, 0 100%, 100% 0);
|
||||
}
|
||||
|
||||
/* 中线（极细发光） */
|
||||
.divider {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(45deg, transparent calc(50% - 0.5px), rgba(180, 180, 180, 0.6) 50%, transparent calc(50% + 0.5px));
|
||||
pointer-events: none;
|
||||
transition: opacity 0.6s;
|
||||
}
|
||||
|
||||
/* 内容定位 */
|
||||
.content {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s, filter 0.5s;
|
||||
z-index: 3;
|
||||
}
|
||||
.content-openclaw {
|
||||
top: 11%;
|
||||
left: 6.5%;
|
||||
color: #fafafa;
|
||||
text-align: left;
|
||||
max-width: 44vw;
|
||||
}
|
||||
.content-hermes {
|
||||
bottom: 11%;
|
||||
right: 6.5%;
|
||||
color: #18171a;
|
||||
text-align: right;
|
||||
max-width: 44vw;
|
||||
}
|
||||
|
||||
/* hover 联动 */
|
||||
.stage:has(.panel-openclaw:hover) .panel-hermes { filter: brightness(0.94) saturate(0.85) }
|
||||
.stage:has(.panel-hermes:hover) .panel-openclaw { filter: brightness(0.6) }
|
||||
.stage:has(.panel-openclaw:hover) .content-hermes,
|
||||
.stage:has(.panel-hermes:hover) .content-openclaw {
|
||||
opacity: 0.25;
|
||||
filter: blur(2px);
|
||||
}
|
||||
.stage:has(.panel-openclaw:hover) .content-openclaw,
|
||||
.stage:has(.panel-hermes:hover) .content-hermes {
|
||||
transform: translateX(8px);
|
||||
}
|
||||
.content-hermes:hover { /* placeholder */ }
|
||||
.stage:has(.panel-hermes:hover) .content-hermes {
|
||||
transform: translateX(-8px);
|
||||
}
|
||||
|
||||
/* 顶部 logo + 数字 */
|
||||
.product-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
.content-hermes .product-row { flex-direction: row-reverse }
|
||||
.product-icon {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 12px;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
.content-hermes .product-icon {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
border: 1px solid rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
.product-icon svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.6 }
|
||||
|
||||
.product-tag {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.18em;
|
||||
text-transform: uppercase;
|
||||
opacity: 0.55;
|
||||
}
|
||||
|
||||
/* 巨字标题 */
|
||||
.title {
|
||||
font-size: clamp(80px, 13vw, 200px);
|
||||
font-weight: 200;
|
||||
letter-spacing: -0.055em;
|
||||
line-height: 0.92;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
/* 副标题 */
|
||||
.tagline {
|
||||
font-size: clamp(20px, 1.8vw, 28px);
|
||||
line-height: 1.4;
|
||||
font-weight: 300;
|
||||
max-width: 540px;
|
||||
margin-bottom: 32px;
|
||||
opacity: 0.78;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
.content-hermes .tagline { margin-left: auto }
|
||||
|
||||
/* 特性列表（垂直线 + 文字） */
|
||||
.feature-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
margin-bottom: 44px;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.content-hermes .feature-list { align-items: flex-end }
|
||||
.feature-list li {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
.content-hermes .feature-list li { flex-direction: row-reverse }
|
||||
.feature-list li::before {
|
||||
content: '';
|
||||
width: 16px;
|
||||
height: 1px;
|
||||
background: currentColor;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
/* CTA 按钮 */
|
||||
.cta {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 16px 28px;
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.04em;
|
||||
transition: all 0.35s ease;
|
||||
}
|
||||
.content-openclaw .cta {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
color: #fff;
|
||||
border: 1px solid rgba(255, 255, 255, 0.18);
|
||||
}
|
||||
.content-hermes .cta {
|
||||
background: rgba(0, 0, 0, 0.06);
|
||||
color: #18171a;
|
||||
border: 1px solid rgba(0, 0, 0, 0.18);
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
.stage:has(.panel-openclaw:hover) .content-openclaw .cta {
|
||||
background: #fff;
|
||||
color: #0a0a0a;
|
||||
border-color: #fff;
|
||||
}
|
||||
.stage:has(.panel-hermes:hover) .content-hermes .cta {
|
||||
background: #0a0a0a;
|
||||
color: #fff;
|
||||
border-color: #0a0a0a;
|
||||
}
|
||||
.cta .arrow {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
.stage:has(.panel-openclaw:hover) .content-openclaw .cta .arrow { transform: translateX(4px) }
|
||||
.stage:has(.panel-hermes:hover) .content-hermes .cta .arrow { transform: translateX(-4px) }
|
||||
|
||||
/* 角标 */
|
||||
.corner-mark {
|
||||
position: absolute;
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.32em;
|
||||
text-transform: uppercase;
|
||||
pointer-events: none;
|
||||
z-index: 4;
|
||||
font-weight: 500;
|
||||
}
|
||||
.corner-tl { top: 32px; left: 36px; color: rgba(255, 255, 255, 0.45) }
|
||||
.corner-br { bottom: 32px; right: 36px; color: rgba(0, 0, 0, 0.45) }
|
||||
.top-center {
|
||||
position: fixed;
|
||||
top: 32px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
color: rgba(180, 180, 180, 0.7);
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.4em;
|
||||
text-transform: uppercase;
|
||||
z-index: 5;
|
||||
pointer-events: none;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* —— 选中展开动画 —— */
|
||||
.panel.expanding { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); z-index: 5 }
|
||||
.panel { transition: clip-path 0.8s cubic-bezier(0.7, 0, 0.3, 1), filter 0.5s }
|
||||
|
||||
.reveal {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-radius: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 20;
|
||||
pointer-events: none;
|
||||
transition: width 0.9s cubic-bezier(0.65, 0, 0.35, 1), height 0.9s cubic-bezier(0.65, 0, 0.35, 1);
|
||||
}
|
||||
.reveal.active { width: 260vmax; height: 260vmax }
|
||||
|
||||
.home-mock {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 30;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.6s ease;
|
||||
}
|
||||
.home-mock.show { opacity: 1; pointer-events: auto }
|
||||
.home-mock .ht { font-size: 64px; font-weight: 200; letter-spacing: -0.04em }
|
||||
.home-mock .hs { font-size: 12px; letter-spacing: 0.45em; text-transform: uppercase; opacity: 0.5 }
|
||||
|
||||
.reset-hint {
|
||||
position: fixed;
|
||||
bottom: 24px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
color: rgba(150, 150, 150, 0.6);
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.2em;
|
||||
text-transform: uppercase;
|
||||
z-index: 40;
|
||||
pointer-events: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="stage" id="stage">
|
||||
<div class="panel panel-openclaw" data-engine="openclaw">
|
||||
<div class="glow-openclaw"></div>
|
||||
</div>
|
||||
<div class="panel panel-hermes" data-engine="hermes">
|
||||
<div class="glow-hermes"></div>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
|
||||
<div class="top-center">— Pick your path —</div>
|
||||
<div class="corner-mark corner-tl">CLAWPANEL</div>
|
||||
<div class="corner-mark corner-br">v0.15.3</div>
|
||||
|
||||
<div class="content content-openclaw">
|
||||
<div class="product-row">
|
||||
<div class="product-icon">
|
||||
<svg viewBox="0 0 24 24"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>
|
||||
</div>
|
||||
<div class="product-tag">01 · 通用助理</div>
|
||||
</div>
|
||||
<div class="title">OpenClaw</div>
|
||||
<div class="tagline">从模型到智能体，一站式打造你的 AI 工作台。</div>
|
||||
<ul class="feature-list">
|
||||
<li>多模型 / 多渠道并行管理</li>
|
||||
<li>持久化记忆 + 上下文工程</li>
|
||||
<li>无代码搭建智能体</li>
|
||||
</ul>
|
||||
<div class="cta">
|
||||
Enter OpenClaw
|
||||
<span class="arrow">→</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content content-hermes">
|
||||
<div class="product-row">
|
||||
<div class="product-icon">
|
||||
<svg viewBox="0 0 24 24"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg>
|
||||
</div>
|
||||
<div class="product-tag">Agent 工作流 · 02</div>
|
||||
</div>
|
||||
<div class="title">Hermes</div>
|
||||
<div class="tagline">让 Agent 真正能干活。工具调用、Profile、Kanban 一应俱全。</div>
|
||||
<ul class="feature-list">
|
||||
<li>原生工具调用 + Approval Flow</li>
|
||||
<li>多 Profile 隔离 + 多 Gateway</li>
|
||||
<li>内置 Kanban / Skills / OAuth</li>
|
||||
</ul>
|
||||
<div class="cta">
|
||||
<span class="arrow">→</span>
|
||||
Enter Hermes
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="reveal" id="reveal"></div>
|
||||
<div class="home-mock" id="home">
|
||||
<div class="ht" id="home-name"></div>
|
||||
<div class="hs">Initializing workspace</div>
|
||||
</div>
|
||||
<div class="reset-hint">Click a side · Press R to reset</div>
|
||||
|
||||
<script>
|
||||
const stage = document.getElementById('stage')
|
||||
const reveal = document.getElementById('reveal')
|
||||
const home = document.getElementById('home')
|
||||
const homeName = document.getElementById('home-name')
|
||||
|
||||
const colors = {
|
||||
openclaw: { bg: '#0c0d12', text: '#fff' },
|
||||
hermes: { bg: '#f5f3ee', text: '#18171a' },
|
||||
}
|
||||
|
||||
document.querySelectorAll('.panel').forEach(panel => {
|
||||
panel.addEventListener('click', () => {
|
||||
const engine = panel.dataset.engine
|
||||
const other = stage.querySelector(`.panel:not([data-engine="${engine}"])`)
|
||||
panel.classList.add('expanding')
|
||||
other.style.opacity = '0'
|
||||
stage.querySelectorAll('.content, .corner-mark, .top-center, .glow-openclaw, .glow-hermes').forEach(c => c.style.opacity = '0')
|
||||
stage.querySelector('.divider').style.opacity = '0'
|
||||
setTimeout(() => {
|
||||
reveal.style.background = colors[engine].bg
|
||||
home.style.background = colors[engine].bg
|
||||
home.style.color = colors[engine].text
|
||||
homeName.textContent = engine === 'openclaw' ? 'OpenClaw' : 'Hermes'
|
||||
reveal.classList.add('active')
|
||||
}, 700)
|
||||
setTimeout(() => home.classList.add('show'), 1500)
|
||||
})
|
||||
})
|
||||
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key.toLowerCase() === 'r') location.reload()
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user