renolation/worker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix

Browse Source
This commit is contained in:
Phuoc Nguyen
2025-11-14 11:50:40 +07:00
parent 0093b62c29
commit 4738553d2e
6 changed files with 1270 additions and 432 deletions
Download Patch File Download Diff File Expand all files Collapse all files

567
html/product-detail.html
View File

@@ -29,8 +29,8 @@
<div class="product-detail-content">
<!-- Image Gallery Section -->
<div class="product-gallery-section">
<div class="main-image-container" >
<img id="mainImage" onclick="openLightbox(0)" src="https://www.eurotile.vn/pictures/catalog/product/0-gachkholon/cat-tuong/CAT-S01G-1.jpg" alt="Gạch Eurotile MỘC LAM E03" class="main-product-image">
<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°">
@@ -50,32 +50,32 @@
<!-- Thumbnail row -->
<div class="thumbnail-gallery">
<div class="thumbnail active" onclick="changeImage(0, this)">
<img src="https://www.eurotile.vn/pictures/catalog/product/0-gachkholon/cat-tuong/CAT-S01G-1.jpg" alt="Thumbnail 1">
<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://www.eurotile.vn/pictures/catalog/product/0-gachkholon/cat-tuong/CAT-S01G-2.jpg" alt="Thumbnail 2">
<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://www.eurotile.vn/pictures/catalog/product/0-gachkholon/cat-tuong/CAT-S01G-3.jpg" alt="Thumbnail 3">
<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://www.eurotile.vn/pictures/catalog/product/0-gachkholon/cat-tuong/CAT-S01G-4.jpg" alt="Thumbnail 4">
<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: CAT S01G</div>
<h1 class="product-title">Gạch Cát Tường 1200x1200</h1>
<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>-->
<span class="original-price">320.000 VND/m²</span>
<span class="discount-badge">-11%</span>
</div>
<!-- Rating & Reviews -->
<!--<div class="rating-section">
<!-- Rating & Reviews -->
<div class="rating-section">
<div class="rating-stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
@@ -84,57 +84,17 @@
<i class="fas fa-star-half-alt"></i>
</div>
<span class="rating-text">4.8 (125 đánh giá)</span>
</div>-->
<div class="quick-info">
<div class="info-item">
<!--<i class="fas fa-cube info-icon"></i>-->
<i class="fas fa-expand info-icon"></i>
<div class="info-label">Kích thước</div>
<div class="info-value">1200x1200</div>
</div>
<div class="info-item">
<i class="fas fa-cube info-icon"></i>
<div class="info-label">Đóng gói</div>
<div class="info-value">2 viên/thùng</div>
</div>
<div class="info-item">
<i class="fas fa-truck info-icon"></i>
<!--<i class="fas fa-box-open info-icon"></i>
<!--<i class="fas fa-pallet info-icon"></i>-->
<div class="info-label">Giao hàng</div>
<div class="info-value">2-3 Ngày</div>
</div>
</div>
</div>
<!-- Product Tabs Section -->
<div class="product-tabs-section">
<div class="tab-navigation">
<!--<button class="tab-button" onclick="switchTab('description', this)">Mô tả</button>-->
<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" id="description">
<div class="tab-content-wrapper">
<h3>Bộ sưu tập Mộc Lam</h3>
<p>Gạch granite Eurotile MỘC LAM E03 lấy cảm hứng từ vẻ đẹp tự nhiên của gỗ tự nhiên, mang đến không gian ấm cúng và gần gũi. Với bề mặt có texture tinh tế, sản phẩm tạo nên những đường vân gỗ tự nhiên chân thực.</p>
<h4>Đặc điểm nổi bật:</h4>
<ul class="feature-list">
<li><i class="fas fa-check"></i>Bề mặt chống trầy xước cao</li>
<li><i class="fas fa-check"></i>Khả năng chống thấm nước tốt</li>
<li><i class="fas fa-check"></i>Màu sắc bền đẹp theo thời gian</li>
<li><i class="fas fa-check"></i>Dễ dàng vệ sinh và bảo trì</li>
<li><i class="fas fa-check"></i>Thân thiện với môi trường</li>
</ul>
<h4>Ứng dụng:</h4>
<p>Phù hợp cho phòng khách, phòng ngủ, hành lang, văn phòng và các không gian thương mại. Đặc biệt phù hợp với phong cách nội thất hiện đại, tối giản và Scandinavian.</p>
</div>
</div>-->
<div class="tab-content active" id="specifications">
<div class="specifications-table">
<div class="spec-row">
@@ -149,6 +109,10 @@
<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>
@@ -161,6 +125,14 @@
<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>
@@ -169,60 +141,167 @@
</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">4.8</div>
<div class="rating-score-large">4.5</div>
<div class="rating-details">
<div class="rating-stars-large">
<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">125 đánh giá</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>
<div class="review-item">
<div class="reviewer-info">
<div class="reviewer-avatar">
<i class="fas fa-user"></i>
<!-- 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="reviewer-details">
<div class="reviewer-name">Nguyễn Văn A</div>
<div class="review-date">2 tuần trước</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-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 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.</p>
</div>
<div class="review-item">
<div class="reviewer-info">
<div class="reviewer-avatar">
<i class="fas fa-user"></i>
<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="reviewer-details">
<div class="reviewer-name">Trần Thị B</div>
<div class="review-date">1 tháng trước</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-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 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>
<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.</p>
</div>
</div>
</div>
@@ -230,24 +309,9 @@
<!-- Sticky Action Bar -->
<div class="sticky-action-bar">
<!--<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()">
<label class="quantity-label">(m²)</label>
<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 viên / 1.08 m²
</div>-->
<div class="quantity-section">
<label class="quantity-label">Số lượng (m²)</label>
<div class="quantity-controls" style="width: 142px;">
<div class="quantity-controls">
<button class="qty-btn" onclick="decreaseQuantity()" id="decreaseBtn">
<i class="fas fa-minus"></i>
</button>
@@ -257,9 +321,9 @@
</button>
</div>
<div class="conversion-text" id="conversionText">
Tương đương: 3 viên / 1.08 m²
</div>
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>
@@ -679,6 +743,184 @@
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;
@@ -695,14 +937,6 @@
z-index: 100;
}
/*.quantity-controls {
display: flex;
align-items: center;
border: 1px solid var(--border-color);
border-radius: 8px;
overflow: hidden;
}*/
.quantity-section {
display: flex;
flex-direction: column;
@@ -715,6 +949,13 @@
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;
@@ -722,6 +963,7 @@
border-radius: 8px;
overflow: hidden;
}
.qty-btn {
width: 40px;
height: 40px;
@@ -935,20 +1177,6 @@
margin: 0 10px;
}
}
.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;
}
</style>
<script>
@@ -960,17 +1188,17 @@
let touchEndX = 0;
const images = [
"https://www.eurotile.vn/pictures/catalog/product/0-gachkholon/cat-tuong/CAT-S01G-1.jpg",
"https://www.eurotile.vn/pictures/catalog/product/0-gachkholon/cat-tuong/CAT-S01G-2.jpg",
"https://www.eurotile.vn/pictures/catalog/product/0-gachkholon/cat-tuong/CAT-S01G-3.jpg",
"https://www.eurotile.vn/pictures/catalog/product/0-gachkholon/cat-tuong/CAT-S01G-4.jpg"
"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 = [
"Face A",
"Face B",
"Face C",
"Face D"
"Ả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) {
@@ -1018,11 +1246,21 @@
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;
@@ -1113,7 +1351,7 @@
}
function view360Product() {
window.location.href = 'https://design.eurotile.vn/pub/tool/panorama/show?obsPlanId=3FO3H1VE59R5&locale=en_US&_gl=1*1udzqeo*_gcl_au*MTI3NjIxMzY1NS4xNzU5NzE2Mjg5';
window.location.href = 'product-view-360.html';
}
function addToCart() {
@@ -1209,9 +1447,55 @@
}
// 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')) {
@@ -1237,15 +1521,6 @@
}
});
});
function updateConversion() {
// Example conversion: each m² = 0.36 boxes, each box = 4 pieces
const pieces = Math.ceil(quantity / 0.36); // Round up for boxes needed
const dientich = parseFloat((pieces * 0.36).toFixed(2));
document.getElementById('conversionText').textContent =
`Tương đương: ${pieces} viên / ${dientich} m²`;
}
</script>
</body>
</html>