182 lines
14 KiB
JavaScript
182 lines
14 KiB
JavaScript
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="Szukaj przepisów..." 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="flex-1 overflow-y-auto px-4 pt-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">Placki</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">Puszyste placki</h3>
|
|
<p class="text-gray-500 text-xs mb-3 line-clamp-2">Klasyczne placki na śniadanie</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>15 min</span></div>
|
|
<div class="flex items-center gap-1"><i class="fas fa-fire text-gray-400"></i><span>320 kcal</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">Śniadanie</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">Sałatka</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">Sałatka z kurczakiem</h3>
|
|
<p class="text-gray-500 text-xs mb-3 line-clamp-2">Zielone warzywa z grillowanym kurczakiem</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>20 min</span></div>
|
|
<div class="flex items-center gap-1"><i class="fas fa-fire text-gray-400"></i><span>250 kcal</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">Obiad</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">Makaron</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">Makaron z pomidorami i bazylią</h3>
|
|
<p class="text-gray-500 text-xs mb-3 line-clamp-2">Aromatyczny sos pomidorowy z czosnkiem</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>30 min</span></div>
|
|
<div class="flex items-center gap-1"><i class="fas fa-fire text-gray-400"></i><span>450 kcal</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">Kolacja</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">Koktajl</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">Koktajl owocowy</h3>
|
|
<p class="text-gray-500 text-xs mb-3 line-clamp-2">Mix jagód i jogurtu</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>5 min</span></div>
|
|
<div class="flex items-center gap-1"><i class="fas fa-fire text-gray-400"></i><span>180 kcal</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">Przekąska</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">Tost z awokado</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">Tost z awokado</h3>
|
|
<p class="text-gray-500 text-xs mb-3 line-clamp-2">Chleb na zakwasie z rozgniecionym awokado</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>10 min</span></div>
|
|
<div class="flex items-center gap-1"><i class="fas fa-fire text-gray-400"></i><span>220 kcal</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">Śniadanie</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">Łosoś</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">Grillowany łosoś</h3>
|
|
<p class="text-gray-500 text-xs mb-3 line-clamp-2">Świeży łosoś z masłem cytrynowym</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>25 min</span></div>
|
|
<div class="flex items-center gap-1"><i class="fas fa-fire text-gray-400"></i><span>380 kcal</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">Kolacja</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">Tacos z wołowiną</h3>
|
|
<p class="text-gray-500 text-xs mb-3 line-clamp-2">Pikantna mielona wołowina ze świeżą salsą</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>20 min</span></div>
|
|
<div class="flex items-center gap-1"><i class="fas fa-fire text-gray-400"></i><span>410 kcal</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">Kolacja</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">Owsianka</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">Miska owsianki</h3>
|
|
<p class="text-gray-500 text-xs mb-3 line-clamp-2">Ciepła owsianka z miodem i orzechami</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>10 min</span></div>
|
|
<div class="flex items-center gap-1"><i class="fas fa-fire text-gray-400"></i><span>210 kcal</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">Śniadanie</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">Przepisy</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">Planer</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">Zakupy</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">Zapasy</span></button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|