269 lines
10 KiB
HTML
269 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>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 Card 1 -->
|
|
<div class="transaction-card">
|
|
<div class="card-header">
|
|
<span class="transaction-code">GD-00083</span>
|
|
<span class="transaction-date">28/09/2023</span>
|
|
</div>
|
|
<div class="card-content">
|
|
<div class="transaction-desc">
|
|
<div style="font-weight: 600; color: #333; margin-bottom: 4px;">Giao dịch mua hàng</div>
|
|
<div style="font-size: 13px; color: #999;">Mã tham chiếu: #HD-2023-00083</div>
|
|
</div>
|
|
<div class="transaction-points positive">
|
|
+3 điểm
|
|
</div>
|
|
</div>
|
|
<div class="card-footer">
|
|
<span class="balance-after">Số dư sau: <strong>604 điểm</strong></span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Transaction Card 2 -->
|
|
<div class="transaction-card">
|
|
<div class="card-header">
|
|
<span class="transaction-code">GD-00081</span>
|
|
<span class="transaction-date">27/09/2023</span>
|
|
</div>
|
|
<div class="card-content">
|
|
<div class="transaction-desc">
|
|
<div style="font-weight: 600; color: #333; margin-bottom: 4px;">Giao dịch mua hàng</div>
|
|
<div style="font-size: 13px; color: #999;">Mã tham chiếu: #HD-2023-00081</div>
|
|
</div>
|
|
<div class="transaction-points neutral">
|
|
0 điểm
|
|
</div>
|
|
</div>
|
|
<div class="card-footer">
|
|
<span class="balance-after">Số dư sau: <strong>601 điểm</strong></span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Transaction Card 3 -->
|
|
<div class="transaction-card">
|
|
<div class="card-header">
|
|
<span class="transaction-code">EXP-2023-001</span>
|
|
<span class="transaction-date">20/09/2023</span>
|
|
</div>
|
|
<div class="card-content">
|
|
<div class="transaction-desc">
|
|
<div style="font-weight: 600; color: #333; margin-bottom: 4px;">Điểm thưởng hết hạn</div>
|
|
<div style="font-size: 13px; color: #999;">Hết hạn sử dụng</div>
|
|
</div>
|
|
<div class="transaction-points negative">
|
|
-5 điểm
|
|
</div>
|
|
</div>
|
|
<div class="card-footer">
|
|
<span class="balance-after">Số dư sau: <strong>601 điểm</strong></span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Transaction Card 4 -->
|
|
<div class="transaction-card">
|
|
<div class="card-header">
|
|
<span class="transaction-code">RDM-2023-042</span>
|
|
<span class="transaction-date">19/09/2023</span>
|
|
</div>
|
|
<div class="card-content">
|
|
<div class="transaction-desc">
|
|
<div style="font-weight: 600; color: #333; margin-bottom: 4px;">Đổi Voucher giảm giá</div>
|
|
<div style="font-size: 13px; color: #999;">Voucher 5.000.000đ - HSG</div>
|
|
</div>
|
|
<div class="transaction-points negative">
|
|
-500 điểm
|
|
</div>
|
|
</div>
|
|
<div class="card-footer">
|
|
<span class="balance-after">Số dư sau: <strong>606 điểm</strong></span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Transaction Card 5 -->
|
|
<div class="transaction-card">
|
|
<div class="card-header">
|
|
<span class="transaction-code">REF-2023-128</span>
|
|
<span class="transaction-date">10/09/2023</span>
|
|
</div>
|
|
<div class="card-content">
|
|
<div class="transaction-desc">
|
|
<div style="font-weight: 600; color: #333; margin-bottom: 4px;">Giới thiệu thành công</div>
|
|
<div style="font-size: 13px; color: #999;">Giới thiệu: Nguyễn Văn A</div>
|
|
</div>
|
|
<div class="transaction-points positive">
|
|
+5 điểm
|
|
</div>
|
|
</div>
|
|
<div class="card-footer">
|
|
<span class="balance-after">Số dư sau: <strong>1.106 điểm</strong></span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Transaction Card 6 -->
|
|
<div class="transaction-card">
|
|
<div class="card-header">
|
|
<span class="transaction-code">RDM-2023-038</span>
|
|
<span class="transaction-date">05/09/2023</span>
|
|
</div>
|
|
<div class="card-content">
|
|
<div class="transaction-desc">
|
|
<div style="font-weight: 600; color: #333; margin-bottom: 4px;">Đổi quà tặng</div>
|
|
<div style="font-size: 13px; color: #999;">Tai nghe Bluetooth Sony WH-1000XM4</div>
|
|
</div>
|
|
<div class="transaction-points negative">
|
|
-200 điểm
|
|
</div>
|
|
</div>
|
|
<div class="card-footer">
|
|
<span class="balance-after">Số dư sau: <strong>1.101 điểm</strong></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
/* Modern Transaction Card Styles */
|
|
.transaction-card {
|
|
background: white;
|
|
border-radius: 12px;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
margin-bottom: 12px;
|
|
overflow: hidden;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.transaction-card:hover {
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.transaction-card .card-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 12px 16px;
|
|
background: #f9fafb;
|
|
border-bottom: 1px solid #e5e7eb;
|
|
}
|
|
|
|
.transaction-code {
|
|
font-weight: 700;
|
|
font-size: 14px;
|
|
color: #005B9A;
|
|
}
|
|
|
|
.transaction-date {
|
|
font-size: 12px;
|
|
color: #9ca3af;
|
|
}
|
|
|
|
.transaction-card .card-content {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 16px;
|
|
}
|
|
|
|
.transaction-desc {
|
|
flex: 1;
|
|
}
|
|
|
|
.transaction-points {
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
text-align: right;
|
|
margin-left: 16px;
|
|
}
|
|
|
|
.transaction-points.positive {
|
|
color: #059669;
|
|
}
|
|
|
|
.transaction-points.negative {
|
|
color: #dc2626;
|
|
}
|
|
|
|
.transaction-points.neutral {
|
|
color: #6b7280;
|
|
}
|
|
|
|
.transaction-card .card-footer {
|
|
padding: 10px 16px;
|
|
background: #fafafa;
|
|
border-top: 1px solid #f0f0f0;
|
|
}
|
|
|
|
.balance-after {
|
|
font-size: 13px;
|
|
color: #666;
|
|
}
|
|
|
|
.balance-after strong {
|
|
color: #005B9A;
|
|
font-weight: 600;
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.transaction-points {
|
|
font-size: 20px;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
function openComplaint(buttonElement) {
|
|
// Get transaction info from the card
|
|
const card = buttonElement.closest('.card');
|
|
const transactionTitle = card.querySelector('h4').textContent.trim();
|
|
const transactionDate = card.querySelector('.text-muted').textContent.replace('Thời gian: ', '').trim();
|
|
|
|
// Generate a transaction ID (in real app this would be from data attributes)
|
|
const transactionId = 'TXN' + Math.floor(Math.random() * 1000000);
|
|
|
|
// Navigate to complaint page with transaction details
|
|
const params = new URLSearchParams({
|
|
id: transactionId,
|
|
title: transactionTitle,
|
|
date: transactionDate
|
|
});
|
|
|
|
window.location.href = `point-complaint.html?${params.toString()}`;
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |