Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>MindScribe | AI-Powered Mental Health Journal</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> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background-color: #f8fafc; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); | |
| } | |
| .mood-selector input[type="radio"]:checked + label { | |
| transform: scale(1.1); | |
| box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3); | |
| } | |
| .journal-entry { | |
| transition: all 0.3s ease; | |
| } | |
| .journal-entry:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); | |
| } | |
| .encrypted-text { | |
| font-family: monospace; | |
| letter-spacing: 1px; | |
| } | |
| .pattern-indicator { | |
| height: 6px; | |
| border-radius: 3px; | |
| } | |
| #moodChart { | |
| max-height: 300px; | |
| } | |
| .fade-in { | |
| animation: fadeIn 0.5s ease-in-out; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .tab-content { | |
| display: none; | |
| } | |
| .tab-content.active { | |
| display: block; | |
| } | |
| .nav-tab { | |
| transition: all 0.3s ease; | |
| } | |
| .nav-tab.active { | |
| color: #6366f1; | |
| border-bottom: 3px solid #6366f1; | |
| } | |
| .ai-pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4); } | |
| 70% { box-shadow: 0 0 0 10px rgba(99, 102, 241, 0); } | |
| 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); } | |
| } | |
| .risk-high { | |
| background-color: #fee2e2; | |
| border-left: 4px solid #ef4444; | |
| } | |
| .risk-medium { | |
| background-color: #fef3c7; | |
| border-left: 4px solid #f59e0b; | |
| } | |
| .risk-low { | |
| background-color: #ecfdf5; | |
| border-left: 4px solid #10b981; | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen"> | |
| <!-- Navigation --> | |
| <nav class="gradient-bg text-white shadow-lg"> | |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-brain text-2xl"></i> | |
| <span class="text-xl font-bold">MindScribe</span> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button id="encryptToggle" class="px-3 py-1 bg-white text-indigo-600 rounded-full text-sm font-medium flex items-center"> | |
| <i class="fas fa-lock mr-1"></i> Encryption ON | |
| </button> | |
| <div class="relative"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile" class="w-8 h-8 rounded-full cursor-pointer"> | |
| <div class="absolute -top-1 -right-1 w-3 h-3 bg-green-500 rounded-full border border-white"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <div class="container mx-auto px-4 py-8"> | |
| <!-- Dashboard Header --> | |
| <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8"> | |
| <div> | |
| <h1 class="text-3xl font-bold text-gray-800">Hello, Dr. Sarah</h1> | |
| <p class="text-gray-600">Track and analyze your patients' mental health progress</p> | |
| </div> | |
| <div class="mt-4 md:mt-0 flex space-x-3"> | |
| <button class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition flex items-center"> | |
| <i class="fas fa-plus mr-2"></i> New Patient | |
| </button> | |
| <button class="px-4 py-2 border border-indigo-600 text-indigo-600 rounded-lg hover:bg-indigo-50 transition flex items-center"> | |
| <i class="fas fa-sliders-h mr-2"></i> Settings | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Patient Selector --> | |
| <div class="bg-white rounded-xl shadow-md p-4 mb-8"> | |
| <div class="flex flex-col md:flex-row justify-between items-start md:items-center"> | |
| <div> | |
| <h3 class="font-medium text-gray-700 mb-1">Current Patient</h3> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Patient" class="w-10 h-10 rounded-full mr-3"> | |
| <div> | |
| <p class="font-semibold">Michael Johnson</p> | |
| <p class="text-sm text-gray-500">Last session: 2 days ago</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-4 md:mt-0"> | |
| <select class="bg-gray-100 border border-gray-200 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| <option>Select another patient</option> | |
| <option>Emma Wilson</option> | |
| <option>David Kim</option> | |
| <option>Sophia Rodriguez</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Navigation Tabs --> | |
| <div class="flex border-b border-gray-200 mb-6"> | |
| <button class="nav-tab px-4 py-3 font-medium text-gray-500 hover:text-indigo-600 active" data-tab="journal"> | |
| <i class="fas fa-book-open mr-2"></i> Journal | |
| </button> | |
| <button class="nav-tab px-4 py-3 font-medium text-gray-500 hover:text-indigo-600" data-tab="insights"> | |
| <i class="fas fa-chart-line mr-2"></i> AI Insights | |
| </button> | |
| <button class="nav-tab px-4 py-3 font-medium text-gray-500 hover:text-indigo-600" data-tab="alerts"> | |
| <i class="fas fa-bell mr-2"></i> Alerts | |
| <span class="ml-1 px-2 py-0.5 bg-red-500 text-white text-xs rounded-full">3</span> | |
| </button> | |
| </div> | |
| <!-- Journal Tab Content --> | |
| <div id="journal-tab" class="tab-content active"> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> | |
| <!-- Left Column --> | |
| <div class="lg:col-span-2 space-y-6"> | |
| <!-- Mood Tracker --> | |
| <div class="bg-white rounded-xl shadow-md p-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-xl font-bold text-gray-800">Today's Mood Check-in</h2> | |
| <div class="flex items-center text-sm text-gray-500"> | |
| <i class="fas fa-calendar-alt mr-2"></i> | |
| <span id="currentDate">June 15, 2023</span> | |
| </div> | |
| </div> | |
| <div class="mood-selector mb-6"> | |
| <div class="grid grid-cols-5 gap-2 text-center"> | |
| <input type="radio" name="mood" id="mood1" class="hidden" checked> | |
| <label for="mood1" class="cursor-pointer transition-all"> | |
| <div class="bg-red-100 text-red-600 p-3 rounded-lg"> | |
| <i class="fas fa-angry text-2xl"></i> | |
| <p class="text-xs mt-1">Angry</p> | |
| </div> | |
| </label> | |
| <input type="radio" name="mood" id="mood2" class="hidden"> | |
| <label for="mood2" class="cursor-pointer transition-all"> | |
| <div class="bg-yellow-100 text-yellow-600 p-3 rounded-lg"> | |
| <i class="fas fa-frown text-2xl"></i> | |
| <p class="text-xs mt-1">Sad</p> | |
| </div> | |
| </label> | |
| <input type="radio" name="mood" id="mood3" class="hidden"> | |
| <label for="mood3" class="cursor-pointer transition-all"> | |
| <div class="bg-gray-100 text-gray-600 p-3 rounded-lg"> | |
| <i class="fas fa-meh text-2xl"></i> | |
| <p class="text-xs mt-1">Neutral</p> | |
| </div> | |
| </label> | |
| <input type="radio" name="mood" id="mood4" class="hidden"> | |
| <label for="mood4" class="cursor-pointer transition-all"> | |
| <div class="bg-blue-100 text-blue-600 p-3 rounded-lg"> | |
| <i class="fas fa-smile text-2xl"></i> | |
| <p class="text-xs mt-1">Good</p> | |
| </div> | |
| </label> | |
| <input type="radio" name="mood" id="mood5" class="hidden"> | |
| <label for="mood5" class="cursor-pointer transition-all"> | |
| <div class="bg-green-100 text-green-600 p-3 rounded-lg"> | |
| <i class="fas fa-laugh text-2xl"></i> | |
| <p class="text-xs mt-1">Great</p> | |
| </div> | |
| </label> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="journalEntry" class="block text-sm font-medium text-gray-700 mb-2">Journal Entry</label> | |
| <textarea id="journalEntry" rows="5" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="How are you feeling today? What's on your mind?"></textarea> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex space-x-2"> | |
| <button class="p-2 text-gray-500 hover:text-indigo-600"> | |
| <i class="fas fa-microphone"></i> | |
| </button> | |
| <button class="p-2 text-gray-500 hover:text-indigo-600"> | |
| <i class="fas fa-image"></i> | |
| </button> | |
| </div> | |
| <button id="saveEntry" class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition"> | |
| Save Entry | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Recent Entries --> | |
| <div class="bg-white rounded-xl shadow-md p-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-xl font-bold text-gray-800">Recent Journal Entries</h2> | |
| <button class="text-indigo-600 hover:text-indigo-800 text-sm font-medium"> | |
| View All | |
| </button> | |
| </div> | |
| <div class="space-y-4" id="journalEntries"> | |
| <!-- Entry 1 --> | |
| <div class="journal-entry bg-gray-50 rounded-lg p-4 border border-gray-200"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <div class="flex items-center"> | |
| <div class="bg-blue-100 text-blue-600 p-2 rounded-full mr-3"> | |
| <i class="fas fa-smile"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Good</p> | |
| <p class="text-xs text-gray-500">June 14, 2023 - 4:30 PM</p> | |
| </div> | |
| </div> | |
| <button class="text-gray-400 hover:text-indigo-600"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| <div class="pl-12"> | |
| <p class="text-gray-700">Today was better than yesterday. I went for a walk in the park and it helped clear my mind. Still feeling anxious about the upcoming meeting but trying to stay positive.</p> | |
| </div> | |
| </div> | |
| <!-- Entry 2 --> | |
| <div class="journal-entry bg-gray-50 rounded-lg p-4 border border-gray-200"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <div class="flex items-center"> | |
| <div class="bg-yellow-100 text-yellow-600 p-2 rounded-full mr-3"> | |
| <i class="fas fa-frown"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Sad</p> | |
| <p class="text-xs text-gray-500">June 13, 2023 - 9:15 PM</p> | |
| </div> | |
| </div> | |
| <button class="text-gray-400 hover:text-indigo-600"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| <div class="pl-12"> | |
| <p class="text-gray-700">Had a difficult day at work. Felt overwhelmed with all the tasks and couldn't focus properly. Need to work on my time management skills.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Column --> | |
| <div class="space-y-6"> | |
| <!-- Mood Trends --> | |
| <div class="bg-white rounded-xl shadow-md p-6"> | |
| <h2 class="text-xl font-bold text-gray-800 mb-4">Mood Trends</h2> | |
| <div class="bg-gray-100 rounded-lg p-4 mb-4" id="moodChart"> | |
| <!-- Chart placeholder - would be replaced with Chart.js in a real implementation --> | |
| <div class="flex items-end h-48 space-x-1"> | |
| <div class="flex-1 bg-blue-200 rounded-t" style="height: 30%"></div> | |
| <div class="flex-1 bg-blue-300 rounded-t" style="height: 50%"></div> | |
| <div class="flex-1 bg-blue-400 rounded-t" style="height: 70%"></div> | |
| <div class="flex-1 bg-blue-500 rounded-t" style="height: 40%"></div> | |
| <div class="flex-1 bg-blue-600 rounded-t" style="height: 60%"></div> | |
| <div class="flex-1 bg-blue-700 rounded-t" style="height: 80%"></div> | |
| <div class="flex-1 bg-blue-800 rounded-t" style="height: 30%"></div> | |
| </div> | |
| <div class="flex justify-between text-xs text-gray-500 mt-2"> | |
| <span>Mon</span> | |
| <span>Tue</span> | |
| <span>Wed</span> | |
| <span>Thu</span> | |
| <span>Fri</span> | |
| <span>Sat</span> | |
| <span>Sun</span> | |
| </div> | |
| </div> | |
| <div class="text-center"> | |
| <p class="text-sm text-gray-600">Average mood this week: <span class="font-medium text-indigo-600">Neutral to Good</span></p> | |
| </div> | |
| </div> | |
| <!-- Pattern Recognition --> | |
| <div class="bg-white rounded-xl shadow-md p-6"> | |
| <h2 class="text-xl font-bold text-gray-800 mb-4">Pattern Recognition</h2> | |
| <div class="space-y-4"> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium text-gray-700">Anxiety mentions</span> | |
| <span class="text-sm font-medium text-indigo-600">3x this week</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-1.5"> | |
| <div class="pattern-indicator bg-red-500" style="width: 60%"></div> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-1">Most frequent on Tuesdays and Thursdays</p> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium text-gray-700">Positive activities</span> | |
| <span class="text-sm font-medium text-indigo-600">5x this week</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-1.5"> | |
| <div class="pattern-indicator bg-green-500" style="width: 80%"></div> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-1">Most frequent after exercise or social interactions</p> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium text-gray-700">Sleep quality</span> | |
| <span class="text-sm font-medium text-indigo-600">Improving</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-1.5"> | |
| <div class="pattern-indicator bg-yellow-500" style="width: 45%"></div> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-1">Better on days with less screen time before bed</p> | |
| </div> | |
| </div> | |
| <button class="w-full mt-4 px-4 py-2 border border-indigo-600 text-indigo-600 rounded-lg hover:bg-indigo-50 transition"> | |
| View Detailed Analysis | |
| </button> | |
| </div> | |
| <!-- Quick Actions --> | |
| <div class="bg-white rounded-xl shadow-md p-6"> | |
| <h2 class="text-xl font-bold text-gray-800 mb-4">Quick Actions</h2> | |
| <div class="grid grid-cols-2 gap-3"> | |
| <button class="flex flex-col items-center justify-center p-3 bg-indigo-50 text-indigo-600 rounded-lg hover:bg-indigo-100 transition"> | |
| <i class="fas fa-file-pdf text-xl mb-1"></i> | |
| <span class="text-sm">Export Report</span> | |
| </button> | |
| <button class="flex flex-col items-center justify-center p-3 bg-green-50 text-green-600 rounded-lg hover:bg-green-100 transition"> | |
| <i class="fas fa-comment-medical text-xl mb-1"></i> | |
| <span class="text-sm">Send Message</span> | |
| </button> | |
| <button class="flex flex-col items-center justify-center p-3 bg-purple-50 text-purple-600 rounded-lg hover:bg-purple-100 transition"> | |
| <i class="fas fa-calendar-check text-xl mb-1"></i> | |
| <span class="text-sm">Schedule Session</span> | |
| </button> | |
| <button class="flex flex-col items-center justify-center p-3 bg-red-50 text-red-600 rounded-lg hover:bg-red-100 transition"> | |
| <i class="fas fa-exclamation-triangle text-xl mb-1"></i> | |
| <span class="text-sm">Flag Concern</span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- AI Insights Tab Content --> | |
| <div id="insights-tab" class="tab-content"> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> | |
| <!-- Left Column --> | |
| <div class="lg:col-span-2 space-y-6"> | |
| <!-- AI Analysis --> | |
| <div class="bg-white rounded-xl shadow-md p-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h2 class="text-xl font-bold text-gray-800">AI Predictive Analysis</h2> | |
| <div class="flex items-center bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm"> | |
| <i class="fas fa-robot mr-2"></i> | |
| <span>AI Assistant</span> | |
| </div> | |
| </div> | |
| <div class="bg-indigo-50 border border-indigo-100 rounded-lg p-4 mb-6 ai-pulse"> | |
| <div class="flex items-start"> | |
| <div class="bg-indigo-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-lightbulb text-indigo-600"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-medium text-indigo-800 mb-1">Key Insight</h3> | |
| <p class="text-gray-700">Based on recent entries, Michael shows signs of increasing work-related stress that may lead to burnout if current patterns continue. The AI detected a 72% correlation between workload mentions and decreased mood scores.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6"> | |
| <div class="bg-white border border-gray-200 rounded-lg p-4"> | |
| <div class="flex items-center mb-2"> | |
| <div class="bg-blue-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-chart-line text-blue-600"></i> | |
| </div> | |
| <h3 class="font-medium text-gray-800">Trend Prediction</h3> | |
| </div> | |
| <p class="text-sm text-gray-600">If current patterns continue, there's a 65% chance mood will decline further over the next 2 weeks.</p> | |
| </div> | |
| <div class="bg-white border border-gray-200 rounded-lg p-4"> | |
| <div class="flex items-center mb-2"> | |
| <div class="bg-green-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-heartbeat text-green-600"></i> | |
| </div> | |
| <h3 class="font-medium text-gray-800">Wellness Factors</h3> | |
| </div> | |
| <p class="text-sm text-gray-600">Exercise and social interactions show strongest positive correlation with improved mood (r=0.78).</p> | |
| </div> | |
| <div class="bg-white border border-gray-200 rounded-lg p-4"> | |
| <div class="flex items-center mb-2"> | |
| <div class="bg-purple-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-moon text-purple-600"></i> | |
| </div> | |
| <h3 class="font-medium text-gray-800">Sleep Analysis</h3> | |
| </div> | |
| <p class="text-sm text-gray-600">Sleep quality has improved 22% since implementing screen time limits before bed.</p> | |
| </div> | |
| <div class="bg-white border border-gray-200 rounded-lg p-4"> | |
| <div class="flex items-center mb-2"> | |
| <div class="bg-yellow-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-exclamation-triangle text-yellow-600"></i> | |
| </div> | |
| <h3 class="font-medium text-gray-800">Risk Factors</h3> | |
| </div> | |
| <p class="text-sm text-gray-600">Mentions of "overwhelmed" have increased 40% in the last month, correlating with work deadlines.</p> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 rounded-lg p-4"> | |
| <h3 class="font-medium text-gray-800 mb-3">Suggested Interventions</h3> | |
| <div class="space-y-3"> | |
| <div class="flex items-start"> | |
| <input type="checkbox" class="mt-1 mr-3" checked> | |
| <div> | |
| <p class="font-medium">Cognitive Behavioral Techniques</p> | |
| <p class="text-sm text-gray-600">Recommended based on effectiveness for work-related stress (83% success rate in similar cases)</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <input type="checkbox" class="mt-1 mr-3"> | |
| <div> | |
| <p class="font-medium">Mindfulness Exercises</p> | |
| <p class="text-sm text-gray-600">Daily 10-minute sessions could help manage stress responses</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <input type="checkbox" class="mt-1 mr-3"> | |
| <div> | |
| <p class="font-medium">Work-Life Balance Discussion</p> | |
| <p class="text-sm text-gray-600">Schedule a dedicated session to explore boundary-setting strategies</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Sentiment Timeline --> | |
| <div class="bg-white rounded-xl shadow-md p-6"> | |
| <h2 class="text-xl font-bold text-gray-800 mb-4">Sentiment Timeline</h2> | |
| <div class="bg-gray-100 rounded-lg p-4"> | |
| <!-- Placeholder for sentiment chart --> | |
| <div class="flex items-center justify-center h-64"> | |
| <div class="text-center"> | |
| <i class="fas fa-chart-bar text-4xl text-gray-400 mb-2"></i> | |
| <p class="text-gray-500">Sentiment analysis over time</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-4 grid grid-cols-3 gap-4 text-center"> | |
| <div> | |
| <p class="text-sm text-gray-500">Positive Sentiment</p> | |
| <p class="font-bold text-green-600">42%</p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500">Neutral Sentiment</p> | |
| <p class="font-bold text-gray-600">35%</p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500">Negative Sentiment</p> | |
| <p class="font-bold text-red-600">23%</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Column --> | |
| <div class="space-y-6"> | |
| <!-- Risk Assessment --> | |
| <div class="bg-white rounded-xl shadow-md p-6"> | |
| <h2 class="text-xl font-bold text-gray-800 mb-4">Risk Assessment</h2> | |
| <div class="space-y-4"> | |
| <div class="risk-high p-4 rounded-lg"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="font-bold text-red-700">Burnout Risk</h3> | |
| <p class="text-sm text-gray-700">High probability (68%) based on recent patterns</p> | |
| </div> | |
| <span class="bg-red-100 text-red-800 px-2 py-1 rounded-full text-xs font-bold">High</span> | |
| </div> | |
| </div> | |
| <div class="risk-medium p-4 rounded-lg"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="font-bold text-yellow-700">Anxiety Increase</h3> | |
| <p class="text-sm text-gray-700">Moderate probability (52%) in next 2 weeks</p> | |
| </div> | |
| <span class="bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full text-xs font-bold">Medium</span> | |
| </div> | |
| </div> | |
| <div class="risk-low p-4 rounded-lg"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="font-bold text-green-700">Depression Risk</h3> | |
| <p class="text-sm text-gray-700">Low probability (18%) based on current data</p> | |
| </div> | |
| <span class="bg-green-100 text-green-800 px-2 py-1 rounded-full text-xs font-bold">Low</span> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="w-full mt-4 px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition"> | |
| Generate Full Risk Report | |
| </button> | |
| </div> | |
| <!-- Predictive Factors --> | |
| <div class="bg-white rounded-xl shadow-md p-6"> | |
| <h2 class="text-xl font-bold text-gray-800 mb-4">Predictive Factors</h2> | |
| <div class="space-y-3"> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium text-gray-700">Workload Stress</span> | |
| <span class="text-sm font-medium text-red-600">72% correlation</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-1.5"> | |
| <div class="pattern-indicator bg-red-500" style="width: 72%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium text-gray-700">Social Support</span> | |
| <span class="text-sm font-medium text-green-600">65% correlation</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-1.5"> | |
| <div class="pattern-indicator bg-green-500" style="width: 65%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium text-gray-700">Physical Activity</span> | |
| <span class="text-sm font-medium text-green-600">78% correlation</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-1.5"> | |
| <div class="pattern-indicator bg-green-500" style="width: 78%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium text-gray-700">Sleep Quality</span> | |
| <span class="text-sm font-medium text-blue-600">61% correlation</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-1.5"> | |
| <div class="pattern-indicator bg-blue-500" style="width: 61%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- AI Recommendations --> | |
| <div class="bg-white rounded-xl shadow-md p-6"> | |
| <h2 class="text-xl font-bold text-gray-800 mb-4">AI Recommendations</h2> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="bg-indigo-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-check text-indigo-600"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-medium text-gray-800">Schedule Check-in</h3> | |
| <p class="text-sm text-gray-600">Recommend scheduling a check-in within the next 3-5 days</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-green-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-running text-green-600"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-medium text-gray-800">Exercise Plan</h3> | |
| <p class="text-sm text-gray-600">Suggest increasing physical activity to 3-4 times per week</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-purple-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-book text-purple-600"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-medium text-gray-800">Journal Prompt</h3> | |
| <p class="text-sm text-gray-600">Provide a prompt about work-life balance for next entry</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Alerts Tab Content --> | |
| <div id="alerts-tab" class="tab-content"> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> | |
| <!-- Left Column --> | |
| <div class="lg:col-span-2 space-y-6"> | |
| <!-- Critical Alerts --> | |
| <div class="bg-white rounded-xl shadow-md p-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h2 class="text-xl font-bold text-gray-800">Critical Alerts</h2> | |
| <span class="bg-red-100 text-red-800 px-3 py-1 rounded-full text-sm font-medium">3 New</span> | |
| </div> | |
| <div class="space-y-4"> | |
| <!-- Alert 1 --> | |
| <div class="border border-red-200 rounded-lg p-4 bg-red-50"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <div class="flex items-center"> | |
| <div class="bg-red-100 text-red-800 p-2 rounded-full mr-3"> | |
| <i class="fas fa-exclamation-triangle"></i> | |
| </div> | |
| <div> | |
| <p class="font-bold text-red-800">Severe Mood Drop Detected</p> | |
| <p class="text-xs text-gray-600">Today at 9:42 AM</p> | |
| </div> | |
| </div> | |
| <button class="text-gray-400 hover:text-red-600"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| <div class="pl-12"> | |
| <p class="text-gray-700 mb-2">Patient's mood score dropped 2.4 points (45%) compared to weekly average. Mentions of "overwhelmed" and "can't cope" detected.</p> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 bg-red-600 text-white rounded-full text-xs hover:bg-red-700"> | |
| <i class="fas fa-phone-alt mr-1"></i> Call Patient | |
| </button> | |
| <button class="px-3 py-1 border border-red-600 text-red-600 rounded-full text-xs hover:bg-red-50"> | |
| <i class="fas fa-comment-medical mr-1"></i> Send Message | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Alert 2 --> | |
| <div class="border border-yellow-200 rounded-lg p-4 bg-yellow-50"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <div class="flex items-center"> | |
| <div class="bg-yellow-100 text-yellow-800 p-2 rounded-full mr-3"> | |
| <i class="fas fa-bed"></i> | |
| </div> | |
| <div> | |
| <p class="font-bold text-yellow-800">Sleep Disturbance Pattern</p> | |
| <p class="text-xs text-gray-600">Yesterday at 11:30 PM</p> | |
| </div> | |
| </div> | |
| <button class="text-gray-400 hover:text-yellow-600"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| <div class="pl-12"> | |
| <p class="text-gray-700 mb-2">Patient reported poor sleep quality 4 nights in a row. AI predicts 58% chance this will affect mood and productivity.</p> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 bg-yellow-600 text-white rounded-full text-xs hover:bg-yellow-700"> | |
| <i class="fas fa-moon mr-1"></i> Sleep Tips | |
| </button> | |
| <button class="px-3 py-1 border border-yellow-600 text-yellow-600 rounded-full text-xs hover:bg-yellow-50"> | |
| <i class="fas fa-book mr-1"></i> Add to Notes | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Alert 3 --> | |
| <div class="border border-purple-200 rounded-lg p-4 bg-purple-50"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <div class="flex items-center"> | |
| <div class="bg-purple-100 text-purple-800 p-2 rounded-full mr-3"> | |
| <i class="fas fa-chart-line"></i> | |
| </div> | |
| <div> | |
| <p class="font-bold text-purple-800">Negative Trend Detected</p> | |
| <p class="text-xs text-gray-600">2 days ago at 3:15 PM</p> | |
| </div> | |
| </div> | |
| <button class="text-gray-400 hover:text-purple-600"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| <div class="pl-12"> | |
| <p class="text-gray-700 mb-2">Weekly analysis shows 22% increase in negative sentiment and 15% decrease in positive activities compared to last month.</p> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 bg-purple-600 text-white rounded-full text-xs hover:bg-purple-700"> | |
| <i class="fas fa-calendar mr-1"></i> Schedule Session | |
| </button> | |
| <button class="px-3 py-1 border border-purple-600 text-purple-600 rounded-full text-xs hover:bg-purple-50"> | |
| <i class="fas fa-file-alt mr-1"></i> View Report | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Alert Settings --> | |
| <div class="bg-white rounded-xl shadow-md p-6"> | |
| <h2 class="text-xl font-bold text-gray-800 mb-4">Alert Preferences</h2> | |
| <div class="space-y-4"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <h3 class="font-medium text-gray-800">Critical Mood Changes</h3> | |
| <p class="text-sm text-gray-600">Notify me when mood drops significantly</p> | |
| </div> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" class="sr-only peer" checked> | |
| <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-indigo-300 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-5 after:w-5 after:transition-all peer-checked:bg-indigo-600"></div> | |
| </label> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <h3 class="font-medium text-gray-800">Risk Pattern Detection</h3> | |
| <p class="text-sm text-gray-600">Alert me to emerging risk patterns</p> | |
| </div> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" class="sr-only peer" checked> | |
| <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-indigo-300 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-5 after:w-5 after:transition-all peer-checked:bg-indigo-600"></div> | |
| </label> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <h3 class="font-medium text-gray-800">Positive Progress</h3> | |
| <p class="text-sm text-gray-600">Notify me of significant improvements</p> | |
| </div> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" class="sr-only peer" checked> | |
| <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-indigo-300 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-5 after:w-5 after:transition-all peer-checked:bg-indigo-600"></div> | |
| </label> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <h3 class="font-medium text-gray-800">Missed Check-ins</h3> | |
| <p class="text-sm text-gray-600">Alert me when journaling becomes irregular</p> | |
| </div> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" class="sr-only peer"> | |
| <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-indigo-300 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-5 after:w-5 after:transition-all peer-checked:bg-indigo-600"></div> | |
| </label> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Column --> | |
| <div class="space-y-6"> | |
| <!-- Alert Summary --> | |
| <div class="bg-white rounded-xl shadow-md p-6"> | |
| <h2 class="text-xl font-bold text-gray-800 mb-4">Alert Summary</h2> | |
| <div class="space-y-4"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="bg-red-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-exclamation text-red-600"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Critical Alerts</p> | |
| <p class="text-xs text-gray-500">Require immediate attention</p> | |
| </div> | |
| </div> | |
| <span class="bg-red-100 text-red-800 px-2 py-1 rounded-full text-xs font-bold">3</span> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="bg-yellow-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-exclamation text-yellow-600"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Warning Alerts</p> | |
| <p class="text-xs text-gray-500">Emerging patterns to monitor</p> | |
| </div> | |
| </div> | |
| <span class="bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full text-xs font-bold">5</span> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="bg-blue-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-info text-blue-600"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Information Alerts</p> | |
| <p class="text-xs text-gray-500">Updates and notifications</p> | |
| </div> | |
| </div> | |
| <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-xs font-bold">12</span> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="bg-green-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-check text-green-600"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Positive Alerts</p> | |
| <p class="text-xs text-gray-500">Progress and improvements</p> | |
| </div> | |
| </div> | |
| <span class="bg-green-100 text-green-800 px-2 py-1 rounded-full text-xs font-bold">7</span> | |
| </div> | |
| </div> | |
| <div class="mt-6 bg-gray-50 rounded-lg p-4"> | |
| <h3 class="font-medium text-gray-800 mb-2">Notification Methods</h3> | |
| <div class="space-y-3"> | |
| <div class="flex items-center"> | |
| <input type="checkbox" class="mr-3" checked> | |
| <span class="text-sm">Email Alerts</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="checkbox" class="mr-3" checked> | |
| <span class="text-sm">Mobile Push Notifications</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="checkbox" class="mr-3"> | |
| <span class="text-sm">SMS Alerts</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Quick Response --> | |
| <div class="bg-white rounded-xl shadow-md p-6"> | |
| <h2 class="text-xl font-bold text-gray-800 mb-4">Quick Response</h2> | |
| <div class="grid grid-cols-2 gap-3"> | |
| <button class="flex flex-col items-center justify-center p-3 bg-indigo-50 text-indigo-600 rounded-lg hover:bg-indigo-100 transition"> | |
| <i class="fas fa-comment-medical text-xl mb-1"></i> | |
| <span class="text-sm">Pre-written Message</span> | |
| </button> | |
| <button class="flex flex-col items-center justify-center p-3 bg-green-50 text-green-600 rounded-lg hover:bg-green-100 transition"> | |
| <i class="fas fa-file-prescription text-xl mb-1"></i> | |
| <span class="text-sm">Coping Strategies</span> | |
| </button> | |
| <button class="flex flex-col items-center justify-center p-3 bg-purple-50 text-purple-600 rounded-lg hover:bg-purple-100 transition"> | |
| <i class="fas fa-calendar-plus text-xl mb-1"></i> | |
| <span class="text-sm">Schedule Session</span> | |
| </button> | |
| <button class="flex flex-col items-center justify-center p-3 bg-red-50 text-red-600 rounded-lg hover:bg-red-100 transition"> | |
| <i class="fas fa-phone-alt text-xl mb-1"></i> | |
| <span class="text-sm">Emergency Contact</span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Alert History --> | |
| <div class="bg-white rounded-xl shadow-md p-6"> | |
| <h2 class="text-xl font-bold text-gray-800 mb-4">Recent Alerts</h2> | |
| <div class="space-y-3"> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-info text-blue-600"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium">Missed journal entry detected</p> | |
| <p class="text-xs text-gray-500">2 days ago</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-green-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-check text-green-600"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium">Positive mood trend detected</p> | |
| <p class="text-xs text-gray-500">3 days ago</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-yellow-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-exclamation text-yellow-600"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium">Sleep disturbance pattern</p> | |
| <p class="text-xs text-gray-500">5 days ago</p> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="w-full mt-4 px-4 py-2 border border-indigo-600 text-indigo-600 rounded-lg hover:bg-indigo-50 transition"> | |
| View Full History | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Encryption Modal --> | |
| <div id="encryptionModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden"> | |
| <div class="bg-white rounded-xl p-6 max-w-md w-full mx-4 fade-in"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-lg font-bold text-gray-800">Data Encryption</h3> | |
| <button id="closeModal" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="mb-4"> | |
| <p class="text-gray-600 mb-3">All journal entries are encrypted using AES-256 encryption. Only you and your therapist can access this data.</p> | |
| <div class="bg-gray-100 p-4 rounded-lg mb-3"> | |
| <p class="text-sm font-mono encrypted-text">U2FsdGVkX1+3q5J7J8j9kK2LmNpQwRtZvXyP1aBcDfGh=</p> | |
| </div> | |
| <p class="text-xs text-gray-500">Encryption key is derived from your password and never stored on our servers.</p> | |
| </div> | |
| <div class="flex justify-end space-x-3"> | |
| <button id="disableEncryption" class="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-100"> | |
| Disable | |
| </button> | |
| <button id="confirmEncryption" class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700"> | |
| Keep Enabled | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Set current date | |
| document.getElementById('currentDate').textContent = new Date().toLocaleDateString('en-US', { | |
| weekday: 'long', | |
| year: 'numeric', | |
| month: 'long', | |
| day: 'numeric' | |
| }); | |
| // Tab switching | |
| const tabs = document.querySelectorAll('.nav-tab'); | |
| const tabContents = document.querySelectorAll('.tab-content'); | |
| tabs.forEach(tab => { | |
| tab.addEventListener('click', () => { | |
| // Remove active class from all tabs and contents | |
| tabs.forEach(t => t.classList.remove('active')); | |
| tabContents.forEach(c => c.classList.remove('active')); | |
| // Add active class to clicked tab and corresponding content | |
| tab.classList.add('active'); | |
| const tabId = tab.getAttribute('data-tab') + '-tab'; | |
| document.getElementById(tabId).classList.add('active'); | |
| }); | |
| }); | |
| // Encryption toggle | |
| const encryptToggle = document.getElementById('encryptToggle'); | |
| const encryptionModal = document.getElementById('encryptionModal'); | |
| const closeModal = document.getElementById('closeModal'); | |
| const disableEncryption = document.getElementById('disableEncryption'); | |
| const confirmEncryption = document.getElementById('confirmEncryption'); | |
| encryptToggle.addEventListener('click', () => { | |
| encryptionModal.classList.remove('hidden'); | |
| }); | |
| closeModal.addEventListener('click', () => { | |
| encryptionModal.classList.add('hidden'); | |
| }); | |
| disableEncryption.addEventListener('click', () => { | |
| encryptToggle.innerHTML = '<i class="fas fa-unlock mr-1"></i> Encryption OFF'; | |
| encryptToggle.classList.remove('bg-white', 'text-indigo-600'); | |
| encryptToggle.classList.add('bg-red-100', 'text-red-600'); | |
| encryptionModal.classList.add('hidden'); | |
| }); | |
| confirmEncryption.addEventListener('click', () => { | |
| encryptionModal.classList.add('hidden'); | |
| }); | |
| // Save journal entry | |
| const saveEntry = document.getElementById('saveEntry'); | |
| const journalEntry = document.getElementById('journalEntry'); | |
| const journalEntries = document.getElementById('journalEntries'); | |
| saveEntry.addEventListener('click', () => { | |
| if (journalEntry.value.trim() === '') return; | |
| const moodRadios = document.getElementsByName('mood'); | |
| let selectedMood = ''; | |
| let moodIcon = ''; | |
| let moodColor = ''; | |
| for (let radio of moodRadios) { | |
| if (radio.checked) { | |
| selectedMood = radio.nextElementSibling.querySelector('p').textContent; | |
| moodIcon = radio.nextElementSibling.querySelector('i').className; | |
| moodColor = radio.nextElementSibling.querySelector('div').className.split(' ')[1]; | |
| break; | |
| } | |
| } | |
| const now = new Date(); | |
| const dateString = now.toLocaleDateString('en-US', { | |
| month: 'long', | |
| day: 'numeric', | |
| year: 'numeric' | |
| }) + ' - ' + now.toLocaleTimeString('en-US', { | |
| hour: '2-digit', | |
| minute: '2-digit' | |
| }); | |
| const newEntry = document.createElement('div'); | |
| newEntry.className = 'journal-entry bg-gray-50 rounded-lg p-4 border border-gray-200'; | |
| newEntry.innerHTML = ` | |
| <div class="flex justify-between items-start mb-2"> | |
| <div class="flex items-center"> | |
| <div class="${moodColor} p-2 rounded-full mr-3"> | |
| <i class="${moodIcon}"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">${selectedMood}</p> | |
| <p class="text-xs text-gray-500">${dateString}</p> | |
| </div> | |
| </div> | |
| <button class="text-gray-400 hover:text-indigo-600"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| <div class="pl-12"> | |
| <p class="text-gray-700">${journalEntry.value}</p> | |
| </div> | |
| `; | |
| journalEntries.prepend(newEntry); | |
| journalEntry.value = ''; | |
| // Show success message | |
| const successMsg = document.createElement('div'); | |
| successMsg.className = 'fixed bottom-4 right-4 bg-green-500 text-white px-4 py-2 rounded-lg shadow-lg flex items-center'; | |
| successMsg.innerHTML = ` | |
| <i class="fas fa-check-circle mr-2"></i> | |
| <span>Entry saved successfully</span> | |
| `; | |
| document.body.appendChild(successMsg); | |
| setTimeout(() => { | |
| successMsg.classList.add('opacity-0', 'transition-opacity', 'duration-300'); | |
| setTimeout(() => successMsg.remove(), 300); | |
| }, 3000); | |
| // Simulate AI analysis after new entry | |
| setTimeout(() => { | |
| // Update alert badge | |
| const alertBadge = document.querySelector('.nav-tab[data-tab="alerts"] span'); | |
| if (alertBadge) { | |
| const currentCount = parseInt(alertBadge.textContent); | |
| alertBadge.textContent = currentCount + 1; | |
| } | |
| // Simulate new alert | |
| if (Math.random() > 0.7) { // 30% chance of generating an alert | |
| const alertsContainer = document.querySelector('#alerts-tab .space-y-4'); | |
| if (alertsContainer) { | |
| const newAlert = document.createElement('div'); | |
| newAlert.className = 'border border-yellow-200 rounded-lg p-4 bg-yellow-50'; | |
| newAlert.innerHTML = ` | |
| <div class="flex justify-between items-start mb-2"> | |
| <div class="flex items-center"> | |
| <div class="bg-yellow-100 text-yellow-800 p-2 rounded-full mr-3"> | |
| <i class="fas fa-exclamation"></i> | |
| </div> | |
| <div> | |
| <p class="font-bold text-yellow-800">New Pattern Detected</p> | |
| <p class="text-xs text-gray-600">Just now</p> | |
| </div> | |
| </div> | |
| <button class="text-gray-400 hover:text-yellow-600"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| <div class="pl-12"> | |
| <p class="text-gray-700 mb-2">AI detected increased stress levels in the latest entry. Consider checking in with patient.</p> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 bg-yellow-600 text-white rounded-full text-xs hover:bg-yellow-700"> | |
| <i class="fas fa-comment-medical mr-1"></i> Send Message | |
| </button> | |
| <button class="px-3 py-1 border border-yellow-600 text-yellow-600 rounded-full text-xs hover:bg-yellow-50"> | |
| <i class="fas fa-book mr-1"></i> Add to Notes | |
| </button> | |
| </div> | |
| </div> | |
| `; | |
| alertsContainer.prepend(newAlert); | |
| } | |
| } | |
| }, 2000); | |
| }); | |
| // Simulate pattern recognition analysis | |
| setTimeout(() => { | |
| const patterns = document.querySelectorAll('.pattern-indicator'); | |
| patterns.forEach((pattern, index) => { | |
| const widths = ['60%', '80%', '45%', '72%', '65%', '78%', '61%']; | |
| pattern.style.width = widths[index]; | |
| pattern.style.transition = 'width 1s ease-in-out'; | |
| }); | |
| }, 500); | |
| </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=Animesh1201/test" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |