added toast on copy button click

src/layouts/partials/clipboard-copy.html

@@ -4,7 +4,7 @@
 
     <!-- The button used to copy the text -->
 
-    <button class="clipboard-copy" id="copy-icon" onclick="myFunction()" data-bs-toggle="modal" data-bs-target="#exampleModal">copy</button>
+    <button type="button" class="clipboard-copy" id="liveToastBtn" onclick="myFunction()">copy</button>
   </div>
 <hr>
 

src/layouts/partials/footer.html

@@ -189,3 +189,17 @@ integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+
     .catch(err => { throw err });
 
   </script>
+
+  <script>
+
+    const toastTrigger = document.getElementById('liveToastBtn')
+    const toastLiveExample = document.getElementById('liveToast')
+    if (toastTrigger) {
+      toastTrigger.addEventListener('click', () => {
+        const toast = new bootstrap.Toast(toastLiveExample)
+
+        toast.show()
+      })
+    }
+
+  </script>

src/layouts/partials/head.html

@@ -101,5 +101,7 @@
 
     {{- partial "floating-join-btn.html" . -}}
 
+    {{- partial "toast.html" -}}
+
   </head>
 </head>

src/layouts/partials/toast.html

@@ -0,0 +1,40 @@
+<div class="toast-container position-fixed bottom-0 end-0 p-3">
+  <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
+    <div class="toast-header">
+      <i class="icon-tea-logo-iconasset-1 me-3 teal"></i>
+      <strong class="me-auto teal">Copied!</strong>
+      <small id="time"></small>
+      <button type="button" class="toast-close" data-bs-dismiss="toast" aria-label="Close">X</button>
+    </div>
+    <div class="toast-body">
+      Copied to clipboard. Now paste that command into your terminal.
+    </div>
+  </div>
+</div>
+
+<style>
+
+  #liveToast{
+    background-color:#1a1a1a !important;
+    color: white;
+    border-radius: 0px;
+    font-family: "sono";
+    border: 2px solid #949494;
+  }
+
+  .toast-header{
+    background-color:#1a1a1a;
+    color: white !important;
+  }
+
+  .toast-container{
+    z-index: 3;
+  }
+
+  .toast-close{
+    background-color: #1a1a1a;
+    color: white;
+    border: none;
+  }
+
+</style>