28 lines
988 B
HTML
28 lines
988 B
HTML
<div class="rounded-t-full bg-sky-600">.</div>
|
|
<div class="flex justify-center gap-2 p-8 bg-sky-600">
|
|
{{ range .pngFiles }}
|
|
<button class="p-1 rounded bg-white transform hover:scale-120
|
|
transition-all duration-100 ease-linear border-2 hover:z-2 active:z-0" onclick="openmodal({{.}})">
|
|
<img src="{{ . }}" alt="Carousel Image" class="
|
|
h-[20rem] rounded">
|
|
</button>
|
|
{{ end }}
|
|
</div>
|
|
<div class="rounded-b-full bg-sky-600 shadow-xl/30 mb-4">.</div>
|
|
|
|
{{ range .pngFiles }}
|
|
<dialog id="{{ . }}" class="fixed inset-0 flex items-center justify-center
|
|
z-50 w-full h-full bg-black bg-opacity-50"
|
|
style="background-color: rgba(0,0,0,0.2);" onclick="openmodal({{.}})" hidden>
|
|
<img src="{{ . }}" alt="Carousel Image" class="
|
|
mt-2 p-1 bg-white border-2
|
|
h-[80%] rounded-md opacity-100">
|
|
</dialog>
|
|
{{ end }}
|
|
<script>
|
|
function openmodal(id){
|
|
let dialog = document.getElementById(id);
|
|
dialog.toggleAttribute("hidden");
|
|
}
|
|
</script>
|