63 lines
3.9 KiB
JavaScript
63 lines
3.9 KiB
JavaScript
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">Filtry</h2>
|
|
<button class="px-2 text-sm font-medium text-gray-500 hover:text-black transition-colors">Wyczyść</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">Pora posiłku</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">Śniadanie</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">Drugie śniadanie</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">Obiad</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">Podwieczorek</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">Kolacja</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">Przekąska</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="text-base font-semibold text-black mb-4">Dieta i tagi</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">Wegetariańska</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">Wegańska</button>
|
|
<button class="px-4 py-2 bg-gray-900 text-white rounded-full text-sm font-medium transition-colors">Wysokobiałkowe</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="flex justify-between items-center mb-4">
|
|
<h3 class="text-base font-semibold text-black">Maks. czas przygotowania</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>5 min</span><span>30 min</span><span>1 godz.</span><span>2 godz.+</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">Pokaż 12 wyników</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 ? 'ponad 120 min' : `${val} min`;
|
|
});
|
|
}
|
|
} |