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

first commit

Browse Source
This commit is contained in:
Phuoc Nguyen
2025-10-17 15:37:58 +07:00
commit 2125e85d40
123 changed files with 27633 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

200
html/my-gifts.html Normal file
View 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>