优化调整
This commit is contained in:
@@ -0,0 +1,166 @@
|
||||
<!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">
|
||||
<!-- Header -->
|
||||
<header id="main-header" class="fixed top-0 left-0 right-0 z-40 bg-white/80 backdrop-blur-lg transition-all duration-300">
|
||||
<div class="container mx-auto px-6 py-4 flex justify-between items-center">
|
||||
<a href="index.html" class="flex items-center space-x-2">
|
||||
<svg width="32" height="32" viewBox="0 0 100 100" class="text-tech-blue">
|
||||
<path fill="currentColor" d="M85.4,37.3C85.4,37.3,85.4,37.3,85.4,37.3c-2.8-9.9-10-17.7-19.1-21.2c-0.2-0.1-0.5-0.1-0.7-0.2c-0.1,0-0.2-0.1-0.3-0.1 c-1.2-0.4-2.5-0.8-3.7-1.1c-1-0.2-2-0.4-3-0.6c-1.1-0.2-2.1-0.3-3.2-0.4c-1.2-0.1-2.4-0.2-3.6-0.2c-0.1,0-0.2,0-0.3,0h-0.1 c-0.1,0-0.2,0-0.3,0c-1.2,0-2.4,0.1-3.6,0.2c-1.1,0.1-2.1,0.2-3.2,0.4c-1,0.2-2,0.4-3,0.6c-1.3,0.3-2.5,0.6-3.7,1.1 c-0.1,0-0.2,0.1-0.3,0.1c-0.2,0.1-0.5,0.1-0.7,0.2C21.6,19.6,14.4,27.4,11.6,37.3c0,0,0,0.1-0.1,0.1C8,47.7,8,58.8,11.5,69.2 c0,0.1,0.1,0.1,0.1,0.2c2.8,9.9,10,17.7,19.1,21.2c0.2,0.1,0.5,0.1,0.7,0.2c0.1,0,0.2,0.1,0.3,0.1c1.2,0.4,2.5,0.8,3.7,1.1 c1,0.2,2,0.4,3,0.6c1.1,0.2,2.1,0.3,3.2,0.4c1.2,0.1,2.4,0.2,3.6,0.2c0.1,0,0.2,0,0.3,0h0.1c0.1,0,0.2,0,0.3,0 c1.2,0,2.4-0.1,3.6-0.2c-1.1-0.1-2.1-0.2-3.2-0.4c1-0.2,2-0.4,3-0.6c1.3-0.3,2.5-0.6,3.7-1.1c0.1,0,0.2-0.1,0.3-0.1 c0.2-0.1,0.5-0.1,0.7-0.2c9.1-3.5,16.3-11.3,19.1-21.2c0-0.1,0.1-0.1,0.1-0.2C89,58.8,89,47.7,85.4,37.3z M50,77.9 c-15.4,0-27.9-12.5-27.9-27.9S34.6,22.1,50,22.1s27.9,12.5,27.9,27.9S65.4,77.9,50,77.9z"></path>
|
||||
<path fill="var(--warm-orange)" d="M50,88.8c-21.4,0-38.8-17.4-38.8-38.8S28.6,11.2,50,11.2s38.8,17.4,38.8,38.8S71.4,88.8,50,88.8z M50,16.2 c-18.7,0-33.8,15.1-33.8,33.8S31.3,83.8,50,83.8s33.8-15.1,33.8-33.8S68.7,16.2,50,16.2z"></path>
|
||||
</svg>
|
||||
<span class="text-2xl font-bold text-tech-blue">开心APP</span>
|
||||
</a>
|
||||
<nav class="hidden lg:flex items-center space-x-8" id="nav-menu">
|
||||
</nav>
|
||||
<div class="flex items-center space-x-4">
|
||||
<a href="settings.html" class="hidden sm:inline-block text-text-medium hover:text-tech-blue transition-colors">登录</a>
|
||||
<a href="chat.html" class="bg-tech-blue text-white px-5 py-2.5 rounded-full font-semibold hover:bg-blue-600 transition-all duration-300 transform hover:scale-105 shadow-lg shadow-blue-500/20">免费开始</a>
|
||||
<button id="mobile-menu-button" class="lg:hidden text-text-dark">
|
||||
<i data-lucide="menu" class="w-6 h-6"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div id="mobile-menu" class="hidden fixed inset-0 bg-white/90 backdrop-blur-xl z-30 p-8 lg:hidden">
|
||||
<nav class="flex flex-col space-y-6 text-center mt-16" id="mobile-nav-menu">
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<main class="pt-24 lg:pt-32 bg-light-gray pb-20">
|
||||
<div class="container mx-auto px-6">
|
||||
<header class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-10 animate-fade-in-up" style="animation-delay: 0.1s;">
|
||||
<div class="mb-4 sm:mb-0">
|
||||
<h1 class="text-4xl md:text-5xl font-bold text-text-dark flex items-center gap-3">
|
||||
<i data-lucide="map-pin" class="w-10 h-10 text-warm-orange"></i>
|
||||
人生轨迹
|
||||
</h1>
|
||||
<p class="text-lg text-text-medium mt-4">记录你的每一个重要时刻，见证成长</p>
|
||||
</div>
|
||||
<button id="add-life-event-btn" class="bg-warm-orange text-white px-6 py-3 rounded-full font-semibold hover:bg-orange-600 transition-all duration-300 transform hover:scale-105 shadow-lg shadow-orange-500/30 flex items-center space-x-2 animate-fade-in-up" style="animation-delay: 0.3s;">
|
||||
<i data-lucide="plus-circle" class="w-5 h-5"></i>
|
||||
<span>添加人生事件</span>
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<div id="life-events-timeline-container" class="animate-fade-in-up" style="animation-delay: 0.5s;">
|
||||
<div id="life-events-empty" class="hidden text-center py-20 border-2 border-dashed border-gray-300 rounded-2xl">
|
||||
<i data-lucide="flag" class="w-16 h-16 mx-auto text-gray-400 mb-4"></i>
|
||||
<p class="text-text-medium text-lg">你可以添加一件重要的事——不论它是美好还是悲伤，都值得被记录。</p>
|
||||
</div>
|
||||
<div id="life-events-timeline" class="space-y-12">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-white">
|
||||
<div class="container mx-auto px-6 py-12">
|
||||
<div class="mt-12 border-t border-gray-200 pt-8 text-center text-text-medium">
|
||||
<p>© 2025 开心APP. All Rights Reserved. 来自"开心"星球的温柔科技。</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<!-- Add Life Event Modal -->
|
||||
<div id="add-event-modal" class="fixed inset-0 bg-gray-900/80 backdrop-blur-sm z-[9998] hidden items-center justify-center p-4 transition-opacity duration-300">
|
||||
<div class="bg-light-gray rounded-2xl shadow-2xl w-full max-w-lg transform transition-all duration-300 scale-95 opacity-0" id="add-event-modal-content">
|
||||
<form id="life-event-form">
|
||||
<div class="p-6 border-b border-gray-200">
|
||||
<h3 class="text-2xl font-bold text-text-dark flex items-center gap-3"><i data-lucide="feather" class="text-tech-blue"></i>记录一件人生大事</h3>
|
||||
</div>
|
||||
<div class="p-6 space-y-5">
|
||||
<div>
|
||||
<label for="event-date" class="block text-sm font-medium text-text-medium mb-1.5">事件发生日期</label>
|
||||
<input type="date" id="event-date" name="date" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-tech-blue focus:border-transparent transition" required>
|
||||
</div>
|
||||
<div>
|
||||
<label for="event-title" class="block text-sm font-medium text-text-medium mb-1.5">事件标题</label>
|
||||
<input type="text" id="event-title" name="title" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-tech-blue focus:border-transparent transition" placeholder="例如：大学毕业" required>
|
||||
</div>
|
||||
<div>
|
||||
<label for="event-content" class="block text-sm font-medium text-text-medium mb-1.5">详细内容</label>
|
||||
<textarea id="event-content" name="content" rows="5" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-tech-blue focus:border-transparent transition" placeholder="详细描述一下当时发生了什么，以及你的感受..." required></textarea>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-text-medium mb-1.5">这是...?</label>
|
||||
<div class="flex gap-4">
|
||||
<label class="flex items-center gap-2 cursor-pointer">
|
||||
<input type="radio" name="eventType" value="positive" class="form-radio text-emerald-500 focus:ring-emerald-400" checked>
|
||||
<span class="text-emerald-600 font-medium">正面/高光事件</span>
|
||||
</label>
|
||||
<label class="flex items-center gap-2 cursor-pointer">
|
||||
<input type="radio" name="eventType" value="negative" class="form-radio text-red-500 focus:ring-red-400">
|
||||
<span class="text-red-600 font-medium">负面/创伤事件</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-6 bg-white rounded-b-2xl flex justify-end items-center gap-4">
|
||||
<button type="button" id="cancel-add-event" class="px-5 py-2.5 rounded-lg text-text-medium hover:bg-gray-100 transition">取消</button>
|
||||
<button type="submit" class="bg-tech-blue text-white px-6 py-2.5 rounded-lg font-semibold hover:bg-blue-600 transition-all duration-300">保存并获取AI分析</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Write Letter Modal -->
|
||||
<div id="write-letter-modal" class="fixed inset-0 bg-gray-900/80 backdrop-blur-sm z-[9999] hidden items-center justify-center p-4 transition-opacity duration-300">
|
||||
<div class="bg-light-gray rounded-2xl shadow-2xl w-full max-w-2xl transform transition-all duration-300 scale-95 opacity-0" id="write-letter-modal-content">
|
||||
<div class="p-6 border-b border-gray-200 flex justify-between items-start">
|
||||
<div>
|
||||
<h3 class="text-2xl font-bold text-text-dark flex items-center gap-3"><i data-lucide="mail" class="text-warm-orange"></i>写给过去的自己</h3>
|
||||
<p class="text-text-medium mt-1">让开开帮你给那时的自己带去一些鼓励和智慧吧</p>
|
||||
</div>
|
||||
<button id="close-letter-modal" class="text-text-medium hover:text-tech-blue transition-colors">
|
||||
<i data-lucide="x" class="w-7 h-7"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="p-6 max-h-[60vh] overflow-y-auto">
|
||||
<p class="text-text-medium mb-4">正在为 <strong id="letter-event-title" class="text-tech-blue"></strong> 事件生成信件...</p>
|
||||
<div id="letter-content" class="bg-white p-6 rounded-lg border prose max-w-none">
|
||||
<div id="letter-placeholder" class="text-center py-10">
|
||||
<div class="animate-spin rounded-full h-12 w-12 border-b-2 border-tech-blue mx-auto"></div>
|
||||
<p class="mt-4 text-text-medium">开开正在为你撰写信件...</p>
|
||||
</div>
|
||||
<div id="letter-final-content" class="hidden"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-6 bg-white rounded-b-2xl flex justify-end items-center gap-4">
|
||||
<button id="regenerate-letter-btn" class="bg-gray-200 text-text-dark px-5 py-2.5 rounded-lg font-semibold hover:bg-gray-300 transition-all duration-300 flex items-center gap-2">
|
||||
<i data-lucide="refresh-cw" class="w-4 h-4"></i>
|
||||
<span>重新生成</span>
|
||||
</button>
|
||||
<button id="copy-letter-btn" class="bg-tech-blue text-white px-6 py-2.5 rounded-lg font-semibold hover:bg-blue-600 transition-all duration-300 flex items-center gap-2">
|
||||
<i data-lucide="copy" class="w-4 h-4"></i>
|
||||
<span>复制信件</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script type="module" src="js/shared.js"></script>
|
||||
<script type="module" src="life_trajectory.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user