Added Hint Pop-ups for the Customer Portal as well to make the website more user-friendly for first-time visitors.

yehiarasheed · yehiarasheed · commit 2c263cba3310 · 2025-02-15T18:55:17.000+02:00
diff --git a/WebApplication2/Customer/Pages/CustomerComponent.aspx b/WebApplication2/Customer/Pages/CustomerComponent.aspx
@@ -406,6 +406,37 @@
             }
         }
 
+                .hint-popup {
+            position: fixed;
+            bottom: 20px;
+            right: 20px;
+            width: 300px;
+            background-color: #fff;
+            border: 1px solid #ccc;
+            border-radius: 10px;
+            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
+            padding: 20px;
+            z-index: 1000;
+            display: none; /* Initially hidden */
+        }
+
+        .hint-popup-content {
+            position: relative;
+        }
+
+        .close-btn {
+            position: absolute;
+            top: 1px;
+            right: 10px;
+            font-size: 20px;
+            cursor: pointer;
+            color: #333;
+        }
+
+        .close-btn:hover {
+            color: #ff0000;
+        }
+
     </style>
 </head>
 <body class="light-mode">
@@ -689,6 +720,33 @@
             window.location.href = 'login.aspx';
         }
 
+        // Function to show the pop-up
+        function showPopup() {
+            document.getElementById('hintPopup').style.display = 'block';
+        }
+
+        // Function to close the pop-up
+        function closePopup() {
+            document.getElementById('hintPopup').style.display = 'none';
+            sessionStorage.setItem('closedCustomer', 'true');
+        }
+
+        // Show the pop-up when the page loads
+        window.onload = function () {
+            // Check if the user is visiting for the first time in this session
+            if (!sessionStorage.getItem('closedCustomer')) {
+                showPopup();
+            }
+        }
+
     </script>
+
+    <div id="hintPopup" class="hint-popup">
+        <div class="hint-popup-content">
+            <span class="close-btn" onclick="closePopup()">&times;</span>
+            <p><strong>Hint:</strong> Use National ID: <em>1234567</em> Additionally, refer to the Service Plans section to find Plan IDs as needed to access relevant features.</p>
+        </div>
+    </div>
+
 </body>
 </html>
