50 lines
1.4 KiB
HTML
50 lines
1.4 KiB
HTML
|
<!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>
|