187 lines
5.2 KiB
HTML
187 lines
5.2 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; overflow:hidden;
|
|
height:100vh; display:flex; flex-direction:column;
|
|
}
|
|
|
|
/* 粒子背景 */
|
|
#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.8); backdrop-filter:blur(16px);
|
|
border-bottom:1px solid rgba(100,200,255,0.08);
|
|
padding:0 40px; height:60px;
|
|
display:flex; align-items:center; justify-content:space-between;
|
|
}
|
|
nav .logo {
|
|
font-size:18px; font-weight:bold; letter-spacing:2px;
|
|
background:linear-gradient(135deg, #4af, #a8e6cf);
|
|
-webkit-background-clip:text; -webkit-text-fill-color:transparent;
|
|
}
|
|
nav .links { display:flex; gap:32px; list-style:none; }
|
|
nav .links a {
|
|
color:#667788; text-decoration:none; font-size:14px;
|
|
transition:color 0.3s; letter-spacing:1px;
|
|
}
|
|
nav .links a:hover { color:#4af; }
|
|
|
|
/* 主区域 - 居中 */
|
|
.main {
|
|
flex:1; display:flex; flex-direction:column;
|
|
align-items:center; justify-content:center;
|
|
position:relative; z-index:1; text-align:center;
|
|
padding:0 32px;
|
|
}
|
|
.main h1 {
|
|
font-size:80px; font-weight:bold; letter-spacing:20px;
|
|
background:linear-gradient(135deg, #4af 0%, #a8e6cf 50%, #ffd700 100%);
|
|
-webkit-background-clip:text; -webkit-text-fill-color:transparent;
|
|
margin-bottom:12px;
|
|
}
|
|
.main .sub {
|
|
font-size:16px; color:#445566; letter-spacing:6px;
|
|
margin-bottom:48px;
|
|
}
|
|
|
|
/* 快捷卡片 */
|
|
.quick-cards {
|
|
display:flex; gap:16px; flex-wrap:wrap;
|
|
justify-content:center; max-width:700px;
|
|
}
|
|
.quick-card {
|
|
background:rgba(10,20,40,0.5); border:1px solid rgba(100,200,255,0.1);
|
|
border-radius:10px; padding:20px 28px; text-decoration:none;
|
|
color:#c8d6e5; transition:all 0.3s;
|
|
min-width:140px; text-align:center;
|
|
}
|
|
.quick-card:hover {
|
|
border-color:rgba(100,200,255,0.35);
|
|
transform:translateY(-3px);
|
|
background:rgba(10,25,50,0.7);
|
|
}
|
|
.quick-card .qc-icon { font-size:28px; margin-bottom:8px; }
|
|
.quick-card .qc-label { font-size:13px; color:#99aabb; }
|
|
.quick-card .qc-name { font-size:15px; color:#e0e0e0; margin-top:2px; }
|
|
|
|
@media (max-width:768px) {
|
|
.main h1 { font-size:44px; letter-spacing:10px; }
|
|
nav .links { display:none; }
|
|
.quick-cards { gap:10px; }
|
|
.quick-card { padding:14px 18px; min-width:110px; }
|
|
}
|
|
</style>
|
|
<link rel="stylesheet" href="auth.css">
|
|
</head>
|
|
<body>
|
|
|
|
<canvas id="particles"></canvas>
|
|
|
|
<nav>
|
|
<span class="logo">宇森</span>
|
|
<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">世界结构</a></li>
|
|
<li><a href="races.html">种族</a></li>
|
|
<li><a href="demo.html">演示</a></li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<div class="main">
|
|
<h1>宇 森</h1>
|
|
<p class="sub">寰 宇 · 森 罗</p>
|
|
<div class="quick-cards">
|
|
<a href="intro.html" class="quick-card">
|
|
<div class="qc-icon">🎮</div>
|
|
<div class="qc-name">游戏介绍</div>
|
|
<div class="qc-label">背景与特色</div>
|
|
</a>
|
|
<a href="platform.html" class="quick-card">
|
|
<div class="qc-icon">🏗️</div>
|
|
<div class="qc-name">三层架构</div>
|
|
<div class="qc-label">游戏·教育·企业</div>
|
|
</a>
|
|
<a href="world.html" class="quick-card">
|
|
<div class="qc-icon">🌍</div>
|
|
<div class="qc-name">五层世界</div>
|
|
<div class="qc-label">垂直切面互通</div>
|
|
</a>
|
|
<a href="races.html" class="quick-card">
|
|
<div class="qc-icon">🧬</div>
|
|
<div class="qc-name">七大种族</div>
|
|
<div class="qc-label">选择你的文明</div>
|
|
</a>
|
|
<a href="demo.html" class="quick-card">
|
|
<div class="qc-icon">🖱️</div>
|
|
<div class="qc-name">交互演示</div>
|
|
<div class="qc-label">点击体验</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
/* 粒子背景 */
|
|
const canvas = document.getElementById('particles');
|
|
const ctx = canvas.getContext('2d');
|
|
let particles = [];
|
|
|
|
function resize() {
|
|
canvas.width = window.innerWidth;
|
|
canvas.height = window.innerHeight;
|
|
}
|
|
resize();
|
|
window.addEventListener('resize', resize);
|
|
|
|
class Particle {
|
|
constructor() {
|
|
this.reset();
|
|
this.y = Math.random() * canvas.height;
|
|
}
|
|
reset() {
|
|
this.x = Math.random() * canvas.width;
|
|
this.y = -10;
|
|
this.size = Math.random() * 1.5 + 0.5;
|
|
this.speed = Math.random() * 0.3 + 0.1;
|
|
this.opacity = Math.random() * 0.5 + 0.1;
|
|
}
|
|
update() {
|
|
this.y += this.speed;
|
|
if (this.y > canvas.height + 10) this.reset();
|
|
}
|
|
draw() {
|
|
ctx.fillStyle = `rgba(100,200,255,${this.opacity})`;
|
|
ctx.beginPath();
|
|
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
|
|
ctx.fill();
|
|
}
|
|
}
|
|
|
|
for (let i = 0; i < 80; i++) particles.push(new Particle());
|
|
|
|
function animate() {
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
particles.forEach(p => { p.update(); p.draw(); });
|
|
requestAnimationFrame(animate);
|
|
}
|
|
animate();
|
|
</script>
|
|
<script src="auth.js"></script>
|
|
<script>YuSenAuth.init();</script>
|
|
</body>
|
|
</html>
|