563 lines
18 KiB
HTML
563 lines
18 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à 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> |