nodecrypt/web/index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>NodeCrypt</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- 登录页面 -->
  <div class="login-container" id="login-container">
    <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 minlength="1" maxlength="15">
      </div>
      <div class="input-group">
        <label for="roomName">Node Name</label>
        <input id="roomName" type="text" required minlength="1" maxlength="15">
      </div>
      <div class="input-group">
        <label for="password">Node Password <span class="optional">(optional)</span></label>
        <input id="password" type="password" autocomplete="off" minlength="1" maxlength="15">
      </div>
      <button type="submit" class="login-btn">ENTER</button>
    </form>
  </div>
  <!-- 聊天主界面，初始隐藏 -->
  <div class="container" id="chat-container" style="display:none;">
    <!-- 左侧房间栏 -->
    <div class="sidebar">
      <div class="sidebar-user">
        <span class="avatar" id="sidebar-user-avatar"></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 Node
      </div>
      <div class="rooms" id="room-list">
        <!-- JS填充房间项 -->
      </div>
    </div>
    <!-- 中间聊天区 -->
    <div class="main">
      <div class="main-header" id="main-header">
        <!-- JS填充房间头部 -->
        <div class="main-header-actions">
          <button class="more-btn" id="more-btn" aria-label="更多选项">
            <span class="more-btn-dot"></span>
            <br>
            <span class="more-btn-dot"></span>
            <br>
            <span class="more-btn-dot"></span>
          </button>
          <div class="more-menu" id="more-menu">
            <div class="more-menu-item" data-action="share">Share</div>
            <div class="more-menu-item" data-action="exit">Quit</div>
          </div>
        </div>
      </div>
      <div class="chat-area" id="chat-area">
        <!-- JS填充消息区 -->
      </div>
      <div class="chat-input-area">
        <div class="rows-wrapper chat-input-wrapper chat-input-main-wrapper chat-rows-wrapper">
          <div class="new-message-wrapper rows-wrapper-row" data-offset="commands">
            <div class="input-message-container">
              <div class="input-message-input is-empty scrollable scrollable-y no-scrollbar" contenteditable="true" dir="auto" tabindex="-1" style="transition-duration: 0ms; height: 37px;"></div>
              <span class="input-field-placeholder i18n is-empty">Message</span>
              <div contenteditable="true" tabindex="-1" class="input-message-input is-empty scrollable scrollable-y no-scrollbar input-field-input-fake"></div>
              <button class="chat-attach-btn" type="button" title="Attach file" style="background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;position:absolute;right:-20px;top:50%;transform:translateY(-50%);">
                <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:22px;height:22px;"><g> <g> <g> <path fill-rule="evenodd" clip-rule="evenodd" d="M17.3656 4.70536C16.2916 3.63142 14.5504 3.63142 13.4765 4.70536L5.34477 12.8371C3.68504 14.4968 3.68504 17.1878 5.34477 18.8475C7.0045 20.5072 9.69545 20.5072 11.3552 18.8475L20.1172 10.0855C20.41 9.79263 20.8849 9.79263 21.1778 10.0855C21.4707 10.3784 21.4707 10.8533 21.1778 11.1462L12.4158 19.9082C10.1703 22.1537 6.52963 22.1537 4.28411 19.9082C2.0386 17.6626 2.0386 14.0219 4.28411 11.7764L12.4158 3.6447C14.0756 1.98497 16.7665 1.98497 18.4262 3.6447C20.086 5.30443 20.086 7.99538 18.4262 9.65511L10.6327 17.4487C9.55876 18.5226 7.81756 18.5226 6.74361 17.4487C5.66967 16.3747 5.66967 14.6335 6.74361 13.5596L13.9377 6.36552C14.2305 6.07263 14.7054 6.07263 14.9983 6.36552C15.2912 6.65842 15.2912 7.13329 14.9983 7.42618L7.80427 14.6202C7.31612 15.1084 7.31612 15.8998 7.80427 16.388C8.29243 16.8761 9.08389 16.8761 9.57204 16.388L17.3656 8.59445C18.4395 7.5205 18.4395 5.7793 17.3656 4.70536Z" fill="#808080"></path> </g> </g> </g></svg>
              </button>
            </div>
            <input type="file" multiple style="display: none;">
          </div>
        </div>
      </div>
    </div>
    <!-- 右侧在线用户栏 -->
    <div class="rightbar">
      <div class="rightbar-header">
        <div class="rightbar-group">
          <div class="group-info">
            <div class="title">Members</div>
            <div class="group-desc" id="rightbar-group-desc"></div>
          </div>
        </div>
      </div>
      <div class="rightbar-tabs tabs" id="member-tabs">
      </div>
      <div class="members" id="member-list">
        <!-- JS填充成员列表 -->
      </div>
    </div>
  </div>
  <script src="NodeCrypt.js"></script>
  <script type="module" src="main.js"></script>
</body>
</html>