409 lines
22 KiB
HTML
409 lines
22 KiB
HTML
<!doctype html>
|
||
<html lang="zh-CN" data-theme="dark">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title>魂镜 · 人物页设计预览</title>
|
||
<link rel="stylesheet" href="tokens.css" />
|
||
<link rel="stylesheet" href="_base.css" />
|
||
<link rel="stylesheet" href="_chrome.css" />
|
||
<style>
|
||
/* ============================================================
|
||
* 铜镜鉴心 v2.1 — 人物页：铜镜名册（激活者镜面，余者镜背）
|
||
* ============================================================ */
|
||
|
||
body {
|
||
background: var(--ink);
|
||
color: var(--fg);
|
||
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", system-ui, sans-serif;
|
||
font-size: 15px;
|
||
line-height: 1.6;
|
||
-webkit-font-smoothing: antialiased;
|
||
}
|
||
|
||
/* ── 侧栏（与轨迹页同源，此处 active=人物）── */
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
/* ── 主区 ── */
|
||
|
||
.page-header .spacer { flex: 1; }
|
||
.page-meta { font-family: "JetBrains Mono", monospace; font-size: 12px; color: var(--fg-faint); }
|
||
.page-meta b { color: var(--gilt); font-weight: 600; font-family: "Songti SC", serif; font-size: 15px; }
|
||
|
||
.section-label .sub { font-size: 12px; letter-spacing: 0.04em; color: var(--fg-dim); opacity: 0.75; }
|
||
.section-label .glyph { color: var(--gilt); opacity: 0.8; }
|
||
|
||
/* ═══ 激活魂册（镜面材质 hero）═══ */
|
||
.soul-card {
|
||
position: relative;
|
||
overflow: hidden;
|
||
border: 1px solid var(--gilt-dim);
|
||
border-radius: 8px;
|
||
padding: 28px 30px;
|
||
background: var(--face-sheen), var(--surface);
|
||
box-shadow: inset 0 1px 0 var(--face-in-top), inset 0 -1px 0 var(--face-in-bot), var(--shadow);
|
||
}
|
||
/* 镜面静态光泽 */
|
||
.soul-card::before {
|
||
content: "";
|
||
position: absolute; inset: 0; z-index: 0; pointer-events: none;
|
||
background: linear-gradient(130deg, transparent 0%, transparent 28%, rgba(201, 162, 74, 0.025) 34%, rgba(255, 255, 255, 0.06) 40%, rgba(201, 162, 74, 0.025) 48%, transparent 55%, transparent 100%);
|
||
background-size: 200% 200%;
|
||
background-position: 35% 35%;
|
||
opacity: 0.42;
|
||
}
|
||
/* 铜面颗粒 */
|
||
.soul-card::after {
|
||
content: "";
|
||
position: absolute; inset: 0; z-index: 0; pointer-events: none;
|
||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='7'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
|
||
opacity: 0.018; mix-blend-mode: overlay;
|
||
}
|
||
.soul-card > * { position: relative; z-index: 1; }
|
||
|
||
.soul-top { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
|
||
.soul-mirror {
|
||
width: 96px; height: 96px; border-radius: 50%; flex-shrink: 0;
|
||
display: flex; align-items: center; justify-content: center;
|
||
border: 1.5px solid var(--patina-dim);
|
||
background: var(--patina-wash);
|
||
position: relative;
|
||
}
|
||
.soul-mirror .inner {
|
||
width: 70px; height: 70px; border-radius: 50%;
|
||
background: linear-gradient(160deg, var(--patina-bright), var(--patina));
|
||
color: var(--ink);
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-family: "Songti SC", serif; font-size: 34px; font-weight: 700;
|
||
}
|
||
.soul-mirror .halo {
|
||
position: absolute; inset: -6px; border-radius: 50%;
|
||
border: 1px dashed var(--gilt-dim);
|
||
opacity: 0.5;
|
||
}
|
||
.soul-id { flex: 1; min-width: 200px; }
|
||
.soul-name { font-family: "Songti SC", serif; font-size: 30px; font-weight: 700; color: var(--fg); letter-spacing: 0.06em; line-height: 1.2; }
|
||
.soul-realname { font-family: "JetBrains Mono", monospace; font-size: 12px; color: var(--fg-faint); margin-top: 4px; letter-spacing: 0.04em; }
|
||
.soul-mood { display: flex; align-items: center; gap: 7px; margin-top: 10px; font-size: 13px; color: var(--fg-dim); }
|
||
.pulse-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--patina); flex-shrink: 0; animation: pulse 2.6s cubic-bezier(0.16, 1, 0.3, 1) infinite; }
|
||
@keyframes pulse {
|
||
0% { box-shadow: 0 0 0 0 rgba(111, 163, 137, 0.5); }
|
||
70% { box-shadow: 0 0 0 6px transparent; }
|
||
100% { box-shadow: 0 0 0 0 transparent; }
|
||
}
|
||
.soul-tag {
|
||
font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.08em;
|
||
padding: 3px 10px; border-radius: 999px; border: 1px solid var(--patina-dim);
|
||
background: var(--patina-wash); color: var(--patina); white-space: nowrap;
|
||
}
|
||
|
||
/* 七阶生命周期站点 */
|
||
.lifecycle {
|
||
margin-top: 22px;
|
||
padding-top: 18px;
|
||
border-top: 1px solid var(--rule);
|
||
}
|
||
.lifecycle-label { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-faint); margin-bottom: 12px; }
|
||
.lifecycle-track { display: flex; align-items: center; gap: 0; }
|
||
.lc-station { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; min-width: 0; }
|
||
.lc-dot { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--fg-faint); background: transparent; }
|
||
.lc-name { font-family: "Songti SC", serif; font-size: 11.5px; color: var(--fg-faint); white-space: nowrap; }
|
||
.lc-station.reached .lc-dot { border-color: var(--patina-dim); background: var(--patina-dim); }
|
||
.lc-station.reached .lc-name { color: var(--fg-dim); }
|
||
.lc-station.current .lc-dot { border-color: var(--gilt); background: var(--gilt); box-shadow: 0 0 0 4px var(--gilt-faint); animation: node-pulse 2.6s cubic-bezier(0.16,1,0.3,1) infinite; }
|
||
.lc-station.current .lc-name { color: var(--gilt); font-weight: 600; }
|
||
@keyframes node-pulse {
|
||
0% { box-shadow: 0 0 0 4px var(--gilt-faint); }
|
||
70% { box-shadow: 0 0 0 8px transparent; }
|
||
100% { box-shadow: 0 0 0 4px var(--gilt-faint); }
|
||
}
|
||
.lc-link { flex: 0 0 0; height: 1.5px; align-self: flex-start; margin-top: 4.75px; background: var(--rule); width: 14px; }
|
||
.lc-link.reached { background: var(--patina-dim); }
|
||
|
||
/* 档案字段网格 + 关键指标 */
|
||
.soul-grid { margin-top: 22px; display: grid; grid-template-columns: 1fr 240px; gap: 26px; }
|
||
.soul-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; }
|
||
.field dt { font-family: "JetBrains Mono", monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-faint); }
|
||
.field dd { margin: 3px 0 0; font-size: 13.5px; color: var(--fg); }
|
||
.field dd.mono { font-family: "JetBrains Mono", monospace; font-size: 12.5px; }
|
||
.soul-bg { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rule); grid-column: 1 / -1; }
|
||
.soul-bg .lab { font-family: "JetBrains Mono", monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-faint); margin-bottom: 6px; }
|
||
.soul-bg p { font-family: "Songti SC", serif; font-size: 14px; line-height: 1.8; color: var(--fg-dim); margin: 0; }
|
||
|
||
.soul-stats { display: flex; flex-direction: column; gap: 10px; }
|
||
.soul-stat { background: var(--ink); border: 1px solid var(--rule); border-radius: 6px; padding: 12px 14px; }
|
||
.soul-stat .k { font-family: "JetBrains Mono", monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-faint); }
|
||
.soul-stat .v { font-family: "Songti SC", serif; font-size: 22px; font-weight: 600; color: var(--gilt); margin-top: 2px; }
|
||
.soul-stat .v small { font-size: 12px; font-weight: 400; color: var(--fg-dim); font-family: "JetBrains Mono", monospace; margin-left: 3px; }
|
||
|
||
/* ═══ 名册（镜背卡）═══ */
|
||
.roster-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
|
||
.char-card {
|
||
position: relative;
|
||
background: linear-gradient(180deg, color-mix(in srgb, var(--night-bronze) 70%, transparent), var(--night-bronze));
|
||
border: 1px solid var(--rule);
|
||
border-radius: 8px;
|
||
padding: 18px 18px 16px;
|
||
cursor: pointer;
|
||
transition: border-color 0.15s, transform 0.15s;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 12px;
|
||
}
|
||
.char-card:hover { border-color: var(--gilt-dim); transform: translateY(-2px); }
|
||
/* 激活卡 = 镜面（与 hero 同源材质，但更克制） */
|
||
.char-card.is-face {
|
||
border-color: var(--gilt-dim);
|
||
background: var(--face-sheen), var(--surface);
|
||
box-shadow: inset 0 1px 0 var(--face-in-top), inset 0 -1px 0 var(--face-in-bot);
|
||
}
|
||
.char-card.is-paused { opacity: 0.72; }
|
||
|
||
.cc-top { display: flex; align-items: center; gap: 12px; }
|
||
.cc-disc {
|
||
width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
|
||
display: flex; align-items: center; justify-content: center;
|
||
border: 1.5px solid var(--patina-dim);
|
||
background: var(--patina-wash);
|
||
}
|
||
.cc-disc .inner {
|
||
width: 32px; height: 32px; border-radius: 50%;
|
||
background: var(--patina-wash);
|
||
color: var(--patina);
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-family: "Songti SC", serif; font-size: 16px; font-weight: 700;
|
||
}
|
||
.char-card.is-face .cc-disc { border-color: var(--gilt); }
|
||
.char-card.is-face .cc-disc .inner { background: linear-gradient(160deg, var(--patina-bright), var(--patina)); color: var(--ink); }
|
||
.char-card.is-paused .cc-disc .inner { background: transparent; color: var(--fg-faint); }
|
||
|
||
.cc-name { font-family: "Songti SC", serif; font-size: 17px; font-weight: 600; color: var(--fg); letter-spacing: 0.04em; }
|
||
.cc-sub { font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--fg-faint); margin-top: 2px; }
|
||
|
||
.cc-status { margin-left: auto; font-family: "JetBrains Mono", monospace; font-size: 10.5px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--rule); color: var(--fg-dim); white-space: nowrap; }
|
||
.cc-status.live { color: var(--patina); border-color: var(--patina-dim); background: var(--patina-wash); }
|
||
.cc-status.face { color: var(--gilt); border-color: var(--gilt-dim); background: var(--gilt-faint); }
|
||
.cc-status.dormant { color: var(--fg-faint); }
|
||
|
||
/* 迷你七阶站点 */
|
||
.cc-lc { display: flex; align-items: center; gap: 3px; }
|
||
.cc-lc .seg { height: 4px; flex: 1; border-radius: 2px; background: var(--rule); }
|
||
.cc-lc .seg.reached { background: var(--patina-dim); }
|
||
.cc-lc .seg.current { background: linear-gradient(90deg, var(--gilt-dim), var(--gilt)); }
|
||
|
||
.cc-stats { display: flex; gap: 14px; padding-top: 10px; border-top: 1px solid var(--rule); }
|
||
.cc-stat { display: flex; flex-direction: column; }
|
||
.cc-stat .k { font-family: "JetBrains Mono", monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-faint); }
|
||
.cc-stat .v { font-family: "Songti SC", serif; font-size: 15px; font-weight: 600; color: var(--fg); }
|
||
|
||
@media (max-width: 1080px) {
|
||
.soul-grid { grid-template-columns: 1fr; }
|
||
.roster-grid { grid-template-columns: repeat(2, 1fr); }
|
||
}
|
||
@media (max-width: 768px) {
|
||
|
||
.roster-grid { grid-template-columns: 1fr; }
|
||
.soul-fields { grid-template-columns: 1fr; }
|
||
.lifecycle-track { overflow-x: auto; }
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="app-shell">
|
||
<!-- ════════ 侧栏 ════════ -->
|
||
<div class="sidebar-mount" data-active="人物"></div>
|
||
|
||
<!-- ════════ 主区 ════════ -->
|
||
<div class="main-area">
|
||
<div class="page-header">
|
||
<span class="page-title">人物</span>
|
||
<span class="page-sub">魂册</span>
|
||
<span class="spacer"></span>
|
||
<span class="page-meta">共 <b>5</b> 位 · 当行 <b style="color: var(--patina)">2</b></span>
|
||
<button class="btn-ghost" type="button">+ 新塑人物</button>
|
||
</div>
|
||
|
||
<div class="page-body">
|
||
<!-- 激活魂册（镜面 hero） -->
|
||
<div class="soul-card">
|
||
<div class="soul-top">
|
||
<div class="soul-mirror">
|
||
<span class="halo"></span>
|
||
<div class="inner">梧</div>
|
||
</div>
|
||
<div class="soul-id">
|
||
<div class="soul-name">青梧</div>
|
||
<div class="soul-realname">character_01H8KFM3…Q9D · qingwu</div>
|
||
<div class="soul-mood">
|
||
<span class="pulse-dot"></span>认识你第 41 日 · 沉静 · 探索你的偏好
|
||
</div>
|
||
</div>
|
||
<span class="soul-tag">当前当行</span>
|
||
</div>
|
||
|
||
<!-- 七阶生命周期 -->
|
||
<div class="lifecycle">
|
||
<div class="lifecycle-label">生辰七阶 · lifecycle</div>
|
||
<div class="lifecycle-track">
|
||
<div class="lc-station reached"><span class="lc-dot"></span><span class="lc-name">无极</span></div>
|
||
<span class="lc-link reached"></span>
|
||
<div class="lc-station reached"><span class="lc-dot"></span><span class="lc-name">立名</span></div>
|
||
<span class="lc-link reached"></span>
|
||
<div class="lc-station reached"><span class="lc-dot"></span><span class="lc-name">已设定</span></div>
|
||
<span class="lc-link reached"></span>
|
||
<div class="lc-station reached"><span class="lc-dot"></span><span class="lc-name">初识</span></div>
|
||
<span class="lc-link reached"></span>
|
||
<div class="lc-station current"><span class="lc-dot"></span><span class="lc-name">运行中</span></div>
|
||
<span class="lc-link"></span>
|
||
<div class="lc-station"><span class="lc-dot"></span><span class="lc-name">暂停</span></div>
|
||
<span class="lc-link"></span>
|
||
<div class="lc-station"><span class="lc-dot"></span><span class="lc-name">归档</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="soul-grid">
|
||
<div class="soul-fields">
|
||
<div class="field"><dt>语言</dt><dd>中文 · 宋韵</dd></div>
|
||
<div class="field"><dt>模型策略</dt><dd class="mono">default-chat</dd></div>
|
||
<div class="field"><dt>隐私等级</dt><dd class="mono">standard</dd></div>
|
||
<div class="field"><dt>当前心情</dt><dd>沉静 · 强度 42%</dd></div>
|
||
<div class="field"><dt>生辰</dt><dd>熙宁三年 · 寒露</dd></div>
|
||
<div class="field"><dt>表达风格</dt><dd>简练含蓄，少用惊叹</dd></div>
|
||
<div class="soul-bg">
|
||
<div class="lab">背景</div>
|
||
<p>出身旧族旁支，少时家道中落，养就沉静自持。善观人不轻断，言简而意周。与人相处不即不离，重长久之意，轻一时之快。</p>
|
||
</div>
|
||
</div>
|
||
<div class="soul-stats">
|
||
<div class="soul-stat"><div class="k">藏识</div><div class="v">86<small>条记忆</small></div></div>
|
||
<div class="soul-stat"><div class="k">人格</div><div class="v">v7<small>当前版本</small></div></div>
|
||
<div class="soul-stat"><div class="k">铭文</div><div class="v">142<small>通往来</small></div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 名册 -->
|
||
<section>
|
||
<div class="section-label"><span class="glyph">⟡</span> 全部人物 <span class="sub">铜镜名册</span></div>
|
||
<div class="roster-grid">
|
||
<!-- 激活（镜面） -->
|
||
<div class="char-card is-face">
|
||
<div class="cc-top">
|
||
<div class="cc-disc"><div class="inner">梧</div></div>
|
||
<div><div class="cc-name">青梧</div><div class="cc-sub">第 41 日</div></div>
|
||
<span class="cc-status face">当前</span>
|
||
</div>
|
||
<div class="cc-lc">
|
||
<span class="seg reached"></span><span class="seg reached"></span><span class="seg reached"></span><span class="seg reached"></span><span class="seg current"></span><span class="seg"></span><span class="seg"></span>
|
||
</div>
|
||
<div class="cc-stats">
|
||
<div class="cc-stat"><span class="k">藏识</span><span class="v">86</span></div>
|
||
<div class="cc-stat"><span class="k">人格</span><span class="v">v7</span></div>
|
||
<div class="cc-stat"><span class="k">铭文</span><span class="v">142</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 叩心枢（当行） -->
|
||
<div class="char-card">
|
||
<div class="cc-top">
|
||
<div class="cc-disc"><div class="inner">守</div></div>
|
||
<div><div class="cc-name">叩心枢</div><div class="cc-sub">主动守护 · 系统</div></div>
|
||
<span class="cc-status live">当行</span>
|
||
</div>
|
||
<div class="cc-lc">
|
||
<span class="seg reached"></span><span class="seg reached"></span><span class="seg reached"></span><span class="seg reached"></span><span class="seg current"></span><span class="seg"></span><span class="seg"></span>
|
||
</div>
|
||
<div class="cc-stats">
|
||
<div class="cc-stat"><span class="k">藏识</span><span class="v">318</span></div>
|
||
<div class="cc-stat"><span class="k">人格</span><span class="v">v4</span></div>
|
||
<div class="cc-stat"><span class="k">铭文</span><span class="v">27</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 云岚（初成） -->
|
||
<div class="char-card">
|
||
<div class="cc-top">
|
||
<div class="cc-disc"><div class="inner">岚</div></div>
|
||
<div><div class="cc-name">云岚</div><div class="cc-sub">第 12 日</div></div>
|
||
<span class="cc-status">初成</span>
|
||
</div>
|
||
<div class="cc-lc">
|
||
<span class="seg reached"></span><span class="seg reached"></span><span class="seg reached"></span><span class="seg reached"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span>
|
||
</div>
|
||
<div class="cc-stats">
|
||
<div class="cc-stat"><span class="k">藏识</span><span class="v">42</span></div>
|
||
<div class="cc-stat"><span class="k">人格</span><span class="v">v3</span></div>
|
||
<div class="cc-stat"><span class="k">铭文</span><span class="v">38</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 墨羽（种魂） -->
|
||
<div class="char-card">
|
||
<div class="cc-top">
|
||
<div class="cc-disc"><div class="inner">墨</div></div>
|
||
<div><div class="cc-name">墨羽</div><div class="cc-sub">第 3 日</div></div>
|
||
<span class="cc-status dormant">种魂</span>
|
||
</div>
|
||
<div class="cc-lc">
|
||
<span class="seg reached"></span><span class="seg reached"></span><span class="seg reached"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span>
|
||
</div>
|
||
<div class="cc-stats">
|
||
<div class="cc-stat"><span class="k">藏识</span><span class="v">12</span></div>
|
||
<div class="cc-stat"><span class="k">人格</span><span class="v">v1</span></div>
|
||
<div class="cc-stat"><span class="k">铭文</span><span class="v">6</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 泠音（暂息） -->
|
||
<div class="char-card is-paused">
|
||
<div class="cc-top">
|
||
<div class="cc-disc"><div class="inner">泠</div></div>
|
||
<div><div class="cc-name">泠音</div><div class="cc-sub">暂息 14 日</div></div>
|
||
<span class="cc-status dormant">暂息</span>
|
||
</div>
|
||
<div class="cc-lc">
|
||
<span class="seg reached"></span><span class="seg reached"></span><span class="seg reached"></span><span class="seg reached"></span><span class="seg reached"></span><span class="seg current"></span><span class="seg"></span>
|
||
</div>
|
||
<div class="cc-stats">
|
||
<div class="cc-stat"><span class="k">藏识</span><span class="v">203</span></div>
|
||
<div class="cc-stat"><span class="k">人格</span><span class="v">v12</span></div>
|
||
<div class="cc-stat"><span class="k">铭文</span><span class="v">411</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 新塑占位 -->
|
||
<div class="char-card" style="border-style: dashed; align-items: center; justify-content: center; min-height: 168px; gap: 8px; opacity: 0.6;">
|
||
<svg width="28" height="28" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" style="color: var(--fg-faint)"><path d="M8 3v10M3 8h10" /></svg>
|
||
<span class="serif" style="font-size: 14px; color: var(--fg-faint)">新塑一位</span>
|
||
<span class="mono" style="font-size: 11px; color: var(--fg-faint)">从模板或空白开始</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="_theme.js" defer></script>
|
||
|
||
</body>
|
||
</html>
|