grail/gralias
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feat: show colors by pressing words

Browse Source
This commit is contained in:
Grail Finder
2025-05-02 15:21:28 +03:00
parent 8b768f919b
commit 322743e33d
6 changed files with 48 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
components/cardword.html Normal file
View File

@@ -0,0 +1,13 @@
{{define "cardword"}}
<div id="card-%s" 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 2px 4px rgba(0,0,0,0.8);
cursor: pointer;"> {{.Word}}
</div>
{{end}}

6
components/index.html
View File

@@ -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}}