Files
hunjing/frontend/design/time-preview.html
T
2026-08-21 16:00:13 +08:00

343 lines
23 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!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 — 时态页:日晷时辰盘 + 调制因子 + 时态事件流 + 纪念日
* 字段对齐 docs/domain/core-domains.md §5(TemporalSnapshot /
* ModulationFactors / time_anniversaries)与 contract-glossary.md §11.4。
* ============================================================ */
/* ── 侧栏(active=时态)── */
/* ── 主区 ── */
.char-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--patina); padding: 3px 11px 3px 4px; border: 1px solid var(--patina-dim); border-radius: 999px; background: var(--patina-wash); }
.char-pill .avatar-mini { width: 18px; height: 18px; border-radius: 50%; background: var(--patina); color: var(--ink); display: flex; align-items: center; justify-content: center; font-family: "Songti SC", serif; font-size: 11px; font-weight: 600; }
.page-header .spacer { flex: 1; }
.live-pill { display: inline-flex; align-items: center; gap: 6px; font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--patina); padding: 3px 10px; border: 1px solid var(--patina-dim); border-radius: 999px; background: var(--patina-wash); }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--patina); 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; } }
.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; }
/* ═══ 日晷时辰盘(签名)═══
十二时辰环形排列,晷针指向当前时辰(精确到时辰内的时刻比例)。 */
.sundial-region { display: flex; gap: 22px; align-items: stretch; }
.dial-card { position: relative; flex: 0 0 420px; overflow: hidden; border: 1px solid var(--gilt-dim); border-radius: 8px; 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); padding: 18px; display: flex; flex-direction: column; }
.dial-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; }
.dial-svg { position: relative; z-index: 1; width: 100%; height: auto; display: block; }
.dial-svg .ring-outer { fill: none; stroke: var(--rule); stroke-width: 1; }
.dial-svg .ring-inner { fill: none; stroke: var(--gilt-dim); stroke-width: 0.8; stroke-dasharray: 2 4; }
.dial-svg .tick { stroke: var(--fg-faint); stroke-width: 1; opacity: 0.5; }
.dial-svg .tick-major { stroke: var(--gilt-dim); stroke-width: 1.2; opacity: 0.8; }
.dial-svg .shichen { font-family: "Songti SC", serif; font-size: 16px; font-weight: 600; text-anchor: middle; dominant-baseline: central; fill: var(--fg-faint); }
.dial-svg .shichen.current { fill: var(--gilt); font-size: 22px; }
.dial-svg .shichen-hours { font-family: "JetBrains Mono", monospace; font-size: 7.5px; text-anchor: middle; fill: var(--fg-faint); opacity: 0.6; }
.dial-svg .gnomon { stroke: var(--gilt); stroke-width: 2.5; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(201,162,74,0.5)); }
.dial-svg .gnomon-tip { fill: var(--gilt); }
.dial-svg .center-bg { fill: var(--ink); stroke: var(--gilt-dim); stroke-width: 1; }
.dial-svg .center-time { font-family: "JetBrains Mono", monospace; font-size: 22px; font-weight: 300; text-anchor: middle; fill: var(--fg); letter-spacing: 0.06em; }
.dial-svg .center-shichen { font-family: "Songti SC", serif; font-size: 13px; font-weight: 600; text-anchor: middle; fill: var(--gilt); }
.dial-svg .center-period { font-family: -apple-system, sans-serif; font-size: 10px; text-anchor: middle; fill: var(--fg-dim); }
.dial-foot { position: relative; z-index: 1; margin-top: 12px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lunar-pill { font-family: "Songti SC", serif; font-size: 12.5px; color: var(--fg-dim); padding: 4px 12px; border: 1px solid var(--rule); border-radius: 999px; background: var(--surface); }
.festival-pill { font-size: 12px; color: var(--cinnabar); padding: 4px 12px; border: 1px solid var(--cinnabar-dim); border-radius: 999px; background: rgba(184,57,46,0.1); }
.term-pill { font-family: "Songti SC", serif; font-size: 12.5px; color: var(--patina); padding: 4px 12px; border: 1px solid var(--patina-dim); border-radius: 999px; background: var(--patina-wash); }
/* 调制因子 */
.factor-card { flex: 1; min-width: 0; border: 1px solid var(--rule); border-radius: 8px; background: var(--surface); padding: 18px 20px; display: flex; flex-direction: column; }
.factor-list { display: flex; flex-direction: column; gap: 9px; flex: 1; }
.factor { display: flex; align-items: center; gap: 10px; }
.factor .fk { font-family: "Songti SC", serif; font-size: 12.5px; color: var(--fg-dim); width: 78px; flex-shrink: 0; }
.factor .ftrack { flex: 1; height: 5px; border-radius: 3px; background: var(--rule); overflow: hidden; position: relative; }
.factor .ffill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; }
.factor .fv { font-family: "JetBrains Mono", monospace; font-size: 10.5px; width: 28px; text-align: right; flex-shrink: 0; }
.f-joy .ffill { background: linear-gradient(90deg, var(--gilt-dim), var(--gilt)); } .f-joy .fv { color: var(--gilt); }
.f-frag .ffill { background: linear-gradient(90deg, var(--gilt-dim), var(--cinnabar)); } .f-frag .fv { color: var(--cinnabar); opacity: 0.85; }
.f-reun .ffill { background: linear-gradient(90deg, var(--patina-dim), var(--patina)); } .f-reun .fv { color: var(--patina); }
.f-wknd .ffill { background: linear-gradient(90deg, var(--patina-dim), var(--patina-bright)); } .f-wknd .fv { color: var(--patina); }
.f-season .ffill { background: linear-gradient(90deg, var(--gilt-dim), var(--patina)); } .f-season .fv { color: var(--fg-dim); }
.f-period .ffill { background: linear-gradient(90deg, var(--gilt-dim), var(--gilt)); } .f-period .fv { color: var(--gilt); }
.f-care .ffill { background: linear-gradient(90deg, var(--patina-dim), var(--cinnabar)); } .f-care .fv { color: var(--cinnabar); opacity: 0.85; }
.care-note { margin-top: 14px; padding: 10px 12px; border-left: 2px solid var(--cinnabar-dim); background: rgba(184,57,46,0.06); border-radius: 0 4px 4px 0; font-size: 12px; color: var(--fg-dim); line-height: 1.55; }
.care-note b { font-family: "Songti SC", serif; color: var(--cinnabar); font-weight: 600; }
/* snapshot 四格 */
.snap-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.snap-card { border: 1px solid var(--rule); border-radius: 7px; background: var(--surface); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.snap-card .k { font-family: "JetBrains Mono", monospace; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-faint); }
.snap-card .v { font-family: "Songti SC", serif; font-size: 19px; font-weight: 600; color: var(--fg); }
.snap-card .v small { font-size: 11px; font-weight: 400; color: var(--fg-dim); font-family: "JetBrains Mono", monospace; margin-left: 4px; }
.snap-card .sub { font-size: 11.5px; color: var(--fg-faint); }
.snap-card.milestone { border-color: var(--gilt-dim); background: var(--gilt-faint); }
.snap-card.milestone .v { color: var(--gilt); }
/* 时态事件流 + 纪念日 */
.lower-region { display: flex; gap: 20px; align-items: flex-start; }
.event-main { flex: 1; min-width: 0; }
.anniv-rail { width: 320px; flex-shrink: 0; }
.ev-list { display: flex; flex-direction: column; gap: 8px; }
.ev { display: flex; align-items: flex-start; gap: 10px; padding: 10px 13px; border-radius: 5px; background: var(--patina-wash); border: 1px solid var(--rule); font-size: 12.5px; line-height: 1.5; }
.ev.care { background: rgba(184,57,46,0.08); border-color: var(--cinnabar-dim); }
.ev.sentiment { background: var(--gilt-faint); border-color: var(--gilt-dim); }
.ev.future { background: transparent; border-style: dashed; }
.ev-tag { font-family: "JetBrains Mono", monospace; font-size: 10.5px; color: var(--patina); flex-shrink: 0; padding-top: 1px; white-space: nowrap; }
.ev.care .ev-tag { color: var(--cinnabar); }
.ev.sentiment .ev-tag { color: var(--gilt); }
.ev.future .ev-tag { color: var(--fg-faint); }
.ev-body { color: var(--fg-dim); min-width: 0; }
.ev-body .em { color: var(--fg); font-style: normal; }
.ev-time { font-family: "JetBrains Mono", monospace; font-size: 10.5px; color: var(--fg-faint); margin-left: auto; padding-top: 1px; white-space: nowrap; flex-shrink: 0; }
/* 纪念日 */
.anniv-card { background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; padding: 16px 18px; }
.anniv-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.anniv-head h3 { font-family: "Songti SC", serif; font-size: 14px; font-weight: 600; color: var(--fg); margin: 0; }
.anniv-add { font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--patina); padding: 3px 10px; border: 1px solid var(--patina-dim); border-radius: 5px; background: var(--patina-wash); cursor: pointer; }
.anniv-list { display: flex; flex-direction: column; gap: 8px; }
.anniv-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 5px; background: var(--ink); border: 1px solid var(--rule); }
.anniv-row .seal { font-family: "Songti SC", serif; font-size: 13px; color: var(--gilt); flex-shrink: 0; width: 40px; text-align: center; }
.anniv-row .info { flex: 1; min-width: 0; }
.anniv-row .name { font-size: 12.5px; color: var(--fg); }
.anniv-row .meta { font-family: "JetBrains Mono", monospace; font-size: 10px; color: var(--fg-faint); margin-top: 1px; }
.anniv-row .countdown { font-family: "Songti SC", serif; font-size: 13px; color: var(--patina); white-space: nowrap; }
.anniv-row .countdown.soon { color: var(--cinnabar); }
.kind-tag { font-family: "JetBrains Mono", monospace; font-size: 9.5px; padding: 2px 7px; border-radius: 3px; border: 1px solid var(--rule); color: var(--fg-faint); white-space: nowrap; }
.kind-tag.birthday { color: var(--cinnabar); border-color: var(--cinnabar-dim); background: rgba(184,57,46,0.08); }
.kind-tag.anniversary { color: var(--gilt); border-color: var(--gilt-dim); background: var(--gilt-faint); }
@media (max-width: 1080px) { .sundial-region { flex-direction: column; } .dial-card { flex: 1; } .lower-region { flex-direction: column; } .anniv-rail { width: 100%; } }
@media (max-width: 900px) { .snap-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { .sidebar-wrap { display: none; } .page-body { padding: 18px 16px 40px; } }
</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="char-pill"><span class="avatar-mini">梧</span>青梧</span>
<span class="spacer"></span>
<span class="live-pill"><span class="live-dot"></span>辰光实时</span>
</div>
<div class="page-body">
<!-- 日晷时辰盘 + 调制因子 -->
<div class="sundial-region">
<div class="dial-card">
<svg class="dial-svg" viewBox="0 0 400 400" role="img" aria-label="十二时辰日晷,当前申时">
<!-- 外环装饰 -->
<circle class="ring-outer" cx="200" cy="200" r="178" />
<circle class="ring-outer" cx="200" cy="200" r="150" opacity="0.5" />
<circle class="ring-inner" cx="200" cy="200" r="118" />
<!-- 十二刻度(主刻度在时辰位)-->
<!-- 时辰字 + 24时对应。当前=申(15–17),16:08 → 晷针指向申位偏 57% -->
<!-- 子 -->
<line class="tick-major" x1="200" y1="150" x2="200" y2="160" />
<text class="shichen" x="200" y="56">子</text>
<text class="shichen-hours" x="200" y="76">23–01</text>
<!-- 丑 -->
<text class="shichen" x="283" y="78">丑</text>
<text class="shichen-hours" x="293" y="96">01–03</text>
<!-- 寅 -->
<text class="shichen" x="336" y="131">寅</text>
<text class="shichen-hours" x="322" y="146">03–05</text>
<!-- 卯 -->
<text class="shichen" x="352" y="200">卯</text>
<text class="shichen-hours" x="338" y="200">05–07</text>
<!-- 辰 -->
<text class="shichen" x="336" y="269">辰</text>
<text class="shichen-hours" x="322" y="258">07–09</text>
<!-- 巳 -->
<text class="shichen" x="283" y="322">巳</text>
<text class="shichen-hours" x="293" y="304">09–11</text>
<!-- 午 -->
<line class="tick-major" x1="200" y1="240" x2="200" y2="250" />
<text class="shichen" x="200" y="344">午</text>
<text class="shichen-hours" x="200" y="328">11–13</text>
<!-- 未 -->
<text class="shichen" x="117" y="322">未</text>
<text class="shichen-hours" x="107" y="304">13–15</text>
<!-- 申(当前)-->
<text class="shichen current" x="64" y="269">申</text>
<text class="shichen-hours" x="78" y="258">15–17</text>
<!-- 酉 -->
<text class="shichen" x="48" y="200">酉</text>
<text class="shichen-hours" x="62" y="200">17–19</text>
<!-- 戌 -->
<text class="shichen" x="64" y="131">戌</text>
<text class="shichen-hours" x="78" y="146">19–21</text>
<!-- 亥 -->
<text class="shichen" x="117" y="78">亥</text>
<text class="shichen-hours" x="107" y="96">21–23</text>
<!-- 晷针:圆心 (200,200) → 16:08 在申时的精确位置 ≈ (88, 226) -->
<line class="gnomon" x1="200" y1="200" x2="92" y2="232" />
<circle class="gnomon-tip" cx="92" cy="232" r="4" />
<!-- 中心时钟 -->
<circle class="center-bg" cx="200" cy="200" r="74" />
<text class="center-time" x="200" y="196">16:08:32</text>
<text class="center-shichen" x="200" y="219">申时 · 周六</text>
<text class="center-period" x="200" y="236">下午 · 夏</text>
</svg>
<div class="dial-foot">
<span class="lunar-pill">农历 六月初四</span>
<span class="term-pill">小暑 · 第 5 日</span>
<span class="festival-pill">无节日</span>
</div>
</div>
<div class="factor-card">
<div class="section-label" style="margin-bottom: 14px"><span class="glyph">⟡</span> 调制因子 <span class="sub">ModulationFactors · 时间对情绪与检索的影响</span></div>
<div class="factor-list">
<div class="factor f-joy"><span class="fk">节日喜庆</span><div class="ftrack"><div class="ffill" style="width:5%"></div></div><span class="fv">0.05</span></div>
<div class="factor f-frag"><span class="fk">深夜脆弱</span><div class="ftrack"><div class="ffill" style="width:8%"></div></div><span class="fv">0.08</span></div>
<div class="factor f-reun"><span class="fk">重逢强度</span><div class="ftrack"><div class="ffill" style="width:10%"></div></div><span class="fv">0.10</span></div>
<div class="factor f-wknd"><span class="fk">周末放松</span><div class="ftrack"><div class="ffill" style="width:85%"></div></div><span class="fv">0.85</span></div>
<div class="factor f-season"><span class="fk">季节共鸣</span><div class="ftrack"><div class="ffill" style="width:45%"></div></div><span class="fv">0.45</span></div>
<div class="factor f-period"><span class="fk">同期共振</span><div class="ftrack"><div class="ffill" style="width:62%"></div></div><span class="fv">0.62</span></div>
<div class="factor f-care"><span class="fk">关怀倾向</span><div class="ftrack"><div class="ffill" style="width:12%"></div></div><span class="fv">0.12</span></div>
</div>
<div class="care-note">
<b>昨夜 23:48</b> 曾触发 <code style="font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--gilt)">time.user_care</code>(late_night · care_suggest 0.72)--已收敛回应,未主动打扰。此刻为下午,关怀倾向回落。
</div>
</div>
</div>
<!-- snapshot 四格 -->
<div class="snap-grid">
<div class="snap-card">
<div class="k">相识</div>
<div class="v">41<small>日</small></div>
<div class="sub">自 05-31 初识</div>
</div>
<div class="snap-card">
<div class="k">离线</div>
<div class="v">12<small>分钟</small></div>
<div class="sub">fresh · 刚刚活跃</div>
</div>
<div class="snap-card milestone">
<div class="k">下一个纪念日</div>
<div class="v">324<small>天后</small></div>
<div class="sub">我们的相遇日 · 周年</div>
</div>
<div class="snap-card">
<div class="k">时差</div>
<div class="v">0<small>分钟</small></div>
<div class="sub">同驻 Asia/Shanghai</div>
</div>
</div>
<!-- 时态事件流 + 纪念日 -->
<div class="lower-region">
<div class="event-main">
<h3 style="font-family:&quot;Songti SC&quot;,serif;font-size:14px;font-weight:600;color:var(--fg);margin-bottom:14px">时态事件 <span style="font-size:12px;font-weight:400;color:var(--fg-dim);font-family:&quot;JetBrains Mono&quot;,monospace;margin-left:6px">time.* · 节律切换、感慨与关怀的触发留痕</span></h3>
<div class="ev-list">
<div class="ev">
<span class="ev-tag">time.user_care</span>
<span class="ev-body">深夜关怀触发 · <span class="em">late_night</span> · 用户 23:48 仍在对话,care_suggest 0.72,已收敛回应。</span>
<span class="ev-time">昨 23:48</span>
</div>
<div class="ev sentiment">
<span class="ev-tag">time.sentiment</span>
<span class="ev-body">时长感慨 · <span class="em">duration_node</span> · 认识满 40 之日,灵核情绪转 <em style="font-style:normal;color:var(--gilt)">wistful 怅然</em>。</span>
<span class="ev-time">07-10</span>
</div>
<div class="ev">
<span class="ev-tag">time.solar_term</span>
<span class="ev-body">节气切换 · <span class="em">小暑</span> · 距下一节气(大暑)9 日,season_resonance 上调。</span>
<span class="ev-time">07-07</span>
</div>
<div class="ev future">
<span class="ev-tag">time.milestone_hit</span>
<span class="ev-body">未达 · <span class="em">我们的相遇日</span> 周年,预计 2027-05-31 命中,将触发跨枢唤醒。</span>
<span class="ev-time">324 天后</span>
</div>
<div class="ev future">
<span class="ev-tag">time.reunion</span>
<span class="ev-body">未达 · 离线超 3 日重逢时触发,<span class="em">reunion_impact</span> 档位,携久别前记忆线索。</span>
<span class="ev-time">-</span>
</div>
</div>
</div>
<div class="anniv-rail">
<div class="anniv-card">
<div class="anniv-head">
<h3>纪念日 <span style="font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--fg-faint);font-weight:400">time_anniversaries</span></h3>
<button class="anniv-add" type="button">+ 新增</button>
</div>
<div class="anniv-list">
<div class="anniv-row">
<span class="seal">缘</span>
<div class="info">
<div class="name">我们的相遇日</div>
<div class="meta">solar · 每年 · auto · relationship</div>
</div>
<span class="countdown">324 天</span>
</div>
<div class="anniv-row">
<span class="seal">辰</span>
<div class="info">
<div class="name">你的生日</div>
<div class="meta">lunar · 每年 · manual · user</div>
</div>
<span class="countdown soon">待补全</span>
</div>
<div class="anniv-row">
<span class="seal">夏</span>
<div class="info">
<div class="name">入夏节点</div>
<div class="meta">solar · 不重复 · manual · custom</div>
</div>
<span class="kind-tag">milestone</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="_theme.js" defer></script>
</body>
</html>