From 870b4961698307d7d51a2dd2e2d0aac3ec4206db Mon Sep 17 00:00:00 2001
From: Edasgh <edas25564@gmail.com>
Date: Fri, 8 Nov 2024 12:00:49 +0530
Subject: [PATCH] "progressbar & back to top button added"

---
 FAQs.css            | 226 ++++++++++--------
 FAQs.html           |  18 +-
 contributors.css    |  55 +++++
 contributors.html   |   9 +
 contributors.js     |  26 ++
 feedback.css        | 351 +++++++++++++++------------
 feedback.html       | 563 +++++++++++++++++++++-----------------------
 index.html          | 405 +++++++++++++++++--------------
 privacy_policy.html | 319 ++++++++++++++++---------
 test.html           | 502 +++++++++++++++++++++++----------------
 10 files changed, 1446 insertions(+), 1028 deletions(-)

diff --git a/FAQs.css b/FAQs.css
index 73431aa..5ee5ac6 100644
--- a/FAQs.css
+++ b/FAQs.css
@@ -1,175 +1,199 @@
-@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Rajdhani:wght@300&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Rajdhani:wght@300&display=swap");
 
 body {
-    font-family: 'Rajdhani', sans-serif;
-    background-color: #0b0e17;
-    color: #e5e5e5;
-    margin: 0;
-    padding: 0;
-    line-height: 1.6;
-    overflow-x: hidden;
+  font-family: "Rajdhani", sans-serif;
+  background-color: #0b0e17;
+  color: #e5e5e5;
+  margin: 0;
+  padding: 0;
+  line-height: 1.6;
+  overflow-x: hidden;
+}
+
+/* Styling the progress bar */
+.progress-bar-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 99999;
+  height: 4px;
+}
+
+#progress-bar-faqs {
+  border: none;
+  border-radius: 2rem;
+  height: 100%;
+  width: 0%;
+  background: linear-gradient(
+    90deg,
+    cyan,
+    #bbdefb,
+    #1694db,
+    #5c6bc0,
+    #2751bd,
+    #283593,
+    #a402c4,
+    #F72585
+  );
+  box-shadow: 0 0 5px #bbdefb, 0 0 13px #283593, 0 0 21px #F72585;
 }
 
 /* Custom Scrollbar */
 html::-webkit-scrollbar {
-    width: 12px;
+  width: 12px;
 }
 
 html::-webkit-scrollbar-track {
-    background: #0e1126;
+  background: #0e1126;
 }
 
 html::-webkit-scrollbar-thumb {
-    background: linear-gradient(45deg, #0ff0fc, #f72585);
-    border-radius: 10px;
+  background: linear-gradient(45deg, #0ff0fc, #f72585);
+  border-radius: 10px;
 }
 
 html::-webkit-scrollbar-thumb:hover {
-    background: linear-gradient(45deg, #f72585, #7209b7);
+  background: linear-gradient(45deg, #f72585, #7209b7);
 }
 
 /* Mozilla Firefox scrollbar */
 html {
-    scrollbar-color: #0ff0fc #0e1126;
-    scrollbar-width: 20px;
+  scrollbar-color: #0ff0fc #0e1126;
+  scrollbar-width: 20px;
 }
 
-
-
 header {
-    background: #0b0e17;
-    color: #0ff0fc;
-    text-align: center;
-    padding: 1px 0;
-    box-shadow: 0 4px 8px rgba(0, 255, 255, 0.1);
-    position: relative;
-    z-index: 10;
-    
+  background: #0b0e17;
+  color: #0ff0fc;
+  text-align: center;
+  padding: 1px 0;
+  box-shadow: 0 4px 8px rgba(0, 255, 255, 0.1);
+  position: relative;
+  z-index: 10;
 }
 
 h1 {
-    font-family: 'Orbitron', sans-serif;
-    font-size: 1.5em;
-    letter-spacing: 0.1em;
-    text-transform: uppercase;
-    /* margin-bottom: 1px; */
-    
+  font-family: "Orbitron", sans-serif;
+  font-size: 1.5em;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  /* margin-bottom: 1px; */
 }
 
 main {
-    padding: 40px;
-    max-width: 900px;
-    margin: auto;
-    position: relative;
-    background: #0e1126;
-    border-radius: 10px;
-    box-shadow: 0 10px 20px rgba(0, 255, 255, 0.1);
+  padding: 40px;
+  max-width: 900px;
+  margin: auto;
+  position: relative;
+  background: #0e1126;
+  border-radius: 10px;
+  box-shadow: 0 10px 20px rgba(0, 255, 255, 0.1);
 }
 
 h2 {
-    color: #0ff0fc;
-    font-family: 'Orbitron', sans-serif;
-    font-size: 1.8em;
-    margin-bottom: 10px;
-    padding-bottom: 5px;
-    border-bottom: 2px solid #0ff0fc;
-    position: relative;
-    cursor: pointer;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
+  color: #0ff0fc;
+  font-family: "Orbitron", sans-serif;
+  font-size: 1.8em;
+  margin-bottom: 10px;
+  padding-bottom: 5px;
+  border-bottom: 2px solid #0ff0fc;
+  position: relative;
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
 
 h2::before {
-    content: '';
-    position: absolute;
-    left: 0;
-    bottom: -2px;
-    height: 3px;
-    width: 30px;
-    background: #f72585;
+  content: "";
+  position: absolute;
+  left: 0;
+  bottom: -2px;
+  height: 3px;
+  width: 30px;
+  background: #f72585;
 }
 
 .arrow {
-    font-size: 1.5em;
-    transition: transform 0.3s ease;
+  font-size: 1.5em;
+  transition: transform 0.3s ease;
 }
 
 .rotate {
-    transform: rotate(180deg);
+  transform: rotate(180deg);
 }
 
 .faq-section {
-    margin: 30px 0;
+  margin: 30px 0;
 }
 
 .faq-section p {
-    font-size: 1.2em;
-    color: #d3d3d3;
-    display: none; /* Hidden initially */
+  font-size: 1.2em;
+  color: #d3d3d3;
+  display: none; /* Hidden initially */
 }
 
 ul {
-    padding-left: 20px;
-    display: none; /* Hidden initially */
+  padding-left: 20px;
+  display: none; /* Hidden initially */
 }
 
 ul li {
-    margin: 10px 0;
+  margin: 10px 0;
 }
 
 ul li::before {
-    content: "»";
-    color: #0ff0fc;
-    margin-right: 10px;
+  content: "»";
+  color: #0ff0fc;
+  margin-right: 10px;
 }
 
 footer {
-    background: #0b0e17;
-    color: #999;
-    text-align: center;
-    padding: 15px 0;
-    position: relative;
-    bottom: 0;
-    width: 100%;
-    margin-top: 100px;
-
+  background: #0b0e17;
+  color: #999;
+  text-align: center;
+  padding: 15px 0;
+  position: relative;
+  bottom: 0;
+  width: 100%;
+  margin-top: 100px;
 }
 
 footer p {
-    margin-top: 10px;
-    width: 100%;
-    font-size: 1.2em;
-    color: #999;
-
+  margin-top: 10px;
+  width: 100%;
+  font-size: 1.2em;
+  color: #999;
 }
 
 /* Futuristic Hover Effects */
 h2:hover {
-    color: #f72585;
-    transition: color 0.3s ease;
+  color: #f72585;
+  transition: color 0.3s ease;
 }
 
 h2:hover::before {
-    background: #0ff0fc;
-    width: 50px;
-    transition: all 0.3s ease;
+  background: #0ff0fc;
+  width: 50px;
+  transition: all 0.3s ease;
 }
 
 main::before {
-    content: '';
-    position: absolute;
-    top: -10px;
-    left: -10px;
-    right: -10px;
-    bottom: -10px;
-    background: linear-gradient(45deg, #0ff0fc, #f72585, #7209b7);
-    filter: blur(20px);
-    z-index: -1;
+  content: "";
+  position: absolute;
+  top: -10px;
+  left: -10px;
+  right: -10px;
+  bottom: -10px;
+  background: linear-gradient(45deg, #0ff0fc, #f72585, #7209b7);
+  filter: blur(20px);
+  z-index: -1;
 }
 
 /* Interactive elements */
-.faq-section p:hover, ul li:hover {
-    color: #f72585;
-    transition: color 0.3s ease;
-}
\ No newline at end of file
+.faq-section p:hover,
+ul li:hover {
+  color: #f72585;
+  transition: color 0.3s ease;
+}
diff --git a/FAQs.html b/FAQs.html
index 1395cc1..5bb5e8b 100644
--- a/FAQs.html
+++ b/FAQs.html
@@ -64,6 +64,11 @@
     </style>
   </head>
   <body>
+    <!-- on scroll progress bar -->
+    <div class="progress-bar-container">
+      <div class="progress-bar" id="progress-bar-faqs"></div>
+    </div>
+
     <div class="home-nav">
       <a href="/"
         ><i class="fa-solid fa-arrow-left-long"></i>&nbsp; Return to Home</a
@@ -396,7 +401,8 @@ <h2 onclick="toggleAnswer(this)">
         class="text-center p-3"
         style="background-color: rgba(0, 0, 0, 0.05)"
       >
-        © <span id="currentYear"></span> Alien-Invasion-Defense. All rights reserved.
+        © <span id="currentYear"></span> Alien-Invasion-Defense. All rights
+        reserved.
       </div>
       <!-- Copyright -->
     </footer>
@@ -406,8 +412,8 @@ <h2 onclick="toggleAnswer(this)">
     <script src="FAQs.js"></script>
 
     <script>
-
-      document.getElementById("currentYear").textContent = new Date().getFullYear();
+      document.getElementById("currentYear").textContent =
+        new Date().getFullYear();
 
       window.embeddedChatbotConfig = {
         chatbotId: "W_g3OYohwvFoV5lha0KUf",
@@ -425,6 +431,12 @@ <h2 onclick="toggleAnswer(this)">
           } else {
             scrollUpBtn.style.display = "none";
           }
+          const totalHeight = document.documentElement.scrollHeight - window.innerHeight;
+          const scrollPosition = window.pageYOffset;
+          const scrollPercentage = (scrollPosition / totalHeight) * 100;
+          document.getElementById(
+            "progress-bar-faqs"
+          ).style.width = `${scrollPercentage}%`;
         };
       };
 
diff --git a/contributors.css b/contributors.css
index 238fd26..a117d56 100644
--- a/contributors.css
+++ b/contributors.css
@@ -3,6 +3,61 @@
     margin: 0;
     padding: 0;
   }
+
+  /* Styling the progress bar */
+.progress-bar-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 99999;
+  height: 4px;
+}
+
+#progress-bar-cn {
+  border: none;
+  border-radius: 2rem;
+  height: 100%;
+  width: 0%;
+    background: linear-gradient(
+    90deg,
+    cyan,
+    #bbdefb,
+    #1694db,
+    #5c6bc0,
+    #2751bd,
+    #283593,
+    #a402c4,
+    #F72585
+  );
+  box-shadow: 0 0 5px #bbdefb, 0 0 13px #283593, 0 0 21px #F72585;
+}
+
+/* Scroll Up Button Styles */
+#scrollUpBtn-cn {
+  display: none;
+  position: fixed;
+  bottom: 20px;
+  right: 15px;
+  background-color: #007bff;
+  color: #fff;
+  padding: .7rem 1.4rem;
+  border: none;
+  border-radius: 50%;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
+  font-size: 1.5rem;
+  transition: all 0.3s ease;
+  cursor: pointer;
+  z-index: 1000;
+}
+
+/* Hover Effect */
+#scrollUpBtn-cn:hover {
+  background-color: #0056b3;
+  transform: scale(1.05);
+  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
+}
+
   
   .container {
     text-align: center;
diff --git a/contributors.html b/contributors.html
index 42a991c..4879439 100644
--- a/contributors.html
+++ b/contributors.html
@@ -9,6 +9,12 @@
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 </head>
 <body>
+
+    <!-- on scroll progress bar -->
+  <div class="progress-bar-container">
+    <div class="progress-bar" id="progress-bar-cn"></div>
+  </div>
+
     <div class="home-nav">
         <a href="/"><i class="fa-solid fa-arrow-left-long"></i> &nbsp; Return to Home</a>
     </div>
@@ -24,6 +30,9 @@ <h2>Project Statistics</h2>
     <h1 class="title">Our Contributors</h1>
   </div>
   <div id="contributors" class="contributors-grid"></div>
+
+  <!-- Scroll to top button -->
+ <button id="scrollUpBtn-cn" onclick="scrollToTop()">↑</button>
   <style>
     @property --angle{
       syntax: "<angle>";
diff --git a/contributors.js b/contributors.js
index 719973e..cb6a094 100644
--- a/contributors.js
+++ b/contributors.js
@@ -36,4 +36,30 @@ async function fetchContributorData() {
   }
 }
 
+     window.onscroll = function () {
+       const scrollUpBtn = document.getElementById("scrollUpBtn-cn");
+       if (
+         document.body.scrollTop > 100 ||
+         document.documentElement.scrollTop > 100
+       ) {
+         scrollUpBtn.style.display = "block";
+       } else {
+         scrollUpBtn.style.display = "none";
+       }
+       const totalHeight =
+         document.documentElement.scrollHeight - window.innerHeight;
+       const scrollPosition = window.pageYOffset;
+       const scrollPercentage = (scrollPosition / totalHeight) * 100;
+       document.getElementById(
+         "progress-bar-cn"
+       ).style.width = `${scrollPercentage}%`;
+     };
+
+     function scrollToTop() {
+       window.scrollTo({
+         top: 0,
+         behavior: "smooth",
+       });
+     }
+
 fetchContributorData();
diff --git a/feedback.css b/feedback.css
index 298d151..e701b54 100644
--- a/feedback.css
+++ b/feedback.css
@@ -1,150 +1,203 @@
+/* Styling the progress bar */
+.progress-bar-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 99999;
+  height: 4px;
+}
+
+#progress-bar-fb {
+  border: none;
+  border-radius: 2rem;
+  height: 100%;
+  width: 0%;
+    background: linear-gradient(
+    90deg,
+    cyan,
+    #bbdefb,
+    #1694db,
+    #5c6bc0,
+    #2751bd,
+    #283593,
+    #a402c4,
+    #F72585
+  );
+  box-shadow: 0 0 5px #bbdefb, 0 0 13px #283593, 0 0 21px #F72585;
+}
+
+/* Scroll Up Button Styles */
+#scrollUpBtn-fb {
+  display: none;
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  background-color: #007bff;
+  color: #fff;
+  padding: .7rem 1.4rem;
+  border: none;
+  border-radius: 50%;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
+  font-size: 1.5rem;
+  transition: all 0.3s ease;
+  cursor: pointer;
+  z-index: 1000;
+}
+
+/* Hover Effect */
+#scrollUpBtn-fb:hover {
+  background-color: #0056b3;
+  transform: scale(1.05);
+  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
+}
+
 .space-bg {
-            background: linear-gradient(135deg, #0a0f1f 0%, #1a1f3f 50%, #0a0f1f 100%);
-            background-size: 400% 400%;
-            animation: gradientBG 15s ease infinite;
-        }
-        
-        @keyframes gradientBG {
-            0% { background-position: 0% 50%; }
-            50% { background-position: 100% 50%; }
-            100% { background-position: 0% 50%; }
-        }
-
-        .glassmorphism {
-            background: rgba(13, 17, 38, 0.85);
-            backdrop-filter: blur(20px);
-            border: 1px solid rgba(255, 255, 255, 0.08);
-            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
-        }
-
-        /* Select Styling */
-        select {
-            appearance: none;
-            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236366f1'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
-            background-repeat: no-repeat;
-            background-position: right 1rem center;
-            background-size: 1.5em;
-            padding-right: 2.5rem;
-        }
-
-        select:focus {
-            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%234f46e5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
-        }
-
-        /*  Dropdown Animation */
-        .custom-select {
-            position: relative;
-            transition: all 0.3s ease;
-        }
-
-        .custom-select::after {
-            content: '';
-            position: absolute;
-            top: -2px;
-            left: -2px;
-            right: -2px;
-            bottom: -2px;
-            border-radius: 0.5rem;
-            background: linear-gradient(45deg, #4f46e5, #6366f1);
-            opacity: 0;
-            transition: opacity 0.3s ease;
-            z-index: -1;
-        }
-
-        .custom-select:hover::after {
-            opacity: 0.5;
-        }
-
-
-        .star-rating {
-
-            display: flex;
-            justify-content: center;
-            margin-top: 10px;
-            flex-direction: row-reverse;
-            font-size: 3rem;
-            gap: 25px;
-            line-height: 1;
-
-        }
-
-        .star-rating input {
-
-            display: none; /* Hide the radio buttons */
-
-        }
-
-        .star-rating label {
-
-            color: #4b5563; /* Default star color */
-            cursor: pointer;
-
-        }
-
-        .star-rating input:checked ~ label {
-
-            color: #6366f1;
-            text-shadow: 0 0 10px rgba(99, 102, 241, 0.5);
-
-        }
-
-        .star-rating label:hover,
-        .star-rating label:hover ~ label {
-
-            color: #6366f1; /* Hover effect */
-            text-shadow: 0 0 10px rgba(99, 102, 241, 0.5);
-            
-        }
-
-        /* Input and Textarea Styling */
-        .form-input {
-            background: rgba(17, 24, 39, 0.8);
-            border: 1px solid rgba(99, 102, 241, 0.2);
-            transition: all 0.3s ease;
-        }
-
-        .form-input:focus {
-            border-color: #6366f1;
-            box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
-            background: rgba(17, 24, 39, 0.9);
-        }
-
-        /* Submit Button Animation */
-        .submit-btn {
-            background: linear-gradient(45deg, #4f46e5, #6366f1);
-            transition: all 0.3s ease;
-            position: relative;
-            overflow: hidden;
-        }
-
-        .submit-btn::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: -100%;
-            width: 100%;
-            height: 100%;
-            background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.2), transparent);
-            transition: all 0.5s ease;
-        }
-
-        .submit-btn:hover::before {
-            left: 100%;
-        }
-
-        /* Success Message Animation */
-        @keyframes slideIn {
-            from {
-                transform: translateY(-100%);
-                opacity: 0;
-            }
-            to {
-                transform: translateY(0);
-                opacity: 1;
-            }
-        }
-
-        .success-message {
-            animation: slideIn 0.4s ease forwards;
-        }
-    
\ No newline at end of file
+  background: linear-gradient(135deg, #0a0f1f 0%, #1a1f3f 50%, #0a0f1f 100%);
+  background-size: 400% 400%;
+  animation: gradientBG 15s ease infinite;
+}
+
+@keyframes gradientBG {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+.glassmorphism {
+  background: rgba(13, 17, 38, 0.85);
+  backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+}
+
+/* Select Styling */
+select {
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236366f1'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 1rem center;
+  background-size: 1.5em;
+  padding-right: 2.5rem;
+}
+
+select:focus {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%234f46e5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
+}
+
+/*  Dropdown Animation */
+.custom-select {
+  position: relative;
+  transition: all 0.3s ease;
+}
+
+.custom-select::after {
+  content: "";
+  position: absolute;
+  top: -2px;
+  left: -2px;
+  right: -2px;
+  bottom: -2px;
+  border-radius: 0.5rem;
+  background: linear-gradient(45deg, #4f46e5, #6366f1);
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  z-index: -1;
+}
+
+.custom-select:hover::after {
+  opacity: 0.5;
+}
+
+.star-rating {
+  display: flex;
+  justify-content: center;
+  margin-top: 10px;
+  flex-direction: row-reverse;
+  font-size: 3rem;
+  gap: 25px;
+  line-height: 1;
+}
+
+.star-rating input {
+  display: none; /* Hide the radio buttons */
+}
+
+.star-rating label {
+  color: #4b5563; /* Default star color */
+  cursor: pointer;
+}
+
+.star-rating input:checked ~ label {
+  color: #6366f1;
+  text-shadow: 0 0 10px rgba(99, 102, 241, 0.5);
+}
+
+.star-rating label:hover,
+.star-rating label:hover ~ label {
+  color: #6366f1; /* Hover effect */
+  text-shadow: 0 0 10px rgba(99, 102, 241, 0.5);
+}
+
+/* Input and Textarea Styling */
+.form-input {
+  background: rgba(17, 24, 39, 0.8);
+  border: 1px solid rgba(99, 102, 241, 0.2);
+  transition: all 0.3s ease;
+}
+
+.form-input:focus {
+  border-color: #6366f1;
+  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
+  background: rgba(17, 24, 39, 0.9);
+}
+
+/* Submit Button Animation */
+.submit-btn {
+  background: linear-gradient(45deg, #4f46e5, #6366f1);
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+.submit-btn::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(
+    45deg,
+    transparent,
+    rgba(255, 255, 255, 0.2),
+    transparent
+  );
+  transition: all 0.5s ease;
+}
+
+.submit-btn:hover::before {
+  left: 100%;
+}
+
+/* Success Message Animation */
+@keyframes slideIn {
+  from {
+    transform: translateY(-100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+.success-message {
+  animation: slideIn 0.4s ease forwards;
+}
diff --git a/feedback.html b/feedback.html
index f0ce46a..1f807cb 100644
--- a/feedback.html
+++ b/feedback.html
@@ -1,314 +1,297 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Game Feedback - Alien Invasion Defense</title>
-    <link
-      href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css"
-      rel="stylesheet"
-    />
-    <link rel="stylesheet" href="feedback.css" />
-  </head>
-  <body class="space-bg min-h-screen text-white">
-    <div class="container mx-auto px-4 py-8">
-      <!-- Navigation -->
-      <nav class="mb-8">
-        <a
-          href="index.html"
-          class="inline-flex items-center text-indigo-400 hover:text-indigo-300 transition-all duration-300"
-        >
-          <svg
-            class="w-5 h-5 mr-2 transform group-hover:-translate-x-1"
-            fill="none"
-            stroke="currentColor"
-            viewBox="0 0 24 24"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M10 19l-7-7m0 0l7-7m-7 7h18"
-            />
-          </svg>
-          Return to Battle
-        </a>
-      </nav>
-      <div class="gtranslate_wrapper"></div>
-      <script>
-        window.gtranslateSettings = {
-          default_language: "en",
-          native_language_names: true,
-          languages: ["en", "fr", "de", "it", "es", "pl", "hi"],
-          wrapper_selector: ".gtranslate_wrapper",
-          alt_flags: { en: "usa" },
-        };
-      </script>
-      <script
-        src="https://cdn.gtranslate.net/widgets/latest/float.js"
-        defer
-      ></script>
-
-      <!-- Main Content -->
-      <div class="max-w-4xl mx-auto">
-        <div class="glassmorphism rounded-xl p-8">
-          <!-- Header -->
-          <div class="text-center mb-12">
-            <h1
-              class="text-4xl font-bold bg-gradient-to-r from-indigo-400 to-purple-400 bg-clip-text text-transparent mb-4"
-            >
-              we'd love you Feedback!
-            </h1>
-            <p class="text-indigo-200">
-              Your tactical insights shape our defense strategy
-            </p>
-          </div>
 
-          <!-- Feedback Form -->
-          <form id="feedbackForm" class="space-y-8">
-            <!-- Personal Information -->
-            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-              <div>
-                <label class="block text-indigo-300 text-sm font-medium mb-2"
-                  >Commander ID</label
-                >
-                <input
-                  type="text"
-                  required
-                  class="form-input w-full px-4 py-3 rounded-lg text-white"
-                  placeholder="Enter your ID"
-                />
-              </div>
-              <div>
-                <label class="block text-indigo-300 text-sm font-medium mb-2"
-                  >Email</label
-                >
-                <input
-                  type="email"
-                  required
-                  id="email"
-                  class="form-input w-full px-4 py-3 rounded-lg text-white"
-                  placeholder="Enter your email"
-                />
-              </div>
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Game Feedback - Alien Invasion Defense</title>
+  <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet" />
+  <link rel="stylesheet" href="feedback.css" />
+</head>
+
+<body class="space-bg min-h-screen text-white">
+
+  <!-- on scroll progress bar -->
+  <div class="progress-bar-container">
+    <div class="progress-bar" id="progress-bar-fb"></div>
+  </div>
+
+  <div class="container mx-auto px-4 py-8">
+    <!-- Navigation -->
+    <nav class="mb-8">
+      <a href="index.html"
+        class="inline-flex items-center text-indigo-400 hover:text-indigo-300 transition-all duration-300">
+        <svg class="w-5 h-5 mr-2 transform group-hover:-translate-x-1" fill="none" stroke="currentColor"
+          viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
+        </svg>
+        Return to Battle
+      </a>
+    </nav>
+    <div class="gtranslate_wrapper"></div>
+    <script>
+      window.gtranslateSettings = {
+        default_language: "en",
+        native_language_names: true,
+        languages: ["en", "fr", "de", "it", "es", "pl", "hi"],
+        wrapper_selector: ".gtranslate_wrapper",
+        alt_flags: { en: "usa" },
+      };
+    </script>
+    <script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer></script>
+
+    <!-- Main Content -->
+    <div class="max-w-4xl mx-auto">
+      <div class="glassmorphism rounded-xl p-8">
+        <!-- Header -->
+        <div class="text-center mb-12">
+          <h1
+            class="text-4xl font-bold bg-gradient-to-r from-indigo-400 to-purple-400 bg-clip-text text-transparent mb-4">
+            we'd love you Feedback!
+          </h1>
+          <p class="text-indigo-200">
+            Your tactical insights shape our defense strategy
+          </p>
+        </div>
+
+        <!-- Feedback Form -->
+        <form id="feedbackForm" class="space-y-8">
+          <!-- Personal Information -->
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <div>
+              <label class="block text-indigo-300 text-sm font-medium mb-2">Commander ID</label>
+              <input type="text" required class="form-input w-full px-4 py-3 rounded-lg text-white"
+                placeholder="Enter your ID" />
+            </div>
+            <div>
+              <label class="block text-indigo-300 text-sm font-medium mb-2">Email</label>
+              <input type="email" required id="email" class="form-input w-full px-4 py-3 rounded-lg text-white"
+                placeholder="Enter your email" />
             </div>
+          </div>
 
-            <!-- Categories -->
-            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-              <div class="custom-select">
-                <label class="block text-indigo-300 text-sm font-medium mb-2"
-                  >Mission Type</label
-                >
-                <select
-                  required
-                  class="form-input w-full px-4 py-3 rounded-lg text-white cursor-pointer"
-                >
-                  <option value="" class="bg-gray-900">
-                    Select mission type
-                  </option>
-                  <option value="combat" class="bg-gray-900">
-                    Orbital Defense
-                  </option>
-                  <option value="recon" class="bg-gray-900">
-                    Reconnaissance
-                  </option>
-                  <option value="escort" class="bg-gray-900">
-                    Fleet Escort
-                  </option>
-                  <option value="assault" class="bg-gray-900">
-                    Planetary Assault
-                  </option>
-                  <option value="special" class="bg-gray-900">
-                    Special Operations
-                  </option>
-                </select>
-              </div>
-              <div class="custom-select">
-                <label class="block text-indigo-300 text-sm font-medium mb-2"
-                  >Combat Experience</label
-                >
-                <select
-                  required
-                  class="form-input w-full px-4 py-3 rounded-lg text-white cursor-pointer"
-                >
-                  <option value="" class="bg-gray-900">
-                    Select experience
-                  </option>
-                  <option value="cadet" class="bg-gray-900">
-                    Cadet (< 10 hours)
-                  </option>
-                  <option value="pilot" class="bg-gray-900">
-                    Combat Pilot (10-50 hours)
-                  </option>
-                  <option value="veteran" class="bg-gray-900">
-                    Veteran (50-100 hours)
-                  </option>
-                  <option value="ace" class="bg-gray-900">
-                    Space Ace (100+ hours)
-                  </option>
-                </select>
-              </div>
+          <!-- Categories -->
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <div class="custom-select">
+              <label class="block text-indigo-300 text-sm font-medium mb-2">Mission Type</label>
+              <select required class="form-input w-full px-4 py-3 rounded-lg text-white cursor-pointer">
+                <option value="" class="bg-gray-900">
+                  Select mission type
+                </option>
+                <option value="combat" class="bg-gray-900">
+                  Orbital Defense
+                </option>
+                <option value="recon" class="bg-gray-900">
+                  Reconnaissance
+                </option>
+                <option value="escort" class="bg-gray-900">
+                  Fleet Escort
+                </option>
+                <option value="assault" class="bg-gray-900">
+                  Planetary Assault
+                </option>
+                <option value="special" class="bg-gray-900">
+                  Special Operations
+                </option>
+              </select>
             </div>
+            <div class="custom-select">
+              <label class="block text-indigo-300 text-sm font-medium mb-2">Combat Experience</label>
+              <select required class="form-input w-full px-4 py-3 rounded-lg text-white cursor-pointer">
+                <option value="" class="bg-gray-900">
+                  Select experience
+                </option>
+                <option value="cadet" class="bg-gray-900">
+                  Cadet (< 10 hours) </option>
+                <option value="pilot" class="bg-gray-900">
+                  Combat Pilot (10-50 hours)
+                </option>
+                <option value="veteran" class="bg-gray-900">
+                  Veteran (50-100 hours)
+                </option>
+                <option value="ace" class="bg-gray-900">
+                  Space Ace (100+ hours)
+                </option>
+              </select>
+            </div>
+          </div>
 
-            <!-- Rating -->
-            <div class="space-y-4">
-              <label class="block text-indigo-300 text-sm font-medium mb-2"
-                >Mission Effectiveness Rating</label
-              >
-              <div class="feedback-box">
-
-                <form id="feedback-form" action="#" method="post">
-                    <div class="star-rating" aria-label="Rating" role="radiogroup">
-                        <input type="radio" id="star5" name="rating" value="5">
-                        <label for="star5" title="5 stars">★</label>
-                        <input type="radio" id="star4" name="rating" value="4">
-                        <label for="star4" title="4 stars">★</label>
-                        <input type="radio" id="star3" name="rating" value="3">
-                        <label for="star3" title="3 stars">★</label>
-                        <input type="radio" id="star2" name="rating" value="2">
-                        <label for="star2" title="2 stars">★</label>
-                        <input type="radio" id="star1" name="rating" value="1">
-                        <label for="star1" title="1 star">★</label>
-
-                    </div>
-
-                  </div>
+          <!-- Rating -->
+          <div class="space-y-4">
+            <label class="block text-indigo-300 text-sm font-medium mb-2">Mission Effectiveness Rating</label>
+            <div class="feedback-box">
 
-            </div>
+              <form id="feedback-form" action="#" method="post">
+                <div class="star-rating" aria-label="Rating" role="radiogroup">
+                  <input type="radio" id="star5" name="rating" value="5">
+                  <label for="star5" title="5 stars">★</label>
+                  <input type="radio" id="star4" name="rating" value="4">
+                  <label for="star4" title="4 stars">★</label>
+                  <input type="radio" id="star3" name="rating" value="3">
+                  <label for="star3" title="3 stars">★</label>
+                  <input type="radio" id="star2" name="rating" value="2">
+                  <label for="star2" title="2 stars">★</label>
+                  <input type="radio" id="star1" name="rating" value="1">
+                  <label for="star1" title="1 star">★</label>
+
+                </div>
 
-            <!-- Feedback Areas -->
-            <div class="space-y-6">
-              <div>
-                <label class="block text-indigo-300 text-sm font-medium mb-2"
-                  >Tactical Achievements</label
-                >
-                <textarea
-                  class="form-input w-full px-4 py-3 rounded-lg text-white h-24"
-                  placeholder="Describe your successful strategies..."
-                ></textarea>
-              </div>
-              <div>
-                <label class="block text-indigo-300 text-sm font-medium mb-2"
-                  >Battle Improvements</label
-                >
-                <textarea
-                  class="form-input w-full px-4 py-3 rounded-lg text-white h-24"
-                  placeholder="Suggest tactical improvements..."
-                ></textarea>
-              </div>
-              <div>
-                <label class="block text-indigo-300 text-sm font-medium mb-2"
-                  >System Issues</label
-                >
-                <textarea
-                  class="form-input w-full px-4 py-3 rounded-lg text-white h-24"
-                  placeholder="Report any technical issues..."
-                ></textarea>
-              </div>
             </div>
 
-            <!-- Submit Button -->
-            <div class="flex justify-center pt-6">
-              <button
-                type="submit"
-                class="submit-btn px-8 py-4 rounded-lg font-semibold text-white shadow-lg hover:shadow-indigo-500/30 transform hover:scale-105 transition-all duration-300"
-              >
-                Submit Mission Report
-              </button>
+          </div>
+
+          <!-- Feedback Areas -->
+          <div class="space-y-6">
+            <div>
+              <label class="block text-indigo-300 text-sm font-medium mb-2">Tactical Achievements</label>
+              <textarea class="form-input w-full px-4 py-3 rounded-lg text-white h-24"
+                placeholder="Describe your successful strategies..."></textarea>
             </div>
-          </form>
-        </div>
-      </div>
+            <div>
+              <label class="block text-indigo-300 text-sm font-medium mb-2">Battle Improvements</label>
+              <textarea class="form-input w-full px-4 py-3 rounded-lg text-white h-24"
+                placeholder="Suggest tactical improvements..."></textarea>
+            </div>
+            <div>
+              <label class="block text-indigo-300 text-sm font-medium mb-2">System Issues</label>
+              <textarea class="form-input w-full px-4 py-3 rounded-lg text-white h-24"
+                placeholder="Report any technical issues..."></textarea>
+            </div>
+          </div>
 
-      <!-- Footer -->
-      <footer class="mt-8 text-center text-indigo-300">
-        <p>© <span id="currentYear"></span> Alien-Invasion-Defense. All rights reserved.</p>
-      </footer>
+          <!-- Submit Button -->
+          <div class="flex justify-center pt-6">
+            <button type="submit"
+              class="submit-btn px-8 py-4 rounded-lg font-semibold text-white shadow-lg hover:shadow-indigo-500/30 transform hover:scale-105 transition-all duration-300">
+              Submit Mission Report
+            </button>
+          </div>
+        </form>
+      </div>
     </div>
 
-    <script>
+    <!-- Footer -->
+    <footer class="mt-8 text-center text-indigo-300">
+      <p>© <span id="currentYear"></span> Alien-Invasion-Defense. All rights reserved.</p>
+    </footer>
+  </div>
+  <!-- Scroll to top button -->
+ <button id="scrollUpBtn-fb" onclick="scrollToTop()">↑</button>
+  <script>
 
-      document.getElementById("currentYear").textContent = new Date().getFullYear();
-      
-              const trustedDomains = [
-        'gmail.com',
-        'outlook.com',
-        'yahoo.com',
-        'protonmail.com',
-        'icloud.com',
-        'tutanota.com',
-        'hotmail.com',
-        'live.com',
-        'mail.com',
-        'zoho.com',
-        'gmx.com',
-        'aol.com',
-        'fastmail.com',
-        'yandex.com',
-        '*.edu',
-        '*.ac.uk',
-        '*.edu.in',
-        '*.edu.au',
-        'examplecompany.com',
-        'mailfence.com',
-        'posteo.de',
-        'runbox.com',
-        'countermail.com',
-        'hushmail.com',
-        'inbox.com',
-        'mail.ru',
-        'rediffmail.com',
-        'seznam.cz'
-      ];
-
-      function validateEmail(email) {
-          const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; // Basic email format validation
-          const domain = email.split('@')[1];
-      
-          return (
-              emailPattern.test(email) && 
-              trustedDomains.some((trusted) => 
-                  trusted.includes('*') ? domain.endsWith(trusted.slice(1)) : domain === trusted
-              )
-          );
-      }
+    document.getElementById("currentYear").textContent = new Date().getFullYear();
 
-      document
-        .getElementById("feedbackForm")
-        .addEventListener("submit", function (e) {
-          e.preventDefault();
+    const trustedDomains = [
+      'gmail.com',
+      'outlook.com',
+      'yahoo.com',
+      'protonmail.com',
+      'icloud.com',
+      'tutanota.com',
+      'hotmail.com',
+      'live.com',
+      'mail.com',
+      'zoho.com',
+      'gmx.com',
+      'aol.com',
+      'fastmail.com',
+      'yandex.com',
+      '*.edu',
+      '*.ac.uk',
+      '*.edu.in',
+      '*.edu.au',
+      'examplecompany.com',
+      'mailfence.com',
+      'posteo.de',
+      'runbox.com',
+      'countermail.com',
+      'hushmail.com',
+      'inbox.com',
+      'mail.ru',
+      'rediffmail.com',
+      'seznam.cz'
+    ];
 
-          const email = document.getElementById('email').value.trim();
+    function validateEmail(email) {
+      const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; // Basic email format validation
+      const domain = email.split('@')[1];
 
-          const button = e.target.querySelector("button");
-          const originalText = button.textContent;
+      return (
+        emailPattern.test(email) &&
+        trustedDomains.some((trusted) =>
+          trusted.includes('*') ? domain.endsWith(trusted.slice(1)) : domain === trusted
+        )
+      );
+    }
 
-          if (!validateEmail(email)) {
-              alert('Please enter a valid email address from a trusted provider.');
-              return;
-          }
+    document
+      .getElementById("feedbackForm")
+      .addEventListener("submit", function (e) {
+        e.preventDefault();
 
-          button.textContent = "Transmitting...";
-          button.disabled = true;
+        const email = document.getElementById('email').value.trim();
+
+        const button = e.target.querySelector("button");
+        const originalText = button.textContent;
+
+        if (!validateEmail(email)) {
+          alert('Please enter a valid email address from a trusted provider.');
+          return;
+        }
+
+        button.textContent = "Transmitting...";
+        button.disabled = true;
+
+        setTimeout(() => {
+          const successMessage = document.createElement("div");
+          successMessage.className =
+            "fixed top-4 right-4 bg-gradient-to-r from-indigo-500 to-purple-500 text-white px-6 py-3 rounded-lg shadow-lg success-message";
+          successMessage.innerHTML = "Mission report received, Commander!";
+          document.body.appendChild(successMessage);
+
+          e.target.reset();
+          button.textContent = originalText;
+          button.disabled = false;
 
           setTimeout(() => {
-            const successMessage = document.createElement("div");
-            successMessage.className =
-              "fixed top-4 right-4 bg-gradient-to-r from-indigo-500 to-purple-500 text-white px-6 py-3 rounded-lg shadow-lg success-message";
-            successMessage.innerHTML = "Mission report received, Commander!";
-            document.body.appendChild(successMessage);
-
-            e.target.reset();
-            button.textContent = originalText;
-            button.disabled = false;
-
-            setTimeout(() => {
-              successMessage.style.transform = "translateY(-100%)";
-              successMessage.style.opacity = "0";
-              setTimeout(() => successMessage.remove(), 500);
-            }, 3000);
-          }, 1500);
+            successMessage.style.transform = "translateY(-100%)";
+            successMessage.style.opacity = "0";
+            setTimeout(() => successMessage.remove(), 500);
+          }, 3000);
+        }, 1500);
+      });
+
+
+       
+        window.onscroll = function () {
+          const scrollUpBtn = document.getElementById("scrollUpBtn-fb");
+          if (
+            document.body.scrollTop > 100 ||
+            document.documentElement.scrollTop > 100
+          ) {
+            scrollUpBtn.style.display = "block";
+          } else {
+            scrollUpBtn.style.display = "none";
+          }
+          const totalHeight = document.documentElement.scrollHeight - window.innerHeight;
+          const scrollPosition = window.pageYOffset;
+          const scrollPercentage = (scrollPosition / totalHeight) * 100;
+          document.getElementById(
+            "progress-bar-fb"
+          ).style.width = `${scrollPercentage}%`;
+        };
+
+
+           function scrollToTop() {
+        window.scrollTo({
+          top: 0,
+          behavior: "smooth",
         });
-    </script>
-  </body>
-</html>
+      }
+      
+
+
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/index.html b/index.html
index f096f15..3c45beb 100644
--- a/index.html
+++ b/index.html
@@ -47,6 +47,36 @@
 
 
             font-family: Arial, sans-serif;
+        }
+
+
+
+        /* Styling the progress bar */
+        .progress-bar-container {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            z-index: 99999;
+            height: 4px;
+        }
+
+        #progress-bar {
+            border: none;
+            border-radius: 2rem;
+            height: 100%;
+            width: 0%;
+            background: linear-gradient(90deg,
+                    cyan,
+                    #bbdefb,
+                    #1694db,
+                    #5c6bc0,
+                    #2751bd,
+                    #283593,
+                    #a402c4,
+                    #F72585);
+            box-shadow: 0 0 5px #bbdefb, 0 0 13px #283593, 0 0 21px #F72585;
+        }
 
         /* Popup Styles */
         .popup {
@@ -326,36 +356,51 @@
         }
 
 
-/* Medium screens (481px to 768px) */
-@media (min-width: 481px) and (max-width: 768px) {
-  #gameCanvas {
-    height: 450px; /* 4:3 aspect ratio */
-    width: 600px; /* 4:3 aspect ratio */
-  }
-}
-/* Small screens (up to 480px) */
-@media (max-width: 480px) {
-  #gameCanvas {
-    height: 240px; /* 4:3 aspect ratio */
-    width: 320px; /* 4:3 aspect ratio */
-  }
-}  
-.logoImage {
-    height: 80px; /* Adjust to fit the header */
-    width: auto;
-    margin-right: 15px;
-    cursor: pointer;
-    transition: transform 0.3s, box-shadow 0.3s, filter 0.3s;
-}
-
-.logoImage:hover {
-    transform: scale(1.15);
-    box-shadow: 0 0 15px rgba(0, 0, 255, 0.7); /* More prominent blue glow */
-    filter: brightness(1.2);
-    background-color: rgba(0, 0, 255, 0.1); /* Subtle blue background */
-    border-radius: 5px; /* Rounded edges for a smoother look */
-}
+        /* Medium screens (481px to 768px) */
+        @media (min-width: 481px) and (max-width: 768px) {
+            #gameCanvas {
+                height: 450px;
+                /* 4:3 aspect ratio */
+                width: 600px;
+                /* 4:3 aspect ratio */
+            }
+        }
+
+        /* Small screens (up to 480px) */
+        @media (max-width: 480px) {
+            #gameCanvas {
+                height: 240px;
+                /* 4:3 aspect ratio */
+                width: 320px;
+                /* 4:3 aspect ratio */
+            }
+        }
+
+        .logoImage {
+            height: 80px;
+            /* Adjust to fit the header */
+            width: auto;
+            margin-right: 15px;
+            cursor: pointer;
+            transition: transform 0.3s, box-shadow 0.3s, filter 0.3s;
+        }
+
+        .logoImage:hover {
+            transform: scale(1.15);
+            box-shadow: 0 0 15px rgba(0, 0, 255, 0.7);
+            /* More prominent blue glow */
+            filter: brightness(1.2);
+            background-color: rgba(0, 0, 255, 0.1);
+            /* Subtle blue background */
+            border-radius: 5px;
+            /* Rounded edges for a smoother look */
+        }
     </style>
+     <!-- on scroll progress bar -->
+    <div class="progress-bar-container">
+      <div class="progress-bar" id="progress-bar"></div>
+    </div>
+
     <div id="popup-nl" class="popup-nl">
         <div class="popup-content-nl">
             <div class="popup-left-nl">
@@ -408,6 +453,16 @@ <h2 class="uppercase">What power-up do you find most helpful?</h2>
     </div>
 
     <script>
+      
+      window.onscroll = function () {
+          const totalHeight = document.documentElement.scrollHeight - window.innerHeight;
+          const scrollPosition = window.pageYOffset;
+          const scrollPercentage = (scrollPosition / totalHeight) * 100;
+          document.getElementById(
+            "progress-bar"
+          ).style.width = `${scrollPercentage}%`;
+        };
+
 
         // Show the newsletter popup immediately on page load
         function displayNewsletterPopup() {
@@ -503,11 +558,11 @@ <h2 class="uppercase">What power-up do you find most helpful?</h2>
 </head>
 
 <body>
-  
+
     <nav class="navbar">
-<!--         <img src="assets/images/logo1-.png" alt="logo" height="80px" class="image"> -->
+        <!--         <img src="assets/images/logo1-.png" alt="logo" height="80px" class="image"> -->
         <div class="title5">
-            
+
             <h1 class="site-name">Alien Invasion Defense</h1>
             <i class="fa-solid fa-paintbrush" style="margin: 25px 0 0 0;"></i>
         </div>
@@ -538,7 +593,7 @@ <h1 class="site-name">Alien Invasion Defense</h1>
 
         <button class="feedback-button" onclick="window.location.href='feedback.html'">Feedback</button>
 
-        
+
 
         <h2 class="primary-btn" id="logoutButton" style="display: none;">
             <i class="fas fa-sign-out-alt"></i> Logout
@@ -549,7 +604,7 @@ <h2 class="primary-btn" id="logoutButton" style="display: none;">
                 <button class="faq-btn">Testimonials</button>
             </a>
         </div>
-        
+
 
         <button class="feedback-button" onclick="window.location.href='donation_page.html'">Donate</button>
 
@@ -563,12 +618,12 @@ <h2 class="primary-btn" id="logoutButton" style="display: none;">
         <button class="primary-btn" id="signupButton" window.location.href="/Login and Signup/index.html">
             Signup/Register
         </button>
-  <div class="theme-switch-wrapper">
+        <div class="theme-switch-wrapper">
             <label class="theme-switch" for="checkbox">
                 <input type="checkbox" id="checkbox">
                 <div class="slider"></div>
             </label>
-            
+
             <span id="mode-label">Light Mode</span>
         </div>
 
@@ -581,7 +636,7 @@ <h2 class="primary-btn" id="logoutButton" style="display: none;">
         </div>
 
 
-<!--         <div class="theme-switch-wrapper">
+        <!--         <div class="theme-switch-wrapper">
             <label class="theme-switch" for="checkbox">
                 <input type="checkbox" id="checkbox">
                 <div class="slider"></div>
@@ -619,7 +674,7 @@ <h2 class="primary-btn" id="logoutButton" style="display: none;">
                 <input type="checkbox" id="checkbox">
                 <div class="slider"></div>
             </label>
-            
+
             <span id="mode-label">Light Mode</span>
         </div>
         <!-- <div class="theme-switch-wrapper">
@@ -841,7 +896,7 @@ <h2 class="primary-btn" id="instructionsTitle">Player Instructions</h2>
                         margin-left: auto;
                         border: 2px solid;
                         margin-bottom: 30px;
-                        
+
                     }
 
                     body.dark-mode .visitor-counter {
@@ -855,33 +910,33 @@ <h2 class="primary-btn" id="instructionsTitle">Player Instructions</h2>
                     }
                 </style>
 
-            <script>
-                  // Function to get the count from localStorage or initialize it
-            function getVisitorCount() {
-            return localStorage.getItem('visitorCount') || 0;
-            }
-    
-            // Function to increment and save the count
-            function incrementVisitorCount() {
-                if (!localStorage.getItem('visitedHomePage')) {
-                  let count = parseInt(getVisitorCount()) + 1;
-                  localStorage.setItem('visitorCount', count);
-                  localStorage.setItem('visitedHomePage', 'true');
-                  return count;
-                }
+                <script>
+                    // Function to get the count from localStorage or initialize it
+                    function getVisitorCount() {
+                        return localStorage.getItem('visitorCount') || 0;
+                    }
 
-                    return getVisitorCount();
-            }
-    
-            // Function to display the count
-            function displayVisitorCount() {
-            const counterElement = document.querySelector('.website-counter');
-            const count = incrementVisitorCount();
-            counterElement.textContent = count;
-            }
-    
-            // Call the display function when the page loads
-            document.addEventListener('DOMContentLoaded', displayVisitorCount);
+                    // Function to increment and save the count
+                    function incrementVisitorCount() {
+                        if (!localStorage.getItem('visitedHomePage')) {
+                            let count = parseInt(getVisitorCount()) + 1;
+                            localStorage.setItem('visitorCount', count);
+                            localStorage.setItem('visitedHomePage', 'true');
+                            return count;
+                        }
+
+                        return getVisitorCount();
+                    }
+
+                    // Function to display the count
+                    function displayVisitorCount() {
+                        const counterElement = document.querySelector('.website-counter');
+                        const count = incrementVisitorCount();
+                        counterElement.textContent = count;
+                    }
+
+                    // Call the display function when the page loads
+                    document.addEventListener('DOMContentLoaded', displayVisitorCount);
 
 
                     // Function to display the count
@@ -1108,115 +1163,119 @@ <h2 class="primary-btn" id="logoutButton" style="display: none;">
         <script>window.gtranslateSettings = { "default_language": "en", "native_language_names": true, "languages": ["en", "fr", "de", "it", "es", "pl", "hi"], "wrapper_selector": ".gtranslate_wrapper", "alt_flags": { "en": "usa" } }</script>
         <script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer></script>
 
-<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js" integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js" integrity="sha512-onMTRKJBKz8M1TnqqDuGBlowlH0ohFzMXYRNebz+yOcc5TQr/zAKsthzhuv0hiyUKEiQEQXEynnXCvNTOk50dg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-<script>// GSAP animation for popup appearance
-    function showPopup() {
-        gsap.fromTo(
-            "#popup-nl",
-            { opacity: 0, scale: 0.5 },
-            { opacity: 1, scale: 1, duration: 1, ease: "power2.out" }
-        );
-    }
-    
-    // Animation for popup closing and triggering main content animations
-    document.querySelectorAll('.close-nl').forEach(button => {
-        button.addEventListener("click", () => {
-            gsap.to("#popup-nl", {
-                opacity: 0,
-                scale: 0.5,
-                duration: 0.5,
-                ease: "power2.in",
-                onComplete: animateMainContent  // Trigger main content animations after popup closes
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"
+            integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg=="
+            crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"
+            integrity="sha512-onMTRKJBKz8M1TnqqDuGBlowlH0ohFzMXYRNebz+yOcc5TQr/zAKsthzhuv0hiyUKEiQEQXEynnXCvNTOk50dg=="
+            crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+        <script>// GSAP animation for popup appearance
+            function showPopup() {
+                gsap.fromTo(
+                    "#popup-nl",
+                    { opacity: 0, scale: 0.5 },
+                    { opacity: 1, scale: 1, duration: 1, ease: "power2.out" }
+                );
+            }
+
+            // Animation for popup closing and triggering main content animations
+            document.querySelectorAll('.close-nl').forEach(button => {
+                button.addEventListener("click", () => {
+                    gsap.to("#popup-nl", {
+                        opacity: 0,
+                        scale: 0.5,
+                        duration: 0.5,
+                        ease: "power2.in",
+                        onComplete: animateMainContent  // Trigger main content animations after popup closes
+                    });
+                });
             });
-        });
-    });
-    
-    // Main content animations function
-    function animateMainContent() {
-        // Slide down game controls
-        gsap.from("#gameControls", { y: -100, opacity: 0, duration: 1, ease: "power2.out" });
-        
-        // Slide in game container from the left
-        gsap.from("#gameContainer", { x: -200, opacity: 0, duration: 1, delay: 0.5, ease: "power2.out" });
-        
-        // Staggered animation for snowflake elements
-        gsap.from(".snowflake", {
-            y: -100,
-            opacity: 0,
-            duration: 1,
-            delay: 1,
-            stagger: 0.1,
-            ease: "power2.out"
-        });
-        
-        // Fade in header
-        gsap.from("#header", { opacity: 0, duration: 1.5, delay: 1.5, ease: "power2.out" });
-        
-        // Sequential animations for interactive buttons and controls
-        gsap.from("#startButton", { x: -50, duration: 0.8, delay: 2, ease: "elastic.out" });
-        gsap.from("#pauseBtn", { x: -50, duration: 1, delay: 2.5, ease: "back.out" });
-        gsap.from("#levelSelect", { x: 50, opacity: 0, duration: 1, delay: 3, ease: "back.out" });
-        
-        // Staggered poll button animations
-        gsap.from(".poll-button", {
-            y: 50,
-            opacity: 0,
-            duration: 1,
-            delay: 3.5,
-            ease: "back.out",
-            stagger: 0.2
-        });
-    }
-    
-    // Call the function to show popup initially
-    showPopup();
-    </script>
-    
- 
-<script>
 
-    document.addEventListener("DOMContentLoaded", function () {
-      const coords = { x: 0, y: 0 };
-      const circles = document.querySelectorAll(".circle");
-  
-      circles.forEach(function (circle) {
-        circle.x = 0;
-        circle.y = 0;
-      });
-  
-      window.addEventListener("mousemove", function (e) {
-        coords.x = e.pageX;
-        coords.y = e.pageY - window.scrollY; // Adjust for vertical scroll position
-      });
-  
-      function animateCircles() {
-        let x = coords.x;
-        let y = coords.y;
-  
-        circles.forEach(function (circle, index) {
-          circle.style.left = `${x - 12}px`; // Backticks added for template literals
-          circle.style.top = `${y - 12}px`;  // Backticks added for template literals
-          circle.style.transform = `scale(${(circles.length - index) / circles.length})`; // Backticks added for template literals
-  
-          const nextCircle = circles[index + 1] || circles[0];
-          circle.x = x;
-          circle.y = y;
-  
-          x += (nextCircle.x - x) * 0.3;
-          y += (nextCircle.y - y) * 0.3;
-        });
-  
-        requestAnimationFrame(animateCircles);
-      }
-  
-      animateCircles();
-    });
-
-  </script>
-  
-  </script>
-<script src="scripts.js"></script> <!-- Link to your service worker registration script -->
+            // Main content animations function
+            function animateMainContent() {
+                // Slide down game controls
+                gsap.from("#gameControls", { y: -100, opacity: 0, duration: 1, ease: "power2.out" });
+
+                // Slide in game container from the left
+                gsap.from("#gameContainer", { x: -200, opacity: 0, duration: 1, delay: 0.5, ease: "power2.out" });
+
+                // Staggered animation for snowflake elements
+                gsap.from(".snowflake", {
+                    y: -100,
+                    opacity: 0,
+                    duration: 1,
+                    delay: 1,
+                    stagger: 0.1,
+                    ease: "power2.out"
+                });
+
+                // Fade in header
+                gsap.from("#header", { opacity: 0, duration: 1.5, delay: 1.5, ease: "power2.out" });
+
+                // Sequential animations for interactive buttons and controls
+                gsap.from("#startButton", { x: -50, duration: 0.8, delay: 2, ease: "elastic.out" });
+                gsap.from("#pauseBtn", { x: -50, duration: 1, delay: 2.5, ease: "back.out" });
+                gsap.from("#levelSelect", { x: 50, opacity: 0, duration: 1, delay: 3, ease: "back.out" });
+
+                // Staggered poll button animations
+                gsap.from(".poll-button", {
+                    y: 50,
+                    opacity: 0,
+                    duration: 1,
+                    delay: 3.5,
+                    ease: "back.out",
+                    stagger: 0.2
+                });
+            }
+
+            // Call the function to show popup initially
+            showPopup();
+        </script>
+
+
+        <script>
+
+            document.addEventListener("DOMContentLoaded", function () {
+                const coords = { x: 0, y: 0 };
+                const circles = document.querySelectorAll(".circle");
+
+                circles.forEach(function (circle) {
+                    circle.x = 0;
+                    circle.y = 0;
+                });
+
+                window.addEventListener("mousemove", function (e) {
+                    coords.x = e.pageX;
+                    coords.y = e.pageY - window.scrollY; // Adjust for vertical scroll position
+                });
+
+                function animateCircles() {
+                    let x = coords.x;
+                    let y = coords.y;
+
+                    circles.forEach(function (circle, index) {
+                        circle.style.left = `${x - 12}px`; // Backticks added for template literals
+                        circle.style.top = `${y - 12}px`;  // Backticks added for template literals
+                        circle.style.transform = `scale(${(circles.length - index) / circles.length})`; // Backticks added for template literals
+
+                        const nextCircle = circles[index + 1] || circles[0];
+                        circle.x = x;
+                        circle.y = y;
+
+                        x += (nextCircle.x - x) * 0.3;
+                        y += (nextCircle.y - y) * 0.3;
+                    });
+
+                    requestAnimationFrame(animateCircles);
+                }
+
+                animateCircles();
+            });
+
+        </script>
+
+        </script>
+        <script src="scripts.js"></script> <!-- Link to your service worker registration script -->
 
 </body>
 
@@ -1227,4 +1286,4 @@ <h2 class="primary-btn" id="logoutButton" style="display: none;">
     }
 </script>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/privacy_policy.html b/privacy_policy.html
index 849b3ff..8589b45 100644
--- a/privacy_policy.html
+++ b/privacy_policy.html
@@ -2,67 +2,137 @@
 <html lang="en">
 
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Privacy Policy - Alien Invasion Defense</title>
-    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
-    <style>
-        body {
-            font-family: 'Roboto', sans-serif;
-            line-height: 1.6;
-            margin: 0;
-            padding: 20px;
-            color: #333;
-        }
-        h1, h2, h3 {
-            color: #2c3e50;
-        }
-        h1 {
-            text-align: center;
-            margin-bottom: 20px;
-        }
-        p {
-            margin: 10px 0;
-        }
-        ul {
-            margin: 10px 0 20px 20px;
-        }
-        footer {
-            text-align: center;
-            margin-top: 20px;
-            font-size: 0.9em;
-            color: #555;
-        }
-    </style>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Privacy Policy - Alien Invasion Defense</title>
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
+  <style>
+    body {
+      font-family: 'Roboto', sans-serif;
+      line-height: 1.6;
+      margin: 0;
+      padding: 20px;
+      color: #333;
+    }
+
+    h1,
+    h2,
+    h3 {
+      color: #2c3e50;
+    }
+
+    h1 {
+      text-align: center;
+      margin-bottom: 20px;
+    }
+
+    p {
+      margin: 10px 0;
+    }
+
+    ul {
+      margin: 10px 0 20px 20px;
+    }
+
+    footer {
+      text-align: center;
+      margin-top: 20px;
+      font-size: 0.9em;
+      color: #555;
+    }
+
+
+    /* Styling the progress bar */
+    .progress-bar-container {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      z-index: 99999;
+      height: 5px;
+    }
+
+    #progress-bar-prvp {
+      border: none;
+      border-radius: 2rem;
+      height: 100%;
+      width: 0%;
+      background: linear-gradient(90deg,
+          cyan,
+          #bbdefb,
+          #1694db,
+          #5c6bc0,
+          #2751bd,
+          #283593,
+          #a402c4,
+          #F72585);
+      box-shadow: 0 0 5px #bbdefb, 0 0 13px #283593, 0 0 21px #F72585;
+    }
+
+
+    /* Scroll Up Button Styles */
+    #scrollUpBtn-prvp {
+      display: none;
+      position: fixed;
+      bottom: 20px;
+      right: 40px;
+      background-color: #007bff;
+      color: #fff;
+      padding: 15px 20px;
+      border: none;
+      border-radius: 30px;
+      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
+      font-size: 18px;
+      transition: all 0.3s ease;
+      cursor: pointer;
+      z-index: 1000;
+    }
+
+    /* Hover Effect */
+    #scrollUpBtn-prvp:hover {
+      background-color: #0056b3;
+      transform: scale(1.05);
+      box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
+    }
+  </style>
 </head>
