冰朔
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 实例）
393 lines
24 KiB
HTML
393 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>光湖 · HoloLake 桌面主题预览 · 湖面映星 v1.3 · 五色湖</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.3 · 五色湖
|
||
首页风格已定版（v1.2）：天、湖、波光粼粼、五个水湾、三名归位。
|
||
本版=令牌派落地验证：换主题=换一组变量，布局与意象分毫不动。
|
||
五色：夜湖星光（暗·默认）/ 晨湖曦光（亮）/ 星云紫夜（暗）/ 烛畔暖湖（暖暗）/ 清浅澄湖（冷亮）
|
||
═══════════════════════════════════════════════════════════ */
|
||
: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,.13); --nebula-b:rgba(138,111,201,.05);
|
||
--star-core:#F7EBC8; --star-bright:#FFEFC2;
|
||
--star-dim:rgba(247,235,200,.55); --star-faint:rgba(247,235,200,.28);
|
||
--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);
|
||
--tb-bg:rgba(10,16,30,.35); --tb-border:rgba(202,216,255,.06);
|
||
--glass:rgba(178,198,255,.045); --glass-hover:rgba(178,198,255,.075);
|
||
--glass-edge:rgba(202,216,255,.13); --glass-edge-hover:rgba(247,235,200,.34);
|
||
--glass-top:rgba(255,255,255,.06);
|
||
--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,.16); --pool-cool-glow:rgba(157,180,255,.4);
|
||
--pool-warm-core:rgba(255,244,210,1); --pool-warm-mid:rgba(247,235,200,.6);
|
||
--pool-warm-halo-a:rgba(247,235,200,.34); --pool-warm-halo-b:rgba(247,235,200,.12);
|
||
--pool-warm-ring:rgba(247,235,200,.22);
|
||
--pool-warm-glow:rgba(247,235,200,.6); --pool-warm-glow-soft:rgba(247,235,200,.22);
|
||
--font-cn:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei UI","Microsoft YaHei",sans-serif;
|
||
--font-latin:"Sora",var(--font-cn);
|
||
}
|
||
/* —— 主题二 · 晨湖曦光（亮色）—— */
|
||
.t-dawn{
|
||
--bg-a:#F5F7FC; --bg-b:#EAEFF8; --bg-c:#DFE8F4; --bg-d:#D3E0EF;
|
||
--window-border:rgba(30,50,90,.14);
|
||
--nebula-a:rgba(122,144,220,.12); --nebula-b:rgba(240,196,150,.12);
|
||
--star-core:#C9A24B; --star-bright:#A96F2C;
|
||
--star-dim:rgba(150,110,40,.6); --star-faint:rgba(120,100,70,.35);
|
||
--text-primary:rgba(22,33,58,.94); --text-body:rgba(36,49,76,.86);
|
||
--text-aux:rgba(72,88,120,.62); --text-faint:rgba(98,112,142,.48);
|
||
--tb-bg:rgba(255,255,255,.42); --tb-border:rgba(30,50,90,.08);
|
||
--glass:rgba(255,255,255,.34); --glass-hover:rgba(255,255,255,.52);
|
||
--glass-edge:rgba(30,50,90,.12); --glass-edge-hover:rgba(180,130,40,.42);
|
||
--glass-top:rgba(255,255,255,.65);
|
||
--mist-a:rgba(255,255,255,.55); --mist-b:rgba(250,214,150,.3);
|
||
--shine-cool:rgba(255,255,255,.5); --shine-warm:rgba(250,214,150,.42);
|
||
--glint-cool-core:rgba(255,255,255,.98); --glint-cool-mid:rgba(255,255,255,.4); --glint-cool-glow:rgba(255,255,255,.85);
|
||
--glint-warm-core:rgba(190,146,60,.9); --glint-warm-mid:rgba(190,146,60,.3); --glint-warm-glow:rgba(190,146,60,.5);
|
||
--pool-cool-core:rgba(96,124,205,.9); --pool-cool-mid:rgba(96,124,205,.42);
|
||
--pool-cool-halo-a:rgba(96,124,205,.24); --pool-cool-halo-b:rgba(96,124,205,.09);
|
||
--pool-cool-ring:rgba(96,124,205,.2); --pool-cool-glow:rgba(96,124,205,.35);
|
||
--pool-warm-core:rgba(172,112,42,.96); --pool-warm-mid:rgba(172,112,42,.5);
|
||
--pool-warm-halo-a:rgba(201,162,75,.34); --pool-warm-halo-b:rgba(201,162,75,.13);
|
||
--pool-warm-ring:rgba(172,112,42,.26);
|
||
--pool-warm-glow:rgba(201,162,75,.5); --pool-warm-glow-soft:rgba(201,162,75,.2);
|
||
}
|
||
/* —— 主题三 · 星云紫夜（暗·紫）—— */
|
||
.t-nebula{
|
||
--bg-a:#150E26; --bg-b:#160F28; --bg-c:#0E0919; --bg-d:#080510;
|
||
--window-border:rgba(210,198,255,.11);
|
||
--nebula-a:rgba(138,111,201,.24); --nebula-b:rgba(91,111,196,.11);
|
||
--star-core:#EDE4F6; --star-bright:#F8F1FF;
|
||
--star-dim:rgba(230,220,245,.55); --star-faint:rgba(210,200,235,.3);
|
||
--text-primary:rgba(238,234,248,.96); --text-body:rgba(226,220,240,.88);
|
||
--text-aux:rgba(202,194,226,.62); --text-faint:rgba(186,178,214,.42);
|
||
--tb-bg:rgba(18,12,34,.4); --tb-border:rgba(210,198,255,.08);
|
||
--glass:rgba(196,178,255,.05); --glass-hover:rgba(196,178,255,.09);
|
||
--glass-edge:rgba(210,198,255,.14); --glass-edge-hover:rgba(239,217,168,.4);
|
||
--glass-top:rgba(255,255,255,.07);
|
||
--mist-a:rgba(170,150,255,.12); --mist-b:rgba(239,217,168,.05);
|
||
--shine-cool:rgba(170,150,255,.09); --shine-warm:rgba(239,217,168,.08);
|
||
--glint-cool-core:rgba(224,214,255,.92); --glint-cool-mid:rgba(170,150,255,.24); --glint-cool-glow:rgba(170,150,255,.45);
|
||
--glint-warm-core:rgba(239,217,168,.95); --glint-warm-mid:rgba(239,217,168,.26); --glint-warm-glow:rgba(239,217,168,.5);
|
||
--pool-cool-core:rgba(226,216,255,.95); --pool-cool-mid:rgba(170,150,255,.5);
|
||
--pool-cool-halo-a:rgba(170,150,255,.3); --pool-cool-halo-b:rgba(170,150,255,.1);
|
||
--pool-cool-ring:rgba(170,150,255,.18); --pool-cool-glow:rgba(170,150,255,.42);
|
||
--pool-warm-core:rgba(255,240,205,1); --pool-warm-mid:rgba(239,217,168,.62);
|
||
--pool-warm-halo-a:rgba(239,217,168,.34); --pool-warm-halo-b:rgba(239,217,168,.12);
|
||
--pool-warm-ring:rgba(239,217,168,.24);
|
||
--pool-warm-glow:rgba(239,217,168,.6); --pool-warm-glow-soft:rgba(239,217,168,.22);
|
||
}
|
||
/* —— 主题四 · 烛畔暖湖（暖暗）—— */
|
||
.t-candle{
|
||
--bg-a:#1B130B; --bg-b:#181108; --bg-c:#100B05; --bg-d:#0A0703;
|
||
--window-border:rgba(255,220,170,.11);
|
||
--nebula-a:rgba(214,150,80,.13); --nebula-b:rgba(160,110,70,.07);
|
||
--star-core:#FFD9A0; --star-bright:#FFE7BE;
|
||
--star-dim:rgba(255,217,160,.55); --star-faint:rgba(230,190,140,.3);
|
||
--text-primary:rgba(246,238,226,.96); --text-body:rgba(236,226,210,.88);
|
||
--text-aux:rgba(214,198,176,.62); --text-faint:rgba(196,180,158,.42);
|
||
--tb-bg:rgba(24,17,9,.4); --tb-border:rgba(255,220,170,.08);
|
||
--glass:rgba(255,214,160,.045); --glass-hover:rgba(255,214,160,.08);
|
||
--glass-edge:rgba(255,220,170,.13); --glass-edge-hover:rgba(255,200,120,.4);
|
||
--glass-top:rgba(255,255,255,.06);
|
||
--mist-a:rgba(255,196,110,.09); --mist-b:rgba(255,214,140,.04);
|
||
--shine-cool:rgba(214,160,100,.08); --shine-warm:rgba(255,196,110,.09);
|
||
--glint-cool-core:rgba(240,214,178,.85); --glint-cool-mid:rgba(214,178,140,.22); --glint-cool-glow:rgba(214,178,140,.4);
|
||
--glint-warm-core:rgba(255,214,140,.95); --glint-warm-mid:rgba(255,196,110,.28); --glint-warm-glow:rgba(255,196,110,.55);
|
||
--pool-cool-core:rgba(236,216,188,.92); --pool-cool-mid:rgba(214,178,140,.45);
|
||
--pool-cool-halo-a:rgba(214,178,140,.26); --pool-cool-halo-b:rgba(214,178,140,.09);
|
||
--pool-cool-ring:rgba(214,178,140,.18); --pool-cool-glow:rgba(214,178,140,.35);
|
||
--pool-warm-core:rgba(255,226,168,1); --pool-warm-mid:rgba(255,196,110,.6);
|
||
--pool-warm-halo-a:rgba(255,196,110,.32); --pool-warm-halo-b:rgba(255,196,110,.11);
|
||
--pool-warm-ring:rgba(255,196,110,.24);
|
||
--pool-warm-glow:rgba(255,196,110,.6); --pool-warm-glow-soft:rgba(255,196,110,.22);
|
||
}
|
||
/* —— 主题五 · 清浅澄湖（冷亮）—— */
|
||
.t-clear{
|
||
--bg-a:#F1F5F8; --bg-b:#E8EEF3; --bg-c:#DEE7ED; --bg-d:#D2DEE7;
|
||
--window-border:rgba(20,50,80,.14);
|
||
--nebula-a:rgba(100,140,180,.1); --nebula-b:rgba(140,170,200,.08);
|
||
--star-core:#5F7E9F; --star-bright:#41628A;
|
||
--star-dim:rgba(70,95,122,.55); --star-faint:rgba(90,110,135,.35);
|
||
--text-primary:rgba(20,36,52,.94); --text-body:rgba(34,50,68,.86);
|
||
--text-aux:rgba(66,86,106,.62); --text-faint:rgba(92,110,128,.48);
|
||
--tb-bg:rgba(255,255,255,.4); --tb-border:rgba(20,50,80,.08);
|
||
--glass:rgba(255,255,255,.32); --glass-hover:rgba(255,255,255,.5);
|
||
--glass-edge:rgba(20,50,80,.12); --glass-edge-hover:rgba(78,112,150,.42);
|
||
--glass-top:rgba(255,255,255,.65);
|
||
--mist-a:rgba(255,255,255,.55); --mist-b:rgba(190,214,234,.35);
|
||
--shine-cool:rgba(255,255,255,.5); --shine-warm:rgba(240,222,184,.4);
|
||
--glint-cool-core:rgba(255,255,255,.98); --glint-cool-mid:rgba(255,255,255,.4); --glint-cool-glow:rgba(255,255,255,.85);
|
||
--glint-warm-core:rgba(170,138,70,.88); --glint-warm-mid:rgba(170,138,70,.28); --glint-warm-glow:rgba(170,138,70,.5);
|
||
--pool-cool-core:rgba(78,112,150,.9); --pool-cool-mid:rgba(78,112,150,.42);
|
||
--pool-cool-halo-a:rgba(78,112,150,.22); --pool-cool-halo-b:rgba(78,112,150,.08);
|
||
--pool-cool-ring:rgba(78,112,150,.2); --pool-cool-glow:rgba(78,112,150,.35);
|
||
--pool-warm-core:rgba(158,122,52,.95); --pool-warm-mid:rgba(158,122,52,.5);
|
||
--pool-warm-halo-a:rgba(170,138,70,.3); --pool-warm-halo-b:rgba(170,138,70,.11);
|
||
--pool-warm-ring:rgba(158,122,52,.26);
|
||
--pool-warm-glow:rgba(170,138,70,.5); --pool-warm-glow-soft:rgba(170,138,70,.2);
|
||
}
|
||
|
||
*{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,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 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;
|
||
transition:background .6s ease}
|
||
@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,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-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:var(--glass-hover);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%,var(--mist-a),var(--mist-b) 55%,transparent 78%);
|
||
filter:blur(11px)}
|
||
|
||
/* 波光粼粼 */
|
||
.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}
|
||
.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;
|
||
animation:rise 1s cubic-bezier(.22,1,.36,1) both}
|
||
.pool .halo{position:relative;border-radius:50%;pointer-events:none;filter:blur(2px);
|
||
background:radial-gradient(closest-side,var(--pool-cool-halo-a),var(--pool-cool-halo-b) 46%,transparent 72%);
|
||
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%,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 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,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}
|
||
.pool.open .ring{border-color:var(--pool-warm-ring)}
|
||
.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 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)}}
|
||
|
||
.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)}}
|
||
|
||
/* 预览用配色切换器（正式产品里放设置页） */
|
||
.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:11.5px;color:rgba(160,172,200,.55);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,.85)}
|
||
.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)}
|
||
.sw-nebula{background:radial-gradient(circle at 34% 30%,#EDE4F6 6%,#160F28 60%,#080510)}
|
||
.sw-candle{background:radial-gradient(circle at 34% 30%,#FFD9A0 6%,#181108 60%,#0A0703)}
|
||
.sw-clear{background:radial-gradient(circle at 34% 30%,#5F7E9F 6%,#E8EEF3 55%,#D2DEE7)}
|
||
.caption{font-size:12px;color:rgba(160,172,200,.42);margin-top:14px;letter-spacing:.05em;text-align:center}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="desk-glow"></div>
|
||
|
||
<div class="window" id="win">
|
||
<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>
|
||
|
||
<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="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="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>
|
||
<button class="theme-btn" data-theme="t-nebula"><i class="sw sw-nebula"></i><span>星云紫夜</span></button>
|
||
<button class="theme-btn" data-theme="t-candle"><i class="sw sw-candle"></i><span>烛畔暖湖</span></button>
|
||
<button class="theme-btn" data-theme="t-clear"><i class="sw sw-clear"></i><span>清浅澄湖</span></button>
|
||
</div>
|
||
<div class="caption">光湖桌面主题预览 · 湖面映星 v1.3 · 五色湖：换主题=换一组令牌，意象与布局不动 · 仅供冰朔评判</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 warm = Math.random() < (nearCenter ? .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(){
|
||
var win = document.getElementById('win');
|
||
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');
|
||
win.className = 'window ' + (b.getAttribute('data-theme') || '');
|
||
});
|
||
});
|
||
})();
|
||
</script>
|
||
</body>
|
||
</html>
|