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 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>