From c68207724ca7c220a663cc2ba8c5988f0df03c64 Mon Sep 17 00:00:00 2001
From: bdnugget <1001337108312v3@gmail.com>
Date: Wed, 18 Sep 2024 21:48:07 +0200
Subject: [PATCH] v0 generated some nice Tailwind LOL

---
 views/index.html | 102 +++++++++++++++++++++++++++++++++--------------
 1 file changed, 72 insertions(+), 30 deletions(-)
diff --git a/views/index.html b/views/index.html
index d5b844c..9268b5e 100644
--- a/views/index.html
+++ b/views/index.html
@@ -5,35 +5,73 @@
     <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>
-    <title></title>
-    <link href="/css/index.css" rel="stylesheet">
+    <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">
   </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 }}
-      <hr />
+      <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">
-  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" />
-
+<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 }}
-      <span style="color: red">{{ .Errors.message }}</span>
+      <p class="text-red-500 text-xs mt-2">{{ .Errors.message }}</p>
     {{ 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>
 {{ end }}
 
 {{ block "display" . }}
-<div id="guestbook" style="display: flex; flex-direction: column">
+<div id="guestbook" class="space-y-4">
   {{ range .Entries }}
     {{ template "entry" . }}
   {{ end }}
@@ -41,20 +79,25 @@
 {{ end }}
 
 {{ block "entry" . }}
-  <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 }}" 
-    >
-    <img src="/images/trash.svg" alt="delete" style="width: 1rem;" />
+  <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>
-    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;" />
+    <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 }}
@@ -63,5 +106,4 @@
   <div id="guestbook" hx-swap-oob="afterbegin">
     {{ template "entry" . }}
   </div>
-{{ end }}
-
+{{ end }}
\ No newline at end of file
