Spaces:
Running
Running
File size: 9,251 Bytes
914a4f3 |
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 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Food Diary - Wellness Wave</title>
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<link rel="stylesheet" href="style.css">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
</head>
<body class="bg-gradient-to-br from-teal-50 to-cyan-100 min-h-screen flex flex-col">
<custom-navbar></custom-navbar>
<!-- Diary Header -->
<section class="py-16 px-4 md:px-8 bg-gradient-to-br from-cyan-50 to-teal-100">
<div class="max-w-7xl mx-auto text-center">
<h1 class="text-4xl md:text-5xl font-bold text-teal-800 mb-6" data-aos="fade-up">
Food Diary Analytics 📊
</h1>
<p class="text-xl text-teal-600 max-w-3xl mx-auto mb-10" data-aos="fade-up" data-aos-delay="100">
Track your nutrition and get personalized insights for better health
</p>
</div>
</section>
<!-- Diary Stats -->
<section class="py-12 px-4 md:px-8 bg-white">
<div class="max-w-7xl mx-auto">
<div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-12">
<div class="bg-gradient-to-br from-teal-50 to-cyan-50 rounded-2xl p-6 shadow-lg text-center" data-aos="fade-up">
<i data-feather="trending-up" class="text-teal-500 w-12 h-12 mx-auto mb-4"></i>
<h3 class="text-2xl font-bold text-teal-800 mb-2">Daily Calories</h3>
<p class="text-3xl font-bold text-teal-600">2,150</p>
<p class="text-teal-500">Goal: 2,200</p>
</div>
<div class="bg-gradient-to-br from-teal-50 to-cyan-50 rounded-2xl p-6 shadow-lg text-center" data-aos="fade-up" data-aos-delay="100">
<i data-feather="droplet" class="text-teal-500 w-12 h-12 mx-auto mb-4"></i>
<h3 class="text-2xl font-bold text-teal-800 mb-2">Water Intake</h3>
<p class="text-3xl font-bold text-teal-600">6</p>
<p class="text-teal-500">Glasses (Goal: 8)</p>
</div>
<div class="bg-gradient-to-br from-teal-50 to-cyan-50 rounded-2xl p-6 shadow-lg text-center" data-aos="fade-up" data-aos-delay="200">
<i data-feather="activity" class="text-teal-500 w-12 h-12 mx-auto mb-4"></i>
<h3 class="text-2xl font-bold text-teal-800 mb-2">Active Minutes</h3>
<p class="text-3xl font-bold text-teal-600">45</p>
<p class="text-teal-500">Today (Goal: 60)</p>
</div>
<div class="bg-gradient-to-br from-teal-50 to-cyan-50 rounded-2xl p-6 shadow-lg text-center" data-aos="fade-up" data-aos-delay="300">
<i data-feather="moon" class="text-teal-500 w-12 h-12 mx-auto mb-4"></i>
<h3 class="text-2xl font-bold text-teal-800 mb-2">Sleep</h3>
<p class="text-3xl font-bold text-teal-600">7.5h</p>
<p class="text-teal-500">Last night (Goal: 8h)</p>
</div>
</div>
<!-- Add Entry Form -->
<div class="bg-gradient-to-br from-cyan-50 to-teal-100 rounded-2xl shadow-xl p-6 mb-12" data-aos="fade-up">
<h2 class="text-2xl font-bold text-teal-800 mb-6">Add New Entry</h2>
<form id="diaryForm" class="space-y-6">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label class="block text-lg font-semibold text-teal-800 mb-2">Meal Type</label>
<select class="w-full p-3 rounded-lg border-2 border-teal-200 focus:border-teal-500 focus:outline-none">
<option>Breakfast</option>
<option>Lunch</option>
<option>Dinner</option>
<option>Snack</option>
</select>
</div>
<div>
<label class="block text-lg font-semibold text-teal-800 mb-2">Time</label>
<input type="time" class="w-full p-3 rounded-lg border-2 border-teal-200 focus:border-teal-500 focus:outline-none">
</div>
</div>
<div>
<label class="block text-lg font-semibold text-teal-800 mb-2">Food Description</label>
<textarea class="w-full p-3 rounded-lg border-2 border-teal-200 focus:border-teal-500 focus:outline-none" rows="3" placeholder="Describe what you ate..."></textarea>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div>
<label class="block text-lg font-semibold text-teal-800 mb-2">Calories</label>
<input type="number" class="w-full p-3 rounded-lg border-2 border-teal-200 focus:border-teal-500 focus:outline-none" placeholder="0">
</div>
<div>
<label class="block text-lg font-semibold text-teal-800 mb-2">Protein (g)</label>
<input type="number" class="w-full p-3 rounded-lg border-2 border-teal-200 focus:border-teal-500 focus:outline-none" placeholder="0">
</div>
<div>
<label class="block text-lg font-semibold text-teal-800 mb-2">Carbs (g)</label>
<input type="number" class="w-full p-3 rounded-lg border-2 border-teal-200 focus:border-teal-500 focus:outline-none" placeholder="0">
</div>
</div>
<button type="submit" class="w-full bg-teal-500 hover:bg-teal-600 text-white font-bold py-3 px-6 rounded-lg transition duration-300">
Add to Diary
</button>
</form>
</div>
<!-- Diary Entries -->
<div class="bg-white rounded-2xl shadow-xl p-6" data-aos="fade-up">
<h2 class="text-2xl font-bold text-teal-800 mb-6">Today's Entries</h2>
<div class="space-y-4">
<div class="flex items-center justify-between p-4 bg-gradient-to-r from-teal-50 to-cyan-50 rounded-lg">
<div>
<h3 class="font-bold text-teal-800">Oatmeal with Berries</h3>
<p class="text-teal-600">Breakfast - 8:30 AM</p>
</div>
<div class="text-right">
<p class="font-bold text-teal-800">320 cal</p>
<p class="text-sm text-teal-600">12g protein, 58g carbs</p>
</div>
</div>
<div class="flex items-center justify-between p-4 bg-gradient-to-r from-teal-50 to-cyan-50 rounded-lg">
<div>
<h3 class="font-bold text-teal-800">Grilled Chicken Salad</h3>
<p class="text-teal-600">Lunch - 1:15 PM</p>
</div>
<div class="text-right">
<p class="font-bold text-teal-800">420 cal</p>
<p class="text-sm text-teal-600">35g protein, 18g carbs</p>
</div>
</div>
<div class="flex items-center justify-between p-4 bg-gradient-to-r from-teal-50 to-cyan-50 rounded-lg">
<div>
<h3 class="font-bold text-teal-800">Protein Shake</h3>
<p class="text-teal-600">Snack - 4:00 PM</p>
</div>
<div class="text-right">
<p class="font-bold text-teal-800">180 cal</p>
<p class="text-sm text-teal-600">25g protein, 8g carbs</p>
</div>
</div>
</div>
</div>
</div>
</section>
<custom-footer></custom-footer>
<script src="components/navbar.js"></script>
<script src="components/footer.js"></script>
<script src="script.js"></script>
<script>
feather.replace();
AOS.init({
duration: 800,
once: true
});
</script>
</body>
</html> |