added Flip all cards button to boards

Author: Ciphrox

src/assets/styles/alphabets/[alphabet]/board.css

@@ -9,6 +9,43 @@
   justify-content: flex-start;
   padding: 1rem;
 
+  & .head {
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+    width: 100%;
+    justify-content: space-between;
+    padding: 1rem;
+    border-radius: 0.5rem;
+    font-weight: 600;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+
+    & .back {
+      margin-bottom: 0 !important;
+    }
+  }
+
+  & .flip__all__button {
+    background-color: var(--background);
+    border: none;
+    padding: 0.5rem 1rem;
+    border-radius: 0.5rem;
+    font-weight: 200;
+    margin: 1rem 0;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    align-self: flex-end;
+  }
+
+  & .flip__all__button:hover {
+    transform: translateY(-2px);
+  }
+
+  & .flip__all__button.active {
+    transform: scale(0.95);
+    background-color: color-mix(in srgb, var(--primary) 70%, black 30%);
+  }
+
   & .container__alphabet {
     display: grid;
     gap: 2rem;

src/pages/alphabets/[alphabet]/board.astro

@@ -27,7 +27,10 @@ const data = alphabetData[alphabet as keyof AlphabetsData].data;
 
 <BaseLayout meta={{ title: `Alphabets - ${alphabet.charAt(0).toUpperCase() + alphabet.slice(1)}` }}>
   <article class="container__alphabets">
-    <BackButton />
+    <div class="head">
+      <BackButton />
+      <button id="flip-all-button" class="flip__all__button">Flip All Cards</button>
+    </div>
     <div class="container__alphabet">
       <div class="list">
         {
@@ -39,4 +42,29 @@ const data = alphabetData[alphabet as keyof AlphabetsData].data;
       </div>
     </div>
   </article>
+
+  <script>
+    const flipAllButton = document.getElementById("flip-all-button") as HTMLButtonElement;
+    const flipCards = document.querySelectorAll(".flip__card");
+    let allFlipped = false;
+
+    flipAllButton.addEventListener("click", () => {
+      allFlipped = !allFlipped;
+
+      flipCards.forEach((card) => {
+        if (allFlipped) {
+          card.classList.add("flipped");
+        } else {
+          card.classList.remove("flipped");
+        }
+      });
+
+      flipAllButton.textContent = allFlipped ? "Reset All Cards" : "Flip All Cards";
+
+      flipAllButton.classList.add("active");
+      setTimeout(() => {
+        flipAllButton.classList.remove("active");
+      }, 300);
+    });
+  </script>
 </BaseLayout>