Hugging Face's logo

Spaces:
seunmanuel
/
https-huggingface-co-spaces-seunmanuel
Running

App Files Community
seunmanuel commited on
Commit
2ab337b
·
verified ·
1 Parent(s): d437e3a

remove community - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +769 -18
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Https Huggingface Co Spaces Seunmanuel
3
- emoji: 🐨
4
- colorFrom: yellow
5
  colorTo: purple
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: https-huggingface-co-spaces-seunmanuel
3
+ emoji: 🐳
4
+ colorFrom: pink
5
  colorTo: purple
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,770 @@
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>FamilyConnect | Discord for Family Bonding</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
+ .family-card:hover {
14
+ transform: translateY(-5px);
15
+ box-shadow: 0 10px 20px rgba(0,0,0,0.1);
16
+ }
17
+ .emoji-picker {
18
+ position: absolute;
19
+ bottom: 50px;
20
+ right: 0;
21
+ display: none;
22
+ }
23
+ .active-tab {
24
+ border-bottom: 3px solid #4f46e5;
25
+ color: #4f46e5;
26
+ }
27
+ .conflict-level-low {
28
+ background-color: #d9f99d;
29
+ }
30
+ .conflict-level-medium {
31
+ background-color: #fef08a;
32
+ }
33
+ .conflict-level-high {
34
+ background-color: #fecaca;
35
+ }
36
+ </style>
37
+ </head>
38
+ <body class="gradient-bg min-h-screen">
39
+ <!-- Navigation -->
40
+ <nav class="bg-white shadow-lg">
41
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
42
+ <div class="flex justify-between h-16">
43
+ <div class="flex items-center">
44
+ <div class="flex-shrink-0 flex items-center">
45
+ <i class="fas fa-heart text-indigo-600 text-2xl mr-2"></i>
46
+ <span class="text-xl font-bold text-indigo-600">FamilyConnect</span>
47
+ </div>
48
+ <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
49
+ <a href="#" class="active-tab inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Dashboard</a>
50
+ <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Activities</a>
51
+ <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Habits</a>
52
+ </div>
53
+ </div>
54
+ <div class="hidden sm:ml-6 sm:flex sm:items-center">
55
+ <button class="bg-indigo-600 px-4 py-2 rounded-md text-white text-sm font-medium hover:bg-indigo-700">
56
+ Upgrade Plan
57
+ </button>
58
+ <div class="ml-3 relative">
59
+ <div>
60
+ <button type="button" class="bg-white rounded-full flex text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
61
+ <span class="sr-only">Open user menu</span>
62
+ <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
63
+ </button>
64
+ </div>
65
+ </div>
66
+ </div>
67
+ <div class="-mr-2 flex items-center sm:hidden">
68
+ <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500" aria-controls="mobile-menu" aria-expanded="false">
69
+ <span class="sr-only">Open main menu</span>
70
+ <i class="fas fa-bars"></i>
71
+ </button>
72
+ </div>
73
+ </div>
74
+ </div>
75
+
76
+ <!-- Mobile menu, show/hide based on menu state. -->
77
+ <div class="sm:hidden hidden" id="mobile-menu">
78
+ <div class="pt-2 pb-3 space-y-1">
79
+ <a href="#" class="bg-indigo-50 border-indigo-500 text-indigo-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Dashboard</a>
80
+ <a href="#" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Activities</a>
81
+ <a href="#" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Habits</a>
82
+ </div>
83
+ <div class="pt-4 pb-3 border-t border-gray-200">
84
+ <div class="flex items-center px-4">
85
+ <div class="flex-shrink-0">
86
+ <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
87
+ </div>
88
+ <div class="ml-3">
89
+ <div class="text-base font-medium text-gray-800">Tom Cook</div>
90
+ <div class="text-sm font-medium text-gray-500">tom@example.com</div>
91
+ </div>
92
+ </div>
93
+ <div class="mt-3 space-y-1">
94
+ <a href="#" class="block px-4 py-2 text-base font-medium text-gray-500 hover:text-gray-800 hover:bg-gray-100">Your Profile</a>
95
+ <a href="#" class="block px-4 py-2 text-base font-medium text-gray-500 hover:text-gray-800 hover:bg-gray-100">Settings</a>
96
+ <a href="#" class="block px-4 py-2 text-base font-medium text-gray-500 hover:text-gray-800 hover:bg-gray-100">Sign out</a>
97
+ </div>
98
+ </div>
99
+ </div>
100
+ </nav>
101
+
102
+ <!-- Main Content -->
103
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
104
+ <!-- Family Overview -->
105
+ <div class="mb-8">
106
+ <div class="flex justify-between items-center mb-4">
107
+ <h2 class="text-2xl font-bold text-gray-800">The Johnson Family</h2>
108
+ <button class="bg-indigo-600 px-4 py-2 rounded-md text-white text-sm font-medium hover:bg-indigo-700 flex items-center">
109
+ <i class="fas fa-plus mr-2"></i> Add Family Member
110
+ </button>
111
+ </div>
112
+
113
+ <!-- Family Members Cards -->
114
+ <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
115
+ <!-- Dad Card -->
116
+ <div class="bg-white rounded-lg shadow-md overflow-hidden family-card transition duration-300">
117
+ <div class="p-4">
118
+ <div class="flex items-center">
119
+ <img class="h-12 w-12 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Dad">
120
+ <div class="ml-4">
121
+ <h3 class="font-bold text-gray-800">Michael Johnson</h3>
122
+ <p class="text-gray-600 text-sm">Dad • 42 years</p>
123
+ </div>
124
+ </div>
125
+ <div class="mt-4">
126
+ <div class="flex justify-between text-sm mb-2">
127
+ <span class="text-gray-500">Emotional State:</span>
128
+ <span class="font-medium text-yellow-600">Slightly Stressed</span>
129
+ </div>
130
+ <div class="flex justify-between text-sm mb-2">
131
+ <span class="text-gray-500">Habit Streak:</span>
132
+ <span class="font-medium text-green-600">7 days</span>
133
+ </div>
134
+ <div class="flex justify-between text-sm">
135
+ <span class="text-gray-500">Last Active:</span>
136
+ <span class="font-medium">2 hours ago</span>
137
+ </div>
138
+ </div>
139
+ </div>
140
+ <div class="bg-gray-50 px-4 py-3 flex justify-between">
141
+ <button class="text-indigo-600 text-sm font-medium hover:text-indigo-800">
142
+ <i class="fas fa-comment-dots mr-1"></i> Message
143
+ </button>
144
+ <button class="text-indigo-600 text-sm font-medium hover:text-indigo-800">
145
+ <i class="fas fa-heart mr-1"></i> Send Love
146
+ </button>
147
+ </div>
148
+ </div>
149
+
150
+ <!-- Mom Card -->
151
+ <div class="bg-white rounded-lg shadow-md overflow-hidden family-card transition duration-300">
152
+ <div class="p-4">
153
+ <div class="flex items-center">
154
+ <img class="h-12 w-12 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Mom">
155
+ <div class="ml-4">
156
+ <h3 class="font-bold text-gray-800">Sarah Johnson</h3>
157
+ <p class="text-gray-600 text-sm">Mom • 40 years</p>
158
+ </div>
159
+ </div>
160
+ <div class="mt-4">
161
+ <div class="flex justify-between text-sm mb-2">
162
+ <span class="text-gray-500">Emotional State:</span>
163
+ <span class="font-medium text-green-600">Happy</span>
164
+ </div>
165
+ <div class="flex justify-between text-sm mb-2">
166
+ <span class="text-gray-500">Habit Streak:</span>
167
+ <span class="font-medium text-green-600">14 days</span>
168
+ </div>
169
+ <div class="flex justify-between text-sm">
170
+ <span class="text-gray-500">Last Active:</span>
171
+ <span class="font-medium">30 mins ago</span>
172
+ </div>
173
+ </div>
174
+ </div>
175
+ <div class="bg-gray-50 px-4 py-3 flex justify-between">
176
+ <button class="text-indigo-600 text-sm font-medium hover:text-indigo-800">
177
+ <i class="fas fa-comment-dots mr-1"></i> Message
178
+ </button>
179
+ <button class="text-indigo-600 text-sm font-medium hover:text-indigo-800">
180
+ <i class="fas fa-heart mr-1"></i> Send Love
181
+ </button>
182
+ </div>
183
+ </div>
184
+
185
+ <!-- Teen Card -->
186
+ <div class="bg-white rounded-lg shadow-md overflow-hidden family-card transition duration-300">
187
+ <div class="p-4">
188
+ <div class="flex items-center">
189
+ <img class="h-12 w-12 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/22.jpg" alt="Teen">
190
+ <div class="ml-4">
191
+ <h3 class="font-bold text-gray-800">Emily Johnson</h3>
192
+ <p class="text-gray-600 text-sm">Daughter • 15 years</p>
193
+ </div>
194
+ </div>
195
+ <div class="mt-4">
196
+ <div class="flex justify-between text-sm mb-2">
197
+ <span class="text-gray-500">Emotional State:</span>
198
+ <span class="font-medium text-blue-600">Neutral</span>
199
+ </div>
200
+ <div class="flex justify-between text-sm mb-2">
201
+ <span class="text-gray-500">Habit Streak:</span>
202
+ <span class="font-medium text-green-600">5 days</span>
203
+ </div>
204
+ <div class="flex justify-between text-sm">
205
+ <span class="text-gray-500">Last Active:</span>
206
+ <span class="font-medium">Online now</span>
207
+ </div>
208
+ </div>
209
+ </div>
210
+ <div class="bg-gray-50 px-4 py-3 flex justify-between">
211
+ <button class="text-indigo-600 text-sm font-medium hover:text-indigo-800">
212
+ <i class="fas fa-comment-dots mr-1"></i> Message
213
+ </button>
214
+ <button class="text-indigo-600 text-sm font-medium hover:text-indigo-800">
215
+ <i class="fas fa-heart mr-1"></i> Send Love
216
+ </button>
217
+ </div>
218
+ </div>
219
+
220
+ <!-- Child Card -->
221
+ <div class="bg-white rounded-lg shadow-md overflow-hidden family-card transition duration-300">
222
+ <div class="p-4">
223
+ <div class="flex items-center">
224
+ <img class="h-12 w-12 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/12.jpg" alt="Child">
225
+ <div class="ml-4">
226
+ <h3 class="font-bold text-gray-800">Jacob Johnson</h3>
227
+ <p class="text-gray-600 text-sm">Son • 8 years</p>
228
+ </div>
229
+ </div>
230
+ <div class="mt-4">
231
+ <div class="flex justify-between text-sm mb-2">
232
+ <span class="text-gray-500">Emotional State:</span>
233
+ <span class="font-medium text-red-600">Excited</span>
234
+ </div>
235
+ <div class="flex justify-between text-sm mb-2">
236
+ <span class="text-gray-500">Habit Streak:</span>
237
+ <span class="font-medium text-green-600">3 days</span>
238
+ </div>
239
+ <div class="flex justify-between text-sm">
240
+ <span class="text-gray-500">Last Active:</span>
241
+ <span class="font-medium">1 hour ago</span>
242
+ </div>
243
+ </div>
244
+ </div>
245
+ <div class="bg-gray-50 px-4 py-3 flex justify-between">
246
+ <button class="text-indigo-600 text-sm font-medium hover:text-indigo-800">
247
+ <i class="fas fa-comment-dots mr-1"></i> Message
248
+ </button>
249
+ <button class="text-indigo-600 text-sm font-medium hover:text-indigo-800">
250
+ <i class="fas fa-heart mr-1"></i> Send Love
251
+ </button>
252
+ </div>
253
+ </div>
254
+ </div>
255
+ </div>
256
+
257
+ <!-- Dashboard Sections -->
258
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
259
+ <!-- Left Column -->
260
+ <div class="lg:col-span-2 space-y-8">
261
+ <!-- Family Emotional Health -->
262
+ <div class="bg-white rounded-lg shadow-md p-6">
263
+ <div class="flex justify-between items-center mb-4">
264
+ <h3 class="text-lg font-bold text-gray-800">Family Emotional Health</h3>
265
+ <div class="flex space-x-2">
266
+ <button class="text-indigo-600 hover:text-indigo-800">
267
+ <i class="fas fa-sliders-h"></i>
268
+ </button>
269
+ <button class="text-indigo-600 hover:text-indigo-800">
270
+ <i class="fas fa-expand"></i>
271
+ </button>
272
+ </div>
273
+ </div>
274
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
275
+ <div class="bg-indigo-50 rounded-lg p-4">
276
+ <h4 class="text-sm font-medium text-indigo-800 mb-2">Positive Interactions</h4>
277
+ <div class="flex items-end">
278
+ <span class="text-3xl font-bold text-indigo-600">87%</span>
279
+ <span class="ml-2 text-green-600 flex items-center">
280
+ <i class="fas fa-arrow-up mr-1"></i> 5%
281
+ </span>
282
+ </div>
283
+ <p class="text-xs text-gray-500 mt-2">Up from last week</p>
284
+ </div>
285
+ <div class="bg-pink-50 rounded-lg p-4">
286
+ <h4 class="text-sm font-medium text-pink-800 mb-2">Conflict Indicators</h4>
287
+ <div class="flex items-end">
288
+ <span class="text-3xl font-bold text-pink-600">13%</span>
289
+ <span class="ml-2 text-red-600 flex items-center">
290
+ <i class="fas fa-arrow-down mr-1"></i> 2%
291
+ </span>
292
+ </div>
293
+ <p class="text-xs text-gray-500 mt-2">Down from last week</p>
294
+ </div>
295
+ </div>
296
+ <div class="mt-6">
297
+ <div class="flex items-center justify-between mb-2">
298
+ <h4 class="text-sm font-medium text-gray-700">Recent Emotional Expressions</h4>
299
+ <span class="text-xs text-indigo-600">View All</span>
300
+ </div>
301
+ <div class="space-y-3">
302
+ <div class="flex items-center p-2 hover:bg-gray-50 rounded-lg">
303
+ <div class="bg-green-100 p-2 rounded-full">
304
+ <i class="fas fa-heart text-green-600"></i>
305
+ </div>
306
+ <div class="ml-3">
307
+ <p class="text-sm font-medium">Emily sent "I love you" to Mom</p>
308
+ <p class="text-xs text-gray-500">2 hours ago</p>
309
+ </div>
310
+ </div>
311
+ <div class="flex items-center p-2 hover:bg-gray-50 rounded-lg">
312
+ <div class="bg-blue-100 p-2 rounded-full">
313
+ <i class="fas fa-hands-helping text-blue-600"></i>
314
+ </div>
315
+ <div class="ml-3">
316
+ <p class="text-sm font-medium">Jacob requested "help" with homework from Dad</p>
317
+ <p class="text-xs text-gray-500">4 hours ago</p>
318
+ </div>
319
+ </div>
320
+ <div class="flex items-center p-2 hover:bg-gray-50 rounded-lg">
321
+ <div class="bg-yellow-100 p-2 rounded-full">
322
+ <i class="fas fa-handshake text-yellow-600"></i>
323
+ </div>
324
+ <div class="ml-3">
325
+ <p class="text-sm font-medium">Dad said "sorry" to Emily</p>
326
+ <p class="text-xs text-gray-500">Yesterday</p>
327
+ </div>
328
+ </div>
329
+ </div>
330
+ </div>
331
+ </div>
332
+
333
+ <!-- Family Habit Tracker -->
334
+ <div class="bg-white rounded-lg shadow-md p-6">
335
+ <div class="flex justify-between items-center mb-4">
336
+ <h3 class="text-lg font-bold text-gray-800">Family Habit Tracker</h3>
337
+ <button class="bg-indigo-600 px-3 py-1 rounded-md text-white text-sm font-medium hover:bg-indigo-700">
338
+ <i class="fas fa-plus mr-1"></i> New Challenge
339
+ </button>
340
+ </div>
341
+ <div class="mb-6">
342
+ <h4 class="text-sm font-medium text-gray-700 mb-2">Current Family Challenge</h4>
343
+ <div class="bg-gradient-to-r from-indigo-100 to-purple-100 rounded-lg p-4">
344
+ <div class="flex justify-between items-center">
345
+ <div>
346
+ <h5 class="font-bold text-indigo-800">Hydration Heroes</h5>
347
+ <p class="text-sm text-gray-600">Everyone drinks 8 glasses of water daily</p>
348
+ </div>
349
+ <div class="text-right">
350
+ <span class="text-xs font-medium bg-indigo-600 text-white px-2 py-1 rounded-full">3/4 members</span>
351
+ <p class="text-xs text-gray-500 mt-1">2 days remaining</p>
352
+ </div>
353
+ </div>
354
+ <div class="mt-4">
355
+ <div class="flex items-center justify-between mb-2">
356
+ <span class="text-xs font-medium">Family Progress</span>
357
+ <span class="text-xs font-medium">75%</span>
358
+ </div>
359
+ <div class="w-full bg-gray-200 rounded-full h-2">
360
+ <div class="bg-indigo-600 h-2 rounded-full" style="width: 75%"></div>
361
+ </div>
362
+ </div>
363
+ <div class="mt-4 grid grid-cols-4 gap-2">
364
+ <div class="text-center">
365
+ <div class="h-10 w-10 mx-auto bg-green-100 rounded-full flex items-center justify-center">
366
+ <i class="fas fa-check text-green-600"></i>
367
+ </div>
368
+ <p class="text-xs mt-1">Mom</p>
369
+ </div>
370
+ <div class="text-center">
371
+ <div class="h-10 w-10 mx-auto bg-green-100 rounded-full flex items-center justify-center">
372
+ <i class="fas fa-check text-green-600"></i>
373
+ </div>
374
+ <p class="text-xs mt-1">Dad</p>
375
+ </div>
376
+ <div class="text-center">
377
+ <div class="h-10 w-10 mx-auto bg-green-100 rounded-full flex items-center justify-center">
378
+ <i class="fas fa-check text-green-600"></i>
379
+ </div>
380
+ <p class="text-xs mt-1">Emily</p>
381
+ </div>
382
+ <div class="text-center">
383
+ <div class="h-10 w-10 mx-auto bg-gray-100 rounded-full flex items-center justify-center">
384
+ <i class="fas fa-times text-gray-400"></i>
385
+ </div>
386
+ <p class="text-xs mt-1">Jacob</p>
387
+ </div>
388
+ </div>
389
+ </div>
390
+ </div>
391
+ <div>
392
+ <h4 class="text-sm font-medium text-gray-700 mb-2">Reward Unlocked!</h4>
393
+ <div class="bg-gradient-to-r from-green-100 to-teal-100 rounded-lg p-4">
394
+ <div class="flex items-center">
395
+ <div class="bg-green-500 text-white p-3 rounded-full">
396
+ <i class="fas fa-trophy"></i>
397
+ </div>
398
+ <div class="ml-4">
399
+ <h5 class="font-bold text-green-800">Family Movie Night</h5>
400
+ <p class="text-sm text-gray-600">You've earned $25 towards your next family movie night!</p>
401
+ </div>
402
+ </div>
403
+ <div class="mt-4 flex justify-between">
404
+ <button class="text-green-600 text-sm font-medium hover:text-green-800">
405
+ <i class="fas fa-share-alt mr-1"></i> Share
406
+ </button>
407
+ <button class="bg-green-600 px-3 py-1 rounded-md text-white text-sm font-medium hover:bg-green-700">
408
+ <i class="fas fa-gift mr-1"></i> Redeem
409
+ </button>
410
+ </div>
411
+ </div>
412
+ </div>
413
+ </div>
414
+
415
+ <!-- Conflict Resolution -->
416
+ <div class="bg-white rounded-lg shadow-md p-6">
417
+ <div class="flex justify-between items-center mb-4">
418
+ <h3 class="text-lg font-bold text-gray-800">Conflict Resolution</h3>
419
+ <button class="text-indigo-600 hover:text-indigo-800">
420
+ <i class="fas fa-sliders-h"></i>
421
+ </button>
422
+ </div>
423
+ <div class="mb-6">
424
+ <div class="flex items-center justify-between mb-2">
425
+ <h4 class="text-sm font-medium text-gray-700">Recent Conflicts</h4>
426
+ <span class="text-xs text-indigo-600">View All</span>
427
+ </div>
428
+ <div class="space-y-3">
429
+ <div class="p-3 rounded-lg conflict-level-medium">
430
+ <div class="flex justify-between items-start">
431
+ <div>
432
+ <p class="font-medium">Emily vs. Dad</p>
433
+ <p class="text-xs text-gray-600">About screen time limits</p>
434
+ </div>
435
+ <span class="text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full">Medium</span>
436
+ </div>
437
+ <div class="mt-2 flex items-center justify-between">
438
+ <span class="text-xs text-gray-500">Detected 1 day ago</span>
439
+ <button class="text-indigo-600 text-xs font-medium hover:text-indigo-800">
440
+ Resolve Now <i class="fas fa-arrow-right ml-1"></i>
441
+ </button>
442
+ </div>
443
+ </div>
444
+ <div class="p-3 rounded-lg conflict-level-low">
445
+ <div class="flex justify-between items-start">
446
+ <div>
447
+ <p class="font-medium">Jacob vs. Emily</p>
448
+ <p class="text-xs text-gray-600">About sharing toys</p>
449
+ </div>
450
+ <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">Low</span>
451
+ </div>
452
+ <div class="mt-2 flex items-center justify-between">
453
+ <span class="text-xs text-gray-500">Detected 3 days ago</span>
454
+ <button class="text-indigo-600 text-xs font-medium hover:text-indigo-800">
455
+ Resolve Now <i class="fas fa-arrow-right ml-1"></i>
456
+ </button>
457
+ </div>
458
+ </div>
459
+ </div>
460
+ </div>
461
+ <div>
462
+ <h4 class="text-sm font-medium text-gray-700 mb-2">AI Suggestion</h4>
463
+ <div class="bg-indigo-50 rounded-lg p-4">
464
+ <div class="flex items-start">
465
+ <div class="bg-indigo-100 p-2 rounded-full">
466
+ <i class="fas fa-robot text-indigo-600"></i>
467
+ </div>
468
+ <div class="ml-3">
469
+ <p class="text-sm font-medium text-indigo-800">Family Communication Tip</p>
470
+ <p class="text-sm text-gray-700 mt-1">I've noticed Dad has been using more directive language this week. Consider using more "I feel" statements to express needs without creating defensiveness.</p>
471
+ <button class="mt-2 text-indigo-600 text-xs font-medium hover:text-indigo-800">
472
+ Learn More <i class="fas fa-arrow-right ml-1"></i>
473
+ </button>
474
+ </div>
475
+ </div>
476
+ </div>
477
+ </div>
478
+ </div>
479
+ </div>
480
+
481
+ <!-- Right Column -->
482
+ <div class="space-y-8">
483
+ <!-- Family Feed -->
484
+ <div class="bg-white rounded-lg shadow-md p-6">
485
+ <div class="flex justify-between items-center mb-4">
486
+ <h3 class="text-lg font-bold text-gray-800">Family Feed</h3>
487
+ <button class="text-indigo-600 hover:text-indigo-800">
488
+ <i class="fas fa-sliders-h"></i>
489
+ </button>
490
+ </div>
491
+ <div class="mb-6 bg-indigo-50 rounded-lg p-4">
492
+ <div class="flex items-center justify-between mb-3">
493
+ <h4 class="font-medium text-indigo-800">Family Chat</h4>
494
+ <div class="flex items-center">
495
+ <span class="text-xs mr-2 text-gray-600">AI Assistant</span>
496
+ <label class="relative inline-flex items-center cursor-pointer">
497
+ <input type="checkbox" value="" class="sr-only peer" checked>
498
+ <div class="w-9 h-5 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-indigo-600"></div>
499
+ </label>
500
+ </div>
501
+ </div>
502
+ <div class="flex items-start">
503
+ <img class="h-10 w-10 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Mom">
504
+ <div class="ml-3 flex-1">
505
+ <div class="bg-white rounded-lg p-3 border border-gray-200">
506
+ <textarea class="w-full bg-transparent focus:outline-none text-sm" placeholder="Message your family... (AI will help when needed)"></textarea>
507
+ </div>
508
+ <div class="mt-2 flex justify-between items-center">
509
+ <div class="flex space-x-2">
510
+ <button class="text-gray-500 hover:text-indigo-600">
511
+ <i class="far fa-smile"></i>
512
+ </button>
513
+ <button class="text-gray-500 hover:text-indigo-600">
514
+ <i class="fas fa-camera"></i>
515
+ </button>
516
+ <button class="text-gray-500 hover:text-indigo-600">
517
+ <i class="fas fa-paperclip"></i>
518
+ </button>
519
+ <button class="text-gray-500 hover:text-indigo-600">
520
+ <i class="fas fa-robot"></i>
521
+ </button>
522
+ </div>
523
+ <button class="bg-indigo-600 px-4 py-2 rounded-md text-white text-sm font-medium hover:bg-indigo-700">
524
+ Send
525
+ </button>
526
+ </div>
527
+ </div>
528
+ </div>
529
+ </div>
530
+ <div class="space-y-4">
531
+ <!-- AI Message -->
532
+ <div class="border-b border-gray-100 pb-4">
533
+ <div class="flex items-start">
534
+ <div class="bg-indigo-100 p-2 rounded-full">
535
+ <i class="fas fa-robot text-indigo-600"></i>
536
+ </div>
537
+ <div class="ml-3 flex-1">
538
+ <div class="flex items-center">
539
+ <span class="font-medium">Family Assistant</span>
540
+ <span class="ml-2 text-xs text-gray-500">Just now</span>
541
+ </div>
542
+ <p class="text-sm mt-1">I noticed you mentioned basketball. Would you like me to suggest some family-friendly basketball drills? I can also check everyone's availability this weekend!</p>
543
+ <div class="mt-2 flex items-center space-x-4">
544
+ <button class="flex items-center text-gray-500 hover:text-indigo-600 text-xs">
545
+ <i class="far fa-thumbs-up mr-1"></i> Helpful
546
+ </button>
547
+ <button class="flex items-center text-gray-500 hover:text-indigo-600 text-xs">
548
+ <i class="far fa-comment mr-1"></i> Reply
549
+ </button>
550
+ </div>
551
+ </div>
552
+ </div>
553
+ </div>
554
+
555
+ <!-- Post 1 -->
556
+ <div class="border-b border-gray-100 pb-4">
557
+ <div class="flex items-start">
558
+ <img class="h-10 w-10 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Dad">
559
+ <div class="ml-3 flex-1">
560
+ <div class="flex items-center">
561
+ <span class="font-medium">Michael Johnson</span>
562
+ <span class="ml-2 text-xs text-gray-500">2 hours ago</span>
563
+ </div>
564
+ <p class="text-sm mt-1">Just finished setting up the new basketball hoop in the backyard! Who's up for a game this weekend?</p>
565
+ <div class="mt-2 flex items-center space-x-4">
566
+ <button class="flex items-center text-gray-500 hover:text-indigo-600 text-xs">
567
+ <i class="far fa-heart mr-1"></i> 3
568
+ </button>
569
+ <button class="flex items-center text-gray-500 hover:text-indigo-600 text-xs">
570
+ <i class="far fa-comment mr-1"></i> 2
571
+ </button>
572
+ <button class="flex items-center text-gray-500 hover:text-indigo-600 text-xs">
573
+ <i class="fas fa-share mr-1"></i>
574
+ </button>
575
+ </div>
576
+ </div>
577
+ </div>
578
+ </div>
579
+
580
+ <!-- Post 2 -->
581
+ <div class="border-b border-gray-100 pb-4">
582
+ <div class="flex items-start">
583
+ <img class="h-10 w-10 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/22.jpg" alt="Emily">
584
+ <div class="ml-3 flex-1">
585
+ <div class="flex items-center">
586
+ <span class="font-medium">Emily Johnson</span>
587
+ <span class="ml-2 text-xs text-gray-500">5 hours ago</span>
588
+ </div>
589
+ <p class="text-sm mt-1">Completed my 5-day water challenge! 🎉 So proud of our family for sticking to healthy habits together.</p>
590
+ <div class="mt-2 flex items-center space-x-4">
591
+ <button class="flex items-center text-gray-500 hover:text-indigo-600 text-xs">
592
+ <i class="far fa-heart mr-1"></i> 5
593
+ </button>
594
+ <button class="flex items-center text-gray-500 hover:text-indigo-600 text-xs">
595
+ <i class="far fa-comment mr-1"></i> 1
596
+ </button>
597
+ <button class="flex items-center text-gray-500 hover:text-indigo-600 text-xs">
598
+ <i class="fas fa-share mr-1"></i>
599
+ </button>
600
+ </div>
601
+ </div>
602
+ </div>
603
+ </div>
604
+
605
+ <!-- Post 3 -->
606
+ <div class="pb-4">
607
+ <div class="flex items-start">
608
+ <img class="h-10 w-10 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Mom">
609
+ <div class="ml-3 flex-1">
610
+ <div class="flex items-center">
611
+ <span class="font-medium">Sarah Johnson</span>
612
+ <span class="ml-2 text-xs text-gray-500">Yesterday</span>
613
+ </div>
614
+ <p class="text-sm mt-1">Family, I just wanted to say how much I appreciate all of you. Even when we have our disagreements, I know we always come together as a team in the end. Love you all! ❤️</p>
615
+ <div class="mt-2 flex items-center space-x-4">
616
+ <button class="flex items-center text-gray-500 hover:text-indigo-600 text-xs">
617
+ <i class="far fa-heart mr-1"></i> 8
618
+ </button>
619
+ <button class="flex items-center text-gray-500 hover:text-indigo-600 text-xs">
620
+ <i class="far fa-comment mr-1"></i> 4
621
+ </button>
622
+ <button class="flex items-center text-gray-500 hover:text-indigo-600 text-xs">
623
+ <i class="fas fa-share mr-1"></i>
624
+ </button>
625
+ </div>
626
+ </div>
627
+ </div>
628
+ </div>
629
+ </div>
630
+ </div>
631
+
632
+ <!-- Quick Actions -->
633
+ <div class="bg-white rounded-lg shadow-md p-6">
634
+ <h3 class="text-lg font-bold text-gray-800 mb-4">Quick Actions</h3>
635
+ <div class="grid grid-cols-2 gap-3">
636
+ <button class="bg-indigo-50 rounded-lg p-3 flex flex-col items-center hover:bg-indigo-100">
637
+ <div class="bg-indigo-100 p-3 rounded-full text-indigo-600 mb-2">
638
+ <i class="fas fa-heart"></i>
639
+ </div>
640
+ <span class="text-xs font-medium">Send Love</span>
641
+ </button>
642
+ <button class="bg-green-50 rounded-lg p-3 flex flex-col items-center hover:bg-green-100">
643
+ <div class="bg-green-100 p-3 rounded-full text-green-600 mb-2">
644
+ <i class="fas fa-trophy"></i>
645
+ </div>
646
+ <span class="text-xs font-medium">New Challenge</span>
647
+ </button>
648
+ <button class="bg-blue-50 rounded-lg p-3 flex flex-col items-center hover:bg-blue-100">
649
+ <div class="bg-blue-100 p-3 rounded-full text-blue-600 mb-2">
650
+ <i class="fas fa-calendar-check"></i>
651
+ </div>
652
+ <span class="text-xs font-medium">Plan Activity</span>
653
+ </button>
654
+ <button class="bg-purple-50 rounded-lg p-3 flex flex-col items-center hover:bg-purple-100">
655
+ <div class="bg-purple-100 p-3 rounded-full text-purple-600 mb-2">
656
+ <i class="fas fa-handshake"></i>
657
+ </div>
658
+ <span class="text-xs font-medium">Resolve Conflict</span>
659
+ </button>
660
+ <button class="bg-yellow-50 rounded-lg p-3 flex flex-col items-center hover:bg-yellow-100">
661
+ <div class="bg-yellow-100 p-3 rounded-full text-yellow-600 mb-2">
662
+ <i class="fas fa-gift"></i>
663
+ </div>
664
+ <span class="text-xs font-medium">Send Reward</span>
665
+ </button>
666
+ <button class="bg-pink-50 rounded-lg p-3 flex flex-col items-center hover:bg-pink-100">
667
+ <div class="bg-pink-100 p-3 rounded-full text-pink-600 mb-2">
668
+ <i class="fas fa-robot"></i>
669
+ </div>
670
+ <span class="text-xs font-medium">AI Assistant</span>
671
+ </button>
672
+ </div>
673
+ </div>
674
+
675
+ <!-- Family Calendar -->
676
+ <div class="bg-white rounded-lg shadow-md p-6">
677
+ <div class="flex justify-between items-center mb-4">
678
+ <h3 class="text-lg font-bold text-gray-800">Family Calendar</h3>
679
+ <button class="text-indigo-600 hover:text-indigo-800">
680
+ <i class="fas fa-plus"></i>
681
+ </button>
682
+ </div>
683
+ <div class="space-y-3">
684
+ <div class="flex items-start">
685
+ <div class="bg-indigo-100 p-2 rounded-lg">
686
+ <p class="text-xs font-bold text-indigo-800">TODAY</p>
687
+ <p class="text-xl font-bold text-indigo-800">15</p>
688
+ </div>
689
+ <div class="ml-3">
690
+ <p class="text-sm font-medium">Family Movie Night</p>
691
+ <p class="text-xs text-gray-500">7:00 PM • Living Room</p>
692
+ </div>
693
+ </div>
694
+ <div class="flex items-start">
695
+ <div class="bg-gray-100 p-2 rounded-lg">
696
+ <p class="text-xs font-bold text-gray-800">THU</p>
697
+ <p class="text-xl font-bold text-gray-800">16</p>
698
+ </div>
699
+ <div class="ml-3">
700
+ <p class="text-sm font-medium">Parent-Teacher Conference</p>
701
+ <p class="text-xs text-gray-500">3:30 PM • Emily's School</p>
702
+ </div>
703
+ </div>
704
+ <div class="flex items-start">
705
+ <div class="bg-gray-100 p-2 rounded-lg">
706
+ <p class="text-xs font-bold text-gray-800">SAT</p>
707
+ <p class="text-xl font-bold text-gray-800">18</p>
708
+ </div>
709
+ <div class="ml-3">
710
+ <p class="text-sm font-medium">Jacob's Soccer Game</p>
711
+ <p class="text-xs text-gray-500">10:00 AM • Community Park</p>
712
+ </div>
713
+ </div>
714
+ </div>
715
+ </div>
716
+ </div>
717
+ </div>
718
+ </div>
719
+
720
+ <!-- Mobile Bottom Navigation -->
721
+ <div class="sm:hidden fixed bottom-0 left-0 right-0 bg-white shadow-lg">
722
+ <div class="flex justify-around">
723
+ <a href="#" class="flex flex-col items-center justify-center p-3 text-indigo-600">
724
+ <i class="fas fa-home"></i>
725
+ <span class="text-xs mt-1">Home</span>
726
+ </a>
727
+ <a href="#" class="flex flex-col items-center justify-center p-3 text-gray-500">
728
+ <i class="fas fa-heart"></i>
729
+ <span class="text-xs mt-1">Bonding</span>
730
+ </a>
731
+ <a href="#" class="flex flex-col items-center justify-center p-3 text-gray-500">
732
+ <i class="fas fa-trophy"></i>
733
+ <span class="text-xs mt-1">Habits</span>
734
+ </a>
735
+ <a href="#" class="flex flex-col items-center justify-center p-3 text-gray-500">
736
+ <i class="fas fa-users"></i>
737
+ <span class="text-xs mt-1">Family</span>
738
+ </a>
739
+ </div>
740
+ </div>
741
+
742
+ <script>
743
+ // Mobile menu toggle
744
+ document.addEventListener('DOMContentLoaded', function() {
745
+ const mobileMenuButton = document.querySelector('[aria-controls="mobile-menu"]');
746
+ const mobileMenu = document.getElementById('mobile-menu');
747
+
748
+ mobileMenuButton.addEventListener('click', function() {
749
+ const expanded = this.getAttribute('aria-expanded') === 'true';
750
+ this.setAttribute('aria-expanded', !expanded);
751
+ mobileMenu.classList.toggle('hidden');
752
+ });
753
+
754
+ // Simulate some data updates
755
+ setInterval(() => {
756
+ const waterChallenge = document.querySelector('.from-indigo-100');
757
+ if (waterChallenge) {
758
+ const progress = waterChallenge.querySelector('.bg-indigo-600');
759
+ const currentWidth = parseInt(progress.style.width) || 75;
760
+ const newWidth = currentWidth === 100 ? 75 : currentWidth + 5;
761
+ progress.style.width = `${newWidth}%`;
762
+
763
+ const progressText = waterChallenge.querySelector('span:nth-child(2)');
764
+ progressText.textContent = `${newWidth}%`;
765
+ }
766
+ }, 3000);
767
+ });
768
+ </script>
769
+ <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=seunmanuel/https-huggingface-co-spaces-seunmanuel" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
770
  </html>