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

add price policy

Browse Source
This commit is contained in:
Phuoc Nguyen
2025-11-03 11:20:09 +07:00
parent c0527a086c
commit 21c1c3372c
53 changed files with 7160 additions and 2361 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
html/account.html
View File

@@ -154,9 +154,9 @@
<i class="fas fa-crown nav-icon"></i>
<span class="nav-label">Hội viên</span>
</a>
<a href="promotions.html" class="nav-item">
<i class="fas fa-tags nav-icon"></i>
<span class="nav-label">Khuyến mãi</span>
<a href="news-list.html" class="nav-item">
<i class="fas fa-newspaper nav-icon"></i>
<span class="nav-label">Tin tức</span>
</a>
<a href="notifications.html" class="nav-item" style="position: relative">
<i class="fas fa-bell nav-icon"></i>

8
html/assets/css/style.css
View File

@@ -530,9 +530,9 @@ p {
color: var(--primary-blue);
}
.nav-item:hover {
/*.nav-item:hover {
color: var(--primary-blue);
}
}*/
.nav-icon {
font-size: 24px;
@@ -1136,6 +1136,10 @@ p {
color: var(--white);
}
.status-badge.approved {
background: var(--success-color);
}
.status-badge.processing {
background: var(--warning-color);
}

27
html/cart.html
View File

@@ -8,6 +8,20 @@
<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>
<style>
.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>
<body>
<div class="page-wrapper">
<!-- Header -->
@@ -51,13 +65,14 @@
</button>
<span class="text-small text-muted" style="margin-left: 8px;">m²</span>
</div>
<div class="text-small text-muted">(Quy đổi: <strong>28 viên</strong> / <strong>10.08 m²</strong>)</div>
</div>
</div>
<div class="cart-item">
<img src="https://images.unsplash.com/photo-1565193566173-7a0ee3dbe261?w=80&h=80&fit=crop" alt="Product" class="cart-item-image">
<div class="cart-item-info">
<div class="cart-item-name">Gạch granite nhập khẩu</div>
<div class="cart-item-name">Gạch granite nhập khẩu 1200x1200</div>
<div class="text-small text-muted">Mã: ET-GR8080</div>
<div class="cart-item-price">680.000đ/m²</div>
<div class="quantity-control">
@@ -70,13 +85,14 @@
</button>
<span class="text-small text-muted" style="margin-left: 8px;">m²</span>
</div>
<div class="text-small text-muted">(Quy đổi: <strong>11 viên</strong> / <strong>15.84 m²</strong>)</div>
</div>
</div>
<div class="cart-item">
<img src="https://images.unsplash.com/photo-1600607687644-aac4c3eac7f4?w=80&h=80&fit=crop" alt="Product" class="cart-item-image">
<div class="cart-item-info">
<div class="cart-item-name">Gạch mosaic trang trí</div>
<div class="cart-item-name">Gạch mosaic trang trí 750x1500</div>
<div class="text-small text-muted">Mã: ET-MS3030</div>
<div class="cart-item-price">320.000đ/m²</div>
<div class="quantity-control">
@@ -89,6 +105,7 @@
</button>
<span class="text-small text-muted" style="margin-left: 8px;">m²</span>
</div>
<div class="text-small text-muted">(Quy đổi: <strong>5 viên</strong> / <strong>5.625 m²</strong>)</div>
</div>
</div>
@@ -111,11 +128,11 @@
<h3 class="card-title">Thông tin đơn hàng</h3>
<div class="d-flex justify-between mb-2">
<span>Tạm tính (30 m²)</span>
<span>16.700.000đ</span>
<span>17.107.200đ</span>
</div>
<div class="d-flex justify-between mb-2">
<span>Giảm giá Diamond (-15%)</span>
<span class="text-success">-2.505.000đ</span>
<span class="text-success">-2.566.000đ</span>
</div>
<div class="d-flex justify-between mb-2">
<span>Phí vận chuyển</span>
@@ -124,7 +141,7 @@
<div style="border-top: 1px solid var(--border-color); padding-top: 12px; margin-top: 12px;">
<div class="d-flex justify-between">
<span class="text-bold" style="font-size: 16px;">Tổng cộng</span>
<span class="text-bold text-primary" style="font-size: 18px;">14.195.000đ</span>
<span class="text-bold text-primary" style="font-size: 18px;">14.541.120đ</span>
</div>
</div>
</div>

406
html/chat-list(1).html Normal file
View File

@@ -0,0 +1,406 @@
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lịch sử Chat - 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>
<style>
.chat-item {
background: white;
border-radius: 12px;
padding: 16px;
margin-bottom: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
cursor: pointer;
transition: all 0.3s ease;
display: flex;
gap: 12px;
position: relative;
}
.chat-item:hover {
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
transform: translateY(-2px);
}
.chat-item.unread {
border-left: 4px solid var(--primary-blue);
}
.chat-icon {
width: 48px;
height: 48px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
flex-shrink: 0;
}
.chat-icon.order {
background: linear-gradient(135deg, #38B6FF 0%, #005B9A 100%);
color: white;
}
.chat-icon.product {
background: linear-gradient(135deg, #28a745 0%, #155724 100%);
color: white;
}
.chat-icon.support {
background: linear-gradient(135deg, #ffc107 0%, #856404 100%);
color: white;
}
.chat-icon.promotion {
background: linear-gradient(135deg, #dc3545 0%, #721c24 100%);
color: white;
}
.chat-content {
flex: 1;
min-width: 0;
}
.chat-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 4px;
}
.chat-title {
font-size: 15px;
font-weight: 600;
color: var(--text-dark);
margin: 0;
}
.chat-time {
font-size: 11px;
color: var(--text-light);
white-space: nowrap;
}
.chat-reference {
font-size: 12px;
color: var(--primary-blue);
margin-bottom: 4px;
font-weight: 500;
}
.chat-message {
font-size: 13px;
color: var(--text-light);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.unread-badge {
width: 20px;
height: 20px;
background: var(--danger-color);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
position: absolute;
top: 12px;
right: 12px;
}
.chat-status {
display: inline-block;
padding: 2px 8px;
border-radius: 10px;
font-size: 11px;
font-weight: 500;
margin-top: 4px;
}
.chat-status.pending {
background: #fff3cd;
color: #856404;
}
.chat-status.resolved {
background: #d4edda;
color: #155724;
}
.chat-status.processing {
background: #d1ecf1;
color: #0c5460;
}
</style>
<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">Lịch sử Chat</h1>
<button class="back-button">
<i class="fas fa-search"></i>
</button>
</div>
<div class="container">
<!-- Filter Pills -->
<div class="filter-container">
<button class="filter-pill active">Tất cả</button>
<button class="filter-pill">Đơn hàng</button>
<button class="filter-pill">Sản phẩm</button>
<button class="filter-pill">Hỗ trợ</button>
</div>
<!-- Chat List -->
<div class="chat-list">
<!-- Chat Item 1 - Order Reference -->
<div class="chat-item unread" onclick="openChat('order', 'DH001234')">
<div class="chat-icon order">
<i class="fas fa-shopping-cart"></i>
</div>
<div class="chat-content">
<div class="chat-header">
<h4 class="chat-title">Hỗ trợ đơn hàng</h4>
<span class="chat-time">10:30</span>
</div>
<div class="chat-reference">
<i class="fas fa-hashtag"></i> Đơn hàng #DH001234
</div>
<div class="chat-message">
Hệ thống: Đơn hàng của bạn đang được xử lý. Dự kiến giao trong 3-5 ngày.
</div>
<span class="chat-status processing">Đang xử lý</span>
</div>
<span class="unread-badge">2</span>
</div>
<!-- Chat Item 2 - Product Reference -->
<div class="chat-item" onclick="openChat('product', 'PR0123')">
<div class="chat-icon product">
<i class="fas fa-box"></i>
</div>
<div class="chat-content">
<div class="chat-header">
<h4 class="chat-title">Tư vấn sản phẩm</h4>
<span class="chat-time">Hôm qua</span>
</div>
<div class="chat-reference">
<i class="fas fa-tag"></i> Sản phẩm #PR0123 - Gạch Eurotile MỘC LAM E03
</div>
<div class="chat-message">
Bạn: Sản phẩm này còn hàng không ạ?
</div>
<span class="chat-status resolved">Đã trả lời</span>
</div>
</div>
<!-- Chat Item 3 - Order Reference -->
<div class="chat-item unread" onclick="openChat('order', 'DH001233')">
<div class="chat-icon order">
<i class="fas fa-truck"></i>
</div>
<div class="chat-content">
<div class="chat-header">
<h4 class="chat-title">Thông tin giao hàng</h4>
<span class="chat-time">2 ngày trước</span>
</div>
<div class="chat-reference">
<i class="fas fa-hashtag"></i> Đơn hàng #DH001233
</div>
<div class="chat-message">
Hệ thống: Đơn hàng đang trên đường giao đến bạn. Mã vận đơn: VD123456
</div>
<span class="chat-status processing">Đang giao</span>
</div>
<span class="unread-badge">1</span>
</div>
<!-- Chat Item 4 - Support Reference -->
<div class="chat-item" onclick="openChat('support', 'TK001')">
<div class="chat-icon support">
<i class="fas fa-headset"></i>
</div>
<div class="chat-content">
<div class="chat-header">
<h4 class="chat-title">Hỗ trợ kỹ thuật</h4>
<span class="chat-time">3 ngày trước</span>
</div>
<div class="chat-reference">
<i class="fas fa-ticket-alt"></i> Ticket #TK001
</div>
<div class="chat-message">
Hệ thống: Yêu cầu hỗ trợ của bạn đã được giải quyết. Cảm ơn bạn đã sử dụng dịch vụ.
</div>
<span class="chat-status resolved">Đã giải quyết</span>
</div>
</div>
<!-- Chat Item 5 - Product Reference -->
<div class="chat-item" onclick="openChat('product', 'PR0125')">
<div class="chat-icon product">
<i class="fas fa-box"></i>
</div>
<div class="chat-content">
<div class="chat-header">
<h4 class="chat-title">Thông tin sản phẩm</h4>
<span class="chat-time">5 ngày trước</span>
</div>
<div class="chat-reference">
<i class="fas fa-tag"></i> Sản phẩm #PR0125 - Gạch Granite nhập khẩu
</div>
<div class="chat-message">
Bạn: Cho tôi xem bảng màu của sản phẩm này
</div>
<span class="chat-status resolved">Đã trả lời</span>
</div>
</div>
<!-- Chat Item 6 - Promotion Reference -->
<div class="chat-item" onclick="openChat('promotion', 'KM202312')">
<div class="chat-icon promotion">
<i class="fas fa-tags"></i>
</div>
<div class="chat-content">
<div class="chat-header">
<h4 class="chat-title">Chương trình khuyến mãi</h4>
<span class="chat-time">1 tuần trước</span>
</div>
<div class="chat-reference">
<i class="fas fa-gift"></i> CTKM #KM202312 - Flash Sale Cuối Năm
</div>
<div class="chat-message">
Hệ thống: Chương trình khuyến mãi áp dụng cho đơn hàng từ 10 triệu
</div>
<span class="chat-status resolved">Đã xem</span>
</div>
</div>
<!-- Chat Item 7 - Order Reference -->
<div class="chat-item" onclick="openChat('order', 'DH001230')">
<div class="chat-icon order">
<i class="fas fa-times-circle"></i>
</div>
<div class="chat-content">
<div class="chat-header">
<h4 class="chat-title">Yêu cầu hủy đơn</h4>
<span class="chat-time">2 tuần trước</span>
</div>
<div class="chat-reference">
<i class="fas fa-hashtag"></i> Đơn hàng #DH001230
</div>
<div class="chat-message">
Hệ thống: Đơn hàng đã được hủy thành công. Tiền sẽ hoàn về trong 3-5 ngày làm việc.
</div>
<span class="chat-status resolved">Đã hủy</span>
</div>
</div>
</div>
<!-- Empty State (hidden by default) -->
<div class="empty-state" style="display: none;">
<div class="empty-icon">
<i class="fas fa-comments"></i>
</div>
<h3 class="empty-title">Chưa có cuộc trò chuyện</h3>
<p class="empty-message">
Các cuộc trò chuyện về đơn hàng, sản phẩm sẽ hiển thị tại đây
</p>
</div>
</div>
</div>
<!-- Floating Action Button -->
<button class="fab" onclick="startNewChat()">
<i class="fas fa-plus"></i>
</button>
<!-- Bottom Navigation -->
<div class="bottom-nav">
<a href="index.html" class="nav-item">
<i class="fas fa-home nav-icon"></i>
<span class="nav-label">Trang chủ</span>
</a>
<a href="loyalty.html" class="nav-item">
<i class="fas fa-crown nav-icon"></i>
<span class="nav-label">Hội viên</span>
</a>
<a href="promotions.html" class="nav-item">
<i class="fas fa-tags nav-icon"></i>
<span class="nav-label">Khuyến mãi</span>
</a>
<a href="notifications.html" class="nav-item">
<i class="fas fa-bell nav-icon"></i>
<span class="nav-label">Thông báo</span>
<span class="badge">5</span>
</a>
<a href="account.html" class="nav-item">
<i class="fas fa-user nav-icon"></i>
<span class="nav-label">Cài đặt</span>
</a>
</div>
<script>
function openChat(type, referenceId) {
// Redirect to chat detail page with reference
window.location.href = `chat-detail.html?type=${type}&ref=${referenceId}`;
}
function startNewChat() {
// Open new chat modal or page
alert('Chức năng bắt đầu trò chuyện mới');
}
// Filter functionality
document.addEventListener('DOMContentLoaded', function() {
const filterButtons = document.querySelectorAll('.filter-pill');
const chatItems = document.querySelectorAll('.chat-item');
filterButtons.forEach(button => {
button.addEventListener('click', function() {
// Remove active class from all buttons
filterButtons.forEach(btn => btn.classList.remove('active'));
// Add active class to clicked button
this.classList.add('active');
// Get filter type
const filterText = this.textContent.trim();
// Filter chat items
chatItems.forEach(item => {
if (filterText === 'Tất cả') {
item.style.display = 'flex';
} else {
const icon = item.querySelector('.chat-icon');
let shouldShow = false;
if (filterText === 'Đơn hàng' && icon.classList.contains('order')) {
shouldShow = true;
} else if (filterText === 'Sản phẩm' && icon.classList.contains('product')) {
shouldShow = true;
} else if (filterText === 'Hỗ trợ' && icon.classList.contains('support')) {
shouldShow = true;
}
item.style.display = shouldShow ? 'flex' : 'none';
}
});
});
});
});
</script>
</body>
</html>

124
html/chat-list.html
View File

@@ -39,7 +39,7 @@
</div>
<!-- Chat Filter Tabs -->
<div class="chat-filter-tabs">
<!-- <div class="chat-filter-tabs">
<button class="filter-tab active" onclick="filterChats('all')">
Tất cả
<span class="tab-count">12</span>
@@ -56,37 +56,69 @@
Hỗ trợ
<span class="tab-count">4</span>
</button>
</div>
</div>-->
<!-- Conversation List -->
<div class="conversations-list" id="conversationsList">
<!-- Conversation Item 1 - Unread Customer -->
<div class="conversation-item unread customer" onclick="openChat('conv001')">
<!-- Conversation Item 1 - Order Reference -->
<div class="conversation-item unread customer" onclick="openChat('order001')">
<div class="avatar-container">
<div class="avatar customer-avatar">
<img src="https://placehold.co/50x50/FFE4B5/8B4513/png?text=NA" alt="Nguyễn Văn A">
<div class="avatar support-avatar">
<i class="fas fa-box"></i>
</div>
<div class="online-indicator online"></div>
</div>
<div class="conversation-content">
<div class="conversation-header">
<h3 class="contact-name">Nguyễn Văn A</h3>
<h3 class="contact-name">Đơn hàng #SO001234</h3>
<span class="message-time">14:30</span>
</div>
<div class="conversation-preview">
<div class="last-message">
<i class="fas fa-image"></i>
Gửi 2 hình ảnh về dự án nhà ở
<i class="fas fa-shipping-fast"></i>
Đơn hàng đang được giao - Dự kiến đến 16:00
</div>
<div class="message-indicators">
<span class="unread-count">2</span>
</div>
</div>
<div class="conversation-meta">
<span class="contact-type">Khách hàng VIP</span>
<span class="contact-type">Về: Đơn hàng #SO001234</span>
<span class="separator">•</span>
<span class="last-seen">Đang hoạt động</span>
<span class="last-seen">Cập nhật mới</span>
</div>
</div>
</div>
<!-- Conversation Item 3 - Product Reference -->
<div class="conversation-item unread customer" onclick="openChat('product001')">
<div class="avatar-container">
<div class="avatar customer-avatar">
<i class="fas fa-cube" style="color: #005B9A; font-size: 20px;"></i>
</div>
<div class="online-indicator away"></div>
</div>
<div class="conversation-content">
<div class="conversation-header">
<h3 class="contact-name">Sản phẩm PR0123</h3>
<span class="message-time">12:20</span>
</div>
<div class="conversation-preview">
<div class="last-message">
<i class="fas fa-info-circle"></i>
Thông tin bổ sung về gạch Granite 60x60
</div>
<div class="message-indicators">
<span class="unread-count">1</span>
</div>
</div>
<div class="conversation-meta">
<span class="contact-type">Đơn hàng #DH001233</span>
<span class="separator">•</span>
<span class="last-seen">2 giờ trước</span>
</div>
</div>
</div>
@@ -101,7 +133,7 @@
</div>
<div class="conversation-content">
<div class="conversation-header">
<h3 class="contact-name">Hỗ trợ kỹ thuật</h3>
<h3 class="contact-name">Tổng đài hỗ trợ</h3>
<span class="message-time">13:45</span>
</div>
<div class="conversation-preview">
@@ -117,37 +149,8 @@
</div>
</div>
<!-- Conversation Item 3 - Customer with Order -->
<div class="conversation-item unread customer" onclick="openChat('conv002')">
<div class="avatar-container">
<div class="avatar customer-avatar">
<img src="https://placehold.co/50x50/E6E6FA/483D8B/png?text=TTB" alt="Trần Thị B">
</div>
<div class="online-indicator away"></div>
</div>
<div class="conversation-content">
<div class="conversation-header">
<h3 class="contact-name">Trần Thị B</h3>
<span class="message-time">12:20</span>
</div>
<div class="conversation-preview">
<div class="last-message">
Khi nào đơn hàng #DH001233 sẽ được giao?
</div>
<div class="message-indicators">
<span class="unread-count">1</span>
</div>
</div>
<div class="conversation-meta">
<span class="contact-type">Đơn hàng #DH001233</span>
<span class="separator">•</span>
<span class="last-seen">2 giờ trước</span>
</div>
</div>
</div>
<!-- Conversation Item 4 - Architect -->
<div class="conversation-item customer" onclick="openChat('conv003')">
<!--<div class="conversation-item customer" onclick="openChat('conv003')">
<div class="avatar-container">
<div class="avatar architect-avatar">
<img src="https://placehold.co/50x50/F0F8FF/4169E1/png?text=LVC" alt="Lê Văn C">
@@ -171,10 +174,10 @@
<span class="last-seen">1 ngày trước</span>
</div>
</div>
</div>
</div>-->
<!-- Conversation Item 5 - Product Inquiry -->
<div class="conversation-item customer" onclick="openChat('conv004')">
<!-- <div class="conversation-item customer" onclick="openChat('conv004')">
<div class="avatar-container">
<div class="avatar customer-avatar">
<img src="https://placehold.co/50x50/FFF8DC/8B4513/png?text=PTD" alt="Phạm Thị D">
@@ -198,10 +201,10 @@
<span class="last-seen">2 ngày trước</span>
</div>
</div>
</div>
</div> -->
<!-- Conversation Item 6 - Group Support -->
<div class="conversation-item support" onclick="openChat('group001')">
<!--<div class="conversation-item support" onclick="openChat('group001')">
<div class="avatar-container">
<div class="avatar group-avatar">
<i class="fas fa-users"></i>
@@ -224,10 +227,10 @@
<span class="last-seen">15 thành viên</span>
</div>
</div>
</div>
</div>-->
<!-- Conversation Item 7 - Technical Question -->
<div class="conversation-item customer" onclick="openChat('conv005')">
<!--<div class="conversation-item customer" onclick="openChat('conv005')">
<div class="avatar-container">
<div class="avatar customer-avatar">
<img src="https://placehold.co/50x50/E0FFFF/008B8B/png?text=HVE" alt="Hoàng Văn E">
@@ -251,7 +254,7 @@
<span class="last-seen">1 tuần trước</span>
</div>
</div>
</div>
</div>-->
<!-- More conversations would be loaded with pagination -->
<div class="load-more-section">
@@ -263,29 +266,6 @@
</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="chat-list.html" class="nav-item active">
<i class="fas fa-comments"></i>
<span>Tin nhắn</span>
</a>
</div>-->
</div>
<style>

224
html/checkout.html
View File

@@ -31,16 +31,87 @@
<label class="form-label">Số điện thoại</label>
<input type="tel" class="form-input" value="0983441099">
</div>
<div class="form-group">
<!--<div class="form-group">
<label class="form-label">Địa chỉ giao hàng</label>
<textarea class="form-input" rows="3">123 Nguyễn Trãi, Quận 1, TP.HCM</textarea>
</div>-->
<div class="form-group">
<label class="form-label">Tỉnh/Thành phố</label>
<select class="form-input" id="provinceSelect">
<option value="">Chọn tỉnh/thành phố</option>
<option value="hcm" selected>TP. Hồ Chí Minh</option>
<option value="hanoi">Hà Nội</option>
<option value="danang">Đà Nẵng</option>
<option value="binhduong">Bình Dương</option>
<option value="dongai">Đồng Nai</option>
</select>
</div>
<div class="form-group">
<label class="form-label">Ghi chú cho tài xế</label>
<input type="text" class="form-input" placeholder="Ví dụ: Gọi trước khi giao">
<label class="form-label">Xã/Phường</label>
<select class="form-input" id="wardSelect">
<option value="">Chọn xã/phường</option>
<option value="ward1" selected>Phường 1</option>
<option value="ward2">Phường 2</option>
<option value="ward3">Phường 3</option>
</select>
</div>
<div class="form-group">
<label class="form-label">Địa chỉ cụ thể</label>
<input type="text" class="form-input" value="123 Nguyễn Trãi" placeholder="Số nhà, tên đường">
</div>
<div class="form-group">
<label class="form-label">Ngày lấy hàng</label>
<input type="date" class="form-input" id="pickupDate">
</div>
<div class="form-group">
<label class="form-label">Ghi chú</label>
<input type="text" class="form-input" placeholder="Ví dụ: Thời gian yêu cầu giao hàng">
</div>
</div>
<!-- Invoice Information -->
<div class="card">
<div class="form-group" style="height:24px;">
<label class="checkbox-label" style="font-size:16px;">
<input type="checkbox" id="invoiceCheckbox" onchange="toggleInvoiceInfo()">
<span class="checkmark"></span>
Phát hành hóa đơn
</label>
</div>
<div id="invoiceInfoCard" class="invoice-info-card" style="display: none;">
<h4 class="invoice-title">Thông tin hóa đơn</h4>
<div class="form-group">
<label class="form-label">Tên Người Mua</label>
<input type="text" class="form-input" id="buyerName" placeholder="Họ và tên người mua">
</div>
<div class="form-group">
<label class="form-label">Mã số thuế</label>
<input type="text" class="form-input" id="taxCode" placeholder="Mã số thuế công ty">
</div>
<div class="form-group">
<label class="form-label">Tên công ty</label>
<input type="text" class="form-input" id="companyName" placeholder="Tên công ty/tổ chức">
</div>
<div class="form-group">
<label class="form-label">Địa chỉ</label>
<input type="text" class="form-input" id="companyAddress" placeholder="Địa chỉ công ty">
</div>
<div class="form-group">
<label class="form-label">Email nhận hóa đơn</label>
<input type="email" class="form-input" id="invoiceEmail" placeholder="email@company.com">
</div>
<div class="form-group">
<label class="form-label">Số điện thoại</label>
<input type="tel" class="form-input" id="invoicePhone" placeholder="Số điện thoại liên hệ">
</div>
</div>
</div>
<!-- Payment Method -->
<div class="card">
<h3 class="card-title">Phương thức thanh toán</h3>
@@ -70,25 +141,34 @@
<div class="card">
<h3 class="card-title">Tóm tắt đơn hàng</h3>
<div class="d-flex justify-between mb-2">
<span>Gạch men cao cấp 60x60 (10m²)</span>
<span>4.500.000đ</span>
<div>
<div>Gạch men cao cấp</div>
<div class="text-small text-muted">10 m² (28 viên / 10.08 m²)</div>
</div>
<span>4.536.000đ</span>
</div>
<div class="d-flex justify-between mb-2">
<span>Gạch granite nhập khẩu (15m²)</span>
<span>10.200.000đ</span>
<div>
<div>Gạch granite nhập khẩu 1200x1200</div>
<div class="text-small text-muted">(11 viên / 15.84 m²)</div>
</div>
<span>10.771.200đ</span>
</div>
<div class="d-flex justify-between mb-2">
<span>Gạch mosaic trang trí (5m²)</span>
<span>1.600.000đ</span>
<div>
<div>Gạch mosaic trang trí</div>
<div class="text-small text-muted">(5 viên / 5.625 m²)</div>
</div>
<span>1.800.000đ</span>
</div>
<hr style="margin: 12px 0;">
<div class="d-flex justify-between mb-2">
<span>Tạm tính</span>
<span>16.700.000đ</span>
<span>17.107.200đ</span>
</div>
<div class="d-flex justify-between mb-2">
<span>Giảm giá Diamond</span>
<span class="text-success">-2.505.000đ</span>
<span class="text-success">-2.566.000đ</span>
</div>
<div class="d-flex justify-between mb-2">
<span>Phí vận chuyển</span>
@@ -97,13 +177,26 @@
<hr style="margin: 12px 0;">
<div class="d-flex justify-between">
<span class="text-bold" style="font-size: 16px;">Tổng thanh toán</span>
<span class="text-bold text-primary" style="font-size: 18px;">14.195.000đ</span>
<span class="text-bold text-primary" style="font-size: 18px;">14.541.120đ</span>
</div>
</div>
<!-- Price Negotiation -->
<div class="negotiation-checkbox">
<label class="checkbox-label">
<input type="checkbox" id="negotiationCheckbox" onchange="toggleNegotiation()">
<span>Yêu cầu đàm phán giá</span>
</label>
<div class="negotiation-info">
Chọn tùy chọn này nếu bạn muốn đàm phán giá với nhân viên bán hàng trước khi thanh toán.
</div>
</div>
<!-- Place Order Button -->
<div style="margin-bottom: 24px;">
<a href="order-success.html" class="btn btn-primary btn-block">
<a href="payment-qr.html" class="btn btn-primary btn-block">
<i class="fas fa-check-circle"></i> Hoàn tất đặt hàng
</a>
<p class="text-center text-small text-muted mt-2">
@@ -113,5 +206,110 @@
</div>
</div>
</div>
<style>
.invoice-info-card {
margin-top: 16px;
padding: 16px;
background: #f8f9fa;
border-radius: 8px;
border: 1px solid #e5e7eb;
}
.invoice-title {
font-size: 16px;
font-weight: 600;
margin-bottom: 16px;
color: #374151;
}
.checkbox-label {
display: flex;
align-items: center;
cursor: pointer;
font-weight: 500;
}
.checkbox-label input[type="checkbox"] {
margin-right: 8px;
transform: scale(1.1);
}
.negotiation-checkbox {
margin: 16px 0;
padding: 16px;
background: #fef3c7;
border: 1px solid #f59e0b;
border-radius: 8px;
}
.negotiation-info {
font-size: 13px;
color: #92400e;
margin-top: 8px;
}
.payment-method-section.hidden {
display: none;
}
</style>
<script>
// Set default pickup date to tomorrow
document.addEventListener('DOMContentLoaded', function() {
const tomorrow = new Date();
tomorrow.setDate(tomorrow.getDate() + 1);
const dateString = tomorrow.toISOString().split('T')[0];
document.getElementById('pickupDate').value = dateString;
});
function toggleInvoiceInfo() {
const checkbox = document.getElementById('invoiceCheckbox');
const invoiceCard = document.getElementById('invoiceInfoCard');
if (checkbox.checked) {
invoiceCard.style.display = 'block';
} else {
invoiceCard.style.display = 'none';
}
}
function toggleNegotiation() {
const checkbox = document.getElementById('negotiationCheckbox');
const paymentSection = document.querySelector('.card:has(.list-item)'); // Payment method section
const submitBtn = document.querySelector('.btn-primary');
if (checkbox.checked) {
paymentSection.classList.add('hidden');
submitBtn.innerHTML = '<i class="fas fa-handshake"></i> Gửi Yêu cầu & Đàm phán';
} else {
paymentSection.classList.remove('hidden');
submitBtn.innerHTML = '<i class="fas fa-check-circle"></i> Hoàn tất đặt hàng';
}
}
function toggleNegotiation() {
const checkbox = document.getElementById('negotiationCheckbox');
const paymentMethods = document.querySelectorAll('.card')[2]; // Payment method section is 3rd card
const submitBtn = document.querySelector('.btn-primary');
if (checkbox.checked) {
paymentMethods.style.display = 'none';
submitBtn.innerHTML = '<i class="fas fa-handshake"></i> Gửi Yêu cầu & Đàm phán';
submitBtn.href = '#'; // Don't redirect to order success
submitBtn.onclick = function(e) {
e.preventDefault();
alert('Yêu cầu đàm phán đã được gửi! Nhân viên bán hàng sẽ liên hệ với bạn sớm.');
window.location.href = 'order-dam-phan.html';
};
} else {
paymentMethods.style.display = 'block';
submitBtn.innerHTML = '<i class="fas fa-check-circle"></i> Hoàn tất đặt hàng';
submitBtn.href = 'payment-qr.html';
submitBtn.onclick = null;
}
}
</script>
</body>
</html>

462
html/chinh-sach-gia.html Normal file
View File

@@ -0,0 +1,462 @@
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chính sách giá - 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="index.html" class="back-button">
<i class="fas fa-arrow-left"></i>
</a>
<h1 class="header-title">Chính sách giá</h1>
<button class="back-button" onclick="openInfoModal()">
<i class="fas fa-info-circle"></i>
</button>
</div>
<div class="container">
<!-- Tab Navigation -->
<div class="tab-nav mb-3">
<button class="tab-item active" data-tab="policy" onclick="switchTab('policy')">Chính sách giá</button>
<button class="tab-item" data-tab="pricelist" onclick="switchTab('pricelist')">Bảng giá</button>
</div>
<!-- Policy Tab Content -->
<div id="policyTab" class="tab-content active">
<div class="price-documents-list">
<!-- Document Card 1 -->
<div class="document-card">
<div class="document-icon">
<i class="fas fa-file-pdf text-red-600"></i>
</div>
<div class="document-info">
<h3 class="document-title">Chính sách giá Eurotile T10/2025</h3>
<p class="document-meta">
<i class="fas fa-calendar-alt mr-1"></i>
Công bố: 01/10/2025
</p>
<p class="document-desc">
Chính sách giá mới nhất cho sản phẩm gạch Eurotile, áp dụng từ tháng 10/2025
</p>
</div>
<button class="download-btn" onclick="downloadPDF('policy-eurotile-10-2025')">
<i class="fas fa-download"></i>
Tải về
</button>
</div>
<!-- Document Card 2 -->
<div class="document-card">
<div class="document-icon">
<i class="fas fa-file-pdf text-red-600"></i>
</div>
<div class="document-info">
<h3 class="document-title">Chính sách giá Vasta Stone T10/2025</h3>
<p class="document-meta">
<i class="fas fa-calendar-alt mr-1"></i>
Công bố: 01/10/2025
</p>
<p class="document-desc">
Chính sách giá đá tự nhiên Vasta Stone, hiệu lực từ tháng 10/2025
</p>
</div>
<button class="download-btn" onclick="downloadPDF('policy-vasta-10-2025')">
<i class="fas fa-download"></i>
Tải về
</button>
</div>
<!-- Document Card 3 -->
<div class="document-card">
<div class="document-icon">
<i class="fas fa-file-pdf text-red-600"></i>
</div>
<div class="document-info">
<h3 class="document-title">Chính sách chiết khấu đại lý 2025</h3>
<p class="document-meta">
<i class="fas fa-calendar-alt mr-1"></i>
Công bố: 15/09/2025
</p>
<p class="document-desc">
Chương trình chiết khấu và ưu đãi dành cho đại lý, thầu thợ
</p>
</div>
<button class="download-btn" onclick="downloadPDF('policy-dealer-2025')">
<i class="fas fa-download"></i>
Tải về
</button>
</div>
<!-- Document Card 4 -->
<div class="document-card">
<div class="document-icon">
<i class="fas fa-file-pdf text-red-600"></i>
</div>
<div class="document-info">
<h3 class="document-title">Điều kiện thanh toán & giao hàng</h3>
<p class="document-meta">
<i class="fas fa-calendar-alt mr-1"></i>
Công bố: 01/08/2025
</p>
<p class="document-desc">
Điều khoản thanh toán, chính sách giao hàng và bảo hành sản phẩm
</p>
</div>
<button class="download-btn" onclick="downloadPDF('policy-payment-2025')">
<i class="fas fa-download"></i>
Tải về
</button>
</div>
</div>
</div>
<!-- Price List Tab Content -->
<div id="pricelistTab" class="tab-content" style="display: none;">
<div class="price-documents-list">
<!-- Document Card 1 -->
<div class="document-card">
<div class="document-icon">
<i class="fas fa-file-excel text-green-600"></i>
</div>
<div class="document-info">
<h3 class="document-title">Bảng giá Gạch Granite Eurotile 2025</h3>
<p class="document-meta">
<i class="fas fa-calendar-alt mr-1"></i>
Cập nhật: 01/10/2025
</p>
<p class="document-desc">
Bảng giá chi tiết toàn bộ sản phẩm gạch granite, kích thước 60x60, 80x80, 120x120
</p>
</div>
<button class="download-btn" onclick="downloadPDF('pricelist-granite-2025')">
<i class="fas fa-download"></i>
Tải về
</button>
</div>
<!-- Document Card 2 -->
<div class="document-card">
<div class="document-icon">
<i class="fas fa-file-excel text-green-600"></i>
</div>
<div class="document-info">
<h3 class="document-title">Bảng giá Gạch Ceramic Eurotile 2025</h3>
<p class="document-meta">
<i class="fas fa-calendar-alt mr-1"></i>
Cập nhật: 01/10/2025
</p>
<p class="document-desc">
Bảng giá gạch ceramic vân gỗ, vân đá, vân xi măng các loại
</p>
</div>
<button class="download-btn" onclick="downloadPDF('pricelist-ceramic-2025')">
<i class="fas fa-download"></i>
Tải về
</button>
</div>
<!-- Document Card 3 -->
<div class="document-card">
<div class="document-icon">
<i class="fas fa-file-excel text-green-600"></i>
</div>
<div class="document-info">
<h3 class="document-title">Bảng giá Đá tự nhiên Vasta Stone 2025</h3>
<p class="document-meta">
<i class="fas fa-calendar-alt mr-1"></i>
Cập nhật: 01/10/2025
</p>
<p class="document-desc">
Bảng giá đá marble, granite tự nhiên nhập khẩu, kích thước tấm lớn
</p>
</div>
<button class="download-btn" onclick="downloadPDF('pricelist-stone-2025')">
<i class="fas fa-download"></i>
Tải về
</button>
</div>
<!-- Document Card 4 -->
<div class="document-card">
<div class="document-icon">
<i class="fas fa-file-excel text-green-600"></i>
</div>
<div class="document-info">
<h3 class="document-title">Bảng giá Phụ kiện & Vật liệu 2025</h3>
<p class="document-meta">
<i class="fas fa-calendar-alt mr-1"></i>
Cập nhật: 15/09/2025
</p>
<p class="document-desc">
Giá keo dán, chà ron, nẹp nhựa, nẹp inox và các phụ kiện thi công
</p>
</div>
<button class="download-btn" onclick="downloadPDF('pricelist-accessories-2025')">
<i class="fas fa-download"></i>
Tải về
</button>
</div>
<!-- Document Card 5 -->
<div class="document-card">
<div class="document-icon">
<i class="fas fa-file-excel text-green-600"></i>
</div>
<div class="document-info">
<h3 class="document-title">Bảng giá Gạch Outdoor & Chống trơn 2025</h3>
<p class="document-meta">
<i class="fas fa-calendar-alt mr-1"></i>
Cập nhật: 01/09/2025
</p>
<p class="document-desc">
Bảng giá sản phẩm outdoor, gạch chống trơn dành cho ngoại thất
</p>
</div>
<button class="download-btn" onclick="downloadPDF('pricelist-outdoor-2025')">
<i class="fas fa-download"></i>
Tải về
</button>
</div>
</div>
</div>
</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 Chính sách giá:</p>
<ul class="list-disc ml-6 mt-3">
<li>Chọn tab "Chính sách giá" để xem các chính sách giá hiện hành</li>
<li>Chọn tab "Bảng giá" để tải về bảng giá chi tiết sản phẩm</li>
<li>Nhấn nút "Tải về" để download file PDF/Excel</li>
<li>Các bảng giá được cập nhật định kỳ hàng tháng</li>
<li>Liên hệ sales để được tư vấn giá tốt nhất</li>
</ul>
</div>
<div class="modal-footer">
<button class="btn btn-primary" onclick="closeInfoModal()">Đóng</button>
</div>
</div>
</div>
</div>
<style>
.price-documents-list {
display: flex;
flex-direction: column;
gap: 16px;
}
.document-card {
background: white;
border: 1px solid #e5e7eb;
border-radius: 12px;
padding: 16px;
display: flex;
gap: 16px;
align-items: flex-start;
transition: all 0.2s;
}
.document-card:hover {
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
transform: translateY(-2px);
}
.document-icon {
font-size: 32px;
flex-shrink: 0;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
background: #f8f9fa;
border-radius: 8px;
}
.document-info {
flex: 1;
}
.document-title {
font-size: 16px;
font-weight: 600;
color: #1f2937;
margin-bottom: 6px;
}
.document-meta {
font-size: 13px;
color: #6b7280;
margin-bottom: 8px;
}
.document-desc {
font-size: 14px;
color: #6b7280;
line-height: 1.5;
}
.download-btn {
background: #005B9A;
color: white;
border: none;
padding: 10px 16px;
border-radius: 8px;
cursor: pointer;
font-size: 14px;
font-weight: 500;
display: flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
transition: all 0.2s;
}
.download-btn:hover {
background: #004a7c;
transform: scale(1.05);
}
.download-btn i {
font-size: 16px;
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
.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;
}
@media (max-width: 768px) {
.document-card {
flex-direction: column;
align-items: stretch;
}
.download-btn {
width: 100%;
justify-content: center;
}
}
.tab-item.active {
background: var(--primary-blue);
color: var(--white);
}
</style>
<script>
function switchTab(tabName) {
// Update tab buttons
const tabButtons = document.querySelectorAll('.tab-item');
tabButtons.forEach(btn => {
if (btn.dataset.tab === tabName) {
btn.classList.add('active');
} else {
btn.classList.remove('active');
}
});
// Update tab content
document.getElementById('policyTab').style.display = tabName === 'policy' ? 'block' : 'none';
document.getElementById('pricelistTab').style.display = tabName === 'pricelist' ? 'block' : 'none';
}
function downloadPDF(documentId) {
// Simulate PDF download
alert(`Đang tải file: ${documentId}.pdf\n\nFile sẽ được tải về máy của bạn trong giây lát.`);
// In a real application, this would trigger actual file download:
// window.location.href = `/api/documents/${documentId}/download`;
}
function openInfoModal() {
document.getElementById('infoModal').style.display = 'flex';
}
function closeInfoModal() {
document.getElementById('infoModal').style.display = 'none';
}
// 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>

22
html/design-request-create.html
View File

@@ -344,6 +344,20 @@
<div class="error-message" id="project-area-error">Vui lòng nhập diện tích hợp lệ</div>
</div>
<div class="form-group">
<label class="form-label">
Khu vực (Tỉnh/ Thành phố) <span class="required">*</span>
</label>
<input
type="text"
class="form-input"
id="project-area"
placeholder="VD: Hà Nội"
min="1"
required>
<div class="error-message" id="project-area-error">Vui lòng nhập khu vực</div>
</div>
<div class="form-group">
<label class="form-label">
Phong cách mong muốn <span class="required">*</span>
@@ -397,7 +411,7 @@
<div class="error-message" id="project-notes-error">Vui lòng mô tả yêu cầu chi tiết</div>
</div>
<div class="form-group">
<!--<div class="form-group">
<label class="form-label">
Thông tin liên hệ
</label>
@@ -406,7 +420,7 @@
class="form-input"
id="contact-info"
placeholder="Số điện thoại, email hoặc địa chỉ (tùy chọn)">
</div>
</div>-->
</div>
<!-- File Upload -->
@@ -449,10 +463,10 @@
<!-- Form Actions -->
<div class="form-actions">
<button type="button" class="btn btn-secondary" onclick="saveDraft()">
<!--<button type="button" class="btn btn-secondary" onclick="saveDraft()">
<i class="fas fa-save"></i>
Lưu nháp
</button>
</button>-->
<button type="submit" class="btn btn-primary">
<i class="fas fa-paper-plane"></i>
Gửi yêu cầu

224
html/index.html
View File

@@ -8,6 +8,83 @@
<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>
<style>
/* News Section Styles */
.news-slider-container {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.news-slider-wrapper {
display: flex;
gap: 16px;
padding-bottom: 8px;
}
.news-card {
flex-shrink: 0;
width: 280px;
background: white;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
border: 1px solid #e2e8f0;
transition: all 0.3s ease;
}
.news-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
.news-image {
width: 100%;
height: 140px;
object-fit: cover;
}
.news-content {
padding: 12px;
}
.news-title {
font-size: 14px;
font-weight: 600;
color: #1e293b;
line-height: 1.3;
margin-bottom: 6px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.news-desc {
font-size: 12px;
color: #64748b;
line-height: 1.4;
margin-bottom: 8px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.news-meta {
display: flex;
justify-content: space-between;
font-size: 11px;
color: #94a3b8;
}
.news-meta span {
display: flex;
align-items: center;
gap: 4px;
}
</style>
<body>
<div class="page-wrapper">
<div class="container">
@@ -25,8 +102,9 @@
</div>
<div class="d-flex justify-between align-center" style="margin-top: auto;">
<div>
<p style="color: white; font-size: 18px; font-weight: 600; margin-bottom: 4px;">La Nguyen Quynh</p>
<p style="color: rgba(255,255,255,0.9); font-size: 12px;">CLASS: <span style="font-weight: 600;">DIAMOND</span></p>
<p style="color: white; font-size: 18px; font-weight: 600; margin-bottom: 4px;">0983 441 099</p>
<p style="color: rgba(255,255,255,0.9); font-size: 12px;">Name: <span style="font-weight: 600;">LA NGUYEN QUYNH</span></p>
<p style="color: rgba(255,255,255,0.9); font-size: 12px;">Class: <span style="font-weight: 600;">DIAMOND</span></p>
<p style="color: rgba(255,255,255,0.9); font-size: 12px;">Points: <span style="font-weight: 600;">9750</span></p>
</div>
<div style="background: white; padding: 8px; border-radius: 8px;">
@@ -36,11 +114,11 @@
</div>
<!-- Promotions Section -->
<div class="mb-3">
<h2> <b> Chương trình ưu đãi</b> </h2>
<!--<div class="mb-3">
<h2> <b> Tin nổi bật</b> </h2>
<div class="slider-container">
<div class="slider-wrapper">
<div class="slider-item">
<div class="news-card">
<img src="https://images.unsplash.com/photo-1615971677499-5467cbab01c0?w=280&h=140&fit=crop" alt="Khuyến mãi 1">
<div style="padding: 12px; background: white;">
<h3 style="font-size: 14px;">Mua công nhắc - Khuyến mãi cảng lớn</h3>
@@ -63,8 +141,58 @@
</div>
</div>
</div>
</div>
</div>-->
<!-- News Section -->
<div class="mb-3">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;">
<h2> <b> Tin nổi bật</b> </h2>
<a href="news-list.html" style="color: #2563eb; font-size: 12px; text-decoration: none; font-weight: 500;">
Xem tất cả <i class="fas fa-arrow-right" style="margin-left: 4px;"></i>
</a>
</div>
<div class="news-slider-container">
<div class="news-slider-wrapper">
<div class="news-card">
<img src="https://images.unsplash.com/photo-1503387762-592deb58ef4e?w=280&h=140&fit=crop" alt="Tin tức 1" class="news-image">
<div class="news-content">
<h3 class="news-title">5 xu hướng gạch men phòng tắm được ưa chuộng năm 2024</h3>
<p class="news-desc">Khám phá những mẫu gạch men hiện đại, sang trọng cho không gian phòng tắm.</p>
<div class="news-meta">
<span><i class="fas fa-calendar"></i> 15/11/2024</span>
<span><i class="fas fa-eye"></i> 2.3K lượt xem</span>
</div>
</div>
</div>
<div class="news-card">
<img src="https://images.unsplash.com/photo-1586023492125-27b2c045efd7?w=280&h=140&fit=crop" alt="Tin tức 2" class="news-image">
<div class="news-content">
<h3 class="news-title">Hướng dẫn thi công gạch granite 60x60 chuyên nghiệp</h3>
<p class="news-desc">Quy trình thi công chi tiết từ A-Z cho thầy thợ xây dựng.</p>
<div class="news-meta">
<span><i class="fas fa-calendar"></i> 12/11/2024</span>
<span><i class="fas fa-eye"></i> 1.8K lượt xem</span>
</div>
</div>
</div>
<div class="news-card">
<img src="https://images.unsplash.com/photo-1560448204-e02f11c3d0e2?w=280&h=140&fit=crop" alt="Tin tức 3" class="news-image">
<div class="news-content">
<h3 class="news-title">Bảng giá gạch men cao cấp mới nhất tháng 11/2024</h3>
<p class="news-desc">Cập nhật bảng giá chi tiết các dòng sản phẩm gạch men nhập khẩu.</p>
<div class="news-meta">
<span><i class="fas fa-calendar"></i> 10/11/2024</span>
<span><i class="fas fa-eye"></i> 3.1K lượt xem</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Products & Cart Section -->
<div class="card">
<h3 class="card-title">Sản phẩm & Giỏ hàng</h3>
@@ -91,37 +219,6 @@
</div>
</div>
<!-- Loyalty Section -->
<div class="card">
<h3 class="card-title">Khách hàng thân thiết</h3>
<div class="feature-grid">
<a href="points-record.html" class="feature-item">
<div class="feature-icon">
<i class="fas fa-plus-circle"></i>
</div>
<div class="feature-title">Ghi nhận điểm</div>
</a>
<a href="loyalty-rewards.html" class="feature-item">
<div class="feature-icon">
<i class="fas fa-gift"></i>
</div>
<div class="feature-title">Đổi quà</div>
</a>
<a href="points-history.html" class="feature-item">
<div class="feature-icon">
<i class="fas fa-history"></i>
</div>
<div class="feature-title">Lịch sử điểm</div>
</a>
<!--<a href="referral.html" class="feature-item">
<div class="feature-icon">
<i class="fas fa-user-plus"></i>
</div>
<div class="feature-title">Giới thiệu bạn</div>
</a>-->
</div>
</div>
<!-- Orders & Payment Section -->
<!--<div class="card">
<h3 class="card-title">Yêu cầu báo giá & báo giá</h3>
@@ -145,11 +242,11 @@
<div class="card">
<h3 class="card-title">Đơn hàng & thanh toán</h3>
<div class="feature-grid">
<a href="quotes-list.html" class="feature-item">
<a href="chinh-sach-gia.html" class="feature-item">
<div class="feature-icon">
<i class="fas fa-file-alt"></i>
</div>
<div class="feature-title">Yêu cầu báo giá</div>
<div class="feature-title">Chính sách giá</div>
</a>
<a href="orders.html" class="feature-item">
<div class="feature-icon">
@@ -159,12 +256,43 @@
</a>
<a href="payments.html" class="feature-item">
<div class="feature-icon">
<i class="fas fa-file-invoice-dollar"></i>
<!--<i class="fas fa-file-invoice-dollar"></i>-->
<i class="fas fa-credit-card"></i>
</div>
<div class="feature-title">Thanh toán</div>
</a>
</div>
</div>
<!-- Loyalty Section -->
<div class="card">
<h3 class="card-title">Khách hàng thân thiết</h3>
<div class="feature-grid">
<a href="points-record-list.html" class="feature-item">
<div class="feature-icon">
<i class="fas fa-plus-circle"></i>
</div>
<div class="feature-title">Ghi nhận điểm</div>
</a>
<a href="loyalty-rewards.html" class="feature-item">
<div class="feature-icon">
<i class="fas fa-gift"></i>
</div>
<div class="feature-title">Đổi quà</div>
</a>
<a href="points-history.html" class="feature-item">
<div class="feature-icon">
<i class="fas fa-history"></i>
</div>
<div class="feature-title">Lịch sử điểm</div>
</a>
<!--<a href="referral.html" class="feature-item">
<div class="feature-icon">
<i class="fas fa-user-plus"></i>
</div>
<div class="feature-title">Giới thiệu bạn</div>
</a>-->
</div>
</div>
<!-- Collaboration & Reports Section -->
<!--<div class="card">
@@ -192,8 +320,8 @@
</div>-->
<div class="card">
<h3 class="card-title">Nhà mẫu, dự án & tin tức</h3>
<div class="feature-grid">
<h3 class="card-title">Nhà mẫu & dự án</h3>
<div class="grid grid-2">
<a href="nha-mau.html" class="feature-item">
<div class="feature-icon">
<!--<i class="fas fa-building"></i>-->
@@ -201,19 +329,19 @@
</div>
<div class="feature-title">Nhà mẫu</div>
</a>
<a href="project-submission.html" class="feature-item">
<a href="project-submission-list.html" class="feature-item">
<div class="feature-icon">
<!--<i class="fas fa-handshake"></i>-->
<i class="fa-solid fa-building-circle-check"></i>
</div>
<div class="feature-title">Đăng ký dự án</div>
</a>
<a href="news-list.html" class="feature-item">
<!--<a href="news-list.html" class="feature-item">
<div class="feature-icon">
<i class="fa-solid fa-newspaper"></i>
</div>
<div class="feature-title">Tin tức</div>
</a>
</a>-->
</div>
</div>
@@ -242,9 +370,9 @@
<i class="fas fa-crown nav-icon"></i>
<span class="nav-label">Hội viên</span>
</a>
<a href="promotions.html" class="nav-item">
<i class="fas fa-tags nav-icon"></i>
<span class="nav-label">Khuyến mãi</span>
<a href="news-list.html" class="nav-item">
<i class="fas fa-newspaper nav-icon"></i>
<span class="nav-label">Tin tức</span>
</a>
<a href="notifications.html" class="nav-item" style="position: relative">
<i class="fas fa-bell nav-icon"></i>

17
html/login.html
View File

@@ -26,7 +26,7 @@
</div>
<!-- Login Form -->
<form action="otp.html" class="card">
<form action="index.html" class="card">
<div class="form-group">
<label class="form-label" for="phone">Số điện thoại</label>
<div class="form-input-icon">
@@ -34,9 +34,16 @@
<input type="tel" id="phone" class="form-input" placeholder="Nhập số điện thoại" required>
</div>
</div>
<!-- Password -->
<div class="form-group">
<label class="form-label" for="password">Mật khẩu</label>
<div class="form-input-icon">
<i class="fas fa-lock icon"></i>
<input type="password" id="password" class="form-input" placeholder="Nhập mật khẩu" required>
</div>
</div>
<button type="submit" class="btn btn-primary btn-block">
Nhận mã OTP
Đăng nhập
</button>
</form>
@@ -51,7 +58,7 @@
</div>
<!-- Brand Selection -->
<div class="mt-4">
<!-- <div class="mt-4">
<p class="text-center text-small text-muted mb-3">Hoặc chọn thương hiệu</p>
<div class="grid grid-2">
<button class="btn btn-secondary">
@@ -61,7 +68,7 @@
<i class="fas fa-gem"></i> Vasta Stone
</button>
</div>
</div>
</div>-->
<!-- Support -->
<div class="text-center mt-4">

108
html/loyalty-rewards.html
View File

@@ -8,6 +8,63 @@
<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>
<style>
.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>
<body>
<div class="page-wrapper">
<!-- Header -->
@@ -16,9 +73,37 @@
<i class="fas fa-arrow-left"></i>
</a>
<h1 class="header-title">Đổi quà tặng</h1>
<div style="width: 32px;"></div>
<!--<div style="width: 32px;"></div>-->
<button class="back-button" onclick="openInfoModal()">
<i class="fas fa-info-circle"></i>
</button>
</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 Đổi quà tặng:</p>
<ul class="list-disc ml-6 mt-3">
<li>Sử dụng điểm tích lũy của bạn để đổi các phần quà giá trị trong danh mục.</li>
<li>Bấm vào một phần quà để xem chi tiết và điều kiện áp dụng.</li>
<li>Khi xác nhận đổi quà, bạn có thể chọn "Nhận hàng tại Showroom".</li>
<li>Nếu chọn "Nhận hàng tại Showroom", bạn sẽ cần chọn Showroom bạn muốn đến nhận từ danh sách thả xuống.</li>
<li>Quà đã đổi sẽ được chuyển vào mục "Quà của tôi" (trong trang Hội viên).</li>
</ul>
</div>
<div class="modal-footer">
<button class="btn btn-primary" onclick="closeInfoModal()">Đóng</button>
</div>
</div>
</div>
<div class="container">
<!-- Points Balance -->
<div class="card" style="background: linear-gradient(135deg, #005B9A 0%, #38B6FF 100%); color: white;">
@@ -123,4 +208,25 @@
</div>
</div>
</body>
<script>
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>
</html>

17
html/loyalty.html
View File

@@ -16,7 +16,7 @@
</div>
<div class="container">
<!-- Member Card -->
<div class="member-card member-card-diamond">
<div class="member-card member-card-diamond">
<div class="d-flex justify-between align-center">
<div>
<h3 style="color: white; font-size: 24px; margin-bottom: 4px;">EUROTILE</h3>
@@ -29,9 +29,10 @@
</div>
<div class="d-flex justify-between align-center" style="margin-top: auto;">
<div>
<p style="color: white; font-size: 18px; font-weight: 600; margin-bottom: 4px;">La Nguyen Quynh</p>
<p style="color: rgba(255,255,255,0.9); font-size: 12px;">CLASS: <span style="font-weight: 600;">DIAMOND</span></p>
<p style="color: rgba(255,255,255,0.9); font-size: 12px;">Points: <span style="font-weight: 600;">9750</span></p>
<p style="color: white; font-size: 18px; font-weight: 600; margin-bottom: 4px;">0983 441 099</p>
<p style="color: rgba(255,255,255,0.9); font-size: 12px; margin-bottom: 0px;">Name: <span style="font-weight: 600;">LA NGUYEN QUYNH</span></p>
<p style="color: rgba(255,255,255,0.9); font-size: 12px; margin-bottom: 0px;">Class: <span style="font-weight: 600;">DIAMOND</span></p>
<p style="color: rgba(255,255,255,0.9); font-size: 12px; margin-bottom: 0px;">Points: <span style="font-weight: 600;">9750</span></p>
</div>
<div style="background: white; padding: 8px; border-radius: 8px;">
<img src="https://api.qrserver.com/v1/create-qr-code/?size=60x60&data=0983441099" alt="QR Code" style="width: 60px; height: 60px;">
@@ -67,7 +68,7 @@
<i class="fas fa-chevron-right list-item-arrow"></i>
</a>
<a href="points-record.html" class="list-item">
<a href="points-record-list.html" class="list-item">
<div class="list-item-icon">
<i class="fas fa-plus-circle"></i>
</div>
@@ -148,9 +149,9 @@
<i class="fas fa-crown nav-icon"></i>
<span class="nav-label">Hội viên</span>
</a>
<a href="promotions.html" class="nav-item">
<i class="fas fa-tags nav-icon"></i>
<span class="nav-label">Khuyến mãi</span>
<a href="news-list.html" class="nav-item">
<i class="fas fa-newspaper nav-icon"></i>
<span class="nav-label">Tin tức</span>
</a>
<a href="notifications.html" class="nav-item" style="position: relative">
<i class="fas fa-bell nav-icon"></i>

81
html/news-list.html
View File

@@ -5,10 +5,11 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tin tức & Chuyên môn - Worker App</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css">
<style>
:root {
--primary-color: #2563eb;
--primary-color: #005B9A;
--primary-dark: #1d4ed8;
--secondary-color: #64748b;
--success-color: #10b981;
@@ -19,6 +20,7 @@
--text-primary: #1e293b;
--text-secondary: #64748b;
--border-color: #e2e8f0;
scrollbar-width: none;
}
* {
@@ -28,21 +30,22 @@
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
/*font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;*/
background-color: var(--background-color);
color: var(--text-primary);
line-height: 1.6;
overflow-x: hidden;
}
.header {
/*.header {
background: var(--card-background);
border-bottom: 1px solid var(--border-color);
position: sticky;
top: 0;
z-index: 100;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}
padding: 0px;
}*/
.header-content {
display: flex;
@@ -68,11 +71,6 @@
background-color: #f1f5f9;
}
.header-title {
font-size: 1.125rem;
font-weight: 600;
color: var(--text-primary);
}
.search-button {
background: none;
@@ -95,11 +93,12 @@
margin: 0 auto;
background: var(--card-background);
min-height: 100vh;
padding: 0px;
}
.content {
padding: 1rem;
padding-bottom: 100px;
padding: 16px;
padding-bottom: 10px;
}
.categories-section {
@@ -112,6 +111,9 @@
overflow-x: auto;
padding-bottom: 0.5rem;
-webkit-overflow-scrolling: touch;
padding-top: 4px;
scrollbar-width: none;
}
.category-tab {
@@ -121,7 +123,6 @@
color: var(--text-secondary);
border: none;
border-radius: 1.5rem;
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
@@ -308,8 +309,8 @@
@media (max-width: 480px) {
.content {
padding: 0.75rem;
padding-bottom: 100px;
padding: 16px;
padding-bottom: 10px;
}
.news-card {
@@ -325,19 +326,11 @@
</style>
</head>
<body>
<div class="container">
<!-- Header -->
<header class="header">
<div class="header-content">
<button class="back-button" onclick="goBack()">
<i class="fas fa-arrow-left"></i>
</button>
<h1 class="header-title">Tin tức & Chuyên môn</h1>
<button class="search-button" onclick="toggleSearch()">
<i class="fas fa-search"></i>
</button>
</div>
</header>
<div class="header">
<h1 class="header-title">Tin tức & chuyên môn</h1>
</div>
<!-- Content -->
<div class="content">
@@ -345,11 +338,11 @@
<div class="categories-section">
<div class="categories-tabs">
<button class="category-tab active" onclick="filterCategory('all')">Tất cả</button>
<button class="category-tab" onclick="filterCategory('trends')">Xu hướng</button>
<button class="category-tab" onclick="filterCategory('technique')">Kỹ thuật</button>
<button class="category-tab" onclick="filterCategory('pricing')">Bảng giá</button>
<button class="category-tab" onclick="filterCategory('trends')">Tin tức</button>
<button class="category-tab" onclick="filterCategory('technique')">Chuyên môn</button>
<button class="category-tab" onclick="filterCategory('projects')">Dự án</button>
<button class="category-tab" onclick="filterCategory('tips')">Mẹo hay</button>
<button class="category-tab" onclick="filterCategory('tips')">Sự kiện</button>
<button class="category-tab" onclick="filterCategory('tips')">Khuyến mãi</button>
</div>
</div>
@@ -476,9 +469,33 @@
Xem thêm tin tức
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Bottom Navigation -->
<div class="bottom-nav">
<a href="index.html" class="nav-item">
<i class="fas fa-home nav-icon"></i>
<span class="nav-label">Trang chủ</span>
</a>
<a href="loyalty.html" class="nav-item">
<i class="fas fa-crown nav-icon"></i>
<span class="nav-label">Hội viên</span>
</a>
<a href="news-list.html" class="nav-item active">
<i class="fas fa-newspaper nav-icon"></i>
<span class="nav-label">Tin tức</span>
</a>
<a href="notifications.html" class="nav-item" style="position: relative">
<i class="fas fa-bell nav-icon"></i>
<span class="nav-label">Thông báo</span>
<span class="badge">5</span>
</a>
<a href="account.html" class="nav-item">
<i class="fas fa-user nav-icon"></i>
<span class="nav-label">Cài đặt</span>
</a>
</div>
<script>
function goBack() {
window.history.back();

105
html/nha-mau.html
View File

@@ -222,6 +222,61 @@
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>
@@ -232,7 +287,10 @@
<i class="fas fa-arrow-left"></i>
</a>
<h1 class="header-title">Nhà mẫu</h1>
<div style="width: 32px;"></div>
<!--<div style="width: 32px;"></div>-->
<button class="back-button" onclick="openInfoModal()">
<i class="fas fa-info-circle"></i>
</button>
</div>
<!-- Tab Navigation -->
@@ -414,6 +472,30 @@
</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>
@@ -476,6 +558,27 @@
}, 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>

12
html/notifications.html
View File

@@ -7,6 +7,12 @@
<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-item.active {
background: var(--primary-blue);
color: var(--white);
}
</style>
</head>
<body>
<div class="page-wrapper">
@@ -105,9 +111,9 @@
<i class="fas fa-crown nav-icon"></i>
<span class="nav-label">Hội viên</span>
</a>
<a href="promotions.html" class="nav-item">
<i class="fas fa-tags nav-icon"></i>
<span class="nav-label">Khuyến mãi</span>
<a href="news-list.html" class="nav-item">
<i class="fas fa-newspaper nav-icon"></i>
<span class="nav-label">Tin tức</span>
</a>
<a href="notifications.html" class="nav-item active" style="position: relative">
<i class="fas fa-bell nav-icon"></i>

85
html/order-dam-phan.html Normal file
View File

@@ -0,0 +1,85 @@
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Đặt hàng thành công - 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">
<div class="container">
<div class="success-container">
<div class="success-icon">
<i class="fas fa-check"></i>
</div>
<h1 class="success-title">Đã gửi yêu cầu!</h1>
<p class="success-message">
Cảm ơn bạn đã gửi yêu cầu đàm phán. Chúng tôi sẽ liên hệ lại trong vòng 24 giờ.
</p>
<!-- Order Info -->
<!--<div class="card" style="background: var(--background-gray);">
<div class="text-center mb-3">
<p class="text-small text-muted">Mã đơn hàng</p>
<p class="text-bold" style="font-size: 24px; color: var(--primary-blue);">DH2023120801</p>
</div>
<div class="d-flex justify-between mb-2">
<span class="text-small text-muted">Ngày đặt</span>
<span class="text-small">08/12/2023 14:30</span>
</div>
<div class="d-flex justify-between mb-2">
<span class="text-small text-muted">Tổng tiền</span>
<span class="text-small text-bold">14.195.000đ</span>
</div>
<div class="d-flex justify-between mb-2">
<span class="text-small text-muted">Phương thức thanh toán</span>
<span class="text-small">Chuyển khoản</span>
</div>
<div class="d-flex justify-between">
<span class="text-small text-muted">Trạng thái</span>
<span class="text-small text-warning">Chờ xác nhận</span>
</div>
</div>-->
<!-- Next Steps -->
<!--<div class="card">
<h3 class="card-title">Các bước tiếp theo</h3>
<div style="display: flex; align-items: flex-start; margin-bottom: 12px;">
<div style="width: 24px; height: 24px; background: var(--primary-blue); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; margin-right: 12px; flex-shrink: 0;">1</div>
<div>
<p class="text-small text-bold">Chờ liên hệ</p>
<p class="text-small text-muted">Nhân viên sẽ liên hệ trong 24h</p>
</div>
</div>
<div style="display: flex; align-items: flex-start; margin-bottom: 12px;">
<div style="width: 24px; height: 24px; background: var(--border-color); color: var(--text-light); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; margin-right: 12px; flex-shrink: 0;">2</div>
<div>
<p class="text-small text-bold">Đàm phán giá</p>
<p class="text-small text-muted">Nhân viên sẽ gửi lại báo giá chi tiết sau đàm phán thành công</p>
</div>
</div>
<div style="display: flex; align-items: flex-start;">
<div style="width: 24px; height: 24px; background: var(--border-color); color: var(--text-light); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; margin-right: 12px; flex-shrink: 0;">3</div>
<div>
<p class="text-small text-bold">Tạo đơn hàng</p>
<p class="text-small text-muted">Đơn hàng được tạo theo giá được chốt</p>
</div>
</div>
</div>-->
<!-- Action Buttons -->
<a href="#" class="btn btn-primary btn-block mb-2">
<i class="fas fa-eye"></i> Xem chi tiết đơn hàng
</a>
<a href="index.html" class="btn btn-secondary btn-block">
<i class="fas fa-home"></i> Quay về trang chủ
</a>
</div>
</div>
</div>
</body>
</html>

91
html/order-detail.html
View File

@@ -26,7 +26,7 @@
</div>
</div>
<div class="order-detail-content">
<div class="order-detail-content" style="padding-bottom: 0px;">
<!-- Order Status Card -->
<div class="status-timeline-card">
<div class="order-header-info">
@@ -41,47 +41,27 @@
<i class="fas fa-check"></i>
</div>
<div class="timeline-content">
<div class="timeline-title">Đơn hàng được tạo</div>
<div class="timeline-title">Đơn hàng đã tạo</div>
<div class="timeline-date">03/08/2023 - 09:30</div>
</div>
</div>
<div class="timeline-item completed">
<div class="timeline-icon">
<i class="fas fa-check"></i>
</div>
<div class="timeline-content">
<div class="timeline-title">Đã xác nhận đơn hàng</div>
<div class="timeline-date">03/08/2023 - 10:15</div>
</div>
</div>
<div class="timeline-item active">
<div class="timeline-icon">
<i class="fas fa-cog fa-spin"></i>
</div>
<div class="timeline-content">
<div class="timeline-title">Đang chuẩn bị hàng</div>
<div class="timeline-date">Đang thực hiện</div>
<div class="timeline-title">Đã xác nhận đơn hàng</div>
<div class="timeline-date">03/08/2023 - 10:15 (Đang xử lý)</div>
</div>
</div>
<div class="timeline-item pending">
<div class="timeline-icon">
<i class="fas fa-truck"></i>
<i class="fas fa-check-circle"></i>
</div>
<div class="timeline-content">
<div class="timeline-title">Vận chuyển</div>
<div class="timeline-date">Dự kiến: 05/08/2023</div>
</div>
</div>
<div class="timeline-item pending">
<div class="timeline-icon">
<i class="fas fa-box-open"></i>
</div>
<div class="timeline-content">
<div class="timeline-title">Giao hàng thành công</div>
<div class="timeline-title">Đã hoàn thành</div>
<div class="timeline-date">Dự kiến: 07/08/2023</div>
</div>
</div>
@@ -93,7 +73,7 @@
<h3><i class="fas fa-shipping-fast"></i> Thông tin giao hàng</h3>
<div class="delivery-details">
<div class="delivery-method">
<!--<div class="delivery-method">
<div class="delivery-method-icon">
<i class="fas fa-truck"></i>
</div>
@@ -101,16 +81,16 @@
<div class="method-name">Giao hàng tiêu chuẩn</div>
<div class="method-description">Giao trong 3-5 ngày làm việc</div>
</div>
</div>
</div>-->
<div class="delivery-dates">
<div class="date-item">
<!--<div class="date-item">
<div class="date-label">
<i class="fas fa-calendar-alt"></i>
Ngày xuất kho
</div>
<div class="date-value confirmed">05/08/2023</div>
</div>
</div>-->
<div class="date-item">
<div class="date-label">
@@ -160,7 +140,34 @@
</div>
<div class="customer-row">
<span class="customer-label">Loại khách hàng:</span>
<span class="customer-badge vip">Khách VIP</span>
<span class="customer-badge vip">DIAMOND</span>
</div>
</div>
</div>
<!-- Invoice Information -->
<div class="customer-info-card">
<h3><i class="fas fa-file-invoice"></i> Thông tin hóa đơn</h3>
<div class="customer-details">
<div class="customer-row">
<span class="customer-label">Tên công ty:</span>
<span class="customer-value">Công ty TNHH Xây dựng ABC</span>
</div>
<div class="customer-row">
<span class="customer-label">Mã số thuế:</span>
<span class="customer-value">0123456789</span>
</div>
<div class="customer-row">
<span class="customer-label">Địa chỉ công ty:</span>
<span class="customer-value">123 Nguyễn Trãi, Quận 1, TP.HCM</span>
</div>
<div class="customer-row">
<span class="customer-label">Email nhận hóa đơn:</span>
<span class="customer-value">ketoan@abc.com</span>
</div>
<div class="customer-row">
<span class="customer-label">Loại hóa đơn:</span>
<span class="customer-badge" style="background: #d1ecf1; color: #0c5460;">Hóa đơn VAT</span>
</div>
</div>
</div>
@@ -258,16 +265,28 @@
</div>
<!-- Action Buttons -->
<div class="order-actions">
<!--<div class="order-actions">
<button class="action-btn secondary" onclick="contactCustomer()">
<i class="fas fa-phone"></i>
Liên hệ khách hàng
<i class="fas fa-comments"></i>
Hỗ trợ
</button>
<button class="action-btn primary" onclick="updateOrderStatus()">
<i class="fas fa-edit"></i>
Cập nhật trạng thái
</button>
</div>
</div>-->
<!-- Floating Action Button -->
<a href="chat-list.html" class="fab-link">
<button class="fab">
<i class="fas fa-comments"></i>
</button>
</a>
<!--<a href="chat-list.html" class="fab">-->
<!--<button class="fab">-->
<!--<i class="fas fa-comments"></i>-->
<!--</button>
<!--</a>-->
</div>
<style>
@@ -503,7 +522,7 @@
}
.customer-badge.vip {
background: linear-gradient(135deg, #FFD700, #FFA500);
background: linear-gradient(135deg, #001F4D, #004080, #660066);
color: white;
}

148
html/orders (bản cũ).html
View File

@@ -1,148 +0,0 @@
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Danh sách đơn hàng - 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="index.html" class="back-button">
<i class="fas fa-arrow-left"></i>
</a>
<h1 class="header-title">Danh sách đơn hàng</h1>
<button class="back-button">
<i class="fas fa-plus"></i>
</button>
</div>
<div class="container">
<!-- Search Bar -->
<div class="search-bar">
<i class="fas fa-search search-icon"></i>
<input type="text" class="search-input" placeholder="Mã đơn hàng">
</div>
<!-- Status Filters -->
<div class="tab-nav mb-3">
<button class="tab-item active">Tất cả</button>
<button class="tab-item">Chờ xác nhận</button>
<button class="tab-item">Đang xử lý</button>
<button class="tab-item">Đang giao</button>
<button class="tab-item">Hoàn thành</button>
<button class="tab-item">Đã hủy</button>
</div>
<!-- Orders List -->
<div class="orders-list">
<!-- Order Item 1 - Processing -->
<div class="order-card processing" onclick="viewOrderDetail('DH001234')">
<div class="order-status-indicator"></div>
<div class="order-content">
<div class="d-flex justify-between align-start mb-2">
<h4 class="order-id">#DH001234</h4>
<span class="order-amount">12.900.000 VND</span>
</div>
<div class="order-details">
<p class="order-date">Ngày đặt: 03/08/2023</p>
<p class="order-customer">Khách hàng: Nguyễn Văn A</p>
<p class="order-status-text">
<span class="status-badge processing">Đang xử lý</span>
</p>
<p class="order-note">Gạch granite 60x60 - Số lượng: 50m²</p>
</div>
</div>
</div>
<!-- Order Item 2 - Completed -->
<div class="order-card completed">
<div class="order-status-indicator"></div>
<div class="order-content">
<div class="d-flex justify-between align-start mb-2">
<h4 class="order-id">#DH001233</h4>
<span class="order-amount">8.500.000 VND</span>
</div>
<div class="order-details">
<p class="order-date">Ngày đặt: 02/08/2023</p>
<p class="order-customer">Khách hàng: Trần Thị B</p>
<p class="order-status-text">
<span class="status-badge completed">Hoàn thành</span>
</p>
<p class="order-note">Gạch ceramic 30x30 - Số lượng: 80m²</p>
</div>
</div>
</div>
<!-- Order Item 3 - Shipping -->
<div class="order-card shipping">
<div class="order-status-indicator"></div>
<div class="order-content">
<div class="d-flex justify-between align-start mb-2">
<h4 class="order-id">#DH001232</h4>
<span class="order-amount">15.200.000 VND</span>
</div>
<div class="order-details">
<p class="order-date">Ngày đặt: 01/08/2023</p>
<p class="order-customer">Khách hàng: Lê Văn C</p>
<p class="order-status-text">
<span class="status-badge shipping">Đang giao</span>
</p>
<p class="order-note">Gạch porcelain 80x80 - Số lượng: 100m²</p>
</div>
</div>
</div>
<!-- Order Item 4 - Pending -->
<div class="order-card pending">
<div class="order-status-indicator"></div>
<div class="order-content">
<div class="d-flex justify-between align-start mb-2">
<h4 class="order-id">#DH001231</h4>
<span class="order-amount">6.750.000 VND</span>
</div>
<div class="order-details">
<p class="order-date">Ngày đặt: 31/07/2023</p>
<p class="order-customer">Khách hàng: Phạm Thị D</p>
<p class="order-status-text">
<span class="status-badge pending">Chờ xác nhận</span>
</p>
<p class="order-note">Gạch mosaic 25x25 - Số lượng: 40m²</p>
</div>
</div>
</div>
<!-- Order Item 5 - Cancelled -->
<div class="order-card cancelled">
<div class="order-status-indicator"></div>
<div class="order-content">
<div class="d-flex justify-between align-start mb-2">
<h4 class="order-id">#DH001230</h4>
<span class="order-amount">3.200.000 VND</span>
</div>
<div class="order-details">
<p class="order-date">Ngày đặt: 30/07/2023</p>
<p class="order-customer">Khách hàng: Hoàng Văn E</p>
<p class="order-status-text">
<span class="status-badge cancelled">Đã hủy</span>
</p>
<p class="order-note">Gạch terrazzo 40x40 - Số lượng: 20m²</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

425
html/orders(1).html Normal file
View File

@@ -0,0 +1,425 @@
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Danh sách đơn hàng - 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>
<style>
.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;
}
.order-card {
background: white;
border-radius: 12px;
padding: 16px;
margin-bottom: 16px;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
cursor: pointer;
transition: all 0.3s ease;
position: relative;
border-left: 4px solid transparent;
}
.order-card:hover {
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
transform: translateY(-2px);
}
.order-card.pending {
border-left-color: #ffc107;
}
.order-card.processing {
border-left-color: #38B6FF;
}
.order-card.shipping {
border-left-color: #9C27B0;
}
.order-card.completed {
border-left-color: #28a745;
}
.order-card.cancelled {
border-left-color: #dc3545;
}
.order-id {
font-size: 16px;
font-weight: 700;
color: var(--text-dark);
}
.order-amount {
font-size: 16px;
font-weight: 700;
color: var(--primary-blue);
}
.order-date, .order-customer {
font-size: 13px;
color: var(--text-light);
margin-bottom: 4px;
}
.status-badge {
display: inline-block;
padding: 4px 12px;
border-radius: 12px;
font-size: 12px;
font-weight: 500;
}
.status-badge.pending {
background: #fff3cd;
color: #856404;
}
.status-badge.processing {
background: #d1ecf1;
color: #0c5460;
}
.status-badge.shipping {
background: #e8d4f1;
color: #6a1b9a;
}
.status-badge.completed {
background: #d4edda;
color: #155724;
}
.status-badge.cancelled {
background: #f8d7da;
color: #721c24;
}
</style>
<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">Danh sách đơn hàng</h1>
<button class="back-button" onclick="openInfoModal()">
<i class="fas fa-info-circle"></i>
</button>
</div>
<div class="container">
<!-- Search Bar -->
<div class="search-bar">
<i class="fas fa-search search-icon"></i>
<input type="text" class="search-input" placeholder="Mã đơn hàng">
</div>
<!-- Status Filters -->
<!--<div class="tab-nav mb-3">
<button class="tab-item active">Tất cả</button>
<button class="tab-item">Chờ xác nhận</button>
<button class="tab-item">Đang xử lý</button>
<button class="tab-item">Đang giao</button>
<button class="tab-item">Hoàn thành</button>
<button class="tab-item">Đã hủy</button>
</div>-->
<!-- Filter Pills -->
<div class="filter-container">
<!--<button class="filter-pill active">Tất cả</button>-->
<button class="filter-pill active">Chờ xác nhận</button>
<button class="filter-pill">Đang xử lý</button>
<button class="filter-pill">Đang giao</button>
<button class="filter-pill">Hoàn thành</button>
<button class="filter-pill">Đã hủy</button>
</div>
<!-- Orders List -->
<div class="orders-list">
<!-- Order Item 1 - Processing -->
<div class="order-card processing" onclick="viewOrderDetail('DH001234')">
<div class="order-status-indicator"></div>
<div class="order-content">
<div class="d-flex justify-between align-start mb-2">
<h4 class="order-id">#DH001234</h4>
<span class="order-amount">12.900.000 VND</span>
</div>
<div class="order-details">
<p class="order-date">Ngày đặt: 03/08/2025</p>
<p class="order-customer">Ngày giao: 06/08/2025</p>
<p class="order-customer">Địa chỉ: Quận 7, HCM</p>
<p class="order-status-text">
<span class="status-badge processing">Đang xử lý</span>
</p>
</div>
</div>
</div>
<!-- Order Item 2 - Completed -->
<div class="order-card completed" onclick="viewOrderDetail('DH001233')">
<div class="order-status-indicator"></div>
<div class="order-content">
<div class="d-flex justify-between align-start mb-2">
<h4 class="order-id">#DH001233</h4>
<span class="order-amount">8.500.000 VND</span>
</div>
<div class="order-details">
<p class="order-date">Ngày đặt: 24/06/2025</p>
<p class="order-customer">Ngày giao: 27/06/202</p>
<p class="order-customer">Địa chỉ: Thủ Dầu Một, Bình Dương</p>
<p class="order-status-text">
<span class="status-badge completed">Hoàn thành</span>
</p>
</div>
</div>
</div>
<!-- Order Item 3 - Shipping -->
<div class="order-card shipping" onclick="viewOrderDetail('DH001232')">
<div class="order-status-indicator"></div>
<div class="order-content">
<div class="d-flex justify-between align-start mb-2">
<h4 class="order-id">#DH001232</h4>
<span class="order-amount">15.200.000 VND</span>
</div>
<div class="order-details">
<p class="order-date">Ngày đặt: 01/03/2025</p>
<p class="order-customer">Ngày giao: 05/03/2025</p>
<p class="order-customer">Địa chỉ: Cầu Giấy, Hà Nội</p>
<p class="order-status-text">
<span class="status-badge shipping">Đang giao</span>
</p>
</div>
</div>
</div>
<!-- Order Item 4 - Pending -->
<div class="order-card pending" data-status="pending" onclick="viewOrderDetail('DH001231')">
<div class="order-status-indicator"></div>
<div class="order-content">
<div class="d-flex justify-between align-start mb-2">
<h4 class="order-id">#DH001231</h4>
<span class="order-amount">6.750.000 VND</span>
</div>
<div class="order-details">
<p class="order-date">Ngày đặt: 08/11/2024</p>
<p class="order-customer">Ngày giao: 12/11/2024</p>
<p class="order-customer">Địa chỉ: Thủ Đức, HCM</p>
<p class="order-status-text">
<span class="status-badge pending">Chờ xác nhận</span>
</p>
</div>
</div>
</div>
<!-- Order Item 5 - Cancelled -->
<div class="order-card cancelled" onclick="viewOrderDetail('DH001230')">
<div class="order-status-indicator"></div>
<div class="order-content">
<div class="d-flex justify-between align-start mb-2">
<h4 class="order-id">#DH001230</h4>
<span class="order-amount">3.200.000 VND</span>
</div>
<div class="order-details">
<p class="order-date">Ngày đặt: 30/07/2024</p>
<p class="order-customer">Ngày giao: 04/08/2024</p>
<p class="order-customer">Địa chỉ: Rạch Giá, Kiên Giang</p>
<p class="order-status-text">
<span class="status-badge cancelled">Đã hủy</span>
</p>
</div>
</div>
</div>
</div>
</div>
<!-- Bottom Navigation -->
<!-- <div class="bottom-nav">
<a href="index.html" class="nav-item active">
<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">
<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">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 Sản phẩm:</p>
<ul class="list-disc ml-6 mt-3">
<li>Sử dụng thanh tìm kiếm để tìm sản phẩm theo tên hoặc mã</li>
<li>Nhấn "Bộ lọc" để lọc sản phẩm theo nhiều tiêu chí</li>
<li>Chuyển đổi giữa chế độ xem lưới và danh sách</li>
<li>Nhấn vào sản phẩm để xem chi tiết</li>
<li>Thêm sản phẩm yêu thích bằng icon tim</li>
</ul>
</div>
<div class="modal-footer">
<button class="btn btn-primary" onclick="closeInfoModal()">Đóng</button>
</div>
</div>
</div>
</div>
<script>
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';
}
});
// Filter functionality
document.addEventListener('DOMContentLoaded', function() {
const filterButtons = document.querySelectorAll('.filter-pill');
const orderCards = document.querySelectorAll('.order-card');
// Set "Chờ xác nhận" as default active tab
filterButtons.forEach(btn => btn.classList.remove('active'));
filterButtons[0].classList.add('active'); // First button is "Chờ xác nhận"
// Show only pending orders by default
filterOrders('pending');
filterButtons.forEach(button => {
button.addEventListener('click', function() {
// Remove active class from all buttons
filterButtons.forEach(btn => btn.classList.remove('active'));
// Add active class to clicked button
this.classList.add('active');
// Get filter status
const filterText = this.textContent.trim();
let status = '';
switch(filterText) {
case 'Chờ xác nhận':
status = 'pending';
break;
case 'Đang xử lý':
status = 'processing';
break;
case 'Đang giao':
status = 'shipping';
break;
case 'Hoàn thành':
status = 'completed';
break;
case 'Đã hủy':
status = 'cancelled';
break;
}
filterOrders(status);
});
});
function filterOrders(status) {
orderCards.forEach(card => {
if (status === '' || card.classList.contains(status)) {
card.style.display = 'block';
} else {
card.style.display = 'none';
}
});
}
});
</script>
</body>
</html>

171
html/orders.html
View File

@@ -8,6 +8,62 @@
<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>
<style>
.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>
<body>
<div class="page-wrapper">
<!-- Header -->
@@ -15,9 +71,9 @@
<a href="index.html" class="back-button">
<i class="fas fa-arrow-left"></i>
</a>
<h1 class="header-title">Danh sách đơn hàng</h1>
<button class="back-button">
<i class="fas fa-plus"></i>
<h1 class="header-title">Danh sách đơn hàng</h1>
<button class="back-button" onclick="openInfoModal()">
<i class="fas fa-info-circle"></i>
</button>
</div>
@@ -39,11 +95,10 @@
</div>-->
<!-- Filter Pills -->
<div class="filter-container">
<button class="filter-pill active">Tất cả</button>
<button class="filter-pill">Chờ xác nhận</button>
<button class="filter-pill">Gạch ốp tường</button>
<!--<button class="filter-pill active">Tất cả</button>-->
<button class="filter-pill active">Chờ xác nhận</button>
<button class="filter-pill">Đang xử lý</button>
<button class="filter-pill">Đang giao</button>
<!--<button class="filter-pill">Đang giao</button>-->
<button class="filter-pill">Hoàn thành</button>
<button class="filter-pill">Đã hủy</button>
</div>
@@ -111,7 +166,7 @@
</div>
<!-- Order Item 4 - Pending -->
<div class="order-card pending" onclick="viewOrderDetail('DH001231')">
<div class="order-card pending" data-status="pending" onclick="viewOrderDetail('DH001231')">
<div class="order-status-indicator"></div>
<div class="order-content">
<div class="d-flex justify-between align-start mb-2">
@@ -175,12 +230,108 @@
<span>Cài đặt</span>
</a>
</div>-->
</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 Quản lý Đơn hàng:</p>
<ul class="list-disc ml-6 mt-3">
<li>Sử dụng các tab (Chờ xác nhận, Đang giao...) để lọc nhanh trạng thái các đơn hàng của bạn.</li>
<li>Bấm vào một đơn hàng bất kỳ để xem thông tin chi tiết, sản phẩm, và ngày giao dự kiến.</li>
<li>Thanh tiến trình giúp bạn biết đơn hàng đang ở bước nào: Đã tạo, Đã xác nhận, hay Đã hoàn thành.</li>
<li>Nếu bạn đã chọn "Yêu cầu đàm phán giá" khi đặt hàng, đơn hàng sẽ ở trạng thái "Chờ xác nhận & đàm phán" cho đến khi Sales liên hệ.</li>
<li>Bạn có thể xem "Thông tin hóa đơn" đã khai báo tại trang chi tiết đơn hàng.</li>
</ul>
</div>
<div class="modal-footer">
<button class="btn btn-primary" onclick="closeInfoModal()">Đóng</button>
</div>
</div>
</div>
</div>
<script>
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';
}
});
// Filter functionality
document.addEventListener('DOMContentLoaded', function() {
const filterButtons = document.querySelectorAll('.filter-pill');
const orderCards = document.querySelectorAll('.order-card');
// Set "Chờ xác nhận" as default active tab
filterButtons.forEach(btn => btn.classList.remove('active'));
filterButtons[0].classList.add('active'); // First button is "Chờ xác nhận"
// Show only pending orders by default
filterOrders('pending');
filterButtons.forEach(button => {
button.addEventListener('click', function() {
// Remove active class from all buttons
filterButtons.forEach(btn => btn.classList.remove('active'));
// Add active class to clicked button
this.classList.add('active');
// Get filter status
const filterText = this.textContent.trim();
let status = '';
switch(filterText) {
case 'Chờ xác nhận':
status = 'pending';
break;
case 'Đang xử lý':
status = 'processing';
break;
case 'Đang giao':
status = 'shipping';
break;
case 'Hoàn thành':
status = 'completed';
break;
case 'Đã hủy':
status = 'cancelled';
break;
}
filterOrders(status);
});
});
function filterOrders(status) {
orderCards.forEach(card => {
if (status === '' || card.classList.contains(status)) {
card.style.display = 'block';
} else {
card.style.display = 'none';
}
});
}
});
</script>
</body>
</html>

45
html/otp.html
View File

@@ -54,8 +54,8 @@
<div class="text-center mt-3">
<p class="text-small text-muted">
Không nhận được mã?
<a href="#" class="text-primary" style="text-decoration: none; font-weight: 500;">
Gửi lại (60s)
<a href="#" id="resendLink" class="text-muted" style="text-decoration: none; font-weight: 500; cursor: not-allowed;">
Gửi lại (<span id="countdown">60</span>s)
</a>
</p>
</div>
@@ -91,6 +91,47 @@
}
});
});
// Countdown timer for resend OTP
let countdown = 60;
const countdownElement = document.getElementById('countdown');
const resendLink = document.getElementById('resendLink');
function startCountdown() {
const timer = setInterval(() => {
countdown--;
countdownElement.textContent = countdown;
if (countdown <= 0) {
clearInterval(timer);
// Enable resend button
resendLink.textContent = 'Gửi lại';
resendLink.className = 'text-primary';
resendLink.style.cursor = 'pointer';
resendLink.addEventListener('click', handleResendOTP);
}
}, 1000);
}
function handleResendOTP(e) {
e.preventDefault();
// Reset countdown
countdown = 60;
countdownElement.textContent = countdown;
resendLink.textContent = 'Gửi lại (' + countdown + 's)';
resendLink.className = 'text-muted';
resendLink.style.cursor = 'not-allowed';
resendLink.removeEventListener('click', handleResendOTP);
// Simulate sending OTP
alert('Mã OTP mới đã được gửi!');
// Restart countdown
startCountdown();
}
// Start countdown when page loads
document.addEventListener('DOMContentLoaded', startCountdown);
</script>
</body>
</html>

453
html/payment-qr.html Normal file
View File

@@ -0,0 +1,453 @@
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Thanh toán - 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="checkout.html" class="back-button">
<i class="fas fa-arrow-left"></i>
</a>
<h1 class="header-title">Thanh toán</h1>
<button class="back-button" onclick="openInfoModal()">
<i class="fas fa-info-circle"></i>
</button>
</div>
<div class="container">
<!-- Payment Amount -->
<div class="card text-center mb-4">
<h3 class="text-2xl font-bold text-primary mb-2">14.541.120đ</h3>
<p class="text-gray-600">Số tiền cần thanh toán</p>
<div class="bg-yellow-50 border border-yellow-200 rounded-lg p-3 mt-3">
<p class="text-yellow-700 font-medium">
<i class="fas fa-info-circle mr-1"></i>
Thanh toán không dưới 20%
</p>
</div>
</div>
<!-- QR Code Payment -->
<div class="card text-center">
<h3 class="card-title">Quét mã QR để thanh toán</h3>
<div class="qr-container">
<img src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=https://eurotile.com/payment/14195000"
alt="QR Code" class="qr-code">
</div>
<p class="text-gray-600 mb-4">
Quét mã QR bằng ứng dụng ngân hàng để thanh toán nhanh chóng
</p>
<!-- Payment Methods -->
<!--<div class="payment-methods">
<h4 class="font-semibold mb-3">Ứng dụng hỗ trợ:</h4>
<div class="app-grid">
<div class="app-item">
<div class="app-icon bg-red-100">
<i class="fas fa-university text-red-600"></i>
</div>
<span class="text-xs">Techcombank</span>
</div>
<div class="app-item">
<div class="app-icon bg-blue-100">
<i class="fas fa-credit-card text-blue-600"></i>
</div>
<span class="text-xs">Vietcombank</span>
</div>
<div class="app-item">
<div class="app-icon bg-green-100">
<i class="fas fa-mobile-alt text-green-600"></i>
</div>
<span class="text-xs">MoMo</span>
</div>
<div class="app-item">
<div class="app-icon bg-purple-100">
<i class="fas fa-wallet text-purple-600"></i>
</div>
<span class="text-xs">ZaloPay</span>
</div>
<div class="app-item">
<div class="app-icon bg-orange-100">
<i class="fas fa-coins text-orange-600"></i>
</div>
<span class="text-xs">ShopeePay</span>
</div>
<div class="app-item">
<div class="app-icon bg-indigo-100">
<i class="fas fa-money-check-alt text-indigo-600"></i>
</div>
<span class="text-xs">Banking</span>
</div>
</div>
</div>
</div>-->
<!-- Bank Transfer Info -->
<div class="card">
<h3 class="card-title">Thông tin chuyển khoản</h3>
<div class="transfer-info">
<div class="info-row">
<span class="info-label">Ngân hàng:</span>
<span class="info-value">BIDV</span>
<button class="copy-btn" onclick="copyText('Techcombank')">
<i class="fas fa-copy"></i>
</button>
</div>
<div class="info-row">
<span class="info-label">Số tài khoản:</span>
<span class="info-value">19036810704016</span>
<button class="copy-btn" onclick="copyText('19036810704016')">
<i class="fas fa-copy"></i>
</button>
</div>
<div class="info-row">
<span class="info-label">Chủ tài khoản:</span>
<span class="info-value">CÔNG TY EUROTILE</span>
<button class="copy-btn" onclick="copyText('CÔNG TY EUROTILE')">
<i class="fas fa-copy"></i>
</button>
</div>
<div class="info-row">
<span class="info-label">Nội dung:</span>
<span class="info-value">DH001234 La Nguyen Quynh</span>
<button class="copy-btn" onclick="copyText('DH001234 La Nguyen Quynh')">
<i class="fas fa-copy"></i>
</button>
</div>
</div>
<div class="bg-blue-50 border border-blue-200 rounded-lg p-3 mt-4">
<p class="text-blue-700 text-sm">
<i class="fas fa-lightbulb mr-1"></i>
<strong>Lưu ý:</strong> Vui lòng ghi đúng nội dung chuyển khoản để đơn hàng được xử lý nhanh chóng.
</p>
</div>
</div>
<!-- Action Buttons -->
<div class="action-buttons">
<button class="btn btn-secondary" onclick="confirmPayment()">
<i class="fas fa-check"></i> Đã thanh toán
</button>
<button class="btn btn-primary" onclick="uploadProof()">
<i class="fas fa-camera"></i> Upload bill chuyển khoản
</button>
</div>
<!-- Timer -->
<div class="timer-section">
<p class="text-center text-gray-600">
<i class="fas fa-clock mr-1"></i>
Thời gian thanh toán: <span id="countdown" class="font-semibold text-red-600">14:59</span>
</p>
</div>
</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">Hướng dẫn thanh toán</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 Thanh toán:</p>
<ul class="list-disc ml-6 mt-3">
<li>Quét mã QR bằng app ngân hàng hoặc ví điện tử</li>
<li>Chuyển khoản theo thông tin được cung cấp</li>
<li>Ghi đúng nội dung chuyển khoản</li>
<li>Upload hóa đơn sau khi chuyển khoản</li>
<li>Thanh toán tối thiểu 20% giá trị đơn hàng</li>
</ul>
</div>
<div class="modal-footer">
<button class="btn btn-primary" onclick="closeInfoModal()">Đóng</button>
</div>
</div>
</div>
</div>
<style>
.qr-container {
display: flex;
justify-content: center;
margin: 20px 0;
}
.qr-code {
width: 200px;
height: 200px;
border: 1px solid #e5e7eb;
border-radius: 8px;
padding: 10px;
background: white;
}
.payment-methods {
margin-top: 20px;
}
.app-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-top: 12px;
}
.app-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
.app-icon {
width: 40px;
height: 40px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
}
.transfer-info {
display: flex;
flex-direction: column;
gap: 12px;
}
.info-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0;
border-bottom: 1px solid #f3f4f6;
}
.info-label {
font-weight: 500;
color: #6b7280;
flex-shrink: 0;
width: 120px;
}
.info-value {
flex: 1;
text-align: right;
font-weight: 600;
margin-right: 8px;
}
.copy-btn {
background: #f3f4f6;
border: 1px solid #d1d5db;
border-radius: 4px;
padding: 4px 8px;
color: #6b7280;
cursor: pointer;
transition: all 0.2s;
}
.copy-btn:hover {
background: #e5e7eb;
color: #374151;
}
.action-buttons {
display: flex;
gap: 12px;
margin: 20px 0;
}
.action-buttons .btn {
flex: 1;
}
.timer-section {
padding: 15px;
background: #fef3c7;
border: 1px solid #f59e0b;
border-radius: 8px;
margin-top: 20px;
}
.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;
}
@media (max-width: 768px) {
.app-grid {
grid-template-columns: repeat(2, 1fr);
}
.action-buttons {
flex-direction: column;
}
}
</style>
<script>
// Countdown timer
let timeLeft = 15 * 60; // 15 minutes in seconds
function updateCountdown() {
const minutes = Math.floor(timeLeft / 60);
const seconds = timeLeft % 60;
document.getElementById('countdown').textContent =
`${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
if (timeLeft > 0) {
timeLeft--;
} else {
alert('Thời gian thanh toán đã hết hạn! Vui lòng đặt hàng lại.');
window.location.href = 'cart.html';
}
}
// Start countdown
setInterval(updateCountdown, 1000);
updateCountdown();
function copyText(text) {
navigator.clipboard.writeText(text).then(() => {
// Show success feedback
const event = window.event;
const button = event.target.closest('.copy-btn');
const originalIcon = button.innerHTML;
button.innerHTML = '<i class="fas fa-check text-green-600"></i>';
setTimeout(() => {
button.innerHTML = originalIcon;
}, 1000);
// Show toast
showToast('Đã sao chép: ' + text);
}).catch(() => {
// Fallback for older browsers
alert('Đã sao chép: ' + text);
});
}
function showToast(message) {
// Create toast notification
const toast = document.createElement('div');
toast.className = 'fixed top-20 left-1/2 transform -translate-x-1/2 bg-green-600 text-white px-4 py-2 rounded-lg z-50 transition-opacity';
toast.textContent = message;
document.body.appendChild(toast);
setTimeout(() => {
toast.style.opacity = '0';
setTimeout(() => {
document.body.removeChild(toast);
}, 300);
}, 2000);
}
function confirmPayment() {
if (confirm('Xác nhận bạn đã thanh toán đơn hàng này?')) {
alert('Cảm ơn! Chúng tôi sẽ kiểm tra và xác nhận thanh toán của bạn trong vòng 15 phút.');
window.location.href = 'order-success.html';
}
}
function uploadProof() {
const input = document.createElement('input');
input.type = 'file';
input.accept = 'image/*';
input.onchange = function(e) {
const file = e.target.files[0];
if (file) {
alert(`Đã tải lên bill chuyển khoản: ${file.name}\nChúng tôi sẽ xác nhận thanh toán trong vòng 15 phút.`);
window.location.href = 'order-success.html';
}
};
input.click();
}
function openInfoModal() {
document.getElementById('infoModal').style.display = 'flex';
}
function closeInfoModal() {
document.getElementById('infoModal').style.display = 'none';
}
// 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>

106
html/payments.html
View File

@@ -263,6 +263,61 @@
justify-content: center;
}
}
.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>
@@ -273,7 +328,35 @@
<i class="fas fa-arrow-left"></i>
</a>
<h1 class="header-title">Thanh toán</h1>
<div style="width: 32px;"></div>
<!--<div style="width: 32px;"></div>-->
<button class="back-button" onclick="openInfoModal()">
<i class="fas fa-info-circle"></i>
</button>
</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 Hóa đơn & Thanh toán:</p>
<ul class="list-disc ml-6 mt-3">
<li>Tính năng này gộp chung "Thanh toán" và "Công nợ", áp dụng cho mọi vai trò.</li>
<li>Sử dụng các tab (Chưa thanh toán, Quá hạn...) để lọc các hóa đơn cần xử lý.</li>
<li>Thông tin "Còn lại" (màu đỏ) là số tiền bạn cần thanh toán cho hóa đơn đó.</li>
<li>Bấm vào một hóa đơn để xem chi tiết sản phẩm, lịch sử thanh toán từng phần và tải chứng từ PDF.</li>
<li>Nút "Thanh toán" sẽ dẫn bạn đến trang thanh toán (QR Code/Chuyển khoản).</li>
</ul>
</div>
<div class="modal-footer">
<button class="btn btn-primary" onclick="closeInfoModal()">Đóng</button>
</div>
</div>
</div>
<div class="payments-container">
@@ -628,6 +711,27 @@
}, 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>

1
html/point-complaint.html
View File

@@ -16,6 +16,7 @@
<i class="fas fa-arrow-left"></i>
</a>
<h1 class="header-title">Khiếu nại Giao dịch điểm</h1>
<div style="width:32px;"></div>
</div>
<div class="complaint-content">

118
html/points-history.html
View File

@@ -8,6 +8,78 @@
<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>
<style>
.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;
}
@media (max-width: 768px) {
.document-card {
flex-direction: column;
align-items: stretch;
}
.download-btn {
width: 100%;
justify-content: center;
}
}
.tab-item.active {
background: var(--primary-blue);
color: var(--white);
}
</style>
<body>
<div class="page-wrapper">
<!-- Header -->
@@ -16,12 +88,15 @@
<i class="fas fa-arrow-left"></i>
</a>
<h1 class="header-title">Lịch sử điểm</h1>
<div style="width: 32px;"></div>
<!--<div style="width: 32px;"></div>-->
<button class="back-button" onclick="openInfoModal()">
<i class="fas fa-info-circle"></i>
</button>
</div>
<div class="container">
<!-- Filter Section -->
<div class="card mb-3">
<!--<div class="card mb-3">
<div class="d-flex justify-between align-center">
<h3 class="card-title">Bộ lọc</h3>
<i class="fas fa-filter" style="color: var(--primary-blue);"></i>
@@ -29,7 +104,7 @@
<p class="text-muted" style="font-size: 12px; margin-top: 8px;">
Thời gian hiệu lực: 01/01/2023 - 31/12/2023
</p>
</div>
</div>-->
<!-- Points History List -->
<div class="points-history-list">
@@ -184,6 +259,28 @@
</div>
</div>
</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 Lịch sử điểm:</p>
<ul class="list-disc ml-6 mt-3">
<li>Đây là sao kê chi tiết tất cả các giao dịch cộng/trừ điểm của bạn.</li>
<li>Bạn có thể kiểm tra điểm được cộng từ đơn hàng, từ việc đăng ký công trình, hoặc điểm bị trừ khi đổi quà.</li>
<li>Nếu phát hiện giao dịch bị sai sót, hãy bấm nút "Khiếu nại" trên dòng giao dịch đó để gửi yêu cầu hỗ trợ.</li>
</ul>
</div>
<div class="modal-footer">
<button class="btn btn-primary" onclick="closeInfoModal()">Đóng</button>
</div>
</div>
</div>
</div>
<script>
@@ -205,6 +302,21 @@
window.location.href = `point-complaint.html?${params.toString()}`;
}
function openInfoModal() {
document.getElementById('infoModal').style.display = 'flex';
}
function closeInfoModal() {
document.getElementById('infoModal').style.display = 'none';
}
// 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>

256
html/points-record-list.html Normal file
View File

@@ -0,0 +1,256 @@
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Danh sách ghi nhận điểm - 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-item.active {
background: var(--primary-blue);
color: var(--white);
</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">Danh sách Ghi nhận điểm</h1>
<button class="back-button" onclick="createNewProject()">
<i class="fas fa-plus"></i>
</button>
</div>
<div class="container">
<!-- Search Bar -->
<div class="search-bar">
<i class="fas fa-search search-icon"></i>
<input type="text" class="search-input" placeholder="Mã yêu cầu" id="searchInput" onkeyup="filterProjects()">
</div>
<!-- Status Filters -->
<div class="tab-nav mb-3">
<button class="tab-item active" data-status="">Tất cả</button>
<button class="tab-item" data-status="pending">Chờ duyệt</button>
<button class="tab-item" data-status="approved">Đã duyệt</button>
<button class="tab-item" data-status="rejected">Bị từ chối</button>
</div>
<!-- Projects List -->
<div class="orders-list" id="projectsList">
<!-- Projects will be populated by JavaScript -->
</div>
</div>
</div>
<script>
// Sample project data
const projectsData = [
{
id: 'PRR001',
name: 'Chung cư Vinhomes Grand Park - Block A1',
type: 'residential',
customer: 'Công ty TNHH Vingroup',
status: 'approved',
submittedDate: '2023-11-15',
approvedDate: '2023-11-20',
area: '2.500.000đ',
budget: '850,000,000',
progress: 75,
description: 'Gạch granite cao cấp cho khu vực lobby và hành lang'
},
{
id: 'PRR002',
name: 'Trung tâm thương mại Bitexco',
type: 'commercial',
customer: 'Tập đoàn Bitexco',
status: 'pending',
submittedDate: '2023-11-25',
area: '1.250.000đ',
budget: '2,200,000,000',
progress: 25,
description: 'Gạch porcelain 80x80 cho sảnh chính và khu mua sắm'
},
{
id: 'PRR003',
name: 'Nhà xưởng sản xuất ABC',
type: 'industrial',
customer: 'Công ty TNHH ABC Manufacturing',
status: 'rejected',
submittedDate: '2023-11-20',
rejectedDate: '2023-11-28',
area: '4.200.000đ',
budget: '1,500,000,000',
progress: 0,
rejectionReason: 'Hình ảnh minh chứng không hợp lệ',
description: 'Gạch chống trơn cho khu vực sản xuất và kho bãi'
},
{
id: 'PRR004',
name: 'Biệt thự sinh thái Ecopark',
type: 'residential',
customer: 'Ecopark Group',
status: 'approved',
submittedDate: '2023-10-10',
approvedDate: '2023-10-15',
completedDate: '2023-11-30',
area: '3.700.000đ',
budget: '420,000,000',
progress: 100,
description: 'Gạch ceramic vân gỗ cho khu vực phòng khách và sân vườn'
},
{
id: 'PRR005',
name: 'Khách sạn 5 sao Diamond Plaza',
type: 'commercial',
customer: 'Diamond Hospitality Group',
status: 'pending',
submittedDate: '2023-12-01',
area: '8.600.000đ',
budget: '5,800,000,000',
progress: 10,
description: 'Gạch marble tự nhiên cho lobby và phòng suite'
},
];
let filteredProjects = [...projectsData];
let currentFilter = '';
// Initialize page
document.addEventListener('DOMContentLoaded', function() {
setupTabNavigation();
renderProjects();
});
function setupTabNavigation() {
const tabItems = document.querySelectorAll('.tab-item');
tabItems.forEach(tab => {
tab.addEventListener('click', function() {
// Remove active class from all tabs
tabItems.forEach(t => t.classList.remove('active'));
// Add active class to clicked tab
this.classList.add('active');
// Update current filter
currentFilter = this.dataset.status || '';
// Filter and render projects
filterProjects();
});
});
}
function renderProjects() {
const container = document.getElementById('projectsList');
if (filteredProjects.length === 0) {
container.innerHTML = `
<div class="empty-state text-center py-16">
<i class="fas fa-folder-open text-4xl text-gray-300 mb-4"></i>
<h3 class="text-lg font-semibold text-gray-600 mb-2">Không có dự án nào</h3>
<p class="text-gray-500">Không tìm thấy dự án phù hợp với bộ lọc hiện tại</p>
</div>
`;
return;
}
container.innerHTML = filteredProjects.map(project => `
<div class="order-card ${project.status}" onclick="viewProjectDetail('${project.id}')">
<div class="order-status-indicator"></div>
<div class="order-content">
<div class="d-flex justify-between align-start mb-2">
<h4 class="order-id">#${project.id}</h4>
<!--<span class="order-amount">${formatCurrency(project.budget)}</span>-->
</div>
<div class="order-details">
<p class="order-date">Ngày gửi: ${formatDate(project.submittedDate)}</p>
<p class="order-customer">Giá trị đơn hàng: ${project.area}</p>
<p class="order-status-text">
<span class="status-badge ${project.status}">${getStatusText(project.status)}</span>
</p>
<!--<p class="order-note">${project.name} - Diện tích: ${project.area}</p>
${project.description ? `
<p class="text-xs text-gray-600 mt-1">${project.description}</p>-->
` : ''}
${project.status === 'rejected' && project.rejectionReason ? `
<p class="text-xs text-red-600 mt-2 bg-red-50 p-2 rounded">
<i class="fas fa-exclamation-triangle mr-1"></i>
${project.rejectionReason}
</p>
` : ''}
</div>
</div>
</div>
`).join('');
}
function getStatusText(status) {
const statusMap = {
'pending': 'Chờ duyệt',
'reviewing': 'Đang xem xét',
'approved': 'Đã duyệt',
'rejected': 'Bị từ chối',
'completed': 'Hoàn thành'
};
return statusMap[status] || status;
}
function filterProjects() {
const searchTerm = document.getElementById('searchInput').value.toLowerCase();
filteredProjects = projectsData.filter(project => {
// Status filter
if (currentFilter && project.status !== currentFilter) {
return false;
}
// Search filter
if (searchTerm) {
const searchableText = `${project.name} ${project.id} ${project.customer}`.toLowerCase();
if (!searchableText.includes(searchTerm)) return false;
}
return true;
});
renderProjects();
}
function viewProjectDetail(projectId) {
// Navigate to project detail page
localStorage.setItem('selectedProjectId', projectId);
window.location.href = 'project-submission-detail.html';
}
function createNewProject() {
// Navigate to new project creation page
window.location.href = 'points-record.html';
}
// Utility functions
function formatCurrency(amount) {
const num = typeof amount === 'string' ? parseInt(amount) : amount;
return new Intl.NumberFormat('vi-VN', {
style: 'currency',
currency: 'VND',
minimumFractionDigits: 0
}).format(num);
}
function formatDate(dateString) {
const date = new Date(dateString);
return date.toLocaleDateString('vi-VN');
}
</script>
</body>
</html>

45
html/points-record.html
View File

@@ -8,7 +8,7 @@
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css">
<style>
:root {
--primary-color: #2563eb;
--primary-color: #005B9A;
--primary-dark: #1d4ed8;
--secondary-color: #64748b;
--success-color: #10b981;
@@ -417,12 +417,54 @@
oninput="calculatePoints(); validateForm()">
</div>
<!-- Points Estimate -->
<!--<div class="points-estimate" id="pointsEstimate">
<div class="estimate-title">Điểm dự kiến nhận được</div>
<div class="estimate-text" id="estimateText">0 điểm</div>
</div>-->
<!-- Products Purchased -->
<!--<div class="form-group">
<label class="form-label">Sản phẩm đã mua</label>
<textarea class="form-input form-textarea"
id="products"
placeholder="Mô tả các sản phẩm đã mua (tùy chọn)"
rows="3"></textarea>
</div>-->
<!-- Points Estimate -->
<div class="points-estimate" id="pointsEstimate">
<div class="estimate-title">Điểm dự kiến nhận được</div>
<div class="estimate-text" id="estimateText">0 điểm</div>
</div>
<!-- Company Information -->
<div class="form-group">
<label class="form-label">Tên công ty</label>
<input type="text"
class="form-input"
id="companyName"
placeholder="Nhập tên công ty (nếu có)">
</div>
<div class="form-group">
<label class="form-label">Mã số thuế</label>
<input type="text"
class="form-input"
id="taxCode"
placeholder="Nhập mã số thuế (nếu có)">
</div>
<div class="form-group">
<label class="form-label">Số lượng (m²) đã mua</label>
<input type="number"
class="form-input"
id="squareMeters"
placeholder="0"
min="0"
step="0.01">
</div>
<!-- Products Purchased -->
<div class="form-group">
<label class="form-label">Sản phẩm đã mua</label>
@@ -432,6 +474,7 @@
rows="3"></textarea>
</div>
<!-- Invoice Images -->
<div class="form-group">
<label class="form-label required">Hình ảnh hóa đơn</label>

108
html/product-detail.html
View File

@@ -71,8 +71,8 @@
<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>
<!--<span class="original-price">320.000 VND/m²</span>
<span class="discount-badge">-11%</span>-->
</div>
<!-- Rating & Reviews -->
<!--<div class="rating-section">
@@ -87,19 +87,22 @@
</div>-->
<div class="quick-info">
<div class="info-item">
<i class="fas fa-cube info-icon"></i>
<!--<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-shield-alt info-icon"></i>
<div class="info-label">Bảo hành</div>
<div class="info-value">15 năm</div>
<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 class="info-value">2-3 Ngày</div>
</div>
</div>
</div>
@@ -107,13 +110,13 @@
<!-- Product Tabs Section -->
<div class="product-tabs-section">
<div class="tab-navigation">
<button class="tab-button active" onclick="switchTab('description', this)">Mô tả</button>
<button class="tab-button" onclick="switchTab('specifications', this)">Thông số</button>
<!--<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 active" id="description">
<!--<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>
@@ -130,9 +133,9 @@
<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>-->
<div class="tab-content" id="specifications">
<div class="tab-content active" id="specifications">
<div class="specifications-table">
<div class="spec-row">
<div class="spec-label">Kích thước</div>
@@ -146,10 +149,6 @@
<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">Loại men</div>
<div class="spec-value">Granite kỹ thuật số</div>
</div>
<div class="spec-row">
<div class="spec-label">Độ hấp thụ nước</div>
<div class="spec-value">< 0.5%</div>
@@ -162,14 +161,6 @@
<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">Xuất xứ</div>
<div class="spec-value">Việt Nam</div>
</div>
<div class="spec-row">
<div class="spec-label">Bảo hành</div>
<div class="spec-value">15 năm</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>
@@ -239,15 +230,36 @@
<!-- Sticky Action Bar -->
<div class="sticky-action-bar">
<div class="quantity-controls">
<!--<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>
@@ -683,6 +695,26 @@
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;
@@ -690,7 +722,6 @@
border-radius: 8px;
overflow: hidden;
}
.qty-btn {
width: 40px;
height: 40px;
@@ -904,6 +935,20 @@
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>
@@ -955,6 +1000,7 @@
quantity++;
document.getElementById('quantityInput').value = quantity;
updateQuantityButtons();
updateConversion();
}
function decreaseQuantity() {
@@ -962,6 +1008,7 @@
quantity--;
document.getElementById('quantityInput').value = quantity;
updateQuantityButtons();
updateConversion();
}
}
@@ -1190,6 +1237,15 @@
}
});
});
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>

528
html/products.html
View File

@@ -8,6 +8,136 @@
<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>
<style>
.filter-modal {
max-width: 400px;
max-height: 80vh;
overflow-y: auto;
}
.filter-group {
margin-bottom: 24px;
}
.filter-group-title {
font-weight: 600;
margin-bottom: 12px;
color: #1f2937;
}
.filter-options {
display: flex;
flex-direction: column;
gap: 8px;
}
.filter-checkbox {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
}
.filter-checkbox input {
margin: 0;
}
.price-range input {
flex: 1;
}
.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;
}
.badge {
display: inline-block;
padding: 2px 6px;
border-radius: 12px;
font-size: 11px;
font-weight: 600;
}
.badge-primary {
background: #005B9A;
color: white;
}
.heart-btn {
background: none;
border: none;
color: #d1d5db;
font-size: 16px;
cursor: pointer;
transition: color 0.2s;
}
.heart-btn.active {
color: #ef4444;
}
@media (max-width: 768px) {
.products-grid {
grid-template-columns: repeat(2, 1fr);
}
.modal-content {
margin: 20px;
/*max-height: calc(100vh - 40px);*/
}
}
</style>
<body>
<div class="page-wrapper">
<!-- Header -->
@@ -24,19 +154,198 @@
<div class="container">
<!-- Search Bar -->
<div class="search-bar">
<!--<div class="search-bar">
<i class="fas fa-search search-icon"></i>
<input type="text" class="search-input" placeholder="Tìm kiếm sản phẩm...">
</div>-->
<!-- Search Bar & Filter Button -->
<div class="flex gap-2 mb-4" style="margin-bottom: 0px;">
<div class="search-bar flex-1">
<i class="fas fa-search search-icon"></i>
<input type="text" class="search-input" placeholder="Tìm kiếm sản phẩm" id="searchInput">
</div>
<button class="btn btn-secondary" id="filterBtn" onclick="openFilterModal()" style="min-width: auto;padding: 12px 8px;border-bottom-width: 0px;border-top-width: 0px;/* height: 69px; */margin-bottom: 16px;">
<i class="fas fa-filter"></i>
<span class="ml-1">Lọc</span>
<span class="badge badge-primary ml-2" id="filterCount" style="display: none;">0</span>
</button>
</div>
<!-- Filter Modal -->
<div id="filterModal" class="modal-overlay" style="display: none;">
<div class="modal-content filter-modal">
<div class="modal-header">
<h3 class="modal-title" style="font-weight: 600;">Bộ lọc sản phẩm</h3>
<button class="modal-close" onclick="closeFilterModal()">
<i class="fas fa-times"></i>
</button>
</div>
<div class="modal-body">
<!-- Dòng sản phẩm -->
<div class="filter-group">
<h4 class="filter-group-title">Dòng sản phẩm</h4>
<div class="filter-options">
<label class="filter-checkbox">
<input type="checkbox" value="tam-lon"> Tấm lớn
</label>
<label class="filter-checkbox">
<input type="checkbox" value="third-firing"> Third-Firing
</label>
<label class="filter-checkbox">
<input type="checkbox" value="outdoor"> Outdoor
</label>
<label class="filter-checkbox">
<input type="checkbox" value="van-da"> Vân đá
</label>
<label class="filter-checkbox">
<input type="checkbox" value="xi-mang"> Xi măng
</label>
<label class="filter-checkbox">
<input type="checkbox" value="van-go"> Vân gỗ
</label>
<label class="filter-checkbox">
<input type="checkbox" value="xuong-trang"> Xương trắng
</label>
<label class="filter-checkbox">
<input type="checkbox" value="cam-thach"> Cẩm thạch
</label>
</div>
</div>
<!-- Không gian -->
<div class="filter-group">
<h4 class="filter-group-title">Không gian</h4>
<div class="filter-options">
<label class="filter-checkbox">
<input type="checkbox" value="phong-khach"> Phòng khách
</label>
<label class="filter-checkbox">
<input type="checkbox" value="phong-ngu"> Phòng ngủ
</label>
<label class="filter-checkbox">
<input type="checkbox" value="phong-tam"> Phòng tắm
</label>
<label class="filter-checkbox">
<input type="checkbox" value="nha-bep"> Nhà bếp
</label>
<label class="filter-checkbox">
<input type="checkbox" value="khong-gian-khac"> Không gian khác
</label>
</div>
</div>
<!-- Kích thước -->
<div class="filter-group">
<h4 class="filter-group-title">Kích thước</h4>
<div class="filter-options">
<label class="filter-checkbox">
<input type="checkbox" value="200x1600"> 200x1600
</label>
<label class="filter-checkbox">
<input type="checkbox" value="1200x2400"> 1200x2400
</label>
<label class="filter-checkbox">
<input type="checkbox" value="7500x1500"> 7500x1500
</label>
<label class="filter-checkbox">
<input type="checkbox" value="1200x1200"> 1200x1200
</label>
<label class="filter-checkbox">
<input type="checkbox" value="600x1200"> 600x1200
</label>
<label class="filter-checkbox">
<input type="checkbox" value="450x900"> 450x900
</label>
</div>
</div>
<!-- Bề mặt -->
<div class="filter-group">
<h4 class="filter-group-title">Bề mặt</h4>
<div class="filter-options">
<label class="filter-checkbox">
<input type="checkbox" value="satin"> SATIN
</label>
<label class="filter-checkbox">
<input type="checkbox" value="honed"> HONED
</label>
<label class="filter-checkbox">
<input type="checkbox" value="matt"> MATT
</label>
<label class="filter-checkbox">
<input type="checkbox" value="polish"> POLISH
</label>
<label class="filter-checkbox">
<input type="checkbox" value="babyskin"> BABYSKIN
</label>
</div>
</div>
<!-- Khoảng giá -->
<!--<div class="filter-group">
<h4 class="filter-group-title">Khoảng giá</h4>
<div class="price-range">
<div class="flex gap-2 items-center">
<input type="number" class="form-control" placeholder="Từ" id="priceMin">
<span>-</span>
<input type="number" class="form-control" placeholder="Đến" id="priceMax">
<span class="text-sm">VNĐ/m²</span>
</div>
</div>
</div>-->
<!-- Thương hiệu -->
<div class="filter-group">
<h4 class="filter-group-title">Thương hiệu</h4>
<div class="filter-options">
<label class="filter-checkbox">
<input type="checkbox" value="eurotile"> Eurotile
</label>
<label class="filter-checkbox">
<input type="checkbox" value="vasta-stone"> Vasta Stone
</label>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-secondary flex-1" onclick="resetFilters()">Xóa bộ lọc</button>
<button class="btn btn-primary flex-1" onclick="applyFilters()">Áp dụng</button>
</div>
</div>
</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">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 Sản phẩm:</p>
<ul class="list-disc ml-6 mt-3">
<li>Sử dụng thanh tìm kiếm để tìm sản phẩm theo tên hoặc mã</li>
<li>Nhấn "Bộ lọc" để lọc sản phẩm theo nhiều tiêu chí</li>
<li>Chuyển đổi giữa chế độ xem lưới và danh sách</li>
<li>Nhấn vào sản phẩm để xem chi tiết</li>
<li>Thêm sản phẩm yêu thích bằng icon tim</li>
</ul>
</div>
<div class="modal-footer">
<button class="btn btn-primary" onclick="closeInfoModal()">Đóng</button>
</div>
</div>
</div>
<!-- Filter Pills -->
<div class="filter-container">
<button class="filter-pill active">Tất cả</button>
<button class="filter-pill">Gạch lát nền</button>
<button class="filter-pill">Gạch ốp tường</button>
<button class="filter-pill">Gạch trang trí</button>
<button class="filter-pill">Gạch ngoài trời</button>
<button class="filter-pill">Phụ kiện</button>
<button class="filter-pill">Eurotile</button>
<button class="filter-pill">Vasta</button>
<button class="filter-pill">Gia công</button>
</div>
<!-- Product Grid -->
@@ -143,7 +452,208 @@
</div>
</div>
</div>
<script>
let filteredProducts = [...products];
let currentView = 'grid';
let activeFilters = {
categories: [],
spaces: [],
sizes: [],
surfaces: [],
brands: [],
priceRange: { min: null, max: null }
};
// Initialize page
document.addEventListener('DOMContentLoaded', function() {
renderProducts();
});
function renderProducts() {
const gridContainer = document.getElementById('productsGrid');
const listContainer = document.getElementById('productsList');
document.getElementById('productCount').textContent = filteredProducts.length;
if (currentView === 'grid') {
gridContainer.innerHTML = filteredProducts.map(product => `
<div class="product-item" onclick="viewProduct('${product.id}')">
<img src="${product.image}" alt="${product.name}" class="product-image">
<div class="product-info">
<div class="product-name">${product.name}</div>
<div class="product-code">${product.code}</div>
<div class="product-actions">
<div class="product-price">${formatPrice(product.price)}</div>
<button class="heart-btn" onclick="toggleFavorite('${product.id}', event)">
<i class="far fa-heart"></i>
</button>
</div>
</div>
</div>
`).join('');
} else {
listContainer.innerHTML = filteredProducts.map(product => `
<div class="product-item" onclick="viewProduct('${product.id}')">
<img src="${product.image}" alt="${product.name}" class="product-image">
<div class="product-info">
<div class="product-name">${product.name}</div>
<div class="product-code">${product.code}</div>
<div class="product-actions">
<div class="product-price">${formatPrice(product.price)}</div>
<button class="heart-btn" onclick="toggleFavorite('${product.id}', event)">
<i class="far fa-heart"></i>
</button>
</div>
</div>
</div>
`).join('');
}
}
function toggleView(view) {
currentView = view;
// Update button states
document.querySelectorAll('.btn-view').forEach(btn => {
btn.classList.remove('active');
});
document.querySelector(`[data-view="${view}"]`).classList.add('active');
// Show/hide containers
document.getElementById('productsGrid').style.display = view === 'grid' ? 'grid' : 'none';
document.getElementById('productsList').style.display = view === 'list' ? 'block' : 'none';
renderProducts();
}
function openFilterModal() {
document.getElementById('filterModal').style.display = 'flex';
}
function closeFilterModal() {
document.getElementById('filterModal').style.display = 'none';
}
function applyFilters() {
// Collect filter values
activeFilters.categories = Array.from(document.querySelectorAll('input[type="checkbox"]:checked'))
.map(cb => cb.value)
.filter(val => ['tam-lon', 'third-firing', 'outdoor', 'van-da', 'xi-mang', 'van-go', 'xuong-trang', 'cam-thach'].includes(val));
activeFilters.spaces = Array.from(document.querySelectorAll('input[type="checkbox"]:checked'))
.map(cb => cb.value)
.filter(val => ['phong-khach', 'phong-ngu', 'phong-tam', 'nha-bep', 'khong-gian-khac'].includes(val));
// Apply filters
filteredProducts = products.filter(product => {
if (activeFilters.categories.length && !activeFilters.categories.includes(product.category)) return false;
if (activeFilters.spaces.length && !product.space.some(s => activeFilters.spaces.includes(s))) return false;
return true;
});
// Update filter count badge
const totalFilters = activeFilters.categories.length + activeFilters.spaces.length;
const badge = document.getElementById('filterCount');
if (totalFilters > 0) {
badge.style.display = 'inline';
badge.textContent = totalFilters;
} else {
badge.style.display = 'none';
}
renderProducts();
closeFilterModal();
}
function resetFilters() {
// Uncheck all checkboxes
document.querySelectorAll('#filterModal input[type="checkbox"]').forEach(cb => {
cb.checked = false;
});
// Reset price range
document.getElementById('priceMin').value = '';
document.getElementById('priceMax').value = '';
// Reset filters
activeFilters = {
categories: [],
spaces: [],
sizes: [],
surfaces: [],
brands: [],
priceRange: { min: null, max: null }
};
filteredProducts = [...products];
document.getElementById('filterCount').style.display = 'none';
renderProducts();
}
function viewProduct(productId) {
window.location.href = `product-detail.html?id=${productId}`;
}
function toggleFavorite(productId, event) {
event.stopPropagation();
const btn = event.currentTarget;
const icon = btn.querySelector('i');
btn.classList.toggle('active');
if (btn.classList.contains('active')) {
icon.classList.remove('far');
icon.classList.add('fas');
} else {
icon.classList.remove('fas');
icon.classList.add('far');
}
}
function openInfoModal() {
document.getElementById('infoModal').style.display = 'flex';
}
function closeInfoModal() {
document.getElementById('infoModal').style.display = 'none';
}
function formatPrice(price) {
return new Intl.NumberFormat('vi-VN', {
style: 'currency',
currency: 'VND'
}).format(price);
}
// Search functionality
document.getElementById('searchInput').addEventListener('input', function(e) {
const searchTerm = e.target.value.toLowerCase();
filteredProducts = products.filter(product => {
const matchesSearch = product.name.toLowerCase().includes(searchTerm) ||
product.code.toLowerCase().includes(searchTerm);
if (!matchesSearch) return false;
// Apply other filters too
if (activeFilters.categories.length && !activeFilters.categories.includes(product.category)) return false;
if (activeFilters.spaces.length && !product.space.some(s => activeFilters.spaces.includes(s))) return false;
return true;
});
renderProducts();
});
// 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>

13
html/profile-edit.html
View File

@@ -75,12 +75,25 @@
<input type="text" class="form-input" value="123456789012">
</div>
<!-- ID MST -->
<div class="form-group">
<label class="form-label">Mã số thuế</label>
<input type="text" class="form-input" value="0359837618">
</div>
<!-- Company -->
<div class="form-group">
<label class="form-label">Công ty</label>
<input type="text" class="form-input" value="Công ty TNHH Xây dựng ABC">
</div>
<!-- Address -->
<div class="form-group">
<label class="form-label">Địa chỉ</label>
<input type="text" class="form-input" value="123 Man Thiện, Thủ Đức, Hồ Chí Minh">
</div>
<!-- Position -->
<div class="form-group">
<label class="form-label">Chức vụ</label>

45
html/project-submission-list.html
View File

@@ -7,6 +7,11 @@
<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-item.active {
background: var(--primary-blue);
color: var(--white);
</style>
</head>
<body>
<div class="page-wrapper">
@@ -42,30 +47,7 @@
</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>
</div>
<script>
// Sample project data
@@ -199,21 +181,20 @@
<div class="order-content">
<div class="d-flex justify-between align-start mb-2">
<h4 class="order-id">#${project.id}</h4>
<span class="order-amount">${formatCurrency(project.budget)}</span>
<!--<span class="order-amount">${formatCurrency(project.budget)}</span>-->
</div>
<div class="order-details">
<p class="order-date">Ngày nộp: ${formatDate(project.submittedDate)}</p>
<p class="order-customer">Khách hàng: ${project.customer}</p>
<p class="order-customer">Tên công trình: ${project.name}</p>
<p class="order-date">Ngày nộp: ${formatDate(project.submittedDate)}</p>
<p class="order-customer">Diện tích: ${project.area}</p>
<p class="order-status-text">
<span class="status-badge ${project.status}">${getStatusText(project.status)}</span>
${project.status === 'approved' || project.status === 'completed' ? `
<span class="ml-2 text-xs text-gray-500">${project.progress}% hoàn thành</span>
` : ''}
</p>
<p class="order-note">${project.name} - Diện tích: ${project.area}</p>
<!--<p class="order-note">${project.name} - Diện tích: ${project.area}</p>
${project.description ? `
<p class="text-xs text-gray-600 mt-1">${project.description}</p>
<p class="text-xs text-gray-600 mt-1">${project.description}</p>-->
` : ''}
${project.status === 'rejected' && project.rejectionReason ? `
<p class="text-xs text-red-600 mt-2 bg-red-50 p-2 rounded">

1158
html/project-submission.html
View File

File diff suppressed because it is too large Load Diff

35
html/redeem-confirm.html
View File

@@ -513,6 +513,34 @@
<input type="text" class="form-input" placeholder="Ví dụ: Phường 1, Quận 1, TP.HCM">
</div>
</div>
<div class="delivery-option" onclick="selectDelivery('showroom')">
<input type="radio" name="delivery" value="showroom" class="delivery-radio">
<div class="delivery-content">
<div class="delivery-title">Nhận hàng tại Showroom</div>
<div class="delivery-desc">Đến nhận trực tiếp tại showroom EuroTile gần bạn</div>
</div>
</div>
<!-- Showroom Selection (hidden by default) -->
<div class="showroom-form" id="showroomForm" style="display: none;">
<div class="form-group" style="margin-bottom: 0;">
<label class="form-label">Chọn showroom</label>
<select class="form-input" id="showroomSelect">
<option value="">Chọn showroom gần bạn</option>
<option value="hcm-q1">Showroom Q1 - 123 Nguyễn Huệ, Quận 1, TP.HCM</option>
<option value="hcm-q7">Showroom Q7 - 456 Nguyễn Thị Thập, Quận 7, TP.HCM</option>
<option value="hn-hbt">Showroom Hà Nội - 789 Hoàng Quốc Việt, Cầu Giấy, Hà Nội</option>
<option value="dn-hc">Showroom Đà Nẵng - 321 Lê Duẩn, Hải Châu, Đà Nẵng</option>
<option value="bd-td">Showroom Bình Dương - 654 Đại lộ Bình Dương, Thủ Dầu Một</option>
</select>
<small class="text-gray-500 mt-2 block">
<i class="fas fa-clock mr-1"></i>
Giờ làm việc: 8:00 - 18:00 (Thứ 2 - Thứ 7)
</small>
</div>
</div>
</div>
<!-- Terms and Conditions -->
@@ -563,10 +591,17 @@
// Show/hide address form
const addressForm = document.getElementById('addressForm');
const showroomForm = document.getElementById('showroomForm');
if (type === 'physical') {
addressForm.classList.add('show');
showroomForm.style.display = 'none';
} else if (type === 'showroom') {
addressForm.classList.remove('show');
showroomForm.style.display = 'block';
} else {
addressForm.classList.remove('show');
showroomForm.style.display = 'none';
}
}

