|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>FamilyConnect | Discord for Family Bonding</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> |
|
|
.gradient-bg { |
|
|
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); |
|
|
} |
|
|
.family-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 20px rgba(0,0,0,0.1); |
|
|
} |
|
|
.emoji-picker { |
|
|
position: absolute; |
|
|
bottom: 50px; |
|
|
right: 0; |
|
|
display: none; |
|
|
} |
|
|
.active-tab { |
|
|
border-bottom: 3px solid #4f46e5; |
|
|
color: #4f46e5; |
|
|
} |
|
|
.conflict-level-low { |
|
|
background-color: #d9f99d; |
|
|
} |
|
|
.conflict-level-medium { |
|
|
background-color: #fef08a; |
|
|
} |
|
|
.conflict-level-high { |
|
|
background-color: #fecaca; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="gradient-bg min-h-screen"> |
|
|
|
|
|
<nav class="bg-white shadow-lg"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="flex justify-between h-16"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 flex items-center"> |
|
|
<i class="fas fa-heart text-indigo-600 text-2xl mr-2"></i> |
|
|
<span class="text-xl font-bold text-indigo-600">FamilyConnect</span> |
|
|
</div> |
|
|
<div class="hidden sm:ml-6 sm:flex sm:space-x-8"> |
|
|
<a href="#" class="active-tab inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Dashboard</a> |
|
|
<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> |
|
|
<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> |
|
|
</div> |
|
|
</div> |
|
|
<div class="hidden sm:ml-6 sm:flex sm:items-center"> |
|
|
<button class="bg-indigo-600 px-4 py-2 rounded-md text-white text-sm font-medium hover:bg-indigo-700"> |
|
|
Upgrade Plan |
|
|
</button> |
|
|
<div class="ml-3 relative"> |
|
|
<div> |
|
|
<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"> |
|
|
<span class="sr-only">Open user menu</span> |
|
|
<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=""> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="-mr-2 flex items-center sm:hidden"> |
|
|
<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"> |
|
|
<span class="sr-only">Open main menu</span> |
|
|
<i class="fas fa-bars"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="sm:hidden hidden" id="mobile-menu"> |
|
|
<div class="pt-2 pb-3 space-y-1"> |
|
|
<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> |
|
|
<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> |
|
|
<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> |
|
|
</div> |
|
|
<div class="pt-4 pb-3 border-t border-gray-200"> |
|
|
<div class="flex items-center px-4"> |
|
|
<div class="flex-shrink-0"> |
|
|
<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=""> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<div class="text-base font-medium text-gray-800">Tom Cook</div> |
|
|
<div class="text-sm font-medium text-gray-500">tom@example.com</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-3 space-y-1"> |
|
|
<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> |
|
|
<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> |
|
|
<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> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> |
|
|
|
|
|
<div class="mb-8"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h2 class="text-2xl font-bold text-gray-800">The Johnson Family</h2> |
|
|
<button class="bg-indigo-600 px-4 py-2 rounded-md text-white text-sm font-medium hover:bg-indigo-700 flex items-center"> |
|
|
<i class="fas fa-plus mr-2"></i> Add Family Member |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6"> |
|
|
|
|
|
<div class="bg-white rounded-lg shadow-md overflow-hidden family-card transition duration-300"> |
|
|
<div class="p-4"> |
|
|
<div class="flex items-center"> |
|
|
<img class="h-12 w-12 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Dad"> |
|
|
<div class="ml-4"> |
|
|
<h3 class="font-bold text-gray-800">Michael Johnson</h3> |
|
|
<p class="text-gray-600 text-sm">Dad • 42 years</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<div class="flex justify-between text-sm mb-2"> |
|
|
<span class="text-gray-500">Emotional State:</span> |
|
|
<span class="font-medium text-yellow-600">Slightly Stressed</span> |
|
|
</div> |
|
|
<div class="flex justify-between text-sm mb-2"> |
|
|
<span class="text-gray-500">Habit Streak:</span> |
|
|
<span class="font-medium text-green-600">7 days</span> |
|
|
</div> |
|
|
<div class="flex justify-between text-sm"> |
|
|
<span class="text-gray-500">Last Active:</span> |
|
|
<span class="font-medium">2 hours ago</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-gray-50 px-4 py-3 flex justify-between"> |
|
|
<button class="text-indigo-600 text-sm font-medium hover:text-indigo-800"> |
|
|
<i class="fas fa-comment-dots mr-1"></i> Message |
|
|
</button> |
|
|
<button class="text-indigo-600 text-sm font-medium hover:text-indigo-800"> |
|
|
<i class="fas fa-heart mr-1"></i> Send Love |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow-md overflow-hidden family-card transition duration-300"> |
|
|
<div class="p-4"> |
|
|
<div class="flex items-center"> |
|
|
<img class="h-12 w-12 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Mom"> |
|
|
<div class="ml-4"> |
|
|
<h3 class="font-bold text-gray-800">Sarah Johnson</h3> |
|
|
<p class="text-gray-600 text-sm">Mom • 40 years</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<div class="flex justify-between text-sm mb-2"> |
|
|
<span class="text-gray-500">Emotional State:</span> |
|
|
<span class="font-medium text-green-600">Happy</span> |
|
|
</div> |
|
|
<div class="flex justify-between text-sm mb-2"> |
|
|
<span class="text-gray-500">Habit Streak:</span> |
|
|
<span class="font-medium text-green-600">14 days</span> |
|
|
</div> |
|
|
<div class="flex justify-between text-sm"> |
|
|
<span class="text-gray-500">Last Active:</span> |
|
|
<span class="font-medium">30 mins ago</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-gray-50 px-4 py-3 flex justify-between"> |
|
|
<button class="text-indigo-600 text-sm font-medium hover:text-indigo-800"> |
|
|
<i class="fas fa-comment-dots mr-1"></i> Message |
|
|
</button> |
|
|
<button class="text-indigo-600 text-sm font-medium hover:text-indigo-800"> |
|
|
<i class="fas fa-heart mr-1"></i> Send Love |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow-md overflow-hidden family-card transition duration-300"> |
|
|
<div class="p-4"> |
|
|
<div class="flex items-center"> |
|
|
<img class="h-12 w-12 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/22.jpg" alt="Teen"> |
|
|
<div class="ml-4"> |
|
|
<h3 class="font-bold text-gray-800">Emily Johnson</h3> |
|
|
<p class="text-gray-600 text-sm">Daughter • 15 years</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<div class="flex justify-between text-sm mb-2"> |
|
|
<span class="text-gray-500">Emotional State:</span> |
|
|
<span class="font-medium text-blue-600">Neutral</span> |
|
|
</div> |
|
|
<div class="flex justify-between text-sm mb-2"> |
|
|
<span class="text-gray-500">Habit Streak:</span> |
|
|
<span class="font-medium text-green-600">5 days</span> |
|
|
</div> |
|
|
<div class="flex justify-between text-sm"> |
|
|
<span class="text-gray-500">Last Active:</span> |
|
|
<span class="font-medium">Online now</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-gray-50 px-4 py-3 flex justify-between"> |
|
|
<button class="text-indigo-600 text-sm font-medium hover:text-indigo-800"> |
|
|
<i class="fas fa-comment-dots mr-1"></i> Message |
|
|
</button> |
|
|
<button class="text-indigo-600 text-sm font-medium hover:text-indigo-800"> |
|
|
<i class="fas fa-heart mr-1"></i> Send Love |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow-md overflow-hidden family-card transition duration-300"> |
|
|
<div class="p-4"> |
|
|
<div class="flex items-center"> |
|
|
<img class="h-12 w-12 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/12.jpg" alt="Child"> |
|
|
<div class="ml-4"> |
|
|
<h3 class="font-bold text-gray-800">Jacob Johnson</h3> |
|
|
<p class="text-gray-600 text-sm">Son • 8 years</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<div class="flex justify-between text-sm mb-2"> |
|
|
<span class="text-gray-500">Emotional State:</span> |
|
|
<span class="font-medium text-red-600">Excited</span> |
|
|
</div> |
|
|
<div class="flex justify-between text-sm mb-2"> |
|
|
<span class="text-gray-500">Habit Streak:</span> |
|
|
<span class="font-medium text-green-600">3 days</span> |
|
|
</div> |
|
|
<div class="flex justify-between text-sm"> |
|
|
<span class="text-gray-500">Last Active:</span> |
|
|
<span class="font-medium">1 hour ago</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-gray-50 px-4 py-3 flex justify-between"> |
|
|
<button class="text-indigo-600 text-sm font-medium hover:text-indigo-800"> |
|
|
<i class="fas fa-comment-dots mr-1"></i> Message |
|
|
</button> |
|
|
<button class="text-indigo-600 text-sm font-medium hover:text-indigo-800"> |
|
|
<i class="fas fa-heart mr-1"></i> Send Love |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="lg:col-span-2 space-y-8"> |
|
|
|
|
|
<div class="bg-white rounded-lg shadow-md p-6"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h3 class="text-lg font-bold text-gray-800">Family Emotional Health</h3> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="text-indigo-600 hover:text-indigo-800"> |
|
|
<i class="fas fa-sliders-h"></i> |
|
|
</button> |
|
|
<button class="text-indigo-600 hover:text-indigo-800"> |
|
|
<i class="fas fa-expand"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
|
|
<div class="bg-indigo-50 rounded-lg p-4"> |
|
|
<h4 class="text-sm font-medium text-indigo-800 mb-2">Positive Interactions</h4> |
|
|
<div class="flex items-end"> |
|
|
<span class="text-3xl font-bold text-indigo-600">87%</span> |
|
|
<span class="ml-2 text-green-600 flex items-center"> |
|
|
<i class="fas fa-arrow-up mr-1"></i> 5% |
|
|
</span> |
|
|
</div> |
|
|
<p class="text-xs text-gray-500 mt-2">Up from last week</p> |
|
|
</div> |
|
|
<div class="bg-pink-50 rounded-lg p-4"> |
|
|
<h4 class="text-sm font-medium text-pink-800 mb-2">Conflict Indicators</h4> |
|
|
<div class="flex items-end"> |
|
|
<span class="text-3xl font-bold text-pink-600">13%</span> |
|
|
<span class="ml-2 text-red-600 flex items-center"> |
|
|
<i class="fas fa-arrow-down mr-1"></i> 2% |
|
|
</span> |
|
|
</div> |
|
|
<p class="text-xs text-gray-500 mt-2">Down from last week</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-6"> |
|
|
<div class="flex items-center justify-between mb-2"> |
|
|
<h4 class="text-sm font-medium text-gray-700">Recent Emotional Expressions</h4> |
|
|
<span class="text-xs text-indigo-600">View All</span> |
|
|
</div> |
|
|
<div class="space-y-3"> |
|
|
<div class="flex items-center p-2 hover:bg-gray-50 rounded-lg"> |
|
|
<div class="bg-green-100 p-2 rounded-full"> |
|
|
<i class="fas fa-heart text-green-600"></i> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<p class="text-sm font-medium">Emily sent "I love you" to Mom</p> |
|
|
<p class="text-xs text-gray-500">2 hours ago</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center p-2 hover:bg-gray-50 rounded-lg"> |
|
|
<div class="bg-blue-100 p-2 rounded-full"> |
|
|
<i class="fas fa-hands-helping text-blue-600"></i> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<p class="text-sm font-medium">Jacob requested "help" with homework from Dad</p> |
|
|
<p class="text-xs text-gray-500">4 hours ago</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center p-2 hover:bg-gray-50 rounded-lg"> |
|
|
<div class="bg-yellow-100 p-2 rounded-full"> |
|
|
<i class="fas fa-handshake text-yellow-600"></i> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<p class="text-sm font-medium">Dad said "sorry" to Emily</p> |
|
|
<p class="text-xs text-gray-500">Yesterday</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow-md p-6"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h3 class="text-lg font-bold text-gray-800">Family Habit Tracker</h3> |
|
|
<button class="bg-indigo-600 px-3 py-1 rounded-md text-white text-sm font-medium hover:bg-indigo-700"> |
|
|
<i class="fas fa-plus mr-1"></i> New Challenge |
|
|
</button> |
|
|
</div> |
|
|
<div class="mb-6"> |
|
|
<h4 class="text-sm font-medium text-gray-700 mb-2">Current Family Challenge</h4> |
|
|
<div class="bg-gradient-to-r from-indigo-100 to-purple-100 rounded-lg p-4"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div> |
|
|
<h5 class="font-bold text-indigo-800">Hydration Heroes</h5> |
|
|
<p class="text-sm text-gray-600">Everyone drinks 8 glasses of water daily</p> |
|
|
</div> |
|
|
<div class="text-right"> |
|
|
<span class="text-xs font-medium bg-indigo-600 text-white px-2 py-1 rounded-full">3/4 members</span> |
|
|
<p class="text-xs text-gray-500 mt-1">2 days remaining</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<div class="flex items-center justify-between mb-2"> |
|
|
<span class="text-xs font-medium">Family Progress</span> |
|
|
<span class="text-xs font-medium">75%</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2"> |
|
|
<div class="bg-indigo-600 h-2 rounded-full" style="width: 75%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4 grid grid-cols-4 gap-2"> |
|
|
<div class="text-center"> |
|
|
<div class="h-10 w-10 mx-auto bg-green-100 rounded-full flex items-center justify-center"> |
|
|
<i class="fas fa-check text-green-600"></i> |
|
|
</div> |
|
|
<p class="text-xs mt-1">Mom</p> |
|
|
</div> |
|
|
<div class="text-center"> |
|
|
<div class="h-10 w-10 mx-auto bg-green-100 rounded-full flex items-center justify-center"> |
|
|
<i class="fas fa-check text-green-600"></i> |
|
|
</div> |
|
|
<p class="text-xs mt-1">Dad</p> |
|
|
</div> |
|
|
<div class="text-center"> |
|
|
<div class="h-10 w-10 mx-auto bg-green-100 rounded-full flex items-center justify-center"> |
|
|
<i class="fas fa-check text-green-600"></i> |
|
|
</div> |
|
|
<p class="text-xs mt-1">Emily</p> |
|
|
</div> |
|
|
<div class="text-center"> |
|
|
<div class="h-10 w-10 mx-auto bg-gray-100 rounded-full flex items-center justify-center"> |
|
|
<i class="fas fa-times text-gray-400"></i> |
|
|
</div> |
|
|
<p class="text-xs mt-1">Jacob</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="text-sm font-medium text-gray-700 mb-2">Reward Unlocked!</h4> |
|
|
<div class="bg-gradient-to-r from-green-100 to-teal-100 rounded-lg p-4"> |
|
|
<div class="flex items-center"> |
|
|
<div class="bg-green-500 text-white p-3 rounded-full"> |
|
|
<i class="fas fa-trophy"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h5 class="font-bold text-green-800">Family Movie Night</h5> |
|
|
<p class="text-sm text-gray-600">You've earned $25 towards your next family movie night!</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4 flex justify-between"> |
|
|
<button class="text-green-600 text-sm font-medium hover:text-green-800"> |
|
|
<i class="fas fa-share-alt mr-1"></i> Share |
|
|
</button> |
|
|
<button class="bg-green-600 px-3 py-1 rounded-md text-white text-sm font-medium hover:bg-green-700"> |
|
|
<i class="fas fa-gift mr-1"></i> Redeem |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow-md p-6"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h3 class="text-lg font-bold text-gray-800">Conflict Resolution</h3> |
|
|
<button class="text-indigo-600 hover:text-indigo-800"> |
|
|
<i class="fas fa-sliders-h"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="mb-6"> |
|
|
<div class="flex items-center justify-between mb-2"> |
|
|
<h4 class="text-sm font-medium text-gray-700">Recent Conflicts</h4> |
|
|
<span class="text-xs text-indigo-600">View All</span> |
|
|
</div> |
|
|
<div class="space-y-3"> |
|
|
<div class="p-3 rounded-lg conflict-level-medium"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<p class="font-medium">Emily vs. Dad</p> |
|
|
<p class="text-xs text-gray-600">About screen time limits</p> |
|
|
</div> |
|
|
<span class="text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full">Medium</span> |
|
|
</div> |
|
|
<div class="mt-2 flex items-center justify-between"> |
|
|
<span class="text-xs text-gray-500">Detected 1 day ago</span> |
|
|
<button class="text-indigo-600 text-xs font-medium hover:text-indigo-800"> |
|
|
Resolve Now <i class="fas fa-arrow-right ml-1"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-3 rounded-lg conflict-level-low"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<p class="font-medium">Jacob vs. Emily</p> |
|
|
<p class="text-xs text-gray-600">About sharing toys</p> |
|
|
</div> |
|
|
<span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">Low</span> |
|
|
</div> |
|
|
<div class="mt-2 flex items-center justify-between"> |
|
|
<span class="text-xs text-gray-500">Detected 3 days ago</span> |
|
|
<button class="text-indigo-600 text-xs font-medium hover:text-indigo-800"> |
|
|
Resolve Now <i class="fas fa-arrow-right ml-1"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="text-sm font-medium text-gray-700 mb-2">AI Suggestion</h4> |
|
|
<div class="bg-indigo-50 rounded-lg p-4"> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-indigo-100 p-2 rounded-full"> |
|
|
<i class="fas fa-robot text-indigo-600"></i> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<p class="text-sm font-medium text-indigo-800">Family Communication Tip</p> |
|
|
<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> |
|
|
<button class="mt-2 text-indigo-600 text-xs font-medium hover:text-indigo-800"> |
|
|
Learn More <i class="fas fa-arrow-right ml-1"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="space-y-8"> |
|
|
|
|
|
<div class="bg-white rounded-lg shadow-md p-6"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h3 class="text-lg font-bold text-gray-800">Family Feed</h3> |
|
|
<button class="text-indigo-600 hover:text-indigo-800"> |
|
|
<i class="fas fa-sliders-h"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="mb-6 bg-indigo-50 rounded-lg p-4"> |
|
|
<div class="flex items-center justify-between mb-3"> |
|
|
<h4 class="font-medium text-indigo-800">Family Chat</h4> |
|
|
<div class="flex items-center"> |
|
|
<span class="text-xs mr-2 text-gray-600">AI Assistant</span> |
|
|
<label class="relative inline-flex items-center cursor-pointer"> |
|
|
<input type="checkbox" value="" class="sr-only peer" checked> |
|
|
<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> |
|
|
</label> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<img class="h-10 w-10 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Mom"> |
|
|
<div class="ml-3 flex-1"> |
|
|
<div class="bg-white rounded-lg p-3 border border-gray-200"> |
|
|
<textarea class="w-full bg-transparent focus:outline-none text-sm" placeholder="Message your family... (AI will help when needed)"></textarea> |
|
|
</div> |
|
|
<div class="mt-2 flex justify-between items-center"> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="text-gray-500 hover:text-indigo-600"> |
|
|
<i class="far fa-smile"></i> |
|
|
</button> |
|
|
<button class="text-gray-500 hover:text-indigo-600"> |
|
|
<i class="fas fa-camera"></i> |
|
|
</button> |
|
|
<button class="text-gray-500 hover:text-indigo-600"> |
|
|
<i class="fas fa-paperclip"></i> |
|
|
</button> |
|
|
<button class="text-gray-500 hover:text-indigo-600"> |
|
|
<i class="fas fa-robot"></i> |
|
|
</button> |
|
|
</div> |
|
|
<button class="bg-indigo-600 px-4 py-2 rounded-md text-white text-sm font-medium hover:bg-indigo-700"> |
|
|
Send |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="space-y-4"> |
|
|
|
|
|
<div class="border-b border-gray-100 pb-4"> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-indigo-100 p-2 rounded-full"> |
|
|
<i class="fas fa-robot text-indigo-600"></i> |
|
|
</div> |
|
|
<div class="ml-3 flex-1"> |
|
|
<div class="flex items-center"> |
|
|
<span class="font-medium">Family Assistant</span> |
|
|
<span class="ml-2 text-xs text-gray-500">Just now</span> |
|
|
</div> |
|
|
<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> |
|
|
<div class="mt-2 flex items-center space-x-4"> |
|
|
<button class="flex items-center text-gray-500 hover:text-indigo-600 text-xs"> |
|
|
<i class="far fa-thumbs-up mr-1"></i> Helpful |
|
|
</button> |
|
|
<button class="flex items-center text-gray-500 hover:text-indigo-600 text-xs"> |
|
|
<i class="far fa-comment mr-1"></i> Reply |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="border-b border-gray-100 pb-4"> |
|
|
<div class="flex items-start"> |
|
|
<img class="h-10 w-10 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Dad"> |
|
|
<div class="ml-3 flex-1"> |
|
|
<div class="flex items-center"> |
|
|
<span class="font-medium">Michael Johnson</span> |
|
|
<span class="ml-2 text-xs text-gray-500">2 hours ago</span> |
|
|
</div> |
|
|
<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> |
|
|
<div class="mt-2 flex items-center space-x-4"> |
|
|
<button class="flex items-center text-gray-500 hover:text-indigo-600 text-xs"> |
|
|
<i class="far fa-heart mr-1"></i> 3 |
|
|
</button> |
|
|
<button class="flex items-center text-gray-500 hover:text-indigo-600 text-xs"> |
|
|
<i class="far fa-comment mr-1"></i> 2 |
|
|
</button> |
|
|
<button class="flex items-center text-gray-500 hover:text-indigo-600 text-xs"> |
|
|
<i class="fas fa-share mr-1"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="border-b border-gray-100 pb-4"> |
|
|
<div class="flex items-start"> |
|
|
<img class="h-10 w-10 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/22.jpg" alt="Emily"> |
|
|
<div class="ml-3 flex-1"> |
|
|
<div class="flex items-center"> |
|
|
<span class="font-medium">Emily Johnson</span> |
|
|
<span class="ml-2 text-xs text-gray-500">5 hours ago</span> |
|
|
</div> |
|
|
<p class="text-sm mt-1">Completed my 5-day water challenge! 🎉 So proud of our family for sticking to healthy habits together.</p> |
|
|
<div class="mt-2 flex items-center space-x-4"> |
|
|
<button class="flex items-center text-gray-500 hover:text-indigo-600 text-xs"> |
|
|
<i class="far fa-heart mr-1"></i> 5 |
|
|
</button> |
|
|
<button class="flex items-center text-gray-500 hover:text-indigo-600 text-xs"> |
|
|
<i class="far fa-comment mr-1"></i> 1 |
|
|
</button> |
|
|
<button class="flex items-center text-gray-500 hover:text-indigo-600 text-xs"> |
|
|
<i class="fas fa-share mr-1"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="pb-4"> |
|
|
<div class="flex items-start"> |
|
|
<img class="h-10 w-10 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Mom"> |
|
|
<div class="ml-3 flex-1"> |
|
|
<div class="flex items-center"> |
|
|
<span class="font-medium">Sarah Johnson</span> |
|
|
<span class="ml-2 text-xs text-gray-500">Yesterday</span> |
|
|
</div> |
|
|
<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> |
|
|
<div class="mt-2 flex items-center space-x-4"> |
|
|
<button class="flex items-center text-gray-500 hover:text-indigo-600 text-xs"> |
|
|
<i class="far fa-heart mr-1"></i> 8 |
|
|
</button> |
|
|
<button class="flex items-center text-gray-500 hover:text-indigo-600 text-xs"> |
|
|
<i class="far fa-comment mr-1"></i> 4 |
|
|
</button> |
|
|
<button class="flex items-center text-gray-500 hover:text-indigo-600 text-xs"> |
|
|
<i class="fas fa-share mr-1"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow-md p-6"> |
|
|
<h3 class="text-lg font-bold text-gray-800 mb-4">Quick Actions</h3> |
|
|
<div class="grid grid-cols-2 gap-3"> |
|
|
<button class="bg-indigo-50 rounded-lg p-3 flex flex-col items-center hover:bg-indigo-100"> |
|
|
<div class="bg-indigo-100 p-3 rounded-full text-indigo-600 mb-2"> |
|
|
<i class="fas fa-heart"></i> |
|
|
</div> |
|
|
<span class="text-xs font-medium">Send Love</span> |
|
|
</button> |
|
|
<button class="bg-green-50 rounded-lg p-3 flex flex-col items-center hover:bg-green-100"> |
|
|
<div class="bg-green-100 p-3 rounded-full text-green-600 mb-2"> |
|
|
<i class="fas fa-trophy"></i> |
|
|
</div> |
|
|
<span class="text-xs font-medium">New Challenge</span> |
|
|
</button> |
|
|
<button class="bg-blue-50 rounded-lg p-3 flex flex-col items-center hover:bg-blue-100"> |
|
|
<div class="bg-blue-100 p-3 rounded-full text-blue-600 mb-2"> |
|
|
<i class="fas fa-calendar-check"></i> |
|
|
</div> |
|
|
<span class="text-xs font-medium">Plan Activity</span> |
|
|
</button> |
|
|
<button class="bg-purple-50 rounded-lg p-3 flex flex-col items-center hover:bg-purple-100"> |
|
|
<div class="bg-purple-100 p-3 rounded-full text-purple-600 mb-2"> |
|
|
<i class="fas fa-handshake"></i> |
|
|
</div> |
|
|
<span class="text-xs font-medium">Resolve Conflict</span> |
|
|
</button> |
|
|
<button class="bg-yellow-50 rounded-lg p-3 flex flex-col items-center hover:bg-yellow-100"> |
|
|
<div class="bg-yellow-100 p-3 rounded-full text-yellow-600 mb-2"> |
|
|
<i class="fas fa-gift"></i> |
|
|
</div> |
|
|
<span class="text-xs font-medium">Send Reward</span> |
|
|
</button> |
|
|
<button class="bg-pink-50 rounded-lg p-3 flex flex-col items-center hover:bg-pink-100"> |
|
|
<div class="bg-pink-100 p-3 rounded-full text-pink-600 mb-2"> |
|
|
<i class="fas fa-robot"></i> |
|
|
</div> |
|
|
<span class="text-xs font-medium">AI Assistant</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow-md p-6"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h3 class="text-lg font-bold text-gray-800">Family Calendar</h3> |
|
|
<button class="text-indigo-600 hover:text-indigo-800"> |
|
|
<i class="fas fa-plus"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="space-y-3"> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-indigo-100 p-2 rounded-lg"> |
|
|
<p class="text-xs font-bold text-indigo-800">TODAY</p> |
|
|
<p class="text-xl font-bold text-indigo-800">15</p> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<p class="text-sm font-medium">Family Movie Night</p> |
|
|
<p class="text-xs text-gray-500">7:00 PM • Living Room</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-gray-100 p-2 rounded-lg"> |
|
|
<p class="text-xs font-bold text-gray-800">THU</p> |
|
|
<p class="text-xl font-bold text-gray-800">16</p> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<p class="text-sm font-medium">Parent-Teacher Conference</p> |
|
|
<p class="text-xs text-gray-500">3:30 PM • Emily's School</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-gray-100 p-2 rounded-lg"> |
|
|
<p class="text-xs font-bold text-gray-800">SAT</p> |
|
|
<p class="text-xl font-bold text-gray-800">18</p> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<p class="text-sm font-medium">Jacob's Soccer Game</p> |
|
|
<p class="text-xs text-gray-500">10:00 AM • Community Park</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="sm:hidden fixed bottom-0 left-0 right-0 bg-white shadow-lg"> |
|
|
<div class="flex justify-around"> |
|
|
<a href="#" class="flex flex-col items-center justify-center p-3 text-indigo-600"> |
|
|
<i class="fas fa-home"></i> |
|
|
<span class="text-xs mt-1">Home</span> |
|
|
</a> |
|
|
<a href="#" class="flex flex-col items-center justify-center p-3 text-gray-500"> |
|
|
<i class="fas fa-heart"></i> |
|
|
<span class="text-xs mt-1">Bonding</span> |
|
|
</a> |
|
|
<a href="#" class="flex flex-col items-center justify-center p-3 text-gray-500"> |
|
|
<i class="fas fa-trophy"></i> |
|
|
<span class="text-xs mt-1">Habits</span> |
|
|
</a> |
|
|
<a href="#" class="flex flex-col items-center justify-center p-3 text-gray-500"> |
|
|
<i class="fas fa-users"></i> |
|
|
<span class="text-xs mt-1">Family</span> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
const mobileMenuButton = document.querySelector('[aria-controls="mobile-menu"]'); |
|
|
const mobileMenu = document.getElementById('mobile-menu'); |
|
|
|
|
|
mobileMenuButton.addEventListener('click', function() { |
|
|
const expanded = this.getAttribute('aria-expanded') === 'true'; |
|
|
this.setAttribute('aria-expanded', !expanded); |
|
|
mobileMenu.classList.toggle('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
setInterval(() => { |
|
|
const waterChallenge = document.querySelector('.from-indigo-100'); |
|
|
if (waterChallenge) { |
|
|
const progress = waterChallenge.querySelector('.bg-indigo-600'); |
|
|
const currentWidth = parseInt(progress.style.width) || 75; |
|
|
const newWidth = currentWidth === 100 ? 75 : currentWidth + 5; |
|
|
progress.style.width = `${newWidth}%`; |
|
|
|
|
|
const progressText = waterChallenge.querySelector('span:nth-child(2)'); |
|
|
progressText.textContent = `${newWidth}%`; |
|
|
} |
|
|
}, 3000); |
|
|
}); |
|
|
</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=seunmanuel/https-huggingface-co-spaces-seunmanuel" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
|
|
|
