add price policy

2025-11-03 11:20:09 +07:00
parent c0527a086c
commit 21c1c3372c
53 changed files with 7160 additions and 2361 deletions
--- a/html/loyalty-rewards.html
+++ b/html/loyalty-rewards.html
@@ -8,6 +8,63 @@
    <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>
+<style>
+
+        .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;
+        }
+
+</style>
 <body>
    <div class="page-wrapper">
        <!-- Header -->
@@ -16,9 +73,37 @@
                <i class="fas fa-arrow-left"></i>
            </a>
            <h1 class="header-title">Đổi quà tặng</h1>
-            <div style="width: 32px;"></div>
+            <!--<div style="width: 32px;"></div>-->
+            <button class="back-button" onclick="openInfoModal()">
+                <i class="fas fa-info-circle"></i>
+            </button>
        </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" style="font-weight: bold;">Hướng dẫn sử dụng</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 Đổi quà tặng:</p>
+                    <ul class="list-disc ml-6 mt-3">
+                        <li>Sử dụng điểm tích lũy của bạn để đổi các phần quà giá trị trong danh mục.</li>
+                        <li>Bấm vào một phần quà để xem chi tiết và điều kiện áp dụng.</li>
+                        <li>Khi xác nhận đổi quà, bạn có thể chọn "Nhận hàng tại Showroom".</li>
+                        <li>Nếu chọn "Nhận hàng tại Showroom", bạn sẽ cần chọn Showroom bạn muốn đến nhận từ danh sách thả xuống.</li>
+                        <li>Quà đã đổi sẽ được chuyển vào mục "Quà của tôi" (trong trang Hội viên).</li>
+                    </ul>
+                </div>
+                <div class="modal-footer">
+                    <button class="btn btn-primary" onclick="closeInfoModal()">Đóng</button>
+                </div>
+            </div>
+        </div>
+
        <div class="container">
            <!-- Points Balance -->
            <div class="card" style="background: linear-gradient(135deg, #005B9A 0%, #38B6FF 100%); color: white;">
@@ -123,4 +208,25 @@
        </div>
    </div>
 </body>
+<script>
+        function openInfoModal() {
+            document.getElementById('infoModal').style.display = 'flex';
+        }
+
+        function closeInfoModal() {
+            document.getElementById('infoModal').style.display = 'none';
+        }
+
+        function viewOrderDetail(orderId) {
+            window.location.href = `order-detail.html?id=${orderId}`;
+        }
+
+        // Close modal when clicking outside
+        document.addEventListener('click', function(e) {
+            if (e.target.classList.contains('modal-overlay')) {
+                e.target.style.display = 'none';
+            }
+        });
+    </script>
+
 </html>