kingjaypee12/calorie_tracker_2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

initial commit

Browse Source
This commit is contained in:
Jp
2026-01-30 23:32:43 +08:00
commit 3df16ee995
20 changed files with 6405 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
views/foods.ejs Normal file
View File

@@ -0,0 +1,104 @@
<h1 class="text-3xl font-bold mb-6">Food Database</h1>
<!-- Search and Filter -->
<div class="glass rounded-xl p-6 mb-8">
<form method="GET" action="/foods" class="grid grid-cols-1 md:grid-cols-4 gap-4">
<div class="md:col-span-3">
<input type="text" name="q" value="<%= search_query %>" placeholder="Search for foods (English or Tagalog)..." class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent">
</div>
<div>
<select name="category" onchange="this.form.submit()" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent">
<% categories.forEach(cat => { %>
<option value="<%= cat %>" <%= current_category === cat ? 'selected' : '' %>><%= cat.charAt(0).toUpperCase() + cat.slice(1) %></option>
<% }); %>
</select>
</div>
</form>
</div>
<div class="mb-8">
<h2 class="text-2xl font-bold mb-4 flex items-center">
<span class="mr-2">🇵🇭</span> Filipino Foods
</h2>
<% if (filipino_foods.length === 0) { %>
<p class="text-gray-500 italic">No Filipino foods found matching your criteria.</p>
<% } else { %>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<% filipino_foods.forEach(food => { %>
<div class="glass rounded-xl p-4 hover:shadow-lg transition">
<div class="flex justify-between items-start mb-2">
<div>
<h3 class="font-bold text-lg"><%= food.name %></h3>
<% if (food.name_tagalog) { %>
<p class="text-sm text-gray-600 italic"><%= food.name_tagalog %></p>
<% } %>
</div>
<span class="bg-primary text-white text-xs px-2 py-1 rounded-full"><%= food.category %></span>
</div>
<div class="grid grid-cols-4 gap-2 text-center text-sm mt-3">
<div class="bg-red-50 rounded p-1">
<span class="block font-bold text-primary"><%= Math.round(food.calories) %></span>
<span class="text-xs text-gray-500">cal</span>
</div>
<div class="bg-blue-50 rounded p-1">
<span class="block font-bold text-blue-600"><%= Math.round(food.protein_g) %>g</span>
<span class="text-xs text-gray-500">prot</span>
</div>
<div class="bg-yellow-50 rounded p-1">
<span class="block font-bold text-yellow-600"><%= Math.round(food.carbs_g) %>g</span>
<span class="text-xs text-gray-500">carb</span>
</div>
<div class="bg-orange-50 rounded p-1">
<span class="block font-bold text-orange-600"><%= Math.round(food.fat_g) %>g</span>
<span class="text-xs text-gray-500">fat</span>
</div>
</div>
<div class="mt-3 text-xs text-gray-500 text-center">
Per <%= food.serving_description || 'serving' %> (<%= food.serving_size_g %>g)
</div>
</div>
<% }); %>
</div>
<% } %>
</div>
<div>
<h2 class="text-2xl font-bold mb-4">Other Foods</h2>
<% if (other_foods.length === 0) { %>
<p class="text-gray-500 italic">No other foods found.</p>
<% } else { %>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<% other_foods.forEach(food => { %>
<div class="glass rounded-xl p-4 hover:shadow-lg transition opacity-90">
<div class="flex justify-between items-start mb-2">
<h3 class="font-bold text-lg"><%= food.name %></h3>
<span class="bg-gray-200 text-gray-700 text-xs px-2 py-1 rounded-full">Global</span>
</div>
<div class="grid grid-cols-4 gap-2 text-center text-sm mt-3">
<div class="bg-red-50 rounded p-1">
<span class="block font-bold text-primary"><%= Math.round(food.calories) %></span>
<span class="text-xs text-gray-500">cal</span>
</div>
<div class="bg-blue-50 rounded p-1">
<span class="block font-bold text-blue-600"><%= Math.round(food.protein_g) %>g</span>
<span class="text-xs text-gray-500">prot</span>
</div>
<div class="bg-yellow-50 rounded p-1">
<span class="block font-bold text-yellow-600"><%= Math.round(food.carbs_g) %>g</span>
<span class="text-xs text-gray-500">carb</span>
</div>
<div class="bg-orange-50 rounded p-1">
<span class="block font-bold text-orange-600"><%= Math.round(food.fat_g) %>g</span>
<span class="text-xs text-gray-500">fat</span>
</div>
</div>
</div>
<% }); %>
</div>
<% } %>
</div>