Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Warband Chronicles II</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=Cinzel:wght@400;700&family=MedievalSharp&display=swap'); | |
| body { | |
| font-family: 'Cinzel', serif; | |
| background-color: #0a0a0a; | |
| color: #e0d4b0; | |
| overflow: hidden; | |
| height: 100vh; | |
| } | |
| .medieval-font { | |
| font-family: 'MedievalSharp', cursive; | |
| } | |
| .game-container { | |
| background-image: url('https://images.unsplash.com/photo-1518364538800-6bae7c3f0b56?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80'); | |
| background-size: cover; | |
| background-position: center; | |
| height: 100vh; | |
| position: relative; | |
| } | |
| .character-card { | |
| background: rgba(10, 10, 10, 0.7); | |
| border: 2px solid #5d3a1a; | |
| box-shadow: 0 0 15px rgba(255, 215, 0, 0.3); | |
| } | |
| .health-bar { | |
| height: 10px; | |
| background: linear-gradient(to right, #8b0000, #ff0000); | |
| border-radius: 5px; | |
| } | |
| .map-container { | |
| background: rgba(20, 20, 20, 0.8); | |
| border: 2px solid #5d3a1a; | |
| border-radius: 8px; | |
| } | |
| .map-location { | |
| transition: all 0.3s ease; | |
| } | |
| .map-location:hover { | |
| transform: scale(1.1); | |
| filter: drop-shadow(0 0 5px gold); | |
| } | |
| .combat-log { | |
| background: rgba(0, 0, 0, 0.7); | |
| border: 1px solid #5d3a1a; | |
| max-height: 200px; | |
| overflow-y: auto; | |
| } | |
| .combat-log::-webkit-scrollbar { | |
| width: 8px; | |
| } | |
| .combat-log::-webkit-scrollbar-thumb { | |
| background: #5d3a1a; | |
| border-radius: 4px; | |
| } | |
| .faction-banner { | |
| background-size: contain; | |
| background-repeat: no-repeat; | |
| background-position: center; | |
| height: 60px; | |
| width: 80px; | |
| } | |
| .button-gold { | |
| background: linear-gradient(to bottom, #d4af37, #a67c00); | |
| color: #1a1a1a; | |
| border: 1px solid #ffd700; | |
| transition: all 0.2s; | |
| } | |
| .button-gold:hover { | |
| background: linear-gradient(to bottom, #ffd700, #d4af37); | |
| transform: translateY(-2px); | |
| box-shadow: 0 5px 15px rgba(255, 215, 0, 0.4); | |
| } | |
| .modal-overlay { | |
| background: rgba(0, 0, 0, 0.8); | |
| } | |
| .modal-content { | |
| background: linear-gradient(to bottom, #1a1a1a, #2a2a2a); | |
| border: 2px solid #5d3a1a; | |
| box-shadow: 0 0 20px rgba(255, 215, 0, 0.5); | |
| } | |
| @keyframes swordSwing { | |
| 0% { transform: rotate(0deg); } | |
| 25% { transform: rotate(45deg); } | |
| 50% { transform: rotate(0deg); } | |
| 75% { transform: rotate(-45deg); } | |
| 100% { transform: rotate(0deg); } | |
| } | |
| .sword-animation { | |
| animation: swordSwing 0.5s ease-in-out; | |
| } | |
| .party-member:hover { | |
| transform: translateX(5px); | |
| background: rgba(90, 70, 30, 0.3); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="game-container flex flex-col h-full"> | |
| <!-- Top Bar --> | |
| <div class="flex justify-between items-center p-4 bg-black bg-opacity-70 border-b border-amber-800"> | |
| <div class="flex items-center space-x-4"> | |
| <div class="text-amber-400 text-xl"> | |
| <i class="fas fa-coins mr-2"></i> | |
| <span id="gold">5,250</span> denars | |
| </div> | |
| <div class="text-green-400 text-xl"> | |
| <i class="fas fa-users mr-2"></i> | |
| <span id="party-size">15</span>/<span id="party-capacity">30</span> | |
| </div> | |
| <div class="text-red-400 text-xl"> | |
| <i class="fas fa-heart mr-2"></i> | |
| <span id="renown">1,250</span> renown | |
| </div> | |
| </div> | |
| <div class="text-2xl font-bold text-amber-300 medieval-font"> | |
| WARBAND CHRONICLES II | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="text-blue-400 text-xl"> | |
| <i class="fas fa-calendar-day mr-2"></i> | |
| Day <span id="day">127</span>, Spring <span id="year">1085</span> | |
| </div> | |
| <button id="menu-btn" class="button-gold px-4 py-2 rounded font-bold"> | |
| <i class="fas fa-bars mr-2"></i>Menu | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="flex flex-1 overflow-hidden"> | |
| <!-- Left Sidebar - Character Info --> | |
| <div class="w-64 bg-black bg-opacity-60 border-r border-amber-800 p-4 flex flex-col"> | |
| <div class="character-card p-4 rounded-lg mb-4"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <h3 class="text-xl font-bold text-amber-300">Lord Edric</h3> | |
| <span class="text-sm bg-amber-900 px-2 py-1 rounded">Level 12</span> | |
| </div> | |
| <div class="flex justify-center mb-4"> | |
| <div class="relative"> | |
| <img src="https://i.imgur.com/JQHq3Wm.png" alt="Character" class="w-32 h-32 rounded-full border-2 border-amber-600"> | |
| <div class="absolute -bottom-2 left-0 right-0 flex justify-center"> | |
| <div class="bg-amber-800 px-2 py-1 rounded-full text-xs"> | |
| <i class="fas fa-shield-alt mr-1"></i> 45 | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-2"> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Health</span> | |
| <span>78/100</span> | |
| </div> | |
| <div class="health-bar rounded-full w-full"></div> | |
| </div> | |
| <div class="mb-2"> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Stamina</span> | |
| <span>45/100</span> | |
| </div> | |
| <div class="bg-gray-700 rounded-full w-full h-2"> | |
| <div class="bg-blue-600 rounded-full h-2" style="width: 45%"></div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-2 gap-2 mt-4"> | |
| <div class="text-center"> | |
| <div class="text-amber-300 font-bold">Strength</div> | |
| <div class="text-xl">24</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-amber-300 font-bold">Agility</div> | |
| <div class="text-xl">18</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-amber-300 font-bold">Intelligence</div> | |
| <div class="text-xl">15</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-amber-300 font-bold">Charisma</div> | |
| <div class="text-xl">22</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="character-card p-4 rounded-lg mb-4"> | |
| <h4 class="text-lg font-bold text-amber-300 mb-2">Equipment</h4> | |
| <div class="grid grid-cols-3 gap-2 text-center"> | |
| <div class="p-2 bg-amber-900 bg-opacity-30 rounded cursor-pointer hover:bg-amber-800"> | |
| <i class="fas fa-helmet-battle text-2xl mb-1"></i> | |
| <div class="text-xs">Imperial Helmet</div> | |
| </div> | |
| <div class="p-2 bg-amber-900 bg-opacity-30 rounded cursor-pointer hover:bg-amber-800"> | |
| <i class="fas fa-vest text-2xl mb-1"></i> | |
| <div class="text-xs">Lamellar Armor</div> | |
| </div> | |
| <div class="p-2 bg-amber-900 bg-opacity-30 rounded cursor-pointer hover:bg-amber-800"> | |
| <i class="fas fa-boot text-2xl mb-1"></i> | |
| <div class="text-xs">Leather Boots</div> | |
| </div> | |
| <div class="p-2 bg-amber-900 bg-opacity-30 rounded cursor-pointer hover:bg-amber-800"> | |
| <i class="fas fa-sword text-2xl mb-1"></i> | |
| <div class="text-xs">Longsword</div> | |
| </div> | |
| <div class="p-2 bg-amber-900 bg-opacity-30 rounded cursor-pointer hover:bg-amber-800"> | |
| <i class="fas fa-shield-alt text-2xl mb-1"></i> | |
| <div class="text-xs">Kite Shield</div> | |
| </div> | |
| <div class="p-2 bg-amber-900 bg-opacity-30 rounded cursor-pointer hover:bg-amber-800"> | |
| <i class="fas fa-horse text-2xl mb-1"></i> | |
| <div class="text-xs">War Horse</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="character-card p-4 rounded-lg flex-1"> | |
| <h4 class="text-lg font-bold text-amber-300 mb-2">Party Members</h4> | |
| <div class="space-y-2 max-h-48 overflow-y-auto"> | |
| <div class="party-member flex items-center p-2 bg-amber-900 bg-opacity-20 rounded cursor-pointer transition"> | |
| <img src="https://i.imgur.com/3QZ2J9W.png" class="w-8 h-8 rounded-full mr-2"> | |
| <div class="flex-1"> | |
| <div class="font-bold text-sm">Alistair</div> | |
| <div class="text-xs text-gray-400">Veteran Infantry</div> | |
| </div> | |
| <div class="text-xs bg-red-900 px-1 rounded">Lvl 8</div> | |
| </div> | |
| <div class="party-member flex items-center p-2 bg-amber-900 bg-opacity-20 rounded cursor-pointer transition"> | |
| <img src="https://i.imgur.com/5X3Wm9J.png" class="w-8 h-8 rounded-full mr-2"> | |
| <div class="flex-1"> | |
| <div class="font-bold text-sm">Rowena</div> | |
| <div class="text-xs text-gray-400">Archer</div> | |
| </div> | |
| <div class="text-xs bg-red-900 px-1 rounded">Lvl 6</div> | |
| </div> | |
| <div class="party-member flex items-center p-2 bg-amber-900 bg-opacity-20 rounded cursor-pointer transition"> | |
| <img src="https://i.imgur.com/JQHq3Wm.png" class="w-8 h-8 rounded-full mr-2"> | |
| <div class="flex-1"> | |
| <div class="font-bold text-sm">Gareth</div> | |
| <div class="text-xs text-gray-400">Cavalry</div> | |
| </div> | |
| <div class="text-xs bg-red-900 px-1 rounded">Lvl 5</div> | |
| </div> | |
| <div class="party-member flex items-center p-2 bg-amber-900 bg-opacity-20 rounded cursor-pointer transition"> | |
| <img src="https://i.imgur.com/3QZ2J9W.png" class="w-8 h-8 rounded-full mr-2"> | |
| <div class="flex-1"> | |
| <div class="font-bold text-sm">Brogan</div> | |
| <div class="text-xs text-gray-400">Infantry</div> | |
| </div> | |
| <div class="text-xs bg-red-900 px-1 rounded">Lvl 4</div> | |
| </div> | |
| <div class="party-member flex items-center p-2 bg-amber-900 bg-opacity-20 rounded cursor-pointer transition"> | |
| <img src="https://i.imgur.com/5X3Wm9J.png" class="w-8 h-8 rounded-full mr-2"> | |
| <div class="flex-1"> | |
| <div class="font-bold text-sm">Elara</div> | |
| <div class="text-xs text-gray-400">Healer</div> | |
| </div> | |
| <div class="text-xs bg-red-900 px-1 rounded">Lvl 7</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Game Area --> | |
| <div class="flex-1 flex flex-col p-4 overflow-hidden"> | |
| <!-- Map and Combat Area --> | |
| <div class="flex-1 flex"> | |
| <!-- World Map --> | |
| <div class="map-container flex-1 mr-4 p-4 relative"> | |
| <div class="absolute top-4 left-4 z-10"> | |
| <h3 class="text-xl font-bold text-amber-300 mb-2">Calradia</h3> | |
| <div class="text-sm">Current Location: <span class="text-amber-300">Praven</span></div> | |
| </div> | |
| <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"> | |
| <img src="https://i.imgur.com/Vx5wV0p.png" alt="Calradia Map" class="w-full h-full opacity-70"> | |
| <!-- Map Locations --> | |
| <div class="absolute top-[30%] left-[25%] map-location cursor-pointer" title="Praven"> | |
| <div class="w-4 h-4 bg-red-600 rounded-full border-2 border-white"></div> | |
| <div class="text-xs bg-black bg-opacity-70 px-1 rounded mt-1">Praven</div> | |
| </div> | |
| <div class="absolute top-[40%] left-[50%] map-location cursor-pointer" title="Dhirim"> | |
| <div class="w-4 h-4 bg-blue-600 rounded-full border-2 border-white"></div> | |
| <div class="text-xs bg-black bg-opacity-70 px-1 rounded mt-1">Dhirim</div> | |
| </div> | |
| <div class="absolute top-[60%] left-[35%] map-location cursor-pointer" title="Reyvadin"> | |
| <div class="w-4 h-4 bg-green-600 rounded-full border-2 border-white"></div> | |
| <div class="text-xs bg-black bg-opacity-70 px-1 rounded mt-1">Reyvadin</div> | |
| </div> | |
| <div class="absolute top-[20%] left-[70%] map-location cursor-pointer" title="Khudan"> | |
| <div class="w-4 h-4 bg-yellow-600 rounded-full border-2 border-white"></div> | |
| <div class="text-xs bg-black bg-opacity-70 px-1 rounded mt-1">Khudan</div> | |
| </div> | |
| <!-- Player Marker --> | |
| <div class="absolute top-[30%] left-[25%] transform -translate-x-1/2 -translate-y-1/2"> | |
| <div class="relative"> | |
| <div class="w-6 h-6 bg-amber-400 rounded-full border-2 border-white animate-pulse"></div> | |
| <div class="absolute -bottom-4 -left-2 text-xs font-bold text-amber-300">You</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Faction Banners --> | |
| <div class="absolute bottom-4 left-4 flex space-x-2"> | |
| <div class="faction-banner" style="background-image: url('https://i.imgur.com/9mJ3WzF.png')" title="Kingdom of Vlandia"></div> | |
| <div class="faction-banner" style="background-image: url('https://i.imgur.com/4mX3w9J.png')" title="Empire"></div> | |
| <div class="faction-banner" style="background-image: url('https://i.imgur.com/7nJ2WzF.png')" title="Sturgia"></div> | |
| <div class="faction-banner" style="background-image: url('https://i.imgur.com/5mX3w9J.png')" title="Aserai"></div> | |
| </div> | |
| </div> | |
| <!-- Combat/Event Log --> | |
| <div class="w-80 bg-black bg-opacity-70 border border-amber-800 rounded-lg p-4 flex flex-col"> | |
| <h3 class="text-lg font-bold text-amber-300 mb-2">Events</h3> | |
| <div class="combat-log flex-1 mb-4 text-sm space-y-2"> | |
| <div class="text-amber-300">Day 127: Arrived in Praven</div> | |
| <div class="text-green-400">+3 recruits joined your party</div> | |
| <div class="text-blue-400">Completed quest: Bandit Hideout</div> | |
| <div class="text-red-400">Lost 2 men in battle</div> | |
| <div class="text-yellow-400">Sold loot for 1,250 denars</div> | |
| <div class="text-gray-400">Met with Count Clais</div> | |
| <div class="text-amber-300">Day 126: Left Reyvadin</div> | |
| <div class="text-green-400">Alistair promoted to Veteran</div> | |
| <div class="text-blue-400">Purchased 25 units of grain</div> | |
| <div class="text-red-400">Skirmish with looters</div> | |
| <div class="text-yellow-400">Found rare sword in battle</div> | |
| </div> | |
| <h3 class="text-lg font-bold text-amber-300 mb-2">Quick Actions</h3> | |
| <div class="grid grid-cols-2 gap-2"> | |
| <button class="button-gold px-3 py-2 rounded font-bold text-sm flex items-center justify-center"> | |
| <i class="fas fa-swords mr-2"></i> Fight | |
| </button> | |
| <button class="button-gold px-3 py-2 rounded font-bold text-sm flex items-center justify-center"> | |
| <i class="fas fa-people-arrows mr-2"></i> Recruit | |
| </button> | |
| <button class="button-gold px-3 py-2 rounded font-bold text-sm flex items-center justify-center"> | |
| <i class="fas fa-warehouse mr-2"></i> Trade | |
| </button> | |
| <button class="button-gold px-3 py-2 rounded font-bold text-sm flex items-center justify-center"> | |
| <i class="fas fa-scroll mr-2"></i> Quests | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Action Buttons --> | |
| <div class="flex justify-center space-x-4 mt-4"> | |
| <button id="travel-btn" class="button-gold px-6 py-3 rounded-lg font-bold text-lg flex items-center"> | |
| <i class="fas fa-horse mr-2"></i> Travel | |
| </button> | |
| <button id="camp-btn" class="button-gold px-6 py-3 rounded-lg font-bold text-lg flex items-center"> | |
| <i class="fas fa-campground mr-2"></i> Camp | |
| </button> | |
| <button id="town-btn" class="button-gold px-6 py-3 rounded-lg font-bold text-lg flex items-center"> | |
| <i class="fas fa-city mr-2"></i> Enter Town | |
| </button> | |
| <button id="character-btn" class="button-gold px-6 py-3 rounded-lg font-bold text-lg flex items-center"> | |
| <i class="fas fa-user-shield mr-2"></i> Character | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Combat Modal --> | |
| <div id="combat-modal" class="fixed inset-0 flex items-center justify-center z-50 modal-overlay hidden"> | |
| <div class="modal-content w-3/4 h-3/4 rounded-lg p-6 relative"> | |
| <button id="close-combat" class="absolute top-4 right-4 text-amber-300 text-2xl"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| <h2 class="text-3xl font-bold text-center text-amber-300 mb-6 medieval-font">BATTLE!</h2> | |
| <div class="flex h-5/6"> | |
| <!-- Player Side --> | |
| <div class="w-1/3 flex flex-col items-center justify-center"> | |
| <div class="relative mb-4"> | |
| <img src="https://i.imgur.com/JQHq3Wm.png" alt="Player" class="w-40 h-40 rounded-full border-4 border-amber-600"> | |
| <div class="absolute -bottom-2 left-0 right-0 flex justify-center"> | |
| <div class="bg-amber-800 px-3 py-1 rounded-full text-sm font-bold"> | |
| <i class="fas fa-heart mr-1"></i> 78/100 | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mb-4"> | |
| <h3 class="text-xl font-bold text-amber-300">Lord Edric</h3> | |
| <div class="text-sm text-gray-300">Level 12 Noble</div> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4 mb-6"> | |
| <button id="attack-btn" class="button-gold px-4 py-2 rounded font-bold flex items-center justify-center"> | |
| <i class="fas fa-sword mr-2"></i> Attack | |
| </button> | |
| <button class="button-gold px-4 py-2 rounded font-bold flex items-center justify-center"> | |
| <i class="fas fa-shield-alt mr-2"></i> Block | |
| </button> | |
| <button class="button-gold px-4 py-2 rounded font-bold flex items-center justify-center"> | |
| <i class="fas fa-horse mr-2"></i> Mount | |
| </button> | |
| <button class="button-gold px-4 py-2 rounded font-bold flex items-center justify-center"> | |
| <i class="fas fa-bow-arrow mr-2"></i> Bow | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Battle Log --> | |
| <div class="w-1/3 flex flex-col items-center justify-center"> | |
| <div id="battle-animation" class="mb-8 text-6xl"> | |
| <i class="fas fa-swords text-amber-300"></i> | |
| </div> | |
| <div class="combat-log w-full h-64 p-4 mb-4"> | |
| <div class="text-amber-300">Battle begins!</div> | |
| <div class="text-blue-400">You face 12 looters</div> | |
| <div class="text-gray-400">Your troops ready their weapons</div> | |
| </div> | |
| <button id="retreat-btn" class="button-gold px-6 py-2 rounded font-bold"> | |
| <i class="fas fa-flag mr-2"></i> Retreat | |
| </button> | |
| </div> | |
| <!-- Enemy Side --> | |
| <div class="w-1/3 flex flex-col items-center justify-center"> | |
| <div class="relative mb-4"> | |
| <img src="https://i.imgur.com/3QZ2J9W.png" alt="Enemy" class="w-40 h-40 rounded-full border-4 border-red-600"> | |
| <div class="absolute -bottom-2 left-0 right-0 flex justify-center"> | |
| <div class="bg-red-800 px-3 py-1 rounded-full text-sm font-bold"> | |
| <i class="fas fa-heart mr-1"></i> 45/60 | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mb-4"> | |
| <h3 class="text-xl font-bold text-red-300">Looter Chief</h3> | |
| <div class="text-sm text-gray-300">Level 8 Bandit</div> | |
| </div> | |
| <div class="grid grid-cols-2 gap-2 mb-6"> | |
| <div class="text-center"> | |
| <div class="text-red-300 font-bold">Strength</div> | |
| <div class="text-lg">18</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-red-300 font-bold">Agility</div> | |
| <div class="text-lg">22</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-red-300 font-bold">Weapon</div> | |
| <div class="text-lg">Axe</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-red-300 font-bold">Armor</div> | |
| <div class="text-lg">Light</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Menu Modal --> | |
| <div id="menu-modal" class="fixed inset-0 flex items-center justify-center z-50 modal-overlay hidden"> | |
| <div class="modal-content w-1/2 h-2/3 rounded-lg p-6 relative"> | |
| <button id="close-menu" class="absolute top-4 right-4 text-amber-300 text-2xl"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| <h2 class="text-3xl font-bold text-center text-amber-300 mb-8 medieval-font">GAME MENU</h2> | |
| <div class="grid grid-cols-2 gap-6 h-3/4"> | |
| <div class="space-y-4"> | |
| <button class="button-gold w-full py-4 rounded-lg font-bold text-lg flex items-center justify-center"> | |
| <i class="fas fa-save mr-3"></i> Save Game | |
| </button> | |
| <button class="button-gold w-full py-4 rounded-lg font-bold text-lg flex items-center justify-center"> | |
| <i class="fas fa-folder-open mr-3"></i> Load Game | |
| </button> | |
| <button class="button-gold w-full py-4 rounded-lg font-bold text-lg flex items-center justify-center"> | |
| <i class="fas fa-cog mr-3"></i> Settings | |
| </button> | |
| </div> | |
| <div class="space-y-4"> | |
| <button class="button-gold w-full py-4 rounded-lg font-bold text-lg flex items-center justify-center"> | |
| <i class="fas fa-book mr-3"></i> Encyclopedia | |
| </button> | |
| <button class="button-gold w-full py-4 rounded-lg font-bold text-lg flex items-center justify-center"> | |
| <i class="fas fa-trophy mr-3"></i> Achievements | |
| </button> | |
| <button id="exit-btn" class="button-gold w-full py-4 rounded-lg font-bold text-lg flex items-center justify-center"> | |
| <i class="fas fa-door-open mr-3"></i> Exit to Menu | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // DOM Elements | |
| const menuBtn = document.getElementById('menu-btn'); | |
| const menuModal = document.getElementById('menu-modal'); | |
| const closeMenu = document.getElementById('close-menu'); | |
| const exitBtn = document.getElementById('exit-btn'); | |
| const travelBtn = document.getElementById('travel-btn'); | |
| const combatModal = document.getElementById('combat-modal'); | |
| const closeCombat = document.getElementById('close-combat'); | |
| const attackBtn = document.getElementById('attack-btn'); | |
| const retreatBtn = document.getElementById('retreat-btn'); | |
| const battleAnimation = document.getElementById('battle-animation'); | |
| // Menu Handling | |
| menuBtn.addEventListener('click', () => { | |
| menuModal.classList.remove('hidden'); | |
| }); | |
| closeMenu.addEventListener('click', () => { | |
| menuModal.classList.add('hidden'); | |
| }); | |
| exitBtn.addEventListener('click', () => { | |
| if(confirm('Are you sure you want to exit to main menu?')) { | |
| alert('Returning to main menu...'); | |
| // In a real game, this would redirect to the main menu | |
| } | |
| }); | |
| // Combat Handling | |
| travelBtn.addEventListener('click', () => { | |
| // Random chance to encounter combat when traveling | |
| if(Math.random() > 0.5) { | |
| combatModal.classList.remove('hidden'); | |
| } else { | |
| alert('You travel safely to the next location.'); | |
| // Update day counter | |
| const dayElement = document.getElementById('day'); | |
| dayElement.textContent = parseInt(dayElement.textContent) + 1; | |
| } | |
| }); | |
| closeCombat.addEventListener('click', () => { | |
| combatModal.classList.add('hidden'); | |
| }); | |
| attackBtn.addEventListener('click', () => { | |
| // Add sword swing animation | |
| battleAnimation.classList.add('sword-animation'); | |
| // Add combat log entry | |
| const combatLog = document.querySelector('.combat-log'); | |
| const newEntry = document.createElement('div'); | |
| newEntry.classList.add('text-amber-300'); | |
| newEntry.textContent = 'You swing your sword at the looter chief!'; | |
| combatLog.appendChild(newEntry); | |
| combatLog.scrollTop = combatLog.scrollHeight; | |
| // Remove animation class after animation completes | |
| setTimeout(() => { | |
| battleAnimation.classList.remove('sword-animation'); | |
| // Random chance for enemy to take damage | |
| if(Math.random() > 0.3) { | |
| const hitEntry = document.createElement('div'); | |
| hitEntry.classList.add('text-green-400'); | |
| hitEntry.textContent = 'You hit the looter chief for 12 damage!'; | |
| combatLog.appendChild(hitEntry); | |
| // Enemy counterattack | |
| setTimeout(() => { | |
| const counterEntry = document.createElement('div'); | |
| if(Math.random() > 0.5) { | |
| counterEntry.classList.add('text-red-400'); | |
| counterEntry.textContent = 'The looter chief hits you for 8 damage!'; | |
| } else { | |
| counterEntry.classList.add('text-blue-400'); | |
| counterEntry.textContent = 'You block the looter chief\'s attack!'; | |
| } | |
| combatLog.appendChild(counterEntry); | |
| combatLog.scrollTop = combatLog.scrollHeight; | |
| }, 500); | |
| } else { | |
| const missEntry = document.createElement('div'); | |
| missEntry.classList.add('text-gray-400'); | |
| missEntry.textContent = 'Your attack misses!'; | |
| combatLog.appendChild(missEntry); | |
| combatLog.scrollTop = combatLog.scrollHeight; | |
| } | |
| }, 500); | |
| }); | |
| retreatBtn.addEventListener('click', () => { | |
| const combatLog = document.querySelector('.combat-log'); | |
| const retreatEntry = document.createElement('div'); | |
| retreatEntry.classList.add('text-yellow-400'); | |
| retreatEntry.textContent = 'You retreat from the battle!'; | |
| combatLog.appendChild(retreatEntry); | |
| combatLog.scrollTop = combatLog.scrollHeight; | |
| setTimeout(() => { | |
| combatModal.classList.add('hidden'); | |
| }, 1000); | |
| }); | |
| // Map location click handlers | |
| document.querySelectorAll('.map-location').forEach(location => { | |
| location.addEventListener('click', () => { | |
| const locationName = location.getAttribute('title'); | |
| alert(`You set course for ${locationName}!`); | |
| // Update current location in UI | |
| document.querySelector('.map-container .text-amber-300').textContent = locationName; | |
| }); | |
| }); | |
| </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-blade" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |