255 lines
14 KiB
HTML
255 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>AI 助手对话界面</title>
|
|
|
|
<!-- 字体 -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Pacifico&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
|
|
<!-- Tailwind CSS -->
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
primary: '#6366f1',
|
|
secondary: '#8b5cf6'
|
|
},
|
|
borderRadius: {
|
|
'none': '0px',
|
|
'sm': '2px',
|
|
DEFAULT: '4px',
|
|
'md': '8px',
|
|
'lg': '12px',
|
|
'xl': '16px',
|
|
'2xl': '20px',
|
|
'3xl': '24px',
|
|
'full': '9999px',
|
|
'button': '4px'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<!-- 自定义样式 -->
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
|
|
</head>
|
|
<body class="relative">
|
|
<!-- 动态背景粒子效果 -->
|
|
<div class="particles" id="particles"></div>
|
|
|
|
<div class="flex h-screen">
|
|
<!-- 左侧用户信息面板 -->
|
|
<div class="w-80 bg-slate-900/80 glass-effect border-r border-slate-700 flex flex-col">
|
|
<div class="p-6 border-b border-slate-700">
|
|
<h2 class="text-xl font-bold text-white mb-4">用户画像</h2>
|
|
<div class="flex items-center space-x-3 mb-4">
|
|
<div class="w-16 h-16 rounded-full bg-gradient-to-r from-primary to-secondary flex items-center justify-center text-white text-xl font-bold">
|
|
U
|
|
</div>
|
|
<div>
|
|
<p class="text-white font-medium">张伟明</p>
|
|
<p class="text-slate-400 text-sm">AI 助手用户</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 个性化推荐 -->
|
|
<div class="mt-4 p-3 bg-slate-800/50 rounded-lg">
|
|
<h3 class="text-sm font-medium text-white mb-2">个性化推荐</h3>
|
|
<p class="text-slate-300 text-xs">根据您的使用习惯，推荐以下功能</p>
|
|
<div class="mt-2 flex flex-wrap gap-1">
|
|
<span class="px-2 py-1 bg-primary/20 text-primary text-xs rounded-full">智能问答</span>
|
|
<span class="px-2 py-1 bg-secondary/20 text-secondary text-xs rounded-full">语音识别</span>
|
|
<span class="px-2 py-1 bg-blue-500/20 text-blue-400 text-xs rounded-full">任务管理</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 待办事项 -->
|
|
<div class="p-6 border-b border-slate-700">
|
|
<h3 class="text-lg font-semibold text-white mb-4">待办事项</h3>
|
|
<div class="space-y-3" id="todo-list">
|
|
<div class="flex items-center space-x-2 p-2 bg-slate-800/30 rounded-lg">
|
|
<input type="checkbox" class="rounded text-primary">
|
|
<span class="text-slate-300 text-sm">完成项目报告</span>
|
|
</div>
|
|
<div class="flex items-center space-x-2 p-2 bg-slate-800/30 rounded-lg">
|
|
<input type="checkbox" class="rounded text-primary">
|
|
<span class="text-slate-300 text-sm">准备会议材料</span>
|
|
</div>
|
|
<div class="flex items-center space-x-2 p-2 bg-slate-800/30 rounded-lg">
|
|
<input type="checkbox" class="rounded text-primary">
|
|
<span class="text-slate-300 text-sm">回复客户邮件</span>
|
|
</div>
|
|
</div>
|
|
<div class="mt-3 flex">
|
|
<input type="text" id="todo-input" placeholder="添加新任务..." class="flex-1 bg-slate-800 text-white text-sm px-3 py-2 rounded-l-lg border border-slate-600 focus:outline-none focus:border-primary">
|
|
<button id="todo-add-btn" class="bg-primary text-white px-3 py-2 rounded-r-lg hover:bg-primary/80 transition">
|
|
<i class="fas fa-plus"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 提醒设置 -->
|
|
<div class="p-6 flex-1">
|
|
<h3 class="text-lg font-semibold text-white mb-4">提醒设置</h3>
|
|
<div class="space-y-3">
|
|
<div class="p-3 bg-slate-800/30 rounded-lg">
|
|
<p class="text-slate-300 text-sm">每日 9:00 AM</p>
|
|
<p class="text-white text-sm">晨会准备</p>
|
|
</div>
|
|
<div class="p-3 bg-slate-800/30 rounded-lg">
|
|
<p class="text-slate-300 text-sm">每周三 2:00 PM</p>
|
|
<p class="text-white text-sm">团队同步会议</p>
|
|
</div>
|
|
<div class="p-3 bg-slate-800/30 rounded-lg">
|
|
<p class="text-slate-300 text-sm">每月 15 日</p>
|
|
<p class="text-white text-sm">月度总结报告</p>
|
|
</div>
|
|
</div>
|
|
<button class="w-full mt-4 bg-slate-700 text-white py-2 rounded-lg hover:bg-slate-600 transition flex items-center justify-center space-x-2">
|
|
<i class="fas fa-bell"></i>
|
|
<span>设置新提醒</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 主对话区域 -->
|
|
<div class="flex-1 flex flex-col">
|
|
<!-- 顶部导航栏 -->
|
|
<div class="h-16 bg-slate-900/80 glass-effect border-b border-slate-700 flex items-center justify-between px-6 relative">
|
|
<div class="flex items-center space-x-4">
|
|
<h1 class="text-xl font-bold text-white font-['Pacifico']">AI 助手</h1>
|
|
<div class="flex space-x-2">
|
|
<button class="theme-btn px-3 py-1 bg-slate-700 text-white rounded-lg text-sm hover:bg-slate-600 transition" data-theme="dark">深空黑</button>
|
|
<button class="theme-btn px-3 py-1 bg-blue-600 text-white rounded-lg text-sm hover:bg-blue-500 transition" data-theme="blue">极光蓝</button>
|
|
<button class="theme-btn px-3 py-1 bg-purple-600 text-white rounded-lg text-sm hover:bg-purple-500 transition" data-theme="purple">霓虹紫</button>
|
|
<button class="theme-btn px-3 py-1 bg-green-600 text-white rounded-lg text-sm hover:bg-green-500 transition" data-theme="green">科技绿</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 字体选择 -->
|
|
<div class="flex items-center space-x-4">
|
|
<select id="font-select" class="bg-slate-800 text-white px-3 py-1 rounded-lg border border-slate-600 focus:outline-none focus:border-primary">
|
|
<option value="'Inter', sans-serif">默认字体</option>
|
|
<option value="'Source Han Sans CN', sans-serif">思源黑体</option>
|
|
<option value="'PingFang SC', sans-serif">苹方</option>
|
|
<option value="'Roboto', sans-serif">Roboto</option>
|
|
</select>
|
|
|
|
<!-- 消息通知 -->
|
|
<div class="relative">
|
|
<button class="text-white p-2 hover:bg-slate-700 rounded-lg transition relative">
|
|
<i class="fas fa-bell text-lg"></i>
|
|
<div class="notification-badge">3</div>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="w-8 h-8 bg-gradient-to-r from-primary to-secondary rounded-full flex items-center justify-center text-white">
|
|
<i class="fas fa-user text-sm"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 智能回复提示 -->
|
|
<div class="p-4 bg-slate-800/50 border-b border-slate-700">
|
|
<div class="flex space-x-3">
|
|
<button class="quick-reply-btn px-4 py-2 bg-slate-700 text-slate-300 rounded-lg text-sm hover:bg-slate-600 transition whitespace-nowrap">
|
|
<i class="fas fa-lightbulb mr-2"></i>今日天气如何？
|
|
</button>
|
|
<button class="quick-reply-btn px-4 py-2 bg-slate-700 text-slate-300 rounded-lg text-sm hover:bg-slate-600 transition whitespace-nowrap">
|
|
<i class="fas fa-calendar mr-2"></i>明天的会议安排
|
|
</button>
|
|
<button class="quick-reply-btn px-4 py-2 bg-slate-700 text-slate-300 rounded-lg text-sm hover:bg-slate-600 transition whitespace-nowrap">
|
|
<i class="fas fa-tasks mr-2"></i>帮我制定工作计划
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 对话内容区域 -->
|
|
<div class="flex-1 overflow-y-auto p-6 space-y-4" id="chat-container">
|
|
<!-- 用户消息示例 -->
|
|
<div class="flex justify-end slide-in">
|
|
<div class="max-w-xs lg:max-w-md user-bubble text-white p-4 rounded-2xl rounded-br-md">
|
|
<p>你好，我想了解一下今天的工作安排。</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- AI 回复示例 -->
|
|
<div class="flex justify-start slide-in">
|
|
<div class="max-w-xs lg:max-w-md ai-bubble text-white p-4 rounded-2xl rounded-bl-md">
|
|
<p>您好！根据您的日程安排，今天有以下任务：</p>
|
|
<ul class="mt-2 space-y-1 text-sm">
|
|
<li>• 9:00 AM - 晨会准备</li>
|
|
<li>• 10:30 AM - 客户电话会议</li>
|
|
<li>• 2:00 PM - 项目进度汇报</li>
|
|
<li>• 4:00 PM - 团队协作讨论</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 输入区域 -->
|
|
<div class="p-6 bg-slate-900/80 glass-effect border-t border-slate-700">
|
|
<div class="flex items-end space-x-4">
|
|
<!-- 语音输入按钮 -->
|
|
<button class="w-12 h-12 bg-slate-700 rounded-full flex items-center justify-center text-white hover:bg-slate-600 transition glow-button">
|
|
<div class="voice-wave">
|
|
<div class="wave-bar"></div>
|
|
<div class="wave-bar"></div>
|
|
<div class="wave-bar"></div>
|
|
<div class="wave-bar"></div>
|
|
<div class="wave-bar"></div>
|
|
</div>
|
|
</button>
|
|
|
|
<!-- 文本输入框 -->
|
|
<div class="flex-1 relative">
|
|
<input
|
|
type="text"
|
|
id="message-input"
|
|
placeholder="输入消息..."
|
|
class="w-full bg-slate-800 text-white px-4 py-3 rounded-xl border border-slate-600 focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20 transition-all duration-300"
|
|
style="border: 1px solid rgba(99, 102, 241, 0.5); box-shadow: 0 0 10px rgba(99, 102, 241, 0.2);"
|
|
>
|
|
</div>
|
|
|
|
<!-- 发送按钮 -->
|
|
<button id="send-button" class="w-12 h-12 bg-gradient-to-r from-primary to-secondary rounded-full flex items-center justify-center text-white hover:from-primary/80 hover:to-secondary/80 transition glow-button pulse">
|
|
<i class="fas fa-paper-plane"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- 功能按钮 -->
|
|
<div class="flex justify-between items-center mt-3">
|
|
<div class="flex space-x-2">
|
|
<button class="p-2 bg-slate-700 text-white rounded-lg hover:bg-slate-600 transition">
|
|
<i class="fas fa-image"></i>
|
|
</button>
|
|
<button class="p-2 bg-slate-700 text-white rounded-lg hover:bg-slate-600 transition">
|
|
<i class="fas fa-paperclip"></i>
|
|
</button>
|
|
<button class="p-2 bg-slate-700 text-white rounded-lg hover:bg-slate-600 transition">
|
|
<i class="fas fa-microphone"></i>
|
|
</button>
|
|
</div>
|
|
<div class="flex items-center space-x-2">
|
|
<span class="text-slate-400 text-sm">连接状态</span>
|
|
<div class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- JavaScript -->
|
|
<script src="{{ url_for('static', filename='js/main.js') }}"></script>
|
|
</body>
|
|
</html>
|