Hugging Face's logo

Spaces:
Dementiacoach
/
memory-accessibility-app
Running

App Files Community
Dementiacoach commited on
Commit
d7585da
·
verified ·
1 Parent(s): efdb529

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +763 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Memory Accessibility App
3
- emoji: 🐨
4
- colorFrom: pink
5
- colorTo: indigo
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: memory-accessibility-app
3
+ emoji: 🐳
4
+ colorFrom: yellow
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,763 @@
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>Memory Companion - Supporting Loved Ones with Dementia</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
+ .memory-card {
11
+ transition: all 0.3s ease;
12
+ transform-style: preserve-3d;
13
+ }
14
+ .memory-card:hover {
15
+ transform: translateY(-5px) rotateY(5deg);
16
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
17
+ }
18
+ .memory-timeline {
19
+ position: relative;
20
+ }
21
+ .memory-timeline::before {
22
+ content: '';
23
+ position: absolute;
24
+ left: 50%;
25
+ transform: translateX(-50%);
26
+ width: 2px;
27
+ height: 100%;
28
+ background: linear-gradient(to bottom, #4f46e5, #a855f7, #ec4899);
29
+ }
30
+ .timeline-item:nth-child(odd) {
31
+ align-self: flex-start;
32
+ }
33
+ .timeline-item:nth-child(even) {
34
+ align-self: flex-end;
35
+ }
36
+ .fade-in {
37
+ animation: fadeIn 0.5s ease-in;
38
+ }
39
+ @keyframes fadeIn {
40
+ from { opacity: 0; transform: translateY(20px); }
41
+ to { opacity: 1; transform: translateY(0); }
42
+ }
43
+ .memory-modal {
44
+ animation: modalFadeIn 0.3s ease-out;
45
+ }
46
+ @keyframes modalFadeIn {
47
+ from { opacity: 0; transform: scale(0.9); }
48
+ to { opacity: 1; transform: scale(1); }
49
+ }
50
+ </style>
51
+ </head>
52
+ <body class="bg-gray-50 min-h-screen font-sans">
53
+ <!-- Header -->
54
+ <header class="bg-gradient-to-r from-indigo-600 to-purple-600 text-white shadow-lg">
55
+ <div class="container mx-auto px-4 py-6">
56
+ <div class="flex justify-between items-center">
57
+ <div class="flex items-center space-x-3">
58
+ <i class="fas fa-brain text-3xl"></i>
59
+ <h1 class="text-2xl font-bold">Memory Companion</h1>
60
+ </div>
61
+ <nav class="hidden md:flex space-x-6">
62
+ <a href="#about" class="hover:text-indigo-200 transition">About</a>
63
+ <a href="#features" class="hover:text-indigo-200 transition">Features</a>
64
+ <a href="#timeline" class="hover:text-indigo-200 transition">Memory Timeline</a>
65
+ <a href="#resources" class="hover:text-indigo-200 transition">Resources</a>
66
+ </nav>
67
+ <button class="md:hidden text-2xl" id="mobile-menu-button">
68
+ <i class="fas fa-bars"></i>
69
+ </button>
70
+ </div>
71
+ </div>
72
+ <!-- Mobile Menu -->
73
+ <div class="md:hidden hidden bg-indigo-700 py-4" id="mobile-menu">
74
+ <div class="container mx-auto px-4 flex flex-col space-y-3">
75
+ <a href="#about" class="text-white hover:text-indigo-200 transition">About</a>
76
+ <a href="#features" class="text-white hover:text-indigo-200 transition">Features</a>
77
+ <a href="#timeline" class="text-white hover:text-indigo-200 transition">Memory Timeline</a>
78
+ <a href="#resources" class="text-white hover:text-indigo-200 transition">Resources</a>
79
+ </div>
80
+ </div>
81
+ </header>
82
+
83
+ <!-- Hero Section -->
84
+ <section class="bg-gradient-to-br from-indigo-50 to-purple-50 py-16">
85
+ <div class="container mx-auto px-4 flex flex-col md:flex-row items-center">
86
+ <div class="md:w-1/2 mb-10 md:mb-0 fade-in">
87
+ <h2 class="text-4xl md:text-5xl font-bold text-gray-800 mb-4">Connecting Through Memories</h2>
88
+ <p class="text-xl text-gray-600 mb-6">A compassionate tool to help loved ones with dementia reconnect with their preserved memories and strengthen relationships.</p>
89
+ <div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4">
90
+ <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-lg font-medium transition shadow-md">
91
+ Start Memory Profile
92
+ </button>
93
+ <button class="border border-indigo-600 text-indigo-600 hover:bg-indigo-50 px-6 py-3 rounded-lg font-medium transition">
94
+ Learn More
95
+ </button>
96
+ </div>
97
+ </div>
98
+ <div class="md:w-1/2 flex justify-center fade-in">
99
+ <div class="relative w-full max-w-md">
100
+ <div class="absolute -top-10 -left-10 w-64 h-64 bg-purple-200 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob"></div>
101
+ <div class="absolute -bottom-10 -right-10 w-64 h-64 bg-indigo-200 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000"></div>
102
+ <img src="https://images.unsplash.com/photo-1600431521340-491eca880813?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
103
+ alt="Elderly couple smiling"
104
+ class="relative rounded-xl shadow-2xl border-8 border-white">
105
+ </div>
106
+ </div>
107
+ </div>
108
+ </section>
109
+
110
+ <!-- About Section -->
111
+ <section id="about" class="py-16 bg-white">
112
+ <div class="container mx-auto px-4">
113
+ <div class="text-center mb-12">
114
+ <h2 class="text-3xl font-bold text-gray-800 mb-4">Understanding Retrogenesis in Dementia</h2>
115
+ <div class="w-24 h-1 bg-indigo-600 mx-auto mb-6"></div>
116
+ <p class="text-gray-600 max-w-3xl mx-auto">
117
+ Dementia affects memory in reverse order of acquisition, with recent memories lost first while older memories remain preserved longer.
118
+ Our app helps caregivers and family members access these intact memories to maintain meaningful connections.
119
+ </p>
120
+ </div>
121
+
122
+ <div class="grid md:grid-cols-3 gap-8">
123
+ <div class="bg-indigo-50 p-6 rounded-xl shadow-sm hover:shadow-md transition">
124
+ <div class="text-indigo-600 text-4xl mb-4">
125
+ <i class="fas fa-brain"></i>
126
+ </div>
127
+ <h3 class="text-xl font-semibold mb-2 text-gray-800">Memory Preservation</h3>
128
+ <p class="text-gray-600">
129
+ Focus on long-term memories that are typically preserved longest in dementia progression.
130
+ </p>
131
+ </div>
132
+ <div class="bg-purple-50 p-6 rounded-xl shadow-sm hover:shadow-md transition">
133
+ <div class="text-purple-600 text-4xl mb-4">
134
+ <i class="fas fa-heart"></i>
135
+ </div>
136
+ <h3 class="text-xl font-semibold mb-2 text-gray-800">Emotional Connection</h3>
137
+ <p class="text-gray-600">
138
+ Strengthen bonds by accessing preserved emotional memories and shared experiences.
139
+ </p>
140
+ </div>
141
+ <div class="bg-pink-50 p-6 rounded-xl shadow-sm hover:shadow-md transition">
142
+ <div class="text-pink-600 text-4xl mb-4">
143
+ <i class="fas fa-users"></i>
144
+ </div>
145
+ <h3 class="text-xl font-semibold mb-2 text-gray-800">Family Collaboration</h3>
146
+ <p class="text-gray-600">
147
+ Multiple family members can contribute to building a comprehensive memory profile.
148
+ </p>
149
+ </div>
150
+ </div>
151
+ </div>
152
+ </section>
153
+
154
+ <!-- Features Section -->
155
+ <section id="features" class="py-16 bg-gray-50">
156
+ <div class="container mx-auto px-4">
157
+ <div class="text-center mb-12">
158
+ <h2 class="text-3xl font-bold text-gray-800 mb-4">Key Features</h2>
159
+ <div class="w-24 h-1 bg-indigo-600 mx-auto mb-6"></div>
160
+ <p class="text-gray-600 max-w-3xl mx-auto">
161
+ Our app provides structured tools to document and access preserved memories at different life stages.
162
+ </p>
163
+ </div>
164
+
165
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
166
+ <!-- Memory Cards -->
167
+ <div class="memory-card bg-white p-6 rounded-xl shadow-md border-l-4 border-indigo-500">
168
+ <div class="flex items-center mb-4">
169
+ <div class="bg-indigo-100 p-3 rounded-full mr-4">
170
+ <i class="fas fa-music text-indigo-600 text-xl"></i>
171
+ </div>
172
+ <h3 class="text-xl font-semibold text-gray-800">Favorite Music</h3>
173
+ </div>
174
+ <p class="text-gray-600">
175
+ Document songs and artists from different life periods that may trigger positive memories.
176
+ </p>
177
+ </div>
178
+
179
+ <div class="memory-card bg-white p-6 rounded-xl shadow-md border-l-4 border-purple-500">
180
+ <div class="flex items-center mb-4">
181
+ <div class="bg-purple-100 p-3 rounded-full mr-4">
182
+ <i class="fas fa-utensils text-purple-600 text-xl"></i>
183
+ </div>
184
+ <h3 class="text-xl font-semibold text-gray-800">Favorite Foods</h3>
185
+ </div>
186
+ <p class="text-gray-600">
187
+ Record childhood comfort foods and family recipes that may still be familiar.
188
+ </p>
189
+ </div>
190
+
191
+ <div class="memory-card bg-white p-6 rounded-xl shadow-md border-l-4 border-pink-500">
192
+ <div class="flex items-center mb-4">
193
+ <div class="bg-pink-100 p-3 rounded-full mr-4">
194
+ <i class="fas fa-book text-pink-600 text-xl"></i>
195
+ </div>
196
+ <h3 class="text-xl font-semibold text-gray-800">Life Stories</h3>
197
+ </div>
198
+ <p class="text-gray-600">
199
+ Capture significant life events and personal narratives from earlier years.
200
+ </p>
201
+ </div>
202
+
203
+ <div class="memory-card bg-white p-6 rounded-xl shadow-md border-l-4 border-blue-500">
204
+ <div class="flex items-center mb-4">
205
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
206
+ <i class="fas fa-images text-blue-600 text-xl"></i>
207
+ </div>
208
+ <h3 class="text-xl font-semibold text-gray-800">Photo Memories</h3>
209
+ </div>
210
+ <p class="text-gray-600">
211
+ Upload and organize photos from different life stages with descriptive captions.
212
+ </p>
213
+ </div>
214
+
215
+ <div class="memory-card bg-white p-6 rounded-xl shadow-md border-l-4 border-green-500">
216
+ <div class="flex items-center mb-4">
217
+ <div class="bg-green-100 p-3 rounded-full mr-4">
218
+ <i class="fas fa-hands-helping text-green-600 text-xl"></i>
219
+ </div>
220
+ <h3 class="text-xl font-semibold text-gray-800">Relationship Map</h3>
221
+ </div>
222
+ <p class="text-gray-600">
223
+ Visualize important relationships and how to reference them appropriately.
224
+ </p>
225
+ </div>
226
+
227
+ <div class="memory-card bg-white p-6 rounded-xl shadow-md border-l-4 border-yellow-500">
228
+ <div class="flex items-center mb-4">
229
+ <div class="bg-yellow-100 p-3 rounded-full mr-4">
230
+ <i class="fas fa-calendar-alt text-yellow-600 text-xl"></i>
231
+ </div>
232
+ <h3 class="text-xl font-semibold text-gray-800">Memory Triggers</h3>
233
+ </div>
234
+ <p class="text-gray-600">
235
+ Identify sensory triggers (smells, textures, sounds) that may evoke memories.
236
+ </p>
237
+ </div>
238
+ </div>
239
+ </div>
240
+ </section>
241
+
242
+ <!-- Memory Timeline Section -->
243
+ <section id="timeline" class="py-16 bg-white">
244
+ <div class="container mx-auto px-4">
245
+ <div class="text-center mb-12">
246
+ <h2 class="text-3xl font-bold text-gray-800 mb-4">Memory Timeline</h2>
247
+ <div class="w-24 h-1 bg-indigo-600 mx-auto mb-6"></div>
248
+ <p class="text-gray-600 max-w-3xl mx-auto">
249
+ Visualize preserved memories across different life stages based on retrogenesis principles.
250
+ </p>
251
+ </div>
252
+
253
+ <div class="memory-timeline flex flex-col items-center py-10">
254
+ <!-- Timeline Items -->
255
+ <div class="timeline-item mb-8 w-full max-w-md bg-indigo-50 p-6 rounded-xl shadow-sm relative fade-in">
256
+ <div class="absolute -top-3 -left-3 w-6 h-6 bg-indigo-600 rounded-full"></div>
257
+ <h3 class="text-xl font-semibold mb-2 text-indigo-800">Childhood (0-12 years)</h3>
258
+ <p class="text-gray-700 mb-3">Typically the most preserved memories in dementia progression.</p>
259
+ <button class="text-indigo-600 hover:text-indigo-800 font-medium" onclick="openMemoryModal('childhood')">
260
+ View Childhood Memories →
261
+ </button>
262
+ </div>
263
+
264
+ <div class="timeline-item mb-8 w-full max-w-md bg-purple-50 p-6 rounded-xl shadow-sm relative fade-in">
265
+ <div class="absolute -top-3 -left-3 w-6 h-6 bg-purple-600 rounded-full"></div>
266
+ <h3 class="text-xl font-semibold mb-2 text-purple-800">Adolescence (13-19 years)</h3>
267
+ <p class="text-gray-700 mb-3">Formative years often remembered well into dementia progression.</p>
268
+ <button class="text-purple-600 hover:text-purple-800 font-medium" onclick="openMemoryModal('adolescence')">
269
+ View Adolescent Memories →
270
+ </button>
271
+ </div>
272
+
273
+ <div class="timeline-item mb-8 w-full max-w-md bg-pink-50 p-6 rounded-xl shadow-sm relative fade-in">
274
+ <div class="absolute -top-3 -left-3 w-6 h-6 bg-pink-600 rounded-full"></div>
275
+ <h3 class="text-xl font-semibold mb-2 text-pink-800">Early Adulthood (20-35 years)</h3>
276
+ <p class="text-gray-700 mb-3">Career and family memories from this period often remain accessible.</p>
277
+ <button class="text-pink-600 hover:text-pink-800 font-medium" onclick="openMemoryModal('early-adulthood')">
278
+ View Early Adulthood Memories →
279
+ </button>
280
+ </div>
281
+
282
+ <div class="timeline-item mb-8 w-full max-w-md bg-blue-50 p-6 rounded-xl shadow-sm relative fade-in">
283
+ <div class="absolute -top-3 -left-3 w-6 h-6 bg-blue-600 rounded-full"></div>
284
+ <h3 class="text-xl font-semibold mb-2 text-blue-800">Middle Age (36-65 years)</h3>
285
+ <p class="text-gray-700 mb-3">Some memories from this period may be retained in early dementia stages.</p>
286
+ <button class="text-blue-600 hover:text-blue-800 font-medium" onclick="openMemoryModal('middle-age')">
287
+ View Middle Age Memories →
288
+ </button>
289
+ </div>
290
+
291
+ <div class="timeline-item mb-8 w-full max-w-md bg-green-50 p-6 rounded-xl shadow-sm relative fade-in">
292
+ <div class="absolute -top-3 -left-3 w-6 h-6 bg-green-600 rounded-full"></div>
293
+ <h3 class="text-xl font-semibold mb-2 text-green-800">Later Years (65+ years)</h3>
294
+ <p class="text-gray-700 mb-3">Recent memories most vulnerable to dementia-related memory loss.</p>
295
+ <button class="text-green-600 hover:text-green-800 font-medium" onclick="openMemoryModal('later-years')">
296
+ View Later Years Memories →
297
+ </button>
298
+ </div>
299
+ </div>
300
+ </div>
301
+ </section>
302
+
303
+ <!-- Memory Collection Form -->
304
+ <section class="py-16 bg-gradient-to-br from-indigo-50 to-purple-50">
305
+ <div class="container mx-auto px-4 max-w-4xl">
306
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden">
307
+ <div class="bg-gradient-to-r from-indigo-600 to-purple-600 p-6 text-white">
308
+ <h2 class="text-2xl font-bold">Create a Memory Profile</h2>
309
+ <p>Help your loved one by documenting their preserved memories</p>
310
+ </div>
311
+
312
+ <form class="p-6">
313
+ <div class="mb-6">
314
+ <label class="block text-gray-700 font-medium mb-2">Life Stage</label>
315
+ <select class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
316
+ <option>Childhood (0-12 years)</option>
317
+ <option>Adolescence (13-19 years)</option>
318
+ <option>Early Adulthood (20-35 years)</option>
319
+ <option>Middle Age (36-65 years)</option>
320
+ <option>Later Years (65+ years)</option>
321
+ </select>
322
+ </div>
323
+
324
+ <div class="mb-6">
325
+ <label class="block text-gray-700 font-medium mb-2">Memory Category</label>
326
+ <select class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
327
+ <option>Favorite Foods</option>
328
+ <option>Music & Entertainment</option>
329
+ <option>Hobbies & Activities</option>
330
+ <option>Life Events</option>
331
+ <option>Relationships</option>
332
+ <option>Places</option>
333
+ <option>School/Work</option>
334
+ <option>Other</option>
335
+ </select>
336
+ </div>
337
+
338
+ <div class="mb-6">
339
+ <label class="block text-gray-700 font-medium mb-2">Memory Description</label>
340
+ <textarea class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" rows="4" placeholder="Describe the memory in detail..."></textarea>
341
+ </div>
342
+
343
+ <div class="mb-6">
344
+ <label class="block text-gray-700 font-medium mb-2">Upload Photo (Optional)</label>
345
+ <div class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center">
346
+ <i class="fas fa-cloud-upload-alt text-3xl text-gray-400 mb-2"></i>
347
+ <p class="text-gray-500">Drag & drop photos here or click to browse</p>
348
+ <input type="file" class="hidden">
349
+ </div>
350
+ </div>
351
+
352
+ <div class="flex justify-end">
353
+ <button type="submit" class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-lg font-medium transition shadow-md">
354
+ Save Memory
355
+ </button>
356
+ </div>
357
+ </form>
358
+ </div>
359
+ </div>
360
+ </section>
361
+
362
+ <!-- Resources Section -->
363
+ <section id="resources" class="py-16 bg-white">
364
+ <div class="container mx-auto px-4">
365
+ <div class="text-center mb-12">
366
+ <h2 class="text-3xl font-bold text-gray-800 mb-4">Dementia Care Resources</h2>
367
+ <div class="w-24 h-1 bg-indigo-600 mx-auto mb-6"></div>
368
+ <p class="text-gray-600 max-w-3xl mx-auto">
369
+ Additional information and support for caregivers and family members.
370
+ </p>
371
+ </div>
372
+
373
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
374
+ <div class="border border-gray-200 rounded-lg overflow-hidden hover:shadow-md transition">
375
+ <div class="bg-indigo-100 p-4">
376
+ <i class="fas fa-book-open text-indigo-600 text-2xl"></i>
377
+ </div>
378
+ <div class="p-6">
379
+ <h3 class="text-xl font-semibold mb-2">Understanding Retrogenesis</h3>
380
+ <p class="text-gray-600 mb-4">Learn how dementia affects memory in reverse order of acquisition.</p>
381
+ <a href="#" class="text-indigo-600 font-medium hover:text-indigo-800">Read Article →</a>
382
+ </div>
383
+ </div>
384
+
385
+ <div class="border border-gray-200 rounded-lg overflow-hidden hover:shadow-md transition">
386
+ <div class="bg-purple-100 p-4">
387
+ <i class="fas fa-comments text-purple-600 text-2xl"></i>
388
+ </div>
389
+ <div class="p-6">
390
+ <h3 class="text-xl font-semibold mb-2">Communication Strategies</h3>
391
+ <p class="text-gray-600 mb-4">Effective ways to communicate with someone experiencing memory loss.</p>
392
+ <a href="#" class="text-purple-600 font-medium hover:text-purple-800">View Guide →</a>
393
+ </div>
394
+ </div>
395
+
396
+ <div class="border border-gray-200 rounded-lg overflow-hidden hover:shadow-md transition">
397
+ <div class="bg-pink-100 p-4">
398
+ <i class="fas fa-hands-helping text-pink-600 text-2xl"></i>
399
+ </div>
400
+ <div class="p-6">
401
+ <h3 class="text-xl font-semibold mb-2">Support Groups</h3>
402
+ <p class="text-gray-600 mb-4">Connect with others caring for loved ones with dementia.</p>
403
+ <a href="#" class="text-pink-600 font-medium hover:text-pink-800">Find Support →</a>
404
+ </div>
405
+ </div>
406
+
407
+ <div class="border border-gray-200 rounded-lg overflow-hidden hover:shadow-md transition">
408
+ <div class="bg-blue-100 p-4">
409
+ <i class="fas fa-music text-blue-600 text-2xl"></i>
410
+ </div>
411
+ <div class="p-6">
412
+ <h3 class="text-xl font-semibold mb-2">Music Therapy</h3>
413
+ <p class="text-gray-600 mb-4">How music from preserved memory periods can be therapeutic.</p>
414
+ <a href="#" class="text-blue-600 font-medium hover:text-blue-800">Learn More →</a>
415
+ </div>
416
+ </div>
417
+
418
+ <div class="border border-gray-200 rounded-lg overflow-hidden hover:shadow-md transition">
419
+ <div class="bg-green-100 p-4">
420
+ <i class="fas fa-heartbeat text-green-600 text-2xl"></i>
421
+ </div>
422
+ <div class="p-6">
423
+ <h3 class="text-xl font-semibold mb-2">Self-Care for Caregivers</h3>
424
+ <p class="text-gray-600 mb-4">Important strategies to maintain your own wellbeing.</p>
425
+ <a href="#" class="text-green-600 font-medium hover:text-green-800">Read Tips →</a>
426
+ </div>
427
+ </div>
428
+
429
+ <div class="border border-gray-200 rounded-lg overflow-hidden hover:shadow-md transition">
430
+ <div class="bg-yellow-100 p-4">
431
+ <i class="fas fa-question-circle text-yellow-600 text-2xl"></i>
432
+ </div>
433
+ <div class="p-6">
434
+ <h3 class="text-xl font-semibold mb-2">FAQ</h3>
435
+ <p class="text-gray-600 mb-4">Answers to common questions about dementia and memory care.</p>
436
+ <a href="#" class="text-yellow-600 font-medium hover:text-yellow-800">View FAQs →</a>
437
+ </div>
438
+ </div>
439
+ </div>
440
+ </div>
441
+ </section>
442
+
443
+ <!-- Testimonials -->
444
+ <section class="py-16 bg-gray-50">
445
+ <div class="container mx-auto px-4">
446
+ <div class="text-center mb-12">
447
+ <h2 class="text-3xl font-bold text-gray-800 mb-4">Caregiver Stories</h2>
448
+ <div class="w-24 h-1 bg-indigo-600 mx-auto mb-6"></div>
449
+ <p class="text-gray-600 max-w-3xl mx-auto">
450
+ Hear from families who have used Memory Companion to connect with their loved ones.
451
+ </p>
452
+ </div>
453
+
454
+ <div class="grid md:grid-cols-2 gap-8">
455
+ <div class="bg-white p-8 rounded-xl shadow-sm">
456
+ <div class="flex items-center mb-4">
457
+ <div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center text-indigo-600 text-xl font-bold mr-4">M</div>
458
+ <div>
459
+ <h4 class="font-semibold">Margaret T.</h4>
460
+ <p class="text-gray-500 text-sm">Daughter of dementia patient</p>
461
+ </div>
462
+ </div>
463
+ <p class="text-gray-700 italic mb-4">
464
+ "When I played my mother's favorite childhood songs, she lit up in a way I hadn't seen in months. This app helped me remember what music to try."
465
+ </p>
466
+ <div class="flex space-x-1 text-yellow-400">
467
+ <i class="fas fa-star"></i>
468
+ <i class="fas fa-star"></i>
469
+ <i class="fas fa-star"></i>
470
+ <i class="fas fa-star"></i>
471
+ <i class="fas fa-star"></i>
472
+ </div>
473
+ </div>
474
+
475
+ <div class="bg-white p-8 rounded-xl shadow-sm">
476
+ <div class="flex items-center mb-4">
477
+ <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center text-purple-600 text-xl font-bold mr-4">J</div>
478
+ <div>
479
+ <h4 class="font-semibold">James L.</h4>
480
+ <p class="text-gray-500 text-sm">Son of dementia patient</p>
481
+ </div>
482
+ </div>
483
+ <p class="text-gray-700 italic mb-4">
484
+ "My father doesn't recognize me anymore, but he remembers his childhood friend 'Tommy' perfectly. The relationship map helped me understand how to connect with him."
485
+ </p>
486
+ <div class="flex space-x-1 text-yellow-400">
487
+ <i class="fas fa-star"></i>
488
+ <i class="fas fa-star"></i>
489
+ <i class="fas fa-star"></i>
490
+ <i class="fas fa-star"></i>
491
+ <i class="fas fa-star-half-alt"></i>
492
+ </div>
493
+ </div>
494
+ </div>
495
+ </div>
496
+ </section>
497
+
498
+ <!-- Call to Action -->
499
+ <section class="py-16 bg-gradient-to-r from-indigo-600 to-purple-600 text-white">
500
+ <div class="container mx-auto px-4 text-center">
501
+ <h2 class="text-3xl font-bold mb-6">Ready to Create a Memory Profile?</h2>
502
+ <p class="text-xl mb-8 max-w-2xl mx-auto">
503
+ Start documenting your loved one's preserved memories today to maintain meaningful connections.
504
+ </p>
505
+ <button class="bg-white text-indigo-600 hover:bg-gray-100 px-8 py-4 rounded-lg font-bold text-lg transition shadow-lg">
506
+ Get Started - It's Free
507
+ </button>
508
+ </div>
509
+ </section>
510
+
511
+ <!-- Footer -->
512
+ <footer class="bg-gray-800 text-white py-12">
513
+ <div class="container mx-auto px-4">
514
+ <div class="grid md:grid-cols-4 gap-8">
515
+ <div>
516
+ <h3 class="text-xl font-bold mb-4 flex items-center">
517
+ <i class="fas fa-brain mr-2"></i> Memory Companion
518
+ </h3>
519
+ <p class="text-gray-400">
520
+ Supporting meaningful connections for those affected by dementia through preserved memories.
521
+ </p>
522
+ </div>
523
+
524
+ <div>
525
+ <h4 class="font-semibold text-lg mb-4">Quick Links</h4>
526
+ <ul class="space-y-2">
527
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Home</a></li>
528
+ <li><a href="#" class="text-gray-400 hover:text-white transition">About</a></li>
529
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Features</a></li>
530
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Resources</a></li>
531
+ </ul>
532
+ </div>
533
+
534
+ <div>
535
+ <h4 class="font-semibold text-lg mb-4">Support</h4>
536
+ <ul class="space-y-2">
537
+ <li><a href="#" class="text-gray-400 hover:text-white transition">FAQ</a></li>
538
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Help Center</a></li>
539
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Contact Us</a></li>
540
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Privacy Policy</a></li>
541
+ </ul>
542
+ </div>
543
+
544
+ <div>
545
+ <h4 class="font-semibold text-lg mb-4">Connect</h4>
546
+ <div class="flex space-x-4 mb-4">
547
+ <a href="#" class="w-10 h-10 bg-gray-700 rounded-full flex items-center justify-center hover:bg-indigo-600 transition">
548
+ <i class="fab fa-facebook-f"></i>
549
+ </a>
550
+ <a href="#" class="w-10 h-10 bg-gray-700 rounded-full flex items-center justify-center hover:bg-blue-400 transition">
551
+ <i class="fab fa-twitter"></i>
552
+ </a>
553
+ <a href="#" class="w-10 h-10 bg-gray-700 rounded-full flex items-center justify-center hover:bg-pink-600 transition">
554
+ <i class="fab fa-instagram"></i>
555
+ </a>
556
+ </div>
557
+ <p class="text-gray-400">
558
+ Subscribe to our newsletter for dementia care tips and updates.
559
+ </p>
560
+ </div>
561
+ </div>
562
+
563
+ <div class="border-t border-gray-700 mt-10 pt-6 text-center text-gray-400">
564
+ <p>&copy; 2023 Memory Companion. All rights reserved.</p>
565
+ </div>
566
+ </div>
567
+ </footer>
568
+
569
+ <!-- Memory Modal -->
570
+ <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden" id="memory-modal">
571
+ <div class="memory-modal bg-white rounded-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
572
+ <div class="p-6">
573
+ <div class="flex justify-between items-center mb-6">
574
+ <h3 class="text-2xl font-bold" id="modal-title">Childhood Memories</h3>
575
+ <button onclick="closeMemoryModal()" class="text-gray-500 hover:text-gray-700">
576
+ <i class="fas fa-times text-2xl"></i>
577
+ </button>
578
+ </div>
579
+
580
+ <div id="modal-content">
581
+ <!-- Content will be loaded here by JavaScript -->
582
+ </div>
583
+
584
+ <div class="mt-6 flex justify-end">
585
+ <button onclick="closeMemoryModal()" class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-2 rounded-lg font-medium transition">
586
+ Close
587
+ </button>
588
+ </div>
589
+ </div>
590
+ </div>
591
+ </div>
592
+
593
+ <script>
594
+ // Mobile menu toggle
595
+ document.getElementById('mobile-menu-button').addEventListener('click', function() {
596
+ const menu = document.getElementById('mobile-menu');
597
+ menu.classList.toggle('hidden');
598
+ });
599
+
600
+ // Sample memory data for the modal
601
+ const memoryData = {
602
+ 'childhood': {
603
+ title: 'Childhood Memories (0-12 years)',
604
+ content: `
605
+ <div class="space-y-6">
606
+ <div class="bg-indigo-50 p-4 rounded-lg">
607
+ <h4 class="font-semibold text-indigo-800 mb-2">Favorite Foods</h4>
608
+ <p class="text-gray-700">Homemade apple pie, peanut butter and jelly sandwiches, chocolate milk</p>
609
+ </div>
610
+ <div class="bg-purple-50 p-4 rounded-lg">
611
+ <h4 class="font-semibold text-purple-800 mb-2">Favorite Music</h4>
612
+ <p class="text-gray-700">Nursery rhymes, folk songs from family gatherings, early rock and roll</p>
613
+ </div>
614
+ <div class="bg-pink-50 p-4 rounded-lg">
615
+ <h4 class="font-semibold text-pink-800 mb-2">Important People</h4>
616
+ <p class="text-gray-700">Parents, siblings, childhood best friends, favorite teachers</p>
617
+ </div>
618
+ <div class="bg-blue-50 p-4 rounded-lg">
619
+ <h4 class="font-semibold text-blue-800 mb-2">Significant Events</h4>
620
+ <p class="text-gray-700">First day of school, family vacations, holidays celebrated, learning to ride a bike</p>
621
+ </div>
622
+ </div>
623
+ `
624
+ },
625
+ 'adolescence': {
626
+ title: 'Adolescent Memories (13-19 years)',
627
+ content: `
628
+ <div class="space-y-6">
629
+ <div class="bg-purple-50 p-4 rounded-lg">
630
+ <h4 class="font-semibold text-purple-800 mb-2">Favorite Activities</h4>
631
+ <p class="text-gray-700">High school sports, dances, hanging out with friends, first job</p>
632
+ </div>
633
+ <div class="bg-indigo-50 p-4 rounded-lg">
634
+ <h4 class="font-semibold text-indigo-800 mb-2">Favorite Music</h4>
635
+ <p class="text-gray-700">Popular bands and artists from teenage years, songs from first romance</p>
636
+ </div>
637
+ <div class="bg-pink-50 p-4 rounded-lg">
638
+ <h4 class="font-semibold text-pink-800 mb-2">Important People</h4>
639
+ <p class="text-gray-700">High school friends, first love, mentors, coaches</p>
640
+ </div>
641
+ <div class="bg-blue-50 p-4 rounded-lg">
642
+ <h4 class="font-semibold text-blue-800 mb-2">Significant Events</h4>
643
+ <p class="text-gray-700">Graduation, first car, family milestones, important achievements</p>
644
+ </div>
645
+ </div>
646
+ `
647
+ },
648
+ 'early-adulthood': {
649
+ title: 'Early Adulthood Memories (20-35 years)',
650
+ content: `
651
+ <div class="space-y-6">
652
+ <div class="bg-pink-50 p-4 rounded-lg">
653
+ <h4 class="font-semibold text-pink-800 mb-2">Career Beginnings</h4>
654
+ <p class="text-gray-700">First professional job, career aspirations, early achievements</p>
655
+ </div>
656
+ <div class="bg-indigo-50 p-4 rounded-lg">
657
+ <h4 class="font-semibold text-indigo-800 mb-2">Family Life</h4>
658
+ <p class="text-gray-700">Marriage, birth of children, first home, family traditions</p>
659
+ </div>
660
+ <div class="bg-purple-50 p-4 rounded-lg">
661
+ <h4 class="font-semibold text-purple-800 mb-2">Hobbies & Interests</h4>
662
+ <p class="text-gray-700">Activities enjoyed during this period, creative pursuits, sports</p>
663
+ </div>
664
+ <div class="bg-blue-50 p-4 rounded-lg">
665
+ <h4 class="font-semibold text-blue-800 mb-2">Significant Events</h4>
666
+ <p class="text-gray-700">Career milestones, family vacations, community involvement</p>
667
+ </div>
668
+ </div>
669
+ `
670
+ },
671
+ 'middle-age': {
672
+ title: 'Middle Age Memories (36-65 years)',
673
+ content: `
674
+ <div class="space-y-6">
675
+ <div class="bg-blue-50 p-4 rounded-lg">
676
+ <h4 class="font-semibold text-blue-800 mb-2">Career Highlights</h4>
677
+ <p class="text-gray-700">Professional achievements, leadership roles, career changes</p>
678
+ </div>
679
+ <div class="bg-indigo-50 p-4 rounded-lg">
680
+ <h4 class="font-semibold text-indigo-800 mb-2">Family Life</h4>
681
+ <p class="text-gray-700">Children growing up, family gatherings, grandchildren</p>
682
+ </div>
683
+ <div class="bg-purple-50 p-4 rounded-lg">
684
+ <h4 class="font-semibold text-purple-800 mb-2">Travel & Experiences</h4>
685
+ <p class="text-gray-700">Memorable trips, new experiences, personal growth</p>
686
+ </div>
687
+ <div class="bg-pink-50 p-4 rounded-lg">
688
+ <h4 class="font-semibold text-pink-800 mb-2">Community Involvement</h4>
689
+ <p class="text-gray-700">Volunteer work, clubs, organizations, religious activities</p>
690
+ </div>
691
+ </div>
692
+ `
693
+ },
694
+ 'later-years': {
695
+ title: 'Later Years Memories (65+ years)',
696
+ content: `
697
+ <div class="space-y-6">
698
+ <div class="bg-green-50 p-4 rounded-lg">
699
+ <h4 class="font-semibold text-green-800 mb-2">Retirement</h4>
700
+ <p class="text-gray-700">Transition to retirement, new hobbies, leisure activities</p>
701
+ </div>
702
+ <div class="bg-indigo-50 p-4 rounded-lg">
703
+ <h4 class="font-semibold text-indigo-800 mb-2">Family Life</h4>
704
+ <p class="text-gray-700">Grandchildren, family celebrations, multigenerational connections</p>
705
+ </div>
706
+ <div class="bg-purple-50 p-4 rounded-lg">
707
+ <h4 class="font-semibold text-purple-800 mb-2">Reflections</h4>
708
+ <p class="text-gray-700">Life lessons, wisdom gained, personal philosophy</p>
709
+ </div>
710
+ <div class="bg-blue-50 p-4 rounded-lg">
711
+ <h4 class="font-semibold text-blue-800 mb-2">Community</h4>
712
+ <p class="text-gray-700">Senior groups, volunteer activities, social connections</p>
713
+ </div>
714
+ </div>
715
+ `
716
+ }
717
+ };
718
+
719
+ // Open memory modal with specific content
720
+ function openMemoryModal(period) {
721
+ const modal = document.getElementById('memory-modal');
722
+ const title = document.getElementById('modal-title');
723
+ const content = document.getElementById('modal-content');
724
+
725
+ title.textContent = memoryData[period].title;
726
+ content.innerHTML = memoryData[period].content;
727
+
728
+ modal.classList.remove('hidden');
729
+ document.body.style.overflow = 'hidden';
730
+ }
731
+
732
+ // Close memory modal
733
+ function closeMemoryModal() {
734
+ const modal = document.getElementById('memory-modal');
735
+ modal.classList.add('hidden');
736
+ document.body.style.overflow = 'auto';
737
+ }
738
+
739
+ // Smooth scrolling for anchor links
740
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
741
+ anchor.addEventListener('click', function (e) {
742
+ e.preventDefault();
743
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
744
+ behavior: 'smooth'
745
+ });
746
+ });
747
+ });
748
+
749
+ // Animation for elements when they come into view
750
+ const observer = new IntersectionObserver((entries) => {
751
+ entries.forEach(entry => {
752
+ if (entry.isIntersecting) {
753
+ entry.target.classList.add('fade-in');
754
+ }
755
+ });
756
+ }, { threshold: 0.1 });
757
+
758
+ document.querySelectorAll('.fade-in').forEach(el => {
759
+ observer.observe(el);
760
+ });
761
+ </script>
762
+ <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=Dementiacoach/memory-accessibility-app" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
763
+ </html>
prompts.txt ADDED
File without changes