Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>MindMood Sentinel | Dashboard</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <style> | |
| .sidebar-item { | |
| transition: all 0.2s ease; | |
| } | |
| .sidebar-item:hover { | |
| transform: translateX(4px); | |
| } | |
| .emotion-card { | |
| transition: all 0.3s ease; | |
| } | |
| .emotion-card:hover { | |
| transform: translateY(-5px); | |
| } | |
| .data-upload-card { | |
| background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(240,240,255,0.95) 100%); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <div class="flex h-screen overflow-hidden"> | |
| <!-- Sidebar --> | |
| <div class="hidden md:flex md:flex-shrink-0"> | |
| <div class="flex flex-col w-64 bg-indigo-700 text-white"> | |
| <div class="flex items-center justify-center h-16 px-4 border-b border-indigo-600"> | |
| <div class="flex items-center"> | |
| <i data-feather="brain" class="w-6 h-6 mr-2"></i> | |
| <span class="text-xl font-semibold">MindMood</span> | |
| </div> | |
| </div> | |
| <div class="flex flex-col flex-grow px-4 py-6 overflow-y-auto"> | |
| <nav class="flex-1 space-y-2"> | |
| <a href="#" class="flex items-center px-4 py-3 text-sm font-medium rounded-lg bg-indigo-800 text-white sidebar-item"> | |
| <i data-feather="home" class="w-5 h-5 mr-3"></i> | |
| Dashboard | |
| </a> | |
| <a href="#" class="flex items-center px-4 py-3 text-sm font-medium rounded-lg text-indigo-200 hover:bg-indigo-600 hover:text-white sidebar-item"> | |
| <i data-feather="activity" class="w-5 h-5 mr-3"></i> | |
| Emotion Analysis | |
| </a> | |
| <a href="#" class="flex items-center px-4 py-3 text-sm font-medium rounded-lg text-indigo-200 hover:bg-indigo-600 hover:text-white sidebar-item"> | |
| <i data-feather="upload" class="w-5 h-5 mr-3"></i> | |
| Data Collection | |
| </a> | |
| <a href="#" class="flex items-center px-4 py-3 text-sm font-medium rounded-lg text-indigo-200 hover:bg-indigo-600 hover:text-white sidebar-item"> | |
| <i data-feather="bar-chart-2" class="w-5 h-5 mr-3"></i> | |
| Trends | |
| </a> | |
| <a href="#" class="flex items-center px-4 py-3 text-sm font-medium rounded-lg text-indigo-200 hover:bg-indigo-600 hover:text-white sidebar-item"> | |
| <i data-feather="heart" class="w-5 h-5 mr-3"></i> | |
| Wellness Tips | |
| </a> | |
| <a href="#" class="flex items-center px-4 py-3 text-sm font-medium rounded-lg text-indigo-200 hover:bg-indigo-600 hover:text-white sidebar-item"> | |
| <i data-feather="settings" class="w-5 h-5 mr-3"></i> | |
| Settings | |
| </a> | |
| </nav> | |
| </div> | |
| <div class="p-4 border-t border-indigo-600"> | |
| <div class="flex items-center"> | |
| <img class="w-10 h-10 rounded-full" src="http://static.photos/people/200x200/1" alt="User profile"> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-white">John Doe</p> | |
| <a href="#" class="text-xs text-indigo-200 hover:text-white">View profile</a> | |
| </div> | |
| </div> | |
| <button class="mt-4 w-full flex items-center justify-center gap-2 text-indigo-200 hover:text-white text-sm"> | |
| <i data-feather="log-out" class="w-4 h-4"></i> | |
| Sign out | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main content --> | |
| <div class="flex-1 overflow-auto"> | |
| <!-- Top navigation --> | |
| <div class="h-16 flex items-center justify-between px-6 border-b bg-white"> | |
| <div class="flex items-center md:hidden"> | |
| <button class="text-gray-500 focus:outline-none"> | |
| <i data-feather="menu" class="w-6 h-6"></i> | |
| </button> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <i data-feather="search" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i> | |
| <input type="text" placeholder="Search..." class="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500"> | |
| </div> | |
| <button class="text-gray-500 hover:text-gray-700"> | |
| <i data-feather="bell" class="w-5 h-5"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Dashboard content --> | |
| <div class="p-6"> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-6">Welcome back, John!</h2> | |
| <!-- Emotion Summary Cards --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8"> | |
| <div class="bg-white rounded-xl shadow-md p-6 emotion-card"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500">Current Mood</p> | |
| <h3 class="text-2xl font-bold text-indigo-600 mt-1">Neutral</h3> | |
| </div> | |
| <div class="p-3 rounded-full bg-indigo-100 text-indigo-600"> | |
| <i data-feather="smile" class="w-6 h-6"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-md p-6 emotion-card"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500">Stress Level</p> | |
| <h3 class="text-2xl font-bold text-green-600 mt-1">Low</h3> | |
| </div> | |
| <div class="p-3 rounded-full bg-green-100 text-green-600"> | |
| <i data-feather="wind" class="w-6 h-6"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-md p-6 emotion-card"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500">Anxiety Score</p> | |
| <h3 class="text-2xl font-bold text-yellow-600 mt-1">Moderate</h3> | |
| </div> | |
| <div class="p-3 rounded-full bg-yellow-100 text-yellow-600"> | |
| <i data-feather="alert-triangle" class="w-6 h-6"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-md p-6 emotion-card"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500">Burnout Risk</p> | |
| <h3 class="text-2xl font-bold text-red-600 mt-1">Medium</h3> | |
| </div> | |
| <div class="p-3 rounded-full bg-red-100 text-red-600"> | |
| <i data-feather="thermometer" class="w-6 h-6"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Data Collection Section --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8"> | |
| <div class="lg:col-span-2 bg-white rounded-xl shadow-md p-6 data-upload-card"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h3 class="text-lg font-semibold text-gray-800">Collect New Data</h3> | |
| <div class="flex space-x-2"> | |
| <button class="text-gray-500 hover:text-indigo-600"> | |
| <i data-feather="refresh-cw" class="w-5 h-5"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <div class="bg-indigo-50 rounded-lg p-4 text-center cursor-pointer hover:bg-indigo-100 transition-colors"> | |
| <div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-3"> | |
| <i data-feather="camera" class="w-5 h-5 text-indigo-600"></i> | |
| </div> | |
| <h4 class="font-medium text-indigo-700">Upload Image</h4> | |
| <p class="text-xs text-gray-500 mt-1">Facial analysis</p> | |
| </div> | |
| <div class="bg-purple-50 rounded-lg p-4 text-center cursor-pointer hover:bg-purple-100 transition-colors"> | |
| <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-3"> | |
| <i data-feather="mic" class="w-5 h-5 text-purple-600"></i> | |
| </div> | |
| <h4 class="font-medium text-purple-700">Record Voice</h4> | |
| <p class="text-xs text-gray-500 mt-1">Audio analysis</p> | |
| </div> | |
| <div class="bg-pink-50 rounded-lg p-4 text-center cursor-pointer hover:bg-pink-100 transition-colors"> | |
| <div class="w-12 h-12 bg-pink-100 rounded-full flex items-center justify-center mx-auto mb-3"> | |
| <i data-feather="edit" class="w-5 h-5 text-pink-600"></i> | |
| </div> | |
| <h4 class="font-medium text-pink-700">Write Text</h4> | |
| <p class="text-xs text-gray-500 mt-1">Sentiment analysis</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-md p-6"> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-6">Recent Emotions</h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center mr-3"> | |
| <i data-feather="smile" class="w-4 h-4 text-green-600"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <h4 class="text-sm font-medium text-gray-700">Happy</h4> | |
| <p class="text-xs text-gray-500">Today, 10:30 AM</p> | |
| </div> | |
| <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">Video</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center mr-3"> | |
| <i data-feather="meh" class="w-4 h-4 text-blue-600"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <h4 class="text-sm font-medium text-gray-700">Neutral</h4> | |
| <p class="text-xs text-gray-500">Yesterday, 3:15 PM</p> | |
| </div> | |
| <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full">Audio</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 bg-yellow-100 rounded-full flex items-center justify-center mr-3"> | |
| <i data-feather="frown" class="w-4 h-4 text-yellow-600"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <h4 class="text-sm font-medium text-gray-700">Sad</h4> | |
| <p class="text-xs text-gray-500">Yesterday, 9:45 AM</p> | |
| </div> | |
| <span class="text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full">Text</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Emotion Chart --> | |
| <div class="bg-white rounded-xl shadow-md p-6 mb-8"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h3 class="text-lg font-semibold text-gray-800">Emotion Trends</h3> | |
| <div class="flex space-x-2"> | |
| <button class="text-xs bg-indigo-100 text-indigo-700 px-3 py-1 rounded-full hover:bg-indigo-200">Week</button> | |
| <button class="text-xs bg-white border border-gray-300 text-gray-700 px-3 py-1 rounded-full hover:bg-gray-50">Month</button> | |
| <button class="text-xs bg-white border border-gray-300 text-gray-700 px-3 py-1 rounded-full hover:bg-gray-50">Year</button> | |
| </div> | |
| </div> | |
| <div class="h-64"> | |
| <canvas id="emotionChart"></canvas> | |
| </div> | |
| </div> | |
| <!-- Wellness Recommendation --> | |
| <div class="bg-gradient-to-r from-indigo-500 to-purple-600 rounded-xl shadow-md p-6 text-white"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mr-4"> | |
| <div class="w-12 h-12 bg-white bg-opacity-20 rounded-full flex items-center justify-center"> | |
| <i data-feather="heart" class="w-6 h-6"></i> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-2">Wellness Recommendation</h3> | |
| <p class="text-sm opacity-90">Based on your recent emotional patterns, we recommend taking a 10-minute mindfulness break. Try our guided breathing exercise to reduce stress levels.</p> | |
| <button class="mt-4 bg-white text-indigo-600 px-4 py-2 rounded-lg text-sm font-medium hover:bg-opacity-90 transition-colors">Start Exercise</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Initialize feather icons | |
| feather.replace(); | |
| // Initialize emotion chart | |
| const ctx = document.getElementById('emotionChart').getContext('2d'); | |
| const emotionChart = new Chart(ctx, { | |
| type: 'line', | |
| data: { | |
| labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], | |
| datasets: [ | |
| { | |
| label: 'Happy', | |
| data: [15, 12, 18, 22, 14, 10, 8], | |
| borderColor: '#10B981', | |
| backgroundColor: 'rgba(16, 185, 129, 0.05)', | |
| tension: 0.3, | |
| fill: true | |
| }, | |
| { | |
| label: 'Neutral', | |
| data: [30, 28, 25, 32, 35, 30, 28], | |
| borderColor: '#3B82F6', | |
| backgroundColor: 'rgba(59, 130, 246, 0.05)', | |
| tension: 0.3, | |
| fill: true | |
| }, | |
| { | |
| label: 'Sad', | |
| data: [10, 8, 6, 12, 15, 8, 5], | |
| borderColor: '#F59E0B', | |
| backgroundColor: 'rgba(245, 158, 11, 0.05)', | |
| tension: 0.3, | |
| fill: true | |
| }, | |
| { | |
| label: 'Anxious', | |
| data: [5, 12, 8, 6, 10, 7, 14], | |
| borderColor: '#EF4444', | |
| backgroundColor: 'rgba(239, 68, 68, 0.05)', | |
| tension: 0.3, | |
| fill: true | |
| } | |
| ] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| position: 'top', | |
| } | |
| }, | |
| scales: { | |
| y: { | |
| beginAtZero: true | |
| } | |
| } | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> | |