Added search icon to Zodiac cards

Author: chhaviS04

public/js/main.js

@@ -28,18 +28,6 @@ document.addEventListener("DOMContentLoaded", () => {
   document.getElementById("englishBtn")?.addEventListener("click", () => setLanguage("english"));
   document.getElementById("hindiBtn")?.addEventListener("click", () => setLanguage("hindi"));
 
-  // Dark mode
-  const darkToggle = document.getElementById("darkModeToggle");
-  if (localStorage.getItem("darkMode") === "enabled") {
-    document.body.classList.add("dark-mode");
-    if (darkToggle) darkToggle.checked = true;
-  }
-  darkToggle?.addEventListener("change", () => {
-    const enabled = darkToggle.checked;
-    document.body.classList.toggle("dark-mode", enabled);
-    localStorage.setItem("darkMode", enabled ? "enabled" : "disabled");
-  });
-
   // Zodiac page logic
   if (window.location.pathname.includes("zodiac")) {
     fetch("/data/zodiacs.json")
@@ -52,8 +40,13 @@ document.addEventListener("DOMContentLoaded", () => {
           zodiacs.forEach((zodiac, i) => {
             const card = document.createElement("div");
             card.className = "card";
-            card.innerHTML = `<h3>${zodiac.name[currentLang]}</h3><p>${zodiac.dates[currentLang]}</p>`;
-            card.addEventListener("click", () => openModal(i));
+            card.innerHTML = `
+              <h3>${zodiac.name[currentLang]}</h3>
+              <p>${zodiac.dates[currentLang]}</p>
+              <button class="info-btn" title="Show Info" data-index="${i}">
+                <span class="icon">🔍</span>
+              </button>
+            `;
             zodiacsGrid.appendChild(card);
           });
         }
@@ -78,6 +71,13 @@ document.addEventListener("DOMContentLoaded", () => {
           currentLang = localStorage.getItem("language") || "english";
           renderCards();
         });
+        zodiacsGrid.addEventListener("click", (e) => {
+          const btn = e.target.closest(".info-btn");
+          if (btn) {
+            const idx = btn.getAttribute("data-index");
+            openModal(Number(idx));
+          }
+        });
         renderCards();
       });
   }

src/assets/styles/Sunsigns.css src/assets/styles/zodiac.csssrc/assets/styles/Sunsigns.css renamed to src/assets/styles/zodiac.css

@@ -87,6 +87,8 @@ article {
   display: flex;
   flex-direction: column;
   justify-content: center;
+  position: relative;
+  /* max-height: 350px; */
 }
 
 .card:hover {
@@ -246,3 +248,14 @@ article {
   }
 
 }
+.info-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  position: absolute;
+  top: 0.5rem;
+  right: 1rem;
+  font-size: 1.2rem;
+  color: var(--primary-color, #f12711);
+  z-index: 2;
+}

src/pages/zodiac.astro

@@ -3,7 +3,7 @@ import BaseLayout from "@/layouts/Base";
 import Back from "@/components/Back.astro";
 import ZodiacGrid from "@/components/ZodiacGrid.astro";
 import Headers from "@/components/Header.astro";
-import "@/assets/styles/Sunsigns.css";
+import "@/assets/styles/zodiac.css";
 ---
 
 <BaseLayout meta={{ title: "Nakshtra Nexus" }}>

src/utils/constants.ts

@@ -183,8 +183,8 @@ export const NavbarLinks: LinkProps[] = [
     isActive: true
   },
   {
-    name: "Sunsigns",
-    title: "Sunsigns",
+    name: "Zodiac",
+    title: "zodiac",
     path: "/zodiac",
     isActive: true
   },