137 lines
6.7 KiB
HTML
137 lines
6.7 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>个人展板 - 开心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>
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></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">
|
|
|
|
<!-- 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 Content -->
|
|
<main class="flex-1 overflow-y-auto p-4 lg:p-6 pb-24">
|
|
<div id="dashboard-grid" class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
|
|
<!-- Basic Info Card -->
|
|
<div class="bg-white p-6 rounded-xl shadow-sm">
|
|
<div class="flex justify-between items-center mb-4">
|
|
<h2 class="font-bold text-text-dark text-lg">基础信息</h2>
|
|
<i data-lucide="user-round" class="text-tech-blue"></i>
|
|
</div>
|
|
<div id="basic-info-container" class="grid grid-cols-2 gap-4 text-sm">
|
|
<!-- Basic info will be injected here by JS -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mood Chart Card -->
|
|
<div class="bg-white p-6 rounded-xl shadow-sm">
|
|
<div class="flex justify-between items-center mb-4">
|
|
<h2 class="font-bold text-text-dark text-lg">近期心情统计</h2>
|
|
<i data-lucide="activity" class="text-warm-orange"></i>
|
|
</div>
|
|
<div class="relative h-48">
|
|
<canvas id="moodChart"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Interests Card -->
|
|
<div class="bg-white p-6 rounded-xl shadow-sm">
|
|
<div class="flex justify-between items-center mb-4">
|
|
<h2 class="font-bold text-text-dark text-lg">兴趣爱好</h2>
|
|
<button id="add-interest-btn" class="text-text-medium hover:text-tech-blue transition-colors" title="添加兴趣">
|
|
<i data-lucide="plus" class="w-5 h-5"></i>
|
|
</button>
|
|
</div>
|
|
<div id="interests-container" class="flex flex-wrap gap-2 text-sm min-h-[36px]">
|
|
<!-- Interests will be injected here -->
|
|
</div>
|
|
<div class="mt-4">
|
|
<button id="explore-interests-btn" class="w-full text-sm bg-tech-blue/10 text-tech-blue font-semibold py-2 px-4 rounded-lg hover:bg-tech-blue/20 transition-colors flex items-center justify-center space-x-2">
|
|
<i data-lucide="sparkles" class="w-4 h-4"></i>
|
|
<span>探索可能发展的爱好</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Skills Card -->
|
|
<div class="bg-white p-6 rounded-xl shadow-sm">
|
|
<div class="flex justify-between items-center mb-4">
|
|
<h2 class="font-bold text-text-dark text-lg">生活技能</h2>
|
|
<button id="add-skill-btn" class="text-text-medium hover:text-tech-blue transition-colors" title="添加技能">
|
|
<i data-lucide="plus" class="w-5 h-5"></i>
|
|
</button>
|
|
</div>
|
|
<div id="skills-container" class="flex flex-wrap gap-2 text-sm min-h-[36px]">
|
|
<!-- Skills will be injected here -->
|
|
</div>
|
|
<div class="mt-4">
|
|
<button id="explore-skills-btn" class="w-full text-sm bg-tech-blue/10 text-tech-blue font-semibold py-2 px-4 rounded-lg hover:bg-tech-blue/20 transition-colors flex items-center justify-center space-x-2">
|
|
<i data-lucide="flask-conical" class="w-4 h-4"></i>
|
|
<span>探索可能发展的技能</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Personal Quotes Module -->
|
|
<div class="lg:col-span-2 bg-white p-6 rounded-xl shadow-sm">
|
|
<div class="flex justify-between items-center mb-4">
|
|
<h2 class="font-bold text-text-dark text-lg">个人语录</h2>
|
|
<button class="text-text-medium hover:text-tech-blue transition-colors" title="添加语录">
|
|
<i data-lucide="plus-square" class="w-5 h-5"></i>
|
|
</button>
|
|
</div>
|
|
<div id="quotes-container" class="space-y-4">
|
|
<!-- Quote cards will be injected here by JS -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Dynamic modules will be added here -->
|
|
|
|
</div>
|
|
|
|
<!-- Add custom module button -->
|
|
<div class="mt-6 text-center">
|
|
<button id="add-custom-module-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 justify-center space-x-2 mx-auto">
|
|
<i data-lucide="layout-template" class="w-5 h-5"></i>
|
|
<span>自由添加模块</span>
|
|
</button>
|
|
</div>
|
|
|
|
</main>
|
|
|
|
<!-- App Navigation -->
|
|
<div id="bottom-nav-placeholder"></div>
|
|
|
|
<script type="module" src="js/app_nav.js"></script>
|
|
<script type="module" src="personal_dashboard.js"></script>
|
|
</body>
|
|
|
|
</html>
|