446 lines
17 KiB
HTML
446 lines
17 KiB
HTML
<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 }}
|
|
<section id="gallery" class="w-full justify-center">
|
|
<div
|
|
class="carousel-wrapper flex relative justify-center items-center"
|
|
>
|
|
<button
|
|
id="prev"
|
|
class="absolute left-0 top-1/2 transform -translate-y-1/2 w-1/2 h-full text-white flex items-center justify-start pl-8"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="fill-black w-6 sm:w-4"
|
|
viewBox="0 0 320 512"
|
|
>
|
|
<path
|
|
d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
<div class="carousel">
|
|
{{ range .gallery }}
|
|
<img
|
|
src="{{ .image }}"
|
|
class="carousel-image h-[15rem] w-auto rounded-md"
|
|
/>
|
|
{{ end }}
|
|
</div>
|
|
<button
|
|
id="next"
|
|
class="absolute right-0 top-1/2 transform -translate-y-1/2 w-1/2 h-full text-white flex items-center justify-end pr-8"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="fill-black w-6 sm:w-4"
|
|
viewBox="0 0 320 512"
|
|
>
|
|
<path
|
|
d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div
|
|
class="thumbnails flex justify-left mt-2 overflow-x-scroll pb-2"
|
|
>
|
|
{{ range .gallery }}
|
|
<img
|
|
loading="lazy"
|
|
src="{{ .image }}"
|
|
class="thumbnail transition-opacity duration-400 cursor-pointer m-1 h-[5rem] w-auto rounded-md opacity-20"
|
|
/>
|
|
{{ end }}
|
|
</div>
|
|
</section>
|
|
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
const carousel = document.querySelector(".carousel");
|
|
const images = Array.from(
|
|
document.querySelectorAll(".carousel-image")
|
|
);
|
|
const thumbnails = Array.from(
|
|
document.querySelectorAll(".thumbnail")
|
|
);
|
|
const thumbnailContainer =
|
|
document.querySelector(".thumbnails");
|
|
|
|
let currentIndex = 0;
|
|
|
|
const showImage = (index) => {
|
|
carousel.dataset.current = index;
|
|
|
|
images.forEach((img, i) => {
|
|
img.style.display = i === index ? "block" : "none";
|
|
});
|
|
|
|
const thumbnail = thumbnails[index];
|
|
smoothScrollTo(thumbnailContainer, thumbnail);
|
|
};
|
|
|
|
const handleButtonClick = (direction) => () => {
|
|
currentIndex =
|
|
(currentIndex + direction + images.length) %
|
|
images.length;
|
|
showImage(currentIndex);
|
|
addBorderToThumbnail(currentIndex);
|
|
};
|
|
|
|
const addBorderToThumbnail = (index) => {
|
|
thumbnails.forEach((thumbnail, i) => {
|
|
if (i === index) {
|
|
thumbnail.classList.add("!opacity-90");
|
|
} else {
|
|
thumbnail.classList.remove("!opacity-90");
|
|
}
|
|
});
|
|
};
|
|
|
|
const smoothScrollTo = (element, targetElement) => {
|
|
let startTime = null;
|
|
const duration = 500;
|
|
|
|
const scrollStep = (timestamp) => {
|
|
if (!startTime) startTime = timestamp;
|
|
const progress = Math.min(
|
|
(timestamp - startTime) / duration,
|
|
1
|
|
);
|
|
|
|
element.scrollLeft =
|
|
element.scrollLeft +
|
|
(targetElement.offsetLeft -
|
|
element.offsetWidth / 2 +
|
|
targetElement.offsetWidth / 2 -
|
|
element.scrollLeft) *
|
|
0.1 *
|
|
progress;
|
|
|
|
if (progress < 1) {
|
|
requestAnimationFrame(scrollStep);
|
|
}
|
|
};
|
|
|
|
requestAnimationFrame(scrollStep);
|
|
};
|
|
|
|
document
|
|
.getElementById("prev")
|
|
.addEventListener("click", handleButtonClick(-1));
|
|
document
|
|
.getElementById("next")
|
|
.addEventListener("click", handleButtonClick(1));
|
|
|
|
thumbnails.forEach((thumbnail, index) => {
|
|
thumbnail.addEventListener("click", () => {
|
|
currentIndex = index;
|
|
showImage(index);
|
|
addBorderToThumbnail(currentIndex);
|
|
});
|
|
});
|
|
|
|
showImage(0);
|
|
addBorderToThumbnail(0);
|
|
});
|
|
</script>
|
|
{{ 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>
|