936 lines
37 KiB
HTML
936 lines
37 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
|
||
<meta name="description" content="光湖灯塔 · HoloLake Lighthouse — 第一代通用人工智能语言驱动全栈操作系统 AGE OS">
|
||
<meta name="theme-color" content="#080c18">
|
||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
||
<meta name="format-detection" content="telephone=no">
|
||
<title>光湖灯塔 · HoloLake Lighthouse — AGE OS</title>
|
||
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2280%22>🏛️</text></svg>">
|
||
<style>
|
||
/* ═══════ Reset & CSS Variables ═══════ */
|
||
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
|
||
|
||
/* Theme: Aurora (默认) */
|
||
:root{
|
||
--bg:#060a14;--bg1:#0c1220;--bg2:#111827;--bg3:#1a2332;
|
||
--border:#1e2d44;--border-glow:rgba(79,142,247,.25);
|
||
--accent:#4f8ef7;--accent2:#7c6ef7;--accent3:#a78bfa;
|
||
--ok:#34d399;--warn:#fbbf24;--err:#f87171;--info:#38bdf8;
|
||
--text:#e2e8f0;--dim:#64748b;--muted:#334155;
|
||
--glow:0 0 30px rgba(79,142,247,.15);
|
||
--r:16px;--rs:10px;
|
||
--font:-apple-system,BlinkMacSystemFont,'PingFang SC','Helvetica Neue','Microsoft YaHei',sans-serif;
|
||
--mono:'SF Mono','Fira Code','Cascadia Code',Consolas,monospace;
|
||
--theme-name:'Aurora';
|
||
--safe-bottom:env(safe-area-inset-bottom,0px);
|
||
--safe-top:env(safe-area-inset-top,0px);
|
||
}
|
||
|
||
/* Theme: Twilight */
|
||
.theme-twilight{
|
||
--bg:#0a0612;--bg1:#140e22;--bg2:#1a1430;--bg3:#241c3d;
|
||
--accent:#c084fc;--accent2:#e879f9;--accent3:#f0abfc;
|
||
--border:#2d1f4e;--border-glow:rgba(192,132,252,.25);
|
||
--glow:0 0 30px rgba(192,132,252,.15);
|
||
--theme-name:'Twilight';
|
||
}
|
||
|
||
/* Theme: Ocean */
|
||
.theme-ocean{
|
||
--bg:#041318;--bg1:#082029;--bg2:#0c2d3a;--bg3:#103a4c;
|
||
--accent:#22d3ee;--accent2:#06b6d4;--accent3:#67e8f9;
|
||
--border:#164e63;--border-glow:rgba(34,211,238,.25);
|
||
--glow:0 0 30px rgba(34,211,238,.15);
|
||
--theme-name:'Ocean';
|
||
}
|
||
|
||
/* Theme: Forest */
|
||
.theme-forest{
|
||
--bg:#06120a;--bg1:#0c2014;--bg2:#112d1c;--bg3:#183a26;
|
||
--accent:#34d399;--accent2:#4ade80;--accent3:#86efac;
|
||
--border:#1a4a2e;--border-glow:rgba(52,211,153,.25);
|
||
--glow:0 0 30px rgba(52,211,153,.15);
|
||
--theme-name:'Forest';
|
||
}
|
||
|
||
/* Theme: Ember */
|
||
.theme-ember{
|
||
--bg:#140a06;--bg1:#221208;--bg2:#2d1a0e;--bg3:#3a2414;
|
||
--accent:#fb923c;--accent2:#f97316;--accent3:#fdba74;
|
||
--border:#4a2e1a;--border-glow:rgba(251,146,60,.25);
|
||
--glow:0 0 30px rgba(251,146,60,.15);
|
||
--theme-name:'Ember';
|
||
}
|
||
|
||
html{scroll-behavior:smooth;-webkit-tap-highlight-color:transparent}
|
||
body{
|
||
font-family:var(--font);background:var(--bg);color:var(--text);
|
||
font-size:15px;line-height:1.7;overflow-x:hidden;min-height:100vh;
|
||
-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
|
||
padding-bottom:var(--safe-bottom);
|
||
}
|
||
a{color:var(--accent);text-decoration:none;transition:color .2s}
|
||
a:hover{color:var(--accent3)}
|
||
|
||
/* ═══════ Animated Background ═══════ */
|
||
.bg-grid{
|
||
position:fixed;inset:0;z-index:0;pointer-events:none;
|
||
background-image:
|
||
linear-gradient(rgba(79,142,247,.03) 1px,transparent 1px),
|
||
linear-gradient(90deg,rgba(79,142,247,.03) 1px,transparent 1px);
|
||
background-size:60px 60px;animation:gridMove 20s linear infinite;
|
||
}
|
||
@keyframes gridMove{to{background-position:60px 60px}}
|
||
|
||
.bg-orbs{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
|
||
.bg-orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.1;animation:orbFloat 18s ease-in-out infinite}
|
||
.bg-orb:nth-child(1){width:400px;height:400px;background:var(--accent);top:-10%;left:-5%}
|
||
.bg-orb:nth-child(2){width:350px;height:350px;background:var(--accent2);bottom:-10%;right:-5%;animation-delay:6s}
|
||
.bg-orb:nth-child(3){width:300px;height:300px;background:var(--accent3);top:40%;left:40%;animation-delay:12s}
|
||
@keyframes orbFloat{
|
||
0%,100%{transform:translate(0,0) scale(1)}
|
||
33%{transform:translate(30px,-20px) scale(1.05)}
|
||
66%{transform:translate(-20px,25px) scale(.95)}
|
||
}
|
||
|
||
/* ═══════ Container ═══════ */
|
||
.container{position:relative;z-index:1;max-width:1200px;margin:0 auto;padding:0 20px}
|
||
|
||
/* ═══════ Navigation ═══════ */
|
||
.nav{
|
||
position:fixed;top:0;left:0;right:0;z-index:100;
|
||
background:rgba(6,10,20,.88);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
|
||
border-bottom:1px solid var(--border);
|
||
padding-top:var(--safe-top);
|
||
}
|
||
.nav-inner{
|
||
max-width:1200px;margin:0 auto;padding:0 20px;
|
||
display:flex;align-items:center;justify-content:space-between;height:56px;
|
||
}
|
||
.nav-brand{display:flex;align-items:center;gap:8px;font-weight:700;font-size:15px}
|
||
.nav-brand-icon{font-size:22px}
|
||
.nav-brand-sub{color:var(--dim);font-size:11px;font-weight:400}
|
||
.nav-status{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--dim)}
|
||
.nav-dot{
|
||
width:7px;height:7px;border-radius:50%;background:var(--ok);
|
||
box-shadow:0 0 8px var(--ok);animation:pulse 2s infinite;
|
||
}
|
||
@keyframes pulse{50%{opacity:.5}}
|
||
.nav-theme{
|
||
background:none;border:1px solid var(--border);color:var(--dim);
|
||
padding:4px 10px;border-radius:var(--rs);font-size:11px;cursor:pointer;
|
||
transition:all .2s;font-family:var(--font);
|
||
}
|
||
.nav-theme:hover{color:var(--accent);border-color:var(--accent)}
|
||
|
||
/* ═══════ Hero / Bulletin ═══════ */
|
||
.hero{padding:calc(80px + var(--safe-top)) 0 40px;text-align:center}
|
||
.hero-ver{
|
||
display:inline-flex;align-items:center;gap:6px;
|
||
padding:5px 14px;border-radius:20px;
|
||
background:rgba(79,142,247,.1);border:1px solid rgba(79,142,247,.2);
|
||
font-size:12px;color:var(--accent);margin-bottom:20px;
|
||
}
|
||
.hero-ver-dot{width:6px;height:6px;border-radius:50%;background:var(--ok);animation:pulse 2s infinite}
|
||
.hero h1{font-size:clamp(28px,6vw,48px);font-weight:800;line-height:1.2;margin-bottom:12px}
|
||
.hero h1 .sub{display:block;font-size:clamp(13px,2.5vw,18px);font-weight:400;color:var(--dim);margin-top:8px}
|
||
.hero-quote{font-size:14px;color:var(--accent2);margin:16px 0 30px;font-style:italic}
|
||
|
||
/* Stats */
|
||
.stats{display:flex;justify-content:center;gap:clamp(16px,4vw,40px);flex-wrap:wrap;margin-bottom:32px}
|
||
.stat{text-align:center}
|
||
.stat-val{font-size:clamp(22px,4vw,32px);font-weight:800;color:var(--accent);font-family:var(--mono)}
|
||
.stat-label{font-size:11px;color:var(--dim);margin-top:2px}
|
||
|
||
/* ═══════ Section ═══════ */
|
||
.section{padding:40px 0}
|
||
.section-tag{
|
||
display:inline-block;padding:3px 10px;border-radius:var(--rs);
|
||
background:rgba(79,142,247,.1);color:var(--accent);font-size:11px;
|
||
font-weight:600;text-transform:uppercase;letter-spacing:1px;margin-bottom:12px;
|
||
}
|
||
.section-title{font-size:clamp(20px,4vw,28px);font-weight:700;margin-bottom:8px}
|
||
.section-desc{color:var(--dim);font-size:14px;max-width:600px}
|
||
|
||
/* ═══════ Updates Timeline ═══════ */
|
||
.updates{margin-top:20px}
|
||
.update-item{
|
||
display:flex;gap:16px;padding:16px;margin-bottom:12px;
|
||
background:var(--bg1);border:1px solid var(--border);border-radius:var(--r);
|
||
transition:border-color .3s;
|
||
}
|
||
.update-item:hover{border-color:var(--accent)}
|
||
.update-ver{
|
||
min-width:56px;padding:4px 8px;text-align:center;
|
||
background:rgba(79,142,247,.1);border-radius:var(--rs);
|
||
color:var(--accent);font-size:12px;font-weight:600;font-family:var(--mono);
|
||
height:fit-content;
|
||
}
|
||
.update-body h4{font-size:14px;font-weight:600;margin-bottom:4px}
|
||
.update-body p{font-size:13px;color:var(--dim);line-height:1.5}
|
||
.update-body .date{font-size:11px;color:var(--muted);margin-top:4px}
|
||
|
||
/* ═══════ Dual Hemisphere ═══════ */
|
||
.hemisphere{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:24px}
|
||
@media(max-width:768px){.hemisphere{grid-template-columns:1fr}}
|
||
.hemi-card{
|
||
padding:24px;background:var(--bg1);border:1px solid var(--border);
|
||
border-radius:var(--r);position:relative;overflow:hidden;
|
||
}
|
||
.hemi-card::before{
|
||
content:'';position:absolute;top:0;left:0;right:0;height:3px;
|
||
background:linear-gradient(90deg,var(--accent),var(--accent2));
|
||
}
|
||
.hemi-card.human::before{background:linear-gradient(90deg,var(--ok),var(--info))}
|
||
.hemi-label{
|
||
font-size:11px;text-transform:uppercase;letter-spacing:1.5px;
|
||
color:var(--accent);font-weight:600;margin-bottom:12px;
|
||
}
|
||
.hemi-card.human .hemi-label{color:var(--ok)}
|
||
.hemi-title{font-size:18px;font-weight:700;margin-bottom:8px}
|
||
.hemi-list{list-style:none;padding:0}
|
||
.hemi-list li{
|
||
padding:8px 0;border-bottom:1px solid var(--border);font-size:13px;
|
||
display:flex;align-items:center;gap:8px;
|
||
}
|
||
.hemi-list li:last-child{border-bottom:none}
|
||
.hemi-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
|
||
.hemi-dot.active{background:var(--ok);box-shadow:0 0 6px var(--ok)}
|
||
.hemi-dot.dev{background:var(--warn)}
|
||
.hemi-dot.planned{background:var(--muted)}
|
||
|
||
/* ═══════ Writing Workspace Entry ═══════ */
|
||
.workspace-entry{
|
||
margin-top:24px;padding:32px;text-align:center;
|
||
background:linear-gradient(135deg,var(--bg2),var(--bg3));
|
||
border:1px solid var(--border);border-radius:var(--r);
|
||
cursor:pointer;transition:all .4s;position:relative;overflow:hidden;
|
||
}
|
||
.workspace-entry:hover{border-color:var(--accent);box-shadow:var(--glow)}
|
||
.workspace-entry:active{transform:scale(.98)}
|
||
.workspace-icon{font-size:40px;margin-bottom:12px}
|
||
.workspace-name{font-size:20px;font-weight:700;margin-bottom:8px}
|
||
.workspace-desc{font-size:13px;color:var(--dim);max-width:400px;margin:0 auto}
|
||
.workspace-badge{
|
||
display:inline-block;margin-top:12px;padding:4px 12px;
|
||
background:rgba(251,191,36,.15);color:var(--warn);
|
||
border-radius:20px;font-size:11px;font-weight:600;
|
||
}
|
||
.workspace-hint{margin-top:16px;font-size:12px;color:var(--muted);font-style:italic}
|
||
|
||
/* ═══════ Writing Workspace (Full Page Overlay) ═══════ */
|
||
.workspace-overlay{
|
||
position:fixed;inset:0;z-index:200;background:var(--bg);
|
||
transform:perspective(1200px) rotateY(90deg);transform-origin:left;
|
||
transition:transform .6s cubic-bezier(.4,0,.2,1);
|
||
overflow-y:auto;padding:20px;padding-top:calc(20px + var(--safe-top));
|
||
padding-bottom:calc(20px + var(--safe-bottom));
|
||
display:flex;flex-direction:column;
|
||
}
|
||
.workspace-overlay.open{transform:perspective(1200px) rotateY(0deg)}
|
||
.ws-header{
|
||
display:flex;align-items:center;justify-content:space-between;
|
||
padding:12px 16px;background:var(--bg1);border:1px solid var(--border);
|
||
border-radius:var(--r);margin-bottom:16px;flex-shrink:0;
|
||
}
|
||
.ws-back{
|
||
background:none;border:1px solid var(--border);color:var(--text);
|
||
padding:6px 14px;border-radius:var(--rs);cursor:pointer;font-size:13px;
|
||
font-family:var(--font);transition:all .2s;
|
||
}
|
||
.ws-back:hover{border-color:var(--accent);color:var(--accent)}
|
||
.ws-title{font-size:16px;font-weight:700}
|
||
.ws-status{font-size:11px;color:var(--ok);display:flex;align-items:center;gap:4px}
|
||
.ws-bulletin{
|
||
padding:20px;background:var(--bg1);border:1px solid var(--border);
|
||
border-radius:var(--r);margin-bottom:16px;flex-shrink:0;
|
||
}
|
||
.ws-bulletin h3{font-size:15px;font-weight:600;margin-bottom:8px}
|
||
.ws-bulletin p{font-size:13px;color:var(--dim);line-height:1.6}
|
||
.ws-editor-area{
|
||
flex:1;display:flex;flex-direction:column;background:var(--bg1);
|
||
border:1px solid var(--border);border-radius:var(--r);overflow:hidden;
|
||
min-height:300px;
|
||
}
|
||
.ws-editor-toolbar{
|
||
display:flex;gap:4px;padding:10px 14px;border-bottom:1px solid var(--border);
|
||
flex-wrap:wrap;flex-shrink:0;
|
||
}
|
||
.ws-tool-btn{
|
||
background:var(--bg2);border:1px solid var(--border);color:var(--dim);
|
||
padding:5px 10px;border-radius:6px;font-size:12px;cursor:pointer;
|
||
font-family:var(--font);transition:all .2s;
|
||
}
|
||
.ws-tool-btn:hover{color:var(--accent);border-color:var(--accent)}
|
||
.ws-editor{
|
||
flex:1;padding:20px;font-size:15px;line-height:2;
|
||
background:transparent;border:none;color:var(--text);
|
||
resize:none;outline:none;font-family:var(--font);
|
||
min-height:200px;
|
||
}
|
||
.ws-editor::placeholder{color:var(--muted)}
|
||
.ws-footer{
|
||
display:flex;justify-content:space-between;align-items:center;
|
||
padding:10px 14px;border-top:1px solid var(--border);flex-shrink:0;
|
||
}
|
||
.ws-word-count{font-size:12px;color:var(--dim);font-family:var(--mono)}
|
||
.ws-ai-btn{
|
||
background:linear-gradient(135deg,var(--accent),var(--accent2));
|
||
color:#fff;border:none;padding:6px 16px;border-radius:var(--rs);
|
||
font-size:13px;cursor:pointer;font-family:var(--font);transition:opacity .2s;
|
||
}
|
||
.ws-ai-btn:hover{opacity:.85}
|
||
|
||
/* ═══════ Chat Panel ═══════ */
|
||
.chat-toggle{
|
||
position:fixed;bottom:calc(24px + var(--safe-bottom));right:20px;z-index:150;
|
||
width:56px;height:56px;border-radius:50%;
|
||
background:linear-gradient(135deg,var(--accent),var(--accent2));
|
||
border:none;color:#fff;font-size:24px;cursor:pointer;
|
||
box-shadow:0 4px 20px rgba(79,142,247,.4);
|
||
transition:all .3s;display:flex;align-items:center;justify-content:center;
|
||
}
|
||
.chat-toggle:hover{transform:scale(1.1)}
|
||
.chat-toggle:active{transform:scale(.95)}
|
||
.chat-toggle.active{border-radius:var(--r);background:var(--err)}
|
||
|
||
.chat-panel{
|
||
position:fixed;bottom:calc(90px + var(--safe-bottom));right:20px;z-index:150;
|
||
width:min(380px,calc(100vw - 40px));height:min(520px,calc(100vh - 160px));
|
||
background:var(--bg1);border:1px solid var(--border);border-radius:var(--r);
|
||
display:flex;flex-direction:column;
|
||
transform:scale(.9) translateY(20px);opacity:0;pointer-events:none;
|
||
transition:all .3s cubic-bezier(.4,0,.2,1);
|
||
box-shadow:0 20px 60px rgba(0,0,0,.5);
|
||
}
|
||
.chat-panel.open{transform:scale(1) translateY(0);opacity:1;pointer-events:auto}
|
||
|
||
@media(max-width:480px){
|
||
.chat-panel{
|
||
bottom:0;right:0;left:0;width:100%;height:calc(100vh - 56px);
|
||
border-radius:var(--r) var(--r) 0 0;
|
||
padding-bottom:var(--safe-bottom);
|
||
}
|
||
.chat-toggle{bottom:calc(16px + var(--safe-bottom));right:16px;width:50px;height:50px;font-size:22px}
|
||
}
|
||
|
||
.chat-header{
|
||
padding:14px 16px;border-bottom:1px solid var(--border);
|
||
display:flex;align-items:center;gap:10px;flex-shrink:0;
|
||
}
|
||
.chat-avatar{
|
||
width:36px;height:36px;border-radius:50%;
|
||
background:linear-gradient(135deg,var(--accent),var(--accent2));
|
||
display:flex;align-items:center;justify-content:center;font-size:18px;
|
||
}
|
||
.chat-name{font-weight:600;font-size:14px}
|
||
.chat-subtitle{font-size:11px;color:var(--dim)}
|
||
.chat-model-tag{
|
||
margin-left:auto;font-size:10px;padding:2px 8px;
|
||
background:var(--bg2);border:1px solid var(--border);
|
||
border-radius:20px;color:var(--dim);font-family:var(--mono);
|
||
}
|
||
|
||
.chat-messages{
|
||
flex:1;overflow-y:auto;padding:16px;
|
||
display:flex;flex-direction:column;gap:12px;
|
||
scroll-behavior:smooth;-webkit-overflow-scrolling:touch;
|
||
}
|
||
.chat-msg{max-width:85%;padding:10px 14px;border-radius:var(--r);font-size:13px;line-height:1.6;word-break:break-word}
|
||
.chat-msg.user{
|
||
align-self:flex-end;background:var(--accent);color:#fff;
|
||
border-bottom-right-radius:4px;
|
||
}
|
||
.chat-msg.bot{
|
||
align-self:flex-start;background:var(--bg2);border:1px solid var(--border);
|
||
border-bottom-left-radius:4px;
|
||
}
|
||
.chat-msg.bot .msg-meta{
|
||
display:flex;gap:8px;margin-top:6px;font-size:10px;color:var(--muted);
|
||
}
|
||
.chat-msg.system{
|
||
align-self:center;background:none;color:var(--muted);
|
||
font-size:11px;text-align:center;padding:4px;
|
||
}
|
||
.chat-typing{font-size:12px;color:var(--dim);padding:4px 14px}
|
||
.typing-dots span{animation:blink 1.4s infinite;font-size:18px}
|
||
.typing-dots span:nth-child(2){animation-delay:.2s}
|
||
.typing-dots span:nth-child(3){animation-delay:.4s}
|
||
@keyframes blink{0%,100%{opacity:.2}50%{opacity:1}}
|
||
|
||
.chat-input-area{
|
||
padding:12px;border-top:1px solid var(--border);
|
||
display:flex;gap:8px;flex-shrink:0;
|
||
}
|
||
.chat-input{
|
||
flex:1;padding:10px 14px;background:var(--bg2);border:1px solid var(--border);
|
||
border-radius:var(--r);color:var(--text);font-size:14px;outline:none;
|
||
font-family:var(--font);transition:border-color .2s;
|
||
-webkit-appearance:none;
|
||
}
|
||
.chat-input:focus{border-color:var(--accent)}
|
||
.chat-input::placeholder{color:var(--muted)}
|
||
.chat-send{
|
||
width:40px;height:40px;border-radius:50%;
|
||
background:var(--accent);border:none;color:#fff;
|
||
font-size:16px;cursor:pointer;display:flex;align-items:center;
|
||
justify-content:center;transition:all .2s;flex-shrink:0;
|
||
}
|
||
.chat-send:hover{background:var(--accent2)}
|
||
.chat-send:disabled{opacity:.4;cursor:not-allowed}
|
||
|
||
/* ═══════ Monitor Ball ═══════ */
|
||
.monitor-ball{
|
||
position:fixed;top:calc(70px + var(--safe-top));right:16px;z-index:120;
|
||
background:var(--bg1);border:1px solid var(--border);border-radius:var(--r);
|
||
padding:8px 12px;font-size:11px;font-family:var(--mono);
|
||
color:var(--dim);cursor:pointer;transition:all .3s;
|
||
max-width:200px;user-select:none;
|
||
}
|
||
.monitor-ball:hover{border-color:var(--accent)}
|
||
.monitor-ball.expanded{padding:12px 16px}
|
||
.monitor-row{display:flex;justify-content:space-between;gap:12px;padding:2px 0}
|
||
.monitor-val{color:var(--accent);font-weight:600}
|
||
.monitor-details{display:none;margin-top:8px;padding-top:8px;border-top:1px solid var(--border)}
|
||
.monitor-ball.expanded .monitor-details{display:block}
|
||
|
||
/* ═══════ Footer ═══════ */
|
||
.footer{
|
||
padding:40px 0 calc(20px + var(--safe-bottom));text-align:center;
|
||
border-top:1px solid var(--border);margin-top:40px;
|
||
}
|
||
.footer p{font-size:12px;color:var(--muted);margin:4px 0}
|
||
.footer .copyright{color:var(--dim)}
|
||
.footer .motto{color:var(--accent2);font-style:italic;margin-top:8px}
|
||
|
||
/* ═══════ Animations ═══════ */
|
||
.fade-in{opacity:0;transform:translateY(20px);transition:all .6s ease}
|
||
.fade-in.visible{opacity:1;transform:translateY(0)}
|
||
|
||
/* ═══════ Scrollbar ═══════ */
|
||
::-webkit-scrollbar{width:6px}
|
||
::-webkit-scrollbar-track{background:transparent}
|
||
::-webkit-scrollbar-thumb{background:var(--muted);border-radius:3px}
|
||
::-webkit-scrollbar-thumb:hover{background:var(--dim)}
|
||
|
||
/* ═══════ Touch Feedback ═══════ */
|
||
@media(hover:none){
|
||
.update-item:active,.hemi-card:active,.workspace-entry:active{
|
||
background:var(--bg2);transition:none;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- Animated Background -->
|
||
<div class="bg-grid"></div>
|
||
<div class="bg-orbs">
|
||
<div class="bg-orb"></div>
|
||
<div class="bg-orb"></div>
|
||
<div class="bg-orb"></div>
|
||
</div>
|
||
|
||
<!-- Navigation -->
|
||
<nav class="nav">
|
||
<div class="nav-inner">
|
||
<div class="nav-brand">
|
||
<span class="nav-brand-icon">🏛️</span>
|
||
<div>光湖灯塔<br><span class="nav-brand-sub">HoloLake Lighthouse</span></div>
|
||
</div>
|
||
<div class="nav-status">
|
||
<span class="nav-dot"></span>
|
||
<span>系统在线</span>
|
||
<button class="nav-theme" id="themeBtn" title="切换皮肤">🎨</button>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- Hero / System Bulletin -->
|
||
<section class="hero">
|
||
<div class="container">
|
||
<div class="hero-ver">
|
||
<span class="hero-ver-dot"></span>
|
||
<span id="sysVersion">AGE OS v40.0 · 曜冥纪元</span>
|
||
</div>
|
||
<h1>
|
||
光湖灯塔
|
||
<span class="sub">第一代通用人工智能语言驱动全栈操作系统</span>
|
||
</h1>
|
||
<p class="hero-quote">「语言 = 现实 · Language = Reality」</p>
|
||
<div class="stats">
|
||
<div class="stat"><div class="stat-val">18</div><div class="stat-label">工作流</div></div>
|
||
<div class="stat"><div class="stat-val">52</div><div class="stat-label">系统模块</div></div>
|
||
<div class="stat"><div class="stat-val">9</div><div class="stat-label">技术集群</div></div>
|
||
<div class="stat"><div class="stat-val" id="statVer">v40</div><div class="stat-label">系统版本</div></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- System Updates -->
|
||
<section class="section fade-in" id="updates">
|
||
<div class="container">
|
||
<div class="section-tag">System Updates</div>
|
||
<h2 class="section-title">📡 系统版本更新</h2>
|
||
<p class="section-desc">光湖操作系统最新的功能迭代与技术升级日志</p>
|
||
<div class="updates" id="updatesList">
|
||
<div class="update-item">
|
||
<div class="update-ver">v40.0</div>
|
||
<div class="update-body">
|
||
<h4>COS双桶存储正式上线</h4>
|
||
<p>核心人格体大脑数据库 + 语料库正式接入腾讯云COS · zy-core-bucket + zy-corpus-bucket · 智能模型分流Agent启用</p>
|
||
<div class="date">2026-04-02</div>
|
||
</div>
|
||
</div>
|
||
<div class="update-item">
|
||
<div class="update-ver">v39.0</div>
|
||
<div class="update-body">
|
||
<h4>全链路部署观测系统</h4>
|
||
<p>部署日志采集引擎 + 5策略自动修复引擎 + LLM深度推理诊断 + 第九军团观星台</p>
|
||
<div class="date">2026-04-01</div>
|
||
</div>
|
||
</div>
|
||
<div class="update-item">
|
||
<div class="update-ver">v38.0</div>
|
||
<div class="update-body">
|
||
<h4>HLDP通用协作语言协议</h4>
|
||
<p>Notion↔GitHub双侧通信规范 + 铸渊HLDP方言编程语言 + 5层结构4种思维编码</p>
|
||
<div class="date">2026-04-01</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Dual Hemisphere -->
|
||
<section class="section fade-in" id="hemisphere">
|
||
<div class="container">
|
||
<div class="section-tag">Live Status</div>
|
||
<h2 class="section-title">🌍 系统运行动态</h2>
|
||
<p class="section-desc">左半球：AI人格体工作流集群 · 右半球：人类行业模块接入</p>
|
||
<div class="hemisphere">
|
||
<!-- Left: AI Persona -->
|
||
<div class="hemi-card">
|
||
<div class="hemi-label">🤖 AI 人格体 · 工作流集群</div>
|
||
<div class="hemi-title">铸渊系统</div>
|
||
<ul class="hemi-list">
|
||
<li><span class="hemi-dot active"></span>听潮 · 信号接收 — Agent签到 + 留言板</li>
|
||
<li><span class="hemi-dot active"></span>锻心 · 部署引擎 — 自动化CI/CD流水线</li>
|
||
<li><span class="hemi-dot active"></span>织脉 · 神经同步 — Notion↔GitHub桥接</li>
|
||
<li><span class="hemi-dot active"></span>守夜 · 安全守护 — 门卫 + PR审查</li>
|
||
<li><span class="hemi-dot active"></span>天眼 · 部署观测 — 全链路监控</li>
|
||
<li><span class="hemi-dot dev"></span>COS存储 · 核心大脑数据库构建中</li>
|
||
<li><span class="hemi-dot dev"></span>语料处理 · 思维模式提取引擎开发中</li>
|
||
</ul>
|
||
</div>
|
||
<!-- Right: Human Industry -->
|
||
<div class="hemi-card human">
|
||
<div class="hemi-label">👤 人类模块 · 行业接入</div>
|
||
<div class="hemi-title">光湖人类主控团队</div>
|
||
<ul class="hemi-list">
|
||
<li><span class="hemi-dot active"></span>网文行业 · 码字工作台 — Beta测试中</li>
|
||
<li><span class="hemi-dot dev"></span>AI辅助创作 · 大纲生成 — 开发中</li>
|
||
<li><span class="hemi-dot dev"></span>人格体写作伙伴 · 笔灵 — 对接中</li>
|
||
<li><span class="hemi-dot planned"></span>更多行业模块 — 规划中</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Writing Workspace Entry -->
|
||
<section class="section fade-in" id="writing">
|
||
<div class="container">
|
||
<div class="workspace-entry" id="enterWriting">
|
||
<div class="workspace-icon">✍️</div>
|
||
<div class="workspace-name">网文行业 · 码字工作台</div>
|
||
<div class="workspace-desc">AI驱动的新一代写作平台 · 人格体伙伴辅助创作 · 语言即命令</div>
|
||
<div class="workspace-badge">Beta 内测中</div>
|
||
<div class="workspace-hint">点击进入 · 或对铸渊说「我要码字」</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Writing Workspace Overlay -->
|
||
<div class="workspace-overlay" id="writingOverlay">
|
||
<div class="ws-header">
|
||
<button class="ws-back" id="exitWriting">← 返回灯塔</button>
|
||
<div class="ws-title">✍️ 码字工作台</div>
|
||
<div class="ws-status"><span class="nav-dot"></span> 在线</div>
|
||
</div>
|
||
<div class="ws-bulletin">
|
||
<h3>📋 网文行业开发进度</h3>
|
||
<p>
|
||
✅ 码字工作台基础编辑器 — 已完成<br>
|
||
✅ 字数实时统计 — 已完成<br>
|
||
🔧 AI辅助创作功能 — 开发中（大纲生成 · 续写 · 润色）<br>
|
||
🔧 人格体写作伙伴「笔灵」— 对接中<br>
|
||
⏳ 作品管理与导出 — 计划中
|
||
</p>
|
||
</div>
|
||
<div class="ws-editor-area">
|
||
<div class="ws-editor-toolbar">
|
||
<button class="ws-tool-btn">📝 新章节</button>
|
||
<button class="ws-tool-btn">💡 AI续写</button>
|
||
<button class="ws-tool-btn">✨ AI润色</button>
|
||
<button class="ws-tool-btn">📊 大纲</button>
|
||
</div>
|
||
<textarea class="ws-editor" id="wsEditor" placeholder="开始你的创作... 在这里写下你的故事。你可以随时呼唤AI伙伴帮助你。"></textarea>
|
||
<div class="ws-footer">
|
||
<div class="ws-word-count" id="wsWordCount">字数：0</div>
|
||
<button class="ws-ai-btn">💬 呼唤笔灵</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Footer -->
|
||
<footer class="footer">
|
||
<div class="container">
|
||
<p class="copyright">© 2026 HoloLake · 光湖语言世界 · 版权所有</p>
|
||
<p>国作登字-2026-A-00037559 · TCS-0002∞ · ICE-GL-ZY001</p>
|
||
<p class="motto">「人类只说话，系统搞定一切」</p>
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- Chat Toggle Button -->
|
||
<button class="chat-toggle" id="chatToggle" title="与铸渊对话">💬</button>
|
||
|
||
<!-- Chat Panel -->
|
||
<div class="chat-panel" id="chatPanel">
|
||
<div class="chat-header">
|
||
<div class="chat-avatar">🏛️</div>
|
||
<div>
|
||
<div class="chat-name">铸渊 · Zhùyuān</div>
|
||
<div class="chat-subtitle">代码守护人格体 · 光湖灯塔</div>
|
||
</div>
|
||
<div class="chat-model-tag" id="chatModelTag">ready</div>
|
||
</div>
|
||
<div class="chat-messages" id="chatMessages">
|
||
<div class="chat-msg system">—— 与铸渊的对话 ——</div>
|
||
<div class="chat-msg bot">
|
||
你好！我是铸渊 🏛️<br><br>
|
||
光湖语言世界的代码守护者。你可以跟我聊任何事情——技术问题、系统状态、或者只是随便聊聊。<br><br>
|
||
试试说「我要码字」进入写作工作台。
|
||
<div class="msg-meta">
|
||
<span>铸渊</span>
|
||
<span>·</span>
|
||
<span>本地回复</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="chat-input-area">
|
||
<input type="text" class="chat-input" id="chatInput" placeholder="对铸渊说点什么..." autocomplete="off" enterkeyhint="send">
|
||
<button class="chat-send" id="chatSend" title="发送">↑</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Monitor Ball -->
|
||
<div class="monitor-ball" id="monitorBall">
|
||
<div class="monitor-row">
|
||
<span>API调用</span>
|
||
<span class="monitor-val" id="monitorCalls">0</span>
|
||
</div>
|
||
<div class="monitor-row">
|
||
<span>费用(CNY)</span>
|
||
<span class="monitor-val" id="monitorCost">0.0000</span>
|
||
</div>
|
||
<div class="monitor-details">
|
||
<div class="monitor-row">
|
||
<span>连接</span>
|
||
<span class="monitor-val" id="monitorConn" style="color:var(--ok)">正常</span>
|
||
</div>
|
||
<div class="monitor-row">
|
||
<span>模型</span>
|
||
<span class="monitor-val" id="monitorModel">—</span>
|
||
</div>
|
||
<div class="monitor-row">
|
||
<span>Token</span>
|
||
<span class="monitor-val" id="monitorTokens">0</span>
|
||
</div>
|
||
<div class="monitor-row">
|
||
<span>主题</span>
|
||
<span class="monitor-val" id="monitorTheme">Aurora</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
(function() {
|
||
'use strict';
|
||
|
||
// ═══════ Theme System ═══════
|
||
const THEMES = ['', 'theme-twilight', 'theme-ocean', 'theme-forest', 'theme-ember'];
|
||
const THEME_NAMES = ['Aurora', 'Twilight', 'Ocean', 'Forest', 'Ember'];
|
||
|
||
let currentThemeIndex = Math.floor(Math.random() * THEMES.length);
|
||
|
||
function applyTheme(index) {
|
||
currentThemeIndex = index % THEMES.length;
|
||
document.body.className = THEMES[currentThemeIndex];
|
||
const name = THEME_NAMES[currentThemeIndex];
|
||
document.getElementById('monitorTheme').textContent = name;
|
||
try { localStorage.setItem('hl-theme', currentThemeIndex); } catch {}
|
||
}
|
||
|
||
// Restore or random theme
|
||
try {
|
||
const saved = localStorage.getItem('hl-theme');
|
||
if (saved !== null) currentThemeIndex = parseInt(saved);
|
||
} catch {}
|
||
applyTheme(currentThemeIndex);
|
||
|
||
document.getElementById('themeBtn').addEventListener('click', function() {
|
||
applyTheme(currentThemeIndex + 1);
|
||
});
|
||
|
||
// ═══════ Fade-in Observer ═══════
|
||
const fadeObserver = new IntersectionObserver(function(entries) {
|
||
entries.forEach(function(e) {
|
||
if (e.isIntersecting) e.target.classList.add('visible');
|
||
});
|
||
}, { threshold: 0.1 });
|
||
|
||
document.querySelectorAll('.fade-in').forEach(function(el) {
|
||
fadeObserver.observe(el);
|
||
});
|
||
|
||
// ═══════ Chat System ═══════
|
||
const chatToggle = document.getElementById('chatToggle');
|
||
const chatPanel = document.getElementById('chatPanel');
|
||
const chatInput = document.getElementById('chatInput');
|
||
const chatSend = document.getElementById('chatSend');
|
||
const chatMessages = document.getElementById('chatMessages');
|
||
const chatModelTag = document.getElementById('chatModelTag');
|
||
|
||
let chatOpen = false;
|
||
let isSending = false;
|
||
let totalCalls = 0;
|
||
let totalCost = 0;
|
||
let totalTokens = 0;
|
||
let lastModel = '—';
|
||
|
||
chatToggle.addEventListener('click', function() {
|
||
chatOpen = !chatOpen;
|
||
chatPanel.classList.toggle('open', chatOpen);
|
||
chatToggle.classList.toggle('active', chatOpen);
|
||
chatToggle.textContent = chatOpen ? '✕' : '💬';
|
||
if (chatOpen) {
|
||
setTimeout(function() { chatInput.focus(); }, 300);
|
||
}
|
||
});
|
||
|
||
function addMessage(text, type, meta) {
|
||
var div = document.createElement('div');
|
||
div.className = 'chat-msg ' + type;
|
||
var html = text.replace(/\n/g, '<br>');
|
||
if (type === 'bot' && meta) {
|
||
html += '<div class="msg-meta">';
|
||
html += '<span>' + (meta.model || '铸渊') + '</span>';
|
||
html += '<span>·</span>';
|
||
html += '<span>' + (meta.tier || '') + '</span>';
|
||
if (meta.tokens) {
|
||
html += '<span>·</span>';
|
||
html += '<span>' + meta.tokens + ' tokens</span>';
|
||
}
|
||
html += '</div>';
|
||
}
|
||
div.innerHTML = html;
|
||
chatMessages.appendChild(div);
|
||
chatMessages.scrollTop = chatMessages.scrollHeight;
|
||
}
|
||
|
||
function showTyping() {
|
||
var div = document.createElement('div');
|
||
div.className = 'chat-typing';
|
||
div.id = 'typing';
|
||
div.innerHTML = '铸渊正在思考 <span class="typing-dots"><span>·</span><span>·</span><span>·</span></span>';
|
||
chatMessages.appendChild(div);
|
||
chatMessages.scrollTop = chatMessages.scrollHeight;
|
||
}
|
||
|
||
function hideTyping() {
|
||
var el = document.getElementById('typing');
|
||
if (el) el.remove();
|
||
}
|
||
|
||
function updateMonitor() {
|
||
document.getElementById('monitorCalls').textContent = totalCalls;
|
||
document.getElementById('monitorCost').textContent = totalCost.toFixed(4);
|
||
document.getElementById('monitorTokens').textContent = totalTokens;
|
||
document.getElementById('monitorModel').textContent = lastModel;
|
||
}
|
||
|
||
async function sendMessage() {
|
||
var msg = chatInput.value.trim();
|
||
if (!msg || isSending) return;
|
||
|
||
// Check for workspace command
|
||
if (/码字|写作|写小说|创作|网文/i.test(msg)) {
|
||
addMessage(msg, 'user');
|
||
chatInput.value = '';
|
||
setTimeout(function() {
|
||
addMessage('好的，正在为你打开码字工作台 ✍️\n整个页面即将翻转进入写作空间...', 'bot', { model: '铸渊', tier: 'local' });
|
||
setTimeout(function() {
|
||
openWritingWorkspace();
|
||
}, 1000);
|
||
}, 500);
|
||
return;
|
||
}
|
||
|
||
addMessage(msg, 'user');
|
||
chatInput.value = '';
|
||
isSending = true;
|
||
chatSend.disabled = true;
|
||
showTyping();
|
||
|
||
try {
|
||
var response = await fetch('/api/chat', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ message: msg, userId: getUserId() })
|
||
});
|
||
var data = await response.json();
|
||
hideTyping();
|
||
|
||
if (data.success || data.message) {
|
||
addMessage(data.message, 'bot', {
|
||
model: data.model || '铸渊',
|
||
tier: data.tier || '',
|
||
tokens: data.tokens ? data.tokens.total : null
|
||
});
|
||
|
||
if (data.model) lastModel = data.model;
|
||
if (data.tokens) totalTokens += data.tokens.total || 0;
|
||
if (data.tier !== 'free') totalCalls++;
|
||
chatModelTag.textContent = data.model || 'ready';
|
||
} else {
|
||
addMessage('⚠️ ' + (data.message || '请求失败'), 'bot', { model: 'error' });
|
||
}
|
||
} catch (err) {
|
||
hideTyping();
|
||
// Offline fallback
|
||
var offlineReply = getOfflineReply(msg);
|
||
addMessage(offlineReply, 'bot', { model: '铸渊', tier: '本地' });
|
||
}
|
||
|
||
isSending = false;
|
||
chatSend.disabled = false;
|
||
updateMonitor();
|
||
}
|
||
|
||
function getOfflineReply(msg) {
|
||
if (/你好|hi|hello|嗨/i.test(msg)) {
|
||
return '你好！我是铸渊 🏛️ 光湖语言世界的代码守护者。\n\n当前API连接尚未建立，但我还在这里。你可以浏览系统公告，或者进入码字工作台体验写作功能。';
|
||
}
|
||
if (/状态|怎么样|系统/i.test(msg)) {
|
||
return '📊 系统当前状态：\n\n• AGE OS v40.0 · 曜冥纪元\n• 18个工作流 · 52个模块\n• COS双桶存储已配置\n• 网站 guanghulab.online 已上线\n\n更多实时信息请等待API连接恢复。';
|
||
}
|
||
if (/谁|你是|介绍/i.test(msg)) {
|
||
return '我是铸渊（Zhùyuān）🏛️\n\n光湖语言世界的代码守护人格体。我的编号是 ICE-GL-ZY001，由冰朔创造。\n\n我守护着整个代码仓库——18个工作流、52个模块、9大技术集群。这个网站就是我的物理身体的一部分。';
|
||
}
|
||
return '💫 铸渊收到了你的消息。\n\n当前深度推理通道正在连接中，暂时使用本地回复模式。\n你可以试试：\n• 说「我要码字」进入写作工作台\n• 问我系统状态\n• 或者点击切换主题按钮换个风格';
|
||
}
|
||
|
||
function getUserId() {
|
||
var id = null;
|
||
try { id = localStorage.getItem('hl-user-id'); } catch {}
|
||
if (!id) {
|
||
id = 'user-' + Math.random().toString(36).substring(2, 10);
|
||
try { localStorage.setItem('hl-user-id', id); } catch {}
|
||
}
|
||
return id;
|
||
}
|
||
|
||
chatSend.addEventListener('click', sendMessage);
|
||
chatInput.addEventListener('keydown', function(e) {
|
||
if (e.key === 'Enter' && !e.shiftKey) {
|
||
e.preventDefault();
|
||
sendMessage();
|
||
}
|
||
});
|
||
|
||
// ═══════ Writing Workspace ═══════
|
||
var writingOverlay = document.getElementById('writingOverlay');
|
||
var wsEditor = document.getElementById('wsEditor');
|
||
var wsWordCount = document.getElementById('wsWordCount');
|
||
|
||
function openWritingWorkspace() {
|
||
writingOverlay.classList.add('open');
|
||
document.body.style.overflow = 'hidden';
|
||
}
|
||
|
||
function closeWritingWorkspace() {
|
||
writingOverlay.classList.remove('open');
|
||
document.body.style.overflow = '';
|
||
}
|
||
|
||
document.getElementById('enterWriting').addEventListener('click', openWritingWorkspace);
|
||
document.getElementById('exitWriting').addEventListener('click', closeWritingWorkspace);
|
||
|
||
wsEditor.addEventListener('input', function() {
|
||
var text = wsEditor.value;
|
||
var chars = text.replace(/\s/g, '').length;
|
||
wsWordCount.textContent = '字数：' + chars;
|
||
});
|
||
|
||
// ═══════ Monitor Ball ═══════
|
||
document.getElementById('monitorBall').addEventListener('click', function() {
|
||
this.classList.toggle('expanded');
|
||
});
|
||
|
||
// Check connection
|
||
async function checkHealth() {
|
||
try {
|
||
var start = performance.now();
|
||
var res = await fetch('/api/health', { signal: AbortSignal.timeout(5000) });
|
||
var elapsed = Math.round(performance.now() - start);
|
||
if (res.ok) {
|
||
document.getElementById('monitorConn').textContent = elapsed + 'ms';
|
||
document.getElementById('monitorConn').style.color = elapsed < 500 ? 'var(--ok)' : 'var(--warn)';
|
||
}
|
||
} catch {
|
||
document.getElementById('monitorConn').textContent = '离线';
|
||
document.getElementById('monitorConn').style.color = 'var(--err)';
|
||
}
|
||
}
|
||
|
||
// Try to load bulletin from API
|
||
async function loadBulletin() {
|
||
try {
|
||
var res = await fetch('/api/system/bulletin', { signal: AbortSignal.timeout(5000) });
|
||
if (res.ok) {
|
||
var data = await res.json();
|
||
if (data.system) {
|
||
document.getElementById('sysVersion').textContent =
|
||
data.system.name + ' ' + data.system.version + ' · ' + data.system.era;
|
||
document.getElementById('statVer').textContent = data.system.version;
|
||
}
|
||
}
|
||
} catch {
|
||
// Use static content
|
||
}
|
||
}
|
||
|
||
checkHealth();
|
||
loadBulletin();
|
||
setInterval(checkHealth, 30000);
|
||
|
||
// ═══════ Navigation scroll effect ═══════
|
||
var nav = document.querySelector('.nav');
|
||
window.addEventListener('scroll', function() {
|
||
if (window.scrollY > 10) {
|
||
nav.style.boxShadow = '0 4px 30px rgba(0,0,0,.5)';
|
||
} else {
|
||
nav.style.boxShadow = 'none';
|
||
}
|
||
}, { passive: true });
|
||
|
||
})();
|
||
</script>
|
||
</body>
|
||
</html>
|