|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>LifeFlow - Your Personal Life Planner</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"> |
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
|
|
<style> |
|
|
:root { |
|
|
--primary: #6366f1; |
|
|
--secondary: #8b5cf6; |
|
|
--accent: #ec4899; |
|
|
--dark: #1e293b; |
|
|
--light: #f8fafc; |
|
|
} |
|
|
|
|
|
.gradient-bg { |
|
|
background: linear-gradient(135deg, var(--primary), var(--secondary)); |
|
|
} |
|
|
|
|
|
.progress-ring__circle { |
|
|
transition: stroke-dashoffset 0.35s; |
|
|
transform: rotate(-90deg); |
|
|
transform-origin: 50% 50%; |
|
|
} |
|
|
|
|
|
.habit-streak { |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.habit-streak::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background: linear-gradient(to right, rgba(255,255,255,0.1), rgba(255,255,255,0.3)); |
|
|
opacity: 0; |
|
|
transition: opacity 0.3s; |
|
|
} |
|
|
|
|
|
.habit-streak:hover::after { |
|
|
opacity: 1; |
|
|
} |
|
|
|
|
|
.mood-emoji { |
|
|
transition: all 0.2s; |
|
|
} |
|
|
|
|
|
.mood-emoji:hover { |
|
|
transform: scale(1.2); |
|
|
} |
|
|
|
|
|
.task-item { |
|
|
transition: all 0.2s; |
|
|
} |
|
|
|
|
|
.task-item:hover { |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 4px 6px rgba(0,0,0,0.1); |
|
|
} |
|
|
|
|
|
.calendar-day { |
|
|
transition: all 0.2s; |
|
|
} |
|
|
|
|
|
.calendar-day:hover { |
|
|
background-color: rgba(99, 102, 241, 0.2); |
|
|
} |
|
|
|
|
|
.calendar-day.today { |
|
|
background-color: rgba(99, 102, 241, 0.1); |
|
|
border: 2px solid var(--primary); |
|
|
} |
|
|
|
|
|
.calendar-day.selected { |
|
|
background-color: var(--primary); |
|
|
color: white; |
|
|
} |
|
|
|
|
|
@keyframes pulse { |
|
|
0%, 100% { |
|
|
opacity: 1; |
|
|
} |
|
|
50% { |
|
|
opacity: 0.5; |
|
|
} |
|
|
} |
|
|
|
|
|
.animate-pulse { |
|
|
animation: pulse 2s infinite; |
|
|
} |
|
|
|
|
|
|
|
|
.custom-scrollbar::-webkit-scrollbar { |
|
|
width: 6px; |
|
|
} |
|
|
|
|
|
.custom-scrollbar::-webkit-scrollbar-track { |
|
|
background: #f1f1f1; |
|
|
border-radius: 10px; |
|
|
} |
|
|
|
|
|
.custom-scrollbar::-webkit-scrollbar-thumb { |
|
|
background: #c7d2fe; |
|
|
border-radius: 10px; |
|
|
} |
|
|
|
|
|
.custom-scrollbar::-webkit-scrollbar-thumb:hover { |
|
|
background: var(--primary); |
|
|
} |
|
|
|
|
|
|
|
|
.modal { |
|
|
transition: opacity 0.3s ease; |
|
|
} |
|
|
|
|
|
.modal-overlay { |
|
|
background-color: rgba(0, 0, 0, 0.5); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 text-gray-800 font-sans"> |
|
|
<div class="min-h-screen flex flex-col"> |
|
|
|
|
|
<header class="gradient-bg text-white shadow-lg"> |
|
|
<div class="container mx-auto px-4 py-4 flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<i class="fas fa-compass text-2xl"></i> |
|
|
<h1 class="text-2xl font-bold">LifeFlow</h1> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<button class="p-2 rounded-full hover:bg-white hover:bg-opacity-20 transition"> |
|
|
<i class="fas fa-bell"></i> |
|
|
</button> |
|
|
<div class="relative"> |
|
|
<button id="user-menu" class="flex items-center space-x-2 focus:outline-none"> |
|
|
<div class="w-8 h-8 rounded-full bg-white flex items-center justify-center text-indigo-600 font-bold">JD</div> |
|
|
<span class="hidden md:inline" id="username-display">John Doe</span> |
|
|
</button> |
|
|
<div id="user-dropdown" class="hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-50"> |
|
|
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-indigo-100">Profile</a> |
|
|
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-indigo-100" id="settings-btn">Settings</a> |
|
|
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-indigo-100" id="export-data">Export Data</a> |
|
|
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-indigo-100" id="import-data">Import Data</a> |
|
|
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-indigo-100" id="clear-data">Clear Data</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<main class="flex-1 container mx-auto px-4 py-6 flex flex-col lg:flex-row gap-6"> |
|
|
|
|
|
<aside class="w-full lg:w-64 bg-white rounded-lg shadow-md p-4 h-fit lg:sticky lg:top-6"> |
|
|
<nav> |
|
|
<ul class="space-y-2"> |
|
|
<li> |
|
|
<a href="#" class="flex items-center space-x-3 p-3 rounded-lg bg-indigo-50 text-indigo-700 font-medium"> |
|
|
<i class="fas fa-home"></i> |
|
|
<span>Dashboard</span> |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-100 transition" id="goals-nav"> |
|
|
<i class="fas fa-bullseye"></i> |
|
|
<span>Goals</span> |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-100 transition" id="tasks-nav"> |
|
|
<i class="fas fa-tasks"></i> |
|
|
<span>Tasks</span> |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-100 transition" id="calendar-nav"> |
|
|
<i class="fas fa-calendar-alt"></i> |
|
|
<span>Calendar</span> |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-100 transition" id="analytics-nav"> |
|
|
<i class="fas fa-chart-line"></i> |
|
|
<span>Analytics</span> |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-100 transition" id="habits-nav"> |
|
|
<i class="fas fa-heartbeat"></i> |
|
|
<span>Habits</span> |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-100 transition" id="mood-nav"> |
|
|
<i class="fas fa-smile"></i> |
|
|
<span>Mood Tracker</span> |
|
|
</a> |
|
|
</li> |
|
|
</ul> |
|
|
</nav> |
|
|
|
|
|
<div class="mt-8"> |
|
|
<h3 class="font-medium text-gray-500 uppercase text-sm mb-2">Quick Add</h3> |
|
|
<div class="space-y-2"> |
|
|
<button class="w-full flex items-center space-x-2 p-2 rounded-lg border border-dashed border-gray-300 hover:bg-gray-50 transition" id="quick-add-task"> |
|
|
<i class="fas fa-plus text-gray-500"></i> |
|
|
<span class="text-gray-600">New Task</span> |
|
|
</button> |
|
|
<button class="w-full flex items-center space-x-2 p-2 rounded-lg border border-dashed border-gray-300 hover:bg-gray-50 transition" id="quick-add-goal"> |
|
|
<i class="fas fa-plus text-gray-500"></i> |
|
|
<span class="text-gray-600">New Goal</span> |
|
|
</button> |
|
|
<button class="w-full flex items-center space-x-2 p-2 rounded-lg border border-dashed border-gray-300 hover:bg-gray-50 transition" id="quick-add-event"> |
|
|
<i class="fas fa-plus text-gray-500"></i> |
|
|
<span class="text-gray-600">New Event</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-8"> |
|
|
<h3 class="font-medium text-gray-500 uppercase text-sm mb-2">Categories</h3> |
|
|
<div class="flex flex-wrap gap-2" id="categories-container"> |
|
|
<span class="px-3 py-1 bg-red-100 text-red-800 rounded-full text-xs">Health</span> |
|
|
<span class="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-xs">Career</span> |
|
|
<span class="px-3 py-1 bg-green-100 text-green-800 rounded-full text-xs">Finance</span> |
|
|
<span class="px-3 py-1 bg-purple-100 text-purple-800 rounded-full text-xs">Relationships</span> |
|
|
<span class="px-3 py-1 bg-yellow-100 text-yellow-800 rounded-full text-xs">Personal Growth</span> |
|
|
</div> |
|
|
</div> |
|
|
</aside> |
|
|
|
|
|
|
|
|
<div class="flex-1 space-y-6" id="main-content"> |
|
|
|
|
|
<section class="bg-white rounded-lg shadow-md p-6" id="dashboard-section"> |
|
|
<div class="flex flex-col md:flex-row md:items-center md:justify-between"> |
|
|
<div> |
|
|
<h2 class="text-2xl font-bold">Welcome back, <span id="welcome-name">John</span>!</h2> |
|
|
<p class="text-gray-600" id="current-date">Today is Wednesday, June 14, 2023</p> |
|
|
</div> |
|
|
<div class="mt-4 md:mt-0"> |
|
|
<button class="gradient-bg text-white px-4 py-2 rounded-lg hover:opacity-90 transition flex items-center space-x-2" id="new-task-btn"> |
|
|
<i class="fas fa-plus"></i> |
|
|
<span>New Task</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-4"> |
|
|
<div class="bg-indigo-50 p-4 rounded-lg flex items-center space-x-4"> |
|
|
<div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center"> |
|
|
<i class="fas fa-tasks text-indigo-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-gray-500">Pending Tasks</p> |
|
|
<p class="text-xl font-bold" id="pending-tasks-count">12</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-green-50 p-4 rounded-lg flex items-center space-x-4"> |
|
|
<div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center"> |
|
|
<i class="fas fa-check-circle text-green-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-gray-500">Completed Today</p> |
|
|
<p class="text-xl font-bold" id="completed-today-count">7</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-purple-50 p-4 rounded-lg flex items-center space-x-4"> |
|
|
<div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center"> |
|
|
<i class="fas fa-fire text-purple-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-gray-500">Current Streak</p> |
|
|
<p class="text-xl font-bold" id="current-streak-count">14 days</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="bg-white rounded-lg shadow-md p-6" id="goals-section"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h2 class="text-xl font-bold">Your Goals Progress</h2> |
|
|
<a href="#" class="text-indigo-600 hover:underline" id="view-all-goals">View All</a> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4" id="goals-container"> |
|
|
|
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6"> |
|
|
|
|
|
<section class="bg-white rounded-lg shadow-md p-6" id="tasks-section"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h2 class="text-xl font-bold">Today's Tasks</h2> |
|
|
<a href="#" class="text-indigo-600 hover:underline" id="view-all-tasks">View All</a> |
|
|
</div> |
|
|
|
|
|
<div class="space-y-3 max-h-96 overflow-y-auto custom-scrollbar" id="tasks-container"> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="mt-4"> |
|
|
<button class="w-full flex items-center justify-center space-x-2 p-3 rounded-lg border border-dashed border-gray-300 hover:bg-gray-50 transition" id="add-new-task"> |
|
|
<i class="fas fa-plus text-gray-500"></i> |
|
|
<span class="text-gray-600">Add New Task</span> |
|
|
</button> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<div class="space-y-6"> |
|
|
|
|
|
<section class="bg-white rounded-lg shadow-md p-6" id="calendar-section"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h2 class="text-xl font-bold" id="calendar-month-year">June 2023</h2> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="p-1 rounded-full hover:bg-gray-100 transition" id="prev-month"> |
|
|
<i class="fas fa-chevron-left"></i> |
|
|
</button> |
|
|
<button class="p-1 rounded-full hover:bg-gray-100 transition" id="next-month"> |
|
|
<i class="fas fa-chevron-right"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-7 gap-1 text-center text-sm font-medium text-gray-500 mb-2"> |
|
|
<div>S</div> |
|
|
<div>M</div> |
|
|
<div>T</div> |
|
|
<div>W</div> |
|
|
<div>T</div> |
|
|
<div>F</div> |
|
|
<div>S</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-7 gap-1" id="calendar-days"> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="mt-4 pt-4 border-t"> |
|
|
<h3 class="font-medium mb-2">Today's Events</h3> |
|
|
<div class="space-y-2" id="today-events"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="bg-white rounded-lg shadow-md p-6" id="habits-section"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h2 class="text-xl font-bold">Daily Habits</h2> |
|
|
<a href="#" class="text-indigo-600 hover:underline" id="view-all-habits">View All</a> |
|
|
</div> |
|
|
|
|
|
<div class="space-y-4" id="habits-container"> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="mt-4"> |
|
|
<button class="w-full flex items-center justify-center space-x-2 p-3 rounded-lg border border-dashed border-gray-300 hover:bg-gray-50 transition" id="add-new-habit"> |
|
|
<i class="fas fa-plus text-gray-500"></i> |
|
|
<span class="text-gray-600">Add New Habit</span> |
|
|
</button> |
|
|
</div> |
|
|
</section> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<section class="bg-white rounded-lg shadow-md p-6" id="mood-section"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h2 class="text-xl font-bold">Mood & Energy Tracker</h2> |
|
|
<a href="#" class="text-indigo-600 hover:underline" id="view-mood-history">View History</a> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
|
|
|
|
|
<div> |
|
|
<h3 class="font-medium mb-3">How are you feeling today?</h3> |
|
|
<div class="grid grid-cols-5 gap-2"> |
|
|
<button class="mood-emoji flex flex-col items-center p-3 rounded-lg hover:bg-gray-50 transition" data-mood="awful"> |
|
|
<span class="text-3xl">😭</span> |
|
|
<span class="text-xs mt-1">Awful</span> |
|
|
</button> |
|
|
<button class="mood-emoji flex flex-col items-center p-3 rounded-lg hover:bg-gray-50 transition" data-mood="bad"> |
|
|
<span class="text-3xl">😞</span> |
|
|
<span class="text-xs mt-1">Bad</span> |
|
|
</button> |
|
|
<button class="mood-emoji flex flex-col items-center p-3 rounded-lg hover:bg-gray-50 transition" data-mood="okay"> |
|
|
<span class="text-3xl">😐</span> |
|
|
<span class="text-xs mt-1">Okay</span> |
|
|
</button> |
|
|
<button class="mood-emoji flex flex-col items-center p-3 rounded-lg hover:bg-gray-50 transition" data-mood="good"> |
|
|
<span class="text-3xl">😊</span> |
|
|
<span class="text-xs mt-1">Good</span> |
|
|
</button> |
|
|
<button class="mood-emoji flex flex-col items-center p-3 rounded-lg hover:bg-gray-50 transition" data-mood="great"> |
|
|
<span class="text-3xl">😁</span> |
|
|
<span class="text-xs mt-1">Great</span> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="mt-4"> |
|
|
<label for="mood-notes" class="block text-sm font-medium text-gray-700 mb-1">Notes</label> |
|
|
<textarea id="mood-notes" rows="2", class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500" placeholder="Any specific reasons for your mood today?"></textarea> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<h3 class="font-medium mb-3">Energy Levels</h3> |
|
|
<div class="space-y-4"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Morning</label> |
|
|
<div class="flex items-center space-x-2" id="morning-energy"> |
|
|
<button class="w-6 h-6 rounded-full bg-gray-200 hover:bg-gray-300 transition" data-energy="1"></button> |
|
|
<button class="w-6 h-6 rounded-full bg-gray-300 hover:bg-gray-400 transition" data-energy="2"></button> |
|
|
<button class="w-6 h-6 rounded-full bg-yellow-200 hover:bg-yellow-300 transition" data-energy="3"></button> |
|
|
<button class="w-6 h-6 rounded-full bg-yellow-400 hover:bg-yellow-500 transition" data-energy="4"></button> |
|
|
<button class="w-6 h-6 rounded-full bg-green-400 hover:bg-green-500 transition" data-energy="5"></button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Afternoon</label> |
|
|
<div class="flex items-center space-x-2" id="afternoon-energy"> |
|
|
<button class="w-6 h-6 rounded-full bg-gray-200 hover:bg-gray-300 transition" data-energy="1"></button> |
|
|
<button class="w-6 h-6 rounded-full bg-gray-300 hover:bg-gray-400 transition" data-energy="2"></button> |
|
|
<button class="w-6 h-6 rounded-full bg-yellow-200 hover:bg-yellow-300 transition" data-energy="3"></button> |
|
|
<button class="w-6 h-6 rounded-full bg-yellow-400 hover:bg-yellow-500 transition" data-energy="4"></button> |
|
|
<button class="w-6 h-6 rounded-full bg-green-400 hover:bg-green-500 transition" data-energy="5"></button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Evening</label> |
|
|
<div class="flex items-center space-x-2" id="evening-energy"> |
|
|
<button class="w-6 h-6 rounded-full bg-gray-200 hover:bg-gray-300 transition" data-energy="1"></button> |
|
|
<button class="w-6 h-6 rounded-full bg-gray-300 hover:bg-gray-400 transition" data-energy="2"></button> |
|
|
<button class="w-6 h-6 rounded-full bg-yellow-200 hover:bg-yellow-300 transition" data-energy="3"></button> |
|
|
<button class="w-6 h-6 rounded-full bg-yellow-400 hover:bg-yellow-500 transition" data-energy="4"></button> |
|
|
<button class="w-6 h-6 rounded-full bg-green-400 hover:bg-green-500 transition" data-energy="5"></button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-4"> |
|
|
<label for="energy-notes", class="block text-sm font-medium text-gray-700 mb-1">Notes</label> |
|
|
<textarea id="energy-notes" rows="2", class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500" placeholder="What affected your energy levels today?"></textarea> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-6"> |
|
|
<button class="gradient-bg text-white px-4 py-2 rounded-lg hover:opacity-90 transition" id="save-mood-tracker"> |
|
|
Save Today's Tracking |
|
|
</button> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="bg-white rounded-lg shadow-md p-6" id="analytics-section"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h2 class="text-xl font-bold">Productivity Insights</h2> |
|
|
<a href="#" class="text-indigo-600 hover:underline">View Details</a> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4"> |
|
|
<div class="bg-indigo-50 p-4 rounded-lg"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<p class="text-gray-500">Focus Time</p> |
|
|
<p class="text-2xl font-bold" id="focus-time">3.2 <span class="text-lg">hours</span></p> |
|
|
</div> |
|
|
<div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center"> |
|
|
<i class="fas fa-clock text-indigo-600"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-2"> |
|
|
<div class="h-2 bg-gray-200 rounded-full"> |
|
|
<div class="h-2 bg-indigo-600 rounded-full" style="width: 64%"></div> |
|
|
</div> |
|
|
<p class="text-xs text-gray-500 mt-1">64% of daily goal</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-green-50 p-4 rounded-lg"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<p class="text-gray-500">Tasks Completed</p> |
|
|
<p class="text-2xl font-bold" id="tasks-completed">7 <span class="text-lg">tasks</span></p> |
|
|
</div> |
|
|
<div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center"> |
|
|
<i class="fas fa-check-circle text-green-600"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-2"> |
|
|
<div class="h-2 bg-gray-200 rounded-full"> |
|
|
<div class="h-2 bg-green-600 rounded-full" style="width: 58%"></div> |
|
|
</div> |
|
|
<p class="text-xs text-gray-500 mt-1">58% of daily goal</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-purple-50 p-4 rounded-lg"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<p class="text-gray-500">Habit Streak</p> |
|
|
<p class="text-2xl font-bold" id="habit-streak-count">14 <span class="text-lg">days</span></p> |
|
|
</div> |
|
|
<div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center"> |
|
|
<i class="fas fa-fire text-purple-600"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-2"> |
|
|
<div class="h-2 bg-gray-200 rounded-full"> |
|
|
<div class="h-2 bg-purple-600 rounded-full" style="width: 47%"></div> |
|
|
</div> |
|
|
<p class="text-xs text-gray-500 mt-1">47% of monthly goal</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-6"> |
|
|
<h3 class="font-medium mb-2">Weekly Performance</h3> |
|
|
<div class="h-64 bg-gray-50 rounded-lg p-4"> |
|
|
<canvas id="productivityChart"></canvas> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
|
|
|
<footer class="bg-white border-t py-6"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="flex flex-col md:flex-row justify-between items-center"> |
|
|
<div class="flex items-center space-x-2 mb-4 md:mb-0"> |
|
|
<i class="fas fa-compass text-indigo-600"></i> |
|
|
<span class="font-bold">LifeFlow</span> |
|
|
</div> |
|
|
<div class="flex space-x-6"> |
|
|
<a href="#" class="text-gray-600 hover:text-indigo-600 transition">Privacy</a> |
|
|
<a href="#" class="text-gray-600 hover:text-indigo-600 transition">Terms</a> |
|
|
<a href="#" class="text-gray-600 hover:text-indigo-600 transition">Help</a> |
|
|
<a href="#" class="text-gray-600 hover:text-indigo-600 transition">Contact</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-6 text-center text-sm text-gray-500"> |
|
|
© 2023 LifeFlow. All rights reserved. |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div id="task-modal" class="fixed inset-0 z-50 flex items-center justify-center hidden modal"> |
|
|
<div class="modal-overlay absolute inset-0 bg-gray-900 opacity-50"></div> |
|
|
<div class="bg-white rounded-lg shadow-xl z-50 w-full max-w-md mx-4"> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-lg font-bold mb-4" id="task-modal-title">Add New Task</h3> |
|
|
<form id="task-form"> |
|
|
<input type="hidden" id="task-id"> |
|
|
<div class="mb-4"> |
|
|
<label for="task-title" class="block text-sm font-medium text-gray-700 mb-1">Title</label> |
|
|
<input type="text" id="task-title" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500" required> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<label for="task-description" class="block text-sm font-medium text-gray-700 mb-1">Description</label> |
|
|
<textarea id="task-description" rows="3", class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500"></textarea> |
|
|
</div> |
|
|
<div class="grid grid-cols-2 gap-4 mb-4"> |
|
|
<div> |
|
|
<label for="task-date" class="block text-sm font-medium text-gray-700 mb-1">Date</label> |
|
|
<input type="date" id="task-date" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500" required> |
|
|
</div> |
|
|
<div> |
|
|
<label for="task-time" class="block text-sm font-medium text-gray-700 mb-1">Time</label> |
|
|
<input type="time" id="task-time" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500"> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<label for="task-category" class="block text-sm font-medium text-gray-700 mb-1">Category</label> |
|
|
<select id="task-category" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500"> |
|
|
<option value="work">Work</option> |
|
|
<option value="health">Health</option> |
|
|
<option value="personal">Personal</option> |
|
|
<option value="learning">Learning</option> |
|
|
<option value="other">Other</option> |
|
|
</select> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<label for="task-priority" class="block text-sm font-medium text-gray-700 mb-1">Priority</label> |
|
|
<select id="task-priority" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500"> |
|
|
<option value="low">Low</option> |
|
|
<option value="medium" selected>Medium</option> |
|
|
<option value="high">High</option> |
|
|
</select> |
|
|
</div> |
|
|
<div class="flex justify-end space-x-3"> |
|
|
<button type="button" class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition" id="cancel-task"> |
|
|
Cancel |
|
|
</button> |
|
|
<button type="submit" class="gradient-bg text-white px-4 py-2 rounded-lg hover:opacity-90 transition"> |
|
|
Save Task |
|
|
</button> |
|
|
</div> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="goal-modal" class="fixed inset-0 z-50 flex items-center justify-center hidden modal"> |
|
|
<div class="modal-overlay absolute inset-0 bg-gray-900 opacity-50"></div> |
|
|
<div class="bg-white rounded-lg shadow-xl z-50 w-full max-w-md mx-4"> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-lg font-bold mb-4" id="goal-modal-title">Add New Goal</h3> |
|
|
<form id="goal-form"> |
|
|
<input type="hidden" id="goal-id"> |
|
|
<div class="mb-4"> |
|
|
<label for="goal-title" class="block text-sm font-medium text-gray-700 mb-1">Title</label> |
|
|
<input type="text" id="goal-title" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500" required> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<label for="goal-description" class="block text-sm font-medium text-gray-700 mb-1">Description</label> |
|
|
<textarea id="goal-description" rows="3", class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500"></textarea> |
|
|
</div> |
|
|
<div class="grid grid-cols-2 gap-4 mb-4"> |
|
|
<div> |
|
|
<label for="goal-start-date" class="block text-sm font-medium text-gray-700 mb-1">Start Date</label> |
|
|
<input type="date", id="goal-start-date" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500" required> |
|
|
</div> |
|
|
<div> |
|
|
<label for="goal-end-date" class="block text-sm font-medium text-gray-700 mb-1">End Date</label> |
|
|
<input type="date", id="goal-end-date" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500" required> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<label for="goal-category" class="block text-sm font-medium text-gray-700 mb-1">Category</label> |
|
|
<select id="goal-category" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500"> |
|
|
<option value="health">Health</option> |
|
|
<option value="career">Career</option> |
|
|
<option value="finance">Finance</option> |
|
|
<option value="relationships">Relationships</option> |
|
|
<option value="personal-growth">Personal Growth</option> |
|
|
<option value="other">Other</option> |
|
|
</select> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<label for="goal-type" class="block text-sm font-medium text-gray-700 mb-1">Goal Type</ |
|
|
</html> |
