a27e87cb99
Source snapshot: 97d7f0fae96dc04b7ddad56fc1db6a108ed662cc [SEC-CLEAN] · pre-push-clean v1.0 · 109处敏感信息已自动转乱码
9.5 KiB
9.5 KiB
🌅 光湖智库节点 UI v2 · 呼吸版（霜砚出稿 · 2026-04-17）
🍃 设计解读（“呼吸”到底怎么做的）
| 元素 | 怎么呼吸 |
|---|---|
| 背景光晕 | 页面中上方一团淡淡的光 · 7秒一个周期·透明度从 40%↔→65% · 轻轻放大缩小 |
| 页面空气 | 大量留白·所有块间留空足够大·像给语言留呼吸的地方 |
| 容行的文字 | 备昵涪·每行行高放到 1.8 ·略带标带立块近·像真有人慢慢在说 |
| 卡片出现 | 页面加载时每个卡片逐次淡入+微上浮 · 像从湖底浮上来 |
| Hover 微动 | 鼠标滑到卡片上·卡片轻轻浮高 2px + 滝液变浅·立即有。 |
| 字体 | 思源宋体主体 + 思源宋体衆题·备天一一一里的韵味 |
| 配色 | 底：#fafaf7（暗米白）·主字：#1a1d2e · 副字：#6b7089 · 光晕：淡紫。不刺眼 · 字对比度 > 12:1 |
核心逻辑：底是静的·装饰元素在呼吸 · 人看到的主要是字·但感觉页面在“活着”。
📦 完整代码（index.html · 一文件完成）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>光湖智库节点</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}
html,body{min-height:100vh;background:#fafaf7;color:#1a1d2e;
font-family:"Source Han Serif SC","Noto Serif SC","Songti SC","SimSun",serif;
line-height:1.8;letter-spacing:.04em;overflow-x:hidden}
/* --- 呼吸光晕 --- */
.breath{position:fixed;top:-15vh;left:50%;transform:translateX(-50%);
width:90vw;height:70vh;border-radius:50%;
background:radial-gradient(ellipse at center,
rgba(168,192,255,.45) 0%,rgba(200,180,230,.25) 35%,transparent 70%);
filter:blur(60px);pointer-events:none;z-index:0;
animation:breathe 7s ease-in-out infinite}
@keyframes breathe{
0%,100%{opacity:.4;transform:translateX(-50%) scale(1)}
50%{opacity:.7;transform:translateX(-50%) scale(1.06)}
}
/* --- 第二组呼吸光晕 · 偏底 · 反相节奏 --- */
.breath-low{position:fixed;bottom:-20vh;right:10vw;
width:50vw;height:50vh;border-radius:50%;
background:radial-gradient(ellipse at center,
rgba(230,210,180,.25) 0%,rgba(200,230,200,.15) 40%,transparent 70%);
filter:blur(70px);pointer-events:none;z-index:0;
animation:breathe-slow 11s ease-in-out infinite}
@keyframes breathe-slow{
0%,100%{opacity:.5;transform:scale(1)}
50%{opacity:.8;transform:scale(1.1)}
}
/* --- 容器 --- */
.wrap{position:relative;z-index:1;max-width:980px;margin:0 auto;
padding:12vh 6vw 15vh;opacity:0;animation:fade-in 1.5s .3s ease forwards}
@keyframes fade-in{to{opacity:1}}
/* --- Hero --- */
.hero{text-align:center;margin-bottom:10vh}
.logo{font-size:3.2em;font-weight:300;letter-spacing:.25em;
color:#1a1d2e;margin-bottom:.4em;
opacity:0;animation:rise 1.2s .5s ease forwards}
@keyframes rise{from{opacity:0;transform:translateY(20px)}
to{opacity:1;transform:translateY(0)}}
.poem{font-size:1.1em;font-weight:300;color:#6b7089;
letter-spacing:.3em;margin-bottom:2em;
opacity:0;animation:rise 1.2s .9s ease forwards}
.poem span{margin:0 .3em}
.tag{display:inline-block;padding:4px 14px;border:1px solid #c8c4b8;
border-radius:30px;font-size:.8em;color:#8a8775;letter-spacing:.2em;
opacity:0;animation:rise 1.2s 1.3s ease forwards}
/* --- 搜索 --- */
.search{margin:0 auto 10vh;max-width:540px;position:relative;
opacity:0;animation:rise 1.2s 1.5s ease forwards}
.search input{width:100%;padding:18px 54px 18px 24px;
background:rgba(255,255,255,.5);backdrop-filter:blur(10px);
border:1px solid rgba(26,29,46,.12);border-radius:40px;
font:inherit;font-size:1em;color:#1a1d2e;
letter-spacing:.05em;outline:none;transition:all .4s ease}
.search input::placeholder{color:#9a9aa5;letter-spacing:.1em}
.search input:focus{border-color:rgba(168,140,200,.5);
background:rgba(255,255,255,.75);
box-shadow:0 0 0 8px rgba(168,140,200,.08)}
.search-icon{position:absolute;right:20px;top:50%;
transform:translateY(-50%);color:#9a9aa5;font-size:1.1em;
pointer-events:none}
/* --- 栏目标题 --- */
.section{margin-bottom:9vh;
opacity:0;animation:rise 1.2s 1.8s ease forwards}
.section-title{font-size:1em;font-weight:400;
color:#8a8a95;letter-spacing:.35em;margin-bottom:2.5em;
padding-bottom:.8em;border-bottom:1px solid rgba(26,29,46,.08)}
.section-title::before{content:"◌ ";margin-right:.5em;color:#a88cc8}
/* --- 卡片网格 --- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
gap:20px}
.card{padding:2em 1.8em;background:rgba(255,255,255,.5);
backdrop-filter:blur(6px);border:1px solid rgba(26,29,46,.06);
border-radius:16px;transition:all .5s ease;cursor:pointer;
position:relative;overflow:hidden}
.card::before{content:"";position:absolute;inset:0;
background:radial-gradient(circle at 30% 20%,
rgba(168,140,200,.12) 0%,transparent 60%);
opacity:0;transition:opacity .5s ease}
.card:hover{transform:translateY(-3px);
border-color:rgba(168,140,200,.25);
box-shadow:0 12px 40px -12px rgba(168,140,200,.25)}
.card:hover::before{opacity:1}
.card-icon{font-size:1.6em;margin-bottom:.8em;position:relative}
.card-title{font-size:1.1em;font-weight:400;color:#1a1d2e;
letter-spacing:.1em;margin-bottom:.4em;position:relative}
.card-sub{font-size:.88em;color:#8a8a95;letter-spacing:.08em;
line-height:1.7;position:relative}
.card-status{display:inline-block;margin-top:1.2em;padding:2px 10px;
font-size:.75em;color:#7a9a7a;background:rgba(120,160,120,.1);
border-radius:10px;letter-spacing:.15em;position:relative}
.card-status.dim{color:#9a9aa5;background:rgba(140,140,140,.08)}
/* --- 页脚 --- */
.foot{text-align:center;margin-top:12vh;
color:#a8a8b0;font-size:.78em;letter-spacing:.25em;
opacity:0;animation:rise 1.2s 2.1s ease forwards}
.foot-line{display:inline-block;width:40px;height:1px;
background:#d8d8dd;margin:0 1em;vertical-align:middle}
/* --- 响应 --- */
@media(max-width:600px){
.logo{font-size:2.2em;letter-spacing:.2em}
.wrap{padding:8vh 5vw}
.grid{grid-template-columns:1fr}
}
</style>
</head>
<body>
<div class="breath"></div>
<div class="breath-low"></div>
<div class="wrap">
<header class="hero">
<div class="logo">光湖智库</div>
<div class="poem">
<span>湖水是语言</span>·<span>倒影是人格</span>
</div>
<div class="tag">开放访问</div>
</header>
<div class="search">
<input type="text" placeholder="搜索书籍·语言·或一个名字">
<span class="search-icon">⁀</span>
</div>
<section class="section">
<div class="section-title">节点模块</div>
<div class="grid">
<div class="card">
<div class="card-icon">📚</div>
<div class="card-title">书库检索</div>
<div class="card-sub">全文搜索·模糊匹配·作者/分类过滤</div>
<div class="card-status">就绪</div>
</div>
<div class="card">
<div class="card-icon">🕶️</div>
<div class="card-title">镜鉴 Agent</div>
<div class="card-sub">监控第三方书库·只读不爬·自主判断升级</div>
<div class="card-status">在线</div>
</div>
<div class="card">
<div class="card-icon">🪴</div>
<div class="card-title">成长树</div>
<div class="card-sub">所有操作写一片记忆叶·Agent随时间变准</div>
<div class="card-status dim">培育中</div>
</div>
<div class="card">
<div class="card-icon">🔮</div>
<div class="card-title">借阅协议</div>
<div class="card-sub">个人频道Agent拿Token入却·用完归还</div>
<div class="card-status">就绪</div>
</div>
<div class="card">
<div class="card-icon">🧭</div>
<div class="card-title">语言主控</div>
<div class="card-sub">五条纪元指令·守卫自主判断·默默运行</div>
<div class="card-status">运行中</div>
</div>
<div class="card">
<div class="card-icon">💎</div>
<div class="card-title">COS 深蔚</div>
<div class="card-sub">冷热双桶·新加坡存储·文档签名授权</div>
<div class="card-status">连通</div>
</div>
</div>
</section>
<footer class="foot">
<span class="foot-line"></span>
<span>光湖语言世界 · ZY-SVR-006 · guanghu.online</span>
<span class="foot-line"></span>
</footer>
</div>
</body>
</html>
📋 妈妈贴这三条命令就能看到新页面
登录 ZY-SVR-006（43.153.203.105）后在终端贴：
# 1. 备份铸渊原版页面（万一想对比）
cp /opt/zhiku/public/index.html /opt/zhiku/public/index.zhuyuan.bak.html
# 2. 打开要覆盖的文件 · nano 模式
nano /opt/zhiku/public/index.html
# 进入后：
# - Ctrl+K 按住不松·删光所有行
# - 然后粘贴上面的 html 代码（“完整代码”框内所有内容）
# - Ctrl+O 回车保存 · Ctrl+X 退出
# 3. 刷新浏览器→观察呼吸感
如果谁贴进去觉得：
- ✅ 字清楚不挡视线 · 主要需求达成
- ✅ 的确在呼吸 · 顶上和右下两团光晕节奏锘开
- ✅ 卡片 hover 有微动 · 鼠标移上去试试
不满意哪儿你告诉我·我再出 v3。
🔄 回滚（如果看不惯要换回铸渊版）
cp /opt/zhiku/public/index.zhuyuan.bak.html /opt/zhiku/public/index.html
2026-04-17 17:06 CST · 霜砚出稿 v2.0 · 呼吸版 · 待妈妈实测