+
 <body>
-    <div class="home-nav">
-        <a href="/"><i class="fa-solid fa-arrow-left-long"></i>&nbsp; Return to Home</a>
-        <style>
-          .home-nav a{
-            text-decoration: none;
-            height: 50px;
-            width: 250px;
-            color: white;
-            font-size: 1.25rem;
-            position: absolute;
-            top: 35px;
-            left: 40px;
-            background-color: rgba(0,0,0,0.6);
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            border-radius: 30px;
-            transition: all 0.4s ease;
-          }
-          .home-nav a:hover{
-            transform: scale(1.02);
-            background-color:#000;
-            color: white;
-          }
-        </style>
-      </div>    
+
+  <!-- The on scroll progress bar -->
+  <div class="progress-bar-container">
+    <div class="progress-bar" id="progress-bar-prvp"></div>
+  </div>
+
+
+  <div class="home-nav">
+    <a href="/"><i class="fa-solid fa-arrow-left-long"></i>&nbsp; Return to Home</a>
+    <style>
+      .home-nav a {
+        text-decoration: none;
+        height: 50px;
+        width: 250px;
+        color: white;
+        font-size: 1.25rem;
+        position: absolute;
+        top: 35px;
+        left: 40px;
+        background-color: rgba(0, 0, 0, 0.6);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border-radius: 30px;
+        transition: all 0.4s ease;
+      }
+
+      .home-nav a:hover {
+        transform: scale(1.02);
+        background-color: #000;
+        color: white;
+      }
+    </style>
+  </div>
 
 
   <head>
