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

Show install prompt

Browse Source
This commit is contained in:
Reimar 2025-03-15 15:34:38 +01:00
parent 9c73659cea
commit cdebf5beb7
Signed by: Reimar
GPG Key ID: 93549FA07F0AE268
2 changed files with 51 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
index.html
View File

@ -34,6 +34,23 @@
else
alert("Couldn't copy link to clipboard");
}
var promptEvent;
onbeforeinstallprompt = function(event) {
document.getElementById("add-to-home-screen").style.display = "flex";
promptEvent = event;
event.preventDefault();
}
function install() {
promptEvent.prompt()
.then(response => {
if (response.outcome === "accepted") {
document.getElementById("add-to-home-screen").style.display = "none";
}
});
}
</script>
</head>
<body>
@ -44,7 +61,7 @@
<summary>Write a message</summary>
<textarea id="message" placeholder="(Optional) Message to send"></textarea>
</details>
<button id="send" onclick="submit()">Submit</button>
<button id="send" class="primary" 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);">
@ -53,6 +70,10 @@
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>
<p id="desc">
By default, WhatsApp does not allow you to message
users who are not in your contacts list. This website

42
style.css
View File

@ -10,15 +10,15 @@ h1 {
margin-bottom: 0;
opacity: 0.7;
}
p {
p, summary {
opacity: 0.5;
font-size: 0.85rem;
max-width: 400px;
}
p {
margin: 1rem auto;
max-width: 400px;
}
summary {
opacity: 0.5;
font-size: 0.85rem;
margin: 0.5rem auto;
cursor: pointer;
user-select: none;
@ -27,10 +27,6 @@ summary:focus {
outline: none;
opacity: 0.7;
}
#desc {
margin-top: 2rem;
font-size: 0.75rem;
}
.icon {
width: 1.25rem;
height: 1.25rem;
@ -67,7 +63,6 @@ input:focus, textarea:focus {
button {
background-color: inherit;
border: none;
margin: 0.25rem 0;
opacity: 0.5;
cursor: pointer;
transition: all 150ms;
@ -77,19 +72,40 @@ button:hover, button:focus {
outline: none;
}
#send {
button.primary {
background-color: #1DAA61;
color: white;
border: none;
padding: 0.5rem 2rem;
margin-top: 1rem;
border-radius: 4px;
opacity: 1;
}
#send:active {
button.primary:active {
background-color: #18864D;
}
#send:focus {
button.primary:focus {
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
}
#send {
margin-top: 1rem;
margin: 0.25rem 0;
}
#add-to-home-screen {
background-color: white;
padding: 0.5rem 1rem;
margin: 2rem;
border-radius: 4px;
max-width: 400px;
display: none; /* Shown through JS */
justify-content: space-between;
align-items: center;
font-size: 0.85rem;
color: #757575;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
}
#desc {
margin-top: 2rem;
font-size: 0.75rem;
}