214 lines
9.8 KiB
HTML
214 lines
9.8 KiB
HTML
<!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" onclick="viewGiftDetail('SAVE100K', 'Voucher giảm 100.000đ', 'valid')">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" onclick="viewGiftDetail('FREECERAMIC', 'Gạch ceramic miễn phí', 'valid')">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" onclick="viewGiftDetail('FREEDESIGN', 'Tư vấn thiết kế miễn phí', 'valid')">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';
|
|
}
|
|
});
|
|
}
|
|
|
|
function viewGiftDetail(giftCode, giftName, status) {
|
|
// Store gift data in localStorage for the detail page
|
|
const giftData = {
|
|
code: giftCode,
|
|
name: giftName,
|
|
status: status
|
|
};
|
|
localStorage.setItem('selectedGift', JSON.stringify(giftData));
|
|
|
|
// Navigate to gift detail page
|
|
window.location.href = 'my-gift-detail.html';
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |