Renu-code123 · Renu-code123 · Mar 6, 2026 · Mar 6, 2026 · Mar 6, 2026 · Mar 6, 2026
diff --git a/public/blog.html b/public/blog.html
@@ -459,6 +459,35 @@
 /* Light mode button color */
 html[data-theme="light"] .theme-toggle{
     color:#2563eb;
+}/* Scroll To Top Button */
+
+#scrollTopBtn{
+    position: fixed;
+    bottom: 30px;
+    right: 30px;
+    background: linear-gradient(135deg,#00e6a8,#64ffda);
+    color: #000;
+    border: none;
+    padding: 14px 16px;
+    border-radius: 50%;
+    font-size: 18px;
+    cursor: pointer;
+    display: none;
+    z-index: 1000;
+    box-shadow: 0 0 15px rgba(100,255,218,0.7);
+    transition: all 0.3s ease;
+}
+
+#scrollTopBtn:hover{
+    transform: translateY(-4px) scale(1.1);
+    box-shadow: 0 0 25px rgba(100,255,218,1);
+}
+
+/* Dark Mode */
+
+body.dark-mode #scrollTopBtn{
+    background: linear-gradient(135deg,#64ffda,#00bfa5);
+    color:white;
 }
 </style>
 <body>
@@ -567,6 +596,10 @@ <h4>Follow Us</h4>
         <p>&copy; 2026 ExpenseFlow. All rights reserved.</p>
     </div>
 </footer>
+<!-- Scroll To Top Button -->
+<button id="scrollTopBtn" title="Go to top">
+    <i class="fas fa-arrow-up"></i>
+</button>
 <script>
     const blogs = [
     {title:"Mastering Monthly Budgeting",date:"Feb 26, 2026",author:"Finance Team",
@@ -635,6 +668,21 @@ <h3>${blog.title}</h3>
         document.documentElement.setAttribute("data-theme","light");
         localStorage.setItem("theme","light");
     }
+});const scrollBtn = document.getElementById("scrollTopBtn");
+
+window.onscroll = function () {
+    if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 300) {
+        scrollBtn.style.display = "block";
+    } else {
+        scrollBtn.style.display = "none";
+    }
+};
+
+scrollBtn.addEventListener("click", function () {
+    window.scrollTo({
+        top: 0,
+        behavior: "smooth"
+    });
 });
 </script>
 <script src="blog.js"></script>

diff --git a/public/faq.css b/public/faq.css
@@ -681,4 +681,33 @@ html[data-theme="light"] .category-btn:hover{
 /* FAQ hover */
 html[data-theme="light"] .faq-item:hover{
     background:#f9fafb;
+}/* Scroll To Top Button */
+
+#scrollTopBtn{
+    position: fixed;
+    bottom: 30px;
+    right: 30px;
+    background: linear-gradient(135deg,#00e6a8,#64ffda);
+    color: #000;
+    border: none;
+    padding: 14px 16px;
+    border-radius: 50%;
+    font-size: 18px;
+    cursor: pointer;
+    display: none;
+    z-index: 1000;
+    box-shadow: 0 0 15px rgba(100,255,218,0.7);
+    transition: all 0.3s ease;
+}
+
+#scrollTopBtn:hover{
+    transform: translateY(-4px) scale(1.1);
+    box-shadow: 0 0 25px rgba(100,255,218,1);
+}
+
+/* Dark Mode */
+
+body.dark-mode #scrollTopBtn{
+    background: linear-gradient(135deg,#64ffda,#00bfa5);
+    color:white;
 }
diff --git a/public/faq.html b/public/faq.html
@@ -568,7 +568,10 @@ <h4>Follow Us</h4>
             <p>&copy; 2026 ExpenseFlow. All rights reserved.</p>
         </div>
     </footer>
-
+<!-- Scroll To Top Button -->
+<button id="scrollTopBtn" title="Go to top">
+    <i class="fas fa-arrow-up"></i>
+</button>
     <script src="theme.js"></script>
     <script src="faq.js"></script>
 </body>

