first commit
This commit is contained in:
Phuoc Nguyen
233
html/README.md
Normal file
233
html/README.md
Normal file
@@ -0,0 +1,233 @@
|
||||
# Mobile App - Worker (EuroTile & Vasta Stone)
|
||||
|
||||
## 📱 Giới thiệu Dự Án
|
||||
|
||||
**Mobile App - Worker** là một ứng dụng mobile-first được thiết kế dành cho thầu thợ, đại lý phân phối, kiến trúc sư và môi giới trong ngành gạch men, nội thất và xây dựng. Ứng dụng kết hợp chương trình khách hàng thân thiết (Loyalty) với công cụ đặt hàng và quản lý công việc tiện lợi.
|
||||
|
||||
### 🎯 Mục tiêu chính:
|
||||
- Nền tảng Loyalty mạnh mẽ với hệ thống điểm thưởng và hạng thành viên
|
||||
- Công cụ đặt hàng nhanh chóng và hiệu quả
|
||||
- Quản lý công trình, hợp đồng và báo cáo
|
||||
- Tích hợp chương trình khuyến mãi và ưu đãi
|
||||
|
||||
### 👥 Đối tượng người dùng:
|
||||
- Thầu thợ
|
||||
- Kiến trúc sư
|
||||
- Đại lý phân phối
|
||||
- Môi giới bất động sản
|
||||
|
||||
## 🚀 Tính năng đã hoàn thành
|
||||
|
||||
### ✅ Luồng Đăng nhập & Đăng ký
|
||||
- `login.html` - Màn hình đăng nhập với số điện thoại
|
||||
- `otp.html` - Xác thực OTP 6 số
|
||||
- `register.html` - Đăng ký tài khoản mới với đầy đủ thông tin
|
||||
|
||||
### ✅ Trang chủ với 3 hạng thẻ thành viên
|
||||
- `index.html` - Trang chủ mặc định (thẻ Diamond)
|
||||
- Hiển thị thông tin thành viên, QR code và các chức năng chính
|
||||
- Các mục sản phẩm, loyalty, đơn hàng được tổ chức rõ ràng
|
||||
|
||||
### ✅ Hệ thống Loyalty đầy đủ
|
||||
- `loyalty.html` - Trang hội viên thân thiết với progress bar
|
||||
- `loyalty-rewards.html` - Danh sách quà tặng có thể đổi
|
||||
- `points-history.html` - **MỚI** - Lịch sử tích điểm chi tiết với khiếu nại
|
||||
- `referral.html` - **MỚI** - Giới thiệu bạn bè với link và mã giới thiệu
|
||||
- `my-gifts.html` - **MỚI** - Quà đã đổi với bộ lọc trạng thái
|
||||
|
||||
### ✅ Quản lý Sản phẩm & Đơn hàng
|
||||
- `products.html` - Danh sách sản phẩm với tìm kiếm và bộ lọc
|
||||
- `cart.html` - Giỏ hàng với tính năng chỉnh sửa
|
||||
- `checkout.html` - Thanh toán với thông tin giao hàng
|
||||
- `order-success.html` - Xác nhận đặt hàng thành công
|
||||
- `orders.html` - **MỚI** - Danh sách đơn hàng với tabs lọc trạng thái
|
||||
- `payments.html` - **MỚI** - Danh sách thanh toán với trạng thái xử lý
|
||||
|
||||
### ✅ Quản lý Công việc & Dự án
|
||||
- `projects.html` - **MỚI** - Danh sách công trình với tiến độ
|
||||
- `project-create.html` - **MỚI** - Form tạo công trình mới
|
||||
- `quotes.html` - **MỚI** - Danh sách báo giá với trạng thái
|
||||
- `chat.html` - **MỚI** - Hệ thống chat hỗ trợ khách hàng
|
||||
|
||||
### ✅ Quản lý Tài khoản
|
||||
- `account.html` - Trang tài khoản với menu điều hướng (đã cập nhật links)
|
||||
- `profile-edit.html` - **MỚI** - Chỉnh sửa thông tin cá nhân với avatar
|
||||
- `addresses.html` - **MỚI** - Quản lý địa chỉ giao hàng
|
||||
- `password-change.html` - **MỚI** - Đổi mật khẩu với bảo mật
|
||||
|
||||
### ✅ Khuyến mãi & Thông báo
|
||||
- `promotions.html` - Danh sách chương trình khuyến mãi
|
||||
- `notifications.html` - Thông báo với tabs chung/đơn hàng
|
||||
|
||||
## 🎨 Design System & UI/UX
|
||||
|
||||
### Bảng màu chính:
|
||||
- **Primary Blue**: #005B9A (Màu chủ đạo)
|
||||
- **Light Blue**: #38B6FF (Màu nhấn)
|
||||
- **Accent Cyan**: #35C6F4 (FAB & highlights)
|
||||
- **Success**: #28a745 | **Warning**: #ffc107 | **Danger**: #dc3545
|
||||
|
||||
### Thành phần UI:
|
||||
- **Mobile-first responsive design** với Tailwind CSS
|
||||
- **Card-based layout** với đổ bóng tinh tế
|
||||
- **Bottom navigation** cố định 5 tabs
|
||||
- **Floating Action Button** (FAB) cho chat
|
||||
- **Status indicators** màu sắc trực quan
|
||||
- **Form validation** và UX thân thiện
|
||||
|
||||
## 📁 Cấu trúc File Hoàn chỉnh
|
||||
|
||||
```
|
||||
/
|
||||
├── index.html # Trang chủ (Diamond member)
|
||||
├── login.html # Đăng nhập
|
||||
├── otp.html # Xác thực OTP
|
||||
├── register.html # Đăng ký
|
||||
│
|
||||
├── loyalty.html # Hội viên thân thiết (đã cập nhật)
|
||||
├── loyalty-rewards.html # Đổi quà tặng
|
||||
├── points-history.html # ⭐ MỚI: Lịch sử điểm
|
||||
├── referral.html # ⭐ MỚI: Giới thiệu bạn bè
|
||||
├── my-gifts.html # ⭐ MỚI: Quà của tôi
|
||||
│
|
||||
├── products.html # Danh sách sản phẩm
|
||||
├── cart.html # Giỏ hàng
|
||||
├── checkout.html # Thanh toán
|
||||
├── order-success.html # Đặt hàng thành công
|
||||
├── orders.html # ⭐ MỚI: Quản lý đơn hàng
|
||||
├── payments.html # ⭐ MỚI: Danh sách thanh toán
|
||||
│
|
||||
├── projects.html # ⭐ MỚI: Quản lý công trình
|
||||
├── project-create.html # ⭐ MỚI: Tạo công trình mới
|
||||
├── quotes.html # ⭐ MỚI: Danh sách báo giá
|
||||
├── chat.html # ⭐ MỚI: Chat hỗ trợ
|
||||
│
|
||||
├── account.html # Tài khoản (đã cập nhật links)
|
||||
├── profile-edit.html # ⭐ MỚI: Sửa thông tin cá nhân
|
||||
├── addresses.html # ⭐ MỚI: Địa chỉ đã lưu
|
||||
├── password-change.html # ⭐ MỚI: Đổi mật khẩu
|
||||
│
|
||||
├── promotions.html # Khuyến mãi
|
||||
├── notifications.html # Thông báo
|
||||
│
|
||||
└── assets/
|
||||
└── css/
|
||||
└── style.css # CSS đầy đủ với tất cả components
|
||||
```
|
||||
|
||||
## 🔧 Công nghệ sử dụng
|
||||
|
||||
- **HTML5 & CSS3**: Semantic markup và modern styling
|
||||
- **Tailwind CSS**: Utility-first CSS framework via CDN
|
||||
- **JavaScript ES6+**: Interactive functionality và form validation
|
||||
- **Font Awesome 6**: Icon system đồng nhất
|
||||
- **Google Fonts**: Roboto font family
|
||||
- **Responsive Images**: Placeholder và optimized assets
|
||||
|
||||
## 📱 Tính năng mới đã hoàn thành
|
||||
|
||||
### 🎯 Lịch sử điểm (points-history.html)
|
||||
- Danh sách chi tiết các giao dịch điểm
|
||||
- Nút "Khiếu nại" cho từng giao dịch
|
||||
- Hiển thị thay đổi điểm (+/-) và điểm mới
|
||||
- Bộ lọc theo thời gian
|
||||
|
||||
### 🤝 Giới thiệu bạn bè (referral.html)
|
||||
- Thông tin người giới thiệu với avatar
|
||||
- Link và mã giới thiệu có thể copy/share
|
||||
- Danh sách quyền lợi và hướng dẫn sử dụng
|
||||
- Tích hợp Web Share API
|
||||
|
||||
### 💰 Quản lý thanh toán (payments.html)
|
||||
- Cards hiển thị thông tin thanh toán chi tiết
|
||||
- Trạng thái với màu sắc: Đang xử lý (blue), Hoàn thành (green)
|
||||
- Tìm kiếm theo mã phiếu thanh toán
|
||||
- Bộ lọc nâng cao
|
||||
|
||||
### 📦 Quản lý đơn hàng (orders.html)
|
||||
- Tabs lọc theo trạng thái đơn hàng
|
||||
- Hiển thị thông tin khách hàng và sản phẩm
|
||||
- Trạng thái trực quan: Chờ xác nhận, Đang xử lý, Đang giao, Hoàn thành, Đã hủy
|
||||
- Tìm kiếm theo mã đơn hàng
|
||||
|
||||
### 🏗️ Quản lý công trình (projects.html & project-create.html)
|
||||
- Danh sách công trình với tiến độ %
|
||||
- Thông tin chi tiết: Chủ đầu tư, địa chỉ, thời gian
|
||||
- Form tạo mới với validation đầy đủ
|
||||
- Trạng thái: Đang thi công, Hoàn thành, Lên kế hoạch
|
||||
|
||||
### 💬 Chat hỗ trợ (chat.html)
|
||||
- Interface chat thời gian thực
|
||||
- Bubble messages với timestamp
|
||||
- Typing indicator animation
|
||||
- Nút đính kèm file và gửi tin nhắn
|
||||
- Auto-scroll và responsive design
|
||||
|
||||
### 🎁 Quà của tôi (my-gifts.html)
|
||||
- Tabs lọc: Còn hạn, Đã sử dụng, Hết hạn
|
||||
- Thông tin chi tiết voucher/quà tặng
|
||||
- Trạng thái trực quan với màu sắc
|
||||
- Nút sử dụng/xem chi tiết
|
||||
|
||||
### 👤 Quản lý tài khoản nâng cao
|
||||
- **Profile Edit**: Upload avatar, form validation, các trường thông tin đầy đủ
|
||||
- **Addresses**: CRUD địa chỉ, đặt mặc định, validation
|
||||
- **Password Change**: Form đổi mật khẩu an toàn với toggle show/hide, validation match
|
||||
|
||||
## 🎨 CSS Components mới
|
||||
|
||||
- `.payment-card`, `.order-card`, `.quote-card`, `.project-card` - Card components
|
||||
- `.gift-item` - Gift/voucher display với status styling
|
||||
- `.chat-*` - Complete chat interface styling
|
||||
- `.referral-*` - Referral page components
|
||||
- `.form-*` - Enhanced form styling với validation states
|
||||
- `.address-*` - Address management components
|
||||
- `.password-*` - Password input với toggle visibility
|
||||
|
||||
## 🚀 Các tính năng đã tích hợp
|
||||
|
||||
### Interactivity & UX:
|
||||
- ✅ Form validation với HTML5 và JavaScript
|
||||
- ✅ Dynamic tab switching và filtering
|
||||
- ✅ Copy to clipboard functionality
|
||||
- ✅ Web Share API integration
|
||||
- ✅ File upload với preview (avatar)
|
||||
- ✅ Password visibility toggle
|
||||
- ✅ Real-time chat simulation
|
||||
- ✅ Responsive navigation với active states
|
||||
|
||||
### Performance & Accessibility:
|
||||
- ✅ Mobile-first responsive design
|
||||
- ✅ Fast loading với CDN assets
|
||||
- ✅ Semantic HTML structure
|
||||
- ✅ ARIA labels và accessibility support
|
||||
- ✅ Optimized images và placeholders
|
||||
|
||||
## 📋 Roadmap & Tính năng tiếp theo
|
||||
|
||||
### Phase 2 - Backend Integration:
|
||||
- [ ] API integration cho tất cả CRUD operations
|
||||
- [ ] Real-time notifications với WebSocket
|
||||
- [ ] Push notifications
|
||||
- [ ] Offline capability với Service Workers
|
||||
|
||||
### Phase 3 - Advanced Features:
|
||||
- [ ] QR code scanner cho sản phẩm
|
||||
- [ ] Geolocation cho cửa hàng gần nhất
|
||||
- [ ] Photo gallery cho công trình
|
||||
- [ ] Export báo cáo PDF
|
||||
- [ ] Multi-language support
|
||||
|
||||
## 📞 Hỗ trợ
|
||||
|
||||
**Developed by**: EuroTile Development Team
|
||||
**Framework**: Mobile-first HTML/CSS/JS
|
||||
**Browser Support**: Modern browsers (Chrome, Safari, Firefox, Edge)
|
||||
**Mobile**: iOS Safari, Android Chrome
|
||||
|
||||
---
|
||||
|
||||
**Trạng thái dự án**: ✅ **HOÀN THÀNH PHASE 1**
|
||||
**Tổng số màn hình**: 25+ screens
|
||||
**Tính năng chính**: 100% functional prototypes
|
||||
**UI/UX**: Full mobile-optimized design system
|
||||
172
html/account.html
Normal file
172
html/account.html
Normal file
@@ -0,0 +1,172 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="vi">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Tài khoả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">
|
||||
<h1 class="header-title">Tài khoản</h1>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<!-- User Profile -->
|
||||
<div class="card">
|
||||
<div class="d-flex align-center">
|
||||
<div style="width: 80px; height: 80px; border-radius: 50%; background: linear-gradient(135deg, #005B9A 0%, #38B6FF 100%); display: flex; align-items: center; justify-content: center; margin-right: 16px;">
|
||||
<span style="color: white; font-size: 32px; font-weight: 700;">LQ</span>
|
||||
</div>
|
||||
<div>
|
||||
<h2 style="margin-bottom: 4px;">La Nguyen Quynh</h2>
|
||||
<p class="text-small text-muted">Kiến trúc sư · Hạng Diamond</p>
|
||||
<p class="text-small text-primary">0983 441 099</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Account Menu -->
|
||||
<div class="mb-3">
|
||||
<a href="profile-edit.html" class="list-item">
|
||||
<div class="list-item-icon">
|
||||
<i class="fas fa-user-edit"></i>
|
||||
</div>
|
||||
<div class="list-item-content">
|
||||
<div class="list-item-title">Thông tin cá nhân</div>
|
||||
<div class="list-item-subtitle">Cập nhật thông tin tài khoản</div>
|
||||
</div>
|
||||
<i class="fas fa-chevron-right list-item-arrow"></i>
|
||||
</a>
|
||||
|
||||
<a href="orders.html" class="list-item">
|
||||
<div class="list-item-icon">
|
||||
<i class="fas fa-history"></i>
|
||||
</div>
|
||||
<div class="list-item-content">
|
||||
<div class="list-item-title">Lịch sử đơn hàng</div>
|
||||
<div class="list-item-subtitle">Xem các đơn hàng đã đặt</div>
|
||||
</div>
|
||||
<i class="fas fa-chevron-right list-item-arrow"></i>
|
||||
</a>
|
||||
|
||||
<a href="addresses.html" class="list-item">
|
||||
<div class="list-item-icon">
|
||||
<i class="fas fa-map-marker-alt"></i>
|
||||
</div>
|
||||
<div class="list-item-content">
|
||||
<div class="list-item-title">Địa chỉ đã lưu</div>
|
||||
<div class="list-item-subtitle">Quản lý địa chỉ giao hàng</div>
|
||||
</div>
|
||||
<i class="fas fa-chevron-right list-item-arrow"></i>
|
||||
</a>
|
||||
|
||||
<a href="#" class="list-item">
|
||||
<div class="list-item-icon">
|
||||
<i class="fas fa-bell"></i>
|
||||
</div>
|
||||
<div class="list-item-content">
|
||||
<div class="list-item-title">Cài đặt thông báo</div>
|
||||
<div class="list-item-subtitle">Quản lý thông báo đẩy</div>
|
||||
</div>
|
||||
<i class="fas fa-chevron-right list-item-arrow"></i>
|
||||
</a>
|
||||
|
||||
<a href="password-change.html" class="list-item">
|
||||
<div class="list-item-icon">
|
||||
<i class="fas fa-lock"></i>
|
||||
</div>
|
||||
<div class="list-item-content">
|
||||
<div class="list-item-title">Đổi mật khẩu</div>
|
||||
<div class="list-item-subtitle">Cập nhật mật khẩu mới</div>
|
||||
</div>
|
||||
<i class="fas fa-chevron-right list-item-arrow"></i>
|
||||
</a>
|
||||
|
||||
<a href="#" class="list-item">
|
||||
<div class="list-item-icon">
|
||||
<i class="fas fa-language"></i>
|
||||
</div>
|
||||
<div class="list-item-content">
|
||||
<div class="list-item-title">Ngôn ngữ</div>
|
||||
<div class="list-item-subtitle">Tiếng Việt</div>
|
||||
</div>
|
||||
<i class="fas fa-chevron-right list-item-arrow"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Support Section -->
|
||||
<div class="card">
|
||||
<h3 class="card-title">Hỗ trợ</h3>
|
||||
<a href="#" class="list-item" style="margin-bottom: 12px;">
|
||||
<div class="list-item-icon">
|
||||
<i class="fas fa-headset"></i>
|
||||
</div>
|
||||
<div class="list-item-content">
|
||||
<div class="list-item-title">Liên hệ hỗ trợ</div>
|
||||
<div class="list-item-subtitle">Hotline: 1900 1234</div>
|
||||
</div>
|
||||
<i class="fas fa-phone list-item-arrow"></i>
|
||||
</a>
|
||||
|
||||
<a href="#" class="list-item" style="margin-bottom: 12px;">
|
||||
<div class="list-item-icon">
|
||||
<i class="fas fa-question-circle"></i>
|
||||
</div>
|
||||
<div class="list-item-content">
|
||||
<div class="list-item-title">Câu hỏi thường gặp</div>
|
||||
</div>
|
||||
<i class="fas fa-chevron-right list-item-arrow"></i>
|
||||
</a>
|
||||
|
||||
<a href="#" class="list-item">
|
||||
<div class="list-item-icon">
|
||||
<i class="fas fa-info-circle"></i>
|
||||
</div>
|
||||
<div class="list-item-content">
|
||||
<div class="list-item-title">Về ứng dụng</div>
|
||||
<div class="list-item-subtitle">Phiên bản 1.0.0</div>
|
||||
</div>
|
||||
<i class="fas fa-chevron-right list-item-arrow"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Logout Button -->
|
||||
<div style="margin: 24px 0;">
|
||||
<a href="login.html" class="btn btn-secondary btn-block">
|
||||
<i class="fas fa-sign-out-alt"></i> Đăng xuất
|
||||
</a>
|
||||
</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="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" 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 active">
|
||||
<i class="fas fa-user nav-icon"></i>
|
||||
<span class="nav-label">Cài đặt</span>
|
||||
</a>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
138
html/addresses.html
Normal file
138
html/addresses.html
Normal file
@@ -0,0 +1,138 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="vi">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Địa chỉ đã lưu - EuroTile Worker</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link rel="stylesheet" href="assets/css/style.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="page-wrapper">
|
||||
<!-- Header -->
|
||||
<div class="header">
|
||||
<a href="account.html" class="back-button">
|
||||
<i class="fas fa-arrow-left"></i>
|
||||
</a>
|
||||
<h1 class="header-title">Địa chỉ đã lưu</h1>
|
||||
<button class="back-button" onclick="addAddress()">
|
||||
<i class="fas fa-plus"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<!-- Address List -->
|
||||
<div class="address-list">
|
||||
<!-- Default Address -->
|
||||
<div class="address-item default">
|
||||
<div class="address-content">
|
||||
<div class="address-header">
|
||||
<h4 class="address-name">Hoàng Minh Hiệp</h4>
|
||||
<span class="default-badge">Mặc định</span>
|
||||
</div>
|
||||
<p class="address-phone">0347302911</p>
|
||||
<p class="address-text">
|
||||
123 Đường Võ Văn Ngân, Phường Linh Chiểu,
|
||||
Thành phố Thủ Đức, TP.HCM
|
||||
</p>
|
||||
</div>
|
||||
<div class="address-actions">
|
||||
<button class="btn-address-edit" onclick="editAddress(1)">
|
||||
<i class="fas fa-edit"></i>
|
||||
</button>
|
||||
<button class="btn-address-delete" onclick="deleteAddress(1)">
|
||||
<i class="fas fa-trash"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Address 2 -->
|
||||
<div class="address-item">
|
||||
<div class="address-content">
|
||||
<div class="address-header">
|
||||
<h4 class="address-name">Hoàng Minh Hiệp</h4>
|
||||
<button class="set-default-btn" onclick="setDefault(2)">Đặt mặc định</button>
|
||||
</div>
|
||||
<p class="address-phone">0347302911</p>
|
||||
<p class="address-text">
|
||||
456 Đường Nguyễn Thị Minh Khai, Quận 3, TP.HCM
|
||||
</p>
|
||||
</div>
|
||||
<div class="address-actions">
|
||||
<button class="btn-address-edit" onclick="editAddress(2)">
|
||||
<i class="fas fa-edit"></i>
|
||||
</button>
|
||||
<button class="btn-address-delete" onclick="deleteAddress(2)">
|
||||
<i class="fas fa-trash"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Address 3 -->
|
||||
<div class="address-item">
|
||||
<div class="address-content">
|
||||
<div class="address-header">
|
||||
<h4 class="address-name">Công ty TNHH ABC</h4>
|
||||
<button class="set-default-btn" onclick="setDefault(3)">Đặt mặc định</button>
|
||||
</div>
|
||||
<p class="address-phone">0283445566</p>
|
||||
<p class="address-text">
|
||||
789 Đường Lê Văn Sỹ, Quận Phú Nhuận, TP.HCM
|
||||
</p>
|
||||
</div>
|
||||
<div class="address-actions">
|
||||
<button class="btn-address-edit" onclick="editAddress(3)">
|
||||
<i class="fas fa-edit"></i>
|
||||
</button>
|
||||
<button class="btn-address-delete" onclick="deleteAddress(3)">
|
||||
<i class="fas fa-trash"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Add New Address Button -->
|
||||
<button class="btn btn-primary w-100 mt-3" onclick="addAddress()">
|
||||
<i class="fas fa-plus"></i>
|
||||
Thêm địa chỉ mới
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function addAddress() {
|
||||
alert('Chức năng thêm địa chỉ mới sẽ được phát triển');
|
||||
}
|
||||
|
||||
function editAddress(id) {
|
||||
alert('Chỉnh sửa địa chỉ #' + id);
|
||||
}
|
||||
|
||||
function deleteAddress(id) {
|
||||
if (confirm('Bạn có chắc chắn muốn xóa địa chỉ này?')) {
|
||||
alert('Đã xóa địa chỉ #' + id);
|
||||
}
|
||||
}
|
||||
|
||||
function setDefault(id) {
|
||||
document.querySelectorAll('.address-item').forEach(item => {
|
||||
item.classList.remove('default');
|
||||
item.querySelector('.default-badge')?.remove();
|
||||
const setDefaultBtn = item.querySelector('.set-default-btn');
|
||||
if (setDefaultBtn) setDefaultBtn.style.display = 'block';
|
||||
});
|
||||
|
||||
const targetItem = document.querySelector('.address-item:nth-child(' + id + ')');
|
||||
targetItem.classList.add('default');
|
||||
targetItem.querySelector('.address-header').innerHTML += '<span class="default-badge">Mặc định</span>';
|
||||
const btn = targetItem.querySelector('.set-default-btn');
|
||||
if (btn) btn.style.display = 'none';
|
||||
|
||||
alert('Đã đặt làm địa chỉ mặc định');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
2231
html/assets/css/style(1).css
Normal file
2231
html/assets/css/style(1).css
Normal file
File diff suppressed because it is too large
Load Diff
2108
html/assets/css/style.css
Normal file
2108
html/assets/css/style.css
Normal file
File diff suppressed because it is too large
Load Diff
BIN
html/assets/images/card-diamond.png
Normal file
BIN
html/assets/images/card-diamond.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 584 B |
BIN
html/assets/images/card-gold.png
Normal file
BIN
html/assets/images/card-gold.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.8 KiB |
BIN
html/assets/images/card-titan.png
Normal file
BIN
html/assets/images/card-titan.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
141
html/cart.html
Normal file
141
html/cart.html
Normal file
@@ -0,0 +1,141 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="vi">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Giỏ 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="products.html" class="back-button">
|
||||
<i class="fas fa-arrow-left"></i>
|
||||
</a>
|
||||
<h1 class="header-title">Giỏ hàng (3)</h1>
|
||||
<button class="back-button">
|
||||
<i class="fas fa-trash-alt"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<!-- Warehouse Selection -->
|
||||
<div class="card mb-3">
|
||||
<div class="form-group" style="margin-bottom: 0;">
|
||||
<label class="form-label" for="warehouse">Kho xuất hàng</label>
|
||||
<select id="warehouse" class="form-input form-select">
|
||||
<option value="hanoi">Kho Hà Nội - Nguyễn Trãi</option>
|
||||
<option value="hcm">Kho TP.HCM - Quận 7</option>
|
||||
<option value="danang">Kho Đà Nẵng - Sơn Trà</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Cart Items -->
|
||||
<div class="cart-item">
|
||||
<img src="https://images.unsplash.com/photo-1615971677499-5467cbab01c0?w=80&h=80&fit=crop" alt="Product" class="cart-item-image">
|
||||
<div class="cart-item-info">
|
||||
<div class="cart-item-name">Gạch men cao cấp 60x60</div>
|
||||
<div class="text-small text-muted">Mã: ET-MC6060</div>
|
||||
<div class="cart-item-price">450.000đ/m²</div>
|
||||
<div class="quantity-control">
|
||||
<button class="quantity-btn">
|
||||
<i class="fas fa-minus"></i>
|
||||
</button>
|
||||
<span class="quantity-value">10</span>
|
||||
<button class="quantity-btn">
|
||||
<i class="fas fa-plus"></i>
|
||||
</button>
|
||||
<span class="text-small text-muted" style="margin-left: 8px;">m²</span>
|
||||
</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="text-small text-muted">Mã: ET-GR8080</div>
|
||||
<div class="cart-item-price">680.000đ/m²</div>
|
||||
<div class="quantity-control">
|
||||
<button class="quantity-btn">
|
||||
<i class="fas fa-minus"></i>
|
||||
</button>
|
||||
<span class="quantity-value">15</span>
|
||||
<button class="quantity-btn">
|
||||
<i class="fas fa-plus"></i>
|
||||
</button>
|
||||
<span class="text-small text-muted" style="margin-left: 8px;">m²</span>
|
||||
</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="text-small text-muted">Mã: ET-MS3030</div>
|
||||
<div class="cart-item-price">320.000đ/m²</div>
|
||||
<div class="quantity-control">
|
||||
<button class="quantity-btn">
|
||||
<i class="fas fa-minus"></i>
|
||||
</button>
|
||||
<span class="quantity-value">5</span>
|
||||
<button class="quantity-btn">
|
||||
<i class="fas fa-plus"></i>
|
||||
</button>
|
||||
<span class="text-small text-muted" style="margin-left: 8px;">m²</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Discount Code -->
|
||||
<div class="card">
|
||||
<div class="form-group" style="margin-bottom: 8px;">
|
||||
<label class="form-label">Mã giảm giá</label>
|
||||
<div style="display: flex; gap: 8px;">
|
||||
<input type="text" class="form-input" style="flex: 1;" placeholder="Nhập mã giảm giá">
|
||||
<button class="btn btn-primary">Áp dụng</button>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-small text-success">
|
||||
<i class="fas fa-check-circle"></i> Bạn được giảm 15% (hạng Diamond)
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Order Summary -->
|
||||
<div class="card">
|
||||
<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>
|
||||
</div>
|
||||
<div class="d-flex justify-between mb-2">
|
||||
<span>Giảm giá Diamond (-15%)</span>
|
||||
<span class="text-success">-2.505.000đ</span>
|
||||
</div>
|
||||
<div class="d-flex justify-between mb-2">
|
||||
<span>Phí vận chuyển</span>
|
||||
<span>Miễn phí</span>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Checkout Button -->
|
||||
<div style="margin-bottom: 24px;">
|
||||
<a href="checkout.html" class="btn btn-primary btn-block">
|
||||
Tiến hành đặt hàng
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
1344
html/chat-detail.html
Normal file
1344
html/chat-detail.html
Normal file
File diff suppressed because it is too large
Load Diff
825
html/chat-list.html
Normal file
825
html/chat-list.html
Normal file
@@ -0,0 +1,825 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="vi">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Tin nhắ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="index.html" class="back-button">
|
||||
<i class="fas fa-arrow-left"></i>
|
||||
</a>
|
||||
<h1 class="header-title">Tin nhắn</h1>
|
||||
<div class="header-actions">
|
||||
<button class="header-action-btn" onclick="searchConversations()">
|
||||
<i class="fas fa-search"></i>
|
||||
</button>
|
||||
<button class="header-action-btn" onclick="newConversation()">
|
||||
<i class="fas fa-plus"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chat-list-content">
|
||||
<!-- Search Bar (Hidden by default) -->
|
||||
<div class="search-container" id="searchContainer" style="display: none;">
|
||||
<div class="search-bar">
|
||||
<i class="fas fa-search search-icon"></i>
|
||||
<input type="text" class="search-input" placeholder="Tìm kiếm cuộc trò chuyện..." id="searchInput">
|
||||
<button class="search-clear" onclick="clearSearch()" style="display: none;">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 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>
|
||||
</button>
|
||||
<button class="filter-tab" onclick="filterChats('unread')">
|
||||
Chưa đọc
|
||||
<span class="tab-count">3</span>
|
||||
</button>
|
||||
<button class="filter-tab" onclick="filterChats('customers')">
|
||||
Khách hàng
|
||||
<span class="tab-count">8</span>
|
||||
</button>
|
||||
<button class="filter-tab" onclick="filterChats('support')">
|
||||
Hỗ trợ
|
||||
<span class="tab-count">4</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Conversation List -->
|
||||
<div class="conversations-list" id="conversationsList">
|
||||
|
||||
<!-- Conversation Item 1 - Unread Customer -->
|
||||
<div class="conversation-item unread customer" onclick="openChat('conv001')">
|
||||
<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>
|
||||
<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>
|
||||
<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à ở
|
||||
</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="separator">•</span>
|
||||
<span class="last-seen">Đang hoạt động</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Conversation Item 2 - Support Team -->
|
||||
<div class="conversation-item support" onclick="openChat('support001')">
|
||||
<div class="avatar-container">
|
||||
<div class="avatar support-avatar">
|
||||
<i class="fas fa-headset"></i>
|
||||
</div>
|
||||
<div class="online-indicator online"></div>
|
||||
</div>
|
||||
<div class="conversation-content">
|
||||
<div class="conversation-header">
|
||||
<h3 class="contact-name">Hỗ trợ kỹ thuật</h3>
|
||||
<span class="message-time">13:45</span>
|
||||
</div>
|
||||
<div class="conversation-preview">
|
||||
<div class="last-message">
|
||||
Thông tin về quy trình đổi trả sản phẩm
|
||||
</div>
|
||||
</div>
|
||||
<div class="conversation-meta">
|
||||
<span class="contact-type">Bộ phận hỗ trợ</span>
|
||||
<span class="separator">•</span>
|
||||
<span class="last-seen">Đang hoạt động</span>
|
||||
</div>
|
||||
</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="avatar-container">
|
||||
<div class="avatar architect-avatar">
|
||||
<img src="https://placehold.co/50x50/F0F8FF/4169E1/png?text=LVC" alt="Lê Văn C">
|
||||
</div>
|
||||
<div class="online-indicator offline"></div>
|
||||
</div>
|
||||
<div class="conversation-content">
|
||||
<div class="conversation-header">
|
||||
<h3 class="contact-name">KTS. Lê Văn C</h3>
|
||||
<span class="message-time">Hôm qua</span>
|
||||
</div>
|
||||
<div class="conversation-preview">
|
||||
<div class="last-message">
|
||||
<i class="fas fa-check-double delivered"></i>
|
||||
Cảm ơn bạn! Tư vấn rất hữu ích.
|
||||
</div>
|
||||
</div>
|
||||
<div class="conversation-meta">
|
||||
<span class="contact-type">Kiến trúc sư</span>
|
||||
<span class="separator">•</span>
|
||||
<span class="last-seen">1 ngày trước</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Conversation Item 5 - Product Inquiry -->
|
||||
<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">
|
||||
</div>
|
||||
<div class="online-indicator offline"></div>
|
||||
</div>
|
||||
<div class="conversation-content">
|
||||
<div class="conversation-header">
|
||||
<h3 class="contact-name">Phạm Thị D</h3>
|
||||
<span class="message-time">2 ngày</span>
|
||||
</div>
|
||||
<div class="conversation-preview">
|
||||
<div class="last-message">
|
||||
<i class="fas fa-check-double delivered"></i>
|
||||
Có thể xem thêm mẫu gạch 80x80 không?
|
||||
</div>
|
||||
</div>
|
||||
<div class="conversation-meta">
|
||||
<span class="contact-type">Tư vấn sản phẩm</span>
|
||||
<span class="separator">•</span>
|
||||
<span class="last-seen">2 ngày trước</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Conversation Item 6 - Group Support -->
|
||||
<div class="conversation-item support" onclick="openChat('group001')">
|
||||
<div class="avatar-container">
|
||||
<div class="avatar group-avatar">
|
||||
<i class="fas fa-users"></i>
|
||||
</div>
|
||||
<div class="online-indicator online"></div>
|
||||
</div>
|
||||
<div class="conversation-content">
|
||||
<div class="conversation-header">
|
||||
<h3 class="contact-name">Nhóm bán hàng miền Nam</h3>
|
||||
<span class="message-time">3 ngày</span>
|
||||
</div>
|
||||
<div class="conversation-preview">
|
||||
<div class="last-message">
|
||||
<strong>Quản lý:</strong> Cập nhật bảng giá tháng 8
|
||||
</div>
|
||||
</div>
|
||||
<div class="conversation-meta">
|
||||
<span class="contact-type">Nhóm làm việc</span>
|
||||
<span class="separator">•</span>
|
||||
<span class="last-seen">15 thành viên</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Conversation Item 7 - Technical Question -->
|
||||
<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">
|
||||
</div>
|
||||
<div class="online-indicator offline"></div>
|
||||
</div>
|
||||
<div class="conversation-content">
|
||||
<div class="conversation-header">
|
||||
<h3 class="contact-name">Hoàng Văn E</h3>
|
||||
<span class="message-time">1 tuần</span>
|
||||
</div>
|
||||
<div class="conversation-preview">
|
||||
<div class="last-message">
|
||||
<i class="fas fa-check-double read"></i>
|
||||
Hướng dẫn lắp đặt rất chi tiết, cảm ơn!
|
||||
</div>
|
||||
</div>
|
||||
<div class="conversation-meta">
|
||||
<span class="contact-type">Hướng dẫn lắp đặt</span>
|
||||
<span class="separator">•</span>
|
||||
<span class="last-seen">1 tuần trước</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- More conversations would be loaded with pagination -->
|
||||
<div class="load-more-section">
|
||||
<button class="load-more-btn" onclick="loadMoreConversations()">
|
||||
<i class="fas fa-chevron-down"></i>
|
||||
Tải thêm cuộc trò chuyện
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bottom Navigation -->
|
||||
<!--<div class="bottom-nav">
|
||||
<a href="index.html" class="nav-item">
|
||||
<i class="fas fa-home"></i>
|
||||
<span>Trang chủ</span>
|
||||
</a>
|
||||
<a href="loyalty.html" class="nav-item">
|
||||
<i class="fas fa-star"></i>
|
||||
<span>Hội viên</span>
|
||||
</a>
|
||||
<a href="promotions.html" class="nav-item">
|
||||
<i class="fas fa-tags"></i>
|
||||
<span>Khuyến mãi</span>
|
||||
</a>
|
||||
<a href="notifications.html" class="nav-item">
|
||||
<i class="fas fa-bell"></i>
|
||||
<span>Thông báo</span>
|
||||
</a>
|
||||
<a href="chat-list.html" class="nav-item active">
|
||||
<i class="fas fa-comments"></i>
|
||||
<span>Tin nhắn</span>
|
||||
</a>
|
||||
</div>-->
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.chat-list-content {
|
||||
padding: 0 0 80px 0;
|
||||
}
|
||||
|
||||
/* Search Container */
|
||||
.search-container {
|
||||
padding: 12px 16px;
|
||||
background: var(--white);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
/* Chat Filter Tabs */
|
||||
.chat-filter-tabs {
|
||||
display: flex;
|
||||
background: var(--white);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
overflow-x: auto;
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
|
||||
.chat-filter-tabs::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.filter-tab {
|
||||
flex-shrink: 0;
|
||||
padding: 12px 16px;
|
||||
border: none;
|
||||
background: none;
|
||||
color: var(--text-light);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
transition: all 0.3s ease;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.filter-tab.active {
|
||||
color: var(--primary-blue);
|
||||
}
|
||||
|
||||
.filter-tab.active::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 30px;
|
||||
height: 2px;
|
||||
background: var(--primary-blue);
|
||||
}
|
||||
|
||||
.tab-count {
|
||||
background: var(--primary-blue);
|
||||
color: white;
|
||||
font-size: 11px;
|
||||
padding: 2px 6px;
|
||||
border-radius: 10px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.filter-tab:not(.active) .tab-count {
|
||||
background: var(--text-light);
|
||||
}
|
||||
|
||||
/* Conversations List */
|
||||
.conversations-list {
|
||||
background: var(--background-gray);
|
||||
}
|
||||
|
||||
.conversation-item {
|
||||
display: flex;
|
||||
padding: 16px;
|
||||
background: var(--white);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.conversation-item:hover {
|
||||
background: #f8f9fa;
|
||||
}
|
||||
|
||||
.conversation-item.unread {
|
||||
background: #f0f9ff;
|
||||
}
|
||||
|
||||
.conversation-item.unread:hover {
|
||||
background: #e0f2fe;
|
||||
}
|
||||
|
||||
/* Avatar */
|
||||
.avatar-container {
|
||||
position: relative;
|
||||
margin-right: 12px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.avatar img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.customer-avatar {
|
||||
background: var(--background-gray);
|
||||
}
|
||||
|
||||
.support-avatar {
|
||||
background: linear-gradient(135deg, var(--primary-blue), var(--light-blue));
|
||||
color: white;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.architect-avatar {
|
||||
background: var(--background-gray);
|
||||
}
|
||||
|
||||
.group-avatar {
|
||||
background: linear-gradient(135deg, var(--success-color), #4CAF50);
|
||||
color: white;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.online-indicator {
|
||||
position: absolute;
|
||||
bottom: 2px;
|
||||
right: 2px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid var(--white);
|
||||
}
|
||||
|
||||
.online-indicator.online {
|
||||
background: var(--success-color);
|
||||
}
|
||||
|
||||
.online-indicator.away {
|
||||
background: var(--warning-color);
|
||||
}
|
||||
|
||||
.online-indicator.offline {
|
||||
background: var(--text-light);
|
||||
}
|
||||
|
||||
/* Conversation Content */
|
||||
.conversation-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.conversation-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.contact-name {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--text-dark);
|
||||
margin: 0;
|
||||
flex: 1;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.message-time {
|
||||
color: var(--text-light);
|
||||
font-size: 12px;
|
||||
flex-shrink: 0;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.conversation-preview {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.last-message {
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
color: var(--text-light);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.last-message i {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.last-message .fa-check-double.delivered {
|
||||
color: var(--primary-blue);
|
||||
}
|
||||
|
||||
.last-message .fa-check-double.read {
|
||||
color: var(--success-color);
|
||||
}
|
||||
|
||||
.message-indicators {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
flex-shrink: 0;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.unread-count {
|
||||
background: var(--danger-color);
|
||||
color: white;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
padding: 2px 6px;
|
||||
border-radius: 10px;
|
||||
min-width: 18px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.conversation-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 12px;
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
.contact-type {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.separator {
|
||||
color: var(--border-color);
|
||||
}
|
||||
|
||||
/* Load More */
|
||||
.load-more-section {
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
background: var(--white);
|
||||
}
|
||||
|
||||
.load-more-btn {
|
||||
background: var(--border-color);
|
||||
color: var(--text-dark);
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
padding: 12px 24px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin: 0 auto;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.load-more-btn:hover {
|
||||
background: #ddd;
|
||||
}
|
||||
|
||||
/* Sharing Header */
|
||||
.sharing-header {
|
||||
background: linear-gradient(135deg, var(--primary-blue), var(--light-blue));
|
||||
color: white;
|
||||
padding: 12px 16px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.sharing-product-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.sharing-product-info i {
|
||||
font-size: 20px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.sharing-details {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.sharing-title {
|
||||
font-size: 12px;
|
||||
opacity: 0.9;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.sharing-product {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.cancel-sharing {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.cancel-sharing:hover {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 480px) {
|
||||
.conversation-item {
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
}
|
||||
|
||||
.contact-name {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.last-message {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.filter-tab {
|
||||
padding: 10px 12px;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
let currentFilter = 'all';
|
||||
|
||||
function searchConversations() {
|
||||
const container = document.getElementById('searchContainer');
|
||||
const input = document.getElementById('searchInput');
|
||||
|
||||
if (container.style.display === 'none') {
|
||||
container.style.display = 'block';
|
||||
input.focus();
|
||||
} else {
|
||||
container.style.display = 'none';
|
||||
input.value = '';
|
||||
clearSearch();
|
||||
}
|
||||
}
|
||||
|
||||
function clearSearch() {
|
||||
const input = document.getElementById('searchInput');
|
||||
input.value = '';
|
||||
filterConversations('');
|
||||
}
|
||||
|
||||
function filterChats(type) {
|
||||
currentFilter = type;
|
||||
|
||||
// Update tab states
|
||||
document.querySelectorAll('.filter-tab').forEach(tab => {
|
||||
tab.classList.remove('active');
|
||||
});
|
||||
event.target.classList.add('active');
|
||||
|
||||
// Filter conversations
|
||||
const conversations = document.querySelectorAll('.conversation-item');
|
||||
conversations.forEach(conv => {
|
||||
const shouldShow = shouldShowConversation(conv, type);
|
||||
conv.style.display = shouldShow ? 'flex' : 'none';
|
||||
});
|
||||
}
|
||||
|
||||
function shouldShowConversation(conversation, filter) {
|
||||
switch(filter) {
|
||||
case 'all':
|
||||
return true;
|
||||
case 'unread':
|
||||
return conversation.classList.contains('unread');
|
||||
case 'customers':
|
||||
return conversation.classList.contains('customer');
|
||||
case 'support':
|
||||
return conversation.classList.contains('support');
|
||||
default:
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
function filterConversations(searchTerm) {
|
||||
const conversations = document.querySelectorAll('.conversation-item');
|
||||
|
||||
conversations.forEach(conv => {
|
||||
const name = conv.querySelector('.contact-name').textContent.toLowerCase();
|
||||
const message = conv.querySelector('.last-message').textContent.toLowerCase();
|
||||
|
||||
const matches = searchTerm === '' ||
|
||||
name.includes(searchTerm.toLowerCase()) ||
|
||||
message.includes(searchTerm.toLowerCase());
|
||||
|
||||
const shouldShow = matches && shouldShowConversation(conv, currentFilter);
|
||||
conv.style.display = shouldShow ? 'flex' : 'none';
|
||||
});
|
||||
}
|
||||
|
||||
function openChat(conversationId) {
|
||||
window.location.href = `chat-detail.html?id=${conversationId}`;
|
||||
}
|
||||
|
||||
function newConversation() {
|
||||
// In a real app, this would open a contact selection modal
|
||||
alert('Chức năng tạo cuộc trò chuyện mới sẽ được triển khai trong phiên bản tiếp theo.');
|
||||
}
|
||||
|
||||
function loadMoreConversations() {
|
||||
// In a real app, this would load more conversations via API
|
||||
alert('Đang tải thêm cuộc trò chuyện...');
|
||||
}
|
||||
|
||||
// Check for sharing mode
|
||||
function checkSharingMode() {
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const mode = urlParams.get('mode');
|
||||
|
||||
if (mode === 'share') {
|
||||
const productId = urlParams.get('product');
|
||||
const productName = urlParams.get('name');
|
||||
const productPrice = urlParams.get('price');
|
||||
|
||||
// Show sharing header
|
||||
showSharingHeader(productName, productPrice);
|
||||
|
||||
// Add click handler for conversations
|
||||
document.querySelectorAll('.conversation-item').forEach(item => {
|
||||
const originalOnclick = item.getAttribute('onclick');
|
||||
if (originalOnclick) {
|
||||
const conversationId = originalOnclick.match(/'([^']+)'/)[1];
|
||||
item.setAttribute('onclick', `shareProductToConversation('${productId}', '${productName}', '${productPrice}', '${conversationId}')`);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function showSharingHeader(productName, productPrice) {
|
||||
const header = document.querySelector('.header');
|
||||
const sharingHeader = document.createElement('div');
|
||||
sharingHeader.className = 'sharing-header';
|
||||
sharingHeader.innerHTML = `
|
||||
<div class="sharing-product-info">
|
||||
<i class="fas fa-share"></i>
|
||||
<div class="sharing-details">
|
||||
<div class="sharing-title">Chia sẻ sản phẩm</div>
|
||||
<div class="sharing-product">${decodeURIComponent(productName)}</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="cancel-sharing" onclick="cancelSharing()">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
`;
|
||||
header.parentNode.insertBefore(sharingHeader, header.nextSibling);
|
||||
}
|
||||
|
||||
function shareProductToConversation(productId, productName, productPrice, conversationId) {
|
||||
const confirmMsg = `Chia sẻ "${decodeURIComponent(productName)}" đến cuộc trò chuyện này?`;
|
||||
if (confirm(confirmMsg)) {
|
||||
// Navigate to chat detail with shared product info
|
||||
window.location.href = `chat-detail.html?id=${conversationId}&share=true&product=${productId}&name=${productName}&price=${productPrice}`;
|
||||
}
|
||||
}
|
||||
|
||||
function cancelSharing() {
|
||||
window.location.href = 'product-detail.html';
|
||||
}
|
||||
|
||||
// Search input event listener
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Check for sharing mode on page load
|
||||
checkSharingMode();
|
||||
|
||||
const searchInput = document.getElementById('searchInput');
|
||||
searchInput.addEventListener('input', function(e) {
|
||||
filterConversations(e.target.value);
|
||||
|
||||
// Show/hide clear button
|
||||
const clearBtn = document.querySelector('.search-clear');
|
||||
if (e.target.value) {
|
||||
clearBtn.style.display = 'block';
|
||||
} else {
|
||||
clearBtn.style.display = 'none';
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
117
html/checkout.html
Normal file
117
html/checkout.html
Normal file
@@ -0,0 +1,117 @@
|
||||
<!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="cart.html" class="back-button">
|
||||
<i class="fas fa-arrow-left"></i>
|
||||
</a>
|
||||
<h1 class="header-title">Thanh toán</h1>
|
||||
<div style="width: 32px;"></div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<!-- Delivery Info -->
|
||||
<div class="card">
|
||||
<h3 class="card-title">Thông tin giao hàng</h3>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Họ và tên người nhận</label>
|
||||
<input type="text" class="form-input" value="La Nguyen Quynh">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Số điện thoại</label>
|
||||
<input type="tel" class="form-input" value="0983441099">
|
||||
</div>
|
||||
<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">Ghi chú cho tài xế</label>
|
||||
<input type="text" class="form-input" placeholder="Ví dụ: Gọi trước khi giao">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Payment Method -->
|
||||
<div class="card">
|
||||
<h3 class="card-title">Phương thức thanh toán</h3>
|
||||
<label class="list-item" style="cursor: pointer;">
|
||||
<input type="radio" name="payment" checked style="margin-right: 12px;">
|
||||
<div class="list-item-icon">
|
||||
<i class="fas fa-money-check-alt"></i>
|
||||
</div>
|
||||
<div class="list-item-content">
|
||||
<div class="list-item-title">Chuyển khoản ngân hàng</div>
|
||||
<div class="list-item-subtitle">Thanh toán qua tài khoản ngân hàng</div>
|
||||
</div>
|
||||
</label>
|
||||
<label class="list-item" style="cursor: pointer;">
|
||||
<input type="radio" name="payment" style="margin-right: 12px;">
|
||||
<div class="list-item-icon">
|
||||
<i class="fas fa-hand-holding-usd"></i>
|
||||
</div>
|
||||
<div class="list-item-content">
|
||||
<div class="list-item-title">Thanh toán khi nhận hàng</div>
|
||||
<div class="list-item-subtitle">COD - Trả tiền mặt cho tài xế</div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Order Summary -->
|
||||
<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 class="d-flex justify-between mb-2">
|
||||
<span>Gạch granite nhập khẩu (15m²)</span>
|
||||
<span>10.200.000đ</span>
|
||||
</div>
|
||||
<div class="d-flex justify-between mb-2">
|
||||
<span>Gạch mosaic trang trí (5m²)</span>
|
||||
<span>1.600.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>
|
||||
</div>
|
||||
<div class="d-flex justify-between mb-2">
|
||||
<span>Giảm giá Diamond</span>
|
||||
<span class="text-success">-2.505.000đ</span>
|
||||
</div>
|
||||
<div class="d-flex justify-between mb-2">
|
||||
<span>Phí vận chuyển</span>
|
||||
<span>Miễn phí</span>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Place Order Button -->
|
||||
<div style="margin-bottom: 24px;">
|
||||
<a href="order-success.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">
|
||||
Bằng cách đặt hàng, bạn đồng ý với
|
||||
<a href="#" class="text-primary">Điều khoản & Điều kiện</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
741
html/index (1).html
Normal file
741
html/index (1).html
Normal file
@@ -0,0 +1,741 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="vi">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Trang chủ - 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>
|
||||
/* Policy Modal Styles */
|
||||
.policy-modal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 1rem;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.policy-modal.show {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.policy-modal-content {
|
||||
background: white;
|
||||
border-radius: 1.5rem;
|
||||
max-width: 480px;
|
||||
width: 100%;
|
||||
max-height: 90vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
transform: scale(0.9) translateY(50px);
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.policy-modal.show .policy-modal-content {
|
||||
transform: scale(1) translateY(0);
|
||||
}
|
||||
|
||||
.policy-header {
|
||||
background: linear-gradient(135deg, #2563eb, #1d4ed8);
|
||||
color: white;
|
||||
padding: 2rem 1.5rem 1.5rem;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.policy-header::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 20px;
|
||||
background: white;
|
||||
border-radius: 20px 20px 0 0;
|
||||
}
|
||||
|
||||
.policy-icon {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto 1rem;
|
||||
animation: bounce 2s infinite;
|
||||
}
|
||||
|
||||
.policy-icon i {
|
||||
font-size: 2rem;
|
||||
color: white;
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0%, 20%, 50%, 80%, 100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
40% {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
60% {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
}
|
||||
|
||||
.policy-title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.policy-subtitle {
|
||||
font-size: 1rem;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.policy-body {
|
||||
flex: 1;
|
||||
padding: 1.5rem;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.welcome-text {
|
||||
font-size: 1rem;
|
||||
color: #1e293b;
|
||||
text-align: center;
|
||||
margin-bottom: 1.5rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.benefits-section {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.benefits-title {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
margin-bottom: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.benefits-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.benefit-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 1rem;
|
||||
padding: 0.75rem;
|
||||
margin-bottom: 0.5rem;
|
||||
background: #f8fafc;
|
||||
border-radius: 0.75rem;
|
||||
border-left: 4px solid #2563eb;
|
||||
}
|
||||
|
||||
.benefit-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: linear-gradient(135deg, #2563eb, #1d4ed8);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
flex-shrink: 0;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.benefit-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.benefit-title {
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.benefit-desc {
|
||||
font-size: 0.875rem;
|
||||
color: #64748b;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.policy-footer {
|
||||
padding: 1.5rem;
|
||||
border-top: 1px solid #e2e8f0;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.policy-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.policy-accept-btn {
|
||||
background: linear-gradient(135deg, #2563eb, #1d4ed8);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 1rem;
|
||||
border-radius: 0.75rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.policy-accept-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3);
|
||||
}
|
||||
|
||||
.policy-note {
|
||||
font-size: 0.75rem;
|
||||
color: #64748b;
|
||||
text-align: center;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.policy-modal {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.policy-header {
|
||||
padding: 1.5rem 1rem 1rem;
|
||||
}
|
||||
|
||||
.policy-title {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.policy-body {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.policy-footer {
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* News Section Styles */
|
||||
.news-slider-container {
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.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>
|
||||
</head>
|
||||
<body>
|
||||
<div class="page-wrapper">
|
||||
<div class="container">
|
||||
<!-- 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>
|
||||
<p style="color: rgba(255,255,255,0.9); font-size: 11px;">ARCHITECT MEMBERSHIP</p>
|
||||
</div>
|
||||
<div style="text-align: right;">
|
||||
<p style="color: rgba(255,255,255,0.8); font-size: 11px;">Valid through</p>
|
||||
<p style="color: white; font-size: 14px; font-weight: 500;">31/12/2021</p>
|
||||
</div>
|
||||
</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>
|
||||
</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;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Promotions Section -->
|
||||
<div class="mb-3">
|
||||
<h2>Chương trình ưu đãi</h2>
|
||||
<div class="slider-container">
|
||||
<div class="slider-wrapper">
|
||||
<div class="slider-item">
|
||||
<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>
|
||||
<p class="text-small text-muted">Giảm đến 30% cho đơn hàng từ 10 triệu</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="slider-item">
|
||||
<img src="https://images.unsplash.com/photo-1600607687644-aac4c3eac7f4?w=280&h=140&fit=crop" alt="Khuyến mãi 2">
|
||||
<div style="padding: 12px; background: white;">
|
||||
<h3 style="font-size: 14px;">Keo chà ron tặng kèm</h3>
|
||||
<p class="text-small text-muted">Mua gạch Eurotile tặng keo chà ron cao cấp</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="slider-item">
|
||||
<img src="https://images.unsplash.com/photo-1565538420870-da08ff96a207?w=280&h=140&fit=crop" alt="Khuyến mãi 3">
|
||||
<div style="padding: 12px; background: white;">
|
||||
<h3 style="font-size: 14px;">Ưu đãi đặc biệt thành viên VIP</h3>
|
||||
<p class="text-small text-muted">Chiết khấu thêm 5% cho thành viên Diamond</p>
|
||||
</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>Tin tức & Chuyên môn</h2>
|
||||
<a href="news-list.html" style="color: #2563eb; font-size: 14px; 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>
|
||||
<div class="feature-grid">
|
||||
<a href="products.html" class="feature-item">
|
||||
<div class="feature-icon">
|
||||
<i class="fas fa-th-large"></i>
|
||||
</div>
|
||||
<div class="feature-title">Sản phẩm</div>
|
||||
</a>
|
||||
<a href="cart.html" class="feature-item">
|
||||
<div class="feature-icon">
|
||||
<i class="fas fa-shopping-cart"></i>
|
||||
</div>
|
||||
<div class="feature-title">Giỏ hàng</div>
|
||||
<span class="badge">3</span>
|
||||
</a>
|
||||
<a href="#" class="feature-item">
|
||||
<div class="feature-icon">
|
||||
<i class="fas fa-heart"></i>
|
||||
</div>
|
||||
<div class="feature-title">Yêu thích</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="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="#" 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>
|
||||
<div class="grid grid-2">
|
||||
<a href="#" 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>
|
||||
</a>
|
||||
<a href="#" class="feature-item">
|
||||
<div class="feature-icon">
|
||||
<i class="fas fa-file-invoice"></i>
|
||||
</div>
|
||||
<div class="feature-title">Báo giá</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Orders & Payment Section -->
|
||||
<div class="card">
|
||||
<h3 class="card-title">Đơn hàng & thanh toán</h3>
|
||||
<div class="grid grid-2">
|
||||
<a href="#" class="feature-item">
|
||||
<div class="feature-icon">
|
||||
<i class="fas fa-box"></i>
|
||||
</div>
|
||||
<div class="feature-title">Đơn hàng</div>
|
||||
</a>
|
||||
<a href="#" class="feature-item">
|
||||
<div class="feature-icon">
|
||||
<i class="fas fa-credit-card"></i>
|
||||
</div>
|
||||
<div class="feature-title">Thanh toán</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Collaboration & Reports Section -->
|
||||
<div class="card">
|
||||
<h3 class="card-title">Công trình, hợp đồng & báo cáo</h3>
|
||||
<div class="feature-grid">
|
||||
<a href="#" class="feature-item">
|
||||
<div class="feature-icon">
|
||||
<i class="fas fa-building"></i>
|
||||
</div>
|
||||
<div class="feature-title">Công trình</div>
|
||||
</a>
|
||||
<a href="#" class="feature-item">
|
||||
<div class="feature-icon">
|
||||
<i class="fas fa-handshake"></i>
|
||||
</div>
|
||||
<div class="feature-title">Hợp đồng</div>
|
||||
</a>
|
||||
<a href="#" class="feature-item">
|
||||
<div class="feature-icon">
|
||||
<i class="fas fa-chart-line"></i>
|
||||
</div>
|
||||
<div class="feature-title">Tổng quan</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Floating Action Button -->
|
||||
<button class="fab">
|
||||
<i class="fas fa-comments"></i>
|
||||
</button>
|
||||
|
||||
<!-- Bottom Navigation -->
|
||||
<div class="bottom-nav">
|
||||
<a href="index.html" class="nav-item active">
|
||||
<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>
|
||||
|
||||
<!-- Policy Modal -->
|
||||
<div id="policyModal" class="policy-modal">
|
||||
<div class="policy-modal-content">
|
||||
<!-- Header -->
|
||||
<div class="policy-header">
|
||||
<div class="policy-icon">
|
||||
<i class="fas fa-hands-helping"></i>
|
||||
</div>
|
||||
<h2 class="policy-title">Chào mừng bạn đến với Worker App!</h2>
|
||||
<p class="policy-subtitle">Nền tảng hỗ trợ chuyên nghiệp dành cho thầu thợ & kiến trúc sư</p>
|
||||
</div>
|
||||
|
||||
<!-- Body -->
|
||||
<div class="policy-body">
|
||||
<p class="welcome-text">
|
||||
Cảm ơn bạn đã tham gia cộng đồng Worker App! Chúng tôi cam kết mang đến những quyền lợi tốt nhất
|
||||
và hỗ trợ bạn thành công trong mọi dự án.
|
||||
</p>
|
||||
|
||||
<!-- Benefits Section -->
|
||||
<div class="benefits-section">
|
||||
<h3 class="benefits-title">
|
||||
<i class="fas fa-star"></i>
|
||||
Quyền lợi đặc biệt của bạn
|
||||
</h3>
|
||||
|
||||
<ul class="benefits-list">
|
||||
<li class="benefit-item">
|
||||
<div class="benefit-icon">
|
||||
<i class="fas fa-percentage"></i>
|
||||
</div>
|
||||
<div class="benefit-content">
|
||||
<div class="benefit-title">Chiết khấu độc quyền</div>
|
||||
<div class="benefit-desc">Giảm giá đến 20% cho tất cả sản phẩm, tăng theo hạng thành viên</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="benefit-item">
|
||||
<div class="benefit-icon">
|
||||
<i class="fas fa-coins"></i>
|
||||
</div>
|
||||
<div class="benefit-content">
|
||||
<div class="benefit-title">Tích điểm thưởng</div>
|
||||
<div class="benefit-desc">Nhận 1 điểm cho mỗi 100k chi tiêu, đổi điểm lấy quà hấp dẫn</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="benefit-item">
|
||||
<div class="benefit-icon">
|
||||
<i class="fas fa-shipping-fast"></i>
|
||||
</div>
|
||||
<div class="benefit-content">
|
||||
<div class="benefit-title">Giao hàng ưu tiên</div>
|
||||
<div class="benefit-desc">Miễn phí vận chuyển cho đơn từ 5 triệu, giao hàng nhanh trong 24h</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="benefit-item">
|
||||
<div class="benefit-icon">
|
||||
<i class="fas fa-user-tie"></i>
|
||||
</div>
|
||||
<div class="benefit-content">
|
||||
<div class="benefit-title">Tư vấn chuyên nghiệp</div>
|
||||
<div class="benefit-desc">Hỗ trợ thiết kế 3D miễn phí, tư vấn kỹ thuật 24/7</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="benefit-item">
|
||||
<div class="benefit-icon">
|
||||
<i class="fas fa-calendar-star"></i>
|
||||
</div>
|
||||
<div class="benefit-content">
|
||||
<div class="benefit-title">Sự kiện độc quyền</div>
|
||||
<div class="benefit-desc">Tham gia hội thảo, workshop và các sự kiện ngành chỉ dành cho thành viên</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="benefit-item">
|
||||
<div class="benefit-icon">
|
||||
<i class="fas fa-gift"></i>
|
||||
</div>
|
||||
<div class="benefit-content">
|
||||
<div class="benefit-title">Quà tặng sinh nhật</div>
|
||||
<div class="benefit-desc">Voucher và điểm thưởng đặc biệt vào dịp sinh nhật</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Important Note -->
|
||||
<div style="background: #fef3c7; border: 1px solid #f59e0b; border-radius: 0.75rem; padding: 1rem; margin-top: 1rem;">
|
||||
<div style="display: flex; align-items: flex-start; gap: 0.75rem;">
|
||||
<i class="fas fa-exclamation-triangle" style="color: #f59e0b; margin-top: 0.25rem;"></i>
|
||||
<div>
|
||||
<div style="font-weight: 600; color: #92400e; margin-bottom: 0.5rem;">Điều khoản sử dụng</div>
|
||||
<div style="font-size: 0.875rem; color: #92400e; line-height: 1.4;">
|
||||
Bằng cách sử dụng ứng dụng, bạn đồng ý với các điều khoản dịch vụ và chính sách bảo mật của chúng tôi.
|
||||
Các quyền lợi có thể thay đổi theo thời gian.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="policy-footer">
|
||||
<div class="policy-actions">
|
||||
<button class="policy-accept-btn" onclick="closePolicyModal()">
|
||||
<i class="fas fa-check"></i>
|
||||
Tôi đã đọc và đồng ý
|
||||
</button>
|
||||
<p class="policy-note">
|
||||
Bằng cách nhấn "Đồng ý", bạn xác nhận đã đọc và hiểu các điều khoản trên.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Show policy modal on page load (for demo purposes)
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Check if user has seen the policy before
|
||||
const hasSeenPolicy = localStorage.getItem('hasSeenPolicy');
|
||||
|
||||
if (!hasSeenPolicy) {
|
||||
setTimeout(() => {
|
||||
showPolicyModal();
|
||||
}, 1000); // Show after 1 second for better UX
|
||||
}
|
||||
});
|
||||
|
||||
function showPolicyModal() {
|
||||
const modal = document.getElementById('policyModal');
|
||||
modal.classList.add('show');
|
||||
document.body.style.overflow = 'hidden'; // Prevent background scrolling
|
||||
}
|
||||
|
||||
function closePolicyModal() {
|
||||
const modal = document.getElementById('policyModal');
|
||||
modal.classList.remove('show');
|
||||
document.body.style.overflow = ''; // Restore scrolling
|
||||
|
||||
// Remember that user has seen the policy
|
||||
localStorage.setItem('hasSeenPolicy', 'true');
|
||||
}
|
||||
|
||||
// Close modal when clicking outside
|
||||
document.getElementById('policyModal').addEventListener('click', function(e) {
|
||||
if (e.target === this) {
|
||||
closePolicyModal();
|
||||
}
|
||||
});
|
||||
|
||||
// Temporary function to show modal for testing (remove in production)
|
||||
function testShowModal() {
|
||||
localStorage.removeItem('hasSeenPolicy');
|
||||
showPolicyModal();
|
||||
}
|
||||
|
||||
// Add a way to show modal again for testing
|
||||
// Double-click on the member card to show modal again
|
||||
document.querySelector('.member-card').addEventListener('dblclick', function() {
|
||||
showPolicyModal();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
248
html/index.html
Normal file
248
html/index.html
Normal file
@@ -0,0 +1,248 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="vi">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Trang chủ - 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">
|
||||
<!-- 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>
|
||||
<p style="color: rgba(255,255,255,0.9); font-size: 11px;">ARCHITECT MEMBERSHIP</p>
|
||||
</div>
|
||||
<div style="text-align: right;">
|
||||
<p style="color: rgba(255,255,255,0.8); font-size: 11px;">Valid through</p>
|
||||
<p style="color: white; font-size: 14px; font-weight: 500;">31/12/2021</p>
|
||||
</div>
|
||||
</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>
|
||||
</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;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Promotions Section -->
|
||||
<div class="mb-3">
|
||||
<h2> <b> Chương trình ưu đãi</b> </h2>
|
||||
<div class="slider-container">
|
||||
<div class="slider-wrapper">
|
||||
<div class="slider-item">
|
||||
<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>
|
||||
<p class="text-small text-muted">Giảm đến 30% cho đơn hàng từ 10 triệu</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="slider-item">
|
||||
<img src="https://images.unsplash.com/photo-1542314831-068cd1dbfeeb?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Khuyến mãi 2">
|
||||
<div style="padding: 12px; background: white;">
|
||||
<h3 style="font-size: 14px;">Keo chà ron tặng kèm</h3>
|
||||
<p class="text-small text-muted">Mua gạch Eurotile tặng keo chà ron cao cấp</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="slider-item">
|
||||
<img src="https://images.unsplash.com/photo-1565538420870-da08ff96a207?w=280&h=140&fit=crop" alt="Khuyến mãi 3">
|
||||
<div style="padding: 12px; background: white;">
|
||||
<h3 style="font-size: 14px;">Ưu đãi đặc biệt thành viên VIP</h3>
|
||||
<p class="text-small text-muted">Chiết khấu thêm 5% cho thành viên Diamond</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Products & Cart Section -->
|
||||
<div class="card">
|
||||
<h3 class="card-title">Sản phẩm & Giỏ hàng</h3>
|
||||
<div class="feature-grid">
|
||||
<a href="products.html" class="feature-item">
|
||||
<div class="feature-icon">
|
||||
<i class="fas fa-th-large"></i>
|
||||
</div>
|
||||
<div class="feature-title">Sản phẩm</div>
|
||||
</a>
|
||||
<a href="cart.html" class="feature-item" style="position: relative">
|
||||
<div class="feature-icon">
|
||||
<i class="fas fa-shopping-cart"></i>
|
||||
</div>
|
||||
<div class="feature-title">Giỏ hàng</div>
|
||||
<span class="badge">3</span>
|
||||
</a>
|
||||
<a href="favorites.html" class="feature-item">
|
||||
<div class="feature-icon">
|
||||
<i class="fas fa-heart"></i>
|
||||
</div>
|
||||
<div class="feature-title">Yêu thích</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="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>
|
||||
<div class="grid grid-2">
|
||||
<a href="quotes-list.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>
|
||||
</a>
|
||||
<a href="quotes.html" class="feature-item">
|
||||
<div class="feature-icon">
|
||||
<i class="fas fa-file-invoice"></i>
|
||||
</div>
|
||||
<div class="feature-title">Báo giá</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Orders & Payment Section -->
|
||||
<div class="card">
|
||||
<h3 class="card-title">Đơn hàng & thanh toán</h3>
|
||||
<div class="grid grid-2">
|
||||
<a href="orders.html" class="feature-item">
|
||||
<div class="feature-icon">
|
||||
<i class="fas fa-box"></i>
|
||||
</div>
|
||||
<div class="feature-title">Đơn hàng</div>
|
||||
</a>
|
||||
<a href="payments.html" class="feature-item">
|
||||
<div class="feature-icon">
|
||||
<i class="fas fa-credit-card"></i>
|
||||
</div>
|
||||
<div class="feature-title">Thanh toán</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Collaboration & Reports Section -->
|
||||
<!--<div class="card">
|
||||
<h3 class="card-title">Công trình, hợp đồng & báo cáo</h3>
|
||||
<div class="feature-grid">
|
||||
<a href="projects.html" class="feature-item">
|
||||
<div class="feature-icon">
|
||||
<i class="fas fa-building"></i>
|
||||
</div>
|
||||
<div class="feature-title">Công trình</div>
|
||||
</a>
|
||||
<a href="#" class="feature-item">
|
||||
<div class="feature-icon">
|
||||
<i class="fas fa-handshake"></i>
|
||||
</div>
|
||||
<div class="feature-title">Hợp đồng</div>
|
||||
</a>
|
||||
<a href="#" class="feature-item">
|
||||
<div class="feature-icon">
|
||||
<i class="fas fa-chart-line"></i>
|
||||
</div>
|
||||
<div class="feature-title">Tổng quan</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>-->
|
||||
|
||||
<div class="card">
|
||||
<h3 class="card-title">Nhà mẫu, dự án & tin tức</h3>
|
||||
<div class="feature-grid">
|
||||
<a href="nha-mau-list.html" class="feature-item">
|
||||
<div class="feature-icon">
|
||||
<!--<i class="fas fa-building"></i>-->
|
||||
<i class="fa-solid fa-house-chimney"></i>
|
||||
</div>
|
||||
<div class="feature-title">Nhà mẫu</div>
|
||||
</a>
|
||||
<a href="project-submission.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">
|
||||
<div class="feature-icon">
|
||||
<i class="fas fa-chart-line"></i>
|
||||
</div>
|
||||
<div class="feature-title">Tin tức</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</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>-->
|
||||
|
||||
<!-- Bottom Navigation -->
|
||||
<div class="bottom-nav">
|
||||
<a href="index.html" class="nav-item active">
|
||||
<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" 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>
|
||||
</body>
|
||||
</html>
|
||||
941
html/khong-gian-detail.html
Normal file
941
html/khong-gian-detail.html
Normal file
@@ -0,0 +1,941 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="vi">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Chi tiết không gian - Worker App</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<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-dark: #1d4ed8;
|
||||
--secondary-color: #64748b;
|
||||
--success-color: #10b981;
|
||||
--warning-color: #f59e0b;
|
||||
--danger-color: #ef4444;
|
||||
--background-color: #f8fafc;
|
||||
--card-background: #ffffff;
|
||||
--text-primary: #1e293b;
|
||||
--text-secondary: #64748b;
|
||||
--border-color: #e2e8f0;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
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 {
|
||||
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);
|
||||
}
|
||||
|
||||
.header-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 1rem;
|
||||
max-width: 480px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--primary-color);
|
||||
font-size: 1.25rem;
|
||||
cursor: pointer;
|
||||
padding: 0.5rem;
|
||||
border-radius: 0.5rem;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.back-button:hover {
|
||||
background-color: #f1f5f9;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.action-button {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--secondary-color);
|
||||
font-size: 1.25rem;
|
||||
cursor: pointer;
|
||||
padding: 0.5rem;
|
||||
border-radius: 0.5rem;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.action-button:hover {
|
||||
background-color: #f1f5f9;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 480px;
|
||||
margin: 0 auto;
|
||||
background: var(--card-background);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.hero-section {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.hero-image {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.hero-overlay {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
|
||||
padding: 1.5rem 1rem 1rem;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.space-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.space-subtitle {
|
||||
font-size: 0.875rem;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 1.5rem;
|
||||
padding-bottom: 100px;
|
||||
}
|
||||
|
||||
.summary-section {
|
||||
background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
|
||||
border: 1px solid var(--primary-color);
|
||||
border-radius: 1rem;
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.summary-title {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: var(--primary-color);
|
||||
margin-bottom: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.summary-stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
color: var(--primary-color);
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 0.75rem;
|
||||
color: #1e40af;
|
||||
}
|
||||
|
||||
.products-section {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.add-product-btn {
|
||||
background: var(--primary-color);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 0.75rem 1.5rem;
|
||||
border-radius: 2rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
|
||||
}
|
||||
|
||||
.add-product-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 15px rgba(37, 99, 235, 0.4);
|
||||
}
|
||||
|
||||
.products-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.product-card {
|
||||
background: var(--card-background);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 0.75rem;
|
||||
overflow: hidden;
|
||||
transition: all 0.2s;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.product-card:hover {
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 2px 8px rgba(37, 99, 235, 0.1);
|
||||
}
|
||||
|
||||
.product-content {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.product-image {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 0.5rem;
|
||||
object-fit: cover;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.product-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.product-title {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 0.25rem;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.product-code {
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 0.5rem;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.product-details {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.product-quantity {
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-primary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.product-unit {
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.product-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
background: none;
|
||||
border: 1px solid var(--border-color);
|
||||
color: var(--text-secondary);
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 0.25rem;
|
||||
font-size: 0.75rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.action-btn:hover {
|
||||
border-color: var(--primary-color);
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.delete-btn {
|
||||
position: absolute;
|
||||
top: 0.75rem;
|
||||
right: 0.75rem;
|
||||
background: var(--danger-color);
|
||||
color: white;
|
||||
border: none;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.75rem;
|
||||
transition: all 0.2s;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.delete-btn:hover {
|
||||
opacity: 1;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.empty-products {
|
||||
text-align: center;
|
||||
padding: 3rem 1rem;
|
||||
background: #f8fafc;
|
||||
border: 2px dashed var(--border-color);
|
||||
border-radius: 1rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 1rem;
|
||||
color: var(--border-color);
|
||||
}
|
||||
|
||||
.empty-title {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.empty-desc {
|
||||
font-size: 0.875rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.categories-section {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.categories-tabs {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
overflow-x: auto;
|
||||
padding-bottom: 0.5rem;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.category-tab {
|
||||
flex-shrink: 0;
|
||||
padding: 0.5rem 1rem;
|
||||
background: #f1f5f9;
|
||||
color: var(--text-secondary);
|
||||
border: none;
|
||||
border-radius: 1.5rem;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.category-tab.active {
|
||||
background: var(--primary-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.category-tab:hover:not(.active) {
|
||||
background: #e2e8f0;
|
||||
}
|
||||
|
||||
.action-bar {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: var(--card-background);
|
||||
border-top: 1px solid var(--border-color);
|
||||
padding: 1rem;
|
||||
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
.action-bar-content {
|
||||
max-width: 480px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.secondary-action-btn {
|
||||
flex: 1;
|
||||
background: var(--card-background);
|
||||
color: var(--secondary-color);
|
||||
border: 2px solid var(--border-color);
|
||||
padding: 0.75rem;
|
||||
border-radius: 0.75rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.secondary-action-btn:hover {
|
||||
border-color: var(--primary-color);
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.primary-action-btn {
|
||||
flex: 2;
|
||||
background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 0.75rem;
|
||||
border-radius: 0.75rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.primary-action-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3);
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.content {
|
||||
padding: 1rem;
|
||||
padding-bottom: 100px;
|
||||
}
|
||||
|
||||
.summary-stats {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.product-content {
|
||||
gap: 0.75rem;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
}
|
||||
</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" id="headerTitle">Phòng khách</h1>
|
||||
<div class="header-actions">
|
||||
<button class="action-button" onclick="editSpace()">
|
||||
<i class="fas fa-edit"></i>
|
||||
</button>
|
||||
<button class="action-button" onclick="shareSpace()">
|
||||
<i class="fas fa-share-alt"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<div class="hero-section">
|
||||
<img src="https://images.unsplash.com/photo-1586023492125-27b2c045efd7?w=800&h=300&fit=crop"
|
||||
alt="Phòng khách"
|
||||
class="hero-image" id="heroImage">
|
||||
<div class="hero-overlay">
|
||||
<h1 class="space-title" id="spaceTitle">Phòng khách</h1>
|
||||
<p class="space-subtitle">Biệt thự chị Lan - Quận 2</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="content">
|
||||
<!-- Summary Section -->
|
||||
<div class="summary-section">
|
||||
<h3 class="summary-title">
|
||||
<i class="fas fa-chart-bar"></i>
|
||||
Tổng quan không gian
|
||||
</h3>
|
||||
<div class="summary-stats">
|
||||
<div class="stat-item">
|
||||
<div class="stat-number" id="totalProducts">24</div>
|
||||
<div class="stat-label">Sản phẩm</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-number" id="totalArea">45.2</div>
|
||||
<div class="stat-label">m² gạch</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-number" id="totalValue">85.5</div>
|
||||
<div class="stat-label">Triệu VNĐ</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Categories Filter -->
|
||||
<div class="categories-section">
|
||||
<div class="categories-tabs">
|
||||
<button class="category-tab active" onclick="filterProducts('all')">Tất cả</button>
|
||||
<button class="category-tab" onclick="filterProducts('gach-lat')">Gạch lát</button>
|
||||
<button class="category-tab" onclick="filterProducts('gach-op')">Gạch ốp</button>
|
||||
<button class="category-tab" onclick="filterProducts('phu-kien')">Phụ kiện</button>
|
||||
<button class="category-tab" onclick="filterProducts('keo-dan')">Keo dán</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Products Section -->
|
||||
<div class="products-section">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">
|
||||
<i class="fas fa-cube"></i>
|
||||
Sản phẩm đã ráp
|
||||
</h2>
|
||||
<button class="add-product-btn" onclick="addNewProduct()">
|
||||
<i class="fas fa-plus"></i>
|
||||
Thêm sản phẩm
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="products-grid" id="productsGrid">
|
||||
<!-- Sample Products -->
|
||||
<div class="product-card" data-category="gach-lat">
|
||||
<button class="delete-btn" onclick="removeProduct(this)">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
<div class="product-content">
|
||||
<img src="https://images.unsplash.com/photo-1586023492125-27b2c045efd7?w=80&h=80&fit=crop"
|
||||
alt="Gạch granite"
|
||||
class="product-image">
|
||||
<div class="product-info">
|
||||
<h3 class="product-title">Gạch granite Viglacera UB6606</h3>
|
||||
<div class="product-code">Mã SP: UB6606</div>
|
||||
<div class="product-details">
|
||||
<span class="product-quantity">32.5 m²</span>
|
||||
<span class="product-unit">60x60cm</span>
|
||||
</div>
|
||||
<div class="product-actions">
|
||||
<button class="action-btn" onclick="editQuantity(this)">
|
||||
<i class="fas fa-edit"></i> Sửa
|
||||
</button>
|
||||
<button class="action-btn" onclick="viewProduct(this)">
|
||||
<i class="fas fa-eye"></i> Xem
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="product-card" data-category="gach-op">
|
||||
<button class="delete-btn" onclick="removeProduct(this)">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
<div class="product-content">
|
||||
<img src="https://images.unsplash.com/photo-1560448204-e02f11c3d0e2?w=80&h=80&fit=crop"
|
||||
alt="Gạch ốp tường"
|
||||
class="product-image">
|
||||
<div class="product-info">
|
||||
<h3 class="product-title">Gạch ốp tường Eurotile EUR-W3012</h3>
|
||||
<div class="product-code">Mã SP: EUR-W3012</div>
|
||||
<div class="product-details">
|
||||
<span class="product-quantity">18.4 m²</span>
|
||||
<span class="product-unit">30x60cm</span>
|
||||
</div>
|
||||
<div class="product-actions">
|
||||
<button class="action-btn" onclick="editQuantity(this)">
|
||||
<i class="fas fa-edit"></i> Sửa
|
||||
</button>
|
||||
<button class="action-btn" onclick="viewProduct(this)">
|
||||
<i class="fas fa-eye"></i> Xem
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="product-card" data-category="keo-dan">
|
||||
<button class="delete-btn" onclick="removeProduct(this)">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
<div class="product-content">
|
||||
<img src="https://images.unsplash.com/photo-1545558014-8692077e9b5c?w=80&h=80&fit=crop"
|
||||
alt="Keo dán gạch"
|
||||
class="product-image">
|
||||
<div class="product-info">
|
||||
<h3 class="product-title">Keo dán gạch Sakrete Premium</h3>
|
||||
<div class="product-code">Mã SP: SAK-PR25</div>
|
||||
<div class="product-details">
|
||||
<span class="product-quantity">12 bao</span>
|
||||
<span class="product-unit">25kg/bao</span>
|
||||
</div>
|
||||
<div class="product-actions">
|
||||
<button class="action-btn" onclick="editQuantity(this)">
|
||||
<i class="fas fa-edit"></i> Sửa
|
||||
</button>
|
||||
<button class="action-btn" onclick="viewProduct(this)">
|
||||
<i class="fas fa-eye"></i> Xem
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="product-card" data-category="phu-kien">
|
||||
<button class="delete-btn" onclick="removeProduct(this)">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
<div class="product-content">
|
||||
<img src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=80&h=80&fit=crop"
|
||||
alt="Nẹp inox"
|
||||
class="product-image">
|
||||
<div class="product-info">
|
||||
<h3 class="product-title">Nẹp inox viền gạch T10</h3>
|
||||
<div class="product-code">Mã SP: NEP-T10</div>
|
||||
<div class="product-details">
|
||||
<span class="product-quantity">45 m</span>
|
||||
<span class="product-unit">10mm</span>
|
||||
</div>
|
||||
<div class="product-actions">
|
||||
<button class="action-btn" onclick="editQuantity(this)">
|
||||
<i class="fas fa-edit"></i> Sửa
|
||||
</button>
|
||||
<button class="action-btn" onclick="viewProduct(this)">
|
||||
<i class="fas fa-eye"></i> Xem
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Empty State (hidden by default) -->
|
||||
<div class="empty-products" id="emptyProducts" style="display: none;">
|
||||
<div class="empty-icon">
|
||||
<i class="fas fa-cube"></i>
|
||||
</div>
|
||||
<h3 class="empty-title">Chưa có sản phẩm nào</h3>
|
||||
<p class="empty-desc">
|
||||
Thêm sản phẩm đầu tiên để bắt đầu thiết kế không gian này
|
||||
</p>
|
||||
<button class="add-product-btn" onclick="addNewProduct()">
|
||||
<i class="fas fa-plus"></i>
|
||||
Thêm sản phẩm đầu tiên
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Action Bar -->
|
||||
<div class="action-bar">
|
||||
<div class="action-bar-content">
|
||||
<button class="secondary-action-btn" onclick="saveAsDraft()">
|
||||
<i class="fas fa-save"></i>
|
||||
Lưu nháp
|
||||
</button>
|
||||
<button class="primary-action-btn" onclick="createQuote()">
|
||||
<i class="fas fa-file-alt"></i>
|
||||
Tạo báo giá từ không gian này
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function goBack() {
|
||||
window.history.back();
|
||||
}
|
||||
|
||||
function editSpace() {
|
||||
alert('Tính năng chỉnh sửa thông tin không gian đang được phát triển');
|
||||
}
|
||||
|
||||
function shareSpace() {
|
||||
if (navigator.share) {
|
||||
navigator.share({
|
||||
title: 'Phòng khách - Biệt thự chị Lan',
|
||||
text: 'Xem thiết kế không gian này',
|
||||
url: window.location.href
|
||||
}).catch(console.error);
|
||||
} else {
|
||||
navigator.clipboard.writeText(window.location.href).then(() => {
|
||||
showToast('Đã sao chép link chia sẻ!');
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function addNewProduct() {
|
||||
// Navigate to products page in selection mode
|
||||
const currentSpace = new URLSearchParams(window.location.search).get('space') || 'phong-khach';
|
||||
const nhaMau = new URLSearchParams(window.location.search).get('nha_mau') || 'villa-chi-lan';
|
||||
|
||||
// In real app, would navigate to products with return context
|
||||
alert('Sẽ chuyển đến trang sản phẩm để chọn thêm sản phẩm cho không gian này');
|
||||
// window.location.href = `products.html?mode=select&return_space=${currentSpace}&nha_mau=${nhaMau}`;
|
||||
}
|
||||
|
||||
function removeProduct(button) {
|
||||
const card = button.closest('.product-card');
|
||||
const productTitle = card.querySelector('.product-title').textContent;
|
||||
|
||||
if (confirm(`Bạn có chắc chắn muốn xóa "${productTitle}" khỏi không gian này?`)) {
|
||||
card.style.animation = 'slideOut 0.3s ease-out';
|
||||
setTimeout(() => {
|
||||
card.remove();
|
||||
updateSummary();
|
||||
checkEmptyState();
|
||||
}, 300);
|
||||
|
||||
showToast('Đã xóa sản phẩm khỏi không gian');
|
||||
}
|
||||
}
|
||||
|
||||
function editQuantity(button) {
|
||||
const card = button.closest('.product-card');
|
||||
const quantityElement = card.querySelector('.product-quantity');
|
||||
const currentQuantity = quantityElement.textContent;
|
||||
|
||||
const newQuantity = prompt(`Nhập số lượng mới:`, currentQuantity);
|
||||
if (newQuantity && newQuantity !== currentQuantity) {
|
||||
quantityElement.textContent = newQuantity;
|
||||
updateSummary();
|
||||
showToast('Đã cập nhật số lượng sản phẩm');
|
||||
}
|
||||
}
|
||||
|
||||
function viewProduct(button) {
|
||||
const card = button.closest('.product-card');
|
||||
const productCode = card.querySelector('.product-code').textContent.replace('Mã SP: ', '');
|
||||
|
||||
// Navigate to product detail
|
||||
alert(`Xem chi tiết sản phẩm: ${productCode}`);
|
||||
// In real app: window.location.href = `product-detail.html?code=${productCode}`;
|
||||
}
|
||||
|
||||
function filterProducts(category) {
|
||||
// Update active tab
|
||||
document.querySelectorAll('.category-tab').forEach(tab => {
|
||||
tab.classList.remove('active');
|
||||
});
|
||||
event.target.classList.add('active');
|
||||
|
||||
// Filter products
|
||||
const products = document.querySelectorAll('.product-card');
|
||||
let visibleCount = 0;
|
||||
|
||||
products.forEach(product => {
|
||||
const productCategory = product.getAttribute('data-category');
|
||||
if (category === 'all' || productCategory === category) {
|
||||
product.style.display = 'block';
|
||||
visibleCount++;
|
||||
} else {
|
||||
product.style.display = 'none';
|
||||
}
|
||||
});
|
||||
|
||||
// Show empty state if no products match filter
|
||||
const emptyState = document.getElementById('emptyProducts');
|
||||
if (visibleCount === 0) {
|
||||
emptyState.style.display = 'block';
|
||||
emptyState.innerHTML = `
|
||||
<div class="empty-icon">
|
||||
<i class="fas fa-search"></i>
|
||||
</div>
|
||||
<h3 class="empty-title">Không có sản phẩm trong danh mục này</h3>
|
||||
<p class="empty-desc">
|
||||
Thêm sản phẩm ${getCategoryName(category)} để hiển thị tại đây
|
||||
</p>
|
||||
<button class="add-product-btn" onclick="addNewProduct()">
|
||||
<i class="fas fa-plus"></i>
|
||||
Thêm sản phẩm
|
||||
</button>
|
||||
`;
|
||||
} else {
|
||||
emptyState.style.display = 'none';
|
||||
}
|
||||
|
||||
showToast(`Đã lọc theo: ${getCategoryName(category)}`);
|
||||
}
|
||||
|
||||
function getCategoryName(category) {
|
||||
const names = {
|
||||
'all': 'Tất cả',
|
||||
'gach-lat': 'Gạch lát',
|
||||
'gach-op': 'Gạch ốp',
|
||||
'phu-kien': 'Phụ kiện',
|
||||
'keo-dan': 'Keo dán'
|
||||
};
|
||||
return names[category] || 'Tất cả';
|
||||
}
|
||||
|
||||
function updateSummary() {
|
||||
// Demo function to update summary stats
|
||||
const products = document.querySelectorAll('.product-card:not([style*="display: none"])');
|
||||
document.getElementById('totalProducts').textContent = products.length;
|
||||
|
||||
// In real app, would calculate actual area and value from product data
|
||||
const area = (products.length * 2.1).toFixed(1);
|
||||
const value = (products.length * 3.5).toFixed(1);
|
||||
|
||||
document.getElementById('totalArea').textContent = area;
|
||||
document.getElementById('totalValue').textContent = value;
|
||||
}
|
||||
|
||||
function checkEmptyState() {
|
||||
const products = document.querySelectorAll('.product-card');
|
||||
const emptyState = document.getElementById('emptyProducts');
|
||||
|
||||
if (products.length === 0) {
|
||||
emptyState.style.display = 'block';
|
||||
} else {
|
||||
emptyState.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
function saveAsDraft() {
|
||||
showToast('Đã lưu không gian vào nháp');
|
||||
}
|
||||
|
||||
function createQuote() {
|
||||
const spaceTitle = document.getElementById('spaceTitle').textContent;
|
||||
alert(`Tạo báo giá từ "${spaceTitle}" với ${document.getElementById('totalProducts').textContent} sản phẩm`);
|
||||
// In real app: window.location.href = 'quote-create.html?space=' + encodeURIComponent(spaceTitle);
|
||||
}
|
||||
|
||||
function showToast(message) {
|
||||
const toast = document.createElement('div');
|
||||
toast.className = 'fixed top-20 left-1/2 transform -translate-x-1/2 bg-green-500 text-white px-4 py-2 rounded-lg z-50 transition-all duration-300';
|
||||
toast.textContent = message;
|
||||
document.body.appendChild(toast);
|
||||
|
||||
setTimeout(() => {
|
||||
toast.style.opacity = '0';
|
||||
setTimeout(() => {
|
||||
document.body.removeChild(toast);
|
||||
}, 300);
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
// Initialize page based on URL parameters
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const spaceId = urlParams.get('space') || 'phong-khach';
|
||||
|
||||
// Update space info based on ID (demo)
|
||||
const spaceInfo = {
|
||||
'phong-khach': {
|
||||
title: 'Phòng khách',
|
||||
image: 'https://images.unsplash.com/photo-1586023492125-27b2c045efd7?w=800&h=300&fit=crop'
|
||||
},
|
||||
'phong-bep': {
|
||||
title: 'Phòng bếp',
|
||||
image: 'https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?w=800&h=300&fit=crop'
|
||||
},
|
||||
'phong-ngu-master': {
|
||||
title: 'Phòng ngủ master',
|
||||
image: 'https://images.unsplash.com/photo-1560448204-61dc36dc98c8?w=800&h=300&fit=crop'
|
||||
},
|
||||
'phong-tam-master': {
|
||||
title: 'Phòng tắm master',
|
||||
image: 'https://images.unsplash.com/photo-1503387762-592deb58ef4e?w=800&h=300&fit=crop'
|
||||
}
|
||||
};
|
||||
|
||||
const info = spaceInfo[spaceId] || spaceInfo['phong-khach'];
|
||||
document.getElementById('headerTitle').textContent = info.title;
|
||||
document.getElementById('spaceTitle').textContent = info.title;
|
||||
document.getElementById('heroImage').src = info.image;
|
||||
|
||||
// Add CSS for animations
|
||||
const style = document.createElement('style');
|
||||
style.textContent = `
|
||||
@keyframes slideOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
|
||||
// Animate products on load
|
||||
const products = document.querySelectorAll('.product-card');
|
||||
products.forEach((product, index) => {
|
||||
product.style.opacity = '0';
|
||||
product.style.transform = 'translateY(20px)';
|
||||
product.style.transition = 'all 0.5s ease';
|
||||
|
||||
setTimeout(() => {
|
||||
product.style.opacity = '1';
|
||||
product.style.transform = 'translateY(0)';
|
||||
}, index * 100);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
75
html/login.html
Normal file
75
html/login.html
Normal file
@@ -0,0 +1,75 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="vi">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Đăng nhập - 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">
|
||||
<!-- Logo Section -->
|
||||
<div class="text-center mt-4 mb-4">
|
||||
<div style="display: inline-block; background: linear-gradient(135deg, #005B9A 0%, #38B6FF 100%); padding: 20px; border-radius: 20px;">
|
||||
<h1 style="color: white; font-size: 32px; font-weight: 700; margin: 0;">EUROTILE</h1>
|
||||
<p style="color: white; font-size: 12px; margin: 0;">Worker App</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Welcome Message -->
|
||||
<div class="text-center mb-4">
|
||||
<h1>Xin chào!</h1>
|
||||
<p class="text-muted">Đăng nhập để tiếp tục</p>
|
||||
</div>
|
||||
|
||||
<!-- Login Form -->
|
||||
<form action="otp.html" class="card">
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="phone">Số điện thoại</label>
|
||||
<div class="form-input-icon">
|
||||
<i class="fas fa-phone icon"></i>
|
||||
<input type="tel" id="phone" class="form-input" placeholder="Nhập số điện thoại" required>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-primary btn-block">
|
||||
Nhận mã OTP
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<!-- Register Link -->
|
||||
<div class="text-center mt-3">
|
||||
<p class="text-small text-muted">
|
||||
Chưa có tài khoản?
|
||||
<a href="register.html" class="text-primary" style="text-decoration: none; font-weight: 500;">
|
||||
Đăng ký ngay
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Brand Selection -->
|
||||
<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">
|
||||
<i class="fas fa-building"></i> EuroTile
|
||||
</button>
|
||||
<button class="btn btn-secondary">
|
||||
<i class="fas fa-gem"></i> Vasta Stone
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Support -->
|
||||
<div class="text-center mt-4">
|
||||
<a href="#" class="text-small text-primary" style="text-decoration: none;">
|
||||
<i class="fas fa-headset"></i> Hỗ trợ khách hàng
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
126
html/loyalty-rewards.html
Normal file
126
html/loyalty-rewards.html
Normal file
@@ -0,0 +1,126 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="vi">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Đổi quà - 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="loyalty.html" class="back-button">
|
||||
<i class="fas fa-arrow-left"></i>
|
||||
</a>
|
||||
<h1 class="header-title">Đổi quà tặng</h1>
|
||||
<div style="width: 32px;"></div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<!-- Points Balance -->
|
||||
<div class="card" style="background: linear-gradient(135deg, #005B9A 0%, #38B6FF 100%); color: white;">
|
||||
<div class="text-center">
|
||||
<p style="color: rgba(255,255,255,0.9); margin-bottom: 8px;">Điểm khả dụng</p>
|
||||
<p style="font-size: 36px; font-weight: 700; color: white; margin: 0;">9,750</p>
|
||||
<p style="color: rgba(255,255,255,0.8); font-size: 12px; margin-top: 8px;">
|
||||
<i class="fas fa-info-circle"></i> Điểm sẽ hết hạn: 1,200 điểm vào 31/12/2023
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Filter -->
|
||||
<div class="filter-container">
|
||||
<button class="filter-pill active">Tất cả</button>
|
||||
<button class="filter-pill">Voucher</button>
|
||||
<button class="filter-pill">Sản phẩm</button>
|
||||
<button class="filter-pill">Dịch vụ</button>
|
||||
<button class="filter-pill">Ưu đãi đặc biệt</button>
|
||||
</div>
|
||||
|
||||
<!-- Rewards Grid -->
|
||||
<div class="product-grid">
|
||||
<!-- Reward 1 -->
|
||||
<div class="product-card">
|
||||
<img src="https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?w=300&h=200&fit=crop" alt="Voucher" class="product-image" style="height: 120px;">
|
||||
<div class="product-info">
|
||||
<div class="product-name">Voucher 500.000đ</div>
|
||||
<div class="text-small text-muted mb-2">Áp dụng cho đơn từ 5 triệu</div>
|
||||
<div class="text-primary text-bold mb-2">2,500 điểm</div>
|
||||
<button class="btn btn-primary btn-sm btn-block" onclick="window.location.href='redeem-confirm.html'">
|
||||
<i class="fas fa-gift"></i> Đổi quà
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Reward 2 -->
|
||||
<div class="product-card">
|
||||
<img src="https://images.unsplash.com/photo-1607082348824-0a96f2a4b9da?w=300&h=200&fit=crop" alt="Gift" class="product-image" style="height: 120px;">
|
||||
<div class="product-info">
|
||||
<div class="product-name">Bộ keo chà ron cao cấp</div>
|
||||
<div class="text-small text-muted mb-2">Weber.color comfort</div>
|
||||
<div class="text-primary text-bold mb-2">3,000 điểm</div>
|
||||
<button class="btn btn-primary btn-sm btn-block">
|
||||
<i class="fas fa-gift"></i> Đổi quà
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Reward 3 -->
|
||||
<div class="product-card">
|
||||
<img src="https://images.unsplash.com/photo-1540932239986-30128078f3c5?w=300&h=200&fit=crop" alt="Service" class="product-image" style="height: 120px;">
|
||||
<div class="product-info">
|
||||
<div class="product-name">Tư vấn thiết kế miễn phí</div>
|
||||
<div class="text-small text-muted mb-2">1 buổi tư vấn tại nhà</div>
|
||||
<div class="text-primary text-bold mb-2">5,000 điểm</div>
|
||||
<button class="btn btn-primary btn-sm btn-block">
|
||||
<i class="fas fa-gift"></i> Đổi quà
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Reward 4 -->
|
||||
<div class="product-card">
|
||||
<img src="https://images.unsplash.com/photo-1615874694520-474822394e73?w=300&h=200&fit=crop" alt="Product" class="product-image" style="height: 120px;">
|
||||
<div class="product-info">
|
||||
<div class="product-name">Gạch trang trí Premium</div>
|
||||
<div class="text-small text-muted mb-2">Bộ 10m² gạch cao cấp</div>
|
||||
<div class="text-primary text-bold mb-2">8,000 điểm</div>
|
||||
<button class="btn btn-primary btn-sm btn-block">
|
||||
<i class="fas fa-gift"></i> Đổi quà
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Reward 5 -->
|
||||
<div class="product-card">
|
||||
<img src="https://images.unsplash.com/photo-1523381210434-271e8be1f52b?w=300&h=200&fit=crop" alt="Merchandise" class="product-image" style="height: 120px;">
|
||||
<div class="product-info">
|
||||
<div class="product-name">Áo thun EuroTile</div>
|
||||
<div class="text-small text-muted mb-2">Limited Edition 2023</div>
|
||||
<div class="text-primary text-bold mb-2">1,500 điểm</div>
|
||||
<button class="btn btn-primary btn-sm btn-block">
|
||||
<i class="fas fa-gift"></i> Đổi quà
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Reward 6 -->
|
||||
<div class="product-card">
|
||||
<img src="https://images.unsplash.com/photo-1556742400-b5b7a512f3d7?w=300&h=200&fit=crop" alt="VIP" class="product-image" style="height: 120px;">
|
||||
<div class="product-info">
|
||||
<div class="product-name">Nâng hạng thẻ Platinum</div>
|
||||
<div class="text-small text-muted mb-2">Ưu đãi cao cấp 1 năm</div>
|
||||
<div class="text-primary text-bold mb-2">15,000 điểm</div>
|
||||
<button class="btn btn-secondary btn-sm btn-block" disabled>
|
||||
Không đủ điểm
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
166
html/loyalty.html
Normal file
166
html/loyalty.html
Normal file
@@ -0,0 +1,166 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="vi">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Hội viê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">
|
||||
<h1 class="header-title">Hội viên thân thiết</h1>
|
||||
</div>
|
||||
<div class="container">
|
||||
<!-- Member Card -->
|
||||
<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>
|
||||
<p style="color: rgba(255,255,255,0.9); font-size: 11px;">ARCHITECT MEMBERSHIP</p>
|
||||
</div>
|
||||
<div style="text-align: right;">
|
||||
<p style="color: rgba(255,255,255,0.8); font-size: 11px;">Valid through</p>
|
||||
<p style="color: white; font-size: 14px; font-weight: 500;">31/12/2021</p>
|
||||
</div>
|
||||
</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>
|
||||
</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;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Progress to Next Level -->
|
||||
<div class="card">
|
||||
<h3 class="card-title">Tiến trình lên hạng</h3>
|
||||
<div class="d-flex justify-between mb-2">
|
||||
<span class="text-small">Hạng hiện tại: <strong>DIAMOND</strong></span>
|
||||
<span class="text-small">Hạng kế tiếp: <strong>PLATINUM</strong></span>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar" style="width: 65%;"></div>
|
||||
</div>
|
||||
<p class="text-small text-center text-muted mt-2">
|
||||
Còn <strong>2,250 điểm</strong> nữa để lên hạng Platinum
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Loyalty Features -->
|
||||
<div class="mb-3">
|
||||
<a href="loyalty-rewards.html" class="list-item">
|
||||
<div class="list-item-icon">
|
||||
<i class="fas fa-gift"></i>
|
||||
</div>
|
||||
<div class="list-item-content">
|
||||
<div class="list-item-title">Đổi quà tặng</div>
|
||||
<div class="list-item-subtitle">Sử dụng điểm để đổi quà hấp dẫn</div>
|
||||
</div>
|
||||
<i class="fas fa-chevron-right list-item-arrow"></i>
|
||||
</a>
|
||||
|
||||
<a href="points-record.html" class="list-item">
|
||||
<div class="list-item-icon">
|
||||
<i class="fas fa-plus-circle"></i>
|
||||
</div>
|
||||
<div class="list-item-content">
|
||||
<div class="list-item-title">Ghi nhận điểm</div>
|
||||
<div class="list-item-subtitle">Gửi hóa đơn để nhận điểm thưởng</div>
|
||||
</div>
|
||||
<i class="fas fa-chevron-right list-item-arrow"></i>
|
||||
</a>
|
||||
|
||||
<a href="points-history.html" class="list-item">
|
||||
<div class="list-item-icon">
|
||||
<i class="fas fa-history"></i>
|
||||
</div>
|
||||
<div class="list-item-content">
|
||||
<div class="list-item-title">Lịch sử điểm</div>
|
||||
<div class="list-item-subtitle">Xem chi tiết cộng/trừ điểm</div>
|
||||
</div>
|
||||
<i class="fas fa-chevron-right list-item-arrow"></i>
|
||||
</a>
|
||||
|
||||
<a href="referral.html" class="list-item">
|
||||
<div class="list-item-icon">
|
||||
<i class="fas fa-user-plus"></i>
|
||||
</div>
|
||||
<div class="list-item-content">
|
||||
<div class="list-item-title">Giới thiệu bạn bè</div>
|
||||
<div class="list-item-subtitle">Nhận thưởng khi giới thiệu thành công</div>
|
||||
</div>
|
||||
<i class="fas fa-chevron-right list-item-arrow"></i>
|
||||
</a>
|
||||
|
||||
<a href="my-gifts.html" class="list-item">
|
||||
<div class="list-item-icon">
|
||||
<i class="fas fa-box-open"></i>
|
||||
</div>
|
||||
<div class="list-item-content">
|
||||
<div class="list-item-title">Quà của tôi</div>
|
||||
<div class="list-item-subtitle">Xem voucher và quà tặng đã đổi</div>
|
||||
</div>
|
||||
<i class="fas fa-chevron-right list-item-arrow"></i>
|
||||
</a>
|
||||
|
||||
<a href="membership-benefits.html" class="list-item">
|
||||
<div class="list-item-icon">
|
||||
<i class="fas fa-crown"></i>
|
||||
</div>
|
||||
<div class="list-item-content">
|
||||
<div class="list-item-title">Quyền lợi hội viên</div>
|
||||
<div class="list-item-subtitle">Xem các ưu đãi dành cho hạng của bạn</div>
|
||||
</div>
|
||||
<i class="fas fa-chevron-right list-item-arrow"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Current Benefits -->
|
||||
<div class="card">
|
||||
<h3 class="card-title">Quyền lợi hạng Diamond</h3>
|
||||
<ul style="padding-left: 20px; margin: 0;">
|
||||
<li class="text-small mb-2">Chiết khấu <strong>15%</strong> cho tất cả sản phẩm</li>
|
||||
<li class="text-small mb-2">Giao hàng miễn phí cho đơn từ <strong>5 triệu</strong></li>
|
||||
<li class="text-small mb-2">Ưu tiên xử lý đơn hàng</li>
|
||||
<li class="text-small mb-2">Tặng <strong>500 điểm</strong> vào ngày sinh nhật</li>
|
||||
<li class="text-small mb-2">Tư vấn thiết kế miễn phí</li>
|
||||
<li class="text-small">Mời tham gia sự kiện VIP độc quyền</li>
|
||||
</ul>
|
||||
</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 active">
|
||||
<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" 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>
|
||||
</body>
|
||||
</html>
|
||||
877
html/membership-benefits.html
Normal file
877
html/membership-benefits.html
Normal file
@@ -0,0 +1,877 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="vi">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Quyền lợi hội viên - Worker App</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<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-dark: #1d4ed8;
|
||||
--secondary-color: #64748b;
|
||||
--success-color: #10b981;
|
||||
--warning-color: #f59e0b;
|
||||
--danger-color: #ef4444;
|
||||
--background-color: #f8fafc;
|
||||
--card-background: #ffffff;
|
||||
--text-primary: #1e293b;
|
||||
--text-secondary: #64748b;
|
||||
--border-color: #e2e8f0;
|
||||
|
||||
/* Tier Colors */
|
||||
--bronze-color: #cd7f32;
|
||||
--silver-color: #c0c0c0;
|
||||
--gold-color: #ffd700;
|
||||
--diamond-color: #b9f2ff;
|
||||
--platinum-color: #e5e4e2;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
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 {
|
||||
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);
|
||||
}
|
||||
|
||||
.header-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 1rem;
|
||||
max-width: 480px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--primary-color);
|
||||
font-size: 1.25rem;
|
||||
cursor: pointer;
|
||||
padding: 0.5rem;
|
||||
border-radius: 0.5rem;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.back-button:hover {
|
||||
background-color: #f1f5f9;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 480px;
|
||||
margin: 0 auto;
|
||||
background: var(--card-background);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.current-tier-card {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
border-radius: 1rem;
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
text-align: center;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.current-tier-icon {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 0.5rem;
|
||||
color: #ffd700;
|
||||
}
|
||||
|
||||
.current-tier-name {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.current-tier-points {
|
||||
font-size: 1rem;
|
||||
opacity: 0.9;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.current-tier-description {
|
||||
font-size: 0.875rem;
|
||||
opacity: 0.8;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.tier-tabs {
|
||||
display: flex;
|
||||
background: #f1f5f9;
|
||||
border-radius: 0.75rem;
|
||||
padding: 0.25rem;
|
||||
margin-bottom: 1.5rem;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.tier-tab {
|
||||
flex: 1;
|
||||
min-width: 80px;
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0.75rem 0.5rem;
|
||||
border-radius: 0.5rem;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.tier-tab.active {
|
||||
background: var(--card-background);
|
||||
color: var(--text-primary);
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.tier-tab:not(.active) {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.tier-content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tier-content.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.tier-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
background: var(--card-background);
|
||||
border: 2px solid var(--border-color);
|
||||
border-radius: 0.75rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.tier-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.5rem;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.tier-icon.bronze {
|
||||
background: linear-gradient(135deg, #cd7f32, #8b4513);
|
||||
}
|
||||
|
||||
.tier-icon.silver {
|
||||
background: linear-gradient(135deg, #c0c0c0, #808080);
|
||||
}
|
||||
|
||||
.tier-icon.gold {
|
||||
background: linear-gradient(135deg, #ffd700, #daa520);
|
||||
}
|
||||
|
||||
.tier-icon.diamond {
|
||||
background: linear-gradient(135deg, #b9f2ff, #00bfff);
|
||||
}
|
||||
|
||||
.tier-icon.platinum {
|
||||
background: linear-gradient(135deg, #e5e4e2, #a8a8a8);
|
||||
}
|
||||
|
||||
.tier-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.tier-name {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.tier-requirement {
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.benefits-section {
|
||||
background: var(--card-background);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 0.75rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.benefits-header {
|
||||
background: #f8fafc;
|
||||
padding: 1rem;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.benefits-title {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.benefits-list {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.benefit-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
border-bottom: 1px solid #f1f5f9;
|
||||
}
|
||||
|
||||
.benefit-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.benefit-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.benefit-icon.discount {
|
||||
background: #fee2e2;
|
||||
color: var(--danger-color);
|
||||
}
|
||||
|
||||
.benefit-icon.shipping {
|
||||
background: #dbeafe;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.benefit-icon.priority {
|
||||
background: #fef3c7;
|
||||
color: var(--warning-color);
|
||||
}
|
||||
|
||||
.benefit-icon.points {
|
||||
background: #dcfce7;
|
||||
color: var(--success-color);
|
||||
}
|
||||
|
||||
.benefit-icon.support {
|
||||
background: #f3e8ff;
|
||||
color: #8b5cf6;
|
||||
}
|
||||
|
||||
.benefit-icon.event {
|
||||
background: #fce7f3;
|
||||
color: #ec4899;
|
||||
}
|
||||
|
||||
.benefit-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.benefit-title {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.benefit-description {
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.benefit-value {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.progress-section {
|
||||
background: #f0f9ff;
|
||||
border: 1px solid #0ea5e9;
|
||||
border-radius: 0.75rem;
|
||||
padding: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.progress-title {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: #0369a1;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.progress-bar-container {
|
||||
background: #e0f2fe;
|
||||
border-radius: 1rem;
|
||||
height: 8px;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
background: linear-gradient(135deg, #0ea5e9, #0284c7);
|
||||
height: 100%;
|
||||
border-radius: 1rem;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.progress-text {
|
||||
font-size: 0.75rem;
|
||||
color: #0369a1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cta-section {
|
||||
background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
|
||||
border: 1px solid var(--primary-color);
|
||||
border-radius: 0.75rem;
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.cta-title {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: var(--primary-color);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.cta-description {
|
||||
font-size: 0.875rem;
|
||||
color: #1e40af;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.cta-button {
|
||||
background: var(--primary-color);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 0.75rem 1.5rem;
|
||||
border-radius: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.cta-button:hover {
|
||||
background: var(--primary-dark);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.content {
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.tier-tabs {
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.tier-tab {
|
||||
font-size: 0.625rem;
|
||||
padding: 0.5rem 0.25rem;
|
||||
}
|
||||
}
|
||||
</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">Quyền lợi hội viên</h1>
|
||||
<div style="width: 2.5rem;"></div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="content">
|
||||
<!-- Current Tier Card -->
|
||||
<div class="current-tier-card">
|
||||
<div class="current-tier-icon">
|
||||
<i class="fas fa-gem"></i>
|
||||
</div>
|
||||
<div class="current-tier-name">DIAMOND</div>
|
||||
<div class="current-tier-points">1,250 điểm tích lũy</div>
|
||||
<div class="current-tier-description">
|
||||
Bạn đang ở hạng Diamond với nhiều ưu đãi đặc biệt.
|
||||
Cần thêm 750 điểm để lên hạng Platinum.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Progress to Next Tier -->
|
||||
<div class="progress-section">
|
||||
<div class="progress-title">Tiến độ lên hạng Platinum</div>
|
||||
<div class="progress-bar-container">
|
||||
<div class="progress-bar" style="width: 62.5%;"></div>
|
||||
</div>
|
||||
<div class="progress-text">1,250 / 2,000 điểm (62.5%)</div>
|
||||
</div>
|
||||
|
||||
<!-- Tier Tabs -->
|
||||
<div class="tier-tabs">
|
||||
<button class="tier-tab" onclick="showTier('bronze')">Bronze</button>
|
||||
<button class="tier-tab" onclick="showTier('silver')">Silver</button>
|
||||
<button class="tier-tab" onclick="showTier('gold')">Gold</button>
|
||||
<button class="tier-tab active" onclick="showTier('diamond')">Diamond</button>
|
||||
<button class="tier-tab" onclick="showTier('platinum')">Platinum</button>
|
||||
</div>
|
||||
|
||||
<!-- Bronze Tier -->
|
||||
<div class="tier-content" id="bronze">
|
||||
<div class="tier-header">
|
||||
<div class="tier-icon bronze">
|
||||
<i class="fas fa-medal"></i>
|
||||
</div>
|
||||
<div class="tier-info">
|
||||
<div class="tier-name">BRONZE</div>
|
||||
<div class="tier-requirement">0 - 199 điểm</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="benefits-section">
|
||||
<div class="benefits-header">
|
||||
<div class="benefits-title">
|
||||
<i class="fas fa-star"></i>
|
||||
Quyền lợi hạng Bronze
|
||||
</div>
|
||||
</div>
|
||||
<div class="benefits-list">
|
||||
<div class="benefit-item">
|
||||
<div class="benefit-icon discount">
|
||||
<i class="fas fa-percentage"></i>
|
||||
</div>
|
||||
<div class="benefit-content">
|
||||
<div class="benefit-title">Chiết khấu cơ bản</div>
|
||||
<div class="benefit-description">Giảm giá trên tất cả sản phẩm</div>
|
||||
</div>
|
||||
<div class="benefit-value">5%</div>
|
||||
</div>
|
||||
<div class="benefit-item">
|
||||
<div class="benefit-icon points">
|
||||
<i class="fas fa-coins"></i>
|
||||
</div>
|
||||
<div class="benefit-content">
|
||||
<div class="benefit-title">Tích điểm</div>
|
||||
<div class="benefit-description">Nhận điểm cho mỗi giao dịch</div>
|
||||
</div>
|
||||
<div class="benefit-value">1 điểm/100k</div>
|
||||
</div>
|
||||
<div class="benefit-item">
|
||||
<div class="benefit-icon support">
|
||||
<i class="fas fa-headset"></i>
|
||||
</div>
|
||||
<div class="benefit-content">
|
||||
<div class="benefit-title">Hỗ trợ khách hàng</div>
|
||||
<div class="benefit-description">Hỗ trợ cơ bản qua hotline</div>
|
||||
</div>
|
||||
<div class="benefit-value">8AM-6PM</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Silver Tier -->
|
||||
<div class="tier-content" id="silver">
|
||||
<div class="tier-header">
|
||||
<div class="tier-icon silver">
|
||||
<i class="fas fa-medal"></i>
|
||||
</div>
|
||||
<div class="tier-info">
|
||||
<div class="tier-name">SILVER</div>
|
||||
<div class="tier-requirement">200 - 499 điểm</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="benefits-section">
|
||||
<div class="benefits-header">
|
||||
<div class="benefits-title">
|
||||
<i class="fas fa-star"></i>
|
||||
Quyền lợi hạng Silver
|
||||
</div>
|
||||
</div>
|
||||
<div class="benefits-list">
|
||||
<div class="benefit-item">
|
||||
<div class="benefit-icon discount">
|
||||
<i class="fas fa-percentage"></i>
|
||||
</div>
|
||||
<div class="benefit-content">
|
||||
<div class="benefit-title">Chiết khấu nâng cao</div>
|
||||
<div class="benefit-description">Giảm giá tốt hơn cho tất cả sản phẩm</div>
|
||||
</div>
|
||||
<div class="benefit-value">8%</div>
|
||||
</div>
|
||||
<div class="benefit-item">
|
||||
<div class="benefit-icon shipping">
|
||||
<i class="fas fa-shipping-fast"></i>
|
||||
</div>
|
||||
<div class="benefit-content">
|
||||
<div class="benefit-title">Miễn phí vận chuyển</div>
|
||||
<div class="benefit-description">Cho đơn hàng từ mức nhất định</div>
|
||||
</div>
|
||||
<div class="benefit-value">Từ 10 triệu</div>
|
||||
</div>
|
||||
<div class="benefit-item">
|
||||
<div class="benefit-icon points">
|
||||
<i class="fas fa-gift"></i>
|
||||
</div>
|
||||
<div class="benefit-content">
|
||||
<div class="benefit-title">Quà sinh nhật</div>
|
||||
<div class="benefit-description">Điểm thưởng đặc biệt</div>
|
||||
</div>
|
||||
<div class="benefit-value">200 điểm</div>
|
||||
</div>
|
||||
<div class="benefit-item">
|
||||
<div class="benefit-icon support">
|
||||
<i class="fas fa-headset"></i>
|
||||
</div>
|
||||
<div class="benefit-content">
|
||||
<div class="benefit-title">Hỗ trợ ưu tiên</div>
|
||||
<div class="benefit-description">Hỗ trợ nhanh chóng hơn</div>
|
||||
</div>
|
||||
<div class="benefit-value">7AM-7PM</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Gold Tier -->
|
||||
<div class="tier-content" id="gold">
|
||||
<div class="tier-header">
|
||||
<div class="tier-icon gold">
|
||||
<i class="fas fa-crown"></i>
|
||||
</div>
|
||||
<div class="tier-info">
|
||||
<div class="tier-name">GOLD</div>
|
||||
<div class="tier-requirement">500 - 999 điểm</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="benefits-section">
|
||||
<div class="benefits-header">
|
||||
<div class="benefits-title">
|
||||
<i class="fas fa-star"></i>
|
||||
Quyền lợi hạng Gold
|
||||
</div>
|
||||
</div>
|
||||
<div class="benefits-list">
|
||||
<div class="benefit-item">
|
||||
<div class="benefit-icon discount">
|
||||
<i class="fas fa-percentage"></i>
|
||||
</div>
|
||||
<div class="benefit-content">
|
||||
<div class="benefit-title">Chiết khấu cao</div>
|
||||
<div class="benefit-description">Mức giảm giá đáng kể</div>
|
||||
</div>
|
||||
<div class="benefit-value">12%</div>
|
||||
</div>
|
||||
<div class="benefit-item">
|
||||
<div class="benefit-icon shipping">
|
||||
<i class="fas fa-shipping-fast"></i>
|
||||
</div>
|
||||
<div class="benefit-content">
|
||||
<div class="benefit-title">Miễn phí vận chuyển</div>
|
||||
<div class="benefit-description">Cho đơn hàng từ mức thấp hơn</div>
|
||||
</div>
|
||||
<div class="benefit-value">Từ 7 triệu</div>
|
||||
</div>
|
||||
<div class="benefit-item">
|
||||
<div class="benefit-icon priority">
|
||||
<i class="fas fa-fast-forward"></i>
|
||||
</div>
|
||||
<div class="benefit-content">
|
||||
<div class="benefit-title">Ưu tiên xử lý</div>
|
||||
<div class="benefit-description">Đơn hàng được xử lý ưu tiên</div>
|
||||
</div>
|
||||
<div class="benefit-value">Có</div>
|
||||
</div>
|
||||
<div class="benefit-item">
|
||||
<div class="benefit-icon points">
|
||||
<i class="fas fa-gift"></i>
|
||||
</div>
|
||||
<div class="benefit-content">
|
||||
<div class="benefit-title">Quà sinh nhật</div>
|
||||
<div class="benefit-description">Điểm thưởng sinh nhật</div>
|
||||
</div>
|
||||
<div class="benefit-value">350 điểm</div>
|
||||
</div>
|
||||
<div class="benefit-item">
|
||||
<div class="benefit-icon support">
|
||||
<i class="fas fa-user-tie"></i>
|
||||
</div>
|
||||
<div class="benefit-content">
|
||||
<div class="benefit-title">Tư vấn cơ bản</div>
|
||||
<div class="benefit-description">Tư vấn sản phẩm miễn phí</div>
|
||||
</div>
|
||||
<div class="benefit-value">Có</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Diamond Tier -->
|
||||
<div class="tier-content active" id="diamond">
|
||||
<div class="tier-header">
|
||||
<div class="tier-icon diamond">
|
||||
<i class="fas fa-gem"></i>
|
||||
</div>
|
||||
<div class="tier-info">
|
||||
<div class="tier-name">DIAMOND</div>
|
||||
<div class="tier-requirement">1,000 - 1,999 điểm</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="benefits-section">
|
||||
<div class="benefits-header">
|
||||
<div class="benefits-title">
|
||||
<i class="fas fa-star"></i>
|
||||
Quyền lợi hạng Diamond (Hạng hiện tại)
|
||||
</div>
|
||||
</div>
|
||||
<div class="benefits-list">
|
||||
<div class="benefit-item">
|
||||
<div class="benefit-icon discount">
|
||||
<i class="fas fa-percentage"></i>
|
||||
</div>
|
||||
<div class="benefit-content">
|
||||
<div class="benefit-title">Chiết khấu cao cấp</div>
|
||||
<div class="benefit-description">Mức giảm giá tuyệt vời</div>
|
||||
</div>
|
||||
<div class="benefit-value">15%</div>
|
||||
</div>
|
||||
<div class="benefit-item">
|
||||
<div class="benefit-icon shipping">
|
||||
<i class="fas fa-shipping-fast"></i>
|
||||
</div>
|
||||
<div class="benefit-content">
|
||||
<div class="benefit-title">Miễn phí vận chuyển</div>
|
||||
<div class="benefit-description">Cho đơn hàng từ mức thấp</div>
|
||||
</div>
|
||||
<div class="benefit-value">Từ 5 triệu</div>
|
||||
</div>
|
||||
<div class="benefit-item">
|
||||
<div class="benefit-icon priority">
|
||||
<i class="fas fa-fast-forward"></i>
|
||||
</div>
|
||||
<div class="benefit-content">
|
||||
<div class="benefit-title">Ưu tiên cao</div>
|
||||
<div class="benefit-description">Ưu tiên xử lý và giao hàng</div>
|
||||
</div>
|
||||
<div class="benefit-value">Cao</div>
|
||||
</div>
|
||||
<div class="benefit-item">
|
||||
<div class="benefit-icon points">
|
||||
<i class="fas fa-gift"></i>
|
||||
</div>
|
||||
<div class="benefit-content">
|
||||
<div class="benefit-title">Quà sinh nhật VIP</div>
|
||||
<div class="benefit-description">Điểm thưởng sinh nhật cao</div>
|
||||
</div>
|
||||
<div class="benefit-value">500 điểm</div>
|
||||
</div>
|
||||
<div class="benefit-item">
|
||||
<div class="benefit-icon support">
|
||||
<i class="fas fa-user-tie"></i>
|
||||
</div>
|
||||
<div class="benefit-content">
|
||||
<div class="benefit-title">Tư vấn thiết kế</div>
|
||||
<div class="benefit-description">Tư vấn thiết kế 3D miễn phí</div>
|
||||
</div>
|
||||
<div class="benefit-value">Miễn phí</div>
|
||||
</div>
|
||||
<div class="benefit-item">
|
||||
<div class="benefit-icon event">
|
||||
<i class="fas fa-calendar-star"></i>
|
||||
</div>
|
||||
<div class="benefit-content">
|
||||
<div class="benefit-title">Sự kiện VIP</div>
|
||||
<div class="benefit-description">Tham gia sự kiện độc quyền</div>
|
||||
</div>
|
||||
<div class="benefit-value">Có</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Platinum Tier -->
|
||||
<div class="tier-content" id="platinum">
|
||||
<div class="tier-header">
|
||||
<div class="tier-icon platinum">
|
||||
<i class="fas fa-crown"></i>
|
||||
</div>
|
||||
<div class="tier-info">
|
||||
<div class="tier-name">PLATINUM</div>
|
||||
<div class="tier-requirement">2,000+ điểm</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="benefits-section">
|
||||
<div class="benefits-header">
|
||||
<div class="benefits-title">
|
||||
<i class="fas fa-star"></i>
|
||||
Quyền lợi hạng Platinum
|
||||
</div>
|
||||
</div>
|
||||
<div class="benefits-list">
|
||||
<div class="benefit-item">
|
||||
<div class="benefit-icon discount">
|
||||
<i class="fas fa-percentage"></i>
|
||||
</div>
|
||||
<div class="benefit-content">
|
||||
<div class="benefit-title">Chiết khấu tối đa</div>
|
||||
<div class="benefit-description">Mức giảm giá cao nhất</div>
|
||||
</div>
|
||||
<div class="benefit-value">20%</div>
|
||||
</div>
|
||||
<div class="benefit-item">
|
||||
<div class="benefit-icon shipping">
|
||||
<i class="fas fa-shipping-fast"></i>
|
||||
</div>
|
||||
<div class="benefit-content">
|
||||
<div class="benefit-title">Miễn phí hoàn toàn</div>
|
||||
<div class="benefit-description">Miễn phí vận chuyển mọi đơn hàng</div>
|
||||
</div>
|
||||
<div class="benefit-value">Tất cả đơn</div>
|
||||
</div>
|
||||
<div class="benefit-item">
|
||||
<div class="benefit-icon priority">
|
||||
<i class="fas fa-rocket"></i>
|
||||
</div>
|
||||
<div class="benefit-content">
|
||||
<div class="benefit-title">Ưu tiên tuyệt đối</div>
|
||||
<div class="benefit-description">Ưu tiên cao nhất trong mọi dịch vụ</div>
|
||||
</div>
|
||||
<div class="benefit-value">Tuyệt đối</div>
|
||||
</div>
|
||||
<div class="benefit-item">
|
||||
<div class="benefit-icon points">
|
||||
<i class="fas fa-gift"></i>
|
||||
</div>
|
||||
<div class="benefit-content">
|
||||
<div class="benefit-title">Quà sinh nhật đặc biệt</div>
|
||||
<div class="benefit-description">Quà tặng sinh nhật giá trị cao</div>
|
||||
</div>
|
||||
<div class="benefit-value">1000 điểm</div>
|
||||
</div>
|
||||
<div class="benefit-item">
|
||||
<div class="benefit-icon support">
|
||||
<i class="fas fa-concierge-bell"></i>
|
||||
</div>
|
||||
<div class="benefit-content">
|
||||
<div class="benefit-title">Quản lý tài khoản riêng</div>
|
||||
<div class="benefit-description">Nhân viên chăm sóc cá nhân 1:1</div>
|
||||
</div>
|
||||
<div class="benefit-value">24/7</div>
|
||||
</div>
|
||||
<div class="benefit-item">
|
||||
<div class="benefit-icon event">
|
||||
<i class="fas fa-vip"></i>
|
||||
</div>
|
||||
<div class="benefit-content">
|
||||
<div class="benefit-title">Đối tác VIP</div>
|
||||
<div class="benefit-description">Ưu đãi đặc biệt và quyền lợi độc quyền</div>
|
||||
</div>
|
||||
<div class="benefit-value">Độc quyền</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Call to Action -->
|
||||
<div class="cta-section">
|
||||
<div class="cta-title">Muốn nâng cấp hạng thành viên?</div>
|
||||
<div class="cta-description">
|
||||
Mua sắm nhiều hơn để tích lũy điểm và nhận được những ưu đãi tốt hơn!
|
||||
</div>
|
||||
<button class="cta-button" onclick="goToProducts()">
|
||||
<i class="fas fa-shopping-cart"></i>
|
||||
Mua sắm ngay
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function goBack() {
|
||||
window.history.back();
|
||||
}
|
||||
|
||||
function showTier(tierName) {
|
||||
// Hide all tier contents
|
||||
const tiers = ['bronze', 'silver', 'gold', 'diamond', 'platinum'];
|
||||
tiers.forEach(tier => {
|
||||
const content = document.getElementById(tier);
|
||||
const tab = document.querySelector(`[onclick="showTier('${tier}')"]`);
|
||||
content.classList.remove('active');
|
||||
tab.classList.remove('active');
|
||||
});
|
||||
|
||||
// Show selected tier
|
||||
document.getElementById(tierName).classList.add('active');
|
||||
document.querySelector(`[onclick="showTier('${tierName}')"]`).classList.add('active');
|
||||
}
|
||||
|
||||
function goToProducts() {
|
||||
window.location.href = 'products.html';
|
||||
}
|
||||
|
||||
// Animation when page loads
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const elements = document.querySelectorAll('.current-tier-card, .progress-section, .tier-tabs, .tier-content.active, .cta-section');
|
||||
elements.forEach((element, index) => {
|
||||
element.style.opacity = '0';
|
||||
element.style.transform = 'translateY(20px)';
|
||||
element.style.transition = 'all 0.5s ease';
|
||||
|
||||
setTimeout(() => {
|
||||
element.style.opacity = '1';
|
||||
element.style.transform = 'translateY(0)';
|
||||
}, index * 100);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
200
html/my-gifts.html
Normal file
200
html/my-gifts.html
Normal file
@@ -0,0 +1,200 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="vi">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Quà của tôi - 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="loyalty.html" class="back-button">
|
||||
<i class="fas fa-arrow-left"></i>
|
||||
</a>
|
||||
<h1 class="header-title">Quà của tôi</h1>
|
||||
<div style="width: 32px;"></div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<!-- Filter Tabs -->
|
||||
<div class="tab-nav mb-3">
|
||||
<button class="tab-item active" onclick="filterGifts('valid')">Còn hạn</button>
|
||||
<button class="tab-item" onclick="filterGifts('used')">Đã sử dụng</button>
|
||||
<button class="tab-item" onclick="filterGifts('expired')">Hết hạn</button>
|
||||
</div>
|
||||
|
||||
<!-- Gifts List -->
|
||||
<div class="gifts-list">
|
||||
<!-- Valid Gifts -->
|
||||
<div class="gift-item valid" data-status="valid">
|
||||
<div class="gift-image">
|
||||
<i class="fas fa-percentage"></i>
|
||||
</div>
|
||||
<div class="gift-content">
|
||||
<h4 class="gift-name">Voucher giảm 100.000đ</h4>
|
||||
<p class="gift-description">Áp dụng cho đơn hàng từ 2.000.000đ</p>
|
||||
<div class="gift-info">
|
||||
<p class="gift-expiry">
|
||||
<i class="fas fa-calendar-alt"></i>
|
||||
Hạn sử dụng: 31/12/2023
|
||||
</p>
|
||||
<p class="gift-code">
|
||||
<i class="fas fa-barcode"></i>
|
||||
Mã: SAVE100K
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gift-actions">
|
||||
<button class="btn btn-primary btn-sm">Sử dụng</button>
|
||||
<button class="btn btn-secondary btn-sm">Chi tiết</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="gift-item valid" data-status="valid">
|
||||
<div class="gift-image">
|
||||
<i class="fas fa-gift"></i>
|
||||
</div>
|
||||
<div class="gift-content">
|
||||
<h4 class="gift-name">Gạch ceramic miễn phí</h4>
|
||||
<p class="gift-description">1m² gạch ceramic 30x30 cao cấp</p>
|
||||
<div class="gift-info">
|
||||
<p class="gift-expiry">
|
||||
<i class="fas fa-calendar-alt"></i>
|
||||
Hạn sử dụng: 15/01/2024
|
||||
</p>
|
||||
<p class="gift-code">
|
||||
<i class="fas fa-barcode"></i>
|
||||
Mã: FREECERAMIC
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gift-actions">
|
||||
<button class="btn btn-primary btn-sm">Sử dụng</button>
|
||||
<button class="btn btn-secondary btn-sm">Chi tiết</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Used Gifts -->
|
||||
<div class="gift-item used" data-status="used" style="display: none;">
|
||||
<div class="gift-image">
|
||||
<i class="fas fa-check-circle"></i>
|
||||
</div>
|
||||
<div class="gift-content">
|
||||
<h4 class="gift-name">Voucher giảm 50.000đ</h4>
|
||||
<p class="gift-description">Đã sử dụng cho đơn hàng #DH001230</p>
|
||||
<div class="gift-info">
|
||||
<p class="gift-used-date">
|
||||
<i class="fas fa-calendar-check"></i>
|
||||
Đã sử dụng: 20/07/2023
|
||||
</p>
|
||||
<p class="gift-code">
|
||||
<i class="fas fa-barcode"></i>
|
||||
Mã: SAVE50K
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gift-actions">
|
||||
<button class="btn btn-secondary btn-sm" disabled>Đã sử dụng</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="gift-item used" data-status="used" style="display: none;">
|
||||
<div class="gift-image">
|
||||
<i class="fas fa-check-circle"></i>
|
||||
</div>
|
||||
<div class="gift-content">
|
||||
<h4 class="gift-name">Miễn phí vận chuyển</h4>
|
||||
<p class="gift-description">Đã sử dụng cho đơn hàng #DH001225</p>
|
||||
<div class="gift-info">
|
||||
<p class="gift-used-date">
|
||||
<i class="fas fa-calendar-check"></i>
|
||||
Đã sử dụng: 15/07/2023
|
||||
</p>
|
||||
<p class="gift-code">
|
||||
<i class="fas fa-barcode"></i>
|
||||
Mã: FREESHIP
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gift-actions">
|
||||
<button class="btn btn-secondary btn-sm" disabled>Đã sử dụng</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Expired Gifts -->
|
||||
<div class="gift-item expired" data-status="expired" style="display: none;">
|
||||
<div class="gift-image">
|
||||
<i class="fas fa-times-circle"></i>
|
||||
</div>
|
||||
<div class="gift-content">
|
||||
<h4 class="gift-name">Voucher giảm 200.000đ</h4>
|
||||
<p class="gift-description">Voucher đã hết hạn sử dụng</p>
|
||||
<div class="gift-info">
|
||||
<p class="gift-expired-date">
|
||||
<i class="fas fa-calendar-times"></i>
|
||||
Hết hạn: 30/06/2023
|
||||
</p>
|
||||
<p class="gift-code">
|
||||
<i class="fas fa-barcode"></i>
|
||||
Mã: SAVE200K
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gift-actions">
|
||||
<button class="btn btn-secondary btn-sm" disabled>Hết hạn</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="gift-item valid" data-status="valid">
|
||||
<div class="gift-image">
|
||||
<i class="fas fa-star"></i>
|
||||
</div>
|
||||
<div class="gift-content">
|
||||
<h4 class="gift-name">Tư vấn thiết kế miễn phí</h4>
|
||||
<p class="gift-description">Dịch vụ tư vấn thiết kế chuyên nghiệp</p>
|
||||
<div class="gift-info">
|
||||
<p class="gift-expiry">
|
||||
<i class="fas fa-calendar-alt"></i>
|
||||
Hạn sử dụng: 28/02/2024
|
||||
</p>
|
||||
<p class="gift-code">
|
||||
<i class="fas fa-barcode"></i>
|
||||
Mã: FREEDESIGN
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gift-actions">
|
||||
<button class="btn btn-primary btn-sm">Sử dụng</button>
|
||||
<button class="btn btn-secondary btn-sm">Chi tiết</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function filterGifts(status) {
|
||||
// Update active tab
|
||||
document.querySelectorAll('.tab-item').forEach(tab => {
|
||||
tab.classList.remove('active');
|
||||
});
|
||||
event.target.classList.add('active');
|
||||
|
||||
// Show/hide gift items
|
||||
document.querySelectorAll('.gift-item').forEach(item => {
|
||||
if (status === 'valid') {
|
||||
item.style.display = item.dataset.status === 'valid' ? 'flex' : 'none';
|
||||
} else if (status === 'used') {
|
||||
item.style.display = item.dataset.status === 'used' ? 'flex' : 'none';
|
||||
} else if (status === 'expired') {
|
||||
item.style.display = item.dataset.status === 'expired' ? 'flex' : 'none';
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
701
html/news-detail.html
Normal file
701
html/news-detail.html
Normal file
@@ -0,0 +1,701 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="vi">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Tin tức chi tiết - Worker App</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<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-dark: #1d4ed8;
|
||||
--secondary-color: #64748b;
|
||||
--success-color: #10b981;
|
||||
--warning-color: #f59e0b;
|
||||
--danger-color: #ef4444;
|
||||
--background-color: #f8fafc;
|
||||
--card-background: #ffffff;
|
||||
--text-primary: #1e293b;
|
||||
--text-secondary: #64748b;
|
||||
--border-color: #e2e8f0;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
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 {
|
||||
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);
|
||||
}
|
||||
|
||||
.header-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 1rem;
|
||||
max-width: 480px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--primary-color);
|
||||
font-size: 1.25rem;
|
||||
cursor: pointer;
|
||||
padding: 0.5rem;
|
||||
border-radius: 0.5rem;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.back-button:hover {
|
||||
background-color: #f1f5f9;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.action-button {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--secondary-color);
|
||||
font-size: 1.25rem;
|
||||
cursor: pointer;
|
||||
padding: 0.5rem;
|
||||
border-radius: 0.5rem;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.action-button:hover {
|
||||
background-color: #f1f5f9;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 480px;
|
||||
margin: 0 auto;
|
||||
background: var(--card-background);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.hero-image {
|
||||
width: 100%;
|
||||
height: 250px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.article-content {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.article-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.category-badge {
|
||||
background: var(--primary-color);
|
||||
color: white;
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 1rem;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.meta-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.article-title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
line-height: 1.3;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.article-excerpt {
|
||||
font-size: 1rem;
|
||||
color: var(--text-secondary);
|
||||
font-style: italic;
|
||||
margin-bottom: 1.5rem;
|
||||
padding: 1rem;
|
||||
background: #f8fafc;
|
||||
border-left: 4px solid var(--primary-color);
|
||||
border-radius: 0 0.5rem 0.5rem 0;
|
||||
}
|
||||
|
||||
.article-body {
|
||||
font-size: 1rem;
|
||||
line-height: 1.7;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.article-body h2 {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin: 2rem 0 1rem 0;
|
||||
padding-bottom: 0.5rem;
|
||||
border-bottom: 2px solid var(--primary-color);
|
||||
}
|
||||
|
||||
.article-body h3 {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin: 1.5rem 0 0.75rem 0;
|
||||
}
|
||||
|
||||
.article-body p {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.article-body ul, .article-body ol {
|
||||
margin: 1rem 0;
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
|
||||
.article-body li {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.article-body blockquote {
|
||||
background: #f0f9ff;
|
||||
border-left: 4px solid var(--primary-color);
|
||||
padding: 1rem;
|
||||
margin: 1.5rem 0;
|
||||
font-style: italic;
|
||||
border-radius: 0 0.5rem 0.5rem 0;
|
||||
}
|
||||
|
||||
.article-body img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 0.5rem;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.highlight-box {
|
||||
background: linear-gradient(135deg, #fef3c7, #fed7aa);
|
||||
border: 1px solid var(--warning-color);
|
||||
border-radius: 0.75rem;
|
||||
padding: 1rem;
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
|
||||
.highlight-title {
|
||||
font-weight: 600;
|
||||
color: #92400e;
|
||||
margin-bottom: 0.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.highlight-text {
|
||||
color: #92400e;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.tags-section {
|
||||
margin: 2rem 0;
|
||||
padding: 1rem;
|
||||
background: #f8fafc;
|
||||
border-radius: 0.75rem;
|
||||
}
|
||||
|
||||
.tags-title {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.tags-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.tag {
|
||||
background: white;
|
||||
color: var(--text-secondary);
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 1rem;
|
||||
font-size: 0.75rem;
|
||||
border: 1px solid var(--border-color);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.tag:hover {
|
||||
border-color: var(--primary-color);
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.social-actions {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
border-top: 1px solid var(--border-color);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
.engagement-stats {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.social-buttons {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.social-btn {
|
||||
background: none;
|
||||
border: 2px solid var(--border-color);
|
||||
color: var(--text-secondary);
|
||||
padding: 0.5rem;
|
||||
border-radius: 0.5rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.social-btn:hover {
|
||||
border-color: var(--primary-color);
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.social-btn.liked {
|
||||
border-color: #ef4444;
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
.social-btn.bookmarked {
|
||||
border-color: var(--warning-color);
|
||||
color: var(--warning-color);
|
||||
}
|
||||
|
||||
.related-section {
|
||||
margin: 2rem 0;
|
||||
padding: 1rem;
|
||||
background: #f8fafc;
|
||||
border-radius: 0.75rem;
|
||||
}
|
||||
|
||||
.related-title {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.related-card {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
background: white;
|
||||
padding: 1rem;
|
||||
border-radius: 0.75rem;
|
||||
margin-bottom: 1rem;
|
||||
border: 1px solid var(--border-color);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.related-card:hover {
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 2px 8px rgba(37, 99, 235, 0.1);
|
||||
}
|
||||
|
||||
.related-card:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.related-thumbnail {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 0.5rem;
|
||||
object-fit: cover;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.related-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.related-news-title {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 0.25rem;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.related-meta {
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.article-content {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.article-title {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.article-meta {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.engagement-stats {
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.social-actions {
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.social-buttons {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</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>
|
||||
<div class="header-actions">
|
||||
<button class="action-button" onclick="shareArticle()">
|
||||
<i class="fas fa-share-alt"></i>
|
||||
</button>
|
||||
<button class="action-button" onclick="toggleBookmark()">
|
||||
<i class="fas fa-bookmark"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Hero Image -->
|
||||
<img src="https://images.unsplash.com/photo-1503387762-592deb58ef4e?w=800&h=400&fit=crop"
|
||||
alt="Hình ảnh bài viết"
|
||||
class="hero-image">
|
||||
|
||||
<!-- Article Content -->
|
||||
<div class="article-content">
|
||||
<!-- Meta Information -->
|
||||
<div class="article-meta">
|
||||
<span class="category-badge">Xu hướng</span>
|
||||
<div class="meta-item">
|
||||
<i class="fas fa-calendar"></i>
|
||||
<span>15/11/2024</span>
|
||||
</div>
|
||||
<div class="meta-item">
|
||||
<i class="fas fa-clock"></i>
|
||||
<span>5 phút đọc</span>
|
||||
</div>
|
||||
<div class="meta-item">
|
||||
<i class="fas fa-eye"></i>
|
||||
<span>2.3K lượt xem</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Title -->
|
||||
<h1 class="article-title">5 xu hướng gạch men phòng tắm được ưa chuộng năm 2024</h1>
|
||||
|
||||
<!-- Excerpt -->
|
||||
<div class="article-excerpt">
|
||||
Khám phá những mẫu gạch men hiện đại, sang trọng cho không gian phòng tắm.
|
||||
Từ những tone màu trung tính đến các họa tiết độc đáo, cùng tìm hiểu các xu hướng đang được yêu thích nhất.
|
||||
</div>
|
||||
|
||||
<!-- Article Body -->
|
||||
<div class="article-body">
|
||||
<p>Năm 2024 đánh dấu sự trở lại mạnh mẽ của các thiết kế phòng tắm hiện đại với những xu hướng gạch men đột phá. Không chỉ đơn thuần là vật liệu ốp lát, gạch men ngày nay đã trở thành yếu tố quyết định phong cách và cảm xúc của không gian.</p>
|
||||
|
||||
<h2>1. Gạch men họa tiết đá tự nhiên</h2>
|
||||
<p>Xu hướng bắt chước kết cấu và màu sắc của đá tự nhiên đang trở nên cực kỳ phổ biến. Các sản phẩm gạch men mô phỏng đá marble, granite hay travertine mang đến vẻ đẹp sang trọng mà vẫn đảm bảo tính thực tiễn cao.</p>
|
||||
|
||||
<div class="highlight-box">
|
||||
<div class="highlight-title">
|
||||
<i class="fas fa-lightbulb"></i>
|
||||
Mẹo từ chuyên gia
|
||||
</div>
|
||||
<div class="highlight-text">
|
||||
Chọn gạch men vân đá với kích thước lớn (60x120cm trở lên) để tạo cảm giác không gian rộng rãi và giảm số đường nối.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>2. Tone màu trung tính và earth tone</h2>
|
||||
<p>Các gam màu trung tính như be, xám nhạt, và các tone đất đang thống trị xu hướng thiết kế. Những màu sắc này không chỉ tạo cảm giác thư giãn mà còn dễ dàng kết hợp với nhiều phong cách nội thất khác nhau.</p>
|
||||
|
||||
<ul>
|
||||
<li>Beige và cream: Tạo cảm giác ấm áp, thân thiện</li>
|
||||
<li>Xám nhạt: Hiện đại, tinh tế và sang trọng</li>
|
||||
<li>Nâu đất: Gần gũi với thiên nhiên, tạo cảm giác thư thái</li>
|
||||
</ul>
|
||||
|
||||
<h2>3. Kích thước lớn và định dạng dài</h2>
|
||||
<p>Gạch men kích thước lớn (60x120cm, 75x150cm) và định dạng dài đang được ưa chuộng vì khả năng tạo ra không gian liền mạch, giảm đường nối và dễ vệ sinh.</p>
|
||||
|
||||
<blockquote>
|
||||
"Việc sử dụng gạch men kích thước lớn không chỉ tạo vẻ hiện đại mà còn giúp phòng tắm nhỏ trông rộng rãi hơn đáng kể" - KTS Nguyễn Minh Tuấn
|
||||
</blockquote>
|
||||
|
||||
<h2>4. Bề mặt texture và 3D</h2>
|
||||
<p>Các loại gạch men với bề mặt có texture hoặc hiệu ứng 3D đang tạo nên điểm nhấn thú vị cho không gian phòng tắm. Từ các họa tiết geometric đến surface sần sùi tự nhiên.</p>
|
||||
|
||||
<h3>Các loại texture phổ biến:</h3>
|
||||
<ol>
|
||||
<li>Matt finish: Bề mặt nhám, chống trượt tốt</li>
|
||||
<li>Structured surface: Có kết cấu sần sùi như đá tự nhiên</li>
|
||||
<li>3D geometric: Họa tiết nổi tạo hiệu ứng thị giác</li>
|
||||
</ol>
|
||||
|
||||
<h2>5. Gạch men màu đen và tương phản cao</h2>
|
||||
<p>Xu hướng sử dụng gạch men màu đen hoặc tạo tương phản mạnh đang được nhiều gia chủ lựa chọn để tạo điểm nhấn đặc biệt cho phòng tắm.</p>
|
||||
|
||||
<div class="highlight-box">
|
||||
<div class="highlight-title">
|
||||
<i class="fas fa-exclamation-triangle"></i>
|
||||
Lưu ý khi sử dụng
|
||||
</div>
|
||||
<div class="highlight-text">
|
||||
Gạch men màu tối dễ để lại vết ố từ nước cứng và xà phòng. Cần vệ sinh thường xuyên và sử dụng sản phẩm chống thấm phù hợp.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Kết luận</h2>
|
||||
<p>Xu hướng gạch men phòng tắm năm 2024 hướng tới sự kết hợp hoàn hảo giữa thẩm mỹ và tính năng. Việc lựa chọn đúng loại gạch men không chỉ tăng giá trị thẩm mỹ mà còn đảm bảo độ bền và dễ bảo trì trong thời gian dài.</p>
|
||||
|
||||
<p>Hãy tham khảo ý kiến của chuyên gia và cân nhắc kỹ về điều kiện sử dụng thực tế để đưa ra lựa chọn phù hợp nhất cho không gian của bạn.</p>
|
||||
</div>
|
||||
|
||||
<!-- Tags -->
|
||||
<div class="tags-section">
|
||||
<div class="tags-title">Thẻ liên quan</div>
|
||||
<div class="tags-list">
|
||||
<span class="tag">#gạch-men</span>
|
||||
<span class="tag">#phòng-tắm</span>
|
||||
<span class="tag">#xu-hướng-2024</span>
|
||||
<span class="tag">#thiết-kế-nội-thất</span>
|
||||
<span class="tag">#đá-tự-nhiên</span>
|
||||
<span class="tag">#tone-trung-tính</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Social Actions -->
|
||||
<div class="social-actions">
|
||||
<div class="engagement-stats">
|
||||
<div class="stat-item">
|
||||
<i class="fas fa-heart"></i>
|
||||
<span>156 lượt thích</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<i class="fas fa-comment"></i>
|
||||
<span>23 bình luận</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<i class="fas fa-share"></i>
|
||||
<span>45 lượt chia sẻ</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="social-buttons">
|
||||
<button class="social-btn" onclick="toggleLike()" id="likeBtn">
|
||||
<i class="fas fa-heart"></i>
|
||||
</button>
|
||||
<button class="social-btn" onclick="toggleBookmark()" id="bookmarkBtn">
|
||||
<i class="fas fa-bookmark"></i>
|
||||
</button>
|
||||
<button class="social-btn" onclick="shareArticle()">
|
||||
<i class="fas fa-share-alt"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Related Articles -->
|
||||
<div class="related-section">
|
||||
<h3 class="related-title">Bài viết liên quan</h3>
|
||||
|
||||
<div class="related-card" onclick="openRelatedNews('news-1')">
|
||||
<img src="https://images.unsplash.com/photo-1586023492125-27b2c045efd7?w=60&h=60&fit=crop"
|
||||
alt="Bài viết liên quan"
|
||||
class="related-thumbnail">
|
||||
<div class="related-info">
|
||||
<h4 class="related-news-title">Hướng dẫn thi công gạch granite 60x60 chuyên nghiệp</h4>
|
||||
<div class="related-meta">12/11/2024 • 1.8K lượt xem</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="related-card" onclick="openRelatedNews('news-2')">
|
||||
<img src="https://images.unsplash.com/photo-1560448204-e02f11c3d0e2?w=60&h=60&fit=crop"
|
||||
alt="Bài viết liên quan"
|
||||
class="related-thumbnail">
|
||||
<div class="related-info">
|
||||
<h4 class="related-news-title">Bảng giá gạch men cao cấp mới nhất tháng 11/2024</h4>
|
||||
<div class="related-meta">10/11/2024 • 3.1K lượt xem</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="related-card" onclick="openRelatedNews('news-3')">
|
||||
<img src="https://images.unsplash.com/photo-1545558014-8692077e9b5c?w=60&h=60&fit=crop"
|
||||
alt="Bài viết liên quan"
|
||||
class="related-thumbnail">
|
||||
<div class="related-info">
|
||||
<h4 class="related-news-title">Mẹo chọn gạch ốp tường phòng bếp đẹp và bền</h4>
|
||||
<div class="related-meta">08/11/2024 • 1.5K lượt xem</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function goBack() {
|
||||
window.history.back();
|
||||
}
|
||||
|
||||
function shareArticle() {
|
||||
if (navigator.share) {
|
||||
navigator.share({
|
||||
title: '5 xu hướng gạch men phòng tắm được ưa chuộng năm 2024',
|
||||
text: 'Khám phá những mẫu gạch men hiện đại, sang trọng cho không gian phòng tắm.',
|
||||
url: window.location.href
|
||||
}).catch(console.error);
|
||||
} else {
|
||||
const url = window.location.href;
|
||||
navigator.clipboard.writeText(url).then(() => {
|
||||
showToast('Đã sao chép link bài viết!');
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function toggleLike() {
|
||||
const btn = document.getElementById('likeBtn');
|
||||
btn.classList.toggle('liked');
|
||||
|
||||
const isLiked = btn.classList.contains('liked');
|
||||
showToast(isLiked ? 'Đã thích bài viết!' : 'Đã bỏ thích bài viết!');
|
||||
}
|
||||
|
||||
function toggleBookmark() {
|
||||
const btn = document.getElementById('bookmarkBtn');
|
||||
btn.classList.toggle('bookmarked');
|
||||
|
||||
const isBookmarked = btn.classList.contains('bookmarked');
|
||||
showToast(isBookmarked ? 'Đã lưu bài viết!' : 'Đã bỏ lưu bài viết!');
|
||||
}
|
||||
|
||||
function openRelatedNews(newsId) {
|
||||
window.location.href = `news-detail.html?id=${newsId}`;
|
||||
}
|
||||
|
||||
function showToast(message) {
|
||||
const toast = document.createElement('div');
|
||||
toast.className = 'fixed top-20 left-1/2 transform -translate-x-1/2 bg-green-500 text-white px-4 py-2 rounded-lg z-50 transition-all duration-300';
|
||||
toast.textContent = message;
|
||||
document.body.appendChild(toast);
|
||||
|
||||
setTimeout(() => {
|
||||
toast.style.opacity = '0';
|
||||
setTimeout(() => {
|
||||
document.body.removeChild(toast);
|
||||
}, 300);
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
// Smooth scroll for internal links
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Add reading progress indicator
|
||||
const progressBar = document.createElement('div');
|
||||
progressBar.className = 'fixed top-0 left-0 h-1 bg-blue-500 transition-all duration-300 z-50';
|
||||
progressBar.style.width = '0%';
|
||||
document.body.appendChild(progressBar);
|
||||
|
||||
window.addEventListener('scroll', () => {
|
||||
const scrollTop = window.pageYOffset;
|
||||
const docHeight = document.body.scrollHeight - window.innerHeight;
|
||||
const scrollPercent = (scrollTop / docHeight) * 100;
|
||||
progressBar.style.width = scrollPercent + '%';
|
||||
});
|
||||
|
||||
// Animate elements on scroll
|
||||
const observerOptions = {
|
||||
root: null,
|
||||
rootMargin: '0px',
|
||||
threshold: 0.1
|
||||
};
|
||||
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.style.opacity = '1';
|
||||
entry.target.style.transform = 'translateY(0)';
|
||||
}
|
||||
});
|
||||
}, observerOptions);
|
||||
|
||||
// Observe elements for animation
|
||||
const elements = document.querySelectorAll('.highlight-box, .related-card, blockquote');
|
||||
elements.forEach(el => {
|
||||
el.style.opacity = '0';
|
||||
el.style.transform = 'translateY(20px)';
|
||||
el.style.transition = 'all 0.6s ease';
|
||||
observer.observe(el);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
568
html/news-list.html
Normal file
568
html/news-list.html
Normal file
@@ -0,0 +1,568 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="vi">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<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="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css">
|
||||
<style>
|
||||
:root {
|
||||
--primary-color: #2563eb;
|
||||
--primary-dark: #1d4ed8;
|
||||
--secondary-color: #64748b;
|
||||
--success-color: #10b981;
|
||||
--warning-color: #f59e0b;
|
||||
--danger-color: #ef4444;
|
||||
--background-color: #f8fafc;
|
||||
--card-background: #ffffff;
|
||||
--text-primary: #1e293b;
|
||||
--text-secondary: #64748b;
|
||||
--border-color: #e2e8f0;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
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 {
|
||||
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);
|
||||
}
|
||||
|
||||
.header-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 1rem;
|
||||
max-width: 480px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--primary-color);
|
||||
font-size: 1.25rem;
|
||||
cursor: pointer;
|
||||
padding: 0.5rem;
|
||||
border-radius: 0.5rem;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.back-button:hover {
|
||||
background-color: #f1f5f9;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.search-button {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--secondary-color);
|
||||
font-size: 1.25rem;
|
||||
cursor: pointer;
|
||||
padding: 0.5rem;
|
||||
border-radius: 0.5rem;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.search-button:hover {
|
||||
background-color: #f1f5f9;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 480px;
|
||||
margin: 0 auto;
|
||||
background: var(--card-background);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 1rem;
|
||||
padding-bottom: 100px;
|
||||
}
|
||||
|
||||
.categories-section {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.categories-tabs {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
overflow-x: auto;
|
||||
padding-bottom: 0.5rem;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.category-tab {
|
||||
flex-shrink: 0;
|
||||
padding: 0.5rem 1rem;
|
||||
background: #f1f5f9;
|
||||
color: var(--text-secondary);
|
||||
border: none;
|
||||
border-radius: 1.5rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.category-tab.active {
|
||||
background: var(--primary-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.category-tab:hover:not(.active) {
|
||||
background: #e2e8f0;
|
||||
}
|
||||
|
||||
.featured-section {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.featured-card {
|
||||
background: var(--card-background);
|
||||
border-radius: 1rem;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
|
||||
border: 1px solid var(--border-color);
|
||||
margin-bottom: 1rem;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.featured-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.featured-image {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.featured-content {
|
||||
padding: 1.25rem;
|
||||
}
|
||||
|
||||
.featured-title {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 0.75rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.featured-desc {
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.5;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.featured-meta {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.meta-left {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.meta-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.category-badge {
|
||||
background: var(--primary-color);
|
||||
color: white;
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 1rem;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.news-list-section {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.news-card {
|
||||
background: var(--card-background);
|
||||
border-radius: 0.75rem;
|
||||
padding: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
border: 1px solid var(--border-color);
|
||||
transition: all 0.2s ease;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.news-card:hover {
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 2px 8px rgba(37, 99, 235, 0.1);
|
||||
}
|
||||
|
||||
.news-thumbnail {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 0.5rem;
|
||||
object-fit: cover;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.news-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.news-title {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 0.5rem;
|
||||
line-height: 1.3;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.news-excerpt {
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 0.5rem;
|
||||
line-height: 1.4;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.news-meta {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.load-more {
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.load-more-button {
|
||||
background: var(--card-background);
|
||||
color: var(--primary-color);
|
||||
border: 2px solid var(--primary-color);
|
||||
padding: 0.75rem 2rem;
|
||||
border-radius: 0.75rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.load-more-button:hover {
|
||||
background: var(--primary-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.content {
|
||||
padding: 0.75rem;
|
||||
padding-bottom: 100px;
|
||||
}
|
||||
|
||||
.news-card {
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.news-thumbnail {
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
}
|
||||
}
|
||||
</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>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="content">
|
||||
<!-- Categories -->
|
||||
<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('projects')">Dự án</button>
|
||||
<button class="category-tab" onclick="filterCategory('tips')">Mẹo hay</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Featured Article -->
|
||||
<div class="featured-section">
|
||||
<h2 class="section-title">
|
||||
<i class="fas fa-star"></i>
|
||||
Nổi bật
|
||||
</h2>
|
||||
|
||||
<div class="featured-card" onclick="openNews('featured-1')">
|
||||
<img src="https://images.unsplash.com/photo-1503387762-592deb58ef4e?w=400&h=200&fit=crop"
|
||||
alt="Bài viết nổi bật"
|
||||
class="featured-image">
|
||||
<div class="featured-content">
|
||||
<h3 class="featured-title">5 xu hướng gạch men phòng tắm được ưa chuộng năm 2024</h3>
|
||||
<p class="featured-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.
|
||||
Từ những tone màu trung tính đến các họa tiết độc đáo, cùng tìm hiểu các xu hướng đang được yêu thích nhất.
|
||||
</p>
|
||||
<div class="featured-meta">
|
||||
<div class="meta-left">
|
||||
<div class="meta-item">
|
||||
<i class="fas fa-calendar"></i>
|
||||
<span>15/11/2024</span>
|
||||
</div>
|
||||
<div class="meta-item">
|
||||
<i class="fas fa-eye"></i>
|
||||
<span>2.3K lượt xem</span>
|
||||
</div>
|
||||
<div class="meta-item">
|
||||
<i class="fas fa-clock"></i>
|
||||
<span>5 phút đọc</span>
|
||||
</div>
|
||||
</div>
|
||||
<span class="category-badge">Xu hướng</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- News List -->
|
||||
<div class="news-list-section">
|
||||
<h2 class="section-title">
|
||||
<i class="fas fa-newspaper"></i>
|
||||
Mới nhất
|
||||
</h2>
|
||||
|
||||
<div class="news-card" onclick="openNews('news-1')">
|
||||
<img src="https://images.unsplash.com/photo-1586023492125-27b2c045efd7?w=80&h=80&fit=crop"
|
||||
alt="Tin tức"
|
||||
class="news-thumbnail">
|
||||
<div class="news-info">
|
||||
<h3 class="news-title">Hướng dẫn thi công gạch granite 60x60 chuyên nghiệp</h3>
|
||||
<p class="news-excerpt">Quy trình thi công chi tiết từ A-Z cho thầy thợ xây dựng. Các bước chuẩn bị, kỹ thuật thi công và kinh nghiệm thực tế.</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" onclick="openNews('news-2')">
|
||||
<img src="https://images.unsplash.com/photo-1560448204-e02f11c3d0e2?w=80&h=80&fit=crop"
|
||||
alt="Tin tức"
|
||||
class="news-thumbnail">
|
||||
<div class="news-info">
|
||||
<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-excerpt">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. So sánh giá các thương hiệu hàng đầ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 class="news-card" onclick="openNews('news-3')">
|
||||
<img src="https://images.unsplash.com/photo-1545558014-8692077e9b5c?w=80&h=80&fit=crop"
|
||||
alt="Tin tức"
|
||||
class="news-thumbnail">
|
||||
<div class="news-info">
|
||||
<h3 class="news-title">Mẹo chọn gạch ốp tường phòng bếp đẹp và bền</h3>
|
||||
<p class="news-excerpt">Những lưu ý quan trọng khi chọn gạch ốp tường cho khu vực bếp. Tư vấn về chất liệu, màu sắc và kích thước phù hợp.</p>
|
||||
<div class="news-meta">
|
||||
<span><i class="fas fa-calendar"></i> 08/11/2024</span>
|
||||
<span><i class="fas fa-eye"></i> 1.5K lượt xem</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="news-card" onclick="openNews('news-4')">
|
||||
<img src="https://images.unsplash.com/photo-1484101403633-562f891dc89a?w=80&h=80&fit=crop"
|
||||
alt="Tin tức"
|
||||
class="news-thumbnail">
|
||||
<div class="news-info">
|
||||
<h3 class="news-title">Dự án biệt thự Quận 2: Ứng dụng gạch men cao cấp</h3>
|
||||
<p class="news-excerpt">Case study về việc sử dụng gạch men trong dự án biệt thự 300m². Chia sẻ kinh nghiệm và bài học từ thầu thợ.</p>
|
||||
<div class="news-meta">
|
||||
<span><i class="fas fa-calendar"></i> 05/11/2024</span>
|
||||
<span><i class="fas fa-eye"></i> 2.7K lượt xem</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="news-card" onclick="openNews('news-5')">
|
||||
<img src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=80&h=80&fit=crop"
|
||||
alt="Tin tức"
|
||||
class="news-thumbnail">
|
||||
<div class="news-info">
|
||||
<h3 class="news-title">Công cụ hỗ trợ tính toán diện tích gạch chính xác</h3>
|
||||
<p class="news-excerpt">Hướng dẫn sử dụng các công cụ và ứng dụng giúp tính toán diện tích gạch cần thiết cho công trình một cách chính xác nhất.</p>
|
||||
<div class="news-meta">
|
||||
<span><i class="fas fa-calendar"></i> 03/11/2024</span>
|
||||
<span><i class="fas fa-eye"></i> 1.2K lượt xem</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Load More -->
|
||||
<div class="load-more">
|
||||
<button class="load-more-button" onclick="loadMoreNews()">
|
||||
<i class="fas fa-plus"></i>
|
||||
Xem thêm tin tức
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function goBack() {
|
||||
window.history.back();
|
||||
}
|
||||
|
||||
function toggleSearch() {
|
||||
// Implement search functionality
|
||||
alert('Tính năng tìm kiếm đang được phát triển');
|
||||
}
|
||||
|
||||
function filterCategory(category) {
|
||||
// Update active tab
|
||||
document.querySelectorAll('.category-tab').forEach(tab => {
|
||||
tab.classList.remove('active');
|
||||
});
|
||||
event.target.classList.add('active');
|
||||
|
||||
// Filter news based on category (demo implementation)
|
||||
console.log('Filtering by category:', category);
|
||||
|
||||
// In a real app, this would filter the news list
|
||||
showToast(`Đã lọc theo danh mục: ${getCategoryName(category)}`);
|
||||
}
|
||||
|
||||
function getCategoryName(category) {
|
||||
const names = {
|
||||
'all': 'Tất cả',
|
||||
'trends': 'Xu hướng',
|
||||
'technique': 'Kỹ thuật',
|
||||
'pricing': 'Bảng giá',
|
||||
'projects': 'Dự án',
|
||||
'tips': 'Mẹo hay'
|
||||
};
|
||||
return names[category] || 'Tất cả';
|
||||
}
|
||||
|
||||
function openNews(newsId) {
|
||||
// Navigate to news detail page
|
||||
window.location.href = `news-detail.html?id=${newsId}`;
|
||||
}
|
||||
|
||||
function loadMoreNews() {
|
||||
// Simulate loading more news
|
||||
const button = event.target;
|
||||
const originalText = button.innerHTML;
|
||||
|
||||
button.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Đang tải...';
|
||||
button.disabled = true;
|
||||
|
||||
setTimeout(() => {
|
||||
button.innerHTML = originalText;
|
||||
button.disabled = false;
|
||||
showToast('Đã tải thêm 5 tin tức mới');
|
||||
}, 1500);
|
||||
}
|
||||
|
||||
function showToast(message) {
|
||||
const toast = document.createElement('div');
|
||||
toast.className = 'fixed top-20 left-1/2 transform -translate-x-1/2 bg-green-500 text-white px-4 py-2 rounded-lg z-50 transition-all duration-300';
|
||||
toast.textContent = message;
|
||||
document.body.appendChild(toast);
|
||||
|
||||
setTimeout(() => {
|
||||
toast.style.opacity = '0';
|
||||
setTimeout(() => {
|
||||
document.body.removeChild(toast);
|
||||
}, 300);
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
// Animation on load
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const cards = document.querySelectorAll('.news-card, .featured-card');
|
||||
cards.forEach((card, index) => {
|
||||
card.style.opacity = '0';
|
||||
card.style.transform = 'translateY(20px)';
|
||||
card.style.transition = 'all 0.5s ease';
|
||||
|
||||
setTimeout(() => {
|
||||
card.style.opacity = '1';
|
||||
card.style.transform = 'translateY(0)';
|
||||
}, index * 100);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
745
html/nha-mau-detail.html
Normal file
745
html/nha-mau-detail.html
Normal file
@@ -0,0 +1,745 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="vi">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Chi tiết Nhà mẫu - Worker App</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<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-dark: #1d4ed8;
|
||||
--secondary-color: #64748b;
|
||||
--success-color: #10b981;
|
||||
--warning-color: #f59e0b;
|
||||
--danger-color: #ef4444;
|
||||
--background-color: #f8fafc;
|
||||
--card-background: #ffffff;
|
||||
--text-primary: #1e293b;
|
||||
--text-secondary: #64748b;
|
||||
--border-color: #e2e8f0;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
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 {
|
||||
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);
|
||||
}
|
||||
|
||||
.header-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 1rem;
|
||||
max-width: 480px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--primary-color);
|
||||
font-size: 1.25rem;
|
||||
cursor: pointer;
|
||||
padding: 0.5rem;
|
||||
border-radius: 0.5rem;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.back-button:hover {
|
||||
background-color: #f1f5f9;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
max-width: 200px;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.action-button {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--secondary-color);
|
||||
font-size: 1.25rem;
|
||||
cursor: pointer;
|
||||
padding: 0.5rem;
|
||||
border-radius: 0.5rem;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.action-button:hover {
|
||||
background-color: #f1f5f9;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 480px;
|
||||
margin: 0 auto;
|
||||
background: var(--card-background);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.hero-section {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.hero-image {
|
||||
width: 100%;
|
||||
height: 250px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.hero-overlay {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
|
||||
padding: 2rem 1rem 1rem;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.project-title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.project-meta {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
font-size: 0.875rem;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.meta-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.info-section {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.project-description {
|
||||
font-size: 1rem;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: #f8fafc;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 0.75rem;
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: var(--primary-color);
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-secondary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.spaces-section {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.spaces-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.add-space-btn {
|
||||
background: var(--primary-color);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.add-space-btn:hover {
|
||||
background: var(--primary-dark);
|
||||
}
|
||||
|
||||
.spaces-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.space-card {
|
||||
background: var(--card-background);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 0.75rem;
|
||||
overflow: hidden;
|
||||
transition: all 0.2s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.space-card:hover {
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 2px 8px rgba(37, 99, 235, 0.1);
|
||||
}
|
||||
|
||||
.space-image {
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.space-content {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.space-title {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.space-meta {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.space-products {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.space-status {
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 0.75rem;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.status-complete {
|
||||
background: #dcfce7;
|
||||
color: var(--success-color);
|
||||
}
|
||||
|
||||
.status-progress {
|
||||
background: #fef3c7;
|
||||
color: var(--warning-color);
|
||||
}
|
||||
|
||||
.status-draft {
|
||||
background: #f1f5f9;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 1rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.primary-btn {
|
||||
background: var(--primary-color);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 1rem;
|
||||
border-radius: 0.75rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.primary-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3);
|
||||
}
|
||||
|
||||
.secondary-btn {
|
||||
background: var(--card-background);
|
||||
color: var(--secondary-color);
|
||||
border: 2px solid var(--border-color);
|
||||
padding: 1rem;
|
||||
border-radius: 0.75rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.secondary-btn:hover {
|
||||
border-color: var(--primary-color);
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.empty-spaces {
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
background: #f8fafc;
|
||||
border: 2px dashed var(--border-color);
|
||||
border-radius: 0.75rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.empty-title {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.empty-desc {
|
||||
font-size: 0.875rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.project-info-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.75rem;
|
||||
background: #f8fafc;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.content {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
gap: 0.75rem;
|
||||
}
|
||||
}
|
||||
</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" id="headerTitle">Biệt thự chị Lan</h1>
|
||||
<div class="header-actions">
|
||||
<button class="action-button" onclick="editProject()">
|
||||
<i class="fas fa-edit"></i>
|
||||
</button>
|
||||
<button class="action-button" onclick="shareProject()">
|
||||
<i class="fas fa-share-alt"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<div class="hero-section">
|
||||
<img src="https://images.unsplash.com/photo-1600596542815-ffad4c1539a9?w=800&h=400&fit=crop"
|
||||
alt="Biệt thự chị Lan"
|
||||
class="hero-image">
|
||||
<div class="hero-overlay">
|
||||
<h1 class="project-title">Biệt thự chị Lan - Quận 2</h1>
|
||||
<div class="project-meta">
|
||||
<div class="meta-item">
|
||||
<i class="fas fa-calendar"></i>
|
||||
<span>Tạo: 15/10/2024</span>
|
||||
</div>
|
||||
<div class="meta-item">
|
||||
<i class="fas fa-map-marker-alt"></i>
|
||||
<span>TP.HCM</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="content">
|
||||
<!-- Project Info -->
|
||||
<div class="info-section">
|
||||
<h2 class="section-title">
|
||||
<i class="fas fa-info-circle"></i>
|
||||
Thông tin dự án
|
||||
</h2>
|
||||
<p class="project-description">
|
||||
Biệt thự hiện đại 3 tầng với phong cách tối giản, sử dụng gạch men cao cấp nhập khẩu.
|
||||
Diện tích xây dựng 200m², được thiết kế với không gian mở, tận dụng ánh sáng tự nhiên.
|
||||
</p>
|
||||
|
||||
<div class="project-info-grid">
|
||||
<div class="info-item">
|
||||
<span class="info-label">Diện tích</span>
|
||||
<span class="info-value">200m²</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">Phong cách</span>
|
||||
<span class="info-value">Hiện đại tối giản</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">Trạng thái</span>
|
||||
<span class="info-value">Hoàn thành</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">Khách hàng</span>
|
||||
<span class="info-value">Chị Lan - 0912.xxx.xxx</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Statistics -->
|
||||
<div class="stats-grid">
|
||||
<div class="stat-card">
|
||||
<div class="stat-number">8</div>
|
||||
<div class="stat-label">Không gian</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-number">156</div>
|
||||
<div class="stat-label">Sản phẩm</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Spaces Section -->
|
||||
<div class="spaces-section">
|
||||
<div class="spaces-header">
|
||||
<h2 class="section-title">
|
||||
<i class="fas fa-home"></i>
|
||||
Không gian
|
||||
</h2>
|
||||
<button class="add-space-btn" onclick="addNewSpace()">
|
||||
<i class="fas fa-plus"></i>
|
||||
Thêm không gian
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="spaces-grid" id="spacesGrid">
|
||||
<!-- Sample Spaces -->
|
||||
<div class="space-card" onclick="openSpaceDetail('phong-khach')">
|
||||
<img src="https://images.unsplash.com/photo-1586023492125-27b2c045efd7?w=400&h=120&fit=crop"
|
||||
alt="Phòng khách"
|
||||
class="space-image">
|
||||
<div class="space-content">
|
||||
<h3 class="space-title">Phòng khách</h3>
|
||||
<div class="space-meta">
|
||||
<div class="space-products">
|
||||
<i class="fas fa-cube"></i>
|
||||
<span>24 sản phẩm</span>
|
||||
</div>
|
||||
<span class="space-status status-complete">Hoàn thành</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-card" onclick="openSpaceDetail('phong-bep')">
|
||||
<img src="https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?w=400&h=120&fit=crop"
|
||||
alt="Phòng bếp"
|
||||
class="space-image">
|
||||
<div class="space-content">
|
||||
<h3 class="space-title">Phòng bếp</h3>
|
||||
<div class="space-meta">
|
||||
<div class="space-products">
|
||||
<i class="fas fa-cube"></i>
|
||||
<span>18 sản phẩm</span>
|
||||
</div>
|
||||
<span class="space-status status-complete">Hoàn thành</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-card" onclick="openSpaceDetail('phong-ngu-master')">
|
||||
<img src="https://images.unsplash.com/photo-1560448204-61dc36dc98c8?w=400&h=120&fit=crop"
|
||||
alt="Phòng ngủ master"
|
||||
class="space-image">
|
||||
<div class="space-content">
|
||||
<h3 class="space-title">Phòng ngủ master</h3>
|
||||
<div class="space-meta">
|
||||
<div class="space-products">
|
||||
<i class="fas fa-cube"></i>
|
||||
<span>16 sản phẩm</span>
|
||||
</div>
|
||||
<span class="space-status status-complete">Hoàn thành</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-card" onclick="openSpaceDetail('phong-tam-master')">
|
||||
<img src="https://images.unsplash.com/photo-1503387762-592deb58ef4e?w=400&h=120&fit=crop"
|
||||
alt="Phòng tắm master"
|
||||
class="space-image">
|
||||
<div class="space-content">
|
||||
<h3 class="space-title">Phòng tắm master</h3>
|
||||
<div class="space-meta">
|
||||
<div class="space-products">
|
||||
<i class="fas fa-cube"></i>
|
||||
<span>22 sản phẩm</span>
|
||||
</div>
|
||||
<span class="space-status status-progress">Đang thiết kế</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-card" onclick="openSpaceDetail('phong-ngu-2')">
|
||||
<img src="https://images.unsplash.com/photo-1571508601891-ca5e7a713859?w=400&h=120&fit=crop"
|
||||
alt="Phòng ngủ 2"
|
||||
class="space-image">
|
||||
<div class="space-content">
|
||||
<h3 class="space-title">Phòng ngủ 2</h3>
|
||||
<div class="space-meta">
|
||||
<div class="space-products">
|
||||
<i class="fas fa-cube"></i>
|
||||
<span>12 sản phẩm</span>
|
||||
</div>
|
||||
<span class="space-status status-complete">Hoàn thành</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-card" onclick="openSpaceDetail('wc-tang-1')">
|
||||
<img src="https://images.unsplash.com/photo-1584622650111-993a426fbf0a?w=400&h=120&fit=crop"
|
||||
alt="WC tầng 1"
|
||||
class="space-image">
|
||||
<div class="space-content">
|
||||
<h3 class="space-title">WC tầng 1</h3>
|
||||
<div class="space-meta">
|
||||
<div class="space-products">
|
||||
<i class="fas fa-cube"></i>
|
||||
<span>14 sản phẩm</span>
|
||||
</div>
|
||||
<span class="space-status status-complete">Hoàn thành</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-card" onclick="openSpaceDetail('san-vuon')">
|
||||
<img src="https://images.unsplash.com/photo-1600210492486-724fe5c67fb0?w=400&h=120&fit=crop"
|
||||
alt="Sân vườn"
|
||||
class="space-image">
|
||||
<div class="space-content">
|
||||
<h3 class="space-title">Sân vườn</h3>
|
||||
<div class="space-meta">
|
||||
<div class="space-products">
|
||||
<i class="fas fa-cube"></i>
|
||||
<span>8 sản phẩm</span>
|
||||
</div>
|
||||
<span class="space-status status-draft">Nháp</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-card" onclick="openSpaceDetail('garage')">
|
||||
<img src="https://images.unsplash.com/photo-1586023492125-27b2c045efd7?w=400&h=120&fit=crop"
|
||||
alt="Garage"
|
||||
class="space-image">
|
||||
<div class="space-content">
|
||||
<h3 class="space-title">Garage</h3>
|
||||
<div class="space-meta">
|
||||
<div class="space-products">
|
||||
<i class="fas fa-cube"></i>
|
||||
<span>6 sản phẩm</span>
|
||||
</div>
|
||||
<span class="space-status status-complete">Hoàn thành</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<div class="action-buttons">
|
||||
<button class="primary-btn" onclick="createQuote()">
|
||||
<i class="fas fa-file-alt"></i>
|
||||
Tạo báo giá
|
||||
</button>
|
||||
<button class="secondary-btn" onclick="shareProject()">
|
||||
<i class="fas fa-share-alt"></i>
|
||||
Chia sẻ
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function goBack() {
|
||||
window.history.back();
|
||||
}
|
||||
|
||||
function editProject() {
|
||||
alert('Tính năng chỉnh sửa dự án đang được phát triển');
|
||||
}
|
||||
|
||||
function shareProject() {
|
||||
if (navigator.share) {
|
||||
navigator.share({
|
||||
title: 'Biệt thự chị Lan - Quận 2',
|
||||
text: 'Xem mẫu thiết kế biệt thự hiện đại này',
|
||||
url: window.location.href
|
||||
}).catch(console.error);
|
||||
} else {
|
||||
navigator.clipboard.writeText(window.location.href).then(() => {
|
||||
showToast('Đã sao chép link chia sẻ!');
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function addNewSpace() {
|
||||
alert('Tính năng thêm không gian mới đang được phát triển');
|
||||
}
|
||||
|
||||
function openSpaceDetail(spaceId) {
|
||||
window.location.href = `khong-gian-detail.html?nha_mau=villa-chi-lan&space=${spaceId}`;
|
||||
}
|
||||
|
||||
function createQuote() {
|
||||
// Navigate to quote creation with pre-filled data from this nhà mẫu
|
||||
alert('Sẽ chuyển đến trang tạo báo giá với dữ liệu từ nhà mẫu này');
|
||||
// In real app: window.location.href = `quote-create.html?nha_mau=villa-chi-lan`;
|
||||
}
|
||||
|
||||
function showToast(message) {
|
||||
const toast = document.createElement('div');
|
||||
toast.className = 'fixed top-20 left-1/2 transform -translate-x-1/2 bg-green-500 text-white px-4 py-2 rounded-lg z-50 transition-all duration-300';
|
||||
toast.textContent = message;
|
||||
document.body.appendChild(toast);
|
||||
|
||||
setTimeout(() => {
|
||||
toast.style.opacity = '0';
|
||||
setTimeout(() => {
|
||||
document.body.removeChild(toast);
|
||||
}, 300);
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
// Get project info from URL parameters (demo)
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const projectId = urlParams.get('id') || 'villa-chi-lan';
|
||||
|
||||
// Update title based on project ID (demo)
|
||||
const titles = {
|
||||
'villa-chi-lan': 'Biệt thủ chị Lan',
|
||||
'nha-ong-anh-duc': 'Nhà ống anh Đức',
|
||||
'chung-cu-thao-dien': 'Chung cư Thảo Điền'
|
||||
};
|
||||
|
||||
const title = titles[projectId] || 'Nhà mẫu';
|
||||
document.getElementById('headerTitle').textContent = title;
|
||||
|
||||
// Animation on load
|
||||
const cards = document.querySelectorAll('.space-card');
|
||||
cards.forEach((card, index) => {
|
||||
card.style.opacity = '0';
|
||||
card.style.transform = 'translateY(20px)';
|
||||
card.style.transition = 'all 0.5s ease';
|
||||
|
||||
setTimeout(() => {
|
||||
card.style.opacity = '1';
|
||||
card.style.transform = 'translateY(0)';
|
||||
}, index * 100);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
725
html/nha-mau-list.html
Normal file
725
html/nha-mau-list.html
Normal file
@@ -0,0 +1,725 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="vi">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Quản lý Nhà mẫu - Worker App</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<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-dark: #1d4ed8;
|
||||
--secondary-color: #64748b;
|
||||
--success-color: #10b981;
|
||||
--warning-color: #f59e0b;
|
||||
--danger-color: #ef4444;
|
||||
--background-color: #f8fafc;
|
||||
--card-background: #ffffff;
|
||||
--text-primary: #1e293b;
|
||||
--text-secondary: #64748b;
|
||||
--border-color: #e2e8f0;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
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 {
|
||||
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);
|
||||
}
|
||||
|
||||
.header-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 1rem;
|
||||
max-width: 480px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--primary-color);
|
||||
font-size: 1.25rem;
|
||||
cursor: pointer;
|
||||
padding: 0.5rem;
|
||||
border-radius: 0.5rem;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.back-button:hover {
|
||||
background-color: #f1f5f9;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.add-button {
|
||||
background: var(--primary-color);
|
||||
color: white;
|
||||
border: none;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.25rem;
|
||||
transition: all 0.3s;
|
||||
box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
|
||||
}
|
||||
|
||||
.add-button:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 15px rgba(37, 99, 235, 0.4);
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 480px;
|
||||
margin: 0 auto;
|
||||
background: var(--card-background);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.stats-section {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: var(--card-background);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 0.75rem;
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.stat-card:hover {
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 2px 8px rgba(37, 99, 235, 0.1);
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: var(--primary-color);
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-secondary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.search-section {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 100%;
|
||||
padding: 0.75rem 1rem 0.75rem 2.5rem;
|
||||
border: 2px solid var(--border-color);
|
||||
border-radius: 0.75rem;
|
||||
font-size: 1rem;
|
||||
background: white;
|
||||
transition: all 0.2s;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.search-input:focus {
|
||||
outline: none;
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
|
||||
}
|
||||
|
||||
.search-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
position: absolute;
|
||||
left: 0.75rem;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: var(--text-secondary);
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.filter-tabs {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
overflow-x: auto;
|
||||
padding-bottom: 0.5rem;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.filter-tab {
|
||||
flex-shrink: 0;
|
||||
padding: 0.5rem 1rem;
|
||||
background: #f1f5f9;
|
||||
color: var(--text-secondary);
|
||||
border: none;
|
||||
border-radius: 1.5rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.filter-tab.active {
|
||||
background: var(--primary-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.filter-tab:hover:not(.active) {
|
||||
background: #e2e8f0;
|
||||
}
|
||||
|
||||
.nha-mau-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.nha-mau-card {
|
||||
background: var(--card-background);
|
||||
border-radius: 1rem;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
border: 1px solid var(--border-color);
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nha-mau-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
|
||||
border-color: var(--primary-color);
|
||||
}
|
||||
|
||||
.nha-mau-image {
|
||||
width: 100%;
|
||||
height: 180px;
|
||||
object-fit: cover;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nha-mau-badge {
|
||||
position: absolute;
|
||||
top: 0.75rem;
|
||||
right: 0.75rem;
|
||||
background: var(--primary-color);
|
||||
color: white;
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 1rem;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.nha-mau-content {
|
||||
padding: 1.25rem;
|
||||
}
|
||||
|
||||
.nha-mau-title {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 0.5rem;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.nha-mau-desc {
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 1rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.nha-mau-meta {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.meta-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.nha-mau-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
flex: 1;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--primary-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: var(--primary-dark);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: var(--card-background);
|
||||
color: var(--text-secondary);
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
border-color: var(--primary-color);
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 3rem 1rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 4rem;
|
||||
color: var(--border-color);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.empty-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.empty-desc {
|
||||
font-size: 0.875rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.create-first-btn {
|
||||
background: var(--primary-color);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 0.75rem 2rem;
|
||||
border-radius: 0.75rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.create-first-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3);
|
||||
}
|
||||
|
||||
.floating-create-btn {
|
||||
position: fixed;
|
||||
bottom: 80px;
|
||||
right: 1rem;
|
||||
background: var(--primary-color);
|
||||
color: white;
|
||||
border: none;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.5rem;
|
||||
box-shadow: 0 4px 16px rgba(37, 99, 235, 0.3);
|
||||
transition: all 0.3s;
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
.floating-create-btn:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4);
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.content {
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.stats-section {
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.nha-mau-content {
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
</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">Quản lý Nhà mẫu</h1>
|
||||
<button class="add-button" onclick="createNewNhaMau()">
|
||||
<i class="fas fa-plus"></i>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="content">
|
||||
<!-- Statistics -->
|
||||
<div class="stats-section">
|
||||
<div class="stat-card">
|
||||
<div class="stat-number">12</div>
|
||||
<div class="stat-label">Tổng nhà mẫu</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-number">45</div>
|
||||
<div class="stat-label">Không gian</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-number">8</div>
|
||||
<div class="stat-label">Đã chia sẻ</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Search -->
|
||||
<div class="search-section">
|
||||
<div class="search-wrapper">
|
||||
<i class="fas fa-search search-icon"></i>
|
||||
<input type="text"
|
||||
class="search-input"
|
||||
placeholder="Tìm kiếm nhà mẫu..."
|
||||
oninput="searchNhaMau(this.value)">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Filter Tabs -->
|
||||
<div class="filter-tabs">
|
||||
<button class="filter-tab active" onclick="filterNhaMau('all')">Tất cả</button>
|
||||
<button class="filter-tab" onclick="filterNhaMau('active')">Đang sử dụng</button>
|
||||
<button class="filter-tab" onclick="filterNhaMau('shared')">Đã chia sẻ</button>
|
||||
<button class="filter-tab" onclick="filterNhaMau('draft')">Nháp</button>
|
||||
<button class="filter-tab" onclick="filterNhaMau('archived')">Lưu trữ</button>
|
||||
</div>
|
||||
|
||||
<!-- Nhà mẫu Grid -->
|
||||
<div class="nha-mau-grid" id="nhaMauGrid">
|
||||
<!-- Sample Nhà mẫu Cards -->
|
||||
<div class="nha-mau-card" onclick="openNhaMauDetail('villa-chi-lan')">
|
||||
<img src="https://images.unsplash.com/photo-1600596542815-ffad4c1539a9?w=400&h=180&fit=crop"
|
||||
alt="Biệt thự chị Lan"
|
||||
class="nha-mau-image">
|
||||
<div class="nha-mau-badge">Hoàn thành</div>
|
||||
<div class="nha-mau-content">
|
||||
<h3 class="nha-mau-title">Biệt thự chị Lan - Quận 2</h3>
|
||||
<p class="nha-mau-desc">Biệt thự hiện đại 3 tầng với phong cách tối giản, sử dụng gạch men cao cấp nhập khẩu.</p>
|
||||
<div class="nha-mau-meta">
|
||||
<div class="meta-item">
|
||||
<i class="fas fa-home"></i>
|
||||
<span>8 không gian</span>
|
||||
</div>
|
||||
<div class="meta-item">
|
||||
<i class="fas fa-calendar"></i>
|
||||
<span>15/10/2024</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nha-mau-actions">
|
||||
<button class="action-btn btn-primary" onclick="event.stopPropagation(); createQuote('villa-chi-lan')">
|
||||
<i class="fas fa-file-alt"></i>
|
||||
Tạo báo giá
|
||||
</button>
|
||||
<button class="action-btn btn-secondary" onclick="event.stopPropagation(); shareNhaMau('villa-chi-lan')">
|
||||
<i class="fas fa-share-alt"></i>
|
||||
Chia sẻ
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="nha-mau-card" onclick="openNhaMauDetail('nha-ong-anh-duc')">
|
||||
<img src="https://images.unsplash.com/photo-1570129477492-45c003edd2be?w=400&h=180&fit=crop"
|
||||
alt="Nhà ống anh Đức"
|
||||
class="nha-mau-image">
|
||||
<div class="nha-mau-badge">Đang thiết kế</div>
|
||||
<div class="nha-mau-content">
|
||||
<h3 class="nha-mau-title">Nhà ống anh Đức - Quận 1</h3>
|
||||
<p class="nha-mau-desc">Nhà phố 4 tầng với thiết kế thông minh, tối ưu không gian sống và làm việc.</p>
|
||||
<div class="nha-mau-meta">
|
||||
<div class="meta-item">
|
||||
<i class="fas fa-home"></i>
|
||||
<span>6 không gian</span>
|
||||
</div>
|
||||
<div class="meta-item">
|
||||
<i class="fas fa-calendar"></i>
|
||||
<span>12/10/2024</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nha-mau-actions">
|
||||
<button class="action-btn btn-primary" onclick="event.stopPropagation(); createQuote('nha-ong-anh-duc')">
|
||||
<i class="fas fa-file-alt"></i>
|
||||
Tạo báo giá
|
||||
</button>
|
||||
<button class="action-btn btn-secondary" onclick="event.stopPropagation(); shareNhaMau('nha-ong-anh-duc')">
|
||||
<i class="fas fa-share-alt"></i>
|
||||
Chia sẻ
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="nha-mau-card" onclick="openNhaMauDetail('chung-cu-thao-dien')">
|
||||
<img src="https://images.unsplash.com/photo-1562663474-6cbb3eaa4d14?w=400&h=180&fit=crop"
|
||||
alt="Chung cư Thảo Điền"
|
||||
class="nha-mau-image">
|
||||
<div class="nha-mau-badge">Hoàn thành</div>
|
||||
<div class="nha-mau-content">
|
||||
<h3 class="nha-mau-title">Chung cư Thảo Điền - Quận 2</h3>
|
||||
<p class="nha-mau-desc">Căn hộ 3PN với phong cách Scandinavian, sử dụng gạch men tone màu sáng.</p>
|
||||
<div class="nha-mau-meta">
|
||||
<div class="meta-item">
|
||||
<i class="fas fa-home"></i>
|
||||
<span>5 không gian</span>
|
||||
</div>
|
||||
<div class="meta-item">
|
||||
<i class="fas fa-calendar"></i>
|
||||
<span>08/10/2024</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nha-mau-actions">
|
||||
<button class="action-btn btn-primary" onclick="event.stopPropagation(); createQuote('chung-cu-thao-dien')">
|
||||
<i class="fas fa-file-alt"></i>
|
||||
Tạo báo giá
|
||||
</button>
|
||||
<button class="action-btn btn-secondary" onclick="event.stopPropagation(); shareNhaMau('chung-cu-thao-dien')">
|
||||
<i class="fas fa-share-alt"></i>
|
||||
Chia sẻ
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Empty State (hidden by default) -->
|
||||
<div class="empty-state" id="emptyState" style="display: none;">
|
||||
<div class="empty-icon">
|
||||
<i class="fas fa-home"></i>
|
||||
</div>
|
||||
<h3 class="empty-title">Chưa có nhà mẫu nào</h3>
|
||||
<p class="empty-desc">
|
||||
Tạo nhà mẫu đầu tiên để bắt đầu quản lý các dự án thiết kế của bạn
|
||||
</p>
|
||||
<button class="create-first-btn" onclick="createNewNhaMau()">
|
||||
<i class="fas fa-plus"></i>
|
||||
Tạo nhà mẫu đầu tiên
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Floating Create Button -->
|
||||
<button class="floating-create-btn" onclick="createNewNhaMau()">
|
||||
<i class="fas fa-plus"></i>
|
||||
</button>
|
||||
|
||||
<script>
|
||||
function goBack() {
|
||||
window.history.back();
|
||||
}
|
||||
|
||||
function createNewNhaMau() {
|
||||
// Navigate to create new nhà mẫu page
|
||||
alert('Tính năng tạo nhà mẫu mới đang được phát triển');
|
||||
// In real app: window.location.href = 'nha-mau-create.html';
|
||||
}
|
||||
|
||||
function openNhaMauDetail(nhaMauId) {
|
||||
window.location.href = `nha-mau-detail.html?id=${nhaMauId}`;
|
||||
}
|
||||
|
||||
function createQuote(nhaMauId) {
|
||||
alert(`Tạo báo giá cho nhà mẫu: ${nhaMauId}`);
|
||||
// In real app: window.location.href = `quote-create.html?nha_mau=${nhaMauId}`;
|
||||
}
|
||||
|
||||
function shareNhaMau(nhaMauId) {
|
||||
if (navigator.share) {
|
||||
navigator.share({
|
||||
title: 'Chia sẻ nhà mẫu',
|
||||
text: 'Xem nhà mẫu thiết kế này',
|
||||
url: `${window.location.origin}/nha-mau-detail.html?id=${nhaMauId}`
|
||||
}).catch(console.error);
|
||||
} else {
|
||||
const url = `${window.location.origin}/nha-mau-detail.html?id=${nhaMauId}`;
|
||||
navigator.clipboard.writeText(url).then(() => {
|
||||
showToast('Đã sao chép link chia sẻ!');
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function searchNhaMau(query) {
|
||||
const cards = document.querySelectorAll('.nha-mau-card');
|
||||
const emptyState = document.getElementById('emptyState');
|
||||
let visibleCount = 0;
|
||||
|
||||
cards.forEach(card => {
|
||||
const title = card.querySelector('.nha-mau-title').textContent.toLowerCase();
|
||||
const desc = card.querySelector('.nha-mau-desc').textContent.toLowerCase();
|
||||
const searchQuery = query.toLowerCase();
|
||||
|
||||
if (title.includes(searchQuery) || desc.includes(searchQuery) || searchQuery === '') {
|
||||
card.style.display = 'block';
|
||||
visibleCount++;
|
||||
} else {
|
||||
card.style.display = 'none';
|
||||
}
|
||||
});
|
||||
|
||||
// Show empty state if no results
|
||||
if (visibleCount === 0 && query !== '') {
|
||||
emptyState.style.display = 'block';
|
||||
emptyState.innerHTML = `
|
||||
<div class="empty-icon">
|
||||
<i class="fas fa-search"></i>
|
||||
</div>
|
||||
<h3 class="empty-title">Không tìm thấy nhà mẫu</h3>
|
||||
<p class="empty-desc">
|
||||
Không có nhà mẫu nào phù hợp với từ khóa "${query}"
|
||||
</p>
|
||||
`;
|
||||
} else {
|
||||
emptyState.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
function filterNhaMau(type) {
|
||||
// Update active tab
|
||||
document.querySelectorAll('.filter-tab').forEach(tab => {
|
||||
tab.classList.remove('active');
|
||||
});
|
||||
event.target.classList.add('active');
|
||||
|
||||
// Filter cards based on type (demo implementation)
|
||||
const cards = document.querySelectorAll('.nha-mau-card');
|
||||
cards.forEach((card, index) => {
|
||||
// Simple demo filter - in real app, would check actual status
|
||||
if (type === 'all') {
|
||||
card.style.display = 'block';
|
||||
} else if (type === 'active') {
|
||||
// Show first 2 cards as active
|
||||
card.style.display = index < 2 ? 'block' : 'none';
|
||||
} else if (type === 'shared') {
|
||||
// Show cards with "Hoàn thành" badge as shared
|
||||
const badge = card.querySelector('.nha-mau-badge');
|
||||
card.style.display = badge && badge.textContent === 'Hoàn thành' ? 'block' : 'none';
|
||||
} else {
|
||||
// For other filters, hide all for demo
|
||||
card.style.display = 'none';
|
||||
}
|
||||
});
|
||||
|
||||
showToast(`Đã lọc theo: ${getFilterName(type)}`);
|
||||
}
|
||||
|
||||
function getFilterName(type) {
|
||||
const names = {
|
||||
'all': 'Tất cả',
|
||||
'active': 'Đang sử dụng',
|
||||
'shared': 'Đã chia sẻ',
|
||||
'draft': 'Nháp',
|
||||
'archived': 'Lưu trữ'
|
||||
};
|
||||
return names[type] || 'Tất cả';
|
||||
}
|
||||
|
||||
function showToast(message) {
|
||||
const toast = document.createElement('div');
|
||||
toast.className = 'fixed top-20 left-1/2 transform -translate-x-1/2 bg-green-500 text-white px-4 py-2 rounded-lg z-50 transition-all duration-300';
|
||||
toast.textContent = message;
|
||||
document.body.appendChild(toast);
|
||||
|
||||
setTimeout(() => {
|
||||
toast.style.opacity = '0';
|
||||
setTimeout(() => {
|
||||
document.body.removeChild(toast);
|
||||
}, 300);
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
// Animation on load
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const cards = document.querySelectorAll('.nha-mau-card');
|
||||
cards.forEach((card, index) => {
|
||||
card.style.opacity = '0';
|
||||
card.style.transform = 'translateY(20px)';
|
||||
card.style.transition = 'all 0.5s ease';
|
||||
|
||||
setTimeout(() => {
|
||||
card.style.opacity = '1';
|
||||
card.style.transform = 'translateY(0)';
|
||||
}, index * 100);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
123
html/notifications.html
Normal file
123
html/notifications.html
Normal file
@@ -0,0 +1,123 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="vi">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Thông báo - 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">
|
||||
<h1 class="header-title">Thông báo</h1>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<!-- Tabs -->
|
||||
<div class="tab-nav">
|
||||
<button class="tab-item active">Chung</button>
|
||||
<button class="tab-item">Đơn hàng</button>
|
||||
</div>
|
||||
|
||||
<!-- Notifications List -->
|
||||
<div class="notification-item unread">
|
||||
<div class="notification-title">
|
||||
<i class="fas fa-gift text-primary"></i> Chúc mừng! Bạn vừa nhận 500 điểm thưởng
|
||||
</div>
|
||||
<div class="notification-message">
|
||||
Hoàn thành đơn hàng DH2023120801 và nhận 500 điểm vào tài khoản.
|
||||
</div>
|
||||
<div class="notification-time">2 giờ trước</div>
|
||||
</div>
|
||||
|
||||
<div class="notification-item unread">
|
||||
<div class="notification-title">
|
||||
<i class="fas fa-tags text-warning"></i> Flash Sale cuối năm - Giảm đến 50%
|
||||
</div>
|
||||
<div class="notification-message">
|
||||
Chương trình khuyến mãi đặc biệt chỉ còn 2 ngày. Nhanh tay săn ngay!
|
||||
</div>
|
||||
<div class="notification-time">5 giờ trước</div>
|
||||
</div>
|
||||
|
||||
<div class="notification-item unread">
|
||||
<div class="notification-title">
|
||||
<i class="fas fa-truck text-success"></i> Đơn hàng đang được giao
|
||||
</div>
|
||||
<div class="notification-message">
|
||||
Đơn hàng DH2023120701 đang trên đường giao đến bạn. Dự kiến giao trong hôm nay.
|
||||
</div>
|
||||
<div class="notification-time">Hôm qua</div>
|
||||
</div>
|
||||
|
||||
<div class="notification-item">
|
||||
<div class="notification-title">
|
||||
<i class="fas fa-crown text-warning"></i> Sắp lên hạng Platinum
|
||||
</div>
|
||||
<div class="notification-message">
|
||||
Bạn chỉ còn 2,250 điểm nữa để đạt hạng Platinum với nhiều ưu đãi hấp dẫn.
|
||||
</div>
|
||||
<div class="notification-time">2 ngày trước</div>
|
||||
</div>
|
||||
|
||||
<div class="notification-item">
|
||||
<div class="notification-title">
|
||||
<i class="fas fa-calendar text-primary"></i> Sự kiện VIP sắp diễn ra
|
||||
</div>
|
||||
<div class="notification-message">
|
||||
Mời bạn tham gia sự kiện ra mắt bộ sưu tập gạch mới vào 15/12/2023 tại showroom.
|
||||
</div>
|
||||
<div class="notification-time">3 ngày trước</div>
|
||||
</div>
|
||||
|
||||
<div class="notification-item">
|
||||
<div class="notification-title">
|
||||
<i class="fas fa-check-circle text-success"></i> Xác nhận đơn hàng thành công
|
||||
</div>
|
||||
<div class="notification-message">
|
||||
Đơn hàng DH2023120601 đã được xác nhận. Chúng tôi sẽ sớm chuẩn bị và giao hàng.
|
||||
</div>
|
||||
<div class="notification-time">4 ngày trước</div>
|
||||
</div>
|
||||
|
||||
<div class="notification-item">
|
||||
<div class="notification-title">
|
||||
<i class="fas fa-birthday-cake" style="color: #ff69b4;"></i> Sinh nhật sắp đến
|
||||
</div>
|
||||
<div class="notification-message">
|
||||
Chúc mừng sinh nhật! Bạn sẽ nhận 500 điểm thưởng vào ngày 20/12.
|
||||
</div>
|
||||
<div class="notification-time">1 tuần trước</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="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 active" style="position: relative">
|
||||
<i class="fas fa-bell nav-icon"></i>
|
||||
<span class="nav-label">Thông báo</span>
|
||||
<span class="badge">3</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>
|
||||
</body>
|
||||
</html>
|
||||
801
html/order-detail.html
Normal file
801
html/order-detail.html
Normal file
@@ -0,0 +1,801 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="vi">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Chi tiết đơn hàng #DH001234 - 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="orders.html" class="back-button">
|
||||
<i class="fas fa-arrow-left"></i>
|
||||
</a>
|
||||
<h1 class="header-title">Chi tiết đơn hàng</h1>
|
||||
<div class="header-actions">
|
||||
<button class="header-action-btn" onclick="shareOrder()">
|
||||
<i class="fas fa-share"></i>
|
||||
</button>
|
||||
<button class="header-action-btn" onclick="printOrder()">
|
||||
<i class="fas fa-print"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="order-detail-content">
|
||||
<!-- Order Status Card -->
|
||||
<div class="status-timeline-card">
|
||||
<div class="order-header-info">
|
||||
<h2 class="order-number">#DH001234</h2>
|
||||
<span class="current-status processing">Đang xử lý</span>
|
||||
</div>
|
||||
|
||||
<!-- Status Timeline -->
|
||||
<div class="status-timeline">
|
||||
<div class="timeline-item completed">
|
||||
<div class="timeline-icon">
|
||||
<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-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>
|
||||
</div>
|
||||
|
||||
<div class="timeline-item pending">
|
||||
<div class="timeline-icon">
|
||||
<i class="fas fa-truck"></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-date">Dự kiến: 07/08/2023</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Delivery Information Card -->
|
||||
<div class="delivery-info-card">
|
||||
<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-icon">
|
||||
<i class="fas fa-truck"></i>
|
||||
</div>
|
||||
<div class="delivery-method-info">
|
||||
<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 class="delivery-dates">
|
||||
<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 class="date-item">
|
||||
<div class="date-label">
|
||||
<i class="fas fa-clock"></i>
|
||||
Thời gian giao hàng
|
||||
</div>
|
||||
<div class="date-value">07/08/2023, 8:00 - 17:00</div>
|
||||
</div>
|
||||
|
||||
<div class="date-item">
|
||||
<div class="date-label">
|
||||
<i class="fas fa-map-marker-alt"></i>
|
||||
Địa chỉ giao hàng
|
||||
</div>
|
||||
<div class="address-value">
|
||||
123 Đường Lê Văn Lương, Phường Tân Hưng, <br>
|
||||
Quận 7, TP. Hồ Chí Minh
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="date-item">
|
||||
<div class="date-label">
|
||||
<i class="fas fa-user"></i>
|
||||
Người nhận
|
||||
</div>
|
||||
<div class="date-value">Nguyễn Văn A - 0901234567</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Customer Information -->
|
||||
<div class="customer-info-card">
|
||||
<h3><i class="fas fa-user-circle"></i> Thông tin khách hàng</h3>
|
||||
<div class="customer-details">
|
||||
<div class="customer-row">
|
||||
<span class="customer-label">Tên khách hàng:</span>
|
||||
<span class="customer-value">Nguyễn Văn A</span>
|
||||
</div>
|
||||
<div class="customer-row">
|
||||
<span class="customer-label">Số điện thoại:</span>
|
||||
<span class="customer-value">0901234567</span>
|
||||
</div>
|
||||
<div class="customer-row">
|
||||
<span class="customer-label">Email:</span>
|
||||
<span class="customer-value">nguyenvana@email.com</span>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Products List -->
|
||||
<div class="products-card">
|
||||
<h3><i class="fas fa-box"></i> Sản phẩm đặt hàng</h3>
|
||||
|
||||
<div class="product-list">
|
||||
<div class="product-item">
|
||||
<div class="product-image">
|
||||
<img src="https://placehold.co/80x80/F5F5F5/005B9A/png?text=Gạch+1" alt="Gạch Eurotile MỘC LAM E03">
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<h4 class="product-name">Gạch Eurotile MỘC LAM E03</h4>
|
||||
<div class="product-specs">
|
||||
<span class="spec-item">Kích thước: 60x60cm</span>
|
||||
<span class="spec-item">SKU: ET-ML-E03-60x60</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-quantity">
|
||||
<span class="qty-label">Số lượng:</span>
|
||||
<span class="qty-value">30 m²</span>
|
||||
</div>
|
||||
<div class="product-price">
|
||||
<span class="unit-price">285.000đ/m²</span>
|
||||
<span class="total-price">8.550.000đ</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="product-item">
|
||||
<div class="product-image">
|
||||
<img src="https://placehold.co/80x80/E8E8E8/005B9A/png?text=Gạch+2" alt="Gạch Eurotile STONE GREY">
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<h4 class="product-name">Gạch Eurotile STONE GREY S02</h4>
|
||||
<div class="product-specs">
|
||||
<span class="spec-item">Kích thước: 80x80cm</span>
|
||||
<span class="spec-item">SKU: ET-SG-S02-80x80</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-quantity">
|
||||
<span class="qty-label">Số lượng:</span>
|
||||
<span class="qty-value">20 m²</span>
|
||||
</div>
|
||||
<div class="product-price">
|
||||
<span class="unit-price">217.500đ/m²</span>
|
||||
<span class="total-price">4.350.000đ</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Order Summary -->
|
||||
<div class="summary-card">
|
||||
<h3><i class="fas fa-receipt"></i> Tổng kết đơn hàng</h3>
|
||||
|
||||
<div class="summary-details">
|
||||
<div class="summary-row">
|
||||
<span class="summary-label">Tạm tính:</span>
|
||||
<span class="summary-value">12.900.000đ</span>
|
||||
</div>
|
||||
<div class="summary-row">
|
||||
<span class="summary-label">Phí vận chuyển:</span>
|
||||
<span class="summary-value free">Miễn phí</span>
|
||||
</div>
|
||||
<div class="summary-row">
|
||||
<span class="summary-label">Giảm giá VIP:</span>
|
||||
<span class="summary-value discount">-129.000đ</span>
|
||||
</div>
|
||||
<div class="summary-row total">
|
||||
<span class="summary-label">Tổng cộng:</span>
|
||||
<span class="summary-value">12.771.000đ</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="payment-method">
|
||||
<div class="payment-label">
|
||||
<i class="fas fa-credit-card"></i>
|
||||
Phương thức thanh toán:
|
||||
</div>
|
||||
<div class="payment-value">Chuyển khoản ngân hàng</div>
|
||||
</div>
|
||||
|
||||
<div class="order-notes">
|
||||
<div class="notes-label">
|
||||
<i class="fas fa-sticky-note"></i>
|
||||
Ghi chú đơn hàng:
|
||||
</div>
|
||||
<div class="notes-content">
|
||||
Giao hàng trong giờ hành chính. Vui lòng gọi trước 30 phút khi đến giao hàng.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<div class="order-actions">
|
||||
<button class="action-btn secondary" onclick="contactCustomer()">
|
||||
<i class="fas fa-phone"></i>
|
||||
Liên hệ khách hàng
|
||||
</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>
|
||||
|
||||
<style>
|
||||
.order-detail-content {
|
||||
padding: 0 0 100px 0;
|
||||
}
|
||||
|
||||
.status-timeline-card,
|
||||
.delivery-info-card,
|
||||
.customer-info-card,
|
||||
.products-card,
|
||||
.summary-card {
|
||||
background: var(--white);
|
||||
margin: 16px;
|
||||
padding: 20px;
|
||||
border-radius: 12px;
|
||||
box-shadow: var(--shadow-light);
|
||||
}
|
||||
|
||||
.status-timeline-card h3,
|
||||
.delivery-info-card h3,
|
||||
.customer-info-card h3,
|
||||
.products-card h3,
|
||||
.summary-card h3 {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--text-dark);
|
||||
margin-bottom: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
/* Order Header */
|
||||
.order-header-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.order-number {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: var(--primary-blue);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.current-status {
|
||||
padding: 6px 16px;
|
||||
border-radius: 20px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.current-status.processing {
|
||||
background: var(--warning-color);
|
||||
}
|
||||
|
||||
.current-status.shipping {
|
||||
background: var(--primary-blue);
|
||||
}
|
||||
|
||||
.current-status.completed {
|
||||
background: var(--success-color);
|
||||
}
|
||||
|
||||
/* Status Timeline */
|
||||
.status-timeline {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.status-timeline::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 2px;
|
||||
background: var(--border-color);
|
||||
}
|
||||
|
||||
.timeline-item {
|
||||
position: relative;
|
||||
padding-left: 40px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.timeline-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.timeline-icon {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 10px;
|
||||
background: var(--border-color);
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
.timeline-item.completed .timeline-icon {
|
||||
background: var(--success-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.timeline-item.active .timeline-icon {
|
||||
background: var(--warning-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.timeline-title {
|
||||
font-weight: 600;
|
||||
color: var(--text-dark);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.timeline-date {
|
||||
color: var(--text-light);
|
||||
font-size: 12px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
/* Delivery Information */
|
||||
.delivery-method {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 16px;
|
||||
background: var(--background-gray);
|
||||
border-radius: 8px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.delivery-method-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: var(--primary-blue);
|
||||
color: white;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.method-name {
|
||||
font-weight: 600;
|
||||
color: var(--text-dark);
|
||||
}
|
||||
|
||||
.method-description {
|
||||
font-size: 12px;
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
.delivery-dates {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.date-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.date-label {
|
||||
color: var(--text-light);
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.date-value {
|
||||
font-weight: 500;
|
||||
color: var(--text-dark);
|
||||
text-align: right;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.date-value.confirmed {
|
||||
color: var(--success-color);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.address-value {
|
||||
font-weight: 500;
|
||||
color: var(--text-dark);
|
||||
text-align: right;
|
||||
flex: 1;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* Customer Information */
|
||||
.customer-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.customer-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.customer-label {
|
||||
color: var(--text-light);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.customer-value {
|
||||
font-weight: 500;
|
||||
color: var(--text-dark);
|
||||
}
|
||||
|
||||
.customer-badge {
|
||||
padding: 4px 12px;
|
||||
border-radius: 12px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.customer-badge.vip {
|
||||
background: linear-gradient(135deg, #FFD700, #FFA500);
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Products List */
|
||||
.product-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.product-item {
|
||||
display: grid;
|
||||
grid-template-columns: 60px 1fr auto auto;
|
||||
gap: 12px;
|
||||
align-items: start;
|
||||
padding: 12px;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.product-image img {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
object-fit: cover;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.product-info {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.product-name {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--text-dark);
|
||||
margin: 0 0 4px 0;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.product-specs {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.spec-item {
|
||||
font-size: 12px;
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
.product-quantity {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.qty-label {
|
||||
display: block;
|
||||
font-size: 11px;
|
||||
color: var(--text-light);
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.qty-value {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--text-dark);
|
||||
}
|
||||
|
||||
.product-price {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.unit-price {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
color: var(--text-light);
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.total-price {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--danger-color);
|
||||
}
|
||||
|
||||
/* Order Summary */
|
||||
.summary-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.summary-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.summary-row.total {
|
||||
border-top: 1px solid var(--border-color);
|
||||
padding-top: 8px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.summary-label {
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
.summary-row.total .summary-label {
|
||||
font-weight: 600;
|
||||
color: var(--text-dark);
|
||||
}
|
||||
|
||||
.summary-value {
|
||||
font-weight: 500;
|
||||
color: var(--text-dark);
|
||||
}
|
||||
|
||||
.summary-value.free {
|
||||
color: var(--success-color);
|
||||
}
|
||||
|
||||
.summary-value.discount {
|
||||
color: var(--success-color);
|
||||
}
|
||||
|
||||
.summary-row.total .summary-value {
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
color: var(--danger-color);
|
||||
}
|
||||
|
||||
.payment-method,
|
||||
.order-notes {
|
||||
margin-top: 16px;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.payment-label,
|
||||
.notes-label {
|
||||
font-size: 14px;
|
||||
color: var(--text-light);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.payment-value,
|
||||
.notes-content {
|
||||
font-weight: 500;
|
||||
color: var(--text-dark);
|
||||
}
|
||||
|
||||
.notes-content {
|
||||
line-height: 1.4;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* Action Buttons */
|
||||
.order-actions {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: var(--white);
|
||||
padding: 16px;
|
||||
box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.1);
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
flex: 1;
|
||||
padding: 12px 16px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.action-btn.secondary {
|
||||
background: var(--border-color);
|
||||
color: var(--text-dark);
|
||||
}
|
||||
|
||||
.action-btn.secondary:hover {
|
||||
background: #ddd;
|
||||
}
|
||||
|
||||
.action-btn.primary {
|
||||
background: var(--primary-blue);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.action-btn.primary:hover {
|
||||
background: var(--light-blue);
|
||||
}
|
||||
|
||||
/* Mobile Responsiveness */
|
||||
@media (max-width: 480px) {
|
||||
.status-timeline-card,
|
||||
.delivery-info-card,
|
||||
.customer-info-card,
|
||||
.products-card,
|
||||
.summary-card {
|
||||
margin: 12px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.product-item {
|
||||
grid-template-columns: 50px 1fr;
|
||||
grid-template-rows: auto auto;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.product-quantity {
|
||||
grid-column: 1;
|
||||
grid-row: 2;
|
||||
text-align: left;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.product-price {
|
||||
grid-column: 2;
|
||||
grid-row: 2;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.date-item,
|
||||
.customer-row,
|
||||
.summary-row {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.date-value,
|
||||
.customer-value,
|
||||
.summary-value,
|
||||
.address-value {
|
||||
text-align: left;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
function shareOrder() {
|
||||
if (navigator.share) {
|
||||
navigator.share({
|
||||
title: 'Đơn hàng #DH001234',
|
||||
text: 'Chi tiết đơn hàng gạch Eurotile',
|
||||
url: window.location.href
|
||||
});
|
||||
} else {
|
||||
navigator.clipboard.writeText(window.location.href);
|
||||
alert('Đã sao chép link đơn hàng!');
|
||||
}
|
||||
}
|
||||
|
||||
function printOrder() {
|
||||
window.print();
|
||||
}
|
||||
|
||||
function contactCustomer() {
|
||||
const phoneNumber = '0901234567';
|
||||
if (confirm('Gọi điện cho khách hàng Nguyễn Văn A?')) {
|
||||
window.location.href = `tel:${phoneNumber}`;
|
||||
}
|
||||
}
|
||||
|
||||
function updateOrderStatus() {
|
||||
// In a real app, this would open a status update modal
|
||||
alert('Chức năng cập nhật trạng thái đơn hàng sẽ được triển khai trong phiên bản tiếp theo.');
|
||||
}
|
||||
|
||||
// Get order ID from URL parameters (if any)
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const orderId = urlParams.get('id') || 'DH001234';
|
||||
|
||||
// Update page title and order number display
|
||||
document.title = `Chi tiết đơn hàng #${orderId} - EuroTile Worker`;
|
||||
document.querySelector('.order-number').textContent = `#${orderId}`;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
85
html/order-success.html
Normal file
85
html/order-success.html
Normal 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">Đặt hàng thành công!</h1>
|
||||
<p class="success-message">
|
||||
Cảm ơn bạn đã đặt hàng. Chúng tôi sẽ liên hệ xác nhận 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ờ xác nhận</p>
|
||||
<p class="text-small text-muted">Nhân viên sẽ gọi xác nhận 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">Chuẩn bị hàng</p>
|
||||
<p class="text-small text-muted">Đơn hàng được đóng gói và chuẩn bị</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">Giao hàng</p>
|
||||
<p class="text-small text-muted">Vận chuyển đến địa chỉ của bạn</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>
|
||||
176
html/orders (1).html
Normal file
176
html/orders (1).html
Normal file
@@ -0,0 +1,176 @@
|
||||
<!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" 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: 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" 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/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" 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: 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" 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/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>
|
||||
|
||||
<!-- 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>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function viewOrderDetail(orderId) {
|
||||
window.location.href = `order-detail.html?id=${orderId}`;
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
148
html/orders.html
Normal file
148
html/orders.html
Normal file
@@ -0,0 +1,148 @@
|
||||
<!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>
|
||||
96
html/otp.html
Normal file
96
html/otp.html
Normal file
@@ -0,0 +1,96 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="vi">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Xác thực OTP - 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="login.html" class="back-button">
|
||||
<i class="fas fa-arrow-left"></i>
|
||||
</a>
|
||||
<h1 class="header-title">Xác thực OTP</h1>
|
||||
<div style="width: 32px;"></div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<!-- Icon -->
|
||||
<div class="text-center mt-4 mb-4">
|
||||
<div style="display: inline-block; width: 80px; height: 80px; background: linear-gradient(135deg, #005B9A 0%, #38B6FF 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center;">
|
||||
<i class="fas fa-shield-alt" style="font-size: 36px; color: white;"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Instructions -->
|
||||
<div class="text-center mb-4">
|
||||
<h2>Nhập mã xác thực</h2>
|
||||
<p class="text-muted">Mã OTP đã được gửi đến số điện thoại</p>
|
||||
<p class="text-bold text-primary" style="font-size: 16px;">0983 441 099</p>
|
||||
</div>
|
||||
|
||||
<!-- OTP Input -->
|
||||
<form action="index.html" class="card">
|
||||
<div class="otp-container">
|
||||
<input type="text" maxlength="1" class="otp-input" autofocus>
|
||||
<input type="text" maxlength="1" class="otp-input">
|
||||
<input type="text" maxlength="1" class="otp-input">
|
||||
<input type="text" maxlength="1" class="otp-input">
|
||||
<input type="text" maxlength="1" class="otp-input">
|
||||
<input type="text" maxlength="1" class="otp-input">
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-primary btn-block mt-3">
|
||||
Xác nhận
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<!-- Resend OTP -->
|
||||
<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>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Alternative Methods -->
|
||||
<div class="card mt-4">
|
||||
<h3 class="text-center mb-3">Phương thức xác thực khác</h3>
|
||||
<div class="grid grid-2">
|
||||
<button class="btn btn-secondary btn-sm">
|
||||
<i class="fas fa-comment-dots"></i> SMS
|
||||
</button>
|
||||
<button class="btn btn-secondary btn-sm">
|
||||
<i class="fas fa-phone"></i> Gọi điện
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Auto focus next input
|
||||
const inputs = document.querySelectorAll('.otp-input');
|
||||
inputs.forEach((input, index) => {
|
||||
input.addEventListener('input', (e) => {
|
||||
if (e.target.value && index < inputs.length - 1) {
|
||||
inputs[index + 1].focus();
|
||||
}
|
||||
});
|
||||
|
||||
input.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Backspace' && !e.target.value && index > 0) {
|
||||
inputs[index - 1].focus();
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
157
html/password-change.html
Normal file
157
html/password-change.html
Normal file
@@ -0,0 +1,157 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="vi">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Thay đổi mật khẩu - EuroTile Worker</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link rel="stylesheet" href="assets/css/style.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="page-wrapper">
|
||||
<!-- Header -->
|
||||
<div class="header">
|
||||
<a href="account.html" class="back-button">
|
||||
<i class="fas fa-arrow-left"></i>
|
||||
</a>
|
||||
<h1 class="header-title">Thay đổi mật khẩu</h1>
|
||||
<div style="width: 32px;"></div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="form-container">
|
||||
<div class="card">
|
||||
<h3 class="card-title mb-3">Cập nhật mật khẩu</h3>
|
||||
|
||||
<form id="passwordForm">
|
||||
<!-- Current Password -->
|
||||
<div class="form-group">
|
||||
<label class="form-label">Mật khẩu hiện tại *</label>
|
||||
<div class="password-input-container">
|
||||
<input type="password" class="form-input" id="currentPassword" required>
|
||||
<button type="button" class="password-toggle" onclick="togglePassword('currentPassword')">
|
||||
<i class="fas fa-eye"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- New Password -->
|
||||
<div class="form-group">
|
||||
<label class="form-label">Mật khẩu mới *</label>
|
||||
<div class="password-input-container">
|
||||
<input type="password" class="form-input" id="newPassword" required minlength="6">
|
||||
<button type="button" class="password-toggle" onclick="togglePassword('newPassword')">
|
||||
<i class="fas fa-eye"></i>
|
||||
</button>
|
||||
</div>
|
||||
<p class="form-help">Mật khẩu phải có ít nhất 6 ký tự</p>
|
||||
</div>
|
||||
|
||||
<!-- Confirm New Password -->
|
||||
<div class="form-group">
|
||||
<label class="form-label">Nhập lại mật khẩu mới *</label>
|
||||
<div class="password-input-container">
|
||||
<input type="password" class="form-input" id="confirmPassword" required minlength="6">
|
||||
<button type="button" class="password-toggle" onclick="togglePassword('confirmPassword')">
|
||||
<i class="fas fa-eye"></i>
|
||||
</button>
|
||||
</div>
|
||||
<p class="form-help" id="passwordMatch"></p>
|
||||
</div>
|
||||
|
||||
<!-- Security Tips -->
|
||||
<div class="security-tips">
|
||||
<h4>Gợi ý bảo mật:</h4>
|
||||
<ul>
|
||||
<li>Sử dụng ít nhất 8 ký tự</li>
|
||||
<li>Kết hợp chữ hoa, chữ thường và số</li>
|
||||
<li>Bao gồm ký tự đặc biệt (!@#$%^&*)</li>
|
||||
<li>Không sử dụng thông tin cá nhân</li>
|
||||
<li>Thường xuyên thay đổi mật khẩu</li>
|
||||
</ul>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<div class="form-actions">
|
||||
<button type="button" class="btn btn-secondary" onclick="history.back()">
|
||||
Hủy bỏ
|
||||
</button>
|
||||
<button type="submit" class="btn btn-primary" onclick="changePassword()">
|
||||
<i class="fas fa-key"></i>
|
||||
Đổi mật khẩu
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function togglePassword(fieldId) {
|
||||
const field = document.getElementById(fieldId);
|
||||
const button = field.nextElementSibling;
|
||||
const icon = button.querySelector('i');
|
||||
|
||||
if (field.type === 'password') {
|
||||
field.type = 'text';
|
||||
icon.classList.remove('fa-eye');
|
||||
icon.classList.add('fa-eye-slash');
|
||||
} else {
|
||||
field.type = 'password';
|
||||
icon.classList.remove('fa-eye-slash');
|
||||
icon.classList.add('fa-eye');
|
||||
}
|
||||
}
|
||||
|
||||
function validatePasswordMatch() {
|
||||
const newPassword = document.getElementById('newPassword').value;
|
||||
const confirmPassword = document.getElementById('confirmPassword').value;
|
||||
const matchMessage = document.getElementById('passwordMatch');
|
||||
|
||||
if (confirmPassword && newPassword !== confirmPassword) {
|
||||
matchMessage.textContent = 'Mật khẩu không khớp';
|
||||
matchMessage.style.color = 'var(--danger-color)';
|
||||
return false;
|
||||
} else if (confirmPassword && newPassword === confirmPassword) {
|
||||
matchMessage.textContent = 'Mật khẩu khớp';
|
||||
matchMessage.style.color = 'var(--success-color)';
|
||||
return true;
|
||||
} else {
|
||||
matchMessage.textContent = '';
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
document.getElementById('confirmPassword').addEventListener('input', validatePasswordMatch);
|
||||
document.getElementById('newPassword').addEventListener('input', validatePasswordMatch);
|
||||
|
||||
function changePassword() {
|
||||
const form = document.getElementById('passwordForm');
|
||||
const currentPassword = document.getElementById('currentPassword').value;
|
||||
const newPassword = document.getElementById('newPassword').value;
|
||||
const confirmPassword = document.getElementById('confirmPassword').value;
|
||||
|
||||
if (!form.checkValidity()) {
|
||||
form.reportValidity();
|
||||
return;
|
||||
}
|
||||
|
||||
if (newPassword !== confirmPassword) {
|
||||
alert('Mật khẩu mới và xác nhận mật khẩu không khớp!');
|
||||
return;
|
||||
}
|
||||
|
||||
if (newPassword.length < 6) {
|
||||
alert('Mật khẩu mới phải có ít nhất 6 ký tự!');
|
||||
return;
|
||||
}
|
||||
|
||||
// Simulate password change
|
||||
alert('Mật khẩu đã được thay đổi thành công!');
|
||||
window.location.href = 'account.html';
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
146
html/payments.html
Normal file
146
html/payments.html
Normal file
@@ -0,0 +1,146 @@
|
||||
<!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 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="index.html" class="back-button">
|
||||
<i class="fas fa-arrow-left"></i>
|
||||
</a>
|
||||
<h1 class="header-title">Danh sách thanh toán</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ã phiếu thanh toán">
|
||||
</div>
|
||||
|
||||
<!-- Filter Section -->
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Payments List -->
|
||||
<div class="payments-list">
|
||||
<!-- Payment Item 1 - Processing -->
|
||||
<div class="payment-card processing">
|
||||
<div class="payment-status-indicator"></div>
|
||||
<div class="payment-content">
|
||||
<div class="d-flex justify-between align-start mb-2">
|
||||
<h4 class="payment-id">#212221</h4>
|
||||
<span class="payment-amount">12.900.000 VND</span>
|
||||
</div>
|
||||
|
||||
<div class="payment-details">
|
||||
<p class="payment-time">Thời gian: 03/08/2023</p>
|
||||
<p class="payment-status-text">
|
||||
<span class="status-badge processing">Đang xử lý</span>
|
||||
</p>
|
||||
<p class="payment-store">Cửa hàng: CH Thủ Đức</p>
|
||||
<p class="payment-note">Ghi chú: 21347 TT Đơn hàng 54970</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Payment Item 2 - Completed -->
|
||||
<div class="payment-card completed">
|
||||
<div class="payment-status-indicator"></div>
|
||||
<div class="payment-content">
|
||||
<div class="d-flex justify-between align-start mb-2">
|
||||
<h4 class="payment-id">#212221</h4>
|
||||
<span class="payment-amount">12.900.000 VND</span>
|
||||
</div>
|
||||
|
||||
<div class="payment-details">
|
||||
<p class="payment-time">Thời gian: 03/08/2023</p>
|
||||
<p class="payment-status-text">
|
||||
<span class="status-badge completed">Hoàn thành</span>
|
||||
</p>
|
||||
<p class="payment-store">Cửa hàng: CH Thủ Đức</p>
|
||||
<p class="payment-note">Ghi chú: 21347 TT Đơn hàng 54970</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Payment Item 3 - Processing -->
|
||||
<div class="payment-card processing">
|
||||
<div class="payment-status-indicator"></div>
|
||||
<div class="payment-content">
|
||||
<div class="d-flex justify-between align-start mb-2">
|
||||
<h4 class="payment-id">#212220</h4>
|
||||
<span class="payment-amount">8.500.000 VND</span>
|
||||
</div>
|
||||
|
||||
<div class="payment-details">
|
||||
<p class="payment-time">Thời gian: 02/08/2023</p>
|
||||
<p class="payment-status-text">
|
||||
<span class="status-badge processing">Đang xử lý</span>
|
||||
</p>
|
||||
<p class="payment-store">Cửa hàng: CH Bình Dương</p>
|
||||
<p class="payment-note">Ghi chú: 21346 TT Đơn hàng 54969</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Payment Item 4 - Completed -->
|
||||
<div class="payment-card completed">
|
||||
<div class="payment-status-indicator"></div>
|
||||
<div class="payment-content">
|
||||
<div class="d-flex justify-between align-start mb-2">
|
||||
<h4 class="payment-id">#212219</h4>
|
||||
<span class="payment-amount">15.200.000 VND</span>
|
||||
</div>
|
||||
|
||||
<div class="payment-details">
|
||||
<p class="payment-time">Thời gian: 01/08/2023</p>
|
||||
<p class="payment-status-text">
|
||||
<span class="status-badge completed">Hoàn thành</span>
|
||||
</p>
|
||||
<p class="payment-store">Cửa hàng: CH Thủ Đức</p>
|
||||
<p class="payment-note">Ghi chú: 21345 TT Đơn hàng 54968</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Payment Item 5 - Processing -->
|
||||
<div class="payment-card processing">
|
||||
<div class="payment-status-indicator"></div>
|
||||
<div class="payment-content">
|
||||
<div class="d-flex justify-between align-start mb-2">
|
||||
<h4 class="payment-id">#212218</h4>
|
||||
<span class="payment-amount">6.750.000 VND</span>
|
||||
</div>
|
||||
|
||||
<div class="payment-details">
|
||||
<p class="payment-time">Thời gian: 31/07/2023</p>
|
||||
<p class="payment-status-text">
|
||||
<span class="status-badge processing">Đang xử lý</span>
|
||||
</p>
|
||||
<p class="payment-store">Cửa hàng: CH Gò Vấp</p>
|
||||
<p class="payment-note">Ghi chú: 21344 TT Đơn hàng 54967</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
189
html/points-history.html
Normal file
189
html/points-history.html
Normal file
@@ -0,0 +1,189 @@
|
||||
<!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ử đ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">
|
||||
</head>
|
||||
<body>
|
||||
<div class="page-wrapper">
|
||||
<!-- Header -->
|
||||
<div class="header">
|
||||
<a href="loyalty.html" class="back-button">
|
||||
<i class="fas fa-arrow-left"></i>
|
||||
</a>
|
||||
<h1 class="header-title">Lịch sử điểm</h1>
|
||||
<div style="width: 32px;"></div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<!-- Filter Section -->
|
||||
<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>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
<!-- Points History List -->
|
||||
<div class="points-history-list">
|
||||
<!-- Transaction Item 1 -->
|
||||
<div class="card mb-3">
|
||||
<div class="d-flex justify-between align-start mb-2">
|
||||
<div style="flex: 1;">
|
||||
<h4 style="color: var(--primary-blue); font-weight: 500; margin-bottom: 4px;">
|
||||
Giao dịch mua hàng 00083
|
||||
</h4>
|
||||
<p class="text-muted" style="font-size: 12px;">
|
||||
Thời gian: 28/09/2023 17:23:18
|
||||
</p>
|
||||
<p class="text-muted" style="font-size: 12px;">
|
||||
Giao dịch: 100.000.000 VND
|
||||
</p>
|
||||
</div>
|
||||
<button class="btn-complaint">
|
||||
Khiếu nại
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="d-flex justify-end align-center" style="margin-top: 12px;">
|
||||
<div style="text-align: right;">
|
||||
<div style="color: var(--success-color); font-weight: 500;">+3</div>
|
||||
<div style="color: var(--primary-blue); font-size: 12px;">Điểm mới: 604</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Transaction Item 2 -->
|
||||
<div class="card mb-3">
|
||||
<div class="d-flex justify-between align-start mb-2">
|
||||
<div style="flex: 1;">
|
||||
<h4 style="color: var(--primary-blue); font-weight: 500; margin-bottom: 4px;">
|
||||
Giao dịch mua hàng 00081
|
||||
</h4>
|
||||
<p class="text-muted" style="font-size: 12px;">
|
||||
Thời gian: 27/09/2023 17:23:18
|
||||
</p>
|
||||
<p class="text-muted" style="font-size: 12px;">
|
||||
Giao dịch: 200.000.000 VND
|
||||
</p>
|
||||
</div>
|
||||
<button class="btn-complaint">
|
||||
Khiếu nại
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="d-flex justify-end align-center" style="margin-top: 12px;">
|
||||
<div style="text-align: right;">
|
||||
<div style="color: var(--text-dark); font-weight: 500;">0</div>
|
||||
<div style="color: var(--primary-blue); font-size: 12px;">Điểm mới: 604</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Transaction Item 3 -->
|
||||
<div class="card mb-3">
|
||||
<div class="d-flex justify-between align-start mb-2">
|
||||
<div style="flex: 1;">
|
||||
<h4 style="color: var(--primary-blue); font-weight: 500; margin-bottom: 4px;">
|
||||
Điểm thưởng hết hạn
|
||||
</h4>
|
||||
<p class="text-muted" style="font-size: 12px;">
|
||||
Thời gian: 20/09/2023 17:23:18
|
||||
</p>
|
||||
</div>
|
||||
<button class="btn-complaint">
|
||||
Khiếu nại
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="d-flex justify-end align-center" style="margin-top: 12px;">
|
||||
<div style="text-align: right;">
|
||||
<div style="color: var(--danger-color); font-weight: 500;">-5</div>
|
||||
<div style="color: var(--primary-blue); font-size: 12px;">Điểm mới: 604</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Transaction Item 4 -->
|
||||
<div class="card mb-3">
|
||||
<div class="d-flex justify-between align-start mb-2">
|
||||
<div style="flex: 1;">
|
||||
<h4 style="color: var(--primary-blue); font-weight: 500; margin-bottom: 4px;">
|
||||
Đổi Voucher HSG
|
||||
</h4>
|
||||
<p class="text-muted" style="font-size: 12px;">
|
||||
Thời gian: 19/09/2023 17:23:18
|
||||
</p>
|
||||
</div>
|
||||
<button class="btn-complaint">
|
||||
Khiếu nại
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="d-flex justify-end align-center" style="margin-top: 12px;">
|
||||
<div style="text-align: right;">
|
||||
<div style="color: var(--danger-color); font-weight: 500;">-500</div>
|
||||
<div style="color: var(--primary-blue); font-size: 12px;">Điểm mới: 604</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Transaction Item 5 -->
|
||||
<div class="card mb-3">
|
||||
<div class="d-flex justify-between align-start mb-2">
|
||||
<div style="flex: 1;">
|
||||
<h4 style="color: var(--primary-blue); font-weight: 500; margin-bottom: 4px;">
|
||||
Giới thiệu người dùng
|
||||
</h4>
|
||||
<p class="text-muted" style="font-size: 12px;">
|
||||
Thời gian: 10/09/2023 17:23:18
|
||||
</p>
|
||||
</div>
|
||||
<button class="btn-complaint">
|
||||
Khiếu nại
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="d-flex justify-end align-center" style="margin-top: 12px;">
|
||||
<div style="text-align: right;">
|
||||
<div style="color: var(--success-color); font-weight: 500;">+5</div>
|
||||
<div style="color: var(--primary-blue); font-size: 12px;">Điểm mới: 604</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Transaction Item 6 -->
|
||||
<div class="card mb-3">
|
||||
<div class="d-flex justify-between align-start mb-2">
|
||||
<div style="flex: 1;">
|
||||
<h4 style="color: var(--primary-blue); font-weight: 500; margin-bottom: 4px;">
|
||||
Đổi quà
|
||||
</h4>
|
||||
<p class="text-muted" style="font-size: 12px;">
|
||||
Thời gian: 19/09/2023 17:23:18
|
||||
</p>
|
||||
</div>
|
||||
<button class="btn-complaint">
|
||||
Khiếu nại
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="d-flex justify-end align-center" style="margin-top: 12px;">
|
||||
<div style="text-align: right;">
|
||||
<div style="color: var(--danger-color); font-weight: 500;">-200</div>
|
||||
<div style="color: var(--primary-blue); font-size: 12px;">Điểm mới: 604</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
656
html/points-record.html
Normal file
656
html/points-record.html
Normal file
@@ -0,0 +1,656 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="vi">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Ghi nhận điểm - Worker App</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<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-dark: #1d4ed8;
|
||||
--secondary-color: #64748b;
|
||||
--success-color: #10b981;
|
||||
--warning-color: #f59e0b;
|
||||
--danger-color: #ef4444;
|
||||
--background-color: #f8fafc;
|
||||
--card-background: #ffffff;
|
||||
--text-primary: #1e293b;
|
||||
--text-secondary: #64748b;
|
||||
--border-color: #e2e8f0;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
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 {
|
||||
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);
|
||||
}
|
||||
|
||||
.header-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 1rem;
|
||||
max-width: 480px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--primary-color);
|
||||
font-size: 1.25rem;
|
||||
cursor: pointer;
|
||||
padding: 0.5rem;
|
||||
border-radius: 0.5rem;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.back-button:hover {
|
||||
background-color: #f1f5f9;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 480px;
|
||||
margin: 0 auto;
|
||||
background: var(--card-background);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 1rem;
|
||||
padding-bottom: 100px;
|
||||
}
|
||||
|
||||
.info-card {
|
||||
background: linear-gradient(135deg, #dbeafe, #bfdbfe);
|
||||
border: 1px solid var(--primary-color);
|
||||
border-radius: 0.75rem;
|
||||
padding: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.info-title {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: var(--primary-color);
|
||||
margin-bottom: 0.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.info-text {
|
||||
font-size: 0.875rem;
|
||||
color: #1e40af;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
display: block;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.form-label.required::after {
|
||||
content: " *";
|
||||
color: var(--danger-color);
|
||||
}
|
||||
|
||||
.form-input {
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
border: 2px solid var(--border-color);
|
||||
border-radius: 0.5rem;
|
||||
font-size: 1rem;
|
||||
background: white;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.form-input:focus {
|
||||
outline: none;
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
|
||||
}
|
||||
|
||||
.form-textarea {
|
||||
min-height: 80px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.form-select {
|
||||
appearance: none;
|
||||
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 0.75rem center;
|
||||
background-size: 1em;
|
||||
padding-right: 2.5rem;
|
||||
}
|
||||
|
||||
.file-upload {
|
||||
border: 2px dashed var(--border-color);
|
||||
border-radius: 0.75rem;
|
||||
padding: 2rem 1rem;
|
||||
text-align: center;
|
||||
transition: all 0.2s;
|
||||
background: #fafafa;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.file-upload:hover {
|
||||
border-color: var(--primary-color);
|
||||
background: #f0f8ff;
|
||||
}
|
||||
|
||||
.file-upload.dragover {
|
||||
border-color: var(--primary-color);
|
||||
background: var(--primary-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.file-upload-icon {
|
||||
font-size: 2rem;
|
||||
color: var(--secondary-color);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.file-upload.dragover .file-upload-icon {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.file-upload-text {
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.file-upload.dragover .file-upload-text {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.file-preview {
|
||||
display: none;
|
||||
margin-top: 1rem;
|
||||
padding: 1rem;
|
||||
background: #f8f9fa;
|
||||
border-radius: 0.5rem;
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.file-preview.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.file-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0.75rem;
|
||||
background: white;
|
||||
border-radius: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.file-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.file-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: var(--primary-color);
|
||||
border-radius: 0.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.file-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.file-name {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.file-size {
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.file-remove {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--danger-color);
|
||||
cursor: pointer;
|
||||
padding: 0.5rem;
|
||||
border-radius: 0.25rem;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.file-remove:hover {
|
||||
background-color: #fee2e2;
|
||||
}
|
||||
|
||||
.submit-button {
|
||||
width: 100%;
|
||||
background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 1rem;
|
||||
border-radius: 0.75rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.submit-button:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3);
|
||||
}
|
||||
|
||||
.submit-button:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.points-estimate {
|
||||
background: #f0f9ff;
|
||||
border: 1px solid #0ea5e9;
|
||||
border-radius: 0.75rem;
|
||||
padding: 1rem;
|
||||
margin-top: 1rem;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.points-estimate.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.estimate-title {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: #0369a1;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.estimate-text {
|
||||
font-size: 0.875rem;
|
||||
color: #0369a1;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.content {
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.file-upload {
|
||||
padding: 1.5rem 0.75rem;
|
||||
}
|
||||
}
|
||||
</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">Ghi nhận điểm</h1>
|
||||
<div style="width: 2.5rem;"></div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="content">
|
||||
<!-- Info Card -->
|
||||
<div class="info-card">
|
||||
<h3 class="info-title">
|
||||
<i class="fas fa-info-circle"></i>
|
||||
Cách thức ghi nhận điểm
|
||||
</h3>
|
||||
<p class="info-text">
|
||||
Chụp ảnh hóa đơn mua hàng và gửi cho chúng tôi để nhận điểm thưởng.
|
||||
Mỗi 100,000 VNĐ sẽ được tích 1 điểm. Điểm sẽ được cập nhật trong vòng 1-2 ngày làm việc.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form id="pointsForm" onsubmit="submitForm(event)">
|
||||
<!-- Purchase Date -->
|
||||
<div class="form-group">
|
||||
<label class="form-label required">Ngày mua hàng</label>
|
||||
<input type="date"
|
||||
class="form-input"
|
||||
id="purchaseDate"
|
||||
required
|
||||
max=""
|
||||
onchange="validateForm()">
|
||||
</div>
|
||||
|
||||
<!-- Store Location -->
|
||||
<div class="form-group">
|
||||
<label class="form-label required">Cửa hàng mua</label>
|
||||
<select class="form-input form-select" id="storeLocation" required onchange="validateForm()">
|
||||
<option value="">Chọn cửa hàng</option>
|
||||
<option value="hcm-district1">TP.HCM - Quận 1</option>
|
||||
<option value="hcm-district3">TP.HCM - Quận 3</option>
|
||||
<option value="hcm-tanbinh">TP.HCM - Tân Bình</option>
|
||||
<option value="hcm-binhthanh">TP.HCM - Bình Thạnh</option>
|
||||
<option value="hanoi-hoankiem">Hà Nội - Hoàn Kiếm</option>
|
||||
<option value="hanoi-dongda">Hà Nội - Đống Đa</option>
|
||||
<option value="danang-haichau">Đà Nẵng - Hải Châu</option>
|
||||
<option value="other">Cửa hàng khác</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Other Store -->
|
||||
<div class="form-group" id="otherStoreGroup" style="display: none;">
|
||||
<label class="form-label">Tên cửa hàng khác</label>
|
||||
<input type="text"
|
||||
class="form-input"
|
||||
id="otherStore"
|
||||
placeholder="Nhập tên cửa hàng">
|
||||
</div>
|
||||
|
||||
<!-- Invoice Number -->
|
||||
<div class="form-group">
|
||||
<label class="form-label">Số hóa đơn</label>
|
||||
<input type="text"
|
||||
class="form-input"
|
||||
id="invoiceNumber"
|
||||
placeholder="Nhập số hóa đơn (nếu có)"
|
||||
onchange="validateForm()">
|
||||
</div>
|
||||
|
||||
<!-- Total Amount -->
|
||||
<div class="form-group">
|
||||
<label class="form-label required">Tổng giá trị đơn hàng (VNĐ)</label>
|
||||
<input type="number"
|
||||
class="form-input"
|
||||
id="totalAmount"
|
||||
placeholder="0"
|
||||
min="0"
|
||||
step="1000"
|
||||
required
|
||||
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>
|
||||
|
||||
<!-- Invoice Images -->
|
||||
<div class="form-group">
|
||||
<label class="form-label required">Hình ảnh hóa đơn</label>
|
||||
<div class="file-upload"
|
||||
onclick="document.getElementById('fileInput').click()"
|
||||
ondrop="handleDrop(event)"
|
||||
ondragover="handleDragOver(event)"
|
||||
ondragenter="handleDragEnter(event)"
|
||||
ondragleave="handleDragLeave(event)">
|
||||
<div class="file-upload-icon">
|
||||
<i class="fas fa-camera"></i>
|
||||
</div>
|
||||
<div class="file-upload-text">
|
||||
<strong>Chụp ảnh hoặc chọn file</strong><br>
|
||||
<span>JPG, PNG tối đa 5MB mỗi file</span>
|
||||
</div>
|
||||
<input type="file"
|
||||
id="fileInput"
|
||||
accept="image/*"
|
||||
multiple
|
||||
style="display: none;"
|
||||
onchange="handleFileSelect(event)">
|
||||
</div>
|
||||
<div class="file-preview" id="filePreview">
|
||||
<div id="fileList"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Additional Notes -->
|
||||
<div class="form-group">
|
||||
<label class="form-label">Ghi chú thêm</label>
|
||||
<textarea class="form-input form-textarea"
|
||||
id="notes"
|
||||
placeholder="Ghi chú thêm về đơn hàng (tùy chọn)"
|
||||
rows="3"></textarea>
|
||||
</div>
|
||||
|
||||
<!-- Submit Button -->
|
||||
<button type="submit" class="submit-button" id="submitButton" disabled>
|
||||
<i class="fas fa-paper-plane"></i>
|
||||
Gửi yêu cầu ghi nhận điểm
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let selectedFiles = [];
|
||||
|
||||
// Set max date to today
|
||||
document.getElementById('purchaseDate').max = new Date().toISOString().split('T')[0];
|
||||
|
||||
function goBack() {
|
||||
window.history.back();
|
||||
}
|
||||
|
||||
function validateForm() {
|
||||
const purchaseDate = document.getElementById('purchaseDate').value;
|
||||
const storeLocation = document.getElementById('storeLocation').value;
|
||||
const totalAmount = document.getElementById('totalAmount').value;
|
||||
const hasFiles = selectedFiles.length > 0;
|
||||
|
||||
const isValid = purchaseDate && storeLocation && totalAmount && hasFiles;
|
||||
document.getElementById('submitButton').disabled = !isValid;
|
||||
}
|
||||
|
||||
function calculatePoints() {
|
||||
const totalAmount = document.getElementById('totalAmount').value;
|
||||
const pointsEstimate = document.getElementById('pointsEstimate');
|
||||
const estimateText = document.getElementById('estimateText');
|
||||
|
||||
if (totalAmount && totalAmount > 0) {
|
||||
const points = Math.floor(totalAmount / 100000);
|
||||
estimateText.textContent = `${points} điểm`;
|
||||
pointsEstimate.classList.add('show');
|
||||
} else {
|
||||
pointsEstimate.classList.remove('show');
|
||||
}
|
||||
}
|
||||
|
||||
// Store location handling
|
||||
document.getElementById('storeLocation').addEventListener('change', function() {
|
||||
const otherStoreGroup = document.getElementById('otherStoreGroup');
|
||||
if (this.value === 'other') {
|
||||
otherStoreGroup.style.display = 'block';
|
||||
document.getElementById('otherStore').required = true;
|
||||
} else {
|
||||
otherStoreGroup.style.display = 'none';
|
||||
document.getElementById('otherStore').required = false;
|
||||
}
|
||||
validateForm();
|
||||
});
|
||||
|
||||
// File upload handling
|
||||
function handleFileSelect(event) {
|
||||
const files = Array.from(event.target.files);
|
||||
addFiles(files);
|
||||
}
|
||||
|
||||
function handleDrop(event) {
|
||||
event.preventDefault();
|
||||
const fileUpload = document.querySelector('.file-upload');
|
||||
fileUpload.classList.remove('dragover');
|
||||
|
||||
const files = Array.from(event.dataTransfer.files);
|
||||
addFiles(files);
|
||||
}
|
||||
|
||||
function handleDragOver(event) {
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
function handleDragEnter(event) {
|
||||
event.preventDefault();
|
||||
const fileUpload = document.querySelector('.file-upload');
|
||||
fileUpload.classList.add('dragover');
|
||||
}
|
||||
|
||||
function handleDragLeave(event) {
|
||||
event.preventDefault();
|
||||
const fileUpload = document.querySelector('.file-upload');
|
||||
fileUpload.classList.remove('dragover');
|
||||
}
|
||||
|
||||
function addFiles(files) {
|
||||
files.forEach(file => {
|
||||
if (file.type.startsWith('image/')) {
|
||||
if (file.size <= 5 * 1024 * 1024) { // 5MB limit
|
||||
selectedFiles.push(file);
|
||||
} else {
|
||||
alert(`File "${file.name}" quá lớn. Vui lòng chọn file dưới 5MB.`);
|
||||
}
|
||||
} else {
|
||||
alert(`File "${file.name}" không phải là hình ảnh hợp lệ.`);
|
||||
}
|
||||
});
|
||||
|
||||
updateFilePreview();
|
||||
validateForm();
|
||||
}
|
||||
|
||||
function updateFilePreview() {
|
||||
const filePreview = document.getElementById('filePreview');
|
||||
const fileList = document.getElementById('fileList');
|
||||
|
||||
if (selectedFiles.length > 0) {
|
||||
filePreview.classList.add('show');
|
||||
fileList.innerHTML = '';
|
||||
|
||||
selectedFiles.forEach((file, index) => {
|
||||
const fileItem = document.createElement('div');
|
||||
fileItem.className = 'file-item';
|
||||
fileItem.innerHTML = `
|
||||
<div class="file-icon">
|
||||
<i class="fas fa-image"></i>
|
||||
</div>
|
||||
<div class="file-info">
|
||||
<div class="file-name">${file.name}</div>
|
||||
<div class="file-size">${formatFileSize(file.size)}</div>
|
||||
</div>
|
||||
<button type="button" class="file-remove" onclick="removeFile(${index})">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
`;
|
||||
fileList.appendChild(fileItem);
|
||||
});
|
||||
} else {
|
||||
filePreview.classList.remove('show');
|
||||
}
|
||||
}
|
||||
|
||||
function removeFile(index) {
|
||||
selectedFiles.splice(index, 1);
|
||||
updateFilePreview();
|
||||
validateForm();
|
||||
}
|
||||
|
||||
function formatFileSize(bytes) {
|
||||
if (bytes === 0) return '0 Bytes';
|
||||
const k = 1024;
|
||||
const sizes = ['Bytes', 'KB', 'MB', 'GB'];
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
|
||||
}
|
||||
|
||||
function submitForm(event) {
|
||||
event.preventDefault();
|
||||
|
||||
if (selectedFiles.length === 0) {
|
||||
alert('Vui lòng chọn ít nhất một hình ảnh hóa đơn.');
|
||||
return;
|
||||
}
|
||||
|
||||
const submitButton = document.getElementById('submitButton');
|
||||
submitButton.disabled = true;
|
||||
submitButton.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Đang gửi...';
|
||||
|
||||
// Simulate form submission
|
||||
setTimeout(() => {
|
||||
alert('Yêu cầu ghi nhận điểm đã được gửi thành công!\n\nChúng tôi sẽ xem xét và cập nhật điểm cho bạn trong vòng 1-2 ngày làm việc.');
|
||||
window.history.back();
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
function showToast(message, type = 'info') {
|
||||
const toast = document.createElement('div');
|
||||
toast.className = `fixed top-20 left-1/2 transform -translate-x-1/2 px-4 py-2 rounded-lg z-50 transition-all duration-300 ${
|
||||
type === 'success' ? 'bg-green-500' : 'bg-blue-500'
|
||||
} text-white`;
|
||||
toast.textContent = message;
|
||||
document.body.appendChild(toast);
|
||||
|
||||
setTimeout(() => {
|
||||
toast.style.opacity = '0';
|
||||
setTimeout(() => {
|
||||
document.body.removeChild(toast);
|
||||
}, 300);
|
||||
}, 3000);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
128
html/products.html
Normal file
128
html/products.html
Normal file
@@ -0,0 +1,128 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="vi">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Sản phẩ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">
|
||||
</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">Sản phẩm</h1>
|
||||
<a href="cart.html" class="back-button" style="position: relative;">
|
||||
<i class="fas fa-shopping-cart"></i>
|
||||
<span class="badge">3</span>
|
||||
</a>
|
||||
</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="Tìm kiếm sản phẩm...">
|
||||
</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>
|
||||
</div>
|
||||
|
||||
<!-- Product Grid -->
|
||||
<div class="product-grid">
|
||||
<!-- Product 1 -->
|
||||
<div class="product-card">
|
||||
<img src="https://images.unsplash.com/photo-1615971677499-5467cbab01c0?w=300&h=300&fit=crop" alt="Gạch men" class="product-image">
|
||||
<div class="product-info">
|
||||
<div class="product-name">Gạch men cao cấp 60x60</div>
|
||||
<div class="product-price">450.000đ/m²</div>
|
||||
<button class="btn btn-primary btn-sm btn-block">
|
||||
<i class="fas fa-cart-plus"></i> Thêm vào giỏ
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Product 2 -->
|
||||
<div class="product-card">
|
||||
<img src="https://images.unsplash.com/photo-1565193566173-7a0ee3dbe261?w=300&h=300&fit=crop" alt="Gạch granite" class="product-image">
|
||||
<div class="product-info">
|
||||
<div class="product-name">Gạch granite nhập khẩu</div>
|
||||
<div class="product-price">680.000đ/m²</div>
|
||||
<button class="btn btn-primary btn-sm btn-block">
|
||||
<i class="fas fa-cart-plus"></i> Thêm vào giỏ
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Product 3 -->
|
||||
<div class="product-card">
|
||||
<img src="https://images.unsplash.com/photo-1600607687644-aac4c3eac7f4?w=300&h=300&fit=crop" alt="Gạch mosaic" class="product-image">
|
||||
<div class="product-info">
|
||||
<div class="product-name">Gạch mosaic trang trí</div>
|
||||
<div class="product-price">320.000đ/m²</div>
|
||||
<button class="btn btn-primary btn-sm btn-block">
|
||||
<i class="fas fa-cart-plus"></i> Thêm vào giỏ
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Product 4 -->
|
||||
<div class="product-card">
|
||||
<img src="https://images.unsplash.com/photo-1600566753190-17f0baa2a6c3?w=300&h=300&fit=crop" alt="Gạch 3D" class="product-image">
|
||||
<div class="product-info">
|
||||
<div class="product-name">Gạch 3D họa tiết</div>
|
||||
<div class="product-price">750.000đ/m²</div>
|
||||
<button class="btn btn-primary btn-sm btn-block">
|
||||
<i class="fas fa-cart-plus"></i> Thêm vào giỏ
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Product 5 -->
|
||||
<div class="product-card">
|
||||
<img src="https://images.unsplash.com/photo-1615874694520-474822394e73?w=300&h=300&fit=crop" alt="Gạch ceramic" class="product-image">
|
||||
<div class="product-info">
|
||||
<div class="product-name">Gạch ceramic chống trượt</div>
|
||||
<div class="product-price">380.000đ/m²</div>
|
||||
<button class="btn btn-primary btn-sm btn-block">
|
||||
<i class="fas fa-cart-plus"></i> Thêm vào giỏ
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Product 6 -->
|
||||
<div class="product-card">
|
||||
<img src="https://images.unsplash.com/photo-1564013799919-ab600027ffc6?w=300&h=300&fit=crop" alt="Gạch terrazzo" class="product-image">
|
||||
<div class="product-info">
|
||||
<div class="product-name">Gạch terrazzo đá mài</div>
|
||||
<div class="product-price">890.000đ/m²</div>
|
||||
<button class="btn btn-primary btn-sm btn-block">
|
||||
<i class="fas fa-cart-plus"></i> Thêm vào giỏ
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Load More -->
|
||||
<div class="text-center mt-4 mb-4">
|
||||
<button class="btn btn-secondary">
|
||||
<i class="fas fa-sync-alt"></i> Tải thêm sản phẩm
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
145
html/profile-edit.html
Normal file
145
html/profile-edit.html
Normal file
@@ -0,0 +1,145 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="vi">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Thông tin cá nhâ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="account.html" class="back-button">
|
||||
<i class="fas fa-arrow-left"></i>
|
||||
</a>
|
||||
<h1 class="header-title">Thông tin cá nhân</h1>
|
||||
<div style="width: 32px;"></div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="form-container">
|
||||
<div class="card">
|
||||
<!-- Profile Picture -->
|
||||
<div class="profile-avatar-section">
|
||||
<div class="profile-avatar">
|
||||
<img src="https://placehold.co/100x100/005B9A/FFFFFF/png?text=HMH" alt="Avatar" id="avatarImage">
|
||||
<button class="avatar-edit-btn" onclick="changeAvatar()">
|
||||
<i class="fas fa-camera"></i>
|
||||
</button>
|
||||
</div>
|
||||
<input type="file" id="avatarInput" style="display: none;" accept="image/*">
|
||||
</div>
|
||||
|
||||
<form id="profileForm">
|
||||
<!-- Full Name -->
|
||||
<div class="form-group">
|
||||
<label class="form-label">Họ và tên *</label>
|
||||
<input type="text" class="form-input" value="Hoàng Minh Hiệp" required>
|
||||
</div>
|
||||
|
||||
<!-- Phone -->
|
||||
<div class="form-group">
|
||||
<label class="form-label">Số điện thoại *</label>
|
||||
<input type="tel" class="form-input" value="0347302911" required>
|
||||
</div>
|
||||
|
||||
<!-- Email -->
|
||||
<div class="form-group">
|
||||
<label class="form-label">Email</label>
|
||||
<input type="email" class="form-input" value="hoanghiep@example.com">
|
||||
</div>
|
||||
|
||||
<!-- Birth Date -->
|
||||
<div class="form-group">
|
||||
<label class="form-label">Ngày sinh</label>
|
||||
<input type="date" class="form-input" value="1985-03-15">
|
||||
</div>
|
||||
|
||||
<!-- Gender -->
|
||||
<div class="form-group">
|
||||
<label class="form-label">Giới tính</label>
|
||||
<select class="form-select">
|
||||
<option value="">Chọn giới tính</option>
|
||||
<option value="male" selected>Nam</option>
|
||||
<option value="female">Nữ</option>
|
||||
<option value="other">Khác</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- ID Number -->
|
||||
<div class="form-group">
|
||||
<label class="form-label">Số CMND/CCCD</label>
|
||||
<input type="text" class="form-input" value="123456789012">
|
||||
</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>
|
||||
|
||||
<!-- Position -->
|
||||
<div class="form-group">
|
||||
<label class="form-label">Chức vụ</label>
|
||||
<select class="form-select">
|
||||
<option value="">Chọn chức vụ</option>
|
||||
<option value="contractor" selected>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="other">Khác</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Experience -->
|
||||
<div class="form-group">
|
||||
<label class="form-label">Kinh nghiệm (năm)</label>
|
||||
<input type="number" class="form-input" value="10" min="0">
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<div class="form-actions">
|
||||
<button type="button" class="btn btn-secondary" onclick="history.back()">
|
||||
Hủy bỏ
|
||||
</button>
|
||||
<button type="submit" class="btn btn-primary" onclick="saveProfile()">
|
||||
<i class="fas fa-save"></i>
|
||||
Lưu thay đổi
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function changeAvatar() {
|
||||
document.getElementById('avatarInput').click();
|
||||
}
|
||||
|
||||
document.getElementById('avatarInput').addEventListener('change', function(e) {
|
||||
if (e.target.files && e.target.files[0]) {
|
||||
const reader = new FileReader();
|
||||
reader.onload = function(e) {
|
||||
document.getElementById('avatarImage').src = e.target.result;
|
||||
};
|
||||
reader.readAsDataURL(e.target.files[0]);
|
||||
}
|
||||
});
|
||||
|
||||
function saveProfile() {
|
||||
const form = document.getElementById('profileForm');
|
||||
if (form.checkValidity()) {
|
||||
alert('Thông tin đã được cập nhật thành công!');
|
||||
window.location.href = 'account.html';
|
||||
} else {
|
||||
form.reportValidity();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
167
html/project-create.html
Normal file
167
html/project-create.html
Normal file
@@ -0,0 +1,167 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="vi">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Tạo công trình mới - 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="projects.html" class="back-button">
|
||||
<i class="fas fa-arrow-left"></i>
|
||||
</a>
|
||||
<h1 class="header-title">Tạo công trình mới</h1>
|
||||
<div style="width: 32px;"></div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<!-- Project Creation Form -->
|
||||
<div class="form-container">
|
||||
<div class="card">
|
||||
<h3 class="card-title mb-3">Thông tin công trình</h3>
|
||||
|
||||
<form id="projectForm">
|
||||
<!-- Project Name -->
|
||||
<div class="form-group">
|
||||
<label class="form-label">Tên công trình *</label>
|
||||
<input type="text" class="form-input" placeholder="Nhập tên công trình" required>
|
||||
</div>
|
||||
|
||||
<!-- Project Owner -->
|
||||
<div class="form-group">
|
||||
<label class="form-label">Tên chủ đầu tư *</label>
|
||||
<input type="text" class="form-input" placeholder="Nhập tên chủ đầu tư" required>
|
||||
</div>
|
||||
|
||||
<!-- Contact Information -->
|
||||
<div class="form-group">
|
||||
<label class="form-label">Số điện thoại liên hệ *</label>
|
||||
<input type="tel" class="form-input" placeholder="Nhập số điện thoại" required>
|
||||
</div>
|
||||
|
||||
<!-- Address -->
|
||||
<div class="form-group">
|
||||
<label class="form-label">Địa chỉ công trình *</label>
|
||||
<input type="text" class="form-input" placeholder="Nhập địa chỉ chi tiết" required>
|
||||
</div>
|
||||
|
||||
<!-- Province/City -->
|
||||
<div class="form-group">
|
||||
<label class="form-label">Tỉnh/Thành phố *</label>
|
||||
<select class="form-select" required>
|
||||
<option value="">Chọn tỉnh/thành phố</option>
|
||||
<option value="hcm">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="dongnai">Đồng Nai</option>
|
||||
<option value="cantho">Cần Thơ</option>
|
||||
<option value="other">Khác</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- District -->
|
||||
<div class="form-group">
|
||||
<label class="form-label">Quận/Huyện</label>
|
||||
<input type="text" class="form-input" placeholder="Nhập quận/huyện">
|
||||
</div>
|
||||
|
||||
<!-- Project Type -->
|
||||
<div class="form-group">
|
||||
<label class="form-label">Loại công trình *</label>
|
||||
<select class="form-select" required>
|
||||
<option value="">Chọn loại công trình</option>
|
||||
<option value="villa">Villa</option>
|
||||
<option value="apartment">Chung cư</option>
|
||||
<option value="office">Văn phòng</option>
|
||||
<option value="commercial">Thương mại</option>
|
||||
<option value="resort">Resort/Khách sạn</option>
|
||||
<option value="house">Nhà phố</option>
|
||||
<option value="other">Khác</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Area -->
|
||||
<div class="form-group">
|
||||
<label class="form-label">Diện tích (m²)</label>
|
||||
<input type="number" class="form-input" placeholder="Nhập diện tích">
|
||||
</div>
|
||||
|
||||
<!-- Start Date -->
|
||||
<div class="form-group">
|
||||
<label class="form-label">Ngày bắt đầu *</label>
|
||||
<input type="date" class="form-input" required>
|
||||
</div>
|
||||
|
||||
<!-- Expected End Date -->
|
||||
<div class="form-group">
|
||||
<label class="form-label">Ngày dự kiến hoàn thành</label>
|
||||
<input type="date" class="form-input">
|
||||
</div>
|
||||
|
||||
<!-- Budget -->
|
||||
<div class="form-group">
|
||||
<label class="form-label">Ngân sách dự kiến (VND)</label>
|
||||
<input type="number" class="form-input" placeholder="Nhập ngân sách">
|
||||
</div>
|
||||
|
||||
<!-- Description -->
|
||||
<div class="form-group">
|
||||
<label class="form-label">Mô tả chi tiết</label>
|
||||
<textarea class="form-textarea" rows="4" placeholder="Nhập mô tả chi tiết về công trình"></textarea>
|
||||
</div>
|
||||
|
||||
<!-- Notes -->
|
||||
<div class="form-group">
|
||||
<label class="form-label">Ghi chú</label>
|
||||
<textarea class="form-textarea" rows="3" placeholder="Ghi chú thêm (nếu có)"></textarea>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<div class="form-actions">
|
||||
<button type="button" class="btn btn-secondary" onclick="history.back()">
|
||||
Hủy bỏ
|
||||
</button>
|
||||
<button type="submit" class="btn btn-primary" onclick="saveProject()">
|
||||
<i class="fas fa-save"></i>
|
||||
Lưu công trình
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function saveProject() {
|
||||
const form = document.getElementById('projectForm');
|
||||
|
||||
if (form.checkValidity()) {
|
||||
// Show success message
|
||||
alert('Công trình đã được tạo thành công!');
|
||||
|
||||
// Redirect to projects list
|
||||
window.location.href = 'projects.html';
|
||||
} else {
|
||||
// Show validation errors
|
||||
form.reportValidity();
|
||||
}
|
||||
}
|
||||
|
||||
// Set today's date as default start date
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const today = new Date().toISOString().split('T')[0];
|
||||
const startDateInput = document.querySelector('input[type="date"]');
|
||||
if (startDateInput) {
|
||||
startDateInput.value = today;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
817
html/project-submission.html
Normal file
817
html/project-submission.html
Normal file
@@ -0,0 +1,817 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="vi">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Ghi nhận công trình hoàn thành - Worker App</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<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-dark: #1d4ed8;
|
||||
--secondary-color: #64748b;
|
||||
--success-color: #10b981;
|
||||
--warning-color: #f59e0b;
|
||||
--danger-color: #ef4444;
|
||||
--background-color: #f8fafc;
|
||||
--card-background: #ffffff;
|
||||
--text-primary: #1e293b;
|
||||
--text-secondary: #64748b;
|
||||
--border-color: #e2e8f0;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
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 {
|
||||
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);
|
||||
}
|
||||
|
||||
.header-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 1rem;
|
||||
max-width: 480px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--primary-color);
|
||||
font-size: 1.25rem;
|
||||
cursor: pointer;
|
||||
padding: 0.5rem;
|
||||
border-radius: 0.5rem;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.back-button:hover {
|
||||
background-color: #f1f5f9;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 480px;
|
||||
margin: 0 auto;
|
||||
background: var(--card-background);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 1rem;
|
||||
padding-bottom: 120px;
|
||||
}
|
||||
|
||||
.intro-section {
|
||||
background: linear-gradient(135deg, #dbeafe, #bfdbfe);
|
||||
border: 1px solid var(--primary-color);
|
||||
border-radius: 1rem;
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.intro-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: var(--primary-color);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto 1rem;
|
||||
color: white;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.intro-title {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: var(--primary-color);
|
||||
text-align: center;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.intro-text {
|
||||
font-size: 0.875rem;
|
||||
color: #1e40af;
|
||||
text-align: center;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.points-info {
|
||||
background: #ecfdf5;
|
||||
border: 1px solid var(--success-color);
|
||||
border-radius: 0.75rem;
|
||||
padding: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.points-title {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: var(--success-color);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.points-text {
|
||||
font-size: 0.75rem;
|
||||
color: #059669;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.form-section {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
display: block;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.form-label.required::after {
|
||||
content: " *";
|
||||
color: var(--danger-color);
|
||||
}
|
||||
|
||||
.form-input {
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
border: 2px solid var(--border-color);
|
||||
border-radius: 0.75rem;
|
||||
font-size: 1rem;
|
||||
background: white;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.form-input:focus {
|
||||
outline: none;
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
|
||||
}
|
||||
|
||||
.form-textarea {
|
||||
min-height: 80px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.date-input {
|
||||
appearance: none;
|
||||
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3e%3c/rect%3e%3cline x1='16' y1='2' x2='16' y2='6'%3e%3c/line%3e%3cline x1='8' y1='2' x2='8' y2='6'%3e%3c/line%3e%3cline x1='3' y1='10' x2='21' y2='10'%3e%3c/line%3e%3c/svg%3e");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 0.75rem center;
|
||||
background-size: 1.25rem;
|
||||
padding-right: 3rem;
|
||||
}
|
||||
|
||||
.products-section {
|
||||
background: #f8fafc;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 0.75rem;
|
||||
padding: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.products-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.products-title {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.add-product-btn {
|
||||
background: var(--primary-color);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 0.5rem;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.add-product-btn:hover {
|
||||
background: var(--primary-dark);
|
||||
}
|
||||
|
||||
.products-list {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.product-item {
|
||||
background: white;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 0.5rem;
|
||||
padding: 0.75rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.product-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.product-name {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.product-details {
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.remove-product-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--danger-color);
|
||||
cursor: pointer;
|
||||
padding: 0.25rem;
|
||||
border-radius: 0.25rem;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.remove-product-btn:hover {
|
||||
background: #fee2e2;
|
||||
}
|
||||
|
||||
.empty-products {
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.empty-products i {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.images-section {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.images-upload {
|
||||
border: 2px dashed var(--border-color);
|
||||
border-radius: 1rem;
|
||||
padding: 2rem 1rem;
|
||||
text-align: center;
|
||||
transition: all 0.2s;
|
||||
background: #fafafa;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.images-upload:hover {
|
||||
border-color: var(--primary-color);
|
||||
background: #f0f8ff;
|
||||
}
|
||||
|
||||
.images-upload.dragover {
|
||||
border-color: var(--primary-color);
|
||||
background: var(--primary-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.upload-icon {
|
||||
font-size: 2.5rem;
|
||||
color: var(--secondary-color);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.images-upload.dragover .upload-icon {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.upload-title {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.images-upload.dragover .upload-title {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.upload-desc {
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.images-upload.dragover .upload-desc {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.upload-requirements {
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.images-upload.dragover .upload-requirements {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.images-preview {
|
||||
display: none;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.images-preview.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.images-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
|
||||
gap: 0.75rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.image-item {
|
||||
position: relative;
|
||||
aspect-ratio: 1;
|
||||
border-radius: 0.5rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.image-thumbnail {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.remove-image-btn {
|
||||
position: absolute;
|
||||
top: 0.25rem;
|
||||
right: 0.25rem;
|
||||
background: var(--danger-color);
|
||||
color: white;
|
||||
border: none;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.75rem;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.remove-image-btn:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.submit-button {
|
||||
width: 100%;
|
||||
background: linear-gradient(135deg, var(--success-color), #059669);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 1rem;
|
||||
border-radius: 0.75rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.submit-button:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
|
||||
}
|
||||
|
||||
.submit-button:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.content {
|
||||
padding: 0.75rem;
|
||||
padding-bottom: 120px;
|
||||
}
|
||||
|
||||
.intro-section {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.images-upload {
|
||||
padding: 1.5rem 0.75rem;
|
||||
}
|
||||
}
|
||||
</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">Ghi nhận công trình hoàn thành</h1>
|
||||
<div style="width: 2.5rem;"></div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="content">
|
||||
<!-- Introduction -->
|
||||
<div class="intro-section">
|
||||
<div class="intro-icon">
|
||||
<i class="fas fa-building"></i>
|
||||
</div>
|
||||
<h2 class="intro-title">Chia sẻ thành quả của bạn</h2>
|
||||
<p class="intro-text">
|
||||
Gửi hình ảnh công trình đã hoàn thành để nhận thêm điểm thưởng và góp phần xây dựng
|
||||
cộng đồng thầu thợ chuyên nghiệp.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Points Information -->
|
||||
<div class="points-info">
|
||||
<div class="points-title">🎁 Quyền lợi khi ghi nhận công trình</div>
|
||||
<div class="points-text">
|
||||
• Nhận 50-200 điểm tùy theo quy mô công trình<br>
|
||||
• Có cơ hội được giới thiệu trong mục "Dự án tiêu biểu"<br>
|
||||
• Tăng uy tín và độ tin cậy với khách hàng
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form id="projectForm" onsubmit="submitForm(event)">
|
||||
<!-- Project Basic Info -->
|
||||
<div class="form-section">
|
||||
<div class="form-group">
|
||||
<label class="form-label required">Tên công trình</label>
|
||||
<input type="text"
|
||||
class="form-input"
|
||||
id="projectName"
|
||||
placeholder="Ví dụ: Biệt thự chị Lan - Quận 2"
|
||||
required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label required">Địa chỉ công trình</label>
|
||||
<input type="text"
|
||||
class="form-input"
|
||||
id="projectAddress"
|
||||
placeholder="Nhập địa chỉ đầy đủ"
|
||||
required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label required">Ngày hoàn thành</label>
|
||||
<input type="date"
|
||||
class="form-input date-input"
|
||||
id="completionDate"
|
||||
required
|
||||
max="">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Products Used -->
|
||||
<div class="form-section">
|
||||
<div class="form-group">
|
||||
<label class="form-label">Sản phẩm đã sử dụng</label>
|
||||
<div class="products-section">
|
||||
<div class="products-header">
|
||||
<span class="products-title">Danh sách sản phẩm</span>
|
||||
<button type="button" class="add-product-btn" onclick="addProduct()">
|
||||
<i class="fas fa-plus"></i>
|
||||
Thêm sản phẩm
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="products-list" id="productsList">
|
||||
<div class="empty-products">
|
||||
<i class="fas fa-cube"></i>
|
||||
<div>Chưa có sản phẩm nào</div>
|
||||
<small>Nhấn "Thêm sản phẩm" để bắt đầu</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Project Description -->
|
||||
<div class="form-section">
|
||||
<div class="form-group">
|
||||
<label class="form-label">Mô tả công trình</label>
|
||||
<textarea class="form-input form-textarea"
|
||||
id="projectDescription"
|
||||
placeholder="Mô tả về phong cách thiết kế, diện tích, đặc điểm nổi bật của công trình..."
|
||||
rows="4"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Images Upload -->
|
||||
<div class="form-section">
|
||||
<div class="form-group">
|
||||
<label class="form-label required">Ảnh minh chứng công trình</label>
|
||||
<div class="images-upload"
|
||||
onclick="document.getElementById('imagesInput').click()"
|
||||
ondrop="handleDrop(event)"
|
||||
ondragover="handleDragOver(event)"
|
||||
ondragenter="handleDragEnter(event)"
|
||||
ondragleave="handleDragLeave(event)">
|
||||
<div class="upload-icon">
|
||||
<i class="fas fa-images"></i>
|
||||
</div>
|
||||
<div class="upload-title">Chụp ảnh hoặc chọn file</div>
|
||||
<div class="upload-desc">Tải lên nhiều hình ảnh để thể hiện công trình của bạn</div>
|
||||
<div class="upload-requirements">
|
||||
• JPG, PNG tối đa 5MB mỗi file<br>
|
||||
• Tối thiểu 3 hình ảnh, tối đa 10 hình ảnh<br>
|
||||
• Nên có ảnh tổng thể và chi tiết
|
||||
</div>
|
||||
<input type="file"
|
||||
id="imagesInput"
|
||||
accept="image/*"
|
||||
multiple
|
||||
style="display: none;"
|
||||
onchange="handleFileSelect(event)">
|
||||
</div>
|
||||
|
||||
<div class="images-preview" id="imagesPreview">
|
||||
<div class="images-grid" id="imagesGrid"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Submit Button -->
|
||||
<button type="submit" class="submit-button" id="submitButton" disabled>
|
||||
<i class="fas fa-paper-plane"></i>
|
||||
Gửi duyệt công trình
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let selectedImages = [];
|
||||
let selectedProducts = [];
|
||||
|
||||
// Set max date to today
|
||||
document.getElementById('completionDate').max = new Date().toISOString().split('T')[0];
|
||||
|
||||
function goBack() {
|
||||
window.history.back();
|
||||
}
|
||||
|
||||
function addProduct() {
|
||||
const productName = prompt('Nhập tên sản phẩm:');
|
||||
if (productName) {
|
||||
const quantity = prompt('Nhập số lượng (m² hoặc viên):');
|
||||
if (quantity) {
|
||||
const product = {
|
||||
id: Date.now(),
|
||||
name: productName,
|
||||
quantity: quantity
|
||||
};
|
||||
|
||||
selectedProducts.push(product);
|
||||
updateProductsList();
|
||||
validateForm();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function removeProduct(productId) {
|
||||
selectedProducts = selectedProducts.filter(p => p.id !== productId);
|
||||
updateProductsList();
|
||||
validateForm();
|
||||
}
|
||||
|
||||
function updateProductsList() {
|
||||
const productsList = document.getElementById('productsList');
|
||||
|
||||
if (selectedProducts.length === 0) {
|
||||
productsList.innerHTML = `
|
||||
<div class="empty-products">
|
||||
<i class="fas fa-cube"></i>
|
||||
<div>Chưa có sản phẩm nào</div>
|
||||
<small>Nhấn "Thêm sản phẩm" để bắt đầu</small>
|
||||
</div>
|
||||
`;
|
||||
} else {
|
||||
productsList.innerHTML = selectedProducts.map(product => `
|
||||
<div class="product-item">
|
||||
<div class="product-info">
|
||||
<div class="product-name">${product.name}</div>
|
||||
<div class="product-details">Số lượng: ${product.quantity}</div>
|
||||
</div>
|
||||
<button type="button" class="remove-product-btn" onclick="removeProduct(${product.id})">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
`).join('');
|
||||
}
|
||||
}
|
||||
|
||||
function handleFileSelect(event) {
|
||||
const files = Array.from(event.target.files);
|
||||
addImages(files);
|
||||
}
|
||||
|
||||
function handleDrop(event) {
|
||||
event.preventDefault();
|
||||
const upload = document.querySelector('.images-upload');
|
||||
upload.classList.remove('dragover');
|
||||
|
||||
const files = Array.from(event.dataTransfer.files);
|
||||
addImages(files);
|
||||
}
|
||||
|
||||
function handleDragOver(event) {
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
function handleDragEnter(event) {
|
||||
event.preventDefault();
|
||||
const upload = document.querySelector('.images-upload');
|
||||
upload.classList.add('dragover');
|
||||
}
|
||||
|
||||
function handleDragLeave(event) {
|
||||
event.preventDefault();
|
||||
const upload = document.querySelector('.images-upload');
|
||||
upload.classList.remove('dragover');
|
||||
}
|
||||
|
||||
function addImages(files) {
|
||||
files.forEach(file => {
|
||||
if (file.type.startsWith('image/')) {
|
||||
if (file.size <= 5 * 1024 * 1024) { // 5MB limit
|
||||
if (selectedImages.length < 10) { // Max 10 images
|
||||
selectedImages.push(file);
|
||||
} else {
|
||||
alert('Tối đa 10 hình ảnh được phép tải lên');
|
||||
}
|
||||
} else {
|
||||
alert(`File "${file.name}" quá lớn. Vui lòng chọn file dưới 5MB.`);
|
||||
}
|
||||
} else {
|
||||
alert(`File "${file.name}" không phải là hình ảnh hợp lệ.`);
|
||||
}
|
||||
});
|
||||
|
||||
updateImagesPreview();
|
||||
validateForm();
|
||||
}
|
||||
|
||||
function updateImagesPreview() {
|
||||
const preview = document.getElementById('imagesPreview');
|
||||
const grid = document.getElementById('imagesGrid');
|
||||
|
||||
if (selectedImages.length > 0) {
|
||||
preview.classList.add('show');
|
||||
grid.innerHTML = '';
|
||||
|
||||
selectedImages.forEach((file, index) => {
|
||||
const reader = new FileReader();
|
||||
reader.onload = function(e) {
|
||||
const imageItem = document.createElement('div');
|
||||
imageItem.className = 'image-item';
|
||||
imageItem.innerHTML = `
|
||||
<img src="${e.target.result}" class="image-thumbnail" alt="Ảnh ${index + 1}">
|
||||
<button type="button" class="remove-image-btn" onclick="removeImage(${index})">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
`;
|
||||
grid.appendChild(imageItem);
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
});
|
||||
} else {
|
||||
preview.classList.remove('show');
|
||||
}
|
||||
}
|
||||
|
||||
function removeImage(index) {
|
||||
selectedImages.splice(index, 1);
|
||||
updateImagesPreview();
|
||||
validateForm();
|
||||
}
|
||||
|
||||
function validateForm() {
|
||||
const projectName = document.getElementById('projectName').value;
|
||||
const projectAddress = document.getElementById('projectAddress').value;
|
||||
const completionDate = document.getElementById('completionDate').value;
|
||||
const hasMinImages = selectedImages.length >= 3;
|
||||
|
||||
const isValid = projectName && projectAddress && completionDate && hasMinImages;
|
||||
document.getElementById('submitButton').disabled = !isValid;
|
||||
}
|
||||
|
||||
function submitForm(event) {
|
||||
event.preventDefault();
|
||||
|
||||
if (selectedImages.length < 3) {
|
||||
alert('Vui lòng tải lên ít nhất 3 hình ảnh của công trình.');
|
||||
return;
|
||||
}
|
||||
|
||||
const submitButton = document.getElementById('submitButton');
|
||||
submitButton.disabled = true;
|
||||
submitButton.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Đang gửi...';
|
||||
|
||||
// Simulate form submission
|
||||
setTimeout(() => {
|
||||
alert('Ghi nhận công trình đã được gửi thành công!\n\nChúng tôi sẽ xem xét và cập nhật điểm cho bạn trong vòng 2-3 ngày làm việc. Bạn sẽ nhận được thông báo khi có kết quả.');
|
||||
window.history.back();
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
// Add event listeners for validation
|
||||
document.getElementById('projectName').addEventListener('input', validateForm);
|
||||
document.getElementById('projectAddress').addEventListener('input', validateForm);
|
||||
document.getElementById('completionDate').addEventListener('change', validateForm);
|
||||
|
||||
function showToast(message, type = 'info') {
|
||||
const toast = document.createElement('div');
|
||||
toast.className = `fixed top-20 left-1/2 transform -translate-x-1/2 px-4 py-2 rounded-lg z-50 transition-all duration-300 ${
|
||||
type === 'success' ? 'bg-green-500' : 'bg-blue-500'
|
||||
} text-white`;
|
||||
toast.textContent = message;
|
||||
document.body.appendChild(toast);
|
||||
|
||||
setTimeout(() => {
|
||||
toast.style.opacity = '0';
|
||||
setTimeout(() => {
|
||||
document.body.removeChild(toast);
|
||||
}, 300);
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
// Animation on load
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const sections = document.querySelectorAll('.intro-section, .points-info, .form-section');
|
||||
sections.forEach((section, index) => {
|
||||
section.style.opacity = '0';
|
||||
section.style.transform = 'translateY(20px)';
|
||||
section.style.transition = 'all 0.5s ease';
|
||||
|
||||
setTimeout(() => {
|
||||
section.style.opacity = '1';
|
||||
section.style.transform = 'translateY(0)';
|
||||
}, index * 100);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
196
html/projects.html
Normal file
196
html/projects.html
Normal file
@@ -0,0 +1,196 @@
|
||||
<!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 công trình - 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 công trình</h1>
|
||||
<a href="project-create.html" class="back-button">
|
||||
<i class="fas fa-plus"></i>
|
||||
</a>
|
||||
</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="Tên công trình hoặc chủ đầu tư">
|
||||
</div>
|
||||
|
||||
<!-- Filter Section -->
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Projects List -->
|
||||
<div class="projects-list">
|
||||
<!-- Project Item 1 - In Progress -->
|
||||
<div class="project-card in-progress">
|
||||
<div class="project-status-indicator"></div>
|
||||
<div class="project-content">
|
||||
<div class="project-header mb-2">
|
||||
<h4 class="project-name">Villa Thủ Đức</h4>
|
||||
<span class="project-progress">65%</span>
|
||||
</div>
|
||||
|
||||
<div class="project-details">
|
||||
<p class="project-owner">
|
||||
<i class="fas fa-user"></i>
|
||||
Chủ đầu tư: Nguyễn Văn A
|
||||
</p>
|
||||
<p class="project-address">
|
||||
<i class="fas fa-map-marker-alt"></i>
|
||||
123 Đường Võ Văn Ngân, Thủ Đức, TP.HCM
|
||||
</p>
|
||||
<p class="project-date">
|
||||
<i class="fas fa-calendar"></i>
|
||||
Bắt đầu: 01/07/2023 - Dự kiến hoàn thành: 30/12/2023
|
||||
</p>
|
||||
<p class="project-status-text">
|
||||
<span class="status-badge in-progress">Đang thi công</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Project Item 2 - Completed -->
|
||||
<div class="project-card completed">
|
||||
<div class="project-status-indicator"></div>
|
||||
<div class="project-content">
|
||||
<div class="project-header mb-2">
|
||||
<h4 class="project-name">Chung cư Landmark 81</h4>
|
||||
<span class="project-progress">100%</span>
|
||||
</div>
|
||||
|
||||
<div class="project-details">
|
||||
<p class="project-owner">
|
||||
<i class="fas fa-user"></i>
|
||||
Chủ đầu tư: Công ty CP Vinhomes
|
||||
</p>
|
||||
<p class="project-address">
|
||||
<i class="fas fa-map-marker-alt"></i>
|
||||
720A Điện Biên Phủ, Bình Thạnh, TP.HCM
|
||||
</p>
|
||||
<p class="project-date">
|
||||
<i class="fas fa-calendar"></i>
|
||||
Bắt đầu: 15/03/2023 - Hoàn thành: 20/07/2023
|
||||
</p>
|
||||
<p class="project-status-text">
|
||||
<span class="status-badge completed">Hoàn thành</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Project Item 3 - In Progress -->
|
||||
<div class="project-card in-progress">
|
||||
<div class="project-status-indicator"></div>
|
||||
<div class="project-content">
|
||||
<div class="project-header mb-2">
|
||||
<h4 class="project-name">Nhà phố Bình Thạnh</h4>
|
||||
<span class="project-progress">40%</span>
|
||||
</div>
|
||||
|
||||
<div class="project-details">
|
||||
<p class="project-owner">
|
||||
<i class="fas fa-user"></i>
|
||||
Chủ đầu tư: Trần Thị B
|
||||
</p>
|
||||
<p class="project-address">
|
||||
<i class="fas fa-map-marker-alt"></i>
|
||||
456 Đường Xô Viết Nghệ Tĩnh, Bình Thạnh, TP.HCM
|
||||
</p>
|
||||
<p class="project-date">
|
||||
<i class="fas fa-calendar"></i>
|
||||
Bắt đầu: 15/08/2023 - Dự kiến hoàn thành: 15/01/2024
|
||||
</p>
|
||||
<p class="project-status-text">
|
||||
<span class="status-badge in-progress">Đang thi công</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Project Item 4 - Planning -->
|
||||
<div class="project-card planning">
|
||||
<div class="project-status-indicator"></div>
|
||||
<div class="project-content">
|
||||
<div class="project-header mb-2">
|
||||
<h4 class="project-name">Resort Phú Quốc</h4>
|
||||
<span class="project-progress">5%</span>
|
||||
</div>
|
||||
|
||||
<div class="project-details">
|
||||
<p class="project-owner">
|
||||
<i class="fas fa-user"></i>
|
||||
Chủ đầu tư: Tập đoàn Sun Group
|
||||
</p>
|
||||
<p class="project-address">
|
||||
<i class="fas fa-map-marker-alt"></i>
|
||||
Bãi Khem, Phú Quốc, Kiên Giang
|
||||
</p>
|
||||
<p class="project-date">
|
||||
<i class="fas fa-calendar"></i>
|
||||
Bắt đầu: 01/10/2023 - Dự kiến hoàn thành: 30/06/2024
|
||||
</p>
|
||||
<p class="project-status-text">
|
||||
<span class="status-badge planning">Lên kế hoạch</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Project Item 5 - Completed -->
|
||||
<div class="project-card completed">
|
||||
<div class="project-status-indicator"></div>
|
||||
<div class="project-content">
|
||||
<div class="project-header mb-2">
|
||||
<h4 class="project-name">Văn phòng Quận 1</h4>
|
||||
<span class="project-progress">100%</span>
|
||||
</div>
|
||||
|
||||
<div class="project-details">
|
||||
<p class="project-owner">
|
||||
<i class="fas fa-user"></i>
|
||||
Chủ đầu tư: Công ty TNHH ABC
|
||||
</p>
|
||||
<p class="project-address">
|
||||
<i class="fas fa-map-marker-alt"></i>
|
||||
25 Đường Nguyễn Huệ, Quận 1, TP.HCM
|
||||
</p>
|
||||
<p class="project-date">
|
||||
<i class="fas fa-calendar"></i>
|
||||
Bắt đầu: 10/05/2023 - Hoàn thành: 25/07/2023
|
||||
</p>
|
||||
<p class="project-status-text">
|
||||
<span class="status-badge completed">Hoàn thành</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- FAB Button for Chat -->
|
||||
<button class="fab" onclick="window.location.href='chat.html'">
|
||||
<i class="fas fa-comments"></i>
|
||||
</button>
|
||||
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
473
html/promotion-detail.html
Normal file
473
html/promotion-detail.html
Normal file
@@ -0,0 +1,473 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="vi">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Chi tiết khuyến mãi - Worker App</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<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-dark: #1d4ed8;
|
||||
--secondary-color: #64748b;
|
||||
--success-color: #10b981;
|
||||
--warning-color: #f59e0b;
|
||||
--danger-color: #ef4444;
|
||||
--background-color: #f8fafc;
|
||||
--card-background: #ffffff;
|
||||
--text-primary: #1e293b;
|
||||
--text-secondary: #64748b;
|
||||
--border-color: #e2e8f0;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
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 {
|
||||
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);
|
||||
}
|
||||
|
||||
.header-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 1rem;
|
||||
max-width: 480px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--primary-color);
|
||||
font-size: 1.25rem;
|
||||
cursor: pointer;
|
||||
padding: 0.5rem;
|
||||
border-radius: 0.5rem;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.back-button:hover {
|
||||
background-color: #f1f5f9;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.action-button {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--secondary-color);
|
||||
font-size: 1.25rem;
|
||||
cursor: pointer;
|
||||
padding: 0.5rem;
|
||||
border-radius: 0.5rem;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.action-button:hover {
|
||||
background-color: #f1f5f9;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 480px;
|
||||
margin: 0 auto;
|
||||
background: var(--card-background);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding-bottom: 100px;
|
||||
}
|
||||
|
||||
.promotion-banner {
|
||||
width: 100%;
|
||||
height: 240px;
|
||||
object-fit: cover;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.promotion-header {
|
||||
padding: 1.5rem 1rem 1rem;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.promotion-title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 0.75rem;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.promotion-dates {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
color: var(--warning-color);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.promotion-section {
|
||||
padding: 1.5rem 1rem;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.section-content {
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.section-content p {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.section-content ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.section-content li {
|
||||
padding: 0.5rem 0;
|
||||
border-bottom: 1px solid #f1f5f9;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.section-content li:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.section-content li::before {
|
||||
content: "•";
|
||||
color: var(--primary-color);
|
||||
font-weight: bold;
|
||||
min-width: 1rem;
|
||||
}
|
||||
|
||||
.highlight-box {
|
||||
background: linear-gradient(135deg, #fef3c7, #fed7aa);
|
||||
border: 1px solid #fbbf24;
|
||||
border-radius: 0.75rem;
|
||||
padding: 1rem;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.highlight-text {
|
||||
color: #92400e;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.action-bar {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: var(--card-background);
|
||||
border-top: 1px solid var(--border-color);
|
||||
padding: 1rem;
|
||||
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
.action-bar-content {
|
||||
max-width: 480px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.cta-button {
|
||||
width: 100%;
|
||||
background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 1rem;
|
||||
border-radius: 0.75rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.cta-button:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3);
|
||||
}
|
||||
|
||||
.cta-button:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
background: var(--success-color);
|
||||
color: white;
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 1rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.promotion-title {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.promotion-banner {
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.promotion-header {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.promotion-section {
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
</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">Chi tiết khuyến mãi</h1>
|
||||
<div class="header-actions">
|
||||
<button class="action-button" onclick="sharePromotion()">
|
||||
<i class="fas fa-share-alt"></i>
|
||||
</button>
|
||||
<button class="action-button" onclick="savePromotion()">
|
||||
<i class="fas fa-bookmark"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="content">
|
||||
<!-- Banner Image -->
|
||||
<img src="https://images.unsplash.com/photo-1581094794329-c8112a89af12?w=800&h=400&fit=crop"
|
||||
alt="Banner khuyến mãi"
|
||||
class="promotion-banner">
|
||||
|
||||
<!-- Promotion Header -->
|
||||
<div class="promotion-header">
|
||||
<h2 class="promotion-title">Khuyến Mãi Lớn Cuối Năm - Giảm Giá Đến 30% Toàn Bộ Gạch Men</h2>
|
||||
<div class="promotion-dates">
|
||||
<i class="fas fa-clock"></i>
|
||||
<span>01/11/2024 - 31/12/2024</span>
|
||||
<span class="badge">
|
||||
<i class="fas fa-fire"></i>
|
||||
Đang diễn ra
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Program Content -->
|
||||
<div class="promotion-section">
|
||||
<h3 class="section-title">
|
||||
<i class="fas fa-gift"></i>
|
||||
Nội dung chương trình
|
||||
</h3>
|
||||
<div class="section-content">
|
||||
<p>Chương trình khuyến mãi đặc biệt dành cho các công trình xây dựng với mức giảm giá hấp dẫn nhất trong năm.</p>
|
||||
|
||||
<div class="highlight-box">
|
||||
<p class="highlight-text">🎉 Giảm giá lên đến 30% cho tất cả sản phẩm gạch men cao cấp</p>
|
||||
</div>
|
||||
|
||||
<p><strong>Ưu đãi chi tiết:</strong></p>
|
||||
<ul>
|
||||
<li>Gạch men 60x60cm: Giảm 25% - 30%</li>
|
||||
<li>Gạch men 80x80cm: Giảm 20% - 25%</li>
|
||||
<li>Gạch men 120x60cm: Giảm 15% - 20%</li>
|
||||
<li>Gạch granite 60x60cm: Giảm 20% - 25%</li>
|
||||
<li>Gạch ốp tường: Giảm 15% - 20%</li>
|
||||
</ul>
|
||||
|
||||
<p><strong>Ưu đãi bổ sung:</strong></p>
|
||||
<ul>
|
||||
<li>Miễn phí vận chuyển cho đơn hàng từ 500m²</li>
|
||||
<li>Tặng keo dán gạch cho đơn hàng từ 200m²</li>
|
||||
<li>Hỗ trợ thiết kế 3D miễn phí</li>
|
||||
<li>Bảo hành sản phẩm lên đến 15 năm</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Terms & Conditions -->
|
||||
<div class="promotion-section">
|
||||
<h3 class="section-title">
|
||||
<i class="fas fa-file-contract"></i>
|
||||
Điều kiện áp dụng
|
||||
</h3>
|
||||
<div class="section-content">
|
||||
<ul>
|
||||
<li>Áp dụng cho tất cả khách hàng là thợ xây dựng đã đăng ký tài khoản</li>
|
||||
<li>Đơn hàng tối thiểu: 50m² sản phẩm gạch men</li>
|
||||
<li>Thanh toán tối thiểu 50% giá trị đơn hàng khi đặt</li>
|
||||
<li>Không áp dụng đồng thời với các chương trình khuyến mãi khác</li>
|
||||
<li>Giá đã bao gồm VAT, chưa bao gồm phí vận chuyển</li>
|
||||
<li>Sản phẩm không áp dụng đổi trả sau khi đã cắt, gia công</li>
|
||||
<li>Thời gian giao hàng: 3-7 ngày làm việc tùy theo khu vực</li>
|
||||
<li>Khuyến mãi có thể kết thúc sớm nếu hết hàng</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Contact Info -->
|
||||
<div class="promotion-section">
|
||||
<h3 class="section-title">
|
||||
<i class="fas fa-phone"></i>
|
||||
Thông tin liên hệ
|
||||
</h3>
|
||||
<div class="section-content">
|
||||
<p><strong>Hotline:</strong> 1900-xxxx (8:00 - 18:00 hàng ngày)</p>
|
||||
<p><strong>Email:</strong> promotion@company.com</p>
|
||||
<p><strong>Zalo:</strong> 0123.456.789</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Action Bar -->
|
||||
<div class="action-bar">
|
||||
<div class="action-bar-content">
|
||||
<button class="cta-button" onclick="viewApplicableProducts()">
|
||||
<i class="fas fa-eye"></i>
|
||||
Xem sản phẩm áp dụng
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function goBack() {
|
||||
window.history.back();
|
||||
}
|
||||
|
||||
function sharePromotion() {
|
||||
if (navigator.share) {
|
||||
navigator.share({
|
||||
title: 'Khuyến Mãi Lớn Cuối Năm - Giảm Giá Đến 30%',
|
||||
text: 'Khuyến mãi đặc biệt cho gạch men với mức giảm giá lên đến 30%',
|
||||
url: window.location.href
|
||||
}).catch(console.error);
|
||||
} else {
|
||||
// Fallback cho các trình duyệt không hỗ trợ Web Share API
|
||||
const url = window.location.href;
|
||||
navigator.clipboard.writeText(url).then(() => {
|
||||
alert('Đã sao chép link khuyến mãi!');
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function savePromotion() {
|
||||
const button = event.target.closest('.action-button');
|
||||
const icon = button.querySelector('i');
|
||||
|
||||
if (icon.classList.contains('fas')) {
|
||||
icon.classList.remove('fas');
|
||||
icon.classList.add('far');
|
||||
showToast('Đã bỏ lưu khuyến mãi');
|
||||
} else {
|
||||
icon.classList.remove('far');
|
||||
icon.classList.add('fas');
|
||||
showToast('Đã lưu khuyến mãi');
|
||||
}
|
||||
}
|
||||
|
||||
function viewApplicableProducts() {
|
||||
// Điều hướng đến trang sản phẩm với bộ lọc khuyến mãi
|
||||
window.location.href = 'products.html?promotion=year-end-2024';
|
||||
}
|
||||
|
||||
function showToast(message) {
|
||||
// Tạo toast notification
|
||||
const toast = document.createElement('div');
|
||||
toast.className = 'fixed top-20 left-1/2 transform -translate-x-1/2 bg-black text-white px-4 py-2 rounded-lg z-50 transition-all duration-300';
|
||||
toast.textContent = message;
|
||||
document.body.appendChild(toast);
|
||||
|
||||
// Hiệu ứng hiển thị
|
||||
setTimeout(() => {
|
||||
toast.style.opacity = '0';
|
||||
setTimeout(() => {
|
||||
document.body.removeChild(toast);
|
||||
}, 300);
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
// Thêm hiệu ứng scroll cho header
|
||||
window.addEventListener('scroll', function() {
|
||||
const header = document.querySelector('.header');
|
||||
if (window.scrollY > 10) {
|
||||
header.style.boxShadow = '0 2px 10px rgba(0, 0, 0, 0.1)';
|
||||
} else {
|
||||
header.style.boxShadow = '0 1px 3px rgba(0, 0, 0, 0.1)';
|
||||
}
|
||||
});
|
||||
|
||||
// Animation khi load trang
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const sections = document.querySelectorAll('.promotion-section');
|
||||
sections.forEach((section, index) => {
|
||||
section.style.opacity = '0';
|
||||
section.style.transform = 'translateY(20px)';
|
||||
section.style.transition = 'all 0.5s ease';
|
||||
|
||||
setTimeout(() => {
|
||||
section.style.opacity = '1';
|
||||
section.style.transform = 'translateY(0)';
|
||||
}, index * 100);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
121
html/promotions.html
Normal file
121
html/promotions.html
Normal file
@@ -0,0 +1,121 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="vi">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Khuyến mãi - 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">
|
||||
<h1 class="header-title">Khuyến mãi</h1>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<!-- Featured Promotion -->
|
||||
<div class="card" style="background: linear-gradient(135deg, #005B9A 0%, #38B6FF 100%); color: white; margin-bottom: 24px;">
|
||||
<div class="d-flex justify-between align-center">
|
||||
<div>
|
||||
<h2 style="color: white; margin-bottom: 8px;">Flash Sale Cuối Năm</h2>
|
||||
<p style="color: rgba(255,255,255,0.9); margin-bottom: 12px;">Giảm đến 50% toàn bộ sản phẩm</p>
|
||||
<p class="text-small" style="color: rgba(255,255,255,0.8);">
|
||||
<i class="fas fa-clock"></i> Còn 2 ngày 15:30:45
|
||||
</p>
|
||||
</div>
|
||||
<div style="font-size: 48px;">
|
||||
<i class="fas fa-percentage"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Promotion List -->
|
||||
<div class="mb-3">
|
||||
<div class="card" style="padding: 0; overflow: hidden; margin-bottom: 16px;">
|
||||
<img src="https://images.unsplash.com/photo-1615971677499-5467cbab01c0?w=400&h=150&fit=crop" alt="Promotion" style="width: 100%; height: 150px; object-fit: cover;">
|
||||
<div style="padding: 16px;">
|
||||
<h3 style="margin-bottom: 8px;">Mua công nhắc - Khuyến mãi càng lớn</h3>
|
||||
<p class="text-small text-muted mb-2">Giảm đến 30% cho đơn hàng từ 10 triệu, giảm 40% cho đơn từ 20 triệu</p>
|
||||
<div class="d-flex justify-between align-center">
|
||||
<span class="text-small text-primary">
|
||||
<i class="fas fa-calendar"></i> 01/12 - 31/12/2023
|
||||
</span>
|
||||
<button class="btn btn-primary btn-sm" onclick="window.location.href='promotion-detail.html'">Chi tiết</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" style="padding: 0; overflow: hidden; margin-bottom: 16px;">
|
||||
<img src="https://images.unsplash.com/photo-1542314831-068cd1dbfeeb?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Promotion" style="width: 100%; height: 150px; object-fit: cover;">
|
||||
<div style="padding: 16px;">
|
||||
<h3 style="margin-bottom: 8px;">Keo chà ron tặng kèm miễn phí</h3>
|
||||
<p class="text-small text-muted mb-2">Mua gạch Eurotile từ 50m² tặng keo chà ron cao cấp trị giá 2 triệu</p>
|
||||
<div class="d-flex justify-between align-center">
|
||||
<span class="text-small text-primary">
|
||||
<i class="fas fa-calendar"></i> 15/11 - 15/12/2023
|
||||
</span>
|
||||
<button class="btn btn-primary btn-sm">Chi tiết</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" style="padding: 0; overflow: hidden; margin-bottom: 16px;">
|
||||
<img src="https://images.unsplash.com/photo-1565538420870-da08ff96a207?w=400&h=150&fit=crop" alt="Promotion" style="width: 100%; height: 150px; object-fit: cover;">
|
||||
<div style="padding: 16px;">
|
||||
<h3 style="margin-bottom: 8px;">Ưu đãi đặc biệt thành viên VIP</h3>
|
||||
<p class="text-small text-muted mb-2">Chiết khấu thêm 5% cho Diamond, 3% cho Gold, 2% cho Titan</p>
|
||||
<div class="d-flex justify-between align-center">
|
||||
<span class="text-small text-primary">
|
||||
<i class="fas fa-calendar"></i> Áp dụng thường xuyên
|
||||
</span>
|
||||
<button class="btn btn-primary btn-sm">Chi tiết</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" style="padding: 0; overflow: hidden; margin-bottom: 16px;">
|
||||
<img src="https://images.unsplash.com/photo-1600566753190-17f0baa2a6c3?w=400&h=150&fit=crop" alt="Promotion" style="width: 100%; height: 150px; object-fit: cover;">
|
||||
<div style="padding: 16px;">
|
||||
<h3 style="margin-bottom: 8px;">Combo gạch phòng tắm siêu tiết kiệm</h3>
|
||||
<p class="text-small text-muted mb-2">Trọn bộ gạch ốp lát phòng tắm chỉ từ 3.5 triệu/phòng</p>
|
||||
<div class="d-flex justify-between align-center">
|
||||
<span class="text-small text-primary">
|
||||
<i class="fas fa-calendar"></i> 01/11 - 30/11/2023
|
||||
</span>
|
||||
<button class="btn btn-primary btn-sm">Chi tiết</button>
|
||||
</div>
|
||||
</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="promotions.html" class="nav-item active">
|
||||
<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" 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>
|
||||
</body>
|
||||
</html>
|
||||
234
html/quote-create.html
Normal file
234
html/quote-create.html
Normal file
@@ -0,0 +1,234 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="vi">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Tạo yêu cầu báo 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="quotes-list.html" class="back-button">
|
||||
<i class="fas fa-arrow-left"></i>
|
||||
</a>
|
||||
<h1 class="header-title">Tạo yêu cầu báo giá</h1>
|
||||
<div style="width: 32px;"></div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="form-container">
|
||||
<!-- Project Information -->
|
||||
<div class="card">
|
||||
<h3 class="card-title mb-3">Thông tin dự án</h3>
|
||||
|
||||
<form id="quoteForm">
|
||||
<div class="form-group">
|
||||
<label class="form-label">Tên dự án *</label>
|
||||
<input type="text" class="form-input" placeholder="Nhập tên dự án" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">Địa chỉ dự án *</label>
|
||||
<input type="text" class="form-input" placeholder="Nhập địa chỉ chi tiết" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">Loại công trình</label>
|
||||
<select class="form-select">
|
||||
<option value="">Chọn loại công trình</option>
|
||||
<option value="villa">Villa</option>
|
||||
<option value="apartment">Chung cư</option>
|
||||
<option value="office">Văn phòng</option>
|
||||
<option value="commercial">Thương mại</option>
|
||||
<option value="resort">Resort/Khách sạn</option>
|
||||
<option value="house">Nhà phố</option>
|
||||
<option value="other">Khác</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">Diện tích dự kiến (m²)</label>
|
||||
<input type="number" class="form-input" placeholder="Nhập diện tích">
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Product List -->
|
||||
<div class="card">
|
||||
<div class="d-flex justify-between align-center mb-3">
|
||||
<h3 class="card-title">Danh sách sản phẩm</h3>
|
||||
<button class="btn btn-secondary btn-sm" onclick="addProduct()">
|
||||
<i class="fas fa-plus"></i>
|
||||
Thêm sản phẩm
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div id="productList">
|
||||
<!-- Product Item 1 -->
|
||||
<div class="product-quote-item">
|
||||
<div class="product-quote-info">
|
||||
<img src="https://placehold.co/60x60/F5F5F5/005B9A/png?text=G1" alt="Product">
|
||||
<div class="product-quote-details">
|
||||
<h4 class="product-quote-name">Gạch Eurotile MỘC LAM E03</h4>
|
||||
<p class="product-quote-specs">60x60cm - Matt</p>
|
||||
<p class="product-quote-price">285.000đ/m²</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-quote-actions">
|
||||
<div class="quantity-input">
|
||||
<input type="number" value="50" min="1" class="qty-input">
|
||||
<span class="qty-unit">m²</span>
|
||||
</div>
|
||||
<button class="btn-remove-product" onclick="removeProduct(this)">
|
||||
<i class="fas fa-trash"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Product Item 2 -->
|
||||
<div class="product-quote-item">
|
||||
<div class="product-quote-info">
|
||||
<img src="https://placehold.co/60x60/E8E8E8/005B9A/png?text=G2" alt="Product">
|
||||
<div class="product-quote-details">
|
||||
<h4 class="product-quote-name">Gạch Granite Premium G501</h4>
|
||||
<p class="product-quote-specs">80x80cm - Polished</p>
|
||||
<p class="product-quote-price">420.000đ/m²</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-quote-actions">
|
||||
<div class="quantity-input">
|
||||
<input type="number" value="30" min="1" class="qty-input">
|
||||
<span class="qty-unit">m²</span>
|
||||
</div>
|
||||
<button class="btn-remove-product" onclick="removeProduct(this)">
|
||||
<i class="fas fa-trash"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Empty State for Products -->
|
||||
<div class="empty-product-state" id="emptyProductState" style="display: none;">
|
||||
<i class="fas fa-inbox empty-icon-small"></i>
|
||||
<p>Chưa có sản phẩm nào</p>
|
||||
<button class="btn btn-primary btn-sm mt-2" onclick="addProduct()">
|
||||
Thêm sản phẩm đầu tiên
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Additional Notes -->
|
||||
<div class="card">
|
||||
<h3 class="card-title mb-3">Ghi chú</h3>
|
||||
<textarea class="form-textarea" rows="4" placeholder="Thêm ghi chú hoặc yêu cầu đặc biệt cho báo giá này..."></textarea>
|
||||
</div>
|
||||
|
||||
<!-- Quote Summary -->
|
||||
<div class="card quote-summary">
|
||||
<h3 class="card-title mb-3">Tóm tắt yêu cầu</h3>
|
||||
<div class="summary-row">
|
||||
<span>Tổng sản phẩm:</span>
|
||||
<span id="totalProducts">2 sản phẩm</span>
|
||||
</div>
|
||||
<div class="summary-row">
|
||||
<span>Tổng diện tích:</span>
|
||||
<span id="totalArea">80 m²</span>
|
||||
</div>
|
||||
<div class="summary-row">
|
||||
<span>Giá trị ước tính:</span>
|
||||
<span id="estimatedValue">26.850.000 VND</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<div class="form-actions">
|
||||
<button type="button" class="btn btn-secondary" onclick="saveDraft()">
|
||||
<i class="fas fa-save"></i>
|
||||
Lưu nháp
|
||||
</button>
|
||||
<button type="submit" class="btn btn-primary" onclick="submitQuoteRequest()">
|
||||
<i class="fas fa-paper-plane"></i>
|
||||
Gửi yêu cầu
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function addProduct() {
|
||||
alert('Chức năng thêm sản phẩm sẽ được phát triển - sẽ mở danh sách sản phẩm để chọn');
|
||||
}
|
||||
|
||||
function removeProduct(button) {
|
||||
if (confirm('Bạn có chắc chắn muốn xóa sản phẩm này?')) {
|
||||
const productItem = button.closest('.product-quote-item');
|
||||
productItem.remove();
|
||||
updateSummary();
|
||||
|
||||
// Check if product list is empty
|
||||
const productList = document.getElementById('productList');
|
||||
if (productList.children.length === 0) {
|
||||
document.getElementById('emptyProductState').style.display = 'block';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function updateSummary() {
|
||||
const productItems = document.querySelectorAll('.product-quote-item');
|
||||
let totalProducts = productItems.length;
|
||||
let totalArea = 0;
|
||||
let estimatedValue = 0;
|
||||
|
||||
productItems.forEach(item => {
|
||||
const qty = parseInt(item.querySelector('.qty-input').value) || 0;
|
||||
const priceText = item.querySelector('.product-quote-price').textContent;
|
||||
const price = parseInt(priceText.replace(/[^\d]/g, '')) || 0;
|
||||
|
||||
totalArea += qty;
|
||||
estimatedValue += qty * price;
|
||||
});
|
||||
|
||||
document.getElementById('totalProducts').textContent = `${totalProducts} sản phẩm`;
|
||||
document.getElementById('totalArea').textContent = `${totalArea} m²`;
|
||||
document.getElementById('estimatedValue').textContent = estimatedValue.toLocaleString('vi-VN') + ' VND';
|
||||
}
|
||||
|
||||
function saveDraft() {
|
||||
alert('Đã lưu nháp yêu cầu báo giá!');
|
||||
}
|
||||
|
||||
function submitQuoteRequest() {
|
||||
const form = document.getElementById('quoteForm');
|
||||
const productItems = document.querySelectorAll('.product-quote-item');
|
||||
|
||||
if (!form.checkValidity()) {
|
||||
form.reportValidity();
|
||||
return;
|
||||
}
|
||||
|
||||
if (productItems.length === 0) {
|
||||
alert('Vui lòng thêm ít nhất một sản phẩm!');
|
||||
return;
|
||||
}
|
||||
|
||||
alert('Yêu cầu báo giá đã được gửi thành công! Chúng tôi sẽ liên hệ trong vòng 24 giờ.');
|
||||
window.location.href = 'quotes-list.html';
|
||||
}
|
||||
|
||||
// Update summary when quantity changes
|
||||
document.addEventListener('input', function(e) {
|
||||
if (e.target.classList.contains('qty-input')) {
|
||||
updateSummary();
|
||||
}
|
||||
});
|
||||
|
||||
// Initial summary calculation
|
||||
document.addEventListener('DOMContentLoaded', updateSummary);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
173
html/quotes-list.html
Normal file
173
html/quotes-list.html
Normal file
@@ -0,0 +1,173 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="vi">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Yêu cầu báo 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">Yêu cầu báo giá</h1>
|
||||
<a href="quote-create.html" class="back-button">
|
||||
<i class="fas fa-plus"></i>
|
||||
</a>
|
||||
</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="Tìm theo mã yêu cầu hoặc tên dự án">
|
||||
</div>
|
||||
|
||||
<!-- Filter Section -->
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quote Requests List -->
|
||||
<div class="quote-requests-list">
|
||||
<!-- Quote Request 1 - New -->
|
||||
<div class="quote-request-card new">
|
||||
<div class="quote-request-status-indicator"></div>
|
||||
<div class="quote-request-content">
|
||||
<div class="d-flex justify-between align-start mb-2">
|
||||
<h4 class="quote-request-id">#YC001234</h4>
|
||||
<span class="quote-request-date">05/08/2023</span>
|
||||
</div>
|
||||
|
||||
<div class="quote-request-details">
|
||||
<p class="quote-request-project">Dự án: Villa Thủ Đức - Giai đoạn 2</p>
|
||||
<p class="quote-request-items">5 sản phẩm - Diện tích: 200m²</p>
|
||||
<p class="quote-request-status-text">
|
||||
<span class="status-badge new">Mới tạo</span>
|
||||
</p>
|
||||
<p class="quote-request-note">Yêu cầu báo giá cho gạch granite cao cấp</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quote Request 2 - Waiting Response -->
|
||||
<div class="quote-request-card waiting">
|
||||
<div class="quote-request-status-indicator"></div>
|
||||
<div class="quote-request-content">
|
||||
<div class="d-flex justify-between align-start mb-2">
|
||||
<h4 class="quote-request-id">#YC001233</h4>
|
||||
<span class="quote-request-date">03/08/2023</span>
|
||||
</div>
|
||||
|
||||
<div class="quote-request-details">
|
||||
<p class="quote-request-project">Dự án: Chung cư Landmark Center</p>
|
||||
<p class="quote-request-items">8 sản phẩm - Diện tích: 500m²</p>
|
||||
<p class="quote-request-status-text">
|
||||
<span class="status-badge waiting">Chờ phản hồi</span>
|
||||
</p>
|
||||
<p class="quote-request-note">Báo giá cho sảnh chính và hành lang</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quote Request 3 - Has Quote -->
|
||||
<div class="quote-request-card quoted">
|
||||
<div class="quote-request-status-indicator"></div>
|
||||
<div class="quote-request-content">
|
||||
<div class="d-flex justify-between align-start mb-2">
|
||||
<h4 class="quote-request-id">#YC001232</h4>
|
||||
<span class="quote-request-date">01/08/2023</span>
|
||||
</div>
|
||||
|
||||
<div class="quote-request-details">
|
||||
<p class="quote-request-project">Dự án: Nhà phố Bình Thạnh</p>
|
||||
<p class="quote-request-items">3 sản phẩm - Diện tích: 120m²</p>
|
||||
<p class="quote-request-status-text">
|
||||
<span class="status-badge quoted">Đã có báo giá</span>
|
||||
</p>
|
||||
<p class="quote-request-note">Tổng giá trị: 28.900.000 VND</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quote Request 4 - New -->
|
||||
<div class="quote-request-card new">
|
||||
<div class="quote-request-status-indicator"></div>
|
||||
<div class="quote-request-content">
|
||||
<div class="d-flex justify-between align-start mb-2">
|
||||
<h4 class="quote-request-id">#YC001231</h4>
|
||||
<span class="quote-request-date">31/07/2023</span>
|
||||
</div>
|
||||
|
||||
<div class="quote-request-details">
|
||||
<p class="quote-request-project">Dự án: Văn phòng Quận 7</p>
|
||||
<p class="quote-request-items">4 sản phẩm - Diện tích: 300m²</p>
|
||||
<p class="quote-request-status-text">
|
||||
<span class="status-badge new">Mới tạo</span>
|
||||
</p>
|
||||
<p class="quote-request-note">Gạch porcelain cho khu vực làm việc</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quote Request 5 - Waiting Response -->
|
||||
<div class="quote-request-card waiting">
|
||||
<div class="quote-request-status-indicator"></div>
|
||||
<div class="quote-request-content">
|
||||
<div class="d-flex justify-between align-start mb-2">
|
||||
<h4 class="quote-request-id">#YC001230</h4>
|
||||
<span class="quote-request-date">29/07/2023</span>
|
||||
</div>
|
||||
|
||||
<div class="quote-request-details">
|
||||
<p class="quote-request-project">Dự án: Resort Vũng Tàu</p>
|
||||
<p class="quote-request-items">12 sản phẩm - Diện tích: 800m²</p>
|
||||
<p class="quote-request-status-text">
|
||||
<span class="status-badge waiting">Chờ phản hồi</span>
|
||||
</p>
|
||||
<p class="quote-request-note">Yêu cầu báo giá cho khu vực pool và spa</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- FAB Button for Chat -->
|
||||
<button class="fab" onclick="window.location.href='chat.html'">
|
||||
<i class="fas fa-comments"></i>
|
||||
</button>
|
||||
|
||||
<!-- 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>
|
||||
</div>-->
|
||||
</body>
|
||||
</html>
|
||||
166
html/quotes.html
Normal file
166
html/quotes.html
Normal file
@@ -0,0 +1,166 @@
|
||||
<!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 báo 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">Danh sách báo giá</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ã báo giá hoặc tên dự án">
|
||||
</div>
|
||||
|
||||
<!-- Filter Section -->
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quotes List -->
|
||||
<div class="quotes-list">
|
||||
<!-- Quote Item 1 - New -->
|
||||
<div class="quote-card new">
|
||||
<div class="quote-status-indicator"></div>
|
||||
<div class="quote-content">
|
||||
<div class="d-flex justify-between align-start mb-2">
|
||||
<h4 class="quote-id">#BG001234</h4>
|
||||
<span class="quote-amount">45.500.000 VND</span>
|
||||
</div>
|
||||
|
||||
<div class="quote-details">
|
||||
<p class="quote-date">Ngày tạo: 03/08/2023</p>
|
||||
<p class="quote-project">Dự án: Villa Thủ Đức</p>
|
||||
<p class="quote-status-text">
|
||||
<span class="status-badge new">Mới</span>
|
||||
</p>
|
||||
<p class="quote-note">Gạch granite cao cấp - Diện tích: 200m²</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quote Item 2 - Sent -->
|
||||
<div class="quote-card sent">
|
||||
<div class="quote-status-indicator"></div>
|
||||
<div class="quote-content">
|
||||
<div class="d-flex justify-between align-start mb-2">
|
||||
<h4 class="quote-id">#BG001233</h4>
|
||||
<span class="quote-amount">32.800.000 VND</span>
|
||||
</div>
|
||||
|
||||
<div class="quote-details">
|
||||
<p class="quote-date">Ngày tạo: 02/08/2023</p>
|
||||
<p class="quote-project">Dự án: Căn hộ Landmark 81</p>
|
||||
<p class="quote-status-text">
|
||||
<span class="status-badge sent">Đã gửi</span>
|
||||
</p>
|
||||
<p class="quote-note">Gạch porcelain - Diện tích: 150m²</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quote Item 3 - Accepted -->
|
||||
<div class="quote-card accepted">
|
||||
<div class="quote-status-indicator"></div>
|
||||
<div class="quote-content">
|
||||
<div class="d-flex justify-between align-start mb-2">
|
||||
<h4 class="quote-id">#BG001232</h4>
|
||||
<span class="quote-amount">28.900.000 VND</span>
|
||||
</div>
|
||||
|
||||
<div class="quote-details">
|
||||
<p class="quote-date">Ngày tạo: 01/08/2023</p>
|
||||
<p class="quote-project">Dự án: Nhà phố Bình Thạnh</p>
|
||||
<p class="quote-status-text">
|
||||
<span class="status-badge accepted">Chấp nhận</span>
|
||||
</p>
|
||||
<p class="quote-note">Gạch ceramic cao cấp - Diện tích: 120m²</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quote Item 4 - Rejected -->
|
||||
<div class="quote-card rejected">
|
||||
<div class="quote-status-indicator"></div>
|
||||
<div class="quote-content">
|
||||
<div class="d-flex justify-between align-start mb-2">
|
||||
<h4 class="quote-id">#BG001231</h4>
|
||||
<span class="quote-amount">18.500.000 VND</span>
|
||||
</div>
|
||||
|
||||
<div class="quote-details">
|
||||
<p class="quote-date">Ngày tạo: 31/07/2023</p>
|
||||
<p class="quote-project">Dự án: Chung cư Vinhomes</p>
|
||||
<p class="quote-status-text">
|
||||
<span class="status-badge rejected">Từ chối</span>
|
||||
</p>
|
||||
<p class="quote-note">Gạch mosaic - Diện tích: 80m²</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quote Item 5 - Sent -->
|
||||
<div class="quote-card sent">
|
||||
<div class="quote-status-indicator"></div>
|
||||
<div class="quote-content">
|
||||
<div class="d-flex justify-between align-start mb-2">
|
||||
<h4 class="quote-id">#BG001230</h4>
|
||||
<span class="quote-amount">52.300.000 VND</span>
|
||||
</div>
|
||||
|
||||
<div class="quote-details">
|
||||
<p class="quote-date">Ngày tạo: 30/07/2023</p>
|
||||
<p class="quote-project">Dự án: Resort Phú Quốc</p>
|
||||
<p class="quote-status-text">
|
||||
<span class="status-badge sent">Đã gửi</span>
|
||||
</p>
|
||||
<p class="quote-note">Gạch terrazzo cao cấp - Diện tích: 300m²</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quote Item 6 - New -->
|
||||
<div class="quote-card new">
|
||||
<div class="quote-status-indicator"></div>
|
||||
<div class="quote-content">
|
||||
<div class="d-flex justify-between align-start mb-2">
|
||||
<h4 class="quote-id">#BG001229</h4>
|
||||
<span class="quote-amount">15.200.000 VND</span>
|
||||
</div>
|
||||
|
||||
<div class="quote-details">
|
||||
<p class="quote-date">Ngày tạo: 29/07/2023</p>
|
||||
<p class="quote-project">Dự án: Văn phòng Quận 1</p>
|
||||
<p class="quote-status-text">
|
||||
<span class="status-badge new">Mới</span>
|
||||
</p>
|
||||
<p class="quote-note">Gạch granite polished - Diện tích: 90m²</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
624
html/redeem-confirm.html
Normal file
624
html/redeem-confirm.html
Normal file
@@ -0,0 +1,624 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="vi">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Xác nhận đổi quà - Worker App</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<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-dark: #1d4ed8;
|
||||
--secondary-color: #64748b;
|
||||
--success-color: #10b981;
|
||||
--warning-color: #f59e0b;
|
||||
--danger-color: #ef4444;
|
||||
--background-color: #f8fafc;
|
||||
--card-background: #ffffff;
|
||||
--text-primary: #1e293b;
|
||||
--text-secondary: #64748b;
|
||||
--border-color: #e2e8f0;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
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 {
|
||||
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);
|
||||
}
|
||||
|
||||
.header-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 1rem;
|
||||
max-width: 480px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--primary-color);
|
||||
font-size: 1.25rem;
|
||||
cursor: pointer;
|
||||
padding: 0.5rem;
|
||||
border-radius: 0.5rem;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.back-button:hover {
|
||||
background-color: #f1f5f9;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 480px;
|
||||
margin: 0 auto;
|
||||
background: var(--card-background);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 1rem;
|
||||
padding-bottom: 120px;
|
||||
}
|
||||
|
||||
.reward-card {
|
||||
background: var(--card-background);
|
||||
border: 2px solid var(--border-color);
|
||||
border-radius: 1rem;
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.reward-image {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
object-fit: cover;
|
||||
border-radius: 0.75rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.reward-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.reward-description {
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 1rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.reward-points {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: var(--primary-color);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.current-points-card {
|
||||
background: linear-gradient(135deg, #dbeafe, #bfdbfe);
|
||||
border: 1px solid var(--primary-color);
|
||||
border-radius: 0.75rem;
|
||||
padding: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.current-points-title {
|
||||
font-size: 0.875rem;
|
||||
color: #1e40af;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.current-points-value {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: #1e40af;
|
||||
}
|
||||
|
||||
.points-calculation {
|
||||
background: #f8fafc;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 0.75rem;
|
||||
padding: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.calc-title {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.calc-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.5rem 0;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.calc-row:last-child {
|
||||
border-bottom: none;
|
||||
padding-top: 0.75rem;
|
||||
font-weight: 600;
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
.calc-label {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.calc-value {
|
||||
color: var(--text-primary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.calc-row:last-child .calc-label,
|
||||
.calc-row:last-child .calc-value {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.insufficient-points {
|
||||
color: var(--danger-color);
|
||||
}
|
||||
|
||||
.delivery-section {
|
||||
background: var(--card-background);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 0.75rem;
|
||||
padding: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 0.75rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.delivery-option {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0.75rem;
|
||||
padding: 0.75rem;
|
||||
border: 2px solid var(--border-color);
|
||||
border-radius: 0.5rem;
|
||||
margin-bottom: 0.75rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.delivery-option:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.delivery-option:hover {
|
||||
border-color: var(--primary-color);
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.delivery-option.selected {
|
||||
border-color: var(--primary-color);
|
||||
background: #dbeafe;
|
||||
}
|
||||
|
||||
.delivery-radio {
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.delivery-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.delivery-title {
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.delivery-desc {
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.address-form {
|
||||
background: #f8fafc;
|
||||
border-radius: 0.5rem;
|
||||
padding: 1rem;
|
||||
margin-top: 1rem;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.address-form.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
display: block;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
border: 2px solid var(--border-color);
|
||||
border-radius: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
background: white;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.form-input:focus {
|
||||
outline: none;
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
|
||||
}
|
||||
|
||||
.terms-section {
|
||||
background: #fffbeb;
|
||||
border: 1px solid #f59e0b;
|
||||
border-radius: 0.75rem;
|
||||
padding: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.terms-title {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: #92400e;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.terms-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.terms-list li {
|
||||
font-size: 0.75rem;
|
||||
color: #92400e;
|
||||
margin-bottom: 0.25rem;
|
||||
padding-left: 1rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.terms-list li::before {
|
||||
content: "•";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
color: #f59e0b;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.action-bar {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: var(--card-background);
|
||||
border-top: 1px solid var(--border-color);
|
||||
padding: 1rem;
|
||||
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
.action-bar-content {
|
||||
max-width: 480px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.cancel-button {
|
||||
flex: 1;
|
||||
background: var(--card-background);
|
||||
color: var(--secondary-color);
|
||||
border: 2px solid var(--border-color);
|
||||
padding: 0.75rem;
|
||||
border-radius: 0.75rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.cancel-button:hover {
|
||||
border-color: var(--secondary-color);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.confirm-button {
|
||||
flex: 2;
|
||||
background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 0.75rem;
|
||||
border-radius: 0.75rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.confirm-button:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3);
|
||||
}
|
||||
|
||||
.confirm-button:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.content {
|
||||
padding: 0.75rem;
|
||||
padding-bottom: 120px;
|
||||
}
|
||||
}
|
||||
</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">Xác nhận đổi quà</h1>
|
||||
<div style="width: 2.5rem;"></div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="content">
|
||||
<!-- Selected Reward -->
|
||||
<div class="reward-card">
|
||||
<img src="https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?w=400&h=200&fit=crop"
|
||||
alt="Voucher giảm giá"
|
||||
class="reward-image">
|
||||
<h3 class="reward-title">Voucher giảm giá 20%</h3>
|
||||
<p class="reward-description">
|
||||
Voucher giảm giá 20% cho đơn hàng từ 2 triệu đồng. Áp dụng cho tất cả sản phẩm gạch men và phụ kiện.
|
||||
Thời hạn sử dụng: 30 ngày kể từ ngày đổi.
|
||||
</p>
|
||||
<div class="reward-points">
|
||||
<i class="fas fa-coins"></i>
|
||||
<span>500 điểm</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Current Points -->
|
||||
<div class="current-points-card">
|
||||
<div class="current-points-title">Điểm hiện tại của bạn</div>
|
||||
<div class="current-points-value">1,250 điểm</div>
|
||||
</div>
|
||||
|
||||
<!-- Points Calculation -->
|
||||
<div class="points-calculation">
|
||||
<h3 class="calc-title">Tính toán điểm</h3>
|
||||
<div class="calc-row">
|
||||
<span class="calc-label">Điểm hiện có:</span>
|
||||
<span class="calc-value">1,250 điểm</span>
|
||||
</div>
|
||||
<div class="calc-row">
|
||||
<span class="calc-label">Điểm cần dùng:</span>
|
||||
<span class="calc-value">-500 điểm</span>
|
||||
</div>
|
||||
<div class="calc-row">
|
||||
<span class="calc-label">Điểm còn lại:</span>
|
||||
<span class="calc-value">750 điểm</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Delivery Options -->
|
||||
<div class="delivery-section">
|
||||
<h3 class="section-title">
|
||||
<i class="fas fa-shipping-fast"></i>
|
||||
Phương thức nhận quà
|
||||
</h3>
|
||||
|
||||
<div class="delivery-option selected" onclick="selectDelivery('digital')">
|
||||
<input type="radio" name="delivery" value="digital" class="delivery-radio" checked>
|
||||
<div class="delivery-content">
|
||||
<div class="delivery-title">Nhận mã số qua ứng dụng</div>
|
||||
<div class="delivery-desc">Mã voucher sẽ được gửi ngay vào tài khoản của bạn</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="delivery-option" onclick="selectDelivery('email')">
|
||||
<input type="radio" name="delivery" value="email" class="delivery-radio">
|
||||
<div class="delivery-content">
|
||||
<div class="delivery-title">Gửi qua email</div>
|
||||
<div class="delivery-desc">Mã voucher sẽ được gửi về email đăng ký</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="delivery-option" onclick="selectDelivery('physical')">
|
||||
<input type="radio" name="delivery" value="physical" class="delivery-radio">
|
||||
<div class="delivery-content">
|
||||
<div class="delivery-title">Giao tận nơi</div>
|
||||
<div class="delivery-desc">Voucher vật lý sẽ được giao đến địa chỉ của bạn (3-5 ngày)</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Address Form (hidden by default) -->
|
||||
<div class="address-form" id="addressForm">
|
||||
<div class="form-group">
|
||||
<label class="form-label">Họ và tên người nhận</label>
|
||||
<input type="text" class="form-input" placeholder="Nhập họ tên đầy đủ" value="Nguyễn Văn A">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Số điện thoại</label>
|
||||
<input type="tel" class="form-input" placeholder="Nhập số điện thoại" value="0912345678">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Địa chỉ giao hàng</label>
|
||||
<input type="text" class="form-input" placeholder="Số nhà, tên đường">
|
||||
</div>
|
||||
<div class="form-group" style="margin-bottom: 0;">
|
||||
<label class="form-label">Phường/Xã, Quận/Huyện, Tỉnh/TP</label>
|
||||
<input type="text" class="form-input" placeholder="Ví dụ: Phường 1, Quận 1, TP.HCM">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Terms and Conditions -->
|
||||
<div class="terms-section">
|
||||
<div class="terms-title">Điều kiện sử dụng:</div>
|
||||
<ul class="terms-list">
|
||||
<li>Voucher có hiệu lực 30 ngày kể từ ngày đổi</li>
|
||||
<li>Áp dụng cho đơn hàng tối thiểu 2 triệu đồng</li>
|
||||
<li>Không áp dụng cùng với các khuyến mãi khác</li>
|
||||
<li>Voucher không thể đổi lại thành điểm hoặc tiền mặt</li>
|
||||
<li>Mỗi khách hàng chỉ được sử dụng 1 voucher/đơn hàng</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Action Bar -->
|
||||
<div class="action-bar">
|
||||
<div class="action-bar-content">
|
||||
<button class="cancel-button" onclick="goBack()">
|
||||
Quay lại
|
||||
</button>
|
||||
<button class="confirm-button" onclick="confirmRedemption()">
|
||||
<i class="fas fa-check"></i>
|
||||
Xác nhận đổi quà
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function goBack() {
|
||||
window.history.back();
|
||||
}
|
||||
|
||||
function selectDelivery(type) {
|
||||
// Update radio buttons
|
||||
const radioButtons = document.querySelectorAll('input[name="delivery"]');
|
||||
radioButtons.forEach(radio => {
|
||||
radio.checked = radio.value === type;
|
||||
});
|
||||
|
||||
// Update visual selection
|
||||
const deliveryOptions = document.querySelectorAll('.delivery-option');
|
||||
deliveryOptions.forEach(option => {
|
||||
option.classList.remove('selected');
|
||||
});
|
||||
event.currentTarget.classList.add('selected');
|
||||
|
||||
// Show/hide address form
|
||||
const addressForm = document.getElementById('addressForm');
|
||||
if (type === 'physical') {
|
||||
addressForm.classList.add('show');
|
||||
} else {
|
||||
addressForm.classList.remove('show');
|
||||
}
|
||||
}
|
||||
|
||||
function confirmRedemption() {
|
||||
const selectedDelivery = document.querySelector('input[name="delivery"]:checked').value;
|
||||
|
||||
// Validate address if physical delivery is selected
|
||||
if (selectedDelivery === 'physical') {
|
||||
const addressInputs = document.querySelectorAll('#addressForm input');
|
||||
let allFilled = true;
|
||||
|
||||
addressInputs.forEach(input => {
|
||||
if (!input.value.trim()) {
|
||||
allFilled = false;
|
||||
input.style.borderColor = 'var(--danger-color)';
|
||||
} else {
|
||||
input.style.borderColor = 'var(--border-color)';
|
||||
}
|
||||
});
|
||||
|
||||
if (!allFilled) {
|
||||
alert('Vui lòng điền đầy đủ thông tin giao hàng.');
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// Disable button and show loading
|
||||
const confirmButton = document.querySelector('.confirm-button');
|
||||
confirmButton.disabled = true;
|
||||
confirmButton.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Đang xử lý...';
|
||||
|
||||
// Simulate processing
|
||||
setTimeout(() => {
|
||||
// Redirect to success page
|
||||
window.location.href = 'redeem-success.html?reward=voucher-20&delivery=' + selectedDelivery;
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
// Animation when page loads
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const sections = document.querySelectorAll('.reward-card, .current-points-card, .points-calculation, .delivery-section, .terms-section');
|
||||
sections.forEach((section, index) => {
|
||||
section.style.opacity = '0';
|
||||
section.style.transform = 'translateY(20px)';
|
||||
section.style.transition = 'all 0.5s ease';
|
||||
|
||||
setTimeout(() => {
|
||||
section.style.opacity = '1';
|
||||
section.style.transform = 'translateY(0)';
|
||||
}, index * 100);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
563
html/redeem-success.html
Normal file
563
html/redeem-success.html
Normal file
@@ -0,0 +1,563 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="vi">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Đổi quà thành công - Worker App</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<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-dark: #1d4ed8;
|
||||
--secondary-color: #64748b;
|
||||
--success-color: #10b981;
|
||||
--warning-color: #f59e0b;
|
||||
--danger-color: #ef4444;
|
||||
--background-color: #f8fafc;
|
||||
--card-background: #ffffff;
|
||||
--text-primary: #1e293b;
|
||||
--text-secondary: #64748b;
|
||||
--border-color: #e2e8f0;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
background: linear-gradient(135deg, #ecfdf5 0%, #f0f9ff 100%);
|
||||
color: var(--text-primary);
|
||||
line-height: 1.6;
|
||||
overflow-x: hidden;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 480px;
|
||||
margin: 0 auto;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 2rem 1rem;
|
||||
}
|
||||
|
||||
.success-animation {
|
||||
text-align: center;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.success-icon {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: var(--success-color);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto 1rem;
|
||||
animation: bounceIn 0.8s ease-out;
|
||||
}
|
||||
|
||||
.success-icon i {
|
||||
font-size: 3rem;
|
||||
color: white;
|
||||
}
|
||||
|
||||
@keyframes bounceIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(0.3);
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
70% {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.success-title {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 700;
|
||||
color: var(--success-color);
|
||||
margin-bottom: 0.5rem;
|
||||
animation: fadeInUp 0.6s ease-out 0.3s both;
|
||||
}
|
||||
|
||||
.success-subtitle {
|
||||
font-size: 1rem;
|
||||
color: var(--text-secondary);
|
||||
animation: fadeInUp 0.6s ease-out 0.5s both;
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.reward-details {
|
||||
background: var(--card-background);
|
||||
border-radius: 1rem;
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||||
animation: fadeInUp 0.6s ease-out 0.7s both;
|
||||
}
|
||||
|
||||
.voucher-code-section {
|
||||
background: linear-gradient(135deg, #fef3c7, #fed7aa);
|
||||
border: 2px dashed #f59e0b;
|
||||
border-radius: 0.75rem;
|
||||
padding: 1.5rem;
|
||||
text-align: center;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.voucher-label {
|
||||
font-size: 0.875rem;
|
||||
color: #92400e;
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.voucher-code {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: #92400e;
|
||||
font-family: 'Courier New', monospace;
|
||||
letter-spacing: 2px;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.copy-button {
|
||||
background: #f59e0b;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.copy-button:hover {
|
||||
background: #d97706;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.reward-info {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.reward-title {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.reward-description {
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.detail-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.75rem 0;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.detail-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.detail-label {
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.detail-value {
|
||||
color: var(--text-primary);
|
||||
font-weight: 500;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.expiry-date {
|
||||
color: var(--danger-color);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.delivery-info {
|
||||
background: #f0f9ff;
|
||||
border: 1px solid #0ea5e9;
|
||||
border-radius: 0.75rem;
|
||||
padding: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
animation: fadeInUp 0.6s ease-out 0.9s both;
|
||||
}
|
||||
|
||||
.delivery-title {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: #0369a1;
|
||||
margin-bottom: 0.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.delivery-text {
|
||||
font-size: 0.875rem;
|
||||
color: #0369a1;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
animation: fadeInUp 0.6s ease-out 1.1s both;
|
||||
}
|
||||
|
||||
.primary-button {
|
||||
background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 1rem;
|
||||
border-radius: 0.75rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.primary-button:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3);
|
||||
}
|
||||
|
||||
.secondary-button {
|
||||
background: var(--card-background);
|
||||
color: var(--secondary-color);
|
||||
border: 2px solid var(--border-color);
|
||||
padding: 0.75rem;
|
||||
border-radius: 0.75rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.secondary-button:hover {
|
||||
border-color: var(--secondary-color);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.points-remaining {
|
||||
text-align: center;
|
||||
background: #ecfdf5;
|
||||
border: 1px solid var(--success-color);
|
||||
border-radius: 0.75rem;
|
||||
padding: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
animation: fadeInUp 0.6s ease-out 1.3s both;
|
||||
}
|
||||
|
||||
.points-label {
|
||||
font-size: 0.875rem;
|
||||
color: var(--success-color);
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.points-value {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: var(--success-color);
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.container {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.success-title {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.voucher-code {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<!-- Success Animation -->
|
||||
<div class="success-animation">
|
||||
<div class="success-icon">
|
||||
<i class="fas fa-check"></i>
|
||||
</div>
|
||||
<h1 class="success-title">Đổi quà thành công!</h1>
|
||||
<p class="success-subtitle">Cảm ơn bạn đã sử dụng điểm tích lũy</p>
|
||||
</div>
|
||||
|
||||
<!-- Reward Details -->
|
||||
<div class="reward-details">
|
||||
<!-- Voucher Code -->
|
||||
<div class="voucher-code-section">
|
||||
<div class="voucher-label">MÃ VOUCHER CỦA BạN</div>
|
||||
<div class="voucher-code" id="voucherCode">SAVE20VIP</div>
|
||||
<button class="copy-button" onclick="copyVoucherCode()">
|
||||
<i class="fas fa-copy"></i>
|
||||
Sao chép mã
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Reward Info -->
|
||||
<div class="reward-info">
|
||||
<h3 class="reward-title">Voucher giảm giá 20%</h3>
|
||||
<p class="reward-description">
|
||||
Voucher giảm giá 20% cho đơn hàng từ 2 triệu đồng. Áp dụng cho tất cả sản phẩm gạch men và phụ kiện.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Reward Details -->
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">Điểm đã sử dụng:</span>
|
||||
<span class="detail-value">500 điểm</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">Ngày đổi:</span>
|
||||
<span class="detail-value" id="exchangeDate">10/11/2024</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">Hạn sử dụng:</span>
|
||||
<span class="detail-value expiry-date" id="expiryDate">10/12/2024</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">Giá trị đơn tối thiểu:</span>
|
||||
<span class="detail-value">2,000,000 VNĐ</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Points Remaining -->
|
||||
<div class="points-remaining">
|
||||
<div class="points-label">Điểm còn lại trong tài khoản</div>
|
||||
<div class="points-value">750 điểm</div>
|
||||
</div>
|
||||
|
||||
<!-- Delivery Information -->
|
||||
<div class="delivery-info" id="deliveryInfo">
|
||||
<div class="delivery-title">
|
||||
<i class="fas fa-info-circle"></i>
|
||||
Thông tin nhận quà
|
||||
</div>
|
||||
<p class="delivery-text" id="deliveryText">
|
||||
Mã voucher đã được thêm vào tài khoản của bạn. Bạn có thể sử dụng ngay lập tức khi mua hàng.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<div class="action-buttons">
|
||||
<button class="primary-button" onclick="goToRewards()">
|
||||
<i class="fas fa-gift"></i>
|
||||
Đổi thêm quà khác
|
||||
</button>
|
||||
<button class="secondary-button" onclick="viewMyGifts()">
|
||||
<i class="fas fa-box-open"></i>
|
||||
Xem quà của tôi
|
||||
</button>
|
||||
<button class="secondary-button" onclick="goToHome()">
|
||||
<i class="fas fa-home"></i>
|
||||
Về trang chủ
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Get URL parameters to customize success message
|
||||
function getUrlParameter(name) {
|
||||
name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
|
||||
const regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
|
||||
const results = regex.exec(location.search);
|
||||
return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
|
||||
}
|
||||
|
||||
function initializePage() {
|
||||
const delivery = getUrlParameter('delivery');
|
||||
const deliveryInfo = document.getElementById('deliveryInfo');
|
||||
const deliveryText = document.getElementById('deliveryText');
|
||||
|
||||
// Set current date as exchange date
|
||||
const today = new Date();
|
||||
document.getElementById('exchangeDate').textContent = today.toLocaleDateString('vi-VN');
|
||||
|
||||
// Set expiry date (30 days from today)
|
||||
const expiryDate = new Date();
|
||||
expiryDate.setDate(today.getDate() + 30);
|
||||
document.getElementById('expiryDate').textContent = expiryDate.toLocaleDateString('vi-VN');
|
||||
|
||||
// Customize delivery message based on method
|
||||
switch(delivery) {
|
||||
case 'email':
|
||||
deliveryText.innerHTML = `
|
||||
<i class="fas fa-envelope"></i>
|
||||
Mã voucher đã được gửi về email đăng ký của bạn. Vui lòng kiểm tra hộp thư đến và thư spam.
|
||||
`;
|
||||
break;
|
||||
case 'physical':
|
||||
deliveryText.innerHTML = `
|
||||
<i class="fas fa-truck"></i>
|
||||
Voucher vật lý sẽ được giao đến địa chỉ của bạn trong vòng 3-5 ngày làm việc. Bạn sẽ nhận được thông báo khi đơn hàng được giao.
|
||||
`;
|
||||
break;
|
||||
default: // digital
|
||||
deliveryText.innerHTML = `
|
||||
<i class="fas fa-mobile-alt"></i>
|
||||
Mã voucher đã được thêm vào tài khoản của bạn. Bạn có thể sử dụng ngay lập tức khi mua hàng.
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
function copyVoucherCode() {
|
||||
const voucherCode = document.getElementById('voucherCode').textContent;
|
||||
const button = event.target.closest('.copy-button');
|
||||
|
||||
navigator.clipboard.writeText(voucherCode).then(() => {
|
||||
const originalText = button.innerHTML;
|
||||
button.innerHTML = '<i class="fas fa-check"></i> Đã sao chép';
|
||||
button.style.background = 'var(--success-color)';
|
||||
|
||||
setTimeout(() => {
|
||||
button.innerHTML = originalText;
|
||||
button.style.background = '#f59e0b';
|
||||
}, 2000);
|
||||
|
||||
showToast('Đã sao chép mã voucher!');
|
||||
}).catch(() => {
|
||||
// Fallback for older browsers
|
||||
const textArea = document.createElement('textarea');
|
||||
textArea.value = voucherCode;
|
||||
document.body.appendChild(textArea);
|
||||
textArea.focus();
|
||||
textArea.select();
|
||||
|
||||
try {
|
||||
document.execCommand('copy');
|
||||
showToast('Đã sao chép mã voucher!');
|
||||
} catch (err) {
|
||||
showToast('Không thể sao chép. Vui lòng sao chép thủ công: ' + voucherCode);
|
||||
}
|
||||
|
||||
document.body.removeChild(textArea);
|
||||
});
|
||||
}
|
||||
|
||||
function showToast(message) {
|
||||
const toast = document.createElement('div');
|
||||
toast.className = 'fixed top-20 left-1/2 transform -translate-x-1/2 bg-green-500 text-white px-4 py-2 rounded-lg z-50 transition-all duration-300';
|
||||
toast.textContent = message;
|
||||
document.body.appendChild(toast);
|
||||
|
||||
setTimeout(() => {
|
||||
toast.style.opacity = '0';
|
||||
setTimeout(() => {
|
||||
document.body.removeChild(toast);
|
||||
}, 300);
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
function goToRewards() {
|
||||
window.location.href = 'loyalty-rewards.html';
|
||||
}
|
||||
|
||||
function viewMyGifts() {
|
||||
window.location.href = 'my-gifts.html';
|
||||
}
|
||||
|
||||
function goToHome() {
|
||||
window.location.href = 'index.html';
|
||||
}
|
||||
|
||||
// Initialize page when DOM is loaded
|
||||
document.addEventListener('DOMContentLoaded', initializePage);
|
||||
|
||||
// Add celebration effect
|
||||
function createConfetti() {
|
||||
const colors = ['#ff6b6b', '#4ecdc4', '#45b7d1', '#96ceb4', '#ffeaa7'];
|
||||
|
||||
for (let i = 0; i < 50; i++) {
|
||||
setTimeout(() => {
|
||||
const confetti = document.createElement('div');
|
||||
confetti.style.cssText = `
|
||||
position: fixed;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: ${colors[Math.floor(Math.random() * colors.length)]};
|
||||
top: -10px;
|
||||
left: ${Math.random() * 100}%;
|
||||
border-radius: 50%;
|
||||
z-index: 1000;
|
||||
pointer-events: none;
|
||||
animation: fall ${Math.random() * 3 + 2}s linear forwards;
|
||||
`;
|
||||
|
||||
document.body.appendChild(confetti);
|
||||
|
||||
setTimeout(() => {
|
||||
if (confetti.parentNode) {
|
||||
confetti.parentNode.removeChild(confetti);
|
||||
}
|
||||
}, 5000);
|
||||
}, i * 50);
|
||||
}
|
||||
}
|
||||
|
||||
// Add CSS for confetti animation
|
||||
const style = document.createElement('style');
|
||||
style.textContent = `
|
||||
@keyframes fall {
|
||||
to {
|
||||
transform: translateY(100vh) rotate(360deg);
|
||||
}
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
|
||||
// Trigger confetti on page load
|
||||
setTimeout(createConfetti, 1000);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
137
html/referral.html
Normal file
137
html/referral.html
Normal file
@@ -0,0 +1,137 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="vi">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Giới thiệu app Worker - 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="loyalty.html" class="back-button">
|
||||
<i class="fas fa-arrow-left"></i>
|
||||
</a>
|
||||
<h1 class="header-title">Giới thiệu app Worker</h1>
|
||||
<div style="width: 32px;"></div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<!-- User Profile Card -->
|
||||
<div class="card mb-3">
|
||||
<div class="d-flex align-center">
|
||||
<div class="referral-logo">
|
||||
<span>dbiz</span>
|
||||
</div>
|
||||
<div style="margin-left: 16px;">
|
||||
<h3 style="font-size: 16px; font-weight: 500; color: var(--text-dark); margin-bottom: 4px;">
|
||||
Hoàng Minh Hiệp
|
||||
</h3>
|
||||
<p style="font-size: 14px; color: var(--primary-blue); font-weight: 500;">
|
||||
0347302911
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Referral Information Card -->
|
||||
<div class="card">
|
||||
<h3 class="card-title" style="display: flex; align-items: center; margin-bottom: 16px;">
|
||||
Thông tin giới thiệu
|
||||
<i class="fas fa-share" style="color: var(--primary-blue); margin-left: auto; font-size: 18px;"></i>
|
||||
</h3>
|
||||
|
||||
<!-- Referral Link -->
|
||||
<div class="referral-item">
|
||||
<label class="referral-label">Link giới thiệu:</label>
|
||||
<div class="referral-value-container">
|
||||
<span class="referral-value">https://referral.tuongnm@ssg.vn ...</span>
|
||||
<div class="referral-actions">
|
||||
<button class="referral-btn" onclick="shareReferral()">
|
||||
<i class="fas fa-share"></i>
|
||||
</button>
|
||||
<button class="referral-btn" onclick="copyToClipboard('https://referral.tuongnm@ssg.vn')">
|
||||
<i class="fas fa-copy"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Referral Code -->
|
||||
<div class="referral-item">
|
||||
<label class="referral-label">Mã giới thiệu:</label>
|
||||
<div class="referral-value-container">
|
||||
<span class="referral-value">ABCD</span>
|
||||
<div class="referral-actions">
|
||||
<button class="referral-btn" onclick="copyToClipboard('ABCD')">
|
||||
<i class="fas fa-copy"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Referral Benefits -->
|
||||
<div class="card mt-3">
|
||||
<h3 class="card-title mb-3">Quyền lợi giới thiệu</h3>
|
||||
<div class="benefit-list">
|
||||
<div class="benefit-item">
|
||||
<i class="fas fa-gift" style="color: var(--primary-blue);"></i>
|
||||
<span>Nhận 50 điểm thưởng cho mỗi lần giới thiệu thành công</span>
|
||||
</div>
|
||||
<div class="benefit-item">
|
||||
<i class="fas fa-star" style="color: var(--warning-color);"></i>
|
||||
<span>Tăng hạng thành viên nhanh chóng</span>
|
||||
</div>
|
||||
<div class="benefit-item">
|
||||
<i class="fas fa-percent" style="color: var(--success-color);"></i>
|
||||
<span>Hưởng chiết khấu đặc biệt từ các đơn hàng của người được giới thiệu</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- How it Works -->
|
||||
<div class="card mt-3">
|
||||
<h3 class="card-title mb-3">Cách thức hoạt động</h3>
|
||||
<div class="steps-list">
|
||||
<div class="step-item">
|
||||
<div class="step-number">1</div>
|
||||
<span>Chia sẻ link hoặc mã giới thiệu với bạn bè</span>
|
||||
</div>
|
||||
<div class="step-item">
|
||||
<div class="step-number">2</div>
|
||||
<span>Bạn bè đăng ký tài khoản và thực hiện đơn hàng đầu tiên</span>
|
||||
</div>
|
||||
<div class="step-item">
|
||||
<div class="step-number">3</div>
|
||||
<span>Nhận điểm thưởng và quyền lợi đặc biệt</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function copyToClipboard(text) {
|
||||
navigator.clipboard.writeText(text).then(() => {
|
||||
alert('Đã sao chép: ' + text);
|
||||
});
|
||||
}
|
||||
|
||||
function shareReferral() {
|
||||
if (navigator.share) {
|
||||
navigator.share({
|
||||
title: 'Tham gia EuroTile Worker',
|
||||
text: 'Tham gia ứng dụng EuroTile Worker cùng tôi!',
|
||||
url: 'https://referral.tuongnm@ssg.vn'
|
||||
});
|
||||
} else {
|
||||
copyToClipboard('https://referral.tuongnm@ssg.vn');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
443
html/register-pending.html
Normal file
443
html/register-pending.html
Normal file
@@ -0,0 +1,443 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="vi">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Chờ xác minh - EuroTile Worker</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<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-dark: #1d4ed8;
|
||||
--secondary-color: #64748b;
|
||||
--success-color: #10b981;
|
||||
--warning-color: #f59e0b;
|
||||
--danger-color: #ef4444;
|
||||
--background-color: #f8fafc;
|
||||
--card-background: #ffffff;
|
||||
--text-primary: #1e293b;
|
||||
--text-secondary: #64748b;
|
||||
--border-color: #e2e8f0;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
|
||||
color: var(--text-primary);
|
||||
line-height: 1.6;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 480px;
|
||||
width: 100%;
|
||||
background: var(--card-background);
|
||||
border-radius: 1.5rem;
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
|
||||
padding: 3rem 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.pending-icon {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
background: linear-gradient(135deg, var(--warning-color), #d97706);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto 2rem;
|
||||
position: relative;
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
.pending-icon i {
|
||||
font-size: 3rem;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.pending-icon::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, var(--warning-color), #d97706);
|
||||
opacity: 0.3;
|
||||
animation: ripple 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes ripple {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
opacity: 0.3;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1.3);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.success-title {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 1rem;
|
||||
animation: fadeInUp 0.6s ease-out 0.3s both;
|
||||
}
|
||||
|
||||
.success-subtitle {
|
||||
font-size: 1rem;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 2rem;
|
||||
line-height: 1.6;
|
||||
animation: fadeInUp 0.6s ease-out 0.5s both;
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.info-card {
|
||||
background: #fffbeb;
|
||||
border: 1px solid var(--warning-color);
|
||||
border-radius: 0.75rem;
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
text-align: left;
|
||||
animation: fadeInUp 0.6s ease-out 0.7s both;
|
||||
}
|
||||
|
||||
.info-title {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: #92400e;
|
||||
margin-bottom: 0.75rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.info-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.info-list li {
|
||||
font-size: 0.875rem;
|
||||
color: #92400e;
|
||||
margin-bottom: 0.5rem;
|
||||
padding-left: 1.5rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.info-list li::before {
|
||||
content: "✓";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
color: var(--warning-color);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.timeline-section {
|
||||
background: #f0f9ff;
|
||||
border: 1px solid var(--primary-color);
|
||||
border-radius: 0.75rem;
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
text-align: left;
|
||||
animation: fadeInUp 0.6s ease-out 0.9s both;
|
||||
}
|
||||
|
||||
.timeline-title {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: var(--primary-color);
|
||||
margin-bottom: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.timeline-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
padding: 0.75rem;
|
||||
background: white;
|
||||
border-radius: 0.5rem;
|
||||
border-left: 4px solid var(--primary-color);
|
||||
}
|
||||
|
||||
.timeline-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.timeline-number {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background: var(--primary-color);
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 600;
|
||||
font-size: 0.875rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.timeline-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.timeline-step {
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.timeline-desc {
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
animation: fadeInUp 0.6s ease-out 1.1s both;
|
||||
}
|
||||
|
||||
.primary-button {
|
||||
background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 1rem 2rem;
|
||||
border-radius: 0.75rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.primary-button:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3);
|
||||
}
|
||||
|
||||
.secondary-button {
|
||||
background: var(--card-background);
|
||||
color: var(--secondary-color);
|
||||
border: 2px solid var(--border-color);
|
||||
padding: 0.75rem 2rem;
|
||||
border-radius: 0.75rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.secondary-button:hover {
|
||||
border-color: var(--secondary-color);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.support-section {
|
||||
background: #f1f5f9;
|
||||
border-radius: 0.75rem;
|
||||
padding: 1rem;
|
||||
margin-top: 2rem;
|
||||
animation: fadeInUp 0.6s ease-out 1.3s both;
|
||||
}
|
||||
|
||||
.support-title {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.support-text {
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.support-contact {
|
||||
font-size: 0.875rem;
|
||||
color: var(--primary-color);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.container {
|
||||
padding: 2rem 1.5rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.success-title {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.pending-icon {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.pending-icon i {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<!-- Pending Icon -->
|
||||
<div class="pending-icon">
|
||||
<i class="fas fa-hourglass-half"></i>
|
||||
</div>
|
||||
|
||||
<!-- Title and Subtitle -->
|
||||
<h1 class="success-title">Yêu cầu đã được gửi!</h1>
|
||||
<p class="success-subtitle">
|
||||
Tài khoản của bạn đang chờ được xác minh. Chúng tôi sẽ thông báo cho bạn ngay khi quá trình hoàn tất
|
||||
(thường trong <strong>24 giờ làm việc</strong>).
|
||||
</p>
|
||||
|
||||
<!-- Information Card -->
|
||||
<div class="info-card">
|
||||
<div class="info-title">
|
||||
<i class="fas fa-info-circle"></i>
|
||||
Thông tin đã gửi
|
||||
</div>
|
||||
<ul class="info-list">
|
||||
<li>Thông tin cá nhân và liên hệ</li>
|
||||
<li>Ảnh CCCD/CMND mặt trước</li>
|
||||
<li>Chứng chỉ hành nghề hoặc GPKD</li>
|
||||
<li>Số điện thoại xác thực</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Timeline Section -->
|
||||
<div class="timeline-section">
|
||||
<div class="timeline-title">
|
||||
<i class="fas fa-clock"></i>
|
||||
Quy trình xác minh
|
||||
</div>
|
||||
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-number">1</div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-step">Kiểm tra thông tin</div>
|
||||
<div class="timeline-desc">Xác thực CCCD/CMND và chứng chỉ hành nghề</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-number">2</div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-step">Phê duyệt tài khoản</div>
|
||||
<div class="timeline-desc">Kích hoạt tài khoản và gửi thông báo</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-number">3</div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-step">Bắt đầu sử dụng</div>
|
||||
<div class="timeline-desc">Truy cập đầy đủ tính năng dành cho chuyên gia</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<div class="action-buttons">
|
||||
<a href="login.html" class="primary-button">
|
||||
<i class="fas fa-sign-in-alt"></i>
|
||||
Về trang đăng nhập
|
||||
</a>
|
||||
<a href="index.html" class="secondary-button">
|
||||
<i class="fas fa-home"></i>
|
||||
Khám phá ứng dụng
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Support Section -->
|
||||
<div class="support-section">
|
||||
<div class="support-title">Cần hỗ trợ?</div>
|
||||
<div class="support-text">
|
||||
Nếu có thắc mắc về quá trình xác minh, vui lòng liên hệ với chúng tôi:
|
||||
</div>
|
||||
<div class="support-contact">
|
||||
<i class="fas fa-phone"></i> Hotline: 1900-xxxx
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Add some interactive feedback
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Simulate progress checking (for demo purposes)
|
||||
const checkProgress = () => {
|
||||
console.log('Checking verification progress...');
|
||||
// In a real app, this would check with the server
|
||||
};
|
||||
|
||||
// Check progress every 30 seconds (for demo)
|
||||
setInterval(checkProgress, 30000);
|
||||
|
||||
// Add hover effects to timeline items
|
||||
const timelineItems = document.querySelectorAll('.timeline-item');
|
||||
timelineItems.forEach(item => {
|
||||
item.addEventListener('mouseenter', function() {
|
||||
this.style.transform = 'translateX(5px)';
|
||||
});
|
||||
|
||||
item.addEventListener('mouseleave', function() {
|
||||
this.style.transform = 'translateX(0)';
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
400
html/register.html
Normal file
400
html/register.html
Normal file
@@ -0,0 +1,400 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="vi">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Đăng ký tài khoả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">
|
||||
<style>
|
||||
.verification-section {
|
||||
background: #f8fafc;
|
||||
border: 2px solid #e2e8f0;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
margin: 20px 0;
|
||||
animation: slideDown 0.3s ease-out;
|
||||
}
|
||||
|
||||
.verification-header {
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.verification-header h3 {
|
||||
color: #2563eb;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.file-upload-area {
|
||||
border: 2px dashed #cbd5e1;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.file-upload-area:hover {
|
||||
border-color: #2563eb;
|
||||
background: #f0f9ff;
|
||||
}
|
||||
|
||||
.file-upload-icon {
|
||||
font-size: 32px;
|
||||
color: #64748b;
|
||||
margin-bottom: 12px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.file-upload-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.upload-title {
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
.upload-subtitle {
|
||||
font-size: 14px;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.file-preview {
|
||||
margin-top: 12px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.file-preview.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.file-preview-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 12px;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
.file-preview-thumb {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
object-fit: cover;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.file-preview-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.file-preview-name {
|
||||
font-weight: 500;
|
||||
color: #1e293b;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.file-preview-size {
|
||||
font-size: 12px;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
@keyframes slideDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="page-wrapper">
|
||||
<!-- Header -->
|
||||
<div class="header">
|
||||
<a href="login.html" class="back-button">
|
||||
<i class="fas fa-arrow-left"></i>
|
||||
</a>
|
||||
<h1 class="header-title">Đăng ký tài khoản</h1>
|
||||
<div style="width: 32px;"></div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<!-- Welcome Message -->
|
||||
<div class="text-center mb-4">
|
||||
<h2>Tạo tài khoản mới</h2>
|
||||
<p class="text-muted">Điền thông tin để bắt đầu</p>
|
||||
</div>
|
||||
|
||||
<!-- Registration Form -->
|
||||
<form action="register-pending.html" class="card" onsubmit="return validateForm()"">
|
||||
<!-- Full Name -->
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="fullname">Họ và tên *</label>
|
||||
<div class="form-input-icon">
|
||||
<i class="fas fa-user icon"></i>
|
||||
<input type="text" id="fullname" class="form-input" placeholder="Nhập họ và tên" required>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Phone Number -->
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="phone">Số điện thoại *</label>
|
||||
<div class="form-input-icon">
|
||||
<i class="fas fa-phone icon"></i>
|
||||
<input type="tel" id="phone" class="form-input" placeholder="Nhập số điện thoại" required>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Email -->
|
||||
<div class="form-group">
|
||||
<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)">
|
||||
</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="Tạo mật khẩu mới" required>
|
||||
</div>
|
||||
<p class="text-small text-muted mt-1">Mật khẩu tối thiểu 6 ký tự</p>
|
||||
</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>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Verification Section for Architects/Workers -->
|
||||
<div id="verificationSection" class="verification-section" style="display: none;">
|
||||
<div class="verification-header">
|
||||
<h3><i class="fas fa-shield-alt"></i> Thông tin xác thực</h3>
|
||||
<p class="text-small text-muted">Thông tin này sẽ được dùng để xác minh tư cách chuyên môn của bạn</p>
|
||||
</div>
|
||||
|
||||
<!-- ID Number -->
|
||||
<div class="form-group">
|
||||
<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">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tax Code -->
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="taxCode">Mã số thuế cá nhân/Công ty</label>
|
||||
<div class="form-input-icon">
|
||||
<i class="fas fa-receipt icon"></i>
|
||||
<input type="text" id="taxCode" class="form-input" placeholder="Nhập mã số thuế (không bắt buộc)">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ID Card Upload -->
|
||||
<div class="form-group">
|
||||
<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">
|
||||
<span class="upload-title">Chụp ảnh hoặc chọn file</span>
|
||||
<span class="upload-subtitle">JPG, PNG tối đa 5MB</span>
|
||||
</div>
|
||||
<input type="file" id="idCardFile" accept="image/*" style="display: none;" onchange="handleFileUpload(this, 'idCardPreview')">
|
||||
</div>
|
||||
<div id="idCardPreview" class="file-preview"></div>
|
||||
</div>
|
||||
|
||||
<!-- Certificate Upload -->
|
||||
<div class="form-group">
|
||||
<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">
|
||||
<span class="upload-title">Chụp ảnh hoặc chọn file</span>
|
||||
<span class="upload-subtitle">JPG, PNG tối đa 5MB</span>
|
||||
</div>
|
||||
<input type="file" id="certificateFile" accept="image/*" style="display: none;" onchange="handleFileUpload(this, 'certificatePreview')">
|
||||
</div>
|
||||
<div id="certificatePreview" class="file-preview"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Company/Store Name -->
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="company">Tên công ty/Cửa hàng</label>
|
||||
<div class="form-input-icon">
|
||||
<i class="fas fa-building icon"></i>
|
||||
<input type="text" id="company" class="form-input" placeholder="Nhập tên công ty (không bắt buộc)">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Province/City -->
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="city">Tỉnh/Thành phố *</label>
|
||||
<select id="city" class="form-input form-select" required>
|
||||
<option value="">Chọn tỉnh/thành phố</option>
|
||||
<option value="hanoi">Hà Nội</option>
|
||||
<option value="hcm">TP. Hồ Chí Minh</option>
|
||||
<option value="danang">Đà Nẵng</option>
|
||||
<option value="haiphong">Hải Phòng</option>
|
||||
<option value="cantho">Cần Thơ</option>
|
||||
<option value="other">Khác</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Terms and Conditions -->
|
||||
<div class="form-group">
|
||||
<label style="display: flex; align-items: flex-start; cursor: pointer;">
|
||||
<input type="checkbox" style="margin-right: 8px; margin-top: 2px;" required>
|
||||
<span class="text-small">
|
||||
Tôi đồng ý với
|
||||
<a href="#" class="text-primary">Điều khoản sử dụng</a> và
|
||||
<a href="#" class="text-primary">Chính sách bảo mật</a>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-primary btn-block">
|
||||
Đăng ký
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<!-- Login Link -->
|
||||
<div class="text-center mt-3 mb-4">
|
||||
<p class="text-small text-muted">
|
||||
Đã có tài khoản?
|
||||
<a href="login.html" class="text-primary" style="text-decoration: none; font-weight: 500;">
|
||||
Đăng nhập
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function toggleVerification() {
|
||||
const role = document.getElementById('role').value;
|
||||
const verificationSection = document.getElementById('verificationSection');
|
||||
|
||||
if (role === 'worker' || role === 'architect') {
|
||||
verificationSection.style.display = 'block';
|
||||
// Make verification fields required
|
||||
document.getElementById('idNumber').required = true;
|
||||
document.getElementById('idCardFile').required = true;
|
||||
document.getElementById('certificateFile').required = true;
|
||||
} else {
|
||||
verificationSection.style.display = 'none';
|
||||
// Make verification fields optional
|
||||
document.getElementById('idNumber').required = false;
|
||||
document.getElementById('idCardFile').required = false;
|
||||
document.getElementById('certificateFile').required = false;
|
||||
}
|
||||
}
|
||||
|
||||
function handleFileUpload(input, previewId) {
|
||||
const file = input.files[0];
|
||||
const preview = document.getElementById(previewId);
|
||||
|
||||
if (file) {
|
||||
// Validate file type
|
||||
if (!file.type.startsWith('image/')) {
|
||||
alert('Vui lòng chọn file hình ảnh (JPG, PNG)');
|
||||
input.value = '';
|
||||
return;
|
||||
}
|
||||
|
||||
// Validate file size (5MB)
|
||||
if (file.size > 5 * 1024 * 1024) {
|
||||
alert('File không được vượt quá 5MB');
|
||||
input.value = '';
|
||||
return;
|
||||
}
|
||||
|
||||
// Show preview
|
||||
const reader = new FileReader();
|
||||
reader.onload = function(e) {
|
||||
preview.innerHTML = `
|
||||
<div class="file-preview-item">
|
||||
<img src="${e.target.result}" class="file-preview-thumb" alt="Preview">
|
||||
<div class="file-preview-info">
|
||||
<div class="file-preview-name">${file.name}</div>
|
||||
<div class="file-preview-size">${formatFileSize(file.size)}</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
preview.classList.add('show');
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
}
|
||||
|
||||
function formatFileSize(bytes) {
|
||||
if (bytes === 0) return '0 Bytes';
|
||||
const k = 1024;
|
||||
const sizes = ['Bytes', 'KB', 'MB', 'GB'];
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
|
||||
}
|
||||
|
||||
function validateForm() {
|
||||
const role = document.getElementById('role').value;
|
||||
|
||||
if (role === 'worker' || role === 'architect') {
|
||||
const idNumber = document.getElementById('idNumber').value;
|
||||
const idCardFile = document.getElementById('idCardFile').files[0];
|
||||
const certificateFile = document.getElementById('certificateFile').files[0];
|
||||
|
||||
if (!idNumber) {
|
||||
alert('Vui lòng nhập số CCCD/CMND');
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!idCardFile) {
|
||||
alert('Vui lòng tải lên ảnh CCCD/CMND');
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!certificateFile) {
|
||||
alert('Vui lòng tải lên ảnh chứng chỉ hành nghề hoặc GPKD');
|
||||
return false;
|
||||
}
|
||||
|
||||
// For architect/worker roles, redirect to pending page
|
||||
return true;
|
||||
} else {
|
||||
// For other roles, redirect to OTP page
|
||||
document.querySelector('form').action = 'otp.html';
|
||||
return true;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user