first commit
This commit is contained in:
Phuoc Nguyen
563
html/redeem-success.html
Normal file
563
html/redeem-success.html
Normal file
@@ -0,0 +1,563 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user