mirror of
https://github.com/qingchencloud/clawpanel.git
synced 2026-05-30 04:40:18 +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
即本次接入的最终版本）。
304 lines
9.9 KiB
HTML
304 lines
9.9 KiB
HTML
<!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>
|