UI Enhancement: Redesign 404 Error Page with Red Theme, Animations & Improved UX

[Riya-Kharade]

📝 Description

This PR enhances the 404 error page (404.html) with a modern red error theme, improved layout, and better user experience.

🔥 Improvements Made:

• Applied a strong red/warning gradient theme.
• Highlighted the "404" text with improved typography and glow effect.
• Added smooth fade-in and hover animations.
• Improved spacing and visual hierarchy.
• Enhanced CTA buttons ("Back to Dashboard" & "Go to Homepage").
• Added animated background particle effect.
• Improved responsiveness for mobile and tablet devices.
• Enhanced accessibility contrast.

This PR affects the Vanilla JS frontend (UI layer) only.

---

🔗 Related Issue

Fixes #691

---

🛠️ Type of Change

• ✨ New Feature (Enhanced UI design & animations)
• 🐞 Bug Fix
• 📝 Documentation
• 🔐 Security/Backend
• 📱 PWA/Offline

---

🧪 Testing & Validation

• I have tested the changes locally in Full-Stack Mode (Node.js + MongoDB).
• I have verified that the UI remains responsive on mobile and desktop.
• (If applicable) I have tested the offline functionality via the Service Worker.
• I have run npm start and confirmed there are no console errors.

---

🚩 Checklist:

• My code follows the existing folder structure (public/, models/, routes/).
• I have not committed any sensitive .env secrets or private keys.
• My PR targets the main branch.

---

📸 Visuals

Updated 404 page now includes:

• Red error-themed gradient background
• Animated warning icon
• Glow effect on "404"
• Smooth hover effects on CTA buttons
• Improved layout and spacing

[vercel]

@Riya-Kharade is attempting to deploy a commit to the Renu's projects Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

🎉 Thanks for the PR, @Riya-Kharade!

We really appreciate you taking the time to contribute to ExpenseFlow! 💙

---

⭐ Love this project?

Please give us a star! It helps the project grow and reach more developers! 🌟

🔗 https://github.com/Renu-code123/ExpenseFlow

---

✅ PR Checklist

Before we review, please ensure:

• Your code follows the project's coding standards
• All file changes are accurate and intentional
• You've tested your changes locally
• Any review comments have been addressed

---

🙌 Thank You for Contributing!

We truly appreciate your interest in contributing to this project.

• Please make sure your code follows the project structure
• Add clear commit messages and comments where necessary
• Ensure your changes do not break existing functionality

We'll review your PR as soon as possible. Keep up the great work! ✨

---