Spaces:
Running
Running
| <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> |