Allow sending a message

index.html

@@ -7,7 +7,11 @@
 		<script>
 			function submit() {
 				var phone = document.getElementById("phone").value.replace(/\D/g, "");
-				location.href = "whatsapp://send/?phone=" + phone + "&type=phone_number";
+				var message = document.getElementById("message-wrapper").open
+					? document.getElementById("message").value
+					: "";
+
+				location.href = "whatsapp://send/?phone=" + phone + "&text=" + message + "&type=phone_number";
 			}
 		</script>
 		<style>
@@ -26,21 +30,36 @@
 				max-width: 400px;
 				margin: 1rem auto;
 			}
+			summary {
+				opacity: 0.5;
+				font-size: 0.85rem;
+				margin: 0.5rem auto;
+				cursor: pointer;
+			}
 			#desc {
 				margin-top: 2rem;
 				font-size: 0.75rem;
 			}
-			input {
+
+			input, textarea {
 				padding: 0.5rem 1rem;
 				border-radius: 4px;
 				border: 1px solid rgba(0, 0, 0, 0.5);
 				transition: all 150ms;
 				font-size: 1rem;
 			}
-			input:focus {
+			textarea {
+				resize: vertical;
+				font-family: sans-serif;
+				font-size: 0.75rem;
+				width: 100%;
+				max-width: 400px;
+			}
+			input:focus, textarea:focus {
 				outline: none;
 				box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
 			}
+
 			button {
 				background-color: #1DAA61;
 				color: white;
@@ -63,7 +82,10 @@
 		<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" />
-		<br>
+		<details id="message-wrapper">
+			<summary>Write a message</summary>
+			<textarea id="message" placeholder="(Optional) Message to send"></textarea>
+		</details>
 		<button id="send" onclick="submit()">Submit</button>
 		<br>
 		<p id="desc">