Add a 'menu bar' at the top of the selfhosted webclient.

chatserver/templates/index.html

@@ -6,31 +6,143 @@
     <title>Web Chat Client</title>
     <script src="https://cdn.socket.io/4.5.0/socket.io.min.js"></script>
     <style>
-        body { font-family: Arial, sans-serif; margin: 0; padding: 0; display: flex; flex-direction: column; height: 100vh; }
+        /* Light Mode Styles */
-        #chat { flex: 1; overflow-y: auto; padding: 10px; border-bottom: 1px solid #ccc; }
+        body.light-mode {
-        #messageInput { display: flex; padding: 10px; }
+            font-family: Arial, sans-serif;
-        #messageInput input { flex: 1; padding: 10px; font-size: 16px; }
+            margin: 0;
-        #messageInput button { padding: 10px; font-size: 16px; }
+            padding: 0;
+            display: flex;
+            flex-direction: column;
+            height: 100vh;
+            background-color: white;
+            color: black;
+        }
+        body.light-mode #topBar {
+            background-color: #007bff;
+            color: white;
+        }
+        body.light-mode #topBar button {
+            background-color: white;
+            color: #007bff;
+        }
+        body.light-mode #topBar button:hover {
+            background-color: #e6e6e6;
+        }
+        body.light-mode #chat {
+            background-color: #f9f9f9;
+        }
+        body.light-mode #messageInput button {
+            background-color: #007bff;
+            color: white;
+        }
+        body.light-mode #messageInput button:hover {
+            background-color: #0056b3;
+        }
+
+        /* Dark Mode Styles */
+        body.dark-mode {
+            font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 0;
+            display: flex;
+            flex-direction: column;
+            height: 100vh;
+            background-color: #121212;
+            color: white;
+        }
+        body.dark-mode #topBar {
+            background-color: #1e1e1e;
+            color: white;
+        }
+        body.dark-mode #topBar button {
+            background-color: #333;
+            color: white;
+        }
+        body.dark-mode #topBar button:hover {
+            background-color: #555;
+        }
+        body.dark-mode #chat {
+            background-color: #1e1e1e;
+        }
+        body.dark-mode #messageInput button {
+            background-color: #333;
+            color: white;
+        }
+        body.dark-mode #messageInput button:hover {
+            background-color: #555;
+        }
+
+        /* Shared Styles */
+        #topBar {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 10px;
+        }
+        #topBar span {
+            font-size: 16px;
+        }
+        #chat {
+            flex: 1;
+            overflow-y: auto;
+            padding: 10px;
+            border-bottom: 1px solid #ccc;
+        }
+        #messageInput {
+            display: flex;
+            padding: 10px;
+        }
+        #messageInput input {
+            flex: 1;
+            padding: 10px;
+            font-size: 16px;
+        }
+        #messageInput button {
+            padding: 10px;
+            font-size: 16px;
+            border: none;
+            cursor: pointer;
+            border-radius: 5px;
+        }
     </style>
 </head>
-<body>
+<body class="light-mode">
+    <!-- Top Bar -->
+    <div id="topBar">
+        <span id="userInfo">Username: <strong id="currentUsername"></strong> | Chat Room: <strong id="currentChatRoom"></strong></span>
+        <div>
+            <button onclick="changeUsername()">Change Username</button>
+            <button onclick="changeChatRoom()">Change Chat Room</button>
+            <button onclick="toggleTheme()">Toggle Theme</button>
+        </div>
+    </div>
+
+    <!-- Chat Messages -->
     <div id="chat"></div>
+
+    <!-- Message Input -->
     <div id="messageInput">
-        <input type="text" id="message" placeholder="Type a message...">
+        <input type="text" id="message" placeholder="Type a message..." onkeydown="handleKeyPress(event)">
         <button onclick="sendMessage()">Send</button>
     </div>
 
     <script>
-        // Ask the user for the server address
+        // Ask the user for the server URL
         const serverUrl = prompt("Enter the WebSocket server URL (e.g., http://localhost:5000):") || 'http://localhost:5000';
         const socket = io(serverUrl); // Connect to the WebSocket server
 
         const chatDiv = document.getElementById('chat');
         const messageInput = document.getElementById('message');
+        const currentUsernameElement = document.getElementById('currentUsername');
+        const currentChatRoomElement = document.getElementById('currentChatRoom');
 
         // Ask the user for their username and chat room
-        let username = prompt("Enter your username:");
+        let username = prompt("Enter your username:") || "Anonymous";
-        let chatRoom = prompt("Enter chat room (default: 'default')") || 'default';
+        let chatRoom = prompt("Enter chat room (default: 'default')") || "default";
+
+        // Update the top bar with the current username and chat room
+        currentUsernameElement.textContent = username;
+        currentChatRoomElement.textContent = chatRoom;
 
         // Join the chat room
         console.log('Joining chat room:', { username: username, chat_room: chatRoom });
@@ -62,6 +174,49 @@
                 messageInput.value = ''; // Clear the input field
             }
         }
+
+        // Handle the "Enter" key to send a message
+        function handleKeyPress(event) {
+            if (event.key === "Enter") {
+                sendMessage();
+            }
+        }
+
+        // Change the username
+        function changeUsername() {
+            const newUsername = prompt("Enter your new username:");
+            if (newUsername && newUsername.trim() !== "") {
+                username = newUsername.trim();
+                currentUsernameElement.textContent = username;
+                console.log(`Username changed to: ${username}`);
+                socket.emit('send_message', { username: 'Server', chat_room: chatRoom, message: `${username} has changed their username.` });
+            }
+        }
+
+        // Change the chat room
+        function changeChatRoom() {
+            const newChatRoom = prompt("Enter the new chat room:");
+            if (newChatRoom && newChatRoom.trim() !== "") {
+                socket.emit('leave', { username: username, chat_room: chatRoom });
+                chatRoom = newChatRoom.trim();
+                currentChatRoomElement.textContent = chatRoom;
+                console.log(`Switched to chat room: ${chatRoom}`);
+                socket.emit('join', { username: username, chat_room: chatRoom });
+                chatDiv.innerHTML = ""; // Clear the chat history
+            }
+        }
+
+        // Toggle between light mode and dark mode
+        function toggleTheme() {
+            const body = document.body;
+            if (body.classList.contains('light-mode')) {
+                body.classList.remove('light-mode');
+                body.classList.add('dark-mode');
+            } else {
+                body.classList.remove('dark-mode');
+                body.classList.add('light-mode');
+            }
+        }
     </script>
 </body>
 </html>