renolation/worker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add price policy

Browse Source
This commit is contained in:
Phuoc Nguyen
2025-11-03 11:20:09 +07:00
parent c0527a086c
commit 21c1c3372c
53 changed files with 7160 additions and 2361 deletions
Download Patch File Download Diff File Expand all files Collapse all files

453
html/payment-qr.html Normal file
View File

@@ -0,0 +1,453 @@
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Thanh toán - 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="checkout.html" class="back-button">
<i class="fas fa-arrow-left"></i>
</a>
<h1 class="header-title">Thanh toán</h1>
<button class="back-button" onclick="openInfoModal()">
<i class="fas fa-info-circle"></i>
</button>
</div>
<div class="container">
<!-- Payment Amount -->
<div class="card text-center mb-4">
<h3 class="text-2xl font-bold text-primary mb-2">14.541.120đ</h3>
<p class="text-gray-600">Số tiền cần thanh toán</p>
<div class="bg-yellow-50 border border-yellow-200 rounded-lg p-3 mt-3">
<p class="text-yellow-700 font-medium">
<i class="fas fa-info-circle mr-1"></i>
Thanh toán không dưới 20%
</p>
</div>
</div>
<!-- QR Code Payment -->
<div class="card text-center">
<h3 class="card-title">Quét mã QR để thanh toán</h3>
<div class="qr-container">
<img src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=https://eurotile.com/payment/14195000"
alt="QR Code" class="qr-code">
</div>
<p class="text-gray-600 mb-4">
Quét mã QR bằng ứng dụng ngân hàng để thanh toán nhanh chóng
</p>
<!-- Payment Methods -->
<!--<div class="payment-methods">
<h4 class="font-semibold mb-3">Ứng dụng hỗ trợ:</h4>
<div class="app-grid">
<div class="app-item">
<div class="app-icon bg-red-100">
<i class="fas fa-university text-red-600"></i>
</div>
<span class="text-xs">Techcombank</span>
</div>
<div class="app-item">
<div class="app-icon bg-blue-100">
<i class="fas fa-credit-card text-blue-600"></i>
</div>
<span class="text-xs">Vietcombank</span>
</div>
<div class="app-item">
<div class="app-icon bg-green-100">
<i class="fas fa-mobile-alt text-green-600"></i>
</div>
<span class="text-xs">MoMo</span>
</div>
<div class="app-item">
<div class="app-icon bg-purple-100">
<i class="fas fa-wallet text-purple-600"></i>
</div>
<span class="text-xs">ZaloPay</span>
</div>
<div class="app-item">
<div class="app-icon bg-orange-100">
<i class="fas fa-coins text-orange-600"></i>
</div>
<span class="text-xs">ShopeePay</span>
</div>
<div class="app-item">
<div class="app-icon bg-indigo-100">
<i class="fas fa-money-check-alt text-indigo-600"></i>
</div>
<span class="text-xs">Banking</span>
</div>
</div>
</div>
</div>-->
<!-- Bank Transfer Info -->
<div class="card">
<h3 class="card-title">Thông tin chuyển khoản</h3>
<div class="transfer-info">
<div class="info-row">
<span class="info-label">Ngân hàng:</span>
<span class="info-value">BIDV</span>
<button class="copy-btn" onclick="copyText('Techcombank')">
<i class="fas fa-copy"></i>
</button>
</div>
<div class="info-row">
<span class="info-label">Số tài khoản:</span>
<span class="info-value">19036810704016</span>
<button class="copy-btn" onclick="copyText('19036810704016')">
<i class="fas fa-copy"></i>
</button>
</div>
<div class="info-row">
<span class="info-label">Chủ tài khoản:</span>
<span class="info-value">CÔNG TY EUROTILE</span>
<button class="copy-btn" onclick="copyText('CÔNG TY EUROTILE')">
<i class="fas fa-copy"></i>
</button>
</div>
<div class="info-row">
<span class="info-label">Nội dung:</span>
<span class="info-value">DH001234 La Nguyen Quynh</span>
<button class="copy-btn" onclick="copyText('DH001234 La Nguyen Quynh')">
<i class="fas fa-copy"></i>
</button>
</div>
</div>
<div class="bg-blue-50 border border-blue-200 rounded-lg p-3 mt-4">
<p class="text-blue-700 text-sm">
<i class="fas fa-lightbulb mr-1"></i>
<strong>Lưu ý:</strong> Vui lòng ghi đúng nội dung chuyển khoản để đơn hàng được xử lý nhanh chóng.
</p>
</div>
</div>
<!-- Action Buttons -->
<div class="action-buttons">
<button class="btn btn-secondary" onclick="confirmPayment()">
<i class="fas fa-check"></i> Đã thanh toán
</button>
<button class="btn btn-primary" onclick="uploadProof()">
<i class="fas fa-camera"></i> Upload bill chuyển khoản
</button>
</div>
<!-- Timer -->
<div class="timer-section">
<p class="text-center text-gray-600">
<i class="fas fa-clock mr-1"></i>
Thời gian thanh toán: <span id="countdown" class="font-semibold text-red-600">14:59</span>
</p>
</div>
</div>
<!-- Info Modal -->
<div id="infoModal" class="modal-overlay" style="display: none;">
<div class="modal-content info-modal">
<div class="modal-header">
<h3 class="modal-title">Hướng dẫn thanh toán</h3>
<button class="modal-close" onclick="closeInfoModal()">
<i class="fas fa-times"></i>
</button>
</div>
<div class="modal-body">
<p>Đây là nội dung hướng dẫn sử dụng cho tính năng Thanh toán:</p>
<ul class="list-disc ml-6 mt-3">
<li>Quét mã QR bằng app ngân hàng hoặc ví điện tử</li>
<li>Chuyển khoản theo thông tin được cung cấp</li>
<li>Ghi đúng nội dung chuyển khoản</li>
<li>Upload hóa đơn sau khi chuyển khoản</li>
<li>Thanh toán tối thiểu 20% giá trị đơn hàng</li>
</ul>
</div>
<div class="modal-footer">
<button class="btn btn-primary" onclick="closeInfoModal()">Đóng</button>
</div>
</div>
</div>
</div>
<style>
.qr-container {
display: flex;
justify-content: center;
margin: 20px 0;
}
.qr-code {
width: 200px;
height: 200px;
border: 1px solid #e5e7eb;
border-radius: 8px;
padding: 10px;
background: white;
}
.payment-methods {
margin-top: 20px;
}
.app-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-top: 12px;
}
.app-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
.app-icon {
width: 40px;
height: 40px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
}
.transfer-info {
display: flex;
flex-direction: column;
gap: 12px;
}
.info-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0;
border-bottom: 1px solid #f3f4f6;
}
.info-label {
font-weight: 500;
color: #6b7280;
flex-shrink: 0;
width: 120px;
}
.info-value {
flex: 1;
text-align: right;
font-weight: 600;
margin-right: 8px;
}
.copy-btn {
background: #f3f4f6;
border: 1px solid #d1d5db;
border-radius: 4px;
padding: 4px 8px;
color: #6b7280;
cursor: pointer;
transition: all 0.2s;
}
.copy-btn:hover {
background: #e5e7eb;
color: #374151;
}
.action-buttons {
display: flex;
gap: 12px;
margin: 20px 0;
}
.action-buttons .btn {
flex: 1;
}
.timer-section {
padding: 15px;
background: #fef3c7;
border: 1px solid #f59e0b;
border-radius: 8px;
margin-top: 20px;
}
.modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.5);
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.modal-content {
background: white;
border-radius: 12px;
width: 100%;
max-width: 500px;
animation: slideUp 0.3s ease;
}
@keyframes slideUp {
from { transform: translateY(20px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.modal-header {
padding: 20px;
border-bottom: 1px solid #e5e7eb;
display: flex;
justify-content: space-between;
align-items: center;
}
.modal-body {
padding: 20px;
}
.modal-footer {
padding: 20px;
border-top: 1px solid #e5e7eb;
display: flex;
gap: 12px;
}
.modal-close {
background: none;
border: none;
font-size: 20px;
color: #6b7280;
cursor: pointer;
}
@media (max-width: 768px) {
.app-grid {
grid-template-columns: repeat(2, 1fr);
}
.action-buttons {
flex-direction: column;
}
}
</style>
<script>
// Countdown timer
let timeLeft = 15 * 60; // 15 minutes in seconds
function updateCountdown() {
const minutes = Math.floor(timeLeft / 60);
const seconds = timeLeft % 60;
document.getElementById('countdown').textContent =
`${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
if (timeLeft > 0) {
timeLeft--;
} else {
alert('Thời gian thanh toán đã hết hạn! Vui lòng đặt hàng lại.');
window.location.href = 'cart.html';
}
}
// Start countdown
setInterval(updateCountdown, 1000);
updateCountdown();
function copyText(text) {
navigator.clipboard.writeText(text).then(() => {
// Show success feedback
const event = window.event;
const button = event.target.closest('.copy-btn');
const originalIcon = button.innerHTML;
button.innerHTML = '<i class="fas fa-check text-green-600"></i>';
setTimeout(() => {
button.innerHTML = originalIcon;
}, 1000);
// Show toast
showToast('Đã sao chép: ' + text);
}).catch(() => {
// Fallback for older browsers
alert('Đã sao chép: ' + text);
});
}
function showToast(message) {
// Create toast notification
const toast = document.createElement('div');
toast.className = 'fixed top-20 left-1/2 transform -translate-x-1/2 bg-green-600 text-white px-4 py-2 rounded-lg z-50 transition-opacity';
toast.textContent = message;
document.body.appendChild(toast);
setTimeout(() => {
toast.style.opacity = '0';
setTimeout(() => {
document.body.removeChild(toast);
}, 300);
}, 2000);
}
function confirmPayment() {
if (confirm('Xác nhận bạn đã thanh toán đơn hàng này?')) {
alert('Cảm ơn! Chúng tôi sẽ kiểm tra và xác nhận thanh toán của bạn trong vòng 15 phút.');
window.location.href = 'order-success.html';
}
}
function uploadProof() {
const input = document.createElement('input');
input.type = 'file';
input.accept = 'image/*';
input.onchange = function(e) {
const file = e.target.files[0];
if (file) {
alert(`Đã tải lên bill chuyển khoản: ${file.name}\nChúng tôi sẽ xác nhận thanh toán trong vòng 15 phút.`);
window.location.href = 'order-success.html';
}
};
input.click();
}
function openInfoModal() {
document.getElementById('infoModal').style.display = 'flex';
}
function closeInfoModal() {
document.getElementById('infoModal').style.display = 'none';
}
// Close modal when clicking outside
document.addEventListener('click', function(e) {
if (e.target.classList.contains('modal-overlay')) {
e.target.style.display = 'none';
}
});
</script>
</body>
</html>