28
html/register.html
View File

@@ -164,10 +164,10 @@
<!-- Email -->
<div class="form-group">
<label class="form-label" for="email">Email</label>
<label class="form-label" for="email">Email *</label>
<div class="form-input-icon">
<i class="fas fa-envelope icon"></i>
<input type="email" id="email" class="form-input" placeholder="Nhập email (không bắt buộc)">
<input type="email" id="email" class="form-input" placeholder="Nhập email" required>
</div>
</div>
@@ -180,16 +180,26 @@
</div>
<p class="text-small text-muted mt-1">Mật khẩu tối thiểu 6 ký tự</p>
</div>
<!-- ID ĐVKD -->
<div class="form-group">
<label class="form-label" for="DVKD">Mã ĐVKD *</label>
<div class="form-input-icon">
<i class="fas fa-briefcase icon"></i>
<input type="text" id="DVKD" class="form-input" placeholder="Nhập mã ĐVKD" required>
</div>
</div>
<!-- Role Selection -->
<div class="form-group">
<label class="form-label" for="role">Vai trò *</label>
<select id="role" class="form-input form-select" required onchange="toggleVerification()">
<option value="">Chọn vai trò của bạn</option>
<option value="worker">Thầu thợ</option>
<option value="architect">Kiến trúc sư</option>
<option value="dealer">Đại lý phân phối</option>
<option value="broker">Môi giới</option>
<option value="dealer">Đại lý hệ thống</option>
<option value="worker">Kiến trúc sư/ Thầu thợ</option>
<!--<option value="architect">Kiến trúc sư</option>-->
<option value="broker">Khách lẻ</option>
<option value="broker">Khác</option>
</select>
</div>
@@ -202,7 +212,7 @@
<!-- ID Number -->
<div class="form-group">
<label class="form-label" for="idNumber">Số CCCD/CMND *</label>
<label class="form-label" for="idNumber">Số CCCD/CMND</label>
<div class="form-input-icon">
<i class="fas fa-id-card icon"></i>
<input type="text" id="idNumber" class="form-input" placeholder="Nhập số CCCD/CMND" maxlength="12">
@@ -220,7 +230,7 @@
<!-- ID Card Upload -->
<div class="form-group">
<label class="form-label">Ảnh mặt trước CCCD/CMND *</label>
<label class="form-label">Ảnh mặt trước CCCD/CMND</label>
<div class="file-upload-area" onclick="document.getElementById('idCardFile').click()">
<i class="fas fa-camera file-upload-icon"></i>
<div class="file-upload-text">
@@ -234,7 +244,7 @@
<!-- Certificate Upload -->
<div class="form-group">
<label class="form-label">Ảnh chứng chỉ hành nghề hoặc GPKD *</label>
<label class="form-label">Ảnh chứng chỉ hành nghề hoặc GPKD</label>
<div class="file-upload-area" onclick="document.getElementById('certificateFile').click()">
<i class="fas fa-file-alt file-upload-icon"></i>
<div class="file-upload-text">

