232 lines
10 KiB
HTML
232 lines
10 KiB
HTML
<!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>
|
|
<style>
|
|
|
|
.modal-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0,0,0,0.5);
|
|
z-index: 1000;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 20px;
|
|
}
|
|
|
|
.modal-content {
|
|
background: white;
|
|
border-radius: 12px;
|
|
width: 100%;
|
|
max-width: 500px;
|
|
animation: slideUp 0.3s ease;
|
|
}
|
|
|
|
@keyframes slideUp {
|
|
from { transform: translateY(20px); opacity: 0; }
|
|
to { transform: translateY(0); opacity: 1; }
|
|
}
|
|
|
|
.modal-header {
|
|
padding: 20px;
|
|
border-bottom: 1px solid #e5e7eb;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.modal-body {
|
|
padding: 20px;
|
|
}
|
|
|
|
.modal-footer {
|
|
padding: 20px;
|
|
border-top: 1px solid #e5e7eb;
|
|
display: flex;
|
|
gap: 12px;
|
|
}
|
|
|
|
.modal-close {
|
|
background: none;
|
|
border: none;
|
|
font-size: 20px;
|
|
color: #6b7280;
|
|
cursor: pointer;
|
|
}
|
|
|
|
</style>
|
|
<body>
|
|
<div class="page-wrapper">
|
|
<!-- Header -->
|
|
<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>-->
|
|
<button class="back-button" onclick="openInfoModal()">
|
|
<i class="fas fa-info-circle"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Info Modal -->
|
|
<div id="infoModal" class="modal-overlay" style="display: none;">
|
|
<div class="modal-content info-modal">
|
|
<div class="modal-header">
|
|
<h3 class="modal-title" style="font-weight: bold;">Hướng dẫn sử dụng</h3>
|
|
<button class="modal-close" onclick="closeInfoModal()">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>Đây là nội dung hướng dẫn sử dụng cho tính năng Đổi quà tặng:</p>
|
|
<ul class="list-disc ml-6 mt-3">
|
|
<li>Sử dụng điểm tích lũy của bạn để đổi các phần quà giá trị trong danh mục.</li>
|
|
<li>Bấm vào một phần quà để xem chi tiết và điều kiện áp dụng.</li>
|
|
<li>Khi xác nhận đổi quà, bạn có thể chọn "Nhận hàng tại Showroom".</li>
|
|
<li>Nếu chọn "Nhận hàng tại Showroom", bạn sẽ cần chọn Showroom bạn muốn đến nhận từ danh sách thả xuống.</li>
|
|
<li>Quà đã đổi sẽ được chuyển vào mục "Quà của tôi" (trong trang Hội viên).</li>
|
|
</ul>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn btn-primary" onclick="closeInfoModal()">Đóng</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<!-- Points Balance -->
|
|
<div class="card" style="background: linear-gradient(135deg, #005B9A 0%, #38B6FF 100%); color: white;">
|
|
<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>
|
|
<script>
|
|
function openInfoModal() {
|
|
document.getElementById('infoModal').style.display = 'flex';
|
|
}
|
|
|
|
function closeInfoModal() {
|
|
document.getElementById('infoModal').style.display = 'none';
|
|
}
|
|
|
|
function viewOrderDetail(orderId) {
|
|
window.location.href = `order-detail.html?id=${orderId}`;
|
|
}
|
|
|
|
// Close modal when clicking outside
|
|
document.addEventListener('click', function(e) {
|
|
if (e.target.classList.contains('modal-overlay')) {
|
|
e.target.style.display = 'none';
|
|
}
|
|
});
|
|
</script>
|
|
|
|
</html> |