Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Unique Units | 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="hover:text-amber-300 transition">Civilizations</a> | |
| <a href="counters.html" class="hover:text-amber-300 transition">Counters</a> | |
| <a href="unique.html" class="text-amber-300 font-bold">Unique Units</a> | |
| </div> | |
| <div class="md:hidden"> | |
| <i data-feather="menu"></i> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Unique Units --> | |
| <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">Unique Units</h2> | |
| <!-- Filter --> | |
| <div class="mb-8 bg-amber-50 p-6 rounded-lg"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-amber-800 mb-1">Filter by Civilization</label> | |
| <select class="w-full p-3 border border-amber-200 rounded-lg focus:ring-2 focus:ring-amber-500"> | |
| <option>All Civilizations</option> | |
| <option>Britons (Longbowman)</option> | |
| <option>Franks (Throwing Axeman)</option> | |
| <option>Mongols (Mangudai)</option> | |
| <option>Teutons (Teutonic Knight)</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-amber-800 mb-1">Filter by Type</label> | |
| <select class="w-full p-3 border border-amber-200 rounded-lg focus:ring-2 focus:ring-amber-500"> | |
| <option>All Types</option> | |
| <option>Infantry</option> | |
| <option>Archer</option> | |
| <option>Cavalry</option> | |
| <option>Siege</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Unique Units Grid --> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Longbowman --> | |
| <div class="bg-white rounded-xl overflow-hidden shadow-lg border border-amber-100"> | |
| <div class="h-48 bg-cover bg-center" style="background-image: url('https://ageofempires.fandom.com/wiki/Longbowman?file=Longbowman-aoe2de.webp')"></div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <span class="inline-block bg-red-100 text-red-800 text-xs px-2 py-1 rounded-full mb-1">Archer</span> | |
| <h3 class="text-xl font-bold">Longbowman</h3> | |
| <p class="text-sm text-gray-600">Britons' Unique Unit</p> | |
| </div> | |
| <img src="https://ageofempires.fandom.com/wiki/Britons?file=Britons-aoe2de.webp" class="w-12 h-12 rounded-full border border-amber-200"> | |
| </div> | |
| <div class="mt-4"> | |
| <p class="text-sm mb-2">Extremely long-range foot archer. Strong against infantry and buildings.</p> | |
| <div class="flex flex-wrap gap-1"> | |
| <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">Range: 6-12</span> | |
| <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Attack: 6-11</span> | |
| <span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded">Training: Castle</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mangudai --> | |
| <div class="bg-white rounded-xl overflow-hidden shadow-lg border border-amber-100"> | |
| <div class="h-48 bg-cover bg-center" style="background-image: url('https://ageofempires.fandom.com/wiki/Mangudai?file=Mangudai-aoe2de.webp')"></div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <span class="inline-block bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full mb-1">Cavalry Archer</span> | |
| <h3 class="text-xl font-bold">Mangudai</h3> | |
| <p class="text-sm text-gray-600">Mongols' Unique Unit</p> | |
| </div> | |
| <img src="https://ageofempires.fandom.com/wiki/Mongols?file=Mongols-aoe2de.webp" class="w-12 h-12 rounded-full border border-amber-200"> | |
| </div> | |
| <div class="mt-4"> | |
| <p class="text-sm mb-2">Powerful mounted archer that fires faster while moving. Strong against siege weapons.</p> | |
| <div class="flex flex-wrap gap-1"> | |
| <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">Range: 4-6</span> | |
| <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Attack: 6-11</span> | |
| <span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded">Training: Castle</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Teutonic Knight --> | |
| <div class="bg-white rounded-xl overflow-hidden shadow-lg border border-amber-100"> | |
| <div class="h-48 bg-cover bg-center" style="background-image: url('https://ageofempires.fandom.com/wiki/Teutonic_Knight?file=Teutonic_Knight-aoe2de.webp')"></div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <span class="inline-block bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full mb-1">Infantry</span> | |
| <h3 class="text-xl font-bold">Teutonic Knight</h3> | |
| <p class="text-sm text-gray-600">Teutons' Unique Unit</p> | |
| </div> | |
| <img src="https://ageofempires.fandom.com/wiki/Teutons?file=Teutons-aoe2de.webp" class="w-12 h-12 rounded-full border border-amber-200"> | |
| </div> | |
| <div class="mt-4"> | |
| <p class="text-sm mb-2">Slow but extremely powerful infantry unit with high armor. Strong against other infantry.</p> | |
| <div class="flex flex-wrap gap-1"> | |
| <span class="bg-red-100 text-red-800 text-xs px-2 py-1 rounded">HP: 80-100</span> | |
| <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Attack: 12-21</span> | |
| <span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded">Training: Castle</span> | |
| </div> | |
| </div> | |
| </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 Unique Units | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <script> | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> |