<!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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: {
50: '#f0f9ff',
100: '#e0f2fe',
200: '#bae6fd',
300: '#7dd3fc',
400: '#38bdf8',
500: '#0ea5e9',
600: '#0284c7',
700: '#0369a1',
800: '#075985',
900: '#0c4a6e',
},
secondary: {
50: '#f8fafc',
100: '#f1f5f9',
200: '#e2e8f0',
300: '#cbd5e1',
400: '#94a3b8',
500: '#64748b',
600: '#475569',
700: '#334155',
800: '#1e293b',
900: '#0f172a',
}
},
animation: {
'fade-in': 'fadeIn 0.3s ease-in-out',
'slide-up': 'slideUp 0.2s ease-out',
'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite'
},
keyframes: {
fadeIn: {
'0%': { opacity: '0' },
'100%': { opacity: '1' }
},
slideUp: {
'0%': { transform: 'translateY(10px)', opacity: '0' },
'100%': { transform: 'translateY(0)', opacity: '1' }
}
}
}
}
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.scrollbar-hidden::-webkit-scrollbar {
display: none;
}
.scrollbar-hidden {
-ms-overflow-style: none;
scrollbar-width: none;
}
.message-bubble {
@apply relative rounded-2xl px-4 py-2 max-w-[80%] md:max-w-[70%] transition-all duration-200;
}
.typing-indicator span {
@apply inline-block w-2 h-2 bg-primary-400 rounded-full;
}
}
</style>
</head>
<body class="bg-secondary-50 text-secondary-800 font-sans antialiased h-screen flex flex-col">
<!-- 主容器 -->
<div class="flex flex-1 overflow-hidden">
<!-- 侧边栏 - 联系人列表 -->
<div class="hidden md:flex md:w-72 flex-col border-r border-secondary-200 bg-white">
<div class="p-4 border-b border-secondary-200">
<h2 class="text-xl font-semibold text-secondary-800">聊天</h2>
<div class="relative mt-3">
<input type="text" placeholder="搜索联系人" class="w-full pl-10 pr-4 py-2 rounded-full bg-secondary-100 focus:outline-none focus:ring-2 focus:ring-primary-500">
<i class="fas fa-search absolute left-3 top-2.5 text-secondary-400"></i>
</div>
</div>
<div class="flex-1 overflow-y-auto scrollbar-hidden">
<!-- 联系人列表 -->
<div class="space-y-1 p-2">
<!-- 联系人项 -->
<div class="flex items-center p-3 rounded-xl hover:bg-secondary-100 cursor-pointer transition-colors duration-200 group">
<div class="relative">
<div class="w-12 h-12 rounded-full bg-primary-100 flex items-center justify-center text-primary-600">
<i class="fas fa-user text-xl"></i>
</div>
<span class="absolute bottom-0 right-0 w-3 h-3 bg-green-500 rounded-full border-2 border-white"></span>
</div>
<div class="ml-3 flex-1">
<div class="flex justify-between items-center">
<h3 class="font-medium text-secondary-800">张三</h3>
<span class="text-xs text-secondary-400">10:30</span>
</div>
<p class="text-sm text-secondary-500 truncate">你好，最近怎么样？</p>
</div>
</div>
<!-- 更多联系人项... -->
<div class="flex items-center p-3 rounded-xl hover:bg-secondary-100 cursor-pointer transition-colors duration-200 group">
<div class="relative">
<div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center text-purple-600">
<i class="fas fa-user-tie text-xl"></i>
</div>
<span class="absolute bottom-0 right-0 w-3 h-3 bg-gray-400 rounded-full border-2 border-white"></span>
</div>
<div class="ml-3 flex-1">
<div class="flex justify-between items-center">
<h3 class="font-medium text-secondary-800">李四</h3>
<span class="text-xs text-secondary-400">昨天</span>
</div>
<p class="text-sm text-secondary-500 truncate">项目进展如何？</p>
</div>
</div>
<div class="flex items-center p-3 rounded-xl hover:bg-secondary-100 cursor-pointer transition-colors duration-200 group">
<div class="relative">
<div class="w-12 h-12 rounded-full bg-yellow-100 flex items-center justify-center text-yellow-600">
<i class="fas fa-user-graduate text-xl"></i>
</div>
<span class="absolute bottom-0 right-0 w-3 h-3 bg-green-500 rounded-full border-2 border-white"></span>
</div>
<div class="ml-3 flex-1">
<div class="flex justify-between items-center">
<h3 class="font-medium text-secondary-800">王五</h3>
<span class="text-xs text-secondary-400">周一</span>
</div>
<p class="text-sm text-secondary-500 truncate">会议资料已发送</p>
</div>
</div>
</div>
</div>
</div>
<!-- 主聊天区域 -->
<div class="flex-1 flex flex-col bg-white">
<!-- 顶部导航 -->
<div class="flex items-center p-4 border-b border-secondary-200">
<button class="md:hidden mr-2 text-secondary-500 hover:text-secondary-800">
<i class="fas fa-bars text-xl"></i>
</button>
<div class="flex items-center">
<div class="w-10 h-10 rounded-full bg-primary-100 flex items-center justify-center text-primary-600 mr-3">
<i class="fas fa-user-group text-lg"></i>
</div>
<div>
<h2 class="font-semibold text-secondary-800">团队聊天室</h2>
<div class="flex items-center">
<span class="text-xs text-secondary-400 mr-1">在线 5 人</span>
<div class="flex -space-x-2">
<div class="w-4 h-4 rounded-full bg-green-500 border-2 border-white"></div>
<div class="w-4 h-4 rounded-full bg-green-500 border-2 border-white"></div>
<div class="w-4 h-4 rounded-full bg-green-500 border-2 border-white"></div>
</div>
</div>
</div>
</div>
<div class="ml-auto flex space-x-4">
<button class="text-secondary-500 hover:text-secondary-800">
<i class="fas fa-phone text-xl"></i>
</button>
<button class="text-secondary-500 hover:text-secondary-800">
<i class="fas fa-video text-xl"></i>
</button>
<button class="text-secondary-500 hover:text-secondary-800">
<i class="fas fa-ellipsis-vertical text-xl"></i>
</button>
</div>
</div>
<!-- 消息区域 -->
<div class="flex-1 overflow-y-auto p-4 bg-secondary-50 scrollbar-hidden">
<!-- 日期分隔 -->
<div class="flex justify-center my-4">
<span class="px-3 py-1 bg-white text-xs text-secondary-500 rounded-full shadow-sm">今天</span>
</div>
<!-- 收到的消息 -->
<div class="flex mb-4 animate-fade-in">
<div class="flex-shrink-0 mr-3">
<div class="w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center text-purple-600">
<i class="fas fa-user-tie text-sm"></i>
</div>
</div>
<div>
<div class="flex items-center mb-1">
<span class="text-xs font-medium text-secondary-600 mr-2">李四</span>
<span class="text-xs text-secondary-400">10:15</span>
</div>
<div class="message-bubble bg-white border border-secondary-200 animate-slide-up">
<>大家早上好！项目进度报告我已经准备好了，需要我分享到群里吗？</p>
</div>
</div>
</div>
<!-- 发送的消息 -->
<div class="flex justify-end mb-4 animate-fade-in">
<div class="flex flex-col items-end">
<div class="flex items-center mb-1">
<span class="text-xs text-secondary-400 mr-2">10:16</span>
<span class="text-xs font-medium text-primary-600">我</span>
</div>
<div class="message-bubble bg-primary-500 text-white animate-slide-up">
<p>好的，请分享给大家看看</p>
</div>
</div>
</div>
<!-- 系统消息 -->
<div class="flex justify-center mb-4 animate-fade-in">
<div class="px-3 py-1 bg-secondary-100 text-xs text-secondary-500 rounded-full">
<span>李四 上传了文件 "项目进度报告.pdf"</span>
</div>
</div>
<!-- 收到的消息 -->
<div class="flex mb-4 animate-fade-in">
<div class="flex-shrink-0 mr-3">
<div class="w-8 h-8 rounded-full bg-yellow-100 flex items-center justify-center text-yellow-600">
<i class="fas fa-user-graduate text-sm"></i>
</div>
</div>
<div>
<div class="flex items-center mb-1">
<span class="text-xs font-medium text-secondary-600 mr-2">王五</span>
<span class="text-xs text-secondary-400">10:18</span>
</div>
<div class="message-bubble bg-white border border-secondary-200 animate-slide-up">
<p>报告看过了，第三部分的数据分析可能需要再详细一些</p>
</div>
</div>
</div>
<!-- 输入指示器 -->
<div class="flex mb-4 animate-pulse-slow">
<div class="flex-shrink-0 mr-3">
<div class="w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center text-purple-600">
<i class="fas fa-user-tie text-sm"></i>
</div>
</div>
<div>
<div class="message-bubble bg-white border border-secondary-200 w-20">
<div class="typing-indicator flex space-x-1">
<span style="animation-delay: 0ms;"></span>
<span style="animation-delay: 300ms;"></span>
<span style="animation-delay: 600ms;"></span>
</div>
</div>
</div>
</div>
</div>
<!-- 输入区域 -->
<div class="p-4 border-t border-secondary-200 bg-white">
<div class="flex items-center">
<button class="text-secondary-500 hover:text-primary-500 mr-2">
<i class="fas fa-paperclip text-xl"></i>
</button>
<button class="text-secondary-500 hover:text-primary-500 mr-2">
<i class="fas fa-image text-xl"></i>
</button>
<div class="flex-1 relative">
<input type="text" placeholder="输入消息..." class="w-full pl-4 pr-12 py-3 rounded-full bg-secondary-100 focus:outline-none focus:ring-2 focus:ring-primary-500">
<div class="absolute right-3 top-2.5 flex space-x-2">
<button class="text-secondary-500 hover:text-primary-500">
<i class="fas fa-microphone text-xl"></i>
</button>
<button class="text-secondary-500 hover:text-primary-500">
<i class="fas fa-face-smile text-xl"></i>
</button>
</div>
</div>
<button class="ml-3 w-12 h-12 rounded-full bg-primary-500 text-white hover:bg-primary-600 flex items-center justify-center transition-colors duration-200">
<i class="fas fa-paper-plane text-xl"></i>
</button>
</div>
</div>
</div>
</div>
</body>
</html>这个聊天界面包含以下特点：
- 响应式设计：左侧联系人列表在移动设备上隐藏，可通过菜单按钮访问
- 现代化UI：圆角设计、柔和阴影、清晰的视觉层次
- 动画效果：消息淡入、上滑动画，输入指示器脉冲效果
完整功能区域：
- 联系人列表带搜索和状态指示
- 消息区域带时间戳和用户头像
- 底部输入区域带附件和表情功能
- 多种消息类型：文本消息、系统通知、输入指示器
- 精心设计的配色：柔和的蓝灰色调，确保可读性
需要任何调整或添加其他功能吗？
需支付 5元 阅读剩余内容
