<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Chat Room</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body class="bg-gray-100 min-h-screen">
    <div class="container mx-auto p-4 max-w-2xl">
      <h1 class="text-3xl font-bold text-center mb-6">Chat Room</h1>

      <div class="bg-white rounded-lg shadow-md p-6">
        <div
          id="chat-messages"
          class="h-96 overflow-y-auto mb-4 border rounded p-4"
        >
          <ul id="message-list" class="space-y-2">
            <!-- Messages will be populated here -->
          </ul>
        </div>

        <div class="flex gap-2 mb-4">
          <input
            type="text"
            id="message-input"
            placeholder="Type your message..."
            class="flex-1 px-3 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
          />
          <button
            id="send-btn"
            class="bg-blue-500 text-white px-6 py-2 rounded hover:bg-blue-600"
          >
            Send
          </button>
        </div>

        <button
          id="save-btn"
          class="bg-green-500 text-white px-6 py-2 rounded hover:bg-green-600"
        >
          Save Chat
        </button>
      </div>
    </div>

    <script src="/chat.js"></script>
  </body>
</html>
