124 lines
5.6 KiB
HTML
124 lines
5.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<base href="https://yt.pengyuthon.cn/">
|
|
<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:800px; 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:48px; }
|
|
|
|
.platform-layer {
|
|
background:rgba(10,20,40,0.5); border:1px solid rgba(100,200,255,0.12);
|
|
border-radius:14px; padding:36px 32px; margin-bottom:16px;
|
|
position:relative; overflow:hidden; transition:border-color 0.3s;
|
|
}
|
|
.platform-layer:hover { border-color:rgba(100,200,255,0.3); }
|
|
.platform-layer::before {
|
|
content:''; position:absolute; top:0; left:0; right:0; height:3px;
|
|
}
|
|
.platform-layer:nth-child(1)::before { background:linear-gradient(90deg,#4af,#a8e6cf); }
|
|
.platform-layer:nth-child(2)::before { background:linear-gradient(90deg,#a8e6cf,#ffd700); }
|
|
.platform-layer:nth-child(3)::before { background:linear-gradient(90deg,#ffd700,#ff6b6b); }
|
|
|
|
.layer-num { font-size:12px; color:#8af; letter-spacing:2px; margin-bottom:8px; }
|
|
.platform-layer h3 { font-size:20px; color:#e8e8e8; margin-bottom:10px; }
|
|
.platform-layer p { font-size:14.5px; color:#99aabb; line-height:1.8; }
|
|
|
|
.arrow-down { text-align:center; padding:6px 0; color:#4af; font-size:18px; opacity:0.5; }
|
|
|
|
.summary-box {
|
|
background:rgba(10,25,50,0.5); border:1px solid rgba(100,200,255,0.12);
|
|
border-radius:12px; padding:28px; margin-top:40px;
|
|
}
|
|
.summary-box h2 { font-size:18px; color:#e0e0e0; margin-bottom:12px; }
|
|
.summary-box p { font-size:14px; color:#8899aa; margin:0; line-height:1.8; }
|
|
|
|
@media (max-width:768px) {
|
|
h1 { font-size:24px; } nav .links { display:none; } .page { padding:80px 20px 40px; }
|
|
}
|
|
</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" class="active">平台架构</a></li>
|
|
<li><a href="world.html">世界结构</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 class="platform-layer">
|
|
<div class="layer-num">第 一 层 — 入口</div>
|
|
<h3>🎮 游戏世界区</h3>
|
|
<p>玩家被兴趣驱动进来，经营属于自己的文明。上帝视角文明建设 + 随机事件演化 + 多人异步互动。这是整个平台的流量入口——先用好玩的东西把人留住。</p>
|
|
</div>
|
|
|
|
<div class="arrow-down">↓</div>
|
|
|
|
<div class="platform-layer">
|
|
<div class="layer-num">第 二 层 — 嵌入</div>
|
|
<h3>📚 教育区</h3>
|
|
<p>知识藏在游戏挑战和任务里，通过「学院」建筑衔接。玩家在解决问题的过程中培育综合能力——批判思维、系统分析、资源整合、方案设计。省内大部分高校可衔接，学分/实践/就业推荐。</p>
|
|
</div>
|
|
|
|
<div class="arrow-down">↓</div>
|
|
|
|
<div class="platform-layer">
|
|
<div class="layer-num">第 三 层 — 出口</div>
|
|
<h3>🏢 企业区</h3>
|
|
<p>文明发展到一定阶段解锁。游戏中获得的能力和资源可兑换成实际价值。玩有所学，学有所用，用有所得。</p>
|
|
</div>
|
|
|
|
<div class="summary-box">
|
|
<h2>💡 设计逻辑</h2>
|
|
<p>
|
|
大多数教育产品的问题在于：用户没有动力主动来学。宇森的解法是<strong style="color:#4af;">反过来</strong>——用户先因为游戏好玩进来，在游戏过程中不知不觉习得能力，能力积累到一定程度后自然产生价值出口。
|
|
游戏是诱饵，不是目的。
|
|
</p>
|
|
</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>
|