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

Translate UI to polish

Browse Source
This commit is contained in:
Rafał
2026-03-20 20:20:09 +01:00
parent d032f86b73
commit 9614fefe05
2 changed files with 71 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
js/views/Filter.js
View File

@@ -3,46 +3,48 @@ export function getFilterHTML() {
<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>
<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">Meal Time</h3>
<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">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>
<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">Dietary & Tags</h3>
<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">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>
<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">Max Prep Time</h3>
<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>5m</span><span>30m</span><span>1h</span><span>2h+</span>
<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">Show 12 Results</button>
<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>
`;
@@ -55,7 +57,7 @@ export function setupFilter() {
if(timeSlider) {
timeSlider.addEventListener('input', (e) => {
const val = e.target.value;
timeDisplay.textContent = val >= 120 ? '120+ min' : `${val} min`;
timeDisplay.textContent = val >= 120 ? 'ponad 120 min' : `${val} min`;
});
}
}