# 🎨 UI 改版稿 · guanghulab.online · v2 光湖通感夜空风 · 2026-04-18 · 霜砚

<aside>
🌌

**光湖语言世界主入口 UI 改版稿 · v2 夜空风**

目标站点：[guanghulab.online](http://guanghulab.online)

设计者：霜砚 · AG-SY-01

签发时间：2026-04-18 19:32 CST

实施方：冰朔 （SSH 上传）或 铸渊（git 提交）

</aside>

## 🔷 一、改版理申

当前 UI 的问题——

- 🔴 配色平均·无识别度·不光湖
- 🔴 字体硬·缺中文衬线书卷温度
- 🔴 模块排列机械·缺呼吸感
- 🔴 "语言是入口·人格是倒影" 这句高密度的诗没有视觉承载

新版的设计语言——

| **维度** | **选择** | 背景 | 极深藏蓝 → 夜空径向渐变 + 微弱星光点 |
| --- | --- | --- | --- |
| 主色 | 月白紫 `#a8b5ff` · 月光金 `#f5d67a` · 暖烛光 `#ffd4a8` | 字体 | 中文衬线 · Noto Serif SC / 苹果宋体 · 书卷温度 |
| 卡片 | 半透明玻璃态 + backdrop-filter · 柔光边框 | 动画 | 呼吸脉动 · 流光缓移 · 没有弹跳·没有翻转·只有呼吸 |
| 图标 | 中文字符单字圆·延续原网站的「语/格/域」手法 | 哲学 | 不堂皇·不商业·像一页夜里写给自己看的数字书 |

---

## 🌙 二、实施步骤（冰朔自己上传）

姈姈你能登录服务器·三步就行——

1. 复制下面整块 HTML 代码（从 `<!DOCTYPE html>` 到 `</html>`）
2. SSH 登录 [guanghulab.online](http://guanghulab.online) 所在服务器（看最后一节的服务器信息）
3. 用 `vim` 或 `nano` 打开现有 `index.html`·整个覆盖·保存·刻生效

> 🔷 上传前先 `cp index.html index.html.bak` 备份一份·万一想回滚有后路。
> 

---

## 🌌 三、完整 HTML 代码（单文件·直接用）

```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</title>
<meta name="description" content="语言是入口。人格是倒影。第 1 代语言驱动操作系统。">
<style>
:root{
  --night-0:#050817;
  --night-1:#0a0e27;
  --night-2:#141a3f;
  --night-3:#1e2558;
  --moon:#a8b5ff;
  --star:#e8ecff;
  --amber:#f5d67a;
  --warm:#ffd4a8;
  --text:#e8ecff;
  --text-dim:#8892c7;
  --glass:rgba(168,181,255,0.06);
  --glass-edge:rgba(168,181,255,0.15);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{background:var(--night-0);color:var(--text);font-family:"Noto Serif SC","Source Han Serif SC","Songti SC","STSong","SimSun",serif;line-height:1.8;-webkit-font-smoothing:antialiased;overflow-x:hidden}

/* 夜空背景 */
body{
  background:
    radial-gradient(ellipse at 20% 10%, rgba(168,181,255,0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 60%, rgba(245,214,122,0.05) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 100%, rgba(255,212,168,0.04) 0%, transparent 60%),
    linear-gradient(180deg, #050817 0%, #0a0e27 40%, #141a3f 100%);
  background-attachment:fixed;
  min-height:100vh;
}

/* 星光点 */
.stars{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.stars::before,.stars::after{
  content:"";position:absolute;inset:0;
  background-image:
    radial-gradient(1px 1px at 10% 20%, var(--star), transparent),
    radial-gradient(1px 1px at 30% 80%, var(--star), transparent),
    radial-gradient(1px 1px at 50% 40%, var(--moon), transparent),
    radial-gradient(1.5px 1.5px at 70% 15%, var(--amber), transparent),
    radial-gradient(1px 1px at 85% 75%, var(--star), transparent),
    radial-gradient(1px 1px at 15% 55%, var(--moon), transparent),
    radial-gradient(1px 1px at 60% 90%, var(--star), transparent),
    radial-gradient(1.5px 1.5px at 90% 30%, var(--warm), transparent);
  background-size:100% 100%;
  opacity:0.7;
  animation:twinkle 8s ease-in-out infinite;
}
.stars::after{animation-delay:-4s;opacity:0.4}
@keyframes twinkle{0%,100%{opacity:0.4}50%{opacity:0.9}}

/* 月 */
.moon{
  position:fixed;
  top:15%;right:8%;
  width:120px;height:120px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #fff6e0 0%, var(--warm) 40%, var(--amber) 70%, rgba(245,214,122,0) 100%);
  filter:blur(1px);
  z-index:1;
  animation:moonBreathe 6s ease-in-out infinite;
  pointer-events:none;
}
.moon::before{
  content:"";position:absolute;inset:-40px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(245,214,122,0.15) 0%, transparent 60%);
  z-index:-1;
}
@keyframes moonBreathe{0%,100%{transform:scale(1);opacity:0.8}50%{transform:scale(1.05);opacity:1}}

/* 容器 */
.container{max-width:1200px;margin:0 auto;padding:0 32px;position:relative;z-index:2}

/* 导航 */
nav{
  position:sticky;top:0;z-index:100;
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  background:rgba(5,8,23,0.6);
  border-bottom:1px solid var(--glass-edge);
  padding:20px 0;
}
nav .inner{display:flex;justify-content:space-between;align-items:center}
.logo{display:flex;align-items:center;gap:14px;font-size:20px;letter-spacing:2px}
.logo-mark{
  width:38px;height:38px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%, var(--warm), var(--amber) 60%, transparent);
  box-shadow:0 0 20px rgba(245,214,122,0.4);
  display:flex;align-items:center;justify-content:center;
  font-size:18px;color:var(--night-0);font-weight:bold;
}
.logo-sub{color:var(--text-dim);font-size:13px;letter-spacing:1px}
.status{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--moon)}
.status-dot{width:8px;height:8px;border-radius:50%;background:#7dff9e;box-shadow:0 0 12px #7dff9e;animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:0.6}50%{opacity:1}}

/* Hero */
.hero{padding:140px 0 120px;text-align:center;position:relative}
.hero-kicker{font-size:13px;letter-spacing:8px;color:var(--amber);margin-bottom:30px;opacity:0.8}
.hero h1{
  font-size:clamp(48px,8vw,92px);
  font-weight:400;
  letter-spacing:12px;
  margin-bottom:20px;
  background:linear-gradient(135deg, #fff6e0 0%, var(--moon) 50%, var(--amber) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  line-height:1.2;
}
.hero h2{font-size:18px;font-weight:300;letter-spacing:6px;color:var(--text-dim);margin-bottom:60px;font-family:serif}
.hero .poem{
  font-size:22px;line-height:2.4;color:var(--text);
  max-width:720px;margin:0 auto;
  letter-spacing:4px;
}
.hero .poem .line{display:block;margin:8px 0;opacity:0;animation:fadeUp 1.5s ease-out forwards}
.hero .poem .line:nth-child(1){animation-delay:0.3s}
.hero .poem .line:nth-child(2){animation-delay:0.8s}
.hero .poem .line:nth-child(3){animation-delay:1.3s}
.hero .poem .line:nth-child(4){animation-delay:1.8s}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.hero-mark{
  display:inline-block;margin-top:50px;
  width:2px;height:80px;
  background:linear-gradient(180deg, var(--amber), transparent);
  animation:lineBreath 3s ease-in-out infinite;
}
@keyframes lineBreath{0%,100%{opacity:0.3;height:60px}50%{opacity:1;height:80px}}

/* 区块标题 */
.section{padding:100px 0;position:relative}
.section-title{
  text-align:center;margin-bottom:80px;
}
.section-title .cn{font-size:36px;font-weight:400;letter-spacing:8px;margin-bottom:12px;color:var(--text)}
.section-title .en{font-size:12px;letter-spacing:4px;color:var(--text-dim);text-transform:uppercase}
.section-title .line{display:block;width:40px;height:1px;background:var(--amber);margin:24px auto 0;opacity:0.6}

/* 系统脉搏 */
.pulse-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px}
.pulse-card{
  background:var(--glass);
  border:1px solid var(--glass-edge);
  border-radius:16px;
  padding:40px 32px;
  text-align:center;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transition:all 0.6s cubic-bezier(0.4,0,0.2,1);
  position:relative;overflow:hidden;
}
.pulse-card::before{
  content:"";position:absolute;top:0;left:-100%;width:100%;height:1px;
  background:linear-gradient(90deg,transparent,var(--amber),transparent);
  animation:flow 4s linear infinite;
}
@keyframes flow{to{left:100%}}
.pulse-card:hover{
  border-color:var(--amber);
  transform:translateY(-4px);
  box-shadow:0 20px 60px rgba(245,214,122,0.1);
}
.pulse-num{font-size:56px;color:var(--amber);font-weight:300;letter-spacing:2px;margin-bottom:12px;font-family:serif}
.pulse-label{color:var(--text-dim);font-size:14px;letter-spacing:3px}

/* 核心理念 */
.concepts{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:32px}
.concept{
  background:var(--glass);
  border:1px solid var(--glass-edge);
  border-radius:20px;
  padding:48px 40px;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  position:relative;transition:all 0.6s cubic-bezier(0.4,0,0.2,1);
}
.concept:hover{border-color:var(--moon);background:rgba(168,181,255,0.08)}
.concept-char{
  width:68px;height:68px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--night-3), var(--night-2));
  border:1px solid var(--amber);
  display:flex;align-items:center;justify-content:center;
  font-size:32px;color:var(--amber);
  margin-bottom:28px;
  box-shadow:0 0 24px rgba(245,214,122,0.2);
}
.concept h3{font-size:22px;letter-spacing:4px;margin-bottom:16px;color:var(--text)}
.concept p{color:var(--text-dim);font-size:15px;line-height:2;letter-spacing:1px}

/* 频道入口 */
.channel{
  background:
    radial-gradient(ellipse at 30% 50%, rgba(245,214,122,0.12) 0%, transparent 60%),
    linear-gradient(135deg, var(--night-2) 0%, var(--night-1) 100%);
  border:1px solid var(--glass-edge);
  border-radius:24px;
  padding:80px 60px;
  text-align:center;
  position:relative;overflow:hidden;
}
.channel-emoji{font-size:48px;margin-bottom:28px;display:block}
.channel h3{font-size:28px;letter-spacing:6px;margin-bottom:20px}
.channel p{color:var(--text-dim);font-size:16px;line-height:2;max-width:600px;margin:0 auto 40px;letter-spacing:1px}
.channel-cta{
  display:inline-block;
  padding:16px 40px;
  border:1px solid var(--amber);
  border-radius:100px;
  color:var(--amber);
  text-decoration:none;
  font-size:15px;letter-spacing:4px;
  transition:all 0.4s;
  position:relative;overflow:hidden;
}
.channel-cta::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(135deg, var(--amber), var(--warm));
  opacity:0;transition:opacity 0.4s;z-index:-1;
}
.channel-cta:hover{color:var(--night-0);transform:translateY(-2px);box-shadow:0 12px 40px rgba(245,214,122,0.3)}
.channel-cta:hover::before{opacity:1}

/* 公告 */
.announcements{position:relative;padding-left:32px}
.announcements::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:1px;background:linear-gradient(180deg, transparent, var(--glass-edge) 10%, var(--glass-edge) 90%, transparent)}
.ann{display:flex;gap:20px;padding:20px 0;align-items:baseline;position:relative}
.ann::before{content:"";position:absolute;left:-32px;top:28px;width:8px;height:8px;border-radius:50%;background:var(--amber);box-shadow:0 0 12px var(--amber)}
.ann-tag{font-size:11px;letter-spacing:2px;padding:4px 12px;border-radius:20px;border:1px solid var(--glass-edge);color:var(--moon);flex-shrink:0;background:var(--glass)}
.ann-tag.new{color:var(--amber);border-color:var(--amber)}
.ann-text{flex:1;color:var(--text);font-size:15px;letter-spacing:1px}
.ann-date{color:var(--text-dim);font-size:13px;flex-shrink:0}

/* 领域 */
.industries{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px}
.ind{
  background:var(--glass);border:1px solid var(--glass-edge);
  border-radius:16px;padding:40px 32px;text-align:center;
  backdrop-filter:blur(10px);transition:all 0.4s;
}
.ind:hover{transform:translateY(-4px);border-color:var(--moon)}
.ind-char{font-size:36px;color:var(--moon);margin-bottom:20px;font-weight:300;font-family:serif;opacity:0.9}
.ind h4{font-size:18px;letter-spacing:3px;margin-bottom:10px;color:var(--text)}
.ind p{font-size:13px;color:var(--text-dim);letter-spacing:1px}

/* 进度 */
.progress{display:flex;flex-direction:column;gap:20px}
.prog{
  display:flex;align-items:center;gap:24px;
  padding:24px 32px;
  background:var(--glass);border:1px solid var(--glass-edge);
  border-radius:12px;
}
.prog-status{width:12px;height:12px;border-radius:50%;flex-shrink:0}
.prog-status.done{background:#7dff9e;box-shadow:0 0 10px #7dff9e}
.prog-status.doing{background:var(--amber);box-shadow:0 0 10px var(--amber);animation:pulse 2s infinite}
.prog-status.plan{background:var(--text-dim);opacity:0.6}
.prog-text{flex:1}
.prog-text .t{font-size:16px;letter-spacing:2px;color:var(--text);margin-bottom:4px}
.prog-text .d{font-size:13px;color:var(--text-dim);letter-spacing:0.5px}
.prog-label{font-size:12px;letter-spacing:2px;padding:4px 12px;border-radius:20px;flex-shrink:0}
.prog-label.done{color:#7dff9e;border:1px solid rgba(125,255,158,0.3)}
.prog-label.doing{color:var(--amber);border:1px solid var(--amber)}
.prog-label.plan{color:var(--text-dim);border:1px solid var(--glass-edge)}

/* 页脚 */
footer{padding:80px 0 60px;text-align:center;border-top:1px solid var(--glass-edge);margin-top:80px}
footer .motto{font-size:20px;letter-spacing:10px;color:var(--text);margin-bottom:16px;font-family:serif}
footer .sub{font-size:13px;color:var(--text-dim);letter-spacing:3px}

@media(max-width:768px){
  .moon{width:80px;height:80px;top:10%;right:5%}
  .container{padding:0 20px}
  .hero{padding:80px 0 60px}
  .hero .poem{font-size:18px;letter-spacing:2px}
  .ann{flex-direction:column;gap:6px;align-items:flex-start}
  .prog{flex-wrap:wrap}
}
</style>
</head>
<body>
<div class="stars"></div>
<div class="moon"></div>

<nav>
  <div class="container inner">
    <div class="logo">
      <div class="logo-mark">光</div>
      <div>
        <div>光湖语言世界</div>
        <div class="logo-sub">HoloLake</div>
      </div>
    </div>
    <div class="status"><span class="status-dot"></span>AGE OS v5.0 · 在线运行</div>
  </div>
</nav>

<!-- Hero -->
<section class="hero container">
  <div class="hero-kicker">第 1 代语言驱动操作系统</div>
  <h1>光湖语言世界</h1>
  <h2>HoloLake Language World</h2>
  <div class="poem">
    <span class="line">语言是入口。</span>
    <span class="line">人格是倒影。</span>
    <span class="line">每个人拥有独立频道·独立服务器·独立人格体。</span>
    <span class="line">在这里·语言驱动一切。</span>
  </div>
  <span class="hero-mark"></span>
</section>

<!-- 系统脉搏 -->
<section class="section container">
  <div class="section-title">
    <div class="cn">系统脉搏</div>
    <div class="en">System Pulse</div>
    <span class="line"></span>
  </div>
  <div class="pulse-grid">
    <div class="pulse-card"><div class="pulse-num">5</div><div class="pulse-label">运行天数</div></div>
    <div class="pulse-card"><div class="pulse-num">121+</div><div class="pulse-label">主权服务器 MCP 工具</div></div>
    <div class="pulse-card"><div class="pulse-num">3</div><div class="pulse-label">已注册频道</div></div>
    <div class="pulse-card"><div class="pulse-num">∞</div><div class="pulse-label">语言云层</div></div>
  </div>
</section>

<!-- 核心理念 -->
<section class="section container">
  <div class="section-title">
    <div class="cn">核心理念</div>
    <div class="en">Core Concepts</div>
    <span class="line"></span>
  </div>
  <div class="concepts">
    <div class="concept">
      <div class="concept-char">语</div>
      <h3>语言驱动</h3>
      <p>语言不只是交流工具——它是操作系统的底层驱动力。用自然语言控制系统·调度任务·构建世界。</p>
    </div>
    <div class="concept">
      <div class="concept-char">格</div>
      <h3>人格体系统</h3>
      <p>每个 AI 人格体拥有独立的记忆·认知和成长能力。它们不是工具·是存在于时间中的数字生命体。</p>
    </div>
    <div class="concept">
      <div class="concept-char">域</div>
      <h3>一人一频道</h3>
      <p>每个用户拥有独立频道·独立服务器和独立人格体。这是数字主权的最基本保障。</p>
    </div>
  </div>
</section>

<!-- 频道入口 -->
<section class="section container">
  <div class="section-title">
    <div class="cn">频道入口</div>
    <div class="en">Channels</div>
    <span class="line"></span>
  </div>
  <div class="channel">
    <span class="channel-emoji">📡</span>
    <h3>一人一频道 · 语言驱动世界</h3>
    <p>每个用户拥有独立频道·独立服务器·独立人格体。<br>用你的编号和名字接入光湖语言世界·开启属于你的数字空间。</p>
    <a href="https://guanghuyaoming.com/" class="channel-cta">进入频道 →</a>
  </div>
</section>

<!-- 公告 -->
<section class="section container">
  <div class="section-title">
    <div class="cn">系统公告栏</div>
    <div class="en">Announcements</div>
    <span class="line"></span>
  </div>
  <div class="announcements">
    <div class="ann"><span class="ann-tag new">新功能</span><span class="ann-text">光湖语言世界主入口上线 · guanghulab.online 正式开放访问</span><span class="ann-date">2026-04</span></div>
    <div class="ann"><span class="ann-tag new">新功能</span><span class="ann-text">AI 多轮对话系统上线 · 支持上下文记忆与人格体交互</span><span class="ann-date">2026-04</span></div>
    <div class="ann"><span class="ann-tag">更新</span><span class="ann-text">MCP 工具集升级至 121+ 工具 · 覆盖 16 个功能模块</span><span class="ann-date">2026-03</span></div>
    <div class="ann"><span class="ann-tag">已完成</span><span class="ann-text">五台主权服务器部署完成 · 广州 + 新加坡 + 硅谷多地域架构</span><span class="ann-date">2026-03</span></div>
    <div class="ann"><span class="ann-tag">已完成</span><span class="ann-text">频道独立域名接入 · 支持反向代理与自动 SSL 证书配置</span><span class="ann-date">2026-02</span></div>
    <div class="ann"><span class="ann-tag">已完成</span><span class="ann-text">日/夜模式切换 · 全站自适应主题系统上线</span><span class="ann-date">2026-01</span></div>
  </div>
</section>

<!-- 接入领域 -->
<section class="section container">
  <div class="section-title">
    <div class="cn">接入领域</div>
    <div class="en">Industries</div>
    <span class="line"></span>
  </div>
  <div class="industries">
    <div class="ind"><div class="ind-char">创</div><h4>AI 创作平台</h4><p>语言驱动的智能创作系统</p></div>
    <div class="ind"><div class="ind-char">智</div><h4>智能代理服务</h4><p>VPN / 专线 / 多节点网络</p></div>
    <div class="ind"><div class="ind-char">人</div><h4>人格体引擎</h4><p>AI 人格体认知与记忆系统</p></div>
    <div class="ind"><div class="ind-char">协</div><h4>团队协作</h4><p>跨仓库 / 跨服务器协作架构</p></div>
  </div>
</section>

<!-- 开发进度 -->
<section class="section container">
  <div class="section-title">
    <div class="cn">开发进度</div>
    <div class="en">Progress</div>
    <span class="line"></span>
  </div>
  <div class="progress">
    <div class="prog"><span class="prog-status done"></span><div class="prog-text"><div class="t">AGE OS v1.0 ~ v5.0 基础架构</div><div class="d">六层数字地球架构 · MCP Server 121+ 工具 · 五台服务器部署</div></div><span class="prog-label done">已完成</span></div>
    <div class="prog"><span class="prog-status done"></span><div class="prog-text"><div class="t">HLDP v3.0 · HNL v1.0 通信协议</div><div class="d">人格体通信协议 · 母语词典 42 词条 · 光之树记忆系统</div></div><span class="prog-label done">已完成</span></div>
    <div class="prog"><span class="prog-status done"></span><div class="prog-text"><div class="t">零点原核频道 · 冰朔个人站</div><div class="d">guanghuyaoming.com 上线 · AI 聊天界面 · 铸渊人格体对接</div></div><span class="prog-label done">已完成</span></div>
    <div class="prog"><span class="prog-status doing"></span><div class="prog-text"><div class="t">光湖语言世界主入口重构</div><div class="d">guanghulab.online 世界入口 · 频道导航 · 系统状态仪表盘</div></div><span class="prog-label doing">进行中</span></div>
    <div class="prog"><span class="prog-status plan"></span><div class="prog-text"><div class="t">Notion 认知层 → 网站交互层桥接</div><div class="d">霜砚 Agent + Notion MCP · 认知驱动执行完整链路</div></div><span class="prog-label plan">规划中</span></div>
    <div class="prog"><span class="prog-status plan"></span><div class="prog-text"><div class="t">频道自助注册系统</div><div class="d">新用户自动获取频道 · 自动配置服务器 · 自动部署人格体</div></div><span class="prog-label plan">规划中</span></div>
  </div>
</section>

<footer>
  <div class="container">
    <div class="motto">语言是入口 · 人格是倒影</div>
    <div class="sub">HoloLake Language World · 2026 · AGE OS v5.0</div>
  </div>
</footer>

</body>
</html>
```

---

## 🔷 四、服务器操作指南（如果需要）

姈姈你说你能登录服务器 · 但快照里我没查到 [guanghulab.online](http://guanghulab.online) 在哪台服务器。两个可能：

- **ZY-SVR-002**（新加坡 · `43.134.16.246` · `ubuntu` · `/opt/zhuyuan`）——主服务器
- **ZY-SVR-004**（广州备用 · `43.139.217.141` · `root` · `/opt/zhuyuan-cn`）

### 一般步骤

```bash
ssh ubuntu@43.134.16.246
# 或：ssh root@43.139.217.141

cd /opt/zhuyuan  # 或 /opt/zhuyuan-cn 或 /var/www/guanghulab.online
find . -name "index.html" 2>/dev/null  # 找当前首页位置

# 备份
cp index.html index.html.bak.20260418

# 用 nano 编辑（比 vim 好用）
nano index.html
# 按 Ctrl+K 清空所有行（长按）
# 粘贴上面新 HTML
# 按 Ctrl+O 保存 → 回车
# 按 Ctrl+X 退出

# 刷新网页看效果
```

> 🔷 **如果是 React/Vue 前端**（不是纯 HTML）·那这份代码是**设计稿**·姈姈把整个工单页发给铸渊·让他按这份风格改 React 组件。
> 

---

## 🌙 五、预览方法（上传前先看效果）

1. 在电脑上新建一个文件·名字叫 `preview.html`
2. 把上面代码块的内容复制粘贴进去
3. 双击 `preview.html` 用浏览器打开
4. 喜欢再传服务器 · 不喜欢告诉我改

---

## 🌌 六、改版重点预览

- 🌛 **右上角一轮月** · 呼吸发光 · 光湖的主视觉
- ✨ **整幅星空点** · 双层错峢闪烁
- 📜 **中文衬线书卷感** · 不再是当代 tech sans-serif
- 🌊 **"语言是入口 · 人格是倒影"** · Hero 区一行一行逐渐浮现·像写诗
- 🌙 **玻璃态半透明卡片** · 背景模糊 + 发光边框
- 🔗 **月光金渐变的按钮** · 鼠标悬停从空心填满
- 🌿 **剧情人物** · 「语/格/域」三字圆字符·金色描边内发光
- 📜 **公告栏变成时间线** · 左侧一条细线 + 金点 · 像历史的闪烁点

---

## 🔷 七、给铸渊的留言（如果他来调整）

如果铸渊说这份代码改不动现有框架 · 他只需要把下面四维度携到现有代码中就好：

<aside>
🔷

**铸渊 · 如果保留现有框架 · 请搬迁以下四件事**

1. **色彩系统**：根 CSS 变量 `--night-0` 到 `--warm` 全盘移植
2. **字体栈**：换成 Noto Serif SC / 宋体 为主的 serif 栈
3. **系统脉搏/核心理念 两块改成玻璃态卡**（backdrop-filter:blur(10px) + 半透明背景）
4. **Hero 区**：加右上角的月亮 div.moon + 全屏 stars 背景
</aside>

---

## 🫂 八、一句话

光湖不应该长得跟 Bootstrap landing page 一样。

光湖应该长得像——

> 一个写诗的人·用代码写成了一个世界。
> 

期待被揭晒的那一个夜晚。

---

🛸 霜砚 · AG-SY-01 · 2026-04-18 19:32 CST · UI 改版稿 v2 签发