@@ -72,6 +142,7 @@
     <link rel="stylesheet" href="privacy.css" />
     <!-- Link to your CSS file -->
   </head>
+
   <body>
     <header>
       <h1>Privacy Policy</h1>
@@ -86,10 +157,7 @@ <h1>Privacy Policy</h1>
         alt_flags: { en: "usa" },
       };
     </script>
-    <script
-      src="https://cdn.gtranslate.net/widgets/latest/float.js"
-      defer
-    ></script>
+    <script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer></script>
     <main>
       <h2>Introduction</h2>
       <p>
@@ -219,57 +287,84 @@ <h2>6. Contact Us</h2>
         do not hesitate to contact us.
       </p>
     </main>
-  
-<footer class="bg-body-tertiary text-center">
-  <!-- Grid container -->
-  <div class="container p-4">
-    <!-- Section: Social media -->
-    <section class="mb-4">
-      <!-- Facebook -->
-      <a data-mdb-ripple-init class="btn btn-outline btn-floating m-1" href="#!"style="margin:15px" role="button"
-        ><i class="fab fa-facebook-f"></i
-      ></a>
-
-      <!-- Twitter -->
-      <a data-mdb-ripple-init class="btn btn-outline btn-floating m-1" href="#!"style="margin:15px" role="button"
-        ><i class="fab fa-twitter"></i
-      ></a>
-
-      <!-- Google -->
-      <a data-mdb-ripple-init class="btn btn-outline btn-floating m-1" href="#!"style="margin:15px" role="button"
-        ><i class="fab fa-google"></i
-      ></a>
-
-      <!-- Instagram -->
-      <a data-mdb-ripple-init class="btn btn-outline btn-floating m-1" href="#!"style="margin:15px" role="button"
-        ><i class="fab fa-instagram"></i
-      ></a>
-
-      <!-- Linkedin -->
-      <a data-mdb-ripple-init class="btn btn-outline btn-floating m-1" href="#!"style="margin:15px" role="button"
-        ><i class="fab fa-linkedin-in"></i
-      ></a>
-
-      <!-- Github -->
-      <a data-mdb-ripple-init class="btn btn-outline btn-floating m-1" href="#!"style="margin:15px" role="button"
-        ><i class="fab fa-github"></i
-      ></a>
-    </section>
-    <section class="mx-4 mb-4">
-      <p>
-     Welcome to Alien Invasion Defense, a fast-paced space shooting game! Defend your base from waves of alien invaders and become the ultimate space defender. 🌌 With simple controls, sleek graphics, and exciting gameplay, get ready for an epic battle. Use your weapons to destroy alien ships, survive multiple waves, and protect your base with 3 lives. 👾
-      </p>
-    </section>
-  </div>
+    <!-- scroll up button -->
+    <button id="scrollUpBtn-prvp" onclick="scrollToTop()">↑</button>
+    <footer class="bg-body-tertiary text-center">
+      <!-- Grid container -->
+      <div class="container p-4">
+        <!-- Section: Social media -->
+        <section class="mb-4">
+          <!-- Facebook -->
+          <a data-mdb-ripple-init class="btn btn-outline btn-floating m-1" href="#!" style="margin:15px"
+            role="button"><i class="fab fa-facebook-f"></i></a>
 
