From 2ac81761e2066d9d17fdd7f7be33bb18a0477927 Mon Sep 17 00:00:00 2001
From: Reimar <mail@reim.ar>
Date: Sat, 15 Mar 2025 13:54:16 +0100
Subject: [PATCH] Allow copying link to clipboard

---
 index.html | 70 +++++++++++++++++++++++++++++++++++++++++++++++-------
 1 file changed, 62 insertions(+), 8 deletions(-)

diff --git a/index.html b/index.html
index 953b3ad..87d8213 100644
--- a/index.html
+++ b/index.html
@@ -5,13 +5,31 @@
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<script>
-			function submit() {
+			function getLink() {
 				var phone = document.getElementById("phone").value.replace(/\D/g, "");
 				var message = document.getElementById("message-wrapper").open
 					? document.getElementById("message").value
 					: "";
 
-				location.href = "whatsapp://send/?phone=" + phone + "&text=" + message + "&type=phone_number";
+				return "whatsapp://send/?phone=" + phone + "&text=" + message + "&type=phone_number";
+			}
+
+			function submit() {
+				location.href = getLink();
+			}
+
+			function copyLink() {
+				var input = document.getElementById("copy-input");
+				input.value = getLink();
+				input.select();
+
+				var result = document.execCommand("copy");
+				input.blur();
+
+				if (result)
+					alert("Copied link to clipboard");
+				else
+					alert("Couldn't copy link to clipboard");
 			}
 		</script>
 		<style>
@@ -35,11 +53,22 @@
 				font-size: 0.85rem;
 				margin: 0.5rem auto;
 				cursor: pointer;
+				user-select: none;
+			}
+			summary:focus {
+				outline: none;
+				opacity: 0.7;
 			}
 			#desc {
 				margin-top: 2rem;
 				font-size: 0.75rem;
 			}
+			.icon {
+				width: 1.25rem;
+				height: 1.25rem;
+				position: relative;
+				top: 0.25rem;
+			}
 
 			input, textarea {
 				padding: 0.5rem 1rem;
@@ -59,21 +88,37 @@
 				outline: none;
 				box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
 			}
+			#copy-input {
+				opacity: 0; /* Used for copying to clipboard */
+				pointer-events: none;
+			}
 
 			button {
+				background-color: inherit;
+				border: none;
+				margin: 0.25rem 0;
+				opacity: 0.5;
+				cursor: pointer;
+			}
+			button:hover, button:focus {
+				opacity: 1;
+				outline: none;
+			}
+
+			#send {
 				background-color: #1DAA61;
 				color: white;
 				border: none;
 				padding: 0.5rem 2rem;
-				margin: 1rem 0;
+				margin-top: 1rem;
 				border-radius: 4px;
 				transition: all 150ms;
+				opacity: 1;
 			}
-			button:active {
+			#send:active {
 				background-color: #18864D;
 			}
-			button:focus {
-				outline: none;
+			#send:focus {
 				box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
 			}
 		</style>
@@ -88,11 +133,20 @@
 		</details>
 		<button id="send" onclick="submit()">Submit</button>
 		<br>
+		<button onclick="copyLink()">
+			<svg class="icon" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16" style="transform: rotate(45deg);">
+				<path d="M4.5 3a2.5 2.5 0 0 1 5 0v9a1.5 1.5 0 0 1-3 0V5a.5.5 0 0 1 1 0v7a.5.5 0 0 0 1 0V3a1.5 1.5 0 1 0-3 0v9a2.5 2.5 0 0 0 5 0V5a.5.5 0 0 1 1 0v7a3.5 3.5 0 1 1-7 0z"/>
+			</svg>
+			Copy WhatsApp link
+		</button>
+		<br>
 		<p id="desc">
 			By default, WhatsApp does not allow you to message
 			users who are not in your contacts list. This website
-			allows you to message any phone number through WhatsApp.
-		</small>
+			allows you to directly message any phone number through
+			WhatsApp, without having to add that number to your contacts.
+		</p>
+		<input id="copy-input" type="text" />
 	</body>
 </html>