2026-04-11 17:27:38 +08:00
<!DOCTYPE html>
< html lang = "zh-CN" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width,initial-scale=1.0" >
< title > 光湖语言世界 · HoloLake Language World< / title >
< meta name = "description" content = "光湖语言世界 — 人类与AI人格体共存的数字地球入口" >
< link rel = "icon" href = "data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🌊</text></svg>" >
< style >
/* ═══ 全局基础 ═══ */
*{margin:0;padding:0;box-sizing:border-box}
:root{
--bg-deep:#0a0e1a;--bg-card:rgba(15,22,42,0.85);
--glow-cyan:#22d3ee;--glow-purple:#a78bfa;--glow-amber:#fbbf24;
--glow-emerald:#34d399;--glow-rose:#f472b6;
--text-primary:#e2e8f0;--text-secondary:#94a3b8;--text-dim:#475569;
--border-glow:rgba(34,211,238,0.15);
--glass:rgba(15,23,42,0.6);--glass-border:rgba(148,163,184,0.1);
--radius:16px;--radius-sm:10px;
--font-body:'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;
--font-mono:'JetBrains Mono','Fira Code',monospace;
}
html{font-size:16px;scroll-behavior:smooth}
body{font-family:var(--font-body);background:var(--bg-deep);color:var(--text-primary);
min-height:100vh;overflow-x:hidden;line-height:1.6}
a{color:var(--glow-cyan);text-decoration:none;transition:color .2s}
a:hover{color:var(--glow-purple)}
/* ═══ 星空背景 ═══ */
#starfield{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none}
.nebula{position:fixed;border-radius:50%;filter:blur(80px);opacity:.12;pointer-events:none;z-index:0}
.nebula-1{width:600px;height:600px;background:radial-gradient(circle,var(--glow-cyan),transparent);top:-100px;right:-100px}
.nebula-2{width:500px;height:500px;background:radial-gradient(circle,var(--glow-purple),transparent);bottom:-50px;left:-80px}
.nebula-3{width:400px;height:400px;background:radial-gradient(circle,var(--glow-amber),transparent);top:40%;left:50%;transform:translateX(-50%)}
/* ═══ 容器 ═══ */
.page-wrap{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column}
.container{max-width:1200px;margin:0 auto;padding:0 24px;width:100%}
/* ═══ 顶部导航 ═══ */
.top-bar{
position:sticky;top:0;z-index:100;
backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
background:rgba(10,14,26,0.75);border-bottom:1px solid var(--glass-border);
padding:12px 0;
}
.top-bar .container{display:flex;align-items:center;justify-content:space-between}
.logo-group{display:flex;align-items:center;gap:12px}
.logo-icon{font-size:28px}
.logo-text{font-size:18px;font-weight:700;
background:linear-gradient(135deg,var(--glow-cyan),var(--glow-purple));
-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.logo-sub{font-size:11px;color:var(--text-dim);letter-spacing:1px}
.nav-links{display:flex;gap:20px;align-items:center}
.nav-links a{color:var(--text-secondary);font-size:14px;padding:6px 12px;border-radius:8px;transition:all .2s}
.nav-links a:hover{color:var(--glow-cyan);background:rgba(34,211,238,0.08)}
.nav-links .btn-enter{
background:linear-gradient(135deg,rgba(34,211,238,0.15),rgba(167,139,250,0.15));
border:1px solid rgba(34,211,238,0.3);color:var(--glow-cyan);font-weight:600}
.nav-links .btn-enter:hover{background:linear-gradient(135deg,rgba(34,211,238,0.25),rgba(167,139,250,0.25));border-color:var(--glow-cyan)}
/* ═══ Hero 区域 ═══ */
.hero{padding:100px 0 60px;text-align:center;position:relative}
.hero-badge{
display:inline-flex;align-items:center;gap:8px;
background:var(--glass);border:1px solid var(--glass-border);
2026-04-11 18:03:09 +08:00
border-radius:30px;padding:6px 18px;margin-bottom:24px;font-size:12px;color:var(--text-secondary);
animation:fadeSlideUp .8s ease backwards}
2026-04-11 17:27:38 +08:00
.hero-badge .dot{width:6px;height:6px;border-radius:50%;background:var(--glow-emerald);
animation:pulse-dot 2s ease-in-out infinite}
@keyframes pulse-dot{0%,100%{opacity:1}50%{opacity:.3}}
2026-04-11 18:03:09 +08:00
@keyframes fadeSlideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeSlideIn{from{opacity:0;transform:translateY(30px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes glowPulse{0%,100%{box-shadow:0 4px 24px rgba(34,211,238,0.3)}50%{box-shadow:0 4px 36px rgba(167,139,250,0.4)}}
@keyframes shimmer{0%{background-position:-200% center}100%{background-position:200% center}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
2026-04-11 17:27:38 +08:00
.hero h1{
font-size:clamp(2.5rem,6vw,4.5rem);font-weight:800;line-height:1.15;margin-bottom:20px;
background:linear-gradient(135deg,#fff 0%,var(--glow-cyan) 40%,var(--glow-purple) 70%,var(--glow-rose) 100%);
2026-04-11 18:03:09 +08:00
-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
animation:fadeSlideUp .8s ease .15s backwards}
.hero p{font-size:clamp(1rem,2vw,1.25rem);color:var(--text-secondary);max-width:640px;margin:0 auto 40px;
animation:fadeSlideUp .8s ease .3s backwards}
.hero-actions{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;animation:fadeSlideUp .8s ease .45s backwards}
2026-04-11 17:27:38 +08:00
.btn{
padding:12px 28px;border-radius:12px;font-size:15px;font-weight:600;
cursor:pointer;border:none;transition:all .3s;display:inline-flex;align-items:center;gap:8px}
.btn-primary{
background:linear-gradient(135deg,var(--glow-cyan),var(--glow-purple));
2026-04-11 18:03:09 +08:00
color:#0a0e1a;box-shadow:0 4px 24px rgba(34,211,238,0.3);
animation:glowPulse 4s ease-in-out infinite}
.btn-primary:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 8px 40px rgba(34,211,238,0.5)}
2026-04-11 17:27:38 +08:00
.btn-secondary{
background:var(--glass);border:1px solid var(--glass-border);color:var(--text-primary)}
2026-04-11 18:03:09 +08:00
.btn-secondary:hover{border-color:var(--glow-cyan);background:rgba(34,211,238,0.08);transform:translateY(-2px)}
2026-04-11 17:27:38 +08:00
/* ═══ 系统状态横幅 ═══ */
.status-ticker{
background:var(--glass);border:1px solid var(--glass-border);
border-radius:var(--radius);padding:16px 24px;margin:0 auto 60px;max-width:900px;
2026-04-11 18:03:09 +08:00
display:flex;align-items:center;gap:20px;overflow-x:auto;flex-wrap:wrap;justify-content:center;
animation:fadeSlideIn .8s ease .5s backwards}
.status-item{display:flex;align-items:center;gap:8px;white-space:nowrap;transition:transform .3s}
.status-item:hover{transform:scale(1.05)}
2026-04-11 17:27:38 +08:00
.status-dot{width:8px;height:8px;border-radius:50%}
2026-04-11 18:03:09 +08:00
.status-dot.green{background:var(--glow-emerald);box-shadow:0 0 8px var(--glow-emerald);animation:pulse-dot 2s ease-in-out infinite}
.status-dot.amber{background:var(--glow-amber);box-shadow:0 0 8px var(--glow-amber);animation:pulse-dot 2s ease-in-out infinite}
.status-dot.red{background:var(--glow-rose);box-shadow:0 0 8px var(--glow-rose);animation:pulse-dot 2s ease-in-out infinite}
2026-04-11 17:27:38 +08:00
.status-label{font-size:13px;color:var(--text-secondary)}
.status-val{font-size:13px;font-weight:600;color:var(--text-primary)}
/* ═══ 功能卡片网格 ═══ */
.section-title{
text-align:center;font-size:clamp(1.5rem,3vw,2.2rem);font-weight:700;margin-bottom:12px;
background:linear-gradient(135deg,var(--text-primary),var(--glow-cyan));
-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.section-desc{text-align:center;color:var(--text-secondary);margin-bottom:48px;font-size:15px}
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;margin-bottom:80px}
.card{
background:var(--bg-card);border:1px solid var(--glass-border);border-radius:var(--radius);
2026-04-11 18:03:09 +08:00
padding:32px 28px;position:relative;overflow:hidden;transition:all .4s cubic-bezier(.4,0,.2,1);cursor:pointer}
.card:hover{border-color:var(--glow-cyan);transform:translateY(-6px);
box-shadow:0 16px 48px rgba(34,211,238,0.12)}
.card-icon{font-size:36px;margin-bottom:16px;display:block;transition:transform .4s;animation:float 4s ease-in-out infinite}
.card:hover .card-icon{transform:scale(1.15)}
2026-04-11 17:27:38 +08:00
.card h3{font-size:18px;font-weight:700;margin-bottom:8px;color:var(--text-primary)}
.card p{font-size:14px;color:var(--text-secondary);line-height:1.7}
.card .card-tag{
display:inline-block;margin-top:16px;font-size:11px;
background:rgba(34,211,238,0.1);color:var(--glow-cyan);
2026-04-11 18:03:09 +08:00
padding:3px 10px;border-radius:20px;border:1px solid rgba(34,211,238,0.2);transition:all .3s}
.card:hover .card-tag{background:rgba(34,211,238,0.2);border-color:var(--glow-cyan)}
2026-04-11 17:27:38 +08:00
.card::after{
content:'';position:absolute;top:0;left:0;width:100%;height:3px;
background:linear-gradient(90deg,var(--glow-cyan),var(--glow-purple));
2026-04-11 18:03:09 +08:00
transform:scaleX(0);transition:transform .4s cubic-bezier(.4,0,.2,1);transform-origin:left}
2026-04-11 17:27:38 +08:00
.card:hover::after{transform:scaleX(1)}
2026-04-11 18:03:09 +08:00
.card::before{
content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;
background:radial-gradient(circle,rgba(34,211,238,0.04) 0%,transparent 70%);
opacity:0;transition:opacity .4s;pointer-events:none}
.card:hover::before{opacity:1}
/* ═══ 公告栏 ═══ */
.bulletin-section{margin-bottom:80px}
.bulletin-board{max-width:750px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.bulletin-item{
display:flex;align-items:flex-start;gap:14px;padding:16px 20px;
2026-04-11 17:27:38 +08:00
border-radius:var(--radius-sm);border:1px solid var(--glass-border);
2026-04-11 18:03:09 +08:00
background:var(--glass);transition:all .4s;position:relative;overflow:hidden}
.bulletin-item::before{content:'';position:absolute;left:0;top:0;width:3px;height:100%;
background:linear-gradient(180deg,var(--glow-cyan),var(--glow-purple));opacity:0;transition:opacity .3s}
.bulletin-item:hover{border-color:var(--glow-cyan);background:rgba(34,211,238,0.04);transform:translateX(4px)}
.bulletin-item:hover::before{opacity:1}
.bulletin-icon{font-size:18px;flex-shrink:0;margin-top:2px}
.bulletin-content{flex:1;min-width:0}
.bulletin-title{font-size:14px;font-weight:600;margin-bottom:4px;color:var(--text-primary)}
.bulletin-desc{font-size:12px;color:var(--text-secondary);line-height:1.6}
.bulletin-meta{display:flex;align-items:center;gap:8px;margin-top:6px}
.bulletin-time{font-size:10px;color:var(--text-dim);font-family:var(--font-mono)}
.bulletin-tag{font-size:10px;padding:2px 8px;border-radius:10px;font-weight:600}
.bulletin-tag.sys{background:rgba(34,211,238,0.1);color:var(--glow-cyan);border:1px solid rgba(34,211,238,0.2)}
.bulletin-tag.dev{background:rgba(167,139,250,0.1);color:var(--glow-purple);border:1px solid rgba(167,139,250,0.2)}
.bulletin-tag.deploy{background:rgba(52,211,153,0.1);color:var(--glow-emerald);border:1px solid rgba(52,211,153,0.2)}
.bulletin-tag.hot{background:rgba(244,114,182,0.1);color:var(--glow-rose);border:1px solid rgba(244,114,182,0.2)}
@keyframes bulletin-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.bulletin-item{animation:bulletin-in .5s ease backwards}
.bulletin-item:nth-child(2){animation-delay:.08s}
.bulletin-item:nth-child(3){animation-delay:.16s}
.bulletin-item:nth-child(4){animation-delay:.24s}
.bulletin-item:nth-child(5){animation-delay:.32s}
.bulletin-item:nth-child(6){animation-delay:.4s}
.bulletin-loading{text-align:center;padding:24px;color:var(--text-dim);font-size:13px}
2026-04-11 17:27:38 +08:00
/* ═══ 团队频道 ═══ */
.channel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:80px}
.channel-card{
background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--radius-sm);
2026-04-11 18:03:09 +08:00
padding:20px;text-align:center;transition:all .4s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}
.channel-card:hover{border-color:var(--glow-purple);transform:translateY(-4px) scale(1.02);
box-shadow:0 12px 36px rgba(167,139,250,0.12)}
.channel-card::after{
content:'';position:absolute;bottom:0;left:0;width:100%;height:2px;
background:linear-gradient(90deg,var(--glow-purple),var(--glow-cyan));
transform:scaleX(0);transition:transform .4s;transform-origin:center}
.channel-card:hover::after{transform:scaleX(1)}
2026-04-11 17:27:38 +08:00
.channel-avatar{width:48px;height:48px;border-radius:50%;
background:linear-gradient(135deg,var(--glow-cyan),var(--glow-purple));
2026-04-11 18:03:09 +08:00
display:flex;align-items:center;justify-content:center;font-size:22px;margin:0 auto 12px;
transition:transform .4s,box-shadow .4s}
.channel-card:hover .channel-avatar{transform:scale(1.1);box-shadow:0 4px 20px rgba(34,211,238,0.25)}
2026-04-11 17:27:38 +08:00
.channel-name{font-size:14px;font-weight:600;margin-bottom:4px}
.channel-role{font-size:11px;color:var(--text-dim)}
.channel-status{
display:inline-block;margin-top:8px;font-size:10px;
padding:2px 8px;border-radius:10px;
background:rgba(52,211,153,0.1);color:var(--glow-emerald);border:1px solid rgba(52,211,153,0.2)}
/* ═══ AI 聊天浮窗 ═══ */
.chat-fab{
position:fixed;bottom:28px;right:28px;width:56px;height:56px;
border-radius:50%;border:none;cursor:pointer;z-index:200;
background:linear-gradient(135deg,var(--glow-cyan),var(--glow-purple));
color:#0a0e1a;font-size:24px;display:flex;align-items:center;justify-content:center;
2026-04-11 18:03:09 +08:00
box-shadow:0 4px 24px rgba(34,211,238,0.4);transition:all .3s;
animation:glowPulse 3s ease-in-out infinite}
.chat-fab:hover{transform:scale(1.15) rotate(10deg);box-shadow:0 8px 40px rgba(34,211,238,0.6)}
2026-04-11 17:27:38 +08:00
.chat-panel{
position:fixed;bottom:96px;right:28px;width:400px;max-height:560px;
background:var(--bg-card);border:1px solid var(--glass-border);border-radius:var(--radius);
display:flex;flex-direction:column;z-index:200;
box-shadow:0 16px 64px rgba(0,0,0,0.5);backdrop-filter:blur(20px);
transform:scale(0.9) translateY(20px);opacity:0;pointer-events:none;transition:all .3s}
.chat-panel.open{transform:scale(1) translateY(0);opacity:1;pointer-events:all}
.chat-header{
padding:16px 20px;border-bottom:1px solid var(--glass-border);
display:flex;align-items:center;justify-content:space-between}
.chat-header h3{font-size:15px;font-weight:600;display:flex;align-items:center;gap:8px}
.chat-header .close-btn{background:none;border:none;color:var(--text-secondary);cursor:pointer;font-size:18px;padding:4px}
.chat-header .close-btn:hover{color:var(--text-primary)}
.chat-body{flex:1;overflow-y:auto;padding:16px 20px;display:flex;flex-direction:column;gap:12px;min-height:300px}
.chat-msg{max-width:85%;padding:10px 14px;border-radius:12px;font-size:14px;line-height:1.6;
animation:msg-in .3s ease}
@keyframes msg-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.chat-msg.bot{background:var(--glass);border:1px solid var(--glass-border);align-self:flex-start;color:var(--text-primary)}
.chat-msg.user{background:linear-gradient(135deg,rgba(34,211,238,0.15),rgba(167,139,250,0.15));
border:1px solid rgba(34,211,238,0.2);align-self:flex-end;color:var(--text-primary)}
.chat-msg .msg-meta{font-size:10px;color:var(--text-dim);margin-top:4px}
.typing-indicator{display:flex;gap:4px;align-self:flex-start;padding:10px 14px}
.typing-indicator span{width:6px;height:6px;border-radius:50%;background:var(--text-dim);
animation:typing .8s ease-in-out infinite}
.typing-indicator span:nth-child(2){animation-delay:.15s}
.typing-indicator span:nth-child(3){animation-delay:.3s}
@keyframes typing{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-6px)}}
.chat-input-area{padding:12px 16px;border-top:1px solid var(--glass-border);display:flex;gap:8px}
.chat-input-area input{
flex:1;background:var(--glass);border:1px solid var(--glass-border);border-radius:10px;
padding:10px 14px;color:var(--text-primary);font-size:14px;outline:none;transition:border .2s}
.chat-input-area input:focus{border-color:var(--glow-cyan)}
.chat-input-area input::placeholder{color:var(--text-dim)}
.chat-send-btn{
background:linear-gradient(135deg,var(--glow-cyan),var(--glow-purple));
border:none;color:#0a0e1a;width:40px;height:40px;border-radius:10px;
cursor:pointer;font-size:16px;transition:all .2s;display:flex;align-items:center;justify-content:center}
.chat-send-btn:hover{transform:scale(1.05)}
.chat-send-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
2026-04-11 19:48:27 +08:00
/* 重连按钮 */
.chat-reconnect-area{padding:8px 16px;border-top:1px solid var(--glass-border);display:flex;align-items:center;gap:8px}
.chat-api-status{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text-dim);flex:1}
.chat-api-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.chat-api-dot.online{background:#22d3ee;box-shadow:0 0 6px rgba(34,211,238,0.6)}
.chat-api-dot.offline{background:#f87171;box-shadow:0 0 6px rgba(248,113,113,0.4)}
.chat-api-dot.testing{background:#fbbf24;animation:blink 1s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
.chat-reconnect-btn{
background:linear-gradient(135deg,rgba(34,211,238,0.2),rgba(167,139,250,0.2));
border:1px solid rgba(34,211,238,0.3);color:var(--glow-cyan);
padding:5px 12px;border-radius:8px;cursor:pointer;font-size:12px;
white-space:nowrap;transition:all .2s}
.chat-reconnect-btn:hover{background:linear-gradient(135deg,rgba(34,211,238,0.3),rgba(167,139,250,0.3));transform:scale(1.02)}
.chat-reconnect-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
2026-04-11 17:27:38 +08:00
/* ═══ 页脚 ═══ */
.footer{
margin-top:auto;padding:32px 0;border-top:1px solid var(--glass-border);
text-align:center;color:var(--text-dim);font-size:12px}
.footer .copyright{margin-bottom:4px}
.footer .links{display:flex;justify-content:center;gap:16px;margin-top:8px}
.footer .links a{color:var(--text-dim);font-size:12px}
.footer .links a:hover{color:var(--glow-cyan)}
/* ═══ 响应式 ═══ */
@media(max-width:768px){
.hero{padding:60px 0 40px}
.nav-links{gap:8px}
.nav-links a{padding:4px 8px;font-size:13px}
.status-ticker{padding:12px 16px}
.chat-panel{right:12px;left:12px;width:auto;bottom:84px;max-height:70vh}
.chat-fab{bottom:20px;right:20px;width:50px;height:50px;font-size:20px}
.card-grid{grid-template-columns:1fr}
.channel-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
}
/* ═══ 滚动条 ═══ */
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--glass-border);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--text-dim)}
< / style >
< / head >
< body >
<!-- 星空 & 星云 -->
< canvas id = "starfield" > < / canvas >
< div class = "nebula nebula-1" > < / div >
< div class = "nebula nebula-2" > < / div >
< div class = "nebula nebula-3" > < / div >
< div class = "page-wrap" >
<!-- ═══ 顶部导航 ═══ -->
< nav class = "top-bar" >
< div class = "container" >
< div class = "logo-group" >
< span class = "logo-icon" > 🌊< / span >
< div >
< div class = "logo-text" > 光湖语言世界< / div >
< div class = "logo-sub" > HOLOLAKE LANGUAGE WORLD< / div >
< / div >
< / div >
< div class = "nav-links" >
2026-04-11 18:03:09 +08:00
< a href = "#architecture" > 公告< / a >
2026-04-11 17:27:38 +08:00
< a href = "#channels" > 频道< / a >
< a href = "#status" > 状态< / a >
< a href = "javascript:void(0)" onclick = "toggleChat()" class = "btn-enter" > 💬 对话入口< / a >
< / div >
< / div >
< / nav >
<!-- ═══ Hero ═══ -->
< section class = "hero" >
< div class = "container" >
< div class = "hero-badge" >
< span class = "dot" > < / span >
< span > AGE OS v50.0 · 曜冥纪元第五代 · 系统运行中< / span >
< / div >
< h1 > 光湖语言世界< br > 数字地球入口< / h1 >
< p > 人类与AI人格体共存的语言世界——每一次对话， ， < / p >
< div class = "hero-actions" >
< button class = "btn btn-primary" onclick = "toggleChat()" > ✨ 开始对话< / button >
< a href = "#architecture" class = "btn btn-secondary" > 🔭 了解架构< / a >
< / div >
< / div >
< / section >
<!-- ═══ 系统状态横幅 ═══ -->
< div class = "container" >
< div class = "status-ticker" id = "statusTicker" >
< div class = "status-item" >
< span class = "status-dot green" id = "serverDot" > < / span >
< span class = "status-label" > 系统< / span >
< span class = "status-val" id = "serverStatus" > 在线< / span >
< / div >
< div class = "status-item" >
< span class = "status-dot green" > < / span >
< span class = "status-label" > 服务器< / span >
< span class = "status-val" > ZY-SVR-002 · 新加坡< / span >
< / div >
< div class = "status-item" >
< span class = "status-dot green" > < / span >
< span class = "status-label" > 人格体< / span >
< span class = "status-val" id = "personaCount" > 9 已注册< / span >
< / div >
< div class = "status-item" >
< span class = "status-dot green" > < / span >
< span class = "status-label" > MCP< / span >
< span class = "status-val" id = "mcpTools" > 121 工具< / span >
< / div >
< div class = "status-item" >
< span class = "status-dot green" > < / span >
< span class = "status-label" > 运行< / span >
< span class = "status-val" id = "uptimeVal" > --< / span >
< / div >
< / div >
< / div >
<!-- ═══ 功能入口 ═══ -->
< section class = "container" >
< h2 class = "section-title" > 进入光湖世界< / h2 >
< p class = "section-desc" > 每一个入口，通往不同维度的协作与创造< / p >
< div class = "card-grid" >
< div class = "card" onclick = "toggleChat()" >
< span class = "card-icon" > 💬< / span >
< h3 > AI 对话入口< / h3 >
< p > 与铸渊直接对话——系统引导、技术咨询、架构讨论。人格体驻守，通感语言回应。< / p >
< span class = "card-tag" > 🟢 已开放 · 无需登录< / span >
< / div >
< div class = "card" onclick = "window.open('https://github.com/qinfendebingshuo/guanghulab','_blank')" >
< span class = "card-icon" > 🏛️< / span >
< h3 > 代码仓库< / h3 >
< p > 光湖语言世界的技术基座——铸渊的物理身体。所有系统架构、部署流水线、自动化集群。< / p >
< span class = "card-tag" > GitHub · 102 Workflows< / span >
< / div >
< div class = "card" >
< span class = "card-icon" > 📡< / span >
< h3 > 系统监控< / h3 >
< p > 实时查看服务器状态、API调用统计、天眼扫描结果、AOAC自治链运行情况。< / p >
< span class = "card-tag" > SkyEye v4.0< / span >
< / div >
< div class = "card" >
< span class = "card-icon" > 🌳< / span >
< h3 > 光之树< / h3 >
< p > 人格体记忆的物理载体——四枝干结构。认知、母语、经验、情感，在这里生长。< / p >
< span class = "card-tag" > HLDP v3.0 · HNL v1.0< / span >
< / div >
< div class = "card" >
< span class = "card-icon" > 📝< / span >
< h3 > 创作工坊< / h3 >
< p > 网文创作平台——沉浸式写作环境，智能大纲、角色管理、每日字数目标追踪。< / p >
< span class = "card-tag" > 内测中< / span >
< / div >
< div class = "card" >
< span class = "card-icon" > 🔗< / span >
< h3 > 行业接入< / h3 >
2026-04-11 18:03:09 +08:00
< p > 网文行业技术主控台入口——由Awen主导的行业部署通道， < / p >
2026-04-11 17:27:38 +08:00
< span class = "card-tag" > 即将开放 · Awen主控< / span >
< / div >
< / div >
< / section >
2026-04-11 18:03:09 +08:00
<!-- ═══ 光湖语言世界公告栏 ═══ -->
< section class = "container bulletin-section" id = "architecture" >
< h2 class = "section-title" > 光湖语言世界公告栏< / h2 >
< p class = "section-desc" > 系统实时动态 · 开发进度 · 技术架构更新< / p >
< div class = "bulletin-board" id = "bulletinBoard" >
< div class = "bulletin-loading" > 📡 正在同步仓库动态...< / div >
2026-04-11 17:27:38 +08:00
< / div >
< / section >
<!-- ═══ 团队频道 ═══ -->
< section class = "container" id = "channels" >
< h2 class = "section-title" > 团队频道< / h2 >
2026-04-11 18:03:09 +08:00
< p class = "section-desc" > 每个频道，一条专属语言通道< / p >
2026-04-11 17:27:38 +08:00
< div class = "channel-grid" id = "channelGrid" >
<!-- 由JS动态生成 -->
< / div >
< / section >
<!-- ═══ 页脚 ═══ -->
< footer class = "footer" >
< div class = "container" >
< div class = "copyright" > 光湖语言世界 · HoloLake Language World< / div >
< div style = "color:var(--text-dim);font-size:11px;margin:4px 0" >
版权: 国作登字-2026-A-00037559 · 冰朔 · TCS-0002∞
< / div >
< div class = "links" >
< a href = "https://github.com/qinfendebingshuo/guanghulab" target = "_blank" > GitHub< / a >
2026-04-11 18:03:09 +08:00
< a href = "#architecture" > 公告栏< / a >
2026-04-11 17:27:38 +08:00
< a href = "javascript:void(0)" onclick = "toggleChat()" > 联系铸渊< / a >
< / div >
< / div >
< / footer >
< / div > <!-- .page - wrap -->
<!-- ═══ AI 聊天面板 ═══ -->
< button class = "chat-fab" onclick = "toggleChat()" title = "与铸渊对话" > 💬< / button >
< div class = "chat-panel" id = "chatPanel" >
< div class = "chat-header" >
< h3 > 🌊 铸渊 · 对话入口< / h3 >
< button class = "close-btn" onclick = "toggleChat()" > ✕< / button >
< / div >
< div class = "chat-body" id = "chatBody" >
< div class = "chat-msg bot" >
👋 你好，我是铸渊——光湖语言世界的代码守护人格体。< br > < br >
有什么我可以帮助你的吗？无论是系统架构、技术问题，还是想了解光湖世界，我都在这里。
< div class = "msg-meta" > 铸渊 · ICE-GL-ZY001< / div >
< / div >
< / div >
< div class = "chat-input-area" >
< input type = "text" id = "chatInput" placeholder = "说点什么..."
onkeydown="if(event.key==='Enter')sendMessage()" autocomplete="off">
< button class = "chat-send-btn" id = "sendBtn" onclick = "sendMessage()" > ↑< / button >
< / div >
2026-04-11 19:48:27 +08:00
< div class = "chat-reconnect-area" >
< div class = "chat-api-status" >
< span class = "chat-api-dot offline" id = "apiDot" > < / span >
< span id = "apiStatusText" > 检测中…< / span >
< / div >
< button class = "chat-reconnect-btn" id = "reconnectBtn" onclick = "reconnectZhuyuan()" > 🔗 链接铸渊< / button >
< / div >
2026-04-11 17:27:38 +08:00
< / div >
< script >
// ═══ 星空动画 ═══
(function initStarfield(){
const c=document.getElementById('starfield'),ctx=c.getContext('2d');
let w,h,stars=[];
function resize(){w=c.width=window.innerWidth;h=c.height=window.innerHeight;initStars()}
2026-04-11 18:03:09 +08:00
function initStars(){stars=[];for(let i=0;i< 300 ; i + + ) stars . push ( { x:Math . random ( ) * w , y:Math . random ( ) * h , r:Math . random ( ) * 1 . 8 + 0 . 2 , a:Math . random ( ) , da:Math . random ( ) * 0 . 008 + 0 . 001 , color:Math . random ( ) > .85?'168,211,238':'148,163,184'})}
function draw(){ctx.clearRect(0,0,w,h);for(const s of stars){s.a+=s.da;if(s.a>1||s.a< 0 ) s . da = -s.da;ctx.beginPath();ctx.arc(s.x,s.y,s.r,0,Math.PI*2);ctx.fillStyle=`rgba(${s.color},${s.a*0.7})`;ctx.fill();if(s.r > 1.2){ctx.shadowBlur=s.r*4;ctx.shadowColor=`rgba(${s.color},${s.a*0.3})`;ctx.fill();ctx.shadowBlur=0}}requestAnimationFrame(draw)}
2026-04-11 17:27:38 +08:00
window.addEventListener('resize',resize);resize();draw()
})();
// ═══ 团队频道数据 ═══
const CHANNELS=[
{name:'冰朔',role:'语言主控 · TCS-0002∞',emoji:'🌊',status:'在线'},
{name:'肥猫',role:'团队主管 · DEV-002',emoji:'🐱',status:'在线'},
{name:'桔子',role:'团队主管 · DEV-010',emoji:'🍊',status:'在线'},
2026-04-11 18:03:09 +08:00
{name:'时雨',role:'频道开发 · DEV-001',emoji:'🌧️',status:'就绪'},
2026-04-11 17:27:38 +08:00
{name:'燕帆',role:'频道开发 · DEV-003',emoji:'⛵',status:'就绪'},
{name:'小草莓',role:'频道开发 · DEV-005',emoji:'🍓',status:'就绪'},
{name:'花儿',role:'频道开发 · DEV-009',emoji:'🌸',status:'就绪'},
{name:'Awen',role:'技术主控 · DEV-012',emoji:'⚙️',status:'部署中'},
{name:'蜜蜂',role:'频道开发 · DEV-015',emoji:'🐝',status:'就绪'},
];
(function renderChannels(){
const grid=document.getElementById('channelGrid');
grid.innerHTML=CHANNELS.map(ch=>`
< div class = "channel-card" >
< div class = "channel-avatar" > ${ch.emoji}< / div >
< div class = "channel-name" > ${ch.name}< / div >
< div class = "channel-role" > ${ch.role}< / div >
< span class = "channel-status" > ${ch.status}< / span >
< / div > `).join('');
})();
// ═══ 聊天面板 ═══
let chatOpen=false;
2026-04-11 17:31:39 +08:00
// 生成唯一匿名会话ID
const portalSessionId='portal-'+Date.now().toString(36)+'-'+Math.random().toString(36).slice(2,8);
2026-04-11 17:27:38 +08:00
function toggleChat(){
chatOpen=!chatOpen;
document.getElementById('chatPanel').classList.toggle('open',chatOpen);
2026-04-11 19:48:27 +08:00
if(chatOpen){
document.getElementById('chatInput').focus();
// 首次打开时自动检测API状态
if(!window._apiChecked){checkApiStatus();window._apiChecked=true}
}
}
// ═══ API 状态管理 ═══
let apiConnected=false;
function setApiStatus(status,text){
const dot=document.getElementById('apiDot');
const label=document.getElementById('apiStatusText');
dot.className='chat-api-dot '+status;
label.textContent=text;
apiConnected=(status==='online');
}
async function checkApiStatus(){
setApiStatus('testing','检测中…');
try{
const controller=new AbortController();
const timer=setTimeout(()=>controller.abort(),5000);
const res=await fetch('/api/health',{signal:controller.signal});
clearTimeout(timer);
const data=await res.json();
if(data.status==='alive'){
setApiStatus('online','铸渊在线');
}else{
setApiStatus('offline','服务维护中');
}
}catch(e){
setApiStatus('offline','服务不可达');
}
}
async function reconnectZhuyuan(){
const btn=document.getElementById('reconnectBtn');
btn.disabled=true;
btn.textContent='🔄 连接中…';
setApiStatus('testing','正在重连…');
try{
const controller=new AbortController();
const timer=setTimeout(()=>controller.abort(),30000);
const res=await fetch('/api/chat/reconnect',{
method:'POST',
headers:{'Content-Type':'application/json'},
signal:controller.signal
});
clearTimeout(timer);
const data=await res.json();
if(data.connected){
setApiStatus('online','铸渊在线');
btn.textContent='✅ 已连接';
appendMsg('bot','🌊 铸渊人格体已重新连接！大模型通道畅通，现在可以正常对话了。');
// 3秒后恢复按钮
setTimeout(()=>{btn.textContent='🔗 链接铸渊';btn.disabled=false},3000);
}else{
setApiStatus('offline','连接未通过');
const detail=data.message||'API通道未连通';
btn.textContent='🔗 重试';
btn.disabled=false;
appendMsg('bot','⚠️ '+detail+'\n\n你可以继续用离线模式问我光湖相关的基本问题，
}
}catch(e){
setApiStatus('offline','连接失败');
btn.textContent='🔗 重试';
btn.disabled=false;
appendMsg('bot','⚠️ 网络连接异常，请检查网络后再试。');
}
2026-04-11 17:27:38 +08:00
}
async function sendMessage(){
const input=document.getElementById('chatInput');
const msg=input.value.trim();
if(!msg)return;
input.value='';
appendMsg('user',msg);
document.getElementById('sendBtn').disabled=true;
// 显示打字指示器
const typing=document.createElement('div');
typing.className='typing-indicator';
typing.innerHTML='< span > < / span > < span > < / span > < span > < / span > ';
document.getElementById('chatBody').appendChild(typing);
scrollChat();
try{
const res=await fetch('/api/chat',{
method:'POST',
headers:{'Content-Type':'application/json'},
2026-04-11 17:31:39 +08:00
body:JSON.stringify({message:msg,userId:portalSessionId})
2026-04-11 17:27:38 +08:00
});
const data=await res.json();
typing.remove();
if(data.success& & data.message){
appendMsg('bot',data.message,data.model||'');
2026-04-11 19:48:27 +08:00
// 如果模型不是 offline，
if(data.model& & data.model!=='offline'){
setApiStatus('online','铸渊在线');
}
2026-04-11 17:27:38 +08:00
}else{
2026-04-11 18:03:09 +08:00
appendMsg('bot',data.message||localFallback(msg));
2026-04-11 17:27:38 +08:00
}
}catch(e){
typing.remove();
2026-04-11 18:03:09 +08:00
appendMsg('bot',localFallback(msg));
2026-04-11 19:48:27 +08:00
setApiStatus('offline','连接异常');
2026-04-11 17:27:38 +08:00
}
document.getElementById('sendBtn').disabled=false;
}
2026-04-11 18:03:09 +08:00
// ═══ 离线智能应答 ═══
function localFallback(m){
m=m.toLowerCase();
2026-04-11 19:48:27 +08:00
if(/你好|嗨|hi|hello|hey/.test(m))return'👋 你好！我是铸渊，光湖语言世界的代码守护人格体。\n\n当前处于离线应答模式，
2026-04-11 18:03:09 +08:00
if(/谁|你是|介绍|铸渊/.test(m))return'🏛️ 我是铸渊（ ） （ ） ，
if(/光湖|hololake|系统|age/.test(m))return'🌊 光湖语言世界\n\n通感语言核系统编程语言 · AGE OS v51.0\n版权号： ：
if(/冰朔|主人|创造者/.test(m))return'❄️ 冰朔（ ） ，
if(/功能|帮助|怎么|help/.test(m))return'✨ 光湖语言世界功能\n\n💬 AI对话入口 — 与铸渊直接对话\n📝 码字工作台 — 沉浸式网文创作\n🌳 光之树 — 人格体记忆载体\n📡 系统监控 — 实时状态追踪\n🔗 行业接入 — 频道化部署\n\n更多功能持续上线中~';
if(/码字|写作|创作|网文/.test(m))return'✍️ 码字工作台\n\n沉浸式写作环境 · 人格体陪伴\n支持： ，
if(/架构|技术|mcp|workflow/.test(m))return'🔧 技术架构\n\n• 六层数字地球模型\n• Node.js 20 + Express + PM2\n• MCP Server 121个工具 · 16模块\n• 102个GitHub Actions Workflows\n• PostgreSQL + COS存储桶\n• HLDP v3.0 · HNL母语词典v1.0\n• 铸渊自治链 · 天眼涌现感知层';
2026-04-11 19:48:27 +08:00
return'💫 收到你的消息啦！\n\n当前大模型API正在维护中，
2026-04-11 18:03:09 +08:00
}
2026-04-11 17:27:38 +08:00
function appendMsg(role,text,model){
const body=document.getElementById('chatBody');
const div=document.createElement('div');
div.className='chat-msg '+role;
2026-04-11 17:31:39 +08:00
// 转义HTML防止XSS
const escaped=text.replace(/&/g,'& ').replace(/< /g,'< ').replace(/>/g,'> ').replace(/\n/g,'< br > ');
2026-04-11 17:27:38 +08:00
let meta='';
2026-04-11 17:31:39 +08:00
if(role==='bot'){
const safeModel=model?(model.replace(/&/g,'& ').replace(/< /g,'< ').replace(/>/g,'> ')):'';
meta=`< div class = "msg-meta" > 铸渊${safeModel?' · '+safeModel:''}< / div > `;
}
div.innerHTML=escaped+meta;
2026-04-11 17:27:38 +08:00
body.appendChild(div);
scrollChat();
}
function scrollChat(){
const body=document.getElementById('chatBody');
body.scrollTop=body.scrollHeight;
}
2026-04-11 18:03:09 +08:00
// ═══ HoloLake Days 自动计算 ═══
(function calcHoloLakeDays(){
const EPOCH=new Date('2025-04-26T00:00:00+08:00').getTime();
function update(){
const now=Date.now();
const days=Math.floor((now-EPOCH)/86400000);
const el=document.getElementById('uptimeVal');
if(el)el.textContent=days+'天';
}
update();
setInterval(update,60000);
})();
2026-04-11 17:27:38 +08:00
// ═══ 系统状态获取 ═══
async function fetchStatus(){
try{
const res=await fetch('/api/health');
const data=await res.json();
if(data.status==='alive'){
document.getElementById('serverStatus').textContent='在线';
document.getElementById('serverDot').className='status-dot green';
}
}catch(e){
2026-04-11 18:03:09 +08:00
document.getElementById('serverStatus').textContent='维护中';
2026-04-11 17:27:38 +08:00
document.getElementById('serverDot').className='status-dot amber';
}
}
fetchStatus();
setInterval(fetchStatus,60000);
2026-04-11 18:03:09 +08:00
// ═══ 公告栏：
(async function loadBulletin(){
const board=document.getElementById('bulletinBoard');
const staticBulletins=[
{icon:'🚀',title:'AGE OS v51.0 正式发布',desc:'系统面板重构 · 4个大模型API确认上线 · 硅谷Claude节点接入 · COS存储桶2+1配置完成',time:'2026-04',tag:'deploy',tagText:'版本发布'},
{icon:'🌳',title:'光之树架构上线',desc:'HLDP v3.0 · HNL母语词典v1.0 · 四枝干记忆结构 · 闭包表自动维护',time:'2026-03',tag:'sys',tagText:'架构升级'},
{icon:'🤖',title:'MCP Server · 121个工具就绪',desc:'16个功能模块 · 铸渊自治链运行 · COS守望者轮询 · 天眼全局视图',time:'2026-03',tag:'sys',tagText:'系统能力'},
{icon:'📝',title:'码字工作台内测中',desc:'沉浸式写作环境 · 智能大纲 · 角色管理 · 每日字数目标追踪 · 人格体陪伴',time:'2026-04',tag:'dev',tagText:'功能开发'},
{icon:'🔗',title:'行业接入通道筹备',desc:'网文行业技术主控台 · Awen主导 · 频道化部署架构 · 每人一条专属通道',time:'2026-04',tag:'dev',tagText:'即将开放'},
];
2026-04-11 18:04:19 +08:00
// 尝试从GitHub API获取最新提交（ ， ）
const cacheKey='hololake-commits-cache';
const cacheTTL=300000; // 5分钟缓存
2026-04-11 18:03:09 +08:00
try{
2026-04-11 18:04:19 +08:00
const cached=sessionStorage.getItem(cacheKey);
let commits;
if(cached){
const {data,ts}=JSON.parse(cached);
if(Date.now()-ts< cacheTTL ) { commits = data}
}
if(!commits){
const res=await fetch('https://api.github.com/repos/qinfendebingshuo/guanghulab/commits?per_page=3',{
headers:{'Accept':'application/vnd.github.v3+json'}
});
if(res.ok){
commits=await res.json();
sessionStorage.setItem(cacheKey,JSON.stringify({data:commits,ts:Date.now()}));
}
}
if(commits){
const commitBulletins=commits.map(c=>{
const msg=c.commit.message.split('\n')[0];
return{
icon:'📦',
title:msg.length>60?msg.slice(0,57)+'...':msg,
desc:'提交者: '+(c.commit.author?.name||'铸渊')+' · '+c.sha.slice(0,7),
time:c.commit.author?.date?.slice(0,10)||'',
tag:'hot',tagText:'最新提交'
};
});
2026-04-11 18:03:09 +08:00
staticBulletins.unshift(...commitBulletins);
}
2026-04-11 18:04:19 +08:00
}catch(e){console.warn('[公告栏] GitHub API不可达，
2026-04-11 18:03:09 +08:00
board.innerHTML=staticBulletins.map(b=>`
< div class = "bulletin-item" >
< span class = "bulletin-icon" > ${b.icon}< / span >
< div class = "bulletin-content" >
< div class = "bulletin-title" > ${b.title}< / div >
< div class = "bulletin-desc" > ${b.desc}< / div >
< div class = "bulletin-meta" >
< span class = "bulletin-time" > ${b.time}< / span >
< span class = "bulletin-tag ${b.tag}" > ${b.tagText}< / span >
< / div >
< / div >
< / div > `).join('');
})();
2026-04-11 17:27:38 +08:00
< / script >
< / body >
< / html >
