Feat: show colors by pressing words

components/index.html

@@ -49,7 +49,7 @@
 	<h1>Word Color Cards</h1>
 	<div style="display: flex; gap: 1rem; flex-wrap: wrap; padding: 1rem;">
 		{{range $word, $color := .}}
-		<div style="
+		<div id="card-{{$word}}" class="slide-it" style="
 			background-color: beige;
 			padding: 1rem;
 			border-radius: 8px;
@@ -58,8 +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">
+			cursor: pointer;"
+			hx-get="/word/show-color?word={{$word}}" hx-trigger="click" hx-swap="outerHTML transition:true swap:.2s">
 			{{$word}}
 		</div>
 		{{end}}