Spaces:
Running
Running
File size: 6,902 Bytes
712623d bd92a8f 712623d bd92a8f 712623d 6a8bcc4 712623d 6a8bcc4 712623d 6a8bcc4 712623d 6a8bcc4 712623d 6a8bcc4 712623d | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LifeTracker Pro - Daily Life Dashboard</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
</head>
<body class="bg-gray-50">
<custom-navbar></custom-navbar>
<main class="container mx-auto px-4 py-8">
<!-- Dashboard Header -->
<div class="mb-8 text-center">
<h1 class="text-4xl font-bold mb-4">Daily Life Dashboard</h1>
<p class="text-lg text-gray-600">Track your activities in real-time</p>
<div class="mt-4 h-1 w-20 bg-blue-600 mx-auto rounded-full"></div>
</div>
<!-- Activity Tracking Section -->
<section class="mb-12">
<h2 class="text-2xl font-semibold mb-6 flex items-center justify-center">
<i data-feather="activity" class="mr-3 text-blue-600"></i>
<span>Daily Activities</span>
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<!-- Sleep Tracker -->
<div class="bg-white rounded-xl p-6 pulse">
<div class="flex items-center justify-between mb-6">
<h3 class="text-xl font-semibold">SLEEP</h3>
<i data-feather="moon" class="text-neon-blue" style="width: 28px; height: 28px;"></i>
</div>
<div class="text-4xl font-bold text-neon-blue mb-4 glow-text">0h 0m</div>
<div class="w-full bg-gray-200 rounded-full h-2 mb-6">
<div class="bg-blue-500 h-2 rounded-full" style="width: 0%"></div>
</div>
<button class="w-full bg-gradient-to-r from-neon-blue to-blue-600 text-white py-3 rounded-xl font-mono tracking-wider hover:shadow-lg transition-all">
LOG SLEEP
</button>
</div>
<!-- Work Tracker -->
<div class="bg-white rounded-xl shadow-md p-6">
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-semibold text-gray-800">Work</h3>
<i data-feather="briefcase" class="text-green-500"></i>
</div>
<div class="text-3xl font-bold text-green-600 mb-2">0h 0m</div>
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="bg-green-500 h-2 rounded-full" style="width: 0%"></div>
</div>
<button class="mt-4 w-full bg-green-500 text-white py-2 rounded-lg hover:bg-green-600 transition-colors">
Log Work
</button>
</div>
<!-- Play Tracker -->
<div class="bg-white rounded-xl shadow-md p-6">
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-semibold text-gray-800">Play</h3>
<i data-feather="play" class="text-purple-500"></i>
</div>
<div class="text-3xl font-bold text-purple-600 mb-2">0h 0m</div>
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="bg-purple-500 h-2 rounded-full" style="width: 0%"></div>
</div>
<button class="mt-4 w-full bg-purple-500 text-white py-2 rounded-lg hover:bg-purple-600 transition-colors">
Log Play
</button>
</div>
<!-- Exercise Tracker -->
<div class="bg-white rounded-xl shadow-md p-6">
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-semibold text-gray-800">Exercise</h3>
<i data-feather="heart" class="text-red-500"></i>
</div>
<div class="text-3xl font-bold text-red-600 mb-2">0h 0m</div>
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="bg-red-500 h-2 rounded-full" style="width: 0%"></div>
</div>
<button class="mt-4 w-full bg-red-500 text-white py-2 rounded-lg hover:bg-red-600 transition-colors">
Log Exercise
</button>
</div>
</div>
</section>
<!-- Workout Plan Section -->
<section>
<h2 class="text-2xl font-semibold text-gray-800 mb-6 flex items-center">
<i data-feather="dumbbell" class="mr-2"></i>
Daily Workout Plan
</h2>
<div class="bg-white rounded-xl shadow-md p-6">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Workout Checklist -->
<div>
<h3 class="text-xl font-semibold text-gray-800 mb-4">Today's Exercises</h3>
<div class="space-y-3" id="workout-checklist">
<!-- Workout items will be populated by JavaScript -->
</div>
</div>
<!-- Progress Stats -->
<div>
<h3 class="text-xl font-semibold text-gray-800 mb-4">Progress</h3>
<div class="bg-gray-50 rounded-lg p-4">
<div class="text-center mb-4">
<div class="text-2xl font-bold text-gray-800" id="completion-percentage">0%</div>
<div class="text-sm text-gray-600">Complete</div>
</div>
<button class="w-full bg-gray-800 text-white py-2 rounded-lg hover:bg-gray-900 transition-colors" id="reset-workout">
Reset Workout
</button>
</div>
</div>
</div>
</div>
</section>
</main>
<custom-footer></custom-footer>
<script src="components/navbar.js"></script>
<script src="components/footer.js"></script>
<script src="script.js"></script>
<script>
feather.replace();
// Initialize workout checklist
document.addEventListener('DOMContentLoaded', function() {
initializeWorkoutChecklist();
});
</script>
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
</body>
</html> |