making user index look cool

scripts/pages/user/main.js

@@ -0,0 +1,33 @@
+document.addEventListener('DOMContentLoaded', function () {
+    var headerText = document.getElementById('headerText');
+    var h1 = document.querySelector('.user-index-h1');
+    var h2 = document.querySelector('.user-index-h2');
+
+    // Function to check if an element is in the viewport
+    function isInViewport(element) {
+        var rect = element.getBoundingClientRect();
+        return (
+            rect.top >= 0 &&
+            rect.left >= 0 &&
+            rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+            rect.right <= (window.innerWidth || document.documentElement.clientWidth)
+        );
+    }
+
+    // Function to handle the scroll event
+    function handleScroll() {
+        if (isInViewport(headerText)) {
+            h1.classList.add('visible');
+            h2.classList.add('visible');
+        } else {
+            h1.classList.remove('visible');
+            h2.classList.remove('visible');
+        }
+    }
+
+    // Attach the handleScroll function to the scroll event
+    window.addEventListener('scroll', handleScroll);
+
+    // Initial check on page load
+    handleScroll();
+});