(feat/fixed): added copy embeded code snippet button and fixed copy message text spacing

htdocs/assets/_floatingbar.php

@@ -125,7 +125,8 @@
             <botton class="shareitems w-10 h-10 flex justify-center items-center bg-bg_secondary rounded-full cursor-pointer hover:bg-bg_third transition transform duration-500" title="More sharing options" onclick="call_webshare_api()"><i class="fa-solid fa-ellipsis text-accent_primary"></i></botton>
         </div>
         <p class="text-xs my-3 text-accent_three">EMBED THIS PAGE</p>
-        <div class="embedpagecode w-full bg-bg_primary p-4 rounded-lg">
+        <div class="embedpagecode w-full bg-bg_primary p-4 rounded-lg relative">
+            <button class="copyembedcode absolute top-3 right-3 px-3 py-2 bg-bg_secondary rounded-lg" title="Copy code snippet"><i class="fa-regular fa-copy"></i></button>
             <pre class="text-accent_four text-xs whitespace-pre-wrap"><code id="embedcodetag">&lt;iframe&#13;&#10;src="https://neosubhamoy.dev"&#13;&#10;height="200"&#13;&#10;width="300"&#13;&#10;title="test iframe"&gt;&lt;/iframe&gt;</code></pre>
         </div>
     </div>

htdocs/assets/js/floatingbar-config.js

@@ -366,9 +366,9 @@ function call_webshare_api() {
 function copy_to_clipboard(textContent, copyContext) {
     if(navigator.clipboard) {
         navigator.clipboard.writeText(textContent).then(function() {
-            window.alert(copyContext + "Copied to Clipboard");
+            window.alert(copyContext + " Copied to Clipboard");
         }, function() {
-            window.alert("Failed to Copy the" + copyContext + "!");
+            window.alert("Failed to Copy the " + copyContext + "!");
         })
     }
     else {

htdocs/assets/style.css

@@ -547,6 +547,10 @@ video {
   bottom: -10rem;
 }
 
+.bottom-\[20vh\] {
+  bottom: 20vh;
+}
+
 .bottom-\[5\.5rem\] {
   bottom: 5.5rem;
 }
@@ -599,10 +603,6 @@ video {
   top: 20.5rem;
 }
 
-.top-\[20vh\] {
-  top: 20vh;
-}
-
 .top-\[30vh\] {
   top: 30vh;
 }
@@ -611,12 +611,16 @@ video {
   top: 4.7rem;
 }
 
-.bottom-\[10vh\] {
+.right-3 {
-  bottom: 10vh;
+  right: 0.75rem;
 }
 
-.bottom-\[20vh\] {
+.top-3 {
-  bottom: 20vh;
+  top: 0.75rem;
+}
+
+.right-4 {
+  right: 1rem;
 }
 
 .z-10 {
@@ -862,10 +866,6 @@ video {
   margin-top: 30vh;
 }
 
-.inline-block {
-  display: inline-block;
-}
-
 .flex {
   display: flex;
 }
@@ -946,18 +946,6 @@ video {
   height: 100vh;
 }
 
-.h-\[80\%\] {
-  height: 80%;
-}
-
-.h-\[90\%\] {
-  height: 90%;
-}
-
-.h-\[70\%\] {
-  height: 70%;
-}
-
 .w-0 {
   width: 0px;
 }
@@ -1143,10 +1131,6 @@ video {
   white-space: pre-wrap;
 }
 
-.break-words {
-  overflow-wrap: break-word;
-}
-
 .rounded {
   border-radius: 0.25rem;
 }
@@ -1269,6 +1253,11 @@ video {
   background-color: rgb(30 41 59 / var(--tw-bg-opacity));
 }
 
+.bg-bg_third {
+  --tw-bg-opacity: 1;
+  background-color: rgb(38 51 74 / var(--tw-bg-opacity));
+}
+
 .bg-gradient-to-r {
   background-image: linear-gradient(to right, var(--tw-gradient-stops));
 }