Compare commits
No commits in common. "c68207724ca7c220a663cc2ba8c5988f0df03c64" and "fbc95e960a315f49692f9b743e423568f384df7a" have entirely different histories.
c68207724c
...
fbc95e960a
@ -1,4 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<path fill="none" d="M0 0h24v24H0z"/>
|
||||
<path d="M4 2h16a1 1 0 011 1v1a1 1 0 01-1 1H4a1 1 0 01-1-1V3a1 1 0 011-1zM3 6h18v16a1 1 0 01-1 1H4a1 1 0 01-1-1V6zm3 3v9a1 1 0 002 0v-9a1 1 0 00-2 0zm5 0v9a1 1 0 002 0v-9a1 1 0 00-2 0zm5 0v9a1 1 0 002 0v-9a1 1 0 00-2 0z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 336 B |
103
views/index.html
103
views/index.html
@ -5,73 +5,35 @@
|
||||
<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>Hacker Guestbook</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">
|
||||
<title></title>
|
||||
<link href="/css/index.css" 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>
|
||||
<body>
|
||||
{{ template "form" .Form }}
|
||||
<hr class="my-8 border-t border-hacker-darkgreen" />
|
||||
<hr />
|
||||
{{ 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" />
|
||||
<form hx-swap="outerHTML" hx-post="/guestbook">
|
||||
Name: <input
|
||||
{{ if .Values.name }} value="{{ .Values.name }}" {{ end }}
|
||||
type="text" name="name" />
|
||||
Message: <input
|
||||
{{ if .Values.message }} value="{{ .Values.message }}" {{ end }}
|
||||
type="text" name="message" />
|
||||
|
||||
{{ if .Errors.message }}
|
||||
<p class="text-red-500 text-xs mt-2">{{ .Errors.message }}</p>
|
||||
<span style="color: red">{{ .Errors.message }}</span>
|
||||
{{ 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>
|
||||
<button>Sign guestbook</button>
|
||||
</form>
|
||||
{{ end }}
|
||||
|
||||
{{ block "display" . }}
|
||||
<div id="guestbook" class="space-y-4">
|
||||
<div id="guestbook" style="display: flex; flex-direction: column">
|
||||
{{ range .Entries }}
|
||||
{{ template "entry" . }}
|
||||
{{ end }}
|
||||
@ -79,26 +41,24 @@
|
||||
{{ 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>
|
||||
<div class="entry" id="entry-{{ .Id }}" style="display: flex;">
|
||||
<div style="width: 1rem; cursor: pointer;"
|
||||
hx-indicator="#entry-{{ .Id }}-indicator"
|
||||
hx-target="#entry-{{ .Id }}"
|
||||
hx-swap="outerHTML swap:500ms"
|
||||
hx-delete="/guestbook/{{ .Id }}"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<path fill="none" d="M0 0h24v24H0z"/>
|
||||
<path d="M4 2h16a1 1 0 011 1v1a1 1 0 01-1 1H4a1 1 0 01-1-1V3a1 1 0 011-1zM3 6h18v16a1 1 0 01-1 1H4a1 1 0 01-1-1V6zm3 3v9a1 1 0 002 0v-9a1 1 0 00-2 0zm5 0v9a1 1 0 002 0v-9a1 1 0 00-2 0zm5 0v9a1 1 0 002 0v-9a1 1 0 00-2 0z"/>
|
||||
</svg>
|
||||
</div>
|
||||
Name: <span>{{ .Name }}</span>
|
||||
Message: <span>{{ .Message }}</span>
|
||||
|
||||
<div id="entry-{{ .Id }}-indicator" class="htmx-indicator">
|
||||
<img src="/images/bars.svg" alt="loading" style="width: 1rem;" />
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
@ -107,3 +67,4 @@
|
||||
{{ template "entry" . }}
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user