Reimar/whatsapp-send
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Allow copying link to clipboard

Browse Source
This commit is contained in:
Reimar 2025-03-15 13:54:16 +01:00
parent 436a9b0015
commit 2ac81761e2
Signed by: Reimar
GPG Key ID: 93549FA07F0AE268
1 changed files with 62 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
index.html
View File

@ -5,13 +5,31 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script> <script>
function submit() { function getLink() {
var phone = document.getElementById("phone").value.replace(/\D/g, ""); var phone = document.getElementById("phone").value.replace(/\D/g, "");
var message = document.getElementById("message-wrapper").open var message = document.getElementById("message-wrapper").open
? document.getElementById("message").value ? 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> </script>
<style> <style>
@ -35,11 +53,22 @@
font-size: 0.85rem; font-size: 0.85rem;
margin: 0.5rem auto; margin: 0.5rem auto;
cursor: pointer; cursor: pointer;
user-select: none;
}
summary:focus {
outline: none;
opacity: 0.7;
} }
#desc { #desc {
margin-top: 2rem; margin-top: 2rem;
font-size: 0.75rem; font-size: 0.75rem;
} }
.icon {
width: 1.25rem;
height: 1.25rem;
position: relative;
top: 0.25rem;
}
input, textarea { input, textarea {
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
@ -59,21 +88,37 @@
outline: none; outline: none;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
} }
#copy-input {
opacity: 0; /* Used for copying to clipboard */
pointer-events: none;
}
button { 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; background-color: #1DAA61;
color: white; color: white;
border: none; border: none;
padding: 0.5rem 2rem; padding: 0.5rem 2rem;
margin: 1rem 0; margin-top: 1rem;
border-radius: 4px; border-radius: 4px;
transition: all 150ms; transition: all 150ms;
opacity: 1;
} }
button:active { #send:active {
background-color: #18864D; background-color: #18864D;
} }
button:focus { #send:focus {
outline: none;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
} }
</style> </style>
@ -88,11 +133,20 @@
</details> </details>
<button id="send" onclick="submit()">Submit</button> <button id="send" onclick="submit()">Submit</button>
<br> <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"> <p id="desc">
By default, WhatsApp does not allow you to message By default, WhatsApp does not allow you to message
users who are not in your contacts list. This website users who are not in your contacts list. This website
allows you to message any phone number through WhatsApp. allows you to directly message any phone number through
</small> WhatsApp, without having to add that number to your contacts.
</p>
<input id="copy-input" type="text" />
</body> </body>
</html> </html>