diff --git a/src/components/Card/Card.astro b/src/components/Card/Card.astro
index 6ac263d..b988c78 100644
--- a/src/components/Card/Card.astro
+++ b/src/components/Card/Card.astro
@@ -12,27 +12,30 @@ const { hostname } = new URL(url);
 const qrCode: string = await generateQRCode(url);
 ---
 
-<a
-  href={url}
-  target="_blank"
-  rel="noopener noreferrer"
-  aria-label={`Visit ${hostname}`}
->
+<button id="card" type="button" aria-label="Share your card">
   <Svg id="qr" raw={qrCode} />
   <div>
-    <Icon id="icon" name="mingcute:idcard-line" />
+    <Icon class="icon" id="idcard" name="mingcute:idcard-line" />
+    <Icon
+      class="icon"
+      id="check"
+      name="mingcute:checkbox-line"
+      display="none"
+    />
     <span aria-hidden="true">{hostname}</span>
   </div>
-</a>
+</button>
 
 <style>
-  a {
+  button {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     gap: 0.3rem;
-    text-decoration: none;
+    background: none;
+    border: none;
+    cursor: pointer;
 
     &:hover div,
     &:focus-visible div {
@@ -60,7 +63,7 @@ const qrCode: string = await generateQRCode(url);
     transition: border-color 0.3s ease-in-out;
   }
 
-  #icon {
+  .icon {
     width: 1rem;
     height: auto;
   }
@@ -73,3 +76,34 @@ const qrCode: string = await generateQRCode(url);
     line-height: normal;
   }
 </style>
+
+<script is:inline>
+  const shareData = {
+    title: document.title,
+    text: document.head.querySelector('[name="description"]').content,
+    url: location.href,
+  };
+
+  document.getElementById("card").addEventListener("click", async () => {
+    if (
+      /iPhone|iPad|Android/i.test(navigator.userAgent) &&
+      navigator.canShare(shareData)
+    ) {
+      try {
+        await navigator.share(shareData);
+      } catch (error) {
+        if (error.name !== "AbortError") console.error("Error sharing:", error);
+      }
+    } else {
+      await navigator.clipboard.writeText(shareData.url);
+      const [cardIcon, checkIcon] = [
+        document.getElementById("idcard"),
+        document.getElementById("check"),
+      ];
+      [cardIcon.style.display, checkIcon.style.display] = ["none", "block"];
+      setTimeout(() => {
+        [cardIcon.style.display, checkIcon.style.display] = ["block", "none"];
+      }, 1000);
+    }
+  });
+</script>
diff --git a/src/components/Card/__snapshots__/Card.test.ts.snap b/src/components/Card/__snapshots__/Card.test.ts.snap
index 11d5128..6a7f16b 100644
--- a/src/components/Card/__snapshots__/Card.test.ts.snap
+++ b/src/components/Card/__snapshots__/Card.test.ts.snap
@@ -1,5 +1,67 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Card > Valid URL > Default 1`] = `"<a href="https://example.com" target="_blank" rel="noopener noreferrer" aria-label="Visit example.com" data-astro-cid-nzteqis6> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25" shape-rendering="crispEdges" id="qr" data-astro-cid-nzteqis6><path stroke="#000000" d="M0 0.5h7m4 0h3m2 0h1m1 0h7M0 1.5h1m5 0h1m3 0h1m2 0h4m1 0h1m5 0h1M0 2.5h1m1 0h3m1 0h1m1 0h2m1 0h1m2 0h1m3 0h1m1 0h3m1 0h1M0 3.5h1m1 0h3m1 0h1m1 0h1m4 0h3m2 0h1m1 0h3m1 0h1M0 4.5h1m1 0h3m1 0h1m1 0h3m2 0h1m2 0h1m1 0h1m1 0h3m1 0h1M0 5.5h1m5 0h1m1 0h1m2 0h1m2 0h2m2 0h1m5 0h1M0 6.5h7m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h7M8 7.5h1m5 0h1m1 0h1M0 8.5h1m1 0h5m5 0h1m5 0h5M1 9.5h1m2 0h2m2 0h1m1 0h2m1 0h1m3 0h1m1 0h1m3 0h1M0 10.5h5m1 0h1m1 0h2m3 0h4m2 0h1m1 0h1m1 0h2M0 11.5h2m1 0h3m2 0h1m1 0h2m1 0h1m1 0h2m1 0h2m4 0h1M1 12.5h3m2 0h1m4 0h2m1 0h2m1 0h2m1 0h1m1 0h3M0 13.5h5m3 0h1m1 0h1m5 0h1m2 0h1m1 0h1m1 0h1M0 14.5h1m5 0h2m2 0h3m2 0h1m2 0h4m1 0h2M0 15.5h1m2 0h1m3 0h1m3 0h1m2 0h7m3 0h1M0 16.5h1m1 0h1m2 0h2m1 0h4m4 0h5m1 0h1M8 17.5h2m2 0h5m3 0h2M0 18.5h7m6 0h2m1 0h1m1 0h1m1 0h1m1 0h3M0 19.5h1m5 0h1m1 0h2m2 0h2m2 0h1m3 0h2m1 0h1M0 20.5h1m1 0h3m1 0h1m1 0h3m1 0h1m1 0h7m1 0h1m1 0h1M0 21.5h1m1 0h3m1 0h1m1 0h1m6 0h1m1 0h2m1 0h5M0 22.5h1m1 0h3m1 0h1m1 0h5m2 0h1m5 0h2m1 0h1M0 23.5h1m5 0h1m4 0h1m2 0h1m1 0h2m1 0h3m2 0h1M0 24.5h7m1 0h2m1 0h1m5 0h8"></path></svg> <div data-astro-cid-nzteqis6> <svg width="1em" height="1em" id="icon" data-astro-cid-nzteqis6 data-icon="mingcute:idcard-line">   <symbol id="ai:mingcute:idcard-line" viewBox="0 0 24 24"><g fill="none" fill-rule="evenodd"><path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"/><path fill="currentColor" d="M4 4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 2h16v12H4zm6.25 3.75a1.75 1.75 0 1 1-3.5 0a1.75 1.75 0 0 1 3.5 0M5 14.5A2.5 2.5 0 0 1 7.5 12h2a2.5 2.5 0 0 1 2.5 2.5v.5a1 1 0 1 1-2 0v-.5a.5.5 0 0 0-.5-.5h-2a.5.5 0 0 0-.5.5v.5a1 1 0 1 1-2 0zm8-3.5a1 1 0 0 1 1-1h2a1 1 0 1 1 0 2h-2a1 1 0 0 1-1-1m1 2a1 1 0 1 0 0 2h4a1 1 0 1 0 0-2z"/></g></symbol><use href="#ai:mingcute:idcard-line"></use>  </svg> <span aria-hidden="true" data-astro-cid-nzteqis6>example.com</span> </div> </a> "`;
+exports[`Card > Valid URL > Default 1`] = `
+"<button id="card" type="button" aria-label="Share your card" data-astro-cid-nzteqis6> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25" shape-rendering="crispEdges" id="qr" data-astro-cid-nzteqis6><path stroke="#000000" d="M0 0.5h7m4 0h3m2 0h1m1 0h7M0 1.5h1m5 0h1m3 0h1m2 0h4m1 0h1m5 0h1M0 2.5h1m1 0h3m1 0h1m1 0h2m1 0h1m2 0h1m3 0h1m1 0h3m1 0h1M0 3.5h1m1 0h3m1 0h1m1 0h1m4 0h3m2 0h1m1 0h3m1 0h1M0 4.5h1m1 0h3m1 0h1m1 0h3m2 0h1m2 0h1m1 0h1m1 0h3m1 0h1M0 5.5h1m5 0h1m1 0h1m2 0h1m2 0h2m2 0h1m5 0h1M0 6.5h7m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h7M8 7.5h1m5 0h1m1 0h1M0 8.5h1m1 0h5m5 0h1m5 0h5M1 9.5h1m2 0h2m2 0h1m1 0h2m1 0h1m3 0h1m1 0h1m3 0h1M0 10.5h5m1 0h1m1 0h2m3 0h4m2 0h1m1 0h1m1 0h2M0 11.5h2m1 0h3m2 0h1m1 0h2m1 0h1m1 0h2m1 0h2m4 0h1M1 12.5h3m2 0h1m4 0h2m1 0h2m1 0h2m1 0h1m1 0h3M0 13.5h5m3 0h1m1 0h1m5 0h1m2 0h1m1 0h1m1 0h1M0 14.5h1m5 0h2m2 0h3m2 0h1m2 0h4m1 0h2M0 15.5h1m2 0h1m3 0h1m3 0h1m2 0h7m3 0h1M0 16.5h1m1 0h1m2 0h2m1 0h4m4 0h5m1 0h1M8 17.5h2m2 0h5m3 0h2M0 18.5h7m6 0h2m1 0h1m1 0h1m1 0h1m1 0h3M0 19.5h1m5 0h1m1 0h2m2 0h2m2 0h1m3 0h2m1 0h1M0 20.5h1m1 0h3m1 0h1m1 0h3m1 0h1m1 0h7m1 0h1m1 0h1M0 21.5h1m1 0h3m1 0h1m1 0h1m6 0h1m1 0h2m1 0h5M0 22.5h1m1 0h3m1 0h1m1 0h5m2 0h1m5 0h2m1 0h1M0 23.5h1m5 0h1m4 0h1m2 0h1m1 0h2m1 0h3m2 0h1M0 24.5h7m1 0h2m1 0h1m5 0h8"></path></svg> <div data-astro-cid-nzteqis6> <svg width="1em" height="1em" class="icon" id="idcard" data-astro-cid-nzteqis6 data-icon="mingcute:idcard-line">   <symbol id="ai:mingcute:idcard-line" viewBox="0 0 24 24"><g fill="none" fill-rule="evenodd"><path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"/><path fill="currentColor" d="M4 4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 2h16v12H4zm6.25 3.75a1.75 1.75 0 1 1-3.5 0a1.75 1.75 0 0 1 3.5 0M5 14.5A2.5 2.5 0 0 1 7.5 12h2a2.5 2.5 0 0 1 2.5 2.5v.5a1 1 0 1 1-2 0v-.5a.5.5 0 0 0-.5-.5h-2a.5.5 0 0 0-.5.5v.5a1 1 0 1 1-2 0zm8-3.5a1 1 0 0 1 1-1h2a1 1 0 1 1 0 2h-2a1 1 0 0 1-1-1m1 2a1 1 0 1 0 0 2h4a1 1 0 1 0 0-2z"/></g></symbol><use href="#ai:mingcute:idcard-line"></use>  </svg> <svg width="1em" height="1em" class="icon" id="check" display="none" data-astro-cid-nzteqis6 data-icon="mingcute:checkbox-line">   <symbol id="ai:mingcute:checkbox-line" viewBox="0 0 24 24"><g fill="none" fill-rule="evenodd"><path d="m12.594 23.258l-.012.002l-.071.035l-.02.004l-.014-.004l-.071-.036q-.016-.004-.024.006l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.016-.018m.264-.113l-.014.002l-.184.093l-.01.01l-.003.011l.018.43l.005.012l.008.008l.201.092q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.003-.011l.018-.43l-.003-.012l-.01-.01z"/><path fill="currentColor" d="M5 3a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2zm0 2h14v14H5zm11.95 4.795a1 1 0 1 0-1.414-1.414l-4.95 4.95l-2.121-2.121a1 1 0 0 0-1.415 1.414l2.758 2.758a1.1 1.1 0 0 0 1.556 0z"/></g></symbol><use href="#ai:mingcute:checkbox-line"></use>  </svg> <span aria-hidden="true" data-astro-cid-nzteqis6>example.com</span> </div> </button>  <script>
+  const shareData = {
+    title: document.title,
+    text: document.head.querySelector('[name="description"]').content,
+    url: location.href,
+  };
 
-exports[`Card > Valid URL > SubDomain 1`] = `"<a href="https://www.example.com" target="_blank" rel="noopener noreferrer" aria-label="Visit www.example.com" data-astro-cid-nzteqis6> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25" shape-rendering="crispEdges" id="qr" data-astro-cid-nzteqis6><path stroke="#000000" d="M0 0.5h7m5 0h2m2 0h1m1 0h7M0 1.5h1m5 0h1m2 0h3m2 0h2m2 0h1m5 0h1M0 2.5h1m1 0h3m1 0h1m1 0h1m1 0h3m2 0h1m2 0h1m1 0h3m1 0h1M0 3.5h1m1 0h3m1 0h1m1 0h2m1 0h1m1 0h4m1 0h1m1 0h3m1 0h1M0 4.5h1m1 0h3m1 0h1m1 0h1m2 0h2m3 0h1m1 0h1m1 0h3m1 0h1M0 5.5h1m5 0h1m1 0h1m2 0h2m1 0h3m1 0h1m5 0h1M0 6.5h7m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h7M8 7.5h1m2 0h1m2 0h3M0 8.5h1m1 0h5m3 0h1m1 0h2m4 0h5M0 9.5h3m4 0h5m1 0h1m2 0h2m1 0h1m3 0h1M0 10.5h1m1 0h2m2 0h1m1 0h2m1 0h11m1 0h2M0 11.5h2m1 0h2m3 0h1m2 0h1m3 0h1m1 0h1m1 0h1m4 0h1M2 12.5h1m3 0h1m3 0h1m1 0h4m1 0h4m1 0h3M0 13.5h2m3 0h1m4 0h1m5 0h2m1 0h1m1 0h1m1 0h1M0 14.5h1m2 0h1m1 0h2m3 0h4m1 0h1m1 0h5m1 0h2M0 15.5h1m2 0h2m4 0h1m1 0h1m2 0h2m1 0h1m1 0h2m3 0h1M0 16.5h1m4 0h4m1 0h2m1 0h2m1 0h5m1 0h1M8 17.5h1m3 0h2m2 0h1m3 0h2M0 18.5h7m3 0h1m2 0h2m1 0h1m1 0h1m1 0h1m1 0h3M0 19.5h1m5 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m3 0h2m1 0h1M0 20.5h1m1 0h3m1 0h1m1 0h1m3 0h9m1 0h3M0 21.5h1m1 0h3m1 0h1m1 0h3m2 0h1m4 0h1m1 0h5M0 22.5h1m1 0h3m1 0h1m1 0h2m1 0h2m1 0h1m6 0h2m1 0h1M0 23.5h1m5 0h1m2 0h1m1 0h1m2 0h4m1 0h3m2 0h1M0 24.5h7m1 0h2m1 0h2m6 0h6"></path></svg> <div data-astro-cid-nzteqis6> <svg width="1em" height="1em" id="icon" data-astro-cid-nzteqis6 data-icon="mingcute:idcard-line">   <symbol id="ai:mingcute:idcard-line" viewBox="0 0 24 24"><g fill="none" fill-rule="evenodd"><path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"/><path fill="currentColor" d="M4 4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 2h16v12H4zm6.25 3.75a1.75 1.75 0 1 1-3.5 0a1.75 1.75 0 0 1 3.5 0M5 14.5A2.5 2.5 0 0 1 7.5 12h2a2.5 2.5 0 0 1 2.5 2.5v.5a1 1 0 1 1-2 0v-.5a.5.5 0 0 0-.5-.5h-2a.5.5 0 0 0-.5.5v.5a1 1 0 1 1-2 0zm8-3.5a1 1 0 0 1 1-1h2a1 1 0 1 1 0 2h-2a1 1 0 0 1-1-1m1 2a1 1 0 1 0 0 2h4a1 1 0 1 0 0-2z"/></g></symbol><use href="#ai:mingcute:idcard-line"></use>  </svg> <span aria-hidden="true" data-astro-cid-nzteqis6>www.example.com</span> </div> </a> "`;
+  document.getElementById("card").addEventListener("click", async () => {
+    if (
+      /iPhone|iPad|Android/i.test(navigator.userAgent) &&
+      navigator.canShare(shareData)
+    ) {
+      try {
+        await navigator.share(shareData);
+      } catch (error) {
+        if (error.name !== "AbortError") console.error("Error sharing:", error);
+      }
+    } else {
+      await navigator.clipboard.writeText(shareData.url);
+      const [cardIcon, checkIcon] = [
+        document.getElementById("idcard"),
+        document.getElementById("check"),
+      ];
+      [cardIcon.style.display, checkIcon.style.display] = ["none", "block"];
+      setTimeout(() => {
+        [cardIcon.style.display, checkIcon.style.display] = ["block", "none"];
+      }, 1000);
+    }
+  });
+</script>"
+`;
+
+exports[`Card > Valid URL > SubDomain 1`] = `
+"<button id="card" type="button" aria-label="Share your card" data-astro-cid-nzteqis6> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25" shape-rendering="crispEdges" id="qr" data-astro-cid-nzteqis6><path stroke="#000000" d="M0 0.5h7m5 0h2m2 0h1m1 0h7M0 1.5h1m5 0h1m2 0h3m2 0h2m2 0h1m5 0h1M0 2.5h1m1 0h3m1 0h1m1 0h1m1 0h3m2 0h1m2 0h1m1 0h3m1 0h1M0 3.5h1m1 0h3m1 0h1m1 0h2m1 0h1m1 0h4m1 0h1m1 0h3m1 0h1M0 4.5h1m1 0h3m1 0h1m1 0h1m2 0h2m3 0h1m1 0h1m1 0h3m1 0h1M0 5.5h1m5 0h1m1 0h1m2 0h2m1 0h3m1 0h1m5 0h1M0 6.5h7m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h7M8 7.5h1m2 0h1m2 0h3M0 8.5h1m1 0h5m3 0h1m1 0h2m4 0h5M0 9.5h3m4 0h5m1 0h1m2 0h2m1 0h1m3 0h1M0 10.5h1m1 0h2m2 0h1m1 0h2m1 0h11m1 0h2M0 11.5h2m1 0h2m3 0h1m2 0h1m3 0h1m1 0h1m1 0h1m4 0h1M2 12.5h1m3 0h1m3 0h1m1 0h4m1 0h4m1 0h3M0 13.5h2m3 0h1m4 0h1m5 0h2m1 0h1m1 0h1m1 0h1M0 14.5h1m2 0h1m1 0h2m3 0h4m1 0h1m1 0h5m1 0h2M0 15.5h1m2 0h2m4 0h1m1 0h1m2 0h2m1 0h1m1 0h2m3 0h1M0 16.5h1m4 0h4m1 0h2m1 0h2m1 0h5m1 0h1M8 17.5h1m3 0h2m2 0h1m3 0h2M0 18.5h7m3 0h1m2 0h2m1 0h1m1 0h1m1 0h1m1 0h3M0 19.5h1m5 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m3 0h2m1 0h1M0 20.5h1m1 0h3m1 0h1m1 0h1m3 0h9m1 0h3M0 21.5h1m1 0h3m1 0h1m1 0h3m2 0h1m4 0h1m1 0h5M0 22.5h1m1 0h3m1 0h1m1 0h2m1 0h2m1 0h1m6 0h2m1 0h1M0 23.5h1m5 0h1m2 0h1m1 0h1m2 0h4m1 0h3m2 0h1M0 24.5h7m1 0h2m1 0h2m6 0h6"></path></svg> <div data-astro-cid-nzteqis6> <svg width="1em" height="1em" class="icon" id="idcard" data-astro-cid-nzteqis6 data-icon="mingcute:idcard-line">   <symbol id="ai:mingcute:idcard-line" viewBox="0 0 24 24"><g fill="none" fill-rule="evenodd"><path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"/><path fill="currentColor" d="M4 4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 2h16v12H4zm6.25 3.75a1.75 1.75 0 1 1-3.5 0a1.75 1.75 0 0 1 3.5 0M5 14.5A2.5 2.5 0 0 1 7.5 12h2a2.5 2.5 0 0 1 2.5 2.5v.5a1 1 0 1 1-2 0v-.5a.5.5 0 0 0-.5-.5h-2a.5.5 0 0 0-.5.5v.5a1 1 0 1 1-2 0zm8-3.5a1 1 0 0 1 1-1h2a1 1 0 1 1 0 2h-2a1 1 0 0 1-1-1m1 2a1 1 0 1 0 0 2h4a1 1 0 1 0 0-2z"/></g></symbol><use href="#ai:mingcute:idcard-line"></use>  </svg> <svg width="1em" height="1em" class="icon" id="check" display="none" data-astro-cid-nzteqis6 data-icon="mingcute:checkbox-line">   <symbol id="ai:mingcute:checkbox-line" viewBox="0 0 24 24"><g fill="none" fill-rule="evenodd"><path d="m12.594 23.258l-.012.002l-.071.035l-.02.004l-.014-.004l-.071-.036q-.016-.004-.024.006l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.016-.018m.264-.113l-.014.002l-.184.093l-.01.01l-.003.011l.018.43l.005.012l.008.008l.201.092q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.003-.011l.018-.43l-.003-.012l-.01-.01z"/><path fill="currentColor" d="M5 3a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2zm0 2h14v14H5zm11.95 4.795a1 1 0 1 0-1.414-1.414l-4.95 4.95l-2.121-2.121a1 1 0 0 0-1.415 1.414l2.758 2.758a1.1 1.1 0 0 0 1.556 0z"/></g></symbol><use href="#ai:mingcute:checkbox-line"></use>  </svg> <span aria-hidden="true" data-astro-cid-nzteqis6>www.example.com</span> </div> </button>  <script>
+  const shareData = {
+    title: document.title,
+    text: document.head.querySelector('[name="description"]').content,
+    url: location.href,
+  };
+
+  document.getElementById("card").addEventListener("click", async () => {
+    if (
+      /iPhone|iPad|Android/i.test(navigator.userAgent) &&
+      navigator.canShare(shareData)
+    ) {
+      try {
+        await navigator.share(shareData);
+      } catch (error) {
+        if (error.name !== "AbortError") console.error("Error sharing:", error);
+      }
+    } else {
+      await navigator.clipboard.writeText(shareData.url);
+      const [cardIcon, checkIcon] = [
+        document.getElementById("idcard"),
+        document.getElementById("check"),
+      ];
+      [cardIcon.style.display, checkIcon.style.display] = ["none", "block"];
+      setTimeout(() => {
+        [cardIcon.style.display, checkIcon.style.display] = ["block", "none"];
+      }, 1000);
+    }
+  });
+</script>"
+`;
diff --git a/tests/__snapshots__/index.test.ts.snap b/tests/__snapshots__/index.test.ts.snap
index c4a5e0d..3193b84 100644
--- a/tests/__snapshots__/index.test.ts.snap
+++ b/tests/__snapshots__/index.test.ts.snap
@@ -15,5 +15,34 @@ exports[`Index 1`] = `
 🏞️ Sometimes drawing pixel art."><link rel="icon" href="https://github.com/5ouma.png"><link rel="apple-touch-icon" href="https://github.com/5ouma.png"><meta property="og:title" content="Souma"><meta property="og:description" content="💻 Japanese minimalistic engineer who loves small tools to make daily life fun.
 🏞️ Sometimes drawing pixel art."><meta property="og:image" content="https://github.com/5ouma.png"><meta name="twitter:card" content="summary"><meta name="twitter:title" content="Souma"><meta name="twitter:description" content="💻 Japanese minimalistic engineer who loves small tools to make daily life fun.
 🏞️ Sometimes drawing pixel art."><meta name="twitter:image" content="https://github.com/5ouma.png"><meta name="theme-color" content="#f4f4f4" media="(prefers-color-scheme: light)"><meta name="theme-color" content="#242424" media="(prefers-color-scheme: dark)"></head> <body data-astro-cid-sckkx6r4>  <main data-astro-cid-j7pv25f6> <div id="info" data-astro-cid-j7pv25f6> <div id="bio" data-astro-cid-yljsttrw> <div id="profile" data-astro-cid-yljsttrw> <img src="https://github.com/5ouma.png" data-image-component="true" alt="Souma's avatar" data-astro-cid-yljsttrw width="460" height="460" loading="lazy" decoding="async"> <h1 data-astro-cid-yljsttrw>Souma</h1> </div> <p data-astro-cid-yljsttrw>💻 Japanese minimalistic engineer who loves small tools to make daily life fun.
-🏞️ Sometimes drawing pixel art.</p> </div>  <div id="contacts" data-astro-cid-j7pv25f6> <div data-astro-cid-j4povljh> <a href="https://5ouma.me" target="_blank" rel="noopener noreferrer" aria-label="Visit 5ouma.me" data-astro-cid-j4povljh> <svg width="1em" height="1em" data-astro-cid-j4povljh data-icon="mingcute:home-3-line">   <symbol id="ai:mingcute:home-3-line" viewBox="0 0 24 24"><g fill="none"><path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"/><path fill="currentColor" d="M10.772 2.688a2 2 0 0 1 2.317-.099l.139.1l8.384 6.52c.721.561.37 1.692-.499 1.785l-.116.006H20v8a2 2 0 0 1-1.85 1.995L18 21H6a2 2 0 0 1-1.994-1.85L4 19v-8h-.997C2.09 11 1.671 9.892 2.3 9.285l.088-.076zM12 4.267L5.625 9.225c.229.185.375.468.375.785V19h3v-5a3 3 0 1 1 6 0v5h3v-8.99c0-.317.146-.6.375-.785zM12 13a1 1 0 0 0-1 1v5h2v-5a1 1 0 0 0-1-1"/></g></symbol><use href="#ai:mingcute:home-3-line"></use>  </svg> <span aria-hidden="true" data-astro-cid-j4povljh> 5ouma.me </span> </a>  </div>  <ul aria-label="Contacts" data-astro-cid-j7pv25f6> <li data-astro-cid-j7pv25f6> <a href="https://posts.cv/5ouma" target="_blank" rel="noopener noreferrer" aria-label="Go to 5ouma's profile on Posts" data-astro-cid-ilwnnabb style="--accent-color: #111111;"> <svg width="1em" height="1em" data-astro-cid-ilwnnabb data-icon="simple-icons:readdotcv">   <symbol id="ai:simple-icons:readdotcv" viewBox="0 0 24 24"><path fill="currentColor" d="M20.832 3.367L8.668.108a3.15 3.15 0 0 0-3.856 2.226L.943 16.777a3.15 3.15 0 0 0 2.226 3.856l12.163 3.259a3.15 3.15 0 0 0 3.855-2.226l3.87-14.443a3.15 3.15 0 0 0-2.226-3.856M6.332 2.741A1.574 1.574 0 0 1 8.26 1.628l12.163 3.26a1.574 1.574 0 0 1 1.113 1.927l-3.87 14.444a1.574 1.574 0 0 1-1.928 1.113l-12.163-3.26a1.574 1.574 0 0 1-1.113-1.927zm2.634 2.336a.787.787 0 1 0-.407 1.52l9.122 2.444a.787.787 0 1 0 .407-1.52zM6.985 9.434a.787.787 0 0 1 .963-.557l9.123 2.445a.787.787 0 0 1-.408 1.52l-9.122-2.444a.787.787 0 0 1-.556-.964m-.055 3.244a.787.787 0 0 0-.407 1.52l5.32 1.427a.787.787 0 0 0 .408-1.52z"/></symbol><use href="#ai:simple-icons:readdotcv"></use>  </svg> <span data-astro-cid-ilwnnabb style="--accent-color: #111111;">5ouma</span> </a>  </li><li data-astro-cid-j7pv25f6> <a href="https://misskey.5ouma.me/@5ouma" target="_blank" rel="noopener noreferrer" aria-label="Go to @5ouma@misskey.5ouma.me's profile on Misskey" data-astro-cid-ilwnnabb style="--accent-color: #A1CA03;"> <svg width="1em" height="1em" data-astro-cid-ilwnnabb data-icon="simple-icons:misskey">   <symbol id="ai:simple-icons:misskey" viewBox="0 0 24 24"><path fill="currentColor" d="M8.91 16.892c-1.039.003-1.931-.63-2.352-1.366c-.225-.322-.67-.437-.676 0v2.014q0 1.215-.876 2.1q-.85.86-2.078.86q-1.2 0-2.077-.86A2.93 2.93 0 0 1 0 17.54V6.46q0-.936.526-1.695a2.86 2.86 0 0 1 1.402-1.088a2.9 2.9 0 0 1 1-.177q1.353 0 2.253 1.063l2.997 3.515c.067.05.263.437.732.437c.47 0 .692-.386.758-.437l2.972-3.515Q13.567 3.5 14.918 3.5q.501 0 1.001.177a2.73 2.73 0 0 1 1.377 1.088q.55.758.55 1.695v11.08q0 1.215-.875 2.1q-.852.86-2.078.86q-1.201 0-2.078-.86a2.93 2.93 0 0 1-.85-2.1v-2.014c-.05-.55-.531-.204-.702 0c-.45.843-1.313 1.361-2.352 1.366M21.448 8.61q-1.05 0-1.802-.733q-.726-.759-.726-1.822c0-1.063.242-1.307.726-1.796a2.44 2.44 0 0 1 1.802-.758q1.05 0 1.803.758q.75.735.75 1.796q0 1.063-.75 1.822q-.751.732-1.803.733m.025.507q1.05 0 1.777.758q.75.759.751 1.822v6.248q0 1.064-.75 1.821a2.4 2.4 0 0 1-1.778.734q-1.05 0-1.802-.733a2.5 2.5 0 0 1-.75-1.822v-6.248a2.5 2.5 0 0 1 .75-1.822a2.44 2.44 0 0 1 1.802-.758"/></symbol><use href="#ai:simple-icons:misskey"></use>  </svg> <span data-astro-cid-ilwnnabb style="--accent-color: #A1CA03;">@5ouma@misskey.5ouma.me</span> </a>  </li><li data-astro-cid-j7pv25f6> <a href="https://github.com/5ouma" target="_blank" rel="noopener noreferrer" aria-label="Go to 5ouma's profile on GitHub" data-astro-cid-ilwnnabb style="--accent-color: #181717;"> <svg width="1em" height="1em" data-astro-cid-ilwnnabb data-icon="mingcute:github-line">   <symbol id="ai:mingcute:github-line" viewBox="0 0 24 24"><g fill="none"><path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"/><path fill="currentColor" d="M6.315 6.176c-.25-.638-.24-1.367-.129-2.034a6.8 6.8 0 0 1 2.12 1.07c.28.214.647.283.989.18A9.3 9.3 0 0 1 12 5c.961 0 1.874.14 2.703.391c.342.104.709.034.988-.18a6.8 6.8 0 0 1 2.119-1.07c.111.667.12 1.396-.128 2.033c-.15.384-.075.826.208 1.14C18.614 8.117 19 9.04 19 10c0 2.114-1.97 4.187-5.134 4.818c-.792.158-1.101 1.155-.495 1.726c.389.366.629.882.629 1.456v3a1 1 0 0 0 2 0v-3c0-.57-.12-1.112-.334-1.603C18.683 15.35 21 12.993 21 10c0-1.347-.484-2.585-1.287-3.622c.21-.82.191-1.646.111-2.28c-.071-.568-.17-1.312-.57-1.756c-.595-.659-1.58-.271-2.28-.032a9 9 0 0 0-2.125 1.045A11.4 11.4 0 0 0 12 3c-.994 0-1.953.125-2.851.356a9 9 0 0 0-2.125-1.045c-.7-.24-1.686-.628-2.281.031c-.408.452-.493 1.137-.566 1.719l-.005.038c-.08.635-.098 1.462.112 2.283C3.484 7.418 3 8.654 3 10c0 2.992 2.317 5.35 5.334 6.397A4 4 0 0 0 8 17.98l-.168.034c-.717.099-1.176.01-1.488-.122c-.76-.322-1.152-1.133-1.63-1.753c-.298-.385-.732-.866-1.398-1.088a1 1 0 0 0-.632 1.898c.558.186.944 1.142 1.298 1.566c.373.448.869.916 1.58 1.218c.682.29 1.483.393 2.438.276V21a1 1 0 0 0 2 0v-3c0-.574.24-1.09.629-1.456c.607-.572.297-1.568-.495-1.726C6.969 14.187 5 12.114 5 10c0-.958.385-1.881 1.108-2.684c.283-.314.357-.756.207-1.14"/></g></symbol><use href="#ai:mingcute:github-line"></use>  </svg> <span data-astro-cid-ilwnnabb style="--accent-color: #181717;">5ouma</span> </a>  </li> </ul> </div> </div> <a href="https://card.5ouma.me" target="_blank" rel="noopener noreferrer" aria-label="Visit card.5ouma.me" data-astro-cid-nzteqis6> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25" shape-rendering="crispEdges" id="qr" data-astro-cid-nzteqis6><path stroke="#000000" d="M0 0.5h7m1 0h2m3 0h2m3 0h7M0 1.5h1m5 0h1m3 0h2m4 0h1m1 0h1m5 0h1M0 2.5h1m1 0h3m1 0h1m1 0h1m1 0h1m1 0h2m1 0h1m2 0h1m1 0h3m1 0h1M0 3.5h1m1 0h3m1 0h1m3 0h1m2 0h1m1 0h1m2 0h1m1 0h3m1 0h1M0 4.5h1m1 0h3m1 0h1m3 0h1m1 0h1m1 0h1m3 0h1m1 0h3m1 0h1M0 5.5h1m5 0h1m1 0h2m1 0h1m1 0h2m1 0h1m1 0h1m5 0h1M0 6.5h7m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h7M9 7.5h1m2 0h1m3 0h1M0 8.5h1m1 0h1m3 0h2m7 0h1m3 0h1m2 0h1m1 0h1M5 9.5h1m2 0h2m2 0h2m1 0h2m1 0h2m1 0h1m1 0h2M0 10.5h2m1 0h5m2 0h4m1 0h1m1 0h2m2 0h2m1 0h1M0 11.5h1m4 0h1m2 0h1m2 0h1m2 0h4m3 0h1M0 12.5h1m1 0h2m2 0h2m2 0h3m3 0h1m1 0h2m4 0h1M1 13.5h1m2 0h1m3 0h2m2 0h1m2 0h5m3 0h2M0 14.5h4m2 0h3m3 0h2m1 0h1m1 0h2m2 0h2m1 0h1M2 15.5h1m4 0h3m1 0h2m1 0h1m1 0h1m1 0h4M0 16.5h2m2 0h1m1 0h2m1 0h2m2 0h8m2 0h1M8 17.5h1m1 0h1m2 0h1m1 0h2m3 0h1m3 0h1M0 18.5h7m1 0h1m2 0h1m4 0h1m1 0h1m1 0h1m3 0h1M0 19.5h1m5 0h1m3 0h1m2 0h1m2 0h1m3 0h1m2 0h1M0 20.5h1m1 0h3m1 0h1m2 0h5m1 0h6m3 0h1M0 21.5h1m1 0h3m1 0h1m3 0h1m1 0h1m3 0h2m2 0h1m1 0h2M0 22.5h1m1 0h3m1 0h1m1 0h1m3 0h3m2 0h1m1 0h3m1 0h2M0 23.5h1m5 0h1m4 0h2m1 0h1m1 0h2m1 0h2M0 24.5h7m1 0h2m3 0h6m2 0h1m2 0h1"></path></svg> <div data-astro-cid-nzteqis6> <svg width="1em" height="1em" id="icon" data-astro-cid-nzteqis6 data-icon="mingcute:idcard-line">   <symbol id="ai:mingcute:idcard-line" viewBox="0 0 24 24"><g fill="none" fill-rule="evenodd"><path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"/><path fill="currentColor" d="M4 4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 2h16v12H4zm6.25 3.75a1.75 1.75 0 1 1-3.5 0a1.75 1.75 0 0 1 3.5 0M5 14.5A2.5 2.5 0 0 1 7.5 12h2a2.5 2.5 0 0 1 2.5 2.5v.5a1 1 0 1 1-2 0v-.5a.5.5 0 0 0-.5-.5h-2a.5.5 0 0 0-.5.5v.5a1 1 0 1 1-2 0zm8-3.5a1 1 0 0 1 1-1h2a1 1 0 1 1 0 2h-2a1 1 0 0 1-1-1m1 2a1 1 0 1 0 0 2h4a1 1 0 1 0 0-2z"/></g></symbol><use href="#ai:mingcute:idcard-line"></use>  </svg> <span aria-hidden="true" data-astro-cid-nzteqis6>card.5ouma.me</span> </div> </a>  </main>   </body></html> "
+🏞️ Sometimes drawing pixel art.</p> </div>  <div id="contacts" data-astro-cid-j7pv25f6> <div data-astro-cid-j4povljh> <a href="https://5ouma.me" target="_blank" rel="noopener noreferrer" aria-label="Visit 5ouma.me" data-astro-cid-j4povljh> <svg width="1em" height="1em" data-astro-cid-j4povljh data-icon="mingcute:home-3-line">   <symbol id="ai:mingcute:home-3-line" viewBox="0 0 24 24"><g fill="none"><path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"/><path fill="currentColor" d="M10.772 2.688a2 2 0 0 1 2.317-.099l.139.1l8.384 6.52c.721.561.37 1.692-.499 1.785l-.116.006H20v8a2 2 0 0 1-1.85 1.995L18 21H6a2 2 0 0 1-1.994-1.85L4 19v-8h-.997C2.09 11 1.671 9.892 2.3 9.285l.088-.076zM12 4.267L5.625 9.225c.229.185.375.468.375.785V19h3v-5a3 3 0 1 1 6 0v5h3v-8.99c0-.317.146-.6.375-.785zM12 13a1 1 0 0 0-1 1v5h2v-5a1 1 0 0 0-1-1"/></g></symbol><use href="#ai:mingcute:home-3-line"></use>  </svg> <span aria-hidden="true" data-astro-cid-j4povljh> 5ouma.me </span> </a>  </div>  <ul aria-label="Contacts" data-astro-cid-j7pv25f6> <li data-astro-cid-j7pv25f6> <a href="https://posts.cv/5ouma" target="_blank" rel="noopener noreferrer" aria-label="Go to 5ouma's profile on Posts" data-astro-cid-ilwnnabb style="--accent-color: #111111;"> <svg width="1em" height="1em" data-astro-cid-ilwnnabb data-icon="simple-icons:readdotcv">   <symbol id="ai:simple-icons:readdotcv" viewBox="0 0 24 24"><path fill="currentColor" d="M20.832 3.367L8.668.108a3.15 3.15 0 0 0-3.856 2.226L.943 16.777a3.15 3.15 0 0 0 2.226 3.856l12.163 3.259a3.15 3.15 0 0 0 3.855-2.226l3.87-14.443a3.15 3.15 0 0 0-2.226-3.856M6.332 2.741A1.574 1.574 0 0 1 8.26 1.628l12.163 3.26a1.574 1.574 0 0 1 1.113 1.927l-3.87 14.444a1.574 1.574 0 0 1-1.928 1.113l-12.163-3.26a1.574 1.574 0 0 1-1.113-1.927zm2.634 2.336a.787.787 0 1 0-.407 1.52l9.122 2.444a.787.787 0 1 0 .407-1.52zM6.985 9.434a.787.787 0 0 1 .963-.557l9.123 2.445a.787.787 0 0 1-.408 1.52l-9.122-2.444a.787.787 0 0 1-.556-.964m-.055 3.244a.787.787 0 0 0-.407 1.52l5.32 1.427a.787.787 0 0 0 .408-1.52z"/></symbol><use href="#ai:simple-icons:readdotcv"></use>  </svg> <span data-astro-cid-ilwnnabb style="--accent-color: #111111;">5ouma</span> </a>  </li><li data-astro-cid-j7pv25f6> <a href="https://misskey.5ouma.me/@5ouma" target="_blank" rel="noopener noreferrer" aria-label="Go to @5ouma@misskey.5ouma.me's profile on Misskey" data-astro-cid-ilwnnabb style="--accent-color: #A1CA03;"> <svg width="1em" height="1em" data-astro-cid-ilwnnabb data-icon="simple-icons:misskey">   <symbol id="ai:simple-icons:misskey" viewBox="0 0 24 24"><path fill="currentColor" d="M8.91 16.892c-1.039.003-1.931-.63-2.352-1.366c-.225-.322-.67-.437-.676 0v2.014q0 1.215-.876 2.1q-.85.86-2.078.86q-1.2 0-2.077-.86A2.93 2.93 0 0 1 0 17.54V6.46q0-.936.526-1.695a2.86 2.86 0 0 1 1.402-1.088a2.9 2.9 0 0 1 1-.177q1.353 0 2.253 1.063l2.997 3.515c.067.05.263.437.732.437c.47 0 .692-.386.758-.437l2.972-3.515Q13.567 3.5 14.918 3.5q.501 0 1.001.177a2.73 2.73 0 0 1 1.377 1.088q.55.758.55 1.695v11.08q0 1.215-.875 2.1q-.852.86-2.078.86q-1.201 0-2.078-.86a2.93 2.93 0 0 1-.85-2.1v-2.014c-.05-.55-.531-.204-.702 0c-.45.843-1.313 1.361-2.352 1.366M21.448 8.61q-1.05 0-1.802-.733q-.726-.759-.726-1.822c0-1.063.242-1.307.726-1.796a2.44 2.44 0 0 1 1.802-.758q1.05 0 1.803.758q.75.735.75 1.796q0 1.063-.75 1.822q-.751.732-1.803.733m.025.507q1.05 0 1.777.758q.75.759.751 1.822v6.248q0 1.064-.75 1.821a2.4 2.4 0 0 1-1.778.734q-1.05 0-1.802-.733a2.5 2.5 0 0 1-.75-1.822v-6.248a2.5 2.5 0 0 1 .75-1.822a2.44 2.44 0 0 1 1.802-.758"/></symbol><use href="#ai:simple-icons:misskey"></use>  </svg> <span data-astro-cid-ilwnnabb style="--accent-color: #A1CA03;">@5ouma@misskey.5ouma.me</span> </a>  </li><li data-astro-cid-j7pv25f6> <a href="https://github.com/5ouma" target="_blank" rel="noopener noreferrer" aria-label="Go to 5ouma's profile on GitHub" data-astro-cid-ilwnnabb style="--accent-color: #181717;"> <svg width="1em" height="1em" data-astro-cid-ilwnnabb data-icon="mingcute:github-line">   <symbol id="ai:mingcute:github-line" viewBox="0 0 24 24"><g fill="none"><path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"/><path fill="currentColor" d="M6.315 6.176c-.25-.638-.24-1.367-.129-2.034a6.8 6.8 0 0 1 2.12 1.07c.28.214.647.283.989.18A9.3 9.3 0 0 1 12 5c.961 0 1.874.14 2.703.391c.342.104.709.034.988-.18a6.8 6.8 0 0 1 2.119-1.07c.111.667.12 1.396-.128 2.033c-.15.384-.075.826.208 1.14C18.614 8.117 19 9.04 19 10c0 2.114-1.97 4.187-5.134 4.818c-.792.158-1.101 1.155-.495 1.726c.389.366.629.882.629 1.456v3a1 1 0 0 0 2 0v-3c0-.57-.12-1.112-.334-1.603C18.683 15.35 21 12.993 21 10c0-1.347-.484-2.585-1.287-3.622c.21-.82.191-1.646.111-2.28c-.071-.568-.17-1.312-.57-1.756c-.595-.659-1.58-.271-2.28-.032a9 9 0 0 0-2.125 1.045A11.4 11.4 0 0 0 12 3c-.994 0-1.953.125-2.851.356a9 9 0 0 0-2.125-1.045c-.7-.24-1.686-.628-2.281.031c-.408.452-.493 1.137-.566 1.719l-.005.038c-.08.635-.098 1.462.112 2.283C3.484 7.418 3 8.654 3 10c0 2.992 2.317 5.35 5.334 6.397A4 4 0 0 0 8 17.98l-.168.034c-.717.099-1.176.01-1.488-.122c-.76-.322-1.152-1.133-1.63-1.753c-.298-.385-.732-.866-1.398-1.088a1 1 0 0 0-.632 1.898c.558.186.944 1.142 1.298 1.566c.373.448.869.916 1.58 1.218c.682.29 1.483.393 2.438.276V21a1 1 0 0 0 2 0v-3c0-.574.24-1.09.629-1.456c.607-.572.297-1.568-.495-1.726C6.969 14.187 5 12.114 5 10c0-.958.385-1.881 1.108-2.684c.283-.314.357-.756.207-1.14"/></g></symbol><use href="#ai:mingcute:github-line"></use>  </svg> <span data-astro-cid-ilwnnabb style="--accent-color: #181717;">5ouma</span> </a>  </li> </ul> </div> </div> <button id="card" type="button" aria-label="Share your card" data-astro-cid-nzteqis6> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25" shape-rendering="crispEdges" id="qr" data-astro-cid-nzteqis6><path stroke="#000000" d="M0 0.5h7m1 0h2m3 0h2m3 0h7M0 1.5h1m5 0h1m3 0h2m4 0h1m1 0h1m5 0h1M0 2.5h1m1 0h3m1 0h1m1 0h1m1 0h1m1 0h2m1 0h1m2 0h1m1 0h3m1 0h1M0 3.5h1m1 0h3m1 0h1m3 0h1m2 0h1m1 0h1m2 0h1m1 0h3m1 0h1M0 4.5h1m1 0h3m1 0h1m3 0h1m1 0h1m1 0h1m3 0h1m1 0h3m1 0h1M0 5.5h1m5 0h1m1 0h2m1 0h1m1 0h2m1 0h1m1 0h1m5 0h1M0 6.5h7m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h7M9 7.5h1m2 0h1m3 0h1M0 8.5h1m1 0h1m3 0h2m7 0h1m3 0h1m2 0h1m1 0h1M5 9.5h1m2 0h2m2 0h2m1 0h2m1 0h2m1 0h1m1 0h2M0 10.5h2m1 0h5m2 0h4m1 0h1m1 0h2m2 0h2m1 0h1M0 11.5h1m4 0h1m2 0h1m2 0h1m2 0h4m3 0h1M0 12.5h1m1 0h2m2 0h2m2 0h3m3 0h1m1 0h2m4 0h1M1 13.5h1m2 0h1m3 0h2m2 0h1m2 0h5m3 0h2M0 14.5h4m2 0h3m3 0h2m1 0h1m1 0h2m2 0h2m1 0h1M2 15.5h1m4 0h3m1 0h2m1 0h1m1 0h1m1 0h4M0 16.5h2m2 0h1m1 0h2m1 0h2m2 0h8m2 0h1M8 17.5h1m1 0h1m2 0h1m1 0h2m3 0h1m3 0h1M0 18.5h7m1 0h1m2 0h1m4 0h1m1 0h1m1 0h1m3 0h1M0 19.5h1m5 0h1m3 0h1m2 0h1m2 0h1m3 0h1m2 0h1M0 20.5h1m1 0h3m1 0h1m2 0h5m1 0h6m3 0h1M0 21.5h1m1 0h3m1 0h1m3 0h1m1 0h1m3 0h2m2 0h1m1 0h2M0 22.5h1m1 0h3m1 0h1m1 0h1m3 0h3m2 0h1m1 0h3m1 0h2M0 23.5h1m5 0h1m4 0h2m1 0h1m1 0h2m1 0h2M0 24.5h7m1 0h2m3 0h6m2 0h1m2 0h1"></path></svg> <div data-astro-cid-nzteqis6> <svg width="1em" height="1em" class="icon" id="idcard" data-astro-cid-nzteqis6 data-icon="mingcute:idcard-line">   <symbol id="ai:mingcute:idcard-line" viewBox="0 0 24 24"><g fill="none" fill-rule="evenodd"><path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"/><path fill="currentColor" d="M4 4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 2h16v12H4zm6.25 3.75a1.75 1.75 0 1 1-3.5 0a1.75 1.75 0 0 1 3.5 0M5 14.5A2.5 2.5 0 0 1 7.5 12h2a2.5 2.5 0 0 1 2.5 2.5v.5a1 1 0 1 1-2 0v-.5a.5.5 0 0 0-.5-.5h-2a.5.5 0 0 0-.5.5v.5a1 1 0 1 1-2 0zm8-3.5a1 1 0 0 1 1-1h2a1 1 0 1 1 0 2h-2a1 1 0 0 1-1-1m1 2a1 1 0 1 0 0 2h4a1 1 0 1 0 0-2z"/></g></symbol><use href="#ai:mingcute:idcard-line"></use>  </svg> <svg width="1em" height="1em" class="icon" id="check" display="none" data-astro-cid-nzteqis6 data-icon="mingcute:checkbox-line">   <symbol id="ai:mingcute:checkbox-line" viewBox="0 0 24 24"><g fill="none" fill-rule="evenodd"><path d="m12.594 23.258l-.012.002l-.071.035l-.02.004l-.014-.004l-.071-.036q-.016-.004-.024.006l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.016-.018m.264-.113l-.014.002l-.184.093l-.01.01l-.003.011l.018.43l.005.012l.008.008l.201.092q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.003-.011l.018-.43l-.003-.012l-.01-.01z"/><path fill="currentColor" d="M5 3a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2zm0 2h14v14H5zm11.95 4.795a1 1 0 1 0-1.414-1.414l-4.95 4.95l-2.121-2.121a1 1 0 0 0-1.415 1.414l2.758 2.758a1.1 1.1 0 0 0 1.556 0z"/></g></symbol><use href="#ai:mingcute:checkbox-line"></use>  </svg> <span aria-hidden="true" data-astro-cid-nzteqis6>card.5ouma.me</span> </div> </button>  <script>
+  const shareData = {
+    title: document.title,
+    text: document.head.querySelector('[name="description"]').content,
+    url: location.href,
+  };
+
+  document.getElementById("card").addEventListener("click", async () => {
+    if (
+      /iPhone|iPad|Android/i.test(navigator.userAgent) &&
+      navigator.canShare(shareData)
+    ) {
+      try {
+        await navigator.share(shareData);
+      } catch (error) {
+        if (error.name !== "AbortError") console.error("Error sharing:", error);
+      }
+    } else {
+      await navigator.clipboard.writeText(shareData.url);
+      const [cardIcon, checkIcon] = [
+        document.getElementById("idcard"),
+        document.getElementById("check"),
+      ];
+      [cardIcon.style.display, checkIcon.style.display] = ["none", "block"];
+      setTimeout(() => {
+        [cardIcon.style.display, checkIcon.style.display] = ["block", "none"];
+      }, 1000);
+    }
+  });
+</script> </main>   </body></html> "
 `;