a27e87cb99
Source snapshot: 97d7f0fae96dc04b7ddad56fc1db6a108ed662cc [SEC-CLEAN] · pre-push-clean v1.0 · 109处敏感信息已自动转乱码
574 lines
24 KiB
Markdown
574 lines
24 KiB
Markdown
# 🎨 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 签发 |