国际化

web/index.html

@@ -8,22 +8,21 @@
 <body>
   <!-- 登录页面 -->
   <div class="login-container" id="login-container">
-    <h1>Sign in to Chatroom</h1>
-    <p class="subtips">请输入用户名、房间名，房间密码</p>
+    <h1>Enter a Node</h1>
     <form id="login-form">
       <div class="input-group">
         <label for="username">Username</label>
         <input id="username" type="text" autocomplete="username" required="">
       </div>
       <div class="input-group">
-        <label for="room">Room Name</label>
+        <label for="room">Node Name</label>
         <input id="room" type="text" required="">
       </div>
       <div class="input-group">
-        <label for="password">Room Password <span class="optional">(optional)</span></label>
+        <label for="password">Node Password <span class="optional">(optional)</span></label>
         <input id="password" type="password" autocomplete="off">
       </div>
-      <button type="submit" class="login-btn">NEXT</button>
+      <button type="submit" class="login-btn">Enter</button>
     </form>
   </div>
   <!-- 聊天主界面，初始隐藏 -->
@@ -32,11 +31,11 @@
     <div class="sidebar">
       <div class="sidebar-user">
         <span class="avatar" id="sidebar-user-avatar"></span>
-        <span class="sidebar-username" id="sidebar-username">我的昵称</span>
+        <span class="sidebar-username" id="sidebar-username">My Name</span>
       </div>
       <div class="join-room">
         <svg class="MuiSvgIcon-root" focusable="false" viewBox="0 0 24 24" aria-hidden="true" style="width:22px;height:22px;vertical-align:middle;margin-right:25px;margin-left: 25px;"><path d="M21 3.01H3c-1.1 0-2 .9-2 2V9h2V4.99h18v14.03H3V15H1v4.01c0 1.1.9 1.98 2 1.98h18c1.1 0 2-.88 2-1.98v-14c0-1.11-.9-2-2-2zM11 16l4-4-4-4v3H1v2h10v3z"></path></svg>
-        进入新房间
+        Enter a channel
       </div>
       <div class="rooms" id="room-list">
         <!-- JS填充房间项 -->
@@ -55,8 +54,8 @@
             <span class="more-btn-dot"></span>
           </button>
           <div class="more-menu" id="more-menu">
-            <div class="more-menu-item" data-action="share">分享</div>
-            <div class="more-menu-item" data-action="exit">退出</div>
+            <div class="more-menu-item" data-action="share">Share</div>
+            <div class="more-menu-item" data-action="exit">Quit</div>
           </div>
         </div>
       </div>

web/main.js

@@ -159,7 +159,7 @@ function addMsg(text, isHistory = false) {
   chatArea.scrollTop = chatArea.scrollHeight;
 }
 
-function addOtherMsg(msg, name = '匿名', avatar = '', isHistory = false) {
+function addOtherMsg(msg, name = 'Anonymous', avatar = '', isHistory = false) {
   // 只有新消息才记录
   if (!isHistory && activeRoomIndex >= 0) roomsData[activeRoomIndex].messages.push({ type: 'other', text: msg, name, avatar });
   const chatArea = document.getElementById('chat-area');
@@ -204,10 +204,6 @@ function loginFormHandler(modal) {
     const username = document.getElementById('username').value.trim();
     const room = document.getElementById('room').value.trim();
     const password = document.getElementById('password').value.trim();
-    if (!username || !room) {
-      alert('请输入用户名和房间名');
-      return;
-    }
     // 生成房间数据并切换
     const newRd = getNewRoomData();
     newRd.room = room;
@@ -224,11 +220,11 @@ function loginFormHandler(modal) {
     if (modal) modal.remove();
     else document.getElementById('login-container').style.display = 'none';
     document.getElementById('chat-container').style.display = '';
-    setStatus('正在连接...');
+    setStatus('Connecting...');
     // 初始化 ChatCrypt
     const callbacks = {
-      onServerClosed: () => setStatus('服务器连接关闭'),
-      onServerSecured: () => setStatus('与服务器安全连接已建立'),
+      onServerClosed: () => setStatus('Server connection closed'),
+      onServerSecured: () => setStatus('Secure connection to server'),
       onClientSecured: (user) => handleClientSecured(idx, user),
       onClientList: (list, selfId) => handleClientList(idx, list, selfId),
       onClientLeft: (clientId) => handleClientLeft(idx, clientId),
@@ -257,7 +253,6 @@ function openLoginModal() {
     <div class="login-modal-card">
       <button class="login-modal-close" style="position:absolute;right:10px;top:10px;font-size:22px;background:none;border:none;cursor:pointer;">&times;</button>
       <h1>Sign in to Chatroom</h1>
-      <p class="subtips">请输入用户名、房间名，房间密码可选</p>
       <form id="login-form-modal">
         <div class="input-group">
           <label for="username-modal">Username</label>
@@ -286,10 +281,6 @@ function openLoginModal() {
     const username = document.getElementById('username-modal').value.trim();
     const room = document.getElementById('room-modal').value.trim();
     const password = document.getElementById('password-modal').value.trim();
-    if (!username || !room) {
-      alert('请输入用户名和房间名');
-      return;
-    }
     // 生成房间数据并切换
     const newRd = getNewRoomData();
     newRd.room = room;
@@ -340,14 +331,14 @@ function renderMainHeader() {
       <span style="margin-left:10px;font-size:13px;color:#888;">${onlineCount} members</span>
     </div>
     <div class="main-header-actions">
-      <button class="more-btn" id="more-btn" aria-label="更多选项">
+      <button class="more-btn" id="more-btn" aria-label="More">
         <span class="more-btn-dot"></span>
         <span class="more-btn-dot"></span>
         <span class="more-btn-dot"></span>
       </button>
       <div class="more-menu" id="more-menu">
-        <div class="more-menu-item" data-action="share">分享</div>
-        <div class="more-menu-item" data-action="exit">退出</div>
+        <div class="more-menu-item" data-action="share">Share</div>
+        <div class="more-menu-item" data-action="exit">Quit</div>
       </div>
     </div>
   `;

web/style.css

@@ -795,7 +795,7 @@ body {
 .login-container h1 {
   font-size: 2.2rem;
   font-weight: 700;
-  margin-bottom: 10px;
+  margin-bottom: 40px;
 }
 .subtips {
   color: #7a7a7a;