157 lines
10 KiB
JavaScript
157 lines
10 KiB
JavaScript
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}`;
|
|
}
|
|
});
|
|
};
|
|
} |