105 lines
4.6 KiB
Plaintext
105 lines
4.6 KiB
Plaintext
<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>
|