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,34 +1,32 @@
@(body: Content)
<!doctype html>
<html class="no-js" lang="">
<html class="no-js h-full" lang="">
<head>
<meta charset="utf-8" />
<title>clubmanager</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<head>
<meta charset="utf-8">
<title>clubmanager</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="og:title" content="" />
<meta property="og:type" content="" />
<meta property="og:url" content="" />
<meta property="og:image" content="" />
<meta property="og:title" content="">
<meta property="og:type" content="">
<meta property="og:url" content="">
<meta property="og:image" content="">
<!-- <link rel="icon" href="/favicon.ico" sizes="any">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- <link rel="icon" href="/icon.svg" type="image/svg+xml"> -->
<!-- <link rel="icon" href="/favicon.ico" sizes="any">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- <link rel="icon" href="/icon.svg" type="image/svg+xml"> -->
<link rel="stylesheet" href="/main.css" />
<link rel="stylesheet" href="/main.css" />
<script src="https://unpkg.com/htmx.org@@1.9.5"></script>
<script src="https://unpkg.com/htmx.org/dist/ext/sse.js"></script>
<script src="https://unpkg.com/htmx.org@@1.9.5"></script>
<script src="https://unpkg.com/htmx.org/dist/ext/sse.js"></script>
<!-- <link rel="manifest" href="site.webmanifest"> -->
<meta name="theme-color" content="#fafafa">
</head>
<body>
@:body()
</body>
<!-- <link rel="manifest" href="site.webmanifest"> -->
<meta name="theme-color" content="#fafafa" />
</head>
<body class="h-full">
@:body()
</body>
</html>

View file

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