Feat: Now the URL can be coppied with just a click

assets/custom.js

@@ -0,0 +1,27 @@
+// Inicializar Clipboard.js
+const clipboard = new ClipboardJS(".clipboard");
+
+// Manejar el evento de éxito
+clipboard.on("success", function (e) {
+  const clipboardDiv = e.trigger;
+
+  // Cambiar el fondo y el color del texto
+  clipboardDiv.classList.remove("bg-white", "hover:bg-gray-100");
+  clipboardDiv.classList.add("bg-green-100");
+
+  // Mostrar mensaje
+  const feedback = document.getElementById("feedback");
+  feedback.classList.remove("hidden");
+
+  // Restaurar el color después de 2 segundos
+  setTimeout(() => {
+    feedback.classList.add("hidden");
+    clipboardDiv.classList.remove("bg-green-100");
+    clipboardDiv.classList.add("bg-white", "hover:bg-gray-100");
+  }, 2000);
+});
+
+// Manejar errores
+clipboard.on("error", function (e) {
+  console.error("Failed to copy:", e);
+});

internal/web/templates/partials/header.html

@@ -13,6 +13,7 @@
     <link rel="manifest" href="/static/favicon/site.webmanifest">
     <script src="/static/tailwind.js"></script>
     <script src="/static/echarts.min.js"></script>
+    <script src="/static/clipboard.min.js"></script>
     <link href="/static/animate.min.css" rel="stylesheet">
 
 </head>

internal/web/templates/result.html

@@ -1,9 +1,29 @@
 {{ template "header.html" . }}
 
-    <h1 class="text-xl text-center text-blue-400 cursor-pointer hover:text-blue-600 mb-8">
+    <h1 class="text-xl text-center text-blue-400 cursor-pointer
+    hover:text-blue-600 mb-8 hidden">
         <a href="{{.baseURL}}/results/{{.uniqueID}}" id="share-url">{{.baseURL}}/results/{{.uniqueID}}</a>
     </h1>
 
+    <div class="relative">
+        <!-- Contenedor del botón -->
+        <div class="clipboard flex justify-between gap-2 p-2 border border-gray-600 rounded-lg
+        shadow cursor-pointer transition-colors duration-200 hover:bg-gray-100
+        mb-8"
+             data-clipboard-text="{{.baseURL}}/results/{{.uniqueID}}">
+            <span class="text-blue-600 font-medium">{{.baseURL}}/results/{{.uniqueID}}</span>
+            <svg class="clipboard-icon w-6 h-6 ml-auto text-gray-600 transition-colors duration-200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+                <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4.184a3 3 0 0 1 5.632 0H19a2 2 0 0 1-2 2v14a2 2 0 0 1-2 2zM9 4H5v15h14V4h-4v1a1 1 0 1 1-2 0V4H9z"/>
+            </svg>
+        </div>
+        <!-- Mensaje de retroalimentación -->
+        <p id="feedback" class="absolute top-12 left-1/2 -translate-x-1/2
+        text-green-600 text-sm bg-white font-medium hidden p-4">
+            Copied to clipboard!
+        </p>
+    </div>
+    <script src="/static/custom.js"></script>
+
         <h2 class="text-4xl sm:text-3xl font-semibold text-center text-gray-100 mb-6">
             Command Statistics
         </h1>