MaCH repo

07_roundest_pokemon_htmx/results.mustache.html

@@ -0,0 +1,28 @@
+{{< home}}
+ {{$body}}
+   <div class='container mx-auto px-4 py-8 text-white'>
+     <div class='grid gap-4'>
+       {{#results}}
+         <div class='flex items-center gap-6 p-6 bg-gray-800/40 rounded-lg shadow hover:shadow-md transition-shadow'>
+           <div class='text-2xl font-bold text-gray-400 w-8'>
+             {{rank}}
+           </div>
+           <img src='{{sprite}}' alt='{{name}}' loading='lazy' class='w-20 h-20'>
+           <div class='flex-grow'>
+             <div class='text-gray-400 text-sm'>#{{id}}</div>
+             <h2 class='text-xl font-semibold capitalize'>{{name}}</h2>
+           </div>
+           <div class='text-right'>
+             <div class='text-2xl font-bold text-blue-400'>
+               {{ratio_of_wins_to_loses}}
+             </div>
+             <div class='text-sm text-gray-400'>
+               {{wins}}W - {{loses}}L
+             </div>
+           </div>
+         </div>
+       {{/results}}
+     </div>
+   </div>
+ {{/body}}
+{{/home}}