Add ntfy section

src/routes/+page.svelte

@@ -334,6 +334,41 @@
             <img src="/assets/buttons/wii.png" alt="Wii" title="Wii" />
         </li>
     </ul>
+
+    <h2 id="Notify">Notify</h2>
+
+    <p>
+        Send me a push notification. This will be a silent notification on my
+        phone with no popup, vibration, or sound.
+    </p>
+
+    <input
+        type="text"
+        id="ntfy-message"
+        placeholder="Message"
+        minlength="15"
+        maxlength="128"
+    />
+    <button
+        on:click={() => {
+            const message = document.getElementById("ntfy-message").value;
+            if (message.length < 15)
+                return alert(
+                    `Message must be 15 to 128 chars. Current length is ${message.length}`,
+                );
+            fetch("https://ntfy.meow.company/pancakes", {
+                method: "POST",
+                body: message,
+                headers: {
+                    Title: "pancakes.gay",
+                    Priority: "min",
+                    Tags: "black_cat",
+                },
+            });
+        }}
+    >
+        Send
+    </button>
 </main>
 
 <style>

src/routes/style.css

@@ -396,6 +396,32 @@ mark {
     color: var(--background);
 }
 
+button,
+input[type="submit"] {
+    padding: 0.5em 1em;
+
+    background-color: var(--accent-2);
+    color: var(--background);
+    border: none;
+    border-radius: var(--radius);
+    font-weight: bold;
+    text-transform: uppercase;
+}
+
+input[type="text"] {
+    padding: 0.5em;
+
+    outline: none;
+    background-color: var(--background-2);
+    color: var(--foreground);
+    border: 1px solid var(--foreground);
+    border-radius: var(--radius);
+}
+
+input[type="text"]:focus {
+    border-color: var(--accent);
+}
+
 td,
 th {
     padding: 0.25em;