1<!doctype html><html lang="en" data-theme="bumblebee"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Kalkulator Piekarniczy - Upiecz Sobie Chleb</title><link href="https://upieczsobiechleb.pl/kalkulator-piekarniczy/public/style.css?v=6f89ada" rel="stylesheet">
vendor: 63 bytes, line 1
1<script async src="https://www.googletagmanager.com/gtag/js?id=
1G-ZW7RWZ2JKC
vendor: 11 bytes, line 1
1"></script>
1<script> 2
vendor: 164 bytes, lines 2-6
2window.dataLayer = window.dataLayer || []; 3 function gtag(){dataLayer.push(arguments);} 4 gtag('js', new Date()); 5 6 gtag('config', '
6G-ZW7RWZ2JKC
vendor: 12 bytes, lines 6-7
6'); 7
7</script>
7<script src="https://cdn.jsdelivr.net/npm/@iframe-resizer/child"></script>
7<script src="https://unpkg.com/[email protected]"></script>
7<script src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/3.10.5/cdn.min.js" defer></script>
7<script src="https://www.gstatic.com/firebasejs/9.22.0/firebase-app-compat.js"></script>
7<script src="https://www.gstatic.com/firebasejs/9.22.0/firebase-auth-compat.js"></script>
7<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js.cookie.min.js"></script>
7<script id="config" type="application/json">{"PublicURL":"https://upieczsobiechleb.pl/kalkulator-piekarniczy","FirebaseProjectID":"bakers-toolkit","FirebaseAPIKey":"AIzaSyARXisHyNRphb0zWvWgWDdi6dP9zHkvQCg","Development":false,"BuildVersion":"6f89ada"} 8</script>
8<script src="https://upieczsobiechleb.pl/kalkulator-piekarniczy/public/NoSleep.min.js?v=6f89ada"></script>
8<script src="https://upieczsobiechleb.pl/kalkulator-piekarniczy/public/toolkit.js?v=6f89ada"></script>
8<script> 9 var noSleep = new NoSleep(); 10 document.addEventListener('click', function enableNoSleep() { 11 document.removeEventListener('click', enableNoSleep, false); 12 noSleep.enable(); 13 }, false); 14 </script>
14</head><body class="font-sans bg-base-100"><div class="container mx-auto p-4 max-w-4xl"><div x-data="toolkit()" x-init="init()">
14<script id="user" type="application/json">null 15</script>
15<div class="flex flex-col sm:flex-row sm:justify-between sm:items-center mb-6"><div class="mb-4 sm:mb-0 select-none"><h1 class="text-3xl font-bold text-gray-800"><a href="https://upieczsobiechleb.pl/kalkulator-piekarniczy">Baker's Calculator</a></h1><a href="https://upieczsobiechleb.pl" target="_blank" class="font-bold text-sm italic text-amber-600 hover:text-amber-800 transition-colors">upieczsobiechleb.pl</a></div><div class="flex gap-2 items-center justify-end"><a href="https://upieczsobiechleb.pl/procenty-piekarnicze-i-ich-pochodne-czynnik-mnozenia-wydajnosc-inokulacja-2/" target="_blank" class="btn btn-sm btn-outline mr-2 flex items-center select-none touch-manipulation"><svg class="h-5 w-5 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg> <span class="hidden sm:inline-block ml-1 pointer-events-none">Help</span></a> <button type="button" @click.prevent="toggleSettings()" class="btn btn-sm btn-outline mr-2 select-none touch-manipulation"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 pointer-events-none" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg> <span class="hidden sm:inline-block ml-1 pointer-events-none">Settings</span></button> <button type="button" x-show="!user" @click.prevent="toggleLoginForm()" class="btn btn-sm btn-outline flex items-center select-none touch-manipulation"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 pointer-events-none" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg> <span class="hidden sm:inline-block ml-1 pointer-events-none">Sign In</span></button> <button x-show="user" @click.prevent="signOut()" class="btn btn-sm btn-outline flex items-center select-none touch-manipulation"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 pointer-events-none" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path></svg> <span class="hidden sm:inline-block ml-1 pointer-events-none">Sign Out</span></button></div></div><div x-show="showSettings" x-cloak class="mb-6 bg-base-100 shadow-md rounded-lg p-6 relative"><div class="flex justify-between items-center mb-4"><h2 class="text-2xl font-bold text-gray-800">Settings</h2><button @click="showSettings = false" class="text-gray-500 hover:text-gray-700"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg></button></div><div class="flex items-center gap-4"><label for="language-select" class="text-gray-700">Language</label> <select id="language-select" @change="changeLanguage($event.target.value)" class="select select-bordered"><option value="en" x-bind:selected="isLanguageEN">ðºð¸ English</option> <option value="pl" x-bind:selected="!isLanguageEN">ðµð± Polski</option></select></div></div><div x-show="showLoginForm" x-cloak><div class="mb-6 bg-base-100 shadow-md rounded-lg p-6"><h2 class="text-2xl font-bold mb-4 text-gray-800">Authentication</h2><!-- Error Alert --><div x-show="authError" class="alert alert-error bg-red-100 text-red-800 p-4 rounded-md shadow-md mb-4 border-l-4 border-red-600" x-cloak><div class="flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2 text-red-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg> <span x-text="errorMessage" class="font-medium"></span></div></div><!-- Success Alert --><div x-show="resetSuccess" class="alert alert-success bg-green-100 text-green-800 p-4 rounded-md shadow-md mb-4 border-l-4 border-green-600" x-cloak><div class="flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg> <span>Password reset email sent</span></div></div><!-- Sign In Form --><div x-show="!showPasswordReset"><form @submit.prevent="signIn($event.target.email.value, $event.target.password.value)" class="space-y-4"><div><label for="email" class="block text-sm font-medium text-gray-700 mb-2">Email</label> <input type="email" id="email" name="email" required class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" placeholder="Enter your email"></div><div><label for="password" class="block text-sm font-medium text-gray-700 mb-2">Password</label> <input type="password" id="password" name="password" required class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" placeholder="Enter your password"></div><div class="flex justify-end"><button type="button" @click="showPasswordReset = true" class="text-sm text-blue-600 hover:text-blue-800 py-1 px-2">Forgot password?</button></div><div class="flex space-x-4"><button type="submit" class="btn btn-primary flex-1">Sign In</button> <button type="button" @click="signUp(document.getElementById('email').value, document.getElementById('password').value)" class="btn btn-secondary flex-1">Sign Up</button></div></form></div><!-- Password Reset Form --><div x-show="showPasswordReset" class="bg-blue-50 p-4 rounded-md border border-blue-200"><div class="space-y-4"><h3 class="text-xl font-bold text-gray-800">Reset Password</h3><p class="text-gray-600">Enter your email address and we'll send you a password reset link.</p><form @submit.prevent="sendPasswordReset($event.target.reset_email.value)"><div><label for="reset_email" class="block text-sm font-medium text-gray-700 mb-2">Email</label> <input type="email" id="reset_email" name="reset_email" required class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" placeholder="Enter your email"></div><div class="mt-4 flex space-x-4"><button type="button" @click.prevent="showPasswordReset = false" class="btn btn-outline flex-1">Cancel</button> <button type="submit" class="btn btn-primary flex-1">Reset Password</button></div></form></div></div></div></div></div>
15<script src="https://upieczsobiechleb.pl/kalkulator-piekarniczy/public/calculator.js?v=6f89ada"></script>
15<div x-data="calculator()" x-init="init()"><div id="recipe-data" data-id="" data-name="" data-details="{"totalDoughWeight":1920,"entryMode":"percentage","mode":"simple","precision":"10","isPublic":false,"flours":[{"name":"Wheat","isLevain":false,"percentage":80,"weight":0},{"name":"Rye","isLevain":false,"percentage":20,"weight":0}],"ingredients":[{"name":"Water","isLevain":false,"isHydration":false,"percentage":70,"weight":0},{"name":"Salt","isLevain":false,"isHydration":false,"percentage":2,"weight":0},{"name":"Sourdough","isLevain":false,"isHydration":false,"percentage":20,"weight":0}],"notes":""}"></div><div id="calculator"><div class="bg-white shadow-md rounded-lg p-6 mb-6"><div class="flex flex-col md:flex-row justify-between items-start mb-4"><div class="flex-1 w-full md:w-auto mb-4 md:mb-0"><h4 class="text-sm text-gray-500">Log in to save recipe.</h4><div class="flex items-center mb-4"><label class="mr-2 text-gray-700">Total Dough Weight (g)</label> <input name="totalDoughWeight" type="text" inputmode="decimal" x-model="recipe.totalDoughWeight" @input="updateCalculations(true)" :readonly="isWeightMode()" :class="{ 'bg-gray-100': isWeightMode() }" class="border border-gray-300 rounded-md px-3 py-2 w-32 focus:outline-none focus:ring-2 focus:ring-blue-500"></div><div class="flex flex-wrap justify-start items-center gap-4"><div class="inline-block rounded-lg border-2 border-blue-300 border-dashed bg-blue-50 px-3 py-2"><p class="text-sm font-semibold text-gray-800"><span class="text-blue-600 mr-1">Total Dough Percentage</span> <span x-text="totalDoughPercentage + '%'" class="text-lg font-bold text-blue-800"></span></p></div><div x-show="isExpertMode()" class="inline-block rounded-lg border-2 border-green-300 border-dashed bg-green-50 px-3 py-2"><p class="text-sm font-semibold text-gray-800"><span class="text-green-600 mr-1">Total Levain Weight</span> <span x-text="calculateLevain() + 'g'" class="text-lg font-bold text-green-800"></span></p></div><div x-show="isExpertMode()" class="inline-block rounded-lg border-2 border-green-300 border-dashed bg-green-50 px-3 py-2"><p class="text-sm font-semibold text-gray-800"><span class="text-green-600 mr-1">Pre-fermented Flour</span> <span x-text="calculatePrefermentedFlour() + '%'" class="text-lg font-bold text-green-800"></span></p></div><div x-show="isExpertMode()" class="inline-block rounded-lg border-2 border-green-300 border-dashed bg-green-50 px-3 py-2"><p class="text-sm font-semibold text-gray-800"><span class="text-green-600 mr-1">Hydration</span> <span x-text="calculateHydration() + '%'" class="text-lg font-bold text-green-800"></span></p></div></div></div></div><button type="button" @click="showSettings = !showSettings" class="btn btn-ghost flex items-center btn-sm" :class="{ 'btn-active': showSettings }"><svg class="w-5 h-5 mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" d="M11.828 2.25c-.916 0-1.699.663-1.85 1.567l-.091.549a.798.798 0 0 1-.517.608 7.45 7.45 0 0 0-.478.198.798.798 0 0 1-.796-.064l-.453-.324a1.875 1.875 0 0 0-2.416.2l-.243.243a1.875 1.875 0 0 0-.2 2.416l.324.453a.798.798 0 0 1 .064.796 7.448 7.448 0 0 0-.198.478.798.798 0 0 1-.608.517l-.55.092a1.875 1.875 0 0 0-1.566 1.849v.344c0 .916.663 1.699 1.567 1.85l.549.091c.281.047.508.25.608.517.06.162.127.321.198.478a.798.798 0 0 1-.064.796l-.324.453a1.875 1.875 0 0 0 .2 2.416l.243.243c.648.648 1.67.733 2.416.2l.453-.324a.798.798 0 0 1 .796-.064c.157.071.316.137.478.198.267.1.47.327.517.608l.092.55c.15.903.932 1.566 1.849 1.566h.344c.916 0 1.699-.663 1.85-1.567l.091-.549a.798.798 0 0 1 .517-.608 7.52 7.52 0 0 0 .478-.198.798.798 0 0 1 .796.064l.453.324a1.875 1.875 0 0 0 2.416-.2l.243-.243c.648-.648.733-1.67.2-2.416l-.324-.453a.798.798 0 0 1-.064-.796c.071-.157.137-.316.198-.478.1-.267.327-.47.608-.517l.55-.091a1.875 1.875 0 0 0 1.566-1.85v-.344c0-.916-.663-1.699-1.567-1.85l-.549-.091a.798.798 0 0 1-.608-.517 7.507 7.507 0 0 0-.198-.478.798.798 0 0 1 .064-.796l.324-.453a1.875 1.875 0 0 0-.2-2.416l-.243-.243a1.875 1.875 0 0 0-2.416-.2l-.453.324a.798.798 0 0 1-.796.064 7.462 7.462 0 0 0-.478-.198.798.798 0 0 1-.517-.608l-.091-.55a1.875 1.875 0 0 0-1.85-1.566h-.344ZM12 15.75a3.75 3.75 0 1 0 0-7.5 3.75 3.75 0 0 0 0 7.5Z" clip-rule="evenodd"></path></svg> <span>Settings</span></button><div x-show="showSettings" x-transition class="mt-5"><div class="space-y-4"><!-- Weight/Percent Mode --><div><label class="block text-sm font-medium mb-2">Entry mode</label><div class="join w-full md:w-1/2"><label class="join-item btn flex flex-1 items-center justify-center" :class="{'btn-primary': recipe.entryMode === 'percentage'}"><input type="radio" class="hidden" name="entryMode" x-model="recipe.entryMode" value="percentage" @change="updateCalculations(true)"><svg class="w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M10.5 6a7.5 7.5 0 1 0 7.5 7.5h-7.5V6Z"></path> <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 10.5H21A7.5 7.5 0 0 0 13.5 3v7.5Z"></path></svg> <span>Percent Mode</span></label> <label class="join-item btn flex flex-1 items-center justify-center" :class="{'btn-primary': recipe.entryMode === 'weight'}"><input type="radio" class="hidden" name="entryMode" x-model="recipe.entryMode" value="weight" @change="updateCalculations(true)"><svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 6l3 1m0 0l-3 9a5.002 5.002 0 006.001 0M6 7l3 9M6 7l6-2m6 2l3-1m-3 1l-3 9a5.002 5.002 0 006.001 0M18 7l3 9m-3-9l-6-2m0-2v2m0 16V5m0 16H9m3 0h3"></path></svg> <span>Weight Mode</span></label></div></div><!-- Simple/Expert Mode --><div><label class="block text-sm font-medium mb-2">Expert Mode</label><div class="join w-full md:w-1/2"><label class="join-item btn flex flex-1 items-center justify-center" :class="{'btn-primary': recipe.mode === 'simple'}"><input type="radio" class="hidden" name="mode" x-model="recipe.mode" value="simple" @change="updateCalculations(true)"><svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 1 1 7.072 0l-.548.547A3.374 3.374 0 0 0 14 18.469V19a2 2 0 1 1-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path></svg> <span>Simple Mode</span></label> <label class="join-item btn flex flex-1 items-center justify-center" :class="{'btn-primary': recipe.mode === 'expert'}"><input type="radio" class="hidden" name="mode" x-model="recipe.mode" value="expert" @change="updateCalculations(true)"><svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"></path></svg> <span>Expert Mode</span></label></div></div><!-- Precision setting --><div><label class="block text-sm font-medium mb-2">Precision</label><div class="join w-full md:w-1/2"><label class="join-item btn flex flex-1 items-center justify-center" :class="{'btn-primary': recipe.precision === '1'}"><input type="radio" class="hidden" name="precision" x-model="recipe.precision" value="1" @change="updateCalculations(true)"><span>1</span></label> <label class="join-item btn flex flex-1 items-center justify-center" :class="{'btn-primary': recipe.precision === '10'}"><input type="radio" class="hidden" name="precision" x-model="recipe.precision" value="10" @change="updateCalculations(true)"><span>1.0</span></label> <label class="join-item btn flex flex-1 items-center justify-center" :class="{'btn-primary': recipe.precision === '100'}"><input type="radio" class="hidden" name="precision" x-model="recipe.precision" value="100" @change="updateCalculations(true)"><span>1.00</span></label></div></div></div></div></div> <div class="bg-white shadow-md rounded-lg p-6 mb-6"><h2 class="text-2xl font-bold mb-4 text-gray-800">Flours</h2><div class="overflow-x-auto"><div class="inline-block min-w-full"><div class="grid gap-2 mb-2 text-sm font-semibold text-gray-700 mobile-grid" :class="isExpertMode() ? 'grid-cols-[40px_60px_1fr_1fr_1fr]' : 'grid-cols-[40px_1fr_1fr_1fr]'"><div></div><div x-show="isExpertMode()">Levain</div><div>Name</div><div><span x-text="floursPercentage + '%'" :class="{'text-red-600 font-bold': floursPercentageError}"></span> <span x-show="floursPercentageError" class="text-red-600 font-bold ml-2">(!)</span><div x-show="floursPercentageError" class="text-red-600 text-xs mt-1">Should sum to 100%</div></div><div x-text="floursWeight + 'g'"></div></div><template x-for="(flour, index) in recipe.flours" :key="index"><div class="grid gap-2 mb-2 items-center mobile-grid" :class="isExpertMode() ? 'grid-cols-[40px_60px_1fr_1fr_1fr]' : 'grid-cols-[40px_1fr_1fr_1fr]'"><button type="button" @click="removeFlour(index)" class="btn btn-sm btn-error w-8 min-w-8 p-0">-</button>
15 <label x-show="isExpertMode()" @click="flour.isLevain = !flour.isLevain; updateCalculations(true)" class="btn btn-sm" :class="{'btn-accent': flour.isLevain}"><input type="hidden" name="flours.isLevain" x-model="flour.isLevain"> <span x-text="flour.isLevain ? 'âï¸' : '-'"></span></label> <input type="text" name="flours.name" x-model="flour.name" @input="onRecipeChanged()" placeholder="Name" class="border border-gray-300 rounded-md px-2 py-1 focus:outline-none focus:ring-2 focus:ring-blue-500 w-full"> <input type="text" name="flours.percentage" inputmode="decimal" x-model="flour.percentage" @input="updateCalculations(true)" :readonly="isWeightMode()" :class="{ 16 'bg-gray-100': isWeightMode(), 17 'border-red-500': !isWeightMode() && floursPercentageError 18 }" class="border border-gray-300 rounded-md px-2 py-1 focus:outline-none focus:ring-2 focus:ring-blue-500 w-full"> <input type="text" name="flours.weight" inputmode="decimal" x-model="flour.weight" @input="updateCalculations(true)" :readonly="!isWeightMode()" :class="{ 'bg-gray-100': !isWeightMode() }" class="border border-gray-300 rounded-md px-2 py-1 focus:outline-none focus:ring-2 focus:ring-blue-500 w-full"></div></template></div></div><button type="button" @click="addFlour()" class="mt-4 btn btn-sm btn-primary"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-5"><path fill-rule="evenodd" d="M12 3.75a.75.75 0 0 1 .75.75v6.75h6.75a.75.75 0 0 1 0 1.5h-6.75v6.75a.75.75 0 0 1-1.5 0v-6.75H4.5a.75.75 0 0 1 0-1.5h6.75V4.5a.75.75 0 0 1 .75-.75Z" clip-rule="evenodd"></path></svg>Add Flour</button></div> <div class="bg-white shadow-md rounded-lg p-6 mb-6"><h2 class="text-2xl font-bold mb-4 text-gray-800">Ingredients</h2><div class="overflow-x-auto"><div class="inline-block min-w-full"><div class="grid gap-2 mb-2 text-sm font-semibold text-gray-700 mobile-grid" :class="isExpertMode() ? 'grid-cols-[40px_60px_60px_1fr_1fr_1fr]' : 'grid-cols-[40px_1fr_1fr_1fr]'"><div></div><div x-show="isExpertMode()">Levain</div><div x-show="isExpertMode()">Hydration</div><div>Name</div><div x-text="ingredientsPercentage + '%'"></div><div x-text="ingredientsWeight + 'g'"></div></div><template x-for="(ingredient, index) in recipe.ingredients" :key="index"><div class="grid gap-2 mb-2 items-center mobile-grid" :class="isExpertMode() ? 'grid-cols-[40px_60px_60px_1fr_1fr_1fr]' : 'grid-cols-[40px_1fr_1fr_1fr]'"><button type="button" @click="removeIngredient(index)" class="btn btn-sm btn-error w-8 min-w-8 p-0">-</button> <label x-show="isExpertMode()" @click="ingredient.isLevain = !ingredient.isLevain; updateCalculations(true)" class="btn btn-sm" :class="{'btn-accent': ingredient.isLevain}"><input type="hidden" name="ingredients.isLevain" x-model="ingredient.isLevain"> <span x-text="ingredient.isLevain ? 'âï¸' : '-'"></span></label> <label x-show="isExpertMode()" @click="ingredient.isHydration = !ingredient.isHydration; updateCalculations(true)" class="btn btn-sm" :class="{'btn-info': ingredient.isHydration}"><input type="hidden" name="ingredients.isHydration" x-model="ingredient.isHydration"> <span x-text="ingredient.isHydration ? 'ð§' : '-'"></span></label> <input type="text" name="ingredients.name" x-model="ingredient.name" @input="onRecipeChanged()" placeholder="Name" class="border border-gray-300 rounded-md px-2 py-1 focus:outline-none focus:ring-2 focus:ring-blue-500 w-full"> <input type="text" name="ingredients.percentage" inputmode="decimal" x-model="ingredient.percentage" @input="updateCalculations(true)" :readonly="isWeightMode()" :class="{ 'bg-gray-100': isWeightMode() }" class="border border-gray-300 rounded-md px-2 py-1 focus:outline-none focus:ring-2 focus:ring-blue-500 w-full"> <input type="text" name="ingredients.weight" inputmode="decimal" x-model="ingredient.weight" @input="updateCalculations(true)" :readonly="!isWeightMode()" :class="{ 'bg-gray-100': !isWeightMode() }" class="border border-gray-300 rounded-md px-2 py-1 focus:outline-none focus:ring-2 focus:ring-blue-500
18w-full"></div></template></div></div><button type="button" @click="addIngredient()" class="mt-4 btn btn-sm btn-primary"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-5"><path fill-rule="evenodd" d="M12 3.75a.75.75 0 0 1 .75.75v6.75h6.75a.75.75 0 0 1 0 1.5h-6.75v6.75a.75.75 0 0 1-1.5 0v-6.75H4.5a.75.75 0 0 1 0-1.5h6.75V4.5a.75.75 0 0 1 .75-.75Z" clip-rule="evenodd"></path></svg>Add Ingredient</button></div></div></div><footer class="mt-8 pt-4 pb-4 border-t border-gray-200 text-center text-gray-600 text-sm">© 2025 <a class="underline" href="https://upieczsobiechleb.pl" target="_blank">Upiecz Sobie Chleb</a><br><a class="underline" href="https://www.instagram.com/maks_smolka_baker/" target="_blank">Maksymilian SmóÅka</a> & <a class="underline" href="https://github.com/m110" target="_blank">MiÅosz SmóÅka</a><br><span class="text-sm text-gray-400">Version: 6f89ada</span></footer></div></body></html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.