Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Civilizations | AOE2 BattleDex ⚔️</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| </head> | |
| <body class="bg-gray-100 font-poppins"> | |
| <!-- Navigation --> | |
| <nav class="bg-amber-900 text-white shadow-lg"> | |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i data-feather="shield" class="text-amber-300"></i> | |
| <a href="index.html" class="text-xl font-bold tracking-wider">BATTLEDEX ⚔️</a> | |
| </div> | |
| <div class="hidden md:flex space-x-6"> | |
| <a href="index.html" class="hover:text-amber-300 transition">Home</a> | |
| <a href="units.html" class="hover:text-amber-300 transition">Units</a> | |
| <a href="civilizations.html" class="text-amber-300 font-bold">Civilizations</a> | |
| <a href="counters.html" class="hover:text-amber-300 transition">Counters</a> | |
| <a href="unique.html" class="hover:text-amber-300 transition">Unique Units</a> | |
| </div> | |
| <div class="md:hidden"> | |
| <i data-feather="menu"></i> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Civilization Database --> | |
| <section class="py-12 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-8 text-amber-900">Civilization Database</h2> | |
| <!-- Search and Filters --> | |
| <div class="mb-8 bg-amber-50 p-6 rounded-lg"> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <div class="md:col-span-2"> | |
| <label class="block text-sm font-medium text-amber-800 mb-1">Search Civilizations</label> | |
| <input type="text" placeholder="Type civilization name..." class="w-full p-3 border border-amber-200 rounded-lg focus:ring-2 focus:ring-amber-500"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-amber-800 mb-1">Specialty</label> | |
| <select class="w-full p-3 border border-amber-200 rounded-lg focus:ring-2 focus:ring-amber-500"> | |
| <option>All Specialties</option> | |
| <option>Archer</option> | |
| <option>Cavalry</option> | |
| <option>Infantry</option> | |
| <option>Siege</option> | |
| <option>Naval</option> | |
| <option>Defensive</option> | |
| <option>Monk</option> | |
| <option>Economic</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Civilization Grid --> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Britons --> | |
| <div class="bg-white rounded-xl overflow-hidden shadow-md border border-amber-100 hover:shadow-lg transition"> | |
| <div class="h-48 bg-cover bg-center" style="background-image: url('https://ageofempires.fandom.com/wiki/Britons?file=Britons-aoe2de.webp')"></div> | |
| <div class="p-6"> | |
| <span class="inline-block bg-amber-100 text-amber-900 text-xs px-2 py-1 rounded-full mb-2">Archer Civilization</span> | |
| <h3 class="text-xl font-bold mb-2">Britons</h3> | |
| <p class="text-gray-600 text-sm mb-4">Town Centers cost -50% wood starting in Castle Age. Foot archers (except Skirmishers) have +1/+2 range in Castle/Imperial Age.</p> | |
| <div class="flex justify-between text-xs"> | |
| <span class="bg-green-100 text-green-800 px-2 py-1 rounded">Strong vs: Infantry</span> | |
| <span class="bg-red-100 text-red-800 px-2 py-1 rounded">Weak vs: Cavalry</span> | |
| </div> | |
| <a href="#" class="mt-4 inline-flex items-center text-amber-700 hover:text-amber-900 text-sm font-medium"> | |
| View Details | |
| <i data-feather="arrow-right" class="ml-1 w-4 h-4"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Franks --> | |
| <div class="bg-white rounded-xl overflow-hidden shadow-md border border-amber-100 hover:shadow-lg transition"> | |
| <div class="h-48 bg-cover bg-center" style="background-image: url('https://ageofempires.fandom.com/wiki/Franks?file=Franks-aoe2de.webp')"></div> | |
| <div class="p-6"> | |
| <span class="inline-block bg-amber-100 text-amber-900 text-xs px-2 py-1 rounded-full mb-2">Cavalry Civilization</span> | |
| <h3 class="text-xl font-bold mb-2">Franks</h3> | |
| <p class="text-gray-600 text-sm mb-4">Castles cost -25%. Cavalry units have +20% HP. Foragers work +25% faster.</p> | |
| <div class="flex justify-between text-xs"> | |
| <span class="bg-green-100 text-green-800 px-2 py-1 rounded">Strong vs: Archers</span> | |
| <span class="bg-red-100 text-red-800 px-2 py-1 rounded">Weak vs: Pikemen</span> | |
| </div> | |
| <a href="#" class="mt-4 inline-flex items-center text-amber-700 hover:text-amber-900 text-sm font-medium"> | |
| View Details | |
| <i data-feather="arrow-right" class="ml-1 w-4 h-4"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Mongols --> | |
| <div class="bg-white rounded-xl overflow-hidden shadow-md border border-amber-100 hover:shadow-lg transition"> | |
| <div class="h-48 bg-cover bg-center" style="background-image: url('https://ageofempires.fandom.com/wiki/Mongols?file=Mongols-aoe2de.webp')"></div> | |
| <div class="p-6"> | |
| <span class="inline-block bg-amber-100 text-amber-900 text-xs px-2 py-1 rounded-full mb-2">Cavalry Archer Civilization</span> | |
| <h3 class="text-xl font-bold mb-2">Mongols</h3> | |
| <p class="text-gray-600 text-sm mb-4">Cavalry Archers fire +25% faster. Hunters work +50% faster. Light Cavalry and Hussars +30% HP.</p> | |
| <div class="flex justify-between text-xs"> | |
| <span class="bg-green-100 text-green-800 px-2 py-1 rounded">Strong vs: Siege</span> | |
| <span class="bg-red-100 text-red-800 px-2 py-1 rounded">Weak vs: Monks</span> | |
| </div> | |
| <a href="#" class="mt-4 inline-flex items-center text-amber-700 hover:text-amber-900 text-sm font-medium"> | |
| View Details | |
| <i data-feather="arrow-right" class="ml-1 w-4 h-4"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-10 text-center"> | |
| <button class="bg-amber-600 hover:bg-amber-700 text-white px-6 py-3 rounded-lg font-bold transition shadow-lg"> | |
| Load More Civilizations | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <script> | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> |