794 lines
28 KiB
HTML
794 lines
28 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="vi">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Chi tiết Nhà mẫu - 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">
|
|
<style>
|
|
/* 360 View Container */
|
|
.view-360-container {
|
|
/*margin: 16px;*/
|
|
background: var(--white);
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
box-shadow: var(--shadow-medium);
|
|
}
|
|
|
|
/* 360 Preview Card */
|
|
.view-360-preview {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 400px;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
overflow: hidden;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.view-360-preview:hover {
|
|
transform: scale(1.02);
|
|
}
|
|
|
|
.view-360-preview::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: url('https://images.unsplash.com/photo-1600585154340-be6161a56a0c?w=800&h=600&fit=crop') center/cover;
|
|
opacity: 0.3;
|
|
}
|
|
|
|
.view-360-content {
|
|
position: relative;
|
|
z-index: 1;
|
|
text-align: center;
|
|
color: var(--white);
|
|
}
|
|
|
|
.view-360-icon {
|
|
width: 120px;
|
|
height: 120px;
|
|
margin: 0 auto 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: rgba(255, 255, 255, 0.2);
|
|
border-radius: 50%;
|
|
border: 3px solid var(--white);
|
|
position: relative;
|
|
animation: pulse 2s infinite;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0% {
|
|
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
|
|
}
|
|
70% {
|
|
box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
|
|
}
|
|
100% {
|
|
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
|
|
}
|
|
}
|
|
|
|
.view-360-icon svg {
|
|
width: 80px;
|
|
height: 80px;
|
|
fill: var(--white);
|
|
}
|
|
|
|
.view-360-text {
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
margin-bottom: 8px;
|
|
text-shadow: 0 2px 4px rgba(0,0,0,0.2);
|
|
}
|
|
|
|
.view-360-subtitle {
|
|
font-size: 14px;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.view-360-button {
|
|
margin-top: 20px;
|
|
padding: 12px 32px;
|
|
background: var(--white);
|
|
color: var(--primary-blue);
|
|
border: none;
|
|
border-radius: 24px;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
cursor: pointer;
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.view-360-button:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 6px 20px rgba(0,0,0,0.2);
|
|
}
|
|
.webview-container {
|
|
width: 100%;
|
|
height: 300px;
|
|
background: #f3f4f6;
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
margin-bottom: 24px;
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.webview-iframe {
|
|
width: 100%;
|
|
height: 100%;
|
|
border: none;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.webview-placeholder {
|
|
text-align: center;
|
|
color: #6b7280;
|
|
}
|
|
|
|
.webview-placeholder i {
|
|
font-size: 3rem;
|
|
margin-bottom: 12px;
|
|
color: #d1d5db;
|
|
}
|
|
|
|
.project-info {
|
|
background: white;
|
|
border-radius: 12px;
|
|
padding: 20px;
|
|
margin-bottom: 24px;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
|
}
|
|
|
|
.project-title {
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
color: #1f2937;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.project-specs {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
gap: 16px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.spec-item {
|
|
text-align: center;
|
|
padding: 16px 12px;
|
|
background: #f8fafc;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.spec-label {
|
|
font-size: 12px;
|
|
color: #6b7280;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.spec-value {
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
color: #1f2937;
|
|
}
|
|
|
|
.gallery-section {
|
|
background: white;
|
|
border-radius: 12px;
|
|
padding: 20px;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
|
}
|
|
|
|
.gallery-title {
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
color: #1f2937;
|
|
margin-bottom: 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.gallery-scroll {
|
|
display: flex;
|
|
gap: 12px;
|
|
overflow-x: auto;
|
|
padding-bottom: 8px;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
.gallery-item {
|
|
flex-shrink: 0;
|
|
width: 120px;
|
|
height: 120px;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.gallery-item:hover {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.gallery-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.lightbox.active {
|
|
display: flex;
|
|
}
|
|
|
|
.lightbox-content {
|
|
position: relative;
|
|
max-width: 90%;
|
|
max-height: 90%;
|
|
}
|
|
|
|
.lightbox-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.lightbox-caption {
|
|
position: absolute;
|
|
bottom: -50px;
|
|
left: 0;
|
|
right: 0;
|
|
color: white;
|
|
text-align: center;
|
|
font-size: 16px;
|
|
padding: 10px;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.loading-state {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 200px;
|
|
color: #6b7280;
|
|
}
|
|
|
|
.spinner {
|
|
width: 40px;
|
|
height: 40px;
|
|
border: 4px solid #f3f4f6;
|
|
border-top: 4px solid #2563eb;
|
|
border-radius: 50%;
|
|
animation: spin 1s linear infinite;
|
|
margin-right: 12px;
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.project-specs {
|
|
grid-template-columns: 1fr;
|
|
gap: 12px;
|
|
}
|
|
|
|
.spec-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
text-align: left;
|
|
padding: 12px 16px;
|
|
}
|
|
|
|
.spec-value {
|
|
margin-left: auto;
|
|
}
|
|
|
|
.gallery-item {
|
|
width: 100px;
|
|
height: 100px;
|
|
}
|
|
|
|
.lightbox-nav {
|
|
width: 40px;
|
|
height: 40px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.lightbox-prev {
|
|
left: -50px;
|
|
}
|
|
|
|
.lightbox-next {
|
|
right: -50px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="page-wrapper">
|
|
<!-- Header -->
|
|
<div class="header">
|
|
<a href="nha-mau.html" class="back-button">
|
|
<i class="fas fa-arrow-left"></i>
|
|
</a>
|
|
<h1 class="header-title">Chi tiết Nhà mẫu</h1>
|
|
<button class="icon-button" onclick="shareModel()">
|
|
<i class="fas fa-share-alt"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="container" >
|
|
<!-- 360° View Container -->
|
|
<div class="view-360-container">
|
|
<!-- 360° Preview/Launch Card -->
|
|
<div class="view-360-preview" onclick="window.location.href='https://vr.house3d.com/web/panorama-player/H00179549'">
|
|
<div class="view-360-content">
|
|
<div class="view-360-icon">
|
|
<!-- Custom 360° SVG Icon -->
|
|
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
|
|
<g stroke="currentColor" stroke-width="3" fill="none">
|
|
<!-- Circular arrow -->
|
|
<path d="M 80 50 A 30 30 0 1 1 50 20" />
|
|
<polygon points="48,15 48,25 58,20" fill="currentColor"/>
|
|
|
|
<!-- 360° text -->
|
|
<text x="50" y="50" text-anchor="middle" dominant-baseline="middle"
|
|
font-family="Roboto, sans-serif" font-size="20" fill="currentColor">
|
|
360°
|
|
</text>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
<div class="view-360-text">Xem nhà mẫu 360°</div>
|
|
<div class="view-360-subtitle">Trải nghiệm không gian thực tế ảo</div>
|
|
<button class="view-360-button">
|
|
<i class="fas fa-play"></i>
|
|
Bắt đầu tham quan
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 360° WebView Container -->
|
|
<!--<div class="webview-container" id="webview-container">-->
|
|
<!-- Loading State -->
|
|
<!--<div class="loading-state" id="loading-state">
|
|
<div class="spinner"></div>
|
|
<span>Đang tải mô hình 360°...</span>
|
|
</div>-->
|
|
|
|
<!-- Placeholder for 360° iframe -->
|
|
<!--<iframe
|
|
id="webview-iframe"
|
|
class="webview-iframe"
|
|
src="about:blank"
|
|
title="Mô hình 360° Nhà mẫu"
|
|
style="display: none;">
|
|
</iframe>-->
|
|
|
|
<!-- Fallback placeholder -->
|
|
<!--<div class="webview-placeholder" id="webview-placeholder" style="display: none;">
|
|
<i class="fas fa-cube"></i>
|
|
<h3>Mô hình 360°</h3>
|
|
<p>Đang tải trình xem 3D...</p>
|
|
</div>
|
|
</div>-->
|
|
|
|
<!-- Project Information -->
|
|
<div class="project-info">
|
|
<h2 class="project-title" id="project-title">Căn hộ Studio</h2>
|
|
|
|
<div class="project-specs">
|
|
<div class="spec-item">
|
|
<div class="spec-label">Diện tích</div>
|
|
<div class="spec-value" id="project-area">35m²</div>
|
|
</div>
|
|
<div class="spec-item">
|
|
<div class="spec-label">Địa điểm</div>
|
|
<div class="spec-value" id="project-location">Quận 7</div>
|
|
</div>
|
|
<div class="spec-item">
|
|
<div class="spec-label">Phong cách</div>
|
|
<div class="spec-value" id="project-style">Hiện đại</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="color: #4b5563; line-height: 1.6;" id="project-description">
|
|
Thiết kế hiện đại cho căn hộ studio 35m², tối ưu không gian sống với gạch men cao cấp và màu sắc hài hòa.
|
|
Sử dụng gạch granite nhập khẩu cho khu vực phòng khách và gạch ceramic chống thấm cho khu vực ẩm ướt.
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Image Gallery -->
|
|
<div class="gallery-section">
|
|
<h3 class="gallery-title">
|
|
<i class="fas fa-images"></i>
|
|
Thư viện Hình ảnh
|
|
</h3>
|
|
|
|
<div class="gallery-scroll" id="gallery-scroll">
|
|
<div class="gallery-item" onclick="openLightbox(0)">
|
|
<img src="https://images.unsplash.com/photo-1600596542815-ffad4c1539a9?w=200&h=200&fit=crop"
|
|
alt="Phối cảnh tổng thể"
|
|
class="gallery-image">
|
|
</div>
|
|
<div class="gallery-item" onclick="openLightbox(1)">
|
|
<img src="https://center.eurotile.vn/data/eurotileData/design/202009/23/4/main_img.jpg"
|
|
alt="Khu vực phòng khách"
|
|
class="gallery-image">
|
|
</div>
|
|
<div class="gallery-item" onclick="openLightbox(2)">
|
|
<img src="https://center.eurotile.vn/data/eurotileData/design/202009/23/4/project_img_1.jpg?v=1"
|
|
alt="Phòng ngủ chính"
|
|
class="gallery-image">
|
|
</div>
|
|
<div class="gallery-item" onclick="openLightbox(3)">
|
|
<img src="https://center.eurotile.vn/data/eurotileData/design/202009/23/4/project_img_0.jpg?v=1"
|
|
alt="Khu vực bếp"
|
|
class="gallery-image">
|
|
</div>
|
|
<div class="gallery-item" onclick="openLightbox(4)">
|
|
<img src="https://images.unsplash.com/photo-1620626011761-996317b8d101?w=200&h=200&fit=crop"
|
|
alt="Phòng tắm hiện đại"
|
|
class="Phòng">
|
|
</div>
|
|
<div class="gallery-item" onclick="openLightbox(5)">
|
|
<img src="https://center.eurotile.vn/data/eurotileData/design/202009/23/4/project_img_3.jpg?v=1"
|
|
alt="Khu vực bàn ăn"
|
|
class="gallery-image">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bottom Navigation -->
|
|
<!--<div class="bottom-nav">
|
|
<a href="index.html" class="nav-item">
|
|
<i class="fas fa-home"></i>
|
|
<span>Trang chủ</span>
|
|
</a>
|
|
<a href="loyalty.html" class="nav-item">
|
|
<i class="fas fa-star"></i>
|
|
<span>Hội viên</span>
|
|
</a>
|
|
<a href="promotions.html" class="nav-item">
|
|
<i class="fas fa-tags"></i>
|
|
<span>Khuyến mãi</span>
|
|
</a>
|
|
<a href="notifications.html" class="nav-item">
|
|
<i class="fas fa-bell"></i>
|
|
<span>Thông báo</span>
|
|
</a>
|
|
<a href="account.html" class="nav-item active">
|
|
<i class="fas fa-user"></i>
|
|
<span>Cài đặt</span>
|
|
</a>
|
|
</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 / 6</div>
|
|
|
|
<img id="lightbox-image" class="lightbox-image" src="" alt="">
|
|
|
|
<div class="lightbox-caption" id="lightbox-caption">
|
|
Phối cảnh tổng thể căn hộ studio với thiết kế hiện đại
|
|
</div>
|
|
|
|
<button class="lightbox-nav lightbox-prev" onclick="prevImage()">
|
|
<i class="fas fa-chevron-left"></i>
|
|
</button>
|
|
|
|
<button class="lightbox-nav lightbox-next" onclick="nextImage()">
|
|
<i class="fas fa-chevron-right"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Gallery data
|
|
const galleryData = [
|
|
{
|
|
src: "https://images.unsplash.com/photo-1600596542815-ffad4c1539a9?w=800&h=600&fit=crop",
|
|
caption: "Phối cảnh tổng thể căn hộ studio với thiết kế hiện đại"
|
|
},
|
|
{
|
|
src: "https://center.eurotile.vn/data/eurotileData/design/202009/23/4/main_img.jpg",
|
|
caption: "Khu vực phòng khách với gạch granite cao cấp"
|
|
},
|
|
{
|
|
src: "https://center.eurotile.vn/data/eurotileData/design/202009/23/4/project_img_1.jpg?v=1",
|
|
caption: "Phòng ngủ chính với gạch ceramic màu trung tính"
|
|
},
|
|
{
|
|
src: "https://center.eurotile.vn/data/eurotileData/design/202009/23/4/project_img_0.jpg?v=1",
|
|
caption: "Khu vực bếp với gạch mosaic điểm nhấn"
|
|
},
|
|
{
|
|
src: "https://images.unsplash.com/photo-1620626011761-996317b8d101?w=200&h=200&fit=crop",
|
|
caption: "Phòng tắm hiện đại với gạch chống thấm cao cấp"
|
|
},
|
|
{
|
|
src: "https://center.eurotile.vn/data/eurotileData/design/202009/23/4/project_img_3.jpg?v=1",
|
|
caption: "Khu vực bàn ăn ấm cúng"
|
|
}
|
|
];
|
|
|
|
let currentImageIndex = 0;
|
|
|
|
// Project data mapping
|
|
const projectData = {
|
|
'studio-apartment': {
|
|
title: 'Căn hộ Studio',
|
|
area: '35m²',
|
|
location: 'Quận 7',
|
|
style: 'Hiện đại',
|
|
description: 'Thiết kế hiện đại cho căn hộ studio 35m², tối ưu không gian sống với gạch men cao cấp và màu sắc hài hòa. Sử dụng gạch granite nhập khẩu cho khu vực phòng khách và gạch ceramic chống thấm cho khu vực ẩm ướt.',
|
|
iframe360: 'https://example.com/360-viewer/studio-apartment' // placeholder URL
|
|
},
|
|
'modern-villa': {
|
|
title: 'Biệt thự Hiện đại',
|
|
area: '250m²',
|
|
location: 'Quận 2',
|
|
style: 'Hiện đại',
|
|
description: 'Biệt thự 3 tầng với phong cách kiến trúc hiện đại, sử dụng gạch granite và ceramic premium tạo điểm nhấn cho từng không gian sống.',
|
|
iframe360: 'https://example.com/360-viewer/modern-villa'
|
|
},
|
|
'minimalist-house': {
|
|
title: 'Nhà phố Tối giản',
|
|
area: '120m²',
|
|
location: 'Quận 10',
|
|
style: 'Tối giản',
|
|
description: 'Nhà phố 4x15m với thiết kế tối giản, tận dụng ánh sáng tự nhiên và gạch men màu trung tính để tạo không gian sống thoáng đãng.',
|
|
iframe360: 'https://example.com/360-viewer/minimalist-house'
|
|
},
|
|
'luxury-condo': {
|
|
title: 'Chung cư Cao cấp',
|
|
area: '85m²',
|
|
location: 'Quận 1',
|
|
style: 'Sang trọng',
|
|
description: 'Căn hộ 3PN với nội thất sang trọng, sử dụng gạch marble và ceramic cao cấp nhập khẩu Italy để tạo điểm nhấn đẳng cấp.',
|
|
iframe360: 'https://example.com/360-viewer/luxury-condo'
|
|
}
|
|
};
|
|
|
|
// Initialize page with project data
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
const projectId = urlParams.get('id') || 'studio-apartment';
|
|
|
|
loadProjectData(projectId);
|
|
simulateIframeLoading();
|
|
});
|
|
|
|
function loadProjectData(projectId) {
|
|
const project = projectData[projectId];
|
|
if (!project) return;
|
|
|
|
document.getElementById('project-title').textContent = project.title;
|
|
document.getElementById('project-area').textContent = project.area;
|
|
document.getElementById('project-location').textContent = project.location;
|
|
document.getElementById('project-style').textContent = project.style;
|
|
document.getElementById('project-description').textContent = project.description;
|
|
|
|
// Update page title
|
|
document.title = `${project.title} - Chi tiết Nhà mẫu`;
|
|
}
|
|
|
|
function simulateIframeLoading() {
|
|
const loadingState = document.getElementById('loading-state');
|
|
const iframe = document.getElementById('webview-iframe');
|
|
const placeholder = document.getElementById('webview-placeholder');
|
|
|
|
// Simulate loading time
|
|
setTimeout(() => {
|
|
loadingState.style.display = 'none';
|
|
|
|
// In a real app, you would load the actual 360° URL
|
|
// For demo, we'll show a placeholder
|
|
placeholder.style.display = 'flex';
|
|
|
|
// Uncomment below to load actual iframe in production:
|
|
// iframe.src = project.iframe360;
|
|
// iframe.style.display = 'block';
|
|
}, 2000);
|
|
}
|
|
|
|
function openLightbox(index) {
|
|
currentImageIndex = index;
|
|
const lightbox = document.getElementById('lightbox');
|
|
const image = document.getElementById('lightbox-image');
|
|
const caption = document.getElementById('lightbox-caption');
|
|
const counter = document.getElementById('lightbox-counter');
|
|
|
|
image.src = galleryData[index].src;
|
|
caption.textContent = galleryData[index].caption;
|
|
counter.textContent = `${index + 1} / ${galleryData.length}`;
|
|
|
|
lightbox.classList.add('active');
|
|
document.body.style.overflow = 'hidden'; // Prevent background scroll
|
|
}
|
|
|
|
function closeLightbox() {
|
|
const lightbox = document.getElementById('lightbox');
|
|
lightbox.classList.remove('active');
|
|
document.body.style.overflow = 'auto'; // Restore scroll
|
|
}
|
|
|
|
function nextImage() {
|
|
currentImageIndex = (currentImageIndex + 1) % galleryData.length;
|
|
updateLightboxImage();
|
|
}
|
|
|
|
function prevImage() {
|
|
currentImageIndex = (currentImageIndex - 1 + galleryData.length) % galleryData.length;
|
|
updateLightboxImage();
|
|
}
|
|
|
|
function updateLightboxImage() {
|
|
const image = document.getElementById('lightbox-image');
|
|
const caption = document.getElementById('lightbox-caption');
|
|
const counter = document.getElementById('lightbox-counter');
|
|
|
|
image.src = galleryData[currentImageIndex].src;
|
|
caption.textContent = galleryData[currentImageIndex].caption;
|
|
counter.textContent = `${currentImageIndex + 1} / ${galleryData.length}`;
|
|
}
|
|
|
|
function shareModel() {
|
|
const projectTitle = document.getElementById('project-title').textContent;
|
|
|
|
if (navigator.share) {
|
|
navigator.share({
|
|
title: projectTitle,
|
|
text: `Xem mô hình 360° ${projectTitle}`,
|
|
url: window.location.href
|
|
}).catch(console.error);
|
|
} else {
|
|
// Fallback: copy URL to clipboard
|
|
navigator.clipboard.writeText(window.location.href).then(() => {
|
|
showToast('Đã sao chép link chia sẻ!');
|
|
});
|
|
}
|
|
}
|
|
|
|
function showToast(message) {
|
|
const toast = document.createElement('div');
|
|
toast.className = 'fixed top-20 left-1/2 transform -translate-x-1/2 bg-green-500 text-white px-4 py-2 rounded-lg z-50 transition-all duration-300';
|
|
toast.textContent = message;
|
|
document.body.appendChild(toast);
|
|
|
|
setTimeout(() => {
|
|
toast.style.opacity = '0';
|
|
setTimeout(() => {
|
|
document.body.removeChild(toast);
|
|
}, 300);
|
|
}, 2000);
|
|
}
|
|
|
|
// Close lightbox with Escape key
|
|
document.addEventListener('keydown', function(e) {
|
|
if (e.key === 'Escape' && document.getElementById('lightbox').classList.contains('active')) {
|
|
closeLightbox();
|
|
}
|
|
});
|
|
|
|
// Close lightbox by clicking background
|
|
document.getElementById('lightbox').addEventListener('click', function(e) {
|
|
if (e.target === this) {
|
|
closeLightbox();
|
|
}
|
|
});
|
|
|
|
// Keyboard navigation in lightbox
|
|
document.addEventListener('keydown', function(e) {
|
|
if (document.getElementById('lightbox').classList.contains('active')) {
|
|
if (e.key === 'ArrowLeft') {
|
|
prevImage();
|
|
} else if (e.key === 'ArrowRight') {
|
|
nextImage();
|
|
}
|
|
}
|
|
});
|
|
|
|
</script>
|
|
</body>
|
|
</html> |