<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Word Colors</title>
	<script src="https://unpkg.com/htmx.org@1.9.10"></script>
</head>
<body>
	<h1>Word Color Cards</h1>
	<div style="display: flex; gap: 1rem; flex-wrap: wrap; padding: 1rem;">
		{{range $word, $color := .}}
		<div style="
			background-color: {{$color}};
			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 1px 2px rgba(0,0,0,0.25);
		">
			{{$word}}
		</div>
		{{end}}
	</div>
</body>
</html>
