冰朔
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 认知六登记
393 lines
25 KiB
HTML
393 lines
25 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.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>
|