Skip to content

Commit 9b22522

Browse files
CommandstoneCommandstone
authored
Create chat.html
1 parent d848874 commit 9b22522

1 file changed

Lines changed: 165 additions & 0 deletions

File tree

‎chat/chat.html‎

Lines changed: 165 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,165 @@
1+
<!DOCTYPE html>
2+
<html lang="zh-CN">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>渐变聊天室</title>
6+
<style>
7+
* {
8+
margin: 0;
9+
padding: 0;
10+
box-sizing: border-box;
11+
font-family: 'Microsoft YaHei', sans-serif;
12+
}
13+
14+
body {
15+
background: linear-gradient(135deg, #f9d423 0%, #4ecdc4 100%);
16+
min-height: 100vh;
17+
}
18+
19+
.chat-container {
20+
max-width: 800px;
21+
margin: 20px auto;
22+
background: rgba(255, 255, 255, 0.9);
23+
border-radius: 15px;
24+
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
25+
overflow: hidden;
26+
height: 90vh;
27+
display: flex;
28+
flex-direction: column;
29+
}
30+
31+
.messages {
32+
flex: 1;
33+
padding: 20px;
34+
overflow-y: auto;
35+
}
36+
37+
.message {
38+
max-width: 70%;
39+
margin-bottom: 15px;
40+
padding: 12px 18px;
41+
border-radius: 20px;
42+
animation: fadeIn 0.3s ease;
43+
word-break: break-word;
44+
}
45+
46+
.received {
47+
background: #f1f1f1;
48+
align-self: flex-start;
49+
}
50+
51+
.sent {
52+
background: #4ecdc4;
53+
color: white;
54+
align-self: flex-end;
55+
}
56+
57+
.input-area {
58+
padding: 20px;
59+
background: rgba(255, 255, 255, 0.95);
60+
border-top: 1px solid #eee;
61+
display: flex;
62+
gap: 10px;
63+
}
64+
65+
input {
66+
flex: 1;
67+
padding: 12px;
68+
border: 2px solid #4ecdc4;
69+
border-radius: 25px;
70+
outline: none;
71+
font-size: 16px;
72+
}
73+
74+
button {
75+
padding: 12px 25px;
76+
background: #4ecdc4;
77+
border: none;
78+
border-radius: 25px;
79+
color: white;
80+
cursor: pointer;
81+
transition: all 0.3s ease;
82+
}
83+
84+
button:hover {
85+
background: #3db3ab;
86+
transform: translateY(-2px);
87+
}
88+
89+
@keyframes fadeIn {
90+
from {
91+
opacity: 0;
92+
transform: translateY(10px);
93+
}
94+
to {
95+
opacity: 1;
96+
transform: translateY(0);
97+
}
98+
}
99+
100+
/* 滚动条样式 */
101+
::-webkit-scrollbar {
102+
width: 8px;
103+
}
104+
105+
::-webkit-scrollbar-track {
106+
background: rgba(0, 0, 0, 0.1);
107+
}
108+
109+
::-webkit-scrollbar-thumb {
110+
background: #4ecdc4;
111+
border-radius: 4px;
112+
}
113+
</style>
114+
</head>
115+
<body>
116+
<div class="chat-container">
117+
<div class="messages" id="messages">
118+
<!-- 示例消息 -->
119+
<div class="message received">你好！有什么可以帮你的？</div>
120+
<div class="message sent">你好！这个界面真漂亮</div>
121+
</div>
122+
<div class="input-area">
123+
<input type="text" id="messageInput" placeholder="输入消息..." />
124+
<button onclick="sendMessage()">发送</button>
125+
</div>
126+
</div>
127+
128+
<script>
129+
const messagesContainer = document.getElementById('messages');
130+
const messageInput = document.getElementById('messageInput');
131+
132+
// 发送消息函数
133+
function sendMessage() {
134+
const message = messageInput.value.trim();
135+
if (message) {
136+
// 添加发送的消息
137+
addMessage(message, 'sent');
138+
// 清空输入框
139+
messageInput.value = '';
140+
// 模拟回复
141+
setTimeout(() => {
142+
addMessage('已收到你的消息：' + message, 'received');
143+
}, 1000);
144+
}
145+
}
146+
147+
// 添加消息到界面
148+
function addMessage(text, type) {
149+
const messageDiv = document.createElement('div');
150+
messageDiv.className = `message ${type}`;
151+
messageDiv.textContent = text;
152+
messagesContainer.appendChild(messageDiv);
153+
// 自动滚动到底部
154+
messagesContainer.scrollTop = messagesContainer.scrollHeight;
155+
}
156+
157+
// 回车发送功能
158+
messageInput.addEventListener('keypress', (e) => {
159+
if (e.key === 'Enter') {
160+
sendMessage();
161+
}
162+
});
163+
</script>
164+
</body>
165+
</html>

0 commit comments

Comments
 (0)