57 lines
2.1 KiB
HTML
57 lines
2.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-TW">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>GaoBinYou - 隨機配對聊天</title>
|
|
<link rel="stylesheet" href="styles.css">
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<!-- 登入區域 -->
|
|
<div id="loginSection" class="section">
|
|
<h1>GaoBinYou 聊天室</h1>
|
|
<div class="login-form">
|
|
<input type="text" id="userName" placeholder="輸入你的暱稱（可選）" />
|
|
<button id="loginBtn" onclick="handleLogin()">開始聊天</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 配對區域 -->
|
|
<div id="matchingSection" class="section hidden">
|
|
<div class="status-info">
|
|
<p>狀態: <span id="matchStatus">等待配對中...</span></p>
|
|
<p>UID: <span id="userUID"></span></p>
|
|
</div>
|
|
<button id="joinMatchBtn" onclick="handleJoinMatch()">加入配對</button>
|
|
<button id="checkStatusBtn" onclick="handleCheckStatus()">檢查狀態</button>
|
|
</div>
|
|
|
|
<!-- 聊天區域 -->
|
|
<div id="chatSection" class="section hidden">
|
|
<div class="chat-header">
|
|
<h2>聊天室: <span id="roomID"></span></h2>
|
|
<button id="refreshTokenBtn" onclick="handleRefreshToken()" class="btn-small">刷新 Token</button>
|
|
</div>
|
|
|
|
<div class="chat-container">
|
|
<div id="messagesContainer" class="messages"></div>
|
|
<div class="input-area">
|
|
<input type="text" id="messageInput" placeholder="輸入訊息..." onkeypress="handleKeyPress(event)" />
|
|
<button id="sendBtn" onclick="handleSendMessage()">發送</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 日誌區域 -->
|
|
<div class="log-section">
|
|
<h3>系統日誌</h3>
|
|
<div id="logContainer" class="log-container"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|
|
|