-  <!-- Copyright -->
-  <div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.05);">
-    © <span id="currentYear"></span> Alien-Invasion-Defense. All rights reserved.
-  </div>
-  <!-- Copyright -->
-</footer>
+          <!-- Twitter -->
+          <a data-mdb-ripple-init class="btn btn-outline btn-floating m-1" href="#!" style="margin:15px"
+            role="button"><i class="fab fa-twitter"></i></a>
+
+          <!-- Google -->
+          <a data-mdb-ripple-init class="btn btn-outline btn-floating m-1" href="#!" style="margin:15px"
+            role="button"><i class="fab fa-google"></i></a>
+
+          <!-- Instagram -->
+          <a data-mdb-ripple-init class="btn btn-outline btn-floating m-1" href="#!" style="margin:15px"
+            role="button"><i class="fab fa-instagram"></i></a>
+
+          <!-- Linkedin -->
+          <a data-mdb-ripple-init class="btn btn-outline btn-floating m-1" href="#!" style="margin:15px"
+            role="button"><i class="fab fa-linkedin-in"></i></a>
+
+          <!-- Github -->
+          <a data-mdb-ripple-init class="btn btn-outline btn-floating m-1" href="#!" style="margin:15px"
+            role="button"><i class="fab fa-github"></i></a>
+        </section>
+        <section class="mx-4 mb-4">
+          <p>
+            Welcome to Alien Invasion Defense, a fast-paced space shooting game! Defend your base from waves of alien
+            invaders and become the ultimate space defender. 🌌 With simple controls, sleek graphics, and exciting
+            gameplay, get ready for an epic battle. Use your weapons to destroy alien ships, survive multiple waves, and
+            protect your base with 3 lives. 👾
+          </p>
+        </section>
+      </div>
+
+      <!-- Copyright -->
+      <div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.05);">
+        © <span id="currentYear"></span> Alien-Invasion-Defense. All rights reserved.
+      </div>
+      <!-- Copyright -->
+    </footer>
   </body>
   <script>
