537 lines
17 KiB
HTML
537 lines
17 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="vi">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Xem 360° - 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="product-detail.html" class="back-button">
|
|
<i class="fas fa-arrow-left"></i>
|
|
</a>
|
|
<h1 class="header-title">Xem 360° - Gạch Eurotile MỘC LAM E03</h1>
|
|
<div class="header-actions">
|
|
<button class="header-action-btn" onclick="shareProduct360()">
|
|
<i class="fas fa-share"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="view-360-content">
|
|
<!-- 360° Viewer Container -->
|
|
<div class="viewer-360-container">
|
|
<!-- Placeholder Image -->
|
|
<div class="viewer-360-main">
|
|
<!--<img id="product360Image"
|
|
src="https://placehold.co/600x600/F5F5F5/005B9A/png?text=Gạch+Eurotile+MỘC+LAM+E03+360°"
|
|
alt="Gạch Eurotile MỘC LAM E03 - Xem 360°">-->
|
|
|
|
<!-- Nhúng link VR360 -->
|
|
<iframe
|
|
src="https://design.eurotile.vn/pub/tool/panorama/show?obsPlanId=3FO3H1VE59R5&locale=en_US&_gl=1*1udzqeo*_gcl_au*MTI3NjIxMzY1NS4xNzU5NzE2Mjg5"
|
|
width="100%"
|
|
height="600"
|
|
style="border: none; border-radius: 12px;"
|
|
allowfullscreen>
|
|
</iframe>
|
|
|
|
<!-- 360° Indicator -->
|
|
<div class="rotation-indicator">
|
|
<i class="fas fa-sync-alt"></i>
|
|
<span>Vuốt để xoay 360°</span>
|
|
</div>
|
|
|
|
<!-- Touch/Mouse Overlay -->
|
|
<div class="viewer-overlay"
|
|
ontouchstart="startRotation(event)"
|
|
ontouchmove="rotateProduct(event)"
|
|
ontouchend="endRotation()"
|
|
onmousedown="startRotation(event)"
|
|
onmousemove="rotateProduct(event)"
|
|
onmouseup="endRotation()"
|
|
onmouseleave="endRotation()">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Controls -->
|
|
<div class="viewer-controls">
|
|
<button class="control-btn" onclick="autoRotate()" id="autoRotateBtn">
|
|
<i class="fas fa-play"></i>
|
|
<span>Tự động xoay</span>
|
|
</button>
|
|
<button class="control-btn" onclick="resetView()">
|
|
<i class="fas fa-redo"></i>
|
|
<span>Đặt lại</span>
|
|
</button>
|
|
<button class="control-btn" onclick="toggleFullscreen()">
|
|
<i class="fas fa-expand"></i>
|
|
<span>Toàn màn hình</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Product Info Summary -->
|
|
<div class="product-info-360">
|
|
<div class="product-name-360">Gạch Eurotile MỘC LAM E03</div>
|
|
<div class="product-price-360">
|
|
<span class="price-current">285.000 VND/m²</span>
|
|
<span class="price-original">320.000 VND/m²</span>
|
|
</div>
|
|
<div class="product-dimensions">Kích thước: 60cm x 60cm</div>
|
|
</div>
|
|
|
|
<!-- Instructions -->
|
|
<div class="instructions-card">
|
|
<h3><i class="fas fa-info-circle"></i> Hướng dẫn sử dụng</h3>
|
|
<ul>
|
|
<li><i class="fas fa-hand-pointer"></i> Vuốt trái/phải để xoay sản phẩm 360°</li>
|
|
<li><i class="fas fa-play"></i> Nhấn "Tự động xoay" để xem tự động</li>
|
|
<li><i class="fas fa-expand"></i> Chế độ toàn màn hình để xem chi tiết hơn</li>
|
|
<li><i class="fas fa-redo"></i> Đặt lại để quay về góc nhìn ban đầu</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Action Bar -->
|
|
<div class="action-bar-360">
|
|
<button class="btn-back" onclick="goBackToProduct()">
|
|
<i class="fas fa-arrow-left"></i>
|
|
Quay lại sản phẩm
|
|
</button>
|
|
<button class="btn-add-cart" onclick="addToCartFrom360()">
|
|
<i class="fas fa-shopping-cart"></i>
|
|
Thêm vào giỏ
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.view-360-content {
|
|
padding: 0 0 100px 0;
|
|
}
|
|
|
|
.viewer-360-container {
|
|
background: var(--white);
|
|
margin: 0;
|
|
padding: 20px;
|
|
border-radius: 0 0 16px 16px;
|
|
box-shadow: var(--shadow-medium);
|
|
}
|
|
|
|
.viewer-360-main {
|
|
position: relative;
|
|
width: 100%;
|
|
max-width: 400px;
|
|
margin: 0 auto;
|
|
aspect-ratio: 1;
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
background: #f8f9fa;
|
|
}
|
|
|
|
.viewer-360-main img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.rotation-indicator {
|
|
position: absolute;
|
|
bottom: 12px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background: rgba(0, 0, 0, 0.7);
|
|
color: white;
|
|
padding: 8px 16px;
|
|
border-radius: 20px;
|
|
font-size: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
animation: fadeInOut 3s ease-in-out infinite;
|
|
}
|
|
|
|
.rotation-indicator i {
|
|
animation: rotate 2s linear infinite;
|
|
}
|
|
|
|
@keyframes fadeInOut {
|
|
0%, 100% { opacity: 0.7; }
|
|
50% { opacity: 1; }
|
|
}
|
|
|
|
@keyframes rotate {
|
|
from { transform: rotate(0deg); }
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
.viewer-overlay {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
cursor: grab;
|
|
z-index: 5;
|
|
}
|
|
|
|
.viewer-overlay:active {
|
|
cursor: grabbing;
|
|
}
|
|
|
|
.viewer-controls {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 12px;
|
|
margin-top: 20px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.control-btn {
|
|
background: var(--primary-blue);
|
|
color: white;
|
|
border: none;
|
|
border-radius: 8px;
|
|
padding: 8px 16px;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
transition: all 0.3s ease;
|
|
min-width: 100px;
|
|
justify-content: center;
|
|
}
|
|
|
|
.control-btn:hover {
|
|
background: var(--light-blue);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.control-btn.active {
|
|
background: var(--success-color);
|
|
}
|
|
|
|
.product-info-360 {
|
|
background: var(--white);
|
|
margin: 16px;
|
|
padding: 16px;
|
|
border-radius: 12px;
|
|
box-shadow: var(--shadow-light);
|
|
}
|
|
|
|
.product-name-360 {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
color: var(--text-dark);
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.product-price-360 {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.price-current {
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
color: var(--danger-color);
|
|
}
|
|
|
|
.price-original {
|
|
font-size: 14px;
|
|
color: var(--text-light);
|
|
text-decoration: line-through;
|
|
}
|
|
|
|
.product-dimensions {
|
|
font-size: 14px;
|
|
color: var(--text-light);
|
|
}
|
|
|
|
.instructions-card {
|
|
background: var(--white);
|
|
margin: 16px;
|
|
padding: 16px;
|
|
border-radius: 12px;
|
|
box-shadow: var(--shadow-light);
|
|
}
|
|
|
|
.instructions-card h3 {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: var(--text-dark);
|
|
margin-bottom: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.instructions-card ul {
|
|
list-style: none;
|
|
}
|
|
|
|
.instructions-card li {
|
|
font-size: 14px;
|
|
color: var(--text-light);
|
|
margin-bottom: 8px;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 8px;
|
|
}
|
|
|
|
.instructions-card li i {
|
|
color: var(--primary-blue);
|
|
margin-top: 2px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.action-bar-360 {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background: var(--white);
|
|
padding: 16px;
|
|
box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.1);
|
|
display: flex;
|
|
gap: 12px;
|
|
z-index: 100;
|
|
}
|
|
|
|
.btn-back {
|
|
flex: 1;
|
|
background: var(--border-color);
|
|
color: var(--text-dark);
|
|
border: none;
|
|
border-radius: 8px;
|
|
padding: 12px 16px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.btn-back:hover {
|
|
background: #ddd;
|
|
}
|
|
|
|
.btn-add-cart {
|
|
flex: 2;
|
|
background: var(--primary-blue);
|
|
color: white;
|
|
border: none;
|
|
border-radius: 8px;
|
|
padding: 12px 16px;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.btn-add-cart:hover {
|
|
background: var(--light-blue);
|
|
}
|
|
|
|
/* Mobile Responsiveness */
|
|
@media (max-width: 480px) {
|
|
.viewer-360-container {
|
|
padding: 16px;
|
|
}
|
|
|
|
.viewer-controls {
|
|
gap: 8px;
|
|
}
|
|
|
|
.control-btn {
|
|
font-size: 11px;
|
|
padding: 6px 12px;
|
|
min-width: 80px;
|
|
}
|
|
|
|
.instructions-card {
|
|
margin: 12px;
|
|
padding: 12px;
|
|
}
|
|
|
|
.product-info-360 {
|
|
margin: 12px;
|
|
padding: 12px;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
let isRotating = false;
|
|
let startX = 0;
|
|
let currentRotation = 0;
|
|
let autoRotateInterval = null;
|
|
let isAutoRotating = false;
|
|
|
|
// Mock 360° images array (in a real app, these would be actual 360° view frames)
|
|
const rotation360Images = [
|
|
"https://placehold.co/600x600/F5F5F5/005B9A/png?text=Góc+0°",
|
|
"https://placehold.co/600x600/F0F0F0/005B9A/png?text=Góc+45°",
|
|
"https://placehold.co/600x600/EEEEEE/005B9A/png?text=Góc+90°",
|
|
"https://placehold.co/600x600/EBEBEB/005B9A/png?text=Góc+135°",
|
|
"https://placehold.co/600x600/E8E8E8/005B9A/png?text=Góc+180°",
|
|
"https://placehold.co/600x600/E5E5E5/005B9A/png?text=Góc+225°",
|
|
"https://placehold.co/600x600/E2E2E2/005B9A/png?text=Góc+270°",
|
|
"https://placehold.co/600x600/DFDFDF/005B9A/png?text=Góc+315°"
|
|
];
|
|
|
|
function startRotation(event) {
|
|
isRotating = true;
|
|
startX = event.type.includes('touch') ? event.touches[0].clientX : event.clientX;
|
|
stopAutoRotate();
|
|
}
|
|
|
|
function rotateProduct(event) {
|
|
if (!isRotating) return;
|
|
|
|
event.preventDefault();
|
|
const currentX = event.type.includes('touch') ? event.touches[0].clientX : event.clientX;
|
|
const deltaX = currentX - startX;
|
|
|
|
// Calculate rotation based on movement
|
|
const rotationSensitivity = 2;
|
|
const newRotation = currentRotation + (deltaX / rotationSensitivity);
|
|
|
|
// Update image based on rotation
|
|
const imageIndex = Math.floor((newRotation % 360) / 45) % rotation360Images.length;
|
|
const normalizedIndex = imageIndex < 0 ? rotation360Images.length + imageIndex : imageIndex;
|
|
|
|
document.getElementById('product360Image').src = rotation360Images[normalizedIndex];
|
|
|
|
startX = currentX;
|
|
currentRotation = newRotation;
|
|
}
|
|
|
|
function endRotation() {
|
|
isRotating = false;
|
|
}
|
|
|
|
function autoRotate() {
|
|
const btn = document.getElementById('autoRotateBtn');
|
|
|
|
if (isAutoRotating) {
|
|
stopAutoRotate();
|
|
} else {
|
|
startAutoRotate();
|
|
}
|
|
}
|
|
|
|
function startAutoRotate() {
|
|
isAutoRotating = true;
|
|
const btn = document.getElementById('autoRotateBtn');
|
|
btn.classList.add('active');
|
|
btn.innerHTML = '<i class="fas fa-pause"></i><span>Dừng xoay</span>';
|
|
|
|
let imageIndex = 0;
|
|
autoRotateInterval = setInterval(() => {
|
|
document.getElementById('product360Image').src = rotation360Images[imageIndex];
|
|
imageIndex = (imageIndex + 1) % rotation360Images.length;
|
|
}, 500); // Change image every 500ms
|
|
}
|
|
|
|
function stopAutoRotate() {
|
|
if (autoRotateInterval) {
|
|
clearInterval(autoRotateInterval);
|
|
autoRotateInterval = null;
|
|
}
|
|
isAutoRotating = false;
|
|
const btn = document.getElementById('autoRotateBtn');
|
|
btn.classList.remove('active');
|
|
btn.innerHTML = '<i class="fas fa-play"></i><span>Tự động xoay</span>';
|
|
}
|
|
|
|
function resetView() {
|
|
currentRotation = 0;
|
|
document.getElementById('product360Image').src = rotation360Images[0];
|
|
stopAutoRotate();
|
|
}
|
|
|
|
function toggleFullscreen() {
|
|
const element = document.querySelector('.viewer-360-container');
|
|
|
|
if (!document.fullscreenElement) {
|
|
element.requestFullscreen().catch(err => {
|
|
console.log('Fullscreen not supported:', err);
|
|
// Fallback for mobile
|
|
element.style.position = 'fixed';
|
|
element.style.top = '0';
|
|
element.style.left = '0';
|
|
element.style.right = '0';
|
|
element.style.bottom = '0';
|
|
element.style.zIndex = '9999';
|
|
element.style.background = '#000';
|
|
});
|
|
} else {
|
|
document.exitFullscreen();
|
|
}
|
|
}
|
|
|
|
function shareProduct360() {
|
|
if (navigator.share) {
|
|
navigator.share({
|
|
title: 'Xem 360° - Gạch Eurotile MỘC LAM E03',
|
|
text: 'Xem sản phẩm gạch granite 360° này!',
|
|
url: window.location.href
|
|
});
|
|
} else {
|
|
navigator.clipboard.writeText(window.location.href);
|
|
alert('Đã sao chép link xem 360°!');
|
|
}
|
|
}
|
|
|
|
function goBackToProduct() {
|
|
window.location.href = 'product-detail.html';
|
|
}
|
|
|
|
function addToCartFrom360() {
|
|
alert('Đã thêm 1 m² gạch Eurotile MỘC LAM E03 vào giỏ hàng!');
|
|
// In a real app, this would update the cart
|
|
}
|
|
|
|
// Clean up intervals when page is unloaded
|
|
window.addEventListener('beforeunload', () => {
|
|
stopAutoRotate();
|
|
});
|
|
|
|
// Handle fullscreen changes
|
|
document.addEventListener('fullscreenchange', () => {
|
|
const element = document.querySelector('.viewer-360-container');
|
|
if (!document.fullscreenElement) {
|
|
// Reset styles when exiting fullscreen
|
|
element.style.position = '';
|
|
element.style.top = '';
|
|
element.style.left = '';
|
|
element.style.right = '';
|
|
element.style.bottom = '';
|
|
element.style.zIndex = '';
|
|
element.style.background = '';
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |