-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
230 lines (213 loc) · 11.1 KB
/
Copy pathindex.html
File metadata and controls
230 lines (213 loc) · 11.1 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>komomood – 可爱优雅粉色系「心情日记」</title>
<link rel="icon" href="/komomood/assets/favicon.svg" type="image/svg+xml" />
<link rel="stylesheet" href="assets/tailwind.css" />
<link rel="stylesheet" href="assets/vendor/cal-heatmap/cal-heatmap.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style>
/* Custom gradient colors for mood levels */
.level-0 { background-color: #E5E7EB; }
.level-1 { background-color: #3B82F6; }
.level-2 { background-color: #60A5FA; }
.level-3 { background-color: #A78BFA; }
.level-4 { background-color: #F472B6; }
.level-5 { background-color: #EC4899; }
/* Heatmap grid styling */
.heatmap-grid {
display: grid;
grid-template-columns: repeat(53, 1fr);
grid-template-rows: repeat(7, 1fr);
grid-auto-flow: column; /* Fill vertically */
gap: 1px;
max-width: 100%;
overflow-x: auto;
}
.heatmap-cell {
width: 12px;
height: 12px;
bord
8000
er-radius: 2px;
cursor: pointer;
transition: all 0.2s ease;
}
.heatmap-cell:hover {
transform: scale(1.2);
z-index: 10;
position: relative;
}
@media (max-width: 768px) {
.heatmap-cell {
width: 8px;
height: 8px;
}
}
/* Tooltip styling */
.tooltip {
position: absolute;
background: white;
border: 1px solid #E5E7EB;
border-radius: 8px;
padding: 12px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
z-index: 20;
min-width: 200px;
pointer-events: none;
}
/* Pink gradient background */
body {
background: linear-gradient(135deg, #FDF2F8 0%, #FCE7F3 50%, #FAE8FF 100%);
min-height: 100vh;
}
</style>
</head>
<body class="font-sans">
<!-- Header -->
<header class="text-center py-8 px-4">
<div class="max-w-4xl mx-auto">
<h1 class="text-4xl font-bold text-gray-800 mb-2">
<i class="fas fa-heart text-pink-500 mr-2"></i>
komomood
</h1>
<p class="text-gray-600 text-lg">可爱优雅粉色系「心情日记」</p>
<p class="text-gray-500 mt-2">记录 koko 和 momo 的每日心情与关系分值</p>
</div>
</header>
<!-- Main Content -->
<main class="max-w-6xl mx-auto px-4 pb-8">
<!-- Action Button -->
<div class="text-center mb-8">
<button id="checkinBtn" class="bg-pink-500 hover:bg-pink-600 text-white px-6 py-3 rounded-full font-medium transition-all duration-200 hover:scale-105 shadow-lg">
<i class="fas fa-plus mr-2"></i>
去打卡
</button>
</div>
<!-- Legend -->
<div class="bg-white rounded-lg shadow-sm p-6 mb-8">
<h2 class="text-xl font-semibold text-gray-800 mb-4">
<i class="fas fa-palette text-pink-500 mr-2"></i>
心情色阶
</h2>
<div class="flex items-center justify-end space-x-2 flex-wrap">
<span class="text-sm text-gray-600">Less</span>
<div class="flex items-center space-x-1">
<div class="w-4 h-4 rounded-sm level-0" title="Level 0: No Data"></div>
<div class="w-4 h-4 rounded-sm level-1" title="Level 1"></div>
<div class="w-4 h-4 rounded-sm level-2" title="Level 2"></div>
<div class="w-4 h-4 rounded-sm level-3" title="Level 3"></div>
<div class="w-4 h-4 rounded-sm level-4" title="Level 4"></div>
<div class="w-4 h-4 rounded-sm level-5" title="Level 5"></div>
</div>
<span class="text-sm text-gray-600">More</span>
</div>
</div>
<!-- Heatmap Container -->
<div class="bg-white rounded-lg shadow-sm p-6 overflow-hidden">
<h2 class="text-xl font-semibold text-gray-800 mb-4">
<i class="fas fa-calendar text-pink-500 mr-2"></i>
最近一年的心情记录
</h2>
<!-- Month labels will be dynamically generated by JS -->
<div id="month-labels" class="relative h-4 text-xs text-gray-500 mb-2 pl-10">
<!-- e.g., <span>Jan</span> ... -->
</div>
<!-- Heatmap with day labels -->
<div class="flex">
<!-- Day labels -->
<div class="flex flex-col text-xs text-gray-500 pr-2 space-y-1" style="height: 98px;">
<div class="h-3"></div> <!-- Spacer for top month labels -->
<div class="flex-1 flex items-center"><span>Mon</span></div>
<div class="flex-1"></div>
<div class="flex-1 flex items-center"><span>Wed</span></div>
<div class="flex-1"></div>
<div class="flex-1 flex items-center"><span>Fri</span></div>
<div class="flex-1"></div>
</div>
<!-- Heatmap grid -->
<div id="heatmapGrid" class="heatmap-grid flex-grow"></div>
</div>
</div>
<!-- Stats Section -->
<div class="mt-8 grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="bg-white rounded-lg shadow-sm p-6 text-center">
<div class="text-2xl font-bold text-pink-500" id="totalDays">0</div>
<div class="text-gray-600">总打卡天数</div>
</div>
<div class="bg-white rounded-lg shadow-sm p-6 text-center">
<div class="text-2xl font-bold text-purple-500" id="avgKomoScore">0</div>
<div class="text-gray-600">平均关系分值</div>
</div>
<div class="bg-white rounded-lg shadow-sm p-6 text-center">
<div class="text-2xl font-bold text-blue-500" id="currentStreak">0</div>
<div class="text-gray-600">连续打卡天数</div>
</div>
</div>
</main>
<!-- Tooltip -->
<div id="tooltip" class="tooltip" style="display: none;"></div>
<!-- Loading indicator -->
<div id="loading" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
<div class="bg-white rounded-lg p-6 text-center">
<i class="fas fa-spinner fa-spin text-pink-500 text-2xl mb-2"></i>
<p class="text-gray-600">加载心情数据中...</p>
</div>
</div>
<!-- Check-in Modal -->
<div id="checkinModal" class="hidden fixed inset-0 z-50">
<div class="absolute inset-0 bg-black/40" data-modal-close></div>
<div class="absolute inset-0 flex items-center justify-center px-4">
<div class="w-full max-w-md bg-white rounded-2xl shadow-xl p-6">
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-semibold text-gray-800">
<i class="fas fa-clipboard-list text-pink-500 mr-2"></i>
新建打卡
</h3>
<button id="checkinCloseBtn" class="text-gray-400 hover:text-gray-600" title="关闭" data-modal-close>
<i class="fas fa-times"></i>
</button>
</div>
<form id="checkinForm" class="space-y-4">
<div>
<label for="ci_date" class="block text-sm text-gray-600 mb-1">日期</label>
<input id="ci_date" name="date" type="date" class="w-full border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-pink-300" required />
</div>
<div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
<div>
<label for="ci_koko" class="block text-sm text-gray-600 mb-1">Koko 心情 (1-5)</label>
<input id="ci_koko" name="kokoMood" type="number" min="1" max="5" step="1" class="w-full border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-pink-300" required />
</div>
<div>
<label for="ci_momo" class="block text-sm text-gray-600 mb-1">Momo 心情 (1-5)</label>
<input id="ci_momo" name="momoMood" type="number" min="1" max="5" step="1" class="w-full border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-pink-300" required />
</div>
<div>
<label for="ci_komo" class="block text-sm text-gray-600 mb-1">关系分值 (1-5)</label>
<input id="ci_komo" name="komoScore" type="number" min="1" max="5" step="1" class="w-full border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-pink-300" required />
</div>
</div>
<div>
<label for="ci_note" class="block text-sm text-gray-600 mb-1">备注</label>
<textarea id="ci_note" name="note" rows="3" maxlength="140" class="w-full border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-pink-300" placeholder="最多 140 字"></textarea>
</div>
<div>
<label for="ci_passphrase" class="block text-sm text-gray-600 mb-1">通行码 (MMDD)</label>
<input id="ci_passphrase" name="passphrase" type="text" pattern="^\d{4}$" maxlength="4" class="w-full border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-pink-300" placeholder="MMDD" required />
<div class="text-xs text-gray-500 mt-1">请输入四位数字（月月日日）</div>
</div>
<div id="checkinError" class="hidden text-sm text-red-500"></div>
<div id="checkinSuccess" class="hidden text-sm text-green-600 bg-green-50 p-3 rounded-lg border border-green-200"></div>
<div class="flex justify-end space-x-3 pt-2">
<button type="button" class="px-4 py-2 rounded-lg border text-gray-700 hover:bg-gray-50" data-modal-close>取消</button>
<button type="submit" class="px-4 py-2 rounded-lg bg-pink-500 text-white hover:bg-pink-600">提交</button>
</div>
</form>
</div>
</div>
</div>
<!-- Temporarily disable Cal-Heatmap until local D3 dependency is bundled -->
<!-- <script src="assets/vendor/cal-heatmap/cal-heatmap.min.js"></script> -->
<script src="app.js"></script>
</body>
</html>