MaCH repo

2025-07-24 12:46:01 -05:00
commit 6d9d6c2315
75 changed files with 7530 additions and 0 deletions
--- a/07_roundest_pokemon_htmx/home.mustache.html
+++ b/07_roundest_pokemon_htmx/home.mustache.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+ <head>
+   <title>Roundest (MaCH Version)</title>
+   {{> htmx_script}}
+   {{> tailwind_script}}
+ </head>
+ <body hx-boost='true'>
+   <div class='bg-gray-950 text-white flex flex-col justify-between font-geist min-h-screen border-t-2 border-red-300'>
+     <nav class='flex flex-row justify-between items-center py-4 px-8'>
+       <div class='flex items-baseline'>
+         <a href='{{url:home}}' class='font-bold text-3xl'>
+           Round<span class='text-red-300'>est</span>
+         </a>
+         <p class='text-gray-400 font-extralight pl-2 text-2xl'>
+           (MaCH Version)
+         </p>
+       </div>
+       <div class='flex flex-row items-center gap-8'>
+         <a href='{{url:results}}' class='hover:underline text-lg'>Results</a>
+       </div>
+     </nav>
+     <main>
+       {{$body}}
+         <div class='container mx-auto px-4'>
+           <h1 class='text-3xl font-bold text-center mb-8'>Vote for which is roundest</h1>
+           <div class='flex justify-center gap-16 items-center min-h-[80vh]'>
+             {{#challengers}}
+               <form action='{{url:home}}' method='post'>
+                 <div class='flex flex-col items-center gap-4'>
+                   <img src='{{sprite}}' alt='{{name}}' class='w-64 h-64 sprite'>
+                   <div class='text-center'>
+                     <span class='text-gray-500 text-lg'>#{{id}}</span>
+                     <h2 class='text-2xl font-bold capitalize'>{{name}}</h2>
+                     <input type='hidden' name='winner' value='{{id}}'>
+                     <input type='hidden' name='loser' value='{{opponent_id}}'>
+                     <button class='mt-4 px-8 py-3 bg-blue-500 text-white rounded-lg text-lg font-semibold hover:bg-blue-600 transition-colors'>
+                       Vote
+                     </button>
+                   </div>
+                 </div>
+               </form>
+             {{/challengers}}
+           </div>
+         </div>
+       {{/body}}
+     </main>
+     <footer class='font-light text-center py-3 text-gray-500'>
+       <a href='https://code.nightshadecoder.dev/nightshade/mach_examples' target='_blank'>GitHub</a>
+     </footer>
+   </div>
+ </body>
+</html>