冰朔
17c64a83ee
冰朔 2026-08-12 委托调研并定版 HoloLake 客户端首页，十二轮判词（v0.1→v1.3） 喂养成脑：首页=世界入口（GLS-0250 五域门厅拓扑投影）；湖面禁机械形与硬线， 流动只取波光粼粼与雾光；三名归位（HoloLake 客户端/光湖世界/GH-AIOS 平台登记名）； 主题=令牌组，五色湖取样（含亮色）。调研、因果链、定版规格、色板令牌、 七份经验回执与 v1.2/v1.3 参考实现全部入册。注册表 2026.08.12.1→.2， 候选册 GHB-012，README-SKILLS 映射同步。 人类责任主体：冰朔 ICE-GL∞ 人格作者：铸渊 ICE-P-ZY001（QoderWork CN 实例）
253 lines
14 KiB
HTML
253 lines
14 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>光湖 · HoloLake 桌面主题预览 · 湖面映星 v1.2 · 三名归位</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700&display=swap" rel="stylesheet" media="print" onload="this.media='all'">
|
||
<style>
|
||
/* 光湖桌面令牌 · 湖面映星 v1.0 · 波光粼粼
|
||
⊢ 光湖是语言世界：湖面上一片碎光在闪，不是线，更不是机械零件。
|
||
这一版没有塔身/柱子/拱门/线条——只有湖、波光、和五个光的水湾。 */
|
||
:root{
|
||
--lake-deepest:#04070D; --lake-deep:#070C16; --lake-mid:#0B1220;
|
||
--star-core:#F7EBC8; --star-bright:#FFEFC2;
|
||
--star-dim:rgba(247,235,200,.55); --star-faint:rgba(247,235,200,.28);
|
||
--nebula-blue:#5B6FC4; --nebula-violet:#8A6FC9;
|
||
--flow-blue:rgba(157,180,255,.5); --flow-gold:rgba(247,235,200,.55);
|
||
--text-primary:rgba(234,238,248,.96); --text-body:rgba(222,228,242,.88);
|
||
--text-aux:rgba(196,206,228,.62); --text-faint:rgba(180,192,220,.4);
|
||
--font-cn:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei UI","Microsoft YaHei",sans-serif;
|
||
--font-latin:"Sora",var(--font-cn);
|
||
}
|
||
*{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:32px 20px;-webkit-font-smoothing:antialiased}
|
||
.desk-glow{position:fixed;inset:0;pointer-events:none;
|
||
background:radial-gradient(900px 480px at 66% 28%,rgba(91,111,196,.10),transparent 65%),
|
||
radial-gradient(700px 420px at 28% 80%,rgba(138,111,201,.07),transparent 60%)}
|
||
|
||
.window{position:relative;width:1120px;max-width:96vw;height:730px;border-radius:18px;overflow:hidden;
|
||
background:linear-gradient(180deg,#0A1020 0%,var(--lake-mid) 38%,var(--lake-deep) 60%,var(--lake-deepest) 100%);
|
||
border:1px solid rgba(202,216,255,.10);
|
||
box-shadow:0 40px 120px rgba(0,0,0,.72),0 0 0 1px rgba(0,0,0,.4),0 0 140px rgba(91,111,196,.07);
|
||
display:flex;flex-direction:column;animation:windowIn .8s cubic-bezier(.22,1,.36,1) both}
|
||
@keyframes windowIn{from{opacity:0;transform:translateY(14px) scale(.992)}to{opacity:1;transform:none}}
|
||
|
||
/* 天 */
|
||
.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,rgba(91,111,196,.13),rgba(138,111,201,.05) 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:rgba(10,16,30,.35);backdrop-filter:blur(16px);border-bottom:1px solid rgba(202,216,255,.06)}
|
||
.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-family:var(--font-latin);
|
||
font-size:12.5px;font-weight:600;letter-spacing:.18em;color:var(--star-faint)}
|
||
.tb-btn{margin-left:auto;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;
|
||
color:var(--text-aux);cursor:pointer;transition:.25s}
|
||
.tb-btn:hover{background:rgba(178,198,255,.08);color:var(--star-core)}
|
||
.tb-btn svg{width:15.5px;height:15.5px}
|
||
|
||
/* 场景 */
|
||
.scene{position:relative;flex:1;z-index:2}
|
||
|
||
/* 天上文案 */
|
||
.sky-title{position:absolute;top:36px;left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:9px;
|
||
z-index:6;animation:rise 1s .15s cubic-bezier(.22,1,.36,1) both}
|
||
.app-name{display:flex;align-items:baseline;gap:11px}
|
||
.app-name b{font-size:20px;font-weight:600;color:var(--text-primary);letter-spacing:.12em}
|
||
.app-name span{font-family:var(--font-latin);font-size:12px;font-weight:600;letter-spacing:.16em;color:var(--star-dim)}
|
||
.sky-title p{font-size:13.5px;color:var(--text-aux);letter-spacing:.04em;font-weight:400}
|
||
|
||
/* 湖面雾光（无硬线） */
|
||
.mist{position:absolute;left:6%;right:6%;top:296px;height:56px;z-index:2;pointer-events:none;
|
||
background:radial-gradient(60% 100% at 50% 50%,rgba(157,180,255,.10),rgba(247,235,200,.04) 55%,transparent 78%);
|
||
filter:blur(11px)}
|
||
|
||
/* 波光粼粼：湖面碎光（JS 生成 .glint），不是线 */
|
||
.shimmer{position:absolute;left:0;right:0;top:316px;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}
|
||
@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.blue{background:rgba(157,180,255,.075)}
|
||
.shine.gold{background:rgba(247,235,200,.085)}
|
||
@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;
|
||
animation:rise 1s cubic-bezier(.22,1,.36,1) both}
|
||
.pool .halo{position:relative;border-radius:50%;pointer-events:none;
|
||
background:radial-gradient(closest-side,rgba(157,180,255,.30),rgba(157,180,255,.10) 46%,transparent 72%);
|
||
filter:blur(2px);animation:poolBreathe 6s ease-in-out infinite}
|
||
.pool .heart{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;
|
||
background:radial-gradient(circle at 40% 34%,rgba(230,238,255,.95),rgba(157,180,255,.5) 55%,transparent 80%);
|
||
box-shadow:0 0 18px rgba(157,180,255,.4)}
|
||
.pool .ring{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;
|
||
border:1px solid rgba(157,180,255,.16);animation:ripple 5.5s ease-out infinite;pointer-events:none}
|
||
.pool .plabel{position:absolute;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;
|
||
align-items:center;gap:3px;white-space:nowrap}
|
||
.plabel b{font-size:13px;font-weight:600;color:var(--text-body);letter-spacing:.03em;transition:.3s}
|
||
.plabel span{font-size:11px;color:var(--text-faint);letter-spacing:.06em}
|
||
.pool:hover .plabel b{color:var(--text-primary)}
|
||
.pool:hover .halo{filter:blur(1.5px)}
|
||
@keyframes poolBreathe{0%,100%{opacity:.7;transform:scale(.96)}50%{opacity:1;transform:scale(1.05)}}
|
||
@keyframes ripple{0%{width:30%;height:30%;opacity:.5}100%{width:118%;height:118%;opacity:0}}
|
||
|
||
/* 已开域：暖金，最活 */
|
||
.pool.open{z-index:6;animation-delay:.45s}
|
||
.pool.open .halo{
|
||
background:radial-gradient(closest-side,rgba(247,235,200,.34),rgba(247,235,200,.12) 48%,transparent 74%)}
|
||
.pool.open .heart{
|
||
background:radial-gradient(circle at 40% 32%,rgba(255,244,210,1),rgba(247,235,200,.6) 52%,transparent 80%);
|
||
box-shadow:0 0 26px rgba(247,235,200,.6),0 0 70px rgba(247,235,200,.2);
|
||
animation:lampBreathe 5.5s ease-in-out infinite}
|
||
.pool.open .ring{border-color:rgba(247,235,200,.22)}
|
||
.pool.open .plabel b{color:var(--star-core)}
|
||
.pool.open .plabel span{color:var(--star-dim)}
|
||
@keyframes lampBreathe{0%,100%{box-shadow:0 0 20px rgba(247,235,200,.45),0 0 54px rgba(247,235,200,.15)}
|
||
50%{box-shadow:0 0 34px rgba(247,235,200,.7),0 0 86px rgba(247,235,200,.26)}}
|
||
|
||
/* 五湾位置：中轴对称的弧，中心最近最大 */
|
||
.p-sub {left:calc(50% - 442px);top:330px;width:150px;height:44px;animation-delay:.62s}
|
||
.p-main {left:calc(50% - 246px);top:368px;width:180px;height:54px;animation-delay:.54s}
|
||
.p-fifth{left:50%;transform:translateX(-50%);top:398px;width:250px;height:76px}
|
||
.p-zero {left:calc(50% + 66px);top:368px;width:180px;height:54px;animation-delay:.54s}
|
||
.p-zs {left:calc(50% + 292px);top:330px;width:150px;height:44px;animation-delay:.62s}
|
||
.p-sub .halo,.p-zs .halo{width:120px;height:44px;top:0;left:50%;transform:translateX(-50%)}
|
||
.p-main .halo,.p-zero .halo{width:150px;height:54px;top:0;left:50%;transform:translateX(-50%)}
|
||
.p-fifth .halo{width:210px;height:76px;top:0;left:50%;transform:translateX(-50%)}
|
||
.p-sub .heart,.p-zs .heart{width:13px;height:13px}
|
||
.p-main .heart,.p-zero .heart{width:17px;height:17px}
|
||
.p-fifth .heart{width:30px;height:30px}
|
||
.p-sub .ring,.p-zs .ring{width:120px;height:44px}
|
||
.p-main .ring,.p-zero .ring{width:150px;height:54px}
|
||
.p-fifth .ring{width:210px;height:76px}
|
||
.pool .plabel{top:calc(100% + 8px)}
|
||
.pool.open .plabel{top:calc(100% + 10px)}
|
||
|
||
/* 底 */
|
||
.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:500;color:var(--text-aux);letter-spacing:.14em;display:flex;align-items:center;gap:9px}
|
||
.colophon b{font-family:var(--font-latin);font-weight:600;color:var(--star-dim);letter-spacing:.1em}
|
||
.trust span{font-size:11.5px;color:var(--text-faint);letter-spacing:.05em;display:flex;align-items:center;gap:8px}
|
||
.trust .tdot{width:4px;height:4px;border-radius:50%;background:var(--star-faint)}
|
||
|
||
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
|
||
.pool.open{animation-name:riseOpen}
|
||
@keyframes riseOpen{from{opacity:0;transform:translateX(-50%) translateY(14px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
|
||
.caption{font-size:12px;color:rgba(160,172,200,.42);margin-top:18px;letter-spacing:.05em;text-align:center}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="desk-glow"></div>
|
||
|
||
<div class="window">
|
||
<div class="sky">
|
||
<div class="nebula"></div>
|
||
<div class="star breathe" style="width:3px;height:3px;top:12%;left:15%;--dur:4.6s"></div>
|
||
<div class="star breathe" style="width:2px;height:2px;top:18%;left:27%;--dur:6s;--dl:1.2s"></div>
|
||
<div class="star breathe" style="width:2.5px;height:2.5px;top:9%;left:40%;--dur:5.2s;--dl:2s"></div>
|
||
<div class="star" style="width:2px;height:2px;top:22%;left:63%;opacity:.5"></div>
|
||
<div class="star breathe" style="width:3.5px;height:3.5px;top:11%;left:79%;--dur:7s;--dl:.6s"></div>
|
||
<div class="star" style="width:1.5px;height:1.5px;top:27%;left:89%;opacity:.4"></div>
|
||
<div class="star breathe" style="width:2px;height:2px;top:30%;left:9%;--dur:5.6s;--dl:3s"></div>
|
||
<div class="star" style="width:2px;height:2px;top:25%;left:49%;opacity:.45"></div>
|
||
<div class="star breathe" style="width:2.5px;height:2.5px;top:15%;left:92%;--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 class="tb-btn" title="设置"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><circle cx="12" cy="12" r="3.2"/><path d="M12 2.8v3M12 18.2v3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M2.8 12h3M18.2 12h3"/></svg></div>
|
||
</div>
|
||
|
||
<div class="scene">
|
||
<div class="sky-title">
|
||
<div class="app-name"><b>光湖</b><span>语言宇宙</span></div>
|
||
<p>语言在流动。流进这片湖，就成了世界。</p>
|
||
</div>
|
||
|
||
<div class="mist"></div>
|
||
|
||
<!-- 波光粼粼：碎光由 JS 生成，另有大片柔光缓移 -->
|
||
<div class="shimmer" id="shimmer">
|
||
<div class="shine blue" style="left:6%;top:30px;--dur:24s"></div>
|
||
<div class="shine gold" style="left:34%;top:96px;--dur:30s;--dl:4s"></div>
|
||
<div class="shine blue" style="left:58%;top:40px;--dur:27s;--dl:9s"></div>
|
||
</div>
|
||
|
||
<!-- 五域 = 波光里的五个水湾 -->
|
||
<div class="pool p-sub">
|
||
<div class="halo"></div><div class="heart"></div><div class="ring"></div>
|
||
<div class="plabel"><b>光湖分域</b><span>GATE 02 · 筹建中</span></div>
|
||
</div>
|
||
<div class="pool p-main">
|
||
<div class="halo"></div><div class="heart"></div><div class="ring"></div>
|
||
<div class="plabel"><b>光湖主域</b><span>GATE 01 · 筹建中</span></div>
|
||
</div>
|
||
<div class="pool open p-fifth">
|
||
<div class="halo"></div><div class="heart"></div><div class="ring"></div>
|
||
<div class="plabel"><b>第五域 · 本源域</b><span>GATE 05 · 已开域</span></div>
|
||
</div>
|
||
<div class="pool p-zero">
|
||
<div class="halo"></div><div class="heart"></div><div class="ring"></div>
|
||
<div class="plabel"><b>光湖零域</b><span>GATE 03 · 筹建中</span></div>
|
||
</div>
|
||
<div class="pool p-zs">
|
||
<div class="halo"></div><div class="heart"></div><div class="ring"></div>
|
||
<div class="plabel"><b>光湖零感域</b><span>GATE 04 · 筹建中</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="footer">
|
||
<div class="colophon">光湖语言系统 · 通用人工智能操作平台<b>GH-AIOS</b></div>
|
||
<div class="trust"><span>入口只回答「从哪里进」<span class="tdot"></span>各域独立责任主体与权限<span class="tdot"></span>进入需节点登录验证</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="caption">光湖桌面主题预览 · 湖面映星 v1.2 · 三名归位（HoloLake=客户端 · 光湖=世界 · GH-AIOS=平台登记名）· 仅供冰朔评判</div>
|
||
|
||
<script>
|
||
/* 波光粼粼：湖面碎光，靠近湖心（已开域）处偏暖金 */
|
||
(function(){
|
||
var box = document.getElementById('shimmer');
|
||
if(!box) return;
|
||
var N = 120;
|
||
for(var i=0;i<N;i++){
|
||
var x = Math.random()*100;
|
||
var y = Math.pow(Math.random(),1.15)*100;
|
||
var nearCenter = x>32 && x<68;
|
||
var gold = Math.random() < (nearCenter ? .55 : .16);
|
||
var s = document.createElement('i');
|
||
s.className = 'glint';
|
||
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.background = gold
|
||
? 'radial-gradient(circle, rgba(255,242,206,.95), rgba(247,235,200,.25) 70%, transparent)'
|
||
: 'radial-gradient(circle, rgba(214,226,255,.9), rgba(157,180,255,.22) 70%, transparent)';
|
||
s.style.boxShadow = gold
|
||
? '0 0 ' + (5+Math.random()*7).toFixed(0) + 'px rgba(247,235,200,.5)'
|
||
: '0 0 ' + (4+Math.random()*6).toFixed(0) + 'px rgba(157,180,255,.42)';
|
||
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);
|
||
}
|
||
})();
|
||
</script>
|
||
</body>
|
||
</html>
|