Spaces:
Running
Running
File size: 33,883 Bytes
e4744f9 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 |
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>永恒王国 - 开放世界沙盒游戏</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700&display=swap');
body {
font-family: 'Noto Serif SC', serif;
background-color: #0f172a;
color: #e2e8f0;
}
.hero-gradient {
background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
}
.feature-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(99, 102, 241, 0.3);
}
.gameplay-tab.active {
border-bottom: 3px solid #6366f1;
color: #6366f1;
}
.character-card {
perspective: 1000px;
}
.character-inner {
transition: transform 0.6s;
transform-style: preserve-3d;
}
.character-card:hover .character-inner {
transform: rotateY(180deg);
}
.character-front, .character-back {
backface-visibility: hidden;
}
.character-back {
transform: rotateY(180deg);
}
.world-map {
background-image: url('https://images.unsplash.com/photo-1605559424843-9e4c228bf1c2?ixlib=rb-4.0.3');
background-size: cover;
background-position: center;
filter: sepia(50%) hue-rotate(180deg) brightness(0.7);
}
</style>
</head>
<body>
<!-- 导航栏 -->
<nav class="bg-gray-900 bg-opacity-90 fixed w-full z-10">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<div class="flex items-center">
<div class="flex-shrink-0">
<span class="text-indigo-500 text-2xl font-bold"><i class="fas fa-crown mr-2"></i>永恒王国</span>
</div>
<div class="hidden md:block">
<div class="ml-10 flex items-baseline space-x-4">
<a href="#features" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">特色</a>
<a href="#gameplay" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">玩法</a>
<a href="#world" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">世界</a>
<a href="#characters" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">角色</a>
</div>
</div>
</div>
<div>
<button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-medium">
<i class="fas fa-download mr-2"></i>预购游戏
</button>
</div>
</div>
</div>
</nav>
<!-- 英雄区域 -->
<header class="hero-gradient pt-24 pb-20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="md:flex items-center justify-between">
<div class="md:w-1/2 mb-10 md:mb-0">
<h1 class="text-4xl md:text-6xl font-bold mb-6 leading-tight">永恒王国</h1>
<p class="text-xl text-gray-300 mb-8">一个融合战斗、策略与自由的史诗级开放世界沙盒游戏。在历史与虚构交织的大陆上，书写属于你的传奇。</p>
<div class="flex space-x-4">
<button class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-md text-lg font-medium">
<i class="fas fa-play mr-2"></i>观看预告片
</button>
<button class="bg-gray-700 hover:bg-gray-600 text-white px-6 py-3 rounded-md text-lg font-medium">
<i class="fas fa-info-circle mr-2"></i>了解更多
</button>
</div>
</div>
<div class="md:w-1/2 relative">
<img src="https://images.unsplash.com/photo-1542751375-ad40-5336d8ebf59?ixlib=rb-4.0.3" alt="游戏场景" class="rounded-lg shadow-2xl transform rotate-1 hover:rotate-0 transition duration-300">
<div class="absolute -bottom-5 -left-5 bg-indigo-800 rounded-lg p-4 shadow-lg w-32">
<p class="text-sm text-indigo-200">IGN 9.5/10</p>
<p class="text-white font-bold">"重新定义沙盒游戏"</p>
</div>
</div>
</div>
</div>
</header>
<!-- 游戏特色 -->
<section id="features" class="py-20 bg-gray-800">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4">游戏核心特色</h2>
<p class="text-xl text-gray-300 max-w-3xl mx-auto">融合多种游戏类型的独特体验，打造前所未有的开放世界冒险</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- 特色卡片1 -->
<div class="feature-card bg-gray-700 rounded-lg p-6 transition duration-300 hover:shadow-lg">
<div class="text-indigo-400 text-4xl mb-4">
<i class="fas fa-globe-americas"></i>
</div>
<h3 class="text-xl font-bold mb-3">无限自由的沙盒世界</h3>
<p class="text-gray-300">从雪山到沙漠，从繁华都市到隐秘地下城，完全无缝的开放世界。你可以成为商人、冒险家、领主或盗贼，世界对你的选择做出动态反应。</p>
</div>
<!-- 特色卡片2 -->
<div class="feature-card bg-gray-700 rounded-lg p-6 transition duration-300 hover:shadow-lg">
<div class="text-indigo-400 text-4xl mb-4">
<i class="fas fa-swords"></i>
</div>
<h3 class="text-xl font-bold mb-3">深度战斗系统</h3>
<p class="text-gray-300">融合动作与策略的战斗体验。超过200种武器和技能组合，实时物理碰撞和部位伤害系统。指挥军队或亲自上阵，每场战斗都独一无二。</p>
</div>
<!-- 特色卡片3 -->
<div class="feature-card bg-gray-700 rounded-lg p-6 transition duration-300 hover:shadow-lg">
<div class="text-indigo-400 text-4xl mb-4">
<i class="fas fa-chess-king"></i>
</div>
<h3 class="text-xl font-bold mb-3">王国管理与策略</h3>
<p class="text-gray-300">建立并管理你的王国，处理外交、内政和军事事务。每个决策都会影响世界格局，NPC会记住你的行为并做出相应反应。</p>
</div>
<!-- 特色卡片4 -->
<div class="feature-card bg-gray-700 rounded-lg p-6 transition duration-300 hover:shadow-lg">
<div class="text-indigo-400 text-4xl mb-4">
<i class="fas fa-coins"></i>
</div>
<h3 class="text-xl font-bold mb-3">动态经济系统</h3>
<p class="text-gray-300">完全模拟的经济系统，价格随供需变化。你可以垄断资源、操纵市场，或建立贸易帝国。每个城镇都有独特的经济特性和需求。</p>
</div>
<!-- 特色卡片5 -->
<div class="feature-card bg-gray-700 rounded-lg p-6 transition duration-300 hover:shadow-lg">
<div class="text-indigo-400 text-4xl mb-4">
<i class="fas fa-user-shield"></i>
</div>
<h3 class="text-xl font-bold mb-3">角色成长与装备</h3>
<p class="text-gray-300">非等级制的技能系统，通过实践提升能力。数千种可定制装备，每件都有独特属性和外观。装备会随使用磨损并留下战斗痕迹。</p>
</div>
<!-- 特色卡片6 -->
<div class="feature-card bg-gray-700 rounded-lg p-6 transition duration-300 hover:shadow-lg">
<div class="text-indigo-400 text-4xl mb-4">
<i class="fas fa-landmark"></i>
</div>
<h3 class="text-xl font-bold mb-3">历史与虚构交织</h3>
<p class="text-gray-300">基于真实历史时期构建的架空世界，融合了中世纪欧洲、古代东方和奇幻元素。每个文化都有独特的历史背景和传说。</p>
</div>
</div>
</div>
</section>
<!-- 游戏玩法展示 -->
<section id="gameplay" class="py-20 bg-gray-900">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4">多样化游戏玩法</h2>
<p class="text-xl text-gray-300 max-w-3xl mx-auto">选择你的道路，创造独特体验</p>
</div>
<!-- 玩法标签 -->
<div class="flex justify-center mb-12 border-b border-gray-700">
<button class="gameplay-tab active px-6 py-3 text-lg font-medium">沙盒探索</button>
<button class="gameplay-tab px-6 py-3 text-lg font-medium text-gray-400 hover:text-white">战斗系统</button>
<button class="gameplay-tab px-6 py-3 text-lg font-medium text-gray-400 hover:text-white">王国管理</button>
<button class="gameplay-tab px-6 py-3 text-lg font-medium text-gray-400 hover:text-white">经济贸易</button>
</div>
<!-- 玩法内容 -->
<div class="grid md:grid-cols-2 gap-12 items-center">
<div>
<h3 class="text-2xl font-bold mb-4">无拘无束的沙盒体验</h3>
<p class="text-gray-300 mb-6">永恒王国提供了前所未有的自由度。你可以:</p>
<ul class="space-y-3">
<li class="flex items-start">
<i class="fas fa-check text-indigo-400 mt-1 mr-3"></i>
<span>攀爬任何可见的表面，使用物理系统创造独特路径</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-indigo-400 mt-1 mr-3"></i>
<span>与每个NPC进行深度互动，他们有自己的日程、记忆和人际关系</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-indigo-400 mt-1 mr-3"></i>
<span>改变环境 - 砍伐森林建造城市，或挖掘隧道创造捷径</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-indigo-400 mt-1 mr-3"></i>
<span>发现隐藏的古代文明遗迹和解谜挑战</span>
</li>
</ul>
</div>
<div class="relative">
<img src="https://images.unsplash.com/photo-1589254065874-42b0a7a5729e?ixlib=rb-4.0.3" alt="沙盒探索" class="rounded-lg shadow-xl">
<div class="absolute -bottom-5 -right-5 bg-indigo-900 text-white p-3 rounded-lg shadow-lg">
<p class="text-sm">"最接近真实的第二人生"</p>
<p class="font-bold">- GameSpot</p>
</div>
</div>
</div>
</div>
</section>
<!-- 游戏世界展示 -->
<section id="world" class="py-20 world-map relative">
<div class="absolute inset-0 bg-black bg-opacity-70"></div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4 text-white">广阔的游戏世界</h2>
<p class="text-xl text-gray-300 max-w-3xl mx-auto">探索超过1000平方公里的无缝开放世界</p>
</div>
<div class="grid md:grid-cols-3 gap-8">
<!-- 区域1 -->
<div class="bg-gray-900 bg-opacity-80 rounded-lg p-6 border border-gray-700">
<h3 class="text-xl font-bold mb-3 text-indigo-400">西部王国</h3>
<p class="text-gray-300 mb-4">封建制度下的骑士文化与宏伟城堡，灵感来自中世纪欧洲。</p>
<div class="flex justify-between text-sm text-gray-400">
<span><i class="fas fa-city mr-1"></i> 12座主要城市</span>
<span><i class="fas fa-users mr-1"></i> 独特文化</span>
<span><i class="fas fa-dungeon mr-1"></i> 30+地牢</span>
</div>
</div>
<!-- 区域2 -->
<div class="bg-gray-900 bg-opacity-80 rounded-lg p-6 border border-gray-700">
<h3 class="text-xl font-bold mb-3 text-indigo-400">东方帝国</h3>
<p class="text-gray-300 mb-4">官僚制度下的中央集权帝国，融合了唐宋时期的东方美学。</p>
<div class="flex justify-between text-sm text-gray-400">
<span><i class="fas fa-city mr-1"></i> 9座宏伟都城</span>
<span><i class="fas fa-users mr-1"></i> 复杂政治</span>
<span><i class="fas fa-mountain mr-1"></i> 修道院与寺庙</span>
</div>
</div>
<!-- 区域3 -->
<div class="bg-gray-900 bg-opacity-80 rounded-lg p-6 border border-gray-700">
<h3 class="text-xl font-bold mb-3 text-indigo-400">南方群岛</h3>
<p class="text-gray-300 mb-4">城邦共和国与海盗巢穴，地中海风格的海上贸易中心。</p>
<div class="flex justify-between text-sm text-gray-400">
<span><i class="fas fa-city mr-1"></i> 7个独立城邦</span>
<span><i class="fas fa-ship mr-1"></i> 海上贸易</span>
<span><i class="fas fa-skull-crossbones mr-1"></i> 海盗活动</span>
</div>
</div>
</div>
<div class="mt-12 bg-gray-900 bg-opacity-80 rounded-lg p-6 border border-gray-700">
<h3 class="text-xl font-bold mb-4 text-center">动态世界系统</h3>
<div class="grid md:grid-cols-4 gap-6 text-center">
<div>
<div class="text-indigo-400 text-3xl mb-2">
<i class="fas fa-calendar-day"></i>
</div>
<h4 class="font-bold mb-1">季节变化</h4>
<p class="text-sm text-gray-300">影响农业、旅行和战争</p>
</div>
<div>
<div class="text-indigo-400 text-3xl mb-2">
<i class="fas fa-random"></i>
</div>
<h4 class="font-bold mb-1">动态事件</h4>
<p class="text-sm text-gray-300">叛乱、瘟疫、经济危机</p>
</div>
<div>
<div class="text-indigo-400 text-3xl mb-2">
<i class="fas fa-route"></i>
</div>
<h4 class="font-bold mb-1">旅行系统</h4>
<p class="text-sm text-gray-300">商队、快速旅行与危险</p>
</div>
<div>
<div class="text-indigo-400 text-3xl mb-2">
<i class="fas fa-book-dead"></i>
</div>
<h4 class="font-bold mb-1">历史进程</h4>
<p class="text-sm text-gray-300">你的行动改变世界历史</p>
</div>
</div>
</div>
</div>
</section>
<!-- 角色系统 -->
<section id="characters" class="py-20 bg-gray-800">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4">角色发展与装备</h2>
<p class="text-xl text-gray-300 max-w-3xl mx-auto">打造独一无二的角色，收集传奇装备</p>
</div>
<div class="grid md:grid-cols-3 gap-8 mb-12">
<!-- 角色卡片1 -->
<div class="character-card h-96">
<div class="character-inner relative w-full h-full">
<div class="character-front absolute w-full h-full bg-gray-700 rounded-lg p-6 flex flex-col items-center justify-center">
<div class="w-32 h-32 bg-indigo-900 rounded-full mb-4 flex items-center justify-center text-4xl">
<i class="fas fa-shield-alt"></i>
</div>
<h3 class="text-xl font-bold mb-2">战士</h3>
<p class="text-gray-300 text-center">精通各种武器的战斗专家，可以成为骑士、佣兵或角斗士</p>
</div>
<div class="character-back absolute w-full h-full bg-indigo-900 rounded-lg p-6 flex flex-col justify-center">
<h3 class="text-xl font-bold mb-3 text-center">技能专精</h3>
<ul class="space-y-2 text-sm">
<li class="flex items-center">
<i class="fas fa-sword mr-2"></i>
<span>武器大师 - 解锁特殊攻击</span>
</li>
<li class="flex items-center">
<i class="fas fa-shield-virus mr-2"></i>
<span>防御战术 - 格挡与反击</span>
</li>
<li class="flex items-center">
<i class="fas fa-helmet-battle mr-2"></i>
<span>重甲专精 - 减少移动惩罚</span>
</li>
</ul>
</div>
</div>
</div>
<!-- 角色卡片2 -->
<div class="character-card h-96">
<div class="character-inner relative w-full h-full">
<div class="character-front absolute w-full h-full bg-gray-700 rounded-lg p-6 flex flex-col items-center justify-center">
<div class="w-32 h-32 bg-indigo-900 rounded-full mb-4 flex items-center justify-center text-4xl">
<i class="fas fa-hand-holding-usd"></i>
</div>
<h3 class="text-xl font-bold mb-2">商人</h3>
<p class="text-gray-300 text-center">经济系统的掌控者，建立贸易网络或垄断关键资源</p>
</div>
<div class="character-back absolute w-full h-full bg-indigo-900 rounded-lg p-6 flex flex-col justify-center">
<h3 class="text-xl font-bold mb-3 text-center">商业技能</h3>
<ul class="space-y-2 text-sm">
<li class="flex items-center">
<i class="fas fa-chart-line mr-2"></i>
<span>市场洞察 - 预测价格波动</span>
</li>
<li class="flex items-center">
<i class="fas fa-handshake mr-2"></i>
<span>谈判大师 - 更好的交易条件</span>
</li>
<li class="flex items-center">
<i class="fas fa-warehouse mr-2"></i>
<span>物流网络 - 降低运输成本</span>
</li>
</ul>
</div>
</div>
</div>
<!-- 角色卡片3 -->
<div class="character-card h-96">
<div class="character-inner relative w-full h-full">
<div class="character-front absolute w-full h-full bg-gray-700 rounded-lg p-6 flex flex-col items-center justify-center">
<div class="w-32 h-32 bg-indigo-900 rounded-full mb-4 flex items-center justify-center text-4xl">
<i class="fas fa-crown"></i>
</div>
<h3 class="text-xl font-bold mb-2">统治者</h3>
<p class="text-gray-300 text-center">政治与军事领袖，管理领地并参与大战略决策</p>
</div>
<div class="character-back absolute w-full h-full bg-indigo-900 rounded-lg p-6 flex flex-col justify-center">
<h3 class="text-xl font-bold mb-3 text-center">统治能力</h3>
<ul class="space-y-2 text-sm">
<li class="flex items-center">
<i class="fas fa-landmark mr-2"></i>
<span>内政管理 - 提高领地效率</span>
</li>
<li class="flex items-center">
<i class="fas fa-chess-queen mr-2"></i>
<span>外交手腕 - 改善国际关系</span>
</li>
<li class="flex items-center">
<i class="fas fa-chess-knight mr-2"></i>
<span>军事战略 - 指挥大型战役</span>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- 装备系统 -->
<div class="bg-gray-700 rounded-lg p-8">
<h3 class="text-2xl font-bold mb-6 text-center">深度装备系统</h3>
<div class="grid md:grid-cols-2 gap-8">
<div>
<h4 class="text-xl font-bold mb-4 text-indigo-400">装备特性</h4>
<ul class="space-y-3">
<li class="flex items-start">
<i class="fas fa-asterisk text-indigo-400 mt-1 mr-3"></i>
<span><span class="font-bold">物理模拟:</span> 装备重量影响移动和战斗，金属装备在寒冷地区会结霜</span>
</li>
<li class="flex items-start">
<i class="fas fa-asterisk text-indigo-400 mt-1 mr-3"></i>
<span><span class="font-bold">磨损系统:</span> 武器会变钝，盔甲会破损，需要定期维护</span>
</li>
<li class="flex items-start">
<i class="fas fa-asterisk text-indigo-400 mt-1 mr-3"></i>
<span><span class="font-bold">文化风格:</span> 不同地区的装备有独特外观和属性加成</span>
</li>
<li class="flex items-start">
<i class="fas fa-asterisk text-indigo-400 mt-1 mr-3"></i>
<span><span class="font-bold">传奇物品:</span> 带有历史背景和特殊能力的独特装备</span>
</li>
</ul>
</div>
<div class="bg-gray-800 rounded-lg p-6 border border-gray-600">
<div class="flex justify-between mb-6">
<div>
<h5 class="font-bold text-indigo-300">"龙息"双手剑</h5>
<p class="text-sm text-gray-400">古代火龙锻造的传奇武器</p>
</div>
<div class="text-yellow-400">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>
<div class="grid grid-cols-2 gap-4 mb-4">
<div>
<p class="text-sm text-gray-400">伤害</p>
<p class="font-bold">85-120</p>
</div>
<div>
<p class="text-sm text-gray-400">攻击速度</p>
<p class="font-bold">慢</p>
</div>
<div>
<p class="text-sm text-gray-400">重量</p>
<p class="font-bold">12.5kg</p>
</div>
<div>
<p class="text-sm text-gray-400">耐久</p>
<p class="font-bold">300/300</p>
</div>
</div>
<div class="border-t border-gray-700 pt-4">
<p class="text-sm text-indigo-300 font-bold">特殊效果:</p>
<p class="text-sm">攻击有几率释放火焰冲击波，对敌人造成持续燃烧伤害。在火山区域伤害提升30%。</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 召唤行动 -->
<section class="py-20 bg-indigo-900">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-6">准备好开始你的冒险了吗？</h2>
<p class="text-xl text-indigo-200 mb-8">加入数百万玩家，在永恒王国中创造属于你的传奇故事。</p>
<div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
<button class="bg-white text-indigo-900 hover:bg-gray-200 px-8 py-4 rounded-md text-lg font-bold">
<i class="fas fa-shopping-cart mr-2"></i>立即预购
</button>
<button class="bg-indigo-700 hover:bg-indigo-800 text-white px-8 py-4 rounded-md text-lg font-medium border border-indigo-500">
<i class="fas fa-envelope mr-2"></i>订阅资讯
</button>
</div>
<p class="text-sm text-indigo-300 mt-6">预购可获得独家装备和提前体验资格</p>
</div>
</section>
<!-- 页脚 -->
<footer class="bg-gray-900 py-12">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid md:grid-cols-4 gap-8">
<div>
<h3 class="text-xl font-bold mb-4 text-indigo-500"><i class="fas fa-crown mr-2"></i>永恒王国</h3>
<p class="text-gray-400">一个融合多种游戏类型的开放世界沙盒游戏，由幻想工作室开发。</p>
<div class="flex space-x-4 mt-4">
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a>
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook"></i></a>
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-discord"></i></a>
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-youtube"></i></a>
</div>
</div>
<div>
<h4 class="text-lg font-bold mb-4 text-white">游戏</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white">特色</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">世界观</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">开发日志</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">媒体</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-bold mb-4 text-white">支持</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white">常见问题</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">帮助中心</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">社区论坛</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">联系我们</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-bold mb-4 text-white">法律</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white">隐私政策</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">使用条款</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Cookie设置</a></li>
</ul>
</div>
</div>
<div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-500 text-sm">
<p>© 2023 幻想工作室. 保留所有权利。永恒王国是幻想工作室的商标。</p>
<p class="mt-2">所有游戏画面均为开发中版本，实际效果可能有所不同。</p>
</div>
</div>
</footer>
<script>
// 简单的标签切换功能
document.addEventListener('DOMContentLoaded', function() {
const tabs = document.querySelectorAll('.gameplay-tab');
tabs.forEach(tab => {
tab.addEventListener('click', function() {
// 移除所有active类
tabs.forEach(t => t.classList.remove('active', 'text-indigo-500'));
tabs.forEach(t => t.classList.add('text-gray-400'));
// 为当前点击的标签添加active类
this.classList.add('active', 'text-indigo-500');
this.classList.remove('text-gray-400');
// 这里可以添加切换内容的逻辑
});
});
// 平滑滚动
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
});
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=zdwalter/the-some-l" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html> |