272 lines
9.7 KiB
HTML
272 lines
9.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Product Detail - KHY</title>
|
|
<link rel="stylesheet" href="assets/styles/main.css" />
|
|
<style>
|
|
/* Force responsive behavior */
|
|
@media (min-width: 640px) {
|
|
.sm\:hidden {
|
|
display: none !important;
|
|
}
|
|
.sm\:flex {
|
|
display: flex !important;
|
|
}
|
|
}
|
|
</style>
|
|
<link
|
|
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Playfair+Display:wght@100;200;300;400;500;600;700&family=Poppins:wght@400;500;600&display=swap"
|
|
rel="stylesheet"
|
|
/>
|
|
</head>
|
|
<body class="bg-white font-sans text-gray-800">
|
|
<!-- Header -->
|
|
<header
|
|
class="fixed w-full h-20 sm:h-28 top-0 left-0 bg-white shadow-[0_8px_24px_rgba(0,0,0,0.06)] border-b border-black/10 z-50"
|
|
>
|
|
<nav class="h-full">
|
|
<div
|
|
class="max-w-7xl mx-auto h-full flex items-center justify-between px-5"
|
|
></div>
|
|
</nav>
|
|
</header>
|
|
|
|
<main class="pt-20 sm:pt-28">
|
|
<!-- Product Details Section -->
|
|
<section class="relative w-full bg-white py-6">
|
|
<div class="max-w-7xl mx-auto px-5">
|
|
<div class="flex items-center">
|
|
<h1
|
|
class="font-playfair font-normal text-base text-quick-silver"
|
|
id="product-details-title"
|
|
>
|
|
Product Details
|
|
</h1>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Main Product Section -->
|
|
<section class="relative w-full bg-white py-8">
|
|
<div class="max-w-7xl mx-auto px-5">
|
|
<div class="flex flex-col md:flex-row gap-8">
|
|
<!-- Left Section - Product Images -->
|
|
<div class="flex flex-col-reverse md:flex-row gap-4">
|
|
<!-- Thumbnails -->
|
|
<div
|
|
class="flex flex-row md:flex-col gap-3 md:gap-4 w-full md:w-32 overflow-x-auto md:overflow-visible"
|
|
>
|
|
<!-- Thumbnail images will be populated dynamically -->
|
|
</div>
|
|
|
|
<!-- Main Product Image -->
|
|
<div
|
|
class="w-full h-80 md:w-[500px] md:h-[500px] bg-floral-white rounded-lg overflow-hidden"
|
|
>
|
|
<!-- Main product image will be populated dynamically -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right Section - Product Details -->
|
|
<div class="w-full md:w-[500px]">
|
|
<!-- Product Title -->
|
|
<h1
|
|
class="font-playfair font-normal text-4xl text-black mb-8"
|
|
id="product-title"
|
|
>
|
|
<!-- Product title will be populated dynamically -->
|
|
</h1>
|
|
|
|
<!-- Product Description -->
|
|
<p
|
|
class="font-playfair font-normal text-sm text-black mb-8 max-w-md"
|
|
id="product-description"
|
|
>
|
|
<!-- Product description will be populated dynamically -->
|
|
</p>
|
|
|
|
<!-- Quantity and Action Buttons -->
|
|
<div class="flex flex-col md:flex-row gap-4 md:gap-6 mb-3">
|
|
<!-- Action Buttons -->
|
|
<a
|
|
href="contact.html"
|
|
class="inline-flex items-center justify-center w-full md:w-[440px] h-[64px] min-h-[64px] bg-white text-black font-playfair font-light text-[20px] leading-none rounded-[15px] border border-quick-silver hover:bg-black hover:text-white hover:shadow-lg transform hover:-translate-y-0.5 transition-all duration-200 box-border whitespace-nowrap mb-4"
|
|
>
|
|
Request a Quote
|
|
</a>
|
|
<button
|
|
id="compare-products-btn"
|
|
class="inline-flex items-center justify-center w-full md:w-[440px] h-[64px] min-h-[64px] bg-white text-black font-playfair font-light text-[20px] leading-none rounded-[15px] border border-quick-silver hover:bg-black hover:text-white hover:shadow-lg transform hover:-translate-y-0.5 transition-all duration-200 box-border whitespace-nowrap"
|
|
>
|
|
Compare Products
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Divider -->
|
|
<div class="w-full h-px bg-light-silver mb-3"></div>
|
|
|
|
<!-- Product Specifications -->
|
|
<div class="mb-8">
|
|
<div class="space-y-2" id="product-specifications">
|
|
<!-- Product specifications will be populated dynamically -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Product Metadata -->
|
|
<div class="space-y-4">
|
|
<!-- Product metadata will be populated dynamically -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Product Detail Tabs Section -->
|
|
<section id="product-tabs" class="w-full bg-white">
|
|
<div class="border-t border-light-silver"></div>
|
|
<div class="max-w-7xl mx-auto px-5 py-10">
|
|
<!-- Tabs -->
|
|
<div class="flex justify-center gap-12 mb-8">
|
|
<button class="font-playfair text-2xl text-black">
|
|
Description
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Copy -->
|
|
<div
|
|
class="max-w-5xl mx-auto space-y-6 text-center"
|
|
id="product-description-content"
|
|
>
|
|
<!-- Product description content will be populated dynamically -->
|
|
</div>
|
|
|
|
<!-- Images -->
|
|
<div class="relative mt-10">
|
|
<div
|
|
class="grid grid-cols-1 md:grid-cols-2 gap-8"
|
|
id="product-gallery-images"
|
|
>
|
|
<!-- Product gallery images will be populated dynamically -->
|
|
</div>
|
|
<!-- Back Arrow -->
|
|
<button
|
|
id="gallery-back-btn"
|
|
class="absolute top-1/2 left-0 transform -translate-y-1/2 bg-white border border-gray-300 rounded-full p-3 shadow-lg hover:shadow-xl transition-all duration-200 opacity-0 pointer-events-none"
|
|
style="display: none"
|
|
>
|
|
<svg
|
|
class="w-6 h-6 text-gray-600"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M15 19l-7-7 7-7"
|
|
></path>
|
|
</svg>
|
|
</button>
|
|
<!-- Forward Arrow -->
|
|
<button
|
|
id="gallery-next-btn"
|
|
class="absolute top-1/2 right-0 transform -translate-y-1/2 bg-white border border-gray-300 rounded-full p-3 shadow-lg hover:shadow-xl transition-all duration-200 opacity-0 pointer-events-none"
|
|
style="display: none"
|
|
>
|
|
<svg
|
|
class="w-6 h-6 text-gray-600"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M9 5l7 7-7 7"
|
|
></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- full-width divider before related products -->
|
|
<div class="w-full border-t border-light-silver"></div>
|
|
|
|
<!-- Related Products Section -->
|
|
<section id="related-products" class="w-full bg-white py-14">
|
|
<div class="max-w-7xl mx-auto px-5">
|
|
<h2
|
|
class="font-playfair text-4xl font-medium text-center text-black mb-10"
|
|
>
|
|
Related Products
|
|
</h2>
|
|
|
|
<div
|
|
id="related-grid"
|
|
class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8"
|
|
>
|
|
<!-- Related items will be injected here -->
|
|
</div>
|
|
|
|
<div class="mt-10 flex justify-center">
|
|
<button
|
|
id="related-show-more"
|
|
class="w-[245px] h-12 border border-uc-gold rounded-md bg-white font-playfair font-semibold text-base text-uc-gold hover:bg-uc-gold hover:text-white transition-colors"
|
|
>
|
|
Show More
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- full-width divider after related products -->
|
|
<div class="w-full border-t border-light-silver"></div>
|
|
</main>
|
|
|
|
<!-- Image Enlargement Modal -->
|
|
<div
|
|
id="image-modal"
|
|
class="fixed inset-0 bg-black bg-opacity-90 z-50 hidden flex items-center justify-center p-4 transition-opacity duration-300"
|
|
>
|
|
<div
|
|
class="relative max-w-7xl max-h-full w-full h-full flex items-center justify-center"
|
|
>
|
|
<!-- Close Button -->
|
|
<button
|
|
id="modal-close-btn"
|
|
class="absolute top-4 right-4 z-10 bg-white bg-opacity-20 hover:bg-opacity-30 text-white rounded-full p-3 transition-all duration-200 backdrop-blur-sm"
|
|
aria-label="Close modal"
|
|
>
|
|
<svg
|
|
class="w-6 h-6"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M6 18L18 6M6 6l12 12"
|
|
></path>
|
|
</svg>
|
|
</button>
|
|
|
|
<!-- Enlarged Image -->
|
|
<img
|
|
id="modal-image"
|
|
src=""
|
|
alt=""
|
|
class="w-[95vw] h-[95vh] object-contain rounded-lg shadow-2xl transform transition-transform duration-300 scale-95"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="scripts/main.js?v=3.5"></script>
|
|
</body>
|
|
</html>
|