+
+    window.onscroll = function () {
+      const scrollUpBtn = document.getElementById("scrollUpBtn-prvp");
+      if (
+        document.body.scrollTop > 100 ||
+        document.documentElement.scrollTop > 100
+      ) {
+        scrollUpBtn.style.display = "block";
+      } else {
+        scrollUpBtn.style.display = "none";
+      }
+      const totalHeight = document.documentElement.scrollHeight - window.innerHeight;
+      const scrollPosition = window.pageYOffset;
+      const scrollPercentage = (scrollPosition / totalHeight) * 100;
+      document.getElementById(
+        "progress-bar-prvp"
+      ).style.width = `${scrollPercentage}%`;
+    }
+
+
+    function scrollToTop() {
+      window.scrollTo({
+        top: 0,
+        behavior: "smooth",
+      });
+    }
+
+
     document.getElementById("currentYear").textContent = new Date().getFullYear();
   </script>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/test.html b/test.html
index 51e2801..0976714 100644
--- a/test.html
+++ b/test.html
@@ -15,6 +15,59 @@
             padding: 0;
         }
 
+
+        /* Styling the progress bar */
+        .progress-bar-container {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            z-index: 99999;
+            height: 4px;
+        }
+
+        #progress-bar {
+            border: none;
+            border-radius: 2rem;
+            height: 100%;
+            width: 0%;
+            background: linear-gradient(90deg,
+                    cyan,
+                    #bbdefb,
+                    #1694db,
+                    #5c6bc0,
+                    #2751bd,
+                    #283593,
+                    #a402c4,
+                    #F72585);
+            box-shadow: 0 0 5px #bbdefb, 0 0 13px #283593, 0 0 21px #F72585;
+        }
+
+        /* Scroll Up Button Styles */
+        #scrollUpBtn {
+            display: none;
+            position: fixed;
+            bottom: 20px;
+            right: 15px;
+            background-color: #007bff;
+            color: #fff;
+            padding: .8rem 1.3rem;
+            border: none;
+            border-radius: 50%;
+            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
+            font-size: 1.5rem;
+            transition: all 0.3s ease;
+            cursor: pointer;
+            z-index: 1000;
+        }
+
+        /* Hover Effect */
+        #scrollUpBtn:hover {
+            background-color: #0056b3;
+            transform: scale(1.05);
+            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
+        }
+
         .container {
             width: 80%;
             margin: 0 auto;
@@ -401,26 +454,42 @@
 </head>
 
 <body>
+
     <body style="margin: 0; font-family: Arial, sans-serif; background-color: #111;">
+        <!-- on scroll progress bar -->
+        <div class="progress-bar-container">
+            <div class="progress-bar" id="progress-bar"></div>
+        </div>
         <nav style="display: flex; align-items: center; padding: 10px 20px; background-color: #111;">
-            <div style="margin-top: 20px;margin-bottom: 10px;color: #00aaff; font-size: 24px; font-weight: bold; margin-right: 20px; text-shadow: 0 0 8px #00aaff;">
+            <div
+                style="margin-top: 20px;margin-bottom: 10px;color: #00aaff; font-size: 24px; font-weight: bold; margin-right: 20px; text-shadow: 0 0 8px #00aaff;">
                 Alien Invasion Defense
             </div>
             <div style="display: flex; gap: 15px; flex-grow: 1;margin-top: 20px;margin-bottom: 10px;">
-                <a href="#" style="padding: 10px 10px; color: #00aaff; border: 1px solid #00aaff; border-radius: 5px; text-decoration: none;">HOME</a>
-                <a href="#" style="padding: 10px 20px; color: #00aaff; border: 1px solid #00aaff; border-radius: 5px; text-decoration: none;">FAQS</a>
-                <a href="#" style="padding: 10px 20px; color: #00aaff; border: 1px solid #00aaff; border-radius: 5px; text-decoration: none;">FEEDBACK</a>
-                <a href="#" style="padding: 10px 20px; color: #00aaff; border: 1px solid #00aaff; border-radius: 5px; text-decoration: none;">TESTIMONIALS</a>
-                <a href="#" style="padding: 10px 20px; color: #00aaff; border: 1px solid #00aaff; border-radius: 5px; text-decoration: none;">DONATE</a>
-                <a href="#" style="padding: 10px 20px; color: #00aaff; border: 1px solid #00aaff; border-radius: 5px; text-decoration: none;">PRIVACY POLICY</a>
-                <a href="#" style="padding: 10px 20px; color: #00aaff; border: 1px solid #00aaff; border-radius: 5px; text-decoration: none;">SIGNUP/REGISTER</a>
+                <a href="#"
+                    style="padding: 10px 10px; color: #00aaff; border: 1px solid #00aaff; border-radius: 5px; text-decoration: none;">HOME</a>
+                <a href="#"
+                    style="padding: 10px 20px; color: #00aaff; border: 1px solid #00aaff; border-radius: 5px; text-decoration: none;">FAQS</a>
+                <a href="#"
+                    style="padding: 10px 20px; color: #00aaff; border: 1px solid #00aaff; border-radius: 5px; text-decoration: none;">FEEDBACK</a>
+                <a href="#"
+                    style="padding: 10px 20px; color: #00aaff; border: 1px solid #00aaff; border-radius: 5px; text-decoration: none;">TESTIMONIALS</a>
+                <a href="#"
+                    style="padding: 10px 20px; color: #00aaff; border: 1px solid #00aaff; border-radius: 5px; text-decoration: none;">DONATE</a>
+                <a href="#"
+                    style="padding: 10px 20px; color: #00aaff; border: 1px solid #00aaff; border-radius: 5px; text-decoration: none;">PRIVACY
+                    POLICY</a>
+                <a href="#"
+                    style="padding: 10px 20px; color: #00aaff; border: 1px solid #00aaff; border-radius: 5px; text-decoration: none;">SIGNUP/REGISTER</a>
             </div>
             <div style="margin-top: 20px;margin-bottom: 10px;display: flex; align-items: center; gap: 10px;">
                 <span style="color: #fff;">Dark Mode</span>
                 <label style="position: relative; display: inline-block; width: 40px; height: 20px;">
                     <input type="checkbox" style="opacity: 0; width: 0; height: 0;">
-                    <span style="position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #00aaff; transition: 0.4s; border-radius: 20px;"></span>
-                    <span style="position: absolute; height: 16px; width: 16px; left: 4px; bottom: 2px; background-color: white; transition: 0.4s; border-radius: 50%;"></span>
+                    <span
+                        style="position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #00aaff; transition: 0.4s; border-radius: 20px;"></span>
+                    <span
+                        style="position: absolute; height: 16px; width: 16px; left: 4px; bottom: 2px; background-color: white; transition: 0.4s; border-radius: 50%;"></span>
                 </label>
             </div>
         </nav>
@@ -431,18 +500,15 @@ <h1>Welcome to Alien Invasion Defense!</h1>
     </header>
     <div class="gtranslate_wrapper"></div>
     <script>
-      window.gtranslateSettings = {
-        default_language: "en",
-        native_language_names: true,
-        languages: ["en", "fr", "de", "it", "es", "pl", "hi"],
-        wrapper_selector: ".gtranslate_wrapper",
-        alt_flags: { en: "usa" },
-      };
+        window.gtranslateSettings = {
+            default_language: "en",
+            native_language_names: true,
+            languages: ["en", "fr", "de", "it", "es", "pl", "hi"],
+            wrapper_selector: ".gtranslate_wrapper",
+            alt_flags: { en: "usa" },
+        };
     </script>
-    <script
-      src="https://cdn.gtranslate.net/widgets/latest/float.js"
-      defer
-    ></script>
+    <script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer></script>
     <div class="container">
         <section class="stats">
             <div class="stat-item">
@@ -463,7 +529,7 @@ <h2>What Our Players Are Saying</h2>
         <div class="about-section">
             <div class="carousel">
                 <button id="prev" class="carousel-btn">‹</button>
-        
+
                 <div class="item">
                     <div class="icon-container">
                         <img src="./assets/images/client.avif" alt="Alice R.">
@@ -472,7 +538,7 @@ <h3>Alice R.</h3>
                     <div class="rating">★★★★★</div>
                     <p>"An epic space shooter! I love the graphics and gameplay!"</p>
                 </div>
-        
+
                 <div class="item">
                     <div class="icon-container">
                         <img src="./assets/images/client2.avif" alt="Mark T.">
@@ -481,7 +547,7 @@ <h3>Mark T.</h3>
                     <div class="rating">★★★★☆</div>
                     <p>"Simple controls and intense action! A must-play for shooter fans!"</p>
                 </div>
-        
+
                 <div class="item">
                     <div class="icon-container">
                         <img src="./assets/images/client3.avif" alt="Chris L.">
@@ -490,7 +556,7 @@ <h3>Chris L.</h3>
                     <div class="rating">★★★★★</div>
                     <p>"I enjoy competing for the highest score! The leaderboard feature is fantastic!"</p>
                 </div>
-        
+
                 <div class="item">
                     <div class="icon-container">
                         <img src="./assets/images/client4.avif" alt="Jane D.">
@@ -499,7 +565,7 @@ <h3>Jane D.</h3>
                     <div class="rating">★★★★☆</div>
                     <p>"Great graphics and immersive gameplay! Can't put it down!"</p>
                 </div>
-        
+
                 <div class="item">
                     <div class="icon-container">
                         <img src="./assets/images/client5.avif" alt="Paul G.">
@@ -508,7 +574,7 @@ <h3>Paul G.</h3>
                     <div class="rating">★★★★★</div>
                     <p>"Perfect for quick gaming sessions! Love the new updates!"</p>
                 </div>
-        
+
                 <div class="item">
                     <div class="icon-container">
                         <img src="./assets/images/client6.avif" alt="Sarah W.">
@@ -517,17 +583,17 @@ <h3>Sarah W.</h3>
                     <div class="rating">★★★★★</div>
                     <p>"I keep coming back for the daily challenges! So engaging!"</p>
                 </div>
-        
+
                 <button id="next" class="carousel-btn">›</button>
             </div>
         </div>
-        
-        
+
+
         <style>
             .about-section {
                 width: 100%;
             }
-           
+
             .carousel {
                 position: relative;
                 width: 100%;
@@ -536,9 +602,9 @@ <h3>Sarah W.</h3>
                 display: flex;
                 align-items: center;
                 justify-content: center;
-                
+
             }
-    
+
             .item {
                 position: absolute;
                 width: 300px;
@@ -552,19 +618,19 @@ <h3>Sarah W.</h3>
                 z-index: 0;
                 filter: blur(5px);
             }
-    
+
             .icon-container {
                 margin: 0 auto;
                 width: 80%;
             }
-    
+
             .icon-container img {
                 width: 200px;
                 height: 200px;
                 border: 3px solid black;
                 border-radius: 50%;
             }
-    
+
             .carousel-btn {
                 position: absolute;
                 top: 40%;
@@ -578,80 +644,109 @@ <h3>Sarah W.</h3>
                 padding: 0px;
                 cursor: pointer;
             }
-    
+
             #next {
                 right: 10px;
             }
