BHelfmann commited on
Commit
9c1d89d
·
verified ·
1 Parent(s): 887eacf

Write a webapp called "Point System" that manages my children's point. They can earn points for chores like setting the table, carrying wash baskets to the upper rooms, or bringing out the trash; then they can spend them for games and sweets. Parents can manage the points, add points at will, offer new chores, and see statistics. - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +676 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Point System
3
- emoji: 🐨
4
  colorFrom: yellow
5
- colorTo: green
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: point-system
3
+ emoji: 🐳
4
  colorFrom: yellow
5
+ colorTo: gray
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,676 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Family Point System</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .gradient-bg {
11
+ background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
12
+ }
13
+ .point-badge {
14
+ animation: pulse 2s infinite;
15
+ }
16
+ @keyframes pulse {
17
+ 0% { transform: scale(1); }
18
+ 50% { transform: scale(1.05); }
19
+ 100% { transform: scale(1); }
20
+ }
21
+ .chart-container {
22
+ height: 300px;
23
+ }
24
+ .flip-card {
25
+ perspective: 1000px;
26
+ }
27
+ .flip-card-inner {
28
+ transition: transform 0.6s;
29
+ transform-style: preserve-3d;
30
+ }
31
+ .flip-card:hover .flip-card-inner {
32
+ transform: rotateY(180deg);
33
+ }
34
+ .flip-card-front, .flip-card-back {
35
+ backface-visibility: hidden;
36
+ }
37
+ .flip-card-back {
38
+ transform: rotateY(180deg);
39
+ }
40
+ </style>
41
+ </head>
42
+ <body class="gradient-bg min-h-screen font-sans">
43
+ <div class="container mx-auto px-4 py-8">
44
+ <!-- Header -->
45
+ <header class="flex justify-between items-center mb-8">
46
+ <div>
47
+ <h1 class="text-3xl font-bold text-indigo-800">Family Point System</h1>
48
+ <p class="text-indigo-600">Teaching responsibility through rewards</p>
49
+ </div>
50
+ <div class="flex items-center space-x-4">
51
+ <div class="relative group">
52
+ <button id="parentToggle" class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition">
53
+ <i class="fas fa-user-shield mr-2"></i>Parent Mode
54
+ </button>
55
+ <div id="parentPanel" class="hidden absolute right-0 mt-2 w-64 bg-white rounded-lg shadow-lg p-4 z-10">
56
+ <div class="mb-4">
57
+ <label class="block text-gray-700 mb-2">Add Points</label>
58
+ <div class="flex">
59
+ <select id="childSelect" class="flex-1 border rounded-l-lg px-2 py-1">
60
+ <option value="emma">Emma</option>
61
+ <option value="liam">Liam</option>
62
+ </select>
63
+ <input type="number" id="pointAmount" class="w-20 border-t border-b px-2 py-1" placeholder="10">
64
+ <button id="addPointsBtn" class="bg-green-500 text-white px-3 py-1 rounded-r-lg hover:bg-green-600">
65
+ <i class="fas fa-plus"></i>
66
+ </button>
67
+ </div>
68
+ </div>
69
+ <div>
70
+ <label class="block text-gray-700 mb-2">New Chore</label>
71
+ <div class="flex">
72
+ <input type="text" id="newChore" class="flex-1 border rounded-l-lg px-2 py-1" placeholder="Chore name">
73
+ <input type="number" id="chorePoints" class="w-20 border-t border-b px-2 py-1" placeholder="Points">
74
+ <button id="addChoreBtn" class="bg-blue-500 text-white px-3 py-1 rounded-r-lg hover:bg-blue-600">
75
+ <i class="fas fa-plus"></i>
76
+ </button>
77
+ </div>
78
+ </div>
79
+ </div>
80
+ </div>
81
+ <div class="bg-white rounded-lg shadow p-2">
82
+ <div class="text-sm text-gray-500">Today</div>
83
+ <div class="text-lg font-semibold" id="currentDate"></div>
84
+ </div>
85
+ </div>
86
+ </header>
87
+
88
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
89
+ <!-- Children Points Summary -->
90
+ <div class="bg-white rounded-xl shadow-lg p-6 lg:col-span-1">
91
+ <h2 class="text-xl font-bold text-gray-800 mb-4 flex items-center">
92
+ <i class="fas fa-child-reaching mr-2 text-indigo-600"></i> Children Points
93
+ </h2>
94
+ <div class="space-y-4">
95
+ <div class="flex items-center justify-between p-3 bg-indigo-50 rounded-lg">
96
+ <div class="flex items-center">
97
+ <div class="w-10 h-10 rounded-full bg-pink-200 flex items-center justify-center mr-3">
98
+ <i class="fas fa-female text-pink-600"></i>
99
+ </div>
100
+ <div>
101
+ <h3 class="font-semibold">Emma</h3>
102
+ <p class="text-xs text-gray-500">Age 9</p>
103
+ </div>
104
+ </div>
105
+ <div class="point-badge bg-pink-100 text-pink-800 px-3 py-1 rounded-full font-bold flex items-center">
106
+ <i class="fas fa-coins mr-1"></i>
107
+ <span id="emmaPoints">125</span>
108
+ </div>
109
+ </div>
110
+ <div class="flex items-center justify-between p-3 bg-indigo-50 rounded-lg">
111
+ <div class="flex items-center">
112
+ <div class="w-10 h-10 rounded-full bg-blue-200 flex items-center justify-center mr-3">
113
+ <i class="fas fa-male text-blue-600"></i>
114
+ </div>
115
+ <div>
116
+ <h3 class="font-semibold">Liam</h3>
117
+ <p class="text-xs text-gray-500">Age 7</p>
118
+ </div>
119
+ </div>
120
+ <div class="point-badge bg-blue-100 text-blue-800 px-3 py-1 rounded-full font-bold flex items-center">
121
+ <i class="fas fa-coins mr-1"></i>
122
+ <span id="liamPoints">80</span>
123
+ </div>
124
+ </div>
125
+ </div>
126
+
127
+ <div class="mt-6">
128
+ <h3 class="font-semibold text-gray-700 mb-2">Recent Activity</h3>
129
+ <div class="space-y-2 max-h-48 overflow-y-auto">
130
+ <div class="flex items-start text-sm p-2 hover:bg-gray-50 rounded">
131
+ <div class="w-6 h-6 bg-green-100 text-green-600 rounded-full flex items-center justify-center mr-2 mt-0.5">
132
+ <i class="fas fa-plus text-xs"></i>
133
+ </div>
134
+ <div>
135
+ <p>Emma earned 10 points for <span class="font-medium">Setting the table</span></p>
136
+ <p class="text-xs text-gray-400">Today, 6:30 PM</p>
137
+ </div>
138
+ </div>
139
+ <div class="flex items-start text-sm p-2 hover:bg-gray-50 rounded">
140
+ <div class="w-6 h-6 bg-red-100 text-red-600 rounded-full flex items-center justify-center mr-2 mt-0.5">
141
+ <i class="fas fa-minus text-xs"></i>
142
+ </div>
143
+ <div>
144
+ <p>Liam spent 15 points for <span class="font-medium">Video game time</span></p>
145
+ <p class="text-xs text-gray-400">Today, 5:15 PM</p>
146
+ </div>
147
+ </div>
148
+ <div class="flex items-start text-sm p-2 hover:bg-gray-50 rounded">
149
+ <div class="w-6 h-6 bg-green-100 text-green-600 rounded-full flex items-center justify-center mr-2 mt-0.5">
150
+ <i class="fas fa-plus text-xs"></i>
151
+ </div>
152
+ <div>
153
+ <p>Liam earned 5 points for <span class="font-medium">Taking out trash</span></p>
154
+ <p class="text-xs text-gray-400">Today, 4:45 PM</p>
155
+ </div>
156
+ </div>
157
+ <div class="flex items-start text-sm p-2 hover:bg-gray-50 rounded">
158
+ <div class="w-6 h-6 bg-green-100 text-green-600 rounded-full flex items-center justify-center mr-2 mt-0.5">
159
+ <i class="fas fa-plus text-xs"></i>
160
+ </div>
161
+ <div>
162
+ <p>Emma earned 20 points for <span class="font-medium">Laundry help</span></p>
163
+ <p class="text-xs text-gray-400">Yesterday, 7:30 PM</p>
164
+ </div>
165
+ </div>
166
+ </div>
167
+ </div>
168
+ </div>
169
+
170
+ <!-- Main Content -->
171
+ <div class="lg:col-span-2 space-y-6">
172
+ <!-- Available Chores -->
173
+ <div class="bg-white rounded-xl shadow-lg p-6">
174
+ <div class="flex justify-between items-center mb-4">
175
+ <h2 class="text-xl font-bold text-gray-800 flex items-center">
176
+ <i class="fas fa-broom mr-2 text-indigo-600"></i> Available Chores
177
+ </h2>
178
+ <div class="relative">
179
+ <button id="filterBtn" class="flex items-center text-sm text-gray-600 hover:text-indigo-600">
180
+ <i class="fas fa-filter mr-1"></i> Filter
181
+ </button>
182
+ <div id="filterDropdown" class="hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg z-10 p-2">
183
+ <label class="flex items-center px-2 py-1 hover:bg-gray-100 rounded cursor-pointer">
184
+ <input type="checkbox" class="mr-2" checked> Easy (1-5 pts)
185
+ </label>
186
+ <label class="flex items-center px-2 py-1 hover:bg-gray-100 rounded cursor-pointer">
187
+ <input type="checkbox" class="mr-2" checked> Medium (6-15 pts)
188
+ </label>
189
+ <label class="flex items-center px-2 py-1 hover:bg-gray-100 rounded cursor-pointer">
190
+ <input type="checkbox" class="mr-2" checked> Hard (16+ pts)
191
+ </label>
192
+ </div>
193
+ </div>
194
+ </div>
195
+
196
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
197
+ <!-- Chore cards will be added here dynamically -->
198
+ <div class="flip-card">
199
+ <div class="flip-card-inner">
200
+ <div class="flip-card-front border border-gray-200 rounded-lg p-4 hover:shadow-md transition cursor-pointer">
201
+ <div class="flex justify-between items-start">
202
+ <div>
203
+ <h3 class="font-semibold">Set the table</h3>
204
+ <p class="text-sm text-gray-500">Before dinner time</p>
205
+ </div>
206
+ <div class="bg-green-100 text-green-800 px-2 py-1 rounded-full text-xs font-bold">
207
+ 10 pts
208
+ </div>
209
+ </div>
210
+ <div class="mt-3 flex justify-between items-center">
211
+ <span class="text-xs bg-indigo-100 text-indigo-800 px-2 py-1 rounded">Daily</span>
212
+ <button class="text-xs bg-indigo-600 text-white px-3 py-1 rounded hover:bg-indigo-700 transition">
213
+ Complete <i class="fas fa-check ml-1"></i>
214
+ </button>
215
+ </div>
216
+ </div>
217
+ <div class="flip-card-back bg-indigo-50 rounded-lg p-4 flex flex-col justify-between h-full">
218
+ <div>
219
+ <h3 class="font-semibold text-indigo-800">Set the table</h3>
220
+ <p class="text-sm text-indigo-600 mt-1">Includes plates, utensils, glasses, and napkins for all family members</p>
221
+ </div>
222
+ <div class="flex justify-between items-center mt-4">
223
+ <div class="text-xs">
224
+ <p class="text-indigo-600">Last completed:</p>
225
+ <p class="font-medium">Today by Emma</p>
226
+ </div>
227
+ <button class="text-xs bg-indigo-600 text-white px-3 py-1 rounded hover:bg-indigo-700 transition">
228
+ Complete <i class="fas fa-check ml-1"></i>
229
+ </button>
230
+ </div>
231
+ </div>
232
+ </div>
233
+ </div>
234
+
235
+ <div class="flip-card">
236
+ <div class="flip-card-inner">
237
+ <div class="flip-card-front border border-gray-200 rounded-lg p-4 hover:shadow-md transition cursor-pointer">
238
+ <div class="flex justify-between items-start">
239
+ <div>
240
+ <h3 class="font-semibold">Take out trash</h3>
241
+ <p class="text-sm text-gray-500">When bin is full</p>
242
+ </div>
243
+ <div class="bg-green-100 text-green-800 px-2 py-1 rounded-full text-xs font-bold">
244
+ 5 pts
245
+ </div>
246
+ </div>
247
+ <div class="mt-3 flex justify-between items-center">
248
+ <span class="text-xs bg-indigo-100 text-indigo-800 px-2 py-1 rounded">As needed</span>
249
+ <button class="text-xs bg-indigo-600 text-white px-3 py-1 rounded hover:bg-indigo-700 transition">
250
+ Complete <i class="fas fa-check ml-1"></i>
251
+ </button>
252
+ </div>
253
+ </div>
254
+ <div class="flip-card-back bg-indigo-50 rounded-lg p-4 flex flex-col justify-between h-full">
255
+ <div>
256
+ <h3 class="font-semibold text-indigo-800">Take out trash</h3>
257
+ <p class="text-sm text-indigo-600 mt-1">Take kitchen trash to outside bin and replace with new bag</p>
258
+ </div>
259
+ <div class="flex justify-between items-center mt-4">
260
+ <div class="text-xs">
261
+ <p class="text-indigo-600">Last completed:</p>
262
+ <p class="font-medium">Today by Liam</p>
263
+ </div>
264
+ <button class="text-xs bg-indigo-600 text-white px-3 py-1 rounded hover:bg-indigo-700 transition">
265
+ Complete <i class="fas fa-check ml-1"></i>
266
+ </button>
267
+ </div>
268
+ </div>
269
+ </div>
270
+ </div>
271
+
272
+ <div class="flip-card">
273
+ <div class="flip-card-inner">
274
+ <div class="flip-card-front border border-gray-200 rounded-lg p-4 hover:shadow-md transition cursor-pointer">
275
+ <div class="flex justify-between items-start">
276
+ <div>
277
+ <h3 class="font-semibold">Carry laundry baskets</h3>
278
+ <p class="text-sm text-gray-500">Upstairs and downstairs</p>
279
+ </div>
280
+ <div class="bg-green-100 text-green-800 px-2 py-1 rounded-full text-xs font-bold">
281
+ 20 pts
282
+ </div>
283
+ </div>
284
+ <div class="mt-3 flex justify-between items-center">
285
+ <span class="text-xs bg-indigo-100 text-indigo-800 px-2 py-1 rounded">Weekly</span>
286
+ <button class="text-xs bg-indigo-600 text-white px-3 py-1 rounded hover:bg-indigo-700 transition">
287
+ Complete <i class="fas fa-check ml-1"></i>
288
+ </button>
289
+ </div>
290
+ </div>
291
+ <div class="flip-card-back bg-indigo-50 rounded-lg p-4 flex flex-col justify-between h-full">
292
+ <div>
293
+ <h3 class="font-semibold text-indigo-800">Carry laundry baskets</h3>
294
+ <p class="text-sm text-indigo-600 mt-1">Take full baskets upstairs and empty ones back down</p>
295
+ </div>
296
+ <div class="flex justify-between items-center mt-4">
297
+ <div class="text-xs">
298
+ <p class="text-indigo-600">Last completed:</p>
299
+ <p class="font-medium">Yesterday by Emma</p>
300
+ </div>
301
+ <button class="text-xs bg-indigo-600 text-white px-3 py-1 rounded hover:bg-indigo-700 transition">
302
+ Complete <i class="fas fa-check ml-1"></i>
303
+ </button>
304
+ </div>
305
+ </div>
306
+ </div>
307
+ </div>
308
+
309
+ <div class="flip-card">
310
+ <div class="flip-card-inner">
311
+ <div class="flip-card-front border border-gray-200 rounded-lg p-4 hover:shadow-md transition cursor-pointer">
312
+ <div class="flex justify-between items-start">
313
+ <div>
314
+ <h3 class="font-semibold">Clean bedroom</h3>
315
+ <p class="text-sm text-gray-500">Weekly deep clean</p>
316
+ </div>
317
+ <div class="bg-green-100 text-green-800 px-2 py-1 rounded-full text-xs font-bold">
318
+ 25 pts
319
+ </div>
320
+ </div>
321
+ <div class="mt-3 flex justify-between items-center">
322
+ <span class="text-xs bg-indigo-100 text-indigo-800 px-2 py-1 rounded">Weekly</span>
323
+ <button class="text-xs bg-indigo-600 text-white px-3 py-1 rounded hover:bg-indigo-700 transition">
324
+ Complete <i class="fas fa-check ml-1"></i>
325
+ </button>
326
+ </div>
327
+ </div>
328
+ <div class="flip-card-back bg-indigo-50 rounded-lg p-4 flex flex-col justify-between h-full">
329
+ <div>
330
+ <h3 class="font-semibold text-indigo-800">Clean bedroom</h3>
331
+ <p class="text-sm text-indigo-600 mt-1">Vacuum, dust, organize toys, and make bed neatly</p>
332
+ </div>
333
+ <div class="flex justify-between items-center mt-4">
334
+ <div class="text-xs">
335
+ <p class="text-indigo-600">Last completed:</p>
336
+ <p class="font-medium">3 days ago by Liam</p>
337
+ </div>
338
+ <button class="text-xs bg-indigo-600 text-white px-3 py-1 rounded hover:bg-indigo-700 transition">
339
+ Complete <i class="fas fa-check ml-1"></i>
340
+ </button>
341
+ </div>
342
+ </div>
343
+ </div>
344
+ </div>
345
+ </div>
346
+ </div>
347
+
348
+ <!-- Rewards Store -->
349
+ <div class="bg-white rounded-xl shadow-lg p-6">
350
+ <h2 class="text-xl font-bold text-gray-800 mb-4 flex items-center">
351
+ <i class="fas fa-gift mr-2 text-indigo-600"></i> Rewards Store
352
+ </h2>
353
+
354
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
355
+ <div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition">
356
+ <div class="bg-yellow-50 p-3 rounded-lg mb-3 text-center">
357
+ <i class="fas fa-gamepad text-3xl text-yellow-500"></i>
358
+ </div>
359
+ <h3 class="font-semibold">Video Game Time</h3>
360
+ <p class="text-sm text-gray-500 mb-2">30 minutes of screen time</p>
361
+ <div class="flex justify-between items-center">
362
+ <div class="bg-purple-100 text-purple-800 px-2 py-1 rounded-full text-xs font-bold">
363
+ 15 pts
364
+ </div>
365
+ <button class="text-xs bg-purple-600 text-white px-3 py-1 rounded hover:bg-purple-700 transition">
366
+ Redeem <i class="fas fa-shopping-cart ml-1"></i>
367
+ </button>
368
+ </div>
369
+ </div>
370
+
371
+ <div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition">
372
+ <div class="bg-pink-50 p-3 rounded-lg mb-3 text-center">
373
+ <i class="fas fa-ice-cream text-3xl text-pink-500"></i>
374
+ </div>
375
+ <h3 class="font-semibold">Ice Cream Treat</h3>
376
+ <p class="text-sm text-gray-500 mb-2">One scoop of favorite flavor</p>
377
+ <div class="flex justify-between items-center">
378
+ <div class="bg-purple-100 text-purple-800 px-2 py-1 rounded-full text-xs font-bold">
379
+ 20 pts
380
+ </div>
381
+ <button class="text-xs bg-purple-600 text-white px-3 py-1 rounded hover:bg-purple-700 transition">
382
+ Redeem <i class="fas fa-shopping-cart ml-1"></i>
383
+ </button>
384
+ </div>
385
+ </div>
386
+
387
+ <div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition">
388
+ <div class="bg-blue-50 p-3 rounded-lg mb-3 text-center">
389
+ <i class="fas fa-film text-3xl text-blue-500"></i>
390
+ </div>
391
+ <h3 class="font-semibold">Movie Night</h3>
392
+ <p class="text-sm text-gray-500 mb-2">Choose the family movie</p>
393
+ <div class="flex justify-between items-center">
394
+ <div class="bg-purple-100 text-purple-800 px-2 py-1 rounded-full text-xs font-bold">
395
+ 50 pts
396
+ </div>
397
+ <button class="text-xs bg-purple-600 text-white px-3 py-1 rounded hover:bg-purple-700 transition">
398
+ Redeem <i class="fas fa-shopping-cart ml-1"></i>
399
+ </button>
400
+ </div>
401
+ </div>
402
+ </div>
403
+ </div>
404
+ </div>
405
+ </div>
406
+
407
+ <!-- Statistics Section -->
408
+ <div class="mt-8 bg-white rounded-xl shadow-lg p-6">
409
+ <h2 class="text-xl font-bold text-gray-800 mb-6 flex items-center">
410
+ <i class="fas fa-chart-line mr-2 text-indigo-600"></i> Family Statistics
411
+ </h2>
412
+
413
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
414
+ <div class="bg-indigo-50 rounded-lg p-4">
415
+ <h3 class="font-semibold text-indigo-800 mb-3">Points Distribution</h3>
416
+ <div class="chart-container">
417
+ <canvas id="pointsChart"></canvas>
418
+ </div>
419
+ </div>
420
+
421
+ <div class="bg-green-50 rounded-lg p-4">
422
+ <h3 class="font-semibold text-green-800 mb-3">Top Chores</h3>
423
+ <div class="chart-container">
424
+ <canvas id="choresChart"></canvas>
425
+ </div>
426
+ </div>
427
+
428
+ <div class="bg-purple-50 rounded-lg p-4">
429
+ <h3 class="font-semibold text-purple-800 mb-3">Rewards Popularity</h3>
430
+ <div class="chart-container">
431
+ <canvas id="rewardsChart"></canvas>
432
+ </div>
433
+ </div>
434
+ </div>
435
+
436
+ <div class="mt-6 grid grid-cols-1 md:grid-cols-2 gap-6">
437
+ <div>
438
+ <h3 class="font-semibold text-gray-700 mb-3">Weekly Points Trend</h3>
439
+ <div class="bg-white border border-gray-200 rounded-lg p-4">
440
+ <canvas id="weeklyTrendChart"></canvas>
441
+ </div>
442
+ </div>
443
+
444
+ <div>
445
+ <h3 class="font-semibold text-gray-700 mb-3">Monthly Leaderboard</h3>
446
+ <div class="bg-white border border-gray-200 rounded-lg p-4">
447
+ <div class="flex items-center justify-between mb-3">
448
+ <div class="flex items-center">
449
+ <div class="w-8 h-8 rounded-full bg-pink-200 flex items-center justify-center mr-3">
450
+ <i class="fas fa-female text-pink-600"></i>
451
+ </div>
452
+ <div>
453
+ <h4 class="font-medium">Emma</h4>
454
+ <p class="text-xs text-gray-500">Total: 320 pts</p>
455
+ </div>
456
+ </div>
457
+ <div class="bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full text-xs font-bold flex items-center">
458
+ <i class="fas fa-trophy mr-1"></i> 1st
459
+ </div>
460
+ </div>
461
+
462
+ <div class="flex items-center justify-between mb-3">
463
+ <div class="flex items-center">
464
+ <div class="w-8 h-8 rounded-full bg-blue-200 flex items-center justify-center mr-3">
465
+ <i class="fas fa-male text-blue-600"></i>
466
+ </div>
467
+ <div>
468
+ <h4 class="font-medium">Liam</h4>
469
+ <p class="text-xs text-gray-500">Total: 275 pts</p>
470
+ </div>
471
+ </div>
472
+ <div class="bg-gray-100 text-gray-800 px-2 py-1 rounded-full text-xs font-bold flex items-center">
473
+ <i class="fas fa-medal mr-1"></i> 2nd
474
+ </div>
475
+ </div>
476
+
477
+ <div class="text-center mt-4">
478
+ <p class="text-sm text-gray-500">Month of June 2023</p>
479
+ </div>
480
+ </div>
481
+ </div>
482
+ </div>
483
+ </div>
484
+ </div>
485
+
486
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
487
+ <script>
488
+ // Set current date
489
+ const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
490
+ document.getElementById('currentDate').textContent = new Date().toLocaleDateString('en-US', options);
491
+
492
+ // Toggle parent panel
493
+ document.getElementById('parentToggle').addEventListener('click', function() {
494
+ document.getElementById('parentPanel').classList.toggle('hidden');
495
+ });
496
+
497
+ // Toggle filter dropdown
498
+ document.getElementById('filterBtn').addEventListener('click', function() {
499
+ document.getElementById('filterDropdown').classList.toggle('hidden');
500
+ });
501
+
502
+ // Add points functionality
503
+ document.getElementById('addPointsBtn').addEventListener('click', function() {
504
+ const child = document.getElementById('childSelect').value;
505
+ const points = parseInt(document.getElementById('pointAmount').value) || 0;
506
+
507
+ if (points > 0) {
508
+ const currentElement = document.getElementById(child + 'Points');
509
+ const currentPoints = parseInt(currentElement.textContent);
510
+ currentElement.textContent = currentPoints + points;
511
+
512
+ // Add to activity log
513
+ // In a real app, you would save this to a database
514
+
515
+ alert(`Added ${points} points to ${child.charAt(0).toUpperCase() + child.slice(1)}`);
516
+ document.getElementById('pointAmount').value = '';
517
+ }
518
+ });
519
+
520
+ // Add new chore functionality
521
+ document.getElementById('addChoreBtn').addEventListener('click', function() {
522
+ const choreName = document.getElementById('newChore').value.trim();
523
+ const chorePoints = parseInt(document.getElementById('chorePoints').value) || 0;
524
+
525
+ if (choreName && chorePoints > 0) {
526
+ // In a real app, you would add this to your database and then refresh the chores list
527
+ alert(`Added new chore: ${choreName} (${chorePoints} points)`);
528
+ document.getElementById('newChore').value = '';
529
+ document.getElementById('chorePoints').value = '';
530
+ }
531
+ });
532
+
533
+ // Initialize charts
534
+ document.addEventListener('DOMContentLoaded', function() {
535
+ // Points Distribution Chart
536
+ const pointsCtx = document.getElementById('pointsChart').getContext('2d');
537
+ const pointsChart = new Chart(pointsCtx, {
538
+ type: 'doughnut',
539
+ data: {
540
+ labels: ['Emma', 'Liam'],
541
+ datasets: [{
542
+ data: [125, 80],
543
+ backgroundColor: ['#ec4899', '#3b82f6'],
544
+ borderWidth: 0
545
+ }]
546
+ },
547
+ options: {
548
+ responsive: true,
549
+ maintainAspectRatio: false,
550
+ plugins: {
551
+ legend: {
552
+ position: 'bottom'
553
+ }
554
+ }
555
+ }
556
+ });
557
+
558
+ // Top Chores Chart
559
+ const choresCtx = document.getElementById('choresChart').getContext('2d');
560
+ const choresChart = new Chart(choresCtx, {
561
+ type: 'bar',
562
+ data: {
563
+ labels: ['Set Table', 'Take Trash', 'Laundry', 'Clean Room'],
564
+ datasets: [{
565
+ label: 'Completions',
566
+ data: [12, 8, 5, 4],
567
+ backgroundColor: '#10b981',
568
+ borderWidth: 0
569
+ }]
570
+ },
571
+ options: {
572
+ responsive: true,
573
+ maintainAspectRatio: false,
574
+ scales: {
575
+ y: {
576
+ beginAtZero: true
577
+ }
578
+ },
579
+ plugins: {
580
+ legend: {
581
+ display: false
582
+ }
583
+ }
584
+ }
585
+ });
586
+
587
+ // Rewards Popularity Chart
588
+ const rewardsCtx = document.getElementById('rewardsChart').getContext('2d');
589
+ const rewardsChart = new Chart(rewardsCtx, {
590
+ type: 'pie',
591
+ data: {
592
+ labels: ['Game Time', 'Ice Cream', 'Movie Night'],
593
+ datasets: [{
594
+ data: [15, 8, 3],
595
+ backgroundColor: ['#8b5cf6', '#ec4899', '#3b82f6'],
596
+ borderWidth: 0
597
+ }]
598
+ },
599
+ options: {
600
+ responsive: true,
601
+ maintainAspectRatio: false,
602
+ plugins: {
603
+ legend: {
604
+ position: 'bottom'
605
+ }
606
+ }
607
+ }
608
+ });
609
+
610
+ // Weekly Trend Chart
611
+ const weeklyCtx = document.getElementById('weeklyTrendChart').getContext('2d');
612
+ const weeklyChart = new Chart(weeklyCtx, {
613
+ type: 'line',
614
+ data: {
615
+ labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
616
+ datasets: [
617
+ {
618
+ label: 'Emma',
619
+ data: [15, 20, 25, 30, 20, 15, 10],
620
+ borderColor: '#ec4899',
621
+ backgroundColor: 'rgba(236, 72, 153, 0.1)',
622
+ tension: 0.3,
623
+ fill: true
624
+ },
625
+ {
626
+ label: 'Liam',
627
+ data: [10, 15, 20, 15, 25, 10, 5],
628
+ borderColor: '#3b82f6',
629
+ backgroundColor: 'rgba(59, 130, 246, 0.1)',
630
+ tension: 0.3,
631
+ fill: true
632
+ }
633
+ ]
634
+ },
635
+ options: {
636
+ responsive: true,
637
+ maintainAspectRatio: false,
638
+ scales: {
639
+ y: {
640
+ beginAtZero: true
641
+ }
642
+ }
643
+ }
644
+ });
645
+ });
646
+
647
+ // Complete chore buttons
648
+ document.querySelectorAll('.flip-card-front button, .flip-card-back button').forEach(button => {
649
+ button.addEventListener('click', function(e) {
650
+ e.stopPropagation(); // Prevent card flip when clicking button
651
+
652
+ const choreCard = this.closest('.flip-card');
653
+ const choreName = choreCard.querySelector('h3').textContent;
654
+ const pointsText = choreCard.querySelector('.bg-green-100').textContent;
655
+ const points = parseInt(pointsText);
656
+
657
+ // In a real app, you would ask which child completed it and update their points
658
+ alert(`Marked "${choreName}" as completed for ${points} points!`);
659
+ });
660
+ });
661
+
662
+ // Redeem reward buttons
663
+ document.querySelectorAll('.rewards-store button').forEach(button => {
664
+ button.addEventListener('click', function() {
665
+ const rewardCard = this.closest('.border');
666
+ const rewardName = rewardCard.querySelector('h3').textContent;
667
+ const pointsText = rewardCard.querySelector('.bg-purple-100').textContent;
668
+ const points = parseInt(pointsText);
669
+
670
+ // In a real app, you would deduct points from the child's balance
671
+ alert(`Redeemed "${rewardName}" for ${points} points!`);
672
+ });
673
+ });
674
+ </script>
675
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=BHelfmann/point-system" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
676
+ </html>