make notif box a resizable textarea with placeholder, for easier use

public/css/classes.css

@@ -59,9 +59,8 @@
     border-radius: 10px;
 }
 
-input,
-select {
-    width: 50%;
+textarea {
+    width: 85%;
     appearance: none;
     outline: none;
     font-family: inherit;
@@ -71,8 +70,4 @@ select {
     -webkit-box-shadow: 0 0 20px #f5a97f;
     -moz-box-shadow: 0 0 20px #f5a97f;
     box-shadow: 0 0 20px #f5a97f;
-}
-
-select {
-    width: unset
 }

public/scripts/limepot.js

@@ -22,4 +22,16 @@ let chromium = /Chrome|Chromium|OPR|Opera|Edge|UC|QQ|Brave/.test(
   let disclaimer = `<div class="web-disclaimer">`;
   if (chromium)
     window.location.replace("/nochrome");
+}
+
+// Resizable textarea
+const tx = document.getElementsByTagName("textarea");
+for (let i = 0; i < tx.length; i++) {
+  tx[i].setAttribute("style", "height:" + (tx[i].scrollHeight) + "px;overflow-y:hidden;");
+  tx[i].addEventListener("input", OnInput, false);
+}
+
+function OnInput() {
+  this.style.height = 'auto';
+  this.style.height = (this.scrollHeight) + "px";
 }

src/pages/index.astro

@@ -66,8 +66,8 @@ import Layout from "../layouts/Layout.astro";
       <p><a href="https://www.youtube.com/channel/UCk_yKIpDnMv_DvuDb9RGfcA">==> Youtube</a></p>
       <br>
       <div class="ntfy-box">
-        <p>send me a notification! put word and press send</p>
-        <input id="ntfy-input"> <a class="ntfy-send nob4" href="javascript:sendNotification()">send</a>
+        <p>send me a notification! type words and press send</p>
+        <textarea id="ntfy-input" placeholder="Hi Nelle~!"></textarea><a class="ntfy-send nob4" href="javascript:sendNotification()">send</a>
       </div>
       <!-- 
       <p></p>