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

update database

Browse Source
This commit is contained in:
Phuoc Nguyen
2025-10-24 11:31:48 +07:00
parent f95fa9d0a6
commit c4272f9a21
126 changed files with 23528 additions and 2234 deletions
Download Patch File Download Diff File Expand all files Collapse all files

481
html/nha-mau.html Normal file
View File

@@ -0,0 +1,481 @@
<!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;
}
}
</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>
</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>-->
<!-- 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);
});
});
</script>
</body>
</html>