ulfr/recipe-mockup
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
0649346814d2ae5fba310c8c12bf20b428d7e9c2
recipe-mockup/index.html
ulfrxdev 422b29e3f0
All checks were successful
Build and Deploy / build-and-push (push) Successful in 1m16s
Details
Update style
2026-04-06 22:32:46 +02:00

631 lines
28 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="theme-color" content="#2d2e2b">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="Recipe">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
<title>Recipe App - Modular</title>
<link rel="manifest" href="./manifest.webmanifest?v=20260406-63">
<link rel="icon" type="image/png" sizes="192x192" href="./icons/icon-192.png">
<link rel="apple-touch-icon" href="./icons/apple-touch-icon.png">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
:root {
color-scheme: light;
--app-font: 'Plus Jakarta Sans', 'Segoe UI', sans-serif;
--app-bg-rgb: 243, 239, 233;
--surface-rgb: 255, 255, 255;
--surface-soft-rgb: 247, 242, 236;
--surface-strong-rgb: 235, 229, 221;
--line-rgb: 69, 58, 48;
--text-primary-rgb: 28, 24, 21;
--text-secondary-rgb: 102, 92, 83;
--text-tertiary-rgb: 156, 146, 137;
--accent-rgb: 111, 149, 255;
--warm-rgb: 183, 142, 88;
--success-rgb: 98, 171, 132;
--danger-rgb: 210, 116, 116;
--panel-shadow: 0 18px 40px rgba(24, 17, 11, 0.08);
--panel-shadow-strong: 0 24px 60px rgba(24, 17, 11, 0.16);
--dock-shadow: 0 24px 56px rgba(24, 17, 11, 0.18);
--highlight-top: rgba(111, 149, 255, 0.14);
--highlight-bottom: rgba(97, 184, 180, 0.12);
}
.dark {
color-scheme: dark;
--app-bg-rgb: 45, 46, 43;
--surface-rgb: 37, 35, 33;
--surface-soft-rgb: 46, 43, 40;
--surface-strong-rgb: 58, 55, 51;
--line-rgb: 255, 249, 239;
--text-primary-rgb: 246, 241, 232;
--text-secondary-rgb: 183, 173, 161;
--text-tertiary-rgb: 129, 121, 112;
--accent-rgb: 134, 171, 255;
--warm-rgb: 198, 156, 101;
--success-rgb: 109, 194, 144;
--danger-rgb: 220, 127, 127;
--panel-shadow: 0 22px 56px rgba(0, 0, 0, 0.24);
--panel-shadow-strong: 0 30px 82px rgba(0, 0, 0, 0.42);
--dock-shadow: 0 30px 84px rgba(0, 0, 0, 0.42);
--highlight-top: transparent;
--highlight-bottom: transparent;
}
* { touch-action: manipulation; }
html, body { min-height: 100%; }
body {
font-family: var(--app-font);
background: rgb(var(--app-bg-rgb));
color: rgb(var(--text-primary-rgb));
}
button, input, select, textarea { font-family: inherit; }
button { -webkit-tap-highlight-color: transparent; }
#app-container {
background: transparent !important;
isolation: isolate;
}
#app-container::before,
#app-container::after { display: none; }
/* Slider styling */
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
height: 20px;
width: 20px;
border-radius: 50%;
background: rgb(var(--accent-rgb));
border: 2px solid rgba(var(--surface-rgb), 0.9);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
cursor: pointer;
margin-top: -8px;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 4px;
cursor: pointer;
background: rgba(var(--line-rgb), 0.16);
border-radius: 999px;
}
/* Ingredient Active States */
.ingredient-active .check-box,
.ingredient-active .rd-check-box { background-color: rgba(var(--surface-strong-rgb), 1); border-color: rgba(var(--surface-strong-rgb), 1); }
.ingredient-active .check-icon,
.ingredient-active .rd-check-icon { display: block; }
.ingredient-active .ingredient-text,
.ingredient-active .rd-ing-text { text-decoration: line-through; color: rgba(var(--text-tertiary-rgb), 0.94); }
/* Utilities */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; }
/* Shared palette overrides */
.bg-white { background-color: rgba(var(--surface-rgb), 0.9) !important; }
.bg-gray-50 { background-color: rgb(var(--app-bg-rgb)) !important; }
.bg-gray-100 { background-color: rgba(var(--surface-soft-rgb), 0.92) !important; }
.bg-gray-200 { background-color: rgba(var(--surface-strong-rgb), 0.94) !important; }
.bg-gray-900 {
background: linear-gradient(180deg, rgba(var(--surface-strong-rgb), 1) 0%, rgba(var(--surface-soft-rgb), 1) 100%) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 12px 28px rgba(0, 0, 0, 0.18) !important;
}
.border-gray-900 { border-color: rgba(var(--accent-rgb), 0.42) !important; }
.bg-white\/90 { background-color: rgba(var(--surface-rgb), 0.9) !important; }
.bg-white\/80 { background-color: rgba(var(--surface-rgb), 0.78) !important; }
.bg-gray-50\/80 { background-color: rgba(var(--surface-soft-rgb), 0.72) !important; }
.bg-gray-50\/90 { background-color: rgba(var(--surface-soft-rgb), 0.84) !important; }
.text-gray-900 { color: rgb(var(--text-primary-rgb)) !important; }
.text-gray-800 { color: rgba(var(--text-primary-rgb), 0.94) !important; }
.text-gray-700 { color: rgba(var(--text-primary-rgb), 0.82) !important; }
.text-gray-600 { color: rgba(var(--text-secondary-rgb), 0.96) !important; }
.text-gray-500 { color: rgba(var(--text-secondary-rgb), 0.78) !important; }
.text-gray-400 { color: rgba(var(--text-tertiary-rgb), 0.94) !important; }
.text-gray-300 { color: rgba(var(--text-tertiary-rgb), 0.62) !important; }
.text-black { color: rgb(var(--text-primary-rgb)) !important; }
.border-gray-200 { border-color: rgba(var(--line-rgb), 0.14) !important; }
.border-gray-100 { border-color: rgba(var(--line-rgb), 0.08) !important; }
.border-gray-300 { border-color: rgba(var(--line-rgb), 0.22) !important; }
.border-dashed { border-color: rgba(var(--line-rgb), 0.2) !important; }
.divide-gray-50 > :not([hidden]) ~ :not([hidden]) { border-color: rgba(var(--line-rgb), 0.06) !important; }
.divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: rgba(var(--line-rgb), 0.08) !important; }
.divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: rgba(var(--line-rgb), 0.14) !important; }
.divide-red-50 > :not([hidden]) ~ :not([hidden]) { border-color: rgba(var(--danger-rgb), 0.1) !important; }
.ring-gray-200 { --tw-ring-color: rgba(var(--line-rgb), 0.16) !important; }
.ring-gray-900 { --tw-ring-color: rgba(var(--accent-rgb), 0.52) !important; }
.hover\:bg-gray-50:hover { background-color: rgba(var(--surface-soft-rgb), 0.94) !important; }
.hover\:bg-gray-100:hover { background-color: rgba(var(--surface-strong-rgb), 0.94) !important; }
.hover\:bg-white:hover { background-color: rgba(var(--surface-rgb), 0.98) !important; }
.hover\:bg-black:hover { background-color: rgba(var(--surface-strong-rgb), 1) !important; }
.hover\:bg-red-50:hover { background-color: rgba(var(--danger-rgb), 0.12) !important; }
.hover\:text-gray-700:hover,
.hover\:text-gray-900:hover,
.hover\:text-black:hover { color: rgb(var(--text-primary-rgb)) !important; }
.hover\:text-red-600:hover { color: rgba(var(--danger-rgb), 1) !important; }
.hover\:border-gray-300:hover { border-color: rgba(var(--line-rgb), 0.28) !important; }
.hover\:border-gray-400:hover { border-color: rgba(var(--line-rgb), 0.34) !important; }
.hover\:border-gray-900:hover { border-color: rgba(var(--accent-rgb), 0.54) !important; }
.hover\:border-red-200:hover { border-color: rgba(var(--danger-rgb), 0.34) !important; }
.focus\:border-gray-400:focus { border-color: rgba(var(--accent-rgb), 0.54) !important; }
.focus\:border-gray-300:focus { border-color: rgba(var(--accent-rgb), 0.44) !important; }
.shadow-lg { box-shadow: var(--panel-shadow-strong) !important; }
.shadow-sm { box-shadow: var(--panel-shadow) !important; }
input, select, textarea {
background-color: rgba(var(--surface-soft-rgb), 0.88) !important;
color: rgb(var(--text-primary-rgb)) !important;
border-color: rgba(var(--line-rgb), 0.16) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
backdrop-filter: blur(18px);
}
input::placeholder, textarea::placeholder { color: rgba(var(--text-tertiary-rgb), 0.9) !important; }
#app-toast .rounded-xl,
#planner-toast .rounded-xl {
background: linear-gradient(180deg, rgba(var(--surface-strong-rgb), 1), rgba(var(--surface-soft-rgb), 1)) !important;
color: rgb(var(--text-primary-rgb)) !important;
border: 1px solid rgba(var(--line-rgb), 0.14);
box-shadow: var(--panel-shadow);
}
.bg-amber-50 { background-color: rgba(var(--warm-rgb), 0.12) !important; }
.bg-amber-50\/30 { background-color: rgba(var(--warm-rgb), 0.09) !important; }
.bg-amber-50\/50 { background-color: rgba(var(--warm-rgb), 0.14) !important; }
.bg-amber-100\/50 { background-color: rgba(var(--warm-rgb), 0.18) !important; }
.hover\:bg-amber-100\/50:hover { background-color: rgba(var(--warm-rgb), 0.22) !important; }
.border-amber-200 { border-color: rgba(var(--warm-rgb), 0.28) !important; }
.border-amber-200\/80 { border-color: rgba(var(--warm-rgb), 0.26) !important; }
.border-amber-200\/60 { border-color: rgba(var(--warm-rgb), 0.2) !important; }
.border-amber-100 { border-color: rgba(var(--warm-rgb), 0.14) !important; }
.text-amber-900\/70 { color: rgba(var(--warm-rgb), 0.78) !important; }
.text-amber-900\/80 { color: rgba(var(--warm-rgb), 0.84) !important; }
.text-amber-900 { color: rgb(var(--warm-rgb)) !important; }
.text-amber-600 { color: rgba(var(--warm-rgb), 0.96) !important; }
.text-amber-500 { color: rgba(var(--warm-rgb), 0.9) !important; }
.bg-amber-500 { background-color: rgba(var(--warm-rgb), 0.92) !important; }
.divide-amber-100\/80 > :not([hidden]) ~ :not([hidden]) { border-color: rgba(var(--warm-rgb), 0.14) !important; }
.bg-emerald-50 { background-color: rgba(var(--success-rgb), 0.12) !important; }
.bg-emerald-100 { background-color: rgba(var(--success-rgb), 0.2) !important; }
.bg-emerald-500 { background-color: rgba(var(--success-rgb), 0.92) !important; }
.bg-emerald-600 { background-color: rgba(var(--success-rgb), 0.96) !important; }
.hover\:bg-emerald-700:hover { background-color: rgba(var(--success-rgb), 1) !important; }
.hover\:bg-emerald-100\/80:hover { background-color: rgba(var(--success-rgb), 0.2) !important; }
.border-emerald-200\/80 { border-color: rgba(var(--success-rgb), 0.26) !important; }
.text-emerald-800 { color: rgba(var(--success-rgb), 1) !important; }
.text-emerald-600 { color: rgba(var(--success-rgb), 0.94) !important; }
.text-emerald-600\/80 { color: rgba(var(--success-rgb), 0.82) !important; }
.text-emerald-500 { color: rgba(var(--success-rgb), 0.9) !important; }
.bg-red-50 { background-color: rgba(var(--danger-rgb), 0.12) !important; }
.bg-red-100 { background-color: rgba(var(--danger-rgb), 0.2) !important; }
.bg-red-500 { background-color: rgba(var(--danger-rgb), 0.94) !important; }
.border-red-200\/80 { border-color: rgba(var(--danger-rgb), 0.26) !important; }
.border-red-100\/80 { border-color: rgba(var(--danger-rgb), 0.16) !important; }
.text-red-800 { color: rgba(var(--danger-rgb), 1) !important; }
.text-red-600 { color: rgba(var(--danger-rgb), 0.96) !important; }
.text-red-600\/80 { color: rgba(var(--danger-rgb), 0.82) !important; }
.text-red-500 { color: rgba(var(--danger-rgb), 0.9) !important; }
.text-red-400 { color: rgba(var(--danger-rgb), 0.78) !important; }
/* App shell */
#main-view,
#planner-view,
#pantry-view {
background: rgb(var(--app-bg-rgb)) !important;
}
#main-view,
#main-view > div:last-child,
#recipe-grid {
background: #2d2e2b !important;
}
#planner-view,
#planner-view > div:first-child,
#planner-scroll,
#calendar-swipe-zone,
#calendar-week-wrap,
#calendar-month-wrap,
#planner-meal-slots {
background: #2d2e2b !important;
}
#main-view > div:first-child,
#planner-view > div:first-child,
#pantry-view > div:first-child,
#filter-view > div:first-child,
#filter-view > div:last-child {
background: rgb(var(--app-bg-rgb)) !important;
backdrop-filter: none;
}
/* Cards and sheets */
#recipe-grid > div {
background: #393937 !important;
border: none !important;
border-radius: 1.75rem !important;
box-shadow: none !important;
transition: transform 180ms ease, box-shadow 180ms ease !important;
}
#recipe-grid > div:hover {
transform: translateY(-2px);
box-shadow: none !important;
}
#recipe-grid > div img {
transition: transform 240ms ease;
}
#recipe-grid > div:hover img {
transform: scale(1.04);
}
#recipe-grid > div > div:first-child::after,
#rd-hero::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(var(--app-bg-rgb), 0.5) 92%);
pointer-events: none;
}
#recipe-search-shell {
min-height: 3rem;
width: min(calc(100% - 0.5rem), 22.4rem);
margin-inline: auto;
position: relative;
z-index: 0;
isolation: isolate;
border-radius: 999px;
background: #393937 !important;
border: 1px solid #41423f !important;
box-shadow:
0 5px 10px rgba(0, 0, 0, 0.16),
0 14px 22px rgba(0, 0, 0, 0.24),
0 22px 34px rgba(0, 0, 0, 0.18),
inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
}
#recipe-search-shell::after {
content: '';
position: absolute;
left: 11%;
right: 11%;
bottom: -0.72rem;
height: 1.05rem;
border-radius: 999px;
background: rgba(0, 0, 0, 0.36);
filter: blur(12px);
opacity: 0.9;
z-index: -1;
pointer-events: none;
}
#recipe-search-shell:focus-within {
background: #393937 !important;
border: 1px solid #4a4b47 !important;
box-shadow:
0 6px 12px rgba(0, 0, 0, 0.18),
0 16px 24px rgba(0, 0, 0, 0.24),
0 24px 36px rgba(0, 0, 0, 0.18),
inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}
#recipe-search-input {
appearance: none;
-webkit-appearance: none;
background: transparent !important;
border: none !important;
box-shadow: none !important;
backdrop-filter: none !important;
color: #dfd9cf !important;
caret-color: #dfd9cf;
font-size: 15px;
font-weight: 400;
letter-spacing: -0.02em;
}
#recipe-search-input::placeholder {
color: #beb8ae !important;
opacity: 1;
}
#recipe-filter-btn {
border-radius: 999px;
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
#recipe-filter-btn:hover {
background: rgba(255, 255, 255, 0.03) !important;
}
#planner-picker-sheet,
#planner-ing-sheet,
#pv2-edit-sheet,
#mpe-sheet,
#recipe-detail-view > div:last-child {
background: linear-gradient(180deg, rgba(var(--surface-rgb), 0.98) 0%, rgba(var(--surface-soft-rgb), 1) 100%) !important;
border: 1px solid rgba(var(--line-rgb), 0.14);
border-bottom: 0;
backdrop-filter: blur(34px);
box-shadow: var(--panel-shadow-strong) !important;
}
#recipe-detail-view {
background: rgba(var(--app-bg-rgb), 0.92) !important;
backdrop-filter: blur(18px);
}
#filter-view {
background: rgb(var(--app-bg-rgb)) !important;
backdrop-filter: none;
}
#planner-picker-backdrop,
#planner-ing-backdrop,
#pv2-edit-bg,
#mpe-overlay {
background: rgba(7, 6, 5, 0.42) !important;
backdrop-filter: blur(10px);
}
/* Bottom dock */
#app-bottom-nav {
position: absolute;
inset-inline: 0;
bottom: 0;
z-index: 30;
display: flex;
justify-content: center;
padding: 0 0.85rem calc(1.12rem + env(safe-area-inset-bottom));
pointer-events: none;
}
#app-bottom-nav .bottom-dock {
position: relative;
box-sizing: border-box;
width: min(calc(100% - 3.6rem), 20.9rem);
height: 3.34rem;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
align-items: stretch;
gap: 0.06rem;
padding: 0.22rem;
border-radius: 1.68rem;
background: #393937;
border: 1px solid #41423f;
box-shadow:
inset 0 1px 8px rgba(0, 0, 0, 0.15),
0 5px 10px rgba(0, 0, 0, 0.16),
0 14px 22px rgba(0, 0, 0, 0.24),
0 22px 34px rgba(0, 0, 0, 0.18);
pointer-events: auto;
}
#app-bottom-nav .nav-slot {
min-width: 0;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#app-bottom-nav .nav-tab,
#app-bottom-nav .nav-action {
appearance: none;
-webkit-appearance: none;
border: 0;
background: transparent !important;
box-shadow: none !important;
width: 2.18rem;
height: 2.18rem;
margin: 0;
padding: 0;
border-radius: 1.35rem;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
color: #ece8e0;
cursor: pointer;
transition:
transform 160ms ease,
color 160ms ease,
background-color 160ms ease,
box-shadow 180ms ease;
}
#app-bottom-nav .nav-tab i,
#app-bottom-nav .nav-action i {
font-size: 0.95rem;
line-height: 1;
}
#app-bottom-nav .nav-tab:hover,
#app-bottom-nav .nav-action:hover {
transform: translateY(-1px);
color: #ffffff;
background: rgba(255, 255, 255, 0.04) !important;
}
#app-bottom-nav .nav-tab.is-active {
width: 100%;
height: 100%;
color: #fff;
background: #2d2e2b !important;
border-radius: 1.46rem;
box-shadow: none !important;
}
#app-bottom-nav .nav-tab:active,
#app-bottom-nav .nav-action:active {
transform: scale(0.97);
}
#app-bottom-nav button:focus-visible {
outline: none;
box-shadow:
0 0 0 3px rgba(255, 255, 255, 0.08),
0 0 0 6px rgba(var(--accent-rgb), 0.26) !important;
}
@media (max-width: 380px) {
#app-bottom-nav {
padding-inline: 0.7rem;
}
#app-bottom-nav .bottom-dock {
width: min(calc(100% - 2.4rem), 19.7rem);
height: 3.12rem;
gap: 0.05rem;
padding: 0.2rem;
border-radius: 1.56rem;
}
#app-bottom-nav .nav-tab,
#app-bottom-nav .nav-action {
width: 2.02rem;
height: 2.02rem;
border-radius: 1.28rem;
}
#app-bottom-nav .nav-tab.is-active {
height: 100%;
width: 100%;
border-radius: 1.36rem;
}
}
/* Planner and common interactive surfaces */
#planner-open-ingredients,
.planner-pick-recipe,
#mpe-nutrition-section > div,
#mpe-add-area > div,
#pv2-edit-nutrition ul {
box-shadow: var(--panel-shadow) !important;
}
.planner-pick-recipe,
.pv2-chip,
.pv2-cat-chip,
.mpe-slot-btn,
#filter-slot-chips button,
#filter-tag-chips button,
#rd-tags span {
transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}
.planner-pick-recipe:hover { transform: translateY(-1px); }
</style>
</head>
<body class="m-0 min-h-dvh bg-white text-gray-800 antialiased">
<script>
const savedTheme = localStorage.getItem('theme');
const useDarkTheme = savedTheme ? savedTheme === 'dark' : true;
if (useDarkTheme) document.documentElement.classList.add('dark');
document.querySelector('meta[name="theme-color"]')?.setAttribute('content', useDarkTheme ? '#2d2e2b' : '#f3efe9');
</script>
<div id="app-container" class="relative flex h-dvh min-h-0 w-full flex-col overflow-hidden bg-white">
<div class="flex h-full items-center justify-center" style="background:#2d2e2b !important;">
<div class="text-[13px] font-medium" style="color:#b7ada1 !important;">Ładowanie...</div>
</div>
</div>
<script>
const APP_ASSET_VERSION = '20260406-63';
const APP_VERSION_STORAGE_KEY = 'recipe-app-asset-version';
const APP_VERSION_QUERY_KEY = 'appv';
window.__APP_ASSET_VERSION__ = APP_ASSET_VERSION;
window.__APP_BOOTSTRAP__ = (async () => {
try {
const previousVersion = localStorage.getItem(APP_VERSION_STORAGE_KEY);
if (previousVersion === APP_ASSET_VERSION) return;
localStorage.setItem(APP_VERSION_STORAGE_KEY, APP_ASSET_VERSION);
if ('serviceWorker' in navigator) {
const registrations = await navigator.serviceWorker.getRegistrations().catch(() => []);
await Promise.all(registrations.map((registration) => registration.unregister().catch(() => false)));
}
if ('caches' in window) {
const cacheKeys = await caches.keys().catch(() => []);
await Promise.all(cacheKeys.map((key) => caches.delete(key).catch(() => false)));
}
const nextUrl = new URL(window.location.href);
if (nextUrl.searchParams.get(APP_VERSION_QUERY_KEY) !== APP_ASSET_VERSION) {
nextUrl.searchParams.set(APP_VERSION_QUERY_KEY, APP_ASSET_VERSION);
window.location.replace(nextUrl.toString());
await new Promise(() => {});
}
} catch (_) {
/* Ignore bootstrap cache reset errors and continue loading the app. */
}
})();
</script>
<script type="module">
const appVersion = window.__APP_ASSET_VERSION__ || '20260406-63';
const recoveryKey = `recipe-app-recovery-${appVersion}`;
function renderBootstrapError(message) {
const appContainer = document.getElementById('app-container');
if (!appContainer) return;
appContainer.innerHTML = `
<div class="flex h-full items-center justify-center px-6 text-center" style="background:#2d2e2b !important;">
<div class="max-w-[18rem] rounded-[1.5rem] border px-5 py-6" style="background:#2f2f2d !important; border-color:#444442 !important;">
<p class="text-sm font-semibold" style="color:#f2efe8 !important;">Aplikacja nie wystartowała</p>
<p class="mt-2 text-xs leading-relaxed" style="color:#b7ada1 !important;">${message}</p>
<button type="button" onclick="window.location.reload()" class="mt-4 h-10 px-4 rounded-full border text-[12px] font-semibold" style="background:#23221e !important; border-color:#787876 !important; color:#f2efe8 !important;">Odśwież</button>
</div>
</div>
`;
}
async function tryRecoveryReload() {
if (sessionStorage.getItem(recoveryKey)) return false;
sessionStorage.setItem(recoveryKey, '1');
try {
localStorage.removeItem(APP_VERSION_STORAGE_KEY);
if ('serviceWorker' in navigator) {
const registrations = await navigator.serviceWorker.getRegistrations().catch(() => []);
await Promise.all(registrations.map((registration) => registration.unregister().catch(() => false)));
}
if ('caches' in window) {
const cacheKeys = await caches.keys().catch(() => []);
await Promise.all(cacheKeys.map((key) => caches.delete(key).catch(() => false)));
}
} catch (_) {
/* Ignore recovery cleanup errors. */
}
const nextUrl = new URL(window.location.href);
nextUrl.searchParams.set(APP_VERSION_QUERY_KEY, appVersion);
nextUrl.searchParams.set('recover', Date.now().toString());
window.location.replace(nextUrl.toString());
return true;
}
try {
await window.__APP_BOOTSTRAP__;
if ('serviceWorker' in navigator) {
try {
const registration = await navigator.serviceWorker.register(`./sw.js?v=${encodeURIComponent(appVersion)}`, {
scope: './',
updateViaCache: 'none',
});
registration.update().catch(() => {});
} catch (_) {
/* Ignore service worker registration failures. */
}
}
await import(`./js/app.js?v=${encodeURIComponent(appVersion)}`);
sessionStorage.removeItem(recoveryKey);
} catch (error) {
console.error('Bootstrap failed', error);
const reloading = await tryRecoveryReload();
if (!reloading) {
renderBootstrapError('Spróbuj odświeżyć aplikację. Jeśli to nie pomoże, otwórz ją ponownie z Safari.');
}
}
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink