Hugging Face's logo

Spaces:
twnatelo
/
depression-cycle-tracker-prototype
Running

App Files Community
depression-cycle-tracker-prototype / index.html
twnatelo's picture
twnatelo
undefined - Initial Deployment
f5249f4 verified
raw
history blame contribute delete
22.8 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>MindBloom | Depression Cycle Tracker</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>
 @keyframes fadeIn {
 from { opacity: 0; }
 to { opacity: 1; }
 }
 .fade-in {
 animation: fadeIn 0.5s ease-in-out;
 }
 .mood-1 { background-color: #f87171; } /* Very low */
 .mood-2 { background-color: #fb923c; } /* Low */
 .mood-3 { background-color: #facc15; } /* Neutral */
 .mood-4 { background-color: #a3e635; } /* Good */
 .mood-5 { background-color: #4ade80; } /* Very good */
 .chart-bar {
 transition: height 0.5s ease-in-out;
 }
 .custom-scrollbar::-webkit-scrollbar {
 width: 6px;
 height: 6px;
 }
 .custom-scrollbar::-webkit-scrollbar-track {
 background: #f1f1f1;
 border-radius: 10px;
 }
 .custom-scrollbar::-webkit-scrollbar-thumb {
 background: #cbd5e1;
 border-radius: 10px;
 }
 .custom-scrollbar::-webkit-scrollbar-thumb:hover {
 background: #94a3b8;
 }
 </style>
</head>
<body class="bg-gray-50 min-h-screen font-sans">
 <div class="container mx-auto px-4 py-8 max-w-6xl">
 <!-- Header -->
 <header class="flex justify-between items-center mb-8">
 <div class="flex items-center">
 <div class="w-10 h-10 rounded-full bg-indigo-600 flex items-center justify-center mr-3">
 <i class="fas fa-brain text-white text-xl"></i>
 </div>
 <h1 class="text-2xl font-bold text-gray-800">MindBloom</h1>
 </div>
 <div class="flex items-center space-x-4">
 <button id="theme-toggle" class="p-2 rounded-full hover:bg-gray-200 transition">
 <i class="fas fa-moon text-gray-600"></i>
 </button>
 <div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center">
 <i class="fas fa-user text-indigo-600"></i>
 </div>
 </div>
 </header>
<!-- Main Content -->
 <main class="grid grid-cols-1 lg:grid-cols-3 gap-6">
 <!-- Left Column -->
 <div class="lg:col-span-2 space-y-6">
 <!-- Mood Tracker -->
 <div class="bg-white rounded-xl shadow-md p-6 fade-in">
 <div class="flex justify-between items-center mb-4">
 <h2 class="text-xl font-semibold text-gray-800">Today's Mood</h2>
 <span class="text-sm text-gray-500" id="current-date"></span>
 </div>
<div class="mb-6">
 <p class="text-gray-600 mb-4">How are you feeling today?</p>
 <div class="flex justify-between space-x-2">
 <button class="mood-btn flex-1 py-3 rounded-lg flex flex-col items-center transition hover:opacity-90" data-value="1">
 <i class="fas fa-face-sad-tear text-2xl mb-1"></i>
 <span class="text-xs">Very Low</span>
 </button>
 <button class="mood-btn flex-1 py-3 rounded-lg flex flex-col items-center transition hover:opacity-90" data-value="2">
 <i class="fas fa-face-frown text-2xl mb-1"></i>
 <span class="text-xs">Low</span>
 </button>
 <button class="mood-btn flex-1 py-3 rounded-lg flex flex-col items-center transition hover:opacity-90" data-value="3">
 <i class="fas fa-face-meh text-2xl mb-1"></i>
 <span class="text-xs">Neutral</span>
 </button>
 <button class="mood-btn flex-1 py-3 rounded-lg flex flex-col items-center transition hover:opacity-90" data-value="4">
 <i class="fas fa-face-smile text-2xl mb-1"></i>
 <span class="text-xs">Good</span>
 </button>
 <button class="mood-btn flex-1 py-3 rounded-lg flex flex-col items-center transition hover:opacity-90" data-value="5">
 <i class="fas fa-face-laugh-beam text-2xl mb-1"></i>
 <span class="text-xs">Very Good</span>
 </button>
 </div>
 </div>
<div id="mood-description" class="hidden">
 <textarea id="mood-notes" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" rows="3" placeholder="Add any notes about how you're feeling..."></textarea>
 <div class="flex justify-end mt-3">
 <button id="save-mood" class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition">Save</button>
 </div>
 </div>
 </div>
<!-- Mood History Chart -->
 <div class="bg-white rounded-xl shadow-md p-6 fade-in">
 <div class="flex justify-between items-center mb-4">
 <h2 class="text-xl font-semibold text-gray-800">Mood History</h2>
 <div class="flex space-x-2">
 <button class="time-btn px-3 py-1 text-sm rounded-md bg-indigo-100 text-indigo-700" data-range="7">Week</button>
 <button class="time-btn px-3 py-1 text-sm rounded-md hover:bg-indigo-100 hover:text-indigo-700" data-range="30">Month</button>
 <button class="time-btn px-3 py-1 text-sm rounded-md hover:bg-indigo-100 hover:text-indigo-700" data-range="90">3 Months</button>
 </div>
 </div>
 <div class="h-64">
 <div id="mood-chart" class="h-full flex items-end justify-between pt-4"></div>
 </div>
 </div>
 </div>
<!-- Right Column -->
 <div class="space-y-6">
 <!-- Stats Card -->
 <div class="bg-white rounded-xl shadow-md p-6 fade-in">
 <h2 class="text-xl font-semibold text-gray-800 mb-4">Your Stats</h2>
 <div class="space-y-4">
 <div>
 <p class="text-sm text-gray-500 mb-1">Current Mood Cycle</p>
 <div class="flex items-center">
 <div class="w-3 h-3 rounded-full bg-indigo-600 mr-2"></div>
 <p class="font-medium" id="current-cycle">Neutral Phase</p>
 </div>
 </div>
 <div>
 <p class="text-sm text-gray-500 mb-1">Average Mood</p>
 <p class="font-medium text-2xl" id="avg-mood">3.4</p>
 </div>
 <div>
 <p class="text-sm text-gray-500 mb-1">Low Days This Month</p>
 <p class="font-medium" id="low-days">4</p>
 </div>
 <div>
 <p class="text-sm text-gray-500 mb-1">Current Streak</p>
 <p class="font-medium" id="current-streak">2 days</p>
 </div>
 </div>
 </div>
<!-- Journal Entries -->
 <div class="bg-white rounded-xl shadow-md p-6 fade-in">
 <div class="flex justify-between items-center mb-4">
 <h2 class="text-xl font-semibold text-gray-800">Recent Journal</h2>
 <button class="text-indigo-600 hover:text-indigo-800">
 <i class="fas fa-plus"></i>
 </button>
 </div>
 <div class="space-y-4 max-h-64 overflow-y-auto custom-scrollbar">
 <div class="p-3 bg-indigo-50 rounded-lg">
 <div class="flex justify-between items-start mb-2">
 <p class="font-medium">Feeling better today</p>
 <span class="text-xs text-gray-500">Yesterday</span>
 </div>
 <p class="text-sm text-gray-700">Went for a walk in the park and it helped clear my mind. The sunshine felt nice.</p>
 </div>
 <div class="p-3 bg-amber-50 rounded-lg">
 <div class="flex justify-between items-start mb-2">
 <p class="font-medium">Struggling</p>
 <span class="text-xs text-gray-500">2 days ago</span>
 </div>
 <p class="text-sm text-gray-700">Hard to get out of bed today. Everything feels heavy.</p>
 </div>
 <div class="p-3 bg-indigo-50 rounded-lg">
 <div class="flex justify-between items-start mb-2">
 <p class="font-medium">Productive day</p>
 <span class="text-xs text-gray-500">4 days ago</span>
 </div>
 <p class="text-sm text-gray-700">Finished my project ahead of schedule. Feeling accomplished.</p>
 </div>
 </div>
 </div>
<!-- Resources -->
 <div class="bg-white rounded-xl shadow-md p-6 fade-in">
 <h2 class="text-xl font-semibold text-gray-800 mb-4">Resources</h2>
 <div class="space-y-3">
 <a href="#" class="flex items-center p-2 rounded-lg hover:bg-gray-50 transition">
 <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center mr-3">
 <i class="fas fa-head-side-virus text-green-600"></i>
 </div>
 <p class="text-sm">Coping Strategies</p>
 </a>
 <a href="#" class="flex items-center p-2 rounded-lg hover:bg-gray-50 transition">
 <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-3">
 <i class="fas fa-hands-holding-child text-blue-600"></i>
 </div>
 <p class="text-sm">Support Groups</p>
 </a>
 <a href="#" class="flex items-center p-2 rounded-lg hover:bg-gray-50 transition">
 <div class="w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center mr-3">
 <i class="fas fa-book text-purple-600"></i>
 </div>
 <p class="text-sm">Depression Education</p>
 </a>
 </div>
 </div>
 </div>
 </main>
 </div>
<!-- Mood Saved Toast -->
 <div id="toast" class="fixed bottom-4 right-4 bg-green-500 text-white px-4 py-2 rounded-lg shadow-lg hidden items-center">
 <i class="fas fa-check-circle mr-2"></i>
 <span>Mood saved successfully!</span>
 </div>
<script>
 // Set current date
 const now = new Date();
 document.getElementById('current-date').textContent = now.toLocaleDateString('en-US', {
weekday: 'long',
month: 'short',
day: 'numeric'
});
 // Theme toggle
 const themeToggle = document.getElementById('theme-toggle');
 themeToggle.addEventListener('click', () => {
 document.documentElement.classList.toggle('dark');
 const icon = themeToggle.querySelector('i');
 if (document.documentElement.classList.contains('dark')) {
 icon.classList.replace('fa-moon', 'fa-sun');
 document.body.classList.add('bg-gray-900');
 document.body.classList.remove('bg-gray-50');
 } else {
 icon.classList.replace('fa-sun', 'fa-moon');
 document.body.classList.remove('bg-gray-900');
 document.body.classList.add('bg-gray-50');
 }
 });
 // Mood selection
 const moodBtns = document.querySelectorAll('.mood-btn');
 const moodDescription = document.getElementById('mood-description');
 let selectedMood = null;
 moodBtns.forEach(btn => {
 btn.addEventListener('click', () => {
 // Remove active class from all buttons
 moodBtns.forEach(b => {
 b.classList.remove('mood-1', 'mood-2', 'mood-3', 'mood-4', 'mood-5');
 b.classList.add('opacity-50');
 });
// Add active class to clicked button
 selectedMood = parseInt(btn.dataset.value);
 btn.classList.add(`mood-${selectedMood}`);
 btn.classList.remove('opacity-50');
// Show mood description
 moodDescription.classList.remove('hidden');
 });
 });
 // Save mood
 const saveMoodBtn = document.getElementById('save-mood');
 const moodNotes = document.getElementById('mood-notes');
 const toast = document.getElementById('toast');
 saveMoodBtn.addEventListener('click', () => {
 if (!selectedMood) return;
// In a real app, you would save to a database here
 const moodData = {
 date: now,
 mood: selectedMood,
 notes: moodNotes.value
 };
// Save to localStorage for demo purposes
 let moods = JSON.parse(localStorage.getItem('moods') || '[]');
 moods.push(moodData);
 localStorage.setItem('moods', JSON.stringify(moods));
// Show toast
 toast.classList.remove('hidden');
 setTimeout(() => {
 toast.classList.add('hidden');
 }, 3000);
// Reset form
 moodBtns.forEach(b => {
 b.classList.remove('mood-1', 'mood-2', 'mood-3', 'mood-4', 'mood-5');
 b.classList.remove('opacity-50');
 });
 moodNotes.value = '';
 moodDescription.classList.add('hidden');
 selectedMood = null;
// Update chart
 updateChart(7);
 updateStats();
 });
 // Time range buttons
 const timeBtns = document.querySelectorAll('.time-btn');
 timeBtns.forEach(btn => {
 btn.addEventListener('click', () => {
 timeBtns.forEach(b => {
 b.classList.remove('bg-indigo-100', 'text-indigo-700');
 b.classList.add('hover:bg-indigo-100', 'hover:text-indigo-700');
 });
 btn.classList.add('bg-indigo-100', 'text-indigo-700');
 btn.classList.remove('hover:bg-indigo-100', 'hover:text-indigo-700');
const range = parseInt(btn.dataset.range);
 updateChart(range);
 });
 });
 // Generate mock data if none exists
 function generateMockData() {
 if (localStorage.getItem('moods')) return;
const moods = [];
 const today = new Date();
for (let i = 0; i < 90; i++) {
 const date = new Date();
 date.setDate(today.getDate() - (90 - i));
// Simulate depression cycles (every 10-20 days)
 const cyclePhase = Math.floor(i / 15) % 4; // 0-3
 let mood;
if (cyclePhase === 0) {
 mood = Math.floor(Math.random() * 2) + 4; // 4-5 (good phase)
 } else if (cyclePhase === 1) {
 mood = 3; // neutral phase
 } else if (cyclePhase === 2) {
 mood = Math.floor(Math.random() * 2) + 1; // 1-2 (low phase)
 } else {
 mood = 3; // neutral phase
 }
moods.push({
 date: date,
 mood: mood,
 notes: ''
 });
 }
localStorage.setItem('moods', JSON.stringify(moods));
 }
 // Update chart
 function updateChart(days) {
 generateMockData();
 const moods = JSON.parse(localStorage.getItem('moods'));
 const chart = document.getElementById('mood-chart');
 chart.innerHTML = '';
const today = new Date();
 const startDate = new Date();
 startDate.setDate(today.getDate() - days);
const filteredMoods = moods.filter(mood => {
 const moodDate = new Date(mood.date);
 return moodDate >= startDate && moodDate <= today;
 });
// Group by day (in a real app, you might want more sophisticated grouping)
 const groupedMoods = {};
 filteredMoods.forEach(mood => {
 const dateStr = new Date(mood.date).toLocaleDateString();
 if (!groupedMoods[dateStr]) {
 groupedMoods[dateStr] = [];
 }
 groupedMoods[dateStr].push(mood.mood);
 });
// Calculate average mood per day
 const moodAverages = [];
 Object.keys(groupedMoods).forEach(dateStr => {
 const moods = groupedMoods[dateStr];
 const avg = moods.reduce((a, b) => a + b, 0) / moods.length;
 moodAverages.push({
 date: dateStr,
 avg: avg
 });
 });
// Sort by date
 moodAverages.sort((a, b) => new Date(a.date) - new Date(b.date));
// Display chart
 const maxHeight = 180; // max height in pixels
 moodAverages.forEach((day, index) => {
 const height = (day.avg / 5) * maxHeight;
 const date = new Date(day.date);
 const dayName = date.toLocaleDateString('en-US', { weekday: 'short' }).charAt(0);
const bar = document.createElement('div');
 bar.className = `chart-bar flex flex-col items-center w-8 mx-1`;
const barFill = document.createElement('div');
 barFill.className = `w-full rounded-t-md mood-${Math.round(day.avg)}`;
 barFill.style.height = `${height}px`;
const dayLabel = document.createElement('span');
 dayLabel.className = 'text-xs text-gray-500 mt-1';
 dayLabel.textContent = dayName;
bar.appendChild(barFill);
 bar.appendChild(dayLabel);
 chart.appendChild(bar);
 });
 }
 // Update stats
 function updateStats() {
 generateMockData();
 const moods = JSON.parse(localStorage.getItem('moods'));
// Calculate average mood
 const avgMood = moods.reduce((sum, mood) => sum + mood.mood, 0) / moods.length;
 document.getElementById('avg-mood').textContent = avgMood.toFixed(1);
// Calculate low days this month
 const thisMonth = new Date().getMonth();
 const lowDays = moods.filter(mood => {
 const moodDate = new Date(mood.date);
 return moodDate.getMonth() === thisMonth && mood.mood <= 2;
 }).length;
 document.getElementById('low-days').textContent = lowDays;
// Determine current cycle
 const last7Days = moods.slice(-7).map(m => m.mood);
 const avgLast7 = last7Days.reduce((a, b) => a + b, 0) / last7Days.length;
let cycle;
 if (avgLast7 <= 2) {
 cycle = "Low Phase";
 } else if (avgLast7 >= 4) {
 cycle = "Good Phase";
 } else {
 cycle = "Neutral Phase";
 }
 document.getElementById('current-cycle').textContent = cycle;
// Calculate current streak
 let streak = 0;
 let prevMood = moods[moods.length - 1].mood;
 for (let i = moods.length - 1; i >= 0; i--) {
 if (moods[i].mood === prevMood) {
 streak++;
 } else {
 break;
 }
 }
 document.getElementById('current-streak').textContent = `${streak} day${streak !== 1 ? 's' : ''}`;
 }
 // Initialize
 updateChart(7);
 updateStats();
 timeBtns[0].click();
 </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=twnatelo/depression-cycle-tracker-prototype" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>