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

add price policy

Browse Source
This commit is contained in:
Phuoc Nguyen
2025-11-03 11:20:09 +07:00
parent c0527a086c
commit 21c1c3372c
53 changed files with 7160 additions and 2361 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
html/product-detail.html
View File

@@ -71,8 +71,8 @@
<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">
@@ -87,19 +87,22 @@
</div>-->
<div class="quick-info">
<div class="info-item">
<i class="fas fa-cube info-icon"></i>
<!--<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-shield-alt info-icon"></i>
<div class="info-label">Bảo hành</div>
<div class="info-value">15 năm</div>
<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 class="info-value">2-3 Ngày</div>
</div>
</div>
</div>
@@ -107,13 +110,13 @@
<!-- Product Tabs Section -->
<div class="product-tabs-section">
<div class="tab-navigation">
<button class="tab-button active" onclick="switchTab('description', this)">Mô tả</button>
<button class="tab-button" onclick="switchTab('specifications', this)">Thông số</button>
<!--<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 active" id="description">
<!--<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>
@@ -130,9 +133,9 @@
<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>-->
<div class="tab-content" id="specifications">
<div class="tab-content active" id="specifications">
<div class="specifications-table">
<div class="spec-row">
<div class="spec-label">Kích thước</div>
@@ -146,10 +149,6 @@
<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>
@@ -162,14 +161,6 @@
<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>
@@ -239,15 +230,36 @@
<!-- Sticky Action Bar -->
<div class="sticky-action-bar">
<div class="quantity-controls">
<!--<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;">
<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 viên / 1.08 m²
</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>
@@ -683,6 +695,26 @@
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;
gap: 8px;
}
.quantity-label {
font-size: 12px;
color: var(--text-muted);
font-weight: 500;
}
.quantity-controls {
display: flex;
align-items: center;
@@ -690,7 +722,6 @@
border-radius: 8px;
overflow: hidden;
}
.qty-btn {
width: 40px;
height: 40px;
@@ -904,6 +935,20 @@
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>
@@ -955,6 +1000,7 @@
quantity++;
document.getElementById('quantityInput').value = quantity;
updateQuantityButtons();
updateConversion();
}
function decreaseQuantity() {
@@ -962,6 +1008,7 @@
quantity--;
document.getElementById('quantityInput').value = quantity;
updateQuantityButtons();
updateConversion();
}
}
@@ -1190,6 +1237,15 @@
}
});
});
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>