ulfr/recipe-mockup
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Rafał
2026-03-19 22:14:12 +01:00
commit dcad09f5ce
7 changed files with 538 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
js/app.js Normal file
View File

@@ -0,0 +1,45 @@
import { getRecipeListHTML } from './views/RecipeList.js';
import { getFilterHTML, setupFilter } from './views/Filter.js';
import { getRecipeDetailHTML, setupRecipeDetail } from './views/RecipeDetail.js';
document.addEventListener('DOMContentLoaded', () => {
const appContainer = document.getElementById('app-container');
// Inject all views into the main container
appContainer.innerHTML = `
${getRecipeListHTML()}
${getRecipeDetailHTML()}
${getFilterHTML()}
`;
// Initialize logic for the injected views
setupFilter();
setupRecipeDetail();
});
// --- GLOBAL NAVIGATION METHODS ---
window.openRecipeDetail = () => {
const view = document.getElementById('recipe-detail-view');
// Swap Tailwind classes to slide IN
view.classList.remove('translate-x-full', 'opacity-0', 'pointer-events-none');
view.classList.add('translate-x-0', 'opacity-100', 'pointer-events-auto');
};
window.closeRecipeDetail = () => {
const view = document.getElementById('recipe-detail-view');
// Swap Tailwind classes to slide OUT
view.classList.remove('translate-x-0', 'opacity-100', 'pointer-events-auto');
view.classList.add('translate-x-full', 'opacity-0', 'pointer-events-none');
};
window.openFilters = () => {
const fv = document.getElementById('filter-view');
fv.classList.remove('hidden');
fv.classList.add('flex');
};
window.closeFilters = () => {
const fv = document.getElementById('filter-view');
fv.classList.add('hidden');
fv.classList.remove('flex');
};

61
js/views/Filter.js Normal file
View File

@@ -0,0 +1,61 @@
export function getFilterHTML() {
return `
<div id="filter-view" class="absolute inset-0 bg-white z-50 hidden flex-col">
<div class="p-4 border-b border-gray-200 flex items-center justify-between mt-4">
<button onclick="closeFilters()" class="w-10 h-10 flex items-center justify-center text-gray-600 hover:bg-gray-100 rounded-full transition-colors"><i class="fas fa-arrow-left text-lg"></i></button>
<h2 class="text-lg font-semibold text-black">Filters</h2>
<button class="px-2 text-sm font-medium text-gray-500 hover:text-black transition-colors">Reset</button>
</div>
<div class="flex-1 overflow-y-auto p-6 space-y-8">
<div>
<h3 class="text-base font-semibold text-black mb-4">Meal Time</h3>
<div class="flex flex-wrap gap-2.5">
<button class="px-4 py-2 bg-gray-900 text-white rounded-full text-sm font-medium transition-colors">Breakfast</button>
<button class="px-4 py-2 bg-gray-100 text-gray-700 hover:bg-gray-200 rounded-full text-sm font-medium transition-colors">Lunch</button>
<button class="px-4 py-2 bg-gray-100 text-gray-700 hover:bg-gray-200 rounded-full text-sm font-medium transition-colors">Dinner</button>
<button class="px-4 py-2 bg-gray-100 text-gray-700 hover:bg-gray-200 rounded-full text-sm font-medium transition-colors">Supper</button>
</div>
</div>
<div>
<h3 class="text-base font-semibold text-black mb-4">Dietary & Tags</h3>
<div class="flex flex-wrap gap-2.5">
<button class="px-4 py-2 bg-gray-100 text-gray-700 hover:bg-gray-200 rounded-full text-sm font-medium transition-colors">Vegetarian</button>
<button class="px-4 py-2 bg-gray-100 text-gray-700 hover:bg-gray-200 rounded-full text-sm font-medium transition-colors">Vegan</button>
<button class="px-4 py-2 bg-gray-900 text-white rounded-full text-sm font-medium transition-colors">High Protein</button>
</div>
</div>
<div>
<div class="flex justify-between items-center mb-4">
<h3 class="text-base font-semibold text-black">Max Prep Time</h3>
<span id="time-display" class="text-sm font-medium text-gray-600">30 min</span>
</div>
<div class="px-1">
<input type="range" id="prep-time-slider" min="5" max="120" step="5" value="30" class="w-full appearance-none bg-transparent">
<div class="flex justify-between text-xs text-gray-400 mt-3 font-medium">
<span>5m</span><span>30m</span><span>1h</span><span>2h+</span>
</div>
</div>
</div>
</div>
<div class="p-4 border-t border-gray-200 bg-white mt-auto">
<button onclick="closeFilters()" class="w-full bg-gray-900 hover:bg-black text-white py-3.5 rounded-xl font-semibold shadow-sm transition-colors text-sm">Show 12 Results</button>
</div>
</div>
`;
}
export function setupFilter() {
const timeSlider = document.getElementById('prep-time-slider');
const timeDisplay = document.getElementById('time-display');
if(timeSlider) {
timeSlider.addEventListener('input', (e) => {
const val = e.target.value;
timeDisplay.textContent = val >= 120 ? '120+ min' : `${val} min`;
});
}
}

