support/khy_website
1
0
Fork 0
mirror of https://git.kh3group.com/georgebiri/khy_website.git synced 2026-10-16 21:41:47 +00:00
Code Issues Projects Releases Packages Wiki Activity

refactor: enhance product detail page layout and specifications display
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse source 
- Updated product-detail.html to improve spacing and layout for product description and specifications.
- Removed static size and color options sections to streamline the design.
- Added dynamic rendering of product specifications in JavaScript for better user experience.
- Adjusted CSS for improved margin and height settings across various elements.
This commit is contained in:
George Birikorang 2025-09-17 22:24:55 -07:00
parent 8c42edd511
commit 197f862045
4 changed files with 385 additions and 778 deletions
Download patch file Download diff file Expand all files Collapse all files

37
product-detail.html
View file

@ -217,38 +217,14 @@
<!-- Product Description -->
<p
class="font-playfair font-normal text-sm text-black mb-12 max-w-md"
class="font-playfair font-normal text-sm text-black mb-8 max-w-md"
id="product-description"
>
<!-- Product description will be populated dynamically -->
</p>
<!-- Size Options -->
<div class="mb-8">
<h3
class="font-playfair font-normal text-sm text-quick-silver mb-4"
>
Size
</h3>
<div class="grid grid-cols-6 gap-2" id="size-buttons-container">
<!-- Size buttons will be populated dynamically -->
</div>
</div>
<!-- Color Options -->
<div class="mb-8">
<h3
class="font-playfair font-normal text-sm text-quick-silver mb-4"
>
Color
</h3>
<div class="flex gap-4" id="color-buttons-container">
<!-- Color buttons will be populated dynamically -->
</div>
</div>
<!-- Quantity and Action Buttons -->
<div class="flex flex-col md:flex-row gap-4 md:gap-6 mb-8">
<div class="flex flex-col md:flex-row gap-4 md:gap-6 mb-3">
<!-- Action Buttons -->
<a
href="contact.html"
@ -265,7 +241,14 @@
</div>
<!-- Divider -->
<div class="w-full h-px bg-light-silver mb-8"></div>
<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">