Add flip functionality to token cards

Xcceleran-do · Mar 15, 2024 · 2f03062 · 2f03062
1 parent 94b3773
commit 2f03062
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 8 deletions.
diff --git a/public/icons/minus-icon.svg b/public/icons/minus-icon.svg
diff --git a/src/components/sections/MindplexTokens.astro b/src/components/sections/MindplexTokens.astro
@@ -33,17 +33,75 @@ const tokenCardsContent = await Astro.glob("../../content/mindplexTokens/*.md");
       tokenCardsContent.map((card) => {
         const { imageSource, title, description, color } = card.frontmatter;
         return (
-          <div
-            class={`card ${color} flex flex-col mb-10 px-8 py-7 justify-evenly rounded-3xl h-[598px] max-w-[367px] text-white text-lg md:text-base`}
-          >
-            <h2 class="text-2xl font-semibold uppercase text-left mb-5 ">
-              {title}
-            </h2>
-            <img src={imageSource} class=" w-full h-full" />
-            <img src="/icons/plus-icon.svg" class=" w-8 self-end" />
+          <div class="card-container relative">
+            <div
+              class={`card-inner relative transform transition duration-700 ease-in-out ${color} flex flex-col mb-10 px-8 py-7 justify-evenly rounded-3xl h-[598px] max-w-[367px]`}
+            >
+              <div class="card-back absolute backface-hidden w-full h-full transform rotateY-180 bg-white p-4 left-0 rounded-3xl">
+                <p class="text-gray-800 text-base">{description}</p>
+                <img
+                  src="/icons/minus-icon.svg"
+                  class="w-8 cursor-pointer minus-icon absolute bottom-5 right-5"
+                />
+              </div>
+              <h2 class="text-2xl font-semibold uppercase text-left mb-5">
+                {title}
+              </h2>
+              <img src={imageSource} class="w-full h-full" />
+              <img
+                src="/icons/plus-icon.svg"
+                class="w-8 self-end cursor-pointer plus-icon"
+              />
+            </div>
           </div>
         );
       })
     }
   </CardLayout>
 </section>
+
+<script>
+  document.addEventListener("DOMContentLoaded", () => {
+    document.querySelectorAll(".plus-icon").forEach((item) => {
+      item.addEventListener("click", (event) => {
+        const cardInner = event.target.closest(".card-inner");
+        cardInner.classList.toggle("is-flipped");
+      });
+    });
+  });
+
+  document.querySelectorAll(".minus-icon").forEach((item) => {
+    item.addEventListener("click", (event) => {
+      const cardInner = event.target.closest(".card-inner");
+      cardInner.classList.toggle("is-flipped");
+    });
+  });
+</script>
+<style>
+  .backface-hidden {
+    backface-visibility: hidden;
+  }
+  .card-container {
+    perspective: 1000px;
+  }
+  .card-inner {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    transition: transform 0.6s;
+    transform-style: preserve-3d;
+    cursor: pointer;
+  }
+  .card-inner.is-flipped {
+    transform: rotateY(180deg);
+  }
+  .card-front,
+  .card-back {
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+  }
+  .card-back {
+    transform: rotateY(180deg);
+  }
+</style>