|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>HealthTrack Pro | Wellness Dashboard</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> |
|
|
tailwind.config = { |
|
|
theme: { |
|
|
extend: { |
|
|
colors: { |
|
|
primary: '#4F46E5', |
|
|
secondary: '#10B981', |
|
|
dark: '#1E293B', |
|
|
light: '#F8FAFC' |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
<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: linear-gradient(135deg, #f0f9ff 0%, #e6f7ff 100%); |
|
|
min-height: 100vh; |
|
|
} |
|
|
|
|
|
.dashboard-grid { |
|
|
display: grid; |
|
|
grid-template-columns: 280px 1fr; |
|
|
gap: 20px; |
|
|
} |
|
|
|
|
|
.progress-ring { |
|
|
transform: rotate(-90deg); |
|
|
} |
|
|
|
|
|
.progress-ring__circle { |
|
|
transition: stroke-dashoffset 0.5s; |
|
|
} |
|
|
|
|
|
.achievement-badge { |
|
|
transition: transform 0.3s ease; |
|
|
} |
|
|
|
|
|
.achievement-badge:hover { |
|
|
transform: scale(1.05); |
|
|
} |
|
|
|
|
|
.health-card { |
|
|
transition: all 0.3s ease; |
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); |
|
|
} |
|
|
|
|
|
.health-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
.todo-item { |
|
|
animation: fadeIn 0.3s ease; |
|
|
} |
|
|
|
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; transform: translateY(10px); } |
|
|
to { opacity: 1; transform: translateY(0); } |
|
|
} |
|
|
|
|
|
.pulse { |
|
|
animation: pulse 2s infinite; |
|
|
} |
|
|
|
|
|
@keyframes pulse { |
|
|
0% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.4); } |
|
|
70% { box-shadow: 0 0 0 10px rgba(79, 70, 229, 0); } |
|
|
100% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0); } |
|
|
} |
|
|
|
|
|
|
|
|
.hamburger.active span:nth-child(1) { |
|
|
transform: translateY(4px) rotate(45deg); |
|
|
} |
|
|
|
|
|
.hamburger.active span:nth-child(2) { |
|
|
opacity: 0; |
|
|
} |
|
|
|
|
|
.hamburger.active span:nth-child(3) { |
|
|
transform: translateY(-4px) rotate(-45deg); |
|
|
} |
|
|
|
|
|
@media (max-width: 768px) { |
|
|
.dashboard-grid { |
|
|
grid-template-columns: 1fr; |
|
|
padding: 0; |
|
|
} |
|
|
|
|
|
.sidebar { |
|
|
position: fixed; |
|
|
left: -100%; |
|
|
top: 0; |
|
|
z-index: 50; |
|
|
height: 100vh; |
|
|
width: 85%; |
|
|
transition: left 0.3s ease; |
|
|
border-radius: 0; |
|
|
} |
|
|
|
|
|
.sidebar.active { |
|
|
left: 0; |
|
|
} |
|
|
|
|
|
.health-card { |
|
|
margin: 0 10px 15px; |
|
|
} |
|
|
|
|
|
.stats-overview { |
|
|
grid-template-columns: 1fr 1fr; |
|
|
gap: 10px; |
|
|
padding: 0 10px; |
|
|
} |
|
|
|
|
|
.main-content-grid { |
|
|
grid-template-columns: 1fr; |
|
|
padding: 0 10px; |
|
|
} |
|
|
|
|
|
header { |
|
|
border-radius: 0; |
|
|
margin-bottom: 10px; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50"> |
|
|
|
|
|
<div class="md:hidden fixed top-4 left-4 z-50"> |
|
|
<button id="mobileMenuBtn" class="bg-primary text-white p-3 rounded-full shadow-lg focus:outline-none"> |
|
|
<div class="w-6 flex flex-col items-center hamburger"> |
|
|
<span class="block w-6 h-0.5 bg-white mb-1.5 transition-all duration-300"></span> |
|
|
<span class="block w-6 h-0.5 bg-white mb-1.5 transition-all duration-300"></span> |
|
|
<span class="block w-6 h-0.5 bg-white transition-all duration-300"></span> |
|
|
</div> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="dashboard-grid p-4 max-w-7xl mx-auto"> |
|
|
|
|
|
<aside class="sidebar bg-white rounded-xl shadow-md p-6"> |
|
|
<div class="flex justify-between items-center mb-10"> |
|
|
<div class="flex items-center"> |
|
|
<div class="bg-primary w-10 h-10 rounded-full flex items-center justify-center text-white font-bold">HT</div> |
|
|
<h1 class="text-xl font-bold ml-3">HealthTrack<span class="text-primary">Pro</span></h1> |
|
|
</div> |
|
|
<button id="closeSidebar" class="md:hidden text-gray-500 hover:text-gray-700"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<nav class="mb-10"> |
|
|
<ul class="space-y-2"> |
|
|
<li> |
|
|
<a href="#" class="flex items-center p-3 rounded-lg bg-primary text-white"> |
|
|
<i class="fas fa-home mr-3"></i> |
|
|
<span>Dashboard</span> |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="#" class="flex items-center p-3 rounded-lg text-gray-600 hover:bg-gray-100"> |
|
|
<i class="fas fa-tasks mr-3"></i> |
|
|
<span>To-Do List</span> |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="#" class="flex items-center p-3 rounded-lg text-gray-600 hover:bg-gray-100"> |
|
|
<i class="fas fa-trophy mr-3"></i> |
|
|
<span>Achievements</span> |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="#" class="flex items-center p-3 rounded-lg text-gray-600 hover:bg-gray-100"> |
|
|
<i class="fas fa-heartbeat mr-3"></i> |
|
|
<span>Health Metrics</span> |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="#" class="flex items-center p-3 rounded-lg text-gray-600 hover:bg-gray-100"> |
|
|
<i class="fas fa-chart-line mr-3"></i> |
|
|
<span>Analytics</span> |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="#" class="flex items-center p-3 rounded-lg text-gray-600 hover:bg-gray-100"> |
|
|
<i class="fas fa-cog mr-3"></i> |
|
|
<span>Settings</span> |
|
|
</a> |
|
|
</li> |
|
|
</ul> |
|
|
</nav> |
|
|
|
|
|
<div class="mt-auto"> |
|
|
<div class="bg-light rounded-xl p-4 mb-6"> |
|
|
<h3 class="font-bold mb-2">Daily Goal Progress</h3> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center text-white mr-3"> |
|
|
<i class="fas fa-medal"></i> |
|
|
</div> |
|
|
<div class="flex-1"> |
|
|
<div class="h-2 bg-gray-200 rounded-full overflow-hidden"> |
|
|
<div class="h-full bg-secondary rounded-full" style="width: 75%"></div> |
|
|
</div> |
|
|
<p class="text-xs mt-1 text-gray-500">75% completed</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center p-3 bg-gray-50 rounded-lg"> |
|
|
<div class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-user text-gray-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="font-medium">Alex Morgan</p> |
|
|
<p class="text-xs text-gray-500">Premium Member</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</aside> |
|
|
|
|
|
|
|
|
<main class="ml-0 md:ml-0"> |
|
|
|
|
|
<header class="bg-white rounded-xl shadow-md p-6 mb-6"> |
|
|
<div class="flex flex-col md:flex-row md:items-center md:justify-between"> |
|
|
<div> |
|
|
<h1 class="text-2xl font-bold text-dark">Welcome back, Alex!</h1> |
|
|
<p class="text-gray-500">Track your health and wellness journey</p> |
|
|
</div> |
|
|
<div class="mt-4 md:mt-0 flex items-center"> |
|
|
<div class="relative"> |
|
|
<input type="text" placeholder="Search..." class="pl-10 pr-4 py-2 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> |
|
|
<i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> |
|
|
</div> |
|
|
<button class="ml-4 bg-primary text-white p-2 rounded-full w-10 h-10 flex items-center justify-center"> |
|
|
<i class="fas fa-bell"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6"> |
|
|
<div class="health-card bg-white rounded-xl shadow-md p-5 flex items-center"> |
|
|
<div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-glass-water text-blue-500 text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-gray-500 text-sm">Water Intake</p> |
|
|
<p class="text-xl font-bold">1.8<span class="text-gray-500 text-sm">/2.5 L</span></p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="health-card bg-white rounded-xl shadow-md p-5 flex items-center"> |
|
|
<div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-shoe-prints text-green-500 text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-gray-500 text-sm">Steps Today</p> |
|
|
<p class="text-xl font-bold">8,452<span class="text-gray-500 text-sm">/10k</span></p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="health-card bg-white rounded-xl shadow-md p-5 flex items-center"> |
|
|
<div class="w-12 h-12 rounded-full bg-red-100 flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-heart-pulse text-red-500 text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-gray-500 text-sm">Heart Rate</p> |
|
|
<p class="text-xl font-bold">72<span class="text-gray-500 text-sm"> BPM</span></p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="health-card bg-white rounded-xl shadow-md p-5 flex items-center"> |
|
|
<div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-pills text-purple-500 text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-gray-500 text-sm">Medications</p> |
|
|
<p class="text-xl font-bold">2<span class="text-gray-500 text-sm">/3 Taken</span></p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> |
|
|
|
|
|
<div class="lg:col-span-2"> |
|
|
<div class="health-card bg-white rounded-xl shadow-md p-6"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h2 class="text-xl font-bold text-dark">Today's Tasks</h2> |
|
|
<button class="text-primary hover:text-primary-dark"> |
|
|
<i class="fas fa-ellipsis-h"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="mb-4"> |
|
|
<div class="flex"> |
|
|
<input type="text" id="newTodo" placeholder="Add a new task..." class="flex-1 border border-gray-300 rounded-l-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> |
|
|
<button id="addTodoBtn" class="bg-primary text-white px-4 py-2 rounded-r-lg hover:bg-primary-dark transition">Add</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="todoList" class="space-y-3"> |
|
|
<div class="todo-item flex items-center p-3 bg-gray-50 rounded-lg"> |
|
|
<input type="checkbox" class="mr-3 h-5 w-5 text-primary rounded focus:ring-primary"> |
|
|
<div class="flex-1"> |
|
|
<p class="font-medium">Morning meditation</p> |
|
|
<p class="text-xs text-gray-500">7:00 AM</p> |
|
|
</div> |
|
|
<button class="text-gray-400 hover:text-gray-600"> |
|
|
<i class="fas fa-trash"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="todo-item flex items-center p-3 bg-gray-50 rounded-lg"> |
|
|
<input type="checkbox" class="mr-3 h-5 w-5 text-primary rounded focus:ring-primary"> |
|
|
<div class="flex-1"> |
|
|
<p class="font-medium">Take vitamin supplements</p> |
|
|
<p class="text-xs text-gray-500">8:30 AM</p> |
|
|
</div> |
|
|
<button class="text-gray-400 hover:text-gray-600"> |
|
|
<i class="fas fa-trash"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="todo-item flex items-center p-3 bg-gray-50 rounded-lg"> |
|
|
<input type="checkbox" class="mr-3 h-5 w-5 text-primary rounded focus:ring-primary" checked> |
|
|
<div class="flex-1"> |
|
|
<p class="font-medium text-gray-400 line-through">30-min morning walk</p> |
|
|
<p class="text-xs text-gray-500">Completed at 7:45 AM</p> |
|
|
</div> |
|
|
<button class="text-gray-400 hover:text-gray-600"> |
|
|
<i class="fas fa-trash"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<div class="health-card bg-white rounded-xl shadow-md p-6"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h2 class="text-xl font-bold text-dark">Achievements</h2> |
|
|
<button class="text-primary hover:text-primary-dark"> |
|
|
<i class="fas fa-trophy"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-3 gap-4"> |
|
|
<div class="achievement-badge flex flex-col items-center"> |
|
|
<div class="w-16 h-16 rounded-full bg-yellow-100 flex items-center justify-center mb-2"> |
|
|
<i class="fas fa-glass-water text-yellow-500 text-2xl"></i> |
|
|
</div> |
|
|
<p class="text-xs font-medium text-center">Hydration Hero</p> |
|
|
</div> |
|
|
|
|
|
<div class="achievement-badge flex flex-col items-center"> |
|
|
<div class="w-16 h-16 rounded-full bg-green-100 flex items-center justify-center mb-2"> |
|
|
<i class="fas fa-walking text-green-500 text-2xl"></i> |
|
|
</div> |
|
|
<p class="text-xs font-medium text-center">10k Steps</p> |
|
|
</div> |
|
|
|
|
|
<div class="achievement-badge flex flex-col items-center"> |
|
|
<div class="w-16 h-16 rounded-full bg-blue-100 flex items-center justify-center mb-2"> |
|
|
<i class="fas fa-moon text-blue-500 text-2xl"></i> |
|
|
</div> |
|
|
<p class="text-xs font-medium text-center">Sleep Master</p> |
|
|
</div> |
|
|
|
|
|
<div class="achievement-badge flex flex-col items-center"> |
|
|
<div class="w-16 h-16 rounded-full bg-purple-100 flex items-center justify-center mb-2"> |
|
|
<i class="fas fa-dumbbell text-purple-500 text-2xl"></i> |
|
|
</div> |
|
|
<p class="text-xs font-medium text-center">Workout Warrior</p> |
|
|
</div> |
|
|
|
|
|
<div class="achievement-badge flex flex-col items-center"> |
|
|
<div class="w-16 h-16 rounded-full bg-red-100 flex items-center justify-center mb-2"> |
|
|
<i class="fas fa-apple-alt text-red-500 text-2xl"></i> |
|
|
</div> |
|
|
<p class="text-xs font-medium text-center">Healthy Eating</p> |
|
|
</div> |
|
|
|
|
|
<div class="achievement-badge flex flex-col items-center"> |
|
|
<div class="w-16 h-16 rounded-full bg-gray-200 flex items-center justify-center mb-2 opacity-50"> |
|
|
<i class="fas fa-lock text-gray-500 text-2xl"></i> |
|
|
</div> |
|
|
<p class="text-xs font-medium text-center">Coming Soon</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-6"> |
|
|
<div class="flex justify-between mb-2"> |
|
|
<span class="text-sm font-medium">Your Progress</span> |
|
|
<span class="text-sm font-medium">6/12</span> |
|
|
</div> |
|
|
<div class="h-2 bg-gray-200 rounded-full overflow-hidden"> |
|
|
<div class="h-full bg-secondary rounded-full" style="width: 50%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<div class="health-card bg-white rounded-xl shadow-md p-6"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h2 class="text-xl font-bold text-dark">Water Intake</h2> |
|
|
<button class="text-primary hover:text-primary-dark"> |
|
|
<i class="fas fa-plus"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="flex justify-center mb-6"> |
|
|
<div class="relative"> |
|
|
<svg width="120" height="120" viewBox="0 0 120 120"> |
|
|
<circle cx="60" cy="60" r="54" fill="none" stroke="#e2e8f0" stroke-width="8" /> |
|
|
<circle class="progress-ring__circle" cx="60" cy="60" r="54" fill="none" stroke="#3b82f6" stroke-width="8" stroke-dasharray="339.292" stroke-dashoffset="84.823" stroke-linecap="round" transform="rotate(-90 60 60)" /> |
|
|
</svg> |
|
|
<div class="absolute inset-0 flex flex-col items-center justify-center"> |
|
|
<span class="text-2xl font-bold">1.8L</span> |
|
|
<span class="text-gray-500 text-sm">of 2.5L</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-4 gap-2"> |
|
|
<button id="add250ml" class="bg-blue-50 text-blue-500 py-2 rounded-lg hover:bg-blue-100 transition"> |
|
|
<i class="fas fa-plus"></i> 250ml |
|
|
</button> |
|
|
<button id="add500ml" class="bg-blue-50 text-blue-500 py-2 rounded-lg hover:bg-blue-100 transition"> |
|
|
<i class="fas fa-plus"></i> 500ml |
|
|
</button> |
|
|
<button class="bg-blue-100 text-blue-700 py-2 rounded-lg font-medium"> |
|
|
Goal: 2.5L |
|
|
</button> |
|
|
<button class="bg-blue-500 text-white py-2 rounded-lg hover:bg-blue-600 transition"> |
|
|
Reset |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<div class="health-card bg-white rounded-xl shadow-md p-6"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h2 class="text-xl font-bold text-dark">Step Counter</h2> |
|
|
<button class="text-primary hover:text-primary-dark"> |
|
|
<i class="fas fa-sync"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="flex justify-center mb-6"> |
|
|
<div class="relative"> |
|
|
<div class="w-32 h-32 rounded-full border-8 border-green-200 flex items-center justify-center"> |
|
|
<div class="text-center"> |
|
|
<div class="text-3xl font-bold">8,452</div> |
|
|
<div class="text-gray-500 text-sm">steps</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-4"> |
|
|
<div class="flex justify-between mb-2"> |
|
|
<span class="text-sm">Daily Goal: 10,000 steps</span> |
|
|
<span class="text-sm font-medium">84.5%</span> |
|
|
</div> |
|
|
<div class="h-3 bg-gray-200 rounded-full overflow-hidden"> |
|
|
<div class="h-full bg-green-500 rounded-full" style="width: 84.5%"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<button class="w-full bg-green-500 text-white py-3 rounded-lg hover:bg-green-600 transition flex items-center justify-center"> |
|
|
<i class="fas fa-shoe-prints mr-2"></i> Sync with Smart Watch |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="lg:col-span-2"> |
|
|
<div class="health-card bg-white rounded-xl shadow-md p-6"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h2 class="text-xl font-bold text-dark">Medication Schedule</h2> |
|
|
<button class="text-primary hover:text-primary-dark"> |
|
|
<i class="fas fa-plus"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="space-y-4"> |
|
|
<div class="flex items-center p-4 bg-purple-50 rounded-lg"> |
|
|
<div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-pills text-purple-500"></i> |
|
|
</div> |
|
|
<div class="flex-1"> |
|
|
<p class="font-medium">Vitamin D</p> |
|
|
<p class="text-sm text-gray-500">1 capsule after breakfast</p> |
|
|
</div> |
|
|
<div class="text-right"> |
|
|
<p class="font-medium">8:30 AM</p> |
|
|
<p class="text-sm text-green-500 flex items-center"> |
|
|
<i class="fas fa-check-circle mr-1"></i> Taken |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center p-4 bg-amber-50 rounded-lg pulse"> |
|
|
<div class="w-12 h-12 rounded-full bg-amber-100 flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-pills text-amber-500"></i> |
|
|
</div> |
|
|
<div class="flex-1"> |
|
|
<p class="font-medium">Blood Pressure Meds</p> |
|
|
<p class="text-sm text-gray-500">1 tablet with water</p> |
|
|
</div> |
|
|
<div class="text-right"> |
|
|
<p class="font-medium">2:00 PM</p> |
|
|
<p class="text-sm text-amber-500 flex items-center"> |
|
|
<i class="fas fa-clock mr-1"></i> Pending |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center p-4 bg-gray-50 rounded-lg"> |
|
|
<div class="w-12 h-12 rounded-full bg-gray-200 flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-pills text-gray-500"></i> |
|
|
</div> |
|
|
<div class="flex-1"> |
|
|
<p class="font-medium">Omega-3</p> |
|
|
<p class="text-sm text-gray-500">1 softgel with dinner</p> |
|
|
</div> |
|
|
<div class="text-right"> |
|
|
<p class="font-medium">7:00 PM</p> |
|
|
<p class="text-sm text-gray-500 flex items-center"> |
|
|
<i class="fas fa-clock mr-1"></i> Upcoming |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const mobileMenuBtn = document.getElementById('mobileMenuBtn'); |
|
|
const closeSidebar = document.getElementById('closeSidebar'); |
|
|
const sidebar = document.querySelector('.sidebar'); |
|
|
const hamburger = document.querySelector('.hamburger'); |
|
|
|
|
|
mobileMenuBtn.addEventListener('click', () => { |
|
|
sidebar.classList.add('active'); |
|
|
hamburger.classList.add('active'); |
|
|
}); |
|
|
|
|
|
closeSidebar.addEventListener('click', () => { |
|
|
sidebar.classList.remove('active'); |
|
|
hamburger.classList.remove('active'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.addEventListener('click', (e) => { |
|
|
if (!sidebar.contains(e.target) && !mobileMenuBtn.contains(e.target)) { |
|
|
sidebar.classList.remove('active'); |
|
|
hamburger.classList.remove('active'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('addTodoBtn').addEventListener('click', addTodo); |
|
|
document.getElementById('newTodo').addEventListener('keypress', function(e) { |
|
|
if (e.key === 'Enter') addTodo(); |
|
|
}); |
|
|
|
|
|
function addTodo() { |
|
|
const input = document.getElementById('newTodo'); |
|
|
const task = input.value.trim(); |
|
|
|
|
|
if (task) { |
|
|
const todoList = document.getElementById('todoList'); |
|
|
const time = new Date().toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'}); |
|
|
|
|
|
const todoItem = document.createElement('div'); |
|
|
todoItem.className = 'todo-item flex items-center p-3 bg-gray-50 rounded-lg'; |
|
|
todoItem.innerHTML = ` |
|
|
<input type="checkbox" class="mr-3 h-5 w-5 text-primary rounded focus:ring-primary"> |
|
|
<div class="flex-1"> |
|
|
<p class="font-medium">${task}</p> |
|
|
<p class="text-xs text-gray-500">Added at ${time}</p> |
|
|
</div> |
|
|
<button class="text-gray-400 hover:text-gray-600 delete-todo"> |
|
|
<i class="fas fa-trash"></i> |
|
|
</button> |
|
|
`; |
|
|
|
|
|
todoList.prepend(todoItem); |
|
|
input.value = ''; |
|
|
|
|
|
|
|
|
todoItem.querySelector('.delete-todo').addEventListener('click', function() { |
|
|
todoItem.remove(); |
|
|
}); |
|
|
|
|
|
|
|
|
const checkbox = todoItem.querySelector('input[type="checkbox"]'); |
|
|
checkbox.addEventListener('change', function() { |
|
|
if (this.checked) { |
|
|
todoItem.querySelector('p.font-medium').classList.add('text-gray-400', 'line-through'); |
|
|
} else { |
|
|
todoItem.querySelector('p.font-medium').classList.remove('text-gray-400', 'line-through'); |
|
|
} |
|
|
}); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
document.querySelectorAll('.delete-todo').forEach(button => { |
|
|
button.addEventListener('click', function() { |
|
|
this.closest('.todo-item').remove(); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('#todoList input[type="checkbox"]').forEach(checkbox => { |
|
|
checkbox.addEventListener('change', function() { |
|
|
const text = this.closest('.todo-item').querySelector('p.font-medium'); |
|
|
if (this.checked) { |
|
|
text.classList.add('text-gray-400', 'line-through'); |
|
|
} else { |
|
|
text.classList.remove('text-gray-400', 'line-through'); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
let waterIntake = 1.8; |
|
|
const maxWaterIntake = 2.5; |
|
|
const waterDisplay = document.querySelector('.absolute.inset-0 span.text-2xl'); |
|
|
const waterCircle = document.querySelector('.progress-ring__circle'); |
|
|
|
|
|
|
|
|
function updateWaterDisplay() { |
|
|
waterDisplay.textContent = `${waterIntake.toFixed(1)}L`; |
|
|
const percentage = (waterIntake / maxWaterIntake) * 100; |
|
|
const circumference = 2 * Math.PI * 54; |
|
|
const offset = circumference - (percentage / 100) * circumference; |
|
|
waterCircle.style.strokeDashoffset = offset; |
|
|
} |
|
|
|
|
|
|
|
|
document.getElementById('add250ml').addEventListener('click', function() { |
|
|
waterIntake += 0.25; |
|
|
if (waterIntake > maxWaterIntake) waterIntake = maxWaterIntake; |
|
|
updateWaterDisplay(); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('add500ml').addEventListener('click', function() { |
|
|
waterIntake += 0.5; |
|
|
if (waterIntake > maxWaterIntake) waterIntake = maxWaterIntake; |
|
|
updateWaterDisplay(); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelector('.bg-blue-500').addEventListener('click', function() { |
|
|
waterIntake = 0; |
|
|
updateWaterDisplay(); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelector('.bg-green-500').addEventListener('click', function() { |
|
|
|
|
|
alert('Syncing with smartwatch...'); |
|
|
}); |
|
|
</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=HakDEV/tracking" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
