<!doctype html>

<html lang="en">

  <head>

    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width,initial-scale=1" />

    <title>Send a message</title>

    <style>

      body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; margin: 40px auto; max-width: 620px; padding: 0 16px; }

      h1 { font-size: 22px; margin: 0 0 14px; }

      p { color: #444; margin: 0 0 18px; }

      textarea { width: 100%; min-height: 110px; padding: 12px; font-size: 16px; }

      button { margin-top: 12px; padding: 10px 14px; font-size: 16px; }

      .status { margin-top: 14px; white-space: pre-wrap; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; }

    </style>

  </head>


  <body>

    <h1>Send a message</h1>

    <p>Type your message and tap Send.</p>


    <textarea id="msg" placeholder="Type here..."></textarea>

    <br />

    <button id="send">Send</button>


    <div class="status" id="status"></div>


    <script>

      const WEBHOOK_URL = "https://6miabxvun4gkiv3vt3krfaaz2rkxs7wv.ui.nabu.casa/api/webhook/-2qdE2_jUJjSZ9mQ0VNiTHOK0";


      const msgEl = document.getElementById("msg");

      const statusEl = document.getElementById("status");

      const sendBtn = document.getElementById("send");


      function setStatus(text) { statusEl.textContent = text; }


      sendBtn.onclick = async () => {

        const message = msgEl.value.trim();

        if (!message) {

          setStatus("Please type a message first.");

          return;

        }


        sendBtn.disabled = true;

        setStatus("Sending...");


        try {

          const res = await fetch(WEBHOOK_URL, {

            method: "POST",

            cache: "no-store",

            headers: { "Content-Type": "application/json" },

            body: JSON.stringify({ message })

          });


          if (res.ok) {

            setStatus("Sent ✅");

            msgEl.value = "";

            msgEl.focus();

          } else {

            setStatus(`Failed ❌ (${res.status} ${res.statusText})`);

          }

        } catch (err) {

          setStatus("Failed ❌ (network error)");

        } finally {

          sendBtn.disabled = false;

        }

      };

    </script>

  </body>

</html>