来源: GPT生成之后微调
效果图
HTML代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>聊天</title><style>body {font-family: Arial, sans-serif;margin: 0;padding: 0;}.container {display: flex;height: 100vh;}.contact-list {flex: 1;background-color: #f4f0ff;/* 浅紫色背景 */padding: 20px;max-width: 300px;border-right: 1px solid #DDD;box-sizing: border-box;display: flex;flex-direction: column;gap: 10px;}.contact {padding: 10px 20px;cursor: pointer;transition: background-color 0.3s;display: flex;justify-content: space-between;align-items: center;}.contact.active {background-color: #e6d5ff;/* 选中联系人更深的紫色背景 */}.contact-name {font-weight: bold;}.contact-status {width: 10px;height: 10px;border-radius: 50%;}.status-online {background-color: #0F0;/* 在线状态的颜色 */}.status-offline {background-color: #F00;/* 离线状态的颜色 */}.status-away {background-color: #FF0;/* 离开状态的颜色 */}.conversation {flex: 2;background-color: #f9f7ff;/* 淡紫色对话窗口 */padding: 20px;box-sizing: border-box;display: flex;flex-direction: column;}.message-container {flex: 1;overflow-y: auto;padding: 10px;display: flex;flex-direction: column;}.message {padding: 10px;margin: 20px;max-width: 70%;word-wrap: break-word;border-radius: 10px;box-shadow: 2px 2px 5px #ccc;display: inline-block;clear: both;}.message-time {font-size: 12px;color: #666;position: absolutemargin-left: 10px;float: right;}.user-message {background-color: #baf2ff;/* 浅蓝色用户消息气泡 */align-self: flex-end;}.contact-message {background-color: #f7e7ff;/* 淡紫色联系人消息气泡 */align-self: flex-start;}.input-container {display: flex;align-items: center;}.message-input {flex: 1;padding: 10px;margin: 10px;box-sizing: border-box;border: 1px solid #DDD;border-radius: 5px;background-color: #f4f0ff;/* 浅紫色背景 */resize: none;/* 禁止用户调整文本域大小 */font-size: 18px;}.send-button {padding: 10px 20px;margin: 10px;border: none;background-color: #8a4d76;/* 深紫色按钮 */color: #FFF;border-radius: 5px;cursor: pointer;}h2 {margin-top: 0;padding-top: 10px;color: #8a4d76;/* 深紫色标题 */}h3 {margin-top: 0;padding-top: 10px;color: #8a4d76;/* 深紫色标题 */}</style></head><body><div class="container"><div class="contact-list"><h2>联系人列表</h2><div class="contact active" onclick="changeActive(this)"><span class="contact-name">联系人1</span><div class="contact-status status-online"></div></div><div class="contact" onclick="changeActive(this)"><span class="contact-name">联系人2</span><div class="contact-status status-offline"></div></div><div class="contact" onclick="changeActive(this)"><span class="contact-name">联系人3</span><div class="contact-status status-away"></div></div></div><div class="conversation" id="conversation"><h3 id="current-contact">联系人姓名</h3><div class="message-container" id="message-container"></div><div class="input-container"><textarea class="message-input" id="message-input" placeholder="Enter 发送, ALT+回车 换行"rows="8"></textarea><!-- <button class="send-button" onclick="sendMessage()">发送</button> --></div></div></div><script>function changeActive(element) {var contactList = document.getElementsByClassName('contact');for (var i = 0; i < contactList.length; i++) {contactList[i].classList.remove('active');}element.classList.add('active');document.getElementById('current-contact').innerText = element.querySelector('.contact-name').innerText;}// 监听键盘事件document.getElementById('message-input').addEventListener('keydown', function(e) {if (e.key === 'Enter' && !e.altKey) { // 按下 Enter 键发送消息e.preventDefault(); // 阻止默认换行行为sendMessage();} else if (e.key === 'Enter' && e.altKey) { // 按下 Alt+Enter 换行this.value += '\n';}});function sendMessage() {var messageInput = document.getElementById('message-input').value;var messageContainer = document.getElementById('message-container');var div = document.createElement('div');div.className = 'message user-message';div.innerHTML = messageInput+'</br></br><span class="message-time">12:35 PM</span>';div.style.whiteSpace = 'pre-wrap';messageContainer.appendChild(div);messageContainer.scrollTop = messageContainer.scrollHeight;document.getElementById('message-input').value = '';// 模拟对方回复消息setTimeout(function() {var replyDiv = document.createElement('div');replyDiv.className = 'message contact-message';replyDiv.innerHTML = messageInput+'</br></br><span class="message-time">12:35 PM</span>';replyDiv.style.whiteSpace = 'pre-wrap';messageContainer.appendChild(replyDiv);messageContainer.scrollTop = messageContainer.scrollHeight;}, 1000);}</script></body>
</html>