143 lines
6.2 KiB
HTML
143 lines
6.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>世界结构 — 宇森</title>
|
|
<style>
|
|
* { margin:0; padding:0; box-sizing:border-box; }
|
|
body {
|
|
font-family:'Microsoft YaHei', 'PingFang SC', sans-serif;
|
|
background:#06090f; color:#c8d6e5; line-height:1.7;
|
|
}
|
|
#particles { position:fixed; top:0; left:0; width:100%; height:100%; z-index:0; pointer-events:none; }
|
|
nav {
|
|
position:fixed; top:0; left:0; right:0; z-index:1000;
|
|
background:rgba(6,9,15,0.85); backdrop-filter:blur(12px);
|
|
border-bottom:1px solid rgba(100,200,255,0.1);
|
|
padding:0 40px; height:56px; display:flex; align-items:center; justify-content:space-between;
|
|
}
|
|
nav .logo { font-size:18px; font-weight:bold; text-decoration:none; letter-spacing:2px; background:linear-gradient(135deg,#4af,#a8e6cf); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
|
|
nav .links { display:flex; gap:28px; list-style:none; }
|
|
nav .links a { color:#667788; text-decoration:none; font-size:14px; transition:color 0.3s; }
|
|
nav .links a:hover, nav .links a.active { color:#4af; }
|
|
|
|
.page { position:relative; z-index:1; padding:90px 32px 60px; max-width:780px; margin:0 auto; }
|
|
h1 { font-size:32px; font-weight:bold; margin-bottom:8px; background:linear-gradient(135deg,#4af,#a8e6cf); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
|
|
.page-sub { color:#556677; font-size:15px; margin-bottom:40px; }
|
|
|
|
.layer-card {
|
|
background:rgba(10,20,40,0.5); border:1px solid rgba(100,200,255,0.12);
|
|
border-radius:14px; padding:24px 28px; margin-bottom:14px;
|
|
display:flex; gap:20px; align-items:flex-start;
|
|
transition:transform 0.3s, border-color 0.3s;
|
|
}
|
|
.layer-card:hover { transform:translateX(6px); border-color:rgba(100,200,255,0.3); }
|
|
.layer-card.primary { border-color:rgba(100,200,255,0.28); background:rgba(10,30,60,0.55); }
|
|
|
|
.layer-icon { font-size:36px; min-width:52px; text-align:center; padding-top:2px; }
|
|
.layer-info h3 { font-size:17px; color:#e8e8e8; margin-bottom:3px; }
|
|
.layer-en { font-size:11px; color:#556; margin-bottom:8px; }
|
|
.layer-info p { font-size:13.5px; color:#99aabb; line-height:1.7; margin:0; }
|
|
|
|
.interface-tag {
|
|
text-align:center; padding:6px 0; color:#5af; font-size:13px;
|
|
opacity:0.6; letter-spacing:1px;
|
|
}
|
|
|
|
@media (max-width:768px) {
|
|
h1 { font-size:24px; } nav .links { display:none; } .page { padding:80px 20px 40px; }
|
|
.layer-card { flex-direction:column; text-align:center; }
|
|
.layer-icon { padding-top:0; }
|
|
}
|
|
</style>
|
|
<link rel="stylesheet" href="auth.css">
|
|
</head>
|
|
<body>
|
|
|
|
<canvas id="particles"></canvas>
|
|
|
|
<nav>
|
|
<a href="index.html" class="logo">宇森</a>
|
|
<div id="auth-area"></div>
|
|
<ul class="links">
|
|
<li><a href="intro.html">游戏介绍</a></li>
|
|
<li><a href="platform.html">平台架构</a></li>
|
|
<li><a href="world.html" class="active">世界结构</a></li>
|
|
<li><a href="races.html">种族</a></li>
|
|
<li><a href="demo.html">演示</a></li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<div class="page">
|
|
<h1>五层世界</h1>
|
|
<p class="page-sub">垂直切面，层间互通 — 本地层是主舞台</p>
|
|
|
|
<!-- 星空 -->
|
|
<div style="text-align:center;font-size:22px;margin-bottom:8px;">🌌</div>
|
|
<div class="layer-card">
|
|
<div class="layer-icon">🛰️</div>
|
|
<div class="layer-info">
|
|
<h3>第五层 · 星空层</h3>
|
|
<div class="layer-en">Stellar Layer</div>
|
|
<p>卫星、轨道设施、星际信号。文明的最终出口。陨石事件、黑洞信号、星际接触。轨道设施可对本地层施加全球影响。</p>
|
|
</div>
|
|
</div>
|
|
<div class="interface-tag">↕ 接口：陨石 / 信号 / 星际事件</div>
|
|
|
|
<!-- 天空 -->
|
|
<div class="layer-card">
|
|
<div class="layer-icon">☁️</div>
|
|
<div class="layer-info">
|
|
<h3>第四层 · 天空层</h3>
|
|
<div class="layer-en">Sky Layer</div>
|
|
<p>云层流动、飞行单位、天气系统。气候决定农业产出，飞艇可跨越地块移动。流星、风暴、迁徙鸟群事件。</p>
|
|
</div>
|
|
</div>
|
|
<div class="interface-tag">↕ 接口：气候 / 飞艇 / 飞行单位</div>
|
|
|
|
<!-- 本地（主世界） -->
|
|
<div class="layer-card primary">
|
|
<div class="layer-icon">🌍</div>
|
|
<div class="layer-info">
|
|
<h3>第三层 · 本地层 ★ 主世界</h3>
|
|
<div class="layer-en">Surface Layer — Primary</div>
|
|
<p>玩家 90% 的操作在这里。正六边形密铺，七种地形，三重视角缩放，支持从宏观地图飞入微观场景。建筑 / 人口 / 战争 / 贸易的核心舞台。</p>
|
|
</div>
|
|
</div>
|
|
<div class="interface-tag">↕ 接口：矿脉透视 / 地下入侵</div>
|
|
|
|
<!-- 地下 -->
|
|
<div class="layer-card">
|
|
<div class="layer-icon">⛏️</div>
|
|
<div class="layer-info">
|
|
<h3>第二层 · 地下层</h3>
|
|
<div class="layer-en">Underground Layer</div>
|
|
<p>矿脉网络、地下河、洞穴生态系统。资源供给层——金属/宝石/稀有矿藏。洞穴蜘蛛、暗影文明威胁。</p>
|
|
</div>
|
|
</div>
|
|
<div class="interface-tag">↕ 接口：地热 / 岩浆事件 / 核心共振</div>
|
|
|
|
<!-- 地心 -->
|
|
<div class="layer-card">
|
|
<div class="layer-icon">🔥</div>
|
|
<div class="layer-info">
|
|
<h3>第一层 · 地心层</h3>
|
|
<div class="layer-en">Core Layer</div>
|
|
<p>世界的能量源头。岩浆脉动、远古遗迹、终极挑战。后期解锁——藏有最早的文明遗迹叙事碎片，神器碎片合成之地。</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const c=document.getElementById('particles'),x=c.getContext('2d');let P=[];
|
|
function R(){c.width=innerWidth;c.height=innerHeight}R();addEventListener('resize',R);
|
|
class Particle{constructor(){this.r();this.y=Math.random()*c.height}r(){this.x=Math.random()*c.width;this.y=-10;this.s=Math.random()*1.5+0.5;this.v=Math.random()*0.3+0.1;this.o=Math.random()*0.5+0.1}u(){this.y+=this.v;if(this.y>c.height+10)this.r()}d(){x.fillStyle=`rgba(100,200,255,${this.o})`;x.beginPath();x.arc(this.x,this.y,this.s,0,Math.PI*2);x.fill()}}
|
|
for(let i=0;i<80;i++)P.push(new Particle());
|
|
(function A(){x.clearRect(0,0,c.width,c.height);P.forEach(p=>{p.u();p.d()});requestAnimationFrame(A)})();
|
|
</script>
|
|
<script src="auth.js"></script>
|
|
<script>YuSenAuth.init();</script>
|
|
</body>
|
|
</html>
|