updated barahkhadi main page ui

Author: Ciphrox

src/assets/styles/barahkhadi/index.css

@@ -16,28 +16,32 @@
 
   & .consonants-grid {
     display: grid;
-    gap: 1rem;
-    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+    gap: 1.25rem;
+    grid-template-columns: repeat(auto-fit, 250px);
+    justify-content: center;
   }
 
   & .consonant-card {
-    aspect-ratio: 1;
+    width: 250px;
+    height: 250px;
+    position: relative;
     background-color: color-mix(in srgb, var(--secondary) 15%, var(--background) 85%);
     border-radius: 0.5rem;
     display: grid;
     place-items: center;
     text-decoration: none;
     transition: transform 0.2s ease;
+    overflow: hidden;
   }
 
   & .consonant-card:hover {
-    transform: scale(1.05);
+    transform: none;
     background-color: color-mix(in srgb, var(--primary) 15%, var(--background) 85%);
     transition: all 0.2s ease;
   }
 
   & .consonant {
-    font-size: 5rem;
+    font-size: 7rem;
     font-weight: bold;
     color: var(--text);
   }
@@ -46,4 +50,91 @@
     scrollbar-width: thin;
     scrollbar-color: var(--primary) var(--background);
   }
+
+  & .consonant-card {
+    position: relative;
+    z-index: 1;
+    overflow: hidden;
+  }
+
+  & .consonant-card:hover {
+    z-index: 1000;
+  }
+
+  & .quick-view-btn {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    padding: 6px;
+    font-size: 1.2rem;
+    background: color-mix(in srgb, var(--text) 10%, var(--background) 90%);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    cursor: pointer;
+    color: var(--text);
+    line-height: 1;
+    z-index: 2;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    transition: all 0.2s ease;
+  }
+
+  & .quick-view-btn:hover {
+    background: color-mix(in srgb, var(--text) 15%, var(--background) 85%);
+    transform: scale(1.05);
+  }
+
+  & .quick-view-btn:active {
+    transform: scale(0.95);
+  }
+
+  & .barahkhadi-popover {
+    visibility: hidden;
+    opacity: 0;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0.75rem;
+    background: var(--background);
+    border: 1px solid var(--border);
+    border-radius: 0.5rem;
+    box-shadow: 0 4px 12px color-mix(in srgb, var(--text) 15%, transparent);
+    transition: opacity 0.2s, visibility 0.2s;
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+    color: var(--text);
+    overflow: hidden;
+    z-index: 1;
+  }
+
+  & .consonant-card[data-active="true"] .barahkhadi-popover {
+    visibility: visible;
+    opacity: 1;
+  }
+
+  & .variations-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 0.4rem;
+    width: 100%;
+    max-height: 100%;
+    overflow-y: auto;
+  }
+
+  & .variation {
+    font-size: 1.5rem;
+    padding: 0.4rem;
+    text-align: center;
+    background: color-mix(in srgb, var(--text) 5%, var(--background) 95%);
+    border-radius: 4px;
+    color: var(--text);
+    border: 1px solid var(--border);
+  }
+
 }

src/pages/barahkhadi/[consonant].astro

@@ -43,9 +43,9 @@ export function getStaticPaths() {
 
 const { consonant } = Astro.params;
 
-const vowels = ["", "ा", "ि", "ी", "ु", "ू", "े", "ै", "ो", "ौ", "ं", "ः", "ृ"];
+const matras = ["", "ा", "ि", "ी", "ु", "ू", "े", "ै", "ो", "ौ", "ं", "ः", "ृ"];
 
-const combinations = vowels.map((vovel) => consonant + vovel);
+const combinations = matras.map((matra) => consonant + matra);
 ---
 
 <BaseLayout meta={{ title: `Barahkhadi - ${consonant}` }}>

src/pages/barahkhadi/index.astro

@@ -11,26 +11,59 @@ const consonants = [
   ["य", "र", "ल", "व"],
   ["श", "ष", "स", "ह"]
 ];
+
+const matras = ["", "ा", "ि", "ी", "ु", "ू", "े", "ै", "ो", "ौ", "ं", "ः"];
 ---
 
+<script>
+  document.querySelectorAll(".quick-view-btn").forEach((button) => {
+    button.addEventListener("click", (e) => {
+      // Close all other open popovers
+      document.querySelectorAll('.consonant-card[data-active="true"]').forEach((card) => {
+        if (card !== (e.currentTarget as HTMLElement).closest(".consonant-card")) {
+          // Don't reset current card
+          const btn = card.querySelector(".quick-view-btn") as HTMLElement;
+          card.setAttribute("data-active", "false");
+          btn.textContent = "🔍";
+        }
+      });
+
+      // Toggle current popover
+      const card = (e.currentTarget as HTMLElement).closest(".consonant-card") as HTMLElement;
+      const isActive = card.getAttribute("data-active") === "true";
+      const newState = !isActive;
+      card.setAttribute("data-active", String(newState));
+      (e.currentTarget as HTMLElement).textContent = newState ? "✖️" : "🔍";
+    });
+  });
+</script>
+
 <BaseLayout meta={{ title: "Barahkhadi" }}>
   <div class="container__barahkhadi">
     <div class="consonants-rows">
       {
-        consonants.map((row, rowIndex) => (
+        consonants.map((row) => (
           <div class="consonant-row">
             <div class="consonants-grid">
               {row.map((consonant) => (
-                <a href={`/barahkhadi/${consonant}`} class="consonant-card">
-                  <div class="consonant-content">
+                <div class="consonant-card" data-active="false">
+                  <a href={`/barahkhadi/${consonant}`} class="consonant-content">
                     <span class="consonant">{consonant}</span>
+                  </a>
+                  <button class="quick-view-btn">🔍</button>
+                  <div class="barahkhadi-popover">
+                    <div class="variations-grid">
+                      {matras.map((matra) => (
+                        <div class="variation">{consonant + matra}</div>
+                      ))}
+                    </div>
                   </div>
-                </a>
+                </div>
               ))}
             </div>
           </div>
         ))
       }
     </div>
   </div>
-</BaseLayout>
+</BaseLayout>