mirror of
https://github.com/qingchencloud/clawpanel.git
synced 2026-05-29 20:30:00 +08:00
6a0d87479c
替换原卡片网格为「左上 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
即本次接入的最终版本）。
151 lines
6.1 KiB
HTML
151 lines
6.1 KiB
HTML
<!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>
|