<div class="mt-4 pb-2 flex flex-row gap-2 max-w-full overflow-x-auto whitespace-nowrap" > <button id="all" class="flex gap-2 items-center px-4 border border-gray-200 rounded-lg focus:outline-none" onclick="window.location.href = '/catalog'" > <span class="text-xs p-2 font-medium text-gray-900">All</span> </button> {{ $uniqueCategories := slice }} {{ range .Params.catalog }} {{ if not (in $uniqueCategories .cat) }} {{ $uniqueCategories = $uniqueCategories | append .cat }} <div class="flex gap-2 items-center px-3 py-2 border border-gray-200 rounded-lg" > <input id="radio-button-{{ .cat }}" type="radio" value="{{ .cat }}" name="category" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 focus:ring-2" /> <label for="radio-button-{{ .cat }}" class="noselect text-xs p-1 sm:p-0 font-medium text-gray-900" >{{ .cat }}</label > </div> {{ end }} {{ end }} </div> <div class="mt-2 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 gap-4" > {{ range .Params.catalog }} {{ if ne .item "" }} <div class="flex flex-col bg-white rounded-lg border p-4 relative"> <img src="https://placehold.co/300x200/" alt="Placeholder Image" class="w-full h-48 rounded-md object-cover" /> <div class="px-1 pt-4"> <div class="flex flex-row gap-2 justify-between font-bold text-xl mb-2"> {{ .item }} {{ if ne .cat "" }} <div> <span class="bg-blue-100 text-blue-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded-full" >{{ .cat }}</span > </div> {{ end }} </div> <div class="text-gray-800 text-base"> {{ if ne .quant "" }} <div class="flex flex-row justify-between"> <strong>Quantity:</strong> <span>{{ .quant }}</span> </div> {{ end }} {{ if ne .dimensions "" }} <div class="gap-1 text-right flex flex-row justify-between"> <strong>Dimensions:</strong> <span>{{ .dimensions }}</span> </div> {{ end }} {{ if ne .baseCost "" }} <div class="flex flex-row justify-between"> <strong>Base Cost:</strong> <span>{{ .baseCost }}</span> </div> {{ end }} {{ if ne .deliveryPickup "" }} <div class="flex flex-row justify-between"> <strong>+ Pickup & Delivery:</strong> <span>{{ .deliveryPickup }}</span> </div> {{ end }} {{ if ne .installBreakdown "" }} <div class="flex flex-row justify-between"> <strong>+ Setup & Breakdown:</strong> <span>{{ .installBreakdown }}</span> </div> {{ end }} {{ if ne .purchaseCost "" }} <div class="flex flex-row justify-between"> <strong>Purchase Cost:</strong> <span>{{ .purchaseCost }}</span> </div> {{ end }} </div> </div> <div class="h-full grid grid-cols-1 place-items-end pt-5"> <a class="w-full" href="#modal-{{ .item | urlize }}"> <button type="button" class="w-full px-3 py-2 text-xs font-medium text-center text-white bg-black rounded-lg hover:bg-gray-800 focus:ring-4 focus:outline-none transition-all duration-200" > Expand </button> </a> </div> <div id="modal-{{ .item | urlize }}" class="fixed z-10 inset-0 overflow-y-auto hidden bg-gray-500 bg-opacity-75 transition-opacity" aria-labelledby="modal-title" role="dialog" aria-modal="true" > <div class="flex items-end justify-center min-h-screen p-4 text-center sm:block sm:p-0" > <div class="fixed inset-0" aria-hidden="true"></div> <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true" >​</span > <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle self-center sm:max-w-lg w-full" > <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4"> <div class="sm:flex sm:items-start"> <div class="w-full mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-black sm:mx-0 sm:h-10 sm:w-10" > <svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true" > <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /> </svg> </div> <div class="w-full mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left"> <h3 class="text-xl mb-2" id="modal-title"> <strong>{{ .item }}</strong> </h3> {{ if .gallery }} <div id="gallery" class="relative w-full" data-carousel="slide"> <div class="relative h-56 overflow-hidden rounded-lg md:h-96"> {{ range .gallery }} <div class="hidden duration-700 ease-in-out" data-carousel-item > <img src="{{ .image }}" class="absolute block rounded-lg w-full h-auto -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" alt="" /> </div> {{ end }} </div> <button type="button" class="absolute top-0 start-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none" data-carousel-prev > <span class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none" > <svg class="w-4 h-4 text-white dark:text-gray-800 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10" > <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 1 1 5l4 4" /> </svg> <span class="sr-only">Previous</span> </span> </button> <button type="button" class="absolute top-0 end-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none" data-carousel-next > <span class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none" > <svg class="w-4 h-4 text-white dark:text-gray-800 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10" > <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4" /> </svg> <span class="sr-only">Next</span> </span> </button> </div> {{ end }} <div class="px-1 pt-4 w-full"> <div class="text-gray-800 text-base"> {{ if ne .quant "" }} <div class="flex flex-row justify-between"> <strong>Quantity:</strong> <span>{{ .quant }}</span> </div> {{ end }} {{ if ne .dimensions "" }} <div class="flex flex-row justify-between"> <strong>Dimensions:</strong> <span>{{ .dimensions }}</span> </div> {{ end }} {{ if ne .baseCost "" }} <div class="flex flex-row justify-between"> <strong>Base Cost:</strong> <span>{{ .baseCost }}</span> </div> {{ end }} {{ if ne .deliveryPickup "" }} <div class="flex flex-row justify-between"> <strong>Pickup & Delivery:</strong> <span>{{ .deliveryPickup }}</span> </div> {{ end }} {{ if ne .installBreakdown "" }} <div class="flex flex-row justify-between"> <strong>Setup & Breakdown:</strong> <span>{{ .installBreakdown }}</span> </div> {{ end }} {{ if ne .purchaseCost "" }} <div class="flex flex-row justify-between"> <strong>Purchase Cost:</strong> <span>{{ .purchaseCost }}</span> </div> {{ end }} </div> </div> </div> </div> </div> <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse"> <button id="close-modal" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-black text-base font-medium text-white hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black sm:ml-3 sm:w-auto sm:text-sm" @click="open = false" > Close </button> </div> </div> </div> </div> </div> {{ end }} {{ end }} </div> <script> document.addEventListener("DOMContentLoaded", function () { const modalButtons = document.querySelectorAll(".grid-cols-1 a"); const closeButtons = document.querySelectorAll("#close-modal"); const modals = document.querySelectorAll(".fixed"); const radioButtons = document.querySelectorAll( 'input[type="radio"][name="category"]' ); function filterItems(category) { console.log("Filtering items for category:", category); const items = document.querySelectorAll(".grid > div"); items.forEach((item) => { const itemCategory = item.querySelector(".bg-blue-100"); if (!category || itemCategory.textContent === category) { item.classList.remove("hidden"); } else { item.classList.add("hidden"); const modalId = item.id.replace("modal-", ""); const modal = document.getElementById(modalId); if (modal) modal.classList.add("hidden"); } }); } function updateUrl(category) { const url = window.location.href.split("#")[0]; const newUrl = category ? `${url}#${category}` : url; window.history.replaceState({}, "", newUrl); } const category = window.location.hash.substring(1); console.log("Initial category:", category); filterItems(category); window.addEventListener("hashchange", function () { const newCategory = window.location.hash.substring(1); console.log("New category:", newCategory); filterItems(newCategory); }); radioButtons.forEach((radio) => { radio.addEventListener("change", function () { const category = this.value; console.log("Selected category:", category); updateUrl(category); filterItems(category); }); }); modalButtons.forEach((button) => { button.addEventListener("click", function (e) { e.preventDefault(); const modalId = this.getAttribute("href").substring(1); const modal = document.getElementById(modalId); modal.classList.remove("hidden"); }); }); closeButtons.forEach((button) => { button.addEventListener("click", function (e) { e.preventDefault(); const modal = this.closest(".fixed"); modal.classList.add("hidden"); }); }); if (category) { const radioToSelect = document.querySelector( `input[type="radio"][name="category"][value="${category}"]` ); if (radioToSelect) { radioToSelect.checked = true; filterItems(category); } } }); const gallery = document.getElementById("gallery"); const carouselItems = gallery.querySelectorAll("[data-carousel-item]"); const prevButton = gallery.querySelector("[data-carousel-prev]"); const nextButton = gallery.querySelector("[data-carousel-next]"); let currentItemIndex = 0; function showItem() { carouselItems.forEach((item, index) => { item.classList.add("hidden"); if (index === currentItemIndex) { item.classList.remove("hidden"); } }); } function prevItem() { currentItemIndex = (currentItemIndex - 1 + carouselItems.length) % carouselItems.length; showItem(); } function nextItem() { currentItemIndex = (currentItemIndex + 1) % carouselItems.length; showItem(); } prevButton.addEventListener("click", prevItem); nextButton.addEventListener("click", nextItem); showItem(); </script>