From 7e93e8eef0e0520427ad3c798091195f5334685b Mon Sep 17 00:00:00 2001
From: Esha jha <jha.esha2023@gmail.com>
Date: Fri, 23 Jan 2026 20:11:57 +0530
Subject: [PATCH] Fixed alignment issue of help center page

---
 public/Help-Center.html | 437 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 437 insertions(+)

diff --git a/public/Help-Center.html b/public/Help-Center.html
index 77d2df5..b075cbd 100644
--- a/public/Help-Center.html
+++ b/public/Help-Center.html
@@ -13,6 +13,443 @@
 
   <!-- SAME CSS FILE -->
   <link rel="stylesheet" href="expensetracker.css">
+  <style>
+    /* =========================
+   HELP CENTER – SAFE UI ENHANCEMENTS
+   (NO PARENT LAYOUT CHANGES)
+========================= */
+
+/* Improve card alignment only */
+.balance-card {
+  border-radius: 16px;
+  padding: 1.6rem;
+  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+/* Hover effect */
+.balance-card:hover {
+  transform: translateY(-6px);
+  box-shadow: 0 18px 35px rgba(0, 0, 0, 0.14);
+}
+
+/* Top accent line (subtle) */
+.balance-card::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 4px;
+  width: 100%;
+  background: linear-gradient(90deg, #6366f1, #64ffda);
+  opacity: 0.85;
+}
+
+/* Header alignment */
+.balance-header {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  margin-bottom: 0.6rem;
+}
+
+/* Icon styling */
+.balance-header i {
+  font-size: 1.4rem;
+  color: #6366f1;
+  transition: transform 0.3s ease;
+}
+
+/* Icon animation on hover */
+.balance-card:hover .balance-header i {
+  transform: scale(1.15) rotate(-4deg);
+}
+
+/* Title */
+.balance-header h4 {
+  font-size: 1.15rem;
+  font-weight: 600;
+}
+
+/* Text polish */
+.balance-card p {
+  font-size: 0.95rem;
+  line-height: 1.6;
+  opacity: 0.9;
+}
+
+/* Contact support section – keep layout, just polish */
+.data-management-section {
+  border-radius: 18px;
+  padding: 2rem;
+  transition: transform 0.3s ease;
+}
+
+.data-management-section:hover {
+  transform: translateY(-4px);
+}
+
+/* List spacing */
+.data-management-section ul li {
+  margin-bottom: 0.5rem;
+  font-size: 0.95rem;
+}
+
+/* Navbar active link clarity */
+.nav-link.active {
+  font-weight: 600;
+  position: relative;
+}
+
+.nav-link.active::after {
+  content: "";
+  position: absolute;
+  bottom: -6px;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background: #6366f1;
+}
+/* =========================
+   HELP CENTER – CENTER + ANIMATION LAYER
+   (WORKS WITH EXISTING STYLES)
+========================= */
+
+/* ---------- CENTER MAIN HEADING ---------- */
+.hero-section {
+  text-align: center;
+}
+
+.hero-title {
+  display: inline-block;
+  position: relative;
+  animation: titleReveal 1.2s ease forwards;
+}
+
+@keyframes titleReveal {
+  from {
+    opacity: 0;
+    transform: translateY(20px) scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+/* underline animation */
+.hero-title::after {
+  content: "";
+  position: absolute;
+  bottom: -10px;
+  left: 50%;
+  width: 0;
+  height: 4px;
+  background: linear-gradient(90deg, #6366f1, #64ffda);
+  border-radius: 10px;
+  transform: translateX(-50%);
+  animation: underlineGrow 1s ease forwards;
+  animation-delay: 0.5s;
+}
+
+@keyframes underlineGrow {
+  to {
+    width: 60%;
+  }
+}
+
+/* ---------- CENTER CARD HEADINGS ---------- */
+.balance-header {
+  justify-content: center;
+  text-align: center;
+}
+
+/* stack icon + text visually centered */
+.balance-header i {
+  margin-right: 0;
+}
+
+/* ---------- EXTRA CARD ANIMATIONS ---------- */
+
+/* initial fade-in */
+.balance-card {
+  animation: cardFadeIn 0.8s ease forwards;
+}
+
+.balance-card:nth-child(1) { animation-delay: 0.1s; }
+.balance-card:nth-child(2) { animation-delay: 0.2s; }
+.balance-card:nth-child(3) { animation-delay: 0.3s; }
+.balance-card:nth-child(4) { animation-delay: 0.4s; }
+.balance-card:nth-child(5) { animation-delay: 0.5s; }
+
+@keyframes cardFadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(25px) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+/* ---------- RIPPLE GLOW ON HOVER ---------- */
+.balance-card::after {
+  content: "";
+  position: absolute;
+  inset: -60%;
+  background: radial-gradient(
+    circle,
+    rgba(99, 102, 241, 0.18),
+    transparent 60%
+  );
+  opacity: 0;
+  transition: opacity 0.5s ease;
+  pointer-events: none;
+}
+
+.balance-card:hover::after {
+  opacity: 1;
+}
+
+/* ---------- DEEPER HOVER MOTION ---------- */
+.balance-card:hover {
+  transform: translateY(-10px) scale(1.03);
+}
+
+/* ---------- ICON PULSE ---------- */
+.balance-header i {
+  animation: iconFloat 4s ease-in-out infinite;
+}
+
+@keyframes iconFloat {
+  0% { transform: translateY(0); }
+  50% { transform: translateY(-4px); }
+  100% { transform: translateY(0); }
+}
+
+/* ---------- TEXT SMOOTH LIFT ---------- */
+.balance-card p {
+  transition: transform 0.4s ease, opacity 0.4s ease;
+}
+
+.balance-card:hover p {
+  transform: translateY(-3px);
+  opacity: 1;
+}
+
+/* ---------- SUPPORT SECTION CENTER ---------- */
+.data-management-section {
+  text-align: center;
+  animation: supportFade 1s ease forwards;
+}
+
+@keyframes supportFade {
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+/* =========================
+   HELP CENTER – EXTRA INTERACTION LAYER
+   (ONLY ENHANCEMENTS)
+========================= */
+
+/* Smooth everything */
+.balance-card,
+.balance-header,
+.balance-header h4,
+.balance-header i,
+.balance-card p {
+  transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* ---- Card border glow ---- */
+.balance-card {
+  border: 1px solid transparent;
+}
+
+.balance-card:hover {
+  border-color: rgba(99, 102, 241, 0.35);
+}
+
+/* ---- Soft inner glow ---- */
+.balance-card::before {
+  transition: opacity 0.4s ease;
+}
+
+.balance-card:hover::before {
+  opacity: 1;
+}
+
+/* ---- Card tilt effect (very subtle) ---- */
+.balance-card:hover {
+  transform: translateY(-10px) scale(1.03) rotateX(2deg);
+}
+
+/* ---- Heading hover effect ---- */
+.balance-header h4 {
+  position: relative;
+}
+
+.balance-header h4::after {
+  content: "";
+  position: absolute;
+  bottom: -6px;
+  left: 50%;
+  width: 0;
+  height: 2px;
+  background: linear-gradient(90deg, #6366f1, #64ffda);
+  transform: translateX(-50%);
+  transition: width 0.4s ease;
+}
+
+.balance-card:hover h4::after {
+  width: 60%;
+}
+
+/* ---- Icon glow pulse on hover ---- */
+.balance-card:hover .balance-header i {
+  text-shadow: 0 0 12px rgba(99, 102, 241, 0.6);
+}
+
+/* ---- Text color enhancement ---- */
+.balance-card:hover p {
+  color: #111827;
+}
+
+/* ---- Ripple expansion effect ---- */
+.balance-card::after {
+  transform: scale(0.9);
+  transition: opacity 0.5s ease, transform 0.6s ease;
+}
+
+.balance-card:hover::after {
+  transform: scale(1.05);
+}
+
+/* ---- Support section breathing animation ---- */
+.data-management-section {
+  animation: softBreath 6s ease-in-out infinite;
+}
+
+@keyframes softBreath {
+  0% { transform: scale(1); }
+  50% { transform: scale(1.015); }
+  100% { transform: scale(1); }
+}
+
+/* ---- Support list hover ---- */
+.data-management-section ul li {
+  transition: transform 0.3s ease, opacity 0.3s ease;
+}
+
+.data-management-section ul li:hover {
+  transform: translateX(6px);
+  opacity: 1;
+}
+
+/* ---- Navbar active underline animation ---- */
+.nav-link.active::after {
+  animation: underlinePulse 2s ease-in-out infinite;
+}
+
+@keyframes underlinePulse {
+  0% { opacity: 0.6; }
+  50% { opacity: 1; }
+  100% { opacity: 0.6; }
+}
+/* =========================
+   HELP CENTER – YELLOW CARD ONLY
+   (TEXT COLORS PRESERVED)
+========================= */
+
+/* Card background turns yellow on hover */
+.balance-card:hover {
+  background: linear-gradient(
+    135deg,
+    #facc15,
+    #fde047
+  );
+}
+
+/* Keep text color same as normal */
+.balance-card:hover h4,
+.balance-card:hover p,
+.balance-card:hover i {
+  color: inherit;
+}
+
+/* Prevent glow from affecting text */
+.balance-card:hover .balance-header i {
+  text-shadow: none;
+  filter: none;
+}
+
+/* Keep top accent subtle */
+.balance-card:hover::before {
+  background: linear-gradient(90deg, #6366f1, #64ffda);
+}
+
+/* Soften ripple to avoid text tint */
+.balance-card:hover::after {
+  background: radial-gradient(
+    circle,
+    rgba(255, 255, 255, 0.25),
+    transparent 60%
+  );
+}
+/* =========================
+   HELP CENTER – TEXT SIZE BOOST
+   (NORMAL + HOVER)
+========================= */
+
+/* ----- NORMAL TEXT SIZE INCREASE ----- */
+.balance-header h4 {
+  font-size: 1.3rem;   /* was ~1.15rem */
+}
+
+.balance-card p {
+  font-size: 1.05rem;  /* was ~0.95rem */
+  line-height: 1.75;
+}
+
+/* ----- SMOOTH TEXT SCALE ON HOVER ----- */
+.balance-card h4,
+.balance-card p {
+  transition: font-size 0.35s ease, transform 0.35s ease;
+}
+
+/* Slight zoom on hover (premium feel) */
+.balance-card:hover h4 {
+  transform: scale(1.05);
+}
+
+.balance-card:hover p {
+  transform: scale(1.04);
+}
+
+/* ----- KEEP TEXT COLORS SAME ----- */
+.balance-card:hover h4,
+.balance-card:hover p {
+  color: inherit;
+}
+/* =========================
+   TEXT COLOR BLACK ON HOVER
+========================= */
+
+.balance-card:hover h4,
+.balance-card:hover p {
+  color: #000; /* pure black */
+}
+
+  </style>
 </head>
 
 <body>