638 lines
28 KiB
HTML
638 lines
28 KiB
HTML
<!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=20260408-82">
|
|
<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 > * {
|
|
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 > *:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: none !important;
|
|
}
|
|
#recipe-grid > * img {
|
|
transition: transform 240ms ease;
|
|
}
|
|
#recipe-grid > *:hover img {
|
|
transform: scale(1.04);
|
|
}
|
|
#recipe-grid > * > 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,
|
|
#planner-picker-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,
|
|
#planner-picker-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,
|
|
#planner-picker-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,
|
|
#planner-picker-search {
|
|
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,
|
|
#planner-picker-search::placeholder {
|
|
color: #beb8ae !important;
|
|
opacity: 1;
|
|
}
|
|
#recipe-filter-btn,
|
|
#planner-picker-filter-btn {
|
|
border-radius: 999px;
|
|
background: transparent !important;
|
|
border: none !important;
|
|
box-shadow: none !important;
|
|
}
|
|
#recipe-filter-btn:hover,
|
|
#planner-picker-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 = '20260408-82';
|
|
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__ || '20260408-82';
|
|
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>
|