You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
78 lines
2.8 KiB
78 lines
2.8 KiB
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>TCP点对点聊天系统</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body>
|
|
<!-- 登录界面 -->
|
|
<div class="login-modal" id="loginModal">
|
|
<div class="login-box">
|
|
<h2>🚀 欢迎使用聊天系统</h2>
|
|
<p class="login-desc">请输入您的用户名开始聊天</p>
|
|
<input type="text" id="usernameInput" placeholder="请输入用户名" maxlength="20" autocomplete="off">
|
|
<button onclick="login()">登录</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 聊天主界面 -->
|
|
<div class="container hidden" id="chatContainer">
|
|
<div class="sidebar">
|
|
<div class="sidebar-header">
|
|
<h2>💬 在线用户</h2>
|
|
<div class="current-user">
|
|
<span class="status-dot"></span>
|
|
<span id="currentUser"></span>
|
|
</div>
|
|
</div>
|
|
<div class="user-list" id="userList">
|
|
<div class="empty-users">暂无其他用户在线</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="chat-area">
|
|
<div class="chat-header">
|
|
<h3 id="chatTitle">选择用户开始聊天</h3>
|
|
<button class="logout-btn" onclick="logout()">退出</button>
|
|
</div>
|
|
|
|
<div class="messages" id="messages">
|
|
<div class="welcome-screen">
|
|
<div class="welcome-icon">💬</div>
|
|
<p>选择左侧用户开始聊天</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="input-area">
|
|
<input
|
|
type="file"
|
|
id="fileInput"
|
|
style="display: none;"
|
|
accept="*/*"
|
|
onchange="handleFileSelect(event)">
|
|
<button class="attach-btn" onclick="document.getElementById('fileInput').click()" id="attachBtn" disabled title="发送文件">
|
|
📎
|
|
</button>
|
|
<input
|
|
type="text"
|
|
id="messageInput"
|
|
placeholder="输入消息..."
|
|
disabled
|
|
autocomplete="off"
|
|
maxlength="500">
|
|
<button class="voice-btn" onclick="toggleVoiceRecording()" id="voiceBtn" disabled title="语音消息">
|
|
🎤
|
|
</button>
|
|
<button onclick="sendMessage()" id="sendBtn" disabled>
|
|
<span>发送</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|