659 lines
22 KiB
HTML
659 lines
22 KiB
HTML
<!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 class="delivery-option" onclick="selectDelivery('showroom')">
|
|
<input type="radio" name="delivery" value="showroom" class="delivery-radio">
|
|
<div class="delivery-content">
|
|
<div class="delivery-title">Nhận hàng tại Showroom</div>
|
|
<div class="delivery-desc">Đến nhận trực tiếp tại showroom EuroTile gần bạn</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Showroom Selection (hidden by default) -->
|
|
<div class="showroom-form" id="showroomForm" style="display: none;">
|
|
<div class="form-group" style="margin-bottom: 0;">
|
|
<label class="form-label">Chọn showroom</label>
|
|
<select class="form-input" id="showroomSelect">
|
|
<option value="">Chọn showroom gần bạn</option>
|
|
<option value="hcm-q1">Showroom Q1 - 123 Nguyễn Huệ, Quận 1, TP.HCM</option>
|
|
<option value="hcm-q7">Showroom Q7 - 456 Nguyễn Thị Thập, Quận 7, TP.HCM</option>
|
|
<option value="hn-hbt">Showroom Hà Nội - 789 Hoàng Quốc Việt, Cầu Giấy, Hà Nội</option>
|
|
<option value="dn-hc">Showroom Đà Nẵng - 321 Lê Duẩn, Hải Châu, Đà Nẵng</option>
|
|
<option value="bd-td">Showroom Bình Dương - 654 Đại lộ Bình Dương, Thủ Dầu Một</option>
|
|
</select>
|
|
<small class="text-gray-500 mt-2 block">
|
|
<i class="fas fa-clock mr-1"></i>
|
|
Giờ làm việc: 8:00 - 18:00 (Thứ 2 - Thứ 7)
|
|
</small>
|
|
</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');
|
|
const showroomForm = document.getElementById('showroomForm');
|
|
|
|
if (type === 'physical') {
|
|
addressForm.classList.add('show');
|
|
showroomForm.style.display = 'none';
|
|
} else if (type === 'showroom') {
|
|
addressForm.classList.remove('show');
|
|
showroomForm.style.display = 'block';
|
|
} else {
|
|
addressForm.classList.remove('show');
|
|
showroomForm.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
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> |