Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Counters | 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> | |
| <style> | |
| .counter-badge { | |
| font-size: 0.75rem; | |
| padding: 0.25rem 0.5rem; | |
| border-radius: 9999px; | |
| } | |
| .strong-counter { | |
| background-color: #dcfce7; | |
| color: #166534; | |
| } | |
| .weak-counter { | |
| background-color: #fee2e2; | |
| color: #991b1b; | |
| } | |
| .neutral-counter { | |
| background-color: #e0e7ff; | |
| color: #3730a3; | |
| } | |
| </style> | |
| </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="text-amber-300 font-bold">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> | |
| <!-- Counter Guide --> | |
| <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">Unit Counters Guide</h2> | |
| <!-- Unit Selector --> | |
| <div class="mb-8 bg-amber-50 p-6 rounded-lg"> | |
| <h3 class="text-xl font-bold mb-4 text-amber-800">Select a Unit to See Counters</h3> | |
| <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">Unit Type</label> | |
| <select class="w-full p-3 border border-amber-200 rounded-lg focus:ring-2 focus:ring-amber-500"> | |
| <option>Select unit type</option> | |
| <option>Infantry</option> | |
| <option>Archer</option> | |
| <option>Cavalry</option> | |
| <option>Siege</option> | |
| <option>Navy</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-amber-800 mb-1">Specific Unit</label> | |
| <select class="w-full p-3 border border-amber-200 rounded-lg focus:ring-2 focus:ring-amber-500"> | |
| <option>Select specific unit</option> | |
| <option>Knight</option> | |
| <option>Crossbowman</option> | |
| <option>Pikeman</option> | |
| <option>Mangonel</option> | |
| <option>Longbowman</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Counter Results --> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden border border-amber-100"> | |
| <div class="grid grid-cols-1 md:grid-cols-3 divide-y md:divide-y-0 md:divide-x divide-amber-100"> | |
| <!-- Strong Against --> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-4 text-green-700 flex items-center"> | |
| <i data-feather="thumbs-up" class="mr-2"></i> | |
| Strong Against | |
| </h3> | |
| <div class="space-y-3"> | |
| <div class="flex items-center space-x-3"> | |
| <img src="https://ageofempires.fandom.com/wiki/Archer?file=Archer-aoe2de.webp" class="w-12 h-12 rounded-full border border-green-200"> | |
| <div> | |
| <h4 class="font-medium">Archers</h4> | |
| <div class="flex space-x-1 mt-1"> | |
| <span class="counter-badge strong-counter">+ Attack Bonus</span> | |
| <span class="counter-badge strong-counter">+ Range</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-3"> | |
| <img src="https://ageofempires.fandom.com/wiki/Skirmisher?file=Skirmisher-aoe2de.webp" class="w-12 h-12 rounded-full border border-green-200"> | |
| <div> | |
| <h4 class="font-medium">Skirmishers</h4> | |
| <div class="flex space-x-1 mt-1"> | |
| <span class="counter-badge strong-counter">Pierce Armor</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Weak Against --> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-4 text-red-700 flex items-center"> | |
| <i data-feather="thumbs-down" class="mr-2"></i> | |
| Weak Against | |
| </h3> | |
| <div class="space-y-3"> | |
| <div class="flex items-center space-x-3"> | |
| <img src="https://ageofempires.fandom.com/wiki/Pikeman?file=Pikeman-aoe2de.webp" class="w-12 h-12 rounded-full border border-red-200"> | |
| <div> | |
| <h4 class="font-medium">Pikemen</h4> | |
| <div class="flex space-x-1 mt-1"> | |
| <span class="counter-badge weak-counter">Bonus Damage</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-3"> | |
| <img src="https://ageofempires.fandom.com/wiki/Monk?file=Monk-aoe2de.webp" class="w-12 h-12 rounded-full border border-red-200"> | |
| <div> | |
| <h4 class="font-medium">Monks</h4> | |
| <div class="flex space-x-1 mt-1"> | |
| <span class="counter-badge weak-counter">Conversion</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Neutral Against --> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-4 text-blue-700 flex items-center"> | |
| <i data-feather="slash" class="mr-2"></i> | |
| Neutral Matchups | |
| </h3> | |
| <div class="space-y-3"> | |
| <div class="flex items-center space-x-3"> | |
| <img src="https://ageofempires.fandom.com/wiki/Militia?file=Militia-aoe2de.webp" class="w-12 h-12 rounded-full border border-blue-200"> | |
| <div> | |
| <h4 class="font-medium">Militia</h4> | |
| <div class="flex space-x-1 mt-1"> | |
| <span class="counter-badge neutral-counter">Equal Footing</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-3"> | |
| <img src="https://ageofempires.fandom.com/wiki/Scout_Cavalry?file=Scout_Cavalry-aoe2de.webp" class="w-12 h-12 rounded-full border border-blue-200"> | |
| <div> | |
| <h4 class="font-medium">Scouts</h4> | |
| <div class="flex space-x-1 mt-1"> | |
| <span class="counter-badge neutral-counter">Speed</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <script> | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> |