54 lines
2.0 KiB
HTML
54 lines
2.0 KiB
HTML
{{define "cluepopup"}}
|
|
<div hx-sse="swap:newClue" hx-swap="none"
|
|
_="on htmx:sseMessage(mimeclue_{{.ID}})
|
|
-- Update content
|
|
set match to event.detail.match(/(.*?)(\d+)$/)
|
|
if match
|
|
set clue to match[1]
|
|
set number to match[2]
|
|
else
|
|
set clue to 'Invalid clue'
|
|
set number to '0'
|
|
end
|
|
|
|
-- Cancel any previous timeout
|
|
if window.clueTimeout then clearTimeout(window.clueTimeout)
|
|
|
|
-- Show with animation
|
|
remove .hidden from #clueModal
|
|
remove .opacity-0.-translate-y-4 from #clueModal div
|
|
add .opacity-100.translate-y-0 to #clueModal div
|
|
|
|
-- Auto-hide after 3 seconds
|
|
set window.clueTimeout to setTimeout(() =>
|
|
trigger closeModal
|
|
end, 3000)
|
|
|
|
on closeModal
|
|
-- Hide with animation
|
|
add .opacity-0.-translate-y-4 to #clueModal div
|
|
wait 300ms
|
|
add .hidden to #clueModal">
|
|
<div id="clueModal"
|
|
class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full transition-opacity duration-300 ease-in-out">
|
|
<div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white
|
|
transform transition-all duration-300 ease-out
|
|
opacity-0 -translate-y-4">
|
|
<div class="mt-3 text-center">
|
|
<h3 class="text-lg leading-6 font-medium text-gray-900">New Clue Received! 🔍</h3>
|
|
<div class="mt-2 px-7 py-3">
|
|
<p class="text-sm text-gray-500">Clue: <span id="modalClue" class="font-medium"></span></p>
|
|
<p class="text-sm text-gray-500">Number: <span id="modalNumber" class="font-medium"></span></p>
|
|
</div>
|
|
<div class="items-center px-4 py-3">
|
|
<button _="on click trigger closeModal"
|
|
class="px-4 py-2 bg-green-500 text-white rounded-md hover:bg-green-700 transition-colors">
|
|
OK
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{end}}
|