using some tailwind

This commit is contained in:
Zynh0722 2023-11-05 02:26:14 -08:00
parent d20ad1c040
commit 0e32e06076
3 changed files with 48 additions and 48 deletions

View file

@ -1,18 +1,17 @@
@(body: Content) @(body: Content)
<!doctype html> <!doctype html>
<html class="no-js" lang=""> <html class="no-js h-full" lang="">
<head>
<head> <meta charset="utf-8" />
<meta charset="utf-8">
<title>clubmanager</title> <title>clubmanager</title>
<meta name="description" content=""> <meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta property="og:title" content=""> <meta property="og:title" content="" />
<meta property="og:type" content=""> <meta property="og:type" content="" />
<meta property="og:url" content=""> <meta property="og:url" content="" />
<meta property="og:image" content=""> <meta property="og:image" content="" />
<!-- <link rel="icon" href="/favicon.ico" sizes="any"> <!-- <link rel="icon" href="/favicon.ico" sizes="any">
<link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link rel="apple-touch-icon" href="/apple-touch-icon.png">
@ -24,11 +23,10 @@
<script src="https://unpkg.com/htmx.org/dist/ext/sse.js"></script> <script src="https://unpkg.com/htmx.org/dist/ext/sse.js"></script>
<!-- <link rel="manifest" href="site.webmanifest"> --> <!-- <link rel="manifest" href="site.webmanifest"> -->
<meta name="theme-color" content="#fafafa"> <meta name="theme-color" content="#fafafa" />
</head> </head>
<body> <body class="h-full">
@:body() @:body()
</body> </body>
</html> </html>

View file

@ -4,30 +4,32 @@
@:base_html({ @:base_html({
<form hx-swap="outerHTML" hx-post="/api/drinks"> <form hx-swap="outerHTML" hx-post="/api/drinks" class="h-full flex items-center justify-center gap-28">
<fieldset> <fieldset class="flex flex-col text-4xl text-center overflow-hidden border border-black rounded-2xl">
<input hidden required type="radio" id="two" name="price" value="2" /> <input hidden required type="radio" id="two" name="price" value="2" class="peer/two" />
<label for="two">$2</label> <label class="p-4 hover:bg-blue-300 peer-checked/two:bg-blue-400" for="two">$2</label>
<input hidden type="radio" id="three" name="price" value="3" /> <input hidden type="radio" id="three" name="price" value="3" class="peer/three" />
<label for="three">$3</label> <label class="p-4 hover:bg-blue-300 peer-checked/three:bg-blue-400" for="three">$3</label>
<input hidden type="radio" id="five" name="price" value="5" /> <input hidden type="radio" id="five" name="price" value="5" class="peer/five" />
<label for="five">$5</label> <label class="p-4 hover:bg-blue-300 peer-checked/five:bg-blue-400" for="five">$5</label>
<input hidden type="radio" id="eight" name="price" value="8" /> <input hidden type="radio" id="eight" name="price" value="8" class="peer/eight" />
<label for="eight">$8</label> <label class="p-4 hover:bg-blue-300 peer-checked/eight:bg-blue-400" for="eight">$8</label>
<input hidden type="radio" id="fifteen" name="price" value="15" /> <input hidden type="radio" id="fifteen" name="price" value="15" class="peer/fifteen" />
<label for="fifteen">$15</label> <label class="p-4 hover:bg-blue-300 peer-checked/fifteen:bg-blue-400" for="fifteen">$15</label>
</fieldset> </fieldset>
<div class="flex flex-col items-center gap-24">
<div>
<div> <div>
<label for="quantity">Quantity: </label> <label for="quantity">Quantity: </label>
<input type="number" id="quantity" name="quantity" step="1" value="1" /> <input type="number" id="quantity" name="quantity" step="1" value="1" />
</div>
<input type="hidden" id="shift_id" name="shift_id" value="@shift_id" /> <input type="hidden" id="shift_id" name="shift_id" value="@shift_id" />
<div> </div>
<button type="submit"> <button type="submit">
submit submit