126 lines
7.7 KiB
HTML
126 lines
7.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN" class="scroll-smooth">
|
|
|
|
<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">
|
|
|
|
<div id="app-container" class="antialiased flex flex-col min-h-screen">
|
|
<!-- Header -->
|
|
<header class="bg-white shadow-md z-10 flex-shrink-0">
|
|
<div class="container mx-auto px-4 py-3 flex items-center justify-between relative">
|
|
<div class="flex items-center space-x-4">
|
|
<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>
|
|
</div>
|
|
<h1 class="text-lg font-bold text-text-dark absolute left-1/2 -translate-x-1/2">话题追踪</h1>
|
|
<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>
|
|
</header>
|
|
|
|
<main class="flex-grow pt-8 pb-28">
|
|
<div class="container mx-auto px-6">
|
|
<div class="text-center mb-12 animate-fade-in-up">
|
|
<h1 class="text-3xl md:text-4xl font-bold text-text-dark">洞察你的思绪，整理你的生活</h1>
|
|
<p class="text-base text-text-medium mt-3 max-w-2xl mx-auto">开开会自动梳理你最近关心的事，你也可以手动创建任何想追踪的话题，见证自己的思考与成长。</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-5 gap-12">
|
|
<div class="lg:col-span-3 animate-fade-in-up" style="animation-delay: 0.2s;">
|
|
<div class="flex items-center mb-6 space-x-3">
|
|
<i data-lucide="brain-circuit" class="w-8 h-8 text-tech-blue"></i>
|
|
<h2 class="text-2xl font-bold text-text-dark">AI 自动总结</h2>
|
|
</div>
|
|
<div id="ai-summary-list" class="space-y-6">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="lg:col-span-2 animate-fade-in-up" style="animation-delay: 0.4s;">
|
|
<div class="bg-white p-6 sm:p-8 rounded-2xl shadow-lg border border-gray-200/50 scroll-mt-24" id="new-topic-form-container">
|
|
<div class="flex items-center mb-6 space-x-3">
|
|
<i data-lucide="plus-circle" class="w-8 h-8 text-warm-orange"></i>
|
|
<h2 class="text-2xl font-bold text-text-dark">我的话题</h2>
|
|
</div>
|
|
<form id="new-topic-form" class="space-y-4">
|
|
<div>
|
|
<label for="topic-title" class="block text-sm font-medium text-text-medium mb-1">话题标题</label>
|
|
<input type="text" id="topic-title" name="title" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-tech-blue focus:border-transparent transition" placeholder="例如：暑期健身计划" required>
|
|
</div>
|
|
<div>
|
|
<label for="topic-content" class="block text-sm font-medium text-text-medium mb-1">初始内容</label>
|
|
<textarea id="topic-content" name="content" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-tech-blue focus:border-transparent transition" placeholder="写下你的计划、想法或任何琐事..." required></textarea>
|
|
</div>
|
|
<button type="submit" class="w-full bg-warm-orange text-white px-5 py-3 rounded-lg font-semibold hover:bg-orange-600 transition-all duration-300 transform hover:scale-105 shadow-lg shadow-orange-500/30">创建新话题</button>
|
|
</form>
|
|
|
|
<div class="mt-8 border-t border-gray-200 pt-6">
|
|
<div class="flex items-center mb-4 space-x-3">
|
|
<i data-lucide="list" class="w-6 h-6 text-text-medium"></i>
|
|
<h3 class="text-xl font-semibold text-text-dark">已创建的话题</h3>
|
|
</div>
|
|
<div id="user-topics-list" class="space-y-4 max-h-96 overflow-y-auto pr-2">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- App Navigation -->
|
|
<div id="bottom-nav-placeholder"></div>
|
|
</div>
|
|
|
|
<!-- Topic Detail Modal -->
|
|
<div id="topic-detail-modal" class="fixed inset-0 bg-black bg-opacity-60 backdrop-blur-sm z-50 hidden items-center justify-center p-4">
|
|
<div class="bg-light-gray rounded-2xl shadow-xl w-full max-w-2xl max-h-[90vh] flex flex-col">
|
|
<div class="p-5 border-b bg-white rounded-t-2xl flex justify-between items-start">
|
|
<div>
|
|
<h2 id="modal-topic-title" class="text-2xl font-bold text-text-dark">...</h2>
|
|
<p id="modal-topic-date" class="text-sm text-text-medium"></p>
|
|
</div>
|
|
<button id="close-modal-btn" class="text-text-medium hover:text-tech-blue transition-colors p-1">
|
|
<i data-lucide="x" class="w-7 h-7"></i>
|
|
</button>
|
|
</div>
|
|
<div class="p-6 overflow-y-auto flex-1">
|
|
<div id="modal-timeline-container" class="space-y-8">
|
|
</div>
|
|
<div id="modal-suggestion-container" class="mt-8">
|
|
</div>
|
|
</div>
|
|
<div class="p-6 border-t bg-white rounded-b-2xl">
|
|
<h3 class="text-base font-semibold text-text-dark mb-2">添加新进展</h3>
|
|
<form id="add-entry-form" class="flex items-start space-x-3">
|
|
<textarea id="new-entry-content" rows="2" class="flex-1 w-full bg-white border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-tech-blue transition-shadow text-sm" placeholder="为这个话题添加新进展..."></textarea>
|
|
<button type="submit" class="bg-tech-blue text-white rounded-lg px-4 py-2 h-full font-semibold hover:bg-blue-600 transition-colors flex-shrink-0">
|
|
<i data-lucide="plus" class="w-5 h-5"></i>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="module" src="js/app_nav.js"></script>
|
|
<script type="module" src="topic_tracker.js"></script>
|
|
</body>
|
|
|
|
</html>
|