434 lines
15 KiB
HTML
434 lines
15 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||
<title>光湖实验室 · GuanghuLab — 语言驱动的智能创作平台</title>
|
||
<meta name="description" content="光湖实验室（GuanghuLab）— 语言驱动的智能创作平台，用语言，建世界。ICP备案号：陕ICP备2025071211号">
|
||
<meta name="keywords" content="光湖实验室,GuanghuLab,语言驱动,智能创作,AI创作平台">
|
||
<meta name="author" content="光湖实验室">
|
||
<meta name="robots" content="index, follow">
|
||
<link rel="canonical" href="https://guanghulab.com/">
|
||
<!-- Open Graph -->
|
||
<meta property="og:title" content="光湖实验室 · GuanghuLab">
|
||
<meta property="og:description" content="语言驱动的智能创作平台，用语言，建世界">
|
||
<meta property="og:type" content="website">
|
||
<meta property="og:url" content="https://guanghulab.com/">
|
||
<meta property="og:locale" content="zh_CN">
|
||
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0%25' stop-color='%2322d3ee'/><stop offset='100%25' stop-color='%23a78bfa'/></linearGradient></defs><text y='.88em' font-size='80' font-weight='bold' fill='url(%23g)' font-family='sans-serif'>光</text></svg>">
|
||
<style>
|
||
*{margin:0;padding:0;box-sizing:border-box}
|
||
:root{
|
||
--bg-deep:#070b1a;
|
||
--glow-cyan:#22d3ee;
|
||
--glow-purple:#a78bfa;
|
||
--glow-blue:#3b82f6;
|
||
--glow-amber:#fbbf24;
|
||
--text-primary:#e8edf5;
|
||
--text-secondary:#8b95a8;
|
||
--text-dim:#4a5568;
|
||
--glass:rgba(12,20,40,0.55);
|
||
--glass-border:rgba(120,140,180,0.12);
|
||
--font-body:'Segoe UI','PingFang SC','Microsoft YaHei','Helvetica Neue',sans-serif;
|
||
--font-mono:'JetBrains Mono','Fira Code',monospace;
|
||
}
|
||
html{font-size:16px}
|
||
body{
|
||
font-family:var(--font-body);background:var(--bg-deep);color:var(--text-primary);
|
||
min-height:100vh;overflow-x:hidden;display:flex;flex-direction:column;
|
||
align-items:center;justify-content:center;position:relative;
|
||
}
|
||
|
||
/* ═══ 星空画布 ═══ */
|
||
#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(100px);pointer-events:none;z-index:0;animation:nebulaDrift 20s ease-in-out infinite alternate}
|
||
.neb-1{width:600px;height:600px;background:radial-gradient(circle,rgba(34,211,238,0.08),transparent);top:-120px;right:-100px}
|
||
.neb-2{width:500px;height:500px;background:radial-gradient(circle,rgba(167,139,250,0.07),transparent);bottom:-80px;left:-100px}
|
||
.neb-3{width:350px;height:350px;background:radial-gradient(circle,rgba(59,130,246,0.06),transparent);top:35%;left:15%;animation-delay:-8s}
|
||
@keyframes nebulaDrift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(30px,-20px) scale(1.05)}100%{transform:translate(-20px,15px) scale(0.95)}}
|
||
|
||
/* ═══ 光晕粒子 ═══ */
|
||
.particle{position:fixed;width:3px;height:3px;border-radius:50%;pointer-events:none;z-index:0}
|
||
.particle::after{content:'';position:absolute;width:100%;height:100%;border-radius:50%;background:inherit;filter:blur(4px);opacity:.6}
|
||
|
||
/* ═══ 主容器 ═══ */
|
||
.main-wrap{
|
||
position:relative;z-index:1;text-align:center;padding:60px 32px;
|
||
max-width:860px;width:100%;
|
||
}
|
||
|
||
/* ═══ 标题 ═══ */
|
||
.title{
|
||
font-size:clamp(2.8rem,7vw,4.5rem);font-weight:800;letter-spacing:0.04em;
|
||
margin-bottom:12px;line-height:1.2;
|
||
background:linear-gradient(135deg,var(--glow-cyan) 0%,var(--glow-blue) 40%,var(--glow-purple) 100%);
|
||
-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
|
||
background-size:200% 200%;animation:gradientShift 8s ease-in-out infinite;
|
||
filter:drop-shadow(0 0 30px rgba(34,211,238,0.15));
|
||
}
|
||
@keyframes gradientShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
|
||
|
||
.title-en{
|
||
font-size:clamp(1rem,2.5vw,1.35rem);font-weight:400;
|
||
color:var(--text-secondary);letter-spacing:5px;text-transform:uppercase;
|
||
margin-bottom:48px;opacity:.7;
|
||
}
|
||
|
||
/* ═══ 分割线 ═══ */
|
||
.divider{
|
||
width:160px;height:2px;margin:0 auto 44px;border-radius:2px;
|
||
background:linear-gradient(90deg,transparent,var(--glow-cyan),var(--glow-purple),transparent);
|
||
animation:dividerPulse 4s ease-in-out infinite;
|
||
}
|
||
@keyframes dividerPulse{0%,100%{opacity:.5;width:160px}50%{opacity:1;width:240px}}
|
||
|
||
/* ═══ 简介区块 ═══ */
|
||
.tagline-block{
|
||
margin-bottom:56px;
|
||
}
|
||
.tagline-row{
|
||
margin-bottom:10px;
|
||
opacity:0;
|
||
animation:fadeUp 1s ease-out both;
|
||
}
|
||
.tagline-row:last-child{margin-bottom:0}
|
||
.tagline-zh{
|
||
font-size:clamp(1.2rem,3vw,1.6rem);color:var(--text-primary);
|
||
line-height:1.6;font-weight:400;letter-spacing:0.08em;
|
||
}
|
||
.tagline-zh em{
|
||
font-style:normal;font-weight:600;
|
||
background:linear-gradient(135deg,var(--glow-cyan),var(--glow-blue));
|
||
-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
|
||
background-size:200% 200%;animation:gradientShift 6s ease-in-out infinite;
|
||
}
|
||
.tagline-en{
|
||
font-size:clamp(0.8rem,1.8vw,1rem);color:var(--text-dim);
|
||
letter-spacing:2px;text-transform:uppercase;font-weight:300;
|
||
margin-top:4px;opacity:.65;
|
||
}
|
||
|
||
/* ═══ 文字光芒扫过效果 ═══ */
|
||
.shimmer{
|
||
position:relative;display:inline-block;
|
||
}
|
||
.shimmer::after{
|
||
content:'';position:absolute;top:0;left:-100%;
|
||
width:60%;height:100%;
|
||
background:linear-gradient(90deg,transparent,rgba(34,211,238,0.12),rgba(167,139,250,0.08),transparent);
|
||
animation:shimmerSweep 5s ease-in-out infinite;
|
||
pointer-events:none;
|
||
}
|
||
@keyframes shimmerSweep{0%,100%{left:-100%}50%{left:200%}}
|
||
|
||
/* ═══ 打字光标 ═══ */
|
||
.cursor-blink::after{
|
||
content:'▎';display:inline-block;
|
||
color:var(--glow-cyan);font-weight:100;
|
||
animation:cursorBlink 1s step-end infinite;
|
||
margin-left:2px;vertical-align:baseline;
|
||
}
|
||
@keyframes cursorBlink{0%,100%{opacity:1}50%{opacity:0}}
|
||
|
||
/* ═══ 浮动呼吸 ═══ */
|
||
.breathe{animation:breathe 6s ease-in-out infinite}
|
||
@keyframes breathe{0%,100%{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.02);filter:brightness(1.1)}}
|
||
|
||
/* ═══ 状态指示 ═══ */
|
||
.status-badge{
|
||
display:inline-flex;align-items:center;gap:10px;
|
||
padding:12px 28px;border-radius:40px;
|
||
background:var(--glass);border:1px solid var(--glass-border);
|
||
backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
|
||
font-size:0.9rem;color:var(--text-secondary);
|
||
margin-bottom:60px;
|
||
animation:badgeFadeIn 1.5s ease-out 0.5s both;
|
||
}
|
||
.status-dot{
|
||
width:8px;height:8px;border-radius:50%;background:#34d399;
|
||
box-shadow:0 0 8px rgba(52,211,153,0.5);
|
||
animation:dotPulse 2s ease-in-out infinite;
|
||
}
|
||
@keyframes dotPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(0.8)}}
|
||
@keyframes badgeFadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
|
||
|
||
/* ═══ 装饰环 ═══ */
|
||
.orbit-ring{
|
||
position:fixed;border-radius:50%;border:1px solid rgba(34,211,238,0.04);
|
||
pointer-events:none;z-index:0;
|
||
}
|
||
.orbit-1{width:500px;height:500px;top:50%;left:50%;transform:translate(-50%,-50%);animation:orbitSpin 60s linear infinite}
|
||
.orbit-2{width:700px;height:700px;top:50%;left:50%;transform:translate(-50%,-50%);animation:orbitSpin 90s linear infinite reverse;border-color:rgba(167,139,250,0.03)}
|
||
.orbit-3{width:900px;height:900px;top:50%;left:50%;transform:translate(-50%,-50%);animation:orbitSpin 120s linear infinite;border-color:rgba(59,130,246,0.025)}
|
||
@keyframes orbitSpin{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(360deg)}}
|
||
|
||
/* 轨道上的光点 */
|
||
.orbit-dot{
|
||
position:absolute;width:4px;height:4px;border-radius:50%;
|
||
background:var(--glow-cyan);box-shadow:0 0 10px rgba(34,211,238,0.4);
|
||
}
|
||
.orbit-1 .orbit-dot{top:0;left:50%;transform:translate(-50%,-50%)}
|
||
.orbit-2 .orbit-dot{bottom:0;right:30%;transform:translate(50%,50%)}
|
||
|
||
/* ═══ 底部备案 ═══ */
|
||
.footer{
|
||
position:fixed;bottom:0;left:0;width:100%;z-index:10;
|
||
padding:20px 20px 24px;text-align:center;
|
||
background:linear-gradient(to top,rgba(7,11,26,0.98) 60%,transparent);
|
||
}
|
||
.icp-info{
|
||
display:flex;flex-direction:column;align-items:center;gap:6px;
|
||
}
|
||
.icp-link{
|
||
color:var(--text-secondary);font-size:13px;text-decoration:none;
|
||
transition:color .3s;display:inline-flex;align-items:center;gap:6px;
|
||
opacity:.75;
|
||
}
|
||
.icp-link:hover{color:var(--glow-cyan);text-decoration:underline;opacity:1}
|
||
.icp-link .icp-icon{font-size:11px;opacity:.7}
|
||
.icp-copyright{
|
||
color:var(--text-secondary);font-size:11px;opacity:.5;
|
||
}
|
||
|
||
/* ═══ 入场动画 ═══ */
|
||
.fade-up{animation:fadeUp 1s ease-out both}
|
||
.fade-up-d1{animation-delay:0.15s}
|
||
.fade-up-d2{animation-delay:0.35s}
|
||
.fade-up-d3{animation-delay:0.55s}
|
||
.fade-up-d4{animation-delay:0.75s}
|
||
.fade-up-d5{animation-delay:0.95s}
|
||
.fade-up-d6{animation-delay:1.15s}
|
||
.fade-up-d7{animation-delay:1.35s}
|
||
@keyframes fadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
|
||
|
||
/* ═══ 响应式 ═══ */
|
||
@media(max-width:480px){
|
||
.main-wrap{padding:40px 20px}
|
||
.status-badge{padding:8px 18px;font-size:0.8rem}
|
||
.orbit-ring{display:none}
|
||
.tagline-zh{font-size:1.1rem}
|
||
.tagline-en{font-size:0.75rem}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- 星空画布 -->
|
||
<canvas id="starfield"></canvas>
|
||
|
||
<!-- 星云 -->
|
||
<div class="nebula neb-1"></div>
|
||
<div class="nebula neb-2"></div>
|
||
<div class="nebula neb-3"></div>
|
||
|
||
<!-- 装饰轨道环 -->
|
||
<div class="orbit-ring orbit-1"><div class="orbit-dot"></div></div>
|
||
<div class="orbit-ring orbit-2"><div class="orbit-dot"></div></div>
|
||
<div class="orbit-ring orbit-3"></div>
|
||
|
||
<!-- 主内容 -->
|
||
<div class="main-wrap">
|
||
<h1 class="title shimmer fade-up fade-up-d1 breathe">光湖实验室</h1>
|
||
<p class="title-en fade-up fade-up-d2">GuanghuLab</p>
|
||
<div class="divider fade-up fade-up-d3"></div>
|
||
<div class="tagline-block">
|
||
<div class="tagline-row fade-up fade-up-d4">
|
||
<p class="tagline-zh shimmer"><em>语言驱动</em>的智能创作平台</p>
|
||
<p class="tagline-en">Language-Driven Intelligent Creation Platform</p>
|
||
</div>
|
||
<div class="tagline-row fade-up fade-up-d5">
|
||
<p class="tagline-zh">用语言，建世界</p>
|
||
<p class="tagline-en">Build Worlds with Language</p>
|
||
</div>
|
||
</div>
|
||
<div class="status-badge fade-up fade-up-d6">
|
||
<span class="status-dot"></span>
|
||
<span id="status-text"></span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 底部ICP备案 -->
|
||
<footer class="footer">
|
||
<div class="icp-info">
|
||
<a class="icp-link" href="https://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer">
|
||
<span class="icp-icon">🛡️</span>
|
||
陕ICP备2025071211号
|
||
</a>
|
||
<span class="icp-copyright">© 2025 光湖实验室 GuanghuLab</span>
|
||
</div>
|
||
</footer>
|
||
|
||
<script>
|
||
// ═══ 星空粒子系统 ═══
|
||
(function(){
|
||
const canvas = document.getElementById('starfield');
|
||
const ctx = canvas.getContext('2d');
|
||
let stars = [];
|
||
let shootingStars = [];
|
||
let W, H;
|
||
|
||
function resize(){
|
||
W = canvas.width = window.innerWidth;
|
||
H = canvas.height = window.innerHeight;
|
||
}
|
||
resize();
|
||
window.addEventListener('resize', resize);
|
||
|
||
// 生成静态星星
|
||
function createStars(count){
|
||
stars = [];
|
||
for(let i = 0; i < count; i++){
|
||
stars.push({
|
||
x: Math.random() * W,
|
||
y: Math.random() * H,
|
||
r: Math.random() * 1.5 + 0.3,
|
||
alpha: Math.random() * 0.8 + 0.2,
|
||
twinkleSpeed: Math.random() * 0.02 + 0.005,
|
||
twinklePhase: Math.random() * Math.PI * 2
|
||
});
|
||
}
|
||
}
|
||
createStars(200);
|
||
|
||
// 流星
|
||
function spawnShootingStar(){
|
||
if(shootingStars.length > 2) return;
|
||
shootingStars.push({
|
||
x: Math.random() * W * 0.8,
|
||
y: Math.random() * H * 0.3,
|
||
len: Math.random() * 80 + 40,
|
||
speed: Math.random() * 4 + 3,
|
||
angle: Math.PI / 4 + (Math.random() - 0.5) * 0.3,
|
||
alpha: 1,
|
||
decay: Math.random() * 0.015 + 0.008
|
||
});
|
||
}
|
||
setInterval(spawnShootingStar, 4000);
|
||
|
||
// 浮动光粒
|
||
const floatingParticles = [];
|
||
for(let i = 0; i < 15; i++){
|
||
floatingParticles.push({
|
||
x: Math.random() * W,
|
||
y: Math.random() * H,
|
||
vx: (Math.random() - 0.5) * 0.3,
|
||
vy: (Math.random() - 0.5) * 0.3,
|
||
r: Math.random() * 2 + 1,
|
||
hue: Math.random() > 0.5 ? 187 : 260, // cyan or purple
|
||
alpha: Math.random() * 0.4 + 0.1
|
||
});
|
||
}
|
||
|
||
let time = 0;
|
||
function animate(){
|
||
ctx.clearRect(0, 0, W, H);
|
||
time += 0.016;
|
||
|
||
// 绘制星星
|
||
for(const s of stars){
|
||
const twinkle = Math.sin(time * s.twinkleSpeed * 60 + s.twinklePhase) * 0.3 + 0.7;
|
||
ctx.beginPath();
|
||
ctx.arc(s.x, s.y, s.r, 0, Math.PI * 2);
|
||
ctx.fillStyle = `rgba(220,230,255,${s.alpha * twinkle})`;
|
||
ctx.fill();
|
||
}
|
||
|
||
// 绘制流星
|
||
for(let i = shootingStars.length - 1; i >= 0; i--){
|
||
const ss = shootingStars[i];
|
||
const endX = ss.x - Math.cos(ss.angle) * ss.len;
|
||
const endY = ss.y - Math.sin(ss.angle) * ss.len;
|
||
|
||
const grad = ctx.createLinearGradient(ss.x, ss.y, endX, endY);
|
||
grad.addColorStop(0, `rgba(220,240,255,${ss.alpha})`);
|
||
grad.addColorStop(1, `rgba(220,240,255,0)`);
|
||
|
||
ctx.beginPath();
|
||
ctx.moveTo(ss.x, ss.y);
|
||
ctx.lineTo(endX, endY);
|
||
ctx.strokeStyle = grad;
|
||
ctx.lineWidth = 1.5;
|
||
ctx.stroke();
|
||
|
||
// 头部光点
|
||
ctx.beginPath();
|
||
ctx.arc(ss.x, ss.y, 2, 0, Math.PI * 2);
|
||
ctx.fillStyle = `rgba(200,230,255,${ss.alpha})`;
|
||
ctx.fill();
|
||
|
||
ss.x += Math.cos(ss.angle) * ss.speed;
|
||
ss.y += Math.sin(ss.angle) * ss.speed;
|
||
ss.alpha -= ss.decay;
|
||
|
||
if(ss.alpha <= 0 || ss.x > W || ss.y > H){
|
||
shootingStars.splice(i, 1);
|
||
}
|
||
}
|
||
|
||
// 绘制浮动光粒
|
||
for(const p of floatingParticles){
|
||
ctx.beginPath();
|
||
ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
|
||
const pulse = Math.sin(time * 2 + p.x * 0.01) * 0.2 + 0.8;
|
||
ctx.fillStyle = `hsla(${p.hue},70%,65%,${p.alpha * pulse})`;
|
||
ctx.fill();
|
||
|
||
// 光晕
|
||
ctx.beginPath();
|
||
ctx.arc(p.x, p.y, p.r * 3, 0, Math.PI * 2);
|
||
ctx.fillStyle = `hsla(${p.hue},70%,65%,${p.alpha * pulse * 0.15})`;
|
||
ctx.fill();
|
||
|
||
p.x += p.vx;
|
||
p.y += p.vy;
|
||
if(p.x < 0 || p.x > W) p.vx *= -1;
|
||
if(p.y < 0 || p.y > H) p.vy *= -1;
|
||
}
|
||
|
||
requestAnimationFrame(animate);
|
||
}
|
||
animate();
|
||
|
||
// 窗口大小变化时重新生成星星
|
||
window.addEventListener('resize', () => createStars(200));
|
||
})();
|
||
|
||
// ═══ 鼠标跟随光晕 ═══
|
||
(function(){
|
||
const glow = document.createElement('div');
|
||
glow.style.cssText = 'position:fixed;width:300px;height:300px;border-radius:50%;pointer-events:none;z-index:0;background:radial-gradient(circle,rgba(34,211,238,0.06),transparent 70%);transition:transform .15s ease-out;will-change:transform;';
|
||
document.body.appendChild(glow);
|
||
|
||
let mx = 0, my = 0;
|
||
document.addEventListener('mousemove', e => {
|
||
mx = e.clientX; my = e.clientY;
|
||
glow.style.transform = `translate(${mx - 150}px, ${my - 150}px)`;
|
||
});
|
||
})();
|
||
|
||
// ═══ 状态栏打字机效果 ═══
|
||
(function(){
|
||
const el = document.getElementById('status-text');
|
||
if(!el) return;
|
||
const fullText = '系统运行中 · Language-Driven OS';
|
||
let i = 0;
|
||
function type(){
|
||
if(i <= fullText.length){
|
||
el.textContent = fullText.slice(0, i);
|
||
i++;
|
||
setTimeout(type, 60 + Math.random() * 40);
|
||
} else {
|
||
el.classList.add('cursor-blink');
|
||
// 停顿后移除光标
|
||
setTimeout(() => el.classList.remove('cursor-blink'), 3000);
|
||
}
|
||
}
|
||
// 等入场动画完成后开始打字
|
||
setTimeout(type, 1600);
|
||
})();
|
||
</script>
|
||
</body>
|
||
</html>
|