584 lines
21 KiB
HTML
584 lines
21 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="vi">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>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>
|
|
.tab-navigation {
|
|
background: white;
|
|
border-bottom: 1px solid #e2e8f0;
|
|
display: flex;
|
|
position: sticky;
|
|
top: 60px;
|
|
z-index: 40;
|
|
}
|
|
|
|
.tab-item {
|
|
flex: 1;
|
|
padding: 16px 12px;
|
|
text-align: center;
|
|
background: none;
|
|
border: none;
|
|
font-weight: 600;
|
|
color: #64748b;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
border-bottom: 3px solid transparent;
|
|
}
|
|
|
|
.tab-item.active {
|
|
color: #004980;
|
|
border-bottom-color: #004980;
|
|
}
|
|
|
|
.tab-content {
|
|
display: none;
|
|
padding: 20px;
|
|
min-height: calc(100vh - 140px);
|
|
}
|
|
|
|
.tab-content.active {
|
|
display: block;
|
|
}
|
|
|
|
.library-card {
|
|
background: white;
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
|
margin-bottom: 20px;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.library-card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 16px rgba(0,0,0,0.12);
|
|
}
|
|
|
|
.library-image {
|
|
width: 100%;
|
|
height: 200px;
|
|
object-fit: cover;
|
|
position: relative;
|
|
}
|
|
|
|
.image-overlay {
|
|
position: absolute;
|
|
top: 12px;
|
|
right: 12px;
|
|
background: rgba(37, 99, 235, 0.9);
|
|
color: white;
|
|
padding: 6px 12px;
|
|
border-radius: 16px;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.library-content {
|
|
padding: 20px;
|
|
}
|
|
|
|
.library-title {
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
color: #1f2937;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.library-date {
|
|
color: #6b7280;
|
|
font-size: 14px;
|
|
margin-bottom: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.library-description {
|
|
color: #4b5563;
|
|
font-size: 14px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.request-card {
|
|
background: white;
|
|
border-radius: 12px;
|
|
padding: 20px;
|
|
margin-bottom: 16px;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.request-card:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.request-header {
|
|
display: flex;
|
|
justify-content: between;
|
|
align-items: center;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.request-code {
|
|
font-weight: 700;
|
|
color: #1f2937;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.request-date {
|
|
color: #6b7280;
|
|
font-size: 14px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.status-badge {
|
|
padding: 6px 12px;
|
|
border-radius: 20px;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
display: inline-block;
|
|
}
|
|
|
|
.status-pending {
|
|
background: #fef3c7;
|
|
color: #d97706;
|
|
}
|
|
|
|
.status-designing {
|
|
background: #e0e7ff;
|
|
color: #3730a3;
|
|
}
|
|
|
|
.status-completed {
|
|
background: #d1fae5;
|
|
color: #065f46;
|
|
}
|
|
|
|
.fab {
|
|
position: fixed;
|
|
bottom: 90px;
|
|
right: 20px;
|
|
width: 56px;
|
|
height: 56px;
|
|
background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
|
|
border-radius: 50%;
|
|
border: none;
|
|
color: white;
|
|
font-size: 24px;
|
|
cursor: pointer;
|
|
box-shadow: 0 4px 16px rgba(37, 99, 235, 0.4);
|
|
transition: all 0.3s ease;
|
|
z-index: 100;
|
|
}
|
|
|
|
.fab:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 8px 24px rgba(37, 99, 235, 0.5);
|
|
}
|
|
|
|
.empty-state {
|
|
text-align: center;
|
|
padding: 60px 20px;
|
|
color: #9ca3af;
|
|
}
|
|
|
|
.empty-state i {
|
|
font-size: 48px;
|
|
margin-bottom: 20px;
|
|
color: #d1d5db;
|
|
}
|
|
|
|
.empty-state h3 {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
color: #374151;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.empty-state p {
|
|
font-size: 14px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.tab-content {
|
|
padding: 15px;
|
|
}
|
|
|
|
.library-content {
|
|
padding: 15px;
|
|
}
|
|
|
|
.request-card {
|
|
padding: 15px;
|
|
}
|
|
}
|
|
|
|
|
|
.modal-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0,0,0,0.5);
|
|
z-index: 1000;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 20px;
|
|
}
|
|
|
|
.modal-content {
|
|
background: white;
|
|
border-radius: 12px;
|
|
width: 100%;
|
|
max-width: 500px;
|
|
animation: slideUp 0.3s ease;
|
|
}
|
|
|
|
@keyframes slideUp {
|
|
from { transform: translateY(20px); opacity: 0; }
|
|
to { transform: translateY(0); opacity: 1; }
|
|
}
|
|
|
|
.modal-header {
|
|
padding: 20px;
|
|
border-bottom: 1px solid #e5e7eb;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.modal-body {
|
|
padding: 20px;
|
|
}
|
|
|
|
.modal-footer {
|
|
padding: 20px;
|
|
border-top: 1px solid #e5e7eb;
|
|
display: flex;
|
|
gap: 12px;
|
|
}
|
|
|
|
.modal-close {
|
|
background: none;
|
|
border: none;
|
|
font-size: 20px;
|
|
color: #6b7280;
|
|
cursor: pointer;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="page-wrapper">
|
|
<!-- Header -->
|
|
<div class="header">
|
|
<a href="index.html" class="back-button">
|
|
<i class="fas fa-arrow-left"></i>
|
|
</a>
|
|
<h1 class="header-title">Nhà mẫu</h1>
|
|
<!--<div style="width: 32px;"></div>-->
|
|
<button class="back-button" onclick="openInfoModal()">
|
|
<i class="fas fa-info-circle"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Tab Navigation -->
|
|
<div class="tab-navigation">
|
|
<button class="tab-item active" onclick="switchTab('library')">
|
|
Thư viện mẫu
|
|
</button>
|
|
<button class="tab-item" onclick="switchTab('requests')">
|
|
Yêu cầu thiết kế
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Tab 1: Thư viện Mẫu -->
|
|
<div class="tab-content active" id="library-tab">
|
|
<div class="library-list">
|
|
<!-- Library Item 1 -->
|
|
<div class="library-card" >
|
|
<div style="position: relative;" onclick="viewLibraryDetail('studio-apartment')">
|
|
<img src="https://images.unsplash.com/photo-1600596542815-ffad4c1539a9?w=800&h=200&fit=crop"
|
|
alt="Căn hộ Studio"
|
|
class="library-image">
|
|
<div class="image-overlay" onclick="window.location.href='https://vr.house3d.com/web/panorama-player/H00179549'">Xem 360°</div>
|
|
</div>
|
|
<div class="library-content" onclick="viewLibraryDetail('studio-apartment')">
|
|
<h3 class="library-title">Căn hộ Studio</h3>
|
|
<div class="library-date">
|
|
<i class="fas fa-calendar-alt"></i>
|
|
<span>Ngày đăng: 15/11/2024</span>
|
|
</div>
|
|
<p class="library-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.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Library Item 2 -->
|
|
<div class="library-card" onclick="viewLibraryDetail('modern-villa')">
|
|
<div style="position: relative;">
|
|
<img src="https://images.unsplash.com/photo-1570129477492-45c003edd2be?w=800&h=200&fit=crop"
|
|
alt="Biệt thự Hiện đại"
|
|
class="library-image">
|
|
<div class="image-overlay">Xem 360°</div>
|
|
</div>
|
|
<div class="library-content">
|
|
<h3 class="library-title">Biệt thự Hiện đại</h3>
|
|
<div class="library-date">
|
|
<i class="fas fa-calendar-alt"></i>
|
|
<span>Ngày đăng: 12/11/2024</span>
|
|
</div>
|
|
<p class="library-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.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Library Item 3 -->
|
|
<div class="library-card" onclick="viewLibraryDetail('minimalist-house')">
|
|
<div style="position: relative;">
|
|
<img src="https://images.unsplash.com/photo-1562663474-6cbb3eaa4d14?w=800&h=200&fit=crop"
|
|
alt="Nhà phố Tối giản"
|
|
class="library-image">
|
|
<div class="image-overlay">Xem 360°</div>
|
|
</div>
|
|
<div class="library-content">
|
|
<h3 class="library-title">Nhà phố Tối giản</h3>
|
|
<div class="library-date">
|
|
<i class="fas fa-calendar-alt"></i>
|
|
<span>Ngày đăng: 08/11/2024</span>
|
|
</div>
|
|
<p class="library-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.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Library Item 4 -->
|
|
<div class="library-card" onclick="viewLibraryDetail('luxury-condo')">
|
|
<div style="position: relative;">
|
|
<img src="https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?w=800&h=200&fit=crop"
|
|
alt="Chung cư Cao cấp"
|
|
class="library-image">
|
|
<div class="image-overlay">Xem 360°</div>
|
|
</div>
|
|
<div class="library-content">
|
|
<h3 class="library-title">Chung cư Cao cấp</h3>
|
|
<div class="library-date">
|
|
<i class="fas fa-calendar-alt"></i>
|
|
<span>Ngày đăng: 05/11/2024</span>
|
|
</div>
|
|
<p class="library-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.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tab 2: Yêu cầu Thiết kế -->
|
|
<div class="tab-content" id="requests-tab">
|
|
<div class="requests-list">
|
|
<!-- Request Item 1 -->
|
|
<div class="request-card" onclick="viewRequestDetail('YC001')">
|
|
<div class="request-header">
|
|
<div class="request-code">Mã yêu cầu: #YC001</div>
|
|
<span class="status-badge status-completed">Hoàn thành</span>
|
|
</div>
|
|
<div class="request-date">Ngày gửi: 20/10/2024</div>
|
|
<div style="color: #374151; font-size: 14px;">
|
|
Thiết kế nhà phố 3 tầng - Anh Minh (Quận 7)
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Request Item 2 -->
|
|
<div class="request-card" onclick="viewRequestDetail('YC002')">
|
|
<div class="request-header">
|
|
<div class="request-code">Mã yêu cầu: #YC002</div>
|
|
<span class="status-badge status-designing">Đang thiết kế</span>
|
|
</div>
|
|
<div class="request-date">Ngày gửi: 25/10/2024</div>
|
|
<div style="color: #374151; font-size: 14px;">
|
|
Cải tạo căn hộ chung cư - Chị Lan (Quận 2)
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Request Item 3 -->
|
|
<div class="request-card" onclick="viewRequestDetail('YC003')">
|
|
<div class="request-header">
|
|
<div class="request-code">Mã yêu cầu: #YC003</div>
|
|
<span class="status-badge status-pending">Chờ tiếp nhận</span>
|
|
</div>
|
|
<div class="request-date">Ngày gửi: 28/10/2024</div>
|
|
<div style="color: #374151; font-size: 14px;">
|
|
Thiết kế biệt thự 2 tầng - Anh Đức (Bình Dương)
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Request Item 4 -->
|
|
<div class="request-card" onclick="viewRequestDetail('YC004')">
|
|
<div class="request-header">
|
|
<div class="request-code">Mã yêu cầu: #YC004</div>
|
|
<span class="status-badge status-pending">Chờ tiếp nhận</span>
|
|
</div>
|
|
<div class="request-date">Ngày gửi: 01/11/2024</div>
|
|
<div style="color: #374151; font-size: 14px;">
|
|
Thiết kế cửa hàng kinh doanh - Chị Mai (Quận 1)
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Empty state when no requests (hidden by default) -->
|
|
<div class="empty-state" id="empty-requests" style="display: none;">
|
|
<i class="fas fa-drafting-compass"></i>
|
|
<h3>Chưa có yêu cầu thiết kế</h3>
|
|
<p>Tạo yêu cầu thiết kế đầu tiên để nhận tư vấn từ đội ngũ chuyên gia</p>
|
|
</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>-->
|
|
|
|
<!-- Info Modal -->
|
|
<div id="infoModal" class="modal-overlay" style="display: none;">
|
|
<div class="modal-content info-modal">
|
|
<div class="modal-header">
|
|
<h3 class="modal-title" style="font-weight: bold;">Hướng dẫn sử dụng</h3>
|
|
<button class="modal-close" onclick="closeInfoModal()">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>Đây là nội dung hướng dẫn sử dụng cho tính năng Nhà mẫu:</p>
|
|
<ul class="list-disc ml-6 mt-3">
|
|
<li>Tab "Thư viện Mẫu 360": Là nơi công ty cung cấp các mẫu thiết kế 360° có sẵn để bạn tham khảo.</li>
|
|
<li>Tab "Yêu cầu Thiết kế": Là nơi bạn gửi yêu cầu (ticket) để đội ngũ thiết kế của chúng tôi hỗ trợ bạn.</li>
|
|
<li>Bấm nút "+" trong tab "Yêu cầu Thiết kế" để tạo một Yêu cầu Thiết kế mới.</li>
|
|
<li>Khi yêu cầu hoàn thành, bạn có thể xem link thiết kế 3D trong trang chi tiết yêu cầu.</li>
|
|
</ul>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn btn-primary" onclick="closeInfoModal()">Đóng</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Floating Action Button (only show on Requests tab) -->
|
|
<button class="fab" id="fab-button" style="display: none;" onclick="createNewRequest()">
|
|
<i class="fas fa-plus"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<script>
|
|
function switchTab(tab) {
|
|
// Update tab navigation
|
|
document.querySelectorAll('.tab-item').forEach(item => {
|
|
item.classList.remove('active');
|
|
});
|
|
event.target.classList.add('active');
|
|
|
|
// Update tab content
|
|
document.querySelectorAll('.tab-content').forEach(content => {
|
|
content.classList.remove('active');
|
|
});
|
|
document.getElementById(tab + '-tab').classList.add('active');
|
|
|
|
// Show/hide FAB based on tab
|
|
const fab = document.getElementById('fab-button');
|
|
if (tab === 'requests') {
|
|
fab.style.display = 'block';
|
|
} else {
|
|
fab.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
function viewLibraryDetail(modelId) {
|
|
// Navigate to 360° detail page
|
|
window.location.href = `nha-mau-360-detail.html?id=${modelId}`;
|
|
}
|
|
|
|
function viewRequestDetail(requestId) {
|
|
// Navigate to request detail page
|
|
window.location.href = `design-request-detail.html?id=${requestId}`;
|
|
}
|
|
|
|
function createNewRequest() {
|
|
// Navigate to create new request page
|
|
window.location.href = 'design-request-create.html';
|
|
}
|
|
|
|
// Initialize page
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Set default state
|
|
switchTab('library');
|
|
|
|
// Add animation to cards
|
|
const cards = document.querySelectorAll('.library-card, .request-card');
|
|
cards.forEach((card, index) => {
|
|
card.style.opacity = '0';
|
|
card.style.transform = 'translateY(20px)';
|
|
card.style.transition = 'all 0.5s ease';
|
|
|
|
setTimeout(() => {
|
|
card.style.opacity = '1';
|
|
card.style.transform = 'translateY(0)';
|
|
}, index * 100);
|
|
});
|
|
});
|
|
|
|
|
|
function openInfoModal() {
|
|
document.getElementById('infoModal').style.display = 'flex';
|
|
}
|
|
|
|
function closeInfoModal() {
|
|
document.getElementById('infoModal').style.display = 'none';
|
|
}
|
|
|
|
function viewOrderDetail(orderId) {
|
|
window.location.href = `order-detail.html?id=${orderId}`;
|
|
}
|
|
|
|
// Close modal when clicking outside
|
|
document.addEventListener('click', function(e) {
|
|
if (e.target.classList.contains('modal-overlay')) {
|
|
e.target.style.display = 'none';
|
|
}
|
|
});
|
|
|
|
</script>
|
|
</body>
|
|
</html> |