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

624
html/redeem-confirm.html Normal file
View File

@@ -0,0 +1,624 @@
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Xác nhận đổi quà - 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-color: var(--background-color);
color: var(--text-primary);
line-height: 1.6;
overflow-x: hidden;
}
.header {
background: var(--card-background);
border-bottom: 1px solid var(--border-color);
position: sticky;
top: 0;
z-index: 100;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}
.header-content {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem;
max-width: 480px;
margin: 0 auto;
}
.back-button {
background: none;
border: none;
color: var(--primary-color);
font-size: 1.25rem;
cursor: pointer;
padding: 0.5rem;
border-radius: 0.5rem;
transition: background-color 0.2s;
}
.back-button:hover {
background-color: #f1f5f9;
}
.header-title {
font-size: 1.125rem;
font-weight: 600;
color: var(--text-primary);
}
.container {
max-width: 480px;
margin: 0 auto;
background: var(--card-background);
min-height: 100vh;
}
.content {
padding: 1rem;
padding-bottom: 120px;
}
.reward-card {
background: var(--card-background);
border: 2px solid var(--border-color);
border-radius: 1rem;
padding: 1.5rem;
margin-bottom: 1.5rem;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.reward-image {
width: 100%;
height: 200px;
object-fit: cover;
border-radius: 0.75rem;
margin-bottom: 1rem;
}
.reward-title {
font-size: 1.25rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 0.5rem;
}
.reward-description {
color: var(--text-secondary);
margin-bottom: 1rem;
line-height: 1.6;
}
.reward-points {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 1.125rem;
font-weight: 600;
color: var(--primary-color);
margin-bottom: 1rem;
}
.current-points-card {
background: linear-gradient(135deg, #dbeafe, #bfdbfe);
border: 1px solid var(--primary-color);
border-radius: 0.75rem;
padding: 1rem;
margin-bottom: 1.5rem;
text-align: center;
}
.current-points-title {
font-size: 0.875rem;
color: #1e40af;
margin-bottom: 0.25rem;
}
.current-points-value {
font-size: 1.5rem;
font-weight: 700;
color: #1e40af;
}
.points-calculation {
background: #f8fafc;
border: 1px solid var(--border-color);
border-radius: 0.75rem;
padding: 1rem;
margin-bottom: 1.5rem;
}
.calc-title {
font-size: 1rem;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 0.75rem;
}
.calc-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5rem 0;
border-bottom: 1px solid #e5e7eb;
}
.calc-row:last-child {
border-bottom: none;
padding-top: 0.75rem;
font-weight: 600;
font-size: 1.125rem;
}
.calc-label {
color: var(--text-secondary);
}
.calc-value {
color: var(--text-primary);
font-weight: 500;
}
.calc-row:last-child .calc-label,
.calc-row:last-child .calc-value {
color: var(--text-primary);
}
.insufficient-points {
color: var(--danger-color);
}
.delivery-section {
background: var(--card-background);
border: 1px solid var(--border-color);
border-radius: 0.75rem;
padding: 1rem;
margin-bottom: 1.5rem;
}
.section-title {
font-size: 1rem;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 0.75rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.delivery-option {
display: flex;
align-items: flex-start;
gap: 0.75rem;
padding: 0.75rem;
border: 2px solid var(--border-color);
border-radius: 0.5rem;
margin-bottom: 0.75rem;
cursor: pointer;
transition: all 0.2s;
}
.delivery-option:last-child {
margin-bottom: 0;
}
.delivery-option:hover {
border-color: var(--primary-color);
background: #f8fafc;
}
.delivery-option.selected {
border-color: var(--primary-color);
background: #dbeafe;
}
.delivery-radio {
margin-top: 0.25rem;
}
.delivery-content {
flex: 1;
}
.delivery-title {
font-weight: 600;
color: var(--text-primary);
margin-bottom: 0.25rem;
}
.delivery-desc {
font-size: 0.875rem;
color: var(--text-secondary);
}
.address-form {
background: #f8fafc;
border-radius: 0.5rem;
padding: 1rem;
margin-top: 1rem;
display: none;
}
.address-form.show {
display: block;
}
.form-group {
margin-bottom: 1rem;
}
.form-label {
display: block;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 0.5rem;
font-size: 0.875rem;
}
.form-input {
width: 100%;
padding: 0.75rem;
border: 2px solid var(--border-color);
border-radius: 0.5rem;
font-size: 0.875rem;
background: white;
transition: all 0.2s;
}
.form-input:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.terms-section {
background: #fffbeb;
border: 1px solid #f59e0b;
border-radius: 0.75rem;
padding: 1rem;
margin-bottom: 1.5rem;
}
.terms-title {
font-size: 0.875rem;
font-weight: 600;
color: #92400e;
margin-bottom: 0.5rem;
}
.terms-list {
list-style: none;
padding: 0;
margin: 0;
}
.terms-list li {
font-size: 0.75rem;
color: #92400e;
margin-bottom: 0.25rem;
padding-left: 1rem;
position: relative;
}
.terms-list li::before {
content: "•";
position: absolute;
left: 0;
color: #f59e0b;
font-weight: bold;
}
.action-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: var(--card-background);
border-top: 1px solid var(--border-color);
padding: 1rem;
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
z-index: 50;
}
.action-bar-content {
max-width: 480px;
margin: 0 auto;
display: flex;
gap: 0.75rem;
}
.cancel-button {
flex: 1;
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;
}
.cancel-button:hover {
border-color: var(--secondary-color);
color: var(--text-primary);
}
.confirm-button {
flex: 2;
background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
color: white;
border: none;
padding: 0.75rem;
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;
}
.confirm-button:hover {
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3);
}
.confirm-button:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
@media (max-width: 480px) {
.content {
padding: 0.75rem;
padding-bottom: 120px;
}
}
</style>
</head>
<body>
<div class="container">
<!-- Header -->
<header class="header">
<div class="header-content">
<button class="back-button" onclick="goBack()">
<i class="fas fa-arrow-left"></i>
</button>
<h1 class="header-title">Xác nhận đổi quà</h1>
<div style="width: 2.5rem;"></div>
</div>
</header>
<!-- Content -->
<div class="content">
<!-- Selected Reward -->
<div class="reward-card">
<img src="https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?w=400&h=200&fit=crop"
alt="Voucher giảm giá"
class="reward-image">
<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.
Thời hạn sử dụng: 30 ngày kể từ ngày đổi.
</p>
<div class="reward-points">
<i class="fas fa-coins"></i>
<span>500 điểm</span>
</div>
</div>
<!-- Current Points -->
<div class="current-points-card">
<div class="current-points-title">Điểm hiện tại của bạn</div>
<div class="current-points-value">1,250 điểm</div>
</div>
<!-- Points Calculation -->
<div class="points-calculation">
<h3 class="calc-title">Tính toán điểm</h3>
<div class="calc-row">
<span class="calc-label">Điểm hiện có:</span>
<span class="calc-value">1,250 điểm</span>
</div>
<div class="calc-row">
<span class="calc-label">Điểm cần dùng:</span>
<span class="calc-value">-500 điểm</span>
</div>
<div class="calc-row">
<span class="calc-label">Điểm còn lại:</span>
<span class="calc-value">750 điểm</span>
</div>
</div>
<!-- Delivery Options -->
<div class="delivery-section">
<h3 class="section-title">
<i class="fas fa-shipping-fast"></i>
Phương thức nhận quà
</h3>
<div class="delivery-option selected" onclick="selectDelivery('digital')">
<input type="radio" name="delivery" value="digital" class="delivery-radio" checked>
<div class="delivery-content">
<div class="delivery-title">Nhận mã số qua ứng dụng</div>
<div class="delivery-desc">Mã voucher sẽ được gửi ngay vào tài khoản của bạn</div>
</div>
</div>
<div class="delivery-option" onclick="selectDelivery('email')">
<input type="radio" name="delivery" value="email" class="delivery-radio">
<div class="delivery-content">
<div class="delivery-title">Gửi qua email</div>
<div class="delivery-desc">Mã voucher sẽ được gửi về email đăng ký</div>
</div>
</div>
<div class="delivery-option" onclick="selectDelivery('physical')">
<input type="radio" name="delivery" value="physical" class="delivery-radio">
<div class="delivery-content">
<div class="delivery-title">Giao tận nơi</div>
<div class="delivery-desc">Voucher vật lý sẽ được giao đến địa chỉ của bạn (3-5 ngày)</div>
</div>
</div>
<!-- Address Form (hidden by default) -->
<div class="address-form" id="addressForm">
<div class="form-group">
<label class="form-label">Họ và tên người nhận</label>
<input type="text" class="form-input" placeholder="Nhập họ tên đầy đủ" value="Nguyễn Văn A">
</div>
<div class="form-group">
<label class="form-label">Số điện thoại</label>
<input type="tel" class="form-input" placeholder="Nhập số điện thoại" value="0912345678">
</div>
<div class="form-group">
<label class="form-label">Địa chỉ giao hàng</label>
<input type="text" class="form-input" placeholder="Số nhà, tên đường">
</div>
<div class="form-group" style="margin-bottom: 0;">
<label class="form-label">Phường/Xã, Quận/Huyện, Tỉnh/TP</label>
<input type="text" class="form-input" placeholder="Ví dụ: Phường 1, Quận 1, TP.HCM">
</div>
</div>
</div>
<!-- Terms and Conditions -->
<div class="terms-section">
<div class="terms-title">Điều kiện sử dụng:</div>
<ul class="terms-list">
<li>Voucher có hiệu lực 30 ngày kể từ ngày đổi</li>
<li>Áp dụng cho đơn hàng tối thiểu 2 triệu đồng</li>
<li>Không áp dụng cùng với các khuyến mãi khác</li>
<li>Voucher không thể đổi lại thành điểm hoặc tiền mặt</li>
<li>Mỗi khách hàng chỉ được sử dụng 1 voucher/đơn hàng</li>
</ul>
</div>
</div>
<!-- Action Bar -->
<div class="action-bar">
<div class="action-bar-content">
<button class="cancel-button" onclick="goBack()">
Quay lại
</button>
<button class="confirm-button" onclick="confirmRedemption()">
<i class="fas fa-check"></i>
Xác nhận đổi quà
</button>
</div>
</div>
</div>
<script>
function goBack() {
window.history.back();
}
function selectDelivery(type) {
// Update radio buttons
const radioButtons = document.querySelectorAll('input[name="delivery"]');
radioButtons.forEach(radio => {
radio.checked = radio.value === type;
});
// Update visual selection
const deliveryOptions = document.querySelectorAll('.delivery-option');
deliveryOptions.forEach(option => {
option.classList.remove('selected');
});
event.currentTarget.classList.add('selected');
// Show/hide address form
const addressForm = document.getElementById('addressForm');
if (type === 'physical') {
addressForm.classList.add('show');
} else {
addressForm.classList.remove('show');
}
}
function confirmRedemption() {
const selectedDelivery = document.querySelector('input[name="delivery"]:checked').value;
// Validate address if physical delivery is selected
if (selectedDelivery === 'physical') {
const addressInputs = document.querySelectorAll('#addressForm input');
let allFilled = true;
addressInputs.forEach(input => {
if (!input.value.trim()) {
allFilled = false;
input.style.borderColor = 'var(--danger-color)';
} else {
input.style.borderColor = 'var(--border-color)';
}
});
if (!allFilled) {
alert('Vui lòng điền đầy đủ thông tin giao hàng.');
return;
}
}
// Disable button and show loading
const confirmButton = document.querySelector('.confirm-button');
confirmButton.disabled = true;
confirmButton.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Đang xử lý...';
// Simulate processing
setTimeout(() => {
// Redirect to success page
window.location.href = 'redeem-success.html?reward=voucher-20&delivery=' + selectedDelivery;
}, 2000);
}
// Animation when page loads
document.addEventListener('DOMContentLoaded', function() {
const sections = document.querySelectorAll('.reward-card, .current-points-card, .points-calculation, .delivery-section, .terms-section');
sections.forEach((section, index) => {
section.style.opacity = '0';
section.style.transform = 'translateY(20px)';
section.style.transition = 'all 0.5s ease';
setTimeout(() => {
section.style.opacity = '1';
section.style.transform = 'translateY(0)';
}, index * 100);
});
});
</script>
</body>
</html>