Implement adding to home screen

2025-03-15 14:32:15 +01:00 · 2025-03-15 14:32:15 +01:00 · fbb617ff4e
commit fbb617ff4e
parent 2ac81761e2
3 changed files with 34 additions and 1 deletions
--- a/icon.svg
+++ b/icon.svg
@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+	<rect x="0" y="0" width="100" height="100" fill="#EFE9DD" />
+
+	<ellipse cx="50" cy="50" rx="25" ry="20" fill="#1DAA61" />
+	<polygon points="27,73 30,50 70,50" fill="#1DAA61" />
+
+	<line x1="40" y1="50" x2="60" y2="50" stroke-width="3" stroke="#FEFEFE" />
+	<line x1="50" y1="40" x2="50" y2="60" stroke-width="3" stroke="#FEFEFE" />
+</svg>
+
--- a/index.html
+++ b/index.html
@ -1,9 +1,10 @@
 <!DOCTYPE html>
 <html lang="en">
 	<head>
-		<title>Start a new WhatsApp Chat</title>
+		<title>New WhatsApp Chat</title>
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<link rel="manifest" href="webmanifest.json" />
 		<script>
 			function getLink() {
 				var phone = document.getElementById("phone").value.replace(/\D/g, "");
@ -38,6 +39,9 @@
 				text-align: center;
 				font-family: sans-serif;
 			}
+			* {
+				-webkit-tap-highlight-color: transparent;
+			}
 			h1 {
 				margin-bottom: 0;
 				opacity: 0.7;
@ -83,6 +87,7 @@
 				font-size: 0.75rem;
 				width: 100%;
 				max-width: 400px;
+				box-sizing: border-box;
 			}
 			input:focus, textarea:focus {
 				outline: none;
--- a/webmanifest.json
+++ b/webmanifest.json
@ -0,0 +1,17 @@
+{
+	"short_name": "New chat",
+	"name": "New WhatsApp chat",
+	"icons": [
+		{
+			"src": "icon.svg",
+			"sizes": "any",
+			"type": "image/svg+xml",
+			"purpose": "maskable"
+		}
+	],
+	"start_url": ".",
+	"display": "standalone",
+	"theme_color": "#1DAA61",
+	"background_color": "#EFE9DD"
+}
+