Untitled

        padding: 10px;
        background-color: #c60505;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 16px;
      }
      button:hover {
        background-color: #a60404;
      }
      #status {
        margin-top: 20px;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <header>
      <h1>Arslaan's Kahoot Bot</h1>
    </header>
    <main>
      <form id="botForm">
        <label for="gamePin">Game PIN:</label>
        <input type="text" id="gamePin" name="gamePin" required />
        <label for="nickname">Nickname:</label>
        <input type="text" id="nickname" name="nickname" required />
        <label for="amount">Number of Bots:</label>
        <input type="number" id="amount" name="amount" required />
        <button type="submit">Start</button>
      </form>
      <div id="status"></div>
    </main>

    <script>
      document.getElementById("botForm").onsubmit = function (event) {
        event.preventDefault();
        const formData = new FormData(this);
        fetch("/start", {
          method: "POST",
          body: formData,
        })
          .then((response) => response.json())
          .then((data) => {
            document.getElementById("status").innerText = data.status;
          })
          .catch((error) => {
            console.error("Error:", error);
          });
      };
    </script>
  </body>
</html>
Editor is loading...