肝了一天，经过各种处理美化，肝出来了一个赛博朋克科技风的前端页面，用的原生三件套html+css+javascript开发的，本来想是加点功能调用一下gpt接口，但是基本都需要webscoket通信，可惜我js学的不是很深入，捣鼓半天还是放弃了，如果有感兴趣一起做点日常生活用的小demo的小伙伴也可以联系我，有觉得页面还不错想要源码的小伙伴，我把源码放在下面啦，记得点赞收藏哦。
1-indexl.html
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>聊天页面</title><link rel="stylesheet" href="styles.css">
</head>
<body><div class="page-container"><div class="chat-container"><div class="chat-header"><h1>ai聊天室</h1></div><div class="chat-messages message-container" id="chatMessages"><!-- 消息将在这里动态添加 --></div><div class="user-info">当前用户: 我</div><form class="chat-input" id="chatForm"><input type="text" id="messageInput" placeholder="输入消息..." required><button type="submit">发送</button></form></div><div class="divider"></div><div class="text-container"><div id="textContent" class="text-content">这里是初始的长文本内容。点击左侧的消息可以更新这里的内容。</div></div></div><script src="script.js"></script>
</body>
</html>2-styles.css
body {font-family: '隶书'; margin: 0;padding: 0;background-color: rgba(20, 28, 43, 0.7); /* 使用半透明背景 */color: #7ee2ff;height: 100vh;overflow: hidden;background-image : url('./1.jpg'); /* 背景图片不重复 */ background-repeat: no-repeat; /* 背景图片居中显示 */ background-position: center; /* 背景图片覆盖整个元素 */ background-size: cover;
}.page-container {display: flex;height: 100vh;}.chat-container {width: 50%;background-color: rgba(20, 28, 43, 0.7); /* 使用半透明背景 */display: flex;flex-direction: column;box-shadow: 0 0 20px rgba(126, 226, 255, 0.3);}.divider {width: 2px;background-color: #7ee2ff;box-shadow: 0 0 10px #7ee2ff;
}.text-container {width: 50%;padding: 20px;background-color: rgba(20, 28, 43, 0.7); /* 使用半透明背景 */overflow-y: auto;display: flex;flex-direction: column;will-change: transform;backface-visibility: hidden;}.text-content {font-size: 18px;line-height: 1.6;white-space: pre-wrap;word-wrap: break-word;color: #7ee2ff;text-shadow: 0 0 5px #7ee2ff;
}.chat-header {background-color: rgba(20, 28, 43, 0.7); /* 使用半透明背景 *//* color: #ff00ff; */padding: 15px;text-align: center;box-shadow: 0 2px 4px rgba(126, 226, 255, 0.3);
}.chat-header h1 {margin: 0;font-size: 24px;font-weight: 700;letter-spacing: 2px;text-transform: uppercase;
}.chat-messages {flex-grow: 1;overflow-y: auto;padding: 15px;background-color: rgba(20, 28, 43, 0.7); /* 使用半透明背景 *//* background-image: linear-gradient(to bottom, #141c2b 0%, #0a0e17 100%); */will-change: transform;backface-visibility: hidden;
}.message-container {display: flex;flex-direction: column;
}.user-info {padding: 10px 15px;background-color: rgba(20, 28, 43, 0.7); /* 使用半透明背景 */color: #d3d3d3;font-weight: bold;text-align: center;box-shadow: 0 -2px 4px rgba(126, 226, 255, 0.3);border-bottom: 1px solid #7ee2ff;
}.message {display: inline-block;margin-bottom: 15px;padding: 10px 15px;max-width: 60%;transition: all 0.2s ease;cursor: pointer;word-wrap: break-word;position: relative;font-size: 18px;box-shadow: 0 0 5px rgba(126, 226, 255, 0.3);
}.message.sent {background-color: rgba(30, 44, 74, 0.8);color: #7ee2ff;border-radius: 20px 0px 20px 20px;align-self: flex-end;margin-left: auto;border: 1px solid rgba(126, 226, 255, 0.3);
}.message.received {background-color: rgba(20, 28, 43, 0.8);color: #ff00ff;border-radius: 0px 20px 20px 20px;border: 1px solid rgba(255, 0, 255, 0.3);
}.message:hover {transform: translateY(-2px);box-shadow: 0 2px 10px rgba(126, 226, 255, 0.5);
}.chat-input {display: flex;padding: 15px;background-color: rgba(26, 26, 26, 0.8);box-shadow: 0 -2px 10px rgba(126, 226, 255, 0.1);
}.chat-input input {flex-grow: 1;padding: 10px 15px;border: 1px solid rgba(126, 226, 255, 0.3);border-radius: 20px;background-color: rgba(10, 14, 23, 0.8);color: #7ee2ff;margin-right: 10px;font-family: 'Orbitron', sans-serif;transition: all 0.2s ease;
}.chat-input input:focus {outline: none;border-color: #7ee2ff;box-shadow: 0 0 5px rgba(126, 226, 255, 0.5);
}.chat-input button {padding: 10px 20px;background-color: rgba(30, 44, 74, 0.8);color: #7ee2ff;border: 1px solid rgba(126, 226, 255, 0.3);border-radius: 20px;cursor: pointer;transition: all 0.2s ease;font-family: 'Orbitron', sans-serif;text-transform: uppercase;
}.chat-input button:hover {background-color: rgba(126, 226, 255, 0.2);color: #7ee2ff;box-shadow: 0 0 10px rgba(126, 226, 255, 0.5);
}/* 自定义滚动条 */
::-webkit-scrollbar {width: 8px;
}::-webkit-scrollbar-track {background: #0a0e17;
}::-webkit-scrollbar-thumb {background: linear-gradient(to bottom, #7ee2ff, #ff00ff);border-radius: 4px;
}::-webkit-scrollbar-thumb:hover {background: linear-gradient(to bottom, #7ee2ff, #ff00ff);
}/* 添加霓虹灯效果 */
* {box-sizing: border-box;
}@media (prefers-reduced-motion: reduce) {* {animation: none !important;transition: none !important;}
}3-script.js
document.addEventListener('DOMContentLoaded', () => {const chatForm = document.getElementById('chatForm');const messageInput = document.getElementById('messageInput');const chatMessages = document.getElementById('chatMessages');const textContent = document.getElementById('textContent');chatForm.addEventListener('submit', (e) => {e.preventDefault();const message = messageInput.value.trim();if (message) {addMessage(message, 'sent');messageInput.value = '';// 模拟接收到的消息setTimeout(() => {addMessage('这是一条自动回复的消息。', 'received');}, 1000);}});function addMessage(text, type) {const messageElement = document.createElement('div');messageElement.classList.add('message', type);messageElement.textContent = text;// 添加点击事件messageElement.addEventListener('click', () => {updateTextContent(text);});const messageContainer = document.createElement('div');messageContainer.classList.add('message-container');messageContainer.appendChild(messageElement);chatMessages.appendChild(messageContainer);chatMessages.scrollTop = chatMessages.scrollHeight;}function updateTextContent(text) {textContent.textContent = text;}// 添加一些初始消息addMessage("你好！欢迎来到炫酷聊天室。", "received");addMessage("这是一个示例消息。", "sent");addMessage("点击任何消息可以在右侧查看完整内容。", "received");// messageInput.addEventListener('input', function() {// const maxLength = Math.floor(chatMessages.offsetWidth * 0.6);// if (this.value.length > maxLength) {// this.value = this.value.slice(0, maxLength);// }// });
});背景图片图片：1.jpg
