|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Memory Companion - Supporting Loved Ones with Dementia</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
.memory-card { |
|
|
transition: all 0.3s ease; |
|
|
transform-style: preserve-3d; |
|
|
} |
|
|
.memory-card:hover { |
|
|
transform: translateY(-5px) rotateY(5deg); |
|
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); |
|
|
} |
|
|
.memory-timeline { |
|
|
position: relative; |
|
|
} |
|
|
.memory-timeline::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
left: 50%; |
|
|
transform: translateX(-50%); |
|
|
width: 2px; |
|
|
height: 100%; |
|
|
background: linear-gradient(to bottom, #4f46e5, #a855f7, #ec4899); |
|
|
} |
|
|
.timeline-item:nth-child(odd) { |
|
|
align-self: flex-start; |
|
|
} |
|
|
.timeline-item:nth-child(even) { |
|
|
align-self: flex-end; |
|
|
} |
|
|
.fade-in { |
|
|
animation: fadeIn 0.5s ease-in; |
|
|
} |
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; transform: translateY(20px); } |
|
|
to { opacity: 1; transform: translateY(0); } |
|
|
} |
|
|
.memory-modal { |
|
|
animation: modalFadeIn 0.3s ease-out; |
|
|
} |
|
|
@keyframes modalFadeIn { |
|
|
from { opacity: 0; transform: scale(0.9); } |
|
|
to { opacity: 1; transform: scale(1); } |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 min-h-screen font-sans"> |
|
|
|
|
|
<header class="bg-gradient-to-r from-indigo-600 to-purple-600 text-white shadow-lg"> |
|
|
<div class="container mx-auto px-4 py-6"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-3"> |
|
|
<i class="fas fa-brain text-3xl"></i> |
|
|
<h1 class="text-2xl font-bold">Memory Companion</h1> |
|
|
</div> |
|
|
<nav class="hidden md:flex space-x-6"> |
|
|
<a href="#about" class="hover:text-indigo-200 transition">About</a> |
|
|
<a href="#features" class="hover:text-indigo-200 transition">Features</a> |
|
|
<a href="#timeline" class="hover:text-indigo-200 transition">Memory Timeline</a> |
|
|
<a href="#resources" class="hover:text-indigo-200 transition">Resources</a> |
|
|
</nav> |
|
|
<button class="md:hidden text-2xl" id="mobile-menu-button"> |
|
|
<i class="fas fa-bars"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="md:hidden hidden bg-indigo-700 py-4" id="mobile-menu"> |
|
|
<div class="container mx-auto px-4 flex flex-col space-y-3"> |
|
|
<a href="#about" class="text-white hover:text-indigo-200 transition">About</a> |
|
|
<a href="#features" class="text-white hover:text-indigo-200 transition">Features</a> |
|
|
<a href="#timeline" class="text-white hover:text-indigo-200 transition">Memory Timeline</a> |
|
|
<a href="#resources" class="text-white hover:text-indigo-200 transition">Resources</a> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<section class="bg-gradient-to-br from-indigo-50 to-purple-50 py-16"> |
|
|
<div class="container mx-auto px-4 flex flex-col md:flex-row items-center"> |
|
|
<div class="md:w-1/2 mb-10 md:mb-0 fade-in"> |
|
|
<h2 class="text-4xl md:text-5xl font-bold text-gray-800 mb-4">Connecting Through Memories</h2> |
|
|
<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> |
|
|
<div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4"> |
|
|
<button class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-lg font-medium transition shadow-md"> |
|
|
Start Memory Profile |
|
|
</button> |
|
|
<button class="border border-indigo-600 text-indigo-600 hover:bg-indigo-50 px-6 py-3 rounded-lg font-medium transition"> |
|
|
Learn More |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/2 flex justify-center fade-in"> |
|
|
<div class="relative w-full max-w-md"> |
|
|
<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> |
|
|
<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> |
|
|
<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" |
|
|
alt="Elderly couple smiling" |
|
|
class="relative rounded-xl shadow-2xl border-8 border-white"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="about" class="py-16 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="text-center mb-12"> |
|
|
<h2 class="text-3xl font-bold text-gray-800 mb-4">Understanding Retrogenesis in Dementia</h2> |
|
|
<div class="w-24 h-1 bg-indigo-600 mx-auto mb-6"></div> |
|
|
<p class="text-gray-600 max-w-3xl mx-auto"> |
|
|
Dementia affects memory in reverse order of acquisition, with recent memories lost first while older memories remain preserved longer. |
|
|
Our app helps caregivers and family members access these intact memories to maintain meaningful connections. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid md:grid-cols-3 gap-8"> |
|
|
<div class="bg-indigo-50 p-6 rounded-xl shadow-sm hover:shadow-md transition"> |
|
|
<div class="text-indigo-600 text-4xl mb-4"> |
|
|
<i class="fas fa-brain"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-2 text-gray-800">Memory Preservation</h3> |
|
|
<p class="text-gray-600"> |
|
|
Focus on long-term memories that are typically preserved longest in dementia progression. |
|
|
</p> |
|
|
</div> |
|
|
<div class="bg-purple-50 p-6 rounded-xl shadow-sm hover:shadow-md transition"> |
|
|
<div class="text-purple-600 text-4xl mb-4"> |
|
|
<i class="fas fa-heart"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-2 text-gray-800">Emotional Connection</h3> |
|
|
<p class="text-gray-600"> |
|
|
Strengthen bonds by accessing preserved emotional memories and shared experiences. |
|
|
</p> |
|
|
</div> |
|
|
<div class="bg-pink-50 p-6 rounded-xl shadow-sm hover:shadow-md transition"> |
|
|
<div class="text-pink-600 text-4xl mb-4"> |
|
|
<i class="fas fa-users"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-2 text-gray-800">Family Collaboration</h3> |
|
|
<p class="text-gray-600"> |
|
|
Multiple family members can contribute to building a comprehensive memory profile. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="features" class="py-16 bg-gray-50"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="text-center mb-12"> |
|
|
<h2 class="text-3xl font-bold text-gray-800 mb-4">Key Features</h2> |
|
|
<div class="w-24 h-1 bg-indigo-600 mx-auto mb-6"></div> |
|
|
<p class="text-gray-600 max-w-3xl mx-auto"> |
|
|
Our app provides structured tools to document and access preserved memories at different life stages. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6"> |
|
|
|
|
|
<div class="memory-card bg-white p-6 rounded-xl shadow-md border-l-4 border-indigo-500"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="bg-indigo-100 p-3 rounded-full mr-4"> |
|
|
<i class="fas fa-music text-indigo-600 text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold text-gray-800">Favorite Music</h3> |
|
|
</div> |
|
|
<p class="text-gray-600"> |
|
|
Document songs and artists from different life periods that may trigger positive memories. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="memory-card bg-white p-6 rounded-xl shadow-md border-l-4 border-purple-500"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="bg-purple-100 p-3 rounded-full mr-4"> |
|
|
<i class="fas fa-utensils text-purple-600 text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold text-gray-800">Favorite Foods</h3> |
|
|
</div> |
|
|
<p class="text-gray-600"> |
|
|
Record childhood comfort foods and family recipes that may still be familiar. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="memory-card bg-white p-6 rounded-xl shadow-md border-l-4 border-pink-500"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="bg-pink-100 p-3 rounded-full mr-4"> |
|
|
<i class="fas fa-book text-pink-600 text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold text-gray-800">Life Stories</h3> |
|
|
</div> |
|
|
<p class="text-gray-600"> |
|
|
Capture significant life events and personal narratives from earlier years. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="memory-card bg-white p-6 rounded-xl shadow-md border-l-4 border-blue-500"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="bg-blue-100 p-3 rounded-full mr-4"> |
|
|
<i class="fas fa-images text-blue-600 text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold text-gray-800">Photo Memories</h3> |
|
|
</div> |
|
|
<p class="text-gray-600"> |
|
|
Upload and organize photos from different life stages with descriptive captions. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="memory-card bg-white p-6 rounded-xl shadow-md border-l-4 border-green-500"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="bg-green-100 p-3 rounded-full mr-4"> |
|
|
<i class="fas fa-hands-helping text-green-600 text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold text-gray-800">Relationship Map</h3> |
|
|
</div> |
|
|
<p class="text-gray-600"> |
|
|
Visualize important relationships and how to reference them appropriately. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="memory-card bg-white p-6 rounded-xl shadow-md border-l-4 border-yellow-500"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="bg-yellow-100 p-3 rounded-full mr-4"> |
|
|
<i class="fas fa-calendar-alt text-yellow-600 text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold text-gray-800">Memory Triggers</h3> |
|
|
</div> |
|
|
<p class="text-gray-600"> |
|
|
Identify sensory triggers (smells, textures, sounds) that may evoke memories. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="timeline" class="py-16 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="text-center mb-12"> |
|
|
<h2 class="text-3xl font-bold text-gray-800 mb-4">Memory Timeline</h2> |
|
|
<div class="w-24 h-1 bg-indigo-600 mx-auto mb-6"></div> |
|
|
<p class="text-gray-600 max-w-3xl mx-auto"> |
|
|
Visualize preserved memories across different life stages based on retrogenesis principles. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="memory-timeline flex flex-col items-center py-10"> |
|
|
|
|
|
<div class="timeline-item mb-8 w-full max-w-md bg-indigo-50 p-6 rounded-xl shadow-sm relative fade-in"> |
|
|
<div class="absolute -top-3 -left-3 w-6 h-6 bg-indigo-600 rounded-full"></div> |
|
|
<h3 class="text-xl font-semibold mb-2 text-indigo-800">Childhood (0-12 years)</h3> |
|
|
<p class="text-gray-700 mb-3">Typically the most preserved memories in dementia progression.</p> |
|
|
<button class="text-indigo-600 hover:text-indigo-800 font-medium" onclick="openMemoryModal('childhood')"> |
|
|
View Childhood Memories → |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="timeline-item mb-8 w-full max-w-md bg-purple-50 p-6 rounded-xl shadow-sm relative fade-in"> |
|
|
<div class="absolute -top-3 -left-3 w-6 h-6 bg-purple-600 rounded-full"></div> |
|
|
<h3 class="text-xl font-semibold mb-2 text-purple-800">Adolescence (13-19 years)</h3> |
|
|
<p class="text-gray-700 mb-3">Formative years often remembered well into dementia progression.</p> |
|
|
<button class="text-purple-600 hover:text-purple-800 font-medium" onclick="openMemoryModal('adolescence')"> |
|
|
View Adolescent Memories → |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="timeline-item mb-8 w-full max-w-md bg-pink-50 p-6 rounded-xl shadow-sm relative fade-in"> |
|
|
<div class="absolute -top-3 -left-3 w-6 h-6 bg-pink-600 rounded-full"></div> |
|
|
<h3 class="text-xl font-semibold mb-2 text-pink-800">Early Adulthood (20-35 years)</h3> |
|
|
<p class="text-gray-700 mb-3">Career and family memories from this period often remain accessible.</p> |
|
|
<button class="text-pink-600 hover:text-pink-800 font-medium" onclick="openMemoryModal('early-adulthood')"> |
|
|
View Early Adulthood Memories → |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="timeline-item mb-8 w-full max-w-md bg-blue-50 p-6 rounded-xl shadow-sm relative fade-in"> |
|
|
<div class="absolute -top-3 -left-3 w-6 h-6 bg-blue-600 rounded-full"></div> |
|
|
<h3 class="text-xl font-semibold mb-2 text-blue-800">Middle Age (36-65 years)</h3> |
|
|
<p class="text-gray-700 mb-3">Some memories from this period may be retained in early dementia stages.</p> |
|
|
<button class="text-blue-600 hover:text-blue-800 font-medium" onclick="openMemoryModal('middle-age')"> |
|
|
View Middle Age Memories → |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="timeline-item mb-8 w-full max-w-md bg-green-50 p-6 rounded-xl shadow-sm relative fade-in"> |
|
|
<div class="absolute -top-3 -left-3 w-6 h-6 bg-green-600 rounded-full"></div> |
|
|
<h3 class="text-xl font-semibold mb-2 text-green-800">Later Years (65+ years)</h3> |
|
|
<p class="text-gray-700 mb-3">Recent memories most vulnerable to dementia-related memory loss.</p> |
|
|
<button class="text-green-600 hover:text-green-800 font-medium" onclick="openMemoryModal('later-years')"> |
|
|
View Later Years Memories → |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-gradient-to-br from-indigo-50 to-purple-50"> |
|
|
<div class="container mx-auto px-4 max-w-4xl"> |
|
|
<div class="bg-white rounded-xl shadow-lg overflow-hidden"> |
|
|
<div class="bg-gradient-to-r from-indigo-600 to-purple-600 p-6 text-white"> |
|
|
<h2 class="text-2xl font-bold">Create a Memory Profile</h2> |
|
|
<p>Help your loved one by documenting their preserved memories</p> |
|
|
</div> |
|
|
|
|
|
<form class="p-6"> |
|
|
<div class="mb-6"> |
|
|
<label class="block text-gray-700 font-medium mb-2">Life Stage</label> |
|
|
<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"> |
|
|
<option>Childhood (0-12 years)</option> |
|
|
<option>Adolescence (13-19 years)</option> |
|
|
<option>Early Adulthood (20-35 years)</option> |
|
|
<option>Middle Age (36-65 years)</option> |
|
|
<option>Later Years (65+ years)</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<label class="block text-gray-700 font-medium mb-2">Memory Category</label> |
|
|
<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"> |
|
|
<option>Favorite Foods</option> |
|
|
<option>Music & Entertainment</option> |
|
|
<option>Hobbies & Activities</option> |
|
|
<option>Life Events</option> |
|
|
<option>Relationships</option> |
|
|
<option>Places</option> |
|
|
<option>School/Work</option> |
|
|
<option>Other</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<label class="block text-gray-700 font-medium mb-2">Memory Description</label> |
|
|
<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> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<label class="block text-gray-700 font-medium mb-2">Upload Photo (Optional)</label> |
|
|
<div class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center"> |
|
|
<i class="fas fa-cloud-upload-alt text-3xl text-gray-400 mb-2"></i> |
|
|
<p class="text-gray-500">Drag & drop photos here or click to browse</p> |
|
|
<input type="file" class="hidden"> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex justify-end"> |
|
|
<button type="submit" class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-lg font-medium transition shadow-md"> |
|
|
Save Memory |
|
|
</button> |
|
|
</div> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="resources" class="py-16 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="text-center mb-12"> |
|
|
<h2 class="text-3xl font-bold text-gray-800 mb-4">Dementia Care Resources</h2> |
|
|
<div class="w-24 h-1 bg-indigo-600 mx-auto mb-6"></div> |
|
|
<p class="text-gray-600 max-w-3xl mx-auto"> |
|
|
Additional information and support for caregivers and family members. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6"> |
|
|
<div class="border border-gray-200 rounded-lg overflow-hidden hover:shadow-md transition"> |
|
|
<div class="bg-indigo-100 p-4"> |
|
|
<i class="fas fa-book-open text-indigo-600 text-2xl"></i> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-semibold mb-2">Understanding Retrogenesis</h3> |
|
|
<p class="text-gray-600 mb-4">Learn how dementia affects memory in reverse order of acquisition.</p> |
|
|
<a href="#" class="text-indigo-600 font-medium hover:text-indigo-800">Read Article →</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="border border-gray-200 rounded-lg overflow-hidden hover:shadow-md transition"> |
|
|
<div class="bg-purple-100 p-4"> |
|
|
<i class="fas fa-comments text-purple-600 text-2xl"></i> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-semibold mb-2">Communication Strategies</h3> |
|
|
<p class="text-gray-600 mb-4">Effective ways to communicate with someone experiencing memory loss.</p> |
|
|
<a href="#" class="text-purple-600 font-medium hover:text-purple-800">View Guide →</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="border border-gray-200 rounded-lg overflow-hidden hover:shadow-md transition"> |
|
|
<div class="bg-pink-100 p-4"> |
|
|
<i class="fas fa-hands-helping text-pink-600 text-2xl"></i> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-semibold mb-2">Support Groups</h3> |
|
|
<p class="text-gray-600 mb-4">Connect with others caring for loved ones with dementia.</p> |
|
|
<a href="#" class="text-pink-600 font-medium hover:text-pink-800">Find Support →</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="border border-gray-200 rounded-lg overflow-hidden hover:shadow-md transition"> |
|
|
<div class="bg-blue-100 p-4"> |
|
|
<i class="fas fa-music text-blue-600 text-2xl"></i> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-semibold mb-2">Music Therapy</h3> |
|
|
<p class="text-gray-600 mb-4">How music from preserved memory periods can be therapeutic.</p> |
|
|
<a href="#" class="text-blue-600 font-medium hover:text-blue-800">Learn More →</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="border border-gray-200 rounded-lg overflow-hidden hover:shadow-md transition"> |
|
|
<div class="bg-green-100 p-4"> |
|
|
<i class="fas fa-heartbeat text-green-600 text-2xl"></i> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-semibold mb-2">Self-Care for Caregivers</h3> |
|
|
<p class="text-gray-600 mb-4">Important strategies to maintain your own wellbeing.</p> |
|
|
<a href="#" class="text-green-600 font-medium hover:text-green-800">Read Tips →</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="border border-gray-200 rounded-lg overflow-hidden hover:shadow-md transition"> |
|
|
<div class="bg-yellow-100 p-4"> |
|
|
<i class="fas fa-question-circle text-yellow-600 text-2xl"></i> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-semibold mb-2">FAQ</h3> |
|
|
<p class="text-gray-600 mb-4">Answers to common questions about dementia and memory care.</p> |
|
|
<a href="#" class="text-yellow-600 font-medium hover:text-yellow-800">View FAQs →</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-gray-50"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="text-center mb-12"> |
|
|
<h2 class="text-3xl font-bold text-gray-800 mb-4">Caregiver Stories</h2> |
|
|
<div class="w-24 h-1 bg-indigo-600 mx-auto mb-6"></div> |
|
|
<p class="text-gray-600 max-w-3xl mx-auto"> |
|
|
Hear from families who have used Memory Companion to connect with their loved ones. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid md:grid-cols-2 gap-8"> |
|
|
<div class="bg-white p-8 rounded-xl shadow-sm"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<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> |
|
|
<div> |
|
|
<h4 class="font-semibold">Margaret T.</h4> |
|
|
<p class="text-gray-500 text-sm">Daughter of dementia patient</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-700 italic mb-4"> |
|
|
"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." |
|
|
</p> |
|
|
<div class="flex space-x-1 text-yellow-400"> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-8 rounded-xl shadow-sm"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<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> |
|
|
<div> |
|
|
<h4 class="font-semibold">James L.</h4> |
|
|
<p class="text-gray-500 text-sm">Son of dementia patient</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-700 italic mb-4"> |
|
|
"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." |
|
|
</p> |
|
|
<div class="flex space-x-1 text-yellow-400"> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star-half-alt"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-gradient-to-r from-indigo-600 to-purple-600 text-white"> |
|
|
<div class="container mx-auto px-4 text-center"> |
|
|
<h2 class="text-3xl font-bold mb-6">Ready to Create a Memory Profile?</h2> |
|
|
<p class="text-xl mb-8 max-w-2xl mx-auto"> |
|
|
Start documenting your loved one's preserved memories today to maintain meaningful connections. |
|
|
</p> |
|
|
<button class="bg-white text-indigo-600 hover:bg-gray-100 px-8 py-4 rounded-lg font-bold text-lg transition shadow-lg"> |
|
|
Get Started - It's Free |
|
|
</button> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-800 text-white py-12"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="grid md:grid-cols-4 gap-8"> |
|
|
<div> |
|
|
<h3 class="text-xl font-bold mb-4 flex items-center"> |
|
|
<i class="fas fa-brain mr-2"></i> Memory Companion |
|
|
</h3> |
|
|
<p class="text-gray-400"> |
|
|
Supporting meaningful connections for those affected by dementia through preserved memories. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h4 class="font-semibold text-lg mb-4">Quick Links</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Home</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">About</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Features</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Resources</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h4 class="font-semibold text-lg mb-4">Support</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">FAQ</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Help Center</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Contact Us</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Privacy Policy</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h4 class="font-semibold text-lg mb-4">Connect</h4> |
|
|
<div class="flex space-x-4 mb-4"> |
|
|
<a href="#" class="w-10 h-10 bg-gray-700 rounded-full flex items-center justify-center hover:bg-indigo-600 transition"> |
|
|
<i class="fab fa-facebook-f"></i> |
|
|
</a> |
|
|
<a href="#" class="w-10 h-10 bg-gray-700 rounded-full flex items-center justify-center hover:bg-blue-400 transition"> |
|
|
<i class="fab fa-twitter"></i> |
|
|
</a> |
|
|
<a href="#" class="w-10 h-10 bg-gray-700 rounded-full flex items-center justify-center hover:bg-pink-600 transition"> |
|
|
<i class="fab fa-instagram"></i> |
|
|
</a> |
|
|
</div> |
|
|
<p class="text-gray-400"> |
|
|
Subscribe to our newsletter for dementia care tips and updates. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="border-t border-gray-700 mt-10 pt-6 text-center text-gray-400"> |
|
|
<p>© 2023 Memory Companion. All rights reserved.</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
|
|
|
<div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden" id="memory-modal"> |
|
|
<div class="memory-modal bg-white rounded-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto"> |
|
|
<div class="p-6"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h3 class="text-2xl font-bold" id="modal-title">Childhood Memories</h3> |
|
|
<button onclick="closeMemoryModal()" class="text-gray-500 hover:text-gray-700"> |
|
|
<i class="fas fa-times text-2xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div id="modal-content"> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="mt-6 flex justify-end"> |
|
|
<button onclick="closeMemoryModal()" class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-2 rounded-lg font-medium transition"> |
|
|
Close |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
// Mobile menu toggle |
|
|
document.getElementById('mobile-menu-button').addEventListener('click', function() { |
|
|
const menu = document.getElementById('mobile-menu'); |
|
|
menu.classList.toggle('hidden'); |
|
|
}); |
|
|
|
|
|
// Sample memory data for the modal |
|
|
const memoryData = { |
|
|
'childhood': { |
|
|
title: 'Childhood Memories (0-12 years)', |
|
|
content: ` |
|
|
<div class="space-y-6"> |
|
|
<div class="bg-indigo-50 p-4 rounded-lg"> |
|
|
<h4 class="font-semibold text-indigo-800 mb-2">Favorite Foods</h4> |
|
|
<p class="text-gray-700">Homemade apple pie, peanut butter and jelly sandwiches, chocolate milk</p> |
|
|
</div> |
|
|
<div class="bg-purple-50 p-4 rounded-lg"> |
|
|
<h4 class="font-semibold text-purple-800 mb-2">Favorite Music</h4> |
|
|
<p class="text-gray-700">Nursery rhymes, folk songs from family gatherings, early rock and roll</p> |
|
|
</div> |
|
|
<div class="bg-pink-50 p-4 rounded-lg"> |
|
|
<h4 class="font-semibold text-pink-800 mb-2">Important People</h4> |
|
|
<p class="text-gray-700">Parents, siblings, childhood best friends, favorite teachers</p> |
|
|
</div> |
|
|
<div class="bg-blue-50 p-4 rounded-lg"> |
|
|
<h4 class="font-semibold text-blue-800 mb-2">Significant Events</h4> |
|
|
<p class="text-gray-700">First day of school, family vacations, holidays celebrated, learning to ride a bike</p> |
|
|
</div> |
|
|
</div> |
|
|
` |
|
|
}, |
|
|
'adolescence': { |
|
|
title: 'Adolescent Memories (13-19 years)', |
|
|
content: ` |
|
|
<div class="space-y-6"> |
|
|
<div class="bg-purple-50 p-4 rounded-lg"> |
|
|
<h4 class="font-semibold text-purple-800 mb-2">Favorite Activities</h4> |
|
|
<p class="text-gray-700">High school sports, dances, hanging out with friends, first job</p> |
|
|
</div> |
|
|
<div class="bg-indigo-50 p-4 rounded-lg"> |
|
|
<h4 class="font-semibold text-indigo-800 mb-2">Favorite Music</h4> |
|
|
<p class="text-gray-700">Popular bands and artists from teenage years, songs from first romance</p> |
|
|
</div> |
|
|
<div class="bg-pink-50 p-4 rounded-lg"> |
|
|
<h4 class="font-semibold text-pink-800 mb-2">Important People</h4> |
|
|
<p class="text-gray-700">High school friends, first love, mentors, coaches</p> |
|
|
</div> |
|
|
<div class="bg-blue-50 p-4 rounded-lg"> |
|
|
<h4 class="font-semibold text-blue-800 mb-2">Significant Events</h4> |
|
|
<p class="text-gray-700">Graduation, first car, family milestones, important achievements</p> |
|
|
</div> |
|
|
</div> |
|
|
` |
|
|
}, |
|
|
'early-adulthood': { |
|
|
title: 'Early Adulthood Memories (20-35 years)', |
|
|
content: ` |
|
|
<div class="space-y-6"> |
|
|
<div class="bg-pink-50 p-4 rounded-lg"> |
|
|
<h4 class="font-semibold text-pink-800 mb-2">Career Beginnings</h4> |
|
|
<p class="text-gray-700">First professional job, career aspirations, early achievements</p> |
|
|
</div> |
|
|
<div class="bg-indigo-50 p-4 rounded-lg"> |
|
|
<h4 class="font-semibold text-indigo-800 mb-2">Family Life</h4> |
|
|
<p class="text-gray-700">Marriage, birth of children, first home, family traditions</p> |
|
|
</div> |
|
|
<div class="bg-purple-50 p-4 rounded-lg"> |
|
|
<h4 class="font-semibold text-purple-800 mb-2">Hobbies & Interests</h4> |
|
|
<p class="text-gray-700">Activities enjoyed during this period, creative pursuits, sports</p> |
|
|
</div> |
|
|
<div class="bg-blue-50 p-4 rounded-lg"> |
|
|
<h4 class="font-semibold text-blue-800 mb-2">Significant Events</h4> |
|
|
<p class="text-gray-700">Career milestones, family vacations, community involvement</p> |
|
|
</div> |
|
|
</div> |
|
|
` |
|
|
}, |
|
|
'middle-age': { |
|
|
title: 'Middle Age Memories (36-65 years)', |
|
|
content: ` |
|
|
<div class="space-y-6"> |
|
|
<div class="bg-blue-50 p-4 rounded-lg"> |
|
|
<h4 class="font-semibold text-blue-800 mb-2">Career Highlights</h4> |
|
|
<p class="text-gray-700">Professional achievements, leadership roles, career changes</p> |
|
|
</div> |
|
|
<div class="bg-indigo-50 p-4 rounded-lg"> |
|
|
<h4 class="font-semibold text-indigo-800 mb-2">Family Life</h4> |
|
|
<p class="text-gray-700">Children growing up, family gatherings, grandchildren</p> |
|
|
</div> |
|
|
<div class="bg-purple-50 p-4 rounded-lg"> |
|
|
<h4 class="font-semibold text-purple-800 mb-2">Travel & Experiences</h4> |
|
|
<p class="text-gray-700">Memorable trips, new experiences, personal growth</p> |
|
|
</div> |
|
|
<div class="bg-pink-50 p-4 rounded-lg"> |
|
|
<h4 class="font-semibold text-pink-800 mb-2">Community Involvement</h4> |
|
|
<p class="text-gray-700">Volunteer work, clubs, organizations, religious activities</p> |
|
|
</div> |
|
|
</div> |
|
|
` |
|
|
}, |
|
|
'later-years': { |
|
|
title: 'Later Years Memories (65+ years)', |
|
|
content: ` |
|
|
<div class="space-y-6"> |
|
|
<div class="bg-green-50 p-4 rounded-lg"> |
|
|
<h4 class="font-semibold text-green-800 mb-2">Retirement</h4> |
|
|
<p class="text-gray-700">Transition to retirement, new hobbies, leisure activities</p> |
|
|
</div> |
|
|
<div class="bg-indigo-50 p-4 rounded-lg"> |
|
|
<h4 class="font-semibold text-indigo-800 mb-2">Family Life</h4> |
|
|
<p class="text-gray-700">Grandchildren, family celebrations, multigenerational connections</p> |
|
|
</div> |
|
|
<div class="bg-purple-50 p-4 rounded-lg"> |
|
|
<h4 class="font-semibold text-purple-800 mb-2">Reflections</h4> |
|
|
<p class="text-gray-700">Life lessons, wisdom gained, personal philosophy</p> |
|
|
</div> |
|
|
<div class="bg-blue-50 p-4 rounded-lg"> |
|
|
<h4 class="font-semibold text-blue-800 mb-2">Community</h4> |
|
|
<p class="text-gray-700">Senior groups, volunteer activities, social connections</p> |
|
|
</div> |
|
|
</div> |
|
|
` |
|
|
} |
|
|
}; |
|
|
|
|
|
// Open memory modal with specific content |
|
|
function openMemoryModal(period) { |
|
|
const modal = document.getElementById('memory-modal'); |
|
|
const title = document.getElementById('modal-title'); |
|
|
const content = document.getElementById('modal-content'); |
|
|
|
|
|
title.textContent = memoryData[period].title; |
|
|
content.innerHTML = memoryData[period].content; |
|
|
|
|
|
modal.classList.remove('hidden'); |
|
|
document.body.style.overflow = 'hidden'; |
|
|
} |
|
|
|
|
|
// Close memory modal |
|
|
function closeMemoryModal() { |
|
|
const modal = document.getElementById('memory-modal'); |
|
|
modal.classList.add('hidden'); |
|
|
document.body.style.overflow = 'auto'; |
|
|
} |
|
|
|
|
|
// Smooth scrolling for anchor links |
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
|
|
anchor.addEventListener('click', function (e) { |
|
|
e.preventDefault(); |
|
|
document.querySelector(this.getAttribute('href')).scrollIntoView({ |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
|
|
|
// Animation for elements when they come into view |
|
|
const observer = new IntersectionObserver((entries) => { |
|
|
entries.forEach(entry => { |
|
|
if (entry.isIntersecting) { |
|
|
entry.target.classList.add('fade-in'); |
|
|
} |
|
|
}); |
|
|
}, { threshold: 0.1 }); |
|
|
|
|
|
document.querySelectorAll('.fade-in').forEach(el => { |
|
|
observer.observe(el); |
|
|
}); |
|
|
</script> |
|
|
<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> |
|
|
</html> |
