66 lines
2.5 KiB
HTML
66 lines
2.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-cn">
|
|
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Chat</title>
|
|
<link rel="stylesheet" href="style/style.css" />
|
|
</head>
|
|
|
|
<body>
|
|
<div id="container">
|
|
<div id="msg-list">
|
|
<div class="card">
|
|
<div class="title">系统消息</div>
|
|
<div id="sysmsg"></div>
|
|
</div>
|
|
<div class="card" style="flex: 1; display: flex; flex-direction: column;">
|
|
<div class="title">消息</div>
|
|
<div id="usrmsg" style="flex: 1;"></div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="input-group">
|
|
<input type="text" id="message" placeholder="输入消息..." />
|
|
<button onclick="sendMsg()">发送</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="online-list">
|
|
<div class="card">
|
|
<div class="title">在线用户</div>
|
|
<div style="color: var(--text-secondary); font-size: 13px; margin-bottom: 8px;">
|
|
在线人数：<span id="online-number">0</span>
|
|
</div>
|
|
<div id="online"></div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="title">服务器状态</div>
|
|
<div style="margin-bottom: 12px;">
|
|
<span id="stat" class="status-badge disconnected">
|
|
<span class="status-dot"></span>
|
|
<span id="stat-text">disconnected</span>
|
|
</span>
|
|
</div>
|
|
<div class="input-group">
|
|
<button onclick="connect()">连接</button>
|
|
<button onclick="disconnect()" style="background-color: var(--text-secondary);">断开</button>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="title">用户信息</div>
|
|
<div id="user-info">
|
|
<div class="username-display" id="current-username">未登录</div>
|
|
<div class="login-prompt" id="login-prompt" style="display: none;">
|
|
<p>请先登录</p>
|
|
<button onclick="showLogin()">去登录</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>
|
|
<script src="script/main.js"></script>
|
|
</body>
|
|
|
|
</html> |