diff --git a/public/faq.js b/public/faq.js
@@ -237,4 +237,19 @@ const savedTheme = localStorage.getItem("theme");
 
 if(savedTheme){
 document.documentElement.setAttribute("data-theme",savedTheme);
-}
+}const scrollBtn = document.getElementById("scrollTopBtn");
+
+window.onscroll = function () {
+    if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 300) {
+        scrollBtn.style.display = "block";
+    } else {
+        scrollBtn.style.display = "none";
+    }
+};
+
+scrollBtn.addEventListener("click", function () {
+    window.scrollTo({
+        top: 0,
+        behavior: "smooth"
+    });
+});
diff --git a/public/index.html b/public/index.html
@@ -467,6 +467,60 @@
     opacity: 1;
     transform: translateY(0);
   }
+}/* Toggle Button */
+
+.theme-toggle {
+  background: linear-gradient(135deg,#6366f1,#64ffda);
+  border: none;
+  width: 42px;
+  height: 42px;
+  border-radius: 50%;
+  color: white;
+  cursor: pointer;
+  font-size: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 10px;
+  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
+  transition: all 0.3s ease;
+}
+
+.theme-toggle:hover{
+  transform: scale(1.1);
+}
+
+/* LIGHT MODE */
+
+body.light-mode{
+  background:#f5f7fb;
+  color:#222;
+}
+
+body.light-mode .navbar{
+  background:white;
+}
+
+body.light-mode .feature-card{
+  background:white;
+  color:#222;
+}
+
+body.light-mode .balance-card{
+  background:white;
+}
+
+body.light-mode .history-section{
+  background:white;
+}
+
+/* inputs */
+
+body.light-mode input,
+body.light-mode select{
+  background:white;
+  color:#222;
+  border:1px solid #ddd;
 }
   </style>
   <!-- Clerk Authentication SDK -->
@@ -496,6 +550,7 @@
           <a href="analytics.html" class="nav-link">Analytics</a>
           <a href="goals.html" class="nav-link">Goals</a>
           <a href="networth.html" class="nav-link">Net Worth</a>
+          <a href="receipt.html" class="nav-link">Receipt</a>
           <div class="nav-item dropdown">
             <a href="#" class="nav-link dropdown-toggle">More</a>
             <div class="dropdown-menu">
@@ -505,7 +560,16 @@
             </div>
           </div>
         </div>
+        <div class="user-profile">
+
+  <button id="themeToggle" class="theme-toggle">
+    <i class="fas fa-moon"></i>
+  </button>
 
+  <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=50&h=50&fit=crop&crop=face"
+  alt="User" class="profile-img">
+
+</div>
         <div class="nav-toggle" id="nav-toggle">
           <span class="bar"></span>
           <span class="bar"></span>
@@ -522,6 +586,7 @@
             <i class="fas fa-coins"></i>
             <span id="current-currency">INR</span>
           </button>
+
           <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=50&h=50&fit=crop&crop=face"
             alt="User" class="profile-img">
           <span class="username" id="navUsername"></span>
@@ -1792,6 +1857,33 @@ <h4>Est. Monthly</h4>
       behavior: "smooth"
     });
   });
+</script>
+<script>
+
+const toggleBtn = document.getElementById("themeToggle");
+const body = document.body;
+
+// load saved theme
+if(localStorage.getItem("theme") === "light"){
+    body.classList.add("light-mode");
+    toggleBtn.innerHTML = '<i class="fas fa-sun"></i>';
+}
+
+toggleBtn.addEventListener("click", () => {
+
+    body.classList.toggle("light-mode");
+
+    if(body.classList.contains("light-mode")){
+        localStorage.setItem("theme","light");
+        toggleBtn.innerHTML = '<i class="fas fa-sun"></i>';
+    }
+    else{
+        localStorage.setItem("theme","dark");
+        toggleBtn.innerHTML = '<i class="fas fa-moon"></i>';
+    }
+
+});
+
 </script>
 </body>
 </html>