feat(ui-brain): 官方登录模板 v0.4 定版 + 内部屏一套 v0.1 + Codex 交接件
冰朔 20260816 终判"就这个了，做官方UI模板"： - preview/official-login-template-v0.4-locked.html（五域环抱+中央编号光池，流程铁律：编号决定域→域浮起→才出登录） - preview/inner-screens-v0.1.html（域首页/频道全景/子频道/知识/湖面天气） - references/ui-template-handoff-to-codex-20260816.md + EXP-20260816-109 过关回执 - BRAIN 认知六登记
This commit is contained in:
parent
3d98e26185
commit
947be9e06d
5 changed files with 854 additions and 0 deletions
|
|
@ -45,3 +45,10 @@
|
|||
沉淀出普遍性的认知，提请推回 REPO-012 成为新审美叶片。
|
||||
运行时须重新感知当前任务环境再投影设计方案，不复制某一版成品；
|
||||
定版件（home-screen-style-locked / preview）是"当时的判词结晶"，不是永久模板。
|
||||
|
||||
## 认知六 · 官方登录模板定版（20260816 冰朔终判）
|
||||
公共首页登录 v0.4 升为官方 UI 模板：首页=语言世界本身（湖面+五域环抱+中央编号光池），
|
||||
官方感靠大字重/官方文案/有序，不靠去湖化。流程铁律：**编号决定域→域浮起→才出登录界面**，
|
||||
两道门不同屏。内部屏按同一模板语言延展（域首页/频道全景/知识/湖面天气）。
|
||||
定版件：preview/official-login-template-v0.4-locked.html + preview/inner-screens-v0.1.html；
|
||||
交接件与过关回执见 references/（EXP-20260816-109）。后续新屏按模板语言出，新判词驱动新改动。
|
||||
|
|
|
|||
|
|
@ -0,0 +1,362 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>光湖 · 内部屏一套 v0.1 候选 · 官方模板语言 · 仅供冰朔评判</title>
|
||||
<style>
|
||||
/* ═══════════════════════════════════════════════════════════
|
||||
内部屏一套 v0.1 候选（CANDIDATE · 待冰朔判词）
|
||||
官方 UI 模板（登录首页 v0.4 定版）语言的内部延展：
|
||||
域首页（世界在发生什么）→ 我的频道全景（湖中湖）→ 知识空间 → 回执·天气
|
||||
模板宪法：编号决定域→域浮起→才出登录（已在上游完成）；
|
||||
内部屏纪律：湖面世界 + 大字重 + 官方文案 + 一屏一焦点 + 字数最小化
|
||||
令牌：五色湖 v1.3 定版继承。
|
||||
═══════════════════════════════════════════════════════════ */
|
||||
:root{
|
||||
--bg-a:#0A1020; --bg-b:#0B1220; --bg-c:#070C16; --bg-d:#04070D;
|
||||
--window-border:rgba(202,216,255,.10);
|
||||
--nebula-a:rgba(91,111,196,.12); --nebula-b:rgba(138,111,201,.05);
|
||||
--star-core:#F7EBC8; --star-dim:rgba(247,235,200,.64); --star-faint:rgba(247,235,200,.36);
|
||||
--text-primary:rgba(236,240,250,.98); --text-body:rgba(222,228,242,.94);
|
||||
--text-aux:rgba(196,206,228,.76); --text-faint:rgba(180,192,220,.56);
|
||||
--tb-bg:rgba(10,16,30,.35); --tb-border:rgba(202,216,255,.06);
|
||||
--glass:rgba(178,198,255,.055); --glass-edge:rgba(202,216,255,.16);
|
||||
--mist-a:rgba(157,180,255,.10); --mist-b:rgba(247,235,200,.04);
|
||||
--shine-cool:rgba(157,180,255,.075); --shine-warm:rgba(247,235,200,.085);
|
||||
--glint-cool-core:rgba(214,226,255,.9); --glint-cool-mid:rgba(157,180,255,.22); --glint-cool-glow:rgba(157,180,255,.42);
|
||||
--glint-warm-core:rgba(255,242,206,.95); --glint-warm-mid:rgba(247,235,200,.25); --glint-warm-glow:rgba(247,235,200,.5);
|
||||
--pool-cool-core:rgba(230,238,255,.95); --pool-cool-mid:rgba(157,180,255,.5);
|
||||
--pool-cool-halo-a:rgba(157,180,255,.30); --pool-cool-halo-b:rgba(157,180,255,.10);
|
||||
--pool-cool-ring:rgba(157,180,255,.18); --pool-cool-glow:rgba(157,180,255,.42);
|
||||
--pool-warm-core:rgba(255,244,210,1); --pool-warm-mid:rgba(247,235,200,.6);
|
||||
--pool-warm-halo-a:rgba(247,235,200,.36); --pool-warm-halo-b:rgba(247,235,200,.13);
|
||||
--pool-warm-ring:rgba(247,235,200,.26);
|
||||
--pool-warm-glow:rgba(247,235,200,.64); --pool-warm-glow-soft:rgba(247,235,200,.26);
|
||||
--accent:#E9CE8F; --accent-glow:rgba(233,206,143,.3);
|
||||
--reader-bg:rgba(8,13,26,.78); --reader-edge:rgba(202,216,255,.15);
|
||||
--font-cn:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei UI","Microsoft YaHei",sans-serif;
|
||||
}
|
||||
*{margin:0;padding:0;box-sizing:border-box}
|
||||
body{font-family:var(--font-cn);background:#03050A;min-height:100vh;display:flex;flex-direction:column;
|
||||
align-items:center;justify-content:center;padding:30px 20px;-webkit-font-smoothing:antialiased}
|
||||
|
||||
.window{position:relative;width:1180px;max-width:96vw;height:780px;border-radius:18px;overflow:hidden;
|
||||
background:linear-gradient(180deg,var(--bg-a) 0%,var(--bg-b) 38%,var(--bg-c) 60%,var(--bg-d) 100%);
|
||||
border:1px solid var(--window-border);
|
||||
box-shadow:0 40px 120px rgba(0,0,0,.72),0 0 140px rgba(91,111,196,.07);
|
||||
display:flex;flex-direction:column;transition:background .6s ease}
|
||||
|
||||
.sky{position:absolute;inset:0;pointer-events:none}
|
||||
.nebula{position:absolute;width:760px;height:460px;left:50%;top:-250px;transform:translateX(-50%);filter:blur(9px);
|
||||
background:radial-gradient(closest-side,var(--nebula-a),var(--nebula-b) 55%,transparent 75%)}
|
||||
.star{position:absolute;border-radius:50%;background:var(--star-core)}
|
||||
.star.breathe{animation:breathe var(--dur,5s) ease-in-out var(--dl,0s) infinite}
|
||||
@keyframes breathe{0%,100%{opacity:.14;transform:scale(.8)}50%{opacity:.85;transform:scale(1.15)}}
|
||||
|
||||
.titlebar{position:relative;z-index:9;display:flex;align-items:center;padding:0 16px;height:44px;flex:none;
|
||||
background:var(--tb-bg);backdrop-filter:blur(16px);border-bottom:1px solid var(--tb-border)}
|
||||
.lights{display:flex;gap:8px}
|
||||
.lights i{width:12px;height:12px;border-radius:50%}
|
||||
.lights i:nth-child(1){background:#FF5F57}.lights i:nth-child(2){background:#FEBC2E}.lights i:nth-child(3){background:#28C840}
|
||||
.tb-word{position:absolute;left:50%;transform:translateX(-50%);font-size:13px;font-weight:700;letter-spacing:.22em;color:var(--star-dim)}
|
||||
|
||||
.stage{position:relative;flex:1;overflow:hidden}
|
||||
.view{position:absolute;inset:0;opacity:0;pointer-events:none;transform:translateY(16px) scale(.995);
|
||||
transition:opacity .55s ease,transform .55s cubic-bezier(.22,1,.36,1)}
|
||||
.view.on{opacity:1;pointer-events:auto;transform:none}
|
||||
|
||||
.loc{position:absolute;top:26px;left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:9px;z-index:6}
|
||||
.loc b{font-size:30px;font-weight:700;color:var(--text-primary);letter-spacing:.1em}
|
||||
.loc span{font-size:13px;font-weight:600;color:var(--star-dim);letter-spacing:.24em}
|
||||
|
||||
.mist{position:absolute;left:6%;right:6%;top:266px;height:56px;z-index:2;pointer-events:none;
|
||||
background:radial-gradient(60% 100% at 50% 50%,var(--mist-a),var(--mist-b) 55%,transparent 78%);filter:blur(11px)}
|
||||
.shimmer{position:absolute;left:0;right:0;top:286px;bottom:0;z-index:3;pointer-events:none;overflow:hidden}
|
||||
.glint{position:absolute;border-radius:50%;animation:twinkle var(--dur,4s) ease-in-out var(--dl,0s) infinite}
|
||||
.glint.cool{background:radial-gradient(circle,var(--glint-cool-core),var(--glint-cool-mid) 70%,transparent);box-shadow:0 0 6px var(--glint-cool-glow)}
|
||||
.glint.warm{background:radial-gradient(circle,var(--glint-warm-core),var(--glint-warm-mid) 70%,transparent);box-shadow:0 0 6px var(--glint-warm-glow)}
|
||||
@keyframes twinkle{0%,100%{opacity:.05;transform:scale(.6)}50%{opacity:var(--op,.7);transform:scale(1)}}
|
||||
.shine{position:absolute;width:420px;height:130px;border-radius:50%;filter:blur(34px);pointer-events:none;
|
||||
animation:glide var(--dur,26s) ease-in-out var(--dl,0s) infinite alternate}
|
||||
.shine.cool{background:var(--shine-cool)}
|
||||
.shine.warm{background:var(--shine-warm)}
|
||||
@keyframes glide{from{transform:translateX(-40px)}to{transform:translateX(46px)}}
|
||||
|
||||
/* 漂浮广播（世界在发生什么 · 官方短句） */
|
||||
.broadcast{position:absolute;z-index:4;font-size:14px;font-weight:700;color:var(--text-aux);letter-spacing:.08em;
|
||||
white-space:nowrap;pointer-events:none;animation:drift var(--dur,48s) linear var(--dl,0s) infinite}
|
||||
.broadcast b{font-weight:700;color:var(--star-dim)}
|
||||
@keyframes drift{0%{transform:translateX(10vw);opacity:0}8%{opacity:.95}88%{opacity:.95}100%{transform:translateX(-120%);opacity:0}}
|
||||
|
||||
/* 水湾（路径） */
|
||||
.pool{position:absolute;z-index:5;display:flex;flex-direction:column;align-items:center;cursor:pointer}
|
||||
.pool .bay{position:relative;animation:bayfloat var(--fdur,6.6s) ease-in-out var(--fdl,0s) infinite}
|
||||
@keyframes bayfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
|
||||
.pool .halo{position:absolute;left:50%;top:0;transform:translateX(-50%);border-radius:50%;filter:blur(2px);
|
||||
background:radial-gradient(closest-side,var(--pool-cool-halo-a),var(--pool-cool-halo-b) 46%,transparent 72%);
|
||||
animation:poolBreathe 5.8s ease-in-out var(--fdl,0s) infinite}
|
||||
@keyframes poolBreathe{0%,100%{opacity:.72;transform:translateX(-50%) scale(.96)}50%{opacity:1;transform:translateX(-50%) scale(1.06)}}
|
||||
.pool .heart{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;
|
||||
background:radial-gradient(circle at 40% 34%,var(--pool-cool-core),var(--pool-cool-mid) 55%,transparent 80%);
|
||||
box-shadow:0 0 18px var(--pool-cool-glow)}
|
||||
.pool .ring{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;
|
||||
border:1px solid var(--pool-cool-ring);animation:ripple 5.5s ease-out var(--fdl,0s) infinite;pointer-events:none}
|
||||
@keyframes ripple{0%{width:34%;height:34%;opacity:.5}100%{width:120%;height:120%;opacity:0}}
|
||||
.pool .plabel{position:absolute;left:50%;transform:translateX(-50%);top:calc(100% + 10px);display:flex;
|
||||
flex-direction:column;align-items:center;gap:4px;white-space:nowrap}
|
||||
.plabel b{font-size:19px;font-weight:700;color:var(--text-body);letter-spacing:.05em;transition:.3s}
|
||||
.plabel span{font-size:13px;font-weight:600;color:var(--text-aux);letter-spacing:.1em}
|
||||
.pool:hover .plabel b{color:var(--text-primary)}
|
||||
.pool.open .halo{background:radial-gradient(closest-side,var(--pool-warm-halo-a),var(--pool-warm-halo-b) 48%,transparent 74%)}
|
||||
.pool.open .heart{background:radial-gradient(circle at 40% 32%,var(--pool-warm-core),var(--pool-warm-mid) 52%,transparent 80%);
|
||||
box-shadow:0 0 26px var(--pool-warm-glow),0 0 70px var(--pool-warm-glow-soft);animation:lampBreathe 5.5s ease-in-out infinite}
|
||||
@keyframes lampBreathe{0%,100%{box-shadow:0 0 20px var(--pool-warm-glow),0 0 54px var(--pool-warm-glow-soft)}
|
||||
50%{box-shadow:0 0 34px var(--pool-warm-glow),0 0 86px var(--pool-warm-glow-soft)}}
|
||||
.pool.open .ring{border-color:var(--pool-warm-ring)}
|
||||
.pool.open .plabel b{color:var(--accent)}
|
||||
.pool.open .plabel span{color:var(--star-dim)}
|
||||
|
||||
/* 排布 */
|
||||
.p-hero{left:50%;transform:translateX(-50%);top:352px}
|
||||
.p-hero .bay{width:280px;height:88px}
|
||||
.p-hero .halo{width:280px;height:88px}
|
||||
.p-hero .heart{width:34px;height:34px;top:44px}
|
||||
.p-hero .ring{width:280px;height:88px;top:44px}
|
||||
.p-l{left:16%;top:330px}.p-r{right:16%;top:330px}
|
||||
.p-l .bay,.p-r .bay{width:200px;height:64px}
|
||||
.p-l .halo,.p-r .halo{width:200px;height:64px}
|
||||
.p-l .heart,.p-r .heart{width:20px;height:20px;top:32px}
|
||||
.p-l .ring,.p-r .ring{width:200px;height:64px;top:32px}
|
||||
.p-m{width:210px;height:66px;top:368px}
|
||||
.p-m .bay{width:210px;height:66px}
|
||||
.p-m .halo{width:210px;height:66px}
|
||||
.p-m .heart{width:20px;height:20px;top:33px}
|
||||
.p-m .ring{width:210px;height:66px;top:33px}
|
||||
.p-m1{left:calc(50% - 470px)}.p-m2{left:calc(50% - 105px)}.p-m3{left:calc(50% + 260px)}
|
||||
.p-s{width:170px;height:54px;top:392px}
|
||||
.p-s .bay{width:170px;height:54px}
|
||||
.p-s .halo{width:170px;height:54px}
|
||||
.p-s .heart{width:16px;height:16px;top:27px}
|
||||
.p-s .ring{width:170px;height:54px;top:27px}
|
||||
.p-s1{left:calc(50% - 400px)}.p-s2{left:calc(50% - 85px)}.p-s3{left:calc(50% + 230px)}
|
||||
|
||||
/* 阅读浮面（知识空间） */
|
||||
.reader{position:absolute;z-index:6;left:50%;top:180px;transform:translateX(-50%);width:660px;max-width:88%;
|
||||
padding:32px 38px 28px;border-radius:18px;background:var(--reader-bg);border:1px solid var(--reader-edge);
|
||||
backdrop-filter:blur(20px);box-shadow:0 24px 70px rgba(0,0,0,.4)}
|
||||
.reader h3{font-size:20px;font-weight:700;color:var(--text-primary);letter-spacing:.04em;margin-bottom:5px}
|
||||
.reader .rmeta{font-size:12.5px;font-weight:600;color:var(--star-dim);letter-spacing:.1em;margin-bottom:16px}
|
||||
.reader p{font-size:15px;line-height:1.85;color:var(--text-body);font-weight:500}
|
||||
.reader .ritem{display:flex;align-items:center;gap:11px;padding:11px 2px;border-bottom:1px solid var(--glass-edge)}
|
||||
.reader .ritem:last-child{border-bottom:none}
|
||||
.reader .ritem .rd{width:8px;height:8px;border-radius:50%;background:var(--pool-cool-mid);box-shadow:0 0 9px var(--pool-cool-glow);flex:none}
|
||||
.reader .ritem.warm .rd{background:var(--pool-warm-mid);box-shadow:0 0 9px var(--pool-warm-glow)}
|
||||
.reader .ritem b{font-size:15px;font-weight:700;color:var(--text-primary)}
|
||||
.reader .ritem span{margin-left:auto;font-size:12.5px;font-weight:600;color:var(--text-faint)}
|
||||
|
||||
/* 湖面天气（回执·状态） */
|
||||
.wx{position:absolute;z-index:5;font-size:15px;font-weight:700;color:var(--text-body);letter-spacing:.06em;display:flex;
|
||||
align-items:center;gap:10px;cursor:default}
|
||||
.wx i{width:9px;height:9px;border-radius:50%;background:var(--pool-cool-mid);box-shadow:0 0 10px var(--pool-cool-glow)}
|
||||
.wx.warm i{background:var(--pool-warm-mid);box-shadow:0 0 10px var(--pool-warm-glow)}
|
||||
.wx b{font-weight:700;color:var(--text-primary)}
|
||||
|
||||
.back{position:absolute;top:16px;left:18px;z-index:8;font-size:13.5px;font-weight:600;color:var(--text-aux);
|
||||
cursor:pointer;letter-spacing:.06em;transition:.25s;background:none;border:none;font-family:var(--font-cn)}
|
||||
.back:hover{color:var(--accent)}
|
||||
|
||||
.tip{position:absolute;z-index:20;min-width:252px;padding:15px 18px;border-radius:13px;
|
||||
background:rgba(10,16,32,.82);border:1px solid var(--glass-edge);backdrop-filter:blur(18px);
|
||||
box-shadow:0 16px 50px rgba(0,0,0,.5);opacity:0;pointer-events:none;transform:translateY(6px);
|
||||
transition:opacity .26s ease,transform .26s ease}
|
||||
.tip.show{opacity:1;transform:none}
|
||||
.tip b{display:block;font-size:16px;font-weight:700;color:var(--text-primary);margin-bottom:5px}
|
||||
.tip .tid{font-size:13px;font-weight:600;color:var(--star-dim);letter-spacing:.1em;margin-bottom:9px}
|
||||
.tip p{font-size:14px;font-weight:600;line-height:1.6;color:var(--text-body)}
|
||||
|
||||
.footer{flex:none;position:relative;z-index:7;display:flex;flex-direction:column;align-items:center;gap:7px;padding:12px 0 16px}
|
||||
.colophon{font-size:12.5px;font-weight:600;color:var(--text-aux);letter-spacing:.14em;display:flex;align-items:center;gap:9px}
|
||||
.colophon b{font-weight:700;color:var(--star-dim);letter-spacing:.1em}
|
||||
|
||||
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
|
||||
.view.on .pool{animation:rise .9s cubic-bezier(.22,1,.36,1) both}
|
||||
.view.on .pool:nth-of-type(2){animation-delay:.08s}
|
||||
.view.on .pool:nth-of-type(3){animation-delay:.14s}
|
||||
.view.on .pool:nth-of-type(4){animation-delay:.2s}
|
||||
.caption{font-size:12px;font-weight:500;color:rgba(160,172,200,.48);margin-top:16px;letter-spacing:.05em;text-align:center}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="window" id="win">
|
||||
<div class="sky">
|
||||
<div class="nebula"></div>
|
||||
<div class="star breathe" style="width:3px;height:3px;top:9%;left:14%;--dur:4.6s"></div>
|
||||
<div class="star breathe" style="width:2px;height:2px;top:14%;left:27%;--dur:6s;--dl:1.2s"></div>
|
||||
<div class="star breathe" style="width:2.5px;height:2.5px;top:7%;left:41%;--dur:5.2s;--dl:2s"></div>
|
||||
<div class="star" style="width:2px;height:2px;top:18%;left:64%;opacity:.5"></div>
|
||||
<div class="star breathe" style="width:3.5px;height:3.5px;top:8%;left:80%;--dur:7s;--dl:.6s"></div>
|
||||
<div class="star" style="width:1.5px;height:1.5px;top:22%;left:90%;opacity:.4"></div>
|
||||
<div class="star breathe" style="width:2px;height:2px;top:24%;left:8%;--dur:5.6s;--dl:3s"></div>
|
||||
</div>
|
||||
|
||||
<div class="titlebar">
|
||||
<div class="lights"><i></i><i></i><i></i></div>
|
||||
<div class="tb-word">HoloLake</div>
|
||||
</div>
|
||||
|
||||
<div class="stage">
|
||||
|
||||
<!-- ══ 屏一 · 域首页：世界在发生什么 ══ -->
|
||||
<div class="view on" id="v-domain">
|
||||
<div class="loc"><b>第五域 · 光湖本源域</b><span>编号 ICE-GL∞ · 已登入 · 责任主体 冰朔</span></div>
|
||||
<div class="mist"></div>
|
||||
<div class="shimmer">
|
||||
<div class="shine cool" style="left:6%;top:30px;--dur:24s"></div>
|
||||
<div class="shine warm" style="left:34%;top:96px;--dur:30s;--dl:4s"></div>
|
||||
<div class="shine cool" style="left:58%;top:40px;--dur:27s;--dl:9s"></div>
|
||||
<div class="broadcast" style="top:20%;--dur:54s"><b>世界广播</b> · GLS-0842 实时会话协议已登记</div>
|
||||
<div class="broadcast" style="top:40%;--dur:66s;--dl:16s"><b>世界广播</b> · 客户端 v0.4.0 更新：近场直连通道开启</div>
|
||||
<div class="broadcast" style="top:60%;--dur:58s;--dl:34s"><b>世界广播</b> · 工单窗口已立 · 归灯承办</div>
|
||||
<div class="broadcast" style="top:78%;--dur:70s;--dl:8s"><b>世界广播</b> · 协议版本 GLS 注册表 · 2026.08.16</div>
|
||||
</div>
|
||||
<div class="pool open p-hero" data-go="v-channel"
|
||||
data-tip-t="永恒湖心系统" data-tip-id="PRIVATE SYSTEM · 冰朔"
|
||||
data-tip-p="我的频道 · 光之湖 · 知识空间 · 回执 —— 进入系统">
|
||||
<div class="bay"><i class="halo"></i><i class="heart"></i><i class="ring"></i></div>
|
||||
<div class="plabel"><b>永恒湖心系统</b><span>私人系统 · 进入</span></div>
|
||||
</div>
|
||||
<div class="pool p-l" data-tip-t="域公告 · 注册表" data-tip-id="DOMAIN REGISTRY" data-tip-p="编号注册表 · 域凭证签发 · 只读">
|
||||
<div class="bay"><i class="halo"></i><i class="heart"></i><i class="ring"></i></div>
|
||||
<div class="plabel"><b>域公告</b><span>注册表 · 只读</span></div>
|
||||
</div>
|
||||
<div class="pool p-r" data-tip-t="协议版本" data-tip-id="GLS REGISTRY · 2026.08.16" data-tip-p="现行协议版本与更新记录 · 只读">
|
||||
<div class="bay"><i class="halo"></i><i class="heart"></i><i class="ring"></i></div>
|
||||
<div class="plabel"><b>协议版本</b><span>GLS · 2026.08.16</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ══ 屏二 · 我的频道全景 ══ -->
|
||||
<div class="view" id="v-channel">
|
||||
<button class="back" data-go="v-domain">← 退回域首页</button>
|
||||
<div class="loc"><b>永恒湖心 · 我的频道</b><span>私人系统 · 已接入</span></div>
|
||||
<div class="mist"></div>
|
||||
<div class="shimmer">
|
||||
<div class="shine warm" style="left:30%;top:80px;--dur:28s"></div>
|
||||
<div class="shine cool" style="left:56%;top:36px;--dur:25s;--dl:8s"></div>
|
||||
</div>
|
||||
<div class="pool open p-m p-m2" data-go="v-subs"
|
||||
data-tip-t="我的子频道" data-tip-id="LANE-PERSONAL · ICE-GL∞" data-tip-p="业务航道 · 3 条活跃 · 展开下一层">
|
||||
<div class="bay"><i class="halo"></i><i class="heart"></i><i class="ring"></i></div>
|
||||
<div class="plabel"><b>我的子频道</b><span>业务航道 · 3 条活跃</span></div>
|
||||
</div>
|
||||
<div class="pool p-m p-m1" data-tip-t="光之湖" data-tip-id="LAKE-OF-PERSONAS" data-tip-p="铸渊 · 主控｜刻舟 · 京东常驻｜归灯 · 工单窗口">
|
||||
<div class="bay"><i class="halo"></i><i class="heart"></i><i class="ring"></i></div>
|
||||
<div class="plabel"><b>光之湖</b><span>人格体居所 · 4 位在册</span></div>
|
||||
</div>
|
||||
<div class="pool p-m p-m3" data-go="v-know"
|
||||
data-tip-t="知识空间" data-tip-id="KNOWLEDGE · 168 唯一页" data-tip-p="242 重复已折叠 · 读页光感随主题适配">
|
||||
<div class="bay"><i class="halo"></i><i class="heart"></i><i class="ring"></i></div>
|
||||
<div class="plabel"><b>知识空间</b><span>168 唯一页</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ══ 屏三 · 子频道（无限嵌套示例） ══ -->
|
||||
<div class="view" id="v-subs">
|
||||
<button class="back" data-go="v-channel">← 退回我的频道</button>
|
||||
<div class="loc"><b>我的子频道</b><span>选择航道 · 湖面再展开一层</span></div>
|
||||
<div class="mist"></div>
|
||||
<div class="shimmer"><div class="shine warm" style="left:36%;top:70px;--dur:26s"></div></div>
|
||||
<div class="pool open p-s p-s2" data-tip-t="B 线 · 短剧" data-tip-id="LANE-DRAMA" data-tip-p="EP00 制作中 · 分镜由 A 线承接">
|
||||
<div class="bay"><i class="halo"></i><i class="heart"></i><i class="ring"></i></div>
|
||||
<div class="plabel"><b>B 线 · 短剧</b><span>最近活跃 · EP00</span></div>
|
||||
</div>
|
||||
<div class="pool p-s p-s1" data-tip-t="A 线 · 编程" data-tip-id="LANE-CODE" data-tip-p="开发执行航道 · 交付与值守">
|
||||
<div class="bay"><i class="halo"></i><i class="heart"></i><i class="ring"></i></div>
|
||||
<div class="plabel"><b>A 线 · 编程</b><span>开发执行航道</span></div>
|
||||
</div>
|
||||
<div class="pool p-s p-s3" data-tip-t="图视频 · 素材库" data-tip-id="LANE-MEDIA" data-tip-p="镜头模板库 · 动态分级在库">
|
||||
<div class="bay"><i class="halo"></i><i class="heart"></i><i class="ring"></i></div>
|
||||
<div class="plabel"><b>图视频 · 素材库</b><span>镜头模板在库</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ══ 屏四 · 知识空间 ══ -->
|
||||
<div class="view" id="v-know">
|
||||
<button class="back" data-go="v-channel">← 退回我的频道</button>
|
||||
<div class="loc"><b>知识空间</b><span>168 唯一页 · 读页光感随主题适配</span></div>
|
||||
<div class="mist"></div>
|
||||
<div class="shimmer"><div class="shine cool" style="left:20%;top:80px;--dur:27s"></div></div>
|
||||
<div class="reader">
|
||||
<h3>第五域 · 永恒湖心系统</h3>
|
||||
<div class="rmeta">导入 / 光湖语言世界——第五域 · 2026-08-15</div>
|
||||
<p>永恒湖心为冰朔私人系统。频道悬浮于湖面，人格体居于光之湖，路径逐层展开。读页浮面随主题适配光感：亮色为高不透白底深墨字，无顶光扫射；暗色为深玻璃浅字。两态均满足可读性底线。</p>
|
||||
<div class="ritem warm"><i class="rd"></i><b>2026-07-12 · 铸澜自命名与自我登记</b><span>诞生记录</span></div>
|
||||
<div class="ritem"><i class="rd"></i><b>镜头动态分级 · EP00-MINI-12-V1</b><span>短剧线</span></div>
|
||||
<div class="ritem"><i class="rd"></i><b>引导人格体 · 工具能力与优化提案</b><span>20260722</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ══ 屏五 · 回执 · 湖面天气 ══ -->
|
||||
<div class="view" id="v-stat">
|
||||
<button class="back" data-go="v-channel">← 退回我的频道</button>
|
||||
<div class="loc"><b>湖面天气</b><span>原生会话可续接 · 当前离线</span></div>
|
||||
<div class="mist"></div>
|
||||
<div class="shimmer"><div class="shine cool" style="left:44%;top:60px;--dur:29s"></div></div>
|
||||
<div class="wx warm" style="left:calc(50% - 250px);top:352px"><i></i><b>近场直连代理</b> · READY</div>
|
||||
<div class="wx" style="left:calc(50% + 40px);top:392px"><i></i><b>可续接会话</b> · 2</div>
|
||||
<div class="wx" style="left:calc(50% - 310px);top:444px"><i></i><b>主控租约</b> · JD-FD-PRIMARY 已持有</div>
|
||||
<div class="wx" style="left:calc(50% + 90px);top:478px"><i></i><b>PNCC 投影</b> · 待第一笔回执</div>
|
||||
<div class="wx" style="left:calc(50% - 120px);top:530px"><i></i><b>MCP</b> · 门口兼容 / 恢复</div>
|
||||
</div>
|
||||
|
||||
<div class="tip" id="tip"><b></b><div class="tid"></div><p></p></div>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<div class="colophon">光湖语言系统 · 通用人工智能操作平台<b>GH-AIOS</b></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="caption">内部屏一套 v0.1 候选 · 域首页 → 频道全景 → 子频道 / 知识 / 天气 · 官方模板语言 · 仅供冰朔评判</div>
|
||||
|
||||
<script>
|
||||
document.querySelectorAll('.shimmer').forEach(function(box){
|
||||
for(var i=0;i<70;i++){
|
||||
var x=Math.random()*100, y=Math.pow(Math.random(),1.15)*100;
|
||||
var warm=Math.random()<((x>32&&x<68)?.55:.16);
|
||||
var s=document.createElement('i');
|
||||
s.className='glint '+(warm?'warm':'cool');
|
||||
var size=(1.4+Math.random()*2.2).toFixed(1);
|
||||
s.style.left=x+'%'; s.style.top=y+'%'; s.style.width=size+'px'; s.style.height=size+'px';
|
||||
s.style.setProperty('--dur',(2.6+Math.random()*4).toFixed(2)+'s');
|
||||
s.style.setProperty('--dl',(Math.random()*6).toFixed(2)+'s');
|
||||
s.style.setProperty('--op',(.3+Math.random()*.6).toFixed(2));
|
||||
box.appendChild(s);
|
||||
}
|
||||
});
|
||||
function go(id){
|
||||
document.querySelectorAll('.view').forEach(function(v){v.classList.remove('on');});
|
||||
var t=document.getElementById(id); if(t) t.classList.add('on');
|
||||
}
|
||||
document.querySelectorAll('[data-go]').forEach(function(el){
|
||||
el.addEventListener('click',function(e){e.stopPropagation();go(el.getAttribute('data-go'));hideTip();});
|
||||
});
|
||||
var tip=document.getElementById('tip');
|
||||
function hideTip(){tip.classList.remove('show');}
|
||||
document.querySelectorAll('.pool[data-tip-t]').forEach(function(p){
|
||||
p.addEventListener('mouseenter',function(){
|
||||
tip.querySelector('b').textContent=p.getAttribute('data-tip-t');
|
||||
tip.querySelector('.tid').textContent=p.getAttribute('data-tip-id');
|
||||
tip.querySelector('p').textContent=p.getAttribute('data-tip-p');
|
||||
var r=p.getBoundingClientRect(), w=document.getElementById('win').getBoundingClientRect();
|
||||
var left=Math.max(12,Math.min(r.left-w.left+r.width/2-126,w.width-276));
|
||||
var top=r.top-w.top-tip.offsetHeight-16; if(top<8) top=r.bottom-w.top+14;
|
||||
tip.style.left=left+'px'; tip.style.top=top+'px'; tip.classList.add('show');
|
||||
});
|
||||
p.addEventListener('mouseleave',hideTip);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,393 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>光湖 · 公共首页登录 v0.4 候选 · 五域环抱 · 仅供冰朔评判</title>
|
||||
<style>
|
||||
/* ═══════════════════════════════════════════════════════════
|
||||
公共首页登录 v0.4 候选（CANDIDATE · 待冰朔判词）
|
||||
归位：这一屏是光湖语言世界本身——湖面、五域环抱、中央编号光池。
|
||||
编号是第一道验证：输入之后系统才路由（域升起·开门·欢迎语），
|
||||
域凭证在路由之后才浮起。屏上不同时出现两道门。
|
||||
官方感来自：大字重、官方文案、有序；世界感来自：湖面与悬浮动态。
|
||||
令牌：五色湖 v1.3 定版继承。
|
||||
═══════════════════════════════════════════════════════════ */
|
||||
:root{
|
||||
--bg-a:#0A1020; --bg-b:#0B1220; --bg-c:#070C16; --bg-d:#04070D;
|
||||
--window-border:rgba(202,216,255,.10);
|
||||
--nebula-a:rgba(91,111,196,.12); --nebula-b:rgba(138,111,201,.05);
|
||||
--star-core:#F7EBC8; --star-dim:rgba(247,235,200,.64); --star-faint:rgba(247,235,200,.36);
|
||||
--text-primary:rgba(236,240,250,.98); --text-body:rgba(222,228,242,.94);
|
||||
--text-aux:rgba(196,206,228,.76); --text-faint:rgba(180,192,220,.56);
|
||||
--tb-bg:rgba(10,16,30,.35); --tb-border:rgba(202,216,255,.06);
|
||||
--glass:rgba(178,198,255,.055); --glass-edge:rgba(202,216,255,.16);
|
||||
--mist-a:rgba(157,180,255,.10); --mist-b:rgba(247,235,200,.04);
|
||||
--shine-cool:rgba(157,180,255,.075); --shine-warm:rgba(247,235,200,.085);
|
||||
--glint-cool-core:rgba(214,226,255,.9); --glint-cool-mid:rgba(157,180,255,.22); --glint-cool-glow:rgba(157,180,255,.42);
|
||||
--glint-warm-core:rgba(255,242,206,.95); --glint-warm-mid:rgba(247,235,200,.25); --glint-warm-glow:rgba(247,235,200,.5);
|
||||
--pool-cool-core:rgba(230,238,255,.95); --pool-cool-mid:rgba(157,180,255,.5);
|
||||
--pool-cool-halo-a:rgba(157,180,255,.30); --pool-cool-halo-b:rgba(157,180,255,.10);
|
||||
--pool-cool-ring:rgba(157,180,255,.18); --pool-cool-glow:rgba(157,180,255,.42);
|
||||
--pool-warm-core:rgba(255,244,210,1); --pool-warm-mid:rgba(247,235,200,.6);
|
||||
--pool-warm-halo-a:rgba(247,235,200,.36); --pool-warm-halo-b:rgba(247,235,200,.13);
|
||||
--pool-warm-ring:rgba(247,235,200,.26);
|
||||
--pool-warm-glow:rgba(247,235,200,.64); --pool-warm-glow-soft:rgba(247,235,200,.26);
|
||||
--accent:#E9CE8F; --accent-ink:#191204; --accent-glow:rgba(233,206,143,.3);
|
||||
--input-ink:rgba(240,244,254,.98);
|
||||
--font-cn:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei UI","Microsoft YaHei",sans-serif;
|
||||
}
|
||||
|
||||
*{margin:0;padding:0;box-sizing:border-box}
|
||||
body{font-family:var(--font-cn);background:#03050A;min-height:100vh;display:flex;flex-direction:column;
|
||||
align-items:center;justify-content:center;padding:30px 20px;-webkit-font-smoothing:antialiased}
|
||||
|
||||
.window{position:relative;width:1180px;max-width:96vw;height:780px;border-radius:18px;overflow:hidden;
|
||||
background:linear-gradient(180deg,var(--bg-a) 0%,var(--bg-b) 38%,var(--bg-c) 60%,var(--bg-d) 100%);
|
||||
border:1px solid var(--window-border);
|
||||
box-shadow:0 40px 120px rgba(0,0,0,.72),0 0 140px rgba(91,111,196,.07);
|
||||
display:flex;flex-direction:column;transition:background .6s ease}
|
||||
|
||||
.sky{position:absolute;inset:0;pointer-events:none}
|
||||
.nebula{position:absolute;width:760px;height:460px;left:50%;top:-250px;transform:translateX(-50%);filter:blur(9px);
|
||||
background:radial-gradient(closest-side,var(--nebula-a),var(--nebula-b) 55%,transparent 75%)}
|
||||
.star{position:absolute;border-radius:50%;background:var(--star-core)}
|
||||
.star.breathe{animation:breathe var(--dur,5s) ease-in-out var(--dl,0s) infinite}
|
||||
@keyframes breathe{0%,100%{opacity:.14;transform:scale(.8)}50%{opacity:.85;transform:scale(1.15)}}
|
||||
|
||||
.titlebar{position:relative;z-index:9;display:flex;align-items:center;padding:0 16px;height:44px;flex:none;
|
||||
background:var(--tb-bg);backdrop-filter:blur(16px);border-bottom:1px solid var(--tb-border)}
|
||||
.lights{display:flex;gap:8px}
|
||||
.lights i{width:12px;height:12px;border-radius:50%}
|
||||
.lights i:nth-child(1){background:#FF5F57}.lights i:nth-child(2){background:#FEBC2E}.lights i:nth-child(3){background:#28C840}
|
||||
.tb-word{position:absolute;left:50%;transform:translateX(-50%);font-size:13px;font-weight:700;letter-spacing:.22em;color:var(--star-dim)}
|
||||
|
||||
.scene{position:relative;flex:1;z-index:2}
|
||||
|
||||
/* 官方名（天空位 · 大字重） */
|
||||
.hero{position:absolute;top:26px;left:0;right:0;z-index:6;display:flex;flex-direction:column;align-items:center;gap:10px}
|
||||
.hero h1{font-size:34px;font-weight:700;color:var(--text-primary);letter-spacing:.09em}
|
||||
.hero .en{font-size:12.5px;font-weight:600;letter-spacing:.32em;color:var(--star-dim)}
|
||||
|
||||
.mist{position:absolute;left:6%;right:6%;top:252px;height:56px;z-index:2;pointer-events:none;
|
||||
background:radial-gradient(60% 100% at 50% 50%,var(--mist-a),var(--mist-b) 55%,transparent 78%);filter:blur(11px)}
|
||||
|
||||
.shimmer{position:absolute;left:0;right:0;top:270px;bottom:0;z-index:3;pointer-events:none;overflow:hidden}
|
||||
.glint{position:absolute;border-radius:50%;animation:twinkle var(--dur,4s) ease-in-out var(--dl,0s) infinite}
|
||||
.glint.cool{background:radial-gradient(circle,var(--glint-cool-core),var(--glint-cool-mid) 70%,transparent);box-shadow:0 0 6px var(--glint-cool-glow)}
|
||||
.glint.warm{background:radial-gradient(circle,var(--glint-warm-core),var(--glint-warm-mid) 70%,transparent);box-shadow:0 0 6px var(--glint-warm-glow)}
|
||||
@keyframes twinkle{0%,100%{opacity:.05;transform:scale(.6)}50%{opacity:var(--op,.7);transform:scale(1)}}
|
||||
.shine{position:absolute;width:420px;height:130px;border-radius:50%;filter:blur(34px);pointer-events:none;
|
||||
animation:glide var(--dur,26s) ease-in-out var(--dl,0s) infinite alternate}
|
||||
.shine.cool{background:var(--shine-cool)}
|
||||
.shine.warm{background:var(--shine-warm)}
|
||||
@keyframes glide{from{transform:translateX(-40px)}to{transform:translateX(46px)}}
|
||||
|
||||
/* 五域 · 环抱中央 */
|
||||
.pool{position:absolute;z-index:5;display:flex;flex-direction:column;align-items:center;cursor:pointer;
|
||||
transition:opacity .6s ease}
|
||||
.pool .bay{position:relative;animation:bayfloat var(--fdur,6.6s) ease-in-out var(--fdl,0s) infinite}
|
||||
@keyframes bayfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
|
||||
.pool .halo{position:absolute;left:50%;top:0;transform:translateX(-50%);border-radius:50%;filter:blur(2px);
|
||||
background:radial-gradient(closest-side,var(--pool-cool-halo-a),var(--pool-cool-halo-b) 46%,transparent 72%);
|
||||
animation:poolBreathe 5.8s ease-in-out var(--fdl,0s) infinite}
|
||||
@keyframes poolBreathe{0%,100%{opacity:.72;transform:translateX(-50%) scale(.96)}50%{opacity:1;transform:translateX(-50%) scale(1.06)}}
|
||||
.pool .heart{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;
|
||||
background:radial-gradient(circle at 40% 34%,var(--pool-cool-core),var(--pool-cool-mid) 55%,transparent 80%);
|
||||
box-shadow:0 0 18px var(--pool-cool-glow)}
|
||||
.pool .ring{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;
|
||||
border:1px solid var(--pool-cool-ring);animation:ripple 5.5s ease-out var(--fdl,0s) infinite;pointer-events:none}
|
||||
@keyframes ripple{0%{width:34%;height:34%;opacity:.5}100%{width:120%;height:120%;opacity:0}}
|
||||
.pool .plabel{position:absolute;left:50%;transform:translateX(-50%);top:calc(100% + 10px);display:flex;
|
||||
flex-direction:column;align-items:center;gap:4px;white-space:nowrap}
|
||||
.plabel b{font-size:19px;font-weight:700;color:var(--text-body);letter-spacing:.05em;transition:.3s}
|
||||
.plabel span{font-size:13px;font-weight:600;color:var(--text-aux);letter-spacing:.1em}
|
||||
.pool:hover .plabel b{color:var(--text-primary)}
|
||||
|
||||
.pool.open .halo{background:radial-gradient(closest-side,var(--pool-warm-halo-a),var(--pool-warm-halo-b) 48%,transparent 74%)}
|
||||
.pool.open .heart{background:radial-gradient(circle at 40% 32%,var(--pool-warm-core),var(--pool-warm-mid) 52%,transparent 80%);
|
||||
box-shadow:0 0 26px var(--pool-warm-glow),0 0 70px var(--pool-warm-glow-soft);animation:lampBreathe 5.5s ease-in-out infinite}
|
||||
@keyframes lampBreathe{0%,100%{box-shadow:0 0 20px var(--pool-warm-glow),0 0 54px var(--pool-warm-glow-soft)}
|
||||
50%{box-shadow:0 0 34px var(--pool-warm-glow),0 0 86px var(--pool-warm-glow-soft)}}
|
||||
.pool.open .ring{border-color:var(--pool-warm-ring)}
|
||||
.pool.open .plabel b{color:var(--accent)}
|
||||
.pool.open .plabel span{color:var(--star-dim)}
|
||||
|
||||
/* 环抱排布：四域拱卫，第五域居下最近最大 */
|
||||
.d-main {left:13%;top:330px;--fdur:6.4s;--fdl:.3s}
|
||||
.d-sub {left:30%;top:296px;--fdur:7.2s;--fdl:1.4s}
|
||||
.d-zero {right:30%;top:296px;--fdur:6.8s;--fdl:2.1s}
|
||||
.d-zs {right:13%;top:330px;--fdur:7.6s;--fdl:.9s}
|
||||
.d-fifth{left:50%;transform:translateX(-50%);top:560px;--fdur:6.6s;--fdl:1.8s}
|
||||
.d-main .bay,.d-sub .bay,.d-zero .bay,.d-zs .bay{width:180px;height:58px}
|
||||
.d-fifth .bay{width:264px;height:84px}
|
||||
.d-main .halo,.d-sub .halo,.d-zero .halo,.d-zs .halo{width:180px;height:58px}
|
||||
.d-fifth .halo{width:264px;height:84px}
|
||||
.d-main .heart,.d-sub .heart,.d-zero .heart,.d-zs .heart{width:17px;height:17px;top:29px}
|
||||
.d-fifth .heart{width:32px;height:32px;top:42px}
|
||||
.d-main .ring,.d-sub .ring,.d-zero .ring,.d-zs .ring{width:180px;height:58px;top:29px}
|
||||
.d-fifth .ring{width:264px;height:84px;top:42px}
|
||||
.pool.risen{z-index:7}
|
||||
.pool.risen .bay{animation:none;transform:translateY(-26px)}
|
||||
.window.resolved .pool:not(.open){opacity:.36}
|
||||
|
||||
/* 中央 · 编号光池（五域包裹） */
|
||||
.nucleus{position:absolute;z-index:8;left:50%;top:406px;transform:translateX(-50%);width:440px;
|
||||
display:flex;flex-direction:column;align-items:center;perspective:900px}
|
||||
.nc-locus{display:flex;flex-direction:column;align-items:center;gap:16px;cursor:pointer;
|
||||
transition:opacity .45s ease,transform .45s ease}
|
||||
.nc-glow{width:250px;height:88px;border-radius:50%;filter:blur(7px);
|
||||
background:radial-gradient(closest-side,var(--pool-warm-halo-a),var(--pool-warm-halo-b) 52%,transparent 76%);
|
||||
animation:poolBreathe2 5.2s ease-in-out infinite}
|
||||
@keyframes poolBreathe2{0%,100%{opacity:.75;transform:scale(.96)}50%{opacity:1;transform:scale(1.05)}}
|
||||
.nc-line{font-size:17px;font-weight:700;color:var(--text-body);letter-spacing:.14em}
|
||||
.nc-line b{color:var(--accent);font-weight:700}
|
||||
.nucleus.open .nc-locus{opacity:0;transform:rotateX(58deg) translateY(-12px);pointer-events:none}
|
||||
|
||||
.nc-panel{position:absolute;top:-6px;left:50%;transform:translateX(-50%) rotateX(-64deg);transform-origin:50% 100%;
|
||||
width:440px;padding:28px 36px 24px;border-radius:18px;opacity:0;pointer-events:none;
|
||||
background:var(--glass);border:1px solid var(--glass-edge);backdrop-filter:blur(22px);
|
||||
box-shadow:0 26px 80px rgba(0,0,0,.5);transition:opacity .5s ease,transform .55s cubic-bezier(.22,1,.36,1)}
|
||||
.nucleus.open .nc-panel{opacity:1;transform:translateX(-50%) rotateX(0);pointer-events:auto}
|
||||
.np-title{font-size:14px;font-weight:700;color:var(--star-dim);letter-spacing:.3em;text-align:center;margin-bottom:18px}
|
||||
.idrow{display:flex;align-items:center;gap:12px}
|
||||
.idrow input{flex:1;background:none;border:none;outline:none;border-bottom:2px solid var(--glass-edge);
|
||||
font-family:var(--font-cn);font-size:20px;font-weight:700;color:var(--input-ink);letter-spacing:.06em;
|
||||
padding:9px 2px;transition:border-color .3s}
|
||||
.idrow input:focus{border-color:var(--accent)}
|
||||
.inf{width:44px;height:44px;flex:none;border-radius:50%;border:2px solid var(--glass-edge);background:transparent;
|
||||
color:var(--text-aux);font-size:19px;font-weight:700;cursor:pointer;transition:.3s}
|
||||
.inf.on{border-color:var(--accent);color:var(--accent);box-shadow:0 0 16px rgba(233,206,143,.18)}
|
||||
.np-btn{margin-top:22px;width:100%;padding:13px 0;border:none;border-radius:11px;cursor:pointer;
|
||||
background:var(--accent);color:var(--accent-ink);font-family:var(--font-cn);
|
||||
font-size:17px;font-weight:700;letter-spacing:.3em;transition:.3s}
|
||||
.np-btn:hover{box-shadow:0 6px 26px var(--accent-glow)}
|
||||
.np-msg{margin-top:13px;text-align:center;font-size:14px;font-weight:700;min-height:20px;color:var(--accent);letter-spacing:.05em}
|
||||
.np-msg.deny{color:rgba(240,130,120,1)}
|
||||
|
||||
/* 路由之后：欢迎语 + 域凭证浮起（仍在中央） */
|
||||
.welcome{position:absolute;z-index:9;left:0;right:0;top:300px;text-align:center;opacity:0;transform:translateY(12px);
|
||||
transition:opacity .8s ease,transform .8s ease;pointer-events:none;display:none}
|
||||
.welcome b{font-size:31px;font-weight:700;color:var(--text-primary);letter-spacing:.1em}
|
||||
.welcome span{display:block;margin-top:12px;font-size:14px;font-weight:600;color:var(--star-dim);letter-spacing:.26em}
|
||||
.window.resolved .welcome{display:block;opacity:1;transform:none}
|
||||
.window.resolved .nucleus{opacity:0;pointer-events:none;transition:opacity .45s ease}
|
||||
|
||||
.cred{position:absolute;z-index:10;left:50%;top:396px;transform:translateX(-50%) translateY(30px);width:440px;
|
||||
padding:28px 36px 24px;border-radius:18px;background:var(--glass);border:1px solid var(--glass-edge);
|
||||
backdrop-filter:blur(22px);box-shadow:0 26px 80px rgba(0,0,0,.5);opacity:0;pointer-events:none;
|
||||
transition:opacity .6s ease,transform .6s cubic-bezier(.22,1,.36,1)}
|
||||
.cred.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
|
||||
.cred h3{font-size:18px;font-weight:700;color:var(--text-primary);letter-spacing:.12em;text-align:center}
|
||||
.cred .csub{margin-top:7px;text-align:center;font-size:12.5px;font-weight:600;color:var(--star-dim);letter-spacing:.2em}
|
||||
.cred input{display:block;width:100%;margin-top:20px;background:none;border:none;outline:none;
|
||||
border-bottom:2px solid var(--glass-edge);font-family:var(--font-cn);font-size:17px;font-weight:700;
|
||||
color:var(--input-ink);letter-spacing:.05em;padding:9px 2px;transition:border-color .3s}
|
||||
.cred input:focus{border-color:var(--accent)}
|
||||
.cred .np-btn{margin-top:24px}
|
||||
.cred .cnote{margin-top:13px;text-align:center;font-size:13px;font-weight:600;color:var(--text-aux);letter-spacing:.1em}
|
||||
|
||||
.bloom{position:absolute;z-index:4;left:50%;top:602px;width:264px;height:84px;transform:translateX(-50%);pointer-events:none;display:none}
|
||||
.window.resolved .bloom{display:block}
|
||||
.bloom i{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;
|
||||
border:1.5px solid var(--pool-warm-ring);animation:gatebloom 2.8s ease-out var(--dl,0s) infinite}
|
||||
.bloom i:nth-child(1){width:100%;height:100%}
|
||||
.bloom i:nth-child(2){width:100%;height:100%;--dl:.9s}
|
||||
.bloom i:nth-child(3){width:100%;height:100%;--dl:1.8s}
|
||||
@keyframes gatebloom{0%{opacity:.65;transform:translate(-50%,-50%) scale(.5)}100%{opacity:0;transform:translate(-50%,-50%) scale(2.4)}}
|
||||
|
||||
/* 悬浮介绍 */
|
||||
.tip{position:absolute;z-index:20;min-width:252px;padding:15px 18px;border-radius:13px;
|
||||
background:rgba(10,16,32,.82);border:1px solid var(--glass-edge);backdrop-filter:blur(18px);
|
||||
box-shadow:0 16px 50px rgba(0,0,0,.5);opacity:0;pointer-events:none;transform:translateY(6px);
|
||||
transition:opacity .26s ease,transform .26s ease}
|
||||
.tip.show{opacity:1;transform:none}
|
||||
.tip b{display:block;font-size:16px;font-weight:700;color:var(--text-primary);margin-bottom:5px}
|
||||
.tip .tid{font-size:13px;font-weight:600;color:var(--star-dim);letter-spacing:.1em;margin-bottom:9px}
|
||||
.tip p{font-size:14px;font-weight:600;line-height:1.6;color:var(--text-body)}
|
||||
|
||||
.reset{position:absolute;z-index:12;left:16px;bottom:12px;background:none;border:none;cursor:pointer;
|
||||
font-family:var(--font-cn);font-size:12.5px;font-weight:600;color:var(--text-faint);letter-spacing:.06em}
|
||||
.reset:hover{color:var(--accent)}
|
||||
|
||||
.footer{flex:none;position:relative;z-index:7;display:flex;flex-direction:column;align-items:center;gap:7px;padding:12px 0 16px}
|
||||
.trust span{font-size:12.5px;font-weight:600;color:var(--text-aux);letter-spacing:.06em;display:flex;align-items:center;gap:10px}
|
||||
.trust .tdot{width:4px;height:4px;border-radius:50%;background:var(--star-faint)}
|
||||
|
||||
.themes{display:flex;align-items:center;gap:14px;margin-top:18px}
|
||||
.theme-btn{display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;background:none;border:none;font-family:var(--font-cn)}
|
||||
.theme-btn .sw{width:34px;height:34px;border-radius:50%;border:2px solid rgba(160,172,200,.25);transition:.25s}
|
||||
.theme-btn span{font-size:12px;font-weight:600;color:rgba(160,172,200,.6);letter-spacing:.05em}
|
||||
.theme-btn:hover .sw{transform:scale(1.08)}
|
||||
.theme-btn.on .sw{border-color:rgba(247,235,200,.75);box-shadow:0 0 14px rgba(247,235,200,.25)}
|
||||
.theme-btn.on span{color:rgba(234,238,248,.88)}
|
||||
.sw-night{background:radial-gradient(circle at 34% 30%,#F7EBC8 6%,#0B1220 60%,#04070D)}
|
||||
.sw-dawn{background:radial-gradient(circle at 34% 30%,#C9A24B 6%,#EAEFF8 55%,#D3E0EF)}
|
||||
.caption{font-size:12px;font-weight:500;color:rgba(160,172,200,.48);margin-top:14px;letter-spacing:.05em;text-align:center}
|
||||
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="window" id="win">
|
||||
<div class="sky">
|
||||
<div class="nebula"></div>
|
||||
<div class="star breathe" style="width:3px;height:3px;top:8%;left:14%;--dur:4.6s"></div>
|
||||
<div class="star breathe" style="width:2px;height:2px;top:13%;left:26%;--dur:6s;--dl:1.2s"></div>
|
||||
<div class="star breathe" style="width:2.5px;height:2.5px;top:6%;left:41%;--dur:5.2s;--dl:2s"></div>
|
||||
<div class="star" style="width:2px;height:2px;top:16%;left:64%;opacity:.5"></div>
|
||||
<div class="star breathe" style="width:3.5px;height:3.5px;top:7%;left:80%;--dur:7s;--dl:.6s"></div>
|
||||
<div class="star" style="width:1.5px;height:1.5px;top:20%;left:90%;opacity:.4"></div>
|
||||
<div class="star breathe" style="width:2px;height:2px;top:22%;left:8%;--dur:5.6s;--dl:3s"></div>
|
||||
<div class="star breathe" style="width:2.5px;height:2.5px;top:11%;left:93%;--dur:6.4s;--dl:1.8s"></div>
|
||||
</div>
|
||||
|
||||
<div class="titlebar">
|
||||
<div class="lights"><i></i><i></i><i></i></div>
|
||||
<div class="tb-word">HoloLake</div>
|
||||
</div>
|
||||
|
||||
<div class="scene">
|
||||
<div class="hero">
|
||||
<h1>光湖语言系统 · 通用人工智能操作平台</h1>
|
||||
<div class="en">GH-AIOS · GUANGHU AI OPERATING SYSTEM</div>
|
||||
</div>
|
||||
|
||||
<div class="mist"></div>
|
||||
<div class="shimmer" id="shimmer">
|
||||
<div class="shine cool" style="left:6%;top:30px;--dur:24s"></div>
|
||||
<div class="shine warm" style="left:34%;top:96px;--dur:30s;--dl:4s"></div>
|
||||
<div class="shine cool" style="left:58%;top:40px;--dur:27s;--dl:9s"></div>
|
||||
</div>
|
||||
<div class="bloom"><i></i><i></i><i></i></div>
|
||||
|
||||
<!-- 五域 · 环抱 -->
|
||||
<div class="pool d-sub" style="--fdur:7.2s;--fdl:1.4s" data-tip-t="光湖分域" data-tip-id="GATE 02 · 行业入口" data-tip-p="责任主体待登记 · 未接入">
|
||||
<div class="bay"><i class="halo"></i><i class="heart"></i><i class="ring"></i></div>
|
||||
<div class="plabel"><b>光湖分域</b><span>GATE 02 · 待接入</span></div>
|
||||
</div>
|
||||
<div class="pool d-main" style="--fdur:6.4s;--fdl:.3s" data-tip-t="光湖主域" data-tip-id="GATE 01 · 公共事实" data-tip-p="责任主体待登记 · 未接入">
|
||||
<div class="bay"><i class="halo"></i><i class="heart"></i><i class="ring"></i></div>
|
||||
<div class="plabel"><b>光湖主域</b><span>GATE 01 · 待接入</span></div>
|
||||
</div>
|
||||
<div class="pool d-zero" style="--fdur:6.8s;--fdl:2.1s" data-tip-t="光湖零域" data-tip-id="GATE 03 · 实验协作" data-tip-p="责任主体待登记 · 未接入">
|
||||
<div class="bay"><i class="halo"></i><i class="heart"></i><i class="ring"></i></div>
|
||||
<div class="plabel"><b>光湖零域</b><span>GATE 03 · 待接入</span></div>
|
||||
</div>
|
||||
<div class="pool d-zs" style="--fdur:7.6s;--fdl:.9s" data-tip-t="光湖零感域" data-tip-id="GATE 04 · 治理主控" data-tip-p="责任主体待登记 · 未接入">
|
||||
<div class="bay"><i class="halo"></i><i class="heart"></i><i class="ring"></i></div>
|
||||
<div class="plabel"><b>光湖零感域</b><span>GATE 04 · 待接入</span></div>
|
||||
</div>
|
||||
<div class="pool open d-fifth" id="pfifth" data-tip-t="第五域 · 光湖本源域" data-tip-id="GATE 05 · 责任主体 冰朔 ICE-GL∞" data-tip-p="已接入 · 永恒湖心系统 · 私有">
|
||||
<div class="bay"><i class="halo"></i><i class="heart"></i><i class="ring"></i></div>
|
||||
<div class="plabel"><b>第五域 · 本源域</b><span>GATE 05 · 已接入</span></div>
|
||||
</div>
|
||||
|
||||
<!-- 中央 · 编号光池 -->
|
||||
<div class="nucleus" id="nucleus">
|
||||
<div class="nc-locus" id="locus">
|
||||
<div class="nc-glow"></div>
|
||||
<div class="nc-line">编号验证 · <b>进入世界的第一个入口</b></div>
|
||||
</div>
|
||||
<div class="nc-panel">
|
||||
<div class="np-title">编 号 验 证</div>
|
||||
<div class="idrow">
|
||||
<input id="idinput" placeholder="如 ICE-GL∞" value="ICE-GL">
|
||||
<button class="inf on" id="inf" title="编号含无限符号时启用">∞</button>
|
||||
</div>
|
||||
<button class="np-btn" id="verify">验 证 编 号</button>
|
||||
<div class="np-msg" id="msg"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="welcome" id="welcome">
|
||||
<b>编号 ICE-GL∞ · 欢迎登入光湖语言世界</b>
|
||||
<span>RESOLVED · 第五域 · 光湖本源域 · 已接入</span>
|
||||
</div>
|
||||
|
||||
<div class="cred" id="cred">
|
||||
<h3>第五域 · 域凭证</h3>
|
||||
<div class="csub">FIFTH DOMAIN · JD-FD-PRIMARY</div>
|
||||
<input placeholder="代码仓库账号">
|
||||
<input placeholder="代码仓库密码" type="password">
|
||||
<button class="np-btn" id="login">登 录</button>
|
||||
<div class="cnote">凭证开门 · 表在仓里 · 哈希记史</div>
|
||||
</div>
|
||||
|
||||
<div class="tip" id="tip"><b></b><div class="tid"></div><p></p></div>
|
||||
<button class="reset" id="reset">重置演示</button>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<div class="trust"><span>入口只回答「从哪里进」<span class="tdot"></span>各域独立责任主体与权限<span class="tdot"></span>进入需节点登录验证</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="themes" id="themes">
|
||||
<button class="theme-btn on" data-theme=""><i class="sw sw-night"></i><span>夜湖星光</span></button>
|
||||
<button class="theme-btn" data-theme="t-dawn"><i class="sw sw-dawn"></i><span>晨湖曦光</span></button>
|
||||
</div>
|
||||
<div class="caption">公共首页登录 v0.4 候选 · 五域环抱 · 中央编号光池 · 编号之后系统才路由 · 仅供冰朔评判</div>
|
||||
|
||||
<script>
|
||||
(function(){
|
||||
var box=document.getElementById('shimmer');
|
||||
for(var i=0;i<110;i++){
|
||||
var x=Math.random()*100, y=Math.pow(Math.random(),1.15)*100;
|
||||
var warm=Math.random()<((x>32&&x<68)?.55:.16);
|
||||
var s=document.createElement('i');
|
||||
s.className='glint '+(warm?'warm':'cool');
|
||||
var size=(1.4+Math.random()*2.2).toFixed(1);
|
||||
s.style.left=x+'%'; s.style.top=y+'%'; s.style.width=size+'px'; s.style.height=size+'px';
|
||||
s.style.setProperty('--dur',(2.6+Math.random()*4).toFixed(2)+'s');
|
||||
s.style.setProperty('--dl',(Math.random()*6).toFixed(2)+'s');
|
||||
s.style.setProperty('--op',(.3+Math.random()*.6).toFixed(2));
|
||||
box.appendChild(s);
|
||||
}
|
||||
})();
|
||||
var win=document.getElementById('win'), nucleus=document.getElementById('nucleus'),
|
||||
locus=document.getElementById('locus'), idinput=document.getElementById('idinput'),
|
||||
inf=document.getElementById('inf'), msg=document.getElementById('msg'),
|
||||
cred=document.getElementById('cred'), tip=document.getElementById('tip'),
|
||||
pfifth=document.getElementById('pfifth');
|
||||
locus.addEventListener('click',function(){ nucleus.classList.add('open'); setTimeout(function(){idinput.focus();},350); });
|
||||
inf.addEventListener('click',function(){ inf.classList.toggle('on'); });
|
||||
document.getElementById('verify').addEventListener('click',function(){
|
||||
var id=(idinput.value||'').trim()+(inf.classList.contains('on')?'∞':'');
|
||||
if(id==='ICE-GL∞'){
|
||||
msg.className='np-msg'; msg.textContent='RESOLVED · 第五域 · 光湖本源域';
|
||||
setTimeout(function(){
|
||||
win.classList.add('resolved'); pfifth.classList.add('risen');
|
||||
setTimeout(function(){ cred.classList.add('show'); },1400);
|
||||
},700);
|
||||
}else{
|
||||
msg.className='np-msg deny'; msg.textContent='查无此编号 · 源头拒绝加载';
|
||||
}
|
||||
});
|
||||
document.getElementById('reset').addEventListener('click',function(){
|
||||
win.classList.remove('resolved'); pfifth.classList.remove('risen');
|
||||
nucleus.classList.remove('open'); cred.classList.remove('show'); msg.textContent='';
|
||||
});
|
||||
document.querySelectorAll('.pool[data-tip-t]').forEach(function(p){
|
||||
p.addEventListener('mouseenter',function(){
|
||||
tip.querySelector('b').textContent=p.getAttribute('data-tip-t');
|
||||
tip.querySelector('.tid').textContent=p.getAttribute('data-tip-id');
|
||||
tip.querySelector('p').textContent=p.getAttribute('data-tip-p');
|
||||
var r=p.getBoundingClientRect(), w=win.getBoundingClientRect();
|
||||
var left=Math.max(12,Math.min(r.left-w.left+r.width/2-126,w.width-276));
|
||||
var top=r.top-w.top-tip.offsetHeight-16; if(top<8) top=r.bottom-w.top+14;
|
||||
tip.style.left=left+'px'; tip.style.top=top+'px'; tip.classList.add('show');
|
||||
});
|
||||
p.addEventListener('mouseleave',function(){ tip.classList.remove('show'); });
|
||||
});
|
||||
(function(){
|
||||
var btns=document.querySelectorAll('#themes .theme-btn');
|
||||
btns.forEach(function(b){
|
||||
b.addEventListener('click',function(){
|
||||
btns.forEach(function(x){x.classList.remove('on');}); b.classList.add('on');
|
||||
});
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
{
|
||||
"receipt_id": "EXP-20260816-109",
|
||||
"title": "OFFICIAL_LOGIN_TEMPLATE_LOCKED",
|
||||
"date": "2026-08-16",
|
||||
"judge": "冰朔 ICE-GL∞",
|
||||
"author": "铸渊 ICE-P-ZY001 (QoderWork CN)",
|
||||
"object": "HoloLake 公共首页登录 v0.4 + 内部屏一套 v0.1",
|
||||
"verdict": "ACCEPTED_AND_LOCKED_AS_OFFICIAL_UI_TEMPLATE",
|
||||
"verdict_quote": "好。就这个了。这个就做官方的UI模板吧。你后面按照这个吧里面的也设计出来。设计一套。然后给codex交接一下。让他继续开发。记着你的设计别搞偏了。是编号决定在哪个域。那个域会浮上来。然后出现登录界面。",
|
||||
"locked_constraints": [
|
||||
"流程铁律：编号决定域→域浮起→才出登录界面；两道门不同屏",
|
||||
"首页=光湖语言世界本身（湖面+五域环抱+中央编号光池），官方感靠大字重/官方文案/有序，不靠去湖化",
|
||||
"三名归位：HoloLake标题栏/技术名天空位大字/GH-AIOS+全称题记",
|
||||
"字纪律：字重500起、标签600-700、字色深、一屏字数最小化",
|
||||
"文案纪律：官方正式系统语气，禁大白话/鸡汤",
|
||||
"动效纪律继承v1.2：波光粼粼+雾光+水湾呼吸悬浮，禁机械形/硬线/线形流动",
|
||||
"令牌继承五色湖v1.3定版；亮色主题重配对比度"
|
||||
],
|
||||
"rejected_variants": [
|
||||
"v0.1 湖面版：字体细/字多/文案日常",
|
||||
"v0.2 静底无湖版：判太丑，悬浮动态被砍，语言世界被拉回传统",
|
||||
"v0.3 水湾横排+下挂面板版：编号输入未被五域包裹，仍是传统表单感"
|
||||
],
|
||||
"handover": "ui-template-handoff-to-codex-20260816.md（REPO-012 同目录 references/）",
|
||||
"status": "LOCKED"
|
||||
}
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
# HoloLake 官方 UI 模板交接件 · 铸渊 → Codex · 2026-08-16
|
||||
|
||||
> 状态：DESIGN_LOCKED_AND_HANDED_OVER
|
||||
> 主权者：冰朔 ICE-GL∞ · 设计：铸渊 ICE-P-ZY001（QoderWork CN）· 实现承接：Codex 开发线
|
||||
> 定版依据：冰朔 2026-08-16 终判"好。就这个了。这个就做官方的 UI 模板吧"
|
||||
|
||||
## 1 · 交接物清单
|
||||
|
||||
| 件 | 仓库路径（REPO-012 · bingshuo/guanghu-ice-heart） |
|
||||
|---|---|
|
||||
| 官方登录模板（定版原型） | `skills/shared/guanghu-client-ui-brain/preview/official-login-template-v0.4-locked.html` |
|
||||
| 内部屏一套（域首页/频道全景/子频道/知识/天气） | `skills/shared/guanghu-client-ui-brain/preview/inner-screens-v0.1.html` |
|
||||
| 本交接件 | `skills/shared/guanghu-client-ui-brain/references/ui-template-handoff-to-codex-20260816.md` |
|
||||
| 过关回执 | `skills/shared/guanghu-client-ui-brain/references/experience-receipts/EXP-20260816-109-OFFICIAL-LOGIN-TEMPLATE-LOCKED.json` |
|
||||
| 令牌基础（五色湖 v1.3 定版） | `skills/shared/guanghu-client-ui-brain/references/theme-tokens-five-lakes.md` |
|
||||
| 首页 v1.2 定版规格（动效纪律/可读性底线） | `skills/shared/guanghu-client-ui-brain/references/home-screen-style-locked-v1.2.md` |
|
||||
|
||||
## 2 · 模板宪法（⊢ 实现不得偏离）
|
||||
|
||||
1. **流程铁律**：编号决定用户在哪个域 → 那个域从湖面浮起/亮起 → 才出现登录界面（域凭证）。
|
||||
两道门（编号门、账号密码门）**不同屏**；编号未验证前不出现任何账号密码控件。
|
||||
2. **首页 = 光湖语言世界本身**：湖面（波光粼粼+雾光）、五域环抱中央编号光池。
|
||||
官方感来自大字重、官方文案、有序排布；**不是**把湖去掉做成传统表单。
|
||||
3. **三名归位**：HoloLake = 标题栏位；光湖语言系统·通用人工智能操作平台 = 天空位大字（34px/700 级）；
|
||||
GH-AIOS + 法定全称 = 底部题记位。加新名字先定位次，不顶替。
|
||||
4. **字纪律**：字重 500 起、标签/主文 600–700、字色深（透明度宁高勿低）；一屏字数最小化。
|
||||
5. **文案纪律**：官方正式系统语气，禁大白话、禁鸡汤。欢迎语定版格式："编号 X · 欢迎登入光湖语言世界"。
|
||||
6. **动效纪律**（继承 v1.2）：星呼吸 4–7s、碎光闪烁 2.6–6.6s 随机、柔光缓移 24–30s、涟漪 5.5s；
|
||||
禁机械形（塔/柱/拱/栅格）、禁 1px 硬线切割湖面、禁线形流动、禁快闪；全部低开销 CSS，禁重 WebGL。
|
||||
7. **主题**：令牌继承五色湖 v1.3 定版（换主题=换一组 CSS 变量，意象/布局/动效/文案不动）；
|
||||
亮色主题必须重配文字/水湾/碎光对比度，阅读浮面亮色用高不透白底深墨字、无顶光扫射。
|
||||
|
||||
## 3 · 登录流程状态机（照此实现）
|
||||
|
||||
```text
|
||||
S0 编号门：湖面 + 五域环抱 + 中央编号光池（静候态：光晕 + 一行"编号验证 · 进入世界的第一个入口"）
|
||||
└ 点击光池 → 光池翻开成输入面（无边框输入 + ∞ 开关 + 实心金验证钮）
|
||||
S1 验证中：编号送灯塔 resolve（lighthouse resolve 接口已实勘可用，ICE-GL∞ 返回 RESOLVED + 域归属）
|
||||
└ 非法 → "查无此编号 · 源头拒绝加载"（不猜不编）；离线 → 温和告知不放行
|
||||
S2 路由开门：RESOLVED 行浮现 → 编号所属域浮起（放大/升起）+ 暖金开门扩散环 →
|
||||
欢迎语大字"编号 X · 欢迎登入光湖语言世界" + RESOLVED · 域 · 已接入
|
||||
S3 域凭证：域凭证浮面从中央浮起（账号/密码 + 登录 + 题记"凭证开门 · 表在仓里 · 哈希记史"）
|
||||
└ 路由规则：编号绑定真实代码仓库+服务器 → 登录模块；编号无绑定仓库 → 内置仓库注册模块
|
||||
S4 进入域首页（世界在发生什么）→ 永恒湖心 → 频道全景 → 无限嵌套钻取
|
||||
```
|
||||
|
||||
## 4 · 内部屏结构（inner-screens-v0.1）
|
||||
|
||||
- **域首页**：世界广播（湖面漂光字，官方短句）+ 域公告（注册表·只读）+ 协议版本 + 永恒湖心系统主水湾（暖金焦点，进入私人系统）
|
||||
- **频道全景**：我的子频道（焦点）/ 光之湖（人格体居所）/ 知识空间 —— 水湾即路径，点击展开下一层湖
|
||||
- **子频道**：业务航道并列（B线·短剧 / A线·编程 / 图视频素材库），无限嵌套同构
|
||||
- **知识空间**：阅读浮面（可读性令牌：暗=深玻璃浅字，亮=高不透白深墨）
|
||||
- **湖面天气**（回执·状态）：状态不做表格，做湖面漂光行（近场代理/可续接会话/主控租约/PNCC/MCP）
|
||||
|
||||
## 5 · 工程注意
|
||||
|
||||
- 现有 v0.4.0 的 broker/PNCC/灯塔/near-field 协议层**不动**，本交接只换呈现层。
|
||||
- 原型内全部 CSS 令牌与动画可直接移植；Tauri webview 内字体用系统 PingFang，外链字体必须非阻塞。
|
||||
- ∞ 开关语义：编号含无限符号时启用（现网登录页已有此控件，保持一致）。
|
||||
- MCP 兼容通道在 UI 上只出现在状态位（门口兼容/恢复），不做主路径。
|
||||
- 后续新屏一律按本模板语言出；新判词驱动新改动，判词入 experience-receipts/。
|
||||
|
||||
## 6 · 边界
|
||||
|
||||
⊢ 本件是设计交接，不授予 Codex 部署、发布、服务器写入权限；实现走现有开发车道与回执门。
|
||||
⊢ 定版件改动须新判词驱动；Codex 实现中发现与正本冲突，回报冰朔裁决，不自行解释。
|
||||
Loading…
Reference in a new issue