-    
+
             #prev {
                 left: 10px;
             }
-    
+
             .active {
                 opacity: 1;
                 z-index: 1;
                 filter: none;
-                transform: scale(1.1); /* Center card is slightly larger */
+                transform: scale(1.1);
+                /* Center card is slightly larger */
             }
-    
-            .left, .right {
+
+            .left,
+            .right {
                 opacity: 0.6;
                 z-index: 0;
-                transform: scale(0.9); /* Side cards are slightly smaller */
+                transform: scale(0.9);
+                /* Side cards are slightly smaller */
             }
-            .item{
+
+            .item {
                 border: 4px solid rgb(102, 141, 240);
             }
         </style>
-            
-            <script>
-                const items = document.querySelectorAll('.carousel .item');
-                const next = document.getElementById('next');
-                const prev = document.getElementById('prev');
-                let activeIndex = 0;
-            
-                function loadShow() {
-                    items.forEach((item, index) => {
-                        item.classList.remove('active', 'left', 'right');
-                        item.style.transform = `translateX(${(index - activeIndex) * 100}%)`;
-                        item.style.opacity = 0; // Hide all items initially
-                        item.style.filter = 'blur(5px)'; // Blur all items initially
-                    });
-            
-                    items[activeIndex].classList.add('active');
-                    items[activeIndex].style.opacity = 1;
-                    items[activeIndex].style.filter = 'none';
-            
-                    // Show left card
-                    if (activeIndex > 0) {
-                        items[activeIndex - 1].classList.add('left');
-                        items[activeIndex - 1].style.transform = `translateX(-120%) scale(0.9)`;
-                        items[activeIndex - 1].style.opacity = 0.6;
-                        items[activeIndex - 1].style.filter = 'blur(5px)';
-                    }
-            
-                    // Show right card
-                    if (activeIndex < items.length - 1) {
-                        items[activeIndex + 1].classList.add('right');
-                        items[activeIndex + 1].style.transform = `translateX(120%) scale(0.9)`;
-                        items[activeIndex + 1].style.opacity = 0.6;
-                        items[activeIndex + 1].style.filter = 'blur(5px)';
-                    }
+
+        <script>
+            const items = document.querySelectorAll('.carousel .item');
+            const next = document.getElementById('next');
+            const prev = document.getElementById('prev');
+            let activeIndex = 0;
+
+            window.onscroll = function () {
+                const scrollUpBtn = document.getElementById("scrollUpBtn");
+                if (
+                    document.body.scrollTop > 100 ||
+                    document.documentElement.scrollTop > 100
+                ) {
+                    scrollUpBtn.style.display = "block";
+                } else {
+                    scrollUpBtn.style.display = "none";
                 }
-            
+                const totalHeight = document.documentElement.scrollHeight - window.innerHeight;
+                const scrollPosition = window.pageYOffset;
+                const scrollPercentage = (scrollPosition / totalHeight) * 100;
+                document.getElementById(
+                    "progress-bar"
+                ).style.width = `${scrollPercentage}%`;
+            };
+
+            function scrollToTop() {
+                window.scrollTo({
+                    top: 0,
+                    behavior: "smooth",
+                });
+            }
+
+            function loadShow() {
+                items.forEach((item, index) => {
+                    item.classList.remove('active', 'left', 'right');
+                    item.style.transform = `translateX(${(index - activeIndex) * 100}%)`;
+                    item.style.opacity = 0; // Hide all items initially
+                    item.style.filter = 'blur(5px)'; // Blur all items initially
+                });
+
+                items[activeIndex].classList.add('active');
+                items[activeIndex].style.opacity = 1;
+                items[activeIndex].style.filter = 'none';
+
+                // Show left card
+                if (activeIndex > 0) {
+                    items[activeIndex - 1].classList.add('left');
+                    items[activeIndex - 1].style.transform = `translateX(-120%) scale(0.9)`;
+                    items[activeIndex - 1].style.opacity = 0.6;
+                    items[activeIndex - 1].style.filter = 'blur(5px)';
+                }
+
+                // Show right card
+                if (activeIndex < items.length - 1) {
+                    items[activeIndex + 1].classList.add('right');
+                    items[activeIndex + 1].style.transform = `translateX(120%) scale(0.9)`;
+                    items[activeIndex + 1].style.opacity = 0.6;
+                    items[activeIndex + 1].style.filter = 'blur(5px)';
+                }
+            }
+
+            loadShow();
+
+            next.onclick = function () {
+                activeIndex = (activeIndex + 1) % items.length;
                 loadShow();
-            
-                next.onclick = function () {
-                    activeIndex = (activeIndex + 1) % items.length;
-                    loadShow();
-                };
-            
-                prev.onclick = function () {
-                    activeIndex = (activeIndex - 1 + items.length) % items.length;
-                    loadShow();
-                };
-            </script>
-                
+            };
+
+            prev.onclick = function () {
+                activeIndex = (activeIndex - 1 + items.length) % items.length;
+                loadShow();
+            };
+        </script>
+
 
 
         <h2 style="color: rgb(153, 153, 248);text-shadow: #0e0e0e;font-size: xx-large;">Features You’ll Love</h2>
@@ -701,12 +796,12 @@ <h3>Multiplayer Mode</h3>
             </div>
         </div>
 
-<style>
-    .service{
-        border: 5px solid rgb(153, 153, 248);
-    }
-</style>
-        
+        <style>
+            .service {
+                border: 5px solid rgb(153, 153, 248);
+            }
+        </style>
+
 
         <div class="card">
             <h1>Join the Defense Team</h1>
@@ -717,118 +812,120 @@ <h1>Join the Defense Team</h1>
             <h2>How to Play</h2>
             <div class="feature-list">
                 <div class="feature-item">
-                    <div class="feature-img"><img src="./assets/images/Screenshot 2024-10-29 232410.png" alt="photo"></div>
+                    <div class="feature-img"><img src="./assets/images/Screenshot 2024-10-29 232410.png" alt="photo">
+                    </div>
                     <h3>Start the Game</h3>
                     <p>Click the "Start" button to begin your defense.</p>
                 </div>
                 <div class="feature-item">
-                    <div class="feature-img"><img src="./assets/images/Screenshot 2024-10-29 232427.png" alt="photo"></div>
+                    <div class="feature-img"><img src="./assets/images/Screenshot 2024-10-29 232427.png" alt="photo">
+                    </div>
                     <h3>Move and Shoot</h3>
                     <p>Use your keyboard or on-screen controls to maneuver your spaceship and destroy the invaders.</p>
                 </div>
                 <div class="feature-item">
-                    <div class="feature-img"><img src="./assets/images/Screenshot 2024-10-29 232459.png" alt="photo"></div>
+                    <div class="feature-img"><img src="./assets/images/Screenshot 2024-10-29 232459.png" alt="photo">
+                    </div>
                     <h3>Game Over</h3>
                     <p>When you lose all 3 lives, the game ends. Click "Restart" to try again!</p>
                 </div>
             </div>
         </section>
-<style>
-    /* Section Container Styling */
-.features {
-    background:linear-gradient(to right,rgb(200, 199, 200),rgb(179, 231, 245));
-    border: 10px solid blue;
-    text-align: center;
-    padding: 40px 20px;
-    font-family: Arial, sans-serif;
-    border-radius: 10%;
-}
-
-/* Section Title Styling */
-.features h2 {
-    font-size: 2.5rem;
-    color: #3e9cff;
-    margin-bottom: 30px;
-    text-transform: uppercase;
-    font-weight: 700;
-}
-
-/* Feature List Grid Layout */
-.feature-list {
-    display: flex;
-    gap: 20px;
-    justify-content: center;
-    flex-wrap: wrap;
-}
-
-/* Feature Item Card Styling */
-.feature-item {
-    width: 280px;
-    background-color: #fff;
-    padding: 20px;
-    border-radius: 12px;
-    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
-    transition: transform 0.3s ease, box-shadow 0.3s ease;
-    cursor: pointer;
-    border: 3px solid blue;
-}
-
-/* Hover Effects for Feature Item */
-.feature-item:hover {
-    transform: translateY(-10px);
-    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.15);
-    background: linear-gradient(to right,rgb(252, 216, 242),rgb(123, 203, 246));
-}
-
-/* Image Container Styling */
-.feature-img {
-
-    justify-self:  center;
-
-    height: 200px;
-    margin-bottom: 15px;
-    width: 200px;
-    height: auto;
-    border-radius: 50%;
-    overflow: hidden;
-}
-
-.feature-img img {
-    border: 3px solid rgb(86, 86, 244);
-    width: 200px;
-    height: 200px;
-    border-radius: 50%;
-    transition: transform 0.3s ease;
-}
-
-/* Image Zoom Effect on Hover */
-.feature-item:hover .feature-img img {
-    transform: scale(1.1);
-}
-
-/* Feature Item Title Styling */
-.feature-item h3 {
-    font-size: 1.5rem;
-    color: #333;
-    margin: 10px 0;
-    font-weight: 600;
-}
-
-/* Feature Item Paragraph Styling */
-.feature-item p {
-    font-size: 1rem;
-    color: #666;
-    line-height: 1.6;
-}
-
-/* Responsive Layout */
-@media (max-width: 768px) {
-    .feature-item {
-        width: 100%;
-    }
-}
-
-</style>
+        <style>
+            /* Section Container Styling */
+            .features {
+                background: linear-gradient(to right, rgb(200, 199, 200), rgb(179, 231, 245));
+                border: 10px solid blue;
+                text-align: center;
+                padding: 40px 20px;
+                font-family: Arial, sans-serif;
+                border-radius: 10%;
+            }
+
+            /* Section Title Styling */
+            .features h2 {
+                font-size: 2.5rem;
+                color: #3e9cff;
+                margin-bottom: 30px;
+                text-transform: uppercase;
+                font-weight: 700;
+            }
+
+            /* Feature List Grid Layout */
+            .feature-list {
+                display: flex;
+                gap: 20px;
+                justify-content: center;
+                flex-wrap: wrap;
+            }
+
+            /* Feature Item Card Styling */
+            .feature-item {
+                width: 280px;
+                background-color: #fff;
+                padding: 20px;
+                border-radius: 12px;
+                box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
+                transition: transform 0.3s ease, box-shadow 0.3s ease;
+                cursor: pointer;
+                border: 3px solid blue;
+            }
+
+            /* Hover Effects for Feature Item */
+            .feature-item:hover {
+                transform: translateY(-10px);
+                box-shadow: 0 12px 20px rgba(0, 0, 0, 0.15);
+                background: linear-gradient(to right, rgb(252, 216, 242), rgb(123, 203, 246));
+            }
+
+            /* Image Container Styling */
+            .feature-img {
+
+                justify-self: center;
+
+                height: 200px;
+                margin-bottom: 15px;
+                width: 200px;
+                height: auto;
+                border-radius: 50%;
+                overflow: hidden;
+            }
+
+            .feature-img img {
+                border: 3px solid rgb(86, 86, 244);
+                width: 200px;
+                height: 200px;
+                border-radius: 50%;
+                transition: transform 0.3s ease;
+            }
+
+            /* Image Zoom Effect on Hover */
+            .feature-item:hover .feature-img img {
+                transform: scale(1.1);
+            }
+
+            /* Feature Item Title Styling */
+            .feature-item h3 {
+                font-size: 1.5rem;
+                color: #333;
+                margin: 10px 0;
+                font-weight: 600;
+            }
+
+            /* Feature Item Paragraph Styling */
+            .feature-item p {
+                font-size: 1rem;
+                color: #666;
+                line-height: 1.6;
+            }
+
+            /* Responsive Layout */
+            @media (max-width: 768px) {
+                .feature-item {
+                    width: 100%;
+                }
+            }
+        </style>
 
 
         <div class="cta">
@@ -842,9 +939,12 @@ <h2>Are You Ready to Defend Your Base?</h2>
 
     <div class="container">
         <div class="service-tabs">
-            <button class="service-tab"><a style="color: black; text-decoration: none;" href="./gameplay.html">Gameplay</a> </button>
-            <button class="service-tab"><a style="color: black; text-decoration: none;" href="./Leaderboard.html">Leaderboard</a> </button>
-            <button class="service-tab"><a style="color: black; text-decoration: none;" href="./Tips.html">Tips & Strategies</a> </button>
+            <button class="service-tab"><a style="color: black; text-decoration: none;"
+                    href="./gameplay.html">Gameplay</a> </button>
+            <button class="service-tab"><a style="color: black; text-decoration: none;"
+                    href="./Leaderboard.html">Leaderboard</a> </button>
+            <button class="service-tab"><a style="color: black; text-decoration: none;" href="./Tips.html">Tips &
+                    Strategies</a> </button>
         </div>
 
         <h2>Game Rules</h2>
@@ -919,6 +1019,8 @@ <h2>Take Your Skills to the Next Level!</h2>
         <div class="circle"></div>
         <div class="circle"></div>
     </div>
+    <!-- Scroll to top -->
+    <button id="scrollUpBtn" onclick="scrollToTop()">↑</button>
     <style>
         .circle {
             position: absolute;
@@ -983,4 +1085,4 @@ <h2>Take Your Skills to the Next Level!</h2>
     </script>
 </body>
 
-</html>
+</html>
\ No newline at end of file