1251 lines
42 KiB
HTML
1251 lines
42 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" >
|
|
<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">
|
|
|
|
<!-- 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://www.eurotile.vn/pictures/catalog/product/0-gachkholon/cat-tuong/CAT-S01G-1.jpg" 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">
|
|
</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">
|
|
</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">
|
|
</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-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 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">
|
|
<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">Độ 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">Tiêu chuẩn</div>
|
|
<div class="spec-value">TCVN 9081:2012, ISO 13006</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tab-content" id="reviews">
|
|
<div class="reviews-summary">
|
|
<div class="rating-overview">
|
|
<div class="rating-score">4.8</div>
|
|
<div class="rating-details">
|
|
<div class="rating-stars-large">
|
|
<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>
|
|
</div>
|
|
</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">Nguyễn Văn A</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>
|
|
<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>
|
|
<div class="reviewer-details">
|
|
<div class="reviewer-name">Trần Thị B</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>
|
|
<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>
|
|
</div>
|
|
|
|
<!-- 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;">
|
|
<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>
|
|
</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);
|
|
}
|
|
|
|
/* 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-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;
|
|
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;
|
|
}
|
|
}
|
|
|
|
|
|
.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>
|
|
let currentImageIndex = 0;
|
|
let quantity = 1;
|
|
let isFavorite = false;
|
|
let lightboxCurrentIndex = 0;
|
|
let touchStartX = 0;
|
|
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"
|
|
];
|
|
|
|
const imageCaptions = [
|
|
"Face A",
|
|
"Face B",
|
|
"Face C",
|
|
"Face D"
|
|
];
|
|
|
|
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();
|
|
} else {
|
|
input.value = quantity;
|
|
}
|
|
}
|
|
|
|
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 = 'https://design.eurotile.vn/pub/tool/panorama/show?obsPlanId=3FO3H1VE59R5&locale=en_US&_gl=1*1udzqeo*_gcl_au*MTI3NjIxMzY1NS4xNzU5NzE2Mjg5';
|
|
}
|
|
|
|
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
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
updateQuantityButtons();
|
|
|
|
// 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();
|
|
}
|
|
});
|
|
});
|
|
|
|
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> |