1526 lines
52 KiB
HTML
1526 lines
52 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="vi">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Gạch Eurotile MỘC LAM E03 - EuroTile Worker</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link rel="stylesheet" href="assets/css/style.css">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
</head>
|
|
<body>
|
|
<div class="page-wrapper">
|
|
<!-- Header -->
|
|
<div class="header">
|
|
<a href="products.html" class="back-button">
|
|
<i class="fas fa-arrow-left"></i>
|
|
</a>
|
|
<h1 class="header-title">Chi tiết sản phẩm</h1>
|
|
<div class="header-actions">
|
|
<button class="header-action-btn" onclick="shareProduct()">
|
|
<i class="fas fa-share"></i>
|
|
</button>
|
|
<button class="header-action-btn" onclick="toggleFavorite()" id="favoriteBtn">
|
|
<i class="far fa-heart"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="product-detail-content">
|
|
<!-- Image Gallery Section -->
|
|
<div class="product-gallery-section">
|
|
<div class="main-image-container" onclick="openLightbox(0)">
|
|
<img id="mainImage" src="https://placehold.co/400x400/F5F5F5/005B9A/png?text=Gạch+Eurotile+MỘC+LAM+E03" alt="Gạch Eurotile MỘC LAM E03" class="main-product-image">
|
|
|
|
<!-- 360° Button overlay -->
|
|
<button class="view-360-btn-overlay" onclick="view360Product()" title="Xem sản phẩm 360°">
|
|
<i class="fas fa-sync-alt"></i>
|
|
<span>360°</span>
|
|
</button>
|
|
|
|
<!-- Image indicators -->
|
|
<div class="image-indicators">
|
|
<span class="indicator active" data-index="0"></span>
|
|
<span class="indicator" data-index="1"></span>
|
|
<span class="indicator" data-index="2"></span>
|
|
<span class="indicator" data-index="3"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Thumbnail row -->
|
|
<div class="thumbnail-gallery">
|
|
<div class="thumbnail active" onclick="changeImage(0, this)">
|
|
<img src="https://placehold.co/80x80/F5F5F5/005B9A/png?text=1" alt="Thumbnail 1">
|
|
</div>
|
|
<div class="thumbnail" onclick="changeImage(1, this)">
|
|
<img src="https://placehold.co/80x80/E8E8E8/005B9A/png?text=2" alt="Thumbnail 2">
|
|
</div>
|
|
<div class="thumbnail" onclick="changeImage(2, this)">
|
|
<img src="https://placehold.co/80x80/DDDDDD/005B9A/png?text=3" alt="Thumbnail 3">
|
|
</div>
|
|
<div class="thumbnail" onclick="changeImage(3, this)">
|
|
<img src="https://placehold.co/80x80/D2D2D2/005B9A/png?text=4" alt="Thumbnail 4">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Product Information Section -->
|
|
<div class="product-info-section">
|
|
<div class="product-sku">SKU: ET-ML-E03-60x60</div>
|
|
<h1 class="product-title">Gạch Eurotile MỘC LAM E03</h1>
|
|
<div class="product-pricing">
|
|
<span class="current-price">285.000 VND/m²</span>
|
|
<span class="original-price">320.000 VND/m²</span>
|
|
<span class="discount-badge">-11%</span>
|
|
</div>
|
|
|
|
<!-- Rating & Reviews -->
|
|
<div class="rating-section">
|
|
<div class="rating-stars">
|
|
<i class="fas fa-star"></i>
|
|
<i class="fas fa-star"></i>
|
|
<i class="fas fa-star"></i>
|
|
<i class="fas fa-star"></i>
|
|
<i class="fas fa-star-half-alt"></i>
|
|
</div>
|
|
<span class="rating-text">4.8 (125 đánh giá)</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Product Tabs Section -->
|
|
<div class="product-tabs-section">
|
|
<div class="tab-navigation">
|
|
<button class="tab-button active" onclick="switchTab('specifications', this)">Thông số</button>
|
|
<button class="tab-button" onclick="switchTab('reviews', this)">Đánh giá</button>
|
|
</div>
|
|
|
|
<!-- Tab Contents -->
|
|
<div class="tab-content active" id="specifications">
|
|
<div class="specifications-table">
|
|
<div class="spec-row">
|
|
<div class="spec-label">Kích thước</div>
|
|
<div class="spec-value">60cm x 60cm</div>
|
|
</div>
|
|
<div class="spec-row">
|
|
<div class="spec-label">Độ dày</div>
|
|
<div class="spec-value">9.5mm</div>
|
|
</div>
|
|
<div class="spec-row">
|
|
<div class="spec-label">Bề mặt</div>
|
|
<div class="spec-value">Matt (Nhám)</div>
|
|
</div>
|
|
<div class="spec-row">
|
|
<div class="spec-label">Loại men</div>
|
|
<div class="spec-value">Granite kỹ thuật số</div>
|
|
</div>
|
|
<div class="spec-row">
|
|
<div class="spec-label">Độ hấp thụ nước</div>
|
|
<div class="spec-value">< 0.5%</div>
|
|
</div>
|
|
<div class="spec-row">
|
|
<div class="spec-label">Độ chống mài mòn</div>
|
|
<div class="spec-value">PEI 4</div>
|
|
</div>
|
|
<div class="spec-row">
|
|
<div class="spec-label">Chức năng</div>
|
|
<div class="spec-value">Lát nền, Ốp tường</div>
|
|
</div>
|
|
<div class="spec-row">
|
|
<div class="spec-label">Xuất xứ</div>
|
|
<div class="spec-value">Việt Nam</div>
|
|
</div>
|
|
<div class="spec-row">
|
|
<div class="spec-label">Bảo hành</div>
|
|
<div class="spec-value">15 năm</div>
|
|
</div>
|
|
<div class="spec-row">
|
|
<div class="spec-label">Tiêu chuẩn</div>
|
|
<div class="spec-value">TCVN 9081:2012, ISO 13006</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tab-content" id="reviews">
|
|
<!-- Phần 1: Tổng quan Xếp hạng -->
|
|
<div class="reviews-summary">
|
|
<div class="rating-overview">
|
|
<div class="rating-score-large">4.5</div>
|
|
<div class="rating-details">
|
|
<div class="rating-stars-display">
|
|
<i class="fas fa-star"></i>
|
|
<i class="fas fa-star"></i>
|
|
<i class="fas fa-star"></i>
|
|
<i class="fas fa-star"></i>
|
|
<i class="fas fa-star-half-alt"></i>
|
|
</div>
|
|
<div class="rating-count-text">từ 23 đánh giá</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Star Distribution Bars -->
|
|
<!-- <div class="star-distribution">
|
|
<div class="distribution-row">
|
|
<div class="stars-label">5 <i class="fas fa-star"></i></div>
|
|
<div class="distribution-bar-container">
|
|
<div class="distribution-bar" style="width: 80%;"></div>
|
|
</div>
|
|
<div class="distribution-percent">80%</div>
|
|
</div>
|
|
<div class="distribution-row">
|
|
<div class="stars-label">4 <i class="fas fa-star"></i></div>
|
|
<div class="distribution-bar-container">
|
|
<div class="distribution-bar" style="width: 15%;"></div>
|
|
</div>
|
|
<div class="distribution-percent">15%</div>
|
|
</div>
|
|
<div class="distribution-row">
|
|
<div class="stars-label">3 <i class="fas fa-star"></i></div>
|
|
<div class="distribution-bar-container">
|
|
<div class="distribution-bar" style="width: 5%;"></div>
|
|
</div>
|
|
<div class="distribution-percent">5%</div>
|
|
</div>
|
|
<div class="distribution-row">
|
|
<div class="stars-label">2 <i class="fas fa-star"></i></div>
|
|
<div class="distribution-bar-container">
|
|
<div class="distribution-bar" style="width: 0%;"></div>
|
|
</div>
|
|
<div class="distribution-percent">0%</div>
|
|
</div>
|
|
<div class="distribution-row">
|
|
<div class="stars-label">1 <i class="fas fa-star"></i></div>
|
|
<div class="distribution-bar-container">
|
|
<div class="distribution-bar" style="width: 0%;"></div>
|
|
</div>
|
|
<div class="distribution-percent">0%</div>
|
|
</div>
|
|
</div>-->
|
|
</div>
|
|
|
|
<!-- Phần 2: Nút "Viết đánh giá" (Hiển thị nếu chưa có đánh giá pending) -->
|
|
<div class="write-review-section" id="writeReviewSection">
|
|
<button class="btn-write-review" onclick="goToWriteReview()">
|
|
<i class="fas fa-edit"></i>
|
|
Viết đánh giá của bạn
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Phần 3: Card đánh giá đang chờ duyệt (Ẩn mặc định) -->
|
|
<div class="pending-review-notice" id="pendingReviewNotice" style="display: none;">
|
|
<div class="review-item pending-review-item">
|
|
<div class="pending-badge">
|
|
<i class="fas fa-clock"></i>
|
|
Đang chờ duyệt
|
|
</div>
|
|
<div class="reviewer-info">
|
|
<div class="reviewer-avatar">
|
|
<i class="fas fa-user"></i>
|
|
</div>
|
|
<div class="reviewer-details">
|
|
<div class="reviewer-name">Nguyễn Văn A (Bạn)</div>
|
|
<div class="review-date">Hôm nay</div>
|
|
</div>
|
|
</div>
|
|
<div class="review-rating">
|
|
<i class="fas fa-star"></i>
|
|
<i class="fas fa-star"></i>
|
|
<i class="fas fa-star"></i>
|
|
<i class="fas fa-star"></i>
|
|
<i class="fas fa-star"></i>
|
|
</div>
|
|
<div class="review-title">Sản phẩm rất tốt, giao hàng nhanh</div>
|
|
<p class="review-text">Chất lượng gạch tuyệt vời, màu sắc đẹp và đúng như mô tả. Đội ngũ giao hàng chuyên nghiệp. Sẽ ủng hộ lâu dài!</p>
|
|
<div class="pending-review-note">
|
|
<i class="fas fa-info-circle"></i>
|
|
Đánh giá của bạn sẽ được hiển thị sau khi Admin xem xét và phê duyệt.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Phần 4: Danh sách đánh giá đã duyệt -->
|
|
<div class="reviews-list">
|
|
<h4 class="reviews-list-title">Đánh giá từ khách hàng</h4>
|
|
|
|
<div class="review-item">
|
|
<div class="reviewer-info">
|
|
<div class="reviewer-avatar">
|
|
<i class="fas fa-user"></i>
|
|
</div>
|
|
<div class="reviewer-details">
|
|
<div class="reviewer-name">Trần Văn B</div>
|
|
<div class="review-date">2 tuần trước</div>
|
|
</div>
|
|
</div>
|
|
<div class="review-rating">
|
|
<i class="fas fa-star"></i>
|
|
<i class="fas fa-star"></i>
|
|
<i class="fas fa-star"></i>
|
|
<i class="fas fa-star"></i>
|
|
<i class="fas fa-star"></i>
|
|
</div>
|
|
<div class="review-title">Chất lượng xuất sắc!</div>
|
|
<p class="review-text">Sản phẩm chất lượng tốt, màu sắc đẹp và dễ lắp đặt. Rất hài lòng với lựa chọn này cho ngôi nhà của gia đình. Giao hàng nhanh và đóng gói cẩn thận.</p>
|
|
</div>
|
|
|
|
<div class="review-item">
|
|
<div class="reviewer-info">
|
|
<div class="reviewer-avatar">
|
|
<i class="fas fa-user"></i>
|
|
</div>
|
|
<div class="reviewer-details">
|
|
<div class="reviewer-name">Lê Thị C</div>
|
|
<div class="review-date">1 tháng trước</div>
|
|
</div>
|
|
</div>
|
|
<div class="review-rating">
|
|
<i class="fas fa-star"></i>
|
|
<i class="fas fa-star"></i>
|
|
<i class="fas fa-star"></i>
|
|
<i class="fas fa-star"></i>
|
|
<i class="far fa-star"></i>
|
|
</div>
|
|
<div class="review-title">Đẹp và chất lượng tốt</div>
|
|
<p class="review-text">Gạch đẹp, vân gỗ rất chân thực. Giao hàng nhanh chóng và đóng gói cẩn thận. Giá cả hợp lý so với chất lượng.</p>
|
|
</div>
|
|
|
|
<div class="review-item">
|
|
<div class="reviewer-info">
|
|
<div class="reviewer-avatar">
|
|
<i class="fas fa-user"></i>
|
|
</div>
|
|
<div class="reviewer-details">
|
|
<div class="reviewer-name">Phạm Minh D</div>
|
|
<div class="review-date">2 tháng trước</div>
|
|
</div>
|
|
</div>
|
|
<div class="review-rating">
|
|
<i class="fas fa-star"></i>
|
|
<i class="fas fa-star"></i>
|
|
<i class="fas fa-star"></i>
|
|
<i class="fas fa-star"></i>
|
|
<i class="fas fa-star"></i>
|
|
</div>
|
|
<p class="review-text">Sản phẩm tốt, đúng mô tả. Tư vấn nhiệt tình. Sẽ giới thiệu cho bạn bè.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sticky Action Bar -->
|
|
<div class="sticky-action-bar">
|
|
<div class="quantity-section">
|
|
<label class="quantity-label">Số lượng (m²)</label>
|
|
<div class="quantity-controls">
|
|
<button class="qty-btn" onclick="decreaseQuantity()" id="decreaseBtn">
|
|
<i class="fas fa-minus"></i>
|
|
</button>
|
|
<input type="number" class="qty-input" value="1" min="1" id="quantityInput" onchange="updateQuantity()">
|
|
<button class="qty-btn" onclick="increaseQuantity()" id="increaseBtn">
|
|
<i class="fas fa-plus"></i>
|
|
</button>
|
|
</div>
|
|
<div class="conversion-text" id="conversionText">
|
|
Tương đương: 3 hộp / 12 viên
|
|
</div>
|
|
</div>
|
|
<button class="add-to-cart-btn" onclick="addToCart()">
|
|
<i class="fas fa-shopping-cart"></i>
|
|
<span>Thêm vào giỏ hàng</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Lightbox Modal -->
|
|
<div class="lightbox" id="lightbox">
|
|
<div class="lightbox-content">
|
|
<button class="lightbox-close" onclick="closeLightbox()">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
|
|
<div class="lightbox-counter" id="lightbox-counter">1 / 4</div>
|
|
|
|
<img id="lightbox-image" class="lightbox-image" src="" alt="">
|
|
|
|
<div class="lightbox-caption" id="lightbox-caption">
|
|
Ảnh phối cảnh dòng Mộc Lam với texture gỗ tự nhiên chân thực
|
|
</div>
|
|
|
|
<button class="lightbox-nav lightbox-prev" onclick="prevLightboxImage()">
|
|
<i class="fas fa-chevron-left"></i>
|
|
</button>
|
|
|
|
<button class="lightbox-nav lightbox-next" onclick="nextLightboxImage()">
|
|
<i class="fas fa-chevron-right"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.product-detail-content {
|
|
padding-bottom: 80px; /* Space for sticky footer */
|
|
}
|
|
|
|
/* Image Gallery Section */
|
|
.product-gallery-section {
|
|
background: var(--white);
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.main-image-container {
|
|
position: relative;
|
|
width: 100%;
|
|
aspect-ratio: 1;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.main-product-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.view-360-btn-overlay {
|
|
position: absolute;
|
|
top: 16px;
|
|
right: 16px;
|
|
background: rgba(0, 0, 0, 0.8);
|
|
color: white;
|
|
border: none;
|
|
border-radius: 20px;
|
|
padding: 8px 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
z-index: 10;
|
|
}
|
|
|
|
.view-360-btn-overlay:hover {
|
|
background: rgba(0, 0, 0, 0.9);
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.view-360-btn-overlay i {
|
|
font-size: 10px;
|
|
animation: rotate 2s linear infinite;
|
|
}
|
|
|
|
@keyframes rotate {
|
|
from { transform: rotate(0deg); }
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
.image-indicators {
|
|
position: absolute;
|
|
bottom: 16px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
|
|
.indicator {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background: rgba(255, 255, 255, 0.5);
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.indicator.active {
|
|
background: white;
|
|
transform: scale(1.2);
|
|
}
|
|
|
|
.thumbnail-gallery {
|
|
display: flex;
|
|
padding: 16px;
|
|
gap: 12px;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.thumbnail {
|
|
flex-shrink: 0;
|
|
width: 60px;
|
|
height: 60px;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
border: 2px solid transparent;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.thumbnail.active {
|
|
border-color: var(--primary-blue);
|
|
}
|
|
|
|
.thumbnail img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
/* Product Information Section */
|
|
.product-info-section {
|
|
background: var(--white);
|
|
padding: 20px 16px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.product-sku {
|
|
font-size: 12px;
|
|
color: var(--text-light);
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.product-title {
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
color: var(--text-dark);
|
|
margin: 0 0 16px 0;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.product-pricing {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.current-price {
|
|
font-size: 22px;
|
|
font-weight: 700;
|
|
color: var(--primary-blue);
|
|
}
|
|
|
|
.original-price {
|
|
font-size: 16px;
|
|
color: var(--text-light);
|
|
text-decoration: line-through;
|
|
}
|
|
|
|
.discount-badge {
|
|
background: var(--danger-color);
|
|
color: white;
|
|
padding: 4px 8px;
|
|
border-radius: 12px;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.rating-section {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.rating-stars {
|
|
display: flex;
|
|
gap: 2px;
|
|
}
|
|
|
|
.rating-stars i {
|
|
color: #ffc107;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.rating-text {
|
|
font-size: 14px;
|
|
color: var(--text-light);
|
|
}
|
|
|
|
/* Product Tabs Section */
|
|
.product-tabs-section {
|
|
background: var(--white);
|
|
}
|
|
|
|
.tab-navigation {
|
|
display: flex;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.tab-button {
|
|
flex: 1;
|
|
padding: 16px 12px;
|
|
border: none;
|
|
background: none;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: var(--text-light);
|
|
cursor: pointer;
|
|
position: relative;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.tab-button.active {
|
|
color: var(--primary-blue);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.tab-button.active::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 2px;
|
|
background: var(--primary-blue);
|
|
}
|
|
|
|
.tab-content {
|
|
display: none;
|
|
padding: 20px 16px;
|
|
min-height: 200px;
|
|
}
|
|
|
|
.tab-content.active {
|
|
display: block;
|
|
}
|
|
|
|
.tab-content-wrapper h3 {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
color: var(--text-dark);
|
|
margin: 0 0 12px 0;
|
|
}
|
|
|
|
.tab-content-wrapper h4 {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: var(--text-dark);
|
|
margin: 20px 0 12px 0;
|
|
}
|
|
|
|
.tab-content-wrapper p {
|
|
line-height: 1.6;
|
|
color: var(--text-dark);
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.feature-list {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.feature-list li {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 8px 0;
|
|
color: var(--text-dark);
|
|
}
|
|
|
|
.feature-list i {
|
|
color: var(--success-color);
|
|
font-size: 14px;
|
|
}
|
|
|
|
/* Specifications Table */
|
|
.specifications-table {
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
|
|
.spec-row {
|
|
display: flex;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.spec-row:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.spec-label {
|
|
flex: 1;
|
|
padding: 12px 16px;
|
|
background: var(--background-gray);
|
|
font-weight: 500;
|
|
color: var(--text-dark);
|
|
border-right: 1px solid var(--border-color);
|
|
}
|
|
|
|
.spec-value {
|
|
flex: 1;
|
|
padding: 12px 16px;
|
|
color: var(--text-dark);
|
|
}
|
|
|
|
/* Reviews Section */
|
|
.reviews-summary {
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.rating-overview {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
padding: 20px;
|
|
background: var(--background-gray);
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.rating-score {
|
|
font-size: 36px;
|
|
font-weight: 700;
|
|
color: var(--primary-blue);
|
|
}
|
|
|
|
.rating-stars-large {
|
|
display: flex;
|
|
gap: 4px;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.rating-stars-large i {
|
|
color: #ffc107;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.rating-count {
|
|
font-size: 14px;
|
|
color: var(--text-light);
|
|
}
|
|
|
|
.review-item {
|
|
padding: 16px 0;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.review-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.reviewer-info {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.reviewer-avatar {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
background: var(--background-gray);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--text-light);
|
|
}
|
|
|
|
.reviewer-name {
|
|
font-weight: 600;
|
|
color: var(--text-dark);
|
|
}
|
|
|
|
.review-date {
|
|
font-size: 12px;
|
|
color: var(--text-light);
|
|
}
|
|
|
|
.review-rating {
|
|
display: flex;
|
|
gap: 2px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.review-rating i {
|
|
color: #ffc107;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.review-text {
|
|
line-height: 1.5;
|
|
color: var(--text-dark);
|
|
}
|
|
|
|
/* Rating Overview - Enhanced */
|
|
.rating-score-large {
|
|
font-size: 48px;
|
|
font-weight: 700;
|
|
color: var(--primary-blue);
|
|
line-height: 1;
|
|
}
|
|
|
|
.rating-stars-display {
|
|
display: flex;
|
|
gap: 4px;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.rating-stars-display i {
|
|
color: #ffc107;
|
|
font-size: 20px;
|
|
}
|
|
|
|
.rating-count-text {
|
|
font-size: 14px;
|
|
color: var(--text-light);
|
|
}
|
|
|
|
/* Star Distribution */
|
|
.star-distribution {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.distribution-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.stars-label {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: var(--text-dark);
|
|
min-width: 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
.stars-label i {
|
|
color: #ffc107;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.distribution-bar-container {
|
|
flex: 1;
|
|
height: 8px;
|
|
background: var(--border-color);
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.distribution-bar {
|
|
height: 100%;
|
|
background: linear-gradient(90deg, #ffc107 0%, #ff9800 100%);
|
|
border-radius: 4px;
|
|
transition: width 0.3s ease;
|
|
}
|
|
|
|
.distribution-percent {
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: var(--text-light);
|
|
min-width: 40px;
|
|
text-align: right;
|
|
}
|
|
|
|
/* Write Review Section */
|
|
.write-review-section {
|
|
margin-bottom: 24px;
|
|
/* padding: 20px;*/
|
|
/* background: var(--background-gray); */
|
|
border-radius: 12px;
|
|
text-align: center;
|
|
}
|
|
|
|
.btn-write-review {
|
|
background: var(--primary-blue);
|
|
color: white;
|
|
border: none;
|
|
padding: 14px 28px;
|
|
border-radius: 8px;
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
cursor: pointer;
|
|
transition: background 0.3s ease;
|
|
}
|
|
|
|
.btn-write-review:hover {
|
|
background: #004578;
|
|
}
|
|
|
|
.btn-write-review i {
|
|
font-size: 16px;
|
|
}
|
|
|
|
/* Pending Review Notice */
|
|
.pending-review-notice {
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.pending-review-item {
|
|
background: #fffbf0;
|
|
border: 2px solid #ffc107;
|
|
border-radius: 12px;
|
|
padding: 16px;
|
|
position: relative;
|
|
}
|
|
|
|
.pending-badge {
|
|
position: absolute;
|
|
top: 12px;
|
|
right: 12px;
|
|
background: #ffc107;
|
|
color: #856404;
|
|
padding: 6px 12px;
|
|
border-radius: 16px;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
.pending-badge i {
|
|
font-size: 11px;
|
|
}
|
|
|
|
.review-title {
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
color: var(--text-dark);
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.pending-review-note {
|
|
margin-top: 12px;
|
|
padding: 12px;
|
|
background: rgba(255, 193, 7, 0.1);
|
|
border-left: 3px solid #ffc107;
|
|
border-radius: 6px;
|
|
font-size: 13px;
|
|
color: #856404;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 8px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.pending-review-note i {
|
|
margin-top: 2px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Reviews List */
|
|
.reviews-list {
|
|
margin-top: 24px;
|
|
}
|
|
|
|
.reviews-list-title {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: var(--text-dark);
|
|
margin-bottom: 16px;
|
|
padding-bottom: 8px;
|
|
border-bottom: 2px solid var(--border-color);
|
|
}
|
|
|
|
/* Sticky Action Bar */
|
|
.sticky-action-bar {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background: var(--white);
|
|
padding: 16px;
|
|
border-top: 1px solid var(--border-color);
|
|
box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.1);
|
|
display: flex;
|
|
gap: 16px;
|
|
align-items: center;
|
|
z-index: 100;
|
|
}
|
|
|
|
.quantity-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.quantity-label {
|
|
font-size: 12px;
|
|
color: var(--text-muted);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.conversion-text {
|
|
font-size: 11px;
|
|
color: var(--text-muted);
|
|
margin-top: 4px;
|
|
text-align: center;
|
|
}
|
|
|
|
.quantity-controls {
|
|
display: flex;
|
|
align-items: center;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.qty-btn {
|
|
width: 40px;
|
|
height: 40px;
|
|
border: none;
|
|
background: var(--background-gray);
|
|
color: var(--text-dark);
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.qty-btn:hover {
|
|
background: var(--border-color);
|
|
}
|
|
|
|
.qty-btn:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.qty-input {
|
|
width: 60px;
|
|
height: 40px;
|
|
border: none;
|
|
text-align: center;
|
|
font-weight: 600;
|
|
font-size: 16px;
|
|
outline: none;
|
|
}
|
|
|
|
.add-to-cart-btn {
|
|
flex: 1;
|
|
background: var(--primary-blue);
|
|
color: white;
|
|
border: none;
|
|
border-radius: 8px;
|
|
padding: 12px 20px;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.add-to-cart-btn:hover {
|
|
background: var(--light-blue);
|
|
}
|
|
|
|
/* Lightbox Modal */
|
|
.lightbox {
|
|
display: none;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0, 0, 0, 0.9);
|
|
z-index: 1000;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 20px;
|
|
touch-action: none;
|
|
}
|
|
|
|
.lightbox.active {
|
|
display: flex;
|
|
}
|
|
|
|
.lightbox-content {
|
|
position: relative;
|
|
max-width: 90%;
|
|
max-height: 90%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.lightbox-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
max-width: 500px;
|
|
max-height: 500px;
|
|
object-fit: contain;
|
|
border-radius: 8px;
|
|
user-select: none;
|
|
touch-action: none;
|
|
}
|
|
|
|
.lightbox-close {
|
|
position: absolute;
|
|
top: -50px;
|
|
right: 0;
|
|
background: none;
|
|
border: none;
|
|
color: white;
|
|
font-size: 32px;
|
|
cursor: pointer;
|
|
width: 40px;
|
|
height: 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 1001;
|
|
}
|
|
|
|
.lightbox-nav {
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
background: rgba(255, 255, 255, 0.2);
|
|
border: none;
|
|
color: white;
|
|
width: 50px;
|
|
height: 50px;
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 20px;
|
|
transition: all 0.3s ease;
|
|
z-index: 1001;
|
|
}
|
|
|
|
.lightbox-nav:hover {
|
|
background: rgba(255, 255, 255, 0.3);
|
|
}
|
|
|
|
.lightbox-prev {
|
|
left: -70px;
|
|
}
|
|
|
|
.lightbox-next {
|
|
right: -70px;
|
|
}
|
|
|
|
.lightbox-counter {
|
|
position: absolute;
|
|
top: -50px;
|
|
left: 0;
|
|
color: white;
|
|
font-size: 16px;
|
|
padding: 10px;
|
|
z-index: 1001;
|
|
}
|
|
|
|
.lightbox-caption {
|
|
position: absolute;
|
|
bottom: -60px;
|
|
left: 0;
|
|
right: 0;
|
|
color: white;
|
|
text-align: center;
|
|
font-size: 16px;
|
|
padding: 10px;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
border-radius: 8px;
|
|
margin: 0 20px;
|
|
}
|
|
|
|
.main-image-container {
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Mobile Responsiveness */
|
|
@media (max-width: 480px) {
|
|
.product-title {
|
|
font-size: 20px;
|
|
}
|
|
|
|
.current-price {
|
|
font-size: 20px;
|
|
}
|
|
|
|
.tab-button {
|
|
padding: 14px 8px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.sticky-action-bar {
|
|
padding: 12px 16px;
|
|
}
|
|
|
|
.add-to-cart-btn {
|
|
font-size: 14px;
|
|
padding: 10px 16px;
|
|
}
|
|
|
|
.lightbox-nav {
|
|
width: 40px;
|
|
height: 40px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.lightbox-prev {
|
|
left: -50px;
|
|
}
|
|
|
|
.lightbox-next {
|
|
right: -50px;
|
|
}
|
|
|
|
.lightbox-caption {
|
|
font-size: 14px;
|
|
bottom: -50px;
|
|
margin: 0 10px;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
let currentImageIndex = 0;
|
|
let quantity = 1;
|
|
let isFavorite = false;
|
|
let lightboxCurrentIndex = 0;
|
|
let touchStartX = 0;
|
|
let touchEndX = 0;
|
|
|
|
const images = [
|
|
"https://placehold.co/400x400/F5F5F5/005B9A/png?text=Gạch+Eurotile+MỘC+LAM+E03",
|
|
"https://placehold.co/400x400/E8E8E8/005B9A/png?text=Chi+tiết+texture",
|
|
"https://placehold.co/400x400/DDDDDD/005B9A/png?text=Ứng+dụng+thực+tế",
|
|
"https://placehold.co/400x400/D2D2D2/005B9A/png?text=Góc+độ+khác"
|
|
];
|
|
|
|
const imageCaptions = [
|
|
"Ảnh phối cảnh dòng Mộc Lam với texture gỗ tự nhiên chân thực",
|
|
"Chi tiết texture bề mặt với độ nhám tinh tế, chống trượt an toàn",
|
|
"Ứng dụng thực tế trong không gian phòng khách hiện đại",
|
|
"Góc độ khác cho thấy độ bền màu và chất lượng sản phẩm"
|
|
];
|
|
|
|
function changeImage(index, thumbnail) {
|
|
currentImageIndex = index;
|
|
document.getElementById('mainImage').src = images[index];
|
|
|
|
// Update thumbnails
|
|
document.querySelectorAll('.thumbnail').forEach(t => t.classList.remove('active'));
|
|
thumbnail.classList.add('active');
|
|
|
|
// Update indicators
|
|
document.querySelectorAll('.indicator').forEach(i => i.classList.remove('active'));
|
|
document.querySelector(`[data-index="${index}"]`).classList.add('active');
|
|
}
|
|
|
|
function switchTab(tabName, button) {
|
|
// Update tab buttons
|
|
document.querySelectorAll('.tab-button').forEach(t => t.classList.remove('active'));
|
|
button.classList.add('active');
|
|
|
|
// Update tab content
|
|
document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
|
|
document.getElementById(tabName).classList.add('active');
|
|
}
|
|
|
|
function increaseQuantity() {
|
|
quantity++;
|
|
document.getElementById('quantityInput').value = quantity;
|
|
updateQuantityButtons();
|
|
updateConversion();
|
|
}
|
|
|
|
function decreaseQuantity() {
|
|
if (quantity > 1) {
|
|
quantity--;
|
|
document.getElementById('quantityInput').value = quantity;
|
|
updateQuantityButtons();
|
|
updateConversion();
|
|
}
|
|
}
|
|
|
|
function updateQuantity() {
|
|
const input = document.getElementById('quantityInput');
|
|
const newQuantity = parseInt(input.value);
|
|
if (newQuantity >= 1) {
|
|
quantity = newQuantity;
|
|
updateQuantityButtons();
|
|
updateConversion();
|
|
} else {
|
|
input.value = quantity;
|
|
}
|
|
}
|
|
|
|
function updateConversion() {
|
|
// Example conversion: each m² = 0.36 boxes, each box = 4 pieces
|
|
const boxes = Math.ceil(quantity / 2.78); // Round up for boxes needed
|
|
const pieces = boxes * 4;
|
|
|
|
document.getElementById('conversionText').textContent =
|
|
`Tương đương: ${boxes} hộp / ${pieces} viên`;
|
|
}
|
|
|
|
function updateQuantityButtons() {
|
|
const decreaseBtn = document.getElementById('decreaseBtn');
|
|
decreaseBtn.disabled = quantity <= 1;
|
|
}
|
|
|
|
function toggleFavorite() {
|
|
isFavorite = !isFavorite;
|
|
const btn = document.getElementById('favoriteBtn');
|
|
const icon = btn.querySelector('i');
|
|
|
|
if (isFavorite) {
|
|
icon.classList.remove('far');
|
|
icon.classList.add('fas');
|
|
icon.style.color = 'var(--danger-color)';
|
|
} else {
|
|
icon.classList.remove('fas');
|
|
icon.classList.add('far');
|
|
icon.style.color = '';
|
|
}
|
|
}
|
|
|
|
function shareProduct() {
|
|
showShareModal();
|
|
}
|
|
|
|
function showShareModal() {
|
|
const modal = document.createElement('div');
|
|
modal.className = 'share-modal';
|
|
modal.innerHTML = `
|
|
<div class="share-modal-content">
|
|
<div class="share-modal-header">
|
|
<h3>Chia sẻ sản phẩm</h3>
|
|
<button class="close-modal" onclick="closeShareModal()">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
<div class="share-options">
|
|
<button class="share-option" onclick="shareToChat()">
|
|
<i class="fas fa-comments"></i>
|
|
<span>Chia sẻ qua tin nhắn</span>
|
|
</button>
|
|
<button class="share-option" onclick="shareNative()">
|
|
<i class="fas fa-share"></i>
|
|
<span>Chia sẻ khác</span>
|
|
</button>
|
|
<button class="share-option" onclick="copyProductLink()">
|
|
<i class="fas fa-copy"></i>
|
|
<span>Sao chép link</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
document.body.appendChild(modal);
|
|
setTimeout(() => modal.classList.add('show'), 10);
|
|
}
|
|
|
|
function closeShareModal() {
|
|
const modal = document.querySelector('.share-modal');
|
|
if (modal) {
|
|
modal.classList.remove('show');
|
|
setTimeout(() => modal.remove(), 300);
|
|
}
|
|
}
|
|
|
|
function shareToChat() {
|
|
closeShareModal();
|
|
// Navigate to chat list with sharing mode
|
|
window.location.href = 'chat-list.html?mode=share&product=ET-ML-E03&name=Gạch Eurotile MỘC LAM E03&price=285.000đ/m²';
|
|
}
|
|
|
|
function shareNative() {
|
|
closeShareModal();
|
|
if (navigator.share) {
|
|
navigator.share({
|
|
title: 'Gạch Eurotile MỘC LAM E03',
|
|
text: 'Xem sản phẩm gạch granite cao cấp này!',
|
|
url: window.location.href
|
|
});
|
|
} else {
|
|
copyProductLink();
|
|
}
|
|
}
|
|
|
|
function copyProductLink() {
|
|
closeShareModal();
|
|
navigator.clipboard.writeText(window.location.href);
|
|
alert('Đã sao chép link sản phẩm!');
|
|
}
|
|
|
|
function view360Product() {
|
|
window.location.href = 'product-view-360.html';
|
|
}
|
|
|
|
function addToCart() {
|
|
alert(`Đã thêm ${quantity} m² gạch Eurotile MỘC LAM E03 vào giỏ hàng!`);
|
|
// In a real app, this would update the cart
|
|
}
|
|
|
|
// Lightbox Functions
|
|
function openLightbox(index) {
|
|
lightboxCurrentIndex = index;
|
|
const lightbox = document.getElementById('lightbox');
|
|
const lightboxImage = document.getElementById('lightbox-image');
|
|
const lightboxCaption = document.getElementById('lightbox-caption');
|
|
const lightboxCounter = document.getElementById('lightbox-counter');
|
|
|
|
lightboxImage.src = images[index];
|
|
lightboxCaption.textContent = imageCaptions[index];
|
|
lightboxCounter.textContent = `${index + 1} / ${images.length}`;
|
|
|
|
lightbox.classList.add('active');
|
|
document.body.style.overflow = 'hidden'; // Prevent background scroll
|
|
|
|
// Add touch event listeners for swipe
|
|
const lightboxContent = document.querySelector('.lightbox-content');
|
|
lightboxContent.addEventListener('touchstart', handleTouchStart, { passive: false });
|
|
lightboxContent.addEventListener('touchmove', handleTouchMove, { passive: false });
|
|
lightboxContent.addEventListener('touchend', handleTouchEnd, { passive: false });
|
|
}
|
|
|
|
function closeLightbox() {
|
|
const lightbox = document.getElementById('lightbox');
|
|
lightbox.classList.remove('active');
|
|
document.body.style.overflow = 'auto'; // Restore scroll
|
|
|
|
// Remove touch event listeners
|
|
const lightboxContent = document.querySelector('.lightbox-content');
|
|
lightboxContent.removeEventListener('touchstart', handleTouchStart);
|
|
lightboxContent.removeEventListener('touchmove', handleTouchMove);
|
|
lightboxContent.removeEventListener('touchend', handleTouchEnd);
|
|
}
|
|
|
|
function nextLightboxImage() {
|
|
lightboxCurrentIndex = (lightboxCurrentIndex + 1) % images.length;
|
|
updateLightboxImage();
|
|
}
|
|
|
|
function prevLightboxImage() {
|
|
lightboxCurrentIndex = (lightboxCurrentIndex - 1 + images.length) % images.length;
|
|
updateLightboxImage();
|
|
}
|
|
|
|
function updateLightboxImage() {
|
|
const lightboxImage = document.getElementById('lightbox-image');
|
|
const lightboxCaption = document.getElementById('lightbox-caption');
|
|
const lightboxCounter = document.getElementById('lightbox-counter');
|
|
|
|
// Add fade effect
|
|
lightboxImage.style.opacity = '0.5';
|
|
|
|
setTimeout(() => {
|
|
lightboxImage.src = images[lightboxCurrentIndex];
|
|
lightboxCaption.textContent = imageCaptions[lightboxCurrentIndex];
|
|
lightboxCounter.textContent = `${lightboxCurrentIndex + 1} / ${images.length}`;
|
|
lightboxImage.style.opacity = '1';
|
|
}, 150);
|
|
}
|
|
|
|
// Touch Event Handlers for Swipe
|
|
function handleTouchStart(event) {
|
|
event.preventDefault();
|
|
touchStartX = event.touches[0].clientX;
|
|
}
|
|
|
|
function handleTouchMove(event) {
|
|
event.preventDefault();
|
|
touchEndX = event.touches[0].clientX;
|
|
}
|
|
|
|
function handleTouchEnd(event) {
|
|
event.preventDefault();
|
|
const touchDifference = touchStartX - touchEndX;
|
|
const minSwipeDistance = 50; // Minimum swipe distance in pixels
|
|
|
|
if (Math.abs(touchDifference) > minSwipeDistance) {
|
|
if (touchDifference > 0) {
|
|
// Swiped left - next image
|
|
nextLightboxImage();
|
|
} else {
|
|
// Swiped right - previous image
|
|
prevLightboxImage();
|
|
}
|
|
}
|
|
}
|
|
|
|
// Initialize
|
|
// Review Functions
|
|
function goToWriteReview() {
|
|
// Get product info from page
|
|
const productName = document.querySelector('.product-name').textContent;
|
|
const productImage = document.getElementById('mainImage').src;
|
|
|
|
// Store in localStorage for write-review page
|
|
localStorage.setItem('reviewProduct', JSON.stringify({
|
|
name: productName,
|
|
image: productImage,
|
|
id: 'ET-ML-E03' // In production, this would be dynamic
|
|
}));
|
|
|
|
// Navigate to write review page
|
|
window.location.href = 'write-review.html';
|
|
}
|
|
|
|
// Demo function to toggle pending review display
|
|
function togglePendingReview(hasPendingReview) {
|
|
const writeReviewSection = document.getElementById('writeReviewSection');
|
|
const pendingReviewNotice = document.getElementById('pendingReviewNotice');
|
|
|
|
if (hasPendingReview) {
|
|
writeReviewSection.style.display = 'none';
|
|
pendingReviewNotice.style.display = 'block';
|
|
} else {
|
|
writeReviewSection.style.display = 'block';
|
|
pendingReviewNotice.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
// Check if user has pending review on page load
|
|
// In production, this would come from API
|
|
const userHasPendingReview = false; // Change to true to test pending review UI
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
updateQuantityButtons();
|
|
|
|
// Initialize review section
|
|
togglePendingReview(userHasPendingReview);
|
|
|
|
// Check if returning from review submission
|
|
const reviewSubmitted = localStorage.getItem('reviewJustSubmitted');
|
|
if (reviewSubmitted === 'true') {
|
|
// Show pending review
|
|
togglePendingReview(true);
|
|
localStorage.removeItem('reviewJustSubmitted');
|
|
}
|
|
|
|
// Close lightbox with Escape key
|
|
document.addEventListener('keydown', function(e) {
|
|
if (e.key === 'Escape' && document.getElementById('lightbox').classList.contains('active')) {
|
|
closeLightbox();
|
|
}
|
|
});
|
|
|
|
// Keyboard navigation in lightbox
|
|
document.addEventListener('keydown', function(e) {
|
|
if (document.getElementById('lightbox').classList.contains('active')) {
|
|
if (e.key === 'ArrowLeft') {
|
|
prevLightboxImage();
|
|
} else if (e.key === 'ArrowRight') {
|
|
nextLightboxImage();
|
|
}
|
|
}
|
|
});
|
|
|
|
// Close lightbox by clicking background
|
|
document.getElementById('lightbox').addEventListener('click', function(e) {
|
|
if (e.target === this) {
|
|
closeLightbox();
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |