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 else
alert("Couldn't copy link to clipboard"); 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> </script>
</head> </head>
<body> <body>
@ -44,7 +61,7 @@
<summary>Write a message</summary> <summary>Write a message</summary>
<textarea id="message" placeholder="(Optional) Message to send"></textarea> <textarea id="message" placeholder="(Optional) Message to send"></textarea>
</details> </details>
<button id="send" onclick="submit()">Submit</button> <button id="send" class="primary" onclick="submit()">Submit</button>
<br> <br>
<button onclick="copyLink()"> <button onclick="copyLink()">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16" style="transform: rotate(45deg);"> <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 Copy WhatsApp link
</button> </button>
<br> <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"> <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

42
style.css
View File

@ -10,15 +10,15 @@ h1 {
margin-bottom: 0; margin-bottom: 0;
opacity: 0.7; opacity: 0.7;
} }
p { p, summary {
opacity: 0.5; opacity: 0.5;
font-size: 0.85rem; font-size: 0.85rem;
max-width: 400px; }
p {
margin: 1rem auto; margin: 1rem auto;
max-width: 400px;
} }
summary { summary {
opacity: 0.5;
font-size: 0.85rem;
margin: 0.5rem auto; margin: 0.5rem auto;
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
@ -27,10 +27,6 @@ summary:focus {
outline: none; outline: none;
opacity: 0.7; opacity: 0.7;
} }
#desc {
margin-top: 2rem;
font-size: 0.75rem;
}
.icon { .icon {
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
@ -67,7 +63,6 @@ input:focus, textarea:focus {
button { button {
background-color: inherit; background-color: inherit;
border: none; border: none;
margin: 0.25rem 0;
opacity: 0.5; opacity: 0.5;
cursor: pointer; cursor: pointer;
transition: all 150ms; transition: all 150ms;
@ -77,19 +72,40 @@ button:hover, button:focus {
outline: none; outline: none;
} }
#send { button.primary {
background-color: #1DAA61; background-color: #1DAA61;
color: white; color: white;
border: none; border: none;
padding: 0.5rem 2rem; padding: 0.5rem 2rem;
margin-top: 1rem;
border-radius: 4px; border-radius: 4px;
opacity: 1; opacity: 1;
} }
#send:active { button.primary:active {
background-color: #18864D; background-color: #18864D;
} }
#send:focus { button.primary:focus {
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); 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;
}