优化调整
This commit is contained in:
@@ -0,0 +1,89 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>与开开聊天 - 开心APP</title>
|
||||
<link rel="icon" href="https://r2.flowith.net/files/o/1752574406770-thoughtful_kaikai_character_generation_index_1@1024x1024.png">
|
||||
<script src="https://cdn.tailwindcss.com?plugins=typography"></script>
|
||||
<script src="https://unpkg.com/lucide@latest"></script>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<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=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body class="bg-light-gray font-sans text-text-dark flex flex-col h-screen antialiased pb-20">
|
||||
|
||||
<!-- Chat Header -->
|
||||
<header class="bg-white shadow-md z-20 flex-shrink-0">
|
||||
<div class="container mx-auto px-4 py-3 flex items-center justify-between">
|
||||
<div class="flex items-center space-x-3">
|
||||
<a href="index.html" class="text-text-medium hover:text-tech-blue transition-colors">
|
||||
<i data-lucide="home" class="w-6 h-6"></i>
|
||||
</a>
|
||||
<a href="messages.html" class="text-text-medium hover:text-tech-blue transition-colors">
|
||||
<i data-lucide="bell" class="w-6 h-6"></i>
|
||||
</a>
|
||||
<img src="https://r2.flowith.net/files/o/1752574406770-thoughtful_kaikai_character_generation_index_1@1024x1024.png" alt="开开头像" class="w-10 h-10 rounded-full object-cover border-2 border-white shadow">
|
||||
<div>
|
||||
<h1 class="text-lg font-bold text-text-dark">开开</h1>
|
||||
<p class="text-xs text-text-medium flex items-center"><span class="w-2 h-2 bg-green-400 rounded-full mr-1.5"></span>在线</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center space-x-4 relative">
|
||||
<button id="view-history-btn" class="text-text-medium hover:text-tech-blue transition-colors">
|
||||
<i data-lucide="history" class="w-6 h-6"></i>
|
||||
</button>
|
||||
<a href="settings.html" class="text-text-medium hover:text-tech-blue transition-colors">
|
||||
<i data-lucide="user" class="w-6 h-6"></i>
|
||||
</a>
|
||||
|
||||
<div id="history-panel" class="hidden absolute right-0 top-full mt-2 w-72 bg-white rounded-xl shadow-2xl p-4 border border-gray-200/50 z-30">
|
||||
<div class="flex justify-between items-center mb-3">
|
||||
<h3 class="font-bold text-text-dark text-base">查看聊天记录</h3>
|
||||
<button id="close-history-panel-btn" class="text-text-medium hover:text-tech-blue p-1 rounded-full text-2xl leading-none flex items-center justify-center">×</button>
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<label for="history-search-input" class="text-sm font-medium text-text-medium">搜索关键词</label>
|
||||
<div class="relative mt-1">
|
||||
<i data-lucide="search" class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400"></i>
|
||||
<input type="search" id="history-search-input" placeholder="输入关键词..." class="w-full bg-gray-100 border-transparent rounded-lg pl-9 pr-4 py-2 focus:outline-none focus:ring-2 focus:ring-tech-blue text-sm">
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label for="history-date-input" class="text-sm font-medium text-text-medium">按日期查询</label>
|
||||
<input type="date" id="history-date-input" class="w-full bg-gray-100 border-transparent rounded-lg mt-1 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-tech-blue text-sm">
|
||||
</div>
|
||||
</div>
|
||||
<button id="clear-history-filter-btn" class="w-full text-center text-sm text-tech-blue hover:underline mt-4 hidden">显示完整对话</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Chat Messages Area -->
|
||||
<main id="chat-messages" class="flex-1 overflow-y-auto p-4 lg:p-6 space-y-6">
|
||||
<!-- Messages will be injected here by chat_manager.js -->
|
||||
</main>
|
||||
|
||||
<!-- Message Input Footer -->
|
||||
<footer id="message-footer" class="bg-white p-2 sm:p-4 border-t border-gray-200 flex-shrink-0">
|
||||
<div class="container mx-auto flex items-center space-x-2">
|
||||
<input type="text" id="message-input" placeholder="和开开说点什么..." class="flex-1 w-full bg-gray-100 border-transparent rounded-full px-4 py-3 focus:outline-none focus:ring-2 focus:ring-tech-blue transition-shadow">
|
||||
<button id="send-button" class="bg-tech-blue text-white rounded-full p-3 hover:bg-blue-600 transition-all duration-300 transform hover:scale-110 shadow-lg shadow-blue-500/30 flex-shrink-0">
|
||||
<i data-lucide="send" class="w-5 h-5"></i>
|
||||
</button>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- App Navigation -->
|
||||
<div id="bottom-nav-placeholder"></div>
|
||||
|
||||
<script type="module" src="js/app_nav.js"></script>
|
||||
<script type="module" src="js/chat_manager.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user