157
js/views/RecipeDetail.js Normal file
View File

@@ -0,0 +1,157 @@
export function getRecipeDetailHTML() {
return `
<div id="recipe-detail-view" class="absolute inset-0 bg-white z-30 transition-all duration-300 ease-in-out translate-x-full opacity-0 pointer-events-none flex flex-col overflow-hidden">
<div class="absolute top-0 w-full p-4 flex justify-between z-40 mt-4">
<button onclick="closeRecipeDetail()" class="w-10 h-10 bg-white/90 backdrop-blur rounded-full flex items-center justify-center shadow-sm text-gray-800 hover:bg-white transition-colors">
<i class="fas fa-arrow-left"></i>
</button>
<button class="w-10 h-10 bg-white/90 backdrop-blur rounded-full flex items-center justify-center shadow-sm text-gray-400 hover:text-red-500 transition-colors">
<i class="far fa-heart"></i>
</button>
</div>
<div class="h-[260px] shrink-0 w-full bg-[#d4d4d4] flex items-center justify-center relative">
<span class="text-white font-medium text-lg">Pancakes Hero Image</span>
</div>
<div class="bg-white rounded-t-3xl -mt-6 relative z-30 pt-8 flex flex-col flex-1 overflow-hidden">
<div class="mb-4 px-6 shrink-0">
<div class="flex justify-between items-start mb-3">
<h1 class="text-2xl font-bold text-gray-900">Fluffy Pancakes</h1>
</div>
<div class="flex flex-wrap gap-2 mb-4">
<span class="px-3 py-1 bg-gray-100 text-gray-700 text-xs rounded-md font-medium">Breakfast</span>
<span class="px-3 py-1 bg-gray-100 text-gray-700 text-xs rounded-md font-medium">Vegetarian</span>
</div>
<div class="flex justify-between items-center text-sm text-gray-600 font-medium">
<div class="flex gap-4">
<div class="flex items-center gap-1.5"><i class="fas fa-clock text-gray-400"></i><span>15 min</span></div>
<div class="flex items-center gap-1.5"><i class="fas fa-fire text-gray-400"></i><span>320 cal</span></div>
</div>
<div class="flex items-center gap-1 bg-gray-100 p-1 rounded-lg">
<button onclick="changeServings(-1)" class="w-6 h-6 bg-white rounded shadow-sm flex items-center justify-center text-gray-600 hover:text-black hover:bg-gray-50"><i class="fas fa-minus text-[10px]"></i></button>
<div class="flex items-center gap-1 px-2">
<span id="servings-count" class="font-bold text-gray-900 text-sm w-3 text-center">2</span>
<span class="text-xs text-gray-500"><i class="fas fa-user-friends"></i></span>
</div>
<button onclick="changeServings(1)" class="w-6 h-6 bg-white rounded shadow-sm flex items-center justify-center text-gray-600 hover:text-black hover:bg-gray-50"><i class="fas fa-plus text-[10px]"></i></button>
</div>
</div>
</div>
<div class="flex border-b border-gray-200 mb-2 px-6 shrink-0">
<button class="flex-1 pb-3 text-sm font-semibold text-gray-900 border-b-2 border-gray-900 tab-btn" onclick="switchTab('ingredients', this)">Ingredients</button>
<button class="flex-1 pb-3 text-sm font-medium text-gray-500 border-b-2 border-transparent hover:text-gray-700 tab-btn" onclick="switchTab('steps', this)">Steps</button>
<button class="flex-1 pb-3 text-sm font-medium text-gray-500 border-b-2 border-transparent hover:text-gray-700 tab-btn" onclick="switchTab('nutrition', this)">Nutrition</button>
</div>
<div class="flex-1 overflow-y-auto px-6 pt-2 pb-10 no-scrollbar">
<div id="tab-ingredients" class="tab-content block animate-fade-in">
<ul class="space-y-0 mb-6" id="ingredient-list">
<li class="flex items-center gap-3 py-3 border-b border-gray-100 cursor-pointer hover:bg-gray-50 px-1 -mx-1 transition-colors" onclick="toggleIngredient(this)">
<div class="w-5 h-5 rounded border border-gray-300 flex items-center justify-center text-white check-box transition-colors"><i class="fas fa-check text-[10px] hidden check-icon"></i></div>
<span class="text-gray-700 text-sm flex-1 ingredient-text transition-colors">All-purpose flour</span>
<span class="font-medium text-gray-900 text-sm ingredient-amount" data-base-amount="1" data-unit="cup">1 cup</span>
</li>
<li class="flex items-center gap-3 py-3 border-b border-gray-100 cursor-pointer hover:bg-gray-50 px-1 -mx-1 transition-colors" onclick="toggleIngredient(this)">
<div class="w-5 h-5 rounded border border-gray-300 flex items-center justify-center text-white check-box transition-colors"><i class="fas fa-check text-[10px] hidden check-icon"></i></div>
<span class="text-gray-700 text-sm flex-1 ingredient-text transition-colors">Milk</span>
<span class="font-medium text-gray-900 text-sm ingredient-amount" data-base-amount="0.75" data-unit="cup">0.75 cup</span>
</li>
<li class="flex items-center gap-3 py-3 border-b border-gray-100 cursor-pointer hover:bg-gray-50 px-1 -mx-1 transition-colors" onclick="toggleIngredient(this)">
<div class="w-5 h-5 rounded border border-gray-300 flex items-center justify-center text-white check-box transition-colors"><i class="fas fa-check text-[10px] hidden check-icon"></i></div>
<span class="text-gray-700 text-sm flex-1 ingredient-text transition-colors">Eggs</span>
<span class="font-medium text-gray-900 text-sm ingredient-amount" data-base-amount="1" data-unit="large">1 large</span>
</li>
</ul>
<button class="w-full bg-gray-900 hover:bg-black text-white py-3.5 rounded-xl font-semibold shadow-sm transition-colors text-sm flex items-center justify-center gap-2 mb-6">
<i class="fas fa-plus"></i> Add Selected to Shopping List
</button>
</div>
<div id="tab-steps" class="tab-content hidden animate-fade-in">
<div class="space-y-6 pb-6">
<div class="flex gap-4">
<div class="w-7 h-7 rounded-full bg-gray-900 text-white flex items-center justify-center text-sm font-bold shrink-0 shadow-sm">1</div>
<div class="pt-0.5"><p class="text-sm text-gray-600 leading-relaxed">Whisk the flour, sugar, baking powder, and salt together in a large bowl.</p></div>
</div>
<div class="flex gap-4">
<div class="w-7 h-7 rounded-full bg-gray-900 text-white flex items-center justify-center text-sm font-bold shrink-0 shadow-sm">2</div>
<div class="pt-0.5"><p class="text-sm text-gray-600 leading-relaxed">Create a well in the center and add milk, egg, and melted butter. Mix until just combined.</p></div>
</div>
</div>
</div>
<div id="tab-nutrition" class="tab-content hidden animate-fade-in">
<div class="bg-gray-50 rounded-xl p-5 border border-gray-100 mb-6">
<h3 class="font-bold text-gray-900 border-b border-gray-200 pb-2 mb-2 text-lg">Nutrition Facts</h3>
<p class="text-xs text-gray-500 mb-4">Amount per serving</p>
<ul class="space-y-0 divide-y divide-gray-200">
<li class="flex justify-between py-2.5 font-bold"><span class="text-gray-900 text-sm">Calories</span><span class="text-gray-900 text-sm">320</span></li>
<li class="flex justify-between py-2.5"><span class="text-gray-800 text-sm font-medium">Total Fat</span><span class="font-medium text-gray-900 text-sm">12g</span></li>
<li class="flex justify-between py-2.5"><span class="text-gray-800 text-sm font-medium">Protein</span><span class="font-medium text-gray-900 text-sm">8g</span></li>
</ul>
</div>
</div>
</div>
</div>
</div>
`;
}
export function setupRecipeDetail() {
let currentServings = 2;
const defaultServings = 2;
window.switchTab = (tabId, clickedBtn) => {
document.querySelectorAll('.tab-content').forEach(el => {
el.classList.remove('block');
el.classList.add('hidden');
});
const targetTab = document.getElementById(`tab-${tabId}`);
targetTab.classList.remove('hidden');
targetTab.classList.add('block');
targetTab.parentElement.scrollTop = 0;
document.querySelectorAll('.tab-btn').forEach(btn => {
btn.classList.remove('text-gray-900', 'border-gray-900', 'font-semibold');
btn.classList.add('text-gray-500', 'border-transparent', 'font-medium');
});
clickedBtn.classList.remove('text-gray-500', 'border-transparent', 'font-medium');
clickedBtn.classList.add('text-gray-900', 'border-gray-900', 'font-semibold');
};
window.toggleIngredient = (element) => {
element.classList.toggle('ingredient-active');
};
window.changeServings = (delta) => {
const newServings = currentServings + delta;
if (newServings < 1) return;
currentServings = newServings;
document.getElementById('servings-count').innerText = currentServings;
const ratio = currentServings / defaultServings;
document.querySelectorAll('.ingredient-amount').forEach(el => {
const baseAmount = parseFloat(el.getAttribute('data-base-amount'));
const unit = el.getAttribute('data-unit');
if (!isNaN(baseAmount)) {
let newAmount = baseAmount * ratio;
newAmount = Number.isInteger(newAmount) ? newAmount : parseFloat(newAmount.toFixed(2));
el.innerText = `${newAmount} ${unit}`;
}
});
};
}

