PTS/SkyArtShop
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

webupdate

Browse Source
This commit is contained in:
Local Server
2026-01-20 20:29:33 -06:00
parent f8068ba54c
commit 1b2502c38d
22 changed files with 1905 additions and 172 deletions
Download Patch File Download Diff File Expand all files Collapse all files

221
website/public/product.html
View File

@@ -22,8 +22,8 @@
/>
<!-- Modern Theme CSS -->
<link rel="stylesheet" href="/assets/css/modern-theme.css?v=fix34" />
<link rel="stylesheet" href="/assets/css/mobile-fixes.css?v=20260119fix3" />
<link rel="stylesheet" href="/assets/css/modern-theme.css?v=fix35" />
<link rel="stylesheet" href="/assets/css/mobile-fixes.css?v=20260120fix2" />
<style>
/* Product page breadcrumb - force single line */
@@ -121,6 +121,64 @@
}
}
/* Tablet: iPad, iPad Air, iPad Pro (768px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
.product-detail {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: var(--spacing-xl) !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
.product-gallery {
position: relative !important;
width: 100% !important;
max-width: 100% !important;
overflow: hidden !important;
}
.main-image {
position: relative !important;
width: 100% !important;
max-width: 100% !important;
height: 0 !important;
padding-bottom: 100% !important;
overflow: hidden !important;
border-radius: var(--radius-lg) !important;
background: #ffffff !important;
}
.main-image img {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center !important;
}
.product-details {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
.product-details h1,
#productName {
font-size: 1.5rem !important;
word-break: break-word !important;
overflow-wrap: break-word !important;
}
.container {
max-width: 100% !important;
overflow-x: hidden !important;
}
}
.product-detail {
display: grid;
grid-template-columns: 1fr 1fr;
@@ -134,8 +192,11 @@
}
.main-image {
position: relative;
width: 100%;
aspect-ratio: 1;
max-width: 100%;
height: 0;
padding-bottom: 100%; /* 1:1 aspect ratio */
border-radius: var(--radius-lg);
overflow: hidden;
background: var(--bg-white);
@@ -143,12 +204,79 @@
}
.main-image img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transition: var(--transition-smooth);
}
/* Gallery Navigation Arrows */
.gallery-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
background: rgba(255, 255, 255, 0.9);
border: none;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
color: var(--text-primary);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
transition: all 0.2s ease;
z-index: 10;
opacity: 0;
}
.main-image:hover .gallery-arrow {
opacity: 1;
}
.gallery-arrow:hover {
background: white;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
transform: translateY(-50%) scale(1.1);
}
.gallery-arrow.prev {
left: 12px;
}
.gallery-arrow.next {
right: 12px;
}
.gallery-arrow:disabled {
opacity: 0.3;
cursor: not-allowed;
}
/* Mobile: always show arrows */
@media (max-width: 768px) {
.gallery-arrow {
opacity: 1;
width: 36px;
height: 36px;
font-size: 1rem;
}
.gallery-arrow.prev {
left: 8px;
}
.gallery-arrow.next {
right: 8px;
}
}
.thumbnail-gallery {
display: flex;
gap: var(--spacing-sm);
@@ -679,11 +807,25 @@
<!-- Gallery -->
<div class="product-gallery">
<div class="main-image">
<button
class="gallery-arrow prev"
id="galleryPrev"
aria-label="Previous image"
>
<i class="bi bi-chevron-left"></i>
</button>
<img
src="https://images.unsplash.com/photo-1513519245088-0e12902e35a6?w=800&q=80"
alt="Product"
id="mainImage"
/>
<button
class="gallery-arrow next"
id="galleryNext"
aria-label="Next image"
>
<i class="bi bi-chevron-right"></i>
</button>
</div>
<div class="thumbnail-gallery" id="thumbnailGallery">
<!-- Thumbnails loaded via JS -->
@@ -939,7 +1081,10 @@
</div>
<div class="footer-bottom">
<p>&copy; 2026 Sky Art Shop. All rights reserved.</p>
<p>
&copy; 2026 PromptTech-Solution. Designed and Developed by:
PromptTech-Solution
</p>
<p>
Made with
<i class="bi bi-heart-fill" style="color: var(--primary-pink)"></i>
@@ -1260,8 +1405,76 @@
.forEach((t) => t.classList.remove("active"));
thumb.classList.add("active");
mainImage.src = thumb.dataset.image;
updateArrowState();
});
});
// Gallery arrow navigation
let currentImageIndex = 0;
const galleryPrev = document.getElementById("galleryPrev");
const galleryNext = document.getElementById("galleryNext");
function updateArrowState() {
const thumbnails = thumbnailGallery.querySelectorAll(".thumbnail");
thumbnails.forEach((thumb, index) => {
if (thumb.classList.contains("active")) {
currentImageIndex = index;
}
});
// Update button states
if (galleryPrev) galleryPrev.disabled = currentImageIndex === 0;
if (galleryNext)
galleryNext.disabled =
currentImageIndex === thumbnails.length - 1;
// Hide arrows if only one image
if (thumbnails.length <= 1) {
if (galleryPrev) galleryPrev.style.display = "none";
if (galleryNext) galleryNext.style.display = "none";
}
}
function navigateGallery(direction) {
const thumbnails = thumbnailGallery.querySelectorAll(".thumbnail");
if (thumbnails.length === 0) return;
currentImageIndex += direction;
if (currentImageIndex < 0) currentImageIndex = 0;
if (currentImageIndex >= thumbnails.length)
currentImageIndex = thumbnails.length - 1;
const targetThumb = thumbnails[currentImageIndex];
thumbnails.forEach((t) => t.classList.remove("active"));
targetThumb.classList.add("active");
mainImage.src = targetThumb.dataset.image;
// Scroll thumbnail into view
targetThumb.scrollIntoView({
behavior: "smooth",
block: "nearest",
inline: "center",
});
updateArrowState();
}
if (galleryPrev) {
galleryPrev.addEventListener("click", (e) => {
e.preventDefault();
navigateGallery(-1);
});
}
if (galleryNext) {
galleryNext.addEventListener("click", (e) => {
e.preventDefault();
navigateGallery(1);
});
}
// Initialize arrow state
updateArrowState();
}
// Color options