101 lines
2.7 KiB
HTML
101 lines
2.7 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<style>
|
||
|
|
.chat-history {
|
||
|
|
height: 400px;
|
||
|
|
width: 33%;
|
||
|
|
overflow-y: scroll;
|
||
|
|
border: 1px solid black;
|
||
|
|
padding: 10px;
|
||
|
|
margin: 10px;
|
||
|
|
float: middle;
|
||
|
|
}
|
||
|
|
.chat-input {
|
||
|
|
width: 33%;
|
||
|
|
padding: 10px;
|
||
|
|
margin: 10px;
|
||
|
|
float: middle;
|
||
|
|
}
|
||
|
|
.user-info {
|
||
|
|
float: left;
|
||
|
|
width: 33%;
|
||
|
|
text-align: left;
|
||
|
|
margin: 10px;
|
||
|
|
height: 410px;
|
||
|
|
}
|
||
|
|
.user-info button {
|
||
|
|
display: block;
|
||
|
|
margin: 10px 0;
|
||
|
|
}
|
||
|
|
.chat-members {
|
||
|
|
width: 100%;
|
||
|
|
text-align: left;
|
||
|
|
margin: 10px;
|
||
|
|
border: 1px solid black;
|
||
|
|
padding: 10px;
|
||
|
|
height: 400px;
|
||
|
|
overflow-y: scroll;
|
||
|
|
float: right;
|
||
|
|
}
|
||
|
|
.clearfix::after {
|
||
|
|
content: "";
|
||
|
|
clear: both;
|
||
|
|
display: table;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="chat-history" id="chatHistory"></div>
|
||
|
|
<div class="chat-input">
|
||
|
|
<textarea class="chat-input" id="chatInput"></textarea>
|
||
|
|
</div>
|
||
|
|
<div class="user-info">
|
||
|
|
<p id="userId">User ID: <span id="userIdValue">null</span></p>
|
||
|
|
<button id="generateIdButton">Generate ID</button>
|
||
|
|
<button id="saveNicknameButton">Save Nickname</button>
|
||
|
|
<div class="chat-members" id="chatMembers"></div>
|
||
|
|
</div>
|
||
|
|
<div class="clearfix"></div>
|
||
|
|
<script>
|
||
|
|
// generate a unique user id
|
||
|
|
document.getElementById("generateIdButton").addEventListener("click", function() {
|
||
|
|
const userIdValue = Date.now();
|
||
|
|
document.getElementById("userIdValue").innerHTML = userIdValue;
|
||
|
|
});
|
||
|
|
|
||
|
|
// save interlocutor id to nickname
|
||
|
|
document.getElementById("saveNicknameButton").addEventListener("click", function() {
|
||
|
|
// your code here
|
||
|
|
});
|
||
|
|
|
||
|
|
// update chat history
|
||
|
|
function updateChatHistory(message) {
|
||
|
|
const chatHistory = document.getElementById("chatHistory");
|
||
|
|
chatHistory.innerHTML += `<p>${message}</p>`;
|
||
|
|
chatHistory.scrollTop = chatHistory.scrollHeight;
|
||
|
|
}
|
||
|
|
|
||
|
|
// update chat members list
|
||
|
|
function updateChatMembers(members) {
|
||
|
|
const chatMembers = document.getElementById("chatMembers");
|
||
|
|
chatMembers.innerHTML = "";
|
||
|
|
members.forEach(member => {
|
||
|
|
chatMembers.innerHTML += `<p>${member}</p>`;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// handle enter key press in chat input
|
||
|
|
document.getElementById("chatInput").addEventListener("keydown", function(event) {
|
||
|
|
if (event.key === "Enter") {
|
||
|
|
const message = document.getElementById("chatInput").value;
|
||
|
|
updateChatHistory(message);
|
||
|
|
document.getElementById("chatInput").value = "";
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
|
||
|
|
|