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>