<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Chatbox</title>
  <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
  <button id="createRoom" onclick="createRoom(prompt('New Room ID:'))">Create a New Room</button>
  <button id="joinRoom" onclick="window.location.reload()">Join an Existing Room</button>
  <div class="chat-container">
    <div class="chat-messages" id="messages"></div>
    <div class="chat-input">
      <input type="text" id="nameInputBox" placeholder="Your Name">
      <input type="text" id="messageInputBox" placeholder="Type a message...">
      <button onclick="postMessage(myRoomId)">Send</button>
    </div>
  </div>

  <script src="{{ url_for('static', filename='script.js') }}"></script>
</body>
</html>