185
js/views/RecipeList.js Normal file
View File

@@ -0,0 +1,185 @@
export function getRecipeListHTML() {
return `
<div id="main-view" class="flex flex-col h-full absolute inset-0 bg-gray-50 z-10">
<div class="p-4 border-b border-gray-200 mt-4 bg-white">
<div class="flex items-center w-full border border-gray-300 rounded-lg bg-white focus-within:border-gray-400 transition-colors">
<div class="pl-3 pr-2 text-gray-400"><i class="fas fa-search"></i></div>
<input type="text" placeholder="Search recipes..." class="flex-1 py-2.5 bg-transparent outline-none text-gray-600 placeholder-gray-400 text-sm">
<div class="w-px h-6 bg-gray-200"></div>
<button onclick="openFilters()" class="px-4 text-gray-700 hover:text-black flex items-center justify-center transition-colors">
<i class="fas fa-sliders-h"></i>
</button>
</div>
</div>
<div class="px-5 py-4 pb-2 bg-gray-50">
<h2 class="text-xl font-medium">24 Recipes Found</h2>
</div>
<div class="flex-1 overflow-y-auto px-4 pb-24 bg-gray-50">
<div class="grid grid-cols-2 gap-3">
<div onclick="openRecipeDetail()" class="border border-gray-200 rounded-xl overflow-hidden shadow-sm flex flex-col bg-white cursor-pointer hover:shadow-md transition-shadow">
<div class="h-32 bg-[#d4d4d4] relative flex items-center justify-center">
<span class="text-white font-medium text-xs">Pancakes</span>
</div>
<div class="p-3 flex flex-col flex-1">
<h3 class="text-sm font-medium underline decoration-1 underline-offset-2 text-black mb-1 line-clamp-1">Fluffy Pancakes</h3>
<p class="text-gray-500 text-xs mb-3 line-clamp-2">Classic breakfast pancakes</p>
<div class="mt-auto">
<div class="flex items-center justify-between text-[11px] text-gray-600 font-medium mb-2">
<div class="flex items-center gap-1"><i class="fas fa-clock text-gray-400"></i><span>15m</span></div>
<div class="flex items-center gap-1"><i class="fas fa-fire text-gray-400"></i><span>320 cal</span></div>
</div>
<div class="flex flex-wrap gap-1">
<span class="px-2 py-0.5 bg-gray-100 text-gray-600 text-[10px] rounded-md font-medium">Breakfast</span>
</div>
</div>
</div>
</div>
<div onclick="openRecipeDetail()" class="border border-gray-200 rounded-xl overflow-hidden shadow-sm flex flex-col bg-white cursor-pointer hover:shadow-md transition-shadow">
<div class="h-32 bg-[#d4d4d4] relative flex items-center justify-center">
<span class="text-white font-medium text-xs">Salad</span>
</div>
<div class="p-3 flex flex-col flex-1">
<h3 class="text-sm font-medium underline decoration-1 underline-offset-2 text-black mb-1 line-clamp-1">Chicken Salad</h3>
<p class="text-gray-500 text-xs mb-3 line-clamp-2">Healthy greens with grilled chicken</p>
<div class="mt-auto">
<div class="flex items-center justify-between text-[11px] text-gray-600 font-medium mb-2">
<div class="flex items-center gap-1"><i class="fas fa-clock text-gray-400"></i><span>20m</span></div>
<div class="flex items-center gap-1"><i class="fas fa-fire text-gray-400"></i><span>250 cal</span></div>
</div>
<div class="flex flex-wrap gap-1">
<span class="px-2 py-0.5 bg-gray-100 text-gray-600 text-[10px] rounded-md font-medium">Lunch</span>
</div>
</div>
</div>
</div>
<div onclick="openRecipeDetail()" class="border border-gray-200 rounded-xl overflow-hidden shadow-sm flex flex-col bg-white cursor-pointer hover:shadow-md transition-shadow">
<div class="h-32 bg-[#d4d4d4] relative flex items-center justify-center">
<span class="text-white font-medium text-xs">Pasta</span>
</div>
<div class="p-3 flex flex-col flex-1">
<h3 class="text-sm font-medium underline decoration-1 underline-offset-2 text-black mb-1 line-clamp-1">Tomato Basil Pasta</h3>
<p class="text-gray-500 text-xs mb-3 line-clamp-2">Rich garlic and tomato sauce</p>
<div class="mt-auto">
<div class="flex items-center justify-between text-[11px] text-gray-600 font-medium mb-2">
<div class="flex items-center gap-1"><i class="fas fa-clock text-gray-400"></i><span>30m</span></div>
<div class="flex items-center gap-1"><i class="fas fa-fire text-gray-400"></i><span>450 cal</span></div>
</div>
<div class="flex flex-wrap gap-1">
<span class="px-2 py-0.5 bg-gray-100 text-gray-600 text-[10px] rounded-md font-medium">Dinner</span>
</div>
</div>
</div>
</div>
<div onclick="openRecipeDetail()" class="border border-gray-200 rounded-xl overflow-hidden shadow-sm flex flex-col bg-white cursor-pointer hover:shadow-md transition-shadow">
<div class="h-32 bg-[#d4d4d4] relative flex items-center justify-center">
<span class="text-white font-medium text-xs">Smoothie</span>
</div>
<div class="p-3 flex flex-col flex-1">
<h3 class="text-sm font-medium underline decoration-1 underline-offset-2 text-black mb-1 line-clamp-1">Berry Smoothie</h3>
<p class="text-gray-500 text-xs mb-3 line-clamp-2">Mixed berries and yogurt power blend</p>
<div class="mt-auto">
<div class="flex items-center justify-between text-[11px] text-gray-600 font-medium mb-2">
<div class="flex items-center gap-1"><i class="fas fa-clock text-gray-400"></i><span>5m</span></div>
<div class="flex items-center gap-1"><i class="fas fa-fire text-gray-400"></i><span>180 cal</span></div>
</div>
<div class="flex flex-wrap gap-1">
<span class="px-2 py-0.5 bg-gray-100 text-gray-600 text-[10px] rounded-md font-medium">Snack</span>
</div>
</div>
</div>
</div>
<div onclick="openRecipeDetail()" class="border border-gray-200 rounded-xl overflow-hidden shadow-sm flex flex-col bg-white cursor-pointer hover:shadow-md transition-shadow">
<div class="h-32 bg-[#d4d4d4] relative flex items-center justify-center">
<span class="text-white font-medium text-xs">Avocado Toast</span>
</div>
<div class="p-3 flex flex-col flex-1">
<h3 class="text-sm font-medium underline decoration-1 underline-offset-2 text-black mb-1 line-clamp-1">Avocado Toast</h3>
<p class="text-gray-500 text-xs mb-3 line-clamp-2">Sourdough with smashed avocado</p>
<div class="mt-auto">
<div class="flex items-center justify-between text-[11px] text-gray-600 font-medium mb-2">
<div class="flex items-center gap-1"><i class="fas fa-clock text-gray-400"></i><span>10m</span></div>
<div class="flex items-center gap-1"><i class="fas fa-fire text-gray-400"></i><span>220 cal</span></div>
</div>
<div class="flex flex-wrap gap-1">
<span class="px-2 py-0.5 bg-gray-100 text-gray-600 text-[10px] rounded-md font-medium">Breakfast</span>
</div>
</div>
</div>
</div>
<div onclick="openRecipeDetail()" class="border border-gray-200 rounded-xl overflow-hidden shadow-sm flex flex-col bg-white cursor-pointer hover:shadow-md transition-shadow">
<div class="h-32 bg-[#d4d4d4] relative flex items-center justify-center">
<span class="text-white font-medium text-xs">Salmon</span>
</div>
<div class="p-3 flex flex-col flex-1">
<h3 class="text-sm font-medium underline decoration-1 underline-offset-2 text-black mb-1 line-clamp-1">Grilled Salmon</h3>
<p class="text-gray-500 text-xs mb-3 line-clamp-2">Fresh salmon with lemon butter</p>
<div class="mt-auto">
<div class="flex items-center justify-between text-[11px] text-gray-600 font-medium mb-2">
<div class="flex items-center gap-1"><i class="fas fa-clock text-gray-400"></i><span>25m</span></div>
<div class="flex items-center gap-1"><i class="fas fa-fire text-gray-400"></i><span>380 cal</span></div>
</div>
<div class="flex flex-wrap gap-1">
<span class="px-2 py-0.5 bg-gray-100 text-gray-600 text-[10px] rounded-md font-medium">Dinner</span>
</div>
</div>
</div>
</div>
<div onclick="openRecipeDetail()" class="border border-gray-200 rounded-xl overflow-hidden shadow-sm flex flex-col bg-white cursor-pointer hover:shadow-md transition-shadow">
<div class="h-32 bg-[#d4d4d4] relative flex items-center justify-center">
<span class="text-white font-medium text-xs">Tacos</span>
</div>
<div class="p-3 flex flex-col flex-1">
<h3 class="text-sm font-medium underline decoration-1 underline-offset-2 text-black mb-1 line-clamp-1">Beef Tacos</h3>
<p class="text-gray-500 text-xs mb-3 line-clamp-2">Spicy ground beef with fresh salsa</p>
<div class="mt-auto">
<div class="flex items-center justify-between text-[11px] text-gray-600 font-medium mb-2">
<div class="flex items-center gap-1"><i class="fas fa-clock text-gray-400"></i><span>20m</span></div>
<div class="flex items-center gap-1"><i class="fas fa-fire text-gray-400"></i><span>410 cal</span></div>
</div>
<div class="flex flex-wrap gap-1">
<span class="px-2 py-0.5 bg-gray-100 text-gray-600 text-[10px] rounded-md font-medium">Dinner</span>
</div>
</div>
</div>
</div>
<div onclick="openRecipeDetail()" class="border border-gray-200 rounded-xl overflow-hidden shadow-sm flex flex-col bg-white cursor-pointer hover:shadow-md transition-shadow">
<div class="h-32 bg-[#d4d4d4] relative flex items-center justify-center">
<span class="text-white font-medium text-xs">Oatmeal</span>
</div>
<div class="p-3 flex flex-col flex-1">
<h3 class="text-sm font-medium underline decoration-1 underline-offset-2 text-black mb-1 line-clamp-1">Oatmeal Bowl</h3>
<p class="text-gray-500 text-xs mb-3 line-clamp-2">Warm oats with honey and nuts</p>
<div class="mt-auto">
<div class="flex items-center justify-between text-[11px] text-gray-600 font-medium mb-2">
<div class="flex items-center gap-1"><i class="fas fa-clock text-gray-400"></i><span>10m</span></div>
<div class="flex items-center gap-1"><i class="fas fa-fire text-gray-400"></i><span>210 cal</span></div>
</div>
<div class="flex flex-wrap gap-1">
<span class="px-2 py-0.5 bg-gray-100 text-gray-600 text-[10px] rounded-md font-medium">Breakfast</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="absolute bottom-0 w-full bg-white border-t border-gray-200 flex justify-between px-6 py-3 pb-6 z-20">
<button class="flex flex-col items-center gap-1 text-black"><i class="fas fa-book text-xl"></i><span class="text-[11px] font-medium">Recipes</span></button>
<button class="flex flex-col items-center gap-1 text-gray-500 hover:text-gray-700"><i class="far fa-calendar-alt text-xl"></i><span class="text-[11px] font-medium">Planner</span></button>
<button class="flex flex-col items-center gap-1 text-gray-500 hover:text-gray-700"><i class="fas fa-shopping-cart text-xl"></i><span class="text-[11px] font-medium">Shopping</span></button>
<button class="flex flex-col items-center gap-1 text-gray-500 hover:text-gray-700"><i class="fas fa-box text-xl"></i><span class="text-[11px] font-medium">Inventory</span></button>
</div>
</div>
`;
}