Add share buttons
This commit is contained in:
parent
cdebf5beb7
commit
7a384b0885
GPG Key ID:
93549FA07F0AE268
49
index.html
49
index.html
@ -5,6 +5,7 @@
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="theme-color" content="#3C503A" />
|
||||
<meta name="description" content="Send WhatsApp messages directly to a phone number without adding as a contact first" />
|
||||
<link rel="manifest" href="webmanifest.json" />
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
<script>
|
||||
@ -51,11 +52,19 @@
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function share() {
|
||||
navigator.share({
|
||||
text: "Send WhatsApp messages directly to any phone number without adding them as a contact first",
|
||||
url: location.href,
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Start a new WhatsApp chat</h1>
|
||||
<p>Type a phone number, including country code</p>
|
||||
|
||||
<input id="phone" type="tel" placeholder="+1 (123) 456-7890" />
|
||||
<details id="message-wrapper">
|
||||
<summary>Write a message</summary>
|
||||
@ -63,23 +72,53 @@
|
||||
</details>
|
||||
<button id="send" class="primary" onclick="submit()">Submit</button>
|
||||
<br>
|
||||
<button onclick="copyLink()">
|
||||
|
||||
<button id="copy-link" 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>
|
||||
<div id="add-to-home-screen">
|
||||
<span>Add to your home screen</span>
|
||||
<button class="primary" onclick="install()">Add</button>
|
||||
</div>
|
||||
|
||||
<center>
|
||||
<div id="add-to-home-screen">
|
||||
<span>Add to your home screen</span>
|
||||
<button class="primary" onclick="install()">Add</button>
|
||||
</div>
|
||||
</center>
|
||||
|
||||
<button id="share" onclick="share()">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16">
|
||||
<path d="M11 2.5a2.5 2.5 0 1 1 .603 1.628l-6.718 3.12a2.5 2.5 0 0 1 0 1.504l6.718 3.12a2.5 2.5 0 1 1-.488.876l-6.718-3.12a2.5 2.5 0 1 1 0-3.256l6.718-3.12A2.5 2.5 0 0 1 11 2.5"/>
|
||||
</svg>
|
||||
Share this site
|
||||
</button>
|
||||
|
||||
<p id="or-share-using">or share using</p>
|
||||
|
||||
<a href="whatsapp://send?text=Send+WhatsApp+messages+directly+to+any+phone+number+without+adding+them+as+a+contact+first%3A+https%3A%2F%2Freim.ar%2Ftools%2Fwhatsapp-send%2F"><button>
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7 .9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z"/></svg>
|
||||
WhatsApp
|
||||
</button></a>
|
||||
|
||||
<a href="tg://msg?text=Send+WhatsApp+messages+directly+to+any+phone+number+without+adding+them+as+a+contact+first%3A+https%3A%2F%2Freim.ar%2Ftools%2Fwhatsapp-send%2F"><button>
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M248 8C111 8 0 119 0 256S111 504 248 504 496 393 496 256 385 8 248 8zM363 176.7c-3.7 39.2-19.9 134.4-28.1 178.3-3.5 18.6-10.3 24.8-16.9 25.4-14.4 1.3-25.3-9.5-39.3-18.7-21.8-14.3-34.2-23.2-55.3-37.2-24.5-16.1-8.6-25 5.3-39.5 3.7-3.8 67.1-61.5 68.3-66.7 .2-.7 .3-3.1-1.2-4.4s-3.6-.8-5.1-.5q-3.3 .7-104.6 69.1-14.8 10.2-26.9 9.9c-8.9-.2-25.9-5-38.6-9.1-15.5-5-27.9-7.7-26.8-16.3q.8-6.7 18.5-13.7 108.4-47.2 144.6-62.3c68.9-28.6 83.2-33.6 92.5-33.8 2.1 0 6.6 .5 9.6 2.9a10.5 10.5 0 0 1 3.5 6.7A43.8 43.8 0 0 1 363 176.7z"/></svg>
|
||||
Telegram
|
||||
</button></a>
|
||||
|
||||
<a href="https://x.com/intent/post?text=Send+WhatsApp+messages+directly+to+any+phone+number+without+adding+them+as+a+contact+first%3A+https%3A%2F%2Freim.ar%2Ftools%2Fwhatsapp-send%2F"><button>
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"/></svg>
|
||||
Twitter
|
||||
</button></a>
|
||||
|
||||
<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 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>
|
||||
|
||||
22
style.css
22
style.css
@ -7,10 +7,9 @@ body {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
h1 {
|
||||
margin-bottom: 0;
|
||||
opacity: 0.7;
|
||||
}
|
||||
p, summary {
|
||||
p, summary, i {
|
||||
opacity: 0.5;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
@ -32,6 +31,7 @@ summary:focus {
|
||||
height: 1.25rem;
|
||||
position: relative;
|
||||
top: 0.25rem;
|
||||
padding-right: 0.15rem;
|
||||
}
|
||||
|
||||
input, textarea {
|
||||
@ -88,13 +88,17 @@ button.primary:focus {
|
||||
}
|
||||
|
||||
#send {
|
||||
margin-top: 1rem;
|
||||
margin: 0.25rem 0;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
#copy-link {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
#add-to-home-screen {
|
||||
background-color: white;
|
||||
padding: 0.5rem 1rem;
|
||||
margin: 2rem;
|
||||
margin: auto 2rem;
|
||||
margin-top: 2rem;
|
||||
border-radius: 4px;
|
||||
max-width: 400px;
|
||||
display: none; /* Shown through JS */
|
||||
@ -108,4 +112,14 @@ button.primary:focus {
|
||||
margin-top: 2rem;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
#share {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
#or-share-using {
|
||||
font-size: 0.75rem;
|
||||
font-style: italic;
|
||||
margin: 0.5rem auto;
|
||||
margin-top: 0.75rem;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user