冰朔
947be9e06d
冰朔 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 认知六登记
362 lines
24 KiB
HTML
362 lines
24 KiB
HTML
<!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>
|