425
html/vr360-viewer-section.html
View File

@@ -1,425 +0,0 @@
<!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 360° - EuroTile Worker</title>
<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>
/* VR360 Container Styles */
.vr360-section {
background: var(--white);
padding: 16px;
margin: 8px 0;
}
.vr360-container {
position: relative;
width: 100%;
border-radius: 16px;
overflow: hidden;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
box-shadow: var(--shadow-medium);
}
/* Option 1: Click to View Style */
.vr360-preview {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 48px 24px;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
color: var(--white);
position: relative;
background: linear-gradient(135deg, rgba(0, 91, 154, 0.9) 0%, rgba(56, 182, 255, 0.9) 100%);
}
.vr360-preview:hover {
transform: scale(1.02);
box-shadow: 0 10px 30px rgba(0, 91, 154, 0.3);
}
.vr360-icon-wrapper {
position: relative;
width: 80px;
height: 80px;
margin-bottom: 16px;
}
.vr360-icon {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
position: relative;
}
.vr360-icon::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
border: 3px solid rgba(255, 255, 255, 0.4);
border-radius: 50%;
animation: pulse360 2s infinite;
}
.vr360-icon::after {
content: '';
position: absolute;
width: 120%;
height: 120%;
border: 2px solid rgba(255, 255, 255, 0.2);
border-radius: 50%;
animation: pulse360 2s infinite 0.5s;
}
.vr360-icon .main-icon {
font-size: 36px;
color: var(--white);
z-index: 1;
position: relative;
}
.vr360-arrow {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 120px;
height: 120px;
pointer-events: none;
}
.vr360-arrow svg {
width: 100%;
height: 100%;
animation: rotate360 4s linear infinite;
}
.vr360-title {
font-size: 24px;
font-weight: 700;
color: var(--white);
margin-bottom: 8px;
text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.vr360-subtitle {
font-size: 14px;
color: rgba(255, 255, 255, 0.9);
margin-bottom: 16px;
}
.vr360-button {
padding: 12px 32px;
background: var(--white);
color: var(--primary-blue);
border-radius: 24px;
font-size: 14px;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
transition: all 0.3s ease;
}
.vr360-preview:hover .vr360-button {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}
/* Option 2: Embedded iFrame Style */
.vr360-embed {
position: relative;
width: 100%;
padding-bottom: 75%; /* 4:3 Aspect Ratio */
background: var(--background-gray);
border-radius: 16px;
overflow: hidden;
}
.vr360-iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
border-radius: 16px;
}
.vr360-loading {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: var(--text-light);
}
.vr360-loading .spinner {
width: 40px;
height: 40px;
border: 3px solid var(--border-color);
border-top-color: var(--primary-blue);
border-radius: 50%;
animation: spin 1s linear infinite;
margin: 0 auto 12px;
}
/* Toggle Switch for View Options */
.view-options {
display: flex;
justify-content: center;
gap: 12px;
margin-bottom: 16px;
}
.view-option-btn {
padding: 8px 16px;
background: var(--white);
border: 1px solid var(--border-color);
border-radius: 20px;
font-size: 13px;
font-weight: 500;
color: var(--text-dark);
cursor: pointer;
transition: all 0.3s ease;
}
.view-option-btn.active {
background: var(--primary-blue);
color: var(--white);
border-color: var(--primary-blue);
}
/* Animations */
@keyframes pulse360 {
0% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.3);
opacity: 0.5;
}
100% {
transform: scale(1.6);
opacity: 0;
}
}
@keyframes rotate360 {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* Fullscreen Button */
.vr360-fullscreen-btn {
position: absolute;
top: 16px;
right: 16px;
width: 40px;
height: 40px;
background: rgba(0, 0, 0, 0.7);
color: var(--white);
border: none;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 10;
transition: all 0.3s ease;
}
.vr360-fullscreen-btn:hover {
background: rgba(0, 0, 0, 0.9);
transform: scale(1.1);
}
</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 360°</h1>
</div>
<div class="container">
<!-- View Options Toggle -->
<div class="view-options">
<button class="view-option-btn active" onclick="showPreview()">
<i class="fas fa-image"></i> Xem trước
</button>
<button class="view-option-btn" onclick="showEmbed()">
<i class="fas fa-play"></i> Xem trực tiếp
</button>
</div>
<!-- VR360 Section -->
<div class="vr360-section">
<!-- Option 1: Preview with Link -->
<div id="previewMode" class="vr360-container">
<a href="https://vr.house3d.com/web/panorama-player/H00179549"
target="_blank"
class="vr360-preview">
<div class="vr360-icon-wrapper">
<div class="vr360-icon">
<span class="main-icon">360°</span>
</div>
<div class="vr360-arrow">
<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
<circle cx="60" cy="60" r="50" fill="none" stroke="rgba(255,255,255,0.3)" stroke-width="2" stroke-dasharray="10 5"/>
<path d="M 60 15 L 65 20 M 65 20 L 60 25" stroke="rgba(255,255,255,0.8)" stroke-width="2" fill="none" stroke-linecap="round"/>
</svg>
</div>
</div>
<h2 class="vr360-title">360°</h2>
<p class="vr360-subtitle">Khám phá không gian nhà mẫu toàn cảnh</p>
<div class="vr360-button">
<i class="fas fa-external-link-alt"></i>
<span>Mở chế độ xem 360°</span>
</div>
</a>
</div>
<!-- Option 2: Embedded iFrame (Hidden by default) -->
<div id="embedMode" class="vr360-container" style="display: none;">
<div class="vr360-embed">
<div class="vr360-loading" id="loadingState">
<div class="spinner"></div>
<span>Đang tải mô hình 360°...</span>
</div>
<iframe
id="vr360iframe"
class="vr360-iframe"
src=""
title="Mô hình 360° Nhà mẫu"
allowfullscreen
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
onload="hideLoading()"
style="display: none;">
</iframe>
<button class="vr360-fullscreen-btn" onclick="goFullscreen()">
<i class="fas fa-expand"></i>
</button>
</div>
</div>
</div>
<!-- Additional Info -->
<div class="card">
<h3 class="card-title">Về nhà mẫu này</h3>
<p style="color: var(--text-light); font-size: 14px; line-height: 1.6;">
Trải nghiệm không gian sống hiện đại với công nghệ xem 360°.
Di chuyển chuột hoặc vuốt màn hình để khám phá mọi góc nhìn của căn nhà.
</p>
<ul style="padding-left: 20px; margin-top: 12px;">
<li style="color: var(--text-light); font-size: 14px; margin-bottom: 8px;">
<i class="fas fa-mouse" style="color: var(--primary-blue); margin-right: 8px;"></i>
Kéo chuột để xoay góc nhìn
</li>
<li style="color: var(--text-light); font-size: 14px; margin-bottom: 8px;">
<i class="fas fa-search-plus" style="color: var(--primary-blue); margin-right: 8px;"></i>
Scroll để zoom in/out
</li>
<li style="color: var(--text-light); font-size: 14px;">
<i class="fas fa-hand-point-up" style="color: var(--primary-blue); margin-right: 8px;"></i>
Click vào các điểm nóng để di chuyển
</li>
</ul>
</div>
</div>
</div>
<script>
const VR360_URL = "https://vr.house3d.com/web/panorama-player/H00179549";
// Show preview mode
function showPreview() {
document.getElementById('previewMode').style.display = 'block';
document.getElementById('embedMode').style.display = 'none';
// Update buttons
document.querySelectorAll('.view-option-btn').forEach(btn => {
btn.classList.remove('active');
});
event.target.classList.add('active');
// Clear iframe src to stop loading
document.getElementById('vr360iframe').src = '';
}
// Show embedded mode
function showEmbed() {
document.getElementById('previewMode').style.display = 'none';
document.getElementById('embedMode').style.display = 'block';
// Update buttons
document.querySelectorAll('.view-option-btn').forEach(btn => {
btn.classList.remove('active');
});
event.target.classList.add('active');
// Load iframe
const iframe = document.getElementById('vr360iframe');
if (!iframe.src) {
iframe.src = VR360_URL;
}
}
// Hide loading state when iframe loads
function hideLoading() {
document.getElementById('loadingState').style.display = 'none';
document.getElementById('vr360iframe').style.display = 'block';
}
// Fullscreen function
function goFullscreen() {
const container = document.getElementById('embedMode');
if (container.requestFullscreen) {
container.requestFullscreen();
} else if (container.webkitRequestFullscreen) {
container.webkitRequestFullscreen();
} else if (container.mozRequestFullScreen) {
container.mozRequestFullScreen();
} else if (container.msRequestFullscreen) {
container.msRequestFullscreen();
}
}
// Optional: Auto-load embed after delay
// setTimeout(() => {
// if (window.innerWidth > 768) {
// showEmbed();
// }
// }, 2000);
</script>
</body>
</html>