(feat): added social share icons

htdocs/assets/_floatingbar.php

@@ -110,12 +110,20 @@
         </div>
         <button class="w-[97%] px-4 py-2 rounded-lg border-[2px] border-accent_primary text-accent_primary my-2"><i class="fa-solid fa-download"></i>&nbsp; Download QR</button>
     </div>
-    <div class="extrashareopt w-full h-full flex flex-col items-center py-3 px-7 border-l-[1px] border-[rgba(255,_255,_255,_0.15)]">
+    <div class="extrashareopt w-full h-full flex flex-col py-3 px-7 border-l-[1px] border-[rgba(255,_255,_255,_0.15)]">
-        <p class="self-start text-lg"><i class="fa-solid fa-user-group text-accent_primary"></i>&nbsp; Sharing Options</p>
+        <p class="text-lg"><i class="fa-solid fa-user-group text-accent_primary"></i>&nbsp; Sharing Options</p>
         <div class="urlinputbar w-full flex justify-between items-center py-2 px-3 my-3 bg-bg_primary rounded-full overflow-hidden">
             <input id="pageurlinput" class="w-[85%] bg-bg_primary caret-accent_primary text-accent_four font-[300] outline-none" type="text" value="https://neosubhamoy.dev" readonly>
             <button class="urlcopybtn px-3 border-l-[1px] border-accent_secondary_transparent" title="Copy link"><i class="fa-regular fa-copy"></i></button>
         </div>
+        <div class="socialshare w-full grid grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-x-3 gap-y-3 justify-items-center p-4 my-3 bg-bg_primary rounded-lg">
+            <botton class="shareitems w-12 h-12 flex justify-center items-center bg-bg_secondary rounded-full cursor-pointer"><i class="fa-brands fa-facebook text-accent_primary"></i></botton>
+            <botton class="shareitems w-12 h-12 flex justify-center items-center bg-bg_secondary rounded-full cursor-pointer"><i class="fa-brands fa-instagram text-accent_primary"></i></botton>
+            <botton class="shareitems w-12 h-12 flex justify-center items-center bg-bg_secondary rounded-full cursor-pointer"><i class="fa-brands fa-x-twitter text-accent_primary"></i></botton>
+            <botton class="shareitems w-12 h-12 flex justify-center items-center bg-bg_secondary rounded-full cursor-pointer"><i class="fa-brands fa-whatsapp text-accent_primary"></i></botton>
+            <botton class="shareitems w-12 h-12 flex justify-center items-center bg-bg_secondary rounded-full cursor-pointer"><i class="fa-brands fa-facebook-messenger text-accent_primary"></i></botton>
+            <botton class="shareitems w-12 h-12 flex justify-center items-center bg-bg_secondary rounded-full cursor-pointer"><i class="fa-brands fa-telegram text-accent_primary"></i></botton>
+        </div>
     </div>
 </div>
 <div id="floating-bar" class="fixed inset-x-0 bottom-[7vh] z-[50] flex justify-center items-center">

htdocs/assets/style.css

@@ -862,6 +862,10 @@ video {
   display: table;
 }
 
+.grid {
+  display: grid;
+}
+
 .hidden {
   display: none;
 }
@@ -926,6 +930,22 @@ video {
   height: 100vh;
 }
 
+.h-\[20px\] {
+  height: 20px;
+}
+
+.h-5 {
+  height: 1.25rem;
+}
+
+.h-14 {
+  height: 3.5rem;
+}
+
+.h-12 {
+  height: 3rem;
+}
+
 .w-0 {
   width: 0px;
 }
@@ -982,6 +1002,10 @@ video {
   width: 70px;
 }
 
+.w-\[85\%\] {
+  width: 85%;
+}
+
 .w-\[90px\] {
   width: 90px;
 }
@@ -990,6 +1014,10 @@ video {
   width: 90vw;
 }
 
+.w-\[97\%\] {
+  width: 97%;
+}
+
 .w-fit {
   width: -moz-fit-content;
   width: fit-content;
@@ -1003,16 +1031,20 @@ video {
   width: 100vw;
 }
 
-.w-\[97\%\] {
+.w-\[20px\] {
-  width: 97%;
+  width: 20px;
 }
 
-.w-\[15\%\] {
+.w-5 {
-  width: 15%;
+  width: 1.25rem;
 }
 
-.w-\[85\%\] {
+.w-14 {
-  width: 85%;
+  width: 3.5rem;
+}
+
+.w-12 {
+  width: 3rem;
 }
 
 .rotate-\[15deg\] {
@@ -1038,6 +1070,18 @@ video {
   cursor: pointer;
 }
 
+.grid-cols-5 {
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+}
+
+.grid-cols-6 {
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+}
+
+.grid-cols-3 {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
 .flex-col {
   flex-direction: column;
 }
@@ -1074,6 +1118,19 @@ video {
   justify-content: space-around;
 }
 
+.justify-items-center {
+  justify-items: center;
+}
+
+.gap-y-3 {
+  row-gap: 0.75rem;
+}
+
+.gap-x-3 {
+  -moz-column-gap: 0.75rem;
+       column-gap: 0.75rem;
+}
+
 .self-start {
   align-self: flex-start;
 }
@@ -1246,6 +1303,10 @@ video {
   padding: 0.30rem;
 }
 
+.p-4 {
+  padding: 1rem;
+}
+
 .px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -1426,10 +1487,6 @@ video {
   color: rgb(30 41 59 / var(--tw-text-opacity));
 }
 
-.text-accent_secondary_transparent {
-  color: rgba(255, 255, 255, 0.30);
-}
-
 .caret-accent_primary {
   caret-color: #38BDF8;
 }
@@ -1664,6 +1721,10 @@ video {
   .md\:w-\[50vw\] {
     width: 50vw;
   }
+
+  .md\:grid-cols-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
 }
 
 @media (min-width: 1024px) {
@@ -1846,6 +1907,14 @@ video {
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
 
+  .lg\:grid-cols-5 {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+
+  .lg\:grid-cols-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+
   .lg\:flex-row {
     flex-direction: row;
   }
@@ -1922,6 +1991,12 @@ video {
   }
 }
 
+@media (min-width: 1280px) {
+  .xl\:grid-cols-6 {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+  }
+}
+
 @media (min-width: 1536px) {
   .\32xl\:bottom-\[9rem\] {
     bottom: 9rem;