bdnugget/boner-htmx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: bdnugget:fbc95e960a315f49692f9b743e423568f384df7a
Branches Tags
bdnugget:master
..
compare: bdnugget:c68207724ca7c220a663cc2ba8c5988f0df03c64
Branches Tags
bdnugget:master

2 Commits
fbc95e960a ... c68207724c

Author SHA1 Message Date
bdnugget
c68207724c v0 generated some nice Tailwind LOL 2024-09-18 21:48:07 +02:00
bdnugget
a72b8d7538 trash to separate svg 2024-09-18 21:41:18 +02:00
2 changed files with 76 additions and 33 deletions
Show Stats Expand all files Collapse all files

4
images/trash.svg Normal file
View File

@ -0,0 +1,4 @@
<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>
Side by Side

After

Width:  |  Height:  |  Size: 336 B

89
views/index.html
View File

@ -5,35 +5,73 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <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://unpkg.com/htmx.org/dist/htmx.min.js"></script>
<title></title> <script src="https://cdn.tailwindcss.com"></script>
<link href="/css/index.css" rel="stylesheet"> <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">
</head> </head>
<body> <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 }} {{ template "form" .Form }}
<hr /> <hr class="my-8 border-t border-hacker-darkgreen" />
{{ template "display" .Data }} {{ template "display" .Data }}
</div>
</body> </body>
</html> </html>
{{ end }} {{ end }}
{{ block "form" . }} {{ block "form" . }}
<form hx-swap="outerHTML" hx-post="/guestbook"> <form hx-swap="outerHTML" hx-post="/guestbook" class="border border-hacker-green p-6 mb-4">
Name: <input <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 }} {{ if .Values.name }} value="{{ .Values.name }}" {{ end }}
type="text" name="name" /> type="text" name="name" id="name" placeholder="Your handle" />
Message: <input </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 }} {{ if .Values.message }} value="{{ .Values.message }}" {{ end }}
type="text" name="message" /> type="text" name="message" id="message" placeholder="Your bonerfied ramblings" />
{{ if .Errors.message }} {{ if .Errors.message }}
<span style="color: red">{{ .Errors.message }}</span> <p class="text-red-500 text-xs mt-2">{{ .Errors.message }}</p>
{{ end }} {{ end }}
<button>Sign guestbook</button> </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> </form>
{{ end }} {{ end }}
{{ block "display" . }} {{ block "display" . }}
<div id="guestbook" style="display: flex; flex-direction: column"> <div id="guestbook" class="space-y-4">
{{ range .Entries }} {{ range .Entries }}
{{ template "entry" . }} {{ template "entry" . }}
{{ end }} {{ end }}
@ -41,23 +79,25 @@
{{ end }} {{ end }}
{{ block "entry" . }} {{ block "entry" . }}
<div class="entry" id="entry-{{ .Id }}" style="display: flex;"> <div class="entry border border-hacker-green p-4" id="entry-{{ .Id }}">
<div style="width: 1rem; cursor: pointer;" <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-indicator="#entry-{{ .Id }}-indicator"
hx-target="#entry-{{ .Id }}" hx-target="#entry-{{ .Id }}"
hx-swap="outerHTML swap:500ms" hx-swap="outerHTML swap:500ms"
hx-delete="/guestbook/{{ .Id }}" hx-delete="/guestbook/{{ .Id }}"
> >
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> [DELETE]
<path fill="none" d="M0 0h24v24H0z"/> </button>
<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> </div>
Name: <span>{{ .Name }}</span> <p class="text-hacker-green">> {{ .Message }}</p>
Message: <span>{{ .Message }}</span> <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">
<div id="entry-{{ .Id }}-indicator" class="htmx-indicator"> <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<img src="/images/bars.svg" alt="loading" style="width: 1rem;" /> <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>
</div> </div>
{{ end }} {{ end }}
@ -67,4 +107,3 @@
{{ template "entry" . }} {{ template "entry" . }}
</div> </div>
{{ end }} {{ end }}