109 lines
3.9 KiB
HTML
109 lines
3.9 KiB
HTML
{{ block "index" . }}
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<script src="https://unpkg.com/htmx.org/dist/htmx.min.js"></script>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<title>Boanerbook</title>
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
fontFamily: {
|
|
mono: ['IBM Plex Mono', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', 'monospace'],
|
|
},
|
|
colors: {
|
|
hacker: {
|
|
green: '#00ff00',
|
|
darkgreen: '#003300',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;700&display=swap" rel="stylesheet">
|
|
</head>
|
|
<body class="bg-black text-hacker-green font-mono min-h-screen py-12 px-4 sm:px-6 lg:px-8">
|
|
<div class="max-w-3xl mx-auto">
|
|
<h1 class="text-3xl font-bold text-center mb-8">
|
|
<span class="bg-hacker-green text-black px-2">Boanerbook</span>
|
|
</h1>
|
|
{{ template "form" .Form }}
|
|
<hr class="my-8 border-t border-hacker-darkgreen" />
|
|
{{ template "display" .Data }}
|
|
</div>
|
|
</body>
|
|
</html>
|
|
{{ end }}
|
|
|
|
{{ block "form" . }}
|
|
<form hx-swap="outerHTML" hx-post="/guestbook" class="border border-hacker-green p-6 mb-4">
|
|
<div class="mb-4">
|
|
<label class="block mb-2" for="name">
|
|
Name:
|
|
</label>
|
|
<input
|
|
class="w-full py-2 px-3 bg-black border border-hacker-green focus:outline-none focus:ring-2 focus:ring-hacker-green"
|
|
{{ if .Values.name }} value="{{ .Values.name }}" {{ end }}
|
|
type="text" name="name" id="name" placeholder="Your handle" />
|
|
</div>
|
|
<div class="mb-4">
|
|
<label class="block mb-2" for="message">
|
|
Message:
|
|
</label>
|
|
<input
|
|
class="w-full py-2 px-3 bg-black border border-hacker-green focus:outline-none focus:ring-2 focus:ring-hacker-green"
|
|
{{ if .Values.message }} value="{{ .Values.message }}" {{ end }}
|
|
type="text" name="message" id="message" placeholder="Your bonerfied ramblings" />
|
|
{{ if .Errors.message }}
|
|
<p class="text-red-500 text-xs mt-2">{{ .Errors.message }}</p>
|
|
{{ end }}
|
|
</div>
|
|
<div class="flex items-center justify-between">
|
|
<button class="bg-hacker-green text-black font-bold py-2 px-4 focus:outline-none focus:shadow-outline hover:bg-hacker-darkgreen hover:text-hacker-green" type="submit">
|
|
> Sign the great bonerbook
|
|
</button>
|
|
</div>
|
|
</form>
|
|
{{ end }}
|
|
|
|
{{ block "display" . }}
|
|
<div id="guestbook" class="space-y-4">
|
|
{{ range .Entries }}
|
|
{{ template "entry" . }}
|
|
{{ end }}
|
|
</div>
|
|
{{ end }}
|
|
|
|
{{ block "entry" . }}
|
|
<div class="entry border border-hacker-green p-4" id="entry-{{ .Id }}">
|
|
<div class="flex justify-between items-center mb-2">
|
|
<span class="font-bold text-lg">> {{ .Name }}</span>
|
|
<button
|
|
class="text-hacker-green hover:text-hacker-darkgreen"
|
|
hx-indicator="#entry-{{ .Id }}-indicator"
|
|
hx-target="#entry-{{ .Id }}"
|
|
hx-swap="outerHTML swap:500ms"
|
|
hx-delete="/guestbook/{{ .Id }}"
|
|
>
|
|
[DELETE]
|
|
</button>
|
|
</div>
|
|
<p class="text-hacker-green">> {{ .Message }}</p>
|
|
<div id="entry-{{ .Id }}-indicator" class="htmx-indicator flex justify-center mt-2">
|
|
<svg class="animate-spin h-5 w-5 text-hacker-green" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
|
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
|
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
{{ end }}
|
|
|
|
{{ block "oob-entry" . }}
|
|
<div id="guestbook" hx-swap-oob="afterbegin">
|
|
{{ template "entry" . }}
|
|
</div>
|
|
{{ end }} |