From aa2f0f7181565c1f106df43a4d5ab07915a711f7 Mon Sep 17 00:00:00 2001
From: AkisYTB3 <akisytbsteamy@gmail.com>
Date: Thu, 25 Jan 2024 15:50:51 +0100
Subject: [PATCH] making user index look cool

---
 pages/user/index.html       |  5 ++++-
 scripts/pages/user/main.js  | 33 +++++++++++++++++++++++++++++++++
 styles/pages/user/style.css | 14 +++++++++++++-
 3 files changed, 50 insertions(+), 2 deletions(-)
 create mode 100644 scripts/pages/user/main.js

diff --git a/pages/user/index.html b/pages/user/index.html
index 2dc08b4..8272824 100644
--- a/pages/user/index.html
+++ b/pages/user/index.html
@@ -5,4 +5,7 @@
         <h1 class="user-index-h1">Hello, <span class="outlined-text"><template name="username"></template></span>.</h1>
         <h2 class="user-index-h2">What would you like to watch?</h2>
     </div>
-</header>
\ No newline at end of file
+</header>
+
+
+<script src="/scripts/pages/user/main.js" defer></script>
\ No newline at end of file
diff --git a/scripts/pages/user/main.js b/scripts/pages/user/main.js
new file mode 100644
index 0000000..d3c8e26
--- /dev/null
+++ b/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();
+});
diff --git a/styles/pages/user/style.css b/styles/pages/user/style.css
index 3020ce8..23b8b25 100644
--- a/styles/pages/user/style.css
+++ b/styles/pages/user/style.css
@@ -19,4 +19,16 @@
 .outlined-text {
     -webkit-text-fill-color: transparent;
     -webkit-text-stroke: 2.2px #8c00ff;
-}
\ No newline at end of file
+}
+
+.user-index-h1,
+.user-index-h2 {
+    opacity: 0; /* Initially set opacity to 0 */
+    transform: translateX(-20px); /* Move elements outside the viewport to the left */
+    transition: opacity 0.8s ease, transform 0.8s ease; /* Apply transition effect */
+}
+
+.visible {
+    opacity: 1;
+    transform: translateX(0); /* Move elements back to their original position */
+}