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"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| medieval: { | |
| 100: '#e8e1d1', | |
| 200: '#d4c3a6', | |
| 300: '#c0a57a', | |
| 400: '#ac8750', | |
| 500: '#987226', | |
| 600: '#7a591e', | |
| 700: '#5c4116', | |
| 800: '#3e290e', | |
| 900: '#201106', | |
| } | |
| }, | |
| fontFamily: { | |
| medieval: ['MedievalSharp', 'Times New Roman', 'serif'], | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <link href="https://fonts.googleapis.com/css2?family=MedievalSharp&display=swap" rel="stylesheet"> | |
| <style> | |
| body { | |
| background: url('https://images.unsplash.com/photo-1550745165-9bc0b252726f?auto=format&fit=crop&w=1950&q=80') center/cover no-repeat fixed; | |
| min-height: 100vh; | |
| } | |
| .map-grid { | |
| display: grid; | |
| grid-template-columns: repeat(5, 1fr); | |
| grid-template-rows: repeat(5, 1fr); | |
| gap: 2px; | |
| } | |
| .map-cell { | |
| border: 1px solid rgba(120, 82, 45, 0.3); | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| position: relative; | |
| } | |
| .map-cell:hover { | |
| transform: scale(1.05); | |
| box-shadow: 0 0 10px rgba(255, 215, 0, 0.5); | |
| z-index: 10; | |
| } | |
| .knight-helmet { | |
| position: relative; | |
| display: inline-block; | |
| } | |
| .knight-helmet::before { | |
| content: ""; | |
| position: absolute; | |
| top: -10px; | |
| left: -20px; | |
| right: -20px; | |
| bottom: 0; | |
| background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.7)); | |
| border-radius: 50%; | |
| z-index: -1; | |
| } | |
| .character-view { | |
| perspective: 1000px; | |
| } | |
| .character-3d { | |
| transform-style: preserve-3d; | |
| transform: rotateY(-15deg); | |
| transition: transform 0.5s; | |
| } | |
| .equipment-item { | |
| transition: all 0.3s; | |
| } | |
| .equipment-item:hover { | |
| transform: translateY(-5px); | |
| filter: drop-shadow(0 5px 5px rgba(0,0,0,0.3)); | |
| } | |
| .fade-in { | |
| animation: fadeIn 0.5s ease-in; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .glow { | |
| animation: glow 2s infinite alternate; | |
| } | |
| @keyframes glow { | |
| from { text-shadow: 0 0 5px #fff, 0 0 10px #ffcc00; } | |
| to { text-shadow: 0 0 10px #ffcc00, 0 0 20px #ff9900, 0 0 30px #ff5500; } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-medieval-100 font-medieval"> | |
| <!-- 页面头部 --> | |
| <header class="bg-gradient-to-r from-medieval-900 via-medieval-800 to-medieval-900 border-b-4 border-medieval-700"> | |
| <div class="container mx-auto px-4 py-4 flex flex-col md:flex-row justify-between items-center"> | |
| <div class="flex items-center mb-4 md:mb-0"> | |
| <div class="w-16 h-16 bg-gray-200 rounded-full flex items-center justify-center mr-4"> | |
| <i class="fas fa-chess-knight text-medieval-600 text-3xl"></i> | |
| </div> | |
| <h1 class="text-3xl md:text-4xl font-bold glow">骑马与砍杀</h1> | |
| </div> | |
| <nav class="flex space-x-2 md:space-x-6"> | |
| <button class="px-3 py-2 bg-medieval-600 hover:bg-medieval-500 rounded-lg transition-all transform hover:-translate-y-1"> | |
| <i class="fas fa-campground mr-2"></i>营地 | |
| </button> | |
| <button class="px-3 py-2 bg-medieval-600 hover:bg-medieval-500 rounded-lg transition-all transform hover:-translate-y-1"> | |
| <i class="fas fa-map mr-2"></i>地图 | |
| </button> | |
| <button class="px-3 py-2 bg-medieval-600 hover:bg-medieval-500 rounded-lg transition-all transform hover:-translate-y-1"> | |
| <i class="fas fa-users mr-2"></i>部队 | |
| </button> | |
| <button class="px-3 py-2 bg-medieval-600 hover:bg-medieval-500 rounded-lg transition-all transform hover:-translate-y-1"> | |
| <i class="fas fa-crown mr-2"></i>王国 | |
| </button> | |
| </nav> | |
| </div> | |
| </header> | |
| <main class="container mx-auto px-4 py-8"> | |
| <!-- 游戏标题区域 --> | |
| <section class="text-center mb-12 mt-4 fade-in"> | |
| <h2 class="text-4xl md:text-5xl font-bold mb-4">中世纪战场</h2> | |
| <p class="text-xl md:text-2xl max-w-2xl mx-auto"> | |
| 招募部队，征战四方，成为不朽的传奇！ | |
| </p> | |
| </section> | |
| <!-- 主要游戏区域 --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-12"> | |
| <!-- 角色和状态区域 --> | |
| <div class="bg-medieval-800 bg-opacity-80 rounded-xl p-6 border-2 border-medieval-700 shadow-lg"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h3 class="text-2xl font-bold">骑士队长</h3> | |
| <div class="text-medieval-400"> | |
| <i class="fas fa-coins mr-1"></i> 金币: <span class="text-medieval-200 font-bold">2,450</span> | |
| </div> | |
| </div> | |
| <div class="flex flex-col items-center mb-6"> | |
| <div class="character-view mb-4"> | |
| <div class="character-3d"> | |
| <div class="knight-helmet"> | |
| <img src="https://images.unsplash.com/photo-1572015892216-5dbe88d5f01d?auto=format&fit=crop&w=400&h=400&q=80" | |
| alt="骑士形象" | |
| class="w-48 h-48 rounded-full border-4 border-medieval-600 object-cover"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center"> | |
| <h4 class="text-xl font-bold mb-1">雷纳德·铁壁</h4> | |
| <p class="text-medieval-400">等级 12 | 声望 1,450</p> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <div class="flex justify-between mb-2"> | |
| <span>生命值</span> | |
| <span>85/120</span> | |
| </div> | |
| <div class="w-full bg-medieval-700 h-4 rounded-full overflow-hidden"> | |
| <div class="bg-red-600 h-full rounded-full" style="width: 70%"></div> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <div class="flex justify-between mb-2"> | |
| <span>经验值</span> | |
| <span>1,120/1,500</span> | |
| </div> | |
| <div class="w-full bg-medieval-700 h-4 rounded-full overflow-hidden"> | |
| <div class="bg-yellow-600 h-full rounded-full" style="width: 75%"></div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div class="text-center bg-medieval-700 p-2 rounded-lg"> | |
| <div class="text-xl font-bold">24</div> | |
| <div class="text-sm">近战能力</div> | |
| </div> | |
| <div class="text-center bg-medieval-700 p-2 rounded-lg"> | |
| <div class="text-xl font-bold">18</div> | |
| <div class="text-sm">骑术</div> | |
| </div> | |
| <div class="text-center bg-medieval-700 p-2 rounded-lg"> | |
| <div class="text-xl font-bold">16</div> | |
| <div class="text-sm">箭术</div> | |
| </div> | |
| <div class="text-center bg-medieval-700 p-2 rounded-lg"> | |
| <div class="text-xl font-bold">22</div> | |
| <div class="text-sm">领导力</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 装备和库存区域 --> | |
| <div class="bg-medieval-800 bg-opacity-80 rounded-xl p-6 border-2 border-medieval-700 shadow-lg"> | |
| <h3 class="text-2xl font-bold mb-6">装备</h3> | |
| <div class="mb-8"> | |
| <h4 class="text-xl mb-4 border-b border-medieval-700 pb-2">当前装备</h4> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div class="equipment-item text-center bg-medieval-700 p-4 rounded-lg cursor-pointer transform transition-all hover:bg-medieval-600"> | |
| <i class="fas fa-sword text-3xl mb-2 text-blue-300"></i> | |
| <div>骑士长剑</div> | |
| <div class="text-sm text-medieval-400">伤害 34</div> | |
| </div> | |
| <div class="equipment-item text-center bg-medieval-700 p-4 rounded-lg cursor-pointer transform transition-all hover:bg-medieval-600"> | |
| <i class="fas fa-shield-alt text-3xl mb-2 text-yellow-300"></i> | |
| <div>钢制圆盾</div> | |
| <div class="text-sm text-medieval-400">防御 28</div> | |
| </div> | |
| <div class="equipment-item text-center bg-medieval-700 p-4 rounded-lg cursor-pointer transform transition-all hover:bg-medieval-600"> | |
| <i class="fas fa-helmet-battle text-3xl mb-2 text-red-300"></i> | |
| <div>板甲头盔</div> | |
| <div class="text-sm text-medieval-400">护甲 24</div> | |
| </div> | |
| <div class="equipment-item text-center bg-medieval-700 p-4 rounded-lg cursor-pointer transform transition-all hover:bg-medieval-600"> | |
| <i class="fas fa-horse text-3xl mb-2 text-green-300"></i> | |
| <div>战马"雷蹄"</div> | |
| <div class="text-sm text-medieval-400">速度 58</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="text-xl mb-4 border-b border-medieval-700 pb-2">库存物品</h4> | |
| <div class="grid grid-cols-3 gap-3"> | |
| <div class="equipment-item text-center bg-medieval-700 p-3 rounded-lg cursor-pointer"> | |
| <i class="fas fa-bow-arrow text-xl mb-1"></i> | |
| <div class="text-sm">长弓</div> | |
| </div> | |
| <div class="equipment-item text-center bg-medieval-700 p-3 rounded-lg cursor-pointer"> | |
| <i class="fas fa-axe text-xl mb-1"></i> | |
| <div class="text-sm">战斧</div> | |
| </div> | |
| <div class="equipment-item text-center bg-medieval-700 p-3 rounded-lg cursor-pointer"> | |
| <i class="fas fa-warehouse text-xl mb-1"></i> | |
| <div class="text-sm">皮甲</div> | |
| </div> | |
| <div class="equipment-item text-center bg-medieval-700 p-3 rounded-lg cursor-pointer"> | |
| <i class="fas fa-drum text-xl mb-1"></i> | |
| <div class="text-sm">箭袋</div> | |
| </div> | |
| <div class="equipment-item text-center bg-medieval-700 p-3 rounded-lg cursor-pointer"> | |
| <i class="fas fa-apple-alt text-xl mb-1"></i> | |
| <div class="text-sm">食物</div> | |
| </div> | |
| <div class="equipment-item text-center bg-medieval-700 p-3 rounded-lg cursor-pointer"> | |
| <i class="fas fa-first-aid text-xl mb-1"></i> | |
| <div class="text-sm">药水</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 地图和行动区域 --> | |
| <div class="bg-medieval-800 bg-opacity-80 rounded-xl p-6 border-2 border-medieval-700 shadow-lg"> | |
| <h3 class="text-2xl font-bold mb-6">卡拉迪亚地图</h3> | |
| <div class="bg-medieval-700 rounded-lg p-4 mb-6"> | |
| <div class="map-grid w-full h-64"> | |
| <div class="map-cell bg-green-800 bg-opacity-50"><div class="text-xs absolute top-1 left-1">森林</div></div> | |
| <div class="map-cell bg-green-800 bg-opacity-50"><div class="text-xs absolute top-1 left-1">森林</div></div> | |
| <div class="map-cell bg-yellow-700 bg-opacity-50"><div class="text-xs absolute top-1 left-1">平原</div></div> | |
| <div class="map-cell bg-yellow-700 bg-opacity-50"><div class="text-xs absolute top-1 left-1">平原</div></div> | |
| <div class="map-cell bg-yellow-700 bg-opacity-50"><div class="text-xs absolute top-1 left-1">平原</div></div> | |
| <div class="map-cell bg-green-800 bg-opacity-50"><div class="text-xs absolute top-1 left-1">森林</div></div> | |
| <div class="map-cell bg-green-700 bg-opacity-50"><div class="text-xs absolute top-1 left-1">草地</div></div> | |
| <div class="map-cell bg-yellow-600 bg-opacity-50"><div class="text-xs absolute top-1 left-1">荒野</div></div> | |
| <div class="map-cell bg-stone-600 bg-opacity-50"><div class="text-xs absolute top-1 left-1">山脉</div></div> | |
| <div class="map-cell bg-stone-600 bg-opacity-50"><div class="text-xs absolute top-1 left-1">山脉</div></div> | |
| <div class="map-cell bg-blue-500 bg-opacity-40 relative"> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <div class="w-8 h-8 rounded-full bg-red-500 flex items-center justify-center animate-pulse"> | |
| <i class="fas fa-flag text-white text-sm"></i> | |
| </div> | |
| </div> | |
| <div class="text-xs absolute top-1 left-1">城堡</div> | |
| </div> | |
| <div class="map-cell bg-blue-500 bg-opacity-40"><div class="text-xs absolute top-1 left-1">河流</div></div> | |
| <div class="map-cell bg-blue-500 bg-opacity-40"><div class="text-xs absolute top-1 left-1">河流</div></div> | |
| <div class="map-cell bg-stone-600 bg-opacity-50"><div class="text-xs absolute top-1 left-1">山脉</div></div> | |
| <div class="map-cell bg-stone-600 bg-opacity-50"><div class="text-xs absolute top-1 left-1">山脉</div></div> | |
| <div class="map-cell bg-yellow-700 bg-opacity-50"> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <div class="w-6 h-6 rounded-full bg-blue-500 flex items-center justify-center"> | |
| <i class="fas fa-user text-white text-xs"></i> | |
| </div> | |
| </div> | |
| <div class="text-xs absolute top-1 left-1">村庄</div> | |
| </div> | |
| <div class="map-cell bg-green-700 bg-opacity-50"><div class="text-xs absolute top-1 left-1">草地</div></div> | |
| <div class="map-cell bg-green-700 bg-opacity-50"><div class="text-xs absolute top-1 left-1">草地</div></div> | |
| <div class="map-cell bg-blue-500 bg-opacity-40"><div class="text-xs absolute top-1 left-1">河流</div></div> | |
| <div class="map-cell bg-blue-500 bg-opacity-40"><div class="text-xs absolute top-1 left-1">河流</div></div> | |
| <div class="map-cell bg-yellow-600 bg-opacity-50"><div class="text-xs absolute top-1 left-1">荒野</div></div> | |
| <div class="map-cell bg-yellow-700 bg-opacity-50"><div class="text-xs absolute top-1 left-1">平原</div></div> | |
| <div class="map-cell bg-yellow-700 bg-opacity-50"><div class="text-xs absolute top-1 left-1">平原</div></div> | |
| <div class="map-cell bg-green-700 bg-opacity-50"><div class="text-xs absolute top-1 left-1">草地</div></div> | |
| <div class="map-cell bg-green-800 bg-opacity-50"><div class="text-xs absolute top-1 left-1">森林</div></div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4 mb-6"> | |
| <button class="bg-medieval-600 hover:bg-medieval-500 py-3 rounded-lg transition-all"> | |
| <i class="fas fa-shopping-cart mr-2"></i>访问城镇 | |
| </button> | |
| <button class="bg-medieval-600 hover:bg-medieval-500 py-3 rounded-lg transition-all"> | |
| <i class="fas fa-fort mr-2"></i>进攻城堡 | |
| </button> | |
| </div> | |
| <div class="bg-medieval-700 rounded-lg p-4"> | |
| <h4 class="text-lg font-bold mb-3">部队状态</h4> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-3/4"> | |
| <div class="text-sm">重装骑兵 (8)</div> | |
| </div> | |
| <div class="w-1/4 text-right text-sm">士气: 74</div> | |
| </div> | |
| <div class="w-full bg-gray-600 h-2 rounded-full mb-3 overflow-hidden"> | |
| <div class="bg-green-500 h-full rounded-full" style="width: 90%"></div> | |
| </div> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-3/4"> | |
| <div class="text-sm">弓箭手 (12)</div> | |
| </div> | |
| <div class="w-1/4 text-right text-sm">士气: 68</div> | |
| </div> | |
| <div class="w-full bg-gray-600 h-2 rounded-full mb-3 overflow-hidden"> | |
| <div class="bg-green-500 h-full rounded-full" style="width: 80%"></div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-3/4"> | |
| <div class="text-sm">步兵 (15)</div> | |
| </div> | |
| <div class="w-1/4 text-right text-sm">士气: 62</div> | |
| </div> | |
| <div class="w-full bg-gray-600 h-2 rounded-full overflow-hidden"> | |
| <div class="bg-yellow-500 h-full rounded-full" style="width: 65%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 战斗控制区域 --> | |
| <section class="bg-medieval-800 bg-opacity-80 rounded-xl p-6 border-2 border-medieval-700 shadow-lg mb-12"> | |
| <h3 class="text-2xl font-bold mb-6 text-center">战斗指挥</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-4"> | |
| <button class="bg-red-600 hover:bg-red-500 py-4 px-2 rounded-lg transition-all"> | |
| <i class="fas fa-fist-raised text-2xl mb-1"></i> | |
| <div>全员进攻！</div> | |
| </button> | |
| <button class="bg-yellow-600 hover:bg-yellow-500 py-4 px-2 rounded-lg transition-all"> | |
| <i class="fas fa-shield-alt text-2xl mb-1"></i> | |
| <div>坚守阵地</div> | |
| </button> | |
| <button class="bg-green-600 hover:bg-green-500 py-4 px-2 rounded-lg transition-all"> | |
| <i class="fas fa-arrows-alt-h text-2xl mb-1"></i> | |
| <div>侧翼包抄</div> | |
| </button> | |
| <button class="bg-blue-600 hover:bg-blue-500 py-4 px-2 rounded-lg transition-all"> | |
| <i class="fas fa-horse text-2xl mb-1"></i> | |
| <div>骑兵冲锋</div> | |
| </button> | |
| </div> | |
| <div class="mt-6 flex justify-center"> | |
| <button class="bg-gradient-to-r from-red-700 to-red-900 py-3 px-8 rounded-full text-xl font-bold hover:from-red-600 hover:to-red-800 transition-all transform hover:scale-105 flex items-center"> | |
| <i class="fas fa-fire mr-3"></i> 发起战斗！ | |
| </button> | |
| </div> | |
| </section> | |
| <!-- 消息和任务区域 --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <div class="bg-medieval-800 bg-opacity-80 rounded-xl p-6 border-2 border-medieval-700 shadow-lg"> | |
| <h3 class="text-2xl font-bold mb-4">王国消息</h3> | |
| <ul class="space-y-3"> | |
| <li class="flex items-start"> | |
| <div class="bg-red-500 rounded-full w-6 h-6 flex items-center justify-center mr-3 mt-1 flex-shrink-0"> | |
| <i class="fas fa-exclamation text-xs"></i> | |
| </div> | |
| <div> | |
| <div class="font-bold">边境告急！</div> | |
| <div class="text-sm text-medieval-400">诺德王国入侵斯瓦迪亚领地，大量村庄遭到洗劫</div> | |
| </div> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="bg-yellow-500 rounded-full w-6 h-6 flex items-center justify-center mr-3 mt-1 flex-shrink-0"> | |
| <i class="fas fa-coins text-xs"></i> | |
| </div> | |
| <div> | |
| <div class="font-bold">商队遭袭</div> | |
| <div class="text-sm text-medieval-400">你的商队在维基亚雪原被土匪抢劫，损失1200金币</div> | |
| </div> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="bg-green-500 rounded-full w-6 h-6 flex items-center justify-center mr-3 mt-1 flex-shrink-0"> | |
| <i class="fas fa-award text-xs"></i> | |
| </div> | |
| <div> | |
| <div class="font-bold">领主任命</div> | |
| <div class="text-sm text-medieval-400">国王将图尔加堡授予你作为封地，请尽快前往接收</div> | |
| </div> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="bg-blue-500 rounded-full w-6 h-6 flex items-center justify-center mr-3 mt-1 flex-shrink-0"> | |
| <i class="fas fa-user text-xs"></i> | |
| </div> | |
| <div> | |
| <div class="font-bold">招募士兵</div> | |
| <div class="text-sm text-medieval-400">有8名斯瓦迪亚骑士希望加入你的部队</div> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="bg-medieval-800 bg-opacity-80 rounded-xl p-6 border-2 border-medieval-700 shadow-lg"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-2xl font-bold">当前任务</h3> | |
| <button class="text-medieval-400 hover:text-medieval-200"> | |
| <i class="fas fa-plus-circle"></i> 新任务 | |
| </button> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="border-l-4 border-yellow-500 pl-4 py-1"> | |
| <div class="font-bold">剿灭山贼据点</div> | |
| <div class="text-sm text-medieval-400 flex justify-between"> | |
| <span>卡拉迪亚东北部山区</span> | |
| <span>奖励: 980金币</span> | |
| </div> | |
| <div class="w-full bg-medieval-700 h-2 rounded-full mt-2 overflow-hidden"> | |
| <div class="bg-yellow-500 h-full rounded-full" style="width: 65%"></div> | |
| </div> | |
| </div> | |
| <div class="border-l-4 border-green-500 pl-4 py-1"> | |
| <div class="font-bold">护送商队</div> | |
| <div class="text-sm text-medieval-400 flex justify-between"> | |
| <span>从帕拉汶到日瓦车则</span> | |
| <span>奖励: 1200金币</span> | |
| </div> | |
| <div class="w-full bg-medieval-700 h-2 rounded-full mt-2 overflow-hidden"> | |
| <div class="bg-green-500 h-full rounded-full" style="width: 30%"></div> | |
| </div> | |
| </div> | |
| <div class="border-l-4 border-red-500 pl-4 py-1"> | |
| <div class="font-bold">解救被俘贵族</div> | |
| <div class="text-sm text-medieval-400 flex justify-between"> | |
| <span>诺德王国战俘营</span> | |
| <span>奖励: 1500金币, 声望+35</span> | |
| </div> | |
| <div class="w-full bg-medieval-700 h-2 rounded-full mt-2 overflow-hidden"> | |
| <div class="bg-red-500 h-full rounded-full" style="width: 10%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- 页脚 --> | |
| <footer class="bg-medieval-900 border-t border-medieval-800 mt-12 py-6"> | |
| <div class="container mx-auto px-4 text-center text-medieval-500"> | |
| <p>© 2023 骑马与砍杀：卡拉迪亚传奇 | 中世纪战争模拟游戏</p> | |
| <div class="flex justify-center space-x-4 mt-2"> | |
| <button class="hover:text-medieval-300 transition-colors"><i class="fab fa-discord"></i></button> | |
| <button class="hover:text-medieval-300 transition-colors"><i class="fab fa-twitter"></i></button> | |
| <button class="hover:text-medieval-300 transition-colors"><i class="fab fa-youtube"></i></button> | |
| <button class="hover:text-medieval-300 transition-colors"><i class="fab fa-steam"></i></button> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // 3D旋转效果 | |
| const character = document.querySelector('.character-3d'); | |
| character.addEventListener('mouseenter', () => { | |
| character.style.transform = 'rotateY(15deg)'; | |
| }); | |
| character.addEventListener('mouseleave', () => { | |
| character.style.transform = 'rotateY(-15deg)'; | |
| }); | |
| // 地图交互 | |
| const mapCells = document.querySelectorAll('.map-cell'); | |
| mapCells.forEach(cell => { | |
| cell.addEventListener('click', () => { | |
| // 移除所有单元格的选中样式 | |
| mapCells.forEach(c => c.classList.remove('bg-medieval-500')); | |
| // 添加当前单元格的选中样式 | |
| cell.classList.add('bg-medieval-500'); | |
| }); | |
| }); | |
| // 添加动画效果 | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const fadeElements = document.querySelectorAll('.fade-in'); | |
| fadeElements.forEach((el, index) => { | |
| setTimeout(() => { | |
| el.style.opacity = 1; | |
| }, index * 200); | |
| }); | |
| }); | |
| </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/mount-and-blade" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |