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

Feat: components chain

Browse Source
This commit is contained in:
Grail Finder
2025-05-03 09:18:05 +03:00
parent 8b68aee884
commit 5cf1f1199e
7 changed files with 73 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
components/index.html
View File

@@ -46,24 +46,26 @@
<div id="create-room" class="create-room-div">
<button button id="create-form-btn" type="submit" class="justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600" hx-get="/room/createform" hx-swap="outerHTML">SHOW ROOM CREATE FORM</button>
</div>
<h1>Word Color Cards</h1>
<div style="display: flex; gap: 1rem; flex-wrap: wrap; padding: 1rem;">
{{range $word, $color := .}}
<div id="card-{{$word}}" class="slide-it" style="
background-color: beige;
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;"
hx-get="/word/show-color?word={{$word}}" hx-trigger="click" hx-swap="outerHTML transition:true swap:.2s">
{{$word}}
</div>
{{end}}
</div>
<!-- check if user in the room -->
{{template "room" .}}
<!-- <h1>Word Color Cards</h1> -->
<!-- <div style="display: flex; gap: 1rem; flex-wrap: wrap; padding: 1rem;"> -->
<!-- {{range $word, $color := .}} -->
<!-- <div id="card-{{$word}}" class="slide-it" style=" -->
<!-- background-color: beige; -->
<!-- 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;" -->
<!-- hx-get="/word/show-color?word={{$word}}" hx-trigger="click" hx-swap="outerHTML transition:true swap:.2s"> -->
<!-- {{$word}} -->
<!-- </div> -->
<!-- {{end}} -->
<!-- </div> -->
</div>
</body>
</html>