Spaces:
Running
Running
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- README.md +6 -4
- index.html +676 -19
README.md
CHANGED
|
@@ -1,10 +1,12 @@
|
|
| 1 |
---
|
| 2 |
-
title:
|
| 3 |
-
emoji:
|
| 4 |
colorFrom: yellow
|
| 5 |
-
colorTo:
|
| 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 |
-
<!
|
| 2 |
-
<html>
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
|
| 16 |
-
|
| 17 |
-
|
| 18 |
-
|
| 19 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 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>
|