feat: add click-to-reveal color cards with HTMX

components/index.html

@@ -50,7 +50,7 @@
 	<div style="display: flex; gap: 1rem; flex-wrap: wrap; padding: 1rem;">
 		{{range $word, $color := .}}
 		<div style="
-			background-color: {{$color}};
+			background-color: beige;
 			padding: 1rem;
 			border-radius: 8px;
 			box-shadow: 0 2px 4px rgba(0,0,0,0.2);
@@ -58,7 +58,8 @@
 			text-align: center;
 			color: white;
 			text-shadow: 0 2px 4px rgba(0,0,0,0.8);
-		">
+			cursor: pointer;
+		" hx-get="/show-color?word={{$word}}" hx-trigger="click" hx-swap="outerHTML">
 			{{$word}}
 		</div>
 		{{end}}

handlers/handlers.go

@@ -36,6 +36,29 @@ func HandlePing(w http.ResponseWriter, r *http.Request) {
 	w.Write([]byte("pong"))
 }
 
+func HandleShowColor(w http.ResponseWriter, r *http.Request) {
+	word := r.URL.Query().Get("word")
+	color, exists := roundWords[word]
+	if !exists {
+		http.Error(w, "word not found", http.StatusNotFound)
+		return
+	}
+	
+	w.Header().Set("Content-Type", "text/html")
+	w.Write([]byte(
+		fmt.Sprintf(`<div style="
+			background-color: %s;
+			padding: 1rem;
+			border-radius: 8px;
+			box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+			min-width: 100px;
+			text-align: center;
+			color: white;
+			text-shadow: 0 2px 4px rgba(0,0,0,0.8);
+			cursor: pointer;
+		">%s</div>`, color, word)))
+}
+
 func HandleHome(w http.ResponseWriter, r *http.Request) {
 	tmpl, err := template.ParseGlob("components/*.html")
 	if err != nil {