54 lines
2.1 KiB
HTML
54 lines
2.1 KiB
HTML
<!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>
|